/* ==========================================================================
   TimStore — tableau de bord
   Reproduction du systeme de design de la version Next.js (shadcn/ui +
   Tailwind) en CSS pur : memes jetons de couleur, meme police, memes rayons,
   meme structure. Aucune dependance, aucun build.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* --- Jetons (valeurs exactes de globals.css cote Next.js) ----------------- */
:root {
  --background: #ffffff;
  --foreground: hsl(222.2 47.4% 11.2%);
  --card: #ffffff;
  --muted: hsl(210 40% 96.1%);
  --muted-fg: hsl(215.4 16.3% 46.9%);
  --border: hsl(214.3 31.8% 91.4%);
  --accent: hsl(142 71% 45%);
  --accent-600: #059669;
  --accent-700: #047857;
  --accent-soft: rgba(16, 185, 129, .12);
  --accent-soft-2: rgba(16, 185, 129, .06);
  --destructive: hsl(0 84.2% 60.2%);
  --radius: .75rem;

  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
  --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151;
  --gray-800: #1f2937; --gray-900: #111827;

  --shell-bg: #f8fafc;                 /* fond derriere les cartes */
  --sidebar-w: 16rem;                  /* w-64 */
  --topbar-h: 3.5rem;                  /* h-14 */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}

html.dark {
  --background: hsl(222.2 84% 4.9%);
  --foreground: hsl(210 40% 98%);
  --card: hsl(222.2 47.4% 8%);
  --muted: hsl(217.2 32.6% 17.5%);
  --muted-fg: hsl(215 20.2% 65.1%);
  --border: hsl(217.2 32.6% 17.5%);
  --shell-bg: hsl(222.2 84% 4.9%);
  --gray-50: #1f2937; --gray-100: #1f2937; --gray-200: #374151; --gray-300: #4b5563;
  --gray-400: #9ca3af; --gray-500: #9ca3af; --gray-600: #d1d5db; --gray-700: #e5e7eb;
  --gray-800: #f3f4f6; --gray-900: #f9fafb;
}

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--shell-bg);
  color: var(--foreground);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.125rem; font-weight: 700; }
h3 { font-size: .95rem; font-weight: 700; }
img { max-width: 100%; height: auto; display: block; }
.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon-sm { width: .875rem; height: .875rem; flex-shrink: 0; }
.icon-lg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.icon-xs { width: .75rem; height: .75rem; flex-shrink: 0; }
.icon-xl { width: 3rem; height: 3rem; flex-shrink: 0; }

/* --- Coquille --------------------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--card);
  border-inline-end: 1px solid var(--border);
  padding: 1.5rem .75rem;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: .5rem; padding: 0 .75rem; margin-bottom: 2rem; }
.brand .logo {
  width: 1.75rem; height: 1.75rem; border-radius: .375rem;
  background: linear-gradient(135deg, #34d399, #059669);
  box-shadow: 0 10px 15px -3px rgba(16,185,129,.3);
}
.brand .name { font-size: 1rem; font-weight: 600; }

.nav-group { margin-bottom: 1.5rem; }
.nav-group-label {
  padding: 0 .75rem; margin-bottom: .25rem;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-fg); opacity: .8;
}
.nav-group-label.admin { color: #fb7185; }
.nav-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 500;
  color: color-mix(in srgb, var(--foreground) 65%, transparent);
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--gray-50); color: var(--foreground); }
.nav-item.active {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
  color: var(--accent-600);
}
html.dark .nav-item.active { color: #34d399; }
.nav-badge {
  margin-inline-start: auto;
  min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem;
  display: grid; place-items: center; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  background: rgba(16,185,129,.2); color: var(--accent-600);
}
html.dark .nav-badge { color: #34d399; }
.nav-badge.amber { background: rgba(245,158,11,.2); color: #d97706; }

.sidebar-foot { margin-top: auto; padding: 1rem .75rem .5rem; border-top: 1px solid var(--border); }
.health {
  border-radius: .75rem; padding: .75rem;
  background: var(--accent-soft-2); border: 1px solid rgba(16,185,129,.1);
  display: flex; flex-direction: column; gap: .5rem;
}
.health .t { font-size: 11px; font-weight: 600; color: var(--accent-700); }
html.dark .health .t { color: #34d399; }
.health .row { display: flex; align-items: flex-end; justify-content: space-between; }
.health .score { font-size: 1.5rem; font-weight: 900; color: var(--gray-900); }
.health .score small { font-size: .75rem; font-weight: 400; color: var(--gray-400); margin-inline-start: 2px; }
.health svg { width: 4rem; height: 1.75rem; color: var(--accent); }
.health a { font-size: 10px; font-weight: 600; color: var(--accent-600); }
.health a:hover { text-decoration: underline; }

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

.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: .5rem;
  padding: 0 1.5rem;
  background: color-mix(in srgb, var(--background) 70%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.store-pill {
  display: inline-flex; align-items: center; gap: .375rem;
  height: 2.25rem; padding: 0 .625rem; border-radius: .5rem;
  border: 1px solid var(--border); background: var(--card);
  font-size: .8125rem; font-weight: 600; color: var(--gray-700);
  position: relative; cursor: pointer;
}
.store-pill .icon { color: var(--accent-600); }
.store-pill select {
  position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer;
}
.topsearch { position: relative; flex: 1; max-width: 28rem; }
.topsearch .icon { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted-fg); pointer-events: none; }
.topsearch input[type=search] {
  width: 100%; height: 2.25rem; padding: 0 .75rem 0 2.5rem;
  border: 1px solid var(--border); border-radius: .5rem;
  background: var(--card); color: var(--foreground); font: inherit; font-size: .875rem;
}
.topsearch input[type=search]:focus { outline: none; border-color: var(--gray-400); box-shadow: 0 0 0 2px var(--accent-soft); }
.topbar .grow { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: .5rem; }

.btn-create {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem .75rem; border-radius: .5rem;
  background: #10b981; color: #fff; font-size: .75rem; font-weight: 700;
  box-shadow: 0 1px 2px rgba(16,185,129,.3); border: none; cursor: pointer; font-family: inherit;
}
.btn-create:hover { background: #059669; }
.icon-btn {
  position: relative; display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px; border: none;
  background: transparent; color: var(--gray-500); cursor: pointer;
}
.icon-btn:hover { background: var(--gray-100); }
.icon-btn .dot {
  position: absolute; top: .125rem; inset-inline-end: .125rem;
  min-width: 1rem; height: 1rem; padding: 0 .125rem; border-radius: 999px;
  background: #f43f5e; color: #fff; font-size: 9px; font-weight: 900;
  display: grid; place-items: center; border: 2px solid var(--background);
}
.avatar-wrap { display: flex; align-items: center; gap: .5rem; padding-inline-start: .5rem; border-inline-start: 1px solid var(--border); margin-inline-start: .25rem; }
.avatar {
  width: 2rem; height: 2rem; border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #059669); color: #fff;
  display: grid; place-items: center; font-size: .75rem; font-weight: 700;
}
.avatar-wrap .who { line-height: 1.1; }
.avatar-wrap .who b { display: block; font-size: .75rem; font-weight: 700; }
.avatar-wrap .who span { font-size: 10px; color: var(--gray-400); }

/* Menus deroulants sans JavaScript (details/summary). */
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; }
.dd > summary::-webkit-details-marker { display: none; }
.dd-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + .5rem); z-index: 30;
  min-width: 12rem; padding: .25rem 0;
  background: var(--card); border: 1px solid var(--border); border-radius: .75rem;
  box-shadow: var(--shadow-xl); font-size: .875rem;
}
.dd-menu a, .dd-menu button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .5rem 1rem; color: var(--gray-700); font-weight: 600; font: inherit;
  background: none; border: none; text-align: start; cursor: pointer;
}
.dd-menu a:hover, .dd-menu button:hover { background: var(--gray-50); }
.dd-menu .sep { border-top: 1px solid var(--gray-100); }
.dd-menu.wide { width: 20rem; }
.dd-head { padding: .625rem 1rem; border-bottom: 1px solid var(--border); font-size: .875rem; font-weight: 600; color: var(--gray-800); display: flex; justify-content: space-between; }
.dd-empty { padding: 2rem 1rem; text-align: center; color: var(--gray-400); font-size: .875rem; }
.dd-item { display: flex; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--gray-100); }
.dd-item:last-child { border-bottom: none; }
.dd-item .t { font-size: .8125rem; font-weight: 600; color: var(--gray-800); }
.dd-item .s { font-size: .75rem; color: var(--gray-500); }

.content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 1.25rem; }

.menu-toggle { display: none; }

/* --- Cartes ------------------------------------------------------------------ */
.card {
  background: var(--card); border: 1px solid var(--gray-100);
  border-radius: 1rem; box-shadow: var(--shadow-sm); padding: 1.25rem;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .875rem; }
.card-title { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 700; color: var(--gray-900); }
.card-title .icon { color: var(--accent-600); }
.card-sub { font-size: .75rem; color: var(--gray-400); margin-top: .125rem; }
.card-link { font-size: .75rem; font-weight: 700; color: var(--accent-600); display: inline-flex; align-items: center; gap: .125rem; }
.card-link:hover { text-decoration: underline; }
.card-empty { padding: 1.75rem 0; text-align: center; font-size: .8125rem; color: var(--gray-400); }

.grid { display: grid; gap: 1rem; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }

/* --- Carte d'accueil (hero) ------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  display: flex; gap: 1.5rem; padding: 1.5rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(243,244,246,.5); border-radius: 1rem; box-shadow: var(--shadow-sm);
}
.hero::after {
  content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 24rem; height: 24rem;
  background: radial-gradient(closest-side, rgba(209,250,229,.35), rgba(224,242,254,.12), transparent);
  filter: blur(48px); pointer-events: none;
}
.hero-left { flex: 1; display: flex; align-items: center; gap: 1.25rem; min-width: 0; z-index: 1; }
.hero-mascot { width: 6.5rem; height: 6.5rem; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 8px 12px rgba(0,0,0,.08)); }
.hero h1 { font-size: 1.75rem; font-weight: 800; color: var(--gray-900); letter-spacing: -.02em; }
.hero p { margin: .375rem 0 0; font-size: .875rem; font-weight: 500; color: var(--gray-500); }
.hero-div { width: 1px; background: rgba(229,231,235,.6); align-self: stretch; margin: .5rem 0; }
.hero-right { width: 27.5rem; flex-shrink: 0; display: flex; flex-direction: column; gap: .75rem; z-index: 1; }
.hero-cta-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .5rem 1rem; border-radius: .75rem; border: none; cursor: pointer; font-family: inherit;
  background: #059669; color: #fff; font-size: .75rem; font-weight: 700; box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: #047857; }
.date-pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-width: 10.5rem; padding: .5rem .75rem; border-radius: .75rem;
  border: 1px solid var(--gray-200); background: rgba(255,255,255,.95);
  font-size: .75rem; font-weight: 600; color: var(--gray-700); box-shadow: var(--shadow-sm);
}
.date-pill .icon { color: var(--gray-400); }
.quick-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.quick {
  display: flex; flex-direction: column; align-items: center; gap: .375rem;
  padding: .625rem .25rem; border-radius: .75rem;
  background: rgba(255,255,255,.9); border: 1px solid var(--gray-100);
  font-size: 9px; font-weight: 600; color: var(--gray-600); text-align: center; line-height: 1.2;
  transition: transform .15s, box-shadow .15s;
}
.quick:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.quick .ico {
  width: 1.75rem; height: 1.75rem; border-radius: 999px; display: grid; place-items: center;
}
.quick .ico .icon { width: .875rem; height: .875rem; }
.ico-green { background: #d1fae5; color: #059669; }
.ico-rose  { background: #ffe4e6; color: #e11d48; }
.ico-violet{ background: #ede9fe; color: #7c3aed; }
.ico-sky   { background: #e0f2fe; color: #0284c7; }
.ico-amber { background: #fef3c7; color: #d97706; }
.ico-blue  { background: #dbeafe; color: #2563eb; }

/* --- Tuiles de statistiques -------------------------------------------------- */
.stat {
  background: var(--card); border: 1px solid var(--gray-100); border-radius: 1rem;
  box-shadow: var(--shadow-sm); padding: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.stat .ico { color: var(--gray-400); }
.stat .ico.fb { color: #2563eb; } .stat .ico.tt { color: #111; } .stat .ico.ok { color: var(--accent-600); }
.stat .value { font-size: 1.75rem; font-weight: 900; color: var(--gray-900); line-height: 1; letter-spacing: -.02em; }
.stat .label { font-size: .75rem; font-weight: 500; color: var(--gray-500); }
.stat .hint { font-size: .6875rem; color: var(--gray-400); }
.big { font-size: 2rem; font-weight: 900; color: var(--gray-900); letter-spacing: -.02em; line-height: 1; }
.big small { font-size: .75rem; font-weight: 500; color: var(--gray-500); margin-inline-start: .375rem; letter-spacing: 0; }

/* --- Listes et tableaux ------------------------------------------------------ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
th, td { padding: .625rem .75rem; text-align: start; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
th { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); font-weight: 600; white-space: nowrap; }
tbody tr:hover { background: var(--gray-50); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-list { display: flex; flex-direction: column; }
.row-list > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--gray-100); font-size: .8125rem; }
.row-list > div:last-child { border-bottom: none; }

.bar { height: .375rem; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* --- Pastilles ----------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; padding: .125rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.badge.ok    { background: #d1fae5; color: #047857; }
.badge.warn  { background: #fef3c7; color: #b45309; }
.badge.bad   { background: #fee2e2; color: #b91c1c; }
.badge.info  { background: #dbeafe; color: #1d4ed8; }
.badge.muted { background: var(--gray-100); color: var(--gray-600); }

/* --- Boutons et formulaires ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  padding: .5rem .875rem; border-radius: .5rem; font-size: .8125rem; font-weight: 600; font-family: inherit;
  border: 1px solid var(--gray-900); background: var(--gray-900); color: #fff; cursor: pointer;
  transition: opacity .15s;
}
html.dark .btn { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.btn:hover { opacity: .9; }
.btn.secondary { background: var(--card); color: var(--gray-700); border-color: var(--border); }
.btn.secondary:hover { background: var(--gray-50); opacity: 1; }
.btn.danger { background: var(--destructive); border-color: var(--destructive); color: #fff; }
.btn.accent { background: #10b981; border-color: #10b981; }
.btn.small { padding: .375rem .625rem; font-size: .75rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: .375rem; color: var(--gray-700); }
.field { margin-bottom: 1rem; }
.hint { font-size: .75rem; color: var(--gray-500); margin-top: .375rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=date], input[type=search], input[type=url], select, textarea {
  width: 100%; height: 2.5rem; padding: 0 .75rem; font: inherit; font-size: .875rem;
  border: 1px solid var(--border); border-radius: .5rem; background: var(--card); color: var(--foreground);
}
textarea { height: auto; min-height: 6rem; padding: .625rem .75rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gray-400); box-shadow: 0 0 0 2px var(--accent-soft); }
input[type=checkbox], input[type=radio] { width: auto; height: auto; margin-inline-end: .5rem; accent-color: #10b981; }
input[type=file] { height: auto; padding: .5rem; }
.inline-check { display: flex; align-items: center; font-weight: 500; }
.toolbar { display: flex; flex-wrap: wrap; gap: .625rem; align-items: flex-end; }
.toolbar .field { margin-bottom: 0; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }

/* --- Messages ------------------------------------------------------------------- */
.flash { padding: .75rem 1rem; border-radius: .75rem; font-size: .8125rem; border: 1px solid; display: flex; gap: .5rem; align-items: center; }
.flash.success { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.flash.error   { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.flash.info    { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--gray-500); }
.empty h3 { color: var(--gray-800); margin-bottom: .25rem; }
.empty p { margin: 0 0 1rem; font-size: .8125rem; }

/* --- Pagination ------------------------------------------------------------------ */
.pagination { display: flex; gap: .375rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.pagination a, .pagination span { padding: .375rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); font-size: .8125rem; }
.pagination .current { background: var(--gray-900); color: #fff; border-color: var(--gray-900); }

/* --- Graphique en barres (CSS pur) ------------------------------------------------ */
.chart { display: flex; align-items: flex-end; gap: .25rem; height: 10rem; padding-top: .5rem; }
.chart .bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; min-width: 0; }
.chart .fill { width: 100%; background: linear-gradient(180deg, #34d399, #059669); border-radius: .25rem .25rem 0 0; min-height: 3px; }
.chart .lbl { font-size: 10px; color: var(--gray-400); white-space: nowrap; }

/* --- Pages d'authentification -------------------------------------------------------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--shell-bg); }
.auth-box { width: 100%; max-width: 26rem; background: var(--card); border: 1px solid var(--gray-100); border-radius: 1rem; padding: 2rem; box-shadow: var(--shadow-md); }
.auth-box .brand { margin-bottom: 1.5rem; padding: 0; }
.auth-box h1 { font-size: 1.375rem; margin-bottom: .25rem; }
.auth-box .sub { color: var(--gray-500); font-size: .875rem; margin: 0 0 1.5rem; }
.auth-box .alt { text-align: center; margin-top: 1.25rem; font-size: .8125rem; color: var(--gray-500); }
.auth-box .alt a { color: var(--accent-600); font-weight: 600; }
.divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; color: var(--gray-400); font-size: .75rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* --- Utilitaires --------------------------------------------------------------------- */
.muted { color: var(--gray-500); }
.small { font-size: .75rem; }
.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .8125rem; }
.nowrap { white-space: nowrap; }
.right { text-align: end; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.flex { display: flex; gap: .625rem; align-items: center; }
.flex-between { display: flex; gap: .625rem; align-items: center; justify-content: space-between; }
.thumb { width: 2.5rem; height: 2.5rem; border-radius: .5rem; object-fit: cover; background: var(--gray-100); }
.text-green { color: var(--accent-600); }

/* --- En-tete de page (Produits, etc.) --------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-title { font-size: 1.5rem; font-weight: 900; letter-spacing: -.025em; color: var(--foreground); }
.page-sub { margin: .125rem 0 0; font-size: .75rem; color: var(--muted-fg); }

/* --- Catalogue produits : grille de cartes (page Produits Next.js) -------------- */
.catalog-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: 1rem;
}
.catalog-filter.is-active { padding: .5rem .75rem; border-radius: .75rem; border: 1px solid rgba(16,185,129,.25); background: rgba(16,185,129,.04); }
.catalog-search { position: relative; flex: 1 1 14rem; max-width: 22rem; }
.catalog-search .icon-sm { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted-fg); pointer-events: none; }
.catalog-filter input[type=search] { height: 2.25rem; padding-inline-start: 2.25rem; font-size: .8125rem; }
.catalog-filter select { width: auto; height: 2.25rem; font-size: .8125rem; }
.catalog-count { margin-inline-start: auto; font-size: .75rem; color: var(--foreground); }
.catalog-reset { font-size: .75rem; font-weight: 700; color: var(--accent-600); }
.catalog-reset:hover { text-decoration: underline; }

.catalog { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcard {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  box-shadow: var(--shadow-sm); transition: box-shadow .2s;
}
.pcard:hover { box-shadow: var(--shadow-md); }
.pcard-hover {
  position: absolute; top: .625rem; right: .625rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .25rem .625rem; border-radius: .5rem;
  background: rgba(2,6,23,.8); color: #fff; font-size: .6875rem; font-weight: 700;
  opacity: 0; backdrop-filter: blur(4px); transition: opacity .15s;
}
.pcard:hover .pcard-hover, .pcard:focus-within .pcard-hover { opacity: 1; }
.pcard-media {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--muted); border-bottom: 1px solid rgba(226,232,240,.4); color: rgba(100,116,139,.2);
}
.pcard-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s; }
.pcard:hover .pcard-media img { transform: scale(1.05); }
.pcard-body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: .75rem; padding: 1rem; }
.pcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.pcard-name {
  font-size: .75rem; font-weight: 700; line-height: 1.25; color: var(--foreground);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-price { display: flex; align-items: baseline; gap: .5rem; margin-top: .5rem; }
.pcard-price strong { font-size: 1rem; font-weight: 800; color: var(--foreground); }
.pcard-price s { font-size: .625rem; color: var(--muted-fg); }
.pcard-foot { padding-top: .5rem; border-top: 1px solid rgba(226,232,240,.4); }
.pcard-stock { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; font-size: .6875rem; color: var(--muted-fg); }
.pcard-stock .ok  { font-weight: 600; }
.pcard-stock .low { font-weight: 800; color: #f59e0b; }
.pcard-stock .out { font-weight: 800; color: #f43f5e; }
.pcard-actions { display: flex; gap: .375rem; padding-top: .375rem; }
.pcard-actions form { display: contents; }
.pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  height: 2rem; padding: 0 .625rem; border-radius: .5rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
  font: inherit; font-size: .6875rem; font-weight: 700; text-decoration: none; transition: background .15s;
}
.pbtn:hover { background: var(--muted); }
.pbtn.grow { flex: 1; }
.pbtn.sq { width: 2rem; padding: 0; flex-shrink: 0; }
.pbtn.green { color: var(--accent-600); }
.pbtn.green:hover { background: var(--accent-soft-2); }
.pbtn.red { color: #f43f5e; }
.pbtn.red:hover { background: rgba(244,63,94,.1); }
.badge.outline { background: transparent; color: var(--foreground); border: 1px solid var(--border); }
.catalog-end { padding: 1.5rem 0; text-align: center; font-size: .75rem; color: var(--muted-fg); }
.catalog-empty .icon-xl { color: rgba(100,116,139,.3); margin: 0 auto 1rem; display: block; }
.catalog-empty h3 { font-size: 1.125rem; font-weight: 700; }
.catalog-empty p { max-width: 24rem; margin: .375rem auto 1.5rem; }

/* --- Editeur produit : 7 etapes + colonne laterale (page Next.js) ------------ */
[hidden] { display: none !important; }
.pe { display: flex; flex-direction: column; gap: 1rem; }
.pe-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(226,232,240,.6); }
.pe-crumb { display: flex; align-items: center; gap: .25rem; font-size: .6875rem; font-weight: 600; color: var(--muted-fg); }
.pe-crumb a { color: inherit; } .pe-crumb a:hover { text-decoration: underline; }
.pe-crumb span { color: var(--foreground); }
.pe-title { font-size: 1.25rem; font-weight: 900; letter-spacing: -.025em; margin-top: .25rem; color: var(--foreground); }
.pe-head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pbtn.primary { background: #10b981; border-color: #10b981; color: #fff; font-weight: 800; padding: 0 1rem; box-shadow: var(--shadow-sm); }
.pbtn.primary:hover { background: #059669; }
.pbtn.lg { height: 2.25rem; font-size: .75rem; padding: 0 1.25rem; }
.pbtn.xs { height: 1.75rem; font-size: .625rem; }

.pe-tabs { display: flex; gap: .25rem; padding-bottom: .625rem; border-bottom: 1px solid rgba(226,232,240,.4); overflow-x: auto; }
.pe-tab-btn {
  display: inline-flex; align-items: center; gap: .375rem; flex-shrink: 0;
  padding: .375rem .75rem; border-radius: .5rem; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 700; color: var(--muted-fg); transition: background .2s;
}
.pe-tab-btn:hover { background: var(--muted); }
.pe-tab-btn .num { display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 999px; font-size: .5625rem; background: rgba(100,116,139,.15); }
.pe-tab-btn.active { background: #10b981; color: #fff; box-shadow: var(--shadow-sm); }
.pe-tab-btn.active .num { background: #fff; color: #10b981; font-weight: 800; }

.pe-main { display: flex; gap: 1.25rem; align-items: flex-start; }
.pe-panel {
  flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  padding: 1.25rem; box-shadow: var(--shadow-sm); max-height: 70vh; overflow-y: auto;
}
.pe-tab { display: flex; flex-direction: column; gap: 1rem; }
.pe-grid { display: grid; gap: 1rem; }
.pe-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pe-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pe-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pe-grid .span-2 { grid-column: span 2; }
.lbl { display: block; font-size: .75rem; font-weight: 700; color: var(--foreground); }
.lbl.muted { color: var(--muted-fg); }
.lbl.block, .lbl-hint.block { display: block; }
.lbl-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.lbl-link { font-size: .625rem; font-weight: 700; color: #10b981; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: .125rem; }
.lbl-link:hover { text-decoration: underline; }
.lbl-hint { font-size: .625rem; color: var(--muted-fg); margin-top: .125rem; }
.pe input[type=text], .pe input[type=number], .pe input[type=search], .pe input[type=url], .pe select, .pe textarea {
  margin-top: .25rem; height: 2.25rem; font-size: .75rem; border-radius: .5rem;
}
.pe textarea { height: auto; min-height: 0; padding: .5rem .75rem; }
.pe select:disabled { background: var(--gray-50); color: var(--gray-500); }
.pe input:focus, .pe select:focus, .pe textarea:focus { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.25); }
.pe .w-20 { width: 5rem; } .pe .w-24 { width: 6rem; } .pe .grow { flex: 1; min-width: 0; } .pe .grow-2 { flex: 2; min-width: 0; }
.pe-empty { padding: 1.5rem 0; text-align: center; font-size: .75rem; color: var(--muted-fg); margin: 0; }

.pe-box { border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.pe-box.green { border-color: rgba(16,185,129,.2); background: rgba(16,185,129,.02); }
.pe-box > .pbtn { align-self: flex-start; }
.pe-box.muted { background: rgba(241,245,249,.4); }
.pe-box .box-title { display: flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 700; }
.pe-box .box-title .icon-sm { color: #10b981; }
.pe-box .box-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(226,232,240,.4); }
.chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.chip { padding: .125rem .375rem; border-radius: .25rem; border: 1px solid var(--border); background: var(--background); font: inherit; font-size: .625rem; font-weight: 700; color: var(--muted-fg); cursor: pointer; }
.chip:hover { background: var(--muted); }
.bulk-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem; border: 1px solid var(--border); border-radius: .5rem; background: rgba(241,245,249,.4); }
.bulk-row input { margin-top: 0; height: 1.75rem; }
.variant-list, .faq-list { display: flex; flex-direction: column; gap: .375rem; max-height: 300px; overflow-y: auto; padding-right: .25rem; }
.variant-row, .faq-row { display: flex; align-items: center; gap: .5rem; }
.variant-row input, .faq-row input { margin-top: 0; height: 2rem; }
.pe .ic { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .375rem; border: none; background: transparent; color: var(--muted-fg); cursor: pointer; flex-shrink: 0; }
.pe .ic:hover { background: var(--muted); color: var(--foreground); }
.pe .ic.red { color: #f43f5e; } .pe .ic.red:hover { background: rgba(244,63,94,.1); color: #f43f5e; }

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; text-align: center; cursor: pointer;
  padding: 2rem; border: 2px dashed var(--border); border-radius: 1rem; background: rgba(241,245,249,.3); color: var(--muted-fg); transition: all .2s;
}
.dropzone:hover, .dropzone.over { border-color: rgba(16,185,129,.5); background: rgba(241,245,249,.6); }
.dropzone .icon-lg { width: 2rem; height: 2rem; opacity: .6; margin-bottom: .375rem; animation: dz-bounce 1s infinite; }
@keyframes dz-bounce { 0%, 100% { transform: translateY(-15%); } 50% { transform: none; } }
.dz-title { font-size: .75rem; font-weight: 700; color: var(--foreground); }
.dz-sub { font-size: .625rem; }
.media-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.media-grid.banners { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.media-item { position: relative; aspect-ratio: 3 / 4; border-radius: .75rem; overflow: hidden; border: 1px solid var(--border); background: var(--muted); }
.media-grid.banners .media-item { aspect-ratio: 4 / 5; border-radius: .5rem; }
.media-item img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.media-item.is-deleted { opacity: .35; outline: 2px solid #f43f5e; }
.media-main, .media-new { position: absolute; top: .25rem; left: .25rem; padding: .0625rem .25rem; border-radius: .375rem; background: #10b981; color: #fff; font-size: .5rem; font-weight: 800; box-shadow: var(--shadow-sm); }
.media-new { background: #0ea5e9; }
.media-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem; background: rgba(2,6,23,.8); opacity: 0; transition: opacity .15s; }
.media-item:hover .media-over { opacity: 1; }
.media-set-main { padding: .25rem .5rem; border-radius: .25rem; border: none; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: .5625rem; font-weight: 700; cursor: pointer; }
.media-set-main:hover { background: rgba(255,255,255,.2); }
.media-del { padding: .25rem; border-radius: .25rem; border: none; background: rgba(244,63,94,.2); color: #f43f5e; cursor: pointer; display: grid; place-items: center; }
.media-del:hover { background: rgba(244,63,94,.4); }
.media-empty { display: block; padding: 3rem 0; border: 1px solid dashed; border: 1px dashed var(--border); border-radius: .75rem; text-align: center; font-size: .75rem; color: var(--muted-fg); }
.media-empty.dashed { padding: 1.5rem 0; font-size: .625rem; cursor: pointer; border-radius: .5rem; }
.media-empty.dashed:hover { border-color: rgba(16,185,129,.5); color: #10b981; }

.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .5rem; }
.theme-card { display: flex; flex-direction: column; gap: .375rem; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); cursor: pointer; transition: all .15s; }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card:has(input:checked) { border-color: #10b981; background: rgba(16,185,129,.1); box-shadow: 0 0 0 1px rgba(16,185,129,.3); }
.theme-name { display: flex; align-items: center; gap: .375rem; margin-top: .25rem; font-size: .75rem; font-weight: 700; color: var(--foreground); }
.theme-name em { display: none; margin-inline-start: auto; font-style: normal; font-size: .625rem; color: #10b981; }
.theme-card:has(input:checked) .theme-name em { display: inline; }
.theme-target { font-size: .5625rem; font-weight: 600; color: #10b981; text-transform: uppercase; letter-spacing: .04em; }
.theme-prev { display: flex; flex-direction: column; gap: .375rem; padding: .5rem; border-radius: .5rem; border: 1px solid var(--border); background: #fff; }
.theme-prev.plain { align-items: center; justify-content: center; min-height: 5.5rem; color: var(--gray-400); }
.theme-prev.conversion_max { background: #020617; border-color: rgba(244,63,94,.3); padding-top: 0; }
.theme-prev.trust_dz { border-color: #a7f3d0; }
.theme-prev.mobile_rapide { border-color: #ddd6fe; padding-top: 0; }
.tp-bar { margin: 0 -.5rem; padding: .125rem; text-align: center; font-size: .4375rem; font-weight: 800; color: #fff; background: linear-gradient(90deg, #e11d48, #f97316); }
.mobile_rapide .tp-bar { text-align: start; padding: .375rem .5rem; background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.tp-row { display: flex; align-items: center; gap: .25rem; } .tp-row.center { justify-content: center; }
.tp-chip { font-style: normal; padding: .125rem .25rem; border-radius: .25rem; background: rgba(255,255,255,.1); color: #fff; font-size: .4375rem; font-weight: 700; }
.tp-card { display: flex; align-items: center; gap: .375rem; padding: .25rem; border-radius: .25rem; background: #fff; border: 1px solid #e2e8f0; }
.tp-card b { margin-inline-start: auto; font-size: .5rem; color: #0f172a; }
.conversion_max .tp-card b { color: #e11d48; }
.tp-thumb { width: 1.25rem; height: 1.25rem; border-radius: .25rem; background: rgba(0,0,0,.1); }
.tp-line { display: block; height: .625rem; border-radius: .25rem; background: #f1f5f9; flex: 1; }
.tp-line.dim { background: rgba(255,255,255,.1); } .tp-line.short { height: .25rem; flex: 0 0 66%; background: #a7f3d0; }
.tp-line.half { flex: 1; background: #ecfdf5; } .tp-line.title { height: .25rem; width: 50%; flex: none; margin: 0 auto; background: #1e293b; }
.tp-dot { display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 999px; background: #d1fae5; font-style: normal; font-size: .5rem; }
.tp-num { display: grid; place-items: center; width: .625rem; height: .625rem; border-radius: 999px; background: #0f172a; color: #fff; font-style: normal; font-size: .375rem; }
.tp-cta { display: block; height: .875rem; border-radius: .25rem; background: #020617; }
.conversion_max .tp-cta { background: linear-gradient(90deg, #e11d48, #f97316); }
.trust_dz .tp-cta { background: linear-gradient(90deg, #059669, #10b981); }
.mobile_rapide .tp-cta { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }

.layout-list { display: flex; flex-direction: column; gap: .375rem; }
.layout-item { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); font-size: .75rem; cursor: grab; }
.layout-item.dragging { opacity: .4; }
.layout-item.off { opacity: .5; border-style: dashed; background: rgba(255,255,255,.5); }
.layout-label { font-weight: 600; }
.layout-eye { display: grid; place-items: center; border: none; background: none; cursor: pointer; color: var(--muted-fg); padding: .125rem; }
.layout-eye:hover { color: var(--foreground); }
.layout-eye .icon.on { color: #10b981; } .layout-eye .icon.off { display: none; }
.layout-item.off .layout-eye .icon.on { display: none; } .layout-item.off .layout-eye .icon.off { display: block; }
.domain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .25rem; }
.domain-card { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); font-size: .75rem; }
.domain-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.domain-card .icon-sm, .domain-card small { margin-inline-start: auto; color: #10b981; flex-shrink: 0; }
.domain-card small { color: var(--muted-fg); font-size: .625rem; }
.domain-card.on { border-color: #10b981; background: rgba(16,185,129,.1); }
.recap { font-size: .75rem; line-height: 1.7; }
.recap span { color: var(--muted-fg); } .recap strong { color: var(--foreground); }
.recap a { color: #10b981; } .recap a:hover { text-decoration: underline; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .6875rem; }
.pe-actions { display: flex; flex-wrap: wrap; gap: .625rem; padding-top: .5rem; }
.pbtn.red { color: #f43f5e; } .pbtn.red:hover { background: rgba(244,63,94,.1); border-color: #f43f5e; }

.pe-side { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem; }
.side-card { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; padding: 1rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .5rem; }
.side-title { display: block; font-size: .625rem; font-weight: 800; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .06em; }
.side-head { display: flex; align-items: center; justify-content: space-between; }
.side-card select { margin-top: 0; font-weight: 600; }
.side-hint { font-size: .625rem; color: var(--muted-fg); line-height: 1.4; }
.side-strong { margin-top: .25rem; font-weight: 700; color: var(--foreground); }
.side-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; }
.side-gallery:empty { display: none; }
.side-gallery img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; object-position: top; border-radius: .5rem; border: 1px solid var(--border); background: var(--muted); }
.side-action {
  display: block; width: 100%; padding: .375rem .75rem; border: 1px solid var(--border); border-radius: .5rem; text-align: start;
  background: transparent; font: inherit; font-size: .6875rem; font-weight: 700; color: var(--foreground); cursor: pointer; transition: background .15s;
}
.side-action:hover { background: var(--muted); }
.side-action.red { color: #f43f5e; } .side-action.red:hover { background: rgba(244,63,94,.1); border-color: #f43f5e; }
.side-action.off { opacity: .4; cursor: not-allowed; } .side-action.off:hover { background: transparent; }
.side-meta { padding-inline-start: .5rem; font-size: .625rem; color: rgba(100,116,139,.8); line-height: 1.6; }

@media (max-width: 1024px) {
  .pe-main { flex-direction: column; }
  .pe-side { width: 100%; }
  .pe-panel { max-height: none; }
  .media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .pe-head { flex-direction: column; align-items: flex-start; }
  .pe-grid.cols-2, .pe-grid.cols-3, .pe-grid.cols-4 { grid-template-columns: 1fr; }
  .pe-grid .span-2 { grid-column: auto; }
  .theme-grid, .domain-grid { grid-template-columns: 1fr; }
  .media-grid, .media-grid.banners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Commandes : indicateurs, tableau, call center, kanban, panneau --------- */
.orders { display: flex; flex-direction: column; gap: .75rem; }
.orders .page-head { margin-bottom: .25rem; align-items: flex-start; }
.title-row { display: flex; align-items: center; gap: .5rem; }
.help-dot { width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--muted-fg); font-size: .6875rem; cursor: pointer; }
.help-dot:hover { background: var(--muted); }
.min-w-0 { min-width: 0; }
.grow { flex: 1; }
.muted { color: var(--muted-fg); }
.link-green { background: none; border: none; padding: 0; font: inherit; font-size: .75rem; font-weight: 600; color: var(--accent-600); cursor: pointer; }
.link-green:hover { text-decoration: underline; }
.c-fg { color: var(--foreground); } .c-green { color: var(--accent-600); } .c-blue { color: #2563eb; } .c-rose { color: #f43f5e; } .c-violet { color: #7c3aed; } .c-amber { color: #d97706; }

.kpi-row { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .375rem; }
.kpi { flex: 0 0 11.5rem; background: var(--card); border: 1px solid var(--border); border-radius: .875rem; padding: .875rem; box-shadow: var(--shadow-sm); }
.kpi-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.kpi-ico { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .5rem; }
.ib-green { background: #ecfdf5; color: #059669; } .ib-blue { background: #eff6ff; color: #2563eb; } .ib-rose { background: #fff1f2; color: #e11d48; } .ib-violet { background: #f5f3ff; color: #7c3aed; } .ib-amber { background: #fffbeb; color: #d97706; }
.kpi-label { font-size: .6875rem; font-weight: 700; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.kpi-mid { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.kpi-value { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
.kpi-delta { font-size: .625rem; font-weight: 800; padding: .125rem .375rem; border-radius: .25rem; }
.kpi-delta.up { background: #ecfdf5; color: #047857; } .kpi-delta.down { background: #fff1f2; color: #be123c; }
.kpi-vs { font-size: .625rem; color: var(--muted-fg); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.toolbar-row, .filter-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.view-switch { display: flex; gap: .125rem; padding: .25rem; border-radius: .75rem; background: rgba(241,245,249,.6); border: 1px solid rgba(226,232,240,.6); }
.view-switch button { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem 1rem; border-radius: .5rem; border: none; background: none; font: inherit; font-size: .75rem; font-weight: 700; color: var(--muted-fg); cursor: pointer; }
.view-switch button:hover { color: var(--foreground); background: rgba(241,245,249,.4); }
.view-switch button.active { background: #10b981; color: #fff; box-shadow: var(--shadow-sm); }
.tool-btn { display: inline-flex; align-items: center; gap: .375rem; height: 2.125rem; padding: 0 .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); color: var(--foreground); font: inherit; font-size: .75rem; font-weight: 500; cursor: pointer; text-decoration: none; list-style: none; }
.tool-btn::-webkit-details-marker { display: none; }
.tool-btn:hover { background: var(--muted); }
.tool-btn.sq { width: 2.125rem; padding: 0; justify-content: center; color: var(--muted-fg); }
.tool-btn.ghost { border-color: transparent; background: none; color: var(--muted-fg); }
.tool-btn.live .dot { width: .375rem; height: .375rem; border-radius: 999px; background: #a1a1aa; }
.tool-btn.live.on { border-color: #10b981; background: #ecfdf5; color: #047857; }
.tool-btn.live.on .dot { background: #10b981; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.tool-dd { position: relative; }
.tool-dd .dd-menu { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 30; min-width: 12rem; padding: .5rem; background: var(--card); border: 1px solid var(--border); border-radius: .75rem; box-shadow: var(--shadow-xl); }
.cols-menu label { display: flex; align-items: center; gap: .5rem; padding: .25rem .25rem; font-size: .75rem; cursor: pointer; border-radius: .25rem; }
.cols-menu label:hover { background: var(--muted); }
.cols-menu input { margin: 0; }
.sort-menu a { display: block; padding: .375rem .75rem; border-radius: .375rem; font-size: .75rem; color: var(--foreground); }
.sort-menu a:hover { background: var(--muted); } .sort-menu a.on { color: var(--accent-600); font-weight: 700; }
.adv-menu { display: grid; gap: .375rem; width: 16rem; }
.adv-menu .lbl { font-size: .6875rem; font-weight: 700; }
.adv-menu select, .adv-menu input { height: 2rem; font-size: .75rem; }
.count-pill { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 999px; background: #10b981; color: #fff; font-size: .5625rem; font-weight: 700; }
.f-select { width: auto; height: 2rem; padding: 0 1.75rem 0 .625rem; font-size: .75rem; font-weight: 500; border-radius: .5rem; }
.f-search { position: relative; }
.f-search .icon-sm { position: absolute; left: .625rem; top: 50%; transform: translateY(-50%); color: var(--muted-fg); pointer-events: none; }
.f-search input[type=search] { width: 13rem; height: 2rem; padding: 0 .75rem 0 2rem; font-size: .75rem; border-radius: .5rem; }

.orders-main { display: flex; gap: 1rem; align-items: flex-start; min-height: 24rem; }
.orders-table-wrap { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; display: flex; flex-direction: column; }
.orders-scroll { overflow: auto; max-height: 70vh; }
.orders-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: .75rem; }
.orders-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; border-bottom: 1px solid var(--border); padding: .75rem; text-align: left; font-weight: 700; color: var(--muted-fg); white-space: nowrap; }
.orders-table thead th a { color: inherit; display: inline-flex; align-items: center; gap: .25rem; }
.orders-table thead th a:hover { color: var(--foreground); }
.orders-table th.c-check, .orders-table td.c-check { width: 2.5rem; text-align: center; }
.orders-table td.c-check input, .orders-table th.c-check input { margin: 0; }
.orders-table th.c-actions { text-align: right; }
.orders-table tbody td { padding: .5rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.orders-table tbody tr { cursor: pointer; transition: background .1s; }
.orders-table tbody tr:hover { background: rgba(241,245,249,.4); }
.orders-table tbody tr.sel { background: rgba(239,246,255,.6); }
.orders-table tbody tr.active { background: #ecfdf5; }
.nowrap { white-space: nowrap; }
.ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--foreground); }
.ref.lg { font-size: 1.125rem; font-weight: 900; }
.risk { display: inline-block; margin-top: .125rem; padding: .0625rem .25rem; border: 1px solid; border-radius: .25rem; font-size: .5625rem; font-weight: 700; }
.risk.low { background: #ecfdf5; color: #047857; border-color: #a7f3d0; } .risk.medium { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.risk.high { background: #fff7ed; color: #c2410c; border-color: #fed7aa; } .risk.block { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.prod { display: flex; align-items: center; gap: .5rem; }
.prod-img, .op-img, .cc-img, .kb-img, .cc-big { display: grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: .5rem; background: var(--muted); border: 1px solid var(--border); color: var(--muted-fg); }
.prod-img { width: 2rem; height: 2rem; } .prod-img img, .op-img img, .cc-img img, .kb-img img, .cc-big img { width: 100%; height: 100%; object-fit: cover; }
.prod-name { display: block; font-weight: 500; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-more { font-size: .5625rem; color: var(--muted-fg); }
.cell-strong { font-weight: 600; color: var(--foreground); }
.cell-sub { font-size: .625rem; color: var(--muted-fg); }
.cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .625rem; color: var(--muted-fg); }
.cell-mono .icon-xs { vertical-align: -1px; margin-inline-end: .125rem; }
.chip-src { display: inline-flex; align-items: center; gap: .25rem; font-size: .6875rem; color: var(--foreground); }
.chip-src i { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 999px; color: #fff; font-style: normal; font-size: .5625rem; font-weight: 800; }
.ch-meta { background: #3b82f6; } .ch-tiktok { background: #000; } .ch-google { background: #ef4444; } .ch-wa { background: #22c55e; } .ch-org { background: #10b981; } .ch-manual { background: #71717a; }
.chip-carrier { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border: 1px solid var(--border); border-radius: .375rem; font-size: .625rem; font-weight: 600; }
.score { display: inline-block; padding: .125rem .5rem; border: 1px solid; border-radius: .375rem; font-size: .6875rem; font-weight: 700; }
.score.good { background: #ecfdf5; color: #047857; border-color: #a7f3d0; } .score.mid { background: #fffbeb; color: #b45309; border-color: #fde68a; } .score.bad { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.st { display: inline-block; padding: .125rem .5rem; border: 1px solid; border-radius: .375rem; font-size: .625rem; font-weight: 600; white-space: nowrap; }
.st-pending { background: #fffbeb; color: #b45309; border-color: #fde68a; } .st-confirmed { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.st-no_answer { background: #fff7ed; color: #c2410c; border-color: #fed7aa; } .st-packed { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }
.st-shipped { background: #fff7ed; color: #c2410c; border-color: #fed7aa; } .st-delivered { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.st-cancelled { background: #fff1f2; color: #be123c; border-color: #fecdd3; } .st-returned { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .125rem; }
.ra { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .25rem; border: none; background: none; color: var(--muted-fg); cursor: pointer; }
.ra:hover { background: var(--muted); color: var(--foreground); } .ra.green:hover { color: #059669; } .ra.amber:hover { color: #d97706; }
.empty-cell { padding: 5rem 1rem !important; text-align: center; }
.empty-cell .icon-xl { display: block; margin: 0 auto .5rem; color: var(--gray-300); width: 2.5rem; height: 2.5rem; }
.empty-title { display: block; font-weight: 600; } .empty-sub { display: block; font-size: .75rem; color: var(--muted-fg); }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem 1rem; border-top: 1px solid var(--border); background: rgba(241,245,249,.3); font-size: .75rem; }

.bulk-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); }
.bulk-sel { display: flex; align-items: center; gap: .75rem; font-size: .75rem; color: var(--muted-fg); }
.bulk-sel input { margin: 0; }
.bulk-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .75rem; }
.bb { display: inline-flex; align-items: center; gap: .25rem; height: 2rem; padding: 0 .75rem; border-radius: .5rem; border: 1px solid var(--border); background: var(--background); color: var(--foreground); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; text-decoration: none; }
.bb:hover { background: var(--muted); }
.bb.green { background: #10b981; border-color: #10b981; color: #fff; } .bb.green:hover { background: #059669; }
.bb.blue { background: #3b82f6; border-color: #3b82f6; color: #fff; } .bb.blue:hover { background: #2563eb; }
.bb.rose { background: #f43f5e; border-color: #f43f5e; color: #fff; } .bb.rose:hover { background: #e11d48; }
.bb.indigo { background: #6366f1; border-color: #6366f1; color: #fff; } .bb.indigo:hover { background: #4f46e5; }
.vsep { width: 1px; height: 1.25rem; background: var(--border); margin: 0 .25rem; }
.per-select { width: auto; height: 1.75rem; padding: 0 1.5rem 0 .375rem; font-size: .75rem; border-radius: .25rem; }
.pager { display: flex; align-items: center; gap: .25rem; }
.pager a, .pager span { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .25rem; border: 1px solid var(--border); border-radius: .25rem; background: var(--background); font-size: .75rem; color: var(--muted-fg); }
.pager a:hover { background: var(--muted); } .pager .cur { color: var(--foreground); font-weight: 700; } .pager .dots, .pager .off { border: none; }

/* Panneau de detail */
.order-panel { width: 400px; flex-shrink: 0; background: var(--card); border: 1px solid var(--border); border-radius: .75rem; display: flex; flex-direction: column; max-height: calc(100vh - 12rem); position: sticky; top: 4.5rem; overflow: hidden; }
.op-head, .op-sec { padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.op-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .op-row.between { justify-content: space-between; }
.op-head .op-row:first-child { margin-bottom: .375rem; } .op-head .ic { margin-inline-start: auto; }
.op-prod { display: flex; gap: .75rem; } .op-img { width: 4rem; height: 4rem; }
.op-total { font-size: .875rem; font-weight: 700; color: var(--accent-600); margin-top: .25rem; }
.op-body { flex: 1; overflow-y: auto; }
.op-title { font-size: .625rem; font-weight: 700; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.op-client { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.avatar-ini { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: #d1fae5; border: 1px solid #a7f3d0; color: #047857; font-weight: 700; font-size: .875rem; flex-shrink: 0; }
.wa-round { margin-inline-start: auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: rgba(16,185,129,.1); }
.op-hist { display: grid; grid-template-columns: repeat(4, 1fr); gap: .375rem; text-align: center; }
.op-hist div { background: var(--muted); border: 1px solid var(--border); border-radius: .5rem; padding: .375rem; }
.op-hist b { display: block; font-size: .875rem; } .op-hist span { font-size: .5625rem; color: var(--muted-fg); text-transform: uppercase; }
.op-score { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.op-score .bar { flex: 1; height: .5rem; border-radius: 999px; background: var(--muted); overflow: hidden; }
.op-score .bar i { display: block; height: 100%; border-radius: 999px; } .bar .good { background: #10b981; } .bar .mid { background: #f59e0b; } .bar .bad { background: #f43f5e; }
.op-checks { list-style: none; margin: 0; padding: 0; font-size: .6875rem; display: grid; gap: .125rem; }
.op-checks .ok { color: #047857; } .op-checks .ko { color: var(--muted-fg); }
.op-timeline { display: grid; gap: .625rem; padding-inline-start: .25rem; border-inline-start: 2px solid var(--border); margin-inline-start: .375rem; }
.op-timeline > div { position: relative; display: flex; gap: .625rem; padding-inline-start: .75rem; }
.op-timeline > div i { position: absolute; inset-inline-start: -.5rem; top: .125rem; width: .75rem; height: .75rem; border-radius: 999px; border: 2px solid var(--border); background: var(--background); }
.op-timeline > div.done i { border-color: #10b981; background: #10b981; }
.tl-label { font-size: .75rem; color: var(--muted-fg); } .done .tl-label { color: var(--foreground); font-weight: 500; }
.tl-date { font-size: .5625rem; color: var(--muted-fg); font-family: ui-monospace, monospace; }
.op-note-row { display: flex; gap: .5rem; margin-bottom: .75rem; } .op-note-row input { height: 2rem; font-size: .75rem; }
.op-notes { display: grid; gap: .375rem; font-size: .75rem; }
.op-notes .note { padding: .5rem; border-radius: .5rem; background: var(--muted); }
.note-meta { font-size: .5625rem; color: var(--muted-fg); margin-top: .125rem; }
.op-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.qa { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .5rem; border: 1px solid; border-radius: .5rem; font: inherit; font-size: .5625rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.qa:hover { opacity: .8; }
.q-green { color: #059669; background: #ecfdf5; border-color: #a7f3d0; } .q-blue { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }
.q-amber { color: #d97706; background: #fffbeb; border-color: #fde68a; } .q-orange { color: #ea580c; background: #fff7ed; border-color: #fed7aa; }
.q-indigo { color: #4f46e5; background: #eef2ff; border-color: #c7d2fe; } .q-zinc { color: #52525b; background: #fafafa; border-color: #e4e4e7; }
.op-foot { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--border); }

/* Call center */
.cc-view { flex: 1; display: flex; gap: 1rem; align-items: flex-start; min-width: 0; }
.cc-queue { width: 18rem; flex-shrink: 0; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; display: flex; flex-direction: column; max-height: 75vh; overflow: hidden; }
.cc-qhead { display: flex; align-items: center; justify-content: space-between; padding: .75rem; border-bottom: 1px solid var(--border); font-size: .75rem; font-weight: 800; }
.count-amber { padding: .125rem .5rem; border-radius: .5rem; background: #fffbeb; color: #b45309; border: 1px solid #fde68a; font-size: .625rem; font-weight: 900; }
.cc-qlist { flex: 1; overflow-y: auto; padding: .5rem; display: grid; gap: .375rem; align-content: start; }
.cc-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem; border: 1px solid transparent; border-radius: .75rem; background: none; text-align: left; font: inherit; cursor: pointer; }
.cc-item:hover { background: rgba(241,245,249,.6); } .cc-item.on { border-color: #34d399; background: #ecfdf5; }
.cc-img { width: 2.25rem; height: 2.25rem; }
.cc-item .cell-strong { display: block; font-size: .6875rem; } .cc-item .cell-sub { display: block; }
.cc-right { margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; } .cc-right small { font-size: .5625rem; color: var(--muted-fg); }
.cc-empty, .kb-empty { padding: 2.5rem 1rem; border: 1px dashed var(--border); border-radius: .75rem; text-align: center; font-size: .75rem; color: var(--muted-fg); }
.cc-cur { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.25rem; max-height: 75vh; overflow-y: auto; }
.cc-cur-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cc-live { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: .75rem; background: #10b981; color: #fff; font-size: .75rem; font-weight: 900; box-shadow: var(--shadow-sm); }
.cc-live i { width: .375rem; height: .375rem; border-radius: 999px; background: #fff; animation: pulse 1.5s infinite; }
.cc-grid { display: flex; gap: 1rem; flex-wrap: wrap; }
.cc-prod { display: flex; gap: .75rem; } .cc-big { width: 7rem; height: 9rem; border-radius: .75rem; }
.cc-pname { font-size: 1rem; font-weight: 900; line-height: 1.2; } .cc-total { font-size: 1.25rem; font-weight: 900; color: var(--accent-600); margin-top: .5rem; }
.cc-client { flex: 1; min-width: 15rem; border: 1px solid var(--border); border-radius: .75rem; padding: .75rem; background: rgba(241,245,249,.3); }
.cc-cname { font-size: .875rem; font-weight: 900; } .cc-phone { display: block; font-family: ui-monospace, monospace; font-size: .875rem; font-weight: 700; color: var(--accent-600); margin-top: .125rem; }
.cc-chips { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .625rem; }
.chip-zinc, .chip-green, .chip-rose, .chip-violet, .chip-blue { padding: .125rem .5rem; border-radius: .25rem; border: 1px solid; font-size: .625rem; font-weight: 700; }
.chip-zinc { background: #f4f4f5; color: #3f3f46; border-color: var(--border); } .chip-green { background: #ecfdf5; color: #047857; border-color: rgba(167,243,208,.5); }
.chip-rose { background: #fff1f2; color: #be123c; border-color: rgba(254,205,211,.5); } .chip-violet { background: #f5f3ff; color: #6d28d9; border-color: rgba(221,214,254,.5); } .chip-blue { background: #eff6ff; color: #1d4ed8; border-color: rgba(191,219,254,.5); }
.cc-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1rem; }
.cc-ai { padding: .75rem; border-radius: .75rem; border: 1px solid; }
.cc-ai.good { background: #ecfdf5; border-color: #a7f3d0; } .cc-ai.warn { background: #fffbeb; border-color: #fde68a; }
.cc-ai-title { font-size: .625rem; font-weight: 700; text-transform: uppercase; } .good .cc-ai-title, .good .cc-ai-score { color: #047857; } .warn .cc-ai-title, .warn .cc-ai-score { color: #b45309; }
.cc-ai-score { font-size: 1.5rem; font-weight: 900; }
.cc-script { padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(241,245,249,.3); }
.cc-script p { margin: .375rem 0 0; font-size: .6875rem; white-space: pre-line; line-height: 1.6; }
.cc-rail { width: 15rem; flex-shrink: 0; display: grid; gap: .75rem; }
.cc-card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: .75rem; display: grid; gap: .5rem; }
.cc-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 2.5rem; border-radius: .75rem; border: 1px solid var(--border); background: var(--card); font: inherit; font-size: .75rem; font-weight: 800; color: var(--muted-fg); cursor: pointer; text-decoration: none; }
.cc-btn:hover { background: var(--muted); color: var(--foreground); }
.cc-btn.confirm { height: 3rem; background: #10b981; border-color: #10b981; color: #fff; font-size: .875rem; font-weight: 900; } .cc-btn.confirm:hover { background: #059669; }
.cc-btn.callback { background: #fffbeb; border-color: #fcd34d; color: #b45309; } .cc-btn.reject { background: #fff1f2; border-color: #fda4af; color: #e11d48; }
.cc-btn.wa { height: 2.25rem; background: #ecfdf5; border-color: #a7f3d0; color: #047857; } .cc-btn.sms { height: 2.25rem; background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.cc-btn.plain { height: 2.25rem; color: var(--foreground); }
.cc-done { flex: 1; padding: 6rem 1rem; border: 1px dashed var(--border); border-radius: 1rem; background: var(--card); text-align: center; font-size: .875rem; color: var(--muted-fg); }

/* Kanban */
.kanban-view { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.kb-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.kb-head h2 { font-size: .875rem; font-weight: 700; } .kb-head p { margin: .125rem 0 0; font-size: .75rem; }
.kb-bands { display: flex; gap: .5rem; flex-wrap: wrap; }
.kb-band { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); color: var(--muted-fg); font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; opacity: .6; }
.kb-band:hover { opacity: 1; } .kb-band span { padding: .125rem .375rem; border-radius: .5rem; background: var(--background); border: 1px solid var(--border); font-size: .625rem; font-weight: 900; }
.kb-band.on { opacity: 1; box-shadow: 0 0 0 2px #10b981; }
.kb-band.on.low { background: #ecfdf5; color: #047857; border-color: #a7f3d0; } .kb-band.on.medium { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.kb-band.on.high { background: #fff7ed; color: #c2410c; border-color: #fed7aa; } .kb-band.on.block { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.kb-cols { display: flex; gap: 1rem; overflow-x: auto; align-items: flex-start; padding-bottom: 1rem; }
.kb-col { flex: 1; min-width: 280px; max-width: 340px; background: rgba(241,245,249,.3); border: 1px solid var(--border); border-radius: 1rem; display: flex; flex-direction: column; max-height: 75vh; }
.kb-col-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem; border-bottom: 1px solid var(--border); font-size: .75rem; font-weight: 800; }
.kb-col-head .count { padding: .125rem .5rem; border-radius: .5rem; background: var(--background); border: 1px solid var(--border); font-size: .625rem; color: var(--muted-fg); }
.kb-cards { flex: 1; overflow-y: auto; padding: .625rem; display: grid; gap: .625rem; align-content: start; min-height: 150px; }
.kb-card { background: var(--card); border: 1px solid var(--border); border-radius: .75rem; padding: .75rem; box-shadow: var(--shadow-sm); display: grid; gap: .625rem; }
.kb-card:hover { border-color: rgba(16,185,129,.4); box-shadow: var(--shadow-md); }
.kb-card-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .375rem; border-bottom: 1px solid rgba(226,232,240,.4); font-size: .5625rem; color: var(--muted-fg); font-weight: 700; letter-spacing: .06em; }
.kb-card-head .ref { font-size: .625rem; letter-spacing: 0; }
.kb-prod { display: flex; gap: .5rem; align-items: flex-start; } .kb-img { width: 2.75rem; height: 2.75rem; }
.kb-client { font-size: .6875rem; line-height: 1.3; }
.kb-details { width: 100%; padding: .25rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm); }
.kb-details:hover { background: var(--muted); }
.kb-decide { display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; }
.kb-decide button { padding: .25rem; border-radius: .5rem; border: 1px solid var(--border); background: var(--card); font: inherit; font-size: .6875rem; font-weight: 800; cursor: pointer; color: var(--muted-fg); }
.kb-ok { background: #10b981 !important; border-color: #10b981 !important; color: #fff !important; } .kb-no { border-color: #fecdd3 !important; color: #e11d48 !important; }
.kb-wa { display: flex; align-items: center; justify-content: center; gap: .375rem; padding: .25rem; border-radius: .5rem; background: #10b981; color: #fff; font-size: .6875rem; font-weight: 800; box-shadow: var(--shadow-sm); }
.kb-wa:hover { background: #059669; }

/* Modale */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1rem; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.modal-box { width: 100%; max-width: 32rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--shadow-xl); display: grid; gap: 1rem; }
.modal-head { display: flex; align-items: center; justify-content: space-between; } .modal-head h2 { font-size: 1.125rem; font-weight: 700; }
.modal-box .lbl { font-size: .75rem; font-weight: 600; color: var(--muted-fg); }
.modal-box input, .modal-box select { margin-top: .25rem; height: 2.25rem; font-size: .8125rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: .5rem; }
.seg { display: flex; gap: .5rem; margin-top: .25rem; }
.seg label { flex: 1; padding: .5rem; border: 1px solid var(--border); border-radius: .5rem; text-align: center; font-size: .75rem; font-weight: 600; cursor: pointer; }
.seg label.on { border-color: #10b981; background: #ecfdf5; color: #047857; } .seg input { position: absolute; opacity: 0; }

/* Toasts */
.toast-zone { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: grid; gap: .5rem; }
.toast { padding: .625rem .875rem; border-radius: .75rem; background: var(--gray-900); color: #fff; font-size: .8125rem; font-weight: 500; box-shadow: var(--shadow-xl); transition: opacity .3s, transform .3s; }
.toast.err { background: #e11d48; } .toast.out { opacity: 0; transform: translateY(.5rem); }

@media (max-width: 1280px) { .order-panel { width: 340px; } .op-quick { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) {
  .orders-main { flex-direction: column; } .order-panel { width: 100%; position: static; max-height: none; }
  .cc-view { flex-direction: column; } .cc-queue, .cc-rail { width: 100%; }
}

/* --- Paniers abandonnes ------------------------------------------------------ */
.c-sky { color: #0ea5e9; }
.ab-kpi { flex: 1 0 10.625rem; display: flex; flex-direction: column; justify-content: space-between; padding: .75rem; }
.kpi-top.between { justify-content: space-between; }
.help-mini { font-size: .625rem; color: var(--gray-300); cursor: help; }
.kpi-value.sm { font-size: 1.125rem; }
.kpi-bottom { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .625rem; }
.kpi-bottom .min-w-0 { display: flex; flex-direction: column; gap: .125rem; }
.kpi-bottom .kpi-delta { width: fit-content; font-size: .5625rem; }
.kpi-bottom .kpi-vs { font-size: .5rem; }
.spark { flex-shrink: 0; }

.ab-second { display: grid; grid-template-columns: 1fr 320px 280px; gap: 1rem; }
.sec-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--foreground); }
.legend { display: flex; gap: .5rem; margin-top: .25rem; font-size: .625rem; color: var(--muted-fg); }
.legend span { display: inline-flex; align-items: center; gap: .25rem; }
.dot-blue, .dot-green { display: inline-block; width: .5rem; height: .5rem; border-radius: 999px; }
.dot-blue { background: #3b82f6; } .dot-green { background: #10b981; }
.seg-mini { display: flex; gap: .125rem; padding: .125rem; border-radius: .5rem; background: var(--muted); border: 1px solid rgba(226,232,240,.6); }
.seg-mini button { padding: .25rem .5rem; border: none; border-radius: .25rem; background: none; font: inherit; font-size: .5625rem; font-weight: 800; color: var(--muted-fg); cursor: pointer; }
.seg-mini button.on { background: #10b981; color: #fff; box-shadow: var(--shadow-sm); }
.ab-svg { width: 100%; height: 10rem; display: block; margin-top: .5rem; }
.ab-axis { display: flex; justify-content: space-between; font-size: .5625rem; color: var(--muted-fg); margin-top: .25rem; }
.ab-ai { position: relative; overflow: hidden; border-color: rgba(16,185,129,.25); background: linear-gradient(135deg, rgba(16,185,129,.03), transparent); display: flex; flex-direction: column; justify-content: space-between; }
.ab-ai-bg { position: absolute; top: .5rem; right: .5rem; color: rgba(16,185,129,.15); } .ab-ai-bg .icon { width: 4rem; height: 4rem; }
.ab-ai-title { display: flex; align-items: center; gap: .375rem; margin-bottom: .75rem; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #059669; }
.ab-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ab-ai-grid > div { padding: .625rem; border-radius: .75rem; border: 1px solid var(--border); background: rgba(241,245,249,.4); }
.ab-ai-grid > div span { display: block; margin-bottom: .25rem; font-size: .5625rem; font-weight: 700; text-transform: uppercase; color: var(--muted-fg); }
.ab-ai-grid > div b { font-size: .875rem; font-weight: 900; }
.ab-ai-grid .lose b { color: #f43f5e; } .ab-ai-grid .gain { border-color: rgba(16,185,129,.2); background: rgba(16,185,129,.04); } .ab-ai-grid .gain span, .ab-ai-grid .gain b { color: #059669; }
.ab-ai p { margin: .75rem 0; font-size: .625rem; color: var(--muted-fg); line-height: 1.4; } .ab-ai p strong { color: #10b981; }
.pbtn.block { width: 100%; }
.ab-feed .card-head { margin-bottom: .625rem; }
.feed { display: grid; gap: .625rem; max-height: 140px; overflow-y: auto; }
.feed-item { display: flex; align-items: center; gap: .5rem; font-size: .625rem; }
.feed-item i { width: .375rem; height: .375rem; border-radius: 999px; background: #a1a1aa; flex-shrink: 0; } .feed-item i.on { background: #10b981; animation: pulse 1.5s infinite; }
.feed-item .min-w-0 { flex: 1; }
.feed-item p { margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feed-item span { font-size: .5625rem; color: var(--muted-fg); }

.ab-client { display: flex; align-items: center; gap: .5rem; }
.mini-avatar { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--muted); font-size: .625rem; font-weight: 700; color: var(--muted-fg); flex-shrink: 0; }
.prob { display: inline-block; padding: .125rem .375rem; border: 1px solid; border-radius: .25rem; font-size: .5625rem; font-weight: 900; }
.p-vhigh { background: #ecfdf5; color: #047857; border-color: #a7f3d0; } .p-high { background: rgba(236,253,245,.6); color: #059669; border-color: #d1fae5; }
.p-mid { background: #fffbeb; color: #b45309; border-color: #fde68a; } .p-low { background: #fff1f2; color: #be123c; border-color: #fecdd3; } .p-vlow { background: #ffe4e6; color: #9f1239; border-color: #fda4af; }
.st.ab-active { background: #fffbeb; color: #b45309; border-color: #fde68a; } .st.ab-recovered { background: #ecfdf5; color: #047857; border-color: #a7f3d0; } .st.ab-converted { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ra.wa { color: #25d366; } .ra.wa:hover { background: rgba(37,211,102,.1); } .ra.red { color: #f43f5e; } .ra.red:hover { background: rgba(244,63,94,.1); color: #f43f5e; }
.pager-mini { display: flex; align-items: center; gap: .5rem; font-size: .75rem; }
.per-pill { padding: .125rem .5rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); font-weight: 800; }
.pager .cur.green { background: #10b981; border-color: #10b981; color: #fff; }

.float-bar { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 1rem; padding: .75rem 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-xl); font-size: .75rem; font-weight: 700; }
.link-muted { background: none; border: none; font: inherit; font-size: .75rem; font-weight: 700; color: var(--muted-fg); cursor: pointer; } .link-muted:hover { color: var(--foreground); }

.op-body.pad { padding: 1rem; display: grid; gap: 1rem; }
.ab-prod-card { display: flex; gap: .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(241,245,249,.4); }
.ab-profile { padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(241,245,249,.3); display: grid; gap: .5rem; }
.ab-profile-head { display: flex; align-items: center; gap: .75rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(226,232,240,.4); }
.ab-kv { font-size: .6875rem; display: grid; gap: .25rem; } .ab-kv span { color: var(--muted-fg); } .ab-kv .between { display: flex; justify-content: space-between; gap: .5rem; }
.ab-kv.boxed { padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(241,245,249,.3); } .ab-kv .top-line { padding-top: .375rem; border-top: 1px solid rgba(226,232,240,.4); }
.op-hist.three { grid-template-columns: repeat(3, 1fr); }
.ab-score { display: flex; align-items: center; gap: 1rem; padding: .75rem; border: 1px solid rgba(16,185,129,.2); border-radius: .75rem; background: rgba(16,185,129,.02); }
.ab-radial { position: relative; width: 4rem; height: 4rem; flex-shrink: 0; display: grid; place-items: center; } .ab-radial svg { position: absolute; inset: 0; transform: rotate(-90deg); } .ab-radial b { font-size: .875rem; font-weight: 900; }
.ab-score-title { font-size: .625rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #10b981; }
.ab-reco { padding: .75rem; border: 1px solid rgba(139,92,246,.2); border-radius: .75rem; background: rgba(139,92,246,.03); display: grid; gap: .5rem; }
.ab-reco .between { display: flex; justify-content: space-between; align-items: center; }
.ab-reco-title { font-size: .625rem; font-weight: 700; text-transform: uppercase; color: #8b5cf6; } .ab-conf { padding: .125rem .375rem; border-radius: .25rem; background: rgba(139,92,246,.1); color: #8b5cf6; font-size: .5625rem; font-weight: 800; }
.ab-reco-list { font-size: .6875rem; line-height: 1.5; display: grid; gap: .375rem; } .ab-reco-list > div { display: flex; gap: .375rem; }
.ab-act-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ab-act-list { display: grid; gap: .25rem; }
.ab-act-list button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; text-align: left; }
.ab-act-list button:hover { background: var(--muted); }
.ab-timeline { display: grid; gap: .75rem; padding-inline-start: .625rem; border-inline-start: 1px solid var(--border); margin-inline-start: .25rem; }
.ab-timeline > div { position: relative; padding-inline-start: .5rem; font-size: .625rem; }
.ab-timeline > div i { position: absolute; inset-inline-start: -.875rem; top: .125rem; width: .5rem; height: .5rem; border-radius: 999px; border: 1px solid #a1a1aa; background: var(--background); }
.ab-timeline > div.on i { border-color: #f43f5e; background: #f43f5e; transform: scale(1.25); }
.ab-timeline .between { display: flex; justify-content: space-between; gap: .5rem; } .ab-timeline p { margin: .125rem 0 0; color: var(--muted-fg); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.ab-workflow, .ab-analytics .card { padding: 1rem; }
.ab-wf-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; color: #059669; } .ab-wf-head .sec-title { color: inherit; }
.ab-analytics .ab-wf-head { color: var(--foreground); } .ab-analytics .ab-wf-head .icon-sm { color: #10b981; }
.ab-wf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ab-wf-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(241,245,249,.2); }
.ab-wf-left { display: flex; align-items: center; gap: .5rem; }
.ab-wf-ico { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .5rem; }
.wf-green { color: #10b981; background: #ecfdf5; } .wf-blue { color: #3b82f6; background: #eff6ff; } .wf-indigo { color: #6366f1; background: #eef2ff; } .wf-violet { color: #8b5cf6; background: #f5f3ff; }
.ab-wf-step { display: block; font-size: .5625rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-fg); } .ab-wf-label { font-size: .75rem; font-weight: 700; }
.ab-wf-item select { width: auto; height: 2rem; font-size: .6875rem; font-weight: 700; }
.ab-analytics { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ab-top3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.op-title.bordered { padding-bottom: .375rem; border-bottom: 1px solid rgba(226,232,240,.4); }
.top-row { display: flex; justify-content: space-between; align-items: center; font-size: .625rem; margin-bottom: .375rem; }
.top-row span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 7rem; }
.top-row b { padding: .0625rem .375rem; border: 1px solid var(--border); border-radius: .25rem; background: var(--muted); color: var(--muted-fg); }
.ab-heat { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; }
.heat-row { display: flex; justify-content: space-between; align-items: center; font-size: .625rem; padding-bottom: .25rem; border-bottom: 1px solid rgba(226,232,240,.2); margin-bottom: .375rem; }
.heat-row > span { display: inline-flex; align-items: center; gap: .375rem; } .heat-right { flex-direction: column; align-items: flex-end !important; gap: 0 !important; } .heat-right small { font-size: .5rem; font-weight: 800; color: #10b981; }
.heat-map { position: relative; height: 120px; display: grid; place-items: center; padding: .5rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(241,245,249,.2); }
.heat-map svg { width: 100%; height: 100%; } .heat-map span { position: absolute; bottom: .25rem; right: .5rem; font-size: .5rem; color: var(--muted-fg); font-family: ui-monospace, monospace; }
@media (max-width: 1280px) { .ab-second { grid-template-columns: 1fr 1fr; } .ab-feed { grid-column: span 2; } }
@media (max-width: 1024px) { .ab-second, .ab-analytics { grid-template-columns: 1fr; } .ab-feed { grid-column: auto; } .ab-wf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .ab-wf-grid, .ab-top3, .ab-heat, .ab-act-row { grid-template-columns: 1fr; } .float-bar { flex-wrap: wrap; width: calc(100% - 2rem); } }

/* --- Categories ------------------------------------------------------------- */
.cats { display: flex; flex-direction: column; gap: 1rem; }
.cat-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.cat-stat { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1rem; box-shadow: var(--shadow-sm); }
.cat-stat-ico { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; }
.t-green { background: rgba(16,185,129,.1); color: #059669; } .t-blue { background: rgba(59,130,246,.1); color: #2563eb; } .t-violet { background: rgba(139,92,246,.1); color: #7c3aed; }
.t-amber { background: rgba(245,158,11,.1); color: #d97706; } .t-rose { background: rgba(244,63,94,.1); color: #e11d48; } .t-teal { background: rgba(20,184,166,.1); color: #0d9488; }
.cat-stat-value { margin-top: .75rem; font-size: 1.625rem; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.cat-stat-label { margin-top: .5rem; font-size: .75rem; font-weight: 700; } .cat-stat-hint { margin-top: .125rem; font-size: .6875rem; color: var(--muted-fg); }
.cat-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cat-toolbar .f-search.grow { flex: 1; min-width: 12rem; } .cat-toolbar .f-search input[type=search] { width: 100%; height: 2.25rem; }
.muted-select { background: var(--muted); font-weight: 500; height: 2.25rem; }
.cat-empty { text-align: center; padding: 3.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .375rem; }
.cat-empty .icon-xl { color: var(--gray-300); width: 3rem; height: 3rem; margin-bottom: .5rem; }
.cat-empty h3 { font-size: 1rem; font-weight: 700; } .cat-empty p { margin: 0 0 1rem; max-width: 24rem; font-size: .75rem; color: var(--muted-fg); line-height: 1.5; }
.cat-empty.small { padding: 2rem 1rem; } .cat-empty.small p { margin-bottom: .75rem; }
.cat-table-wrap { border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); }
.cat-table { width: 100%; border-collapse: collapse; }
.cat-table th { padding: .625rem .75rem; background: rgba(241,245,249,.4); border-bottom: 1px solid var(--border); text-align: left; font-size: .625rem; font-weight: 700; color: var(--muted-fg); text-transform: uppercase; letter-spacing: .06em; }
.cat-table th:first-child, .cat-table td:first-child { padding-inline-start: 1rem; } .cat-table th.end, .cat-table td.end { text-align: right; padding-inline-end: 1rem; }
.cat-table td { padding: .875rem .75rem; border-bottom: 1px solid rgba(226,232,240,.4); vertical-align: middle; }
.cat-table tbody tr:hover { background: rgba(241,245,249,.4); }
.cat-name { display: flex; align-items: center; gap: .75rem; }
.cat-tile { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; font-size: .875rem; font-weight: 600; flex-shrink: 0; }
.cell-strong.lg { font-size: .875rem; }
.cat-count { display: inline-flex; align-items: baseline; gap: .375rem; padding: .125rem .375rem; margin: 0 -.375rem; border-radius: .375rem; color: var(--foreground); }
.cat-count:hover { background: rgba(16,185,129,.1); } .cat-count:hover b { color: #059669; }
.cat-count b { font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; } .cat-count span { font-size: .6875rem; color: var(--muted-fg); }
.row-dd { position: relative; display: inline-block; } .row-dd summary { list-style: none; display: inline-grid; } .row-dd summary::-webkit-details-marker { display: none; }
.row-dd .dd-menu { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 30; min-width: 11rem; padding: .375rem; background: var(--card); border: 1px solid var(--border); border-radius: .75rem; box-shadow: var(--shadow-xl); text-align: left; }
.dd-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .625rem; border: none; border-radius: .5rem; background: none; font: inherit; font-size: .75rem; font-weight: 600; color: var(--foreground); cursor: pointer; text-decoration: none; }
.dd-item:hover { background: var(--muted); } .dd-item.red { color: #e11d48; } .dd-item.red:hover { background: rgba(244,63,94,.08); }
.cat-detected { padding: 1rem; border: 1px solid rgba(245,158,11,.25); border-radius: 1rem; background: rgba(245,158,11,.04); }
.cat-detected-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.cat-detected-title { display: flex; align-items: flex-start; gap: .625rem; }
.cat-detected-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .75rem; background: rgba(245,158,11,.1); color: #d97706; }
.cat-detected p { margin: .625rem 0 0; }
.cat-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.cat-chip { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .625rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.cat-chip:hover { border-color: rgba(16,185,129,.6); color: #059669; background: rgba(16,185,129,.04); }
.cat-chip small { font-size: .625rem; color: var(--muted-fg); }
.cat-del-body { margin: 0; font-size: .8125rem; line-height: 1.5; }
.fw-normal { font-weight: 400; } .block { display: block; }
@media (max-width: 768px) { .cat-stats { grid-template-columns: 1fr; } .cat-table th:nth-child(4), .cat-table td:nth-child(4) { display: none; } }

/* --- Ma Boutique ------------------------------------------------------------- */
.sf .pe-head { flex-wrap: wrap; }
.saved-pill { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .625rem; border-radius: 999px; background: rgba(16,185,129,.1); color: #059669; font-size: .625rem; font-weight: 700; }
.sf-tabs { padding: .75rem 0; }
.box-head.wrap { flex-wrap: wrap; gap: .5rem; } .box-head.no-border { border-bottom: none; padding-bottom: 0; }
.chips-row { display: flex; gap: .375rem; overflow-x: auto; padding-bottom: .25rem; }
.chip-f { flex-shrink: 0; padding: .25rem .625rem; border: 1px solid var(--border); border-radius: .375rem; background: var(--background); font: inherit; font-size: .625rem; font-weight: 700; color: var(--muted-fg); cursor: pointer; }
.chip-f:hover { color: var(--foreground); } .chip-f.on { background: #10b981; border-color: #10b981; color: #fff; }
.theme-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tcard { display: flex; flex-direction: column; justify-content: space-between; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); position: relative; transition: box-shadow .2s; }
.tcard:hover { box-shadow: var(--shadow-md); } .tcard.applied { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.2); }
.tcard-img { position: relative; aspect-ratio: 4 / 3; border-radius: .5rem; overflow: hidden; background: var(--muted); margin-bottom: .75rem; }
.tcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .tcard:hover .tcard-img img { transform: scale(1.05); }
.tcard-tag { position: absolute; top: .5rem; left: .5rem; padding: .125rem .375rem; border-radius: .25rem; color: #fff; font-size: .5rem; font-weight: 800; box-shadow: var(--shadow-sm); }
.tcard-tag.premium { background: #7c3aed; } .tcard-tag.free { background: #10b981; }
.tcard-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .25rem; }
.tcard p { margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tcard-actions { display: flex; gap: .5rem; margin-top: 1rem; padding-top: .625rem; border-top: 1px solid rgba(226,232,240,.4); }
.uploader-box { position: relative; display: grid; place-items: center; margin-top: .25rem; border: 2px dashed var(--border); border-radius: .75rem; background: rgba(241,245,249,.3); overflow: hidden; cursor: pointer; }
.uploader-box.square { aspect-ratio: 1; max-width: 10rem; } .uploader-box.wide { aspect-ratio: 16 / 7; }
.uploader-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.uploader-box input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; }
.uploader-empty { display: flex; flex-direction: column; align-items: center; gap: .25rem; color: var(--muted-fg); font-size: .625rem; } .uploader-empty .icon-lg { opacity: .4; }
.uploader-actions { display: flex; gap: .75rem; margin-top: .375rem; } .uploader-actions .lbl-link.red { color: #e11d48; } .uploader.removed .uploader-box { opacity: .35; }
.seg-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: .5rem; overflow: hidden; }
.seg-toggle > * { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border: none; background: var(--background); font: inherit; font-size: .625rem; font-weight: 700; color: var(--muted-fg); cursor: pointer; }
.seg-toggle > .on { background: #10b981; color: #fff; } .sf-preview .seg-toggle > .on { background: rgba(16,185,129,.1); color: #059669; }
.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.preset { display: flex; align-items: center; gap: .5rem; padding: .5rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); font: inherit; font-size: .625rem; font-weight: 700; cursor: pointer; }
.preset:hover { background: var(--muted); } .preset.on { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.2); }
.preset i { width: 1rem; height: 1rem; border-radius: 999px; border: 1px solid var(--border); flex-shrink: 0; }
.lbl.sm { font-size: .625rem; }
.color-row { display: flex; align-items: center; gap: .375rem; margin-top: .25rem; }
.color-row input[type=color] { width: 2.25rem; height: 1.75rem; padding: 0; border: 1px solid var(--border); border-radius: .5rem; margin: 0; cursor: pointer; }
.color-row input[type=text] { margin-top: 0; height: 1.75rem; font-size: .625rem; padding: 0 .375rem; }
.sf-social .icon-sm { color: var(--muted-fg); } .sf-social input[type=url] { width: 100%; height: 2rem; padding-inline-start: 2rem; font-size: .75rem; margin-top: 0; }
.bordered-bottom { padding-bottom: 1rem; border-bottom: 1px solid rgba(226,232,240,.4); } .bordered-top { padding-top: 1rem; border-top: 1px solid rgba(226,232,240,.5); }
.align-end { display: flex; align-items: flex-end; } .lbl.mb { margin-bottom: .75rem; }
.rates-table td, .rates-table th { padding: .625rem; font-size: .75rem; } .rates-table th { font-size: .625rem; }
.rates-table .c-check { width: 2rem; } .rates-table .c-check input { margin: 0; }
.rate-edit { display: inline-flex; align-items: center; gap: .25rem; } .rate-edit input { margin-top: 0; height: 1.75rem; font-size: .75rem; padding: 0 .375rem; }
.ok-mini { padding: .125rem .375rem; border: none; border-radius: .25rem; background: rgba(16,185,129,.1); color: #10b981; font-size: .625rem; font-weight: 700; cursor: pointer; }
.rate-actions { white-space: nowrap; } .link-red { background: none; border: none; padding: 0; font: inherit; font-size: .625rem; color: #e11d48; cursor: pointer; } .link-red:hover { text-decoration: underline; }
.rate-actions .link-green { font-size: .625rem; }
.bulk-rate { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; padding: .75rem; border: 1px solid rgba(16,185,129,.2); border-radius: .75rem; background: rgba(16,185,129,.05); font-size: .75rem; }
.bulk-rate input { margin-top: 0; height: 2rem; } .w-32 { width: 8rem; } .fw-bold { font-weight: 700; }
.info-box { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem; border: 1px solid rgba(16,185,129,.2); border-radius: .75rem; background: rgba(16,185,129,.04); }
.info-ico { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: rgba(16,185,129,.1); color: #059669; flex-shrink: 0; }
.info-box p { margin: 0; } .info-box .cell-sub { margin-top: .125rem; line-height: 1.5; }
.media-empty.static { cursor: default; margin-top: .5rem; } .media-empty.static:hover { border-color: var(--border); color: var(--muted-fg); }
.domain-line { display: flex; justify-content: space-between; align-items: center; margin-top: .375rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .75rem; font-size: .75rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; margin-bottom: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); cursor: pointer; }
input.switch { appearance: none; -webkit-appearance: none; width: 2.75rem; height: 1.5rem; margin: 0; border-radius: 999px; background: rgba(100,116,139,.3); position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; }
input.switch::after { content: ""; position: absolute; top: .125rem; left: .125rem; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); transition: left .2s; }
input.switch:checked { background: #10b981; } input.switch:checked::after { left: 1.375rem; }
.dimmed { opacity: .4; pointer-events: none; }

.sf-preview { width: 480px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: rgba(241,245,249,.2); max-height: 70vh; }
.sf-mocks { display: flex; gap: .75rem; flex: 1; min-height: 0; }
.mock { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); overflow: hidden; box-shadow: var(--shadow-sm); }
.mock.desktop { flex: 1; } .mock.mobile { width: 130px; flex-shrink: 0; }
.mock-bar { display: flex; align-items: center; gap: .25rem; padding: .375rem .5rem; background: rgba(241,245,249,.5); border-bottom: 1px solid var(--border); }
.mock-bar i { width: .375rem; height: .375rem; border-radius: 999px; } .mock-bar .r { background: #f43f5e; } .mock-bar .a { background: #f59e0b; } .mock-bar .g { background: #10b981; }
.mock-bar.center { justify-content: center; } .mock-bar .notch { width: 2rem; height: .375rem; border-radius: 999px; background: #d4d4d8; }
.mock-url { margin: 0 auto; font-size: .4375rem; font-weight: 700; color: var(--muted-fg); }
.mock-body { flex: 1; overflow-y: auto; padding: .625rem; display: grid; gap: .625rem; align-content: start; background: #fff; }
.mobile .mock-body { padding: .375rem; gap: .5rem; }
.mock-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .375rem; border-bottom: 1px solid rgba(226,232,240,.3); }
.mock-brand { display: flex; align-items: center; gap: .25rem; font-size: .625rem; font-weight: 800; } .mobile .mock-brand { font-size: .4375rem; }
.mock-brand img { width: 1.25rem; height: 1.25rem; border-radius: .25rem; object-fit: cover; } .mock-brand i { width: 1.25rem; height: 1.25rem; border-radius: .25rem; display: inline-block; }
.mobile .mock-brand img, .mobile .mock-brand i { width: .875rem; height: .875rem; border-radius: 999px; }
.mock-line { width: 4rem; height: .375rem; border-radius: .25rem; background: rgba(241,245,249,.9); }
.mock-banner { position: relative; height: 4rem; border-radius: .5rem; background: var(--muted); overflow: hidden; display: grid; place-items: center; }
.mock-banner.sm { height: 3rem; border-radius: .25rem; } .mock-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mock-banner::after { content: ""; position: absolute; inset: 0; background: rgba(2,6,23,.2); }
.mock-banner-text { position: absolute; bottom: .375rem; left: .625rem; z-index: 1; color: #fff; font-size: .5rem; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.4); } .sm .mock-banner-text { font-size: .375rem; left: .375rem; bottom: .25rem; }
.mock-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; }
.mock-card { display: flex; flex-direction: column; gap: .125rem; padding: .375rem; border: 1px solid rgba(226,232,240,.4); border-radius: .5rem; background: var(--card); }
.mock-card b { font-size: .4375rem; } .mock-card span { font-size: .5rem; font-weight: 800; }
.mock-ph { position: relative; aspect-ratio: 4 / 3; border-radius: .25rem; background: rgba(16,185,129,.1); } .mock-ph.tall { aspect-ratio: 4 / 3; }
.mock-promo { position: absolute; top: .25rem; left: .25rem; padding: 0 .25rem; border-radius: .125rem; background: #f43f5e; color: #fff; font-size: .375rem; font-weight: 800; }
.mock-tiny { font-size: .375rem; }
.mock-cta { width: 100%; padding: .375rem; border: none; border-radius: .5rem; font: inherit; font-size: .5625rem; font-weight: 900; color: #fff; box-shadow: var(--shadow-sm); }
.mock-cta.sm { padding: .25rem; font-size: .4375rem; border-radius: .25rem; }
.sf-ai-note { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem; border: 1px solid rgba(16,185,129,.1); border-radius: .75rem; background: rgba(16,185,129,.02); }
@media (max-width: 1280px) { .sf-preview { width: 380px; } }
@media (max-width: 1024px) { .sf-preview { width: 100%; max-height: none; } .theme-cards { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .preset-grid { grid-template-columns: 1fr 1fr; } .sf-mocks { flex-direction: column; } .mock.mobile { width: 100%; } }

/* --- Store Builder ---------------------------------------------------------- */
.sb { display: flex; flex-direction: column; gap: .75rem; }
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: .75rem; border-bottom: 1px solid rgba(226,232,240,.6); }
.sb-title { display: flex; align-items: center; gap: .75rem; } .sb-title h1 { font-size: 1.125rem; font-weight: 900; letter-spacing: -.02em; }
.sb-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .75rem; background: rgba(16,185,129,.15); color: #059669; }
.sb-saved { display: flex; align-items: center; gap: .375rem; margin-top: .125rem; font-size: .625rem; font-weight: 700; color: var(--muted-fg); }
.sb-saved i { width: .5rem; height: .5rem; border-radius: 999px; background: #10b981; } .sb-saved i.pending { background: #f59e0b; animation: pulse 1.5s infinite; } .sb-saved i.saving { background: #3b82f6; animation: pulse .8s infinite; }
.sb-tools { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.sb-tools .seg-toggle > button { padding: .375rem .625rem; }
.sb-cols { display: flex; gap: 1rem; align-items: stretch; min-height: 0; }
.sb-list { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: .75rem; max-height: 75vh; }
.sb-list .f-search input[type=search] { width: 100%; }
.sb-items { flex: 1; overflow-y: auto; overflow-x: hidden; display: grid; gap: .375rem; align-content: start; padding-right: .25rem; }
.sb-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .625rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); cursor: pointer; }
.sb-item:hover { border-color: var(--gray-300); } .sb-item.on { border-color: #10b981; background: rgba(16,185,129,.02); } .sb-item.dragging { opacity: .4; }
.sb-item-main { display: flex; align-items: center; gap: .625rem; min-width: 0; } .grip { font-size: .625rem; color: var(--muted-fg); font-weight: 700; cursor: grab; }
.sb-thumb { width: 2rem; height: 2rem; border-radius: .25rem; overflow: hidden; border: 1px solid var(--border); background: var(--muted); flex-shrink: 0; } .sb-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.sb-item-name { display: block; font-size: .75rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-item-name.off { text-decoration: line-through; opacity: .5; }
.sb-item-desc { display: block; font-size: .5625rem; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item-tools { display: flex; gap: .125rem; flex-shrink: 0; opacity: 0; transition: opacity .1s; } .sb-item:hover .sb-item-tools, .sb-item.on .sb-item-tools { opacity: 1; }
.sb-item-tools button { width: 1.5rem; height: 1.5rem; border: none; border-radius: .25rem; background: none; font-size: .75rem; color: var(--muted-fg); cursor: pointer; } .sb-item-tools button:hover { background: var(--muted); color: var(--foreground); } .sb-item-tools button.red:hover { background: rgba(244,63,94,.1); }
.sb-list-foot { padding-top: .75rem; border-top: 1px solid rgba(226,232,240,.4); }
.sb-preview { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: rgba(241,245,249,.2); box-shadow: var(--shadow-sm); max-height: 75vh; }
.sb-frame { width: 100%; max-width: 100%; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); overflow: hidden; box-shadow: var(--shadow-md); transition: width .3s; }
.sb-frame .mock-bar { justify-content: space-between; } .sb-frame .mock-url { width: 10rem; text-align: center; font-size: .5rem; }
.sb-page { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: 1rem; align-content: start; background: var(--background); }
.sb-nav { display: flex; align-items: center; justify-content: space-between; padding-bottom: .75rem; border-bottom: 1px solid rgba(226,232,240,.6); font-size: .875rem; font-weight: 900; }
.sb-nav-links { display: flex; gap: .75rem; font-size: .625rem; font-weight: 700; color: var(--muted-fg); }
.sb-hero { position: relative; border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; background: #0f172a; color: #fff; text-align: center; display: grid; place-items: center; min-height: 10rem; }
.sb-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sb-hero .ov { position: absolute; inset: 0; background: rgba(2,6,23,.45); }
.sb-hero-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem; padding: 1rem; }
.sb-hero-tag { padding: .125rem .375rem; border-radius: .25rem; background: #10b981; font-size: .5rem; font-weight: 800; text-transform: uppercase; }
.sb-hero h2 { font-size: 1.25rem; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.4); } .sb-hero h3 { font-size: .875rem; font-weight: 700; opacity: .85; } .sb-hero p { margin: 0; max-width: 24rem; font-size: .75rem; opacity: .7; }
.sb-hero button { margin-top: .25rem; padding: .375rem .75rem; border: none; border-radius: .5rem; color: #fff; font: inherit; font-size: .5625rem; font-weight: 800; box-shadow: var(--shadow-sm); }
.sb-block { padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); display: grid; gap: .5rem; cursor: pointer; }
.sb-block:hover { border-color: rgba(16,185,129,.5); } .sb-block.dashed { border-style: dashed; text-align: center; font-size: .75rem; color: var(--muted-fg); }
.sb-block-title { font-size: .5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-fg); }
.sb-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; } .sb-cat { padding: .25rem; border: 1px solid rgba(226,232,240,.4); border-radius: .5rem; background: rgba(241,245,249,.4); text-align: center; font-size: .5rem; font-weight: 700; }
.sb-cat .ph, .sb-prod .ph, .sb-ba .ph { aspect-ratio: 1; border-radius: .25rem; background: var(--muted); margin-bottom: .25rem; }
.sb-prods { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.sb-prod { display: flex; flex-direction: column; padding: .375rem; border: 1px solid rgba(226,232,240,.4); border-radius: .5rem; font-size: .5rem; }
.sb-prod .ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .sb-prod .ph img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.sb-prod .tag { position: absolute; top: .25rem; left: .25rem; padding: 0 .25rem; border-radius: .125rem; background: #f43f5e; color: #fff; font-size: .375rem; font-weight: 800; }
.sb-prod b { font-size: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-prod span { font-size: .5625rem; font-weight: 800; }
.sb-guar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .sb-guar div { display: grid; gap: .125rem; padding: .5rem; border: 1px solid rgba(226,232,240,.4); border-radius: .5rem; font-size: .5rem; color: var(--muted-fg); } .sb-guar b { font-size: .5625rem; color: var(--foreground); }
.sb-faq { display: flex; justify-content: space-between; padding: .375rem .5rem; border: 1px solid rgba(226,232,240,.4); border-radius: .375rem; font-size: .625rem; font-weight: 600; } .sb-faq.muted { color: var(--muted-fg); font-weight: 400; }
.sb-ba { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; } .sb-ba > div { display: grid; grid-template-columns: 1fr 1fr; gap: .125rem; border-radius: .375rem; overflow: hidden; } .sb-ba img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.sb-news { display: flex; gap: .5rem; } .ph-in { flex: 1; padding: .375rem .5rem; border: 1px solid var(--border); border-radius: .375rem; font-size: .625rem; color: var(--muted-fg); } .sb-news button { padding: .375rem .625rem; border: none; border-radius: .375rem; color: #fff; font: inherit; font-size: .625rem; font-weight: 800; }
.sb-float { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .5rem; padding: .625rem; border: 1px solid var(--border); border-radius: 1rem; background: rgba(255,255,255,.92); box-shadow: var(--shadow-xl); white-space: nowrap; }
.sb-settings { width: 320px; flex-shrink: 0; display: grid; gap: .875rem; align-content: start; overflow-y: auto; max-height: 75vh; }
.sb-set-head { display: flex; align-items: center; gap: .375rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(226,232,240,.4); }
.sb-settings input[type=text], .sb-settings textarea, .sb-settings select { margin-top: .25rem; height: 2rem; font-size: .75rem; } .sb-settings textarea { height: auto; }
.sb-settings .mt-2 { margin-top: .5rem; }
.sb-group { display: grid; gap: .375rem; padding: .625rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(241,245,249,.3); } .sb-group .link-red { justify-self: end; }
.sb-note, .sb-empty { padding: 1.5rem 1rem; border: 1px dashed var(--border); border-radius: .75rem; text-align: center; font-size: .625rem; color: var(--muted-fg); line-height: 1.6; } .sb-empty { padding: 5rem 1rem; font-size: .6875rem; }
.sb-library { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; max-height: 300px; overflow-y: auto; padding-right: .25rem; }
.sb-lib-item { display: flex; flex-direction: column; gap: .375rem; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); font: inherit; text-align: left; cursor: pointer; }
.sb-lib-item:hover { border-color: #10b981; background: rgba(16,185,129,.02); } .sb-lib-item:disabled { opacity: .4; cursor: not-allowed; background: rgba(241,245,249,.4); }
.sb-lib-item .emoji { font-size: 1.125rem; } .sb-lib-item b { font-size: .75rem; }
.modal-head.bordered { padding-bottom: .75rem; border-bottom: 1px solid rgba(226,232,240,.4); }
@media (max-width: 1280px) { .sb-settings { width: 280px; } .sb-list { width: 260px; } }
@media (max-width: 1024px) { .sb-cols { flex-direction: column; } .sb-list, .sb-settings { width: 100%; max-height: none; } .sb-preview { max-height: none; min-height: 30rem; } }

/* --- Codes promo ------------------------------------------------------------- */
.promos { display: flex; flex-direction: column; gap: 1rem; }
.promo-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.promo-kpi { display: grid; gap: .25rem; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.promo-kpi b { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; }
.promo-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.promo-toolbar .f-search.grow { flex: 1; min-width: 12rem; } .promo-toolbar .f-search input[type=search] { width: 100%; }
.seg-mini a { padding: .375rem .625rem; border-radius: .375rem; font-size: .6875rem; font-weight: 700; color: var(--muted-fg); } .seg-mini a.on { background: #10b981; color: #fff; box-shadow: var(--shadow-sm); }
.seg-toggle > a { display: inline-grid; place-items: center; padding: .375rem .5rem; color: var(--muted-fg); } .seg-toggle > a.on { background: #10b981; color: #fff; }
.promo-table td, .promo-table th { padding: .875rem; } .fw-black { font-weight: 900; } .mono.lg { font-size: 1rem; }
.promo-st { display: inline-flex; align-items: center; padding: .125rem .5rem; border: 1px solid; border-radius: 999px; font-size: .5625rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.promo-st.st-on { background: rgba(16,185,129,.1); color: #059669; border-color: rgba(16,185,129,.2); } .promo-st.st-sched { background: rgba(59,130,246,.1); color: #3b82f6; border-color: rgba(59,130,246,.2); }
.promo-st.st-exp { background: rgba(113,113,122,.1); color: #71717a; border-color: rgba(113,113,122,.2); } .promo-st.st-soon { background: rgba(249,115,22,.1); color: #f97316; border-color: rgba(249,115,22,.2); } .promo-st.st-off { background: rgba(244,63,94,.1); color: #f43f5e; border-color: rgba(244,63,94,.2); }
.inline { display: inline-flex; gap: .125rem; }
.promo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.promo-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.promo-val { font-size: 1.5rem; font-weight: 900; color: #10b981; margin: .5rem 0 .125rem; }
.promo-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid rgba(226,232,240,.4); }
.drawer-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 30rem; display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--border); box-shadow: var(--shadow-xl); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .drawer-head h2 { font-size: .875rem; font-weight: 900; }
.drawer-progress { display: flex; gap: .375rem; padding: .625rem 1.25rem; background: rgba(241,245,249,.3); border-bottom: 1px solid rgba(226,232,240,.4); }
.drawer-progress i { flex: 1; height: .25rem; border-radius: 999px; background: rgba(226,232,240,.6); } .drawer-progress i.on { background: #10b981; }
.drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem; } .drawer-body section { display: grid; gap: 1rem; }
.drawer-body input[type=text], .drawer-body input[type=number], .drawer-body input[type=date], .drawer-body select { margin-top: .25rem; height: 2.25rem; font-size: .75rem; } .upper { text-transform: uppercase; }
.drawer-foot { display: flex; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); }
.recap-box { display: grid; gap: .5rem; padding: 1rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(241,245,249,.3); }
.recap-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; } .recap-row span { color: var(--muted-fg); font-size: .625rem; font-weight: 700; }
.modal-box.wide { max-width: 40rem; }
.models-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; max-height: 60vh; overflow-y: auto; }
.model { display: flex; flex-direction: column; gap: .25rem; padding: .875rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); font: inherit; text-align: left; cursor: pointer; }
.model:hover { border-color: #10b981; background: rgba(16,185,129,.02); } .model b { font-size: .75rem; font-weight: 900; } .model .mono { font-size: .5625rem; font-weight: 700; margin-top: .375rem; }
.model-tag { width: fit-content; padding: .125rem .375rem; border-radius: .25rem; background: rgba(16,185,129,.1); color: #059669; font-size: .5rem; font-weight: 700; }
@media (max-width: 1024px) { .promo-kpis, .promo-cards, .models-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .promo-kpis, .promo-cards, .models-grid { grid-template-columns: 1fr; } }

/* --- Google Sheets ------------------------------------------------------------ */
.sheets { display: flex; flex-direction: column; gap: 1.5rem; }
.sheets .page-head { margin-bottom: 0; } .page-title.xl { font-size: 1.875rem; font-weight: 600; letter-spacing: -.025em; }
.fw-600 { font-weight: 600; } .icon-md { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .text-xs, .xs { font-size: .6875rem; }
.code-pill { padding: .0625rem .375rem; border-radius: .25rem; background: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.sh-warn { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem; border: 1px solid rgba(245,158,11,.4); border-radius: 1rem; background: var(--card); font-size: .875rem; box-shadow: var(--shadow-sm); }
.sh-warn > .icon-md { color: #f59e0b; margin-top: .125rem; } .sh-warn p { margin: 0; } .sh-warn .muted { font-size: .8125rem; margin-top: .125rem; }
.sh-search { display: flex; align-items: center; gap: .5rem; } .sh-search .f-search.grow { flex: 1; max-width: 24rem; } .sh-search .f-search input[type=search] { width: 100%; height: 2.5rem; font-size: .875rem; }
.sh-card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.sh-empty { display: flex; flex-direction: column; align-items: center; padding: 4rem 1rem; text-align: center; }
.sh-empty .icon-xl { width: 2.5rem; height: 2.5rem; color: rgba(100,116,139,.4); } .sh-empty h3 { margin-top: 1rem; font-size: 1.125rem; font-weight: 500; }
.sh-empty p { margin: .25rem 0 0; max-width: 24rem; font-size: .875rem; color: var(--muted-fg); } .sh-empty .btn-primary { margin-top: 1.5rem; }
.sh-list { display: grid; gap: .75rem; }
.sh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; }
.sh-ico { color: rgba(100,116,139,.4); display: grid; place-items: center; } .sh-ico.on { color: #10b981; }
.sh-main { min-width: 14rem; } .sh-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .sh-badges .badge .icon-xs { margin-inline-end: .25rem; }
.sh-main .mono { margin-top: .125rem; }
.sh-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: .5rem; } .sh-actions .pbtn { height: 2rem; padding: 0 .75rem; font-size: .75rem; gap: .5rem; } .sh-actions .pbtn.sq { width: 2rem; padding: 0; }
.sh-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; font-size: .875rem; } .pbtn.disabled { opacity: .5; pointer-events: none; }
.sh-modal { max-width: 32rem; display: grid; gap: 1rem; max-height: 92vh; overflow-y: auto; } .sh-modal > *, .sh-step, .sh-copy, .sh-modal form > div { min-width: 0; } .sh-modal .modal-head h2 { font-size: 1.125rem; }
.sh-modal .ic { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: none; border-radius: .375rem; background: none; color: var(--foreground); cursor: pointer; } .sh-modal .ic:hover { background: var(--muted); }
.sh-step { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(241,245,249,.4); font-size: .875rem; } .sh-step p { margin: 0; }
.sh-copy { display: flex; align-items: center; gap: .5rem; }
.sh-code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .375rem .625rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; } .sh-code.xs { font-size: .6875rem; }
.sh-modal form { display: grid; gap: 1rem; } .sh-modal form > p { margin: 0; font-size: .875rem; }
.sh-modal .lbl { font-size: .8125rem; font-weight: 500; color: var(--foreground); } .sh-modal input[type=text] { width: 100%; height: 2.5rem; font-size: .875rem; }
.sh-error { padding: .75rem; border: 1px solid rgba(244,63,94,.4); border-radius: .5rem; background: rgba(244,63,94,.1); color: #be123c; font-size: .875rem; }
.sh-modal .modal-foot { padding-top: .25rem; } .sh-modal .modal-foot .pbtn.lg { height: 2.5rem; font-size: .875rem; }
.btn-primary:disabled, .btn-primary[disabled] { opacity: .5; cursor: not-allowed; }
.spin { animation: sh-spin 1s linear infinite; } @keyframes sh-spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) { .sh-actions { margin-inline-start: 0; width: 100%; } }

/* --- Clients ------------------------------------------------------------------- */
.customers { display: flex; flex-direction: column; gap: 1rem; }
.cu-head { align-items: flex-start; margin-bottom: 0; padding-bottom: 1rem; } .bordered-bottom { border-bottom: 1px solid rgba(226,232,240,.6); }
.cu-search { display: flex; align-items: center; gap: .5rem; width: 100%; } .cu-search .f-search.grow { flex: 1; } .cu-search .f-search input[type=search] { width: 100%; height: 2.25rem; }
@media (min-width: 640px) { .cu-search { width: auto; } .cu-search .f-search.grow { width: 16rem; flex: none; } }
.between { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-700 { font-weight: 700; } .fw-black { font-weight: 900; } .block { display: block; } .lower { text-transform: lowercase; } .mt { margin-top: .75rem; }
.cu-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.cu-kpi { display: flex; flex-direction: column; justify-content: space-between; padding: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); overflow: hidden; min-width: 0; }
.cu-kpi .kpi-label { font-size: .5625rem; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; } .cu-kpi-val { margin-top: .375rem; font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
.cu-kpi-delta { margin-top: .125rem; font-size: .5625rem; font-weight: 700; } .cu-kpi-delta span { color: var(--muted-fg); font-weight: 500; }
.cu-kpi-spark { margin: .375rem -.25rem 0; } .cu-kpi-spark .spark { display: block; width: 100%; height: 28px; overflow: visible; }
.cu-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; } .cu-filters-left { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cu-filters .f-select { height: 2rem; font-size: .625rem; font-weight: 700; border-radius: .5rem; }
.cu-filters .seg-toggle > a { padding: .5rem; } .cu-filters .seg-mini > a { padding: .375rem .75rem; font-size: .625rem; }
.cu-table-wrap { border-radius: 1rem; } .cu-table { min-width: 860px; } .cu-table thead th { text-transform: uppercase; letter-spacing: .05em; font-size: .625rem; padding: .875rem; } .cu-table tbody td { padding: .875rem; }
.cu-name { display: flex; align-items: center; gap: .625rem; min-width: 0; } .cu-name-row { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.cu-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; color: #fff; font-size: .625rem; font-weight: 900; flex-shrink: 0; } .cu-avatar.lg { width: 2.75rem; height: 2.75rem; font-size: .875rem; }
.av-emerald { background: #10b981; } .av-blue { background: #3b82f6; } .av-violet { background: #8b5cf6; } .av-amber { background: #f59e0b; } .av-rose { background: #f43f5e; } .av-cyan { background: #06b6d4; } .av-fuchsia { background: #d946ef; } .av-indigo { background: #6366f1; }
.tag-vip, .tag-loyal, .tag-block { display: inline-flex; align-items: center; gap: .125rem; padding: .125rem .375rem; border: 1px solid; border-radius: 999px; font-size: .5rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.tag-vip { background: rgba(245,158,11,.1); color: #f59e0b; border-color: rgba(245,158,11,.2); } .tag-vip .icon-xs { width: .625rem; height: .625rem; fill: #f59e0b; }
.tag-loyal { background: rgba(16,185,129,.1); color: #10b981; border-color: rgba(16,185,129,.2); } .tag-loyal .icon-xs { width: .625rem; height: .625rem; }
.tag-block { background: rgba(244,63,94,.1); color: #f43f5e; border-color: rgba(244,63,94,.2); }
.trust { display: inline-flex; align-items: center; gap: .25rem; padding: .1875rem .625rem; border: 1px solid; border-radius: 999px; font-size: .5625rem; font-weight: 700; line-height: 1; white-space: nowrap; } .trust.sm { font-size: .5rem; padding: .125rem .5rem; }
.tr-green { color: #10b981; background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.2); } .tr-blue { color: #3b82f6; background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.2); }
.tr-amber { color: #f59e0b; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.2); } .tr-orange { color: #f97316; background: rgba(249,115,22,.1); border-color: rgba(249,115,22,.2); }
.tr-rose { color: #f43f5e; background: rgba(244,63,94,.1); border-color: rgba(244,63,94,.2); } .tr-zinc { color: #71717a; background: rgba(113,113,122,.1); border-color: rgba(113,113,122,.2); }
.cu-table .ra, .cu-card .ra { width: 1.75rem; height: 1.75rem; } .ra.green.on { color: #10b981; }
.cu-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cu-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); cursor: pointer; }
.cu-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; } .cu-card-top .cell-strong { font-size: .875rem; }
.cu-card-stats { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; padding: .5rem; border: 1px solid rgba(226,232,240,.4); border-radius: .75rem; background: rgba(241,245,249,.2); font-size: .75rem; } .cu-card-stats .right { text-align: right; }
.cu-lbl { display: block; font-size: .5rem; font-weight: 700; text-transform: uppercase; color: var(--muted-fg); }
.cu-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid rgba(226,232,240,.4); }
.cu-empty { display: flex; flex-direction: column; align-items: center; padding: 5rem 1rem; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; }
.cu-empty .icon-xl { color: rgba(100,116,139,.3); margin-bottom: 1rem; animation: cu-bounce 1s infinite; } .cu-empty h3 { font-size: 1.125rem; font-weight: 700; } .cu-empty p { margin: .25rem 0 0; max-width: 24rem; font-size: .75rem; color: var(--muted-fg); }
.cu-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; } @keyframes cu-bounce { 0%, 100% { transform: translateY(-15%); } 50% { transform: none; } }
.cu-more { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 0 1.5rem; font-size: .75rem; }
.cu-drawer { max-width: 500px; } .cu-drawer-title { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 900; } .cu-drawer-title .icon { color: #10b981; }
.cu-drawer .ic { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: none; border-radius: .5rem; background: none; color: var(--muted-fg); cursor: pointer; } .cu-drawer .ic:hover { background: var(--muted); color: var(--foreground); }
.cu-drawer .drawer-body { display: grid; gap: 1.25rem; align-content: start; } .drawer-foot.end { justify-content: flex-end; background: rgba(241,245,249,.2); }
.cu-loading { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 5rem 0; font-size: .75rem; color: var(--muted-fg); }
.spinner { width: 2rem; height: 2rem; border: 3px solid rgba(16,185,129,.2); border-top-color: #10b981; border-radius: 999px; animation: sh-spin .8s linear infinite; }
.cu-profile { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: rgba(241,245,249,.1); } .cu-profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.cu-profile h3 { font-size: 1rem; font-weight: 900; } .cu-profile .cell-sub { display: block; margin-top: .125rem; font-size: .5625rem; }
.cu-contact { display: flex; gap: .5rem; padding-top: .5rem; border-top: 1px solid rgba(226,232,240,.4); } .cu-contact .pbtn { height: 2rem; font-size: .625rem; font-weight: 700; }
.btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; height: 2rem; padding: 0 .75rem; border-radius: .5rem; background: #25d366; color: #fff; font-size: .625rem; font-weight: 700; box-shadow: var(--shadow-sm); } .btn-wa:hover { filter: brightness(.95); } .btn-wa.grow { flex: 1; }
.cu-profile .btn-primary.block { display: flex; justify-content: center; height: 2rem; font-size: .625rem; }
.cu-sec { display: grid; gap: .5rem; } .cu-sec-title { display: block; font-size: .5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-fg); }
.cu-trust { display: grid; gap: .5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); } .cu-trust p { margin: 0; font-size: .625rem; color: var(--muted-fg); line-height: 1.5; }
.cu-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .cu-stats > div { padding: .625rem; border: 1px solid rgba(226,232,240,.6); border-radius: .75rem; background: var(--card); text-align: center; } .cu-stats b { display: block; margin-top: .25rem; font-size: .75rem; font-weight: 900; }
.cu-favs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .cu-fav { display: flex; align-items: center; gap: .5rem; padding: .625rem; border: 1px solid rgba(226,232,240,.6); border-radius: .75rem; background: var(--card); }
.cu-fav-ico { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: rgba(16,185,129,.1); color: #10b981; flex-shrink: 0; } .cu-fav .cell-strong { font-size: .6875rem; }
.cu-dashed { padding: 1rem; border: 1px dashed var(--border); border-radius: .75rem; text-align: center; font-size: .625rem; color: var(--muted-fg); }
.cu-timeline { display: grid; gap: .75rem; margin-left: .25rem; padding-left: .5rem; border-left: 1px solid var(--border); }
.cu-tl { position: relative; padding-left: 1rem; display: grid; gap: .25rem; font-size: .75rem; } .cu-tl i { position: absolute; left: -.8125rem; top: .375rem; width: .5rem; height: .5rem; border-radius: 999px; background: #a1a1aa; border: 1px solid #d4d4d8; }
.cu-tl.ok i { background: #10b981; border-color: #34d399; } .cu-tl.ko i { background: #f43f5e; border-color: #fb7185; } .cu-tl .cell-strong { max-width: 200px; }
.cu-notes { display: grid; gap: .5rem; max-height: 140px; overflow-y: auto; padding-right: .25rem; } .cu-notes.tall { max-height: 320px; }
.cu-note { padding: .625rem; border: 1px solid rgba(226,232,240,.6); border-radius: .75rem; background: rgba(241,245,249,.3); font-size: .625rem; line-height: 1.5; } .cu-note p { margin: 0; } .cu-note span { display: block; margin-top: .25rem; font-size: .5rem; color: var(--muted-fg); }
.cu-note-form { display: flex; gap: .5rem; } .cu-note-form input { flex: 1; height: 2rem; font-size: .75rem; } .btn-primary.sm { height: 2rem; padding: 0 .75rem; font-size: .625rem; }
/* fiche client */
.customer-page { display: flex; flex-direction: column; gap: 1.5rem; } .back-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted-fg); } .back-link:hover { color: var(--foreground); }
.cp-title { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; } .cp-meta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; font-size: .875rem; color: var(--muted-fg); } .cp-meta a, .cp-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.cp-actions { display: flex; gap: .5rem; } .cp-actions .btn-wa { height: 2.5rem; font-size: .875rem; font-weight: 600; } .cp-actions .pbtn.lg { height: 2.5rem; font-size: .875rem; }
.badge.orange { background: #ffedd5; color: #c2410c; }
.cp-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; } .cp-stat { padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); } .cp-stat-val { font-size: 1.5rem; font-weight: 600; }
.cp-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; } .cp-empty { padding: 1.5rem 0; text-align: center; font-size: .875rem; color: var(--muted-fg); margin: 0; } .cp-empty.sm { font-size: .75rem; padding: 1rem 0; }
.cp-orders { display: grid; } .cp-order { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid rgba(226,232,240,.5); font-size: .875rem; color: var(--foreground); } .cp-order:last-child { border-bottom: none; }
.cp-order-items { flex: 1; color: var(--muted-fg); } .cp-order-total { width: 6rem; text-align: right; font-weight: 500; } .cp-order-date { width: 5rem; text-align: right; }
@media (max-width: 1280px) { .cu-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .cu-cards { grid-template-columns: 1fr 1fr; } .cp-grid { grid-template-columns: 1fr; } .cp-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .cu-kpis, .cu-cards { grid-template-columns: 1fr 1fr; } .cp-stats { grid-template-columns: 1fr 1fr; } .cp-order-date { display: none; } }

/* --- Shipping Hub ------------------------------------------------------------ */
.shipping { display: flex; flex-direction: column; gap: 1rem; }
.sh-carriers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.sh-carrier { display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.sh-carrier-id { display: flex; align-items: center; gap: .625rem; } .sh-carrier-ico { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); color: var(--muted-fg); flex-shrink: 0; }
.sh-carrier-name { display: block; font-size: .75rem; font-weight: 900; line-height: 1; } .sh-carrier-sub { display: block; margin-top: .25rem; font-size: .5rem; color: var(--muted-fg); }
.sh-carrier .sh-disconnect { opacity: 0; transition: opacity .15s; } .sh-carrier:hover .sh-disconnect { opacity: 1; }
.sh-carrier-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(226,232,240,.4); font-size: .5625rem; }
.sh-carrier-sync { font-size: .5rem; color: var(--muted-fg); }
.health { display: inline-flex; align-items: center; padding: .125rem .5rem; border: 1px solid; border-radius: 999px; font-size: .5rem; font-weight: 700; }
.h-green { color: #10b981; background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.2); } .h-amber { color: #f59e0b; background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.2); }
.h-zinc { color: #71717a; background: rgba(113,113,122,.1); border-color: rgba(113,113,122,.2); } .h-rose { color: #f43f5e; background: rgba(244,63,94,.1); border-color: rgba(244,63,94,.2); }
.link-green { border: none; background: none; padding: 0; font: inherit; font-size: .5625rem; font-weight: 700; color: #10b981; cursor: pointer; } .link-green:hover { text-decoration: underline; }
.link-muted { border: none; background: none; padding: 0; font: inherit; font-size: .5625rem; color: var(--muted-fg); cursor: pointer; } .link-muted:hover { color: var(--foreground); }
.sh-diag { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .sh-card.pad { padding: 1rem; display: grid; gap: .75rem; align-content: start; }
.sh-diag-list { display: grid; gap: .5rem; font-size: .75rem; } .sh-diag-list .py { padding: .5rem 0; }
.sh-dot-row { display: inline-flex; align-items: center; gap: .375rem; } .dot { width: .5rem; height: .5rem; border-radius: 999px; display: inline-block; } .dot.h-green { background: #10b981; } .dot.h-amber { background: #f59e0b; } .dot.h-zinc { background: #a1a1aa; } .dot.h-rose { background: #f43f5e; }
.sh-clock { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; } .sh-clock .icon-sm { color: rgba(100,116,139,.6); }
.sync-pill { padding: .125rem .5rem; border-radius: .25rem; font-size: .5rem; font-weight: 700; color: #71717a; background: rgba(113,113,122,.1); } .sync-pill.on { color: #10b981; background: rgba(16,185,129,.1); }
.sh-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .sh-metric { display: flex; flex-direction: column; justify-content: space-between; height: 65px; padding: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.sh-metric b { font-size: 1rem; font-weight: 900; line-height: 1; margin-top: .375rem; }
.sh-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .sh-filters .f-search input[type=search] { width: 12rem; } .sh-filters .seg-mini > a { padding: .375rem .75rem; font-size: .625rem; }
.sh-table { min-width: 860px; } .sh-table .mono { font-size: .75rem; }
.ship-st { display: inline-flex; align-items: center; padding: .1875rem .5rem; border: 1px solid; border-radius: 999px; font-size: .5625rem; font-weight: 700; line-height: 1; }
.ss-blue { background: rgba(59,130,246,.1); color: #3b82f6; border-color: rgba(59,130,246,.2); } .ss-amber { background: rgba(245,158,11,.1); color: #d97706; border-color: rgba(245,158,11,.2); } .ss-green { background: rgba(16,185,129,.1); color: #059669; border-color: rgba(16,185,129,.2); }
.ss-rose { background: rgba(244,63,94,.1); color: #f43f5e; border-color: rgba(244,63,94,.2); } .ss-zinc { background: rgba(113,113,122,.1); color: #71717a; border-color: rgba(113,113,122,.2); }
.sh-keys { max-width: 28rem; display: grid; gap: .75rem; } .sh-keys-title { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 900; } .sh-keys .modal-head .ic { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: none; border-radius: .375rem; background: none; cursor: pointer; }
.sh-keys form { display: grid; gap: 1rem; } .sh-keys .lbl { font-size: .625rem; font-weight: 700; color: var(--foreground); } .sh-secret { position: relative; } .sh-secret input { width: 100%; height: 2.25rem; padding-right: 2.5rem; font-size: .75rem; }
.sh-secret .eye { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--muted-fg); cursor: pointer; display: grid; } .modal-foot.bordered { padding-top: .5rem; border-top: 1px solid rgba(226,232,240,.4); }
.sh-drawer { max-width: 28rem; } .sh-form { display: grid; gap: 1rem; align-content: start; } .sh-form .lbl { font-size: .625rem; font-weight: 700; color: var(--foreground); } .sh-form input, .sh-form select, .sh-form textarea { margin-top: .25rem; font-size: .75rem; } .sh-form input, .sh-form select { height: 2.25rem; }
.sh-info { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem .5rem; padding-top: .75rem; border-top: 1px solid rgba(226,232,240,.4); font-size: .625rem; } .align-start { align-items: flex-start; } .mono.lg { font-size: 1rem; }
.sh-timeline .cu-tl.first i { transform: scale(1.1); } .sh-timeline .cu-tl p { margin: 0; font-size: .75rem; }
.sh-actions-sec { padding-top: 1rem; border-top: 1px solid rgba(226,232,240,.4); } .sh-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .sh-action-grid .pbtn { height: 2.25rem; font-size: .625rem; justify-content: center; }
.spinner.xs { width: .875rem; height: .875rem; border-width: 2px; display: inline-block; vertical-align: middle; }
@media (max-width: 1024px) { .sh-carriers { grid-template-columns: 1fr 1fr; } .sh-diag { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sh-carriers { grid-template-columns: 1fr; } }

/* --- Call center : file, suivi, agents ------------------------------------------ */
.callcenter, .tracking, .agents-page { display: flex; flex-direction: column; gap: 1rem; }
.cc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cc-kpi { display: flex; align-items: center; gap: .75rem; padding: .875rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.cc-kpi-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; flex-shrink: 0; } .cc-kpi-ico.sm { width: 2rem; height: 2rem; } .cc-kpi-ico.xs { width: 1.75rem; height: 1.75rem; border-radius: .5rem; }
.k-amber { background: rgba(245,158,11,.1); color: #f59e0b; } .k-green { background: rgba(16,185,129,.1); color: #10b981; } .k-rose { background: rgba(244,63,94,.1); color: #f43f5e; } .k-blue { background: rgba(59,130,246,.1); color: #3b82f6; }
.k-orange { background: rgba(249,115,22,.1); color: #f97316; } .k-purple { background: rgba(139,92,246,.1); color: #8b5cf6; } .k-zinc { background: rgba(113,113,122,.1); color: #71717a; } .k-indigo { background: rgba(99,102,241,.1); color: #6366f1; } .k-violet { background: rgba(139,92,246,.1); color: #8b5cf6; }
.cc-kpi .kpi-label { display: block; font-size: .5625rem; overflow: hidden; text-overflow: ellipsis; } .cc-kpi-val { font-size: 1.5rem; font-weight: 900; line-height: 1.2; }
.c-amber { color: #f59e0b; } .c-orange { color: #f97316; } .c-purple { color: #8b5cf6; } .c-zinc { color: #71717a; } .c-violet { color: #8b5cf6; }
.cc-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; } .cc-filters .f-search input[type=search] { width: 12rem; }
.cc-tabs > button { display: inline-flex; align-items: center; gap: .25rem; border-right: 1px solid rgba(226,232,240,.6); } .cc-tabs > button:last-child { border-right: none; } .cc-tabs .op { opacity: .6; margin-left: .125rem; }
.dot-red { width: .375rem; height: .375rem; border-radius: 999px; background: #f43f5e; display: inline-block; } .cc-tabs > .on .dot-red { background: #fff; }
.cc-filter-btn { height: 2rem; display: inline-flex; align-items: center; gap: .375rem; padding: 0 .625rem; font-size: .625rem; font-weight: 700; } .cc-filter-btn.on { border-color: #10b981; background: rgba(16,185,129,.1); color: #059669; }
.cc-advanced { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .625rem; border: 1px solid rgba(226,232,240,.6); border-radius: .75rem; background: rgba(241,245,249,.3); } .cc-advanced .ms, .ms { margin-inline-start: .5rem; }
.cc-chip-row { display: inline-flex; gap: .375rem; } .cc-chip { height: 1.75rem; padding: 0 .625rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); font: inherit; font-size: .625rem; font-weight: 700; color: var(--muted-fg); cursor: pointer; } .cc-chip.on { border-color: #10b981; background: rgba(16,185,129,.1); color: #059669; }
.f-select.sm { height: 1.75rem; font-size: .625rem; } .f-select.full { width: 100%; }
.cc-table { min-width: 1100px; } .cc-table tbody tr { border-left: 3px solid transparent; } .cc-table tbody tr.bl-green { border-left-color: #10b981; } .cc-table tbody tr.bl-blue { border-left-color: #3b82f6; } .cc-table tbody tr.bl-rose { border-left-color: #f43f5e; } .cc-table tbody tr.bl-amber { border-left-color: #f59e0b; }
.cc-table tbody tr.active { background: rgba(16,185,129,.05); box-shadow: inset 0 0 0 1px rgba(16,185,129,.2); } .mt-1 { margin-top: .25rem; }
.cc-prod { display: flex; align-items: center; gap: .5rem; } .cc-thumb { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); color: var(--muted-fg); overflow: hidden; flex-shrink: 0; } .cc-thumb img { width: 100%; height: 100%; object-fit: cover; } .cc-thumb.lg { width: 2.5rem; height: 2.5rem; }
.cc-score { display: inline-flex; flex-direction: column; align-items: center; padding: .1875rem .625rem; border: 1px solid; border-radius: 999px; font-size: .5625rem; font-weight: 700; line-height: 1.3; } .cc-score .op { font-size: .5rem; opacity: .8; }
.tr-violet { color: #8b5cf6; background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.2); } .tr-purple { color: #7c3aed; background: rgba(139,92,246,.1); border-color: rgba(139,92,246,.2); }
.cc-acts { gap: .375rem; } .btn-primary.sm { height: 2rem; padding: 0 .75rem; font-size: .625rem; } .cc-wa { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; background: #25d366; color: #fff; box-shadow: var(--shadow-sm); } .cc-wa:hover { filter: brightness(.95); }
.cc-dd summary { list-style: none; width: 2rem; height: 2rem; display: grid; place-items: center; } .cc-dd summary::-webkit-details-marker { display: none; } .cc-dd .dd-menu { right: 0; left: auto; min-width: 10rem; } .cc-dd .dd-menu button { display: flex; align-items: center; gap: .375rem; width: 100%; padding: .375rem .75rem; border: none; background: none; font: inherit; font-size: .625rem; font-weight: 700; text-align: left; cursor: pointer; color: var(--foreground); } .cc-dd .dd-menu button:hover { background: var(--muted); } .cc-dd .dd-menu button.red { color: #f43f5e; }
.cc-bulk { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: #18181b; color: #fff; font-size: .75rem; font-weight: 700; box-shadow: var(--shadow-xl); white-space: nowrap; }
.cc-bulk-count { padding: 0 .5rem; } .cc-bulk-count strong { color: #34d399; } .cc-sep { width: 1px; height: 1.5rem; background: rgba(255,255,255,.15); display: inline-block; } .tk-bulkbar .cc-sep { background: var(--border); height: 1rem; margin: 0 .25rem; }
.cc-bb { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border: none; border-radius: .5rem; color: #fff; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
.cc-bb.green { background: #10b981; } .cc-bb.green2 { background: rgba(5,150,105,.9); } .cc-bb.amber { background: #f59e0b; } .cc-bb.blue { background: #3b82f6; } .cc-bb.rose { background: #f43f5e; } .cc-bb.ghost { background: rgba(255,255,255,.1); } .cc-bb.link { background: none; color: rgba(255,255,255,.6); padding: 0 .5rem; } .cc-bb:hover { filter: brightness(.92); }
.cc-assign-wrap { position: relative; } .cc-assign-menu { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: .5rem; width: 13rem; max-height: 16rem; overflow: auto; padding: .375rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xl); z-index: 40; }
.cc-assign-menu.down { bottom: auto; top: 100%; margin: .25rem 0 0; left: 0; transform: none; width: 12rem; }
.cc-assign-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .75rem; border: none; border-radius: .5rem; background: none; font: inherit; font-size: .6875rem; font-weight: 600; text-align: left; cursor: pointer; color: var(--foreground); } .cc-assign-menu button:hover { background: var(--muted); } .cc-assign-menu .pad { padding: .5rem .75rem; }
.cu-avatar.xs { width: 1.25rem; height: 1.25rem; font-size: .5rem; }
.cc-kb { max-width: 28rem; display: grid; gap: 1rem; } .cc-kb-list { display: grid; gap: .25rem; font-size: .75rem; } .cc-kb-list > div { padding: .25rem 0; } .cc-kb kbd { padding: .125rem .5rem; border: 1px solid rgba(226,232,240,.6); border-radius: .25rem; background: var(--muted); font-family: ui-monospace, monospace; font-size: .625rem; font-weight: 700; }
.cc-kb .ic, .ag-modal .ic { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: none; border-radius: .375rem; background: none; color: var(--muted-fg); cursor: pointer; }
.toast-link { color: #34d399; font-weight: 700; }
.cc-stars { display: flex; gap: .125rem; margin-top: .125rem; font-size: .625rem; color: rgba(100,116,139,.3); } .cc-stars .on { color: #fbbf24; }
.cc-conf { text-align: right; flex-shrink: 0; } .cc-conf b { display: block; font-size: .875rem; font-weight: 900; margin-top: .125rem; }
.cc-items { display: grid; gap: .5rem; } .cc-item { display: flex; align-items: center; gap: .75rem; padding: .625rem; border: 1px solid rgba(226,232,240,.6); border-radius: .75rem; background: var(--card); } .cc-item .grow { flex: 1; }
.cc-addr { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); font-size: .75rem; }
.cc-dtabs { display: flex; gap: 1rem; border-bottom: 1px solid rgba(226,232,240,.6); } .cc-dtabs button { padding: 0 0 .5rem; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: .6875rem; font-weight: 700; color: var(--muted-fg); cursor: pointer; } .cc-dtabs button.on { border-color: #10b981; color: var(--foreground); }
.cc-hist { display: grid; gap: .5rem; } .cc-hist-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; border: 1px solid rgba(226,232,240,.6); border-radius: .75rem; background: var(--card); font-size: .6875rem; } .cc-hist-row .between { gap: .5rem; }
.btn-wa.block-center { display: flex; height: 2.25rem; font-size: .6875rem; }
.cu-tl.warn i { background: #f59e0b; border-color: #fbbf24; } .cu-tl.blue i { background: #3b82f6; border-color: #60a5fa; }
/* suivi */
.tk-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.tk-kpi { display: flex; flex-direction: column; justify-content: space-between; padding: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); color: inherit; cursor: pointer; } .tk-kpi:hover { border-color: rgba(16,185,129,.4); } .tk-kpi.on { border-color: rgba(16,185,129,.8); background: rgba(16,185,129,.05); }
.tk-kpi-top { display: flex; align-items: flex-start; gap: .5rem; } .tk-kpi .kpi-label { display: block; font-size: .5625rem; overflow: hidden; text-overflow: ellipsis; } .tk-kpi-val { margin-top: .125rem; font-size: 1.25rem; font-weight: 900; line-height: 1; }
.tk-spark { width: 100%; height: 1.75rem; margin-top: .5rem; opacity: .8; } .tk-kpi-foot { margin-top: .375rem; font-size: .5rem; color: var(--muted-fg); line-height: 1; }
.tk-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; } .tk-filters .f-search input[type=search] { width: 13rem; } .tk-right { display: flex; align-items: center; gap: .5rem; } .tk-advanced { width: 100%; } .upper { text-transform: uppercase; }
.tk-dates { display: flex; align-items: center; gap: .375rem; height: 2rem; padding: 0 .5rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); font-size: .625rem; font-weight: 700; color: var(--muted-fg); } .tk-dates input[type=date] { width: 6.5rem; height: auto; padding: 0; border: none; background: transparent; font-size: .625rem; color: var(--foreground); } .tk-dates .ic-x { color: var(--muted-fg); display: grid; }
.link-red { color: #f43f5e; font-size: .625rem; font-weight: 700; } .link-red:hover { text-decoration: underline; } .link-blue { border: none; background: none; padding: 0; font: inherit; font-size: .5625rem; font-weight: 700; color: #3b82f6; cursor: pointer; }
.tk-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(241,245,249,.4); font-size: .75rem; position: relative; } .tk-bulkbar > input { margin-left: .5rem; } .tk-bulkbar .pbtn.xs { height: 1.75rem; padding: 0 .625rem; gap: .25rem; } .pbtn:disabled { opacity: .5; cursor: not-allowed; }
.tk-table { min-width: 1400px; } .tk-table td.nowrap { white-space: nowrap; } .tk-table .italic { font-style: italic; } .tk-prod { max-width: 12rem; }
.tk-carrier { display: inline-flex; align-items: center; gap: .5rem; } .tk-carrier i { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; font-size: .5625rem; font-weight: 900; font-style: normal; flex-shrink: 0; }
.cl-yal { background: #000; color: #eab308; border: 1px solid rgba(234,179,8,.2); } .cl-zr { background: #000; color: #fff; } .cl-noest { background: #1e3a8a; color: #93c5fd; } .cl-may { background: #1e1b4b; color: #a5b4fc; } .cl-other { background: var(--muted); color: var(--muted-fg); border: 1px solid var(--border); }
.tk-track { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.3; } .tk-track .dot { margin-top: .25rem; }
.d-green { background: #10b981; } .d-blue { background: #3b82f6; } .d-orange { background: #f97316; } .d-rose { background: #f43f5e; } .d-purple { background: #8b5cf6; } .d-zinc { background: #a1a1aa; } .dot.pulse { animation: pulse 1.5s infinite; }
.ss-orange { background: rgba(249,115,22,.1); color: #ea580c; border-color: rgba(249,115,22,.2); } .ss-purple { background: rgba(139,92,246,.1); color: #7c3aed; border-color: rgba(139,92,246,.2); }
.tk-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border-top: 1px solid rgba(226,232,240,.6); background: rgba(241,245,249,.2); font-size: .625rem; font-weight: 700; color: var(--muted-fg); }
.tk-pages { display: flex; align-items: center; gap: .375rem; } .pg { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .375rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); color: var(--foreground); font-size: .625rem; font-weight: 700; } .pg:hover { background: var(--muted); } .pg.on { border-color: #10b981; background: #10b981; color: #fff; } .pg.off { opacity: .4; pointer-events: none; } .pg-dots { padding: 0 .25rem; }
.tk-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(226,232,240,.6); } .tk-ai { display: flex; align-items: center; gap: .375rem; } .tk-ai .icon { color: #10b981; }
.tk-insights { display: grid; gap: .5rem; font-size: .75rem; list-style: none; margin: 0; padding: 0; } .tk-insights > div, .tk-insights > li { display: flex; align-items: flex-start; gap: .5rem; color: var(--muted-fg); line-height: 1.5; } .tk-insights i { width: .375rem; height: .375rem; border-radius: 999px; background: #10b981; margin-top: .4rem; flex-shrink: 0; }
.tk-wil { grid-template-columns: 1fr 1fr; display: grid; gap: 1rem; } .tk-wil-list { display: grid; gap: .25rem; margin-top: .5rem; font-size: .75rem; } .tk-wil-list .between { padding: .125rem 0; border-bottom: 1px solid rgba(226,232,240,.4); }
.tk-map { position: relative; display: grid; place-items: center; padding: .25rem; border: 1px solid rgba(226,232,240,.4); border-radius: .75rem; background: rgba(241,245,249,.2); overflow: hidden; } .tk-map svg { width: 100%; height: 8rem; } .tk-map path { transition: opacity .15s; } .tk-map path:hover { opacity: .8; }
.tk-map-tip { position: absolute; bottom: .375rem; left: 50%; transform: translateX(-50%); padding: .25rem .625rem; border-radius: .5rem; background: rgba(24,24,27,.95); color: #fff; font-size: .5625rem; font-weight: 700; white-space: nowrap; pointer-events: none; }
.tk-dhead { display: grid; gap: .75rem; } .tk-dhead .cu-drawer-title { gap: .625rem; } .tk-dhead .cu-drawer-title span:first-of-type { font-size: .875rem; } .icon.pulse { animation: pulse 1.5s infinite; }
.tk-dtabs, .ag-dtabs { display: flex; gap: .25rem; } .tk-dtabs button, .ag-dtabs button { padding: .375rem .75rem; border: 1px solid transparent; border-radius: .5rem; background: none; font: inherit; font-size: .625rem; font-weight: 700; color: var(--muted-fg); cursor: pointer; } .tk-dtabs button.on { background: rgba(16,185,129,.1); color: #059669; border-color: rgba(16,185,129,.3); }
.tk-info { padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); font-size: .75rem; border-top: 1px solid var(--border); } .tk-info .span2 { grid-column: span 2; padding-top: .5rem; border-top: 1px solid rgba(226,232,240,.4); } .tk-info .mb { margin-bottom: .25rem; }
.tk-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .tk-quick .pbtn, .tk-quick .f-select { height: 2.25rem; font-size: .625rem; justify-content: center; } .tk-quick .span2 { grid-column: span 2; } .tk-assign { text-align: center; font-weight: 700; cursor: pointer; }
/* agents */
.ag-range { display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .625rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); font-size: .625rem; font-weight: 700; color: var(--muted-fg); }
.ag-alerts { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; padding: .5rem .75rem; border: 1px solid rgba(245,158,11,.2); border-radius: .75rem; background: rgba(245,158,11,.05); font-size: .625rem; font-weight: 600; color: var(--muted-fg); } .ag-alerts-title { display: flex; align-items: center; gap: .25rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #d97706; }
.ag-cards { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem; } .ag-card { display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; padding: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); min-width: 0; }
.ag-card-top { display: flex; align-items: center; gap: .5rem; min-width: 0; } .ag-card-top .kpi-label { font-size: .5625rem; } .ag-card-val { display: flex; align-items: center; gap: .375rem; font-size: 1.25rem; font-weight: 900; line-height: 1; } .ag-card-sub { font-size: .5rem; color: var(--muted-fg); line-height: 1; }
.dot-live { width: .5rem; height: .5rem; border-radius: 999px; background: #10b981; animation: pulse 1.5s infinite; }
.ag-charts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .ag-chart { display: flex; flex-direction: column; justify-content: space-between; padding: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.ag-chart .kpi-label { font-size: .5625rem; } .ag-chart-val { margin-top: .125rem; font-size: 1.125rem; font-weight: 900; line-height: 1; } .ag-chart-body { display: flex; gap: .375rem; margin-top: .25rem; } .ag-axis { display: flex; flex-direction: column; justify-content: space-between; padding: .125rem 0; font-size: .4375rem; color: rgba(100,116,139,.7); }
.ag-spark { width: 100%; height: 3rem; margin-top: .5rem; opacity: .8; } .ag-days { display: flex; justify-content: space-between; margin-top: .25rem; font-size: .4375rem; color: var(--muted-fg); text-transform: capitalize; }
.ag-board { display: grid; gap: .75rem; } .ag-board-title { display: flex; align-items: center; gap: .25rem; font-size: .625rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; } .ag-board-title .icon { color: #f59e0b; } .ag-board-empty { margin: 0; padding: .5rem 0; font-size: .75rem; color: var(--muted-fg); }
.ag-top { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; } .ag-top-card { display: flex; flex-direction: column; gap: .625rem; padding: .75rem; border: 1px solid rgba(226,232,240,.6); border-radius: .75rem; background: rgba(241,245,249,.1); cursor: pointer; } .ag-top-card:hover { border-color: rgba(16,185,129,.4); }
.cu-avatar.rel { position: relative; } .medal { position: absolute; top: -.5rem; right: -.375rem; font-size: .75rem; }
.ag-top-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; text-align: center; line-height: 1.2; } .ag-top-stats span { display: block; font-size: .5rem; color: var(--muted-fg); } .ag-top-stats b { font-size: .75rem; font-weight: 900; } .ag-top-stats small { font-size: .5rem; font-weight: 400; color: var(--muted-fg); }
.ag-badge { display: block; width: 100%; padding: .125rem .375rem; border: 1px solid; border-radius: .25rem; text-align: center; font-size: .5rem; font-weight: 700; }
.ag-table { min-width: 1200px; } .ag-table .center { text-align: center; } .trust.sq { border-radius: .25rem; } .trust.sq b { font-weight: 900; margin-right: .25rem; } .ra.amber.on { color: #f59e0b; }
.ag-dname { display: flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 900; line-height: 1; } .ag-dtabs { padding: 0 .75rem; border-bottom: 1px solid rgba(226,232,240,.4); background: rgba(241,245,249,.1); } .ag-dtabs button { padding: .5rem .75rem; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; border-radius: 0; } .ag-dtabs button.on { border-color: #10b981; color: #10b981; }
.ag-gauge { display: grid; gap: .375rem; margin-top: 1rem; font-size: .75rem; } .bar { height: .5rem; width: 100%; border-radius: 999px; background: var(--border); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 999px; } .bar .g { background: #10b981; } .bar .b { background: #3b82f6; } .bar .a { background: #f59e0b; }
.ag-xp { display: grid; gap: .75rem; padding: 1rem; border: 1px solid rgba(16,185,129,.2); border-radius: 1rem; background: rgba(16,185,129,.05); font-size: .75rem; } .ag-xp-title { display: flex; align-items: center; gap: .25rem; margin: 0; font-size: .5625rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #059669; }
.tk-info.bordered { border-top: 1px solid var(--border); } .ag-stat-list { display: grid; gap: .5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); font-size: .75rem; } .ag-stat-list .between { padding-bottom: .5rem; border-bottom: 1px solid rgba(226,232,240,.4); } .ag-stat-list .between:last-child { border-bottom: none; padding-bottom: 0; }
.ag-last { padding: .75rem; border: 1px solid rgba(226,232,240,.6); border-radius: .75rem; background: rgba(241,245,249,.1); font-size: .75rem; }
.ag-perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; font-size: .75rem; } .ag-perm-grid label { display: flex; align-items: center; gap: .625rem; padding: .625rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); cursor: pointer; } .ag-perm-grid label:hover { background: rgba(241,245,249,.3); }
.cu-sec textarea { width: 100%; min-height: 5rem; padding: .75rem; border: 1px solid var(--border); border-radius: .75rem; font: inherit; font-size: .75rem; resize: none; } .end { display: flex; justify-content: flex-end; }
.drawer-foot.between { justify-content: space-between; background: rgba(241,245,249,.2); }
.ag-modal { max-width: 24rem; display: grid; gap: 1rem; } .ag-modal form { display: grid; gap: 1rem; } .ag-modal .lbl.upper { font-size: .625rem; font-weight: 700; letter-spacing: .05em; color: var(--muted-fg); } .ag-modal input[type=text], .ag-modal input[type=email], .ag-modal select { margin-top: .25rem; height: 2.25rem; font-size: .75rem; width: 100%; }
.ag-edit-email { margin: 0; padding: .5rem; border: 1px solid rgba(226,232,240,.4); border-radius: .5rem; background: rgba(241,245,249,.3); font-size: .75rem; color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; }
.ag-perms { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .375rem; max-height: 9rem; overflow-y: auto; } .ag-perms label { display: flex; align-items: center; gap: .5rem; padding: .5rem; border: 1px solid var(--border); border-radius: .5rem; background: rgba(241,245,249,.1); font-size: .625rem; line-height: 1; cursor: pointer; }
.ag-pw-title { font-size: .875rem; font-weight: 900; } .ag-pw-box { display: grid; gap: .625rem; padding: .875rem; border: 1px solid var(--border); border-radius: .75rem; background: rgba(241,245,249,.1); font-size: .75rem; }
#agCreateFields { display: grid; gap: 1rem; }
@media (max-width: 1100px) { .cc-kpis { grid-template-columns: repeat(2, 1fr); } .tk-kpis { grid-template-columns: repeat(3, 1fr); } .ag-cards { grid-template-columns: repeat(4, 1fr); } .ag-charts { grid-template-columns: 1fr 1fr; } .ag-top { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .tk-kpis, .ag-cards, .ag-charts, .ag-top, .tk-bottom, .tk-wil { grid-template-columns: 1fr 1fr; } .cc-bulk { flex-wrap: wrap; white-space: normal; max-width: calc(100vw - 2rem); } }

/* --- COD Intelligence --------------------------------------------------------- */
.codintel { display: flex; flex-direction: column; gap: 1rem; } .ai-pill { display: inline-flex; align-items: center; gap: .375rem; padding: .125rem .5rem; border: 1px solid rgba(16,185,129,.2); border-radius: 999px; background: rgba(16,185,129,.1); font-size: .5625rem; font-weight: 700; color: #10b981; }
.cod-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 1rem; align-items: start; } .cod-main, .cod-side { display: grid; gap: 1rem; }
.cod-hint { display: block; font-size: .5rem; color: var(--muted-fg); line-height: 1.2; margin-top: .125rem; }
.cod-fin { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; } .cod-fin-card { padding: .75rem; background: var(--card); border: 1px solid rgba(226,232,240,.6); border-radius: .75rem; box-shadow: var(--shadow-sm); min-width: 0; } .cod-fin-card .kpi-label { font-size: .5rem; } .cod-fin-val { margin-top: .5rem; font-size: .875rem; font-weight: 900; line-height: 1; }
.cc-kpi-ico.xxs { width: 1.25rem; height: 1.25rem; border-radius: .375rem; }
.cod-title { display: flex; align-items: center; gap: .375rem; font-size: .75rem; font-weight: 900; } .cod-title .icon { color: #10b981; } .cod-title.upper { font-size: .625rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
.cod-check { gap: .75rem; } .cod-check-row { display: flex; flex-wrap: wrap; gap: .5rem; } .cod-check-row input { max-width: 20rem; height: 2.25rem; font-size: .75rem; }
.cod-placeholder { padding: 2.5rem; border: 1px dashed var(--border); border-radius: 1rem; background: var(--card); text-align: center; } .cod-placeholder .icon-xl { width: 2.5rem; height: 2.5rem; color: rgba(100,116,139,.3); margin: 0 auto .75rem; display: block; } .cod-placeholder h3 { font-size: .875rem; font-weight: 700; } .cod-placeholder p { margin: .25rem auto 0; max-width: 24rem; font-size: .75rem; color: var(--muted-fg); }
.cod-result { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; } .cod-score { display: flex; flex-direction: column; gap: 1rem; } .cod-score-title { display: flex; align-items: center; gap: .25rem; } .cod-score-val { display: flex; align-items: baseline; gap: .5rem; margin-top: 1rem; } .cod-score-val span { font-size: 2.25rem; font-weight: 900; } .cod-score-val small { font-size: .875rem; color: rgba(100,116,139,.6); }
.cod-band { display: inline-block; margin-top: .25rem; padding: .125rem .5rem; border: 1px solid currentColor; border-radius: .25rem; font-size: .625rem; font-weight: 700; line-height: 1.2; } .bar.mt { margin-top: 1rem; } .bar .r { background: #f43f5e; } .bar .v { background: #8b5cf6; } .bar.thin { height: .375rem; }
.cod-score-reasons { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid rgba(226,232,240,.4); font-size: .75rem; } .cod-score-reasons > div { display: flex; gap: .5rem; align-items: flex-start; } .c-fg { color: var(--foreground); }
.cod-sheet { display: flex; flex-direction: column; gap: 1rem; } .cod-name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .875rem; font-weight: 900; }
.cod-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; padding: .75rem; border: 1px solid rgba(226,232,240,.4); border-radius: .75rem; background: rgba(241,245,249,.2); text-align: center; font-size: .75rem; } .cod-stats b { display: block; margin-top: .25rem; font-weight: 900; }
.cod-tabs { display: flex; padding: 0 .5rem; border-bottom: 1px solid rgba(226,232,240,.4); border-radius: .5rem; background: rgba(241,245,249,.1); } .cod-tabs button { padding: .375rem .75rem; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: .5625rem; font-weight: 700; color: var(--muted-fg); cursor: pointer; } .cod-tabs button.on { border-color: #10b981; color: #10b981; }
.cod-tl { display: flex; align-items: center; gap: .25rem; overflow-x: auto; padding: .25rem 0; } .cod-tl-step { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; } .cod-tl-step > div { display: flex; flex-direction: column; align-items: center; } .cod-tl-dot { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: #10b981; color: #fff; font-size: .5rem; font-weight: 700; } .cod-tl-label { margin-top: .25rem; max-width: 6rem; font-size: .625rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cod-tl-date { font-size: .4375rem; font-family: ui-monospace, monospace; color: var(--muted-fg); } .cod-tl-arrow { color: rgba(100,116,139,.3); margin-bottom: 1rem; }
.cod-reasons { display: grid; gap: .625rem; } .cod-reasons > div { display: flex; gap: .625rem; align-items: flex-start; } .cod-r-ico { display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 999px; font-size: .625rem; font-weight: 700; flex-shrink: 0; margin-top: .125rem; } .cod-r-ico.good { background: rgba(16,185,129,.1); color: #10b981; } .cod-r-ico.bad { background: rgba(244,63,94,.1); color: #f43f5e; } .cod-r-ico.warn { background: rgba(245,158,11,.1); color: #f59e0b; }
.cod-detects { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .cod-detects > .between { padding: .5rem .75rem; border: 1px solid rgba(226,232,240,.4); border-radius: .5rem; background: rgba(241,245,249,.2); } .cod-detects .span2 { grid-column: span 2; margin: 0; }
.cod-reco { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid; border-radius: 1rem; } .reco-ship { background: rgba(16,185,129,.05); border-color: rgba(16,185,129,.2); } .reco-call { background: rgba(245,158,11,.05); border-color: rgba(245,158,11,.2); } .reco-block { background: rgba(244,63,94,.05); border-color: rgba(244,63,94,.2); }
.cod-reco-main { display: flex; gap: .75rem; align-items: flex-start; } .cod-reco-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: rgba(255,255,255,.6); font-size: 1.125rem; flex-shrink: 0; } .cod-reco-title { display: block; font-size: .875rem; font-weight: 900; } .reco-ship .cod-reco-title { color: #059669; } .reco-call .cod-reco-title { color: #d97706; } .reco-block .cod-reco-title { color: #e11d48; }
.cod-reco-risk { text-align: center; flex-shrink: 0; } .cod-reco-risk b { display: block; font-size: 1.5rem; font-weight: 900; } .cod-reco-risk span { font-size: .5rem; font-weight: 700; text-transform: uppercase; color: var(--muted-fg); }
.cod-wil { display: grid; gap: .5rem; margin-top: .75rem; } .cod-wil .xs { font-size: .625rem; }
.cod-detect { display: grid; gap: .5rem; margin-top: .75rem; font-size: .75rem; } .cod-detect .between { padding-bottom: .5rem; border-bottom: 1px solid rgba(226,232,240,.4); } .cod-detect .between:last-child { border-bottom: none; padding-bottom: 0; }
.cod-map { margin-top: .75rem; } .cod-map svg { height: 11rem; } .cod-legend { position: absolute; bottom: .5rem; right: .5rem; display: grid; gap: .125rem; padding: .375rem; border: 1px solid rgba(226,232,240,.6); border-radius: .5rem; background: rgba(255,255,255,.9); font-size: .5rem; font-weight: 700; line-height: 1; } .tk-map-tip.top { top: .5rem; bottom: auto; left: .5rem; transform: none; }
.cod-bl-form { display: grid; gap: .5rem; margin-top: .75rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(226,232,240,.4); } .cod-bl-form input { height: 2rem; font-size: .75rem; }
.btn-rose { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; width: 100%; height: 2rem; border: none; border-radius: .5rem; background: #f43f5e; color: #fff; font: inherit; font-size: .625rem; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-sm); } .btn-rose:hover { background: #e11d48; } .btn-rose:disabled { opacity: .5; cursor: not-allowed; }
.cod-bl-list { display: grid; gap: .5rem; max-height: 13rem; overflow-y: auto; margin-top: .75rem; padding-right: .25rem; } .center-text { text-align: center; padding: 1rem 0; } .cod-bl-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem; border: 1px solid rgba(226,232,240,.4); border-radius: .75rem; background: rgba(241,245,249,.2); font-size: .75rem; }
.cod-alerts { display: grid; gap: .75rem; margin-top: .75rem; font-size: .6875rem; line-height: 1.5; } .cod-alerts > div { display: flex; gap: .5rem; align-items: flex-start; }
@media (max-width: 1100px) { .cod-grid { grid-template-columns: 1fr; } .cod-fin { grid-template-columns: repeat(3, 1fr); } .cod-result { grid-template-columns: 1fr; } .cod-stats { grid-template-columns: repeat(3, 1fr); } }

/* --- Analytics ------------------------------------------------------------------ */
.analytics { display: flex; flex-direction: column; gap: 1rem; } .an-range select { border: none; background: transparent; font: inherit; font-size: .625rem; font-weight: 700; color: var(--foreground); }
.an-kpi-val { font-size: 1.25rem; font-weight: 900; line-height: 1.2; }
.an-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .an-empty { display: grid; place-items: center; height: 10rem; font-size: .75rem; color: var(--muted-fg); } .an-empty.tall { height: 12rem; }
.an-bars { display: flex; align-items: flex-end; gap: .125rem; height: 10rem; } .an-bar { flex: 1; display: flex; align-items: flex-end; height: 100%; } .an-bar i { display: block; width: 100%; border-radius: .125rem .125rem 0 0; opacity: .85; } .an-bar:hover i { opacity: 1; }
.an-wil { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; align-items: center; } .an-map { border: none; background: none; padding: 0; } .an-map svg { height: 11rem; }
.an-wil-list { display: grid; gap: .5rem; } .an-wil-list > div { display: flex; align-items: center; gap: .5rem; font-size: .75rem; } .an-wil-name { width: 6rem; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .an-wil-list .bar { flex: 1; } .an-wil-list b { width: 1.5rem; text-align: right; font-weight: 900; }
.an-stack { display: flex; height: .75rem; width: 100%; overflow: hidden; border-radius: 999px; margin-bottom: 1rem; } .an-stack i { display: block; height: 100%; }
.an-status { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; font-size: .75rem; } .an-status .dot { width: .5rem; height: .5rem; display: inline-block; border-radius: 999px; vertical-align: middle; } .an-status small { font-size: .5625rem; font-weight: 400; }
.an-funnel { display: grid; gap: .625rem; } .an-funnel-row { display: flex; align-items: center; gap: .75rem; } .an-funnel-label { display: inline-flex; align-items: center; gap: .375rem; width: 11rem; flex-shrink: 0; font-size: .75rem; font-weight: 600; } .an-funnel-label .icon-sm { color: var(--muted-fg); }
.an-funnel-bar { flex: 1; height: 1.5rem; border-radius: .5rem; background: var(--muted); overflow: hidden; } .an-funnel-bar i { display: block; height: 100%; border-radius: .5rem; } .an-funnel-row b { width: 3.5rem; text-align: right; font-size: .75rem; font-weight: 900; } .an-keep { width: 3.5rem; text-align: right; font-size: .5625rem; font-weight: 700; color: var(--muted-fg); }
.an-conv { margin: 1rem 0 0; text-align: center; font-size: .75rem; color: var(--muted-fg); } .an-conv b.c-green { font-size: 1rem; font-weight: 900; }
.an-table-card { overflow: hidden; } .an-table-card .pad-x { padding: 1rem 1rem 0; margin-bottom: .75rem; } .orders-table-wrap.flat { border: none; border-radius: 0; } .an-table { min-width: 0; } .an-table .r { text-align: right; } .an-prod { max-width: 16rem; }
@media (max-width: 1024px) { .an-two, .an-wil { grid-template-columns: 1fr; } }

/* --- Marketing / Pixels ------------------------------------------------------- */
.marketing { display: flex; flex-direction: column; gap: 1rem; } .mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: .75rem; }
.mk-card { display: flex; flex-direction: column; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); color: inherit; transition: transform .15s, border-color .15s; } a.mk-card:hover { border-color: rgba(16,185,129,.4); transform: translateY(-2px); } .mk-card.off { opacity: .7; }
.mk-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; margin-bottom: .75rem; } .ch-blue { background: rgba(59,130,246,.1); color: #3b82f6; } .ch-amber { background: rgba(245,158,11,.1); color: #f59e0b; } .ch-green { background: rgba(16,185,129,.1); color: #10b981; } .ch-violet { background: rgba(139,92,246,.1); color: #8b5cf6; } .ch-rose { background: rgba(244,63,94,.1); color: #f43f5e; } .ch-teal { background: rgba(20,184,166,.1); color: #14b8a6; }
.mk-arrow { color: var(--muted-fg); } a.mk-card:hover .mk-arrow { color: #10b981; transform: translateX(2px); } .mk-soon { padding: .125rem .5rem; border-radius: 999px; background: var(--muted); font-size: .5625rem; font-weight: 700; color: var(--muted-fg); }
.mk-name { font-size: .875rem; font-weight: 900; } .mk-desc { margin: .25rem 0 0; font-size: .6875rem; color: var(--muted-fg); line-height: 1.5; }
.mk-pixels { display: grid; gap: 1rem; } .mk-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .mk-fields .lbl.upper { display: block; margin-bottom: .375rem; font-size: .625rem; font-weight: 700; letter-spacing: .05em; color: var(--muted-fg); } .mk-fields input { height: 2.25rem; font-size: .75rem; }
.pixels-page { display: flex; flex-direction: column; gap: 1.5rem; } .px-plat { padding: .125rem .375rem; border-radius: .25rem; font-size: .625rem; font-weight: 600; } .px-plat.meta { background: rgba(59,130,246,.15); color: #2563eb; } .px-plat.tiktok { background: rgba(217,70,239,.15); color: #c026d3; }
.px-attach .page-sub { margin-top: .25rem; } .px-products { display: grid; margin-top: .75rem; } .px-product { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid rgba(226,232,240,.5); font-size: .875rem; } .px-product:last-child { border-bottom: none; } .px-product span { flex: 1; } .px-product .f-select { width: 14rem; height: 2.25rem; font-size: .875rem; }
@media (max-width: 1024px) { .mk-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .mk-grid, .mk-fields { grid-template-columns: 1fr; } }

/* --- Parametres / Facturation / Plateforme ------------------------------------- */
.settings-page { display: flex; flex-direction: column; gap: 1.5rem; } .st-grid { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: start; }
.st-nav { display: grid; gap: .25rem; } .st-nav a { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; color: var(--muted-fg); } .st-nav a:hover { background: var(--muted); } .st-nav a.on { background: rgba(16,185,129,.1); color: #059669; }
.st-body { display: grid; gap: 1.5rem; } .st-form { display: grid; gap: 1rem; max-width: 28rem; margin-top: 1rem; } .st-form .lbl { display: block; margin-bottom: .25rem; } .st-form input { width: 100%; height: 2.5rem; font-size: .875rem; } .st-form input:disabled { opacity: .6; }
.st-h3 { font-size: 1rem; font-weight: 500; } .fw-400 { font-weight: 400; } .st-h3.mb { margin-bottom: .5rem; }
.st-domains { display: grid; gap: 1rem; }
.st-dom-btns { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .st-domains > .between { flex-wrap: wrap; gap: .75rem; } .between > .st-dom-btns { flex-shrink: 0; justify-content: flex-end; margin-inline-start: auto; }
.st-subgrp { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); overflow: hidden; } .st-subgrp:focus-within { border-color: var(--gray-400); box-shadow: 0 0 0 2px var(--accent-soft); }
.sh-modal .st-subgrp input[type=text] { flex: 1; min-width: 0; border: none; border-radius: 0; box-shadow: none; height: 2.5rem; } .st-subgrp span { display: flex; align-items: center; padding: 0 .75rem; border-inline-start: 1px solid var(--border); background: var(--muted); color: var(--muted-fg); font-size: .875rem; font-weight: 500; white-space: nowrap; } .sh-empty.sm { padding: 3rem 1rem; }
.st-dns { display: grid; gap: .75rem; margin-top: 1rem; } .st-dns-rec { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--border); border-radius: .5rem; background: rgba(241,245,249,.3); font-size: .875rem; } .st-dns-rec code { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; font-size: .75rem; }
.st-members { display: grid; gap: .5rem; margin-top: 1rem; } .st-member { display: flex; align-items: center; justify-content: space-between; padding: .75rem; border: 1px solid rgba(226,232,240,.6); border-radius: .5rem; background: rgba(241,245,249,.3); font-size: .875rem; }
.st-plan { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1rem 0; padding: 1rem; border: 1px solid rgba(16,185,129,.2); border-radius: .75rem; background: rgba(16,185,129,.05); } .st-plan-name { font-size: 1.125rem; font-weight: 900; }
.btn-rose.inline-btn { width: auto; padding: 0 1rem; height: 2.5rem; font-size: .875rem; }
.billing { display: flex; flex-direction: column; gap: 1rem; } .bl-current { display: grid; gap: 1rem; } .between.wrap { flex-wrap: wrap; }
.bl-plan { display: flex; align-items: baseline; gap: .5rem; margin-top: .25rem; } .bl-plan-name { font-size: 1.5rem; font-weight: 900; }
.bl-usage { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; padding-top: 1rem; border-top: 1px solid rgba(226,232,240,.4); } .bl-usage > div { display: grid; gap: .375rem; }
.bl-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: .75rem; } .bl-card { position: relative; display: flex; flex-direction: column; padding: 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); } .bl-card.hl { border-color: #10b981; box-shadow: 0 0 0 1px rgba(16,185,129,.2); } .bl-card.cur { border-color: rgba(59,130,246,.6); }
.bl-ribbon { position: absolute; top: -.625rem; left: 50%; transform: translateX(-50%); padding: .125rem .625rem; border-radius: 999px; background: #10b981; color: #fff; font-size: .5625rem; font-weight: 900; } .bl-ribbon.blue { background: #3b82f6; }
.bl-name { display: block; font-size: .75rem; font-weight: 900; letter-spacing: .05em; } .bl-tag { margin: .125rem 0 0; min-height: 1.5rem; font-size: .625rem; color: var(--muted-fg); } .bl-price { margin: .75rem 0 .5rem; } .bl-price b { font-size: 1.5rem; font-weight: 900; } .bl-price span { font-size: .75rem; }
.bl-feats { display: grid; gap: .375rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .75rem; } .bl-feats li { display: flex; align-items: flex-start; gap: .5rem; } .bl-feats .icon-xs { margin-top: .125rem; flex-shrink: 0; }
.bl-cur { display: grid; place-items: center; height: 2rem; margin-top: 1rem; border-radius: .5rem; background: var(--muted); font-size: .625rem; font-weight: 800; color: var(--muted-fg); } .bl-btn { display: flex; justify-content: center; height: 2rem; margin-top: 1rem; font-size: .625rem; } .bl-link { display: block; margin-top: .375rem; text-align: center; font-size: .5625rem; font-weight: 700; color: #3b82f6; } .bl-link:hover { text-decoration: underline; }
.bl-foot { margin: .75rem 0 0; text-align: center; font-size: .625rem; color: var(--muted-fg); }
.platform { display: flex; flex-direction: column; gap: 1.5rem; } .pf-head { display: flex; align-items: center; gap: .75rem; } .pf-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: rgba(244,63,94,.15); color: #f43f5e; }
.pf-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; } .pf-stats.three { grid-template-columns: repeat(3, 1fr); } .pf-stat { padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow-sm); } .pf-stat-label { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--muted-fg); } .pf-stat-val { margin-top: .25rem; font-size: 1.25rem; font-weight: 700; } .pf-stat-val.lg { font-size: 1.5rem; }
.pf-search { max-width: 20rem; height: 2.5rem; font-size: .875rem; } .sh-list.tight { gap: .5rem; } .pf-row .sh-main { min-width: 14rem; }
.pf-nums { display: flex; gap: 1.25rem; text-align: center; font-size: .875rem; } .pf-nums b { display: block; font-weight: 600; } .pf-nums span { font-size: .6875rem; color: var(--muted-fg); }
.pf-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .375rem; } .pf-plan { padding: .75rem .5rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); font: inherit; text-align: center; cursor: pointer; } .pf-plan.on { border-color: #10b981; background: rgba(16,185,129,.1); } .pf-plan b { display: block; font-size: .75rem; font-weight: 900; } .pf-plan span { display: block; margin-top: .125rem; font-size: .625rem; color: var(--muted-fg); }
.pf-list { display: grid; } .pf-list-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid rgba(226,232,240,.5); font-size: .875rem; } .pf-list-row:last-child { border-bottom: none; } .an-empty.short { height: 6rem; } .ms-auto { margin-inline-start: auto; }
.mono.lg { font-size: 1rem; }
@media (max-width: 1024px) { .st-grid { grid-template-columns: 1fr; } .bl-plans, .pf-stats { grid-template-columns: repeat(2, 1fr); } .pf-plans { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bl-usage, .bl-plans, .pf-stats, .pf-stats.three { grid-template-columns: 1fr; } }

/* --- Mobile -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { flex-direction: column; }
  .hero-div { display: none; }
  .hero-right { width: 100%; }
  .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topsearch { display: none; }
  .avatar-wrap .who { display: none; }
}
@media (max-width: 768px) {
  .menu-toggle { display: grid; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .content { padding: 1rem; }
  .topbar { padding: 0 1rem; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .catalog { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .hero-mascot { display: none; }
  .btn-create span { display: none; }
  input, select, textarea { font-size: 16px; }
}

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  body { background: #fff; }
  .card { border: none; box-shadow: none; padding: 0; }
}