/* ============================================================================
   BakiPro Design System — stili base e componenti
   Richiede baki-tokens.css. Classi con prefisso .baki- (BEM semplificato).
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
    margin: 0;
    font-family: var(--baki-font);
    font-size: var(--baki-text-md);
    color: var(--baki-ink-900);
    background: var(--baki-background);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--baki-space-3); line-height: 1.25; color: var(--baki-title); }
h1 { font-size: var(--baki-text-2xl); font-weight: 700; }
h2 { font-size: var(--baki-text-xl); font-weight: 700; }
h3 { font-size: var(--baki-text-lg); font-weight: 600; }
p { margin: 0 0 var(--baki-space-3); line-height: 1.55; }
a { color: var(--baki-primary-strong); }

:focus-visible {
    outline: 3px solid var(--baki-accent);
    outline-offset: 2px;
    border-radius: var(--baki-radius-sm);
}

/* ---- Titoli bicolore del mockup ("Baki" teal + "Pro" arancio) ---------- */
.baki-title-accent { color: var(--baki-teal-600); }
.baki-title-accent em { color: var(--baki-orange-500); font-style: normal; }
/* Nome scritto come nel logo ufficiale: BAKI arancione pieno, PRO turchese leggero */
.baki-brandname { color: var(--baki-teal-600); font-weight: 400; }
.baki-brandname b { color: var(--baki-orange-500); font-weight: 800; }

/* ---- Bottoni ------------------------------------------------------------ */
.baki-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--baki-space-2);
    min-height: var(--baki-touch-target);
    padding: 0.55rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--baki-radius-pill);
    font-family: var(--baki-font);
    font-size: var(--baki-text-md);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--baki-transition), box-shadow var(--baki-transition), transform var(--baki-transition);
}
.baki-btn:active { transform: scale(0.98); }
.baki-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.baki-btn--primary { background: var(--baki-primary); color: var(--baki-primary-contrast); box-shadow: var(--baki-shadow-soft); }
.baki-btn--primary:hover:not(:disabled) { background: var(--baki-primary-strong); }
/* CTA forte arancione ("Vedi dettagli" dei mockup 2026-10) */
.baki-btn--cta { background: var(--baki-highlight); color: #FFFFFF; box-shadow: var(--baki-shadow-soft); }
.baki-btn--cta:hover:not(:disabled) { background: var(--baki-highlight-strong); }
.baki-btn--success { background: var(--baki-success); color: #FFFFFF; }
.baki-btn--success:hover:not(:disabled) { filter: brightness(0.93); }
.baki-btn--dangeroutline { background: transparent; color: var(--baki-danger); border-color: var(--baki-danger); }
.baki-btn--dangeroutline:hover:not(:disabled) { background: var(--baki-danger-bg); }
.baki-btn--secondary { background: transparent; color: var(--baki-accent-strong); border-color: var(--baki-accent); }
.baki-btn--secondary:hover:not(:disabled) { background: var(--baki-accent-soft); }
.baki-btn--ghost { background: transparent; color: var(--baki-gray-700); }
.baki-btn--ghost:hover:not(:disabled) { background: var(--baki-gray-100); }
.baki-btn--danger { background: var(--baki-danger); color: #fff; }
.baki-btn--danger:hover:not(:disabled) { filter: brightness(0.92); }
.baki-btn--sm { min-height: 34px; padding: 0.25rem 1rem; font-size: var(--baki-text-sm); }
.baki-btn--block { width: 100%; }

/* ---- Card --------------------------------------------------------------- */
.baki-card {
    background: var(--baki-surface);
    border-radius: var(--baki-radius-lg);
    box-shadow: var(--baki-shadow-card);
    padding: var(--baki-space-5);
}
.baki-card--flat { box-shadow: none; border: 1px solid var(--baki-gray-200); }
.baki-card--compact { padding: var(--baki-space-4); border-radius: var(--baki-radius-md); }
.baki-card--clickable { cursor: pointer; transition: box-shadow var(--baki-transition), transform var(--baki-transition); }
.baki-card--clickable:hover { box-shadow: var(--baki-shadow-raised); transform: translateY(-2px); }

/* ---- Input / Select ------------------------------------------------------ */
.baki-field { display: flex; flex-direction: column; gap: var(--baki-space-1); margin-bottom: var(--baki-space-4); }
.baki-field__label { font-size: var(--baki-text-sm); font-weight: 600; color: var(--baki-gray-700); }
.baki-field__hint { font-size: var(--baki-text-xs); color: var(--baki-gray-500); }
.baki-field__error { font-size: var(--baki-text-xs); color: var(--baki-danger); font-weight: 600; }

.baki-input, .baki-select, .baki-textarea {
    width: 100%;
    min-height: var(--baki-touch-target);
    padding: 0.55rem 1.1rem;
    border: 1.5px solid var(--baki-gray-300);
    border-radius: var(--baki-radius-pill);
    font-family: var(--baki-font);
    font-size: var(--baki-text-md);
    color: var(--baki-ink-900);
    background: var(--baki-surface);
    transition: border-color var(--baki-transition), box-shadow var(--baki-transition);
}
.baki-textarea { border-radius: var(--baki-radius-md); min-height: 96px; resize: vertical; }
.baki-input:focus, .baki-select:focus, .baki-textarea:focus {
    outline: none;
    border-color: var(--baki-accent);
    box-shadow: 0 0 0 3px var(--baki-accent-soft);
}
.baki-input:disabled, .baki-select:disabled, .baki-textarea:disabled { background: var(--baki-gray-100); color: var(--baki-gray-500); }
.baki-input--invalid, .baki-select--invalid, .baki-textarea--invalid { border-color: var(--baki-danger); }

.baki-checkbox { display: inline-flex; align-items: center; gap: var(--baki-space-2); cursor: pointer; min-height: var(--baki-touch-target); }
.baki-checkbox input { width: 20px; height: 20px; accent-color: var(--baki-accent); }

/* ---- Badge / status chip -------------------------------------------------- */
.baki-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.7rem;
    border-radius: var(--baki-radius-pill);
    font-size: var(--baki-text-xs);
    font-weight: 700;
    background: var(--baki-gray-100);
    color: var(--baki-gray-700);
}
.baki-badge--accent { background: var(--baki-accent-soft); color: var(--baki-accent-strong); }
.baki-badge--success { background: var(--baki-success-bg); color: var(--baki-success); }
.baki-badge--warning { background: var(--baki-warning-bg); color: var(--baki-warning); }
.baki-badge--danger { background: var(--baki-danger-bg); color: var(--baki-danger); }
.baki-badge--info { background: var(--baki-info-bg); color: var(--baki-info); }
.baki-badge--primary { background: var(--baki-primary-soft); color: var(--baki-primary-strong); }
.baki-badge--highlight { background: var(--baki-highlight); color: #FFFFFF; }
.baki-badge--counter {
    min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--baki-orange-500); color: #fff; font-size: 11px;
}

/* Chip di stato: mai solo colore, sempre testo (accessibilità SP §10) */
.baki-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.8rem; border-radius: var(--baki-radius-pill); font-size: var(--baki-text-sm); font-weight: 600; }
.baki-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---- Skeleton ------------------------------------------------------------ */
.baki-skeleton {
    display: block;
    background: linear-gradient(90deg, var(--baki-gray-100) 25%, var(--baki-gray-200) 50%, var(--baki-gray-100) 75%);
    background-size: 200% 100%;
    animation: baki-shimmer 1.2s infinite linear;
    border-radius: var(--baki-radius-sm);
    min-height: 1em;
}
@keyframes baki-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- Empty / error state --------------------------------------------------- */
.baki-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: var(--baki-space-3); padding: var(--baki-space-7) var(--baki-space-5);
    color: var(--baki-gray-700);
}
.baki-state__icon {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--baki-peach-100); color: var(--baki-orange-500);
}
.baki-state--error .baki-state__icon { background: var(--baki-danger-bg); color: var(--baki-danger); }
.baki-state__title { font-weight: 700; font-size: var(--baki-text-lg); color: var(--baki-ink-900); }

