/* =====================================================
   AFFILIATE PLATFORM — BACKEND (ADMIN) DESIGN SYSTEM
   Built on Bootstrap 5 — custom tokens layered on top
   ===================================================== */

:root{
  /* --- color tokens --- */
  --af-bg:            #F3F5FA;
  --af-surface:       #FFFFFF;
  --af-sidebar:       #12142B;
  --af-sidebar-soft:  #1B1E3D;
  --af-primary:       #3D5AFE;
  --af-primary-dark:  #2A3EB1;
  --af-teal:          #14B8A6;
  --af-amber:         #F5A623;
  --af-rose:          #EF476F;
  --af-text:          #12172B;
  --af-text-muted:    #6B7280;
  --af-text-faint:    #9AA1B1;
  --af-border:        #E6E9F2;
  --af-success:       #1FAE6B;
  --af-danger:        #E5484D;

  --af-radius:         14px;
  --af-radius-sm:       9px;
  --af-topbar-control-h: 36px;
  --af-shadow: 0 1px 2px rgba(18,23,43,.04), 0 8px 24px -12px rgba(18,23,43,.10);

  --af-scrollbar-size: 6px;
  --af-scrollbar-thumb: rgba(18,23,43,.18);
  --af-scrollbar-thumb-hover: rgba(18,23,43,.32);
  --af-scrollbar-track: transparent;
  --af-scrollbar-thumb-dark: rgba(255,255,255,.14);
  --af-scrollbar-thumb-dark-hover: rgba(255,255,255,.28);
}

html,body{
  background: var(--af-bg);
  color: var(--af-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
}

h1,h2,h3,h4,h5,h6,.font-display{
  font-family: 'Sora', 'Inter', sans-serif;
  color: var(--af-text);
  letter-spacing: -0.01em;
}

a{ text-decoration:none; }

/* ---------- Layout shell ---------- */
.af-shell{ display:flex; min-height:100vh; }

.af-sidebar{
  width: 258px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--af-sidebar) 0%, var(--af-sidebar-soft) 100%);
  color: #C9CCE3;
  position: fixed;
  top:0; left:0; bottom:0;
  display:flex;
  flex-direction:column;
  z-index: 1030;
}

