/* Marketing360 — base layout & typography */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;font-size:14px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}

/* ═══ Accessibilité ═══ */
/* Texte invisible mais lu par les lecteurs d'écran (labels de champs sans label visuel) */
.sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}
/* Focus visible au clavier (Tab) — anneau bleu accessibilité — masqué à la souris */
*:focus{outline:none}
*:focus-visible{
  outline:2px solid var(--accent,#1e3a8a);outline-offset:2px;
  border-radius:4px
}
/* Skip link — lien de saut visible au focus pour passer la nav */
.skip-link{
  position:absolute;left:-9999px;top:8px;z-index:9999;
  background:var(--accent,#1e3a8a);color:#fff;padding:8px 16px;
  border-radius:6px;text-decoration:none;font-weight:600
}
.skip-link:focus{left:8px}

#app-shell{display:grid;grid-template-columns:240px 1fr;height:100vh;overflow:hidden}

/* Sidebar */
#sidebar{background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;border-right:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px;border-bottom:1px solid var(--border-soft)}
.brand-mark{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-radius:8px;font-weight:800;font-size:13px}
.brand-name{font-weight:700;font-size:15px}
/* Nav menu — scrollbar TOUJOURS visible et claire */
#nav-menu{
  flex:1;overflow-y:scroll;overflow-x:hidden;padding:6px 6px 50px;
  scrollbar-width:auto;scrollbar-color:var(--accent) rgba(255,255,255,0.05);
  scroll-behavior:smooth;position:relative
}
/* Webkit (Chrome/Safari/Edge) — scrollbar épaisse et bleue, toujours visible */
#nav-menu::-webkit-scrollbar{width:12px;background:rgba(255,255,255,0.05)}
#nav-menu::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:6px;margin:4px}
#nav-menu::-webkit-scrollbar-thumb{
  background:var(--accent);border-radius:6px;
  border:2px solid var(--sidebar-bg);background-clip:padding-box;
  min-height:40px
}
#nav-menu::-webkit-scrollbar-thumb:hover{background:var(--accent-strong);background-clip:padding-box}

/* Dégradé indicateur de contenu en bas */
#sidebar{position:relative;overflow:hidden}
#sidebar::after{
  content:"";position:absolute;left:0;right:14px;
  bottom:52px;height:36px;
  background:linear-gradient(to bottom, transparent, var(--sidebar-bg) 90%);
  pointer-events:none;z-index:1
}

/* Bouton "voir plus" — GROS, visible, avec texte */
#nav-scroll-down{
  position:absolute;left:50%;transform:translateX(-50%);bottom:58px;
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  padding:6px 16px;border-radius:14px;
  display:none;align-items:center;justify-content:center;gap:6px;
  font-size:12px;font-weight:600;z-index:5;
  box-shadow:0 4px 14px rgba(0,0,0,.35)
}
#nav-scroll-down.show{display:inline-flex;animation:bounce 0.5s ease}
#nav-scroll-down:hover{background:var(--accent-strong);transform:translateX(-50%) translateY(-2px)}
@keyframes bounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-4px)}
}
/* ─── Titres de groupe (PILOTAGE, PRODUCTION…) — cliquables pour replier/déplier ─── */
.nav-group-title{
  display:flex;align-items:center;gap:8px;width:100%;
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--sidebar-text);
  padding:14px 12px 8px;
  background:transparent;border:none;cursor:pointer;
  text-align:left;
  transition:color .15s,opacity .15s;
}
.nav-group-title:hover{color:var(--accent)}
.nav-group-caret{
  display:inline-block;font-size:10px;
  transition:transform .2s;opacity:.7;
}
.nav-group-title.collapsed .nav-group-caret{transform:rotate(-90deg)}
.nav-group-label{flex:1}
.nav-group-badge{
  background:var(--danger);color:#fff;font-weight:700;
  min-width:22px;height:22px;border-radius:11px;
  font-size:11px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 7px;
}
.nav-group-items{display:flex;flex-direction:column;gap:1px;padding:0 4px}
.nav-group-items[hidden]{display:none}

/* ─── Items de menu ─── */
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:7px;cursor:pointer;
  color:var(--sidebar-text);
  user-select:none;
  font-size:16px;font-weight:500;
  transition:background .12s,color .12s;
}
.nav-item:hover{background:var(--sidebar-hover);color:var(--accent)}
.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:700}
.nav-ico{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;opacity:.95;flex-shrink:0}
.nav-ico svg{stroke:currentColor;width:20px;height:20px}
.nav-item.active .nav-ico{opacity:1}
.nav-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px}
.sidebar-footer{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--border-soft)}
.user-card{flex:1;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sidebar-text)}
.user-card > div > div:first-child{color:var(--sidebar-text);font-weight:700}
.user-card > div > div:nth-child(2){color:var(--sidebar-text);opacity:.8}
.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}

