/* ═══════════════════════════════════════════════════════════════
   REMAP Platform — Stylesheet
   remap.it · Copyright © 2026 Riccardo Monaco
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   1. DESIGN TOKENS (CSS Custom Properties)
   ──────────────────────────────────────────────────────────────── */
:root {
  /* ── Colori base ─────────────────────────────────────────────── */
  --color-bg:               #FAFAFA;
  --color-surface:          #FFFFFF;
  --color-card:             #FFFFFF;
  --color-border:           #DDD8E8;
  --color-border-light:     #EAE7F2;

  /* ── Testo ───────────────────────────────────────────────────── */
  --color-text-primary:     #18120E;
  --color-text-secondary:   #3D3530;
  --color-text-muted:       #7A6E68;

  /* ── Accent ──────────────────────────────────────────────────── */
  --color-accent:           #5C7EF6;

  /* ── Status: warning ─────────────────────────────────────────── */
  --color-warn:             #E8453A;
  --color-warn-bg:          #FEF0EE;
  --color-warn-border:      #F9C0BC;

  /* ── Status: ok (verde) ──────────────────────────────────────── */
  --color-ok:               #0A7B6E;
  --color-ok-bg:            #E6F8F5;
  --color-ok-border:        #9DE0D8;

  /* ── Status: amber (min) ─────────────────────────────────────── */
  --color-amber:            #B96F00;
  --color-amber-bg:         #FEF5E6;
  --color-amber-border:     #F5D48E;

  /* ── Dimensioni REMAP ────────────────────────────────────────── */
  --color-dim-R:            #5C7EF6;  /* Relations */
  --color-dim-E:            #F8685B;  /* Engagement */
  --color-dim-M:            #38C0A7;  /* Mastery */
  --color-dim-A:            #F1A539;  /* Autonomy */
  --color-dim-P:            #BA6EF2;  /* Purpose */

  /* ── Tipografia ──────────────────────────────────────────────── */
  --font-sans:              'Poppins', 'Segoe UI', sans-serif;
  --font-mono:              'DM Mono', 'Courier New', monospace;

  /* ── Border radius ───────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 50%;

  /* ── Ombre ───────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.04);
  --shadow-md:  0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --shadow-xl:  0 8px 32px rgba(0,0,0,.14);

  /* ── Spaziatura tra card ─────────────────────────────────────── */
  /* card-gap: griglie/colonne di card (dashboard, retro, sotto team).
     list-gap: elenchi densi di righe-card (liste admin: Team, Utenti). */
  --card-gap: 16px;
  --list-gap: 12px;
}


/* ────────────────────────────────────────────────────────────────
   2. RESET & BASE
   (Font caricati via <link> in index.php)
   ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html,
body,
#root {
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 15px;
}

button { font-family: inherit; cursor: pointer; }
input  { font-family: inherit; }


/* ────────────────────────────────────────────────────────────────
   3. SCROLLBAR
   ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        {
  background: var(--color-border);
  border-radius: 4px;
}
/* nasconde la scrollbar orizzontale nei contenitori scroll drag */
div[style*="overflowX"]::-webkit-scrollbar { display: none; }


/* ────────────────────────────────────────────────────────────────
   4. ICONE — Material Symbols Outlined
   ──────────────────────────────────────────────────────────────── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  user-select: none;
}

/* Icon layout utilities */
.icon--inline-start  { vertical-align: middle; margin-left: 2px; }
.icon--inline-end-xs { vertical-align: middle; margin-right: 3px; }
.icon--inline-end    { vertical-align: middle; margin-right: 4px; }
.icon--inline-end-lg { vertical-align: middle; margin-right: 6px; }
.icon--va-top        { vertical-align: middle; margin-top: -1px; }
/* UNUSED .icon--block { display: block; } */
.icon--autosave      { vertical-align: middle; margin-right: 4px; opacity: 0.7; }
.icon--search-prefix { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }


/* ────────────────────────────────────────────────────────────────
   5. ANIMAZIONI
   ──────────────────────────────────────────────────────────────── */
.fade {
  animation: remap-fade-in .22s ease;
}
@keyframes remap-fade-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ────────────────────────────────────────────────────────────────
   6. TOOLTIP
   ──────────────────────────────────────────────────────────────── */
/* UNUSED div:hover > .action-tooltip { opacity: 1 !important; } */


/* ────────────────────────────────────────────────────────────────
   7. RESPONSIVE — breakpoint 640px
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dim-boxes { flex-direction: column !important; }
  /* Recharts applica text-align inline sull'<ul> della legenda (centrato di
     default): sotto i grafici trend va allineata a sinistra come il resto
     del contenuto mobile. */
  .recharts-default-legend { text-align: left !important; }
  /* DimSummary (SINTESI TEAM/INDIVIDUALE, PUNTEGGI TEAM · DELTA, ecc.): con
     rank + avg + warn + delta insieme le colonne fisse non ci stanno e la
     riga sfondava la larghezza della pagina. Stesso trattamento della
     tabella trend: nome a larghezza fissa (troncato con ellissi dalla
     regola base di .dim-summary__label) e scroll orizzontale contenuto
     dentro la card, non sulla pagina. */
  .dim-summary { overflow-x: auto; }
  .dim-summary .dim-summary__header,
  .dim-summary .dim-summary__row { min-width: max-content; }
  .dim-summary .dim-summary__col-label:first-child,
  .dim-summary .dim-summary__name { flex: 0 0 128px; }
}


/* ════════════════════════════════════════════════════════════════
   COMPONENT LIBRARY
   ════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   CARD
   ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.card--grow-300 { flex: 1 1 300px; min-width: 0; }


/* ────────────────────────────────────────────────────────────────
   BUTTON
   ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  padding: 11px 22px;
  cursor: pointer;
  transition: all .14s;
}

.btn--disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Varianti */
.btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.btn--outline {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 33%, transparent);
}
.btn--danger {
  background: #e53935;
  color: #fff;
}

/* Taglia */
.btn--sm {
  font-size: .87rem;
  padding: 7px 16px;
}
.btn--icon { padding: 5px 8px; }


/* ────────────────────────────────────────────────────────────────
   SECTION LABEL  (etichetta sezione uppercase monospace)
   ──────────────────────────────────────────────────────────────── */
.section-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 1px;
  margin-bottom: 18px;
  font-family: var(--font-sans);
}
.section-label--mt-40 { margin-top: 40px; }
.ld__anon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-radius: 6px;
  background: transparent;
  cursor: default;
  user-select: none;
  border-bottom: 1px solid var(--color-border-light);
}
.ld__anon-row--last { border-bottom: none; }


/* ────────────────────────────────────────────────────────────────
   PILL  (badge numerico)
   ──────────────────────────────────────────────────────────────── */
.pill {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #F2EDE3;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Varianti semantiche */
.pill--warn {
  color: var(--color-warn);
  background: var(--color-warn-bg);
  border-color: var(--color-warn-border);
}
.team-confirm-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}
.pill--ok {
  color: var(--color-ok);
  background: var(--color-ok-bg);
  border-color: var(--color-ok-border);
}
.pill--amber {
  color: var(--color-amber);
  background: var(--color-amber-bg);
  border-color: var(--color-amber-border);
}
.pill--muted {
  color: var(--color-text-muted);
  background: transparent;
  border: none;
}

/* Variante avg: allineamento e larghezza minima */
.pill--avg {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 76px;
  justify-content: center;
  padding: 2px 6px 2px 8px;
}

.pill--avg .pill__value {
  min-width: 32px;
  text-align: right;
}
.pill__icon   { margin-left: 4px; }
.pill__spacer { width: 20px; display: inline-block; }


/* ────────────────────────────────────────────────────────────────
   DIM TAG  (etichetta dimensione REMAP: R / E / M / A / P)
   ──────────────────────────────────────────────────────────────── */
.dim-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .73rem;
  color: #fff;
  letter-spacing: 0;
  background: var(--dim-tag-color, var(--color-border));
}

/* Colori per dimensione */
.dim-tag--R { background: var(--color-dim-R); }
.dim-tag--E { background: var(--color-dim-E); }
.dim-tag--M { background: var(--color-dim-M); }
.dim-tag--A { background: var(--color-dim-A); }
.dim-tag--P { background: var(--color-dim-P); }

/* Variante neutra (senza colore dimensione) */
.dim-tag--neutral {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Taglie */
.dim-tag--lg {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  font-size: .93rem;
}
.dim-tag--table {
  width: 1.47rem;
  height: 1.47rem;
  border-radius: 4px;
  font-size: .85rem;
}
/* Composito: stesso taglio dei DTag ma quadrato nero, senza lettera */
.dim-tag--composite { background: var(--color-text-primary); }

/* ─── TREND TOOLTIP (popup hover sul grafico trend) ──────────────── */
.trend-tooltip {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-family: var(--font-mono);
  box-shadow: var(--shadow-lg);
}
.trend-tooltip__label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.trend-tooltip__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.trend-tooltip__row--composite {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border-light);
}
.trend-tooltip__name {
  font-size: 0.85rem;
  color: var(--color-text-primary);
  flex: 1;
  white-space: nowrap;
}
.trend-tooltip__value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.trend-tooltip__value--ok { color: var(--color-ok); }
.trend-tooltip__value--warn { color: var(--color-warn); }


/* ────────────────────────────────────────────────────────────────
   AVATAR  (avatar utente con iniziali)
   Il colore è dinamico: impostato via CSS custom property --avatar-color
   ──────────────────────────────────────────────────────────────── */
.avatar {
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  width: var(--avatar-size, 32px);
  height: var(--avatar-size, 32px);
  font-size: calc(var(--avatar-size, 32px) * .33);
  /* Colore background/border/testo derivato da --avatar-color via inline style */
  background: var(--avatar-bg);
  border: 2px solid var(--avatar-border);
  color: var(--avatar-color, var(--color-accent));
}


/* ════════════════════════════════════════════════════════════════
   REPORT HTML CLASSES
   Usate nei template literal per i report scaricabili (.html).
   Devono essere anche nel DOM per il pannello AI Prep inline.
   ════════════════════════════════════════════════════════════════ */

.tbl {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
  font-size: 15px;
  table-layout: fixed;
}
.tbl th {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: .3px;
  padding: 4px 0;
  border-bottom: 1px solid #DDD6CA;
  text-align: left;
}
.tbl td {
  padding: 5px 0;
  border-bottom: 1px solid #F0EAE0;
  vertical-align: top;
}
.tbl th.c,
.tbl td.c { text-align: center; }
.tbl td.r  { text-align: right; }

.dblock {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.dtitle {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}
.dbody {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.75;
}
.alist {
  margin: 0 0 0 18px;
  line-height: 1.9;
  font-size: 15px;
  color: var(--color-text-secondary);
}
.alist li { margin-bottom: 4px; }

@media print {
  body                { background: #fff; padding: 10px 24px; }
  .dblock             { box-shadow: none; border: 1px solid #ddd; }
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
   ════════════════════════════════════════════════════════════════ */

/* ── Flex ────────────────────────────────────────────────────────── */
.row          { display: flex; align-items: center; }
/* UNUSED .row--between { display: flex; align-items: center; justify-content: space-between; } */
/* UNUSED .row--center  { display: flex; align-items: center; justify-content: center; } */
/* UNUSED .row--wrap    { display: flex; align-items: center; flex-wrap: wrap; } */
.col          { display: flex; flex-direction: column; }
.col--grow    { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.grow         { flex: 1; }
.shrink-0     { flex-shrink: 0; }
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.no-select       { user-select: none; pointer-events: none; }
.w-full          { width: 100%; }
.flex-1          { flex: 1; }
.d-block         { display: block; }
.m-0             { margin: 0; }
.mt-6            { margin-top: 6px; }
.mt-8            { margin-top: 8px; }
.mt-16           { margin-top: 16px; }
.mt-20           { margin-top: 20px; }
.mb-12           { margin-bottom: 12px; }
.mb-16           { margin-bottom: 16px; }
.ml-6            { margin-left: 6px; }
.text-hint       { font-size: .75rem; color: var(--color-text-muted); }
/* UNUSED .min-w-0      { min-width: 0; overflow: hidden; } */

/* ── Gap ─────────────────────────────────────────────────────────── */
/* UNUSED .gap-4  { gap: 4px; } */
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
/* UNUSED .gap-10 { gap: 10px; } */
.gap-12 { gap: var(--list-gap); }
/* UNUSED .gap-16 { gap: 16px; } */
/* UNUSED .gap-20 { gap: 20px; } */
/* UNUSED .gap-24 { gap: 24px; } */

/* ── Container (max-width 1600) ──────────────────────────────────── */
.container {
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* ── App view layout ─────────────────────────────────────────────── */
.view-root   { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.view-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.view-content {
  padding: 24px 28px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  align-self: center;
}

/* ── App shell & loading screens ────────────────────────────────── */
.app-shell {
  background: var(--color-bg);
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-login-page {
  background: var(--color-bg);
  height: 100vh;
  display: flex;
  justify-content: center;
}
.app-login-inner { width: 100%; max-width: 1600px; }
.app-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--color-bg);
}

/* ── Resume modal ────────────────────────────────────────────────── */
.resume-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.38);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.resume-modal__box {
  background: var(--color-card);
  border-radius: 14px;
  padding: 24px 24px 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  position: relative;
}
.resume-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--color-text-muted);
  line-height: 1;
  cursor: pointer;
}

/* ── Overflow helpers ────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
/* UNUSED .text-truncate   { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } */


/* ════════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ════════════════════════════════════════════════════════════════ */

.font-bold  { font-weight: 700; }
/* UNUSED .font-semi  { font-weight: 600; } */
.font-mono  { font-family: var(--font-mono); }
.text-mono  { font-family: var(--font-mono); font-size: 1rem; }

/* UNUSED .text-xs    { font-size: .78rem; } */
/* UNUSED .text-sm    { font-size: .87rem; } */
.text-base  { font-size: 1rem; }
/* UNUSED .text-lg    { font-size: 1.07rem; } */

.text-center    { text-align: center; }
.nowrap         { white-space: nowrap; }
.text-primary   { color: var(--color-text-primary); }
/* UNUSED .text-secondary { color: var(--color-text-secondary); } */
.text-muted     { color: var(--color-text-muted); }
/* UNUSED .text-accent    { color: var(--color-accent); } */
/* UNUSED .text-warn      { color: var(--color-warn); } */
.text-ok        { color: var(--color-ok); }
/* UNUSED .text-amber     { color: var(--color-amber); } */

/* UNUSED .lh-base  { line-height: 1.6; } */
/* UNUSED .lh-loose { line-height: 1.75; } */
/* UNUSED .lh-xl    { line-height: 1.85; } */


/* ════════════════════════════════════════════════════════════════
   COLOR UTILITIES
   ════════════════════════════════════════════════════════════════ */

/* UNUSED .bg-base    { background: var(--color-bg); } */
/* UNUSED .bg-surface { background: var(--color-surface); } */
/* UNUSED .bg-card    { background: var(--color-card); } */
/* UNUSED .bg-warn    { background: var(--color-warn-bg); } */
/* UNUSED .bg-ok      { background: var(--color-ok-bg); } */
/* UNUSED .bg-amber   { background: var(--color-amber-bg); } */

.border         { border: 1px solid var(--color-border); }
/* UNUSED .border-light   { border: 1px solid var(--color-border-light); } */
/* UNUSED .border-t       { border-top: 1px solid var(--color-border); } */
/* UNUSED .border-b       { border-bottom: 1px solid var(--color-border); } */
/* UNUSED .border-t-light { border-top: 1px solid var(--color-border-light); } */


/* ════════════════════════════════════════════════════════════════
   STRUCTURAL COMPONENTS
   ════════════════════════════════════════════════════════════════ */

/* ── HEADER ──────────────────────────────────────────────────────── */
.header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  z-index: 150;
}
.header__container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 28px;
  height: 56px;
  display: flex;
  align-items: center;
  position: relative;
}
.header__spacer { flex: 1; }
.header__user   { display: flex; align-items: center; gap: 10px; }
.header__user-info { text-align: right; }
.header__user-name { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); }
.header__user-role { font-size: 1rem; color: var(--color-text-muted); }
.header__avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border: 2px solid color-mix(in srgb, var(--color-accent) 21%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  cursor: pointer;
}