.af-brand{
  display:flex; align-items:center; gap:.65rem;
  padding: 1.35rem 1.35rem 1.1rem;
}
.af-brand-logo{
  height: 36px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.af-brand-logo.-lg{ height: 42px; max-width: 200px; }
.af-brand-text{ line-height:1.15; }
.af-brand-text .name{ font-family:'Sora',sans-serif; font-weight:700; color:#fff; font-size:1rem; }
.af-brand-text .sub{ font-size:.68rem; color:#8489AC; letter-spacing:.04em; text-transform:uppercase; }

.af-nav{
  flex:1; overflow-x:hidden; overflow-y:auto; padding:.5rem .85rem 1rem;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
}
.af-nav:hover,
.af-nav:focus-within{
  scrollbar-color:var(--af-scrollbar-thumb-dark) transparent;
}
.af-nav::-webkit-scrollbar{ width:var(--af-scrollbar-size); }
.af-nav::-webkit-scrollbar-track{ background:transparent; }
.af-nav::-webkit-scrollbar-thumb{
  background:transparent;
  border-radius:999px;
  border:1px solid transparent;
  background-clip:padding-box;
}
.af-nav:hover::-webkit-scrollbar-thumb,
.af-nav:focus-within::-webkit-scrollbar-thumb{
  background:var(--af-scrollbar-thumb-dark);
  background-clip:padding-box;
}
.af-nav::-webkit-scrollbar-thumb:hover{
  background:var(--af-scrollbar-thumb-dark-hover);
  background-clip:padding-box;
}
.af-nav-section{
  font-size:.66rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:#5C6190; margin: 1.15rem .6rem .45rem;
}
.af-nav-link{
  display:flex; align-items:center; gap:.7rem;
  padding:.58rem .75rem; border-radius:10px; color:#C9CCE3;
  font-size:.87rem; font-weight:500; margin-bottom:.15rem;
  transition: background .15s ease, color .15s ease;
  position:relative;
}
.af-nav-link i{ width:18px; text-align:center; font-size:.92rem; color:#8489AC; }
.af-nav-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.af-nav-link:hover i{ color:#fff; }
.af-nav-link.active{ background: rgba(61,90,254,.16); color:#fff; }
.af-nav-link.active i{ color: #7C93FF; }
.af-nav-link.active::before{
  content:''; position:absolute; left:-.85rem; top:8%; bottom:8%; width:3px;
  border-radius:0 4px 4px 0;
  background: linear-gradient(180deg, var(--af-primary), var(--af-teal));
}
.af-nav-link .badge-mini{
  margin-left:auto; font-size:.62rem; padding:.16rem .45rem;
}

.af-sidebar-foot{
  padding: .9rem 1.1rem 1.15rem; border-top:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:.6rem;
}
.af-avatar{
  width:34px; height:34px; border-radius:50%;
  background: linear-gradient(135deg,#7C93FF,#14B8A6);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:.78rem;
}

/* ---------- Scrollbars ---------- */
.af-scrollbar,
.table-responsive,
.af-search-dropdown,
.af-card .table-responsive,
.modal-body{
  scrollbar-width:thin;
  scrollbar-color:var(--af-scrollbar-thumb) var(--af-scrollbar-track);
}
.af-scrollbar::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.af-search-dropdown::-webkit-scrollbar,
.af-card .table-responsive::-webkit-scrollbar,
.modal-body::-webkit-scrollbar{
  width:var(--af-scrollbar-size);
  height:var(--af-scrollbar-size);
}
.af-scrollbar::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.af-search-dropdown::-webkit-scrollbar-track,
.af-card .table-responsive::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track{
  background:var(--af-scrollbar-track);
}
.af-scrollbar::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.af-search-dropdown::-webkit-scrollbar-thumb,
.af-card .table-responsive::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb{
  background:var(--af-scrollbar-thumb);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.af-scrollbar::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.af-search-dropdown::-webkit-scrollbar-thumb:hover,
.af-card .table-responsive::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover{
  background:var(--af-scrollbar-thumb-hover);
  background-clip:padding-box;
}

/* ---------- Main area ---------- */
.af-main{ margin-left:258px; flex:1; min-width:0; display:flex; flex-direction:column; }

.af-topbar{
  height:66px; background:var(--af-surface); border-bottom:1px solid var(--af-border);
  display:flex; align-items:center; gap:1rem; padding:0 1.5rem; position:sticky; top:0; z-index:1020;
}
.af-topbar-actions{
  display:flex; align-items:center; gap:.5rem; flex-shrink:0;
}
.af-search{
  max-width:360px; flex:1; position:relative;
  height:var(--af-topbar-control-h); min-height:var(--af-topbar-control-h);
  background:var(--af-bg); border:1px solid var(--af-border); border-radius:10px;
  display:flex; align-items:center; gap:.55rem; padding:0 .8rem;
  box-sizing:border-box;
}
.af-search input{
  border:0; background:transparent; outline:none; font-size:.85rem; width:100%;
  height:100%; padding:0; line-height:1.25;
}
.af-search i{ color:var(--af-text-faint); font-size:.82rem; flex-shrink:0; }
.af-search:focus-within{
  border-color:rgba(61,90,254,.45);
  box-shadow:0 0 0 3px rgba(61,90,254,.1);
  background:#fff;
}
.af-search-dropdown{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--af-surface); border:1px solid var(--af-border); border-radius:12px;
  box-shadow:0 12px 40px rgba(15,23,42,.12); max-height:360px; overflow:auto; z-index:1030;
}
.af-search-dropdown .af-search-group{
  padding:.45rem .75rem .2rem; font-size:.68rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--af-text-faint);
}
.af-search-item{
  display:flex; align-items:center; gap:.7rem; padding:.55rem .75rem; color:inherit; text-decoration:none;
  border:0; background:transparent; width:100%; text-align:left; cursor:pointer;
}
.af-search-item:hover, .af-search-item.is-active{ background:var(--af-bg); }
.af-search-item-icon{
  width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:#EEF2FF; color:var(--af-primary); flex-shrink:0; font-size:.8rem;
}
.af-search-item-icon.-teal{ background:#E6FAF7; color:var(--af-teal); }
.af-search-item-icon.-amber{ background:#FFF7E6; color:#D97706; }
.af-search-item-body{ min-width:0; }
.af-search-item-title{ font-size:.84rem; font-weight:600; color:var(--af-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.af-search-item-sub{ font-size:.74rem; color:var(--af-text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.af-search-empty{ padding:.85rem .75rem; font-size:.82rem; color:var(--af-text-muted); text-align:center; }

/* ---------- Combobox / product autocomplete ---------- */
.af-attach-toolbar{
  display:flex; align-items:stretch; gap:.55rem;
  width:min(100%, 440px);
}
.af-attach-toolbar .af-combobox{ flex:1; min-width:0; }
.af-attach-toolbar .btn{
  flex-shrink:0; height:40px; padding:0 1.05rem;
  display:inline-flex; align-items:center; gap:.4rem;
  border-radius:10px; white-space:nowrap; font-weight:600;
}
.af-card-header .af-attach-toolbar{ margin-left:auto; }
@media (max-width: 767.98px){
  .af-card-header{ flex-direction:column; align-items:stretch !important; gap:.85rem; }
  .af-attach-toolbar{ width:100%; }
}

.af-combobox{ position:relative; }
.af-combobox-control{
  height:40px; display:flex; align-items:center; gap:.55rem;
  padding:0 .75rem; border:1px solid var(--af-border); border-radius:10px;
  background:#fff; box-sizing:border-box; transition:border-color .15s ease, box-shadow .15s ease;
}
.af-combobox.is-open .af-combobox-control,
.af-combobox-control:focus-within{
  border-color:rgba(61,90,254,.45);
  box-shadow:0 0 0 3px rgba(61,90,254,.1);
}
.af-combobox.is-invalid .af-combobox-control{
  border-color:rgba(229,72,77,.55);
  box-shadow:0 0 0 3px rgba(229,72,77,.1);
}
.af-combobox-control > i{ color:var(--af-text-faint); font-size:.82rem; flex-shrink:0; }
.af-combobox-control input{
  border:0; outline:none; background:transparent; width:100%;
  font-size:.85rem; line-height:1.25; color:var(--af-text);
}
.af-combobox-control input.is-selected{ font-weight:600; }
.af-combobox-clear{
  width:22px; height:22px; border:0; border-radius:6px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--af-text-faint); flex-shrink:0; cursor:pointer;
}
.af-combobox-clear:hover{ background:var(--af-bg); color:var(--af-text); }
.af-combobox-dropdown{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--af-surface); border:1px solid var(--af-border); border-radius:12px;
  box-shadow:0 12px 40px rgba(15,23,42,.12); max-height:320px; overflow:auto; z-index:1040;
}
.af-combobox-item{
  display:flex; align-items:center; gap:.7rem; width:100%;
  padding:.55rem .75rem; border:0; background:transparent; text-align:left; cursor:pointer;
}
.af-combobox-item:hover, .af-combobox-item.is-active{ background:var(--af-bg); }
.af-combobox-item-icon{
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:#EEF2FF; color:var(--af-primary); font-size:.78rem;
}
.af-combobox-item-body{ min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.af-combobox-item-title{
  font-size:.84rem; font-weight:600; color:var(--af-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.af-combobox-item-sub{
  font-size:.74rem; color:var(--af-text-faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.af-combobox-empty{ padding:.9rem .75rem; font-size:.82rem; color:var(--af-text-muted); text-align:center; }

.af-topbar-icon{
  width:var(--af-topbar-control-h); height:var(--af-topbar-control-h); min-width:var(--af-topbar-control-h);
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--af-text-muted); background:var(--af-bg); border:1px solid var(--af-border);
  position:relative; text-decoration:none; flex-shrink:0; box-sizing:border-box;
  font-size:.9rem;
}
.af-topbar-icon:hover{ color:var(--af-primary); border-color:#C7D2FE; background:#F8FAFF; }
.af-topbar .af-tenant-filter{
  height:var(--af-topbar-control-h); min-height:var(--af-topbar-control-h);
  min-width:200px; padding:0 .75rem; padding-right:2rem;
  font-size:.85rem; line-height:1.25;
  border-radius:10px; border-color:var(--af-border);
  background-color:var(--af-bg); color:var(--af-text);
  background-position:right .65rem center;
  box-sizing:border-box;
}
.af-topbar .af-tenant-filter:focus{
  border-color:rgba(61,90,254,.45);
  box-shadow:0 0 0 3px rgba(61,90,254,.1);
}
.af-notify-badge{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:#EF4444; color:#fff; font-size:.65rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--af-surface); line-height:1;
}
.af-topbar-icon .dot{
  position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--af-rose);
  border:1.5px solid #fff;
}

.af-user-menu .dropdown-toggle::after{ margin-left:.35rem; }
.af-user-btn{
  display:flex; align-items:center; gap:.55rem;
  height:var(--af-topbar-control-h); min-height:var(--af-topbar-control-h);
  border:1px solid var(--af-border); background:var(--af-bg);
  border-radius:10px; padding:0 .55rem 0 .3rem; color:var(--af-text); font-size:.84rem;
  box-sizing:border-box;
}
.af-user-btn:hover, .af-user-btn.show{ border-color:#C7D2FE; background:#F8FAFF; }
.af-user-btn-avatar{
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,#7C93FF,#14B8A6);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:.72rem;
}
.af-user-btn-name{ font-weight:600; max-width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.af-user-dropdown{ min-width:240px; padding:.35rem; border-radius:12px; border-color:var(--af-border); box-shadow:0 12px 40px rgba(15,23,42,.12); }
.af-user-dropdown .dropdown-item{ border-radius:8px; font-size:.84rem; padding:.45rem .65rem; }
.af-user-dropdown .dropdown-item i{ width:18px; text-align:center; }

.af-profile-avatar{
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg,#7C93FF,#14B8A6);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:1.35rem;
}
.af-dl dt{ color:var(--af-text-muted); font-weight:500; }
.af-dl dd{ color:var(--af-text); margin-bottom:.85rem; }

/* ---------- Info grid / admin panels (Publisher detail) ---------- */
.af-info-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.85rem;
  margin-bottom:1.25rem;
}
@media (max-width: 575.98px){
  .af-info-grid{ grid-template-columns:1fr; }
}
.af-info-item{
  padding:.85rem 1rem; border:1px solid var(--af-border); border-radius:12px;
  background:#FAFBFD; min-height:74px;
}
.af-info-item.-wide{ grid-column:1 / -1; }
.af-info-label{
  display:block; font-size:.7rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--af-text-faint); margin-bottom:.35rem;
}
.af-info-value{
  font-size:.92rem; font-weight:600; color:var(--af-text);
  word-break:break-word;
}
.af-info-value.-muted{ font-weight:500; color:var(--af-text-muted); }

.af-admin-stack{ display:flex; flex-direction:column; gap:.85rem; }
.af-admin-panel{
  border:1px solid var(--af-border); border-radius:12px; padding:1rem 1.05rem;
  background:#fff;
}
.af-admin-panel.-danger{
  border-color:rgba(229,72,77,.22);
  background:rgba(229,72,77,.03);
}
.af-admin-panel-head{
  display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.85rem;
}
.af-admin-panel-icon{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(61,90,254,.08); color:var(--af-primary); font-size:.9rem;
}
.af-admin-panel.-danger .af-admin-panel-icon{
  background:rgba(229,72,77,.1); color:var(--af-danger);
}
.af-admin-panel-title{ font-size:.9rem; font-weight:700; margin:0 0 .15rem; }
.af-admin-panel-desc{ font-size:.78rem; color:var(--af-text-muted); margin:0; line-height:1.45; }
.af-admin-panel-actions{
  display:flex; align-items:stretch; gap:.55rem; flex-wrap:wrap;
}
.af-admin-panel-actions .form-select,
.af-admin-panel-actions .form-control{
  flex:1; min-width:160px; height:40px; border-radius:10px;
}
.af-admin-panel-actions .btn{
  height:40px; border-radius:10px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.4rem; font-weight:600;
}

.af-form-card{ max-width:560px; }

.af-content{ padding: 1.6rem 1.9rem 3rem; }

.af-page-head{
  margin-bottom:1.75rem;
  padding-bottom:1.35rem;
  border-bottom:1px solid var(--af-border);
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem;
}
.af-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--af-primary); margin-bottom:.5rem;
}
.af-eyebrow::before{
  content:''; width:20px; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--af-primary), var(--af-teal));
}
.af-page-head h1{ font-size:1.65rem; font-weight:700; margin:0; letter-spacing:-.02em; line-height:1.2; }
.af-page-head p{ color:var(--af-text-muted); margin:.4rem 0 0; font-size:.87rem; max-width:640px; }
.af-page-head > div:last-child:not(:first-child){ padding-bottom:.15rem; }
.af-page-head .btn{
  height:36px; min-height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  padding-top:0; padding-bottom:0; font-size:.84rem;
}

/* ---------- Cards ---------- */
.af-card{
  background:var(--af-surface); border:1px solid var(--af-border); border-radius:var(--af-radius);
  box-shadow: var(--af-shadow);
}
.af-card-header{
  padding:1.05rem 1.3rem; border-bottom:1px solid var(--af-border);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.af-card-header h2{ font-size:1rem; font-weight:700; margin:0; }
.af-card-header .desc{ font-size:.8rem; color:var(--af-text-muted); margin-top:.15rem; }
.af-card-body{ padding:1.3rem; }

/* KPI cards */
.af-kpi{
  border-radius: var(--af-radius); background:var(--af-surface); border:1px solid var(--af-border);
  box-shadow: var(--af-shadow); padding:1.15rem 1.25rem; position:relative; overflow:hidden;
}
.af-kpi::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
}
.af-kpi.-primary::before{ background:var(--af-primary); }
.af-kpi.-teal::before{ background:var(--af-teal); }
.af-kpi.-amber::before{ background:var(--af-amber); }
.af-kpi.-rose::before{ background:var(--af-rose); }
.af-kpi .label{ font-size:.78rem; color:var(--af-text-muted); font-weight:500; }
.af-kpi .value{ font-family:'Sora',sans-serif; font-size:1.65rem; font-weight:700; margin:.2rem 0 .15rem; }
.af-kpi .trend{ font-size:.76rem; font-weight:600; display:inline-flex; align-items:center; gap:.25rem; }
.af-kpi .trend.up{ color:var(--af-success); }
.af-kpi .trend.down{ color:var(--af-danger); }
.af-kpi-sub{ font-size:.76rem; color:var(--af-text-muted); margin-top:.15rem; }
a:hover .af-kpi{ box-shadow:var(--af-shadow); transform:translateY(-1px); }
a .af-kpi{ transition:box-shadow .15s ease, transform .15s ease; color:inherit; }
.af-kpi .icon-chip{
  position:absolute; right:1.1rem; top:1.1rem; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.af-kpi.-primary .icon-chip{ background:rgba(61,90,254,.1); color:var(--af-primary); }
.af-kpi.-teal .icon-chip{ background:rgba(20,184,166,.1); color:var(--af-teal); }
.af-kpi.-amber .icon-chip{ background:rgba(245,166,35,.12); color:var(--af-amber); }
.af-kpi.-rose .icon-chip{ background:rgba(239,71,111,.1); color:var(--af-rose); }

/* ---------- Compact stat cards (summary chips) ---------- */
.af-stat-card{
  display:flex; align-items:center; gap:.85rem;
  padding:1rem 1.15rem; height:100%;
  background:var(--af-surface); border:1px solid var(--af-border);
  border-radius:var(--af-radius); box-shadow:var(--af-shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.af-stat-card:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 6px rgba(18,23,43,.04), 0 12px 28px -14px rgba(18,23,43,.12);
  border-color:rgba(61,90,254,.15);
}
.af-stat-card .stat-icon{
  width:42px; height:42px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:11px; font-size:1rem;
}
.af-stat-card .stat-body{ min-width:0; line-height:1.25; }
.af-stat-card .stat-label{ font-size:.78rem; font-weight:600; color:var(--af-text-muted); margin-bottom:.15rem; }
.af-stat-card .stat-value{ font-family:'Sora',sans-serif; font-size:1.35rem; font-weight:700; color:var(--af-text); }
.af-stat-card .stat-sub{ font-size:.74rem; color:var(--af-text-faint); margin-top:.1rem; }
.af-stat-card.-primary .stat-icon{ background:rgba(61,90,254,.1); color:var(--af-primary); }
.af-stat-card.-teal .stat-icon{ background:rgba(20,184,166,.1); color:var(--af-teal); }
.af-stat-card.-amber .stat-icon{ background:rgba(245,166,35,.12); color:var(--af-amber); }
.af-stat-card.-rose .stat-icon{ background:rgba(239,71,111,.1); color:var(--af-rose); }
.af-stat-card.-success .stat-icon{ background:rgba(31,174,107,.1); color:var(--af-success); }
.af-stat-card.-info .stat-icon{ background:rgba(61,90,254,.1); color:var(--af-primary-dark); }
.af-stat-card.-neutral .stat-icon{ background:#EEF0F5; color:var(--af-text-muted); }

/* ---------- User admin table ---------- */
.af-user-cell{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.af-user-avatar{
  width:38px; height:38px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:rgba(61,90,254,.1); color:var(--af-primary-dark);
  font-weight:700; font-size:.82rem;
}
.af-user-meta{ min-width:0; }
.af-user-name{ font-weight:600; font-size:.88rem; color:var(--af-text); line-height:1.3; }
.af-user-email{ font-size:.76rem; color:var(--af-text-faint); }

/* Modal polish */
.modal-content{ border:1px solid var(--af-border); border-radius:var(--af-radius); box-shadow:var(--af-shadow); }
.modal-header{ border-bottom:1px solid var(--af-border); padding:1.1rem 1.25rem; }
.modal-header .modal-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.05rem; }
.modal-body{ padding:1.25rem; }
.modal-footer{ border-top:1px solid var(--af-border); padding:.9rem 1.25rem; }

/* ---------- Tables ---------- */
.af-table{ margin-bottom:0; }
.af-table thead th{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--af-text-muted);
  font-weight:600; border-bottom:1px solid var(--af-border); padding:.75rem 1rem; white-space:nowrap;
  background: #FAFBFD;
}
.af-table tbody td{ padding:.8rem 1rem; vertical-align:middle; border-bottom:1px solid var(--af-border); font-size:.86rem; }
.af-table tbody tr:last-child td{ border-bottom:0; }
.af-table tbody tr:hover{ background: #FAFBFF; }

.af-cell-main{ font-weight:600; color:var(--af-text); }
.af-cell-sub{ font-size:.76rem; color:var(--af-text-faint); }

/* ---------- Badges / pills ---------- */
.af-pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .65rem; border-radius:99px; font-size:.72rem; font-weight:600;
}
.af-pill.-success{ background:rgba(31,174,107,.1); color:var(--af-success); }
.af-pill.-warning{ background:rgba(245,166,35,.13); color:#B5760B; }
.af-pill.-danger{ background:rgba(229,72,77,.1); color:var(--af-danger); }
.af-pill.-info{ background:rgba(61,90,254,.1); color:var(--af-primary-dark); }
.af-pill.-neutral{ background:#EEF0F5; color:var(--af-text-muted); }
.af-pill.-gold{ background: linear-gradient(135deg,#FCE7B2,#F5A623); color:#7A4B00; }
.af-pill.-silver{ background:#E9EBF2; color:#5B6072; }
.af-pill.-diamond{ background: linear-gradient(135deg,#DDEBFF,#3D5AFE22); color:#2A3EB1; }

/* ---------- Buttons ---------- */
.btn-af-primary{
  background: var(--af-primary); border-color:var(--af-primary); color:#fff; font-weight:600; font-size:.85rem;
  box-shadow: 0 6px 14px -6px rgba(61,90,254,.55);
}
.btn-af-primary:hover{ background:var(--af-primary-dark); border-color:var(--af-primary-dark); color:#fff; }
.btn-af-outline{
  background:#fff; border:1px solid var(--af-border); color:var(--af-text); font-weight:600; font-size:.85rem;
}
.btn-af-outline:hover{ background:var(--af-bg); }

/* ---------- Misc ---------- */
.af-breadcrumb{
  font-size:.76rem; color:var(--af-text-faint);
  display:flex; align-items:center; flex-wrap:wrap; gap:.15rem;
  margin-bottom:.65rem;
}
.af-breadcrumb a{ color:var(--af-text-muted); transition:color .15s ease; }
.af-breadcrumb a:hover{ color:var(--af-primary); }
.af-breadcrumb span{ color:var(--af-text); font-weight:600; }
.af-divider{ height:1px; background:var(--af-border); margin:1.5rem 0; }

.af-progress{ height:6px; border-radius:99px; background:#EEF0F5; overflow:hidden; }
.af-progress > span{ display:block; height:100%; border-radius:99px; }

.af-tab-underline .nav-link{
  border:0; border-bottom:2px solid transparent; color:var(--af-text-muted); font-weight:600; font-size:.85rem;
  padding:.7rem .2rem; margin-right:1.5rem; border-radius:0;
}
.af-tab-underline .nav-link.active{ color:var(--af-primary); border-bottom-color:var(--af-primary); background:transparent; }

/* ---------- Segmented tabs (Settings, etc.) ---------- */
.af-tabs{ margin-bottom:1.25rem; }
.af-tabs-nav{
  display:flex; flex-wrap:wrap; gap:.35rem;
  padding:.4rem; background:var(--af-bg);
  border:1px solid var(--af-border); border-radius:12px;
}
.af-tabs-nav .nav-item{ flex:0 0 auto; }
.af-tabs-nav .nav-link{
  display:inline-flex; align-items:center; gap:.45rem;
  border:0; border-radius:9px; padding:.55rem 1rem;
  font-weight:600; font-size:.84rem; color:var(--af-text-muted);
  background:transparent; transition:background .15s ease, color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.af-tabs-nav .nav-link i{ font-size:.78rem; opacity:.75; }
.af-tabs-nav .nav-link:hover{ color:var(--af-text); background:rgba(255,255,255,.55); }
.af-tabs-nav .nav-link.active{
  color:var(--af-primary); background:var(--af-surface);
  box-shadow:0 1px 2px rgba(18,23,43,.06), 0 4px 12px -4px rgba(18,23,43,.1);
}
.af-tabs-nav .nav-link.active i{ opacity:1; color:var(--af-primary); }

/* ---------- Settings form grid ---------- */
.af-settings-form .af-form-actions{
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid var(--af-border);
}
.af-settings-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.1rem 1.35rem;
}
.af-settings-field{ min-width:0; }
.af-settings-field .form-label{
  font-size:.82rem; font-weight:600; color:var(--af-text);
  margin-bottom:.4rem;
}
.af-settings-field .form-control,
.af-settings-field .form-select{
  border-radius:var(--af-radius-sm);
  border-color:var(--af-border);
  font-size:.86rem; padding:.55rem .75rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.af-settings-field .form-control:focus,
.af-settings-field .form-select:focus{
  border-color:rgba(61,90,254,.45);
  box-shadow:0 0 0 3px rgba(61,90,254,.12);
}
.af-settings-field .form-text{
  margin-top:.35rem; font-size:.74rem; color:var(--af-text-faint);
}
.af-settings-field.-full{ grid-column:1 / -1; }
@media (max-width: 767px){
  .af-settings-grid{ grid-template-columns:1fr; }
  .af-settings-field.-full{ grid-column:auto; }
}

/* ---------- Webhook / panel cards in settings ---------- */
.af-panel-card{
  border:1px solid var(--af-border); border-radius:var(--af-radius-sm);
  background:#FAFBFD; padding:1.1rem 1.15rem; margin-bottom:.85rem;
}
.af-panel-card:last-child{ margin-bottom:0; }

/* ---------- List filter toolbar ---------- */
.af-filter-toolbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
}
.af-filter-toolbar.-wide{ width:100%; }
.af-card-header > .af-filter-toolbar{
  flex:1 1 320px; justify-content:flex-end; margin-left:auto;
}
.af-filter-toolbar .form-control,
.af-filter-toolbar .form-select,
.af-filter-toolbar .btn{
  height:36px; min-height:36px;
  padding-top:0; padding-bottom:0;
  font-size:.84rem; line-height:1.25;
  border-radius:var(--af-radius-sm);
}
.af-filter-toolbar .form-control,
.af-filter-toolbar .form-select{
  border-color:var(--af-border);
  background:var(--af-surface);
  color:var(--af-text);
}
.af-filter-toolbar .form-control::placeholder{ color:var(--af-text-faint); }
.af-filter-toolbar .form-control:focus,
.af-filter-toolbar .form-select:focus{
  border-color:rgba(61,90,254,.45);
  box-shadow:0 0 0 3px rgba(61,90,254,.1);
}
.af-filter-toolbar .form-select{
  padding-right:2rem;
  background-position:right .65rem center;
}
.af-filter-toolbar .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.35rem; white-space:nowrap;
  padding-left:.95rem; padding-right:.95rem;
  font-weight:600;
}
.af-filter-toolbar .af-filter-field{
  min-width:0; flex:0 1 auto;
}
.af-filter-toolbar .af-filter-field.-search{
  width:200px; flex:1 1 180px; max-width:260px;
}
.af-filter-toolbar .af-filter-field.-select{
  width:176px; flex:0 0 176px;
}
.af-filter-toolbar .af-filter-field.-id{
  width:160px; flex:0 1 160px;
}
.af-filter-toolbar .af-filter-field.-grow{
  flex:1 1 220px; min-width:160px; max-width:320px;
}
.af-filter-toolbar .af-filter-actions{
  display:inline-flex; align-items:center; gap:.4rem; flex-shrink:0;
}
.af-filter-toolbar .af-filter-switch{
  display:inline-flex; align-items:center; gap:.55rem;
  height:36px; flex-shrink:0;
  padding:0 .65rem; margin:0;
  border:1px solid var(--af-border); border-radius:var(--af-radius-sm);
  background:#FAFBFD;
}
.af-filter-toolbar .af-filter-switch.form-check{ padding-left:.65rem; min-height:36px; }
.af-filter-toolbar .af-filter-switch .form-check-input{
  float:none; margin:0; flex-shrink:0;
}
.af-filter-toolbar .af-filter-switch .form-check-label{
  font-size:.84rem; color:var(--af-text-muted); white-space:nowrap;
  padding-left:0; line-height:1;
}
.af-filter-panel .af-card-body{ padding:.85rem 1.15rem; }

/* ---------- Number inputs / display ---------- */
.af-num-input{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.af-num-display{
  font-variant-numeric:tabular-nums;
}
@media (max-width: 767px){
  .af-card-header > .af-filter-toolbar{ justify-content:stretch; }
  .af-filter-toolbar .af-filter-field.-search,
  .af-filter-toolbar .af-filter-field.-select,
  .af-filter-toolbar .af-filter-field.-id,
  .af-filter-toolbar .af-filter-field.-grow{
    width:100%; max-width:none; flex:1 1 100%;
  }
  .af-filter-toolbar .af-filter-switch{ width:100%; justify-content:flex-start; }
  .af-filter-toolbar .af-filter-actions{ width:100%; }
  .af-filter-toolbar .af-filter-actions .btn{ flex:1; }
}
.af-code{
  display:inline-block; padding:.2rem .5rem; border-radius:6px;
  background:#F3F5FA; color:var(--af-primary-dark); font-weight:600; font-size:.8rem;
  text-decoration:none; transition:background .15s ease, color .15s ease;
}
a.af-code:hover{ background:rgba(61,90,254,.12); color:var(--af-primary); }
.af-table .text-num{ text-align:right; font-variant-numeric:tabular-nums; }
.af-table thead th.text-num{ text-align:right; }

/* Report tables: long URLs truncate with ellipsis, stay clickable */
.af-table-urls{ table-layout:fixed; width:100%; }
.af-table-urls .af-col-url{ width:auto; max-width:0; }
.af-url-truncate{
  display:block; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--af-primary); font-weight:500; text-decoration:none;
  transition:color .15s ease;
}
.af-url-truncate:hover{ color:var(--af-primary-dark); text-decoration:underline; }
.af-url-truncate:focus-visible{
  outline:2px solid rgba(61,90,254,.35); outline-offset:2px; border-radius:4px;
}

/* ---------- Contextual hint (empty feature state) ---------- */
.af-hint-card{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:1rem 1.15rem; border-radius:var(--af-radius-sm);
  background:#FAFBFD; border:1px dashed var(--af-border);
}
.af-hint-card .af-hint-icon{
  width:36px; height:36px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; background:rgba(61,90,254,.08); color:var(--af-primary);
  font-size:.9rem;
}
.af-hint-card .af-hint-title{ font-weight:600; font-size:.88rem; margin-bottom:.2rem; }
.af-hint-card .af-hint-text{ font-size:.8rem; color:var(--af-text-muted); margin:0; }

.af-empty{ text-align:center; padding:3rem 1rem; color:var(--af-text-muted); }

/* ---------- Row actions (edit / delete icon buttons) ---------- */
.af-actions{ display:inline-flex; align-items:center; gap:.4rem; }
.af-actions form{ margin:0; display:inline-flex; }
a.af-icon-btn{ text-decoration:none; }
.af-icon-btn{
  width:32px; height:32px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; border:1px solid var(--af-border);
  background:var(--af-surface); color:var(--af-text-muted);
  font-size:.78rem; line-height:1; cursor:pointer;
  transition:color .15s ease, background .15s ease, border-color .15s ease, transform .1s ease;
}
.af-icon-btn:hover{
  color:var(--af-primary);
  background:rgba(61,90,254,.07);
  border-color:rgba(61,90,254,.30);
}
.af-icon-btn:active{ transform:scale(.94); }
.af-icon-btn.-danger:hover{
  color:var(--af-danger);
  background:rgba(229,72,77,.07);
  border-color:rgba(229,72,77,.30);
}
.af-icon-btn.-success:hover{
  color:var(--af-success);
  background:rgba(31,174,107,.08);
  border-color:rgba(31,174,107,.35);
}
.af-icon-btn.-warning:hover{
  color:var(--af-amber);
  background:rgba(245,166,35,.10);
  border-color:rgba(245,166,35,.40);
}

/* ---------- Alerts ---------- */
.af-alert{
  display:flex; align-items:flex-start; gap:.7rem;
  border-radius: var(--af-radius-sm);
  border:1px solid var(--af-border);
  background: var(--af-surface);
  box-shadow: var(--af-shadow);
  padding:.75rem 2.6rem .75rem .85rem;
  font-size:.88rem; color: var(--af-text);
}
.af-alert .af-alert-icon{
  flex-shrink:0; width:30px; height:30px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.85rem;
}
.af-alert .af-alert-body{ align-self:center; min-width:0; }
.af-alert .btn-close{ font-size:.68rem; padding:1rem; }
.af-alert.-success{ border-left:3px solid var(--af-success); }
.af-alert.-success .af-alert-icon{ color:var(--af-success); background:rgba(31,174,107,.12); }
.af-alert.-danger{ border-left:3px solid var(--af-danger); }
.af-alert.-danger .af-alert-icon{ color:var(--af-danger); background:rgba(229,72,77,.12); }
.af-alert.-warning{ border-left:3px solid var(--af-amber); }
.af-alert.-warning .af-alert-icon{ color:var(--af-amber); background:rgba(245,166,35,.14); }
.af-alert.-info{ border-left:3px solid var(--af-primary); }
.af-alert.-info .af-alert-icon{ color:var(--af-primary); background:rgba(61,90,254,.10); }

/* ---------- Pagination ---------- */
.af-pagination{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem;
  padding:1rem 1.15rem; border-top:1px solid var(--af-border);
}
.af-pagination-meta{ font-size:.82rem; color:var(--af-text-muted); }
.af-pagination-meta strong{ color:var(--af-text); }
.af-pagination-controls{ display:inline-flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.af-page-btn{
  min-width:32px; height:32px; padding:0 .55rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--af-border);
  background:var(--af-surface); color:var(--af-text-muted);
  font-size:.8rem; font-weight:600; text-decoration:none; line-height:1;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.af-page-btn:hover{ color:var(--af-primary); border-color:rgba(61,90,254,.3); background:rgba(61,90,254,.06); }
.af-page-btn.active{
  color:#fff; background:var(--af-primary); border-color:var(--af-primary);
}
.af-page-btn.disabled,
.af-page-btn[aria-disabled="true"]{
  opacity:.4; pointer-events:none; cursor:default;
}
.af-page-ellipsis{ color:var(--af-text-muted); padding:0 .15rem; font-size:.85rem; }
.af-empty > i.d-block{
  font-size:2rem; color:var(--af-text-faint); margin-bottom:.75rem;
}
.af-empty-icon{
  width:56px; height:56px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(61,90,254,.08); color:var(--af-primary);
  font-size:1.2rem; margin:0 auto .85rem;
}
.af-empty-title{
  font-weight:600; color:var(--af-text); font-size:.95rem;
  margin-bottom:.25rem;
}
.af-empty-desc{
  font-size:.82rem; color:var(--af-text-muted);
  max-width:340px; margin:0 auto 1rem; line-height:1.5;
}
.af-empty-action{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.52rem 1.15rem; font-size:.85rem; font-weight:600;
  border-radius:10px; text-decoration:none;
  box-shadow:0 4px 14px rgba(61,90,254,.22);
  transition:transform .15s ease, box-shadow .15s ease;
}
.af-empty-action:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(61,90,254,.28);
  color:#fff;
}
.af-empty-action i{ font-size:.78rem; line-height:1; }

/* ---------- Sidebar user ---------- */
.af-sidebar-user{ line-height:1.2; min-width:0; }
.af-sidebar-user-name{ color:#fff; font-size:.83rem; font-weight:600; }
.af-sidebar-user-role{ color:#8489AC; font-size:.72rem; }
.af-sidebar-logout{ color:#8489AC; }
.af-sidebar-logout:hover{ color:#fff; }
.af-tenant-filter{ min-width:220px; }
/* ---------- Charts ---------- */
.af-chart{ position:relative; }
.af-chart.-md{ height:260px; }
.af-chart.-sm{ height:240px; }
.af-progress > span.-primary{ background:var(--af-primary); }

/* ---------- Filters ---------- */
/* ---------- Links / text helpers ---------- */
.af-link-inherit{ color:inherit; }
.af-link-inherit:hover{ color:var(--af-primary); }
.af-pre-wrap{ white-space:pre-wrap; }
.af-soft-row{ background:var(--af-bg); }
.af-card-narrow{ max-width:520px; }

/* ---------- Category tree ---------- */
.af-tree{ display:flex; flex-direction:column; gap:.35rem; }
.af-tree-item{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem .85rem; border-radius:var(--af-radius-sm);
  border:1px solid transparent; transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.af-tree-item:hover{
  background:#FAFBFF; border-color:var(--af-border);
  box-shadow:0 1px 2px rgba(18,23,43,.03);
}
.af-tree-item.-child{ margin-left:1.25rem; padding-left:1rem; border-left:2px solid #E8EBF4; }
.af-tree-item-main{ display:flex; align-items:center; gap:.75rem; min-width:0; flex:1; }
.af-tree-icon{
  width:36px; height:36px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; font-size:.9rem;
  background:rgba(61,90,254,.08); color:var(--af-primary);
}
.af-tree-item.-child .af-tree-icon{
  background:#F3F5FA; color:var(--af-text-muted); font-size:.82rem;
}
.af-tree-content{ min-width:0; }
.af-tree-name{ font-weight:600; font-size:.9rem; color:var(--af-text); line-height:1.3; }
.af-tree-item.-child .af-tree-name{ font-weight:500; }
.af-tree-meta{
  margin-top:.15rem; font-size:.75rem; color:var(--af-text-faint);
  display:flex; align-items:center; flex-wrap:wrap; gap:.35rem;
}
.af-tree-meta code{
  font-size:.7rem; padding:.1rem .4rem; border-radius:5px;
  background:#F3F5FA; color:var(--af-text-muted); font-weight:500;
}
.af-tree-item .af-actions{ opacity:.55; transition:opacity .15s ease; }
.af-tree-item:hover .af-actions{ opacity:1; }

/* ---------- Campaign / entity cards ---------- */
.af-campaign-card{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.af-campaign-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 6px rgba(18,23,43,.04), 0 14px 32px -14px rgba(18,23,43,.14);
  border-color:rgba(61,90,254,.18);
}
.af-campaign-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.85rem;
}
.af-campaign-title{
  font-family:'Sora',sans-serif; font-size:1.05rem; font-weight:700;
  margin:0 0 .35rem; letter-spacing:-.01em; line-height:1.3;
}
.af-campaign-title a{ color:inherit; text-decoration:none; transition:color .15s ease; }
.af-campaign-title a:hover{ color:var(--af-primary); }
.af-campaign-dates{
  font-size:.78rem; color:var(--af-text-muted);
  display:inline-flex; align-items:center; gap:.4rem;
  margin-bottom:1rem; padding-bottom:1rem;
  border-bottom:1px solid var(--af-border);
}
.af-campaign-dates i{ color:var(--af-text-faint); font-size:.72rem; }
.af-metric-list{ display:flex; flex-direction:column; gap:.55rem; }
.af-metric-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-size:.82rem; padding:.35rem .1rem;
}
.af-metric-row .label{ color:var(--af-text-muted); }
.af-metric-row .value{ font-weight:700; color:var(--af-text); font-variant-numeric:tabular-nums; }
.af-metric-row .value.-success{ color:var(--af-success); }
.af-pill.-running{
  background:rgba(239,71,111,.1); color:var(--af-rose);
}
.af-pill.-running::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--af-rose); box-shadow:0 0 0 3px rgba(239,71,111,.2);
  animation:af-pulse 1.8s ease-in-out infinite;
}
@keyframes af-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.45; }
}

/* ---------- Product variant table ---------- */
.af-variant-table th.-image{ width:72px; }
.af-variant-table th.-title{ min-width:160px; }
.af-variant-table th.-sku{ min-width:150px; }
.af-variant-table th.-price{ width:130px; }
.af-variant-table th.-inventory{ width:110px; }
.af-variant-table th.-active{ width:90px; }
.af-variant-table th.-actions{ width:50px; }

.af-variant-media{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
  min-width:48px;
}
.af-variant-thumb{
  width:48px;
  height:48px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid var(--af-border);
  background:var(--af-bg-soft, #f5f7fa);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#94a3b8;
  flex-shrink:0;
}
.af-variant-thumb.-lg{ width:72px; height:72px; }
.af-variant-thumb.-empty,
.af-variant-thumb.is-broken{ background:#eef2f7; }
.af-variant-thumb.is-broken{ content:""; }

.af-media-pick{
  position:relative;
  display:inline-flex;
  padding:0;
  border:0;
  background:transparent;
  border-radius:8px;
  cursor:pointer;
  line-height:0;
}
.af-media-pick:focus-visible{
  outline:2px solid var(--af-primary);
  outline-offset:2px;
}
.af-media-pick-hint{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:inherit;
  background:rgba(18,23,43,.48);
  color:#fff;
  font-size:.85rem;
  opacity:0;
  transition:opacity .15s ease;
}
.af-media-pick:hover .af-media-pick-hint,
.af-media-pick:focus-visible .af-media-pick-hint{ opacity:1; }
.af-media-pick.is-uploading{
  opacity:.55;
  pointer-events:none;
}
.af-media-pick.is-uploading .af-media-pick-hint{
  opacity:1;
}
.af-media-pick.is-uploading .af-media-pick-hint i{
  animation: af-spin .8s linear infinite;
}
@keyframes af-spin{ to{ transform:rotate(360deg); } }

.af-product-image-field{
  display:flex;
  align-items:center;
  gap:.85rem;
}
.af-option-media-hint{ margin-top:.35rem; }

.af-product-thumb-link{
  display:inline-flex;
  line-height:0;
  border-radius:8px;
}
.af-product-list-thumb{
  width:52px;
  height:52px;
  border-radius:10px;
}
.af-product-meta-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:.4rem;
}
.af-product-meta-pills .af-pill{
  font-size:.7rem;
  padding:.22rem .55rem;
  max-width:100%;
}
.af-product-meta-pills .af-pill i{
  font-size:.65rem;
  opacity:.85;
}

/* List thumb / avatar (publishers, brands, orgs, products) */
.af-list-avatar{
  width:52px;
  height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid var(--af-border);
  background:var(--af-bg);
  overflow:hidden;
  line-height:0;
  flex-shrink:0;
  text-decoration:none;
  color:inherit;
}
.af-list-avatar.-round{
  border-radius:50%;
  background:linear-gradient(135deg,#7C93FF,#14B8A6);
  border-color:transparent;
  color:#fff;
}
.af-list-avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.af-list-avatar-img.is-broken{ display:none; }
.af-list-avatar-fallback{
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--af-text-muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}
.af-list-avatar.-round .af-list-avatar-fallback{ color:#fff; font-size:.78rem; }

.af-media-option-select{ width:auto; min-width:140px; }

.af-option-media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:1rem;
}
.af-option-media-card{
  display:flex;
  gap:.85rem;
  padding:.9rem;
  border:1px solid var(--af-border);
  border-radius:12px;
  background:var(--af-surface, #fff);
}
.af-option-media-preview{ flex-shrink:0; }
.af-option-media-body{ flex:1; min-width:0; }
.af-option-media-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--af-muted, #64748b);
  margin-bottom:.15rem;
}
.af-option-media-value{
  font-weight:600;
  margin-bottom:.55rem;
}

/* ---------- Login page ---------- */
body.af-login-page{
  min-height:100vh;
  background:var(--af-bg);
}
.login-shell{ min-height:100vh; display:flex; }

.login-visual{
  flex:1.1;
  background:radial-gradient(circle at 20% 20%, #1B2359 0%, #12142B 55%, #0A0C1E 100%);
  color:#fff;
  padding:2.5rem 3rem;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.login-visual-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 85%);
  pointer-events:none;
}
.login-visual-glow{
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(2px);
}
.login-visual-glow.-top{
  width:420px; height:420px; top:-180px; left:-120px;
  background:radial-gradient(circle, rgba(20,184,166,.22), transparent 68%);
}
.login-visual-glow.-bottom{
  width:520px; height:520px; right:-160px; bottom:-160px;
  background:radial-gradient(circle, rgba(61,90,254,.32), transparent 70%);
}
.login-visual-top,
.login-visual-body,
.login-visual-foot{ position:relative; z-index:2; }
.login-visual-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
}
.login-env-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:#A8ADCB; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:.35rem .7rem;
}
.login-env-badge i{ color:var(--af-teal); font-size:.62rem; }

.login-form-side{
  flex:1; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #F8FAFF 0%, var(--af-bg) 100%);
  padding:2rem 1.5rem;
  position:relative;
}
.login-form-side::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle, #DDE4FF 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.35; pointer-events:none;
}

.login-card{
  position:relative; z-index:1;
  width:100%; max-width:420px;
  background:var(--af-surface);
  border:1px solid var(--af-border);
  border-radius:20px;
  padding:2.25rem 2rem 1.75rem;
  box-shadow:0 1px 2px rgba(18,23,43,.04), 0 20px 48px -20px rgba(18,23,43,.14);
}
.login-mobile-brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  margin-bottom:1.75rem; padding-bottom:1.25rem;
  border-bottom:1px solid var(--af-border);
}
.login-card-head{ margin-bottom:1.5rem; }
.login-card-head h1{
  font-size:1.65rem; font-weight:700; margin:.35rem 0 .5rem; line-height:1.2;
}
.login-card-desc{
  color:var(--af-text-muted); font-size:.88rem; margin:0; line-height:1.5;
}

.login-field{ margin-bottom:1.1rem; }
.login-field .form-label{
  font-size:.78rem; font-weight:600; color:var(--af-text); margin-bottom:.4rem;
}
.login-input-wrap{
  display:flex; align-items:center; gap:.55rem;
  background:#F8FAFF; border:1px solid var(--af-border); border-radius:12px;
  padding:0 .85rem; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.login-input-wrap:focus-within{
  background:#fff;
  border-color:#A5B4FC;
  box-shadow:0 0 0 3px rgba(61,90,254,.12);
}
.login-input-wrap > i{
  color:var(--af-text-faint); font-size:.82rem; flex-shrink:0;
}
.login-input-wrap .form-control{
  border:0; background:transparent; box-shadow:none !important;
  padding:.62rem 0; font-size:.88rem;
}
.login-input-wrap .form-control:focus{ outline:none; }
.login-input-wrap .form-control::placeholder{ color:#B4BAC8; }
.login-pw-toggle{
  border:0; background:transparent; color:var(--af-text-faint);
  padding:.25rem; line-height:1; border-radius:8px; flex-shrink:0;
}
.login-pw-toggle:hover{ color:var(--af-primary); background:rgba(61,90,254,.08); }
.login-field-error{
  display:block; font-size:.76rem; color:var(--af-danger); margin-top:.35rem;
}

.login-form-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.35rem;
}
.login-form-row .form-check-label{
  font-size:.82rem; color:var(--af-text-muted); user-select:none;
}
.login-form-row .form-check-input:checked{
  background-color:var(--af-primary); border-color:var(--af-primary);
}

.login-submit{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.72rem 1rem; border-radius:12px; font-size:.9rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.login-submit:hover{ transform:translateY(-1px); }
.login-submit:active{ transform:translateY(0); }

.login-alert-danger{
  background:rgba(229,72,77,.08); border:1px solid rgba(229,72,77,.18);
  color:#B42318; border-radius:12px; padding:.65rem .85rem;
  font-size:.82rem; margin-bottom:1rem;
}
.login-alert-danger:empty{ display:none; }
.login-alert-danger ul{ margin:0; padding-left:1.1rem; }

.login-card-foot{
  display:flex; align-items:flex-start; gap:.5rem;
  margin-top:1.35rem; padding-top:1.15rem;
  border-top:1px solid var(--af-border);
  font-size:.72rem; color:var(--af-text-faint); line-height:1.45;
}
.login-card-foot i{ margin-top:.1rem; color:var(--af-teal); }

.stat-chip{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:.9rem .85rem;
  height:100%;
  transition:border-color .2s ease, background .2s ease;
}
.stat-chip:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.16);
}
.stat-chip-icon{
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(61,90,254,.18); color:#A5B4FC;
  font-size:.72rem; margin-bottom:.55rem;
}
.stat-chip-value{
  color:#fff; font-size:1.15rem; font-weight:700; line-height:1.2;
}
.login-brand-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.05rem; }
.login-brand-sub{ font-size:.72rem; color:#8489AC; letter-spacing:.02em; }
.login-visual-body{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:center; padding:2rem 0; }
.login-visual-title{ color:#fff; font-size:2rem; line-height:1.22; max-width:440px; margin-bottom:.85rem; }
.login-visual-desc{ color:#A8ADCB; max-width:420px; font-size:.92rem; line-height:1.6; margin-bottom:1.75rem; }

.login-features{
  list-style:none; padding:0; margin:0 0 1.75rem; max-width:440px;
  display:flex; flex-direction:column; gap:.75rem;
}
.login-features li{
  display:flex; align-items:flex-start; gap:.75rem;
}
.login-feature-icon{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  color:#C7D2FE; font-size:.82rem;
}
.login-features strong{
  display:block; color:#fff; font-size:.84rem; font-weight:600; margin-bottom:.15rem;
}
.login-features small{
  display:block; color:#8B90B0; font-size:.74rem; line-height:1.4;
}

.login-stats{ max-width:440px; }
.login-stat-label{ font-size:.68rem; color:#A8ADCB; margin-top:.15rem; }
.login-visual-foot{ font-size:.72rem; color:#5C6190; }

@media (max-width: 991px){
  .login-form-side{ padding:1.5rem 1rem; align-items:flex-start; padding-top:2.5rem; }
  .login-card{
    max-width:100%; border-radius:18px;
    padding:1.75rem 1.35rem 1.35rem;
    box-shadow:0 8px 32px -16px rgba(18,23,43,.12);
  }
  .login-card-head h1{ font-size:1.45rem; }
}

@media (max-width: 991px){
  .af-sidebar{ transform:translateX(-100%); transition:transform .2s ease; }
  .af-sidebar.show{ transform:translateX(0); }
  .af-main{ margin-left:0; }
}

/* ---------- Confirm modal ---------- */
.af-page-head .af-page-actions .btn{ white-space:nowrap; }
.af-action-modal{ border:0; border-radius:16px; overflow:hidden; }
.af-action-modal .modal-header{ align-items:flex-start; }
.af-action-modal .af-confirm-icon{
  width:48px; height:48px; font-size:1rem; margin-bottom:0;
}
.af-confirm-modal{ border:0; border-radius:16px; overflow:hidden; }
.af-confirm-modal .modal-body{ padding:1.75rem 1.5rem 1rem; }
.af-confirm-modal .modal-footer{ padding:0 1.5rem 1.5rem; }
.af-confirm-icon{
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.25rem; margin-bottom:1rem;
}
.af-confirm-icon.-danger{
  background:rgba(239,71,111,.12); color:var(--af-rose);
}
.af-confirm-icon.-success{
  background:rgba(31,174,107,.12); color:var(--af-success);
}
.af-confirm-title{ font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.af-confirm-message{ font-size:.9rem; line-height:1.5; }

.af-id-truncate{
  display:inline-block; max-width:11.5rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  vertical-align:bottom; font-size:.72rem; color:var(--af-text-faint);
  background:transparent; padding:0;
}