/* Topbar */
#main{display:flex;flex-direction:column;overflow:hidden}
#topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
#btn-burger{display:none}
.breadcrumb{font-size:13px;color:var(--text-muted);flex:1}
.breadcrumb .crumb-current{color:var(--text);font-weight:600}
.topbar-actions{display:flex;align-items:center;gap:8px}
.search-wrap{position:relative}
.search-wrap input{width:280px;padding:7px 10px;font-size:13px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}
.search-wrap input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.icon-btn{background:transparent;border:1px solid transparent;width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:16px;color:var(--text);position:relative}
.icon-btn:hover{background:var(--surface-hover)}
.badge{position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;font-size:10px;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center}

/* Top navigation bar (horizontal tabs under the topbar) */
#topnav{display:flex;align-items:center;gap:4px;padding:6px 16px;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:thin}
#topnav::-webkit-scrollbar{height:4px}
#topnav::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.topnav-item{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:500;color:var(--text-muted);white-space:nowrap;border:1px solid transparent;text-decoration:none;transition:background .12s,color .12s,border-color .12s}
.topnav-item:hover{background:var(--surface-hover);color:var(--text)}
.topnav-item.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft);font-weight:600}
.topnav-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}
.topnav-ico svg{stroke:currentColor;width:16px;height:16px}
.topnav-sep{width:1px;height:18px;background:var(--border);margin:0 6px;flex-shrink:0}
.topnav-back{padding:6px 10px;font-size:14px}

/* View — main scrollable content area */
#view-root{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 24px;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
  scroll-behavior:smooth
}
#view-root::-webkit-scrollbar{width:8px;height:8px}
#view-root::-webkit-scrollbar-track{background:transparent}
#view-root::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
#view-root::-webkit-scrollbar-thumb:hover{background:var(--text-muted);background-clip:padding-box;border:2px solid transparent}
#view-root::-webkit-scrollbar-corner{background:transparent}

/* Back-to-top floating button — appears when user scrolls down */
#back-to-top{
  position:fixed;right:22px;bottom:22px;width:42px;height:42px;
  background:var(--accent);color:#fff;border:none;border-radius:50%;
  font-size:18px;cursor:pointer;z-index:15;
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .2s,transform .2s;
  display:flex;align-items:center;justify-content:center
}
#back-to-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
#back-to-top:hover{background:var(--accent-strong);transform:translateY(-2px)}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;gap:16px;flex-wrap:wrap}
.page-title{font-size:22px;font-weight:700;margin:0}
.page-sub{color:var(--text-muted);font-size:13px;margin-top:4px}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{background:var(--surface-hover)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn-danger{color:var(--danger);border-color:var(--danger-soft)}
.btn-danger:hover{background:var(--danger-soft)}
.btn-ghost{background:transparent;border:none;color:var(--text-muted);padding:4px 8px;cursor:pointer}
.btn-ghost:hover{color:var(--text)}
.btn-sm{padding:5px 10px;font-size:12px}

/* KPI / cards */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.kpi-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden}
.kpi-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.kpi-value{font-size:26px;font-weight:700;margin-top:6px}
.kpi-delta{font-size:12px;margin-top:2px;color:var(--text-muted)}
.kpi-delta.up{color:var(--success)}
.kpi-delta.down{color:var(--danger)}
.kpi-icon{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);font-size:16px}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;min-width:0}
.card>.tbl{width:100%;table-layout:auto}
.card>.tbl td,.card>.tbl th{white-space:normal;word-break:break-word}
.card>.tbl tbody tr:last-child td{border-bottom:none}

/* Compact responsive list rows — used in dashboard cards.
   Wraps gracefully when the card is narrow, vertical scroll if too many items. */