/* ── PROFILE MENU ────────────────────────────────────────────────── */
.profile-menu {
  position: absolute;
  top: 64px;
  right: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 14px 10px;
  min-width: 230px;
  z-index: 300;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
}
.profile-menu__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 14px;
}
.profile-menu__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  border: 2px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-accent);
}
.profile-menu__name { font-weight: 700; font-size: 1rem; color: var(--color-text-primary); }
.profile-menu__role { font-size: .82rem; color: var(--color-text-muted); }
.profile-menu__divider {
  border-top: 1px solid var(--color-border-light);
  margin-bottom: 4px;
}
.profile-menu__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background .12s;
  color: var(--color-text-secondary);
}
.profile-menu__btn:hover { background: var(--color-bg); }
/* Toggle Team/Personale */
.profile-menu__toggle-wrap {
  padding: 6px 12px 10px;
}
.profile-menu__toggle-label {
  font-size: .75rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-bottom: 6px;
}
.profile-menu__toggle {
  display: flex;
  background: var(--color-border-light);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}
.profile-menu__toggle-btn {
  flex: 1;
  padding: 5px 0;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--font-sans);
  transition: all .15s;
  color: var(--color-text-muted);
  background: transparent;
}
.profile-menu__toggle-btn--active {
  background: var(--color-accent);
  color: var(--color-card);
}

/* ── SUBHEADER ───────────────────────────────────────────────────── */
.subheader {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}
/* Quando è seguito da una TabBar, il bordo lo fornisce già la tab bar
   stessa — niente doppia linea. */
.subheader--no-border { border-bottom: none; }
.subheader__container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
@media (max-width: 640px) {
  .subheader__container { padding: 12px 16px; gap: 8px; }
  .subheader__left { flex: 1 1 100%; }
}
.subheader__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 160px;
  min-width: 0;
  overflow: hidden;
}
.subheader__text { min-width: 0; overflow: hidden; }
.subheader__sublabel {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.subheader__label {
  font-size: 1.4rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .subheader__label { font-size: 1.1rem; }
}
.subheader__label-main { font-weight: 700; color: var(--color-text-primary); }
.subheader__label-meta { font-weight: 400; color: var(--color-text-muted); }
.subheader__back-btn { flex-shrink: 0; padding: 5px 10px; }

/* ── TAB BAR ─────────────────────────────────────────────────────── */
.tab-bar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}
.tab-bar__scroll {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 28px;
}
.tab-bar__item {
  background: none;
  border: none;
  padding: 12px 20px 0;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  transition: color .14s;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
/* Il primo tab non ha il padding-left del pulsante, così il suo testo
   si allinea otticamente a sinistra con il titolo sopra (stesso inset
   di .dash-subheader__inner/.tab-bar__scroll). */
.tab-bar__item:first-child {
  padding-left: 0;
}
/* La sottolineatura è sullo span interno, non sul bottone: si allarga solo
   quanto il testo (o il badge), non quanto il padding del pulsante — così
   il bordo resta otticamente allineato al testo invece che al riquadro
   cliccabile. */
.tab-bar__item-label {
  display: inline-block;
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
}
.tab-bar__item--active {
  /* --tab-accent impostato inline sul .tab-bar */
  color: var(--tab-accent, var(--color-accent));
}
.tab-bar__item--active .tab-bar__item-label {
  border-bottom-color: var(--tab-accent, var(--color-accent));
}

/* ── DRAG SCROLL ─────────────────────────────────────────────────── */
.drag-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  flex-shrink: 0;
  max-width: 100%;
}
.drag-scroll::-webkit-scrollbar { display: none; }
.drag-scroll__track {
  display: flex;
  gap: 6px;
  width: max-content;
}

/* ── LOADING VEIL (overlay generico anti-interazione durante reload) ─ */
.loading-veil {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  cursor: wait;
}
.loading-veil__spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: currentColor;
  animation: loading-veil-spin .8s linear infinite, remap-loading-colors 5s linear infinite;
}
@keyframes loading-veil-spin { to { transform: rotate(360deg); } }
.loading-veil__label {
  font-size: 0.85rem;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

/* ── MODAL ───────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.38);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-box {
  background: var(--color-card);
  border-radius: 14px;
  padding: 24px 24px 20px;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-xl);
}
.modal-box--sm   { max-width: 380px; }
.modal-box--md   { max-width: 440px; }
.modal-box--lg   { max-width: 540px; }
/* UNUSED .modal-box--xl   { max-width: 640px; } */
/* UNUSED .modal-box--tall { max-height: 80vh; } */
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--color-text-muted);
  cursor: pointer;
  line-height: 1;
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.modal-title {
  font-weight: 700;
  font-size: 1.07rem;
  color: var(--color-text-primary);
  margin-bottom: 20px;
}
.modal-body {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.85;
}

/* UNUSED — componente HoverTip commentato in app.js (rimpiazzato da WarnTip)
.hover-tip { display: inline-block; align-self: center; line-height: 1; }
.hover-tip__popup {
  position: fixed;
  transform: translate(-50%, -100%);
  z-index: 9999;
  background: var(--color-text-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  font-size: .78rem;
  line-height: 1.45;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  margin-top: -8px;
} */

/* ── TYPING DOTS ─────────────────────────────────────────────────── */
.typing-dots { display: flex; align-items: center; gap: 4px; padding: 8px 4px; }
.typing-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted);
  transition: opacity .2s ease, transform .2s ease;
}
.typing-dot--active   { opacity: 1;   transform: translateY(-4px); }
.typing-dot--inactive { opacity: .22; transform: translateY(0); }

/* ── WARN COL HEADER ─────────────────────────────────────────────── */
.warn-col-header {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--col-width);
}
.warn-col-header__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  font-size: 1.07rem;
  font-weight: 700;
  color: var(--color-amber);
  display: flex;
  align-items: center;
}
.warn-col-header__popup {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  background: var(--color-card);
  border: 1px solid var(--color-amber-border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  width: 220px;
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.warn-col-header__popup strong {
  color: var(--color-amber);
  display: block;
  margin-bottom: 3px;
}

/* ── INTERPRETATION PANEL ────────────────────────────────────────── */
.interp-panel__header  { margin-bottom: 18px; }
.interp-panel__regen   {
  background: none; border: none; padding: 0;
  font-size: .78rem; color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.interp-panel__text    { font-size: 1rem; line-height: 1.8; margin: 0; }
/* UNUSED .interp-panel__api-cta { margin-top: 10px; } */
.interp-panel__footer  {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-light);
  font-size: .93rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-style: italic;
}

/* ─── PROFILE MENU ─────────────────────────────── */
.profile-menu {
  position: absolute;
  top: 64px;
  right: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 10px;
  min-width: 230px;
  z-index: 300;
  box-shadow: var(--shadow-xl);
}
.profile-menu__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 14px;
}
.profile-menu__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 2px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-accent);
}
.profile-menu__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary);
}
.profile-menu__role {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.profile-menu__divider {
  border-top: 1px solid var(--color-border-light);
  margin-bottom: 4px;
}
.profile-menu__divider--spaced {
  margin: 8px 0 4px;
}
.profile-menu__toggle-wrap {
  padding: 6px 12px 10px;
}
.profile-menu__toggle-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-bottom: 6px;
}
.profile-menu__toggle {
  display: flex;
  background: var(--color-border-light);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}
.profile-menu__toggle-btn {
  flex: 1;
  padding: 5px 0;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  background: transparent;
  color: var(--color-text-muted);
  transition: all .15s;
}
.profile-menu__toggle-btn--active {
  background: var(--color-accent);
  color: var(--color-card);
}
.profile-menu__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background .12s;
}
.profile-menu__btn:hover { background: var(--color-bg); }
.profile-menu__btn--accent { color: var(--color-accent); }
.profile-menu__btn span { font-weight: 500; }

/* ─── AI CHAT ───────────────────────────────────── */
.ai-chat__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.ai-chat__backdrop {
  position: absolute;
  inset: 0;
}
.ai-chat__box {
  position: relative;
  background: var(--color-card);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 640px;
  height: calc(100vh - 80px);
  max-height: 720px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
}
.ai-chat__header {
  padding: 12px 20px 14px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ai-chat__header-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary);
}
.ai-chat__header-sub {
  font-size: 1rem;
  color: var(--color-text-muted);
}
.ai-chat__close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1.33rem;
  color: var(--color-text-muted);
  line-height: 1;
  cursor: pointer;
}
.ai-chat__no-key {
  margin: 16px;
  padding: 12px 16px;
  background: var(--color-border-light);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ai-chat__no-key-text { font-size: 0.87rem; color: var(--color-text-secondary); }
.ai-chat__no-key-btn {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.87rem;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.ai-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-chat__bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 1.03rem;
  line-height: 1.65;
  white-space: pre-wrap;
}
.ai-chat__bubble--user {
  align-self: flex-end;
  background: var(--color-accent);
  color: #fff;
}
.ai-chat__bubble--assistant {
  align-self: flex-start;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.ai-chat__footer {
  padding: 10px 16px 8px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.ai-chat__input-row { display: flex; gap: 8px; }
.ai-chat__input-row .btn { flex-shrink: 0; }
.ai-chat__input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: 1.03rem;
  color: var(--color-text-primary);
  background: var(--color-surface);
  outline: none;
  font-family: inherit;
}
.ai-chat__followups {
  align-self: stretch;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--color-border);
}
.ai-chat__followups-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.ai-chat__followups-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-chat__followup-btn {
  text-align: left;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ai-chat__followup-btn:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-bg);
}
.ai-chat__followup-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ai-chat__footer-actions { display: flex; gap: 16px; }
.ai-chat__footer-btn {
  background: none;
  border: none;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.ai-chat__footer-btn--danger { color: #C0392B; }
.ai-chat__radar-svg {
  overflow: visible;
  font-family: var(--font-mono);
  display: block;
}

/* ─── INTERPRETATION PANEL ──────────────────────── */
.interp-panel__header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  margin-bottom: 18px;
}
.interp-panel__header--mobile {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.interp-panel__regen {
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.78rem;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.interp-panel__header--mobile .interp-panel__regen { margin-left: 0; }
.interp-panel__loading {
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
  font-style: italic;
  animation: remap-loading-colors 5s linear infinite;
}
/* Ciclo attraverso i 5 colori REMAP mentre un'analisi AI è in corso —
   condiviso da tutti i punti dell'app che mostrano "Analisi in corso". */
@keyframes remap-loading-colors {
  0%   { color: var(--color-dim-R); }
  20%  { color: var(--color-dim-E); }
  40%  { color: var(--color-dim-M); }
  60%  { color: var(--color-dim-A); }
  80%  { color: var(--color-dim-P); }
  100% { color: var(--color-dim-R); }
}
.interp-panel__text {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin: 0;
  white-space: pre-wrap;
}
.interp-panel__cta-wrap { margin-top: 10px; }
.interp-panel__cta {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.87rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
}
.interp-panel__footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-light);
  font-size: 0.93rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-style: italic;
}
.interp-panel__footer-strong {
  color: var(--color-text-secondary);
  font-style: normal;
}

/* ─── WARN TIP ──────────────────────────────────── */
.warn-tip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  position: relative;
}
.warn-tip__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  color: var(--warn-tip-color);
}
.warn-tip__btn .material-symbols-outlined { display: block; }
.warn-tip__label {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  font-weight: 300;
  white-space: nowrap;
  line-height: 1;
  color: var(--warn-tip-color);
}
.warn-tip__popup {
  position: fixed;
  top: var(--tip-top);
  left: var(--tip-left);
  z-index: 600;
  background: var(--color-card);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  width: 240px;
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  border: 1px solid var(--warn-tip-border);
}

/* ─── EMPTY STATE CARDS ─────────────────────────── */
.empty-state-card {
  text-align: center;
  padding: 64px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.empty-state-card__text {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 400px;
  font-family: var(--font-mono);
}

.empty-dash {
  height: 100%;
  overflow-y: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 24px;
  background: var(--color-bg);
}
.empty-dash__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: 44px 48px;
  max-width: 640px;
  width: 100%;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
.empty-dash__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 20px;
}
.empty-dash__body {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 14px;
}
.empty-dash__body--italic { font-style: italic; margin-bottom: 32px; }
.empty-dash__body--notice { background: var(--color-amber-bg); border-left: 3px solid var(--color-amber-border); border-radius: 4px; padding: 10px 14px; font-size: 0.88rem; color: var(--color-text-secondary); margin-bottom: 14px; }
.empty-dash__period { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 16px; }

/* ─── COLLAB ROW ────────────────────────────────── */
.collab-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 4px;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background .14s;
}
.collab-row--no-border { border-bottom: none; }
.collab-row--hov { background: rgba(0,0,0,.03); }
.collab-row__info { flex: 1; }
.collab-row__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.collab-row__leader-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  white-space: nowrap;
}
.collab-row__leader-pill-short { display: none; }
@media (max-width: 640px) {
  .collab-row__leader-pill-full { display: none; }
  .collab-row__leader-pill-short { display: inline; }
  .collab-row__warn-label { display: none; }
}
.collab-row__new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.collab-row__warn {
  font-size: 1rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 114px;
}
.collab-row__warn--red {
  color: var(--color-warn);
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
}
.collab-row__warn--amber {
  color: var(--color-amber);
  background: var(--color-amber-bg);
  border: 1px solid var(--color-amber-border);
}
.collab-row__arrow { font-size: 1rem; color: var(--color-text-muted); }
@media (max-width: 640px) {
  /* label "warning" nascosta: resta solo icona+numero, pill compatta senza il min-width desktop */
  .collab-row__warn { padding: 2px 6px; gap: 3px; min-width: 0; }
}

/* ─── RADAR LEGEND ──────────────────────────────── */
.radar-legend {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.legend-line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 1rem;
  color: var(--legend-color);
}
.legend-line__svg { flex-shrink: 0; }
.radar-legend__dim {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--legend-color);
}

/* ─── MODAL SIZE: LG ────────────────────────────── */
.modal-box--lg {
  max-width: 540px;
  padding: 24px 24px 20px;
  max-height: 80vh;
}