/* ---- Offline banner -------------------------------------------------------- */
.baki-offline-banner {
    display: flex; align-items: center; gap: var(--baki-space-2); justify-content: center;
    background: var(--baki-ink-900); color: #fff;
    padding: 0.45rem var(--baki-space-4); font-size: var(--baki-text-sm); font-weight: 600;
    position: sticky; top: 0; z-index: 60;
}
.baki-offline-banner--slow { background: var(--baki-warning); }

/* ---- Dialog ---------------------------------------------------------------- */
.baki-dialog-backdrop {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(28, 42, 74, 0.45); /* overlay scuro dei mockup 2026-10 */
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--baki-space-4);
}
.baki-dialog {
    background: var(--baki-surface);
    border-radius: var(--baki-radius-lg);
    box-shadow: var(--baki-shadow-raised);
    width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
    padding: var(--baki-space-5);
}
.baki-dialog--wide { max-width: 720px; }
.baki-dialog__title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--baki-space-4); }
.baki-dialog__title > button { margin-left: auto; }
.baki-dialog__actions { display: flex; gap: var(--baki-space-3); justify-content: flex-end; margin-top: var(--baki-space-5); flex-wrap: wrap; }

/* ---- Toast ------------------------------------------------------------------ */
.baki-toast-host { position: fixed; bottom: calc(var(--baki-bottomnav-height) + 12px); left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: var(--baki-space-2); width: min(92vw, 420px); }
.baki-toast {
    display: flex; align-items: center; gap: var(--baki-space-2);
    background: var(--baki-ink-900); color: #fff;
    padding: 0.7rem 1.1rem; border-radius: var(--baki-radius-md);
    box-shadow: var(--baki-shadow-raised); font-size: var(--baki-text-sm);
    animation: baki-toast-in 200ms ease;
}
.baki-toast--success { background: var(--baki-success); }
.baki-toast--warning { background: var(--baki-warning); }
.baki-toast--error { background: var(--baki-danger); }
@keyframes baki-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Page header -------------------------------------------------------------- */
.baki-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--baki-space-3); margin-bottom: var(--baki-space-5); flex-wrap: wrap; }
.baki-page-header__titles { display: flex; flex-direction: column; gap: 0.15rem; }
.baki-page-header__subtitle { color: var(--baki-gray-700); font-size: var(--baki-text-sm); }
.baki-page-header__actions { display: flex; gap: var(--baki-space-2); flex-wrap: wrap; }

/* ---- Tabella dati --------------------------------------------------------------- */
.baki-table-wrap { overflow-x: auto; border-radius: var(--baki-radius-md); background: var(--baki-surface); box-shadow: var(--baki-shadow-card); }
.baki-table { width: 100%; border-collapse: collapse; font-size: var(--baki-text-sm); }
.baki-table th {
    text-align: left; padding: 0.8rem 1rem; white-space: nowrap;
    background: var(--baki-sky-050); color: var(--baki-navy-900);
    font-weight: 700; position: sticky; top: 0;
}
.baki-table th.sortable { cursor: pointer; user-select: none; }
.baki-table td { padding: 0.7rem 1rem; border-top: 1px solid var(--baki-gray-100); vertical-align: middle; }
.baki-table tbody tr:hover { background: var(--baki-sky-050); }
.baki-table tbody tr.selectable { cursor: pointer; }
.baki-table__footer { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; gap: var(--baki-space-3); flex-wrap: wrap; }