.row-list{
  display:flex;flex-direction:column;gap:2px;
  max-height:380px;overflow-y:auto;overflow-x:hidden;
  margin:0 -4px;padding:0 6px 0 4px;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent
}
.row-list::-webkit-scrollbar{width:6px}
.row-list::-webkit-scrollbar-track{background:transparent}
.row-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.row-list::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
.row-item{display:flex;gap:10px;align-items:flex-start;padding:10px 6px;border-bottom:1px solid var(--border-soft);cursor:pointer;border-radius:6px;flex-wrap:wrap}
.row-item:hover{background:var(--surface-hover)}
.row-item:last-child{border-bottom:none}
.row-item .row-main{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:2px}
.row-item .row-title{font-size:13px;color:var(--text);font-weight:500;line-height:1.3;word-break:break-word}
.row-item .row-sub{font-size:11px;color:var(--text-muted);line-height:1.2;word-break:break-word}
.row-item .row-end{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-start;flex:1 1 100%;min-width:0;margin-top:2px}
.row-item .row-end .pill{max-width:100%;white-space:normal;text-align:center;line-height:1.3}
.row-item .row-date{font-size:11px;color:var(--text-muted)}

/* When there's room (≥ 360px card), put the end content on the right of the main */
@media (min-width: 360px) {
  .card .row-item{align-items:center}
  .card .row-item .row-main{flex:1 1 60%;min-width:120px}
  .card .row-item .row-end{flex:0 1 auto;justify-content:flex-end;margin-top:0}
}
.card-title{font-size:14px;font-weight:600;margin:0 0 10px;display:flex;justify-content:space-between;align-items:center}