/* ─── PROMOTE MODAL ─────────────────────────────── */
.promote-modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.promote-modal__title {
  font-weight: 700;
  font-size: 1.07rem;
  color: var(--color-text-primary);
}
.promote-modal__status { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 16px; }
.promote-modal__error { color: #C0392B; font-size: 0.9rem; margin-bottom: 16px; }
.promote-modal__result { margin-bottom: 16px; }
.promote-modal__result-err { color: #C0392B; font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; }
.promote-modal__result-ok { color: #38C0A7; font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; }
.promote-modal__err-list { font-size: 0.82rem; color: #C0392B; padding-left: 18px; margin: 0 0 8px; }
.promote-modal__log { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.9; column-count: 2; column-gap: 16px; }
.promote-modal__no-changes {
  background: #EEF7F0;
  border: 1px solid rgba(56,192,167,.25);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 0.88rem;
  color: #2A7A5A;
  margin-bottom: 16px;
}
.promote-modal__changes { margin-bottom: 16px; }
.promote-modal__changes-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.promote-modal__files { font-size: 0.82rem; line-height: 1.9; column-count: 2; column-gap: 16px; }
.promote-modal__file-status { font-weight: 600; font-size: 0.75rem; }
.promote-modal__file-status--new { color: #38C0A7; }
.promote-modal__file-status--modified { color: #F1A539; }
.promote-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}
.promote-modal__actions--end { justify-content: flex-end; margin-top: 8px; }
.promote-modal__promote-btn {
  padding: 9px 20px;
  border-radius: 7px;
  border: none;
  background: #C0392B;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
}
.promote-modal__promote-btn--disabled {
  background: #C0BAD0;
  cursor: not-allowed;
}

/* ─── DIM SUMMARY TABLE ─────────────────────────── */
.dim-summary__header {
  display: flex;
  align-items: center;
  padding: 0 4px 8px;
}
.dim-summary__col-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: .05em;
}
.dim-summary__col-label { flex: 1; }
.dim-summary__avg-col {
  flex: 0 0 76px;
  text-align: center;
}
.dim-summary__warn-col {
  flex: 0 0 76px;
  display: flex;
  justify-content: center;
}
.dim-summary__rank-col {
  flex: 0 0 28px;
  margin-right: 5px;
}
.dim-summary__delta-col {
  flex: 0 0 68px;
  text-align: right;
}
/* Solo l'header: un'icona isolata allineata a destra come il valore
   sottostante "sembra" fuori centro (il valore è una stringa larga
   "+0.08 ↑", l'icona è un singolo simbolo) — qui si centra sulla propria
   colonna invece di inseguire il testo sotto. */
.dim-summary__delta-header {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dim-summary__row {
  display: flex;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-border-light);
}
.dim-summary__row--last { border-bottom: none; }
.dim-summary__name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
/* Stessa dimensione dell'Avatar usato nella card Collaboratori (28px),
   per allineare otticamente le due liste impilate. */
.dim-summary__name .dim-tag--table {
  width: 28px;
  height: 28px;
}
.dim-summary__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--dim-color, var(--color-text-primary));
}
.dim-summary__center { display: flex; justify-content: center; }
.dim-summary__rank {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: right;
}
.dim-summary__delta {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--delta-color);
}

/* ─── TREND TABLE (dim-summary, colonna per trimestre) ───────────── */
.trend-table__cell { flex: 1; text-align: center; }
.trend-table__composite-label { color: var(--color-text-primary); font-weight: 700; }
.trend-table__min-row { display: flex; align-items: center; padding: 0 0 10px; border-bottom: 1px solid var(--color-border-light); }
.trend-table__min-row.dim-summary__row--last { border-bottom: none; }
.trend-table__min-label {
  font-style: italic; color: var(--color-text-muted); font-size: 0.85rem;
}
.trend-table__min-value {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-text-muted);
}
.trend-table__min-value--warn { color: var(--color-warn); }

/* ─── TREND STAT CARDS (riepilogo periodo corrente) ──────────────── */
.trend-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
@media (max-width: 860px) { .trend-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trend-stat { height: 100%; padding: 10px 12px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 22px; min-width: 0; }
.trend-stat__left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trend-stat__value { font-family: var(--font-mono); font-size: 2rem; font-weight: 800; line-height: 1; flex-shrink: 0; text-align: right; }
.trend-stat__value--critical { color: var(--color-warn); }
.trend-stat__value--ok { color: var(--color-ok); }
.trend-stat__delta { font-family: var(--font-mono); font-size: 0.88rem; display: flex; align-items: center; gap: 3px; color: var(--color-text-muted); }
.trend-stat__delta--up { color: var(--color-ok); }
.trend-stat__delta--down { color: var(--color-warn); }
.trend-stat__pill { align-self: flex-start; text-transform: uppercase; letter-spacing: .03em; font-size: 0.62rem; }
.trend-stat__pill--hidden { visibility: hidden; }
@media (max-width: 520px) {
  .trend-stat { flex-direction: column; align-items: flex-start; }
  .trend-stat__value { text-align: left; }
}

/* ─── TREND CHART ROW (grafico+tabella | azioni individuali) ─────── */
.trend-chart-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--card-gap); align-items: stretch; }
@media (max-width: 900px) { .trend-chart-row { grid-template-columns: 1fr; } }
.trend-chart-row .card { min-width: 0; }
.trend-table-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border-light); }
@media (max-width: 640px) {
  .trend-table-block { overflow-x: auto; }
  .trend-table-block .dim-summary__header,
  .trend-table-block .dim-summary__row { min-width: max-content; }
  .trend-table-block .dim-summary__col-label:first-child,
  .trend-table-block .dim-summary__name { flex: 0 0 128px; }
  .trend-table-block .trend-table__cell { flex: 0 0 72px; }
  /* Chip valore senza icona check/warning: recupera spazio orizzontale
     stretto in mobile, dove conta di più per il nome dimensione. */
  .trend-table-block .pill--avg { min-width: 0; }
  .trend-table-block .pill__icon,
  .trend-table-block .pill__spacer { display: none; }
}

/* ─── TREND CALLOUT (rischio nascosto) ───────────────────────────── */
.trend-callout {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 16px; margin-bottom: 18px;
  background: var(--color-warn-bg); border: 1px solid var(--color-warn-border);
  border-left: 4px solid var(--color-warn); border-radius: var(--radius-md);
}
.trend-callout__title { font-weight: 700; font-size: 0.95rem; color: var(--color-text-primary); }
.trend-callout__body { font-size: 0.9rem; color: var(--color-text-secondary); margin-top: 3px; line-height: 1.5; }
.trend-callout__body b { color: var(--color-warn); }

/* ─── NOTA DI CONTESTO — marker sul trend di team ─────────────────── */
/* Il dettaglio si apre al click (non all'hover, per restare leggibile e
   funzionare anche su touch) ed è portato su document.body (come
   ActionRefLabel): da fuori dall'SVG non finisce mai sotto le linee del
   grafico né sotto il tooltip nativo di Recharts. */
.pn__marker { cursor: pointer; }
.pn__hit { fill: transparent; }
.pn__badge { fill: var(--color-amber); transition: opacity .12s ease; }
.pn__badge-dot, .pn__badge-stem { fill: var(--color-card); }
.pn__marker:hover .pn__badge { opacity: .8; }
.retro-actions-tip {
  position: fixed;
  left: var(--tip-left);
  right: var(--tip-right);
  top: var(--tip-top);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  z-index: 9999;
  pointer-events: none;
  max-width: 320px;
  box-shadow: 0 4px 16px rgba(0,0,0,.13);
  line-height: 1.75;
}
.pn__tip-portal {
  position: fixed; top: var(--tip-top); left: var(--tip-left); transform: translateX(-50%);
  z-index: 9999; max-width: 280px;
  background: var(--color-card); border: 1px solid var(--color-amber-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 8px 12px; font-family: var(--font-sans);
}
.pn__tip-row + .pn__tip-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border-light); }
.pn__tip-date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); margin-bottom: 2px; }
.pn__tip-title { font-size: 0.85rem; font-weight: 650; color: var(--color-text-primary); }
.pn__tip-note { font-size: 0.8rem; color: var(--color-text-secondary); font-style: italic; line-height: 1.4; margin-top: 4px; }
.pn__item-date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 2px; }
.pn__card { margin-top: 18px; }
.pn__card-heading { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.pn__card-heading .section-label { margin-bottom: 0; }
.pn__add-btn { margin-top: 18px; }

/* ─── SD LIST (15D) ─────────────────────────────── */
.sd-list__avg-col {
  flex: 0 0 72px;
  text-align: center;
}
.sd-list__warn-col {
  flex: 0 0 72px;
  display: flex;
  justify-content: center;
}
.sd-list__group { margin-bottom: 10px; }
.dim-summary__header + .sd-list__group { padding-top: 20px; }
.sd-list__dim-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--dim-color);
}
.sd-list__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 6px 14px;
}
.sd-list__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: .5;
  flex-shrink: 0;
  background: var(--dim-color);
}
.sd-list__name { font-size: 1rem; flex: 1; color: var(--color-text-secondary); }
.sd-list__name--warn { color: var(--color-warn); }
.sd-list__center { display: flex; justify-content: center; }

/* ─── DIAGNOSI PANEL ────────────────────────────── */
.diagnosi-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.diagnosi-panel__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
/* Il titolo di sezione (SLabel) è condizionale (6b-C: silente quando la
 * sezione "DIMENSIONI DA APPROFONDIRE" non ha contenuto proprio) — quando
 * presente si porta a sinistra con margin-right:auto, lasciando il
 * bottone AI sempre ancorato a destra via justify-content:flex-end sopra,
 * in entrambi i casi (titolo presente o assente). */
.diagnosi-panel__header-title { margin-right: auto; }
/* .diagnosi-panel è flex-column con gap:10px, uniforme fra TUTTI i figli
 * diretti. .section-label (margin-bottom:18px) e .dims-signal-box
 * (margin-bottom:14px) portano invece un margine proprio pensato per la
 * resa a blocchi impilati di CollabReport/LeaderReport (nessun gap lì,
 * solo margin-bottom in sequenza) — qui si sommava al gap, raddoppiando lo
 * spazio dopo ogni titolo di sezione rispetto a quello prima. Annullato solo
 * qui, da figlio diretto: la definizione condivisa resta invariata. */
.diagnosi-panel > .section-label,
.diagnosi-panel > .dims-signal-box {
  margin-bottom: 0;
}
.diagnosi-panel__ok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 16px 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #7a6e68;
  line-height: 1.4;
}
.diagnosi-panel__ok-img {
  width: 260px;
  max-width: 80%;
  height: auto;
}
/* Card grigia della sezione "SEGNALI MENO PRIORITARI PER ORA" (6b-C) —
 * UNA sola definizione condivisa da DiagnosiPanel e LeaderReport (vedi
 * lessPriorityBlock in js/app.js), stessa superficie/bordo dei box
 * dimensione (diagnosi-panel__block / lr__collab-dim-block / lr__dim-block):
 * non aggiungere una quarta variante per componente. */
.dims-signal-box {
  padding: 14px;
  margin-bottom: 14px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.dims-signal-box__intro {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}
.dims-signal-box__row {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 4px;
}
.dims-signal-box__row:last-child { margin-bottom: 0; }
.diagnosi-panel__block {
  padding: 12px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.diagnosi-panel__block-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.diagnosi-panel__dim-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--dim-color);
}
.diagnosi-panel__q-section {
  border-top: 1px solid color-mix(in srgb, var(--dim-color) 12%, transparent);
  padding-top: 15px;
}
.diagnosi-panel__diag-text {
  font-size: 1.03rem;
  color: var(--color-text-primary);
  line-height: 1.8;
  margin-bottom: 10px;
  font-weight: 500;
}
.diagnosi-panel__interp {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: 14px;
}
.diagnosi-panel__sub-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.diagnosi-panel__chip {
  font-size: 1rem;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.diagnosi-panel__chip--warn {
  background: var(--color-warn-bg);
  color: var(--color-warn);
  border-color: var(--color-warn-border);
}
.diagnosi-panel__q-label {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-bottom: 10px;
  letter-spacing: .05em;
}
.diagnosi-panel__q-group { margin-bottom: 5px; }
.diagnosi-panel__q-group-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 3px;
}
.diagnosi-panel__q-group-score {
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}
.diagnosi-panel__q-row {
  display: flex;
  gap: 5px;
  padding: 8px 0 8px 8px;
  border-bottom: 1px solid var(--color-border-light);
  align-items: flex-start;
}
.diagnosi-panel__q-id {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.diagnosi-panel__q-text { font-size: 1rem; color: var(--color-text-secondary); flex: 1; line-height: 1.4; }
.diagnosi-panel__q-score {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.diagnosi-panel__q-score--warn { color: var(--color-warn); }
.diagnosi-panel__q-score--amber { color: var(--color-amber); }
.diagnosi-panel__hidden-block {
  padding: 12px;
  background: var(--color-amber-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-amber-border);
}
.diagnosi-panel__hidden-desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}

/* ─── QUARTER SELECT ────────────────────────────── */
.quarter-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 32px;
  padding: 40px 24px;
  background: var(--color-bg);
}
.quarter-select__intro { text-align: center; }
.quarter-select__logo { display: flex; justify-content: center; margin-bottom: 20px; }
.quarter-select__title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: 20px;
  margin-bottom: 8px;
}
.quarter-select__desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 400px;
}
.quarter-select__card {
  background: var(--color-card);
  border-radius: var(--radius-2xl);
  padding: 36px 40px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 300px;
}
.quarter-select__field-label {
  font-size: 0.87rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-bottom: 6px;
  letter-spacing: .05em;
}
.quarter-select__btn-row { display: flex; gap: 8px; }
.quarter-select__btn {
  flex: 1;
  padding: 10px 0;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .14s;
}
.quarter-select__btn--active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  color: var(--color-accent);
}