/* ---- Sidebar (portale web) --------------------------------------------------------- */
.baki-sidebar {
    width: var(--baki-sidebar-width); min-height: 100dvh;
    background: var(--baki-surface); border-right: 1px solid var(--baki-gray-200);
    display: flex; flex-direction: column;
    position: fixed; inset-block: 0; left: 0; z-index: 50;
    transition: transform var(--baki-transition);
}
.baki-sidebar__brand { display: flex; align-items: center; gap: var(--baki-space-2); padding: var(--baki-space-4) var(--baki-space-4) var(--baki-space-3); }
.baki-sidebar__nav { flex: 1; overflow-y: auto; padding: var(--baki-space-2); display: flex; flex-direction: column; gap: 2px; }
.baki-sidebar__footer { padding: var(--baki-space-3); border-top: 1px solid var(--baki-gray-100); }
.baki-sidebar__link {
    display: flex; align-items: center; gap: var(--baki-space-3);
    padding: 0.6rem 0.9rem; border-radius: var(--baki-radius-md);
    color: var(--baki-gray-700); text-decoration: none; font-weight: 500; font-size: var(--baki-text-sm);
    transition: background var(--baki-transition), color var(--baki-transition);
}
.baki-sidebar__link:hover { background: var(--baki-gray-100); }
.baki-sidebar__link.active { background: var(--baki-accent); color: var(--baki-accent-contrast); font-weight: 600; }
.baki-sidebar__link--disabled { color: var(--baki-gray-300); cursor: not-allowed; pointer-events: none; }
.baki-sidebar__link--disabled:hover { background: transparent; }

/* Elemento visibile ma disattivato nella demo (es. accessi non abilitati) */
.baki-demo-disabled { opacity: .55; filter: grayscale(1); pointer-events: none; user-select: none; }
.baki-sidebar__section { padding: var(--baki-space-3) 0.9rem 0.3rem; font-size: var(--baki-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--baki-gray-500); }

.baki-portal { margin-left: var(--baki-sidebar-width); min-height: 100dvh; display: flex; flex-direction: column; }
.baki-portal__topbar {
    height: var(--baki-topbar-height); display: flex; align-items: center; justify-content: space-between;
    gap: var(--baki-space-3); padding: 0 var(--baki-space-5);
    background: var(--baki-surface); border-bottom: 1px solid var(--baki-gray-200);
    position: sticky; top: 0; z-index: 40;
}
.baki-portal__content { flex: 1; padding: var(--baki-space-5); max-width: 1280px; width: 100%; }

@media (max-width: 1024px) {
    .baki-sidebar { transform: translateX(-100%); box-shadow: var(--baki-shadow-raised); }
    .baki-sidebar.open { transform: none; }
    .baki-portal { margin-left: 0; }
}

/* ---- Bottom navigation (app mobile) --------------------------------------------------- */
.baki-bottomnav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    height: calc(var(--baki-bottomnav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--baki-surface);
    border-top: 1px solid var(--baki-gray-200);
    display: flex; align-items: stretch;
    box-shadow: 0 -4px 16px rgba(39, 50, 56, 0.06);
}
.baki-bottomnav__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--baki-gray-700); text-decoration: none; font-size: 11px; font-weight: 600;
    position: relative; min-width: var(--baki-touch-target); text-align: center; line-height: 1.15; padding: 0 2px;
}
/* Voce attiva arancione per entrambi i ruoli, con barretta sotto (mockup 2026-10) */
.baki-bottomnav__item.active { color: var(--baki-highlight); }
.baki-bottomnav__item.active::after {
    content: ""; position: absolute; bottom: 6px; width: 32px; height: 3px;
    border-radius: 3px; background: var(--baki-highlight);
}
.baki-bottomnav__badge { position: absolute; top: 6px; right: calc(50% - 22px); }

.baki-app-page { padding: var(--baki-space-4); padding-bottom: calc(var(--baki-bottomnav-height) + var(--baki-space-5)); max-width: 640px; margin: 0 auto; }

