/* ============ TOKENS ============ */
:root{
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-alt: #FAFBFC;
  --border: #E5E7EB;
  --border-soft: #EEF0F2;

  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;

  --brand: #a5c83c;
  --brand-soft: #F4F8E6;

  --sidebar-w: 248px;
  --radius: 10px;
  --radius-sm: 6px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 12px rgba(16,24,40,.06);

  /* acentos de estado */
  --c-todas: #2563EB;      --c-todas-bg: #EFF6FF;
  --c-ndpendiente: #D97706; --c-ndpendiente-bg: #FFFBEB;
  --c-impaga: #DC2626;      --c-impaga-bg: #FEF2F2;
  --c-pagada: #16A34A;      --c-pagada-bg: #F0FDF4;
  --c-comisionable: #9333EA; --c-comisionable-bg: #FAF5FF;
  --c-comisionada: #0D9488;  --c-comisionada-bg: #F0FDFA;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ============ LAYOUT ============ */
.app{
  display:flex;
  min-height:100vh;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width: var(--sidebar-w);
  flex-shrink:0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding: 20px 16px;
  position: sticky;
  top:0;
  height:100vh;
}
.sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 4px 6px 24px;
}
.brand-mark{
  width:40px; height:40px;
  border-radius:8px;
  object-fit: cover;
  flex-shrink:0;
}
.brand-mark-fallback{
  display:none;
  width:32px; height:32px;
  border-radius:8px;
  background:#2563EB;
  color:#fff;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:12px;
  flex-shrink:0;
}
.brand-mark-fallback.visible{ display:flex; }
.brand-name{
  font-weight:600;
  font-size:14.5px;
  color: var(--text-primary);
}