/* ─── LOGIN SCREEN (demo mode) ──────────────────── */
.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  gap: 28px;
  background: var(--color-bg);
  padding: 40px 20px;
  box-sizing: border-box;
}
.login-screen--mobile { gap: 20px; padding: 32px 16px; }
.login-screen__intro {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-screen__logo { margin: 0 auto 14px; }
.login-screen__tagline {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.login-screen__headline {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.login-screen__headline--sm { font-size: 1.27rem; }
.login-screen__sub { color: var(--color-text-muted); font-size: 1rem; }
.login-screen__cards {
  display: flex;
  gap: 16px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 880px;
}
.login-screen__cards--mobile { flex-direction: column; }
.login-screen__card {
  flex: 1 1 260px;
  max-width: 420px;
  padding: 44px 40px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all .18s;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: var(--shadow-md);
}
.login-screen__card:hover {
  border-color: color-mix(in srgb, var(--card-color) 38%, transparent);
  box-shadow: 0 8px 32px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.login-screen__card--mobile { padding: 24px 20px; gap: 14px; }
.login-screen__card-icon { font-size: 2rem; color: var(--card-color); }
.login-screen__card-title {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.login-screen__card-desc {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.login-screen__card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.login-screen__card-note {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.login-screen__card-cta { font-size: 1.07rem; font-weight: 700; color: var(--card-color); }

/* ─── SYNTH TABLE (5D collapsible) ─────────────── */
.synth-table__hint {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  font-family: var(--font-mono);
}
.synth-table__block {
  margin-bottom: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.synth-table__dim-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 14px;
  background: var(--color-bg);
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.synth-table__dim-row:hover {
  background: color-mix(in srgb, var(--color-bg), black 6%);
}
.synth-table__dim-name {
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--dim-color);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.synth-table__info-btn {
  background: none;
  border: none;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: 0 0 0 2px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.synth-table__sd-block {
  border-top: 1px solid var(--color-border-light);
  padding: 7px 12px 5px;
  background: transparent;
}
.synth-table__sd-block--warn { background: var(--color-warn-bg); }
.synth-table__sd-block--hidden { background: var(--color-amber-bg); }
.synth-table__sd-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.synth-table__sd-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  flex-shrink: 1;
  min-width: 0;
}
.synth-table__sd-name--warn { color: var(--color-warn); }
.synth-table__sd-name--hidden { color: var(--color-amber); }
.synth-table__hidden-chip {
  font-size: 1rem;
  color: var(--color-amber);
  background: var(--color-amber-bg);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-amber-border);
}
.synth-table__q-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 4px 8px;
}
.synth-table__q-id {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.synth-table__q-text {
  font-size: 1rem;
  color: var(--color-text-muted);
  flex: 1;
  line-height: 1.4;
}
.synth-table__q-score {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  width: 32px;
  justify-content: space-between;
}
.synth-table__q-score--warn { color: var(--color-warn); }
.synth-table__q-score--ok { color: var(--color-ok); }
.synth-table__q-score-spacer { width: 14px; }
.synth-table__open-q {
  border-top: 1px solid var(--color-border-light);
  padding: 12px 14px 10px;
  background: color-mix(in srgb, var(--dim-color) 4%, transparent);
}
.synth-table__open-q-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.synth-table__open-q-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dim-color);
}
.synth-table__open-q-text {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid color-mix(in srgb, var(--dim-color) 31%, transparent);
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  font-style: italic;
}
.synth-table__note-empty {
  margin: 0;
  padding-left: 12px;
  font-size: 1rem;
  color: var(--color-text-muted);
  font-style: italic;
}
.synth-table__note-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--dim-color);
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
}
.synth-table__note-locked {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.synth-table__note-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 90px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.6;
  background: var(--color-bg);
  color: var(--color-text-primary);
  display: block;
}
.synth-table__note-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.synth-table__note-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.synth-table__note-error {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--color-warn);
}

/* ─── COLLAB CARD ───────────────────────────────── */
.collab-card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--card-border);
}
.collab-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.collab-card__chip {
  font-size: 1rem;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 90px;
}
.collab-card__chip--warn {
  background: var(--color-warn-bg);
  color: var(--color-warn);
  border-color: var(--color-warn-border);
}
.collab-card__chip--ok {
  background: var(--color-ok-bg);
  color: var(--color-ok);
  border-color: var(--color-ok-border);
}
.collab-card__chip-val { min-width: 2.8em; text-align: right; }
.collab-card__chip-icon { width: 1em; text-align: center; flex-shrink: 0; }
.collab-card__warn {
  font-size: 0.84rem;
  font-weight: 300;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.collab-card__warn--red { color: var(--color-warn); }
.collab-card__warn--amber { color: var(--color-amber); }
.collab-card__mobile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.collab-card__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.collab-card__arrow { font-size: 1rem; color: var(--color-text-muted); flex-shrink: 0; }
.collab-card__mobile-dims { display: flex; flex-direction: column; gap: 6px; }
.collab-card__mobile-dim-row { display: flex; align-items: center; gap: 10px; }
.collab-card__mobile-dim-inner {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.collab-card__desktop {
  display: flex;
  align-items: center;
  gap: 14px;
}
.collab-card__member-info {
  width: 160px;
  flex-shrink: 0;
  overflow: hidden;
}
.collab-card__dims {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: nowrap;
}
.collab-card__dim-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

/* ─── DASHBOARD LAYOUT ──────────────────────────── */
.dash-subheader {
  background: var(--color-surface);
  flex-shrink: 0;
}
/* Quando non è seguito da una TabBar (es. Blameless Retrospective) serve
   il bordo qui, altrimenti non c'è alcuna linea a separare header e
   contenuto. */
.dash-subheader--bordered { border-bottom: 1px solid var(--color-border); }
.dash-subheader__inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .dash-subheader__inner { padding: 12px 16px; gap: 8px; }
  .dash-subheader__inner > :first-child { flex: 1 1 100%; }
}
.dash-subheader__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.dash-subheader__title {
  font-size: 1.4rem;
  line-height: 1.3;
}
@media (max-width: 640px) {
  .dash-subheader__title { font-size: 1.1rem; }
}
.dash-subheader__title-main {
  font-weight: 700;
  color: var(--color-text-primary);
}
.dash-subheader__title-meta {
  font-weight: 400;
  color: var(--color-text-muted);
}
.dash-panels {
  display: flex;
  gap: var(--card-gap);
  flex-wrap: wrap;
}
.dash-panel {
  flex: 1 1 300px;
  min-width: 0;
}
.dash-panel--radar {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dash-panel--stack {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  min-width: 0;
}
.dash-panel--side {
  flex: 1 1 260px;
  min-width: 0;
}
.dash-panel--scroll {
  flex: 1 1 260px;
  min-width: 0;
  overflow-y: auto;
}
.dash-panel__grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.dash-panel__radar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding-top: 64px;
}
.dash-panel__radar-wrap--15d { min-height: 300px; }
.dash-panel__more-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-accent);
  font-weight: 600;
  padding: 22px 0 0;
  display: block;
  width: 100%;
  text-align: right;
  font-family: inherit;
}
.dash-panel__more-link:disabled { color: var(--color-text-muted); cursor: default; opacity: .6; }

/* ════════════════════════════════════════════════════════════════
   USER CARD
   ════════════════════════════════════════════════════════════════ */

.user-card { margin-bottom: var(--list-gap); }
.user-card--blocked { opacity: 0.65; }

.user-card__body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.user-card__role-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.user-card__info {
  flex: 1;
  min-width: 0;
}
.user-card__name {
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: 1rem;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.user-card__badge-radice {
  font-size: 0.7rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  border-radius: 5px;
  padding: 1px 7px;
  letter-spacing: .3px;
}
.user-card__badge-orgadmin {
  font-size: 0.7rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--color-ok) 10%, transparent);
  color: var(--color-ok);
  border: 1px solid color-mix(in srgb, var(--color-ok) 30%, transparent);
  border-radius: 5px;
  padding: 1px 7px;
  letter-spacing: .3px;
}
.user-card__badge-blocked {
  color: var(--color-warn);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  border-radius: 4px;
  padding: 1px 6px;
}
.user-card__badge-multi {
  color: var(--color-amber);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--color-amber-bg);
  border: 1px solid var(--color-amber-border);
  border-radius: 4px;
  padding: 1px 6px;
}
.user-card__meta {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  margin-bottom: 3px;
}
.user-card__meta--muted {
  color: var(--color-text-muted);
}
.user-card__meta--sm {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-bottom: 3px;
}
.user-card__meta--xs {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-bottom: 4px;
}
.user-card__actions { flex-shrink: 0; }
.user-card__menu-wrap { position: relative; }

.user-card__menu-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  white-space: nowrap;
}
.user-card__menu-btn:hover {
  background: var(--color-border-light);
}

.user-card__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  z-index: 400;
  min-width: 200px;
  padding: 6px 0;
  overflow: hidden;
}

.user-card__divider {
  border-top: 1px solid var(--color-border-light);
  margin: 2px 0;
}

.user-card__menu-item-wrap { position: relative; }
.user-card__menu-item-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 9px 14px;
  font-size: 0.9rem;
  color: var(--item-color, var(--color-text-secondary));
  cursor: pointer;
  font-family: inherit;
}
.user-card__menu-item-btn:hover {
  background: var(--color-border-light);
}
.user-card__menu-item-btn--disabled,
.user-card__menu-item-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.user-card__menu-item-btn--disabled:hover,
.user-card__menu-item-btn:disabled:hover {
  background: none;
}

/* ════════════════════════════════════════════════════════════════
   SURVEY
   ════════════════════════════════════════════════════════════════ */

/* Completion screen */
.survey-complete__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--color-bg);
  gap: 36px;
  padding: 48px 32px;
}
@media (max-width: 479px) {
  .survey-complete__wrap { gap: 24px; padding: 32px 20px; }
}
.survey-complete__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.survey-complete__text { text-align: center; max-width: 520px; }
.survey-complete__title {
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--color-text-primary);
  margin-bottom: 10px;
  letter-spacing: -.3px;
}
@media (max-width: 479px) {
  .survey-complete__title { font-size: 1.27rem; }
}
.survey-complete__body {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
}
.survey-complete__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.survey-complete__hint {
  font-size: 0.87rem;
  color: var(--color-text-muted);
  margin-top: -8px;
}

/* Shared header/footer bars */
.survey__header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}
.survey__header-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 28px 16px;
}
.survey__header-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.survey__dim-label {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-bottom: 8px;
}
.survey__dim-info-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.survey__dim-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--dim-color, var(--color-accent));
}
.survey__optional-badge {
  font-size: 0.87rem;
  color: var(--color-text-muted);
  margin-left: 8px;
}
.survey__progress-bar {
  flex: 1;
  height: 4px;
  background: var(--color-border-light);
  border-radius: 4px;
  overflow: hidden;
}
.survey__progress-fill {
  height: 100%;
  width: var(--progress-pct);
  background: var(--color-accent);
  border-radius: 4px;
  transition: width .3s;
}
/* UNUSED
.survey__progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
} */
.survey__progress-pct {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.survey__scroll-area {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  align-self: center;
  padding: 20px 28px;
}
.survey__scroll-area--openq { padding: 32px 28px; }
@media (max-width: 479px) {
  .survey__scroll-area { padding: 14px 12px; }
  .survey__scroll-area--openq { padding: 20px 12px; }
}
.survey__dim-context {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--dim-color) 5%, transparent);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--dim-color) 13%, transparent);
  margin-bottom: 20px;
}
.survey__dim-hint {
  font-size: 0.87rem;
  color: var(--color-text-muted);
  margin-left: auto;
}
.survey__textarea-wrap {
  background: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  box-sizing: border-box;
  padding: 20px;
}
@media (max-width: 479px) {
  .survey__textarea-wrap { padding: 16px 14px; }
}
.survey__q-intro {
  font-size: 1.03rem;
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: 18px;
}
.survey__textarea-hint {
  font-size: 0.87rem;
  color: var(--color-text-muted);
  margin-top: 10px;
  line-height: 1.5;
}
.survey__footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}
.survey__footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.survey__footer-left {
  display: flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 479px) {
  .survey__footer-inner { padding: 10px 16px; }
  .survey__footer .btn:not(.btn--sm) { padding: 8px 18px; }
}
.survey__info-btn {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--color-text-muted);
  padding: 0 2px;
  line-height: 1;
  cursor: pointer;
}
.survey__meta-hint {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-left: auto;
  font-family: var(--font-mono);
}
.survey__scale-desc {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  font-family: var(--font-mono);
}
.survey__q-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 24px;
}
.survey__q-id {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.survey__q-text {
  font-size: 1.03rem;
  color: var(--color-text-primary);
  flex: 1;
  line-height: 1.5;
}
.survey__help-btn {
  background: none;
  border: none;
  font-size: 1rem;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--color-text-muted);
}
.survey__scale-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -2px;
}
.survey__scale-row { display: flex; align-items: center; padding: 2px; gap: 3px; }
@media (max-width: 479px) {
  .survey__scale-scroll { overflow: visible; margin: 0; }
  .survey__scale-row { gap: 6px; justify-content: space-between; padding: 6px 4px; }
}
.survey__q-card {
  margin-bottom: 10px;
  padding: 20px;
  background: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--q-border);
  transition: border-color .2s;
  box-sizing: border-box;
}
@media (max-width: 479px) {
  .survey__q-card { padding: 14px 12px; }
}
.survey__scale-circle {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  font-family: monospace;
  transition: all .12s;
  background: var(--color-border-light);
  color: var(--color-text-muted);
  border: 2px solid var(--color-border);
  transform: scale(1);
}
.survey__scale-circle--active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  transform: scale(1.12);
}
@media (max-width: 479px) {
  .survey__scale-circle { flex: 1; width: auto; height: auto; aspect-ratio: 1; max-width: 44px; font-size: 1.05rem; }
}
.survey__scale-label {
  font-size: 0.87rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding-right: 10px;
  font-family: var(--font-mono);
}
.survey__scale-label--right {
  padding-left: 10px;
  padding-right: 0;
}
.survey__steps-track {
  display: flex;
  gap: 3px;
}
.survey__step-dot {
  height: 3px;
  border-radius: 2px;
  transition: all .2s;
  flex: var(--step-flex);
  background: var(--step-bg);
}
.survey__dim-info-btn {
  background: none;
  border: none;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--dim-color) 60%, transparent);
  padding: 0 0 0 4px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.survey__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 1rem;
  background: var(--color-bg);
  color: var(--color-text-primary);
  display: block;
  min-height: 130px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
  outline: none;
}
@media (max-width: 479px) {
  .survey__textarea { min-height: 100px; }
}

/* ════════════════════════════════════════════════════════════════
   LEADER REPORT
   ════════════════════════════════════════════════════════════════ */