/* ---- Stepper (wizard) ------------------------------------------------------------------ */
.baki-stepper { display: flex; align-items: center; gap: var(--baki-space-2); margin-bottom: var(--baki-space-5); }
.baki-stepper__step { display: flex; align-items: center; gap: var(--baki-space-2); flex: 1; min-width: 0; }
.baki-stepper__dot {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--baki-gray-200); color: var(--baki-gray-700); font-weight: 700; font-size: var(--baki-text-sm);
    transition: background var(--baki-transition);
}
.baki-stepper__step.done .baki-stepper__dot { background: var(--baki-success); color: #fff; }
.baki-stepper__step.current .baki-stepper__dot { background: var(--baki-accent); color: var(--baki-accent-contrast); }
.baki-stepper__label { font-size: var(--baki-text-xs); color: var(--baki-gray-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.baki-stepper__bar { flex: 1; height: 2px; background: var(--baki-gray-200); }
.baki-stepper__step.done + .baki-stepper__bar { background: var(--baki-success); }
@media (max-width: 480px) { .baki-stepper__label { display: none; } }

/* ---- Accordion (notifiche / FAQ, freccia a goccia del mockup) --------------------------- */
.baki-accordion { border-radius: var(--baki-radius-md); background: var(--baki-surface); box-shadow: var(--baki-shadow-soft); overflow: hidden; }
.baki-accordion + .baki-accordion { margin-top: var(--baki-space-2); }
.baki-accordion__header {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--baki-space-3);
    padding: var(--baki-space-4); background: none; border: none; cursor: pointer; text-align: left;
    font-family: var(--baki-font); font-size: var(--baki-text-md); color: var(--baki-ink-900); min-height: var(--baki-touch-target);
}
.baki-accordion__chevron { transition: transform var(--baki-transition); color: var(--baki-accent); flex-shrink: 0; }
.baki-accordion.open .baki-accordion__chevron { transform: rotate(180deg); }
.baki-accordion__body { padding: 0 var(--baki-space-4) var(--baki-space-4); color: var(--baki-gray-700); }

/* ---- Legenda calendario ------------------------------------------------------------------ */
.baki-cal-legend { display: flex; flex-wrap: wrap; gap: var(--baki-space-3); font-size: var(--baki-text-xs); color: var(--baki-gray-700); }
.baki-cal-legend__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.baki-cal-legend__dot { width: 10px; height: 10px; border-radius: 50%; }

/* Colori eventi calendario (P-04: disponibilità / viaggio / trattamento / blocco / eccezione / annullato) */
:root {
    --baki-cal-available: var(--baki-sky-050);
    --baki-cal-travel: var(--baki-peach-200);
    --baki-cal-treatment: var(--baki-sky-600);
    --baki-cal-pending: var(--baki-orange-500);
    --baki-cal-block: var(--baki-gray-300);
    --baki-cal-exception: var(--baki-warning);
    --baki-cal-cancelled: var(--baki-danger-bg);
}

/* ---- Blob decorativi (forme organiche, mai sopra il contenuto) ---------------------------- */
.baki-blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.baki-blob { position: absolute; border-radius: 50%; opacity: 0.55; }
.baki-blob--peach { background: var(--baki-peach-200); }
.baki-blob--aqua { background: var(--baki-sky-100); }

/* ---- Avatar --------------------------------------------------------------------------------- */
.baki-avatar {
    border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--baki-accent-soft); color: var(--baki-accent-strong);
    font-weight: 700; overflow: hidden; flex-shrink: 0; user-select: none;
}
.baki-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Rating stelle --------------------------------------------------------------------------- */
.baki-rating { display: inline-flex; align-items: center; gap: 2px; color: var(--baki-orange-500); }
.baki-rating__value { margin-left: 4px; font-weight: 700; font-size: var(--baki-text-sm); color: var(--baki-ink-900); }
.baki-rating--input button { background: none; border: none; cursor: pointer; padding: 4px; color: var(--baki-gray-300); }
.baki-rating--input button.filled { color: var(--baki-orange-500); }

/* ---- Icona in rotazione (busy) -------------------------------------------------------------- */
.baki-spin { animation: baki-spin 0.9s linear infinite; }
@keyframes baki-spin { to { transform: rotate(360deg); } }

/* ---- Utility ----------------------------------------------------------------------------------- */
.baki-grid { display: grid; gap: var(--baki-space-4); }
.baki-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.baki-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.baki-grid--kpi { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.baki-row { display: flex; align-items: center; gap: var(--baki-space-3); }
.baki-row--between { justify-content: space-between; }
.baki-row--wrap { flex-wrap: wrap; }
.baki-stack { display: flex; flex-direction: column; gap: var(--baki-space-3); }
.baki-muted { color: var(--baki-gray-700); }
.baki-small { font-size: var(--baki-text-sm); }
.baki-xs { font-size: var(--baki-text-xs); }
.baki-strong { font-weight: 700; }
.baki-accent-text { color: var(--baki-accent-strong); }
.baki-mt { margin-top: var(--baki-space-3); } .baki-mt-0 { margin-top: 0; } .baki-mb-0 { margin-bottom: 0; }
/* Barra di avanzamento (Progressi, corsi) e scala dei livelli */
.baki-progress { height: 10px; border-radius: var(--baki-radius-pill); background: var(--baki-gray-200); overflow: hidden; }
.baki-progress--sm { height: 6px; }
.baki-progress__bar { height: 100%; border-radius: inherit; background: var(--baki-accent); transition: width .3s ease; }
.baki-levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--baki-space-2); }
.baki-levels__item { display: flex; align-items: center; gap: var(--baki-space-3); padding: var(--baki-space-2) var(--baki-space-3); border-radius: var(--baki-radius-md); color: var(--baki-gray-500); }
.baki-levels__item--reached { color: var(--baki-ink-900); }
.baki-levels__item--current { background: var(--baki-accent-soft); color: var(--baki-accent-strong); font-weight: 600; }
.baki-levels__dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--baki-gray-100); font-size: var(--baki-text-xs); font-weight: 700; }
.baki-levels__item--reached .baki-levels__dot { background: var(--baki-accent); color: var(--baki-accent-contrast); }

/* Logo, Dobloni e illustrazioni ufficiali (materiale del cliente 2026-09-24) */
.baki-logo { display: inline-flex; align-items: center; gap: var(--baki-space-2); }
.baki-logo img { display: block; }
/* Logo completo in linea: segue l'allineamento del contenitore (centrato nella scelta profilo dell'app) */
.baki-logo--full { display: inline-block; vertical-align: middle; }
.baki-dobloni { display: inline-block; flex-shrink: 0; }
.baki-illustration { display: block; width: 100%; height: auto; margin-inline: auto; }