/* Tables */
.tbl-wrap{overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-soft);white-space:nowrap;vertical-align:middle}
.tbl thead th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);background:var(--surface-hover);position:sticky;top:0;z-index:1;cursor:pointer;user-select:none}
.tbl thead th .sort-ind{opacity:.5;margin-left:4px}
.tbl tbody tr:hover{background:var(--surface-hover)}
.tbl tbody tr.clickable{cursor:pointer}
.col-actions{text-align:right}
.col-actions .btn{padding:3px 8px;font-size:11px}
.tbl-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border-soft)}
.pager{display:flex;gap:4px}
.pager button{padding:3px 8px;font-size:12px;background:var(--surface);border:1px solid var(--border);border-radius:6px;cursor:pointer;color:var(--text)}
.pager button.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Forms */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-grid.full{grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:4px}
.field.col-span-2{grid-column:span 2}
.field label{font-size:12px;font-weight:600;color:var(--text-muted)}
.field label .req{color:var(--danger);margin-left:2px}
.field input,.field select,.field textarea{padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;font-size:13px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.field textarea{min-height:80px;resize:vertical}
.field .help{font-size:11px;color:var(--text-muted)}
.field .err{font-size:11px;color:var(--danger)}
.field input[type=range]{padding:0}

.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filter-chip{padding:4px 10px;border-radius:14px;background:var(--surface);border:1px solid var(--border);font-size:12px;cursor:pointer;color:var(--text)}
.filter-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Pills */
.pill{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:600;background:var(--surface-hover);color:var(--text);border:1px solid var(--border)}
.pill.success{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.pill.warn{background:#fef3c7;color:#92400e;border-color:#fde68a}
.pill.danger{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.pill.info{background:#dbeafe;color:#1e40af;border-color:#bfdbfe}
.pill.muted{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
.pill.purple{background:#ede9fe;color:#5b21b6;border-color:#ddd6fe}
[data-theme=dark] .pill.success{background:#052e16;color:#86efac;border-color:#14532d}
[data-theme=dark] .pill.warn{background:#451a03;color:#fde047;border-color:#78350f}
[data-theme=dark] .pill.danger{background:#450a0a;color:#fca5a5;border-color:#7f1d1d}
[data-theme=dark] .pill.info{background:#0c1e3a;color:#93c5fd;border-color:#1e3a8a}
[data-theme=dark] .pill.muted{background:#1f2937;color:#cbd5e1;border-color:#334155}
[data-theme=dark] .pill.purple{background:#2e1065;color:#c4b5fd;border-color:#5b21b6}

/* Priority */
.prio{display:inline-flex;align-items:center;gap:5px;font-size:12px}
.prio::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-muted)}
.prio.haute::before{background:var(--danger)}
.prio.urgente::before{background:var(--danger);box-shadow:0 0 0 2px rgba(220,38,38,.2)}
.prio.normale::before{background:var(--accent)}
.prio.basse::before{background:var(--text-muted)}

/* Empty */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-icon{font-size:42px;opacity:.4;margin-bottom:12px}
.empty-title{font-size:16px;margin:0 0 6px;color:var(--text)}
.empty-text{margin:0;font-size:13px}

/* Detail */
.detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.detail-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px}
.detail-section h4{margin:0;font-size:15px;font-weight:700;color:var(--text)}
/* En-tête de section cliquable pour replier/déplier */
.section-header{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;padding:0;border:none;background:transparent;width:100%;text-align:left;transition:color .12s}
.section-header:hover{color:var(--accent)}
.section-header:focus{outline:2px solid var(--accent-soft);outline-offset:2px;border-radius:4px}
.section-caret{display:inline-block;font-size:11px;transition:transform .2s;opacity:.7;width:12px}
.section-title{flex:1}
.detail-section.collapsed .section-caret{transform:rotate(-90deg)}
.detail-section .section-body{margin-top:12px;transition:opacity .15s}
.detail-section.collapsed .section-body{display:none}
.detail-section.collapsed{padding-bottom:14px}
.detail-section.collapsed h4{margin:0}
.detail-row{display:grid;grid-template-columns:140px 1fr;padding:6px 0;font-size:13px;border-bottom:1px dashed var(--border-soft)}
.detail-row:last-child{border-bottom:none}
.detail-row .lbl{color:var(--text-muted)}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:14px;overflow-x:auto}
.tab{padding:8px 14px;cursor:pointer;font-size:13px;color:var(--text-muted);border-bottom:2px solid transparent;white-space:nowrap}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}

/* Responsive — 3 breakpoints: desktop (>1200), tablet (920-1200), mobile (<920) */

/* Tablet — sidebar shrinks, fewer cards per row */
@media (max-width:1200px) and (min-width:921px) {
  #app-shell{grid-template-columns:200px 1fr}
  .nav-item{font-size:12px;padding:5px 10px}
  .nav-item span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .search-wrap input{width:200px}
  .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .cards-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  #view-root{padding:16px}
}

/* Mobile — sidebar hidden behind burger menu, single column */
@media (max-width:920px){
  #app-shell{grid-template-columns:1fr}
  #sidebar{position:fixed;left:-280px;top:0;bottom:0;width:280px;z-index:30;transition:left .25s ease-out;box-shadow:4px 0 24px rgba(0,0,0,.18)}
  #sidebar.open{left:0}
  #btn-burger{display:inline-flex}
  .search-wrap input{width:130px;font-size:12px}
  .detail-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .field.col-span-2{grid-column:span 1}
  .page-header{flex-direction:column;align-items:flex-start;gap:10px}
  .page-title{font-size:18px}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi-value{font-size:22px}
  /* Sur mobile, masquer les grosses icônes des KPI pour gagner de la place */
  .kpi-icon{display:none}
  .kpi-card{padding:12px}
  .kpi-label{font-size:11px}
  .cards-grid{grid-template-columns:1fr}
  #view-root{padding:14px 12px}
  #topbar{padding:8px 12px}
  #topnav{padding:4px 10px}
  .topnav-item{padding:6px 10px;font-size:11px}
  #back-to-top{right:16px;bottom:16px;width:38px;height:38px}

  /* Bouton de fermeture visible en haut de la sidebar sur mobile */
  #sidebar .brand{position:relative;padding-right:46px}
  #sidebar-close{display:flex;position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text);font-size:22px;line-height:1;width:34px;height:34px;border-radius:50%;cursor:pointer;align-items:center;justify-content:center}
  #sidebar-close:hover{background:var(--surface-hover)}
}

/* Bouton fermer caché sur desktop */
@media (min-width:921px){
  #sidebar-close{display:none !important}
}

/* Backdrop sombre derrière la sidebar quand ouverte sur mobile */
#sidebar-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:25;display:none;backdrop-filter:blur(2px);
  animation:fade .2s ease-out
}
#sidebar-backdrop.show{display:block}

/* Tiny mobile / portrait */
@media (max-width:480px) {
  .search-wrap{display:none}
  .topbar-actions .icon-btn{width:30px;height:30px;font-size:14px}
  .brand-name{display:none}
}
@media print{
  #sidebar,#topbar,.page-actions,.toolbar{display:none!important}
  #view-root{padding:0}
  .card,.detail-section,.tbl-wrap{break-inside:avoid;box-shadow:none}
}

/* Misc */
.text-muted{color:var(--text-muted)}
.text-right{text-align:right}
.text-center{text-align:center}
.flex{display:flex}
.flex-1{flex:1}
.gap-8{gap:8px}
.gap-12{gap:12px}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mb-0{margin-bottom:0}
.hidden{display:none!important}
.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{height:6px;background:var(--border-soft);border-radius:6px;overflow:hidden}
.progress-bar{height:100%;background:var(--accent);transition:width .3s}
.progress-bar.warn{background:var(--warn)}
.progress-bar.danger{background:var(--danger)}
.rating{display:inline-flex;gap:2px;color:#f59e0b;font-size:13px}
.rating .star{cursor:pointer}