.lr__content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
  align-self: center;
  box-sizing: border-box;
}
.lr__ai-hint {
  padding: 10px;
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 13%, transparent);
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}
.lr__dim-block {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.lr__dim-block-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lr__dim-block-name { font-weight: 700; font-size: 1rem; color: var(--dim-color); }
.lr__diag-text {
  font-size: 1.03rem;
  color: var(--color-text-primary);
  line-height: 1.75;
  margin-bottom: 6px;
  font-weight: 500;
}
.lr__interp-text {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: 10px;
}
.lr__subdims-row { display: flex; gap: 6px; flex-wrap: wrap; }
.lr__subdim-chip {
  font-size: 1rem;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.lr__subdim-chip--warn {
  background: var(--color-warn-bg);
  color: var(--color-warn);
  border-color: var(--color-warn-border);
}
.lr__crit-section {
  margin-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--dim-color) 13%, transparent);
  padding-top: 15px;
}
.lr__crit-label {
  font-size: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-bottom: 10px;
  letter-spacing: .8px;
}
.lr__crit-sn { margin-bottom: 8px; }
.lr__crit-sn-header {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.lr__crit-score { font-family: var(--font-mono); color: var(--color-text-muted); font-size: 1rem; }
.lr__crit-q-row {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-light);
  align-items: flex-start;
}
.lr__q-id { font-size: 1rem; color: var(--color-text-muted); font-family: var(--font-mono); flex: 0 0 auto; }
.lr__q-text { font-size: 1rem; color: var(--color-text-secondary); flex: 1 1 0%; min-width: 0; line-height: 1.4; }
.lr__crit-q-value { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--color-amber); flex: 0 0 auto; }
.lr__q-score {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-warn);
  flex: 0 0 auto;
}
.lr__hidden-block {
  margin-top: 4px;
  padding: 14px;
  background: var(--color-amber-bg);
  border-radius: 8px;
  border: 1px solid var(--color-amber-border);
}
.lr__hidden-text {
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 10px;
}
.lr__hidden-dim { margin-bottom: 10px; }
.lr__hidden-dim-header { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.lr__hidden-dim-name { font-weight: 600; font-size: 1rem; color: var(--dim-color); }
.lr__mv-block {
  padding: 12px;
  background: var(--color-bg);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  margin-bottom: var(--card-gap);
}
.lr__mv-block:last-child { margin-bottom: 0; }
.lr__mv-header {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 5px;
  font-family: var(--font-mono);
}
.lr__mv-text { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.65; }
.lr__mv-text + .lr__mv-text { margin-top: 8px; }
.lr__mv-note {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 3px solid var(--color-border);
  font-size: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}
.lr__dim-boxes-row { display: flex; gap: 10px; margin-bottom: 18px; }
.lr__dim-box-header { display: flex; align-items: center; gap: 8px; }
.lr__dim-label-sm { font-size: 0.88rem; font-weight: 600; color: var(--color-text-secondary); line-height: 1.2; }

.lr__crit-banner {
  padding: 10px;
  background: var(--color-warn-bg);
  border-radius: 8px;
  border: 1px solid var(--color-warn-border);
  font-size: 1rem;
  color: var(--color-warn);
}
.lr__warn-summary {
  padding: 10px;
  background: var(--color-amber-bg);
  border-radius: 8px;
  border: 1px solid var(--color-amber-border);
  font-size: 1rem;
  color: var(--color-text-secondary);
}
.lr__ok-summary { font-size: 1rem; color: var(--color-ok); }
.lr__expand-toggle {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.lr__expand-content { display: none; margin-top: 18px; }
.lr__expand-content--open { display: block; }
@media print {
  .lr__expand-content { display: block !important; }
  .lr__expand-toggle  { display: none !important; }
}
.lr__collab-dim-block {
  margin-bottom: 14px;
  padding: 14px;
  background: var(--color-bg);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

/* ════════════════════════════════════════════════════════════════
   BLAMELESS RETRO
   ════════════════════════════════════════════════════════════════ */

.retro__nav-row { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; }
.retro__sublabel { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); font-family: var(--font-sans); letter-spacing: 0.06em; margin-bottom: 5px; }
.retro__title { font-size: 1.4rem; line-height: 1.3; }
.retro__title-main { font-weight: 700; color: var(--color-text-primary); }
.retro__title-meta { font-weight: 400; color: var(--color-text-muted); }
@media (max-width: 640px) {
  .retro__title { font-size: 1.1rem; }
}
/* Lo spazio verticale verso i blocchi successivi lo dà .lr__content (gap
   sul flex-column che li contiene) — niente margin-bottom qui, altrimenti
   si somma al gap del genitore e la spaziatura raddoppia.
   .retro__stack-gap resta in JS solo come hook per lo scroll (aiCardRef),
   non ha più bisogno di stile proprio. */
.retro__main-grid { display: flex; gap: var(--card-gap); flex-wrap: wrap; }
.retro__signals-col { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--card-gap); }
.retro__signals-col .card { flex: 1; }
.retro__signal-block { margin-bottom: 18px; }
.retro__signal-block--last { margin-bottom: 0; }
.retro__signal-dim { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.retro__signal-dim-label { font-weight: 600; font-size: 0.9rem; color: var(--dim-color); }
.retro__signal-index { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-muted); }
.retro__signal-row { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0 5px 26px; border-bottom: 1px solid var(--color-border-light); }
.retro__signal-row--last { border-bottom: none; }
.retro__signal-body { flex: 1; min-width: 0; }
.retro__signal-text { font-size: 0.88rem; color: var(--color-text-secondary); line-height: 1.4; margin-bottom: 1px; }
.retro__signal-sd { font-size: 0.78rem; color: var(--color-text-muted); }
.retro__signal-score--critical { font-family: var(--font-mono); font-weight: 700; color: #C0392B; font-size: 0.85rem; white-space: nowrap; }
.retro__signal-score { font-family: var(--font-mono); font-weight: 700; color: var(--color-text-muted); font-size: 0.85rem; white-space: nowrap; }
.retro__expand-btn { background: none; border: none; cursor: pointer; font-size: 0.8rem; color: var(--color-text-muted); padding: 4px 0 4px 26px; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.dash-panel__more-links-row { display: flex; justify-content: flex-end; align-items: center; gap: 20px; padding-top: 22px; }
.dash-panel__more-links-row .dash-panel__more-link { display: inline-flex; align-items: center; gap: 6px; width: auto; padding-top: 0; }
.retro__no-theme { font-size: 0.85rem; color: var(--color-text-muted); padding-left: 26px; font-style: italic; }
.retro__version-note { display: flex; align-items: flex-start; gap: 6px; font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.45; margin-bottom: 12px; }
.retro__ai-text { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.8; margin: 0; white-space: pre-wrap; }
.retro__ai-loading { font-style: italic; font-size: 1rem; margin: 0; animation: remap-loading-colors 5s linear infinite; }
.retro__ai-placeholder { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--color-text-muted); font-size: 1rem; }
.retro__ai-header { display: flex; align-items: baseline; gap: 4px; margin-bottom: 18px; }
.retro__ai-header-btn { margin-left: auto; font-size: 0.8rem; }
@media (max-width: 640px) {
  .retro__ai-header { flex-direction: column; align-items: flex-start; gap: 0; }
  .retro__ai-header-btn { margin-left: 0; }
}

/* ════════════════════════════════════════════════════════════════
   SUB TEAM CARD
   ════════════════════════════════════════════════════════════════ */

.stc__header { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.stc__info { flex: 1; min-width: 0; }
.stc__meta { font-size: 0.82rem; color: var(--color-text-muted); font-family: var(--font-mono); margin-bottom: 3px; }
.stc__meta-row { font-size: 0.8rem; color: var(--color-text-muted); font-family: var(--font-mono); margin-top: 2px; }
.stc__crit-badge { display: inline-flex; background: var(--color-warn-bg); border: 1px solid var(--color-warn-border); border-radius: 6px; padding: 2px 8px; font-size: 0.78rem; color: var(--color-warn); font-family: var(--font-mono); font-weight: 600; }
.stc__crit-badge--sm { margin-left: 10px; background: var(--color-warn-bg); border: 1px solid var(--color-warn-border); border-radius: 4px; padding: 1px 6px; font-size: 0.78rem; color: var(--color-warn); font-family: var(--font-mono); font-weight: 600; }
.stc__body { margin-top: 24px; }
.stc__grid { display: flex; gap: var(--card-gap); flex-wrap: wrap; align-items: flex-start; }
.stc__col-radar { flex: 1 1 260px; min-width: 0; }
.stc__radar-wrap { height: 320px; display: flex; align-items: center; justify-content: center; margin-top: 64px; }
.stc__col-summary { flex: 1 1 200px; min-width: 0; }
.stc__trend { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--color-border-light); }
.stc__no-data { color: var(--color-text-muted); font-size: 0.9rem; padding: 8px 0; }

/* ════════════════════════════════════════════════════════════════
   COLLAB PREP SECTION
   ════════════════════════════════════════════════════════════════ */

.cps__credit-box { padding: 10px 14px; background: var(--color-amber-bg); border-radius: 6px; border: 1px solid var(--color-amber-border); font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.6; }
.cps__regen-btn { background: none; border: none; padding: 0; font-size: 0.78rem; color: var(--color-accent); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.cps__no-api { margin-top: 30px; font-size: 0.87rem; color: var(--color-text-muted); }
.cps__cappello { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.65; margin: 0 0 14px; }
.cps__premessa { font-size: 0.92rem; color: var(--color-text-muted); line-height: 1.65; font-style: italic; margin: 0 0 18px; padding-left: 10px; border-left: 3px solid var(--color-border); }
.cps__q { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--color-border-light); }
.cps__q:last-of-type { border-bottom: none; }
.cps__q-num { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; color: var(--color-text-muted); flex-shrink: 0; padding-top: 3px; min-width: 18px; }
.cps__q-text { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.6; }
.cps__scheda { margin-top: 18px; padding: 10px 14px; background: var(--color-amber-bg); border-radius: 6px; border-left: 3px solid var(--color-amber-border); }
.cps__scheda-label { display: block; font-size: 0.82rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 4px; }
.cps__scheda-text { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0; }
.cps__privacy { margin-top: 16px; font-size: 0.87rem; color: var(--color-text-muted); line-height: 1.6; }

/* ════════════════════════════════════════════════════════════════
   LEADER GUIDE SECTION
   ════════════════════════════════════════════════════════════════ */

.lgs__ai-block {
  padding: 12px;
  background: var(--color-bg);
  border-radius: 8px;
  border: 1px solid var(--color-border);
  margin-bottom: var(--card-gap);
}
/* S42.1: copia di .retro__ai-text, che resta a BlamelessRetro e al secondo
   componente che la usa. Separata perché la guida leader ha un intervento
   tipografico aperto (S33.9c) e non deve trascinarci dentro le retrospettive.
   Finché le proprietà sono identiche la resa non cambia: se diverge, la
   divergenza è voluta e va scritta qui. */
.lgs__ai-text { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.8; margin: 0; white-space: pre-wrap; }
/* Guida AI del leader: ogni etichetta (intestazione dimensione, Meccanismo,
   Postura, Cosa chiedere per approfondire, Trappola, Lettura incrociata,
   Segnali a livello di singola domanda) è il proprio paragrafo — l'etichetta
   resta uno <strong> inline dentro, il div è quello che dà lo stacco. La
   spaziatura non dipende dagli a capo prodotti dall'AI (mai stati
   affidabili), solo da questo margin-top. */
.lgs__ai-para { margin-top: 0.8em; }
.lgs__ai-para:first-child { margin-top: 0; }
/* Le intestazioni di sezione (dimensione, Lettura incrociata, Segnali) hanno
   uno stacco doppio rispetto alle altre — tranne la primissima della guida,
   già coperta da :first-child qui sopra. */
.lgs__ai-para--section:not(:first-child) { margin-top: 1.8em; }
.lgs__loading-header { font-size: 1rem; font-weight: 600; color: var(--color-text-muted); font-family: var(--font-mono); margin-bottom: 12px; }
.lgs__ai-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lgs__ai-label { font-size: 1rem; font-weight: 600; color: var(--color-text-muted); font-family: var(--font-mono); }
.lgs__dim-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.lgs__part { margin-bottom: 10px; }
.lgs__part-label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 3px;
}
.lgs__dim-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.lgs__dim-group + .lgs__dim-group { margin-top: 16px; }
.lgs__block-text { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.6; }
.lgs__scavo-row { display: flex; gap: 8px; padding: 3px 0; align-items: flex-start; }
.lgs__scavo-num { font-size: 1rem; color: var(--color-text-muted); font-family: var(--font-mono); flex-shrink: 0; }
.lgs__scavo-text { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.6; }
.lgs__trappola { margin-top: 8px; padding: 7px 10px; border-radius: 6px; background: #FEF9EE; border-left: 3px solid #FDE68A; }
.lgs__trappola-label { font-size: 0.92rem; font-weight: 700; color: var(--color-text-primary); display: block; margin-bottom: 3px; }
.lgs__trappola-text { font-size: 0.92rem; color: var(--color-text-secondary); line-height: 1.6; font-style: italic; }
/* Inquadramento della guida (S39.1) — sostituisce .lgs__secondary, che rendeva
   di nuovo le dimensioni già elencate dal box SEGNALI SU ALTRE DIMENSIONI.
   Stesse metriche del blocco precedente (separatore superiore, corpo muto):
   è una nota di lettura, non un blocco diagnostico, e non deve competere con
   il testo della guida. Nel ramo AI sta FUORI da .lgs__ai-text (S42.1), quindi
   non eredita white-space: pre-wrap. */
.lgs__scope { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.lgs__scope-text { font-size: 0.87rem; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 6px; }
.lgs__scope-text:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════
   ANON SURVEY
   ════════════════════════════════════════════════════════════════ */

.anon__header { border-bottom: 1px solid var(--color-border); background: var(--color-surface); flex-shrink: 0; z-index: 150; }
.anon__header-inner { max-width: 1600px; margin: 0 auto; padding: 0 28px; height: 56px; display: flex; align-items: center; gap: 10px; }
.anon__header-name { text-align: right; margin-right: 10px; }
.anon__header-user { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); }
.anon__header-role { font-size: 0.82rem; color: var(--color-text-muted); }
.anon__screen { height: 100vh; display: flex; flex-direction: column; }
.anon__screen--overflow { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.anon__intro-scroll { flex: 1; overflow-y: auto; background: #F3EDE3; }
.anon__intro-wrap { max-width: 660px; margin: 0 auto; padding: 48px 32px; }
.anon__intro-card { background: #fff; border: 1px solid var(--color-border); border-radius: 18px; padding: 44px 48px; box-shadow: 0 2px 16px rgba(0,0,0,.06); }
@media (max-width: 599px) {
  .anon__intro-wrap { padding: 24px 16px; }
  .anon__intro-card { padding: 24px 20px; }
}
.anon__loading-text { color: var(--color-text-muted); font-size: 0.9rem; }
.anon__intro-title { font-size: 1.6rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.3; font-family: Times, 'Times New Roman', Georgia, serif; margin-bottom: 20px; margin-top: 4px; }
.anon__leader-banner { background: #E6F8F5; border: 1px solid #9DE0D8; border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; font-size: 0.95rem; color: #0A7B6E; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.anon__warning-box { background: #FEF9E7; border: 1px solid #F6C94E; border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.anon__warning-text { font-size: 0.85rem; color: #92600A; font-weight: 600; line-height: 1.5; }
.anon__privacy-box { background: #EAF0FF; border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; }
.anon__privacy-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.anon__privacy-title { font-weight: 700; color: #3B5FC0; font-size: 0.95rem; }
.anon__privacy-list { font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.6; display: flex; flex-direction: column; gap: 6px; }
.anon__check-row { display: flex; align-items: center; gap: 10px; }
.anon__section-title { font-size: 1.3rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 20px; }
.anon__body-text { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.75; margin-bottom: 14px; }
.anon__body-text--italic { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.75; margin-bottom: 32px; font-style: italic; }
.anon__cta-btn { padding: 13px 32px; border-radius: 10px; border: none; background: var(--color-accent); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: inherit; }
.anon__survey-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.anon__report-scroll { flex: 1; overflow-y: auto; }
.anon__privacy-banner { background: #FEF9E7; border-bottom: 1px solid #F6C94E; flex-shrink: 0; }
.anon__privacy-banner-inner { max-width: 1600px; margin: 0 auto; padding: 8px 28px; display: flex; align-items: center; gap: 10px; font-size: 0.83rem; color: #92600A; }
.anon__banner-link { margin-left: auto; font-size: 0.8rem; color: #B8860B; }
.anon__empty-state { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.anon__collab-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ════════════════════════════════════════════════════════════════
   LEADER DASH
   ════════════════════════════════════════════════════════════════ */

.ld__tab-badge-wrap { display: inline-flex; align-items: center; gap: 6px; }
.ld__new-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 0.7rem; font-weight: 700; line-height: 1; }
.ld__view-all-btn { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--color-accent); font-weight: 600; padding: 10px 0 0; display: block; width: 100%; text-align: right; }
.ld__anon-name { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 600; color: var(--color-text-muted); }
.ld__anon-sub { font-size: 0.82rem; color: var(--color-text-muted); }
.ld__trend-hint { padding: 16px 0 8px; color: var(--color-text-muted); font-size: 1rem; font-family: var(--font-mono); }
.ld__subteams-col { display: flex; flex-direction: column; gap: var(--list-gap); }

/* ════════════════════════════════════════════════════════════════
   PERIOD PICKER (shared LeaderPeriodPicker + PeriodPicker)
   ════════════════════════════════════════════════════════════════ */

.period-picker__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 500; display: flex; align-items: center; justify-content: center; }
.period-picker__modal { background: var(--color-card); border-radius: 16px; padding: 28px; width: 380px; box-shadow: 0 8px 32px rgba(0,0,0,.18); max-height: 80vh; overflow-y: auto; }
.period-picker__title { font-weight: 700; font-size: 1rem; color: var(--color-text-primary); margin-bottom: 16px; font-family: var(--font-mono); }
.period-picker__sublabel { font-size: 0.8rem; color: var(--color-text-muted); font-family: var(--font-mono); margin-bottom: 8px; }
.period-picker__current-tag { font-size: 0.75rem; color: var(--color-accent); font-family: var(--font-mono); }
.period-picker__show-all { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 0.85rem; padding: 4px 0; margin-bottom: 6px; }
.period-picker__divider { border-top: 1px solid var(--color-border); margin: 14px 0; }
.period-picker__loading { color: var(--color-text-muted); font-size: 0.9rem; }
.period-picker__pending-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.period-picker__delete-bg { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: #C0392B12; border: 1px solid #C0392B50; }
.period-picker__delete-text { color: #C0392B; font-size: 0.9rem; }
.period-picker__countdown { color: #C0392B; font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; }
.period-picker__cancel { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 0.85rem; text-decoration: underline; padding: 0; flex-shrink: 0; }
.period-picker__survey-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.period-picker__del-btn { padding: 6px; border-radius: 8px; border: 1px solid var(--color-border); background: none; color: var(--color-text-muted); cursor: pointer; display: flex; align-items: center; flex-shrink: 0; }
.period-picker__selects-row { display: flex; gap: 8px; margin-bottom: 12px; }
.period-picker__select { flex: 1; border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; font-size: 0.95rem; font-family: inherit; }
.period-picker__actions-row { display: flex; gap: 8px; justify-content: flex-end; }
.od__fill-selects-row { display: flex; gap: 8px; margin-bottom: 10px; max-width: 220px; }

/* ════════════════════════════════════════════════════════════════
   ACTIONS PANEL
   ════════════════════════════════════════════════════════════════ */

.ap__loading { color: var(--color-text-muted); font-size: 1rem; margin: 0 0 16px; }
.ap__empty { color: var(--color-text-muted); font-size: 1rem; font-style: italic; margin: 0 0 16px; }
.ap__list { margin-bottom: 16px; }
.ap__row-wrap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ap__item-inner { display: flex; align-items: center; gap: 10px; }
.ap__item { padding: 8px 0; border-bottom: 1px solid var(--color-border-light); border-top: 2px solid transparent; transition: border-color 0.1s; }
.ap__item:last-child { border-bottom: none; }
.ap__item--drag-over { border-top-color: var(--color-accent); }
.ap__edit-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; }
.ap__drag-handle { cursor: grab; flex-shrink: 0; }
.ap__toggle { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-border); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ap__toggle--done { border-color: #38C0A7; background: #38C0A7; }
.ap__status-icon { flex-shrink: 0; }
.ap__item-title { flex: 1; font-size: 0.9rem; color: var(--color-text-primary); line-height: 1.4; }
.ap__item-title--done { color: var(--color-text-muted); text-decoration: line-through; }
.ap__dim-select { font-size: 0.85rem; border: 1px solid var(--color-border); border-radius: 6px; padding: 5px 8px; background: var(--color-surface); color: var(--color-text-secondary); }
.ap__icon-btn { background: none; border: none; cursor: pointer; padding: 2px 4px; color: var(--color-text-muted); display: flex; align-items: center; }
.ap__input--flex { flex: 1; min-width: 160px; }
.ap__input--grow { flex: 1; min-width: 200px; }
.ap__period { font-size: 0.78rem; color: var(--color-text-muted); font-family: var(--font-mono); white-space: nowrap; }
.ap__period-group { }
.ap__period-heading { font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 0 4px; border-top: 1px solid var(--color-border-light); }
.ap__period-group:first-child > .ap__period-heading { padding-top: 0; border-top: none; }
.ap__period-heading--toggle { display: flex; align-items: center; gap: 2px; width: 100%; background: none; border: none; border-top: 1px solid var(--color-border-light); cursor: pointer; text-align: left; }
.ap__period-group:first-child > .ap__period-heading--toggle { border-top: none; }
.ap__period-heading--toggle-label { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.ap__period-heading--toggle:hover .ap__period-heading--toggle-label { color: var(--color-text-secondary); }
.ap__note-collab-wrap { margin: 4px 0 0 28px; }
.ap__note-leader-text { margin: 0 0 4px; font-size: 0.8rem; color: var(--color-text-muted); font-style: italic; line-height: 1.5; display: flex; align-items: flex-start; gap: 4px; }
.ap__note-leader-text--flat { margin: 0; }
.ap__note-leader-wrap { margin: 4px 0 0 56px; }
.ap__note-text { margin: 0 0 3px; font-size: 0.82rem; color: var(--color-text-muted); font-style: italic; line-height: 1.5; }
.ap__note-text--indented { margin-top: 4px; }
.ap__note-text--flat { margin: 0; }
.ap__add-form { display: flex; flex-direction: column; gap: 6px; }
.ap__input { font-size: 0.9rem; border: 1px solid var(--color-border); border-radius: 6px; padding: 6px 10px; background: var(--color-surface); color: var(--color-text-primary); outline: none; }
.ap__input--full { width: 100%; box-sizing: border-box; font-size: 0.85rem; }
.ap__textarea { resize: none; line-height: 1.4; vertical-align: top; }
.ap__edit-footer { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.ap__add-cta { margin-top: 12px; }
.ap__show-archived-btn { display: block; width: 100%; text-align: right; margin-top: 10px; background: none; border: none; padding: 0; font-size: 0.8rem; color: var(--color-text-muted); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.ap__form-stack { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ap__form-label { font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.ap__form-label:not(:first-child) { margin-top: 16px; }
.ap__form-field { width: 100%; box-sizing: border-box; }
.ap__item-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ap__status-row { display: flex; align-items: center; gap: 6px; }
.ap__status-wrap { position: relative; }
.ap__status-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 4px; min-width: 168px; }
.ap__title-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.ap__note-block { display: flex; flex-direction: column; gap: 3px; }
.ap__item-actions { display: flex; align-items: flex-start; gap: 0; flex-shrink: 0; }
.ap__status-pill { display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.05); border-radius: 6px; padding: 4px 8px; line-height: 1; }
.ap__status-pill--btn { border: none; cursor: pointer; }
.ap__status-pill--btn.ap__status-pill--readonly { cursor: default; }
.ap__status-label { font-size: 11px; color: var(--color-text-secondary); line-height: 1; white-space: nowrap; }
.ap__status-option { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; background: transparent; border: none; border-radius: 5px; cursor: pointer; text-align: left; }
.ap__status-option--active { background: rgba(0,0,0,.05); }
.ap__status-option-label { font-size: 12px; color: var(--color-text-primary); }
.ap__owner-tag { font-size: 10px; color: var(--color-text-muted); flex-shrink: 0; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.ap__form-field--half { width: 50%; }
.modal-box .ap__edit-footer { margin-top: 24px; }
@media (max-width: 600px) { .ap__form-field--half { width: 100%; } }

/* ════════════════════════════════════════════════════════════════
   ADMIN PANEL
   ════════════════════════════════════════════════════════════════ */

/* frame */
.adm__root { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.adm__header { border-bottom: 1px solid var(--color-border); background: var(--color-surface); flex-shrink: 0; }
.adm__header-inner { max-width: 1600px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; gap: 12px; }
.adm__title { font-weight: 700; font-size: 1rem; color: var(--color-text-primary); }
.adm__actions-bar { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.adm__body { flex: 1; overflow-y: auto; min-height: 0; padding: 24px 28px; max-width: 1600px; margin: 0 auto; width: 100%; box-sizing: border-box; }
/* tab badge */
.adm__badge-wrap { display: inline-flex; align-items: center; gap: 6px; }
.adm__count-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--color-amber); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 0.7rem; font-weight: 700; line-height: 1; }
/* ok bar */
.adm__ok-bar { padding: 10px 14px; border-radius: 8px; background: var(--color-ok-bg); border: 1px solid var(--color-ok-border); margin-bottom: 16px; color: var(--color-ok); font-size: 0.9rem; }
/* invite modal */
.adm__overlay-invite { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; }
.adm__invite-modal { background: #fff; border-radius: 14px; padding: 28px; max-width: 520px; width: 100%; box-shadow: 0 8px 40px rgba(0,0,0,.18); border: 1px solid var(--color-border); max-height: 90vh; overflow-y: auto; }
.adm__modal-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.adm__modal-title { font-weight: 700; font-size: 1rem; color: var(--color-text-primary); flex: 1; }
.adm__close-btn { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 1.2rem; line-height: 1; }
.adm__section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 12px; }
.adm__section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.adm__section-head-title { font-weight: 700; font-size: 0.9rem; color: var(--color-text-primary); }
.adm__hint { font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 10px; margin-top: 0; }
.adm__sub-name { font-size: 0.83rem; color: var(--color-text-secondary); margin-bottom: 4px; }
.adm__sub-name-highlight { color: #9B59F5; }
.adm__sent-badge { font-size: 0.66rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; font-family: var(--font-mono); letter-spacing: .03em; }
.adm__sent-badge--toolkit { background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0; }
.adm__sent-badge--platform { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.adm__link-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.adm__link-input { flex: 1; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--color-border); font-size: 0.82rem; font-family: monospace; background: #F7F5FF; color: var(--color-text-secondary); }
.adm__warning-inline { background: #FEF3CD; border: 1px solid #F6C94E; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; font-size: 0.82rem; color: #92600A; line-height: 1.7; }
/* confirm modal */
.adm__confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.adm__confirm-modal { background: var(--color-surface); border-radius: 14px; padding: 28px 28px 24px; max-width: 440px; width: 100%; box-shadow: 0 8px 40px rgba(0,0,0,.2); border: 1px solid var(--color-border); }
.adm__confirm-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.adm__danger-title { font-weight: 700; font-size: 1rem; color: #E8453A; }
.adm__confirm-text { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 8px; }
.adm__danger-name { background: #FEE; border: 1px solid #F5C6C6; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-weight: 700; font-size: 1rem; color: #E8453A; }
.adm__confirm-sub { font-size: 0.87rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 20px; }
.adm__action-row { display: flex; gap: 10px; justify-content: flex-end; }
.adm__danger-btn { padding: 9px 20px; border-radius: 8px; border: none; background: #E8453A; color: #fff; font-weight: 700; font-size: 0.9rem; cursor: pointer; font-family: inherit; }
/* org panel */
.adm__create-row { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.adm__acc-input { flex: 1; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-accent); font-size: 0.9rem; font-family: inherit; color: var(--color-text-primary); }
.adm__empty { color: var(--color-text-muted); font-size: 0.9rem; padding: 16px 0; }
.adm__empty--hero { text-align: center; padding: 48px 0; }
.adm__org-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 20px; margin-bottom: var(--list-gap); display: flex; gap: 20px; align-items: flex-start; }
.adm__col-flex { flex: 1; min-width: 0; }
.adm__edit-row { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.adm__edit-input { flex: 1; font-size: 1rem; font-weight: 700; color: var(--color-text-primary); border: 1px solid var(--color-accent); border-radius: 6px; padding: 4px 8px; font-family: inherit; }
.adm__name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.adm__org-name { font-weight: 700; color: var(--color-text-primary); font-size: 1rem; }
.adm__leader-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 0.88rem; color: var(--color-text-secondary); }
.adm__italic-muted { color: var(--color-text-muted); font-style: italic; }
.adm__inline-flex6 { display: inline-flex; gap: 6px; align-items: center; }
.adm__small-select { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--color-border); font-size: 0.85rem; font-family: inherit; background: var(--color-surface); color: var(--color-text-primary); }
.adm__cancel-btn { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 0.9rem; }
.adm__acc-btn { background: none; border: none; color: var(--color-accent); cursor: pointer; font-size: 0.8rem; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
.adm__stats-row { display: flex; gap: 16px; font-size: 0.8rem; color: var(--color-text-muted); }
.adm__stat-item { display: inline-flex; align-items: center; gap: 4px; }
.adm__col-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.adm__dropdown { position: absolute; right: 0; top: calc(100% + 4px); z-index: 200; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 200px; overflow: hidden; }
.adm__menu-btn { display: block; width: 100%; text-align: left; padding: 10px 14px; background: none; border: none; cursor: pointer; font-size: 0.87rem; color: var(--color-text-primary); font-family: inherit; border-bottom: 1px solid var(--color-border); }
.adm__menu-btn--amber { color: var(--color-amber); }
.adm__menu-btn--danger { color: #E8453A; font-weight: 600; border-bottom: none; }
/* org tree */
.adm__member-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--color-surface); margin-bottom: 4px; }
.adm__member-name { font-size: 0.9rem; color: var(--color-text-secondary); flex: 1; }
.adm__leader-tag { font-size: 0.75rem; color: var(--color-accent); font-family: monospace; margin-left: 6px; }
.adm__surveys-text { font-size: 0.78rem; color: var(--color-text-muted); font-family: monospace; }
.adm__badge3 { display: inline-flex; align-items: center; gap: 3px; }
.adm__invite-link { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; color: var(--color-accent); cursor: pointer; font-weight: 600; }
.adm__impersonate { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; color: #92600A; cursor: pointer; font-weight: 600; background: #FEF3CD; padding: 1px 6px; border-radius: 4px; }
.adm__impersonate--ml { margin-left: 4px; }
.adm__surveys-auto { font-size: 0.72rem; color: var(--color-text-muted); font-family: monospace; margin-left: auto; }
.adm__unassigned-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.adm__unassigned-label { font-weight: 700; color: var(--color-amber); font-size: 0.88rem; }
/* filter bar */
.adm__unassigned-alert { padding: 12px 16px; border-radius: 10px; background: var(--color-amber-bg); border: 1px solid var(--color-amber-border); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.adm__unassigned-text { font-size: 0.9rem; color: var(--color-amber); font-weight: 600; }
.adm__filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.adm__search-wrap { position: relative; flex: 1 1 180px; }
.adm__search-input { width: 100%; box-sizing: border-box; padding-left: 32px; padding-right: 10px; padding-top: 7px; padding-bottom: 7px; border-radius: 8px; border: 1px solid var(--color-border); font-size: 0.87rem; font-family: inherit; background: var(--color-surface); color: var(--color-text-primary); }
.adm__filter-select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--color-border); font-size: 0.87rem; font-family: inherit; background: var(--color-surface); color: var(--color-text-primary); cursor: pointer; }
.adm__reset-btn { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--color-border); font-size: 0.87rem; font-family: inherit; background: none; color: var(--color-text-muted); cursor: pointer; }
/* anon tab */
.adm__anon-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 18px; margin-bottom: var(--list-gap); display: flex; align-items: center; gap: 12px; }
.adm__anon-name { font-weight: 700; color: var(--color-text-primary); font-size: 0.9rem; margin-bottom: 3px; }
.adm__anon-meta { font-size: 0.8rem; color: var(--color-text-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.adm__wl-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border-light); }
.adm__wl-row:last-child { border-bottom: none; padding-bottom: 0; }
.adm__wl-row:first-child { padding-top: 0; }
.adm__wl-sent { font-size: 0.75rem; color: var(--color-ok); margin-top: 4px; }
.adm__tab-notif { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--color-accent); color: #fff; font-size: 0.65rem; font-weight: 700; margin-left: 5px; vertical-align: middle; }
/* whitelist tab */
.adm__wl-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.adm__wl-label { font-size: 0.87rem; color: var(--color-text-secondary); font-weight: 600; }
.adm__wl-select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--color-border); font-size: 0.87rem; font-family: inherit; background: var(--color-surface); color: var(--color-text-primary); }
.adm__org-header { font-size: 0.88rem; color: var(--color-text-secondary); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.adm__body-para { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 8px; }
.adm__body-para--14 { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 14px; }
.adm__body-para--16 { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 16px; }
/* UNUSED .adm__body-para--20 { font-size: 0.87rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 20px; } */
.adm__textarea { width: 100%; min-height: 180px; border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; font-family: monospace; line-height: 1.8; resize: vertical; box-sizing: border-box; }
.adm__save-row { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.adm__email-count { font-size: 0.87rem; color: var(--color-text-muted); }
.adm__open-access { font-size: 0.87rem; color: var(--color-amber); }
/* orgs tab */
.adm__back-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
/* UNUSED .adm__section-name { font-size: 0.9rem; color: var(--color-text-secondary); flex: 1; } */

/* ── misc shared ─────────────────────────────────── */
.chart--overflow-visible { overflow: visible; }
.unread-badge { display: inline-flex; align-items: center; justify-content: center; background: #E05555; color: #fff; border-radius: 9px; min-width: 17px; height: 17px; font-size: 0.68rem; font-weight: 700; margin-left: 6px; padding: 0 4px; vertical-align: middle; position: relative; top: -1px; }
.survey__autosave-hint { font-size: 0.78rem; color: var(--color-text-muted); text-align: center; margin: 0 0 8px; padding: 0 28px; }
.link-btn { background: none; border: none; color: var(--color-accent); font-size: 0.87rem; cursor: pointer; padding: 0 0 0 4px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-accent) 50%, transparent); }
.link-btn--danger { color: var(--color-warn); text-decoration-color: color-mix(in srgb, var(--color-warn) 50%, transparent); }
.link-btn:disabled { opacity: .5; cursor: default; }
/* info tooltip */
.info-tooltip__wrap { position: relative; display: inline-flex; align-items: center; margin-left: 4px; }
.info-tooltip__trigger { cursor: help; color: var(--color-text-muted); font-size: 0.82rem; font-weight: 700; font-family: sans-serif; user-select: none; line-height: 1; }
.info-tooltip__popup {
  position: fixed;
  top: var(--tip-top);
  bottom: var(--tip-bottom);
  left: var(--tip-left);
  right: var(--tip-right);
  transform: var(--tip-transform);
  width: var(--tip-width);
  background: var(--color-text-primary);
  color: var(--color-card);
  font-size: 0.78rem;
  line-height: 1.6;
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  font-family: inherit;
  font-weight: 400;
  word-break: normal;
  white-space: normal;
}
/* login profile modal */
.login-profile__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 500; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 16px 0; }
.login-profile__modal { background: var(--color-card); border-radius: 16px; padding: 32px; width: 400px; max-width: calc(100vw - 32px); box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.login-profile__title { font-weight: 700; font-size: 1.1rem; color: var(--color-text-primary); margin-bottom: 20px; font-family: var(--font-mono); }
.login-profile__label { font-size: 0.8rem; color: var(--color-text-muted); font-family: var(--font-mono); margin-bottom: 4px; }
.login-profile__label--6 { font-size: 0.8rem; color: var(--color-text-muted); font-family: var(--font-mono); margin-bottom: 6px; }
.login-profile__input { width: 100%; border: 1px solid var(--color-border); border-radius: 8px; padding: 9px 12px; font-size: 1rem; font-family: inherit; outline: none; box-sizing: border-box; }
.login-profile__key-input { width: 100%; border: 1px solid var(--input-border, var(--color-border)); border-radius: 8px; padding: 9px 12px; font-size: 0.9rem; font-family: var(--font-mono); outline: none; box-sizing: border-box; background: var(--color-card); }
.login-profile__key-input:disabled { opacity: .6; cursor: default; }
.login-profile__err { color: var(--color-warn); font-size: 0.87rem; margin-top: 6px; }
.login-profile__divider { margin: 24px 0 0; border-top: 1px solid var(--color-border); padding-top: 20px; }
.login-profile__meta { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 10px; line-height: 1.55; }
.login-profile__loading { font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; }
.login-profile__key-err { color: var(--color-warn); font-size: 0.8rem; margin-top: 4px; }
.login-profile__key-status { font-size: 0.85rem; color: var(--color-text-secondary); font-style: italic; padding: 9px 0; }
.login-profile__key-note { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 6px; }
.login-profile__key-actions { display: flex; gap: 8px; margin-top: 8px; }
.login-profile__actions { display: flex; gap: 8px; margin-top: 24px; justify-content: flex-end; }
/* resume modal content */
.resume-modal__header-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.resume-modal__title { font-weight: 700; font-size: 1.07rem; color: var(--color-text-primary); }
.resume-modal__body { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 20px; }
.resume-modal__warning { background: var(--color-amber-bg); border-left: 3px solid var(--color-amber-border); border-radius: 4px; padding: 10px 14px; font-size: .92rem; color: var(--color-text-secondary); line-height: 1.55; margin: -8px 0 20px; }
.resume-modal__actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.resume-modal__cancel { background: none; border: none; padding: 0; font-size: 0.9rem; color: var(--color-text-muted); cursor: pointer; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* app-level */
.app__debug-bar { background: #FEF3CD; border-bottom: 1px solid #F6C94E; padding: 8px 24px; display: flex; align-items: center; gap: 12px; font-size: 0.84rem; color: #92600A; flex-shrink: 0; z-index: 10; }
.app__debug-bar__text { flex: 1; min-width: 0; }
.app__debug-bar__role { color: #B8860B; }
.app__debug-back { margin-left: auto; padding: 4px 14px; border-radius: 6px; border: 1px solid #D4A800; background: none; color: #92600A; cursor: pointer; font-size: 0.84rem; font-weight: 700; font-family: inherit; white-space: nowrap; }
@media (max-width: 640px) {
  .app__debug-bar { flex-direction: column; align-items: stretch; padding: 10px 16px; gap: 8px; }
  .app__debug-back { margin-left: 0; width: 100%; text-align: center; }
}
.ap__collab-note { margin: 0; font-size: 0.82rem; color: var(--color-accent); font-style: italic; line-height: 1.5; display: flex; align-items: flex-start; gap: 4px; }
.ap__collab-note-at { color: var(--color-text-muted); font-size: 11px; margin-left: 6px; }
/* ── admin additions ─────────────────────────────────── */
.adm__loading { color: var(--color-text-muted); }
.adm__loading--sm { color: var(--color-text-muted); font-size: 0.9rem; }
.adm__loading--center { padding: 48px; text-align: center; }
.adm__loading--error { padding: 48px; text-align: center; color: var(--color-warn); }
.adm__section--mb-16 { margin-bottom: 16px; }
.adm__name-row--mb-8 { margin-bottom: 8px; }
.od__form-row--flex1 { flex: 1; }
.adm__setting-block { margin-bottom: 24px; }
.adm__setting-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; }
.adm__setting-label { flex: 1; font-size: 0.875rem; font-weight: 500; color: var(--color-text-primary); }
.adm__setting-status { font-size: 0.78rem; color: var(--color-text-muted); margin-right: 8px; }
.adm__toggle { position: relative; border: none; cursor: pointer; transition: background .2s; flex-shrink: 0; padding: 0; }
.adm__toggle--lg { width: 44px; height: 24px; border-radius: 12px; }
.adm__toggle--sm { width: 40px; height: 22px; border-radius: 11px; }
.adm__toggle__thumb { position: absolute; top: 3px; border-radius: 50%; background: #fff; transition: left .2s; }
.adm__toggle__thumb--lg { width: 18px; height: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.adm__toggle__thumb--sm { width: 16px; height: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.adm__debug-status { font-size: 0.8rem; font-weight: 600; }
.adm__debug-status--on { color: var(--color-ok); }
.adm__debug-status--off { color: var(--color-text-muted); }
.adm__org-badge { font-size: 0.72rem; padding: 2px 9px; border-radius: 10px; font-weight: 600; }
.adm__org-badge--active { background: var(--color-ok-bg); color: var(--color-ok); }
.adm__org-badge--inactive { background: var(--color-amber-bg); color: var(--color-amber); }
.adm__actions-wrap { position: relative; }
.adm__org-detail-body { padding-top: 20px; }
.adm__anon-status { font-weight: 600; }
.adm__anon-status--ok { color: var(--color-ok); }
.adm__anon-status--pending { color: var(--color-amber); }
.adm__tree-row { display: flex; align-items: center; gap: 6px; padding: 7px 10px; margin-bottom: 4px; border-radius: 8px; }
.adm__tree-row--leader { background: color-mix(in srgb, var(--color-accent) 4%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent); }
.adm__tree-row--member { background: var(--color-surface); border: 1px solid transparent; }
.adm__tree-name--leader { font-weight: 700; color: var(--color-text-primary); font-size: 0.87rem; }
.adm__tree-name--member { font-weight: 400; color: var(--color-text-secondary); font-size: 0.87rem; }
.adm__tree-tag { font-size: 0.68rem; font-family: monospace; padding: 1px 5px; border-radius: 4px; }
.adm__tree-tag--leader { color: var(--color-text-muted); background: var(--color-border-light); }
.adm__tree-tag--sysadmin { color: #7A3FCC; background: #F5E8FF; }
.adm__tree-reports { font-size: 0.72rem; color: var(--color-text-muted); font-family: monospace; }
.adm__unassigned-block { margin-top: 16px; }
/* notify modal */
.notify-modal__hint { margin-bottom: 8px; color: var(--color-text-secondary); font-size: 0.88rem; }
.notify-modal__sent { color: #38C0A7; text-align: center; margin-top: 16px; font-weight: 500; }
.notify-modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.notify-modal__error { color: #e53935; font-size: 13px; margin: 0 0 12px; }
/* org-select in user-card */
.org-select__row { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.org-select__label { font-size: 0.78rem; color: var(--color-text-muted); font-family: monospace; flex-shrink: 0; }
.org-select__input { font-size: 0.85rem; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); font-family: inherit; cursor: pointer; max-width: 220px; }
/* stc (sub-team card) */
.stc__leader-name { font-weight: 700; color: var(--color-text-primary); font-size: 1rem; margin-bottom: 2px; }
@media (max-width: 639px) { .stc__leader-name { margin-bottom: 4px; } }
.stc__composite { font-size: 0.85rem; font-weight: 700; margin-bottom: 4px; }
.stc__composite--warn { color: var(--color-warn); }
.stc__composite--ok { color: var(--color-ok); }
.stc__composite--inline { margin-left: 10px; font-weight: 700; }
.stc__group-icon { margin-top: 2px; flex-shrink: 0; }
/* icon utilities */
.icon--va-mid { vertical-align: middle; }
/* period-picker option button */
.period-picker__option { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; margin-bottom: 6px; border-radius: 8px; cursor: pointer; font-size: 0.95rem; color: var(--color-text-primary); border: 1px solid var(--color-border); background: var(--color-surface); }
.period-picker__option--active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.period-picker__option--flex { flex: 1; width: auto; margin-bottom: 0; }
/* waitlist mail modal */
.adm__wl-modal-note { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 14px; }
.adm__wl-modal-label { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 600; display: block; margin-bottom: 4px; }
/* accent link */
.link-accent { color: var(--color-accent); }

/* ════════════════════════════════════════════════════════════════
   TOGGLE SWITCH — generico (usato in SV2, OrgDash)
   ════════════════════════════════════════════════════════════════ */
.toggle {
  width: 36px; height: 20px; border-radius: 10px;
  display: flex; align-items: center; padding: 0 3px;
  cursor: pointer; flex-shrink: 0;
  transition: background .2s;
  background: var(--color-border);
  border: none;
}
.toggle--on  { background: var(--color-ok); }
.toggle__thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; pointer-events: none;
  transition: transform .2s;
  transform: translateX(0);
}
.toggle--on .toggle__thumb { transform: translateX(16px); }

/* .adm__toggle stati (completano le classi esistenti) */
.adm__toggle--on  { background: var(--color-ok); }
.adm__toggle--off { background: var(--color-border); }
.adm__toggle--sm-off { background: #D0CDD8; }
.adm__toggle__thumb--sm-on  { left: 20px; }
.adm__toggle__thumb--sm-off { left: 3px; }

/* ════════════════════════════════════════════════════════════════
   SV2 — SysAdminV2View layout
   ════════════════════════════════════════════════════════════════ */
.sv2__root { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

/* Title bar: "Gestione Organizzazioni" + debug toggle */
.sv2__titlebar { border-bottom: 1px solid var(--color-border); background: var(--color-surface); flex-shrink: 0; }
.sv2__titlebar-inner {
  max-width: 1600px; margin: 0 auto;
  padding: 0 28px; height: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.sv2__title { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); }
.sv2__title-right { display: flex; align-items: center; gap: 12px; }
.sv2__toggle-label { font-size: .82rem; font-weight: 600; color: var(--color-text-muted); transition: color .2s; }
.sv2__toggle-label--on { color: var(--color-ok); }

/* Org card in SV2 — riusa .adm__org-card come base */
.sv2__org-stats { font-size: .82rem; color: var(--color-text-muted); margin-bottom: 6px; }
.sv2__org-admins { font-size: .78rem; color: var(--color-text-muted); }
.sv2__card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-light); }
.sv2__invite-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sv2__invite-input { flex: 1; min-width: 180px; padding: 7px 10px; border: 1.5px solid var(--color-border); border-radius: 8px; font-size: .88rem; font-family: inherit; background: var(--color-surface); }
.sv2__attach-check { display: flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--color-text-2); white-space: nowrap; cursor: pointer; }

/* Waitlist row */
.sv2__wl-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border-light); }
.sv2__wl-row:last-child { border-bottom: none; padding-bottom: 0; }
.sv2__wl-row:first-child { padding-top: 0; }
.sv2__wl-info { flex: 1; min-width: 0; }
.sv2__wl-email { font-size: .9rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: 2px; }
.sv2__wl-meta { font-size: .78rem; color: var(--color-text-muted); }
.sv2__wl-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.sv2__wl-check { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; accent-color: var(--color-accent); }
.sv2__wl-sel-header { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--color-border); }
.sv2__wl-sel-label { font-size: .75rem; color: var(--color-text-muted); font-weight: 600; }
.sv2__wl-bulk-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; background: color-mix(in srgb, var(--color-accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent); border-radius: var(--radius-md); }
.sv2__wl-bulk-count { font-size: .82rem; font-weight: 700; color: var(--color-accent); flex: 1; }

/* Landing toggle in org tab header */
.sv2__landing-row { display: flex; align-items: center; gap: 8px; }
.sv2__landing-label { font-size: .82rem; color: var(--color-text-muted); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
   OD — OrgDashView layout
   ════════════════════════════════════════════════════════════════ */
.od__root { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.od__top-actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

/* Team card */
.od__team-card { margin-bottom: var(--list-gap); }
.od__team-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; gap: 8px; }
.od__team-head .adm__name-row { margin-bottom: 0; flex: 1; min-width: 0; }
.od__team-name { font-weight: 700; font-size: .97rem; color: var(--color-text-primary); }
.od__team-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (max-width: 640px) {
  .od__team-head { flex-wrap: wrap; }
  .od__team-head .adm__name-row { flex: 0 0 100%; }
  .od__team-head .od__team-right { width: 100%; }
}
.od__team-slots { font-size: .82rem; color: var(--color-text-muted); }
.od__team-body { padding-top: 12px; border-top: 1px solid var(--color-border-light); margin-top: 12px; }
.od__lead-row { font-size: .88rem; color: var(--color-text-primary); padding: 6px 0 6px; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.od__lead-name { flex: 1; }
.od__lead-row--warn { background: var(--color-amber-bg); color: var(--color-amber); padding: 6px 10px; border-radius: 6px; font-weight: 400; }
.od__member-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--color-border-light); }
.od__member-row:has(+ .od__team-actions) { border-bottom: none; }
.od__member-row--indented { padding-left: 22px; }
.od__member-info { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.od__member-name { font-size: .88rem; color: var(--color-text-primary); }
.od__member-name--blocked { color: var(--color-text-muted); }
.od__blocked-badge { font-size: .72rem; color: var(--color-warn); margin-left: 4px; }
.od__team-actions { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--color-border-light); margin-top: 6px; }
.od__team-actions-wrap { position: relative; }
.od__team-azioni-btn { display: inline-flex; align-items: center; gap: 2px; font-size: .78rem; font-weight: 600; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--color-border-light); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; font-family: inherit; }
.od__team-azioni-btn:hover { background: var(--color-bg); }
.od__team-menu { position: absolute; top: calc(100% + 4px); right: 0; background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 148px; z-index: 200; overflow: hidden; }
.od__team-menu-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 14px; background: none; border: none; cursor: pointer; font-size: .85rem; color: var(--color-text-primary); font-family: inherit; text-align: left; }
.od__team-menu-item:hover { background: var(--color-bg); }
.od__team-menu-item--danger { color: var(--color-warn); }
.od__team-menu-item--danger:hover { background: var(--color-warn-bg, #FEE2E2); }
.od__orphan-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.od__orphan-modal { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px; width: 100%; max-width: 420px; max-height: 80vh; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.od__orphan-modal-close { align-self: flex-end; }
.od__orphan-modal-title { font-size: 1rem; font-weight: 700; color: var(--color-text-primary); }
.od__orphan-modal-note { font-size: .78rem; color: var(--color-text-muted); background: var(--color-amber-bg); border-radius: var(--radius-sm); padding: 8px 10px; line-height: 1.5; }
.od__orphan-list { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.od__orphan-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: var(--radius-md); background: var(--color-bg); }
.od__orphan-name { font-size: .88rem; color: var(--color-text-primary); }
.od__sysbar { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; margin-bottom: 4px; border-bottom: 1px solid var(--color-border-light); flex-wrap: wrap; }
.od__subheader-title { display: flex; align-items: center; gap: 8px; }
.od__subheader-badge { font-size: .72rem; padding: 2px 8px; }
.od__accedi-btn { font-size: .72rem; padding: 2px 8px; border-radius: 5px; border: 1px solid #F6C94E; background: #FEF3CD; color: #92600A; cursor: pointer; flex-shrink: 0; font-weight: 700; margin-left: auto; }
.od__accedi-btn--abs { position: absolute; top: 14px; right: 14px; }
.od__user-card-wrap { position: relative; }
.sv2__org-menus { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; padding-left: 8px; }
.sv2__stat-ok { color: var(--color-ok); margin-left: 10px; }
.sv2__stat-warn { color: var(--color-amber); margin-left: 10px; cursor: default; }
.sv2__org-notice { font-size: .78rem; color: var(--color-amber); background: var(--color-amber-bg); border-radius: var(--radius-md); padding: 6px 10px; margin-top: 6px; line-height: 1.5; }
.adm__filter-spacer { flex: 1; }
.profile-menu__sysrow { display: flex; align-items: center; gap: 10px; padding: 8px 20px; }
.profile-menu__sysrow-label { font-size: .84rem; font-weight: 500; color: var(--color-text-secondary); flex: 1; }
.profile-menu__sysdivider { border-top: 1px solid var(--color-border); margin: 4px 12px; }
.od__invite-dashed { font-size: .85rem; padding: 7px 14px; border-radius: 8px; border: 1.5px dashed var(--color-accent); background: color-mix(in srgb, var(--color-accent) 4%, transparent); color: var(--color-accent); cursor: pointer; }
.od__fill-link-btn { font-size: .85rem; background: none; border: none; color: var(--color-accent); text-decoration: underline; cursor: pointer; padding: 7px 4px; font-family: inherit; }
.od__inline-invite { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.od__invite-pending-label { font-size: .85rem; color: var(--color-amber); }
.od__invite-card { border: 1.5px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 4%, transparent); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: var(--list-gap); }
.od__ai-card { background: var(--color-bg); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: var(--list-gap); }
.od__legacy-card { border: 1.5px solid var(--color-amber-border); background: #FFFBF0; border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: var(--list-gap); }
.od__legacy-title { font-size: .85rem; font-weight: 700; color: var(--color-amber); margin-bottom: 12px; }
.od__legacy-lead-row { border-bottom: 1px solid var(--color-amber-border); padding-bottom: 12px; margin-bottom: 12px; }
.od__form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.od__form-fill { flex: 1; }
.od__form-input { flex: 1; min-width: 160px; padding: 8px 12px; border: 1.5px solid var(--color-border); border-radius: 8px; font-size: .9rem; font-family: inherit; }
.od__tier-btn { padding: 7px 12px; border-radius: 8px; border: 2px solid var(--color-border); background: var(--color-surface); font-weight: 400; cursor: pointer; font-size: .85rem; font-family: inherit; }
.od__tier-btn--active { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); font-weight: 700; color: var(--color-accent); }
.od__tier-btn--amber { border-color: var(--color-amber-border); background: var(--color-amber-bg); font-weight: 700; color: var(--color-amber); }

/* Team card more-actions button */
.od__team-more-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; border: none; background: none; cursor: pointer; flex-shrink: 0; }
.od__team-more-btn:hover { background: var(--color-border-light); }

/* Section label inside team card body */
.od__section-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-muted); margin: 14px 0 6px; }
.od__team-actions + .od__section-label { margin-top: 28px; }

/* Anonymous survey rows inside team card */
.od__anon-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-border-light); }
.od__anon-info { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; min-width: 0; }
.od__anon-name { font-size: .85rem; font-weight: 600; color: var(--color-text-primary); }
.od__anon-status { font-size: .75rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.od__anon-status--ok { color: var(--color-ok); background: color-mix(in srgb, var(--color-ok) 10%, transparent); }
.od__anon-status--pending { color: var(--color-amber); background: color-mix(in srgb, var(--color-amber) 10%, transparent); }
.od__anon-periods { font-size: .75rem; color: var(--color-text-muted); }
.od__anon-empty { font-size: .85rem; color: var(--color-text-muted); padding: 6px 0; }
.od__anon-link-box { border: 1.5px solid var(--color-accent); border-radius: var(--radius-md); padding: 10px 14px; margin: 10px 0; background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
.od__anon-warning { font-size: .8rem; color: var(--color-amber); margin-bottom: 8px; display: flex; align-items: flex-start; gap: 4px; }
.od__anon-link-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.od__anon-link-code { font-size: .78rem; font-family: monospace; color: var(--color-text-secondary); background: var(--color-bg); padding: 4px 8px; border-radius: 5px; border: 1px solid var(--color-border); word-break: break-all; flex: 1; }

.od__struct-panel { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.od__struct-team { display: flex; flex-direction: column; gap: 3px; }
.od__struct-team-head { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 8px; background: var(--color-bg); border: 1px solid var(--color-border-light); margin-bottom: 2px; }
.od__struct-team-name { font-weight: 700; font-size: .9rem; color: var(--color-text-primary); flex: 1; }
.od__struct-lead { margin-left: 20px; }
.od__struct-member { margin-left: 48px; }

/* Danger variant for action-sheet menu items */
.user-card__menu-item-btn--danger { color: var(--color-warn); }
.user-card__menu-item-btn--danger:hover { background: var(--color-warn-bg); }
.user-card__menu-item-btn--debug { color: #92600A; background: #FEF3CD; }
.user-card__menu-item-btn--debug:hover { background: #F6C94E; }

/* msg bar */
.sv2__msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: .9rem; }
.sv2__msg--ok  { background: var(--color-ok-bg); color: var(--color-ok); }
.sv2__msg--err { background: var(--color-warn-bg); color: var(--color-warn); }

/* ── Wizard — leader selection step ─────────────────────────────── */
.wz__leader-option { border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.wz__leader-option:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 3%, transparent); }
.wz__leader-option--selected { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.wz__leader-option--disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.wz__leader-option-header { display: flex; align-items: center; gap: 12px; }
.wz__leader-option-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-border); flex-shrink: 0; transition: border-color .15s, background .15s; }
.wz__leader-option--selected .wz__leader-option-radio { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 3px #fff; }
.wz__leader-option-label { font-size: .93rem; font-weight: 500; color: var(--color-text-primary); }
.wz__leader-option-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border-light); }
.wz__leader-orphan-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow-y: auto; }
.wz__leader-orphan-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; font-size: .88rem; color: var(--color-text-secondary); transition: background .12s, border-color .12s; }
.wz__leader-orphan-row:hover { background: var(--color-bg); border-color: var(--color-border); }
.wz__leader-orphan-row--selected { background: color-mix(in srgb, var(--color-ok) 8%, transparent); border-color: var(--color-ok); color: var(--color-text-primary); font-weight: 600; }
.wz__leader-orphan-row--disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.wz__btn-row { display: flex; gap: 10px; margin-top: 8px; }
.wz__btn-row > button { flex: 1; width: auto; margin-top: 0; }
.wz__error-box { background: #FEE2E2; color: #B91C1C; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: .9rem; }
.wz__loading-hint { font-size: .85rem; color: var(--color-text-muted); padding: 10px 0; }
.wz__invited-list { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.wz__invited-pill { font-size: .88rem; color: var(--color-ok); background: var(--color-ok-bg); padding: 6px 12px; border-radius: 6px; }
.wz__invite-form-row { display: flex; gap: 8px; margin-bottom: 20px; }
.wz__invite-submit-btn { padding: 10px 16px; background: var(--color-accent); color: #fff; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
.wz__step-emoji { font-size: 3rem; margin-bottom: 16px; }
.wz__tier-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; }
.wz__tier-letter { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.wz__tier-icons { display: flex; gap: 18px; }
.wz__tier-icon-group { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wz__tier-icon-text { font-size: .7rem; }
.wz__tier-plus { font-size: .75rem; font-weight: 600; opacity: .45; align-self: center; margin-bottom: 14px; }
.wz__wrap { max-width: 560px; margin: 0 auto; padding: 48px 24px; }
.wz__step-row { display: flex; gap: 8px; margin-bottom: 32px; align-items: center; }
.wz__step-line { flex: 1; height: 2px; background: #E8E4DE; border-radius: 1px; }
.wz__step-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; flex-shrink: 0; background: #E8E4DE; color: var(--color-text-muted); }
.wz__step-dot--active { background: var(--color-accent); color: #fff; }
.wz__step-dot--done { background: var(--color-ok); color: #fff; }
.wz__h2 { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 8px; }
.wz__sub { color: var(--color-text-muted); margin-bottom: 28px; font-size: .95rem; line-height: 1.6; }
.wz__label { display: block; font-size: .82rem; font-weight: 600; color: #4A3F38; margin-bottom: 6px; }
.wz__input { width: 100%; padding: 10px 14px; border: 1.5px solid #E8E4DE; border-radius: var(--radius-md); font-size: .95rem; margin-bottom: 16px; box-sizing: border-box; }
.wz__input--inline { margin-bottom: 0; flex: 1; }
.wz__tier-row { display: flex; gap: 10px; margin-bottom: 16px; }
.wz__tier-btn { flex: 1; padding: 12px 8px; border: 2px solid #E8E4DE; border-radius: var(--radius-lg); cursor: pointer; background: #fff; color: var(--color-text-primary); font-weight: 400; font-size: .9rem; }
.wz__tier-btn--selected { border-color: var(--color-accent); background: #EEF2FE; color: #3A58B8; font-weight: 700; }
.wz__btn { width: 100%; padding: 12px; background: var(--color-accent); color: #fff; border: none; border-radius: var(--radius-lg); font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 8px; }
.wz__btn-sec { width: 100%; padding: 12px; background: #fff; color: var(--color-accent); border: 1.5px solid var(--color-accent); border-radius: var(--radius-lg); font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 8px; }

/* ── Context Picker (multi-org/team login) ──────────────────────── */
.picker__page { max-width: 600px; margin: 0 auto; padding: 48px 24px; }
.picker__title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; color: var(--color-text-primary); }
.picker__subtitle { color: var(--color-text-muted); margin-bottom: 32px; font-size: .95rem; }
.picker__error { color: #C0392B; margin-bottom: 16px; font-size: .9rem; }
.picker__draft-notice { display: flex; align-items: flex-start; gap: 10px; background: var(--color-amber-bg); border-left: 3px solid var(--color-amber-border); border-radius: 4px; padding: 12px 16px; font-size: .88rem; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 20px; }
.picker__list { display: flex; flex-direction: column; gap: 12px; }
.picker__item { background: #fff; border: 1.5px solid #E8E4DE; border-radius: 12px; padding: 20px 24px; text-align: left; transition: border-color .15s, background .15s; cursor: pointer; }
.picker__item:hover:not(.picker__item--busy) { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 4%, transparent); }
.picker__item--busy { cursor: wait; }
.picker__item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.picker__item-label { font-weight: 700; font-size: 1rem; color: var(--color-text-primary); }
.picker__item-role { font-size: .78rem; font-weight: 600; color: var(--role-color); background: var(--role-bg); padding: 3px 10px; border-radius: 20px; }
.picker__item-sub { font-size: .83rem; color: var(--color-text-muted); margin-top: 4px; }