.baki-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Colonna vertebrale dei Progressi (BakiSpine, ADR-018) */
.baki-spine { display: block; width: 100%; height: auto; max-height: 82vh; overflow: visible; }
.baki-spine__cord { fill: none; stroke: var(--baki-spine-cord); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.baki-spine__v { --spine-color: var(--baki-spine-thoracic); }
.baki-spine__v--cervical { --spine-color: var(--baki-spine-cervical); }
.baki-spine__v--thoracic { --spine-color: var(--baki-spine-thoracic); }
.baki-spine__v--lumbar { --spine-color: var(--baki-spine-lumbar); }
.baki-spine__v--sacral { --spine-color: var(--baki-spine-sacral); }
.baki-spine__v--coccygeal { --spine-color: var(--baki-spine-coccygeal); }
.baki-spine__body, .baki-spine__wing { fill: var(--baki-spine-locked); stroke: var(--baki-spine-locked-stroke); stroke-width: 1; }
.baki-spine__label { fill: var(--baki-spine-locked-text); font-family: var(--baki-font); font-weight: 700; pointer-events: none; }
.baki-spine__fill { fill: var(--spine-color); opacity: .55; }
.baki-spine__shine { pointer-events: none; }
.baki-spine__v--done .baki-spine__body,
.baki-spine__v--done .baki-spine__wing,
.baki-spine__v--current .baki-spine__body,
.baki-spine__v--current .baki-spine__wing {
    fill: var(--spine-color);
    stroke: color-mix(in srgb, var(--spine-color) 70%, #000);
    animation: baki-spine-light .45s ease-out both;
    animation-delay: calc(var(--i) * 40ms);
}
.baki-spine__v--done .baki-spine__label,
.baki-spine__v--current .baki-spine__label { fill: #FFFFFF; }
.baki-spine__v--done { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--spine-color) 45%, transparent)); }
.baki-spine__v--current { filter: drop-shadow(0 0 7px var(--spine-color)); animation: baki-spine-pulse 2.2s ease-in-out infinite; }
.baki-spine__v--current .baki-spine__body { stroke: #FFFFFF; stroke-width: 2; }
.baki-spine__v--next .baki-spine__body { stroke: var(--spine-color); stroke-dasharray: 3 2; }
@keyframes baki-spine-light { from { fill: var(--baki-spine-locked); } }
@keyframes baki-spine-pulse { 50% { filter: drop-shadow(0 0 13px var(--spine-color)); } }
@media (prefers-reduced-motion: reduce) {
    .baki-spine__v--done .baki-spine__body, .baki-spine__v--done .baki-spine__wing,
    .baki-spine__v--current .baki-spine__body, .baki-spine__v--current .baki-spine__wing,
    .baki-spine__v--current { animation: none; }
}

/* Anello di avanzamento */
.baki-ring__track { fill: none; stroke: var(--baki-gray-200); stroke-width: 9; }
.baki-ring__bar { fill: none; stroke: var(--baki-accent); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.baki-ring__text { font-family: var(--baki-font); font-size: 22px; font-weight: 800; fill: var(--baki-ink-900); }

/* Colonna vertebrale sul telefono */
@media (max-width: 720px) {
    .baki-spine { max-height: 70vh; }
}

/* =============================================================================
   Home e agenda del professionista (mockup 2026-10)
   ============================================================================= */
/* Intestazione "Ciao, Nome" con pillola Dobloni */
.baki-greeting { display: flex; align-items: center; gap: var(--baki-space-4); }
.baki-greeting .baki-avatar { box-shadow: 0 0 0 3px var(--baki-surface), var(--baki-shadow-soft); }
.baki-greeting__text { flex: 1; min-width: 0; }
.baki-greeting__hello { font-size: var(--baki-text-2xl); font-weight: 700; line-height: 1.15; color: var(--baki-title); }
.baki-greeting__name { color: var(--baki-accent); font-weight: 800; }
.baki-greeting__subtitle { color: var(--baki-gray-500); font-size: var(--baki-text-md); }
.baki-dobloni-pill { display: inline-flex; align-items: center; gap: var(--baki-space-2); padding: 6px 16px 6px 8px; border-radius: var(--baki-radius-pill);
                     background: var(--baki-sky-050); border: 1px solid var(--baki-sky-100); color: var(--baki-title); text-decoration: none; flex-shrink: 0; }
a.baki-dobloni-pill:hover { background: var(--baki-sky-100); }
.baki-dobloni-pill__text { display: flex; flex-direction: column; line-height: 1.1; }
.baki-dobloni-pill__amount { font-weight: 800; font-size: var(--baki-text-lg); }
.baki-dobloni-pill__label { font-size: var(--baki-text-xs); color: var(--baki-gray-700); }

/* Schede segmentate (Mese / Settimana / Giorno) */
.baki-segmented { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--baki-radius-md); background: var(--baki-sky-050); }
.baki-segmented__item { min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--baki-radius-sm); background: transparent;
                        font-family: var(--baki-font); font-size: var(--baki-text-sm); font-weight: 600; color: var(--baki-navy-700); cursor: pointer; }
.baki-segmented__item:hover { background: var(--baki-surface); }
.baki-segmented__item.is-active { background: var(--baki-primary); color: var(--baki-primary-contrast); box-shadow: var(--baki-shadow-soft); }

/* Agenda */
.baki-agenda { display: flex; flex-direction: column; gap: var(--baki-space-3); }
.baki-agenda__head { display: flex; align-items: center; justify-content: space-between; gap: var(--baki-space-3); flex-wrap: wrap; }
.baki-agenda__title { margin: 0; font-size: var(--baki-text-xl); font-weight: 800; }
.baki-agenda__nav { display: flex; align-items: center; justify-content: space-between; }
.baki-agenda__period { font-weight: 700; color: var(--baki-title); }
.baki-agenda__empty { margin: 0; padding: var(--baki-space-3); text-align: center; color: var(--baki-gray-500); font-size: var(--baki-text-sm); }
.baki-agenda__legend { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: var(--baki-space-4); font-size: var(--baki-text-xs); color: var(--baki-gray-700); }
.baki-agenda__legend li { display: inline-flex; align-items: center; gap: 6px; }
.baki-agenda-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.baki-agenda-dot--confirmed { background: var(--baki-primary); }
.baki-agenda-dot--pending { background: var(--baki-highlight); }
.baki-agenda-dot--done { background: var(--baki-gray-300); }