.sidebar-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-label{
  font-size:11px;
  font-weight:600;
  color: var(--text-tertiary);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding: 8px 10px 6px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight:500;
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover{ background: var(--surface-alt); color: var(--text-primary); }
.nav-item.active{
  background: var(--c-todas-bg);
  color: var(--c-todas);
}
.nav-icon{ width:17px; height:17px; flex-shrink:0; }
.nav-text{ flex:1; }
.nav-code{
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight:500;
  color: var(--c-todas);
  background: #fff;
  border: 1px solid #DBEAFE;
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: .02em;
}

.sidebar-footer{ padding-top: 12px; border-top: 1px solid var(--border-soft); }
.update-pill{
  display:flex;
  align-items:center;
  gap:9px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.update-dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--c-pagada);
  box-shadow: 0 0 0 3px var(--c-pagada-bg);
  flex-shrink:0;
  transition: background .15s ease, box-shadow .15s ease;
}
.update-dot.busy{
  background: var(--c-ndpendiente);
  box-shadow: 0 0 0 3px var(--c-ndpendiente-bg);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse{ 50%{ opacity:.4; } }

.update-info{ flex:1; min-width:0; }
.update-title{ margin:0; font-size:10.5px; color: var(--text-tertiary); }
.update-time{ margin:1px 0 0; font-size:12px; font-weight:600; color: var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.refresh-btn{
  width:28px; height:28px;
  flex-shrink:0;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
}
.refresh-btn:hover{ background: var(--surface-alt); color: var(--text-primary); }
.refresh-btn:disabled{ opacity:.6; cursor:default; }
.refresh-btn svg{ width:14px; height:14px; }
.refresh-btn.spinning svg{ animation: spin .8s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.nav-item[hidden]{ display:none; }
.refresh-btn[hidden]{ display:none; }

/* ---------- MAIN ---------- */
.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  align-items:center;
  background: var(--surface-alt);
  justify-content:space-between;
  padding: 22px 32px 18px;
}
.topbar-heading h1{
  margin:0;
  font-size: 22px;
  font-weight:700;
  letter-spacing:-.01em;
}
.topbar-sub{
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}
.topbar-actions{ display:flex; align-items:center; gap:12px; }
.topbar-actions > *{ height:36px; }

.search-box{
  display:flex;
  align-items:center;
  gap:8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  width: 300px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.search-box:focus-within{
  border-color:#93C5FD;
  box-shadow: 0 0 0 3px var(--c-todas-bg);
}
.search-box svg{ width:15px; height:15px; color: var(--text-tertiary); flex-shrink:0; }
.search-box input{
  border:none; outline:none; font-size:13.5px;
  width:100%; background:transparent; color: var(--text-primary);
  font-family: inherit;
}
.search-box input::placeholder{ color: var(--text-tertiary); }

.theme-toggle{
  width:36px; height:36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
}
.theme-toggle:hover{ background: var(--surface-alt); }
.theme-toggle svg{ width:16px; height:16px; }
/* Sol visible en tema claro, luna visible en tema oscuro */
.theme-toggle .icon-moon{ display:none; }
body.theme-dark .theme-toggle .icon-sun{ display:none; }
body.theme-dark .theme-toggle .icon-moon{ display:block; }

.user-menu{ position:relative; flex-shrink:0; }
.user-btn{
  width:36px; height:36px; flex-shrink:0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.user-btn:hover, .user-menu.open .user-btn{
  background: var(--surface-alt);
  color: var(--text-primary);
}
.user-menu.open .user-btn{
  border-color: var(--brand);
  color: var(--brand);
}
.user-btn svg{ width:20px; height:20px; }
.user-dropdown{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:224px; padding:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(16,24,40,.14);
  z-index:40;
  transform-origin:top right;
  animation:dropdownIn .12s ease;
}
body.theme-dark .user-dropdown{ box-shadow:0 10px 28px rgba(0,0,0,.5); }
.user-dropdown[hidden]{ display:none; }
@keyframes dropdownIn{
  from{ opacity:0; transform:translateY(-4px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.user-dropdown-header{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--border-soft);
  margin-bottom:4px;
}
.user-dropdown-avatar{
  width:34px; height:34px; flex-shrink:0;
  border-radius:50%;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.user-dropdown-identity{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.user-dropdown-name{
  font-weight:700; font-size:14px;
  color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-dropdown-area{
  font-size:12px; font-weight:500;
  color:var(--text-secondary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-dropdown-item{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 12px;
  border:none; background:transparent;
  border-radius:var(--radius-sm);
  font-size:14px; font-weight:500;
  color:var(--text-primary); text-align:left;
  transition:background .12s ease, color .12s ease;
}
.user-dropdown-item:hover{ background:var(--surface-alt); }
.user-dropdown-item svg{ width:18px; height:18px; flex-shrink:0; }
.user-dropdown-danger{ color:#E5484D; }
body.theme-dark .user-dropdown-danger{ color:#FF6B6B; }
.user-dropdown-danger:hover{ background:rgba(229,72,77,.08); }

/* ---------- FILTER TABS ---------- */
.filterbar{
  padding: 16px 32px 16px;
  position: sticky;
  background: var(--surface-alt);
  z-index: 10;
  top: 0;
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:center;
}
.tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.tab{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all .12s ease;
}
.tab:hover{ border-color:#D1D5DB; }
.tab .tab-count{
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight:600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-tertiary);
}
.tab.active{
  border-color: currentColor;
  background: var(--tab-bg, var(--c-todas-bg));
  color: var(--tab-color, var(--c-todas));
}
.tab.active .tab-count{
  background: rgba(255,255,255,.65);
  color: var(--tab-color, var(--c-todas));
}

.finnegans-go-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:#3985ff; color:#fff;
  border:none; border-radius:var(--radius-sm);
  padding:0 12px;
  font-size:13px; font-weight:600;
  font-family:inherit; text-decoration:none; cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  transition:background .12s ease;
}
.finnegans-go-btn:hover{ background:#2f74e6; }
.finnegans-go-logo{ height:16px; width:auto; filter:brightness(0) invert(1); }
.finnegans-go-arrow{ height:14px; width:auto; filter:brightness(0) invert(1); }

/* ---------- CONTENT ---------- */
.content{
  flex:1;
  padding: 22px 32px 48px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.vendor-group{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.vendor-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 15px 18px;
  cursor:pointer;
  user-select:none;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.vendor-caret{
  width:18px; height:18px;
  color: var(--text-tertiary);
  transition: transform .15s ease;
  flex-shrink:0;
}
.vendor-group.collapsed .vendor-caret{ transform: rotate(-90deg); }
.vendor-group.collapsed .vendor-body{ display:none; }

.vendor-name{
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary);
  flex:1;
}
.vendor-total{
  text-align:right;
  font-family: var(--font-mono);
}
.vendor-total-label{
  font-size:10px; color: var(--text-tertiary); margin:0;
  text-transform:uppercase; letter-spacing:.05em;
}
.vendor-total-value{
  font-size:14px; font-weight:700; color: var(--text-primary); margin:1px 0 0;
}

.vendor-body{ padding: 4px 0 8px; }

.client-block{ padding: 10px 18px 6px; }
.client-header{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding: 6px 2px 8px;
}
.client-name{
  font-size: 12.5px;
  font-weight:700;
  color: var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.client-count{
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.table-wrap{ overflow-x:auto; border-radius: var(--radius-sm); border:1px solid var(--border-soft); }
table{
  width:100%;
  border-collapse:collapse;
  min-width: 920px;
}
thead th{
  text-align:left;
  font-size: 10.5px;
  font-weight:600;
  color: var(--text-tertiary);
  text-transform:uppercase;
  letter-spacing:.04em;
  padding: 9px 12px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-soft);
  white-space:nowrap;
}
thead th.num{ text-align:right; }
tbody td{
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-soft);
  white-space:nowrap;
}
tbody td.num{ text-align:right; font-family: var(--font-mono); font-size:12.5px; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background: var(--surface-alt); }
tbody tr[data-factura-id]{ cursor:pointer; }
.mono-cell{ font-family: var(--font-mono); font-size:12.5px; color: var(--text-secondary); }
.mono-cell a.arca-link{ color: var(--c-comisionable); text-decoration: underline; cursor: pointer; }
.muted-num{ color: var(--text-tertiary); }

.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight:700;
  letter-spacing:.02em;
}
.status-dot{ width:6px; height:6px; border-radius:50%; background: currentColor; }

/* ---------- ESTADO VACÍO ---------- */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 64px 20px;
  color: var(--text-tertiary);
  text-align:center;
}
.empty-state svg{ width:38px; height:38px; opacity:.5; }
.empty-title{ margin:0; font-size:14px; font-weight:600; color: var(--text-secondary); }
.empty-sub{ margin:0; font-size:12.5px; }

/* ---------- VISTA DE DETALLE (Detalle de factura) ---------- */
.detail-topbar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.detail-topbar .finnegans-go-btn{ margin-left:auto; padding:8px 12px; }
.detail-back{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size:13px;
  font-weight:600;
  flex-shrink:0;
}
.detail-back:hover{ background: var(--surface-alt); color: var(--text-primary); }
.detail-back svg{ width:16px; height:16px; }
.detail-heading h2{ margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em; }
.detail-sub{ margin:2px 0 0; font-size:12.5px; color: var(--text-secondary); }

.detail-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.detail-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 18px;
  border-bottom:1px solid var(--border);
  background: var(--surface-alt);
}
.detail-card-header h3{ margin:0; font-size:15.5px; font-weight:700; color: var(--text-primary); }
.detail-card-header-meta{ text-align:right; flex-shrink:0; }
.detail-card-header-meta .detail-label{ display:block; }
.detail-card-header-meta .detail-value{ font-size:14px; font-weight:700; }

.detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px 24px;
  padding:20px 18px;
}
.detail-field{ display:flex; flex-direction:column; gap:5px; }
.detail-field-right{ align-items:flex-end; text-align:right; }
.detail-label{
  font-size:10.5px;
  font-weight:600;
  color: var(--text-tertiary);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.detail-value{ font-size:14px; font-weight:600; color: var(--text-primary); }
.detail-grid-3{ grid-template-columns: 1fr 1fr 1fr; }
.detail-field-center{ align-items:center; text-align:center; }

.detail-value-accent{
  color: var(--c-comisionada);
  font-family: var(--font-mono);
  font-size: 15px;
}

.detail-card .table-wrap{ border:none; border-radius:0; }
.detail-card table{ min-width: 880px; }
td.product-name, th.product-col{ white-space:normal; min-width:240px; }

.detail-columns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}
.total-comisiones-card .detail-card-header{ border-bottom:none; background:transparent; }
.total-comisiones-value{
  margin:0;
  padding:4px 18px 22px;
  font-family: var(--font-mono);
  font-size:28px;
  font-weight:700;
  color: var(--c-comisionada);
  text-align:right;
}
.recibos-list{ list-style:none; margin:0; padding:6px 0; }
.recibos-item{
  font-family: var(--font-mono);
  font-size:13px;
  padding:9px 18px;
  border-bottom:1px solid var(--border-soft);
  color: var(--text-primary);
}
.recibos-item:last-child{ border-bottom:none; }
.recibos-card .empty-state{ padding: 36px 18px; }

/* ---------- REPORTE DE SALDOS CLIENTES ---------- */
.loading-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 64px 20px;
  color: var(--text-tertiary);
  text-align:center;
}
.spinner{
  width:36px; height:36px;
  border:3px solid var(--border);
  border-top-color: var(--c-todas);
  border-radius:50%;
  animation: spin .7s linear infinite;
}

.saldos-filters{
  display:flex;
  align-items:flex-end;
  width:100%;
  gap:20px;
}
.saldos-filters label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:10.5px;
  font-weight:600;
  color: var(--text-tertiary);
  text-transform:uppercase;
  letter-spacing:.04em;
}
.saldos-filters input[type="month"]{
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--text-primary);
  outline:none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.saldos-filters input[type="month"]:focus{
  border-color:#93C5FD;
  box-shadow: 0 0 0 3px var(--c-todas-bg);
}

.currency-toggle{
  display:inline-flex;
  align-items:center;
  gap:2px;
  background: var(--surface-alt);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px;
}
.currency-option{
  padding: 5px 14px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  color: var(--text-tertiary);
  cursor:pointer;
  user-select:none;
  transition: background .12s ease, color .12s ease;
}
.currency-option:hover{ color: var(--text-primary); }
.currency-option.active{
  background: var(--c-pagada);
  color:#fff;
}

.saldos-table{ min-width: 1400px; }
.group-row td{
  background: var(--surface-alt);
  font-weight:700;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
}
.mercado-row td{
  font-size:13px;
  color: var(--text-primary);
  text-transform:uppercase;
  letter-spacing:.03em;
}
.vendedor-row td{
  padding-left: 28px;
  font-size:12.5px;
  color: var(--text-secondary);
}
.cliente-cell{
  padding-left: 44px;
  font-size:12.5px;
  font-weight:600;
}

/* ---------- TEMA OSCURO ---------- */
body.theme-dark{
  --bg: #0F1115;
  --surface: #171A21;
  --surface-alt: #1D2129;
  --border: #2A2E37;
  --border-soft: #23262E;
  --text-primary: #F3F4F6;
  --text-secondary: #9CA3AF;
  --text-tertiary: #6B7280;

  --brand: #b6dc4c;
  --brand-soft: #2A331A;
}
body.theme-dark .search-box input{ color: var(--text-primary); }
body.theme-dark .nav-code{ background: var(--surface); }
body.theme-dark .tab .tab-count{ background: var(--surface); }
body.theme-dark .tab.active .tab-count{ background: rgba(0,0,0,.25); }
body.theme-dark .saldos-filters input[type="month"]{ background: var(--surface); color: var(--text-primary); }
body.theme-dark .currency-toggle{ background: var(--surface); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .sidebar{ display:none; }
  .topbar{ padding: 18px 18px 14px; flex-wrap:wrap; gap:12px; }
  .topbar-actions{ flex-wrap:wrap; }
  .search-box{ width: 100%; order:3; }
  .finnegans-go-btn{ order:2; }
  .filterbar{ padding: 0 18px 14px; flex-wrap:wrap; }
  .content{ padding: 18px 18px 40px; }
  .detail-grid{ grid-template-columns: 1fr; }
  .detail-grid-3{ grid-template-columns: 1fr; }
  .detail-field-right{ align-items:flex-start; text-align:left; }
  .detail-field-center{ align-items:flex-start; text-align:left; }
  .detail-columns{ grid-template-columns: 1fr; }
}

/* ---------- MODAL DE CONFIRMACIÓN ---------- */
.detail-card-header .button{ flex-shrink:0; height:30px; }
.detail-card-header .button .button-content{ display:inline-flex; align-items:center; gap:6px; }
.detail-card-header .button svg{ width:16px; height:16px; flex-shrink:0; }

.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 20px;
  background: rgba(15,17,21,.55);
}

.modal-dialog{
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  padding: 28px 24px 22px;
  text-align:center;
}

.modal-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color: #d97706;
  margin-bottom: 14px;
}
.modal-icon svg{ width:40px; height:40px; }

.modal-message{
  margin:0 0 22px;
  font-size:14px;
  line-height:1.55;
  color: var(--text-primary);
}

.modal-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.modal-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease;
}
.modal-btn svg{ width:18px; height:18px; }

.modal-btn-cancel:hover{ background: var(--surface-alt); }

.modal-btn-confirm{
  background:#3985ff;
  border-color:#3985ff;
  color:#fff;
}
.modal-btn-confirm:hover{ background:#2f74e6; border-color:#2f74e6; }