.baki-agenda-day { display: flex; flex-direction: column; }
.baki-agenda-day__row { display: grid; grid-template-columns: 52px 1fr; gap: var(--baki-space-2); min-height: 30px; border-top: 1px dashed var(--baki-gray-100); }
.baki-agenda-day__hour { font-size: var(--baki-text-xs); color: var(--baki-gray-500); padding-top: 6px; font-variant-numeric: tabular-nums; }
.baki-agenda-day__items { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.baki-agenda-item { display: flex; align-items: center; gap: var(--baki-space-3); padding: 8px 10px 8px 12px; border-radius: var(--baki-radius-sm);
                    border-left: 4px solid var(--baki-primary); background: var(--baki-sky-050); }
.baki-agenda-item--pending { border-left-color: var(--baki-highlight); background: var(--baki-orange-050); }
.baki-agenda-item--done { border-left-color: var(--baki-gray-300); background: var(--baki-gray-100); }
.baki-agenda-item__main { flex: 1; min-width: 0; }
.baki-agenda-item__name { font-weight: 700; font-size: var(--baki-text-sm); color: var(--baki-title); }
.baki-agenda-item__meta { font-size: var(--baki-text-xs); color: var(--baki-gray-700); }
.baki-agenda-item--pending .baki-agenda-item__manage { border-color: var(--baki-highlight); color: var(--baki-highlight-strong); }

.baki-agenda-week { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 2px; font-size: var(--baki-text-xs); }
.baki-agenda-week__day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border: 0; background: none; border-radius: var(--baki-radius-sm);
                         font-family: var(--baki-font); color: var(--baki-gray-700); cursor: pointer; text-transform: capitalize; }
.baki-agenda-week__day:hover { background: var(--baki-sky-050); }
.baki-agenda-week__num { font-weight: 800; font-size: var(--baki-text-md); color: var(--baki-title); }
.baki-agenda-week__day.is-today .baki-agenda-week__num { color: var(--baki-primary); }
.baki-agenda-week__hour { color: var(--baki-gray-500); padding-top: 4px; font-variant-numeric: tabular-nums; }
.baki-agenda-week__cell { min-height: 28px; border-top: 1px dashed var(--baki-gray-100); display: flex; flex-direction: column; gap: 2px; padding: 2px 0; }
.baki-agenda-chip { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 3px 5px; border: 0; border-left: 3px solid var(--baki-primary);
                    border-radius: 6px; background: var(--baki-sky-050); font-family: var(--baki-font); text-align: left; cursor: pointer; overflow: hidden; }
.baki-agenda-chip.baki-agenda-item--pending { border-left-color: var(--baki-highlight); background: var(--baki-orange-050); }
.baki-agenda-chip.baki-agenda-item--done { border-left-color: var(--baki-gray-300); background: var(--baki-gray-100); }
.baki-agenda-chip__name { font-weight: 700; font-size: 11px; color: var(--baki-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.baki-agenda-chip__time { font-size: 10px; color: var(--baki-gray-700); }

.baki-agenda-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.baki-agenda-month__dow { text-align: center; font-size: var(--baki-text-xs); color: var(--baki-gray-500); font-weight: 600; padding-bottom: 4px; }
.baki-agenda-month__day { aspect-ratio: 1 / 0.9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
                          border: 0; border-radius: var(--baki-radius-md); background: transparent; font-family: var(--baki-font); cursor: pointer; }
.baki-agenda-month__day:hover { background: var(--baki-sky-050); }
.baki-agenda-month__day.is-other { opacity: .4; }
.baki-agenda-month__num { font-weight: 700; color: var(--baki-title); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.baki-agenda-month__day.is-today .baki-agenda-month__num { background: var(--baki-primary); color: var(--baki-primary-contrast); }
.baki-agenda-month__dots { display: flex; gap: 3px; min-height: 8px; }
.baki-agenda-month__dots .baki-agenda-dot { width: 7px; height: 7px; }

/* La tua giornata */
.baki-day-overview { background: var(--baki-sky-050); border-radius: var(--baki-radius-lg); padding: var(--baki-space-4); }
.baki-day-overview__title { margin: 0 0 var(--baki-space-3); font-size: var(--baki-text-xl); font-weight: 800; }
.baki-day-overview__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--baki-space-3); }
.baki-day-tile { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: var(--baki-space-3); align-items: center;
                 padding: var(--baki-space-3); border: 0; border-radius: var(--baki-radius-md); background: var(--baki-surface); box-shadow: var(--baki-shadow-soft);
                 font-family: var(--baki-font); text-align: left; cursor: pointer; transition: box-shadow var(--baki-transition); }
.baki-day-tile:hover { box-shadow: var(--baki-shadow-card); }
.baki-day-tile__icon { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: var(--baki-radius-md); display: inline-flex; align-items: center; justify-content: center; }
.baki-day-tile__icon--orange { background: var(--baki-orange-050); color: var(--baki-highlight); }
.baki-day-tile__icon--sky { background: var(--baki-sky-100); color: var(--baki-primary); }
.baki-day-tile__value { font-size: var(--baki-text-3xl); font-weight: 800; line-height: 1; color: var(--baki-title); position: relative; justify-self: start; }
.baki-day-tile__dot { position: absolute; top: -2px; right: -12px; width: 10px; height: 10px; border-radius: 50%; background: var(--baki-highlight); }
.baki-day-tile__label { grid-column: 2; font-size: var(--baki-text-sm); color: var(--baki-navy-700); line-height: 1.2; }
.baki-day-tile__chevron { grid-column: 3; grid-row: 1 / span 2; color: var(--baki-primary); }

/* Prossimo appuntamento */
.baki-next { background: var(--baki-highlight-soft); border: 1px solid var(--baki-orange-100); border-radius: var(--baki-radius-lg); padding: var(--baki-space-4); }
.baki-next__head { display: flex; align-items: center; justify-content: space-between; gap: var(--baki-space-2); margin-bottom: var(--baki-space-3); }
.baki-next__title { margin: 0; font-size: var(--baki-text-xl); font-weight: 800; }
.baki-next__body { background: var(--baki-surface); border-radius: var(--baki-radius-md); padding: var(--baki-space-4); display: flex; flex-direction: column; gap: var(--baki-space-3); }
.baki-next__body--empty { flex-direction: row; align-items: center; }
.baki-next__who { display: flex; align-items: center; gap: var(--baki-space-3); }
.baki-next__name { font-size: var(--baki-text-lg); font-weight: 800; color: var(--baki-title); }
.baki-next__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--baki-space-3) var(--baki-space-5); }
.baki-next__fact { display: flex; align-items: center; gap: var(--baki-space-2); }
.baki-next__fact-icon { color: var(--baki-highlight); flex-shrink: 0; }
.baki-next__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--baki-space-2); }

/* Righe compatte */
.baki-agenda-row { display: flex; align-items: center; gap: var(--baki-space-3); padding: var(--baki-space-2) 0; border-bottom: 1px solid var(--baki-gray-100); }
.baki-agenda-row:last-child { border-bottom: 0; }
.baki-agenda-row__time { font-weight: 800; color: var(--baki-title); min-width: 48px; font-variant-numeric: tabular-nums; }
.baki-agenda-row__text { flex: 1; min-width: 0; }

/* Gestisci appuntamento */
.baki-manage { display: flex; flex-direction: column; gap: var(--baki-space-4); }
.baki-manage__who { display: flex; align-items: center; gap: var(--baki-space-3); }
.baki-manage__name { font-size: var(--baki-text-xl); font-weight: 800; color: var(--baki-title); }
.baki-manage__facts { display: flex; flex-wrap: wrap; gap: var(--baki-space-3) var(--baki-space-6); }
.baki-manage__section { font-size: var(--baki-text-md); font-weight: 700; margin: 0 0 var(--baki-space-2); }
.baki-manage__note { background: var(--baki-sky-050); border-radius: var(--baki-radius-md); padding: var(--baki-space-3); font-size: var(--baki-text-sm); color: var(--baki-navy-700); }
.baki-manage__note--danger { background: var(--baki-danger-bg); color: var(--baki-ink-900); }
.baki-manage__details { display: grid; grid-template-columns: auto 1fr; margin: 0; border: 1px solid var(--baki-gray-100); border-radius: var(--baki-radius-md); overflow: hidden; font-size: var(--baki-text-sm); }
.baki-manage__details dt, .baki-manage__details dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--baki-gray-100); }
.baki-manage__details dt { color: var(--baki-gray-700); }
.baki-manage__details dd { text-align: right; font-weight: 600; color: var(--baki-title); }
.baki-manage__details dt:last-of-type, .baki-manage__details dd:last-of-type { border-bottom: 0; }
.baki-manage__actions { display: flex; flex-direction: column; gap: var(--baki-space-2); }

/* Esito (conferma / rifiuto) */
.baki-outcome { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--baki-space-2); margin-bottom: var(--baki-space-3); }
.baki-outcome__icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.baki-outcome__icon--success { background: var(--baki-success-bg); color: var(--baki-success); }
.baki-outcome__icon--danger { background: var(--baki-danger-bg); color: var(--baki-danger); }
.baki-outcome__title { font-size: var(--baki-text-xl); font-weight: 800; color: var(--baki-title); }

@media (max-width: 560px) {
    .baki-greeting__hello { font-size: var(--baki-text-xl); }
    .baki-dobloni-pill { padding: 4px 12px 4px 6px; }
    .baki-agenda-item { flex-wrap: wrap; }
    .baki-agenda-item__main { flex-basis: 100%; }
    .baki-day-overview__tiles { gap: var(--baki-space-2); }
    .baki-day-tile { grid-template-columns: auto 1fr; padding: var(--baki-space-2); }
    .baki-day-tile__icon { width: 40px; height: 40px; }
    .baki-day-tile__chevron { display: none; }
    .baki-agenda-row .baki-chip { display: none; }
    .baki-agenda-row { flex-wrap: wrap; }
    .baki-agenda-row__text { flex: 1 1 150px; }
    .baki-agenda-row > .baki-btn { margin-left: auto; }
}

/* =============================================================================
   App mobile — mockup 2026-10 (home cliente, menu, profilo, preferiti)
   ============================================================================= */
/* Righe di menu (Profilo, menu ☰) */
.baki-menu-section { background: var(--baki-surface); border-radius: var(--baki-radius-lg); box-shadow: var(--baki-shadow-soft); padding: var(--baki-space-3) var(--baki-space-4); }
.baki-menu-section__title { margin: var(--baki-space-1) 0 var(--baki-space-2); font-size: var(--baki-text-lg); font-weight: 700; color: var(--baki-ink-900); }
.baki-menu-section__rows { display: flex; flex-direction: column; }
.baki-menu-section__rows > * + * { border-top: 1px solid var(--baki-gray-100); }
.baki-menu-row { display: flex; align-items: center; gap: var(--baki-space-4); width: 100%; min-height: 60px; padding: var(--baki-space-2) 0;
                 border: 0; background: none; font-family: var(--baki-font); text-align: left; text-decoration: none; color: var(--baki-ink-900); cursor: pointer; }
.baki-menu-row.is-disabled { cursor: default; opacity: .6; }
.baki-menu-row__icon { color: var(--baki-ink-900); flex-shrink: 0; display: inline-flex; }
.baki-menu-row__icon.is-danger, .baki-menu-row__title.is-danger { color: var(--baki-danger); }
.baki-menu-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.baki-menu-row__title { font-size: var(--baki-text-md); font-weight: 600; }
.baki-menu-row__subtitle { font-size: var(--baki-text-sm); color: var(--baki-gray-700); }
.baki-menu-row__chevron { color: var(--baki-gray-500); flex-shrink: 0; }
.baki-menu-row__panel { padding: 0 0 var(--baki-space-4) calc(24px + var(--baki-space-4)); }

/* Titolo di pagina bicolore ("Pro" + "filo", mockup Profilo) */
.baki-page-title { margin: 0; font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--baki-ink-900); line-height: 1.05; }
.baki-page-title em { font-style: normal; color: var(--baki-highlight); }
.baki-page-subtitle { margin: var(--baki-space-1) 0 0; color: var(--baki-gray-700); }

/* Pulsante menu ☰ arancio/azzurro */
.baki-menu-button { width: 48px; height: 48px; border-radius: var(--baki-radius-md); border: 0; background: var(--baki-sky-050); display: inline-flex;
                    flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; position: relative; flex-shrink: 0; }
.baki-menu-button span { display: block; width: 24px; height: 3px; border-radius: 3px; background: var(--baki-highlight); }
.baki-menu-button span:last-child { background: var(--baki-primary); }
.baki-menu-button .baki-badge--counter { position: absolute; top: 2px; right: 2px; }

/* Pannello laterale del menu */
.baki-sheet-backdrop { position: fixed; inset: 0; z-index: 120; background: rgba(28, 42, 74, 0.45); display: flex; justify-content: flex-end; }
.baki-sheet { width: min(86vw, 360px); height: 100%; background: var(--baki-surface); padding: var(--baki-space-5) var(--baki-space-4);
              overflow-y: auto; box-shadow: var(--baki-shadow-raised); animation: baki-sheet-in .2s ease; }
.baki-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--baki-space-3); }
@keyframes baki-sheet-in { from { transform: translateX(24px); opacity: 0; } }

/* Home cliente */
.baki-home-hero { position: relative; text-align: center; }
.baki-home-hero__art { max-width: 340px; margin: 0 auto; }
.baki-home-hero__title { margin: var(--baki-space-2) 0 0; font-size: 2rem; font-weight: 500; color: var(--baki-primary); line-height: 1.15; }
.baki-home-hero__subtitle { margin: var(--baki-space-1) 0 0; color: var(--baki-primary-strong); font-size: var(--baki-text-sm); }
.baki-searchbar { display: flex; align-items: center; gap: var(--baki-space-2); padding: 8px 8px 8px 16px; border-radius: var(--baki-radius-lg);
                  background: var(--baki-surface); box-shadow: var(--baki-shadow-card); }
.baki-searchbar__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--baki-space-2); }
.baki-searchbar__field + .baki-searchbar__field { border-left: 1px solid var(--baki-gray-200); padding-left: var(--baki-space-3); }
.baki-searchbar__icon { color: var(--baki-highlight); flex-shrink: 0; }
.baki-searchbar__label { display: block; font-weight: 700; font-size: var(--baki-text-sm); color: var(--baki-title); }
.baki-searchbar__input { width: 100%; border: 0; padding: 0; font-family: var(--baki-font); font-size: var(--baki-text-xs); color: var(--baki-gray-700); background: transparent; }
.baki-searchbar__input:focus { outline: none; }
.baki-searchbar .baki-btn { flex-shrink: 0; }

.baki-customer-next { background: var(--baki-surface); border-radius: var(--baki-radius-lg); box-shadow: var(--baki-shadow-card); padding: var(--baki-space-4); }
.baki-customer-next__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--baki-space-3); }
.baki-customer-next__title { display: flex; align-items: center; gap: var(--baki-space-2); margin: 0; font-size: var(--baki-text-md); font-weight: 700; color: var(--baki-title); }
.baki-customer-next__body { display: grid; grid-template-columns: auto 1fr auto; gap: var(--baki-space-3); align-items: center; }
.baki-customer-next__qr { width: 64px; height: 64px; }
.baki-customer-next__qr svg { width: 100%; height: 100%; }
.baki-customer-next__code { font-size: 9px; letter-spacing: .08em; text-align: center; color: var(--baki-gray-700); }
.baki-customer-next__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--baki-space-2); margin-top: var(--baki-space-3); }

/* Preferiti */
.baki-fav-card { display: flex; align-items: center; gap: var(--baki-space-3); padding: var(--baki-space-3); border-radius: var(--baki-radius-lg);
                 background: var(--baki-surface); box-shadow: var(--baki-shadow-soft); text-decoration: none; color: inherit; }
.baki-fav-card__text { flex: 1; min-width: 0; }
.baki-heart { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--baki-surface); box-shadow: var(--baki-shadow-soft);
              display: inline-flex; align-items: center; justify-content: center; color: var(--baki-gray-500); cursor: pointer; flex-shrink: 0; }
.baki-heart.is-active { color: var(--baki-highlight); background: var(--baki-orange-050); }
.baki-heart.is-active svg { fill: currentColor; }
.baki-progress--highlight .baki-progress__bar { background: var(--baki-highlight); }