/* =====================================================
   MYCLOUD — STYLE.CSS  v3.8
   Apple Design System · Dark/Light · Responsive
   iPhone · iPad · PC
   Aggiornato: Aprile 2026
   ===================================================== */

/* --- VARIABILI --- */
:root {
    --bg-color:       #000000;
    --phone-bg:       #1c1c1e;
    --text-color:     #ffffff;
    --card-bg:        #2c2c2e;
    --nav-bg:         rgba(28, 28, 30, 0.96);
    --border-color:   rgba(255,255,255,0.1);
    --switch-bg:      #3a3a3c;
    --accent:         #0a84ff;
    --accent-hover:   #409cff;
    --danger:         #ff3b30;
    --success:        #34c759;
    --warning:        #ff9500;
    --text-secondary: rgba(255,255,255,0.45);
    --glass-bg:       rgba(255,255,255,0.06);
    --glass-border:   rgba(255,255,255,0.12);
    --bg-secondary:   rgba(255,255,255,0.04);
    --field-bg:       rgba(255,255,255,0.08);
    /* Button system: falls back to the existing application accent. */
    --area-color:     var(--hc-area-accent, var(--accent));
    --area-color-rgb: var(--hc-area-accent-rgb, 10, 132, 255);
    --area-contrast:  #ffffff;
}

/* =====================================================
   HUBCLOUD BUTTON SYSTEM
   The legacy shared navigation classes are included here while templates
   are progressively moved to the canonical hc-btn API.
   ===================================================== */
:where(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn, .exp-close-btn,
       .btn-salva, .btn-save, .exp-btn-save) {
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    color: inherit;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, background-color .15s ease,
                border-color .15s ease, box-shadow .15s ease,
                opacity .15s ease, transform .15s ease;
}

:where(.hc-btn-primary, .btn-nav-primary, .nav-pill-btn.is-primary,
       .btn-salva, .btn-save, .exp-btn-save) {
    background: var(--area-color);
    border-color: var(--area-color);
    color: var(--area-contrast);
}

:where(.hc-btn-secondary, .btn-nav, .nav-pill-btn:not(.is-primary):not(.outdoor-danger)) {
    background: rgba(var(--area-color-rgb), .09);
    border-color: rgba(var(--area-color-rgb), .48);
    color: var(--area-color);
}

:where(.hc-btn-ghost, .exp-close-btn) {
    background: transparent;
    border-color: transparent;
    color: var(--area-color);
}

.hc-btn-danger {
    background: rgba(255, 59, 48, .09);
    border-color: rgba(255, 59, 48, .42);
    color: var(--danger);
}

.hc-btn-danger.hc-btn-danger-primary {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.hc-btn-icon {
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
    flex: 0 0 44px;
}

.hc-btn-sm {
    min-height: 36px;
    padding-inline: 14px;
    border-radius: 18px;
    font-size: .82rem;
}

:where(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn, .exp-close-btn,
       .btn-salva, .btn-save, .exp-btn-save):hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
    filter: brightness(1.08);
}

:where(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn, .exp-close-btn,
       .btn-salva, .btn-save, .exp-btn-save):active:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
    transform: translateY(1px) scale(.98);
    filter: brightness(.94);
}

:where(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn, .exp-close-btn,
       .btn-salva, .btn-save, .exp-btn-save):focus-visible {
    outline: 3px solid rgba(var(--area-color-rgb), .48);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--phone-bg);
}

:where(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn, .exp-close-btn,
       .btn-salva, .btn-save, .exp-btn-save):disabled,
:where(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn, .exp-close-btn,
       .btn-salva, .btn-save, .exp-btn-save)[aria-disabled="true"],
:where(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn, .exp-close-btn,
       .btn-salva, .btn-save, .exp-btn-save).is-disabled {
    opacity: .48;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.hc-btn-group,
.page-actions,
.outdoor-actions,
.outdoor-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hc-btn > svg,
.hc-btn > img {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

@media (max-width: 600px) {
    :where(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn, .exp-close-btn,
           .btn-salva, .btn-save, .exp-btn-save) {
        min-height: 44px;
        padding-inline: 16px;
    }
}

/* Stili condivisi migrati da footer.php (1) */
.voice-overlay    { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:800; backdrop-filter:blur(8px); align-items:flex-end; justify-content:center; }
.voice-overlay.active { display:flex; }
.voice-panel      { background:var(--card-bg); border-radius:24px 24px 0 0; width:100%; max-width:500px; padding:12px 24px 44px; text-align:center; }
.voice-panel-handle { width:36px; height:4px; border-radius:2px; background:var(--border-color); margin:0 auto 20px; }

.voice-pulse-wrap { position:relative; width:80px; height:80px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; color:var(--accent); }
.voice-pulse      { position:absolute; inset:0; border-radius:50%; background:rgba(10,132,255,.15); animation:voice-pulse-anim 1.4s ease-in-out infinite; }
@keyframes voice-pulse-anim { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.25);opacity:.2} }

.voice-status-text { font-size:1rem; font-weight:700; margin-bottom:10px; }
.voice-transcript  { min-height:32px; font-size:.9rem; color:var(--text-secondary); font-style:italic; margin-bottom:20px; }
.voice-stop-btn    { background:none; border:1.5px solid var(--border-color); border-radius:20px; padding:8px 24px; font-family:inherit; font-size:.88rem; color:var(--text-secondary); cursor:pointer; }

.voice-result-icon  { font-size:2.4rem; margin-bottom:10px; }
.voice-result-title { font-size:1.05rem; font-weight:800; margin-bottom:6px; }
.voice-result-desc  { font-size:.88rem; color:var(--text-secondary); margin-bottom:20px; line-height:1.5; }
.voice-result-actions { display:flex; flex-direction:column; gap:10px; }
.voice-btn-confirm  { width:100%; padding:15px; background:var(--accent); color:#fff; border:none; border-radius:14px; font-family:inherit; font-size:1rem; font-weight:700; cursor:pointer; }
.voice-btn-cancel   { width:100%; padding:12px; background:none; border:none; font-family:inherit; font-size:.9rem; color:var(--text-secondary); cursor:pointer; }

.voice-suggerimenti  { text-align:left; background:var(--bg-secondary); border-radius:12px; padding:12px 14px; margin-bottom:18px; }
.voice-sug-title     { font-size:.72rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.voice-sug-item      { font-size:.82rem; color:var(--text-color); padding:4px 0; border-bottom:.5px solid var(--border-color); }
.voice-sug-item:last-child { border-bottom:none; }

/* Stili condivisi migrati da footer.php (2) */
.mc-help-float{
  position:fixed;
  right:16px;
  bottom:82px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(10,132,255,.96);
  color:#fff!important;
  text-decoration:none!important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  box-shadow:0 12px 32px rgba(0,0,0,.30);
  z-index:9999;
}
.mc-help-float:hover{transform:translateY(-1px);filter:brightness(1.08)}
@media(max-width:700px){.mc-help-float{right:14px;bottom:76px;width:46px;height:46px}}

/* Stili modulo migrati da dashboard_730.php */
.d730-page{
    padding:0 16px 24px;
}
.d730-actions{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:4px 0 14px;
    scrollbar-width:none;
}
.d730-actions::-webkit-scrollbar{display:none;}
.d730-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 14px;
    border-radius:999px;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    color:var(--text-color);
    font-size:.86rem;
    font-weight:800;
    white-space:nowrap;
    flex-shrink:0;
    box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.d730-pill-primary{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}
.d730-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:24px;
    padding:16px;
    margin-bottom:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.d730-filter-row{
    display:flex;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
}
.d730-filter-row::-webkit-scrollbar{display:none;}
.d730-control{
    background:var(--field-bg);
    color:var(--text-color);
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:11px 12px;
    font-family:inherit;
    font-size:.9rem;
    outline:none;
    min-width:110px;
}
.d730-btn{
    border:0;
    border-radius:14px;
    background:var(--accent);
    color:#fff;
    padding:11px 14px;
    font-size:.9rem;
    font-weight:900;
    font-family:inherit;
    white-space:nowrap;
}
.d730-kpi-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:10px;
    margin-bottom:14px;
}
.d730-kpi{
    background:linear-gradient(145deg,var(--card-bg),var(--bg-secondary));
    border:1px solid var(--border-color);
    border-radius:22px;
    padding:15px;
    min-height:105px;
}
.d730-kpi-wide{
    grid-column:1 / -1;
}
.d730-kpi-label{
    color:var(--text-secondary);
    font-size:.76rem;
    font-weight:800;
    margin-bottom:8px;
}
.d730-kpi-value{
    font-size:1.65rem;
    font-weight:950;
    letter-spacing:-1px;
}
.d730-kpi-sub{
    margin-top:5px;
    color:var(--text-secondary);
    font-size:.76rem;
    line-height:1.35;
}
.d730-person-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:10px;
    margin-bottom:14px;
}
.d730-section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}
.d730-section-title h3{
    margin:0;
    font-size:1.05rem;
}
.d730-note{
    color:var(--text-secondary);
    font-size:.78rem;
    line-height:1.45;
}
.d730-months{
    display:flex;
    align-items:flex-end;
    gap:7px;
    height:170px;
    padding:10px 0 0;
}
.d730-month{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    min-width:0;
}
.d730-bar{
    width:100%;
    max-width:28px;
    min-height:4px;
    border-radius:999px 999px 5px 5px;
    background:var(--accent);
    opacity:.88;
}
.d730-month-label{
    margin-top:7px;
    color:var(--text-secondary);
    font-size:.65rem;
    font-weight:800;
}
.d730-month-value{
    margin-bottom:6px;
    font-size:.64rem;
    color:var(--text-secondary);
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    max-height:58px;
    overflow:hidden;
}
.d730-cat-list,
.d730-recent-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.d730-cat-item,
.d730-recent-item{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--bg-secondary);
    border:1px solid var(--border-color);
    border-radius:18px;
    padding:12px;
}
.d730-thumb{
    width:44px;
    height:44px;
    border-radius:14px;
    background:rgba(10,132,255,.14);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    flex-shrink:0;
}
.d730-info{
    flex:1;
    min-width:0;
}
.d730-title{
    font-size:.92rem;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.d730-meta{
    margin-top:3px;
    color:var(--text-secondary);
    font-size:.74rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.d730-side{
    text-align:right;
    flex-shrink:0;
    font-weight:900;
}
.d730-progress{
    margin-top:8px;
    height:7px;
    background:var(--bg-secondary);
    border-radius:999px;
    overflow:hidden;
}
.d730-progress span{
    display:block;
    height:100%;
    background:var(--accent);
    border-radius:999px;
}
.d730-empty{
    text-align:center;
    color:var(--text-secondary);
    padding:24px 10px;
}
@media(max-width:600px){
    .d730-page{padding:0 12px 18px;}
    .d730-kpi-grid{grid-template-columns:1fr;}
    .d730-kpi-value{font-size:1.5rem;}
    .d730-card{border-radius:22px;}
    .d730-months{height:150px;gap:5px;}
    .d730-month-value{display:none;}
}

/* Stili modulo migrati da dispensa.php */
/* Patch dispensa: righe visibili e quantità intere */
.inv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    margin: 10px 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    cursor: pointer;
}
.inv-item:hover { background: rgba(255,255,255,.07); }
.inv-item-title { font-weight: 700; color: var(--text-color); margin-bottom: 4px; }
.inv-item-meta { font-size: .86rem; color: var(--text-secondary, #9ca3af); }
.inv-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 76px; }
.inv-item-qty { font-weight: 800; color: var(--text-primary, #fff); background: rgba(0,122,255,.16); border: 1px solid rgba(0,122,255,.35); padding: 5px 10px; border-radius: 999px; }
.inv-item-status { font-size: .76rem; padding: 4px 8px; border-radius: 999px; }
.inv-item-status.scaduto { background: rgba(255,59,48,.15); color: #ff6b61; }
.inv-item-status.in_scadenza { background: rgba(255,204,0,.15); color: #ffd45a; }
.inv-item-status.da_comprare { background: rgba(52,199,89,.15); color: #5ee07d; border: 1px solid rgba(52,199,89,.25); }
.inv-item-status.offerta { background: rgba(175,82,222,.16); color: #d9a8ff; border: 1px solid rgba(175,82,222,.30); }
.inv-item-status.offerta.scaduta { background: rgba(142,142,147,.16); color: #b8b8c0; border-color: rgba(142,142,147,.28); }
.inv-alert-pill.da-comprare { background: rgba(52,199,89,.15); color: #5ee07d; }
.inv-alert-pill.offerta { background: rgba(175,82,222,.14); color: #d9a8ff; border: 1px solid rgba(175,82,222,.3); }
.inv-alert-pill { text-decoration: none; }
.inv-alert-pill.active { box-shadow: inset 0 0 0 1px currentColor; }
.inv-shopping-cta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 16px 12px; padding:11px 14px; border:1px solid rgba(52,199,89,.35); border-radius:14px; background:rgba(52,199,89,.12); color:#5ee07d; font-size:.86rem; text-decoration:none; }
.inv-shopping-cta span:first-child { font-weight:800; }
.inv-shopping-cta span:last-child { color:var(--text-secondary); font-size:.78rem; }
.inv-shopping-cta strong { color:#5ee07d; }
.inv-offer-filters { display:flex; gap:8px; margin:0 16px 12px; overflow-x:auto; }
.inv-offer-filters a { padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--text-secondary); font-size:.82rem; text-decoration:none; white-space:nowrap; }
.inv-offer-filters a.active { color:#d9a8ff; background:rgba(175,82,222,.16); box-shadow:inset 0 0 0 1px rgba(175,82,222,.3); }
.inv-offer-summary { display:flex; flex-wrap:wrap; gap:5px 10px; margin:0 14px 10px 56px; padding:8px 10px; border-radius:10px; background:rgba(175,82,222,.09); color:#d9a8ff; font-size:.78rem; }
.inv-offer-summary strong, .inv-offer-summary span { font-weight:700; }
.inv-offer-summary.is-expired { background:rgba(142,142,147,.12); color:#b8b8c0; }
.inv-offer-toggle label { display:flex; align-items:center; gap:8px; font-weight:700; color:var(--text-primary); }
.inv-filter-status { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 16px 6px;padding:10px 12px;border:.5px solid var(--border-color);border-radius:12px;background:var(--bg-secondary);color:var(--text-secondary);font-size:.84rem; }
.inv-filter-status a { color:var(--accent);font-weight:700;text-decoration:none;white-space:nowrap; }
.inv-shopping-actions { flex:0 0 230px;padding-left:12px;border-left:.5px solid var(--border-color); }
.inv-shopping-actions > label { display:block;margin-bottom:6px;color:var(--text-secondary);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em; }
.inv-shopping-controls { display:flex;align-items:center;gap:8px; }
.inv-shopping-qty { width:66px;min-height:38px;padding:7px 8px;border:.5px solid var(--border-color);border-radius:10px;background:var(--bg-secondary);color:var(--text-color);font:inherit;font-weight:700;text-align:center; }
.inv-shopping-bought { min-height:38px;padding:8px 12px;border:1px solid rgba(52,199,89,.35);border-radius:10px;background:rgba(52,199,89,.15);color:#34c759;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer; }
.inv-shopping-bought:disabled { cursor:wait;opacity:.55; }
.inv-shopping-error { display:block;margin-top:5px;color:var(--danger);font-size:.72rem; }
@media (max-width: 700px) {
    .inv-item { flex-wrap:wrap; }
    .inv-shopping-actions { flex:1 0 100%;padding:10px 0 0;border-left:0;border-top:.5px solid var(--border-color); }
    .inv-shopping-controls { justify-content:space-between; }
    .inv-shopping-bought { flex:1; }
}
.inv-help-text { margin-top: 6px; font-size: .78rem; color: var(--text-secondary, #9ca3af); }
.inv-barcode-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.inv-form-input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.inv-form-input[type="number"]::-webkit-outer-spin-button,
.inv-form-input[type="number"]::-webkit-inner-spin-button,
.inv-qty-input::-webkit-outer-spin-button,
.inv-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Stili modulo migrati da help_mycloud.php */
.hc-help-fab{position:fixed;right:18px;bottom:78px;width:52px;height:52px;border-radius:50%;background:#0a84ff;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 14px 34px rgba(0,0,0,.28);z-index:50}
.help-wrap{max-width:980px;margin:auto;padding:24px}
.help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.help-card{display:block;text-decoration:none;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:18px;color:inherit}
.help-card strong{display:block;font-size:18px;margin-bottom:8px}
.help-card span{display:block;color:rgba(255,255,255,.62);font-size:13px;line-height:1.5}
@media(max-width:800px){.help-grid{grid-template-columns:1fr}.help-wrap{padding:16px}}

/* Stili modulo migrati da import_massivo_730.php */

.r730m-page{
    padding:0 16px 24px;
}

.r730m-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:24px;
    padding:16px;
    margin-bottom:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.r730m-kpi-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
    margin-bottom:14px;
}

.r730m-kpi{
    background:linear-gradient(145deg,var(--card-bg),var(--bg-secondary));
    border:1px solid var(--border-color);
    border-radius:20px;
    padding:14px;
}

.r730m-kpi-label{
    color:var(--text-secondary);
    font-size:.76rem;
    font-weight:700;
    margin-bottom:7px;
}

.r730m-kpi-value{
    font-size:1.35rem;
    font-weight:900;
}

.r730m-top{
    display:flex;
    align-items:center;
    gap:12px;
}

.r730m-icon{
    width:54px;
    height:54px;
    border-radius:18px;
    background:rgba(10,132,255,.14);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.7rem;
    flex-shrink:0;
}

.r730m-title h3{
    margin:0;
    font-size:1.2rem;
}

.r730m-title p{
    margin:3px 0 0;
    color:var(--text-secondary);
    font-size:.82rem;
}

.r730m-actions{
    display:flex;
    gap:10px;
    margin-top:16px;
    flex-wrap:wrap;
}
.r730m-form { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.r730m-card-title { margin-top: 0; }

.r730m-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:16px;
    background:var(--accent);
    color:#fff;
    padding:12px 16px;
    font-size:.92rem;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
}

.r730m-btn-secondary{
    background:var(--bg-secondary);
    color:var(--text-color);
    border:1px solid var(--border-color);
}

.r730m-btn:active{
    opacity:.75;
    transform:scale(.98);
}

.r730m-select{
    background:var(--field-bg);
    color:var(--text-color);
    border:1px solid var(--border-color);
    border-radius:16px;
    padding:12px 14px;
    font-family:inherit;
    font-size:.92rem;
}

.r730m-hint{
    margin-top:12px;
    color:var(--text-secondary);
    font-size:.8rem;
    line-height:1.45;
}

.r730m-hint code{
    background:var(--bg-secondary);
    border:1px solid var(--border-color);
    padding:3px 6px;
    border-radius:8px;
}

.r730m-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.r730m-item{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--bg-secondary);
    border:1px solid var(--border-color);
    border-radius:18px;
    padding:12px;
}

.r730m-thumb{
    width:44px;
    height:44px;
    border-radius:14px;
    background:rgba(10,132,255,.14);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    flex-shrink:0;
}

.r730m-info{
    flex:1;
    min-width:0;
}

.r730m-file{
    font-size:.9rem;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.r730m-meta{
    margin-top:3px;
    color:var(--text-secondary);
    font-size:.74rem;
}

.r730m-side{
    text-align:right;
    flex-shrink:0;
}

.r730m-badge{
    display:inline-block;
    padding:4px 8px;
    border-radius:999px;
    font-size:.68rem;
    font-weight:800;
    background:rgba(10,132,255,.12);
    color:var(--accent);
    margin-top:5px;
}

.r730m-empty{
    text-align:center;
    padding:26px 14px;
    color:var(--text-secondary);
}

.r730m-empty-icon{
    font-size:2rem;
    margin-bottom:8px;
}

@media(max-width:650px){

    .r730m-page{
        padding:0 12px 18px;
    }

    .r730m-kpi-grid{
        grid-template-columns:1fr;
    }

    .r730m-actions{
        flex-direction:column;
    }

    .r730m-btn,
    .r730m-select{
        width:100%;
    }

    .r730m-card{
        border-radius:22px;
    }
}

/* Stili modulo migrati da orari_lavoro.php */
.timb-inc-card{
    background:rgba(255,149,0,.10);
    border:1px solid rgba(255,149,0,.32);
    border-radius:18px;
    padding:14px 16px;
    margin:14px 0;
}
.timb-inc-meta{
    font-size:.72rem;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:8px;
}
.timb-inc-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-weight:800;
    color:var(--text-color);
    margin-bottom:8px;
}
.timb-inc-count{
    font-size:.9rem;
    color:#ff9500;
    font-weight:900;
}
.timb-inc-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding:9px 0;
    border-top:1px solid var(--border-color);
}
.timb-inc-row:first-of-type{border-top:none}
.timb-inc-date{
    font-weight:750;
    font-size:.88rem;
}
.timb-inc-detail{
    font-size:.78rem;
    color:var(--text-secondary);
    line-height:1.35;
    margin-top:2px;
}
.timb-inc-action{
    border:0;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    padding:6px 10px;
    font-size:.74rem;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.timb-mancanze-mini{
    margin-top:3px;
    font-size:.50rem;
    line-height:1.15;
    color:#ff9500;
    font-weight:800;
}

/* Stili modulo migrati da ricevute_730.php */
/* =====================================================
   RICEVUTE 730 — UI integrata MyCloud
   ===================================================== */

.r730-page {
    padding: 0 16px 22px;
}

.r730-actions {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0 14px;
    scrollbar-width: none;
}
.r730-actions::-webkit-scrollbar { display: none; }

.r730-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: .86rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.r730-pill-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.r730-pill:active { opacity: .75; transform: scale(.98); }

.r730-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.r730-alert {
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: .9rem;
    font-weight: 600;
}
.r730-alert-ok {
    background: rgba(52,199,89,.13);
    color: var(--success);
    border: 1px solid rgba(52,199,89,.25);
}
.r730-alert-err {
    background: rgba(255,59,48,.12);
    color: var(--danger);
    border: 1px solid rgba(255,59,48,.25);
}

.r730-kpi-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.r730-kpi {
    background: linear-gradient(145deg, var(--card-bg), var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 14px;
    min-height: 92px;
}
.r730-kpi-label {
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.r730-kpi-value {
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -.8px;
}
.r730-kpi-sub {
    font-size: .76rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.r730-form-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.r730-form-title-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(10,132,255,.14);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}
.r730-form-title h3 {
    font-size: 1.05rem;
    margin: 0;
}
.r730-form-title p {
    margin: 2px 0 0;
    color: var(--text-secondary);
    font-size: .78rem;
}

.r730-upload-grid {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 10px;
    align-items: center;
}
.r730-control {
    width: 100%;
    background: var(--field-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 11px 12px;
    font-family: inherit;
    font-size: .9rem;
    outline: none;
}
.r730-control:focus {
    border-color: var(--accent);
}
.r730-file {
    background: var(--field-bg);
    border: 1px dashed var(--border-color);
}
.r730-btn {
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    color: #fff;
    padding: 12px 15px;
    font-size: .9rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.r730-btn:active { opacity: .75; transform: scale(.98); }

.r730-hint {
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.4;
}
.r730-hint code {
    color: var(--text-color);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 2px 5px;
    border-radius: 7px;
    font-size: .78rem;
}

.r730-filter-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.r730-filter-row::-webkit-scrollbar { display: none; }
.r730-filter-row .r730-control {
    min-width: 108px;
    flex: 0 0 auto;
}
.r730-search {
    min-width: 170px !important;
    flex: 1 0 170px !important;
}
.r730-filter-btn {
    min-width: 76px;
    flex-shrink: 0;
}

.r730-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.r730-item {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 13px;
    color: var(--text-color);
    transition: transform .15s, border-color .15s, background .15s;
}
.r730-item:active {
    transform: scale(.985);
    background: var(--bg-secondary);
}
.r730-thumb {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: rgba(10,132,255,.14);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.r730-info {
    flex: 1;
    min-width: 0;
}
.r730-title {
    font-size: .95rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.r730-meta {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.r730-tags {
    display: flex;
    gap: 6px;
    margin-top: 7px;
    flex-wrap: wrap;
}
.r730-tag {
    font-size: .68rem;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.r730-tag-blue {
    background: rgba(10,132,255,.12);
    color: var(--accent);
    border-color: rgba(10,132,255,.25);
}
.r730-side {
    text-align: right;
    flex-shrink: 0;
}
.r730-amount {
    font-size: .96rem;
    font-weight: 900;
    margin-bottom: 7px;
}
.r730-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--accent);
    font-size: .72rem;
    font-weight: 800;
    border: 1px solid var(--border-color);
}

.r730-empty {
    text-align: center;
    padding: 28px 14px;
    color: var(--text-secondary);
}
.r730-empty-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}


.r730-upload-grid-ios {
    grid-template-columns: 120px 1fr auto;
}

.r730-picker-wrap {
    min-width: 0;
}

.r730-native-file {
    display: block;
    width: 100%;
    min-height: 54px;
    background: var(--field-bg);
    color: var(--text-color);
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    padding: 10px;
    font-family: inherit;
    font-size: .86rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.r730-native-file::file-selector-button {
    border: 0;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    padding: 9px 12px;
    margin-right: 10px;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}

.r730-native-file::-webkit-file-upload-button {
    border: 0;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    padding: 9px 12px;
    margin-right: 10px;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}

.r730-picked-name {
    margin-top: 7px;
    color: var(--text-secondary);
    font-size: .74rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    .r730-page {
        padding: 0 12px 18px;
    }
    .r730-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
    .r730-kpi:first-child {
        grid-column: 1 / -1;
    }
    .r730-upload-grid,
    .r730-upload-grid-ios {
        grid-template-columns: 1fr;
    }
    .r730-btn {
        width: 100%;
    }
    .r730-card {
        border-radius: 20px;
        padding: 14px;
    }
    .r730-item {
        padding: 12px;
    }
    .r730-thumb {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }
    .r730-title {
        font-size: .9rem;
    }
    .r730-side {
        min-width: 74px;
    }
    .r730-amount {
        font-size: .88rem;
    }
}

/* =====================================================
   HUBCLOUD — AZIONI SECONDARIE CONDIVISE
   Un solo pulsante ••• e un solo linguaggio per i menu.
   ===================================================== */
.hc-more-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: .5px solid var(--border-color) !important;
    border-radius: 50% !important;
    background: var(--bg-secondary) !important;
    color: var(--accent) !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.hc-more-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary)) !important;
}
.hc-more-btn:active {
    transform: scale(.92) !important;
    opacity: .82 !important;
}

.apple-action-sheet-overlay,
.task-action-overlay {
    background: rgba(0,0,0,.52) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
.apple-action-sheet,
.task-action-sheet {
    width: calc(100% - 20px) !important;
    max-width: 430px !important;
    padding: 0 0 max(10px, env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
}
.apple-action-sheet-group,
.task-action-group,
.task-action-cancel {
    border: .5px solid var(--border-color) !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--card-bg) 94%, transparent) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(26px) !important;
    -webkit-backdrop-filter: blur(26px) !important;
}
.apple-action-button,
.task-action-group button,
.task-action-cancel {
    min-height: 56px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-top: .5px solid var(--border-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--accent) !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
}
.apple-action-button:first-of-type,
.task-action-group button:first-child,
.task-action-cancel {
    border-top: 0 !important;
}
.apple-action-button.destructive,
.task-action-group .is-destructive,
.task-edit-delete {
    color: var(--danger) !important;
}
.apple-action-button.cancel,
.task-action-cancel {
    font-weight: 850 !important;
}

.task-edit-actions .btn-save,
.task-edit-actions .task-edit-delete,
.task-edit-actions .btn-cancel {
    min-height: 46px !important;
    border-radius: 14px !important;
    font-family: inherit !important;
    font-size: .95rem !important;
    font-weight: 800 !important;
}

@media (min-width: 768px) {
    .apple-action-sheet-overlay,
    .task-action-overlay {
        align-items: center !important;
    }
    .apple-action-sheet,
    .task-action-sheet {
        padding-bottom: 0 !important;
    }
}

/* =====================================================
   Diario — consultazione quotidiana
   ===================================================== */
.dia-today-card {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 4px 20px 14px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--hc-area-accent, var(--accent)) 30%, var(--border-color));
    border-radius: 18px;
    background: color-mix(in srgb, var(--hc-area-accent, var(--accent)) 8%, var(--card-bg));
}
.dia-today-date {
    color: var(--hc-area-accent, var(--accent));
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.dia-today-mood { font-size: 1.45rem; line-height: 1; }
.dia-today-content { min-width: 0; }
.dia-today-content strong,
.dia-today-content span { display: block; }
.dia-today-content strong { color: var(--text-color); font-size: .9rem; }
.dia-today-content span {
    margin-top: 2px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dia-filter-toggle {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--hc-area-accent, var(--accent)) 35%, var(--border-color));
    border-radius: 10px;
    background: transparent;
    color: var(--hc-area-accent, var(--accent));
    font: inherit;
    font-size: .75rem;
    font-weight: 750;
    cursor: pointer;
}
.dia-filter-panel {
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto;
    gap: 10px;
    align-items: end;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-bg);
}
.dia-filter-panel.is-open { display: grid; }
.dia-filter-panel label {
    display: grid;
    gap: 5px;
    color: var(--text-secondary);
    font-size: .7rem;
    font-weight: 750;
}
.dia-filter-panel select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
}

.dia-month-toggle {
    width: calc(100% - 40px);
    min-height: 44px;
    margin: 4px 20px 2px;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font: inherit;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-align: left;
    cursor: pointer;
}
.dia-month-chevron { font-size: 1.1rem; transition: transform .18s ease; }
.dia-month-toggle[aria-expanded="false"] .dia-month-chevron { transform: rotate(-90deg); }

.dia-entry-preview {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.voce-wrap[data-umore] { border-left: 4px solid transparent; }
.voce-wrap.dia-mood-1 { border-left-color: #b71c1c; }
.voce-wrap.dia-mood-2 { border-left-color: #d32f2f; }
.voce-wrap.dia-mood-3 { border-left-color: #ef5350; }
.voce-wrap.dia-mood-4 { border-left-color: #ff9800; }
.voce-wrap.dia-mood-5 { border-left-color: #90a4ae; }
.voce-wrap.dia-mood-6 { border-left-color: #8e8e93; }
.voce-wrap.dia-mood-7 { border-left-color: #4db6ac; }
.voce-wrap.dia-mood-8 { border-left-color: #8bc34a; }
.voce-wrap.dia-mood-9 { border-left-color: #ffb300; }
.voce-wrap.dia-mood-10 { border-left-color: #f59e0b; }
.dia-empty-state { gap: 8px; }
.dia-empty-state strong { color: var(--text-color); font-size: 1rem; }
.dia-empty-state .btn-nav-primary { margin-top: 6px; }

@media (max-width: 700px) {
    .dia-today-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 9px;
        margin: 4px 12px 12px;
        padding: 12px;
    }
    .dia-today-mood { grid-row: 1 / span 2; }
    .dia-today-date { grid-column: 2; }
    .dia-today-content { grid-column: 2; }
    .dia-today-card > .btn-nav-primary { grid-column: 3; grid-row: 1 / span 2; }
    .dia-filter-panel { grid-template-columns: minmax(0, 1fr); }
    .dia-filter-panel .btn-nav,
    .dia-filter-panel .btn-nav-primary { width: 100%; justify-content: center; }
    .dia-month-toggle { width: calc(100% - 24px); margin-right: 12px; margin-left: 12px; }
    .voce-row { align-items: flex-start; gap: 8px; padding-right: 8px; }
    .voce-emos { display: none; }
    .voce-more-btn { min-width: 44px; padding: 0 10px; }
}

@media (min-width: 768px) {
    .dia-today-card { margin-right: 28px; margin-left: 28px; }
    .dia-month-toggle { width: calc(100% - 56px); margin-right: 28px; margin-left: 28px; }
}

/* Stili modulo migrati da visualizza_730.php */
.r730v-page{
    padding:0 16px 24px;
}
.r730v-hero{
    background:linear-gradient(145deg,var(--card-bg),var(--bg-secondary));
    border:1px solid var(--border-color);
    border-radius:26px;
    padding:18px;
    margin-bottom:14px;
    box-shadow:0 8px 28px rgba(0,0,0,.10);
}
.r730v-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
}
.r730v-icon{
    width:64px;
    height:64px;
    border-radius:21px;
    background:rgba(10,132,255,.14);
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    flex-shrink:0;
}
.r730v-main{
    flex:1;
    min-width:0;
}
.r730v-title{
    font-size:1.28rem;
    font-weight:900;
    letter-spacing:-.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.r730v-subtitle{
    margin-top:4px;
    color:var(--text-secondary);
    font-size:.84rem;
    line-height:1.35;
}
.r730v-amount{
    font-size:2.05rem;
    font-weight:950;
    letter-spacing:-1.2px;
    margin:4px 0 12px;
}
.r730v-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-bottom:16px;
}
.r730v-field{
    background:var(--bg-secondary);
    border:1px solid var(--border-color);
    border-radius:17px;
    padding:12px;
    min-width:0;
}
.r730v-label{
    color:var(--text-secondary);
    font-size:.72rem;
    font-weight:800;
    margin-bottom:5px;
}
.r730v-value{
    font-size:.92rem;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.r730v-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.r730v-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:0;
    border-radius:17px;
    background:var(--accent);
    color:#fff;
    padding:14px 16px;
    font-size:.95rem;
    font-weight:900;
    text-decoration:none;
}
.r730v-btn-secondary{
    background:var(--bg-secondary);
    color:var(--text-color);
    border:1px solid var(--border-color);
}
.r730v-btn:active{
    opacity:.75;
    transform:scale(.985);
}
.r730v-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:22px;
    padding:16px;
    margin-bottom:14px;
}
.r730v-preview{
    text-align:center;
    padding:30px 16px;
}
.r730v-preview-icon{
    width:86px;
    height:110px;
    border-radius:18px;
    margin:0 auto 14px;
    background:linear-gradient(180deg,rgba(10,132,255,.18),rgba(10,132,255,.07));
    border:1px solid rgba(10,132,255,.22);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2.5rem;
}
.r730v-preview-title{
    font-weight:900;
    font-size:1.05rem;
    margin-bottom:6px;
}
.r730v-preview-text{
    color:var(--text-secondary);
    font-size:.84rem;
    line-height:1.45;
}
.r730v-file{
    margin-top:12px;
    padding:10px 12px;
    border-radius:14px;
    background:var(--bg-secondary);
    border:1px solid var(--border-color);
    color:var(--text-secondary);
    font-size:.76rem;
    word-break:break-all;
}
@media(max-width:600px){
    .r730v-page{padding:0 12px 18px;}
    .r730v-hero{border-radius:24px;padding:16px;}
    .r730v-grid{grid-template-columns:1fr;}
    .r730v-icon{width:58px;height:58px;border-radius:19px;}
    .r730v-title{font-size:1.15rem;}
    .r730v-amount{font-size:1.85rem;}
}

[data-theme="light"] {
    --bg-color:       #e5e5ea;
    --phone-bg:       #f2f2f7;
    --text-color:     #1c1c1e;
    --card-bg:        #ffffff;
    --nav-bg:         rgba(242,242,247,0.96);
    --border-color:   rgba(0,0,0,0.1);
    --switch-bg:      #d1d1d6;
    --text-secondary: rgba(28,28,30,0.45);
    --glass-bg:       rgba(0,0,0,0.03);
    --glass-border:   rgba(0,0,0,0.08);
    --bg-secondary:   rgba(0,0,0,0.04);
    --field-bg:       rgba(0,0,0,0.06);
}

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    min-height: 100dvh;
}
body.body-lock { overflow: hidden; }

body:has(.phone-window) {
    display: flex;
    justify-content: center;
    align-items: center;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* =====================================================
   PHONE WINDOW
   ===================================================== */
.phone-window {
    width: 680px;
    max-width: 96vw;
    height: 86vh;
    height: 86dvh;
    background: var(--phone-bg);
    border-radius: 38px;
    border: 1px solid var(--border-color);
    border-right: 10px solid var(--hc-shell-blue) !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

/* =====================================================
   MAIN APP
   ===================================================== */
.main-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-color);
}

.hc-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hc-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px;
}

/* =====================================================
   NAVBAR
   ===================================================== */
.top-nav-home {
    height: 62px;
    padding: 0 20px;
    background: var(--nav-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid var(--border-color);
    z-index: 100;
    flex-shrink: 0;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    position: sticky;
    top: 0;
}

.nav-left  { display: flex; align-items: center; gap: 4px; min-width: 0; }
.nav-right { display: flex; align-items: center; gap: 10px; min-width: 0; }

.hc-brand       { display: flex; align-items: baseline; letter-spacing: -0.5px; line-height: 1; }
.hc-brand-my    { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.hc-brand-cloud { font-size: 1.5rem; font-weight: 800; color: var(--text-color); }

/* ── Tasto AI header ─────────────────────────────────────────────── */
.ai-header-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
    position: relative;
    transition: none;
    white-space: nowrap;
}
.ai-header-btn svg {
    flex-shrink: 0;
}
.ai-header-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.82);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 999;
}
.ai-header-btn-wrap {
    position: relative;
    display: inline-flex;
    cursor: not-allowed;
}
.ai-header-btn-wrap:hover .ai-header-tooltip,
.ai-header-btn-wrap:focus-within .ai-header-tooltip {
    opacity: 1;
}

.nav-pill-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.18s, border-color 0.18s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    white-space: nowrap;
}
.nav-pill-btn:hover  { background: rgba(10,132,255,0.12); border-color: rgba(10,132,255,0.35); }
.nav-pill-btn:active { opacity: 0.75; }

.back-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(10,132,255,0.12);
    border: 1px solid rgba(10,132,255,0.3);
    border-radius: 16px;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s, border-color 0.18s;
}
.back-pill:hover  { background: rgba(10,132,255,0.2); border-color: rgba(10,132,255,0.5); }
.back-pill:active { opacity: 0.75; }

.nav-user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.nav-user-dot  { width: 7px; height: 7px; background: var(--success); border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px var(--success); }
.nav-user-name { font-size: 0.88rem; font-weight: 600; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-logout-btn { display: flex; align-items: center; color: var(--text-secondary); transition: color 0.15s; padding: 2px; }
.nav-logout-btn:hover { color: var(--danger); }

/* =====================================================
   HUBCLOUD STANDARD — THEME SWITCH
   Unica implementazione condivisa per header e Home
   ===================================================== */
.theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 38px;
    flex: 0 0 74px;
    border: 0;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.theme-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.theme-switch .slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(230,238,249,.92));
    border: 1px solid rgba(255,255,255,.86);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.82),
        inset 0 -1px 2px rgba(15,23,42,.08),
        0 8px 22px rgba(0,0,0,.22);
    overflow: hidden;
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.theme-switch .slider::before,
.theme-switch .slider::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    line-height: 1;
    pointer-events: none;
    transition: opacity .22s ease, color .22s ease;
}
.theme-switch .slider::before {
    content: "\2600";
    left: 12px;
    font-size: 21px;
    color: #ffb300;
    text-shadow: 0 1px 4px rgba(255,179,0,.22);
}
.theme-switch .slider::after {
    content: "\263E";
    right: 13px;
    font-size: 20px;
    color: #172033;
    opacity: .55;
}
.theme-switch .knob {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.98);
    box-shadow:
        0 5px 16px rgba(15,23,42,.28),
        inset 0 1px 1px rgba(255,255,255,.95);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .24s cubic-bezier(.2,.8,.2,1), background .22s ease;
}
.theme-switch .knob::after {
    content: "\2600";
    display: block;
    font-size: 18px;
    line-height: 1;
    color: #ffb300;
    transition: color .22s ease, content .22s ease;
}
.theme-switch input:checked + .slider {
    background: linear-gradient(135deg, rgba(10,24,39,.96), rgba(24,43,61,.90));
    border-color: rgba(255,255,255,.18);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.08),
        inset 0 -1px 2px rgba(0,0,0,.45),
        0 8px 22px rgba(0,0,0,.34);
}
.theme-switch input:checked + .slider::before { opacity: .95; }
.theme-switch input:checked + .slider::after { opacity: 0; }
.theme-switch input:checked + .slider .knob {
    transform: translateX(36px);
    background: #0f1720;
}
.theme-switch input:checked + .slider .knob::after {
    content: "\263E";
    color: #ffffff;
    font-size: 20px;
}

@media (max-width: 600px) {
    .theme-switch {
        width: 64px;
        height: 34px;
        flex-basis: 64px;
    }
    .theme-switch .knob {
        width: 26px;
        height: 26px;
        top: 4px;
        left: 4px;
    }
    .theme-switch .slider::before { left: 10px; font-size: 18px; }
    .theme-switch .slider::after { right: 11px; font-size: 18px; }
    .theme-switch .knob::after { font-size: 16px; }
    .theme-switch input:checked + .slider .knob { transform: translateX(30px); }
}


/* =====================================================
   TAB BAR (footer)
   ===================================================== */
.hc-tab-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0 max(14px, env(safe-area-inset-bottom));
    background: var(--nav-bg);
    border-top: 0.5px solid var(--border-color);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-shrink: 0;
}

.hc-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    background: none;
    border: none;
    padding: 4px 0;
    flex: 1;
    font-family: inherit;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.hc-tab svg { width: 24px; height: 24px; stroke-width: 1.7; }
.hc-tab.hc-tab-active,
.hc-tab:hover { color: var(--accent); }
button.hc-tab { color: var(--text-secondary); cursor: pointer; }

/* =====================================================
   SCROLL AREA
   ===================================================== */
.hc-scroll {
    flex: 1;
    overflow-y: auto;
}
.hc-scroll,
.hc-content,
.hc-sheet {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

@media (hover: hover) and (pointer: fine) {
    .hc-scroll,
    .hc-content {
        scrollbar-width: thin;
        scrollbar-color: rgba(10,132,255,.72) transparent;
    }

    .hc-scroll::-webkit-scrollbar,
    .hc-content::-webkit-scrollbar {
        display: block;
        width: 7px;
    }

    .hc-scroll::-webkit-scrollbar-track,
    .hc-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .hc-scroll::-webkit-scrollbar-thumb,
    .hc-content::-webkit-scrollbar-thumb {
        min-height: 36px;
        border: 2px solid transparent;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(64,156,255,.94), rgba(10,132,255,.64));
        background-clip: padding-box;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
    }

    .hc-scroll::-webkit-scrollbar-thumb:hover,
    .hc-content::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(100,181,255,.98), rgba(10,132,255,.82));
        background-clip: padding-box;
    }
}

/* =====================================================
   HOME — sezioni classiche
   ===================================================== */
.hc-container       { padding: 22px 20px 10px; }
.hc-container-notop { padding-top: 4px; }
.hc-title           { font-size: 1.3rem; font-weight: 800; margin: 0 20px 12px; letter-spacing: -0.4px; }

.hc-icon-row   { display: flex; justify-content: space-around; align-items: flex-start; padding: 0 4px 8px; gap: 8px; }
.hc-icon-item  { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--text-color); flex: 1; max-width: 140px; -webkit-tap-highlight-color: transparent; }
.hc-icon-circle { width: 82px; height: 82px; border-radius: 22px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.35); transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s ease; flex-shrink: 0; background: var(--card-bg); }
.hc-icon-circle img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.hc-icon-item:active .hc-icon-circle { transform: scale(0.86); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.hc-icon-label { font-size: 0.8rem; font-weight: 500; text-align: center; color: var(--text-color); line-height: 1.2; }

.hc-archive-list { display: flex; flex-direction: column; gap: 10px; }
.hc-archive-card { display: flex; align-items: center; background: var(--card-bg); border: 0.5px solid var(--border-color); border-radius: 16px; overflow: hidden; color: var(--text-color); transition: transform 0.15s ease, opacity 0.15s; min-height: 76px; }
.hc-archive-card:active { transform: scale(0.97); opacity: 0.85; }
.hc-archive-img  { width: 76px; height: 76px; flex-shrink: 0; overflow: hidden; }
.hc-archive-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-archive-info { flex: 1; padding: 0 16px; }
.hc-archive-name { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.hc-archive-desc { font-size: 0.82rem; color: var(--text-secondary); }

/* =====================================================
   LOGIN MODAL
   ===================================================== */
.lm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9900;
    justify-content: center;
    align-items: flex-end;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.lm-sheet {
    width: 100%;
    max-width: 500px;
    background: rgba(30,30,33,0.97);
    border-radius: 28px 28px 0 0;
    padding: 16px 28px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.32,1,0.23,1);
    border-top: 0.5px solid rgba(255,255,255,0.12);
}
[data-theme="light"] .lm-sheet { background: rgba(242,242,247,0.98); border-top: 0.5px solid rgba(0,0,0,0.1); }
.lm-open .lm-sheet { transform: translateY(0); }
.lm-handle     { width: 36px; height: 4px; background: rgba(128,128,128,0.3); border-radius: 10px; margin-bottom: 24px; flex-shrink: 0; }
.lm-icon-wrap  { width: 64px; height: 64px; background: rgba(10,132,255,0.14); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex-shrink: 0; }
.lm-icon       { width: 32px; height: 32px; stroke: var(--accent); stroke-width: 1.6; }
.lm-title      { font-size: 1.55rem; font-weight: 800; text-align: center; letter-spacing: -0.5px; margin-bottom: 6px; }
.lm-subtitle   { font-size: 0.9rem; color: var(--text-secondary); text-align: center; margin-bottom: 28px; line-height: 1.4; }
.lm-fields     { width: 100%; margin-bottom: 8px; }
.lm-field-group { background: var(--field-bg); border-radius: 14px; overflow: hidden; border: 0.5px solid var(--glass-border); transition: border-color 0.2s; }
.lm-field-group:focus-within { border-color: rgba(10,132,255,0.45); }
.lm-input      { display: block; width: 100%; padding: 15px 16px; background: transparent; border: none; color: var(--text-color); font-size: 1rem; font-family: inherit; outline: none; }
.lm-input::placeholder { color: var(--text-secondary); }
.lm-separator  { height: 0.5px; background: var(--border-color); margin: 0 16px; }
.lm-error      { width: 100%; min-height: 20px; font-size: 0.84rem; color: var(--danger); text-align: center; margin-bottom: 14px; line-height: 1.4; }
.lm-btn-accedi { width: 100%; padding: 16px; background: var(--accent); color: white; border: none; border-radius: 14px; font-size: 1.05rem; font-weight: 700; transition: opacity 0.18s, transform 0.12s; margin-bottom: 14px; letter-spacing: -0.2px; }
.lm-btn-accedi:hover   { opacity: 0.88; }
.lm-btn-accedi:active  { transform: scale(0.98); opacity: 0.8; }
.lm-btn-accedi:disabled { opacity: 0.5; cursor: not-allowed; }
.lm-btn-cancel { background: none; border: none; color: var(--text-secondary); font-size: 0.92rem; font-weight: 500; padding: 8px; width: 100%; text-align: center; transition: color 0.15s; }
.lm-btn-cancel:hover { color: var(--text-color); }
.lm-input-top    { border-radius: 0; }
.lm-input-bottom { border-radius: 0; }
@keyframes lm-shake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-8px); }
    40%      { transform: translateX(8px); }
    60%      { transform: translateX(-5px); }
    80%      { transform: translateX(5px); }
}
.lm-shake { animation: lm-shake 0.42s ease; }

/* =====================================================
   GALLERY HEADER
   ===================================================== */
.gallery-header { padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 6px; }
.gallery-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.gallery-header-info { flex: 1; min-width: 0; }
.gallery-header h2,
.title-large   { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.8px; margin: 0; line-height: 1.1; }
.gallery-header span,
.subtitle      { display: block; font-size: 0.88rem; color: var(--text-secondary); margin-top: 2px; }
.gallery-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-top: 4px; }

/* ── Page header (titolo + back-circle) ── */
.page-header     { padding: 18px 20px 8px; }
.page-header-top { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.page-header-top > div,
.page-header-top .title-large { min-width: 0; }

/* ── Back circle (freccia indietro rotonda) ── */
.back-circle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--accent);
    transition: background .15s;
}
.back-circle:hover  { background: rgba(10,132,255,.12); }
.back-circle:active { opacity: .7; }
.back-circle svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .page-header { padding: 12px 16px 6px; }
}
@media (min-width: 768px) {
    .page-header { padding: 22px 28px 10px; }
}
#btn-select, .gallery-select-btn { color: var(--accent); font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.btn-plus { background: var(--accent); color: white; border: none; width: 30px; height: 30px; border-radius: 9px; font-size: 20px; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; transition: opacity 0.15s; }
.btn-plus:active { opacity: 0.7; }
.add-btn-ios { width: 26px; height: 26px; border: 2px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--accent); font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.hidden-input { display: none; }

.content-pad-x { padding: 0 16px; }
.section-title-flush { margin: 0; }
.is-hidden { display: none !important; }
.overlay-preview-img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
}

/* =====================================================
   PHOTO GRID
   ===================================================== */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 3px; padding: 0 4px 20px; }
.phone-window .photo-grid { grid-template-columns: repeat(8, 1fr); gap: 2px; }
.photo-item { aspect-ratio: 1/1; position: relative; cursor: pointer; border-radius: 4px; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; background: var(--card-bg); }
.photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.hc-box { border-radius: 10px; transition: transform 0.18s ease; }
.hc-box.selected { transform: scale(0.86); outline: 3px solid var(--accent); outline-offset: -3px; }
.select-check { position: absolute; bottom: 5px; right: 5px; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,0.8); border-radius: 50%; background: rgba(0,0,0,0.2); z-index: 2; display: none; }
.selecting .select-check { display: block; }
.photo-item.selected .select-check { background: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: center; }

/* =====================================================
   ACTION BAR
   ===================================================== */
.action-bar { display: none; position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--nav-bg); padding: 12px 28px; border-radius: 30px; border: 1px solid var(--border-color); gap: 30px; z-index: 1000; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); white-space: nowrap; }
.action-bar.active { display: flex; align-items: center; }
.action-bar-btn        { background: none; border: none; font-weight: 700; cursor: pointer; font-size: 0.95rem; color: var(--accent); padding: 0; }
.action-bar-btn-danger { color: var(--danger); }
.action-bar-btn-cancel { color: var(--text-secondary); }
.inline-action-bar { display: none; gap: 14px; padding: 7px 12px; border-radius: 18px; background: rgba(255,255,255,0.08); align-items: center; }
.inline-action-btn        { color: var(--accent); cursor: pointer; font-weight: 700; font-size: 0.88rem; }
.inline-action-btn-danger { color: var(--danger); }

/* =====================================================
   LIGHTBOX
   ===================================================== */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.96); z-index: 9999; justify-content: center; align-items: center; }
.lightbox img { max-width: 95%; max-height: 95%; border-radius: 12px; }

/* =====================================================
   PHOTO VIEWER
   ===================================================== */
.photo-viewer { display: none; position: fixed; inset: 0; background: #000; z-index: 500000; justify-content: center; align-items: center; touch-action: none; }
.photo-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.12); color: white; border: none; width: 48px; height: 48px; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 500001; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); }
.arrow-left  { left: 18px; }
.arrow-right { right: 18px; }
.close-viewer { position: absolute; top: max(40px, env(safe-area-inset-top)); right: 20px; background: rgba(0,0,0,0.5); color: white; border: none; padding: 9px 16px; border-radius: 12px; font-weight: 600; cursor: pointer; z-index: 500002; font-size: 0.92rem; }

/* =====================================================
   MOVE SHEET
   ===================================================== */
.sheet-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200000; justify-content: center; align-items: flex-end; }
.move-sheet { width: 100%; max-width: 500px; background: rgba(30,30,32,0.98); border-radius: 20px 20px 0 0; overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32,1,0.23,1); }
.sheet-overlay.sheet-visible .move-sheet { transform: translateY(0); }
.sheet-btn { width: 100%; padding: 17px; background: none; border: none; color: var(--accent); font-size: 1rem; cursor: pointer; border-bottom: 0.5px solid rgba(255,255,255,0.1); transition: background 0.15s; }
.sheet-btn:hover  { background: rgba(255,255,255,0.06); }
.sheet-btn-cancel { color: var(--danger); font-weight: 700; border-bottom: none; }
.cat-group { background: var(--border-color); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }

/* =====================================================
   CUSTOM MODAL / ALERT
   ===================================================== */
.custom-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 400000; justify-content: center; align-items: center; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.custom-modal   { width: 85%; max-width: 310px; background: rgba(35,35,38,0.97); border-radius: 26px; padding: 28px 22px; text-align: center; box-shadow: 0 25px 50px rgba(0,0,0,0.5); border: 0.5px solid rgba(255,255,255,0.1); color: white; transform: scale(0.9); transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1); }
.modal-visible .custom-modal { transform: scale(1); }
.modal-icon        { font-size: 42px; margin-bottom: 12px; display: block; }
.modal-icon-danger { color: var(--danger); }
.modal-title       { font-weight: 700; font-size: 1.15rem; margin-bottom: 10px; }
.modal-msg         { font-size: 0.9rem; opacity: 0.8; line-height: 1.5; margin-bottom: 22px; white-space: pre-line; }
.modal-actions     { display: flex; flex-direction: column; gap: 9px; }
.btn-modal        { border: none; padding: 14px; border-radius: 14px; font-weight: 600; font-size: 0.97rem; cursor: pointer; width: 100%; font-family: inherit; }
.btn-modal:active { opacity: 0.75; }
.btn-primary      { background: var(--accent); color: white; }
.btn-danger       { background: var(--danger); color: white; }
.btn-cancel       { background: rgba(255,255,255,0.1); color: white; }

/* =====================================================
   UPLOAD OVERLAY
   ===================================================== */
.upload-overlay    { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 300000; flex-direction: column; justify-content: center; align-items: center; color: white; text-align: center; }
.upload-percentage { font-size: 1.4rem; font-weight: 700; }
.upload-sub        { margin-top: 10px; opacity: 0.6; font-size: 0.9rem; }

/* =====================================================
   SPESE FAMIGLIA
   ===================================================== */
.bilancio-card  { margin: 0 20px 20px; background: var(--card-bg); border-radius: 20px; border: 1px solid var(--border-color); padding: 20px; }
.bilancio-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.user-stat h3   { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.user-stat p    { margin: 0; font-size: 1.3rem; font-weight: 800; color: var(--accent); }
.status-msg          { text-align: center; font-size: 0.9rem; padding: 10px; border-radius: 12px; font-weight: 500; }
.status-msg.debito   { background: rgba(255,59,48,0.1);  color: var(--danger); }
.status-msg.credito  { background: rgba(52,199,89,0.1);  color: var(--success); }
.status-msg.pareggio { background: rgba(10,132,255,0.1); color: var(--accent); }
.section-title { font-size: 1.15rem; font-weight: 700; margin: 0 20px 12px; }
.search-filter-container { display: flex; gap: 10px; padding: 0 20px 16px; flex-wrap: wrap; }
.search-filter-container input,
.search-filter-container select { flex: 1; min-width: 130px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); font-size: 0.88rem; font-family: inherit; outline: none; }
.hc-list      { margin: 0 20px 20px; border-radius: 16px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border-color); }
.hc-list-item { display: flex; align-items: center; padding: 13px 16px; border-bottom: 0.5px solid var(--border-color); gap: 13px; cursor: pointer; transition: background 0.15s; }
.hc-list-item:last-child  { border-bottom: none; }
.hc-list-item:active,
.hc-list-item.selected    { background: rgba(10,132,255,0.08); }
.hc-list-item .hc-thumb          { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.hc-list-item .hc-details        { flex: 1; min-width: 0; }
.hc-list-item .hc-details strong { display: block; font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-list-item .hc-details span   { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.hc-amount-wrapper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hc-amount         { text-align: right; }
.price             { display: block; font-weight: 700; font-size: 0.92rem; }
.payer             { display: block; font-size: 0.78rem; color: var(--text-secondary); }
.add-expense-pill  { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--accent); color: white; border-radius: 20px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
.add-expense-pill:hover { opacity: 0.85; }
.dashboard-btn     { background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); }
.floating-action-bar { display: none; position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 26px; padding: 12px 20px; gap: 20px; align-items: center; z-index: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); white-space: nowrap; }

/* Apple action sheet */
.apple-action-sheet-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 700; justify-content: center; align-items: flex-end; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.apple-action-sheet-overlay.active { display: flex; }
.apple-action-sheet       { width: 100%; max-width: 500px; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.apple-action-sheet-group { background: rgba(40,40,42,0.97); border-radius: 16px; overflow: hidden; backdrop-filter: blur(30px); }
.apple-action-sheet-title { padding: 13px 16px; text-align: center; font-size: 0.83rem; color: var(--text-secondary); border-bottom: 0.5px solid var(--border-color); }
.apple-action-button               { width: 100%; padding: 16px; background: none; border: none; color: var(--accent); font-size: 1rem; font-weight: 500; cursor: pointer; border-top: 0.5px solid var(--border-color); font-family: inherit; transition: background 0.15s; }
.apple-action-button:first-child   { border-top: none; }
.apple-action-button:hover         { background: rgba(255,255,255,0.06); }
.apple-action-button.destructive   { color: var(--danger); }
.apple-action-button.cancel        { font-weight: 700; }

/* Apple alert */
.apple-alert-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 800; justify-content: center; align-items: center; backdrop-filter: blur(10px); }
.apple-alert-overlay.active { display: flex; }
.apple-alert         { background: rgba(40,40,42,0.97); border-radius: 16px; width: 85%; max-width: 310px; overflow: hidden; border: 0.5px solid var(--border-color); }
.apple-alert-content { padding: 20px 18px 16px; text-align: center; }
.apple-alert-title   { font-weight: 700; font-size: 1.02rem; margin-bottom: 8px; }
.apple-alert-text    { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.4; }
.apple-alert-buttons { display: flex; border-top: 0.5px solid var(--border-color); }
.apple-alert-button  { flex: 1; padding: 14px; background: none; border: none; font-size: 0.97rem; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.apple-alert-button:hover   { background: rgba(255,255,255,0.06); }
.apple-alert-button.cancel  { color: var(--text-secondary); border-right: 0.5px solid var(--border-color); }
.apple-alert-button.confirm { color: var(--accent); font-weight: 700; }

/* Modal spese iframe */
.exp-modal-overlay  { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 900; justify-content: center; align-items: flex-end; backdrop-filter: blur(10px); }
.exp-modal-overlay.active { display: flex; }
.exp-modal-content  { background: var(--phone-bg); border-radius: 24px 24px 0 0; width: 100%; max-width: 600px; height: min(90vh, 820px); height: min(90dvh, 820px); max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; overflow: hidden; }
.exp-modal-header   { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 14px; border-bottom: 0.5px solid var(--border-color); flex-shrink: 0; }
.exp-modal-header h3{ margin: 0; font-size: 1.1rem; font-weight: 700; }
.exp-close-btn      { background: none; border: none; color: var(--accent); font-weight: 600; font-size: 0.92rem; cursor: pointer; font-family: inherit; }
.exp-iframe         { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; border: none; background: var(--phone-bg); }

/* Form spese in iframe */
.exp-iframe-body, .edit-body { background: var(--phone-bg); color: var(--text-color); padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; }
html:has(body.exp-iframe-body) {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(10,132,255,.72) transparent;
}
html:has(body.exp-iframe-body)::-webkit-scrollbar { width: 7px; }
html:has(body.exp-iframe-body)::-webkit-scrollbar-track { background: transparent; }
html:has(body.exp-iframe-body)::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(64,156,255,.94), rgba(10,132,255,.64));
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
body.exp-iframe-body {
    min-height: 100%;
    padding-bottom: max(104px, calc(88px + env(safe-area-inset-bottom)));
    box-sizing: border-box;
    overflow: visible;
}
body.exp-iframe-body .btn-salva {
    position: fixed;
    z-index: 25;
    right: 20px;
    left: 20px;
    width: auto;
    margin: 0;
    bottom: max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 0 0 8px var(--phone-bg);
}
.exp-f-group, .form-group { margin-bottom: 16px; }
.exp-f-group label, .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.exp-f-control, .form-group input, .form-group select, .form-group textarea { display: block; width: 100%; padding: 12px 14px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-color); font-size: 1rem; font-family: inherit; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.exp-f-control:focus, .form-group input:focus, .form-group select:focus { border-color: var(--accent); }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 8px; }
.category-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; cursor: pointer; font-size: 0.73rem; text-align: center; transition: all 0.15s; }
.category-item:hover    { border-color: var(--accent); }
.category-item.selected { background: rgba(10,132,255,0.15); border-color: var(--accent); color: var(--accent); }
.category-item i        { font-size: 1.4rem; font-style: normal; }
.switch-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 0.92rem; }
.switch       { position: relative; width: 50px; height: 28px; }
.switch input { display: none; }
.switch .slider { position: absolute; inset: 0; background: var(--switch-bg); border-radius: 34px; transition: background 0.3s; cursor: pointer; display: block; }
.switch input:checked + .slider { background: var(--accent); }
.switch .slider::before { content: ''; position: absolute; width: 22px; height: 22px; background: white; border-radius: 50%; top: 3px; left: 3px; transition: transform 0.3s; display: block; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.switch input:checked + .slider::before { transform: translateX(22px); }
.exp-btn-save, .btn-save { display: block; width: 100%; padding: 15px; background: var(--accent); color: white; border: none; border-radius: 14px; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: inherit; margin-top: 8px; transition: opacity 0.2s; }
.exp-btn-save:active, .btn-save:active { opacity: 0.8; }

/* =====================================================
   AREA PRIVATA — thumb colori
   ===================================================== */
.hc-thumb-purple { background: #5856d6; color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.hc-thumb-green  { background: var(--success); color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.hc-thumb-orange { background: var(--warning); color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.hc-thumb-red    { background: var(--danger);  color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.hc-thumb-blue   { background: var(--accent);  color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.hc-thumb-yellow { background: #ffd60a; color: #1c1c1e; display: flex; align-items: center; justify-content: center; font-size: 20px; width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; }
.hc-details { flex: 1; min-width: 0; }
.hc-arrow   { opacity: 0.3; font-size: 1.3rem; font-weight: 300; flex-shrink: 0; }

/* =====================================================
   DASHBOARD SPESE
   ===================================================== */
.stat-badge  { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 0.82rem; font-weight: 600; margin-top: 8px; }
.badge-green { background: rgba(52,199,89,0.15); color: var(--success); }
.badge-red   { background: rgba(255,59,48,0.15);  color: var(--danger); }
.stat-detail { display: block; font-size: 0.88rem; color: var(--text-secondary); margin-top: 5px; }
.chart-card        { min-height: 180px; display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 20px; padding: 20px; margin: 0 20px 20px; }
.chart-card canvas { margin-top: 20px; flex: 1; }
.charts-row        { display: flex; flex-direction: column; gap: 0; }
.charts-row .chart-card { flex: 1; }
.transactions-list   { display: flex; flex-direction: column; gap: 14px; }
.transaction-item    { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-secondary); border-radius: 14px; border: 1px solid var(--glass-border); transition: all 0.2s; animation: slideIn 0.35s ease both; }
.transaction-item:hover { transform: translateX(3px); border-color: var(--accent); }
.transaction-icon    { font-size: 1.5rem; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--glass-bg); border-radius: 12px; flex-shrink: 0; }
.transaction-info    { flex: 1; min-width: 0; }
.transaction-title   { font-weight: 600; font-size: 0.97rem; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-meta    { font-size: 0.82rem; color: var(--text-secondary); }
.transaction-amount  { font-size: 1.15rem; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.chart-loading { display: flex; align-items: center; justify-content: center; min-height: 250px; }
.spinner       { width: 36px; height: 36px; border: 4px solid var(--glass-border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
.empty-state   { display: flex; align-items: center; justify-content: center; min-height: 240px; color: var(--text-secondary); font-size: 1rem; text-align: center; }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes slideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* =====================================================
   LIBRERIA
   ===================================================== */
.ui-lib-search       { display: flex; gap: 8px; padding: 0 20px 14px; }
.ui-lib-search input { flex: 1; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 12px; padding: 11px 14px; color: var(--text-color); font-family: inherit; font-size: .9rem; outline: none; min-width: 0; }
.ui-lib-search input:focus { border-color: var(--accent); }
.ui-lib-search button { background: var(--accent); color: #fff; border: none; border-radius: 12px; padding: 11px 16px; font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; flex-shrink: 0; }
.chips-scroll { display: flex; gap: 8px; padding: 0 20px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chip       { padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border-color); background: var(--card-bg); font-size: .8rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap; text-decoration: none; transition: all .15s; flex-shrink: 0; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on    { border-color: var(--accent); background: rgba(10,132,255,.14); color: var(--accent); }
.chip.danger { border-color: var(--danger); background: rgba(255,59,48,.1); color: var(--danger); }
.ui-lib-tab-bar { display: flex; border-bottom: .5px solid var(--border-color); margin: 0 20px 14px; }
.ui-lib-tab-btn { flex: 1; padding: 10px; background: none; border: none; border-bottom: 2px solid transparent; font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: color .15s, border-color .15s; }
.ui-lib-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.prestiti-banner { background: rgba(255,149,0,.1); border: .5px solid rgba(255,149,0,.3); border-radius: 14px; margin: 0 20px 12px; padding: 12px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.prestiti-arrow  { color: var(--warning); font-size: 1.1rem; transition: transform .2s; }
.libri-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important; gap: 10px; padding: 0 16px 20px; }
.libro-thumb      { position: relative; cursor: pointer; }
.libro-img        { width: 100%; aspect-ratio: 2/3; border-radius: 10px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 2.8rem; }
.libro-img img    { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; }
.libro-stato-dot  { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.libro-titolo-s   { font-size: .76rem; font-weight: 700; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.libro-autore-s   { font-size: .7rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.libro-serie-s    { font-size: .65rem; color: var(--warning); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; opacity: .85; }
.libro-stars-s    { font-size: .7rem; color: #ff9500; margin-top: 2px; }
.libro-prestito-tag { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: .62rem; font-weight: 700; background: rgba(255,149,0,.85); color: #fff; padding: 2px 4px; border-radius: 0 0 10px 10px; }

/* =====================================================
   SPESE — alert banner e elementi aggiuntivi
   ===================================================== */
.deadline-alert-banner { display: flex; align-items: center; gap: 10px; background: rgba(255,59,48,0.1); border: 1px solid rgba(255,59,48,0.25); border-radius: 14px; padding: 12px 16px; margin: 0 20px 16px; cursor: pointer; transition: background 0.15s; }
.deadline-alert-banner:hover { background: rgba(255,59,48,0.16); }
.alert-icon    { font-size: 1.3rem; flex-shrink: 0; }
.alert-content { flex: 1; min-width: 0; font-size: 0.88rem; line-height: 1.4; color: var(--danger); }
.alert-arrow   { opacity: 0.5; font-size: 1rem; flex-shrink: 0; }
.multi-select-checkbox { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.btn-bulk-divide { background: var(--accent); color: white; border: none; padding: 10px 18px; border-radius: 12px; font-weight: 600; font-size: 0.9rem; cursor: pointer; font-family: inherit; transition: opacity 0.2s; }
.btn-bulk-divide:hover { opacity: 0.85; }
.opacity-08    { opacity: 0.8; }
.recurring-tag { display: inline-block; font-size: 0.72rem; padding: 2px 7px; border-radius: 8px; background: rgba(10,132,255,0.15); color: var(--accent); font-weight: 600; margin-left: 6px; vertical-align: middle; }
.deadline-item { color: var(--danger); }

/* =====================================================
   UTILITY
   ===================================================== */
.border-top-thin { border: none; border-top: 0.5px solid var(--border-color); margin: 16px 0; }
.opacity-07      { opacity: 0.7; }
.mb-20           { margin-bottom: 20px; }
.mt-15           { margin-top: 15px; }
.row             { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d-flex          { display: flex; }
.gap-10          { gap: 10px; }
.header-text     { flex: 1; min-width: 0; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (min-width: 768px) {
    .phone-window { width: 520px; height: 88vh; height: 88dvh; border-radius: 44px; }
    .phone-window .photo-grid { grid-template-columns: repeat(9, 1fr); }
    .hc-icon-circle { width: 90px; height: 90px; border-radius: 24px; }
    .hc-icon-item   { max-width: 120px; }
    .hc-icon-label  { font-size: 0.85rem; }
    .hc-tab         { font-size: 0.75rem; }
    .hc-tab svg     { width: 26px; height: 26px; }
    .lm-overlay { align-items: center; }
    .lm-sheet   { max-width: 420px; border-radius: 28px; padding: 28px 32px 36px; margin-bottom: 0; }
    .lm-handle  { display: none; }
}

@media (min-width: 1024px) {
    .phone-window { width: 860px; height: 90vh; height: 90dvh; border-radius: 32px; box-shadow: 0 40px 100px rgba(0,0,0,0.6); }
    .top-nav-home { height: 66px; }
    .phone-window .photo-grid { grid-template-columns: repeat(8, 1fr); }
    .hc-icon-circle { width: 120px; height: 120px; border-radius: 28px; }
    .hc-icon-item   { max-width: 160px; gap: 12px; }
    .hc-icon-label  { font-size: 0.95rem; font-weight: 600; }
    .hc-icon-row    { justify-content: space-around; gap: 0; padding: 8px 28px 16px; }
    .hc-icon-item:hover .hc-icon-circle { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0,0,0,0.4); }
    .title-large    { font-size: 2.4rem; }
    .gallery-header { padding: 22px 28px 16px; }
    .hc-archive-img  { width: 100px; height: 100px; }
    .hc-archive-name { font-size: 1.2rem; }
    .hc-archive-desc { font-size: 0.92rem; }
    .hc-archive-info { padding: 0 24px; }
    .hc-archive-card { min-height: 100px; border-radius: 20px; }
    .hc-archive-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
    .hc-tab         { font-size: 0.78rem; }
    .hc-tab svg     { width: 28px; height: 28px; }
    .hc-tab-bar     { padding: 12px 0 max(16px, env(safe-area-inset-bottom)); }
    .lm-overlay { align-items: center; }
    .lm-sheet   { max-width: 420px; border-radius: 28px; padding: 28px 32px 36px; margin-bottom: 0; }
    .lm-handle  { display: none; }
    .exp-modal-overlay  { align-items: center; }
    .exp-modal-content  { border-radius: 24px; max-width: 720px; margin-bottom: 0; align-self: center; }
    .hc-container    { padding: 24px 28px 12px; }
    .hc-archive-list { flex-direction: column; gap: 12px; }
    .bilancio-card             { margin: 0 28px 24px; padding: 24px; }
    .hc-list                   { margin: 0 28px 24px; }
    .hc-list-item              { padding: 16px 20px; }
    .section-title             { margin: 0 28px 14px; font-size: 1.3rem; }
    .search-filter-container   { padding: 0 28px 20px; gap: 12px; }
    .search-filter-container input,
    .search-filter-container select { padding: 12px 16px; font-size: 0.92rem; border-radius: 14px; }
    .hc-title                  { font-size: 1.5rem; margin: 0 28px 14px; }
    .gallery-header            { padding: 22px 28px 16px; }
    .bilancio-grid             { gap: 20px; margin-bottom: 20px; }
    .user-stat p               { font-size: 1.6rem; }
    .price                     { font-size: 1rem; }
    .hc-list-item .hc-details strong { font-size: 0.97rem; }
    .hc-list-item .hc-thumb    { width: 46px; height: 46px; border-radius: 12px; font-size: 1.3rem; }
    .charts-row { flex-direction: row; align-items: stretch; gap: 0; margin: 0 20px 20px; }
    .charts-row .chart-card { flex: 1; margin: 0; border-radius: 0; border-right-width: 0; }
    .charts-row .chart-card:first-child { border-radius: 20px 0 0 20px; }
    .charts-row .chart-card:last-child  { border-radius: 0 20px 20px 0; border-right-width: 1px; }
}

@media (min-width: 1440px) {
    .phone-window { width: 1100px; height: 92vh; height: 92dvh; border-radius: 28px; }
    .phone-window .photo-grid { grid-template-columns: repeat(12, 1fr); }
    .hc-icon-circle { width: 150px; height: 150px; border-radius: 34px; }
    .hc-icon-item   { max-width: 200px; gap: 14px; }
    .hc-icon-label  { font-size: 1.05rem; }
    .hc-icon-row    { padding: 10px 32px 20px; }
    .hc-archive-img  { width: 120px; height: 120px; }
    .hc-archive-name { font-size: 1.35rem; }
    .hc-archive-info { padding: 0 28px; }
    .hc-archive-card { min-height: 120px; border-radius: 22px; }
    .hc-tab svg     { width: 30px; height: 30px; }
    .hc-tab         { font-size: 0.82rem; }
    .hc-tab-bar     { padding: 14px 0 max(18px, env(safe-area-inset-bottom)); }
    .exp-modal-content { max-width: 860px; }
    .charts-row { margin: 0 28px 24px; }
}

@media (min-width: 1800px) {
    .phone-window { width: 1400px; border-radius: 24px; }
    .phone-window .photo-grid { grid-template-columns: repeat(12, 1fr); }
    .hc-icon-circle { width: 170px; height: 170px; border-radius: 38px; }
    .hc-icon-item   { max-width: 220px; }
    .hc-icon-label  { font-size: 1.1rem; }
    .hc-archive-img { width: 120px; height: 120px; }
    .hc-tab svg     { width: 32px; height: 32px; }
}

@media (max-width: 389px) {
    .phone-window { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; border: none; box-shadow: none; }
    .phone-window .photo-grid { grid-template-columns: repeat(4, 1fr); }
    .hc-icon-circle { width: 64px; height: 64px; border-radius: 18px; }
    .hc-icon-label  { font-size: 0.72rem; }
    .top-nav-home   { padding: 0 14px; height: 56px; }
    .hc-brand-my, .hc-brand-cloud { font-size: 1.3rem; }
    .nav-pill-btn  { padding: 6px 10px; font-size: 0.82rem; }
    .nav-user-pill { padding: 5px 9px 5px 8px; }
    .nav-user-name { font-size: 0.8rem; }
}

@media (min-width: 390px) and (max-width: 600px) {
    .phone-window { width: 100%; height: 100vh; height: 100dvh; border-radius: 0; border: none; box-shadow: none; }
    .phone-window .photo-grid { grid-template-columns: repeat(4, 1fr); }
    .hc-icon-circle { width: 72px; height: 72px; border-radius: 20px; }
}

@media (max-width: 600px) {
    .hc-icon-row    { padding: 0 8px 8px; gap: 4px; }
    .gallery-header { padding: 12px 16px 10px; }
    .gallery-header-top { flex-direction: column; gap: 10px; align-items: flex-start; }
    .gallery-header-info { width: 100%; }
    .title-large    { font-size: 1.5rem; line-height: 1.15; }
    .gallery-actions { width: 100%; justify-content: flex-start; padding-top: 0; gap: 8px; }
    .add-expense-pill { font-size: 0.8rem; padding: 7px 13px; }
    .bilancio-card  { margin: 0 12px 16px; }
    .hc-list        { margin: 0 12px 16px; }
    .section-title  { margin: 0 12px 10px; }
    .search-filter-container { padding: 0 12px 14px; flex-wrap: wrap; }
    .search-filter-container input  { flex: 1 1 100%; }
    .search-filter-container select { flex: 1 1 calc(50% - 5px); min-width: 0; }
    .row { grid-template-columns: 1fr; }
    .floating-action-bar { bottom: 70px; width: calc(100% - 32px); justify-content: space-between; }
    .arrow-left  { left: 10px; }
    .arrow-right { right: 10px; }
    .lm-sheet   { padding: 14px 20px 36px; }
    .lm-title   { font-size: 1.35rem; }
    .lm-icon-wrap { width: 56px; height: 56px; }
    .lm-icon      { width: 28px; height: 28px; }
    .top-nav-home { gap: 8px; overflow: hidden; }
    .hc-brand-my,
    .hc-brand-cloud { font-size: 1.35rem; }
    .ai-header-btn { padding: 5px 8px; font-size: .76rem; }
    .nav-user-pill { max-width: 138px; padding: 5px 9px 5px 8px; }
    .nav-user-name { max-width: 72px; }
    .page-actions {
        padding: 0 0 12px;
        justify-content: flex-start;
        gap: 8px;
    }
    .page-header .page-actions {
        padding-top: 12px;
    }
    .page-actions .btn-nav,
    .page-actions .btn-nav-primary {
        flex: 0 0 auto;
    }
}

@media (min-width: 900px) {
    body:has(.phone-window > [data-hc-shared-sidebar]) {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-color);
    }

    .phone-window:has(> [data-hc-shared-sidebar]) {
        width: min(1220px, 94vw) !important;
        height: min(900px, 92dvh) !important;
        border-radius: 32px !important;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .phone-window  { height: 100vh; height: 100dvh; border-radius: 0; }
    .lm-overlay    { align-items: center; }
    .lm-sheet      { border-radius: 20px; max-width: 380px; padding: 16px 24px 24px; }
    .lm-handle, .lm-icon-wrap { display: none; }
    .lm-subtitle   { display: none; }
}

@supports (padding: max(0px)) {
    .top-nav-home {
        padding-left:  max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    .lm-sheet { padding-bottom: max(40px, env(safe-area-inset-bottom)); }
}

/* =====================================================
   v3.6 — HC-OVERLAY / HC-SHEET  (componente condiviso)
   Usato da: inventario.php, documenti.php, cerca.php
   ===================================================== */
.hc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 800;
    justify-content: center;
    align-items: flex-end;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hc-overlay.active { display: flex; }
.hc-sheet {
    width: 100%;
    max-width: 600px;
    background: var(--phone-bg);
    border-radius: 24px 24px 0 0;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(10,132,255,.72) transparent;
    border-top: .5px solid var(--border-color);
}
.hc-sheet::-webkit-scrollbar { width: 7px; }
.hc-sheet::-webkit-scrollbar-track { background: transparent; }
.hc-sheet::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(64,156,255,.94), rgba(10,132,255,.64));
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
@media (hover: none) and (pointer: coarse) {
    .hc-sheet { scrollbar-width: none; }
    .hc-sheet::-webkit-scrollbar { display: none; }
}
.hc-sheet-sm     { max-height: 50vh; }
.hc-sheet-handle { width: 36px; height: 4px; background: rgba(128,128,128,.3); border-radius: 10px; margin: 12px auto 0; flex-shrink: 0; }
.hc-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: .5px solid var(--border-color); position: sticky; top: 0; background: var(--phone-bg); z-index: 1; }
.hc-sheet-title  { font-size: 1.05rem; font-weight: 700; margin: 0; }
.hc-sheet-close  { background: none; border: none; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: background .15s; }
.hc-sheet-close:hover { background: var(--bg-secondary); }
.hc-sheet-body   { padding: 16px 20px 32px; }

/* =====================================================
   v3.6 — HOME: Pensiero + Tab + Gallerie + Accesso Rapido
   ===================================================== */
.pensiero          { margin: 16px 16px 0; padding: 16px 18px; background: linear-gradient(135deg,rgba(10,132,255,.07),rgba(94,92,230,.07)); border: .5px solid rgba(10,132,255,.18); border-radius: 18px; text-decoration: none; color: var(--text-color); display: block; }
.pensiero-label    { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 8px; }
.pensiero-testo    { font-size: .9rem; font-style: italic; line-height: 1.55; color: var(--text-color); margin-bottom: 6px; }
.pensiero-autore   { font-size: .75rem; color: var(--text-secondary); font-weight: 600; }

.home-tab-bar      { display: flex; margin: 16px 16px 0; background: var(--bg-secondary); border-radius: 14px; padding: 4px; gap: 3px; border: .5px solid var(--border-color); }
.home-tab-btn      { flex: 1; padding: 9px 4px; border: none; background: transparent; border-radius: 11px; font-family: inherit; font-size: .75rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: all .2s; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; }
.home-tab-btn .tab-icon  { font-size: 1.2rem; line-height: 1; }
.home-tab-btn .tab-label { font-size: .7rem; font-weight: 700; }
.home-tab-btn.active     { background: var(--card-bg); color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 -2px 0 var(--accent); }
.home-tab          { display: none; padding: 16px 0 24px; }
.home-tab.show     { display: block; }

.foto-row          { display: flex; gap: 8px; justify-content: space-around; padding: 4px 16px; }
.foto-item         { display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; color: var(--text-color); flex: 1; }
.foto-circle       { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid var(--border-color); background: var(--bg-secondary); transition: border-color .18s, transform .18s; }
.foto-circle img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-item:active .foto-circle { border-color: var(--accent); transform: scale(.95); }
.foto-label        { font-size: .72rem; font-weight: 600; }

.hc-card           { display: flex; align-items: center; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--text-color); transition: border-color .18s, transform .18s; }
.hc-card:not(.locked):active { border-color: var(--accent); transform: translateX(3px); }
.hc-card.locked    { opacity: .5; pointer-events: none; cursor: not-allowed; }
.hc-card-thumb     { width: 68px; height: 68px; flex-shrink: 0; object-fit: cover; display: block; background: var(--bg-secondary); }
.hc-card-emoji     { width: 68px; height: 68px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; background: var(--bg-secondary); }
.hc-card-info      { padding: 0 14px; flex: 1; min-width: 0; }
.hc-card-name      { font-size: .92rem; font-weight: 700; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-card-desc      { font-size: .76rem; color: var(--text-secondary); line-height: 1.4; }
.hc-card-arrow     { font-size: 1.1rem; color: var(--text-secondary); padding-right: 14px; flex-shrink: 0; }

.ar-header         { display: flex; align-items: center; justify-content: space-between; padding: 20px 16px 10px; }
.hc-section-title  { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-secondary); padding: 20px 20px 8px; }
.ar-title          { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-secondary); }
.ar-link           { font-size: .72rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.ar-grid           { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px 24px; }
.ar-btn            { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text-color); -webkit-tap-highlight-color: transparent; }
.ar-icon-wrap      { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; border: .5px solid var(--border-color); position: relative; transition: transform .14s; }
.ar-btn:active .ar-icon-wrap { transform: scale(.88); }
.ar-label          { font-size: .62rem; font-weight: 600; color: var(--text-secondary); text-align: center; line-height: 1.2; }
.ar-badge          { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--danger); color: #fff; border-radius: 8px; border: 2px solid var(--phone-bg); font-size: .55rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ar-badge.warn     { background: var(--warning); }

/* =====================================================
   v3.6 — AREA PRIVATA  (ap-*)
   ===================================================== */
.ap-header         { padding: 20px 20px 0; display: flex; align-items: center; justify-content: space-between; }
.ap-greeting       { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.ap-greeting span  { color: var(--accent); }
.ap-notif-badge    { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--danger); color: #fff; font-size: .82rem; font-weight: 800; flex-shrink: 0; }
.ap-notif-badge.zero { background: var(--bg-secondary); color: var(--text-secondary); }
.ap-tab-bar        { display: flex; margin: 18px 16px 0; background: var(--bg-secondary); border-radius: 14px; padding: 4px; gap: 3px; border: .5px solid var(--border-color); }
.ap-tab-btn        { flex: 1; padding: 11px 4px; border: none; background: transparent; border-radius: 11px; font-family: inherit; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .2s; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 56px; }
.ap-tab-btn .tab-icon  { font-size: 1.3rem; line-height: 1; }
.ap-tab-btn .tab-label { font-size: .72rem; font-weight: 700; letter-spacing: .01em; }
.ap-tab-btn.active     { background: var(--card-bg); color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 -2px 0 var(--accent); }
.ap-tab-btn.active .tab-label { color: var(--accent); }
.ap-tab-btn.active .tab-icon  { filter: drop-shadow(0 0 4px rgba(10,132,255,.4)); }
.ap-tab            { display: none; padding: 16px 0 32px; }
.ap-tab.show       { display: block; }
.ap-stats-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; margin-top: 16px; margin-bottom: 16px; }
.ap-stat-card      { background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 18px; padding: 16px; }
.ap-stat-label     { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 8px; }
.ap-stat-value     { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.ap-stat-sub       { font-size: .75rem; color: var(--text-secondary); margin-top: 4px; }
.ap-stat-card.link { text-decoration: none; color: var(--text-color); cursor: pointer; transition: border-color .18s, transform .18s; }
.ap-stat-card.link:hover { border-color: var(--accent); transform: scale(1.02); }
.ap-notif-list     { padding: 0 16px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.ap-notif-item     { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 14px; padding: 12px 14px; text-decoration: none; color: var(--text-color); cursor: default; }
.ap-notif-item.link { cursor: pointer; transition: border-color .15s; }
.ap-notif-item.link:hover { border-color: var(--accent); }
.ap-notif-icon     { font-size: 1.3rem; flex-shrink: 0; }
.ap-notif-text     { flex: 1; min-width: 0; }
.ap-notif-title    { font-size: .88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-notif-sub      { font-size: .75rem; color: var(--text-secondary); margin-top: 2px; }
.ap-notif-sub.warning { color: var(--warning); }
.ap-notif-sub.danger  { color: var(--danger); }
.ap-empty-notif    { text-align: center; padding: 28px 20px; color: var(--text-secondary); font-size: .88rem; }
.ap-viaggio        { margin: 0 16px 16px; padding: 14px 16px; background: linear-gradient(135deg,rgba(10,132,255,.1),rgba(94,92,230,.08)); border: .5px solid rgba(10,132,255,.25); border-radius: 16px; text-decoration: none; color: var(--text-color); display: block; }
.ap-viaggio-label  { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 6px; }
.ap-viaggio-title  { font-size: 1rem; font-weight: 700; margin-bottom: 3px; }
.ap-viaggio-date   { font-size: .78rem; color: var(--text-secondary); }
.ap-link-list      { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.ap-link-list-spaced { margin-top: 16px; }
.ap-link-card.locked { opacity: .45; cursor: not-allowed; }
.ap-link-card      { display: flex; align-items: center; gap: 14px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 16px; padding: 14px 16px; text-decoration: none; color: var(--text-color); transition: border-color .18s, transform .18s; }
.ap-link-card:hover { border-color: var(--accent); transform: translateX(3px); }
.ap-link-icon      { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.ap-icon-purple    { background: rgba(94,92,230,.15); }
.ap-icon-yellow    { background: rgba(255,214,10,.15); }
.ap-icon-teal      { background: rgba(90,200,250,.15); }
.ap-icon-blue      { background: rgba(10,132,255,.15); }
.ap-icon-indigo    { background: rgba(88,86,214,.15); }
.ap-icon-green     { background: rgba(52,199,89,.15); }
.ap-icon-orange    { background: rgba(255,149,0,.15); }
.ap-icon-red       { background: rgba(255,59,48,.15); }

/* ── Task widget ────────────────────────────────────────────────────────────── */
.ap-task-widget    { margin: 0 16px 14px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 16px; overflow: hidden; }
.ap-task-header    { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; border-bottom: .5px solid var(--border-color); }
.ap-task-add-btn   { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; flex-shrink: 0; }
.ap-task-list      { padding: 4px 0; min-height: 20px; }
.ap-task-empty     { padding: 14px 16px; font-size: .85rem; color: var(--text-secondary); text-align: center; }
.ap-task-item      { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: .5px solid var(--border-color); transition: opacity .2s, max-height .2s; }
.ap-task-item:last-child { border-bottom: none; }
.ap-task-item.done .ap-task-testo { text-decoration: line-through; color: var(--text-secondary); opacity: .6; }
.ap-task-check     { background: none; border: none; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; padding: 0; line-height: 1; color: var(--text-secondary); }
.ap-task-testo     { flex: 1; font-size: .9rem; line-height: 1.4; }
.ap-task-del       { background: none; border: none; color: var(--text-secondary); font-size: .85rem; cursor: pointer; padding: 0 2px; flex-shrink: 0; opacity: .5; transition: opacity .15s; }
.ap-task-del:active { opacity: 1; color: var(--danger); }
.ap-task-input-wrap { display: flex; gap: 8px; padding: 10px 12px; border-top: .5px solid var(--border-color); }
.ap-task-input     { flex: 1; background: var(--bg-secondary); border: .5px solid var(--border-color); border-radius: 10px; padding: 9px 12px; color: var(--text-color); font-family: inherit; font-size: .9rem; outline: none; }
.ap-task-input:focus { border-color: var(--accent); }
.ap-task-save-btn  { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 9px 14px; font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; flex-shrink: 0; }
/* ── Task (area_privata — SortableJS) ───────────────────────────────────────── */
.task-section      { margin: 0 16px 20px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 16px; overflow: hidden; }
.task-header       { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; border-bottom: .5px solid var(--border-color); }
.task-title        { font-size: .88rem; font-weight: 700; flex: 1; }
.task-badge        { background: var(--accent); color: #fff; border-radius: 10px; padding: 2px 8px; font-size: .72rem; font-weight: 800; }
.task-list         { padding: 4px 0; min-height: 20px; }
.task-item         { position: relative; overflow: hidden; border-bottom: .5px solid var(--border-color); transition: opacity .2s, max-height .3s; background: var(--danger); }
.task-item:last-child { border-bottom: none; }
.task-item-inner   { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--card-bg); transition: transform .2s; position: relative; z-index: 1; touch-action: pan-y; }
.task-item.task-swiped .task-item-inner { transform: translateX(-72px); }
.task-drag-handle  { font-size: 1rem; color: var(--text-secondary); cursor: grab; flex-shrink: 0; opacity: .5; touch-action: none; }
.task-check        { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-color); background: none; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .88rem; color: var(--success); font-family: inherit; transition: background .15s, border-color .15s; }
.task-check.done   { background: var(--success); border-color: var(--success); color: #fff; }
.task-testo        { flex: 1; font-size: .9rem; line-height: 1.4; }
.task-testo.done   { text-decoration: line-through; color: var(--text-secondary); opacity: .6; }
.task-del-inline   { position: absolute; right: 0; top: 0; bottom: 0; width: 68px; background: var(--danger); color: #fff; border: none; font-size: .82rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 0; }
.task-add-row      { display: flex; gap: 8px; padding: 10px 12px; border-top: .5px solid var(--border-color); }
.task-add-input    { flex: 1; background: var(--bg-secondary); border: .5px solid var(--border-color); border-radius: 10px; padding: 9px 12px; color: var(--text-color); font-family: inherit; font-size: .9rem; outline: none; }
.task-add-input:focus { border-color: var(--accent); }
.task-mic-btn      { background: var(--bg-secondary); border: .5px solid var(--border-color); border-radius: 10px; padding: 9px 11px; font-size: .88rem; cursor: pointer; flex-shrink: 0; }
.task-add-btn      { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 9px 14px; font-size: 1.2rem; font-weight: 300; cursor: pointer; flex-shrink: 0; line-height: 1; }
.sortable-ghost    { opacity: .35; background: var(--bg-secondary); border-radius: 12px; }
.sortable-chosen   { box-shadow: 0 4px 20px rgba(0,0,0,.3); }

.ap-link-info      { flex: 1; min-width: 0; }
.ap-link-name      { font-size: .92rem; font-weight: 700; margin-bottom: 2px; }
.ap-link-desc      { font-size: .76rem; color: var(--text-secondary); }
.ap-link-arrow     { font-size: 1.1rem; color: var(--text-secondary); flex-shrink: 0; }
.ap-link-badge     { background: var(--danger); color: #fff; border-radius: 10px; padding: 2px 7px; font-size: .68rem; font-weight: 800; flex-shrink: 0; margin-right: 4px; }
.ap-link-badge.warn { background: var(--warning); }
.ap-section-title  { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-secondary); padding: 0 16px; margin-bottom: 10px; }
.ap-section-title:not(:first-child) { margin-top: 20px; }

/* =====================================================
   v3.6 — INVENTARIO  (inv-*)
   ===================================================== */
.inv-page-header   { padding: 16px 20px 0; }
.inv-header-top    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.inv-title         { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--text-color); margin: 4px 0 10px; line-height: 1.1; }
.inv-push-btn      { background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 50%; width: 36px; height: 36px; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.inv-push-btn:active { transform: scale(.9); }
.inv-alert-bar     { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.inv-alert-pill    { display: flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 20px; font-size: .82rem; font-weight: 700; }
.inv-alert-pill.scaduto     { background: rgba(255,59,48,.14); color: var(--danger); border: 1px solid rgba(255,59,48,.3); }
.inv-alert-pill.in-scadenza { background: rgba(255,149,0,.14); color: var(--warning); border: 1px solid rgba(255,149,0,.3); }
.inv-search-bar    { padding: 10px 16px 6px; }
.inv-search-wrap   { display: flex; align-items: center; background: var(--bg-secondary); border-radius: 12px; border: .5px solid var(--border-color); padding: 0 12px; gap: 8px; height: 40px; }
.inv-search-icon   { font-size: .9rem; flex-shrink: 0; }
.inv-search-input  { flex: 1; background: transparent; border: none; outline: none; font-family: inherit; font-size: .95rem; color: var(--text-color); }
.inv-search-input::placeholder { color: var(--text-secondary); }
.inv-search-clear  { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: .9rem; padding: 4px; display: flex; align-items: center; }
.inv-tabs          { display: flex; padding: 8px 12px 4px; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.inv-tabs::-webkit-scrollbar { display: none; }
.inv-tab           { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 14px; border: .5px solid var(--border-color); background: var(--bg-secondary); border-radius: 14px; cursor: pointer; font-family: inherit; transition: all .2s; white-space: nowrap; min-width: 72px; }
.inv-tab.active    { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(10,132,255,.35); }
.inv-tab-icon      { font-size: 1.1rem; line-height: 1; }
.inv-tab-label     { font-size: .68rem; font-weight: 700; color: inherit; }
.inv-tab-count     { font-size: .7rem; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.inv-tab.active .inv-tab-count { color: rgba(255,255,255,.8); }
.inv-tab-badge     { background: var(--danger); color: #fff; border-radius: 10px; padding: 1px 5px; font-size: .6rem; font-weight: 800; }
.inv-tabs.is-reordering .inv-tab { animation: inv-tab-wiggle .16s ease-in-out infinite alternate; touch-action: none; }
.inv-tabs .inv-tab.is-dragging { opacity: .45; }
.inv-tabs-reorder-done { display:none; }
@keyframes inv-tab-wiggle { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }
@media (max-width:1024px) {
    .inv-tabs-reorder-done { position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:1001; display:block; padding:10px 16px; border:0; border-radius:999px; background:var(--accent); color:#fff; font:inherit; font-weight:700; box-shadow:0 6px 18px rgba(10,132,255,.28); }
    .inv-tabs-reorder-done[hidden] { display:none; }
}
.inv-list          { padding: 8px 16px 100px; }
.inv-section       { margin-bottom: 20px; }
.inv-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; font-size: .78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.inv-section-count { font-size: .75rem; font-weight: 600; background: var(--bg-secondary); border-radius: 10px; padding: 2px 8px; }
.inv-item          { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 14px; margin-bottom: 8px; cursor: pointer; transition: transform .12s, background .15s; -webkit-tap-highlight-color: transparent; }
.inv-item:active   { transform: scale(.98); background: var(--bg-secondary); }
.inv-item-scaduto     { border-left: 3px solid var(--danger); }
.inv-item-in_scadenza { border-left: 3px solid var(--warning); }
.inv-item-icon     { font-size: 1.4rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border-radius: 10px; flex-shrink: 0; }
.inv-item-info     { flex: 1; min-width: 0; }
.inv-item-nome     { font-size: .95rem; font-weight: 600; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-item-cat      { font-size: .75rem; color: var(--text-secondary); margin-top: 2px; }
.inv-item-right    { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.inv-item-qty      { font-size: .82rem; font-weight: 600; color: var(--text-color); }
.inv-item-scad     { font-size: .72rem; font-weight: 600; }
.inv-item-scad-ok       { color: var(--text-secondary); }
.inv-item-scad-in_scadenza { color: var(--warning); }
.inv-item-scad-scaduto  { color: var(--danger); }
.inv-empty         { text-align: center; padding: 48px 24px; color: var(--text-secondary); }
.inv-empty-icon    { font-size: 3rem; margin-bottom: 12px; }
.inv-empty p       { font-size: .95rem; margin: 4px 0; }
.inv-empty-sub     { font-size: .82rem; }
.inv-fab           { position: fixed; bottom: calc(env(safe-area-inset-bottom,0px) + 80px); right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.8rem; font-weight: 300; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(10,132,255,.5); display: flex; align-items: center; justify-content: center; z-index: 100; transition: transform .15s; line-height: 1; }
.inv-fab:active    { transform: scale(.9); }
.inv-form-section  { margin-bottom: 18px; }
.inv-form-label    { display: block; font-size: .78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; padding-left: 2px; }
.inv-form-input    { width: 100%; padding: 12px 14px; background: var(--bg-secondary); border: .5px solid var(--border-color); border-radius: 12px; font-family: inherit; font-size: .95rem; color: var(--text-color); outline: none; transition: border-color .2s; }
.inv-form-input:focus { border-color: var(--accent); }

/* Evita lo zoom automatico dei campi e lo spostamento del viewport sui telefoni. */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    .hc-overlay,
    .hc-sheet {
        max-width: 100vw;
        box-sizing: border-box;
    }
}

.inv-form-textarea { resize: none; min-height: 70px; }
.inv-form-row-barcode { display: flex; gap: 8px; align-items: stretch; }
.inv-form-row-barcode .inv-form-input { flex: 1; }
.inv-barcode-btn   { width: 46px; flex-shrink: 0; background: var(--bg-secondary); border: .5px solid var(--border-color); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--accent); transition: background .15s; }
.inv-barcode-btn:active { background: var(--border-color); }
.inv-form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-form-pills    { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-pill-opt      { padding: 9px 16px; border-radius: 20px; border: 1.5px solid var(--border-color); background: var(--bg-secondary); font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .2s; white-space: nowrap; }
.inv-pill-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.inv-form-error    { background: rgba(255,59,48,.12); border: 1px solid rgba(255,59,48,.3); border-radius: 10px; color: var(--danger); font-size: .85rem; padding: 10px 14px; margin-bottom: 12px; }
.inv-btn-primary   { width: 100%; padding: 14px; background: var(--accent); color: #fff; border: none; border-radius: 14px; font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: opacity .15s; margin-top: 8px; }
.inv-btn-primary:active { opacity: .8; }
.inv-btn-secondary { flex: 1; padding: 13px; background: var(--bg-secondary); color: var(--text-color); border: .5px solid var(--border-color); border-radius: 14px; font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.inv-btn-secondary:active { background: var(--border-color); }
.inv-btn-danger    { flex: 1; padding: 13px; background: rgba(255,59,48,.12); color: var(--danger); border: 1px solid rgba(255,59,48,.25); border-radius: 14px; font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.inv-detail-badge  { border-radius: 10px; padding: 8px 14px; font-size: .85rem; font-weight: 700; margin-bottom: 14px; text-align: center; }
.inv-detail-badge.scaduto     { background: rgba(255,59,48,.12); color: var(--danger); }
.inv-detail-badge.in-scadenza { background: rgba(255,149,0,.12); color: var(--warning); }
.inv-detail-grid   { background: var(--bg-secondary); border-radius: 14px; border: .5px solid var(--border-color); overflow: hidden; margin-bottom: 20px; }
.inv-detail-row    { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: .5px solid var(--border-color); }
.inv-detail-row:last-child { border-bottom: none; }
.inv-detail-label  { font-size: .85rem; color: var(--text-secondary); }
.inv-detail-value  { font-size: .9rem; font-weight: 600; color: var(--text-color); text-align: right; }
.inv-detail-actions { display: flex; gap: 10px; }
.inv-detail-qty-row { margin-bottom: 18px; }
.inv-qty-ctrl      { display: flex; align-items: center; gap: 10px; background: var(--bg-secondary); border-radius: 14px; border: .5px solid var(--border-color); padding: 6px 12px; }
.inv-qty-btn       { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--card-bg); color: var(--accent); font-size: 1.4rem; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.inv-qty-btn:active { background: var(--border-color); }
.inv-qty-input     { flex: 1; text-align: center; background: transparent; border: none; outline: none; font-family: inherit; font-size: 1.1rem; font-weight: 700; color: var(--text-color); }
.inv-confirm-msg   { font-size: .95rem; color: var(--text-color); margin: 0 0 20px; line-height: 1.5; }
.inv-scanner-sheet .hc-sheet-body { padding-bottom: 32px; }
.inv-scanner-viewport  { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; background: #000; margin-bottom: 14px; }
.inv-scanner-viewport #scannerViewport { width: 100%; height: 100%; }
.inv-scanner-viewport video { width: 100%; height: 100%; object-fit: cover; }
.inv-scanner-crosshair { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.inv-scanner-crosshair::before { content: ''; width: 60%; aspect-ratio: 3/1; border: 2px solid var(--accent); border-radius: 8px; box-shadow: 0 0 0 2000px rgba(0,0,0,.4); }
.inv-scanner-hint      { font-size: .85rem; color: var(--text-secondary); text-align: center; margin-bottom: 14px; }
.inv-scanner-result    { background: var(--bg-secondary); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; text-align: center; }
.inv-scanner-result-code  { font-family: monospace; font-size: 1rem; font-weight: 700; color: var(--accent); display: block; margin-bottom: 4px; }
.inv-scanner-result-label { font-size: .82rem; color: var(--text-secondary); }

/* =====================================================
   v3.6 — DOCUMENTI  (doc-*)
   ===================================================== */
.doc-page-header   { padding: 16px 20px 8px; }
.doc-title         { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--text-color); margin: 8px 0 10px; line-height: 1.1; }
.doc-alert-bar     { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.doc-alert-pill    { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 20px; font-size: .78rem; font-weight: 700; }
.doc-alert-pill.scaduto { background: rgba(255,59,48,.14); color: var(--danger); border: 1px solid rgba(255,59,48,.3); }
.doc-alert-pill.alert   { background: rgba(255,59,48,.10); color: var(--danger); border: 1px solid rgba(255,59,48,.2); }
.doc-alert-pill.warn    { background: rgba(255,149,0,.12); color: var(--warning); border: 1px solid rgba(255,149,0,.25); }
.doc-list          { padding: 8px 16px 100px; }
.doc-section       { margin-bottom: 22px; }
.doc-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
.doc-section-persona { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 700; color: var(--text-color); }
.doc-section-icon  { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.doc-section-count { font-size: .72rem; font-weight: 600; background: var(--bg-secondary); border-radius: 10px; padding: 2px 8px; color: var(--text-secondary); }
.doc-item          { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 14px; margin-bottom: 8px; cursor: pointer; transition: transform .12s, background .15s; -webkit-tap-highlight-color: transparent; }
.doc-item:active   { transform: scale(.98); background: var(--bg-secondary); }
.doc-item-scaduto  { border-left: 3px solid var(--danger); }
.doc-item-alert    { border-left: 3px solid var(--danger); opacity: .9; }
.doc-item-urgente  { border-left: 3px solid var(--danger); }
.doc-item-warn     { border-left: 3px solid var(--warning); }
.doc-item-icon     { font-size: 1.5rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border-radius: 10px; flex-shrink: 0; }
.doc-item-info     { flex: 1; min-width: 0; }
.doc-item-tipo     { font-size: .93rem; font-weight: 700; color: var(--text-color); }
.doc-item-numero   { font-size: .75rem; color: var(--text-secondary); margin-top: 2px; font-family: monospace; }
.doc-item-right    { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.doc-item-scad     { font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.doc-item-scad-ok      { color: var(--text-secondary); }
.doc-item-scad-warn    { color: var(--warning); }
.doc-item-scad-alert   { color: var(--danger); }
.doc-item-scad-scaduto { color: var(--danger); }
.doc-item-stato-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.doc-stato-warn    { background: var(--warning); }
.doc-stato-alert   { background: var(--danger); }
.doc-stato-scaduto { background: var(--danger); }
.doc-empty         { text-align: center; padding: 56px 24px; color: var(--text-secondary); }
.doc-empty-icon    { font-size: 3rem; margin-bottom: 12px; }
.doc-empty p       { font-size: .95rem; margin: 4px 0; }
.doc-empty-sub     { font-size: .82rem; }
.doc-fab           { position: fixed; bottom: calc(env(safe-area-inset-bottom,0px) + 80px); right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.8rem; font-weight: 300; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(10,132,255,.5); display: flex; align-items: center; justify-content: center; z-index: 100; transition: transform .15s; line-height: 1; }
.doc-fab:active    { transform: scale(.9); }
.doc-form-section  { margin-bottom: 18px; }
.doc-form-label    { display: block; font-size: .78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; padding-left: 2px; }
.doc-form-input    { width: 100%; padding: 12px 14px; background: var(--bg-secondary); border: .5px solid var(--border-color); border-radius: 12px; font-family: inherit; font-size: .95rem; color: var(--text-color); outline: none; transition: border-color .2s; }
.doc-form-input:focus { border-color: var(--accent); }
.doc-form-textarea { resize: none; min-height: 68px; }
.doc-form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.doc-form-pills    { display: flex; gap: 7px; flex-wrap: wrap; }
.doc-pill-opt      { padding: 8px 12px; border-radius: 20px; border: 1.5px solid var(--border-color); background: var(--bg-secondary); font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .2s; white-space: nowrap; }
.doc-pill-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.doc-form-error    { background: rgba(255,59,48,.12); border: 1px solid rgba(255,59,48,.3); border-radius: 10px; color: var(--danger); font-size: .85rem; padding: 10px 14px; margin-bottom: 12px; }
.doc-btn-primary   { width: 100%; padding: 14px; background: var(--accent); color: #fff; border: none; border-radius: 14px; font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: opacity .15s; margin-top: 8px; }
.doc-btn-primary:active { opacity: .8; }
.doc-btn-secondary { flex: 1; padding: 13px; background: var(--bg-secondary); color: var(--text-color); border: .5px solid var(--border-color); border-radius: 14px; font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.doc-btn-secondary:active { background: var(--border-color); }
.doc-btn-danger    { flex: 1; padding: 13px; background: rgba(255,59,48,.12); color: var(--danger); border: 1px solid rgba(255,59,48,.25); border-radius: 14px; font-family: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.doc-detail-badge  { border-radius: 10px; padding: 8px 14px; font-size: .85rem; font-weight: 700; margin-bottom: 14px; text-align: center; }
.doc-detail-badge.scaduto,
.doc-detail-badge.alert,
.doc-detail-badge.urgente { background: rgba(255,59,48,.12); color: var(--danger); }
.doc-detail-badge.warn  { background: rgba(255,149,0,.12); color: var(--warning); }
.doc-detail-grid   { background: var(--bg-secondary); border-radius: 14px; border: .5px solid var(--border-color); overflow: hidden; margin-bottom: 20px; }
.doc-detail-row    { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: .5px solid var(--border-color); }
.doc-detail-row:last-child { border-bottom: none; }
.doc-detail-label  { font-size: .85rem; color: var(--text-secondary); }
.doc-detail-value  { font-size: .9rem; font-weight: 600; color: var(--text-color); text-align: right; }
.doc-detail-actions { display: flex; gap: 10px; }
.doc-confirm-msg   { font-size: .95rem; color: var(--text-color); margin: 0 0 20px; line-height: 1.5; }
.doc-tab           { display: none; }
.doc-tab.active    { display: block; }

/* =====================================================
   v3.6 — RICERCA GLOBALE  (cerca-*)
   ===================================================== */
.cerca-header      { padding: 16px 20px 4px; }
.cerca-title       { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--text-color); margin: 8px 0 14px; }
.cerca-form        { padding: 0 16px 12px; }
.cerca-input-wrap  { display: flex; align-items: center; background: var(--bg-secondary); border-radius: 14px; border: .5px solid var(--border-color); padding: 0 14px; gap: 10px; height: 46px; transition: border-color .2s; }
.cerca-input-wrap:focus-within { border-color: var(--accent); }
.cerca-icon        { font-size: 1rem; flex-shrink: 0; }
.cerca-input       { flex: 1; background: transparent; border: none; outline: none; font-family: inherit; font-size: 1rem; color: var(--text-color); }
.cerca-input::placeholder { color: var(--text-secondary); }
.cerca-clear       { color: var(--text-secondary); font-size: .9rem; text-decoration: none; padding: 4px; display: flex; align-items: center; }
.cerca-hint        { text-align: center; padding: 32px 24px; font-size: .9rem; color: var(--text-secondary); }
.cerca-empty       { text-align: center; padding: 48px 24px; color: var(--text-secondary); }
.cerca-empty-icon  { font-size: 2.8rem; margin-bottom: 12px; }
.cerca-empty p     { font-size: .95rem; margin: 4px 0; }
.cerca-empty-sub   { font-size: .82rem; }
.cerca-count       { font-size: .78rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; padding: 0 20px 10px; }
.cerca-list        { padding: 0 16px 100px; }
.cerca-group-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); padding: 14px 4px 6px; }
.cerca-group       { background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 14px; overflow: hidden; margin-bottom: 6px; }
.cerca-item        { display: flex; align-items: center; padding: 12px 14px; text-decoration: none; color: var(--text-color); border-bottom: .5px solid var(--border-color); transition: background .12s; gap: 10px; }
.cerca-item:last-child { border-bottom: none; }
.cerca-item:active { background: var(--bg-secondary); }
.cerca-item-info   { flex: 1; min-width: 0; }
.cerca-item-titolo { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cerca-item-sub    { font-size: .74rem; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cerca-item-arrow  { font-size: 1.1rem; color: var(--text-secondary); flex-shrink: 0; }
.cerca-suggerimenti { padding: 8px 16px 40px; }
.cerca-hint-title  { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin-bottom: 14px; padding-left: 4px; }
.cerca-moduli-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cerca-modulo-btn  { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 14px; text-decoration: none; color: var(--text-color); transition: border-color .15s, transform .12s; }
.cerca-modulo-btn:active { transform: scale(.96); background: var(--bg-secondary); }
.cerca-modulo-ico  { font-size: 1.6rem; line-height: 1; }
.cerca-modulo-lbl  { font-size: .72rem; font-weight: 700; text-align: center; }

.inv-congel-info {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(10,132,255,.08);
    border: 1px solid rgba(10,132,255,.2);
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent);
}

/* =====================================================
   v3.6 — RICETTE  (ric-*)
   ===================================================== */
.ric-header        { padding: 16px 20px 8px; }
.ric-title         { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--text-color); margin: 8px 0 4px; line-height: 1.1; }
.ric-subtitle      { font-size: .82rem; color: var(--text-secondary); margin: 0; }
.ric-urgenti-badge { display: inline-block; background: rgba(255,59,48,.12); color: var(--danger); border: 1px solid rgba(255,59,48,.25); border-radius: 10px; padding: 2px 10px; font-size: .78rem; font-weight: 700; }

.ric-alert         { margin: 10px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.ric-alert-row     { padding: 10px 14px; border-radius: 12px; font-size: .82rem; font-weight: 600; }
.ric-alert-row.scaduto    { background: rgba(255,59,48,.1); color: var(--danger); border: 1px solid rgba(255,59,48,.2); }
.ric-alert-row.in-scadenza{ background: rgba(255,149,0,.1); color: var(--warning); border: 1px solid rgba(255,149,0,.2); }

.ric-cta-wrap      { padding: 14px 16px 0; }
.ric-no-key        { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 18px; padding: 24px 20px; text-align: center; font-size: .9rem; color: var(--text-color); }
.ric-no-key code   { background: var(--bg-secondary); border-radius: 6px; padding: 2px 6px; font-size: .78rem; color: var(--accent); }

.ric-cta-card      { display: flex; align-items: center; gap: 14px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 18px; padding: 16px; }
.ric-cta-icon      { font-size: 2rem; flex-shrink: 0; }
.ric-cta-text      { flex: 1; min-width: 0; }
.ric-cta-titolo    { font-size: .92rem; font-weight: 700; color: var(--text-color); margin-bottom: 3px; }
.ric-cta-sub       { font-size: .74rem; color: var(--text-secondary); }
.ric-btn-genera    { background: var(--accent); color: #fff; border: none; border-radius: 14px; padding: 10px 16px; font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: opacity .15s; white-space: nowrap; }
.ric-btn-genera:disabled { opacity: .5; cursor: not-allowed; }
.ric-btn-genera:active   { opacity: .8; }

.ric-loading       { display: none; flex-direction: column; align-items: center; gap: 14px; padding: 40px 20px; }
.ric-loading.show  { display: flex; }
.ric-spinner       { width: 36px; height: 36px; border: 3px solid var(--border-color); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }
.ric-loading-txt   { font-size: .85rem; color: var(--text-secondary); text-align: center; }

.ric-errore        { display: none; margin: 12px 16px 0; padding: 12px 16px; background: rgba(255,59,48,.1); border: 1px solid rgba(255,59,48,.2); border-radius: 12px; font-size: .85rem; color: var(--danger); font-weight: 600; }
.ric-errore.show   { display: block; }

.ric-sezione-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); padding: 16px 4px 8px; }

.ric-card          { background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 18px; padding: 16px; margin-bottom: 10px; cursor: pointer; transition: transform .12s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.ric-card:active   { transform: scale(.98); }
.ric-card-urgente  { border-color: rgba(255,59,48,.35); background: linear-gradient(135deg, rgba(255,59,48,.04), var(--card-bg)); }
.ric-card-urgente:active { border-color: rgba(255,59,48,.6); }

.ric-card-header   { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ric-card-titolo   { font-size: 1rem; font-weight: 700; color: var(--text-color); line-height: 1.3; flex: 1; }
.ric-card-meta     { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ric-tempo         { font-size: .72rem; color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.ric-diff          { font-size: .72rem; font-weight: 700; white-space: nowrap; }
.ric-card-desc     { font-size: .8rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
.ric-urgenti-usati { font-size: .74rem; font-weight: 700; color: var(--danger); margin-bottom: 8px; }

.ric-ingredienti-preview { display: flex; flex-wrap: wrap; gap: 5px; }
.ric-ing-lista     { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

.ric-ing-tag       { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: .72rem; font-weight: 600; }
.ric-ing-tag.ho       { background: rgba(48,209,88,.12); color: #30d158; border: 1px solid rgba(48,209,88,.2); }
.ric-ing-tag.mancante { background: rgba(255,149,0,.1); color: var(--warning); border: 1px solid rgba(255,149,0,.2); }
.ric-ing-tag.urgente  { background: rgba(255,59,48,.12); color: var(--danger); border: 1px solid rgba(255,59,48,.25); }

.ric-empty         { text-align: center; padding: 40px 20px; color: var(--text-secondary); font-size: .9rem; }

/* Dettaglio overlay */
.ric-detail-meta   { display: flex; gap: 16px; margin-bottom: 12px; font-size: .82rem; color: var(--text-secondary); font-weight: 600; }
.ric-detail-desc   { font-size: .88rem; color: var(--text-color); line-height: 1.6; margin-bottom: 16px; }
.ric-detail-section-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); margin: 14px 0 8px; }
.ric-istruzioni    { padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.ric-istruzioni li { font-size: .88rem; color: var(--text-color); line-height: 1.55; }

/* =====================================================
   v3.6 — DIARIO: ricerca interna  (dia-search-*)
   ===================================================== */
.dia-search-bar        { padding: 0 16px 12px; }
.dia-search-wrap       { display: flex; align-items: center; background: var(--bg-secondary); border-radius: 14px; border: .5px solid var(--border-color); padding: 0 14px; gap: 10px; height: 44px; transition: border-color .2s; }
.dia-search-wrap:focus-within { border-color: var(--accent); }
.dia-search-icon       { font-size: .9rem; flex-shrink: 0; }
.dia-search-input      { flex: 1; background: transparent; border: none; outline: none; font-family: inherit; font-size: .95rem; color: var(--text-color); }
.dia-search-input::placeholder { color: var(--text-secondary); }
.dia-search-clear      { color: var(--text-secondary); font-size: .9rem; text-decoration: none; padding: 4px; display: flex; align-items: center; flex-shrink: 0; }
.dia-search-risultati  { font-size: .75rem; color: var(--text-secondary); padding: 6px 4px 0; font-weight: 600; }

/* =====================================================
   v3.6 — BACKUP MANAGER  (bk-*)
   ===================================================== */
.bk-btn-primary   { flex: 1; padding: 13px 20px; background: var(--accent); color: #fff; border: none; border-radius: 14px; font-family: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; transition: opacity .15s; }
.bk-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.bk-btn-primary:active   { opacity: .8; }

.bk-row           { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 14px; padding: 13px 14px; margin-bottom: 8px; }
.bk-row-icon      { font-size: 1.2rem; flex-shrink: 0; }
.bk-row-info      { flex: 1; min-width: 0; }
.bk-row-data      { font-size: .88rem; font-weight: 600; color: var(--text-color); }
.bk-row-size      { font-size: .72rem; color: var(--text-secondary); margin-top: 2px; }
.bk-row-actions   { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.bk-btn-download  { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(10,132,255,.12); color: var(--accent); font-size: 1rem; font-weight: 700; text-decoration: none; transition: background .15s; }
.bk-file-download { background: var(--bg-secondary); border: .5px solid var(--border-color); border-radius: 10px; padding: 8px 12px; font-size: .78rem; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.bk-btn-download:hover { background: rgba(10,132,255,.22); }
.bk-btn-delete    { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,59,48,.1); border: none; cursor: pointer; font-size: .9rem; transition: background .15s; }
.bk-btn-delete:hover { background: rgba(255,59,48,.2); }

/* =====================================================
   v3.6 — IMPORT FOTO  (imp-*)
   ===================================================== */
.imp-step          { margin: 0 16px 16px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 18px; padding: 16px; }
.imp-step-num      { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .78rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.imp-step-label    { font-size: .88rem; font-weight: 700; color: var(--text-color); margin-bottom: 12px; }

.imp-dropzone      { border: 2px dashed var(--border-color); border-radius: 14px; padding: 32px 20px; text-align: center; cursor: pointer; transition: border-color .18s, background .18s; }
.imp-dropzone:hover,
.imp-dropzone:active { border-color: var(--accent); background: rgba(10,132,255,.04); }
.imp-drop-icon     { font-size: 2.5rem; margin-bottom: 10px; }
.imp-drop-txt      { font-size: .9rem; font-weight: 600; color: var(--text-color); margin-bottom: 4px; }
.imp-drop-sub      { font-size: .75rem; color: var(--text-secondary); }

.imp-progress-bar  { height: 6px; background: var(--bg-secondary); border-radius: 3px; overflow: hidden; }
.imp-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s ease; }
.imp-progress-txt  { font-size: .8rem; color: var(--text-secondary); margin-top: 6px; font-weight: 600; }
.imp-progress-count{ font-size: .75rem; color: var(--text-secondary); margin-top: 3px; }

.imp-zip-info      { background: rgba(10,132,255,.08); border: .5px solid rgba(10,132,255,.2); border-radius: 10px; padding: 10px 14px; font-size: .82rem; font-weight: 600; color: var(--accent); }

.imp-cat-btn       { padding: 9px 16px; border-radius: 20px; border: 1.5px solid var(--border-color); background: var(--bg-secondary); font-family: inherit; font-size: .85rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .18s; white-space: nowrap; }
.imp-cat-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.imp-log           { max-height: 180px; overflow-y: auto; margin-top: 10px; scrollbar-width: none; }
.imp-log::-webkit-scrollbar { display: none; }
.imp-log-row       { font-size: .72rem; padding: 2px 0; line-height: 1.5; }
.imp-log-row.ok    { color: #30d158; }
.imp-log-row.skip  { color: var(--text-secondary); }
.imp-log-row.err   { color: var(--danger); }

/* =====================================================
   v3.6 — IMPORTA FOTO  (imp-*)
   ===================================================== */
.imp-istruzioni    { margin: 0 16px 16px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.imp-step          { display: flex; align-items: flex-start; gap: 12px; font-size: .82rem; color: var(--text-color); line-height: 1.4; }
.imp-step-n        { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

.imp-label         { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-secondary); margin-bottom: 10px; }

.imp-cat-grid      { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.imp-cat-btn       { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 16px; cursor: pointer; font-family: inherit; transition: all .18s; -webkit-tap-highlight-color: transparent; }
.imp-cat-btn.active { border-color: var(--accent); background: rgba(10,132,255,.08); box-shadow: 0 0 0 2px rgba(10,132,255,.2); }
.imp-cat-btn:active { transform: scale(.96); }
.imp-cat-emoji     { font-size: 1.6rem; line-height: 1; }
.imp-cat-nome      { font-size: .85rem; font-weight: 700; color: var(--text-color); }
.imp-cat-count     { font-size: .68rem; color: var(--text-secondary); }

.imp-dropzone      { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 20px; background: var(--bg-secondary); border: 1.5px dashed var(--border-color); border-radius: 18px; cursor: pointer; transition: border-color .18s, background .18s; text-align: center; }
.imp-dropzone:hover,
.imp-drag          { border-color: var(--accent); background: rgba(10,132,255,.05); }
.imp-drop-icon     { font-size: 2.4rem; }
.imp-drop-txt      { font-size: .85rem; color: var(--text-secondary); line-height: 1.5; }

.imp-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: .82rem; font-weight: 600; color: var(--text-color); }
.imp-progress-bar  { height: 6px; background: var(--bg-secondary); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.imp-progress-fill { height: 100%; background: var(--accent); border-radius: 10px; transition: width .3s ease; }
.imp-log           { max-height: 180px; overflow-y: auto; background: var(--bg-secondary); border-radius: 12px; padding: 10px 12px; scrollbar-width: none; }
.imp-log::-webkit-scrollbar { display: none; }

/* =====================================================
   v3.6 — RIUNIONE  (riu-*)
   ===================================================== */
.riu-wrap          { padding: 0 20px 40px; }
.riu-header        { padding: 20px 0 16px; }
.riu-title         { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; }
.riu-subtitle      { font-size: .85rem; color: var(--text-secondary); }
.riu-card          { background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 22px; padding: 28px 24px; margin-bottom: 16px; }
.riu-visualizer    { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 56px; margin-bottom: 24px; }
.riu-bar           { width: 4px; border-radius: 3px; background: var(--accent); transition: height .1s ease; min-height: 4px; opacity: .7; }
.riu-bar.active    { opacity: 1; }
.riu-timer         { text-align: center; font-size: 3.2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 8px; color: var(--text-color); }
.riu-timer.recording { color: var(--danger); }
.riu-status        { text-align: center; font-size: .82rem; color: var(--text-secondary); margin-bottom: 28px; min-height: 20px; }
.riu-status.rec    { color: var(--danger); font-weight: 600; }
.riu-status.done   { color: var(--success); font-weight: 600; }
.riu-controls      { display: flex; gap: 12px; justify-content: center; }
.riu-btn           { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 50px; border: none; font-family: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; transition: all .2s; }
.riu-btn:disabled  { opacity: .4; cursor: not-allowed; }
.riu-btn-rec       { background: var(--danger); color: #fff; min-width: 140px; }
.riu-btn-rec:hover:not(:disabled) { background: #ff1a0d; transform: scale(1.03); }
.riu-btn-stop      { background: var(--bg-secondary); color: var(--text-color); }
.riu-btn-stop:hover:not(:disabled) { background: var(--border-color); }
.riu-btn-dot       { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.riu-btn-dot.pulse { animation: pulse 1s infinite; }
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.3} }
.riu-field         { margin-bottom: 16px; }
.riu-field label   { display: block; font-size: .75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.riu-field input, .riu-field textarea { width: 100%; padding: 12px 14px; background: var(--bg-secondary); border: .5px solid var(--border-color); border-radius: 12px; color: var(--text-color); font-family: inherit; font-size: .9rem; outline: none; }
.riu-field input:focus, .riu-field textarea:focus { border-color: var(--accent); }
.riu-field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.riu-transcript-live { background: var(--bg-secondary); border: .5px solid var(--border-color); border-radius: 14px; padding: 16px; margin-bottom: 16px; font-size: .88rem; line-height: 1.7; color: var(--text-secondary); min-height: 80px; display: none; }
.riu-transcript-live.show { display: block; }
.riu-actions       { display: flex; gap: 10px; flex-wrap: wrap; }
.riu-btn-save      { flex: 1; background: var(--accent); color: #fff; padding: 14px; border-radius: 14px; border: none; font-family: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; transition: opacity .2s; }
.riu-btn-save:hover { opacity: .85; }
.riu-btn-save:disabled { opacity: .4; cursor: not-allowed; }
.riu-btn-copy      { background: var(--bg-secondary); color: var(--text-color); padding: 14px 18px; border-radius: 14px; border: .5px solid var(--border-color); font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: all .2s; }
.riu-btn-copy:hover { border-color: var(--accent); color: var(--accent); }
.riu-btn-new       { width: 100%; background: transparent; color: var(--text-secondary); padding: 12px; border-radius: 14px; border: .5px solid var(--border-color); font-family: inherit; font-size: .88rem; cursor: pointer; transition: all .2s; margin-top: 8px; }
.riu-btn-new:hover { border-color: var(--accent); color: var(--accent); }
.riu-saved         { display: none; text-align: center; padding: 20px; color: var(--success); font-weight: 700; font-size: 1rem; }
.riu-saved.show    { display: block; }
.riu-device-wrap   { margin-bottom: 20px; }
.riu-device-label  { font-size: .75rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.riu-device-select { width: 100%; padding: 11px 14px; background: var(--bg-secondary); border: .5px solid var(--border-color); border-radius: 12px; color: var(--text-color); font-family: inherit; font-size: .88rem; outline: none; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.riu-device-select:focus { border-color: var(--accent); }
.riu-device-hint   { font-size: .75rem; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }
.riu-device-hint a { color: var(--accent); text-decoration: none; }
.riu-info          { background: rgba(10,132,255,.08); border: .5px solid rgba(10,132,255,.2); border-radius: 14px; padding: 14px 16px; font-size: .82rem; color: var(--text-secondary); line-height: 1.6; }
.riu-info strong   { color: var(--accent); }
.riu-section       { display: none; }
.riu-section.show  { display: block; }

/* Fix select dropdown dark mode */
select { color-scheme: light dark; }
select option { background: var(--card-bg, #1c1c1e); color: var(--text-color, #fff); }

/* ── AI News badge in area_privata ──────────────────────────────── */
.ap-telegram-btn {
    display: block;
    width: calc(100% - 40px);
    margin: 8px 20px 4px;
    padding: 13px 16px;
    background: rgba(0,136,204,.12);
    border: 1px solid rgba(0,136,204,.3);
    border-radius: 14px;
    color: #29a8e0;
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.ap-telegram-btn:hover {
    background: rgba(0,136,204,.2);
}
.ap-telegram-btn:disabled {
    opacity: .6;
    cursor: wait;
}

/* =====================================================
   FORM — Pulsante salva (modale sheet)
   ===================================================== */
.btn-salva {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
    margin-top: 8px;
}
.btn-salva:active { opacity: .8; }

/* ── Swipe actions: nascoste su mouse/desktop ── */
@media (hover: hover) and (pointer: fine) {
    .sw-action { display: none !important; }
}

/* =====================================================
   RSS / AI NEWS
   ===================================================== */

/* ── Admin: bottone aggiorna ── */
.aggiorna-btn {
    display: block;
    margin: 12px 20px 0;
    padding: 11px 16px;
    background: rgba(10,132,255,.10);
    border: 1px solid rgba(10,132,255,.3);
    border-radius: 14px;
    color: var(--accent);
    font-size: .88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
    text-align: left;
}
.aggiorna-btn:hover    { background: rgba(10,132,255,.18); }
.aggiorna-btn:disabled { opacity: .6; cursor: wait; }

.aggiorna-log {
    display: none;
    margin: 8px 20px 4px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    border-radius: 12px;
    font-size: .78rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    line-height: 1.6;
}

/* ── Azioni bottoni feed (flex wrapper dentro list-item) ── */
.feed-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Paginazione centrata ── */
.page-actions-center {
    justify-content: center;
}

/* ── Thumb icona (senza immagine, solo emoji/testo) ── */
.list-thumb-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(10,132,255,.12);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ── Badge non letti ── */
.rss-nonletti-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 5px;
    vertical-align: middle;
}

/* ── Layout wrapper desktop/mobile ── */
.rss-desktop-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ── Tab bar AI / Apple / Salvati ── */
.rss-tab-bar {
    display: flex;
    gap: 4px;
    padding: 10px 16px 0;
    border-bottom: .5px solid var(--border-color);
    flex-shrink: 0;
}
.rss-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 10px 10px 0 0;
    font-size: .83rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color .15s, background .15s;
    white-space: nowrap;
    position: relative;
}
.rss-tab:hover { color: var(--text-color); background: var(--glass-bg); }
.rss-tab.on {
    color: var(--accent);
    background: rgba(10,132,255,.10);
    border-bottom: 2px solid var(--accent);
}
.rss-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
}
.rss-tab-badge-gold { background: #ff9f0a; }

/* ── Filter bar ── */
.rss-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: .5px solid var(--border-color);
    flex-shrink: 0;
    min-height: 0;
}

/* ── Chip generici ── */
.rss-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
}
.rss-chip:hover  { background: var(--glass-bg); color: var(--text-color); }
.rss-chip.on     { background: rgba(10,132,255,.14); border-color: rgba(10,132,255,.4); color: var(--accent); }
.rss-chip-feed-btn { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* ── Dropdown feed / azioni ── */
.rss-feed-dropdown { position: relative; }

.rss-feed-menu {
    display: none;
    position: fixed;
    z-index: 9999;
    min-width: 220px;
    max-width: 280px;
    max-height: 55vh;
    overflow-y: auto;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    padding: 6px 0;
    scrollbar-width: none;
}
.rss-feed-menu::-webkit-scrollbar { display: none; }
.rss-feed-menu.open { display: block; }

.rss-feed-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: .85rem;
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
    transition: background .1s;
    white-space: nowrap;
    overflow: hidden;
}
.rss-feed-menu-item:hover,
.rss-feed-menu-item:active { background: var(--glass-bg); }
.rss-feed-menu-item.active { color: var(--accent); font-weight: 700; }
.rss-feed-menu-item.vuoto  { opacity: .4; }
.rss-feed-menu-reset { color: var(--danger); border-bottom: .5px solid var(--border-color); margin-bottom: 4px; }

.rss-feed-menu-nome  { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.rss-feed-menu-count {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: rgba(10,132,255,.18);
    color: var(--accent);
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Menu azioni ⋯ ── */
.rss-azioni-menu { min-width: 200px; }
.rss-azioni-danger { color: var(--danger); }

/* ── Barra selezione multipla ── */
.rss-bulk-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(10,132,255,.08);
    border-bottom: .5px solid rgba(10,132,255,.2);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.rss-bulk-bar.visible { display: flex; }
.rss-bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rss-bulk-btn {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    font-family: inherit;
}
.rss-bulk-btn.danger { color: var(--danger); border-color: rgba(255,59,48,.3); }
.rss-bulk-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 6px;
    font-family: inherit;
}

/* ── Area articoli ── */
.rss-main-area { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rss-articles-scroll { flex: 1; }
/* ── Singolo articolo ── */
.rss-article {
    padding: 13px 16px 11px;
    border-bottom: .5px solid var(--border-color);
    transition: background .12s;
    position: relative;
}
.rss-article:last-child { border-bottom: none; }
.rss-article.letto { opacity: .5; }
.rss-article.selected { background: rgba(10,132,255,.06); }

/* selezione multipla: mostra checkbox */
.rss-articles-grid.selection-mode .rss-select-check { display: flex; }
.rss-select-check {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
    margin-right: 4px;
    margin-bottom: 6px;
}
.rss-check-box {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary);
    transition: background .12s, border-color .12s;
}
.rss-check-box.checked {
    background: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}

.rss-article-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.rss-feed-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}
.rss-titolo {
    font-size: .93rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-color);
}
.rss-arrow {
    font-size: 1.3rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-top: 2px;
    transition: transform .2s;
}
.rss-riassunto {
    display: none;
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 8px;
    padding-top: 8px;
    border-top: .5px solid var(--border-color);
}
.rss-riassunto.show { display: block; }

/* ── Pulsanti azioni articolo ── */
.rss-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.rss-btn-save,
.rss-btn-open,
.rss-btn-traduci,
.rss-btn-hide,
.rss-btn-playlist {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 600;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
    flex-shrink: 0;
}
.rss-btn-save:hover    { color: #ff9f0a; border-color: rgba(255,159,10,.4); }
.rss-btn-save.saved    { color: #ff9f0a; border-color: rgba(255,159,10,.4); background: rgba(255,159,10,.1); }
.rss-btn-open:hover    { color: var(--accent); border-color: rgba(10,132,255,.4); }
.rss-btn-traduci:hover { color: var(--accent); border-color: rgba(10,132,255,.4); }
.rss-btn-hide:hover    { color: var(--danger); border-color: rgba(255,59,48,.3); }
.rss-btn-playlist:hover { color: var(--accent); border-color: rgba(10,132,255,.4); }

/* badge VIDEO YouTube */
.rss-badge-video {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: .68rem;
    font-weight: 700;
    background: rgba(255,59,48,.15);
    color: #ff453a;
    white-space: nowrap;
}

/* =====================================================
   UTILITY — testo colorato (usabile ovunque)
   ===================================================== */
.text-danger  { color: var(--danger)  !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-accent  { color: var(--accent)  !important; }
.text-muted   { color: var(--text-secondary) !important; }
.text-sm-bold { font-size: .85rem; font-weight: 600; }
.text-xs      { font-size: .72rem; display: block; margin-top: 2px; }
.text-sub     { color: var(--text-secondary); font-weight: 500; }

/* =====================================================
   BILANCIO CARD — estensioni
   (.bilancio-card e .bilancio-grid già esistono sopra)
   ===================================================== */
.bilancio-grid-mb   { margin-bottom: 16px; }

.bilancio-saldo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 0.5px solid var(--border-color);
    gap: 8px;
}
.bilancio-saldo-row .bilancio-saldo-label {
    font-size: .85rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.bilancio-saldo-row .bilancio-saldo-value {
    font-size: 1.2rem;
    font-weight: 800;
}
.bilancio-saldo-value.positivo { color: var(--success); }
.bilancio-saldo-value.negativo { color: var(--danger); }

/* =====================================================
   LIST ITEM GENERICO
   Classi canoniche: .list-items / .list-item /
     .list-item-inner / .list-thumb / .list-details /
     .list-desc / .list-meta / .list-amount / .list-price
   Alias ui-sf-* = stesse regole, retrocompatibilità
   ===================================================== */

/* Wrapper lista */
.list-items,
.ui-sf-list {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-radius: 16px;
    border: 0.5px solid var(--border-color);
    overflow: hidden;
    margin: 0 20px 20px;
}

/* Header sezione */
.list-header,
.ui-sf-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 10px;
}

.list-select-btn {
    border: 1px solid rgba(10,132,255,.35);
    background: rgba(10,132,255,.1);
    color: var(--accent);
    border-radius: 12px;
    padding: 7px 12px;
    font-size: .82rem;
    font-weight: 700;
}
.list-header-actions { display: flex; align-items: center; gap: 8px; }

/* Singolo item */
.list-item,
.ui-sf-item {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 0.5px solid var(--border-color);
    background: var(--card-bg);
    padding: 13px 14px;
    gap: 12px;
}
.list-item:last-child,
.ui-sf-item:last-child { border-bottom: none; }
.list-item.is-hidden { display: none; }
.list-item.removing {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .2s, max-height .3s;
}
.list-empty-row {
    justify-content: center;
    color: var(--text-secondary);
    cursor: default;
    padding: 16px;
    text-align: center;
}

.list-check-wrap {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
}
.list-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary);
}
.list-items.select-mode .list-check-wrap { display: flex; }
.list-item.selected .list-checkbox {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 4px var(--card-bg);
}

/* Inner cliccabile */
.list-item-inner,
.sp-swipe-inner {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    cursor: pointer;
    background: var(--card-bg);
    position: relative;
    z-index: 1;
    min-width: 0;
    transition: transform .28s cubic-bezier(.25,.46,.45,.94);
}
.list-item:has(.list-item-inner),
.ui-sf-item:has(.sp-swipe-inner) {
    padding: 0;
    gap: 0;
}
.list-item:active .list-item-inner,
.ui-sf-item:active .sp-swipe-inner { background: var(--bg-secondary); }

/* Variante entrata */
.list-item.entrata .list-item-inner,
.ui-sf-item.sp-entrata .sp-swipe-inner {
    background: rgba(52,199,89,.04);
}

/* Icona / thumb */
.list-thumb,
.ui-sf-thumb {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

/* Testo centrale */
.list-details,
.ui-sf-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Riga descrizione + badge inline */
.list-desc,
.ui-sf-desc {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-color);
}

/* Meta: data · categoria */
.list-meta,
.ui-sf-meta {
    font-size: .75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Colonna importo */
.list-amount,
.ui-sf-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 3px;
}

/* Importo (uscita = rosso, entrata = verde) */
.list-price,
.ui-sf-price {
    font-size: .92rem;
    font-weight: 700;
    color: var(--danger);
}
.list-price.entrata,
.ui-sf-price.sp-price-entrata { color: var(--success); }

/* Badge inline (ricorrente, anticipato, rimborsato) */
.list-badge,
.ui-sf-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.list-badge-warn,
.ui-sf-badge-warn { background: rgba(255,149,0,.15);  color: var(--warning); }
.list-badge-ok,
.ui-sf-badge-ok   { background: rgba(52,199,89,.15);  color: var(--success); }
.list-badge-rec,
.ui-sf-badge-rec  { background: rgba(10,132,255,.12); color: var(--accent);  }
.list-badge-danger { background: rgba(255,59,48,.12); color: var(--danger); }
.list-payer {
    font-size: .72rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.list-more-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.list-more-btn:active { opacity: .7; }

.list-float-bar {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translate(-50%, 120%);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 18px;
    background: var(--nav-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 18px 45px rgba(0,0,0,.35);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition: transform .22s ease;
}
.list-float-bar.show { transform: translate(-50%, 0); }
.list-float-count {
    color: var(--text-color);
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}
.list-float-primary,
.list-float-cancel {
    border: none;
    border-radius: 12px;
    padding: 6px 9px;
    font-size: .78rem;
    font-weight: 700;
}
.list-float-primary { background: var(--accent); color: #fff; }
.list-float-cancel { background: var(--bg-secondary); color: var(--text-color); }

/* ── Swipe-to-delete ── */
.list-swipe-del,
.sp-swipe-del {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 90px;
    background: var(--danger);
    color: #fff;
    border: none;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    z-index: 0;
    transition: width .2s;
}

/* Stato swiped: inner scorre a sinistra, bottone visibile */
.list-item.swiped .list-item-inner,
.ui-sf-item.swiped .sp-swipe-inner {
    transform: translateX(-90px);
}

/* =====================================================
   RESPONSIVE — list-items / ui-sf-list
   ===================================================== */

/* iPhone piccolo */
@media (max-width: 389px) {
    .content-pad-x { padding: 0 12px; }
    .list-items,
    .ui-sf-list        { margin: 0 12px 16px; border-radius: 14px; }
    .list-thumb,
    .ui-sf-thumb       { width: 36px; min-width: 36px; height: 36px; font-size: 1rem; }
    .list-desc,
    .ui-sf-desc        { font-size: .88rem; }
    .list-price,
    .ui-sf-price       { font-size: .88rem; }
}

/* iPhone normale */
@media (max-width: 600px) {
    .content-pad-x { padding: 0 12px; }
    .list-items,
    .ui-sf-list        { margin: 0 12px 16px; }
    .bilancio-grid-mb { margin-bottom: 12px; }
    .list-float-bar { width: calc(100vw - 24px); justify-content: center; }
}

/* Tablet / PC */
@media (min-width: 768px) {
    .content-pad-x { padding: 0 28px; }
    .list-items,
    .ui-sf-list        { margin: 0 28px 24px; border-radius: 18px; }
    .list-item-inner,
    .sp-swipe-inner { padding: 15px 18px; gap: 14px; }
    .list-thumb,
    .ui-sf-thumb       { width: 46px; min-width: 46px; height: 46px; border-radius: 12px; font-size: 1.3rem; }
    .list-desc,
    .ui-sf-desc        { font-size: .95rem; }
    .list-meta,
    .ui-sf-meta        { font-size: .8rem; }
    .list-price,
    .ui-sf-price       { font-size: .97rem; }
    .bilancio-saldo-row { padding-top: 18px; }
    .bilancio-saldo-row .bilancio-saldo-value { font-size: 1.4rem; }
    .bilancio-grid-mb { margin-bottom: 20px; }
}

/* Desktop grande */
@media (min-width: 1440px) {
    .content-pad-x { padding: 0 32px; }
    .list-items,
    .ui-sf-list        { margin: 0 32px 28px; }
    .list-item-inner,
    .sp-swipe-inner { padding: 17px 22px; }
}

/* =====================================================
   LIBRERIA — classi complete con media query
   Tutte le classi ui-lib-* + form aggiungi_libro
   ===================================================== */

/* ── Tab bar ── */
.ui-lib-tab-bar {
    display: flex;
    margin: 0 20px 12px;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}
.ui-lib-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 4px;
    border: none;
    background: none;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s;
    position: relative;
}
.ui-lib-tab-btn.active {
    background: var(--card-bg);
    color: var(--accent);
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.tab-icon { font-size: .95rem; position: relative; }
.tab-label { font-size: .72rem; }
.ui-lib-badge {
    position: absolute;
    top: -5px; right: -7px;
    background: var(--accent);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 1px 4px;
    line-height: 1.4;
}

/* ── Ricerca ── */
.ui-lib-search {
    display: flex;
    gap: 8px;
    margin: 0 20px 10px;
    align-items: center;
}
.ui-lib-search input {
    flex: 1;
    padding: 10px 14px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-color);
    font-family: inherit;
    font-size: .88rem;
    outline: none;
    min-width: 0;
}
.ui-lib-search button {
    padding: 10px 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Barra filtri ── */
.ui-lib-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 20px 8px;
}
.ui-lib-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s, border-color .15s;
}
.ui-lib-filter-btn svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none; stroke-width: 2;
}
.ui-lib-filter-btn.on {
    background: rgba(10,132,255,.1);
    border-color: rgba(10,132,255,.3);
    color: var(--accent);
}
.ui-lib-filter-count {
    background: var(--accent);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 1px 5px;
}
.ui-lib-reset-all {
    font-size: .8rem;
    color: var(--danger);
    text-decoration: none;
    font-weight: 600;
    margin-left: auto;
}

/* ── Pannello filtri (collassabile) ── */
.ui-lib-filter-panel {
    display: none;
    flex-direction: column;
    gap: 14px;
    margin: 0 20px 12px;
    padding: 14px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
}
.ui-lib-filter-panel.open { display: flex; }
.ui-lib-filter-section { display: flex; flex-direction: column; gap: 7px; }
.ui-lib-filter-label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ui-lib-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-lib-fchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    border-radius: 16px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.ui-lib-fchip.on {
    background: rgba(10,132,255,.12);
    border-color: rgba(10,132,255,.35);
    color: var(--accent);
}
.ui-lib-stat-count {
    font-size: .7rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ── Filtri stato colorati ── */
.ui-lib-fchip.stato-in_lettura.on  { background:rgba(10,132,255,.1);  border-color:#0a84ff; color:#0a84ff; }
.ui-lib-fchip.stato-letto.on       { background:rgba(52,199,89,.1);   border-color:#34c759; color:#34c759; }
.ui-lib-fchip.stato-abbandonato.on { background:rgba(255,59,48,.1);   border-color:#ff3b30; color:#ff3b30; }

/* ── Select custom (serie/autore) ── */
.ui-lib-custom-select { position: relative; }
.ui-lib-custom-select-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: .85rem;
    color: var(--text-color);
    cursor: pointer;
    transition: border-color .15s;
}
.ui-lib-custom-select-btn.on { border-color: var(--accent); color: var(--accent); }
.ui-lib-custom-select-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.ui-lib-custom-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 12px;
    z-index: 200;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.ui-lib-custom-select-dropdown.open { display: block; }
.ui-lib-custom-select-search { padding: 8px; border-bottom: .5px solid var(--border-color); }
.ui-lib-custom-select-search input {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: .82rem;
    color: var(--text-color);
    outline: none;
}
.ui-lib-custom-select-list { max-height: 200px; overflow-y: auto; }
.ui-lib-custom-option {
    display: block;
    padding: 9px 14px;
    font-size: .85rem;
    color: var(--text-color);
    text-decoration: none;
    border-bottom: .5px solid var(--border-color);
    transition: background .12s;
}
.ui-lib-custom-option:last-child { border-bottom: none; }
.ui-lib-custom-option:active,
.ui-lib-custom-option.on { background: rgba(10,132,255,.1); color: var(--accent); }

/* ── Filtri attivi (tag) ── */
.ui-lib-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 20px 10px;
}
.ui-lib-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(10,132,255,.1);
    border: .5px solid rgba(10,132,255,.25);
    border-radius: 14px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent);
}
.ui-lib-active-tag a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    opacity: .7;
}
.ui-lib-results-count {
    margin: 0 20px 8px;
    font-size: .8rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.ui-lib-reset-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.ui-lib-hint-txt   { font-size: .72rem; color: var(--text-secondary); margin-top: 2px; }
.ui-lib-spacer     { flex: 1; }
/* ── Prestiti banner ── */
.prestiti-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 20px 10px;
    padding: 12px 16px;
    background: rgba(255,149,0,.08);
    border: .5px solid rgba(255,149,0,.3);
    border-radius: 14px;
    cursor: pointer;
}
.ui-lib-prest-badge {
    font-size: .85rem;
    font-weight: 700;
    color: var(--warning);
}
.prestiti-arrow {
    font-size: 1.2rem;
    color: var(--text-secondary);
    transition: transform .2s;
}
.prestiti-arrow.open { transform: rotate(90deg); }
.ui-lib-prest-list { display: none; margin: 0 20px 10px; }
.ui-lib-prest-list.open { display: block; }
.anti-list-mb   { margin-bottom: 0 !important; }
.ui-lib-prest-icon { font-size: 1.1rem; flex-shrink: 0; }
.ui-lib-restituito-btn {
    padding: 5px 10px;
    background: rgba(52,199,89,.12);
    border: .5px solid rgba(52,199,89,.3);
    border-radius: 10px;
    color: var(--success);
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

/* ── Grid libri (copertine) ── */
.libri-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 20px 20px;
}
.libro-thumb {
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    position: relative;
}
.libro-img {
    width: 100%;
    aspect-ratio: 2/3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border: .5px solid var(--border-color);
}
.libro-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-lib-cover-fb  { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 1.8rem; }
.ui-lib-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.libro-stato-dot {
    position: absolute;
    top: 5px; right: 5px;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    border: 1.5px solid var(--bg-color);
}
.libro-prestito-tag {
    position: absolute;
    bottom: 36px; left: 0; right: 0;
    background: rgba(255,149,0,.9);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    text-align: center;
    padding: 2px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.libro-titolo-s {
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.libro-autore-s {
    font-size: .65rem;
    color: var(--text-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.libro-serie-s {
    font-size: .62rem;
    color: var(--accent);
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.libro-stars-s { font-size: .62rem; color: #ff9500; }

/* ── Stato vuoto ── */
.ui-lib-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--text-secondary);
    font-size: .9rem;
    text-align: center;
}
.ui-lib-empty-icon { font-size: 2.5rem; }

/* Stato vuoto generico */
.hc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--text-secondary);
    font-size: .9rem;
    text-align: center;
    line-height: 1.5;
}
.hc-empty-icon { font-size: 2.5rem; }

/* ── Tab "In lettura" ── */
.ui-lib-reading-tab { display: none; padding: 0 20px 20px; flex-direction: column; gap: 10px; }
.ui-lib-reading-tab.active { display: flex; }
.ui-lib-reading-card {
    display: flex;
    gap: 12px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    transition: border-color .15s;
}
.ui-lib-reading-card:active { border-color: var(--accent); }
.ui-lib-reading-cover {
    width: 60px;
    min-width: 60px;
    height: 90px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    border: .5px solid var(--border-color);
}
.ui-lib-reading-cover img { width: 100%; height: 100%; object-fit: cover; }
.ui-lib-reading-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ui-lib-card-titolo   { font-size: .92rem; font-weight: 700; line-height: 1.3; }
.ui-lib-card-autore   { font-size: .78rem; color: var(--text-secondary); }
.ui-lib-card-serie    { font-size: .75rem; color: var(--accent); font-weight: 600; }
.ui-lib-card-pagine   { font-size: .75rem; color: var(--text-secondary); }
.ui-lib-card-stelle   { font-size: .8rem; color: #ff9500; }

/* ── Tab Statistiche ── */
.ui-lib-stats-tab      { display: none; }
.ui-lib-stats-tab.active { display: block; }
.ui-lib-stats-card-mt  { margin-top: 4px; }
.ui-lib-stats-grid-0mb { margin-bottom: 0 !important; }
.ui-lib-chart-wrap     { margin: 0 20px 20px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 14px; padding: 14px; }

/* Autori più letti */
.ui-lib-stats-author {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: .5px solid var(--border-color);
}
.ui-lib-stats-author:last-child { border-bottom: none; }
.ui-lib-stats-rank     { font-size: .8rem; font-weight: 800; color: var(--text-secondary); min-width: 18px; }
.ui-lib-stats-bar-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ui-lib-stats-name     { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-lib-stats-bar      { height: 5px; background: var(--bg-secondary); border-radius: 3px; overflow: hidden; }
.ui-lib-stats-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s; }
.ui-lib-stats-n        { font-size: .75rem; color: var(--text-secondary); font-weight: 600; flex-shrink: 0; }

/* Barre per anno */
.ui-lib-bar-anno-wrap  { margin: 0 20px 12px; display: flex; flex-direction: column; gap: 6px; }
.ui-lib-bar-anno-row   { display: flex; align-items: center; gap: 8px; }
.ui-lib-bar-anno-lbl   { font-size: .75rem; color: var(--text-secondary); font-weight: 600; min-width: 36px; }
.ui-lib-bar-anno-track { flex: 1; height: 18px; background: var(--bg-secondary); border-radius: 5px; overflow: hidden; }
.ui-lib-bar-anno-fill  { height: 100%; background: var(--accent); border-radius: 5px; display: flex; align-items: center; min-width: 30px; transition: width .4s; }
.ui-lib-bar-anno-num   { font-size: .65rem; font-weight: 700; color: #fff; padding-left: 6px; white-space: nowrap; }

/* Card anno espandibile */
.ui-lib-anno-card {
    margin: 0 20px 8px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}
.ui-lib-anno-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
}
.ui-lib-anno-year   { font-size: .95rem; font-weight: 800; }
.ui-lib-anno-badge  { font-size: .75rem; font-weight: 600; color: var(--text-secondary); }
.ui-lib-anno-chevron { font-size: 1.1rem; color: var(--text-secondary); transition: transform .2s; }
.ui-lib-anno-card.open .ui-lib-anno-chevron { transform: rotate(90deg); }
.ui-lib-anno-body   { display: none; padding: 0 16px 14px; border-top: .5px solid var(--border-color); }
.ui-lib-anno-card.open .ui-lib-anno-body { display: block; }
.ui-lib-anno-stats-row { display: flex; gap: 0; margin: 12px 0 10px; }
.ui-lib-anno-stat   { flex: 1; text-align: center; border-right: .5px solid var(--border-color); }
.ui-lib-anno-stat:last-child { border-right: none; }
.ui-lib-anno-stat-val { font-size: 1.1rem; font-weight: 800; color: var(--accent); }
.ui-lib-anno-stat-lbl { font-size: .68rem; color: var(--text-secondary); margin-top: 2px; }
.ui-lib-anno-meta   { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ui-lib-anno-pill   { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: var(--bg-secondary); border: .5px solid var(--border-color); border-radius: 12px; font-size: .75rem; font-weight: 600; }
.ui-lib-anno-top    { display: flex; flex-direction: column; gap: 8px; }
.ui-lib-anno-top-title { font-size: .75rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 4px; }
.ui-lib-anno-top-item  { display: flex; align-items: center; gap: 10px; }
.ui-lib-anno-top-cover { width: 32px; min-width: 32px; height: 48px; border-radius: 5px; overflow: hidden; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
.ui-lib-anno-top-cover img { width: 100%; height: 100%; object-fit: cover; }
.ui-lib-anno-top-info  { flex: 1; min-width: 0; }
.ui-lib-anno-top-titolo { font-size: .8rem; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-lib-anno-top-autore { font-size: .72rem; color: var(--text-secondary); }
.ui-lib-anno-top-voto   { font-size: .75rem; color: #ff9500; flex-shrink: 0; }

/* =====================================================
   FORM AGGIUNGI LIBRO — classi fs/fr/fsl/fgc + ui-al-*
   Classi riutilizzabili per tutti i form modale
   ===================================================== */

/* Sezione form */
.fs {
    margin-bottom: 20px;
}
.fsl {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    padding: 0 16px 6px;
}
.fgc {
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    margin: 0 16px;
}
/* Riga campo */
.fr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: .5px solid var(--border-color);
}
.fr:last-child { border-bottom: none; }
.fr label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 72px;
    flex-shrink: 0;
}
.fr input,
.fr select,
.fr textarea {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-color);
    font-family: inherit;
    font-size: .88rem;
    outline: none;
    text-align: right;
    min-width: 0;
}
.fr textarea {
    text-align: left;
    resize: none;
    min-height: 72px;
    padding-top: 2px;
}
.fr select { text-align-last: right; }

/* Varianti riga con label sopra (trama/note) */
.ui-al-fr-top  { align-items: flex-start; }
.ui-al-lbl-top { padding-top: 2px; align-self: flex-start; }

/* Formato bottoni */
.fmt-group {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
}
.fmt-btn {
    flex: 1;
    padding: 8px 4px;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-align: center;
}
.fmt-btn.sel {
    background: rgba(10,132,255,.12);
    border-color: rgba(10,132,255,.35);
    color: var(--accent);
}

/* Stelle voto */
.star-row { display: flex; gap: 4px; justify-content: flex-end; }
.star-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #ff9500;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* Griglia generi */
.genere-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
}
.genere-btn {
    padding: 5px 11px;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.genere-btn.sel {
    background: rgba(10,132,255,.12);
    border-color: rgba(10,132,255,.35);
    color: var(--accent);
}

/* Scanner ISBN */
.ui-al-scanner-wrap {
    margin: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ui-al-scanner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(10,132,255,.08);
    border: .5px solid rgba(10,132,255,.25);
    border-radius: 12px;
    color: var(--accent);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.ui-al-scanner-cont {
    display: none;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 4/3;
}
.ui-al-scanner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ui-al-scanner-line {
    position: absolute;
    top: 50%; left: 10%; right: 10%;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: scanline 2s ease-in-out infinite;
}
@keyframes scanline {
    0%, 100% { top: 30%; }
    50%       { top: 70%; }
}
.ui-al-scanner-close {
    position: absolute;
    top: 8px; right: 8px;
    padding: 5px 10px;
    background: rgba(0,0,0,.5);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.ui-al-scanner-status {
    font-size: .78rem;
    color: var(--text-secondary);
    text-align: center;
}

/* =====================================================
   LIBRERIA PUBBLICA — classi extra
   ===================================================== */
.search-form-row {
    display: flex;
    gap: 8px;
    margin: 0 20px 10px;
    align-items: center;
}
.search-form-row input {
    flex: 1;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 10px;
    padding: 9px 12px;
    color: var(--text-color);
    font-family: inherit;
    font-size: .85rem;
    outline: none;
    min-width: 0;
}
.search-form-row a,
.search-form-row button {
    flex-shrink: 0;
    padding: 9px 14px;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.search-form-row button { background: var(--accent); color: #fff; }
.search-form-row a      { background: var(--bg-secondary); color: var(--text-secondary); }
.libp-pb { padding-bottom: 8px; }

/* chips scroll (già presente ma potenziata) */
.chips-scroll {
    display: flex;
    gap: 7px;
    padding: 0 20px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 16px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.chip.on {
    background: rgba(10,132,255,.12);
    border-color: rgba(10,132,255,.35);
    color: var(--accent);
}

/* =====================================================
   RESPONSIVE — Libreria
   ===================================================== */

@media (max-width: 600px) {
    .ui-lib-tab-bar      { margin: 0 12px 10px; }
    .ui-lib-search       { margin: 0 12px 8px; }
    .ui-lib-filter-bar   { margin: 0 12px 6px; }
    .ui-lib-filter-panel { margin: 0 12px 10px; }
    .ui-lib-active-filters { margin: 0 12px 8px; }
    .ui-lib-results-count  { margin: 0 12px 6px; }
    .prestiti-banner    { margin: 0 12px 8px; }
    .ui-lib-prest-list     { margin: 0 12px 8px; }
    .ui-lib-bar-anno-wrap  { margin: 0 12px 10px; }
    .ui-lib-anno-card      { margin: 0 12px 8px; }
    .ui-lib-chart-wrap     { margin: 0 12px 16px; }
    .libri-grid         { grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0 12px 16px; }
    .libro-titolo-s     { font-size: .68rem; }
    .libro-autore-s     { font-size: .62rem; }
    .ui-lib-reading-tab    { padding: 0 12px 16px; }
    .ui-lib-stats-tab      { padding: 0; }
    .search-form-row    { margin: 0 12px 8px; }
    .chips-scroll       { padding: 0 12px 8px; }
    .fgc                { margin: 0 12px; }
    .fsl                { padding: 0 12px 5px; }
}

@media (min-width: 768px) {
    .ui-lib-tab-bar      { margin: 0 28px 16px; border-radius: 14px; }
    .ui-lib-search       { margin: 0 28px 12px; }
    .ui-lib-search input { font-size: .92rem; padding: 12px 16px; }
    .ui-lib-filter-bar   { margin: 0 28px 10px; }
    .ui-lib-filter-panel { margin: 0 28px 14px; padding: 18px; }
    .ui-lib-active-filters { margin: 0 28px 12px; }
    .ui-lib-results-count  { margin: 0 28px 10px; }
    .prestiti-banner    { margin: 0 28px 12px; }
    .ui-lib-prest-list     { margin: 0 28px 12px; }
    .ui-lib-bar-anno-wrap  { margin: 0 28px 14px; }
    .ui-lib-anno-card      { margin: 0 28px 10px; }
    .ui-lib-chart-wrap     { margin: 0 28px 20px; }
    .libri-grid         { grid-template-columns: repeat(5,1fr); gap: 14px; padding: 0 28px 24px; }
    .libro-titolo-s     { font-size: .78rem; }
    .libro-autore-s     { font-size: .7rem; }
    .ui-lib-reading-tab    { padding: 0 28px 24px; }
    .ui-lib-tab-btn        { font-size: .85rem; padding: 9px 8px; }
    .tab-label          { font-size: .78rem; }
    .search-form-row    { margin: 0 28px 12px; }
    .chips-scroll       { padding: 0 28px 12px; }
    .fgc                { margin: 0 28px; }
    .fsl                { padding: 0 28px 6px; }
    .ui-lib-reading-card   { padding: 18px; }
    .ui-lib-reading-cover  { width: 72px; min-width: 72px; height: 108px; }
}

@media (min-width: 1440px) {
    .libri-grid { grid-template-columns: repeat(7,1fr); gap: 16px; padding: 0 32px 28px; }
    .ui-lib-tab-bar { margin: 0 32px 18px; }
}

/* =====================================================
   YOUTUBE — PLAYLIST & VIDEO
   ===================================================== */

/* ── Bottoni azione (outline azzurro / pieno) ──────── */
.btn-nav {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(10,132,255,.35);
    background: rgba(10,132,255,.08);
    color: var(--accent);
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}
.btn-nav:hover  { background: rgba(10,132,255,.16); border-color: rgba(10,132,255,.55); }
.btn-nav:active { opacity: .75; }
.btn-nav.on     { background: rgba(10,132,255,.18); border-color: var(--accent); }

.btn-nav-primary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 20px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
    flex-shrink: 0;
}
.btn-nav-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-nav-primary:active   { opacity: .8; }
.btn-nav-sm {
    padding: 6px 9px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 999px;
    font-size: .78rem;
}
.btn-nav-danger {
    color: var(--danger);
    border-color: rgba(255,59,48,.28);
    background: rgba(255,59,48,.10);
}

/* ── Riga azioni sotto header ──────────────────────── */
.page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 20px 12px;
    flex-wrap: wrap;
    width: 100%;
}

/* ── Progress bar ──────────────────────────────────── */
.yt-progress-bar {
    height: 5px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.yt-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width .3s ease;
}

/* ── Riga statistiche (tot / visti / da vedere / %) ── */
.yt-stats-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.yt-stats-row .list-meta strong {
    color: var(--text-color);
    font-size: .88rem;
}

/* ── Banner OAuth "collega account" ────────────────── */
.yt-oauth-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 20px 16px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
}
.yt-oauth-banner-text {
    flex: 1;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.yt-oauth-banner-text strong {
    display: block;
    color: var(--text-color);
    margin-bottom: 3px;
}

/* ── Griglia card playlist ─────────────────────────── */
.yt-pl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 20px 20px;
}
.yt-pl-card {
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: opacity .15s;
}
.yt-pl-card:active { opacity: .75; }
.yt-pl-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-secondary);
    overflow: hidden;
}
.yt-pl-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.yt-pl-thumb .list-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
.yt-pl-info {
    padding: 8px 10px 10px;
}
.yt-pl-info .list-desc {
    font-size: .82rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}
.yt-pl-info .list-meta {
    margin-top: 3px;
}

.yt-video-thumb {
    position: relative;
    width: 148px;
    min-width: 148px;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.yt-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.yt-video-thumb .list-badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(0,0,0,.72);
    color: #fff;
}
.yt-video-thumb .list-badge-ok {
    top: 6px;
    bottom: auto;
    background: rgba(52,199,89,.9);
}
.video-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-left: auto;
    flex-shrink: 0;
}
.cestino-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
}
.cestino-overlay.active,
.cestino-overlay.open { display: flex; }
.cestino-modal {
    width: min(100%, 520px);
    max-height: 84vh;
    overflow: hidden;
    border: .5px solid var(--border-color);
    border-radius: 22px;
    background: var(--phone-bg);
    display: flex;
    flex-direction: column;
}
.cestino-modal-header,
.cestino-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: .5px solid var(--border-color);
}
.cestino-modal-footer {
    border-top: .5px solid var(--border-color);
    border-bottom: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.cestino-modal-title { font-weight: 900; flex: 1; min-width: 0; }
.cestino-modal-close {
    border: none;
    background: var(--bg-secondary);
    color: var(--accent);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 900;
}
.cestino-modal-body {
    padding: 12px 16px;
    overflow-y: auto;
}
.cestino-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: .5px solid var(--border-color);
}
.cestino-item:last-child { border-bottom: 0; }
.cestino-item-thumb {
    width: 74px;
    min-width: 74px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-secondary);
}
.cestino-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cestino-item-info { flex: 1; min-width: 0; }
.cestino-item-titolo {
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cestino-item-meta { color: var(--text-secondary); font-size: .74rem; margin-top: 3px; }
.cestino-item-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Stato visto lista video ───────────────────────── */
.list-item.visto .list-details {
    opacity: .55;
}

@media (min-width: 480px) {
    .yt-pl-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
    .yt-pl-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 28px 24px; }
    .page-actions { padding: 0 28px 14px; }
    .yt-oauth-banner { margin: 0 28px 16px; }
}

/* =====================================================
   MIE APP — Griglia app personalizzabile
   ===================================================== */

/* ── Wrapper pagina ────────────────────────────────── */
.ma-wrap {
    padding: 0 20px 24px;
}

/* ── Toolbar (colonne + modifica layout) ───────────── */
.ma-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.ma-toolbar-spacer { flex: 1; }

/* ── Controllo colonne ─────────────────────────────── */
.ma-cols-ctrl {
    display: none; /* visibile solo in edit mode via JS */
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
}
.ma-cols-ctrl.show { display: flex; }
.ma-cols-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.ma-cols-val {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-color);
    min-width: 16px;
    text-align: center;
}
.ma-cols-btn {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: none;
    background: var(--glass-bg);
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}
.ma-cols-btn:hover  { background: rgba(10,132,255,.14); }
.ma-cols-btn:active { opacity: .7; }

/* ── Bottone modifica layout ───────────────────────── */
.ma-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid rgba(10,132,255,.35);
    background: rgba(10,132,255,.08);
    color: var(--accent);
    font-size: .82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
    margin-left: auto;
}
.ma-edit-btn:hover        { background: rgba(10,132,255,.16); border-color: rgba(10,132,255,.55); }
.ma-edit-btn:active       { opacity: .75; }
.ma-edit-btn.active       { background: rgba(52,199,89,.12); border-color: rgba(52,199,89,.4); color: var(--success); }
.ma-mobile-edit-done { display: none; }

/* ── Login banner ─────────────────────────────────── */
.ma-login-banner {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    font-size: .88rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}
.ma-login-banner strong { color: var(--text-color); }

/* ── Griglia slot ─────────────────────────────────── */
.ma-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr); /* default; override via JS */
}

/* ── Singolo slot ─────────────────────────────────── */
.ma-slot {
    min-height: 72px;
    border-radius: 16px;
    transition: background .15s;
}
.ma-slot.empty {
    background: var(--bg-secondary);
    border: 1.5px dashed var(--border-color);
    border-radius: 16px;
    min-height: 72px;
}
.ma-slot.drag-over {
    background: rgba(10,132,255,.1);
    border-color: rgba(10,132,255,.4);
}

/* ── Card app ─────────────────────────────────────── */
.ma-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text-color);
    transition: opacity .15s, transform .12s;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
}
.ma-card:active { opacity: .78; transform: scale(.98); }
.ma-card.locked { opacity: .5; pointer-events: none; }
.ma-card.edit-mode {
    cursor: grab;
    border-color: rgba(10,132,255,.3);
    box-shadow: 0 0 0 1.5px rgba(10,132,255,.18);
}
.ma-card.edit-mode:active { cursor: grabbing; }
.ma-card.dragging { opacity: 0; }

/* ── Icona app ─────────────────────────────────────── */
.ma-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    position: relative;
    flex-shrink: 0;
}

/* ── Badge contatore urgente ───────────────────────── */
.ma-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--danger);
    color: #fff;
    border-radius: 9px;
    font-size: .68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--card-bg);
}

/* ── Testo info card ───────────────────────────────── */
.ma-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ma-nome {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ma-desc {
    font-size: .74rem;
    color: var(--text-secondary);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

/* ── Hint drag visibile in edit mode ──────────────── */
.ma-drag-hint {
    font-size: .72rem;
    color: var(--text-secondary);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity .2s;
    pointer-events: none;
    letter-spacing: .03em;
}
.ma-card.edit-mode .ma-drag-hint { opacity: 1; }

/* ── Clone di trascinamento ────────────────────────── */
.drag-clone {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: .85;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.38);
    transform: rotate(2deg) scale(1.03);
    transition: none;
}

/* ── Toast notifica ────────────────────────────────── */
.ma-toast {
    position: fixed;
    bottom: calc(90px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: rgba(28,28,30,0.92);
    color: #fff;
    padding: 9px 18px;
    border-radius: 20px;
    font-size: .84rem;
    font-weight: 600;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: .5px solid rgba(255,255,255,.12);
    opacity: 0;
    transition: opacity .25s, transform .25s;
    pointer-events: none;
    z-index: 10000;
    white-space: nowrap;
}
.ma-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =====================================================
   MIE APP — Responsive
   ===================================================== */

@media (max-width: 600px) {
    .ma-wrap      { padding: 0 12px 20px; }
    .ma-grid      { gap: 9px; grid-template-columns: 1fr !important; }
    .ma-slot,
    .ma-slot.empty { min-height: 66px; }
    .ma-wrap .ma-toolbar { display: none; }
    .ma-grid .ma-slot.empty { display: none; }
    #apTabSwipeArea .ma-toolbar { display: none; }
    #apTabSwipeArea .ma-slot.empty { display: none; }
    .ma-card      { padding: 11px 11px; gap: 10px; }
    .ma-icon      { width: 40px; height: 40px; min-width: 40px; font-size: 1.2rem; }
    .ma-nome      { font-size: .84rem; }
    .ma-desc      { font-size: .71rem; }
    .ma-drag-hint { display: none; } /* troppo stretto su mobile */
    .ma-card.edit-mode .ma-drag-hint { display: inline; }
    .ap-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    .ap-tab-bar::-webkit-scrollbar { display: none; }
    .ap-tab-btn {
        flex: 0 0 auto;
        min-width: 96px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .task-item.task-swiped .task-item-inner { transform: translateX(-68px); }
    .task-testo {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 1024px) {
    .ma-wrap .ma-toolbar { display: none; }
    .ma-mobile-edit-done {
        display: block;
        position: fixed;
        right: 18px;
        bottom: calc(18px + env(safe-area-inset-bottom));
        z-index: 1001;
        padding: 10px 16px;
        border: 0;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        font: inherit;
        font-weight: 700;
        box-shadow: 0 6px 18px rgba(10,132,255,.28);
    }
    .ma-mobile-edit-done[hidden] { display: none; }
}

@media (max-width: 600px) {
    .yt-video-thumb {
        width: 100%;
        min-width: 0;
    }
    #videoList .list-item-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }
    #videoList .yt-video-thumb {
        grid-column: 1 / -1;
    }
    #videoList .list-details {
        grid-column: 1;
    }
    #videoList .video-actions {
        grid-column: 2;
        grid-row: 2;
        flex-direction: row;
    }
    .cestino-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .cestino-modal {
        width: 100%;
        max-height: 82vh;
        border-radius: 24px 24px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
}

@media (min-width: 768px) {
    .ma-wrap  { padding: 0 28px 28px; }
    .ma-grid  { gap: 16px; }
    .ma-card  { padding: 16px 16px; gap: 14px; }
    .ma-icon  { width: 50px; height: 50px; min-width: 50px; font-size: 1.5rem; border-radius: 14px; }
    .ma-nome  { font-size: .92rem; }
    .ma-desc  { font-size: .78rem; }
    .ma-edit-btn  { font-size: .85rem; padding: 8px 16px; }
    .ma-cols-btn  { width: 28px; height: 28px; font-size: 1.2rem; }
}

/* =====================================================
   SCHEDA LIBRO — classi generiche riutilizzabili
   ===================================================== */

/* Testata con copertina + info affiancate */
.cover-area {
    display: flex;
    gap: 16px;
    padding: 16px 20px 12px;
    align-items: flex-start;
}
.cover-img {
    width: 90px;
    min-width: 90px;
    height: 135px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    flex-shrink: 0;
    border: .5px solid var(--border-color);
}
.cover-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cover-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cover-info h2 {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
}
.cover-info .autore {
    font-size: .82rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.cover-info .detail-sub {
    font-size: .75rem;
    color: var(--text-secondary);
}
.cover-info .detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}

/* Riga info (label + valore) */
.detail-info-grid {
    margin: 0 20px 12px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}
.detail-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    border-bottom: .5px solid var(--border-color);
    gap: 10px;
}
.detail-info-row:last-child { border-bottom: none; }
.detail-info-label {
    font-size: .82rem;
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}
.detail-info-value {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: right;
}

/* Titolo sezione interna */
.sezione {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-secondary);
    margin: 14px 20px 6px;
}

/* Corpo testo (trama/note) */
.detail-text {
    font-size: .88rem;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0 20px 14px;
}
.detail-text-secondary {
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 20px 14px;
}

/* Item storico prestiti */
.prestito-item {
    padding: 10px 16px;
    border-bottom: .5px solid var(--border-color);
    font-size: .85rem;
    line-height: 1.5;
}
.prestito-item:last-child { border-bottom: none; }

/* Stelle voto (visualizzazione, non input) */
.stelle-voto {
    font-size: .95rem;
    color: #ff9500;
    letter-spacing: .05em;
}

/* Scanner ISBN — stato successo (toggled via JS) */
.scanner-btn-success {
    background: rgba(52,199,89,.08) !important;
    border-color: #34c759 !important;
    color: #34c759 !important;
}

/* =====================================================
   RESPONSIVE — scheda libro / classi generiche
   ===================================================== */
@media (max-width: 600px) {
    .cover-area         { padding: 12px 14px 10px; gap: 12px; }
    .cover-img          { width: 72px; min-width: 72px; height: 108px; border-radius: 8px; }
    .cover-info h2      { font-size: .92rem; }
    .detail-info-grid   { margin: 0 12px 10px; }
    .detail-info-row    { padding: 10px 12px; }
    .sezione            { margin: 12px 12px 5px; }
    .detail-text,
    .detail-text-secondary { margin: 0 12px 12px; font-size: .84rem; }
}
@media (min-width: 768px) {
    .cover-area         { padding: 20px 28px 16px; gap: 20px; }
    .cover-img          { width: 110px; min-width: 110px; height: 165px; border-radius: 12px; }
    .cover-info h2      { font-size: 1.1rem; }
    .detail-info-grid   { margin: 0 28px 14px; }
    .sezione            { margin: 16px 28px 8px; font-size: .74rem; }
    .detail-text,
    .detail-text-secondary { margin: 0 28px 16px; }
}


/* =====================================================
   STAT CARDS — statistiche header pagina
   ===================================================== */
.stat-cards {
    display: flex;
    gap: 12px;
    margin: 0 20px 16px;
    min-width: 0;
}
.stat-card {
    flex: 1;
    min-width: 0;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.stat-num {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--accent);
    line-height: 1;
}
.stat-label {
    font-size: .72rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: center;
}

/* =====================================================
   CARD LIST — lista card cliccabili
   ===================================================== */
.card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 20px 20px;
}
.card-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 16px;
    padding: 13px 14px;
    cursor: pointer;
    transition: border-color .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.card-list-item:active  { transform: scale(.98); }
.card-list-item.urgente { border-color: rgba(255,59,48,.35); }

.card-foto {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    border: .5px solid var(--border-color);
}
.card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Badge stato */
.badge-wrap { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 700;
}
.status-badge-danger { background: rgba(255,59,48,.12);  color: var(--danger); }
.status-badge-warn   { background: rgba(255,149,0,.12);  color: var(--warning); }
.status-badge-ok     { background: rgba(52,199,89,.1);   color: var(--success); }

/* =====================================================
   DETAIL COVER + TESTI DETTAGLIO
   ===================================================== */
.detail-cover {
    width: 100%;
    max-height: 220px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    margin-bottom: 14px;
}
.detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.det-nome { font-size: 1.2rem; font-weight: 800; margin-bottom: 3px; }
.det-sub  { font-size: .82rem; color: var(--text-secondary); font-style: italic; margin-bottom: 4px; }
.det-meta { font-size: .82rem; color: var(--text-secondary); margin-bottom: 3px; line-height: 1.45; }
.pi-upload-hint { font-size: .8rem; margin-top: 6px; }

/* =====================================================
   AI BOX
   ===================================================== */
.ai-box {
    display: none;
    margin: 10px 0;
    padding: 14px 16px;
    background: rgba(10,132,255,.06);
    border: .5px solid rgba(10,132,255,.2);
    border-radius: 14px;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--text-color);
}
.ai-box-error { border-color: rgba(255,59,48,.3); }
.ai-loader {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: .85rem;
}

/* =====================================================
   CURE LIST — programma cure pianta
   ===================================================== */
.cure-list {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 8px;
}
.cure-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: .5px solid var(--border-color);
}
.cure-row:last-child { border-bottom: none; }
.cure-icon  { font-size: 1.2rem; flex-shrink: 0; }
.cure-info  { flex: 1; min-width: 0; }
.cure-tipo  { font-size: .88rem; font-weight: 600; }
.cure-freq  { font-size: .72rem; color: var(--text-secondary); margin-top: 1px; }
.cure-date  { font-size: .78rem; font-weight: 700; flex-shrink: 0; color: var(--text-secondary); }
.cure-ok      { color: var(--success); }
.cure-oggi    { color: var(--danger); }
.cure-scaduta { color: var(--danger); }

/* =====================================================
   DIARIO INTERVENTI
   ===================================================== */
.diario-list {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}
.diario-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: .5px solid var(--border-color);
}
.diario-row:last-child { border-bottom: none; }
.diario-icon  { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.diario-info  { flex: 1; min-width: 0; }
.diario-tipo  { font-size: .88rem; font-weight: 600; }
.diario-data  { font-size: .72rem; color: var(--text-secondary); margin-top: 1px; }
.diario-nota  { font-size: .78rem; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }

/* =====================================================
   FORM FIELDS — campi form generici (modal/sheet)
   ===================================================== */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.form-field label {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.form-input {
    width: 100%;
    padding: 11px 13px;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    border-radius: 12px;
    font-family: inherit;
    font-size: .9rem;
    color: var(--text-color);
    outline: none;
    transition: border-color .2s;
    appearance: none;
}
.form-input:focus  { border-color: var(--accent); }
.form-textarea     { resize: none; min-height: 72px; }

/* Preview foto upload */
.foto-preview {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    background: var(--bg-secondary);
    border: .5px dashed var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s;
}
.foto-preview:hover { border-color: var(--accent); }
.foto-preview img   { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sheet tall — altezza massima per modal form */
.sheet-tall { max-height: 96vh; max-height: 96dvh; }

/* =====================================================
   CURE BUILDER — builder programma cure
   ===================================================== */
.cure-builder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.cure-builder-row {
    display: flex;
    gap: 6px;
    align-items: center;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 10px;
    flex-wrap: wrap;
}
.cure-builder-row select,
.cure-builder-row input {
    background: none;
    border: none;
    font-family: inherit;
    font-size: .82rem;
    color: var(--text-color);
    outline: none;
    min-width: 0;
}
.cure-builder-row select              { flex: 2; min-width: 100px; }
.cure-builder-row input[type=number]  { flex: 1; min-width: 44px; }
.cure-builder-row input[type=date]    { flex: 2; min-width: 100px; }

.btn-remove {
    background: rgba(255,59,48,.1);
    border: none;
    color: var(--danger);
    border-radius: 6px;
    padding: 3px 7px;
    font-size: .8rem;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    transition: background .15s;
}
.btn-remove:hover { background: rgba(255,59,48,.2); }

.btn-add-item {
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: .5px dashed var(--border-color);
    border-radius: 10px;
    color: var(--accent);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    align-self: flex-start;
}
.btn-add-item:hover { background: rgba(10,132,255,.08); }

/* =====================================================
   PIANTE — dashboard operativa
   ===================================================== */
.piante-dashboard { padding-bottom: 24px; }
.piante-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 16px 18px; }
.piante-overview .stat-card { min-width: 0; padding: 13px 10px; text-align: center; }
.piante-overview strong { display: block; font-size: 1.4rem; line-height: 1.1; }
.piante-overview span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: .72rem; }
.piante-section { margin: 0 16px 22px; }
.piante-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.piante-section-head h2 { margin: 0; font-size: 1rem; }
.piante-section-head p, .piante-task-group > h3 { margin: 3px 0 0; color: var(--text-secondary); font-size: .77rem; font-weight: 500; }
.piante-task-group { margin: 0 0 18px; }
.piante-task-group > h3 { margin: 0 0 8px; color: var(--text-color); font-size: .86rem; }
.piante-card-list { display: flex; flex-direction: column; gap: 7px; }
.piante-card { display: flex; align-items: center; gap: 9px; padding: 9px; background: var(--card-bg); border: .5px solid var(--border-color); border-radius: 14px; }
.piante-card-main { display: flex; align-items: center; min-width: 0; flex: 1; gap: 10px; border: 0; padding: 0; background: transparent; color: var(--text-color); text-align: left; cursor: pointer; font: inherit; }
.piante-photo { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; overflow: hidden; border-radius: 11px; border: .5px solid var(--border-color); background: var(--bg-secondary); font-size: 1.35rem; }
.piante-photo img { width: 100%; height: 100%; object-fit: cover; }
.piante-card-copy { display: grid; min-width: 0; gap: 2px; }
.piante-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.piante-card-copy small { overflow: hidden; color: var(--text-secondary); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.piante-status { display: inline-flex; width: fit-content; margin-top: 2px; border-radius: 999px; padding: 2px 7px; font-size: .66rem; font-style: normal; font-weight: 700; text-transform: capitalize; }
.piante-status-ok { background: rgba(52,199,89,.12); color: var(--success); }
.piante-status-osservare { background: rgba(255,149,0,.14); color: var(--warning); }
.piante-status-problema { background: rgba(255,59,48,.12); color: var(--danger); }
.piante-action { flex: 0 0 auto; border: 0; border-radius: 9px; padding: 8px 9px; background: rgba(52,199,89,.13); color: var(--success); cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700; }
.piante-action-info { background: rgba(10,132,255,.1); color: var(--accent); cursor: default; }
.piante-detail-identity { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.piante-detail-identity > img, .piante-detail-identity > span { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; flex: 0 0 76px; overflow: hidden; border: .5px solid var(--border-color); border-radius: 16px; background: var(--bg-secondary); font-size: 2rem; object-fit: cover; }
.piante-detail-identity h3, .piante-detail-identity p { margin: 0 0 3px; }
.piante-detail-identity h3 { font-size: 1.05rem; }
.piante-detail-identity p { color: var(--text-secondary); font-size: .8rem; }
.piante-detail-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 16px; }
.piante-detail-actions button { flex: 1 1 120px; }
.piante-danger { color: var(--danger); }
.piante-detail-note { margin: 0 0 12px; color: var(--text-secondary); font-size: .85rem; line-height: 1.5; white-space: pre-wrap; }
.piante-ai-notice { margin: 0 0 14px; padding: 10px 12px; border: .5px solid rgba(10,132,255,.25); border-radius: 12px; background: rgba(10,132,255,.07); color: var(--text-secondary); font-size: .8rem; line-height: 1.45; }
.piante-ai-result { margin-top: 0; border-top: .5px solid var(--border-color); }
.piante-ai-result h3 { margin: 0 0 8px; font-size: .9rem; }
.piante-ai-result pre { overflow: auto; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-color); font: .78rem/1.5 inherit; }
.piante-care-builder { display: flex; flex-direction: column; gap: 7px; }
.piante-care-row { display: grid; grid-template-columns: minmax(115px, 1.25fr) 72px minmax(110px, 1fr) minmax(100px, 1.1fr) auto; gap: 6px; align-items: center; padding: 8px; border: .5px solid var(--border-color); border-radius: 11px; background: var(--bg-secondary); }
.piante-care-row select, .piante-care-row input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-color); font: inherit; font-size: .78rem; }
@media (max-width: 600px) { .piante-overview, .piante-section { margin-left: 12px; margin-right: 12px; } .piante-card { gap: 7px; } .piante-action { padding: 7px; font-size: .68rem; } .piante-care-row { grid-template-columns: 1fr 72px auto; } .piante-care-row input[type=date], .piante-care-row input[type=text] { grid-column: span 1; } }

/* =====================================================
   RESPONSIVE — classi generiche nuove
   ===================================================== */
@media (max-width: 600px) {
    .stat-cards       { margin: 0 12px 12px; gap: 8px; }
    .card-list        { margin: 0 12px 16px; gap: 6px; }
    .card-list-item   { padding: 11px 12px; }
    .card-foto        { width: 44px; height: 44px; min-width: 44px; border-radius: 10px; font-size: 1.3rem; }
    .stat-num         { font-size: 1.5rem; }
}
@media (min-width: 768px) {
    .stat-cards       { margin: 0 28px 18px; gap: 16px; }
    .stat-card        { padding: 18px 20px; }
    .stat-num         { font-size: 2.2rem; }
    .card-list        { margin: 0 28px 24px; gap: 10px; }
    .card-list-item   { padding: 16px 18px; }
    .card-foto        { width: 60px; height: 60px; min-width: 60px; border-radius: 14px; }
    .hc-sheet.sheet-tall { border-radius: 24px; margin-bottom: 40px; }
    .hc-overlay:has(.sheet-tall) { align-items: center; }
}

/* =====================================================
   CLASSI GENERICHE — pagine importa
   Aggiunto: Maggio 2026
   ===================================================== */

/* Blocco sezione con padding orizzontale */
.section-block {
    padding: 0 20px 16px;
}

/* Barra paginazione */
.pag-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
    border-top: .5px solid var(--border-color);
    border-bottom: .5px solid var(--border-color);
    margin-bottom: 8px;
}
.pag-info {
    font-size: .78rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: center;
}

/* Confronto duplicati */
.dup-compare {
    display: flex;
    gap: 10px;
    margin: 8px 0;
}
.dup-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dup-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 0 4px;
}

/* Bottone famiglia movimenti */
.mov-btn-fam {
    background: none;
    border: .5px solid var(--border-color);
    border-radius: 8px;
    padding: 2px 7px;
    font-size: .85rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.mov-btn-fam.active {
    background: rgba(52,199,89,.12);
    border-color: var(--success);
    color: var(--success);
}

/* Select categoria in lista movimenti */
.mov-cat-sel {
    background: none;
    border: none;
    font-family: inherit;
    font-size: .75rem;
    color: var(--text-secondary);
    outline: none;
    cursor: pointer;
    max-width: 120px;
}

/* =====================================================
   RESPONSIVE — classi generiche nuove
   ===================================================== */
@media (max-width: 600px) {
    .section-block { padding: 0 16px 12px; }
    .pag-bar       { padding: 8px 16px; }
    .dup-compare   { flex-direction: column; }
}
@media (min-width: 768px) {
    .section-block { padding: 0 28px 18px; }
    .pag-bar       { padding: 12px 28px; }
    .page-actions  { padding: 0 28px 14px; }
}

/* ── Upload zone (dropzone generica) ── */
.upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 20px 16px;
    padding: 32px 20px;
    background: var(--bg-secondary);
    border: 1.5px dashed var(--border-color);
    border-radius: 18px;
    cursor: pointer;
    text-align: center;
    transition: border-color .18s, background .18s;
}
.upload-zone:hover,
.upload-zone.drag-over { border-color: var(--accent); background: rgba(10,132,255,.05); }
.upload-zone-icon  { font-size: 2.4rem; }
.upload-zone-label { font-size: .88rem; font-weight: 600; color: var(--text-color); }
.upload-zone-hint  { font-size: .75rem; color: var(--text-secondary); }

/* ── Progress card ── */
.progress-card {
    margin: 0 20px 16px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.progress-card-head  { display: flex; align-items: center; gap: 10px; }
.progress-card-title { font-size: .88rem; font-weight: 600; }

/* ── CTA bar fissa in fondo ── */
.cta-bar {
    padding: 12px 20px;
    border-top: .5px solid var(--border-color);
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-shrink: 0;
}

/* ── Entry body (dettaglio voce diario) ── */
.entry-body {
    padding: 12px 14px 14px;
    border-top: .5px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.entry-thumb {
    width: 100%;
    border-radius: 10px;
    display: block;
}
.entry-skip-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Toggle skip (iOS switch generico) ── */
.skip-toggle {
    position: relative;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: var(--switch-bg);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s;
}
.skip-toggle.active { background: var(--accent); }
.skip-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: transform .2s;
}
.skip-toggle.active .skip-knob { transform: translateX(18px); }

@media (max-width: 600px) {
    .upload-zone   { margin: 0 12px 14px; padding: 24px 16px; border-radius: 14px; }
    .progress-card { margin: 0 12px 14px; }
    .cta-bar       { padding: 10px 16px; }
    .task-section  { margin: 0 12px 20px; }
}
@media (min-width: 768px) {
    .upload-zone   { margin: 0 28px 20px; border-radius: 22px; }
    .progress-card { margin: 0 28px 20px; }
    .cta-bar       { padding: 14px 28px; }
    .task-section  { margin: 0 28px 20px; }
}
/* =====================================================
   DIARIO — classi generiche
   Aggiunto: Maggio 2026
   ===================================================== */

/* ── Modal scroll body ── */
.modal-scroll-body {
    padding: 16px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    flex: 1;
}

/* ── Form section / label generici (modal) ── */
.form-section {
    margin-bottom: 18px;
}
.form-label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}
.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.form-label-row .form-label {
    margin-bottom: 0;
}

/* ── Date input row (testo + bottone calendario) ── */
.date-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.date-text-input {
    flex: 1;
}

/* ── Bottone icona tondo generico ── */
.icon-btn-round {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}
.icon-btn-round:hover { background: rgba(10,132,255,.1); }

/* ── Bottone danger outline (Elimina modal) ── */
.btn-danger-outline {
    display: none;
    width: 100%;
    padding: 13px;
    background: rgba(255,59,48,.08);
    border: .5px solid rgba(255,59,48,.3);
    border-radius: 14px;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--danger);
    cursor: pointer;
    margin-top: 10px;
    transition: background .15s;
}
.btn-danger-outline:hover { background: rgba(255,59,48,.14); }

/* ── Mini calendario (inline nel form) ── */
.mini-cal {
    display: none;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 16px;
    padding: 12px;
    margin-top: 10px;
}
.mini-cal.visible { display: block; }
.mini-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.mini-cal-title {
    font-size: .88rem;
    font-weight: 700;
}
.mini-cal-nav-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 1.2rem;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: background .15s;
}
.mini-cal-nav-btn:hover { background: var(--bg-secondary); }
.mini-cal-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.mini-cal-grid > div {
    padding: 6px 2px;
    border-radius: 8px;
    font-size: .82rem;
    cursor: pointer;
    transition: background .12s;
}
.mini-cal-grid > div:hover { background: var(--bg-secondary); }
.mini-cal-grid > div.today {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}

/* ── Umore bar (selezione nel form) ── */
.umore-bar {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 6px;
    justify-content: space-between;
}
.umore-btn {
    min-width: 0;
    padding: 7px 3px 6px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    text-align: center;
}
.umore-btn img { display: block; width: 100%; max-width: 50px; aspect-ratio: 1; object-fit: contain; margin: 0 auto 3px; }
.umore-btn-emoji { display: block; width: 100%; max-width: 50px; aspect-ratio: 1; margin: 0 auto 3px; font-size: 2.35rem; line-height: 1; }
.umore-btn span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: .62rem; font-weight: 700; }
.umore-btn:active { transform: scale(.93); }
.umore-btn.sel    { transform: translateY(-2px); }
.umore-btn.sel span { color: var(--text-color); }
.umore-current-label { color: var(--text-secondary); font-size: .78rem; font-weight: 700; }
.form-helper { margin: -1px 0 7px; color: var(--text-secondary); font-size: .72rem; }

/* ── Emozioni sezioni (form) ── */
.emo-sezioni {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.emo-section-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 2px 0;
}
.emo-section-label-pos { color: #34c759; }
.emo-section-label-neu { color: #8e8e93; }
.emo-section-label-neg { color: #ff3b30; }
.emo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.emo-btn {
    padding: 6px 10px;
    border-radius: 20px;
    border: 1.5px solid transparent;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.emo-btn:active { transform: scale(.94); }
.emo-pos        { background: rgba(52,199,89,.1);  border-color: rgba(52,199,89,.25);  color: #34c759; }
.emo-neu        { background: rgba(142,142,147,.1); border-color: rgba(142,142,147,.25); color: #8e8e93; }
.emo-neg        { background: rgba(255,59,48,.1);  border-color: rgba(255,59,48,.25);  color: #ff3b30; }
.emo-btn.sel.emo-pos { background: rgba(52,199,89,.25);  border-color: #34c759; }
.emo-btn.sel.emo-neu { background: rgba(142,142,147,.25); border-color: #8e8e93; }
.emo-btn.sel.emo-neg { background: rgba(255,59,48,.25);  border-color: #ff3b30; }

/* ── Chip group (categorie) ── */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.chip {
    padding: 6px 13px;
    border-radius: 20px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-secondary);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.chip:active     { transform: scale(.93); }
.chip.sel        { background: rgba(10,132,255,.15); border-color: var(--accent); color: var(--accent); }

/* ── Confirm dialog (custom) ── */
.confirm-dialog {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.confirm-dialog.visible { display: flex; }
.confirm-sheet {
    width: min(340px, 90vw);
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.confirm-sheet-header {
    padding: 18px 20px 14px;
    text-align: center;
    border-bottom: .5px solid var(--border-color);
}
.confirm-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.confirm-msg {
    font-size: .85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.confirm-ok {
    width: 100%;
    padding: 14px;
    background: none;
    border: none;
    border-bottom: .5px solid var(--border-color);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    color: var(--danger);
    cursor: pointer;
    transition: background .15s;
}
.confirm-ok:hover { background: rgba(255,59,48,.08); }
.confirm-cancel {
    width: 100%;
    padding: 14px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background .15s;
}
.confirm-cancel:hover { background: var(--bg-secondary); }

/* ── Tab bar (sezione interna, tipo diario/stats) ── */
.tab-bar {
    display: flex;
    margin: 0 16px 14px;
    background: var(--bg-secondary);
    border-radius: 14px;
    padding: 4px;
    gap: 3px;
    border: .5px solid var(--border-color);
}
.tab-btn {
    flex: 1;
    padding: 9px 4px;
    border: none;
    background: transparent;
    border-radius: 11px;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 52px;
}
.tab-btn .tab-icon  { font-size: 1.2rem; line-height: 1; }
.tab-btn .tab-label { font-size: .7rem; font-weight: 700; }
.tab-btn.active     { background: var(--card-bg); color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 -2px 0 var(--accent); }
.tab-content        { display: none; }
.tab-content.active { display: block; }

/* ── Month header (separatore mese in lista) ── */
.month-header {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-secondary);
    padding: 12px 20px 6px;
}

/* ── Entry list (lista voci diario) ── */
.entry-list {
    margin: 0 16px 4px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

/* ── Voce diario (riga lista) ── */
.voce-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-bottom: .5px solid var(--border-color);
    transition: transform .2s;
}
.voce-wrap:last-child { border-bottom: none; }
.voce-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    transition: background .12s;
}
.voce-row:active { background: var(--bg-secondary); }
.voce-giorno {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 32px;
    flex-shrink: 0;
}
.voce-giorno-num  { font-size: 1.1rem; font-weight: 800; line-height: 1.1; }
.voce-giorno-nome { font-size: .65rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; }
.voce-umore-dot   { font-size: 1.2rem; flex-shrink: 0; }
.voce-main        { flex: 1; min-width: 0; }
.voce-titolo      { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce-titolo-vuoto { color: var(--text-secondary); font-style: italic; }
.voce-sub         { font-size: .75rem; color: var(--text-secondary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce-emos        { font-size: .95rem; flex-shrink: 0; letter-spacing: -2px; }
.voce-more-btn {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color .15s;
}
.voce-more-btn:hover { color: var(--text-color); }

/* Swipe delete */
.voce-wrap.swiped-left  { transform: translateX(-70px); }
.voce-wrap.swiped-right { transform: translateX(70px); }

/* ── Umore stats (bilancio sezione) ── */
.umore-stats-section { margin-top: 16px; }
.umore-stats-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.umore-barra {
    display: flex;
    height: 10px;
    border-radius: 10px;
    overflow: hidden;
    gap: 2px;
    margin-bottom: 8px;
}
.barra-seg   { height: 100%; border-radius: 10px; transition: flex .3s; }
.barra-pos   { background: #34c759; }
.barra-neu   { background: #8e8e93; }
.barra-neg   { background: #ff3b30; }
.barra-empty { flex: 1; background: var(--bg-secondary); }
.umore-leg {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: .75rem;
    font-weight: 600;
}
.umore-leg-pos { color: #34c759; }
.umore-leg-neu { color: #8e8e93; }
.umore-leg-neg { color: #ff3b30; }

/* ── Streak nota ── */
.streak-nota {
    margin-top: 14px;
    font-size: .78rem;
}

/* ── Calendario statistiche ── */
.cal-wrap {
    margin: 0 16px 16px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 16px;
    padding: 14px;
}
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.cal-nav h3 { font-size: .95rem; font-weight: 700; }
.cal-nav-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 1.3rem;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 8px;
    font-family: inherit;
    transition: background .15s;
}
.cal-nav-btn:hover { background: var(--bg-secondary); }
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cal-dname {
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding-bottom: 4px;
}
.cal-giorni-grid { margin-top: 4px; }
.cal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 2px;
    border-radius: 8px;
    transition: background .12s;
    min-height: 38px;
}
.cal-day:not(.fuori):hover { background: var(--bg-secondary); }
.cal-day.today {
    background: rgba(10,132,255,.15);
    border: 1px solid rgba(10,132,255,.4);
}
.cal-day.fuori { opacity: 0; pointer-events: none; }
.cal-num { font-size: .8rem; font-weight: 600; }
.cal-dot { font-size: .85rem; line-height: 1; }
.cal-count { min-width: 15px; padding: 1px 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: .61rem; font-weight: 800; line-height: 1.25; text-align: center; }

/* ── Stat row (umore / emozioni stats) ── */
.stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: .5px solid var(--border-color);
}
.stat-row:last-child { border-bottom: none; }
.stat-emoji-lg  { font-size: 1.2rem; flex-shrink: 0; }
.stat-emoji-md  { font-size: 1rem;   flex-shrink: 0; }
.stat-label-sm  { font-size: .82rem; font-weight: 600; min-width: 80px; flex-shrink: 0; }
.stat-bar-wrap  { flex: 1; height: 6px; background: var(--bg-secondary); border-radius: 6px; overflow: hidden; }
.stat-bar-fill  { height: 100%; border-radius: 6px; transition: width .4s; }
.stat-count-sm  { font-size: .75rem; color: var(--text-secondary); font-weight: 600; min-width: 56px; text-align: right; flex-shrink: 0; }
.stat-count-xs  { font-size: .72rem; color: var(--text-secondary); font-weight: 600; min-width: 30px; text-align: right; flex-shrink: 0; }

/* ── Stat section title con dot colorato ── */
.stat-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.stat-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* ── Mic button (dettatura vocale) ── */
.mic-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.mic-btn:hover    { background: rgba(10,132,255,.12); color: var(--accent); }
.mic-btn.recording {
    background: rgba(255,59,48,.15);
    border-color: var(--danger);
    color: var(--danger);
    animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,59,48,.3); }
    50%      { box-shadow: 0 0 0 6px rgba(255,59,48,.0); }
}
.mic-status {
    font-size: .75rem;
    color: var(--danger);
    font-weight: 600;
    margin-top: 6px;
    min-height: 16px;
}

/* =====================================================
   RESPONSIVE — DIARIO
   ===================================================== */
@media (max-width: 600px) {
    .entry-list      { margin: 0 12px 4px; }
    .cal-wrap        { margin: 0 12px 14px; }
    .tab-bar         { margin: 0 12px 12px; }
    .month-header    { padding: 10px 16px 5px; }
    .modal-scroll-body { padding: 14px 16px 28px; }
    .umore-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
    .umore-btn img { max-width: 46px; }
    .stat-label-sm   { min-width: 64px; font-size: .78rem; }
}
@media (min-width: 768px) {
    .entry-list      { margin: 0 28px 6px; border-radius: 18px; }
    .cal-wrap        { margin: 0 28px 20px; border-radius: 18px; }
    .tab-bar         { margin: 0 28px 16px; }
    .month-header    { padding: 14px 28px 6px; }
    .modal-scroll-body { padding: 18px 24px 36px; }
    .voce-row        { padding: 14px 18px; }
    .stat-label-sm   { min-width: 96px; }
}


/* =====================================================
   CLASSI PREFISSATE MIGRATE / DA NON USARE
   Queste classi erano nel CSS con prefissi di sezione e sono
   state sostituite nel codice con equivalenti ui-*.
   Tenute qui commentate per controllo prima della rimozione.
   =====================================================
   .al-fr-top
   .al-lbl-top
   .al-scanner-btn
   .al-scanner-close
   .al-scanner-cont
   .al-scanner-line
   .al-scanner-status
   .al-scanner-video
   .al-scanner-wrap
   .lib-active-filters
   .lib-active-tag
   .lib-anno-badge
   .lib-anno-body
   .lib-anno-card
   .lib-anno-chevron
   .lib-anno-header
   .lib-anno-meta
   .lib-anno-pill
   .lib-anno-stat
   .lib-anno-stat-lbl
   .lib-anno-stats-row
   .lib-anno-stat-val
   .lib-anno-top
   .lib-anno-top-autore
   .lib-anno-top-cover
   .lib-anno-top-info
   .lib-anno-top-item
   .lib-anno-top-title
   .lib-anno-top-titolo
   .lib-anno-top-voto
   .lib-anno-year
   .lib-badge
   .lib-bar-anno-fill
   .lib-bar-anno-lbl
   .lib-bar-anno-num
   .lib-bar-anno-row
   .lib-bar-anno-track
   .lib-bar-anno-wrap
   .lib-card-autore
   .lib-card-pagine
   .lib-card-serie
   .lib-card-stelle
   .lib-card-titolo
   .lib-chart-wrap
   .lib-cover-fb
   .lib-cover-img
   .lib-custom-option
   .lib-custom-select
   .lib-custom-select-btn
   .lib-custom-select-dropdown
   .lib-custom-select-list
   .lib-custom-select-search
   .lib-empty
   .lib-empty-icon
   .lib-fchip
   .lib-filter-bar
   .lib-filter-btn
   .lib-filter-chips
   .lib-filter-count
   .lib-filter-label
   .lib-filter-panel
   .lib-filter-section
   .lib-hint-txt
   .lib-kobo-btn
   .lib-prest-badge
   .lib-prest-icon
   .lib-prest-list
   .lib-reading-body
   .lib-reading-card
   .lib-reading-cover
   .lib-reading-tab
   .lib-reset-all
   .lib-reset-link
   .lib-restituito-btn
   .lib-results-count
   .lib-search
   .lib-spacer
   .lib-stat-count
   .lib-stats-author
   .lib-stats-bar
   .lib-stats-bar-fill
   .lib-stats-bar-wrap
   .lib-stats-card-mt
   .lib-stats-grid-0mb
   .lib-stats-n
   .lib-stats-name
   .lib-stats-rank
   .lib-stats-tab
   .lib-tab-bar
   .lib-tab-btn
   .sf-amount
   .sf-badge
   .sf-badge-ok
   .sf-badge-rec
   .sf-badge-warn
   .sf-desc
   .sf-details
   .sf-item
   .sf-list
   .sf-list-header
   .sf-meta
   .sf-price
   .sf-thumb
*/

/* =====================================================
   COPERTURA SEZIONI COLLEGATE: LAYOUT E CONTROLLI
   ===================================================== */
.back-circle {
    appearance: none;
    font-family: inherit;
    cursor: pointer;
}

.refreshable { overscroll-behavior-y: contain; }
.flex-1 { flex: 1; }
.min-w-0 { min-width: 0; }
.flex-row { display: flex; align-items: center; gap: 10px; }
.pad-list { padding: 0 20px 24px; }
.hc-empty-sm { padding: 26px 20px; }
.hc-empty-icon-sm { font-size: 2rem; margin-bottom: 8px; }

.invp-cat-bar,
.stato-chips,
.fo-tabs,
.fo-ctx-bar,
.farmaci-tabs,
.ric-anno-bar {
    display: flex;
    gap: 8px;
    padding: 0 20px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
}
.inv-tabs,
.chips-scroll,
.ap-tab-bar,
.sc-tabs,
.det-tab-bar,
.cl-tab-bar {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}
.invp-cat-bar::-webkit-scrollbar,
.stato-chips::-webkit-scrollbar,
.fo-tabs::-webkit-scrollbar,
.fo-ctx-bar::-webkit-scrollbar,
.farmaci-tabs::-webkit-scrollbar,
.ric-anno-bar::-webkit-scrollbar { display: none; }

.invp-cat-pill,
.stato-chip,
.fo-tab,
.farmaci-tab-btn,
.ric-anno-pill,
.stato-btn,
.prio-btn,
.fo-stato-btn,
.bc-chip,
.bc-tipo-btn,
.ric-cat-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: .5px solid var(--border-color);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-secondary);
    padding: 7px 13px;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.invp-cat-pill.active,
.stato-chip.on,
.fo-tab.active,
.farmaci-tab-btn.on,
.ric-anno-pill.on,
.ric-anno-pill.sel,
.stato-btn.sel,
.prio-btn.sel,
.fo-stato-btn.on,
.bc-chip.on,
.bc-tipo-btn.sel,
.ric-cat-btn.sel {
    border-color: rgba(10,132,255,.5);
    background: rgba(10,132,255,.14);
    color: var(--accent);
}
.invp-cat-count,
.invp-cat-badge {
    color: inherit;
    opacity: .75;
    font-size: .72rem;
}

.invp-empty,
.pg-empty,
.bc-empty,
.farmaci-empty,
.empty-ricorrenti,
.ant-empty {
    margin: 18px 20px;
    padding: 34px 20px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.45;
}
.invp-empty-icon,
.pg-empty-icon,
.bc-empty .bc-card-icon,
.farmaci-empty-icon,
.empty-icon,
.ant-empty-icon {
    font-size: 2.35rem;
    margin-bottom: 8px;
}
.empty-sub { margin-top: 4px; font-size: .82rem; color: var(--text-secondary); }

.invp-overlay,
.pg-overlay,
.fo-modal-overlay,
.bc-modal-overlay,
.farmaci-overlay,
.farmaci-confirm-overlay,
.ant-confirm-overlay,
.ric-overlay,
.ric-confirm {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(12px);
    align-items: flex-end;
    justify-content: center;
}
.invp-overlay.active,
.pg-overlay.active,
.fo-modal-overlay.active,
.bc-modal-overlay.active,
.farmaci-overlay.active,
.farmaci-confirm-overlay.active,
.ant-confirm-overlay.active,
.ric-overlay.active,
.ric-confirm.active,
.ric-overlay.open,
.ric-confirm.open { display: flex; }

.invp-sheet,
.pg-sheet,
.fo-modal,
.bc-modal,
.farmaci-sheet,
.farmaci-confirm-box,
.ant-confirm-sheet,
.ric-sheet,
.ric-confirm-box {
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    background: var(--phone-bg);
    border: .5px solid var(--border-color);
    padding: 18px 20px 28px;
    box-sizing: border-box;
}
.farmaci-confirm-overlay,
.ant-confirm-overlay,
.ric-confirm { align-items: center; padding: 20px; }
.farmaci-confirm-box,
.ant-confirm-sheet,
.ric-confirm-box {
    border-radius: 18px;
    max-width: 360px;
    text-align: center;
}

.invp-sheet-title,
.pg-sheet-title,
.fo-modal-title,
.bc-modal-title,
.farmaci-form-title,
.farmaci-sheet-title,
.farmaci-confirm-title,
.ant-confirm-title,
.ric-sheet-title,
.ric-confirm-title {
    margin: 0 0 14px;
    font-size: 1.08rem;
    font-weight: 900;
}
.fo-modal-header,
.bc-modal-header,
.ric-sheet-header,
.ric-confirm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.fo-modal-close,
.bc-modal-close,
.farmaci-form-cancel,
.ric-viewer-close {
    border: none;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.invp-sheet-body,
.fo-modal-body,
.bc-modal-body,
.farmaci-form-body,
.farmaci-sheet-scroll,
.modal-body-scroll { display: flex; flex-direction: column; gap: 13px; }
.modal-body-pad { padding: 14px 20px 24px; }
.pg-group,
.fo-field,
.bc-field,
.ric-field { margin-bottom: 13px; }
.pg-label,
.fo-field label,
.bc-field label,
.ric-label,
.imp-section-lbl,
.proc-section-lbl {
    display: block;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: .73rem;
    font-weight: 900;
    text-transform: uppercase;
}
.pg-input,
.pg-textarea,
.fo-input,
.fo-select,
.fo-textarea,
.bc-input,
.bc-textarea,
.ric-input {
    width: 100%;
    box-sizing: border-box;
    border: .5px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    padding: 11px 12px;
    outline: none;
}
.pg-textarea,
.fo-textarea,
.bc-textarea { min-height: 92px; resize: vertical; }
.pg-textarea-lg { min-height: 150px; }
.pg-textarea-sm { min-height: 74px; }
.pg-row,
.bc-row2,
.farmaci-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pg-btn-save,
.fo-btn-save,
.bc-save-btn,
.ric-btn-save {
    width: 100%;
    border: none;
    border-radius: 15px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 900;
    padding: 14px 16px;
    cursor: pointer;
}
.pg-btn-save-mt { margin-top: 10px; }
.pg-btn-cancel,
.pg-btn-delete,
.fo-btn-delete,
.farmaci-sheet-btn,
.farmaci-confirm-btn,
.ant-confirm-cancel,
.ant-confirm-ok,
.ric-del-btn {
    border: .5px solid var(--border-color);
    border-radius: 13px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    font-weight: 800;
    padding: 11px 13px;
    cursor: pointer;
}
.pg-btn-delete,
.fo-btn-delete,
.farmaci-confirm-btn.danger,
.ant-confirm-ok,
.ric-del-btn {
    background: rgba(255,59,48,.13);
    color: var(--danger);
    border-color: rgba(255,59,48,.28);
}

.invp-action-sheet,
.prog-card,
.attivita-card,
.verbale-card,
.bc-card,
.farmaco-item,
.ric-item,
.ant-list-item,
.dash-diff-card,
.ric-summary,
.ric-item,
.ric-upload-zone {
    margin: 0 20px 12px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    padding: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.07);
}

.prog-card,
.attivita-card,
.verbale-card,
.farmaco-item,
.ric-item,
.ant-list-item { cursor: pointer; }
.prog-card:active,
.attivita-card:active,
.verbale-card:active,
.farmaco-item:active,
.ric-item:active,
.ant-list-item:active { transform: scale(.99); }

.prog-card,
.prog-header-bar,
.bc-hero,
.farmaco-item,
.ric-item-inner,
.ant-list-item,
.dash-diff-card,
.ric-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}
.prog-info,
.bc-hero-info,
.ric-item-details,
.ant-riepilogo-dati,
.min-w-0 { flex: 1; min-width: 0; }
.prog-nome,
.prog-header-nome,
.attivita-titolo,
.verbale-titolo,
.bc-card-titolo,
.farmaco-chip,
.ric-item-importo,
.ant-riepilogo-nome,
.ric-sum-val {
    font-weight: 900;
    color: var(--text-color);
}
.prog-desc,
.prog-meta,
.attivita-meta,
.attivita-scad,
.verbale-preview,
.verbale-data,
.bc-card-nota,
.bc-card-data,
.farmaci-empty,
.detail-principio,
.detail-note-text,
.ric-item-details,
.ant-riepilogo-label,
.ant-confirm-msg,
.ric-meta,
.ric-desc,
.ric-sum-sub,
.bk-file-sub,
.ric-confirm-sub {
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.4;
}
.prog-dot,
.prog-header-dot,
.color-dot-pick {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.prog-arrow { margin-left: auto; color: var(--text-secondary); }
.prog-badge,
.prog-badge-att,
.prog-badge-verb,
.attivita-prio,
.fo-fonte-badge,
.fo-link-badge,
.bc-chip,
.farmaco-chip,
.scorte-badge,
.freq-tag,
.badge-scad,
.ant-badge,
.ric-ai-ok,
.ric730-lbl-ok {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 4px 9px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: .72rem;
    font-weight: 800;
}
.prio-alta,
.ant-badge-ricevuto,
.badge-scad { color: var(--danger); background: rgba(255,59,48,.12); }
.prio-media { color: var(--warning); background: rgba(255,149,0,.12); }
.prio-bassa,
.ant-badge-rimborsato,
.automatico,
.ric-ai-ok,
.pagato { color: var(--success); background: rgba(52,199,89,.12); }

.prog-tab-bar,
.bc-toolbar,
.farmaci-alert-bar,
.sezione-header,
.dash-section-hdr,
.ric-section-title,
.fit-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 20px;
}
.prog-tab-btn {
    flex: 1;
    border: .5px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: 9px 10px;
    font: inherit;
    font-weight: 800;
}
.prog-tab-btn.active { background: var(--card-bg); color: var(--accent); border-color: rgba(10,132,255,.45); }
.kanban-pb { padding-bottom: 20px; }
.kanban-col {
    margin: 0 20px 14px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    overflow: hidden;
}
.kanban-col-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: .5px solid var(--border-color);
}
.kanban-col-lbl { font-weight: 900; flex: 1; }
.kanban-col-count { color: var(--text-secondary); font-size: .78rem; }
.kanban-items { padding: 10px; }
.kanban-col-add {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 800;
    padding: 12px;
    cursor: pointer;
}

.bc-hero {
    margin: 0 20px 14px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    padding: 16px;
}
.bc-hero-foto,
.bc-card-icon,
.farmaci-sheet-group,
.ric-sum-icon,
.ric-cat-dot,
.ant-thumb,
.ric-auto-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bc-hero-nome { font-size: 1.08rem; font-weight: 900; }
.bc-hero-peso,
.bc-hero-sub,
.bc-alert-giorni { color: var(--text-secondary); font-size: .82rem; }
.bc-filter,
.bc-list,
.ant-list,
.ric-list,
.verbali-list-wrap { padding: 0 20px 18px; }
.bc-tipo-grid,
.ric-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}

.farmaci-alert-pill,
.bc-alert,
.ric-ai-status {
    border-radius: 13px;
    padding: 9px 12px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 800;
}
.ric-ai-status,
.ric-ai-ok {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.ric-ai-status.show,
.ric-ai-ok.show {
    display: flex;
}
.farmaci-alert-pill.scaduto,
.bc-alert.scaduto { color: var(--danger); background: rgba(255,59,48,.12); }
.farmaci-alert-pill.in-scadenza { color: var(--warning); background: rgba(255,149,0,.12); }
.detail-header { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.detail-nome { font-size: 1.1rem; font-weight: 900; }
.detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: .5px solid var(--border-color);
}
.detail-row-label { color: var(--text-secondary); }
.detail-row-value { font-weight: 800; text-align: right; }
.detail-note-block { margin-top: 14px; }
.detail-note-label { color: var(--text-secondary); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.farmaci-confirm-btns,
.ant-confirm-body,
.ric-confirm-box .ric-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
}

.ant-riepilogo {
    margin: 0 20px 14px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    padding: 14px;
}
.ant-riepilogo-row,
.ant-riepilogo-totale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
}
.ant-riepilogo-totale { border-top: .5px solid var(--border-color); margin-top: 8px; font-weight: 900; }
.ant-item-amount,
.ant-amount-success,
.ant-riepilogo-importo,
.ant-riepilogo-totale-val { font-weight: 900; color: var(--success); }
.ant-list-item .hc-details {
    flex: 1;
    min-width: 0;
}
.ant-list-item .hc-details strong {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.25;
}
.ant-list-item .hc-details span {
    display: block;
    color: var(--text-secondary);
    font-size: .82rem;
    margin-top: 3px;
}
.ant-item-amount,
.ant-amount-success {
    margin-left: auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    flex-shrink: 0;
}
.ant-item-rimborsato { opacity: .65; }
.ant-btn-rimborsa {
    border: none;
    border-radius: 999px;
    background: rgba(52,199,89,.14);
    color: var(--success);
    font: inherit;
    font-weight: 900;
    padding: 7px 11px;
}

.dash-cat-wrap,
.dash-chart-col {
    margin: 0 20px 14px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    padding: 14px;
}
.dash-chart-section {
    display: block;
}
.charts-row.dash-chart-section {
    display: flex;
    flex-direction: column;
}
.dash-chart-title,
.dash-section-title { font-weight: 900; }
.dash-cat-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dash-diff-val { font-size: 1.05rem; font-weight: 900; }
.dash-diff-right { margin-left: auto; text-align: right; }
.dash-p-danger,
.red { color: var(--danger); }
.dash-p-success,
.green { color: var(--success); }
.dash-status-note { margin: 0 20px 12px; color: var(--text-secondary); font-size: .84rem; }

.ric-wrap { padding-bottom: 24px; }
.ric-list { display: flex; flex-direction: column; gap: 10px; }
.ricorrenti-page .hc-list,
.ric-list-section {
    margin: 0 20px 18px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    overflow: hidden;
}
.ric-list-section .hc-list-item {
    margin: 0;
    border: 0;
    border-bottom: .5px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    min-height: 72px;
}
.ric-list-section .hc-list-item:last-child { border-bottom: 0; }
.ric-list-section .ric-item-right {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}
.ric-list-section .ric-item-badges {
    justify-content: flex-end;
}
.ric-list-section .rinnova-btn {
    margin-left: 8px;
    flex-shrink: 0;
}
.ric-upload-zone {
    text-align: center;
    border-style: dashed;
    cursor: pointer;
}
.ric-upload-icon { font-size: 2rem; margin-bottom: 6px; }
.ric-upload-label,
.ric-upload-name { font-weight: 900; }
.ric-has-file { border-color: rgba(52,199,89,.45); background: rgba(52,199,89,.06); }
.ric-summary {
    justify-content: space-between;
    align-items: stretch;
}
.ric-sum-label { color: var(--text-secondary); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.ric-info,
.bk-file-name { font-weight: 800; }
.ric-viewer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    background: rgba(0,0,0,.88);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ric-viewer.active { display: flex; }
.ric-viewer-label {
    position: absolute;
    left: 20px;
    top: 20px;
    color: #fff;
    font-weight: 900;
}
.ric-ai-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .9s linear infinite;
}

.sc-tabs {
    display: flex;
    gap: 6px;
    padding: 0 20px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tab {
    border: .5px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: 9px 12px;
    font: inherit;
    font-weight: 800;
    white-space: nowrap;
}
.sc-tab.active { background: var(--card-bg); color: var(--accent); border-color: rgba(10,132,255,.45); }
.sc-tab-content { display: none; }
.sc-tab-content.active { display: block; }
.sc-section,
.sc-chart-card,
.sc-ai-box,
.sc-card {
    margin: 0 20px 14px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    padding: 14px;
}
.sc-section-title,
.sc-chart-title,
.sc-ai-title {
    font-weight: 900;
    margin-bottom: 10px;
}
.sc-materie-grid,
.sc-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}
.sc-materia-card,
.sc-agenda-item,
.sc-voti-row,
.sc-contenuto-item,
.sc-quiz-item,
.sc-ai-result-card-wrap {
    border: .5px solid var(--border-color);
    border-radius: 15px;
    background: var(--bg-secondary);
    padding: 12px;
}
.sc-card-row,
.sc-agenda-body,
.sc-agenda-actions,
.sc-voti-badges,
.sc-action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sc-empty { text-align: center; color: var(--text-secondary); padding: 28px 16px; }
.sc-empty-icon { font-size: 2.2rem; margin-bottom: 8px; }
.sc-sheet,
.sc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(12px);
    align-items: flex-end;
    justify-content: center;
}
.sc-sheet.active,
.sc-overlay.active,
.sc-overlay.open { display: flex; }

@media (max-width: 430px) {
    .pg-row,
    .bc-row2,
    .farmaci-form-row {
        grid-template-columns: 1fr;
    }
    .page-actions {
        justify-content: flex-start;
    }
    .btn-nav,
    .btn-nav-primary {
        max-width: 100%;
        min-width: 0;
        justify-content: center;
    }
    .page-header .page-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        width: 100%;
    }
    .page-header .page-actions > * {
        width: 100%;
    }
    .page-header .page-actions > :only-child {
        grid-column: 1 / -1;
    }
    .sc-tabs {
        max-width: 100%;
        padding: 0 12px 12px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .sc-tab {
        flex: 0 0 auto;
        max-width: calc(100vw - 40px);
        scroll-snap-align: start;
    }
    .sc-section,
    .sc-chart-card,
    .sc-ai-box,
    .sc-card,
    .ricorrenti-page .hc-list,
    .ric-list-section {
        margin-left: 12px;
        margin-right: 12px;
    }
    .ric-list-section .hc-list-item {
        align-items: flex-start;
        gap: 10px;
    }
    .ric-list-section .ric-item-details {
        min-width: 0;
    }
    .ric-list-section .ric-item-right {
        align-items: flex-end;
        min-width: 86px;
    }
    .ric-list-section .ric-item-importo {
        font-size: .95rem;
        white-space: nowrap;
    }
    .ant-list-item {
        align-items: flex-start;
    }
    .ant-item-amount,
    .ant-amount-success {
        min-width: 88px;
    }
    .ant-btn-rimborsa {
        padding: 6px 9px;
        font-size: .74rem;
    }
    .ric-summary,
    .ant-riepilogo {
        margin-left: 12px;
        margin-right: 12px;
    }
}

/* Copertura puntuale classi residue rilevate nelle pagine controllate */
.swipeable,
.swipeable-right,
.swipe-item,
.tab-swipeable,
.long-pressable,
.pinch-zoomable { touch-action: pan-y; }
.mov-check {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.text-secondary { color: var(--text-secondary); }

.invp-thumb,
.hc-thumb-farmaco,
.hc-thumb-dyn,
.ric-item-thumb {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.invp-pos-badge,
.sc-card-sub,
.sc-quiz-titolo,
.ric-empty-icon,
.ant-riepilogo-num,
.dash-diff-anno-lbl {
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 800;
}
.invp-action-title,
.invp-confirm-title,
.bc-alert-titolo,
.bc-card-titolo,
.sc-card-title,
.sc-agenda-title,
.sc-contenuto-title,
.vd-titolo,
.sezione-titolo,
.ric730-totale {
    font-weight: 900;
}
.invp-action-btn,
.invp-form-cancel,
.invp-confirm-btn,
.rinnova-btn,
.ric730-btn-action,
.sc-agenda-btn,
.sc-ai-btn,
.sc-btn-save,
.sc-btn-completa-verifica,
.sc-voti-add-btn {
    border: .5px solid var(--border-color);
    border-radius: 13px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    font-weight: 800;
    padding: 9px 12px;
    cursor: pointer;
}
.invp-action-btn.primary,
.sc-btn-save,
.sc-voti-add-btn,
.ric730-btn-action {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.invp-confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.invp-confirm-overlay.active { display: flex; }
.invp-confirm-box {
    width: min(100%, 360px);
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    padding: 18px;
    text-align: center;
}
.invp-confirm-msg,
.farmaci-confirm-msg { color: var(--text-secondary); line-height: 1.45; }
.invp-confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.invp-form-cats,
.stato-btns,
.prio-btns,
.fo-stato-btns,
.color-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.invp-form-cat-btn {
    border: .5px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font: inherit;
    font-weight: 800;
    padding: 8px 12px;
}
.invp-form-cat-btn.sel { background: rgba(10,132,255,.14); color: var(--accent); border-color: rgba(10,132,255,.45); }
.invp-form-error,
.farmaci-form-error {
    border-radius: 12px;
    background: rgba(255,59,48,.12);
    color: var(--danger);
    padding: 10px 12px;
    font-size: .84rem;
}

.apl-search-input,
.apl-textarea {
    width: 100%;
    box-sizing: border-box;
    border: .5px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    padding: 11px 12px;
}
.apl-search-btn {
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 900;
    padding: 0 14px;
}
.apl-detail-text,
.apl-detail-pre,
.apl-code,
.proc-step-text {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    line-height: 1.5;
}
.apl-detail-date,
.proc-hint { color: var(--text-secondary); font-size: .82rem; }
.proc-step {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: .5px solid var(--border-color);
}
.proc-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 900;
    flex-shrink: 0;
}

.pg-fab {
    position: fixed;
    right: 22px;
    bottom: calc(env(safe-area-inset-bottom,0px) + 78px);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 8px 24px rgba(10,132,255,.35);
}
.kanban-col-stato-ico,
.sc-ai-btn-icon,
.sc-upload-icon,
.sc-quiz-icon,
.sc-voti-icon,
.sc-card-icon,
.sc-card-icon-sm,
.sc-card-icon-doc,
.bc-alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--bg-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sc-card-icon-sm { width: 30px; height: 30px; border-radius: 10px; }
.prog-header-edit,
.verbale-azioni-tag {
    margin-left: auto;
}
.prog-desc-line,
.fo-note-preview,
.bc-card-body,
.bc-card-nota,
.dash-diff-sub,
.sc-empty-text,
.sc-fc-hint,
.sc-quiz-info,
.sc-quiz-meta {
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.4;
}
.vd-header,
.bc-alert-wrap,
.bc-alert-info,
.ric-item-badges,
.ric-item-right,
.ric730-right,
.sc-chart-row,
.sc-agenda-meta,
.sc-field-row,
.sc-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sel-prio { border-color: rgba(10,132,255,.5); }

.active-arg,
.active-in_corso,
.fo-argomento,
.bc-card-tipo,
.bc-card-scad,
.bc-card-peso,
.sc-agenda-tipo,
.sc-contenuto-tipo,
.sc-giudizio,
.sc-giudizio-xs,
.ric-importo {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 9px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: .72rem;
    font-weight: 900;
}
.anti-spacer,
.dash-list-mb,
.sc-card-mb10,
.sc-card-row-mb { margin-bottom: 10px; }
.sc-card-p0 { padding: 0; overflow: hidden; }

.sc-action-bar-pb,
.sc-section-pb { padding-bottom: 14px; }
.sc-agenda-add-wrap { padding: 0 20px 14px; }
.sc-agenda-add-btn {
    width: 100%;
    border: 1px dashed var(--border-color);
    border-radius: 15px;
    background: var(--card-bg);
    color: var(--accent);
    font: inherit;
    font-weight: 900;
    padding: 13px;
}
.sc-agenda-btn-ok { color: var(--success); }
.sc-agenda-btn-del,
.sc-doc-del-btn { color: var(--danger); }
.sc-agenda-date,
.sc-agenda-day,
.sc-agenda-month,
.sc-voti-data,
.sc-contenuto-date { color: var(--text-secondary); font-size: .76rem; font-weight: 800; }
.sc-agenda-item-done { opacity: .6; }
.sc-ai-textarea,
.sc-field textarea,
.sc-field input,
.sc-field select {
    width: 100%;
    box-sizing: border-box;
    border: .5px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    padding: 11px 12px;
}
.sc-field-textarea-sm { min-height: 74px; }
.sc-ai-pre,
.sc-rich-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
}
.sc-chart-bars,
.sc-chart-labels,
.sc-chart-legenda { display: flex; gap: 6px; align-items: flex-end; }
.sc-chart-bar-wrap {
    flex: 1;
    min-width: 20px;
    height: 90px;
    border-radius: 10px;
    background: var(--bg-secondary);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.sc-chart-bar {
    width: 100%;
    min-height: 4px;
    border-radius: 10px 10px 0 0;
    background: var(--accent);
}
.sc-chart-bar-val,
.sc-chart-row-label { font-size: .72rem; color: var(--text-secondary); }
.sc-detail {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 70;
    background: var(--phone-bg);
}
.sc-detail.active,
.sc-detail.open { display: block; }
.sc-detail .btn-nav.hidden-input { display: none !important; }
.sc-detail-body,
.sc-detail-scroll { height: calc(100% - 98px); overflow-y: auto; }
.sc-detail-scroll-pad,
.sc-contenuto-item-padded { padding: 14px 20px; }
.sc-section-title-flush { margin-top: 0; }
.sc-section-title-mt { margin-top: 18px; }
.sc-iframe-doc,
.sc-img-fullwidth { width: 100%; border: none; border-radius: 14px; }
.sc-media-thumb {
    aspect-ratio: 1;
    border-radius: 14px;
    background: var(--bg-secondary);
    overflow: hidden;
}
.sc-media-ocr-badge,
.sc-ocr-loading,
.sc-fc-a,
.sc-fc-q,
.sc-quiz-best,
.sc-quiz-domanda-num { color: var(--text-secondary); font-size: .78rem; font-weight: 800; }
.sc-upload-zone {
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    background: var(--card-bg);
    padding: 22px;
    text-align: center;
}
.sc-upload-zone-mt { margin-top: 12px; }
.sc-upload-text { color: var(--text-secondary); }
.sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .78rem;
    font-weight: 900;
    text-decoration: none;
}
.sc-pill-primary { background: rgba(10,132,255,.14); color: var(--accent); }
.sc-pill-secondary { background: var(--bg-secondary); color: var(--text-secondary); }
.sc-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent);
    animation: spin .9s linear infinite;
}
.sc-sheet-handle,
.ric-sheet-handle {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: var(--border-color);
    margin: 0 auto 14px;
}
.sc-sheet-title { font-weight: 900; margin-bottom: 12px; }

.ric-item-badges { justify-content: flex-end; }
.sezione-totale,
.ant-riepilogo-totale-label,
.dash-diff-pct { font-weight: 900; color: var(--text-secondary); }
.ant-thumb-rimborsato { opacity: .6; }
.bilancio-anticipi {
    margin-top: 10px;
    border-radius: 14px;
    background: var(--bg-secondary);
    padding: 12px;
}
.list-check-input { width: 18px; height: 18px; accent-color: var(--accent); }

/* =====================================================
   VACANZE / VIAGGI / CHECKLIST
   ===================================================== */
#vista-dettaglio { display: none; }
#vista-dettaglio.show,
#vista-lista.show { display: block; }
#vista-lista.nascosta { display: none; }

.det-tab-bar,
.cl-tab-bar {
    display: flex;
    gap: 6px;
    margin: 0 20px 14px;
    padding: 4px;
    border: .5px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-secondary);
    overflow-x: auto;
    scrollbar-width: none;
}
.det-tab-bar::-webkit-scrollbar,
.cl-tab-bar::-webkit-scrollbar { display: none; }
.det-tab-bar-list { margin-top: 2px; }
.det-tab-btn,
.list-tab-btn,
.cl-tab-btn {
    flex: 1;
    min-width: max-content;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    padding: 9px 11px;
    cursor: pointer;
}
.det-tab-btn.active,
.list-tab-btn.active,
.cl-tab-btn.active {
    background: var(--card-bg);
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.det-tab,
.list-tab,
.cl-tab { display: none; }
.det-tab.active,
.list-tab.show,
.cl-tab.show { display: block; }

.v-card {
    margin: 0 20px 12px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0,0,0,.07);
}
.v-card-body { padding: 15px; }
.v-card-top,
.det-header-top,
.v-footer,
.giorno-hdr,
.tappa-hdr,
.att-row,
.prev-top,
.p-card-hdr,
.p-card-ftr,
.ck-prog-header,
.cp-header,
.cp-pct-row,
.cl-header,
.cl-progress-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.v-card-top,
.det-header-top,
.giorno-hdr,
.prev-top,
.p-card-hdr,
.ck-prog-header,
.cp-header,
.cl-header,
.cl-progress-top {
    justify-content: space-between;
}
.v-titolo,
.det-titolo,
.tappa-nome,
.att-tit,
.prev-nome,
.p-tit,
.ck-title,
.cp-header-title,
.cl-title {
    font-weight: 900;
    color: var(--text-color);
}
.v-titolo { font-size: 1.02rem; }
.det-titolo { font-size: 1.35rem; line-height: 1.1; }
.v-dest,
.v-date,
.det-meta,
.tappa-desc-small,
.att-sub,
.prev-desc,
.p-sub,
.p-card-ftr,
.v-empty-sm,
.v-empty-xs,
.cp-empty,
.cl-progress-label,
.cl-progress-count {
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.4;
}
.p-card-ftr-ref,
.p-card-ftr-note,
.v-totale-lbl {
    color: var(--text-secondary);
    font-size: .82rem;
}
.v-card-more-btn,
.det-btn,
.tappa-act-btn,
.giorno-add,
.add-att-btn,
.add-sec-btn,
.prev-scegli-btn,
.cp-close-btn,
.cp-del-btn,
.cl-reset-btn {
    border: .5px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--accent);
    font: inherit;
    font-size: .78rem;
    font-weight: 900;
    padding: 7px 11px;
    cursor: pointer;
}
.v-card-more-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--text-secondary);
}
.tappa-act-btn.danger,
.cp-del-btn { color: var(--danger); }
.v-cat-label,
.v-cnt,
.stato-pill,
.prev-scelto-badge,
.p-badge,
.ck-prog-done-lbl,
.ck-prog-pct-lbl,
.cp-pct-lbl,
.ck-pct {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: .72rem;
    font-weight: 900;
}
.p-badge.conf,
.prev-scelto-badge,
.v-totale-val-ok { color: var(--success); background: rgba(52,199,89,.12); }
.p-badge.prev { color: var(--warning); background: rgba(255,149,0,.12); }
.v-footer {
    flex-wrap: wrap;
    padding: 11px 15px;
    border-top: .5px solid var(--border-color);
    background: var(--bg-secondary);
}
.v-empty-state {
    margin: 18px 20px;
    padding: 30px 20px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    color: var(--text-secondary);
    text-align: center;
}

.det-header {
    margin: 0 20px 14px;
    padding: 16px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
}
.det-tit-wrap { flex: 1; min-width: 0; }
.det-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ricordi-card {
    margin: 0 20px 14px;
    padding: 14px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
}
.ricordi-link {
    display: block;
    width: fit-content;
    margin: 8px 0;
    color: var(--accent);
    text-decoration: none;
}
.ricordi-help,
.ricordi-note span {
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.4;
}
.ricordi-note {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 0;
    border-bottom: .5px solid var(--border-color);
}
.ricordi-note:last-child { border-bottom: 0; }
.ricordi-card select[multiple] { min-height: 120px; }
.det-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.giorno-block,
.prev-tipo-hdr,
.p-tipo-hdr,
.c-cat-hdr {
    margin: 0 20px 10px;
}
.giorno-hdr,
.prev-tipo-hdr,
.p-tipo-hdr,
.c-cat-hdr {
    color: var(--text-secondary);
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tappa-block,
.prev-card,
.p-card,
.c-item {
    border: .5px solid var(--border-color);
    border-radius: 16px;
    background: var(--card-bg);
    margin-bottom: 10px;
    overflow: hidden;
}
.tappa-hdr,
.att-row,
.prev-top,
.p-card-hdr,
.c-item {
    padding: 12px 14px;
}
.tappa-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}
.tappa-flex-body,
.att-info,
.prev-body,
.p-body {
    flex: 1;
    min-width: 0;
}
.tappa-att-count,
.tappa-chev,
.att-chev { color: var(--text-secondary); font-size: .78rem; }
.tappa-acts,
.att-det-acts,
.prev-acts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 14px 12px;
}
.att-list {
    border-top: .5px solid var(--border-color);
    background: rgba(255,255,255,.02);
}
.att-list-hidden,
.att-det { display: none; }
.att-list:not(.att-list-hidden),
.att-det.show { display: block; }
.att-item { border-bottom: .5px solid var(--border-color); }
.att-item:last-child { border-bottom: 0; }
.att-ora {
    min-width: 42px;
    color: var(--accent);
    font-weight: 900;
    font-size: .82rem;
}
.att-det-ico,
.p-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--bg-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.att-det {
    padding: 0 14px 12px 66px;
    color: var(--text-secondary);
    font-size: .84rem;
}
.att-det.open { display: block; }
.att-det-row { display: flex; gap: 8px; margin-top: 7px; }
.att-det-txt a,
.prev-url-link,
.maps-route-btn { color: var(--accent); text-decoration: none; }
.maps-route-btn {
    display: block;
    margin: 10px 14px;
    padding: 10px 12px;
    border-radius: 13px;
    background: rgba(10,132,255,.12);
    font-weight: 800;
    text-align: center;
}
.add-sec-btn,
.add-att-btn {
    display: block;
    width: calc(100% - 40px);
    margin: 12px 20px 18px;
    border-radius: 15px;
    padding: 13px;
}

.prev-prezzo,
.p-imp,
.v-totale-val,
.v-totale-val-ok {
    font-weight: 900;
    color: var(--accent);
}
.prev-card.scelto { border-color: rgba(52,199,89,.45); }
.prev-url-row { margin-top: 8px; }
.prev-totale,
.p-totale {
    margin: 12px 20px 18px;
    padding: 14px;
    border: .5px solid var(--border-color);
    border-radius: 16px;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.p-right,
.pren-right { margin-left: auto; text-align: right; }

.c-prog,
.ck-bar,
.cl-progress-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-secondary);
    overflow: hidden;
}
.ck-prog-bar-wrap { margin: 8px 0 12px; }
.c-prog-fill,
.ck-bar-fill,
.cl-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent);
    transition: width .2s ease;
}
.c-box,
.ck-box,
.cl-check,
.check-sq {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: .5px solid var(--border-color);
    background: var(--bg-secondary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.c-box.done,
.ck-item.done .ck-box,
.cl-item.checked .cl-check,
.check-sq.done {
    border-color: var(--success);
    background: var(--success);
}
.c-txt.done,
.ck-item.done .ck-lbl,
.cl-item.checked .cl-item-label,
.check-txt.done {
    color: var(--text-secondary);
    text-decoration: line-through;
}
.ck-cosa-portare,
.cl-progress-wrap {
    margin: 0 20px 14px;
    padding: 14px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
}
.ck-header { margin-bottom: 10px; }
.ck-item,
.cl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: .5px solid var(--border-color);
    cursor: pointer;
}
.ck-item:last-child,
.cl-item:last-child { border-bottom: 0; }
.ck-item-padded { padding-left: 2px; padding-right: 2px; }
.cp-aggiunte-lbl,
.cl-section-title {
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 14px 0 6px;
}
.cp-add-row,
.cp-add-bar {
    display: flex;
    gap: 8px;
    padding-top: 12px;
}
.cp-add-input,
.cp-add-input-el {
    flex: 1;
    min-width: 0;
    border: .5px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    padding: 11px 12px;
}
.cp-add-btn-el {
    width: 42px;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 900;
}

.cp-overlay,
.fp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(12px);
    align-items: flex-end;
    justify-content: center;
}
.cp-overlay.active,
.fp-overlay.active { display: flex; }
.cp-sheet,
.fp-sheet {
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    background: var(--phone-bg);
    border: .5px solid var(--border-color);
    padding: 18px 20px 28px;
    box-sizing: border-box;
}
.fp-sheet-confirm { max-width: 380px; border-radius: 20px; margin-bottom: 18px; }
.fp-title {
    margin-bottom: 14px;
    font-size: 1.1rem;
    font-weight: 900;
}
.fp-field { margin-bottom: 13px; }
.fp-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}
.fp-field input,
.fp-field select,
.fp-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: .5px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    padding: 11px 12px;
    outline: none;
}
.fp-field textarea { min-height: 86px; resize: vertical; }
.fp-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.fp-field-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.fp-field-check input,
input.fp-field-check {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}
.fp-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}
.fp-btns-mt { margin-top: 18px; }
.fp-cancel,
.fp-save {
    border: none;
    border-radius: 14px;
    font: inherit;
    font-weight: 900;
    padding: 13px;
    cursor: pointer;
}
.fp-cancel { background: var(--bg-secondary); color: var(--text-color); border: .5px solid var(--border-color); }
.fp-save { background: var(--accent); color: #fff; }
.fp-save-danger { background: var(--danger); }
.cp-cats-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
}
.cp-cats-wrap { margin-bottom: 4px; }
.cp-cats-row::-webkit-scrollbar { display: none; }
.cp-cat-btn {
    border: .5px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    font-weight: 800;
    padding: 8px 12px;
    white-space: nowrap;
}
.cp-content { padding: 6px 0 0; }
.cp-list-pad { padding-top: 8px; }
.cp-list-empty { color: var(--text-secondary); text-align: center; padding: 22px; }

.cl-header {
    padding: 18px 20px 12px;
}
.cl-title { font-size: 1.6rem; }
.cl-section {
    margin: 0 20px 14px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    padding: 14px;
}
.cl-list { display: flex; flex-direction: column; }
.prog-bar-fill { display: block; }
.cl-section .cl-section {
    margin: 12px 0 0;
    background: var(--bg-secondary);
}
.cl-all-done {
    display: none;
    margin: 0 20px 18px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(52,199,89,.12);
    color: var(--success);
    text-align: center;
    font-weight: 900;
}
.cl-all-done.show { display: block; }
.cl-all-done-icon { font-size: 2rem; margin-bottom: 4px; }
.cl-all-done-text { font-weight: 900; }
.cl-progress-done { color: var(--success); }

/* Stampa/PDF viaggio */
.toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    background: var(--phone-bg);
    border-bottom: .5px solid var(--border-color);
}
.toolbar-title { font-weight: 900; }
.tbtn {
    border: none;
    border-radius: 999px;
    padding: 8px 13px;
    font: inherit;
    font-weight: 900;
}
.tbtn.primary { background: var(--accent); color: #fff; }
.tbtn.secondary { background: var(--bg-secondary); color: var(--text-color); }
.page {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 20px 30px;
}
.v-header,
.section,
.note-box,
.pren-totale {
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    padding: 16px;
    margin-bottom: 14px;
}
.v-header-top,
.v-meta-grid,
.tappa-header,
.pren-row,
.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.att-content,
.pren-main { flex: 1; min-width: 0; }
.tappa-desc,
.pren-sub,
.att-luogo,
.att-note {
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.4;
}
.pren-block { margin-top: 8px; }
.pren-imp,
.pren-totale-val { font-weight: 900; color: var(--accent); }
.pren-totale-label { color: var(--text-secondary); font-weight: 900; }
.v-stato {
    display: inline-flex;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: .78rem;
    font-weight: 900;
}
.v-header-top { justify-content: space-between; }
.v-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 14px;
}
.meta-item {
    border-radius: 14px;
    background: var(--bg-secondary);
    padding: 12px;
}
.meta-label,
.section-title,
.check-cat-label,
.pren-tipo-label,
.giorno-label {
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
}
.meta-val,
.pren-tit,
.att-tit { font-weight: 900; }
.section-title { margin-bottom: 10px; }
.giorno-label { margin: 16px 0 8px; }
.percorso-btn {
    display: inline-flex;
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(10,132,255,.12);
    color: var(--accent);
    text-decoration: none;
    font-weight: 900;
}
.att-link { color: var(--accent); }
.pren-row,
.check-row {
    border-bottom: .5px solid var(--border-color);
    padding: 10px 0;
}
.pren-row:last-child,
.check-row:last-child { border-bottom: 0; }
.pren-main { flex: 1; }
.pren-sub,
.att-luogo,
.att-note { color: var(--text-secondary); font-size: .84rem; }
.pren-badge { border-radius: 999px; padding: 4px 9px; font-size: .72rem; font-weight: 900; }
.pren-badge.conf { color: var(--success); background: rgba(52,199,89,.12); }
.pren-badge.prev { color: var(--warning); background: rgba(255,149,0,.12); }
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 16px;
}
.page-footer {
    text-align: center;
    color: var(--text-secondary);
    font-size: .78rem;
    margin-top: 22px;
}

@media (max-width: 520px) {
    .fp-row,
    .v-meta-grid {
        grid-template-columns: 1fr;
    }
    .fp-btns {
        grid-template-columns: 1fr;
    }
    .det-actions {
        justify-content: flex-start;
    }
}

@media print {
    .toolbar { display: none; }
    .page { max-width: none; margin: 0; padding: 0; }
    .v-header,
    .section,
    .note-box,
    .pren-totale {
        box-shadow: none;
        break-inside: avoid;
    }
}
.invp-confirm-content,
.farmaci-confirm-content { margin-top: 8px; }
.perm-orari-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bc-alert-data,
.lbl { color: var(--text-secondary); font-size: .78rem; font-weight: 800; }
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-ai-quiz-wrap,
.sc-ai-result,
.sc-card-body,
.sc-docs-list-wrap,
.sc-editor-body,
.sc-fc-card,
.ric-urgenti-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sc-card-urgente {
    border-color: rgba(255,59,48,.35);
    background: linear-gradient(180deg, rgba(255,59,48,.07), var(--card-bg));
}
.sc-editor-sep {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}
.sc-emoji { display: inline-block; margin-right: 4px; }
.sc-materia-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-secondary);
    overflow: hidden;
}
.sc-materia-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-materia-nome,
.sc-voti-mat { font-weight: 900; }
.sc-materia-count { color: var(--text-secondary); font-size: .78rem; font-weight: 800; }
.sc-overlay-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.58);
}
.sc-quiz-domanda-testo { line-height: 1.45; overflow-wrap: anywhere; }
.dash-cat-canvas,
.dash-conf-canvas {
    width: 100%;
    max-height: 260px;
}
.hc-list-item-center { align-items: center; }

@media (min-width: 768px) {
    .invp-cat-bar,
    .stato-chips,
    .fo-tabs,
    .fo-ctx-bar,
    .farmaci-tabs,
    .ric-anno-bar,
    .sc-tabs {
        padding-left: 28px;
        padding-right: 28px;
    }
    .invp-empty,
    .pg-empty,
    .bc-empty,
    .farmaci-empty,
    .empty-ricorrenti,
    .ant-empty,
    .prog-card,
    .attivita-card,
    .verbale-card,
    .bc-hero,
    .bc-filter,
    .bc-list,
    .farmaco-item,
    .ric-item,
    .ant-list-item,
    .ant-riepilogo,
    .dash-cat-wrap,
    .dash-chart-col,
    .dash-diff-card,
    .ric-summary,
    .ric-upload-zone,
    .sc-section,
    .sc-chart-card,
    .sc-ai-box,
    .sc-card {
        margin-left: 28px;
        margin-right: 28px;
    }
}

/* =====================================================
   SEZIONI PERSONALI: MINDFULNESS, ALLENAMENTO, APPUNTI
   ===================================================== */
.mind-tab-bar,
.all-tab-bar {
    margin-top: 2px;
}

.filtri-bar,
.fit-periodo {
    display: flex;
    gap: 8px;
    padding: 0 20px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.filtri-bar::-webkit-scrollbar,
.fit-periodo::-webkit-scrollbar { display: none; }

.filtro-pill,
.fit-periodo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    border: .5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.filtro-pill.active,
.fit-periodo-btn.sel {
    border-color: rgba(10,132,255,.45);
    background: rgba(10,132,255,.14);
    color: var(--accent);
}

.mind-empty,
.fit-empty {
    margin: 18px 20px;
    padding: 30px 20px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.45;
}
.mind-empty-icon,
.fit-empty-icon {
    font-size: 2.35rem;
    margin-bottom: 8px;
}
.fit-hint { margin-top: 5px; font-size: .8rem; color: var(--text-secondary); }

.citazione-card,
.pensiero-card,
.fit-card,
.appunto-card {
    margin: 0 20px 12px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.citazione-card,
.pensiero-card,
.appunto-card {
    padding: 15px;
}
.citazione-card.del-giorno {
    border-color: rgba(255,204,0,.45);
    background: linear-gradient(180deg, rgba(255,204,0,.08), var(--card-bg));
}
.mind-history-card { margin: 0 20px 10px; }
.mind-history-card.preferita { border-color: rgba(255,204,0,.3); }
.badge-del-giorno {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,204,0,.16);
    color: #ffcc00;
    font-size: .72rem;
    font-weight: 800;
}
.citazione-testo {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text-color);
    overflow-wrap: anywhere;
}
.citazione-autore {
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.35;
}
.citazione-fonte { color: var(--text-tertiary, var(--text-secondary)); }
.citazione-tag,
.appunto-tag,
.appunto-tipo {
    display: inline-flex;
    align-items: center;
    margin: 10px 6px 0 0;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: .72rem;
    font-weight: 700;
}
.citazione-meta,
.pensiero-footer,
.appunto-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.citazione-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cit-btn {
    width: 32px;
    height: 32px;
    border: .5px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-color);
    cursor: pointer;
}
.cit-btn.active {
    border-color: rgba(10,132,255,.45);
    background: rgba(10,132,255,.14);
    color: var(--accent);
}
.pensiero-header,
.appunto-header {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.pensiero-data,
.appunto-data { color: var(--text-secondary); font-size: .78rem; font-weight: 700; }
.pensiero-umore { margin-left: auto; font-size: 1.25rem; }
.pensiero-testo,
.appunto-preview {
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mind-overlay,
.fit-overlay,
.mind-confirm {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(12px);
    align-items: flex-end;
    justify-content: center;
}
.mind-overlay.active,
.fit-overlay.active,
.mind-confirm.active { display: flex; }
.mind-sheet,
.fit-sheet {
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    background: var(--phone-bg);
    padding: 18px 20px 28px;
    box-sizing: border-box;
}
.mind-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.mind-sheet-title,
.fit-sheet-title {
    margin: 0 0 14px;
    font-size: 1.1rem;
    font-weight: 800;
}
.mind-close-btn {
    border: none;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.mind-section,
.fit-field { margin-bottom: 14px; }
.mind-label,
.fit-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
}
.mind-input,
.mind-textarea,
.fit-input,
.ap-textarea {
    width: 100%;
    border: .5px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    padding: 12px;
    box-sizing: border-box;
    outline: none;
}
.mind-textarea,
.ap-textarea-lg { min-height: 140px; resize: vertical; }
.ap-textarea-md { min-height: 100px; resize: vertical; }
.mind-input:focus,
.mind-textarea:focus,
.fit-input:focus,
.ap-textarea:focus {
    border-color: rgba(10,132,255,.65);
}
.mind-btn-save,
.fit-btn-save,
.fit-add-pill {
    width: 100%;
    border: none;
    border-radius: 15px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 800;
    padding: 14px 16px;
    cursor: pointer;
}
.umore-row,
.fit-tipo-grid,
.tipo-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 8px;
}
.umore-opt,
.fit-tipo-btn,
.tipo-btn {
    min-height: 50px;
    border: .5px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text-color);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.umore-opt.sel,
.fit-tipo-btn.sel,
.tipo-btn.sel {
    border-color: rgba(10,132,255,.55);
    background: rgba(10,132,255,.14);
    color: var(--accent);
}
.mind-confirm { align-items: center; padding: 20px; }
.mind-confirm-box {
    width: min(100%, 340px);
    border-radius: 18px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    padding: 18px;
    text-align: center;
}
.mind-confirm-title { font-size: 1rem; font-weight: 800; margin-bottom: 6px; }
.mind-confirm-msg { color: var(--text-secondary); font-size: .9rem; line-height: 1.4; }
.mind-confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.mind-confirm-btn {
    border: none;
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-color);
    padding: 11px;
    font: inherit;
    font-weight: 700;
}
.mind-confirm-btn.danger { background: rgba(255,59,48,.14); color: var(--danger); }

.fit-wrap { padding-bottom: 22px; }
.fit-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 20px 14px;
}
.fit-stat {
    border: .5px solid var(--border-color);
    border-radius: 16px;
    background: var(--card-bg);
    padding: 14px;
}
.fit-stat-val { font-size: 1.25rem; font-weight: 900; }
.fit-stat-label { margin-top: 4px; font-size: .78rem; font-weight: 800; color: var(--text-secondary); }
.fit-stat-sub { margin-top: 2px; font-size: .72rem; color: var(--text-secondary); }
.fit-section-title {
    padding: 8px 20px 7px;
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
}
.fit-card { padding: 12px; }
.fit-card-inner { padding: 14px; }
.fit-card-pad { padding: 14px; }
.fit-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: .5px solid transparent;
    border-radius: 999px;
    margin: 0 6px 6px 0;
}
.fit-type-label {
    font-size: .82rem;
    font-weight: 700;
}
.fit-item {
    position: relative;
    overflow: hidden;
    border-bottom: .5px solid var(--border-color);
}
.fit-item:last-child { border-bottom: none; }
.fit-item-inner {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 4px;
}
.fit-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fit-info { min-width: 0; flex: 1; }
.fit-titolo { font-weight: 800; }
.fit-meta { margin-top: 2px; color: var(--text-secondary); font-size: .8rem; overflow-wrap: anywhere; }
.fit-del {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(255,59,48,.14);
    color: var(--danger);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    cursor: pointer;
}
.fit-chart-wrap,
.fit-import-zone {
    margin: 0 20px 14px;
    border: .5px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    padding: 14px;
}
.fit-chart-title,
.fit-import-title,
.fit-card-title { font-weight: 900; margin-bottom: 8px; }
.fit-passi-bar-wrap {
    height: 7px;
    background: var(--bg-secondary);
    border-radius: 999px;
    overflow: hidden;
    flex: 1;
}
.fit-passi-num {
    font-size: .92rem;
    font-weight: 800;
}
.fit-passi-bar { height: 100%; border-radius: inherit; }
.fit-import-zone {
    text-align: center;
    cursor: pointer;
    border-style: dashed;
}
.fit-import-sub,
.fit-import-result { color: var(--text-secondary); font-size: .84rem; line-height: 1.4; }
.fit-import-result.ok { color: var(--success); }
.fit-import-result.error { color: var(--danger); }
.fit-section-hdr {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.fit-sheet-handle {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: var(--border-color);
    margin: 0 auto 14px;
}
.fit-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.ap-modal-body,
.ap-detail-body {
    overflow-y: auto;
    padding: 14px 20px 24px;
}
.ap-detail-header-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ap-search-form {
    display: flex;
    gap: 8px;
    padding: 0 20px 12px;
}
.ap-search-input {
    flex: 1;
    min-width: 0;
    border: .5px solid var(--border-color);
    border-radius: 13px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    padding: 11px 13px;
}
.ap-search-btn {
    border: none;
    border-radius: 13px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 800;
    padding: 0 15px;
}
.chips-scroll-pb { padding-bottom: 14px; }
.fr-spaced {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.fr-switch-label { font-weight: 700; }
.fr-switch { flex-shrink: 0; }
.appunto-card.fissato {
    border-color: rgba(255,204,0,.35);
    background: linear-gradient(180deg, rgba(255,204,0,.07), var(--card-bg));
}
.appunto-icon,
.appunto-pin { flex-shrink: 0; }
.appunto-titolo {
    min-width: 0;
    flex: 1;
    font-size: .98rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ap-ai-btn {
    width: 32px;
    height: 32px;
    border: .5px solid var(--border-color);
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--accent);
    cursor: pointer;
}
.ap-detail-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.ap-detail-tag,
.ap-detail-tag-cat,
.ap-detail-tag-ok {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: .76rem;
    font-weight: 800;
}
.ap-detail-url {
    display: block;
    margin-bottom: 14px;
    color: var(--accent);
    overflow-wrap: anywhere;
}
.ap-detail-section-label {
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
}
.ap-detail-section-label-mb { margin-top: 16px; }
.ap-detail-text {
    margin-top: 7px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

@media (max-width: 430px) {
    .fit-stats-grid,
    .fit-row-2 {
        grid-template-columns: 1fr;
    }
    .ap-search-form {
        flex-direction: column;
    }
    .tab-btn {
        font-size: .72rem;
        min-height: 46px;
    }
}

@media (min-width: 768px) {
    .filtri-bar,
    .fit-periodo,
    .fit-stats-grid,
    .ap-search-form {
        padding-left: 28px;
        padding-right: 28px;
    }
    .citazione-card,
    .pensiero-card,
    .fit-card,
    .fit-chart-wrap,
    .fit-import-zone,
    .appunto-card,
    .mind-empty,
    .fit-empty {
        margin-left: 28px;
        margin-right: 28px;
    }
}



/* =====================================================
   FORM SPESE - migrato da includes/spese_form_styles.php
   ===================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body.exp-iframe-body,
body.edit-body {
    background: var(--phone-bg);
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    -webkit-font-smoothing: antialiased;
    padding: 0 0 40px;
    overscroll-behavior: none;
}

/* ── Sezioni ─────────────────────────────────────────────────── */
.form-section { margin: 20px 20px 0; }

.form-section-label {
    font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 8px; padding-left: 4px;
}

.form-group-card {
    background: var(--card-bg); border-radius: 14px;
    border: 0.5px solid var(--border-color);
}
/* Separatori interni senza overflow hidden globale */
.form-row:first-child { border-radius: 14px 14px 0 0; }
.form-row:last-child  { border-radius: 0 0 14px 14px; border-bottom: none; }

/* ── Righe ───────────────────────────────────────────────────── */
.form-row {
    display: flex; align-items: center; padding: 0 16px;
    min-height: 52px; border-bottom: 0.5px solid var(--border-color); gap: 12px;
}
.form-row:last-child { border-bottom: none; }

.form-row label {
    font-size: 0.97rem; font-weight: 500; flex-shrink: 0; min-width: 100px;
}
.form-row input, .form-row select {
    flex: 1; background: transparent; border: none; outline: none;
    font-size: 0.97rem; color: var(--text-color);
    font-family: inherit; text-align: right; padding: 14px 0;
}
.form-row input::placeholder { color: var(--text-secondary); }
.form-row select option { background: var(--card-bg); }

/* ── Importo ─────────────────────────────────────────────────── */
.importo-wrap { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.euro-sym { font-size: 0.97rem; color: var(--text-secondary); }
.importo-wrap input { min-width: 0; width: 100px; text-align: right; }

/* ── Tipo uscita/entrata ─────────────────────────────────────── */
.tipo-row { display: flex; gap: 8px; padding: 10px 0; flex: 1; }
.tipo-btn {
    flex: 1; padding: 8px; border-radius: 10px; font-family: inherit;
    font-size: 0.88rem; font-weight: 700; cursor: pointer;
    border: 1.5px solid var(--border-color); background: var(--bg-secondary);
    color: var(--text-secondary); transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.tipo-btn.active-uscita  { border-color: var(--danger);  background: rgba(255,59,48,0.15);  color: var(--danger); }
.tipo-btn.active-entrata { border-color: var(--success); background: rgba(52,199,89,0.15);  color: var(--success); }

/* ── Data ────────────────────────────────────────────────────── */
.data-wrap {
    flex: 1; display: flex;
    align-items: center; justify-content: flex-end;
}
.data-display { display: none; } /* non usato con input nativo */
.data-picker-hidden { display: none; } /* non usato */
.data-cal-icon { display: none; } /* non usato */

/* Input date nativo stilizzato */
input[type="date"].data-native {
    flex: 1; background: transparent; border: none; outline: none;
    font-size: 0.97rem; color: var(--text-color);
    font-family: inherit; text-align: right;
    padding: 14px 0; cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
}
input[type="date"].data-native::-webkit-calendar-picker-indicator {
    opacity: 0.5; cursor: pointer;
    filter: var(--icon-filter, none);
}

/* ── Griglia categorie ───────────────────────────────────────── */
.cat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 10px; padding: 14px; background: var(--card-bg);
    border-radius: 14px; border: 0.5px solid var(--border-color);
}
.cat-btn {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 10px 4px; border-radius: 12px; background: var(--bg-secondary);
    border: 1.5px solid transparent; cursor: pointer; transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.cat-btn:active { transform: scale(0.93); }
.cat-btn.selected { border-color: var(--accent); background: rgba(10,132,255,0.12); }
.cat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.cat-name { font-size: 0.68rem; font-weight: 500; text-align: center; color: var(--text-secondary); line-height: 1.2; word-break: break-word; }
.cat-btn.selected .cat-name { color: var(--accent); }

/* ── Toggle iOS ──────────────────────────────────────────────── */
.toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: var(--card-bg);
    border-radius: 14px; border: 0.5px solid var(--border-color);
}
.toggle-label { font-size: 0.97rem; font-weight: 500; }
.toggle-sublabel { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }
.ios-toggle { position: relative; width: 51px; height: 31px; flex-shrink: 0; }
.ios-toggle input { display: none; }
.ios-track { position: absolute; inset: 0; background: var(--switch-bg); border-radius: 34px; transition: background 0.25s; }
.ios-knob { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; background: white; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.ios-toggle input:checked + .ios-track { background: var(--success); }
.ios-toggle input:checked ~ .ios-knob  { transform: translateX(20px); }
.ios-toggle-compact { width: 44px; height: 26px; }
.ios-toggle-compact .ios-knob { width: 22px; height: 22px; }
.ios-toggle-compact input:checked ~ .ios-knob { transform: translateX(18px); }
#frequenzaGroup { display: none; margin-top: 10px; }

/* ── Allegato (foto + PDF) ───────────────────────────────────── */
.allegato-area { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }

/* Pulsanti scelta tipo */
.allegato-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-allegato {
    padding: 12px 8px; background: var(--bg-secondary);
    border: 1.5px dashed var(--border-color); border-radius: 12px;
    color: var(--text-secondary); font-size: 0.88rem; font-weight: 600;
    cursor: pointer; font-family: inherit; text-align: center;
    transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.btn-allegato:active { opacity: 0.7; transform: scale(0.97); }

/* Anteprima immagine */
.allegato-preview-img { display: none; width: 100%; text-align: center; }
.allegato-preview-img img { max-width: 100%; max-height: 220px; border-radius: 12px; object-fit: contain; }

/* Anteprima PDF */
.allegato-preview-pdf {
    display: none; align-items: center; gap: 12px;
    background: var(--bg-secondary); border-radius: 12px; padding: 12px 14px;
    border: 0.5px solid var(--border-color);
}
.allegato-pdf-icon { font-size: 2rem; flex-shrink: 0; }
.allegato-pdf-info { flex: 1; min-width: 0; }
.allegato-pdf-name { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.allegato-pdf-label { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }

/* Anteprima allegato esistente (modifica) */
.allegato-esistente {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--bg-secondary);
    border-radius: 12px; border: 0.5px solid var(--border-color);
}
.allegato-existing-thumb { max-height: 60px; border-radius: 8px; object-fit: contain; }
.allegato-esistente .btn-rimuovi-allegato,
.allegato-preview-pdf .btn-rimuovi-allegato { margin: 0; }
.allegato-esistente-label { font-size: 0.82rem; color: var(--text-secondary); flex: 1; }
.allegato-esistente a { font-size: 0.82rem; font-weight: 700; color: var(--accent); text-decoration: none; }

/* Pulsante rimuovi */
.btn-rimuovi-allegato {
    display: block; margin: 6px auto 0;
    background: rgba(255,59,48,0.1); color: var(--danger);
    border: none; border-radius: 8px; padding: 5px 14px;
    font-size: 0.8rem; font-weight: 700; cursor: pointer; font-family: inherit;
}

/* ── Bottone salva ───────────────────────────────────────────── */
.btn-salva {
    display: block; width: calc(100% - 40px); margin: 24px 20px 0;
    padding: 16px; background: var(--accent); color: white; border: none;
    border-radius: 14px; font-size: 1.05rem; font-weight: 700;
    cursor: pointer; font-family: inherit; letter-spacing: -0.2px;
    transition: opacity 0.15s, transform 0.1s;
}
.btn-salva:active { opacity: 0.8; transform: scale(0.98); }






/* =====================================================
   VOICE OVERLAY - migrato da includes/footer.php
   ===================================================== */
.voice-overlay    { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:800; backdrop-filter:blur(8px); align-items:flex-end; justify-content:center; }
.voice-overlay.active { display:flex; }
.voice-panel      { background:var(--card-bg); border-radius:24px 24px 0 0; width:100%; max-width:500px; padding:12px 24px 44px; text-align:center; }
.voice-panel-handle { width:36px; height:4px; border-radius:2px; background:var(--border-color); margin:0 auto 20px; }

.voice-pulse-wrap { position:relative; width:80px; height:80px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; color:var(--accent); }
.voice-pulse      { position:absolute; inset:0; border-radius:50%; background:rgba(10,132,255,.15); animation:voice-pulse-anim 1.4s ease-in-out infinite; }
@keyframes voice-pulse-anim { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.25);opacity:.2} }

.voice-status-text { font-size:1rem; font-weight:700; margin-bottom:10px; }
.voice-transcript  { min-height:32px; font-size:.9rem; color:var(--text-secondary); font-style:italic; margin-bottom:20px; }
.voice-stop-btn    { background:none; border:1.5px solid var(--border-color); border-radius:20px; padding:8px 24px; font-family:inherit; font-size:.88rem; color:var(--text-secondary); cursor:pointer; }

.voice-result-icon  { font-size:2.4rem; margin-bottom:10px; }
.voice-result-title { font-size:1.05rem; font-weight:800; margin-bottom:6px; }
.voice-result-desc  { font-size:.88rem; color:var(--text-secondary); margin-bottom:20px; line-height:1.5; }
.voice-result-actions { display:flex; flex-direction:column; gap:10px; }
.voice-btn-confirm  { width:100%; padding:15px; background:var(--accent); color:#fff; border:none; border-radius:14px; font-family:inherit; font-size:1rem; font-weight:700; cursor:pointer; }
.voice-btn-cancel   { width:100%; padding:12px; background:none; border:none; font-family:inherit; font-size:.9rem; color:var(--text-secondary); cursor:pointer; }

.voice-suggerimenti  { text-align:left; background:var(--bg-secondary); border-radius:12px; padding:12px 14px; margin-bottom:18px; }
.voice-sug-title     { font-size:.72rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.voice-sug-item      { font-size:.82rem; color:var(--text-color); padding:4px 0; border-bottom:.5px solid var(--border-color); }
.voice-sug-item:last-child { border-bottom:none; }

/* =====================================================
   ORARI LAVORO - migrato da orari_lavoro.php
   ===================================================== */
.week-grid  { display:grid; gap:8px; padding:0 20px 14px; }
.week-scroll-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 0 14px; }
.week-scroll-wrap::-webkit-scrollbar { display:none; }
.week-scroll-inner { display:grid; gap:8px; padding:0 20px; }
.day-card   { background:var(--card-bg); border:.5px solid var(--border-color); border-radius:12px; padding:8px 4px; text-align:center; cursor:pointer; min-height:80px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; padding-top:8px; }
.day-card:active { background:var(--bg-secondary); }
.day-card.oggi     { border-color:var(--accent); background:rgba(10,132,255,.06); }
.day-card.positivo { border-color:rgba(52,199,89,.5); }
.day-card.negativo { border-color:rgba(255,59,48,.4); }
.day-card.assenza  { background:var(--bg-secondary); }
.day-card.festivita { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); opacity:.6; cursor:default; }
.day-card.festivita .day-num { color:var(--text-secondary); }
.day-nome  { font-size:.6rem; color:var(--text-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.day-num   { font-size:1.1rem; font-weight:800; line-height:1; margin-bottom:2px; }
.day-ore   { font-size:.82rem; font-weight:800; white-space:nowrap; }
.day-delta { font-size:.68rem; font-weight:700; white-space:nowrap; }
.day-badge { font-size:.58rem; font-weight:700; padding:2px 5px; border-radius:4px; margin-top:2px; line-height:1.4; white-space:nowrap; }
.saldo-card { background:var(--card-bg); border:.5px solid var(--border-color); border-radius:16px; padding:14px 18px; margin:0 20px 12px; }
.saldo-row  { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:.5px solid var(--border-color); }
.saldo-row:last-child { border-bottom:none; }
.saldo-val  { font-size:1.05rem; font-weight:800; }
.alert-box  { background:rgba(255,149,0,.1); border:.5px solid rgba(255,149,0,.4); border-radius:14px; padding:12px 16px; margin:0 20px 12px; }
.mese-nav   { display:flex; align-items:center; justify-content:space-between; padding:8px 20px 10px; }
.mese-nav a { color:var(--accent); font-size:1.4rem; text-decoration:none; padding:4px 10px; }
.orari-tab-bar { display:flex; background:var(--bg-secondary); border-radius:14px; padding:4px; gap:3px; border:.5px solid var(--border-color); }
.orari-tab  { flex:1; padding:9px 4px; border:none; background:transparent; border-radius:11px; font-family:inherit; font-size:.75rem; font-weight:700; color:var(--text-secondary); cursor:pointer; transition:all .2s; display:flex; flex-direction:column; align-items:center; gap:3px; min-height:52px; }
.orari-tab .tab-icon  { font-size:1.2rem; line-height:1; }
.orari-tab .tab-label { font-size:.7rem; font-weight:700; }
.orari-tab.active { background:var(--card-bg); color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.25),inset 0 -2px 0 var(--accent); }
.fruiz-bar  { height:4px; background:var(--bg-secondary); border-radius:4px; overflow:hidden; margin-top:3px; }
.fruiz-fill { height:100%; background:var(--accent); border-radius:4px; }
/* Form */
.frm-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:900; justify-content:center; align-items:flex-end; backdrop-filter:blur(10px); }
.frm-sheet   { background:var(--card-bg); border-radius:20px 20px 0 0; width:100%; max-width:500px; padding:20px 20px 44px; max-height:92vh; max-height:92dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.frm-title   { font-size:1.05rem; font-weight:800; margin-bottom:4px; }
.frm-subtitle{ font-size:.78rem; color:var(--text-secondary); margin-bottom:14px; }
.frm-section { font-size:.72rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; margin:14px 0 8px; border-bottom:.5px solid var(--border-color); padding-bottom:6px; }
.frm-group   { margin-bottom:12px; }
.frm-label   { font-size:.72rem; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; display:block; }
.frm-input   { width:100%; background:var(--bg-secondary); border:.5px solid var(--border-color); border-radius:10px; padding:11px 13px; color:var(--text-color); font-family:inherit; font-size:.95rem; outline:none; box-sizing:border-box; }
.frm-input:focus { border-color:var(--accent); }
.tipo-row    { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.tipo-chip   { padding:6px 11px; border-radius:20px; border:1.5px solid var(--border-color); background:transparent; color:var(--text-secondary); font-size:.78rem; font-weight:600; cursor:pointer; font-family:inherit; }
.tipo-chip.sel { border-color:var(--accent); background:rgba(10,132,255,.12); color:var(--accent); }
.tipo-chip[data-tipo="lavoro_agile"].sel { border-color:#30b0c7; background:rgba(48,176,199,.12); color:#30b0c7; }
.tipo-chip[data-tipo="trasferta"].sel    { border-color:#ff9f0a; background:rgba(255,159,10,.12); color:#ff9f0a; }
.perm-row    { background:var(--bg-secondary); border-radius:10px; padding:8px 12px; margin-bottom:6px; }
#recupero-list .perm-row { display:block; }
#recupero-list .perm-row .rec-row-header { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
#recupero-list .perm-row .rec-row-header select { flex:1; background:var(--bg-secondary); border:.5px solid var(--border-color); border-radius:8px; padding:7px 8px; color:var(--text-color); font-family:inherit; font-size:.85rem; outline:none; }
#recupero-list .perm-row .rec-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#recupero-list .perm-row .rec-grid-full { grid-column:1/-1; }
#recupero-list .perm-row .rec-label { font-size:.68rem; color:var(--text-secondary); margin-bottom:3px; }
#recupero-list .perm-row .rec-input { width:100%; box-sizing:border-box; background:var(--bg-secondary); border:.5px solid var(--border-color); border-radius:8px; padding:7px 8px; color:var(--text-color); font-family:inherit; font-size:.85rem; outline:none; }
.btn-add-perm { width:100%; padding:9px; background:transparent; border:1.5px dashed var(--border-color); border-radius:10px; color:var(--text-secondary); font-family:inherit; font-size:.85rem; cursor:pointer; margin-bottom:12px; }
.btn-salva-f   { display:block; width:100%; padding:15px; background:var(--accent); color:#fff; border:none; border-radius:14px; font-size:1rem; font-weight:700; cursor:pointer; font-family:inherit; margin-top:12px; }
.btn-elimina-f { display:block; width:100%; padding:11px; background:rgba(255,59,48,.08); color:#ff3b30; border:1px solid rgba(255,59,48,.3); border-radius:14px; font-size:.88rem; font-weight:700; cursor:pointer; font-family:inherit; margin-top:8px; }
.box-uscita { background:rgba(10,132,255,.1); border:.5px solid rgba(10,132,255,.3); border-radius:10px; padding:9px 13px; margin-bottom:10px; display:none; }
.preview-box { background:var(--bg-secondary); border-radius:10px; padding:9px 13px; font-size:.86rem; display:none; margin-bottom:8px; }

/* iPhone: form stabili con tastiera aperta.
   Safari ingrandisce i campi sotto 16px; inoltre un elemento fixed dentro un
   iframe tende a spostarsi rispetto alla visual viewport. */
@media (max-width: 767px) {
    :is(
        body.exp-iframe-body,
        .frm-sheet,
        .hc-sheet,
        .invp-sheet,
        .pg-sheet,
        .fo-modal,
        .bc-modal,
        .farmaci-sheet,
        .ric-sheet,
        .fp-sheet,
        .fit-sheet
    ) :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
        font-size: 16px !important;
    }

    .exp-modal-overlay,
    .frm-overlay {
        padding-top: max(12px, env(safe-area-inset-top));
        box-sizing: border-box;
    }

    .exp-modal-content {
        height: min(92dvh, 820px);
        max-height: 92dvh;
    }

    .frm-sheet {
        max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
        padding-bottom: max(28px, env(safe-area-inset-bottom));
    }

    body.exp-iframe-body {
        padding-bottom: max(24px, env(safe-area-inset-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.exp-iframe-body .btn-salva {
        position: static;
        width: 100%;
        margin: 24px 0 0;
        box-shadow: none;
    }
}

/* =====================================================
   UTILITY MIGRATE DA STYLE INLINE STATICI
   ===================================================== */
.u-style-001 { margin:0; }
.u-style-002 { color:var(--text-secondary) }
.u-style-003 { display:none; }
.u-style-004 { background:red;color:white;padding:20px }
.u-style-005 { color:red;font-family:sans-serif;padding:20px }
.u-style-006 { background:var(--bg-secondary);border-color:var(--border-color);color:var(--text-secondary) }
.u-style-007 { background:var(--card-bg);border:.5px solid var(--border-color);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px; }
.u-style-008 { font-size:.88rem;font-weight:700; }
.u-style-009 { cursor:default }
.u-style-010 { padding-top: 12px; }
.u-style-011 { font-size:.78rem;margin-top:2px; }
.u-style-012 { display:none; margin-top:10px; }
.u-style-013 { padding:10px 14px 4px; }
.u-style-014 { flex-direction:column;align-items:stretch;gap:4px;padding:10px 14px; }
.u-style-015 { font-size:.85rem;font-weight:600;color:var(--text-color); }
.u-style-016 { font-size:.7rem;font-weight:400;color:var(--text-secondary); }
.u-style-017 { margin-top:4px; }
.u-style-018 { width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.u-style-019 { font-size:.76rem;color:var(--text-secondary);margin-top:2px; }
.u-style-020 { font-size:2rem;margin-bottom:8px; }
.u-style-021 { display:none;text-align:center;padding:20px;color:var(--text-secondary); }
.u-style-022 { font-size:.88rem; }
.u-style-023 { font-size:.85rem;color:var(--text-secondary);margin-bottom:12px; }
.u-style-024 { color:var(--accent); }
.u-style-025 { font-size:.9rem; }
.u-style-026 { width:100%;padding:14px;border-radius:16px;font-size:.95rem; }
.u-style-027 { font-size:1.4rem; }
.u-style-028 { text-decoration:none; }
.u-style-029 { display:none }
.u-style-030 { flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.u-style-031 { display:none; font-size:.75rem; color:var(--text-secondary); margin-top:6px; padding-left:2px; }
.u-style-032 { font-size:2.4rem; margin-bottom:12px; }
.u-style-033 { background:rgba(52,199,89,.15) }
.u-style-034 { background:rgba(100,100,100,.15) }
.u-style-035 { background:rgba(10,132,255,.15) }
.u-style-036 { text-align:center;padding-top:8px; }
.u-style-037 { font-size:2.4rem;margin-bottom:12px; }
.u-style-038 { background:var(--card-bg);border:.5px solid var(--border-color);border-radius:14px;overflow:hidden;margin-bottom:20px; }
.u-style-039 { width:100%;font-size:.78rem;border-collapse:collapse; }
.u-style-040 { padding:8px 8px;text-align:right;color:var(--text-secondary);font-weight:600; }
.u-style-041 { padding:7px 14px; }
.u-style-042 { padding:7px 8px;text-align:right;font-weight:700; }
.u-style-043 { padding:7px 14px;text-align:right;color:var(--text-secondary); }
.u-style-044 { padding:8px 14px;color:var(--text-secondary);font-size:.72rem; }
.u-style-045 { background:var(--bg-secondary);font-size:1.3rem; }
.u-style-046 { background:rgba(52,199,89,.12); }
.u-style-047 { background:rgba(94,92,230,.12); }
.u-style-048 { width:0% }
.u-style-049 { display:flex;align-items:center;justify-content:space-between }
.u-style-050 { padding:0 }
.u-style-051 { font-size:.8rem;padding-right:20px }
.u-style-052 { cursor:pointer }
.u-style-053 { font-size:.82rem }
.u-style-054 { margin-right:5px }
.u-style-055 { font-size:1.6rem }
.u-style-056 { font-size:.8rem;margin-top:6px }
.u-style-057 { width:36px;height:52px;object-fit:cover;border-radius:5px;flex-shrink:0 }
.u-style-058 { width:36px;height:52px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0 }
.u-style-059 { gap:10px }
.u-style-060 { padding-top: var(--header-height, 60px); }
.u-style-061 { font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary);padding:16px 20px 8px; }
.u-style-062 { padding:14px 20px 0; }
.u-style-063 { color:var(--border-color);font-size:1rem; }
.u-style-064 { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.u-style-065 { font-size:.68rem;color:var(--text-secondary);margin-bottom:3px; }
.u-style-066 { font-size:.72rem;color:var(--text-secondary);margin-top:4px;display:none; }
.u-style-066.is-visible { display:block;margin-top:6px; }
.u-style-067 { font-size:.68rem;color:var(--text-secondary);margin-bottom:1px; }
.u-style-068 { font-size:1.4rem;font-weight:800;color:var(--accent); }
.u-style-069 { font-size:.7rem;margin-top:3px; }
.u-style-070 { display:none;margin-top:8px;padding:10px 14px;background:var(--bg-secondary);border-radius:10px;border:.5px solid var(--border-color); }
.u-style-071 { font-size:.72rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px; }
.u-style-072 { font-size:.92rem;font-weight:700; }
.u-style-073 { font-size:.75rem;color:var(--text-secondary);margin-top:2px; }
.u-style-074 { font-size:.7rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px; }
.u-style-075 { font-weight:700;font-size:.88rem;margin-bottom:3px; }
.u-style-076 { font-size:.8rem;color:var(--text-secondary); }
.u-style-077 { margin:8px 16px 12px; }
.u-style-078 { font-size:.9rem;font-weight:700; }
.u-style-079 { display:flex;justify-content:space-between;padding:0 20px 10px; }
.u-style-080 { font-size:.84rem;color:var(--text-secondary); }
.u-style-081 { grid-template-columns:repeat(5,minmax(90px,1fr));min-width:470px; }
.u-style-082 { font-size:.55rem;font-weight:700;color:var(--text-secondary);line-height:1.3;text-align:center; }
.u-style-083 { margin:12px 20px 4px;background:var(--card-bg);border:.5px solid var(--border-color);border-radius:14px;overflow:hidden; }
.u-style-084 { font-size:.7rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;padding:10px 14px 5px; }
.u-style-085 { display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:.5px solid var(--border-color); }
.u-style-086 { font-size:.95rem;flex-shrink:0; }
.u-style-087 { flex:1;min-width:0; }
.u-style-088 { font-size:.76rem;font-weight:600; }
.u-style-089 { font-size:.62rem;color:var(--text-secondary);margin-top:2px; }
.u-style-090 { text-align:right;flex-shrink:0; }
.u-style-091 { font-size:.72rem;font-weight:700;color:var(--success); }
.u-style-092 { font-size:.62rem;color:var(--text-secondary); }
.u-style-093 { font-size:1rem;font-weight:700; }
.u-style-094 { font-size:.5rem;font-weight:700;color:var(--text-secondary);line-height:1.3;text-align:center; }
.u-style-095 { margin:0 16px 14px; }
.u-style-096 { padding:0 20px 20px; }
.u-style-097 { background:var(--card-bg);border:.5px solid var(--border-color);border-radius:14px;padding:13px 15px;margin-bottom:9px; }
.u-style-098 { display:flex;align-items:center;gap:8px;margin-bottom:7px; }
.u-style-099 { font-size:1.1rem; }
.u-style-100 { font-weight:700;font-size:.88rem; }
.u-style-101 { height:5px;margin-bottom:7px; }
.u-style-102 { display:flex;justify-content:space-between;font-size:.78rem; }
.u-style-103 { color:var(--text-secondary); }
.u-style-104 { color:var(--text-color); }
.u-style-105 { color:var(--success); }
.u-style-106 { color:var(--success);font-weight:700; }
.u-style-107 { display:none;padding:0 20px 20px; }
.u-style-108 { text-align:center;padding:40px 0;color:var(--text-secondary); }
.u-style-109 { font-size:.72rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;padding:12px 0 6px; }
.u-style-110 { background:var(--card-bg);border:.5px solid var(--border-color);border-radius:12px;margin-bottom:8px;overflow:hidden; }
.u-style-111 { display:flex;align-items:center;padding:10px 14px;border-bottom:.5px solid var(--border-color); }
.u-style-112 { font-size:.85rem;font-weight:700;flex:1; }
.u-style-113 { display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:.5px solid var(--border-color); }
.u-style-114 { font-size:1rem; }
.u-style-115 { flex:1; }
.u-style-116 { font-size:.72rem;color:var(--text-secondary); }
.u-style-117 { font-size:.82rem;font-weight:700;color:var(--text-secondary); }
.u-style-118 { display:none;padding:0 12px 20px; }
.u-style-119 { margin-bottom:16px; }
.u-style-120 { font-size:.8rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;padding:8px 8px 6px; }
.u-style-121 { font-weight:400;font-size:.7rem; }
.u-style-122 { display:grid;grid-template-columns:repeat(7,1fr);gap:3px; }
.u-style-123 { font-size:.6rem;font-weight:700;color:var(--text-secondary);text-align:center;padding:2px 0; }
.u-style-124 { width:5px;height:5px;border-radius:50%;background:#ff9f0a; }
.u-style-125 { display:flex;gap:2px;flex-wrap:wrap;justify-content:center; }
.u-style-126 { font-size:.78rem;color:var(--text-secondary);margin-bottom:12px; }
.u-style-127 { display:flex;justify-content:space-between;margin-bottom:6px; }
.u-style-128 { font-size:.85rem;font-weight:700; }
.u-style-129 { font-size:.75rem;color:var(--text-secondary); }
.u-style-130 { height:5px;margin-bottom:8px; }
.u-style-131 { color:#ff9500;font-size:.8em; }
.u-style-133 { color:var(--accent) }
.u-style-134 { color:var(--text-secondary);font-weight:400; }
.u-style-135 { color:var(--success) }
.u-style-136 { color:var(--danger) }
.u-style-137 { background:none;border:none;color:#ff3b30;font-size:1rem;cursor:pointer;padding:0;flex-shrink:0; }
.u-style-138 { text-align:center; }
.u-style-139 { display:flex;flex-direction:column;gap:6px;width:100%; }
.u-style-140 { display:flex;gap:8px;align-items:center; }
.u-style-141 { flex:1;background:var(--bg-secondary);border:.5px solid var(--border-color);border-radius:8px;padding:7px 8px;color:var(--text-color);font-family:inherit;font-size:.85rem;outline:none; }
.u-style-142 { background:var(--bg-secondary);border:.5px solid var(--border-color);border-radius:8px;padding:7px 8px;color:var(--text-color);font-family:inherit;font-size:.85rem;outline:none; }
.u-style-143 { width:100%;box-sizing:border-box;background:var(--bg-secondary);border:.5px solid var(--border-color);border-radius:8px;padding:7px 8px;color:var(--text-color);font-family:inherit;font-size:.85rem;outline:none; }
.u-style-144 { grid-column:1/-1; }
.u-style-145 { width:100%;box-sizing:border-box;background:var(--bg-secondary);border:.5px solid var(--border-color);border-radius:8px;padding:7px 8px;color:var(--text-color);font-family:inherit;font-size:.85rem;outline:none;text-align:center; }
.u-style-146 { width:100%;background:var(--card-bg);border:.5px solid var(--border-color);border-radius:14px;padding:14px 16px;color:var(--text-color);font-family:inherit;font-size:.95rem;resize:none;outline:none;min-height:90px;box-sizing:border-box; }
.u-style-147 { margin-top:8px;background:var(--accent);color:#fff;border:none;border-radius:12px;padding:12px 24px;font-family:inherit;font-weight:700;font-size:.95rem;cursor:pointer;float:right; }
.u-style-148 { padding:0 20px 10px; }
.u-style-149 { text-align:center;padding:20px; }
.u-style-150 { margin-top:8px; }
.u-style-151 { align-items:flex-start; }
.u-style-152 { padding:11px; }
.u-style-153 { font-size:.62rem; }
.u-style-154 { font-size:.72rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px; }
.u-style-155 { background:var(--card-bg);border:.5px solid var(--border-color);border-radius:16px;overflow:hidden;margin-bottom:12px; }
.u-style-156 { display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:.5px solid var(--border-color); }
.u-style-157 { display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(52,199,89,.06); }
.u-style-158 { font-size:.72rem;text-align:center;padding-bottom:8px; }
.u-style-159 { display:block;width:100%;padding:15px;background:none;border:none;border-bottom:.5px solid var(--border-color);color:var(--danger);font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit; }
.u-style-160 { justify-content:center;color:var(--text-secondary);cursor:default;flex-direction:column;gap:6px;padding:28px; }
.u-style-161 { padding-top:24px;margin-bottom:16px; }
.u-style-162 { background:var(--accent);color:#fff; }
.u-style-163 { display:none;margin-top:16px; }
.u-style-164 { min-height:300px;font-size:.82rem;line-height:1.6; }
.u-style-165 { display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap; }
.u-style-166 { border:none;cursor:pointer; }
.u-style-167 { height:40px; }
.u-style-168 { color:red; }
.u-style-169 { text-decoration:none }
.u-style-170 { color:#ff3b30 }
.u-style-171 { color:#ff9f0a }
.u-style-172 { color:#34c759 }
.u-style-173 { display:flex;justify-content:flex-end;margin-top:6px; }
.u-style-174 { font-size:.78rem;color:var(--text-secondary);margin-left:10px;align-self:center; }
.u-style-176 { margin-left:20px;margin-bottom:8px; }
.u-style-177 { padding:20px; }
.u-style-178 { padding:6px 16px 2px;font-size:.7rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em; }
.u-style-179 { font-size:.9rem;font-weight:400; }
.u-style-180 { font-size:.68rem;color:var(--text-secondary);line-height:1.5;padding:4px 0 20px; }

/* =====================================================
   MOBILE HARDENING — protezioni anti-spaginamento iPhone
   ===================================================== */
@media (max-width: 600px) {
    .hc-scroll,
    .hc-content,
    .phone-window {
        max-width: 100vw;
    }

    .gallery-header-top,
    .page-header-top,
    .hc-list-item,
    .ap-notif-item,
    .ap-link-card,
    .hc-card,
    .transaction-item,
    .prestiti-banner,
    .deadline-alert-banner,
    .sc-card-row,
    .sc-agenda-item,
    .sc-voti-row,
    .ric-list-section .hc-list-item {
        min-width: 0;
    }

    .gallery-header-info,
    .page-header-top > div,
    .hc-details,
    .hc-card-info,
    .ap-notif-text,
    .ap-link-info,
    .ma-info,
    .sc-card-body,
    .sc-agenda-body,
    .ric-item-details,
    .transaction-info {
        min-width: 0;
    }

    .title-large,
    .hc-card-name,
    .hc-card-desc,
    .ap-notif-title,
    .ap-notif-sub,
    .ap-link-name,
    .ap-link-desc,
    .ma-nome,
    .ma-desc,
    .sc-card-title,
    .sc-card-sub,
    .sc-agenda-title,
    .sc-agenda-meta,
    .ric-item-details strong,
    .ric-item-details span {
        overflow-wrap: anywhere;
    }

    .home-tab-bar,
    .tab-bar,
    .ap-tab-bar,
    .sc-tabs,
    .inv-tabs,
    .fo-tabs,
    .farmaci-tabs,
    .ric-anno-bar,
    .filtri-bar,
    .fit-periodo,
    .det-tab-bar,
    .cl-tab-bar,
    .orari-tab-bar,
    .prog-tab-bar,
    .bc-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .home-tab-bar::-webkit-scrollbar,
    .tab-bar::-webkit-scrollbar,
    .ap-tab-bar::-webkit-scrollbar,
    .sc-tabs::-webkit-scrollbar,
    .inv-tabs::-webkit-scrollbar,
    .fo-tabs::-webkit-scrollbar,
    .farmaci-tabs::-webkit-scrollbar,
    .ric-anno-bar::-webkit-scrollbar,
    .filtri-bar::-webkit-scrollbar,
    .fit-periodo::-webkit-scrollbar,
    .det-tab-bar::-webkit-scrollbar,
    .cl-tab-bar::-webkit-scrollbar,
    .orari-tab-bar::-webkit-scrollbar,
    .prog-tab-bar::-webkit-scrollbar,
    .bc-toolbar::-webkit-scrollbar {
        display: none;
    }

    .home-tab-btn,
    .tab-btn,
    .tab-btn,
    .ap-tab-btn,
    .sc-tab,
    .inv-tab,
    .fo-tab,
    .farmaci-tab,
    .ric-anno-pill,
    .ric-cat-btn,
    .filtro-pill,
    .fit-periodo-btn,
    .det-tab-btn,
    .cl-tab-btn,
    .orari-tab,
    .prog-tab-btn,
    .bc-tab-btn {
        flex: 0 0 auto;
    }

    .gallery-actions,
    .page-actions,
    .sc-agenda-actions,
    .det-actions,
    .dup-actions,
    .riu-actions {
        max-width: 100%;
    }

    .page-actions .btn-nav,
    .page-actions .btn-nav-primary,
    .gallery-actions .btn-nav,
    .gallery-actions .btn-nav-primary {
        min-width: 0;
        white-space: nowrap;
    }

    .bilancio-grid,
    .stats-container,
    .ric-summary,
    .dash-diff-card,
    .dash-cat-wrap,
    .dash-chart-col,
    .allegato-btns,
    .mind-confirm-btns,
    .invp-confirm-btns {
        grid-template-columns: 1fr;
    }

    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    }
}


/* =====================================================
   VECCHIE CLASSI DI SEZIONE COMMENTATE
   Non risultano piu usate con i nomi originali dopo la migrazione ui-*.
   Se tutto funziona, queste vecchie classi possono essere eliminate definitivamente.
   =====================================================
   .al-fr-top
   .al-lbl-top
   .al-scanner-btn
   .al-scanner-close
   .al-scanner-cont
   .al-scanner-line
   .al-scanner-status
   .al-scanner-video
   .al-scanner-wrap
   .lib-active-filters
   .lib-active-tag
   .lib-anno-badge
   .lib-anno-body
   .lib-anno-card
   .lib-anno-chevron
   .lib-anno-header
   .lib-anno-meta
   .lib-anno-pill
   .lib-anno-stat
   .lib-anno-stat-lbl
   .lib-anno-stats-row
   .lib-anno-stat-val
   .lib-anno-top
   .lib-anno-top-autore
   .lib-anno-top-cover
   .lib-anno-top-info
   .lib-anno-top-item
   .lib-anno-top-title
   .lib-anno-top-titolo
   .lib-anno-top-voto
   .lib-anno-year
   .lib-badge
   .lib-bar-anno-fill
   .lib-bar-anno-lbl
   .lib-bar-anno-num
   .lib-bar-anno-row
   .lib-bar-anno-track
   .lib-bar-anno-wrap
   .lib-card-autore
   .lib-card-pagine
   .lib-card-serie
   .lib-card-stelle
   .lib-card-titolo
   .lib-chart-wrap
   .lib-cover-fb
   .lib-cover-img
   .lib-custom-option
   .lib-custom-select
   .lib-custom-select-btn
   .lib-custom-select-dropdown
   .lib-custom-select-list
   .lib-custom-select-search
   .lib-empty
   .lib-empty-icon
   .lib-fchip
   .lib-filter-bar
   .lib-filter-btn
   .lib-filter-chips
   .lib-filter-count
   .lib-filter-label
   .lib-filter-panel
   .lib-filter-section
   .lib-hint-txt
   .lib-kobo-btn
   .lib-prest-badge
   .lib-prest-icon
   .lib-prest-list
   .lib-reading-body
   .lib-reading-card
   .lib-reading-cover
   .lib-reading-tab
   .lib-reset-all
   .lib-reset-link
   .lib-restituito-btn
   .lib-results-count
   .lib-search
   .lib-spacer
   .lib-stat-count
   .lib-stats-author
   .lib-stats-bar
   .lib-stats-bar-fill
   .lib-stats-bar-wrap
   .lib-stats-card-mt
   .lib-stats-grid-0mb
   .lib-stats-n
   .lib-stats-name
   .lib-stats-rank
   .lib-stats-tab
   .lib-tab-bar
   .lib-tab-btn
   .sf-amount
   .sf-badge
   .sf-badge-ok
   .sf-badge-rec
   .sf-badge-warn
   .sf-desc
   .sf-details
   .sf-item
   .sf-list
   .sf-list-header
   .sf-meta
   .sf-price
   .sf-thumb
*/

/* =========================================================
   Vault AI - Knowledge base personale
   ========================================================= */
.vault-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
}

.vault-stat-card {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 14px 35px rgba(0,0,0,.18);
}

.vault-stat-card strong {
    display: block;
    font-size: 24px;
    line-height: 1;
    color: var(--text-primary, #fff);
}

.vault-stat-card span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary, rgba(255,255,255,.65));
}

.vault-search {
    display: flex;
    gap: 10px;
    margin: 0 0 14px;
}

.vault-search input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: var(--text-primary, #fff);
    border-radius: 14px;
    padding: 11px 13px;
    outline: none;
}

.vault-list .list-item-inner {
    align-items: flex-start;
}

.vault-thumb {
    overflow: hidden;
}

.vault-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.vault-preview {
    margin-top: 7px;
    color: var(--text-secondary, rgba(255,255,255,.72));
    font-size: 13px;
    line-height: 1.45;
}

.vault-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 9px;
}

.vault-reader {
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
    border-radius: 24px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
}

.vault-hero {
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 16px;
    background: rgba(255,255,255,.06);
}

.vault-hero img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
}

.vault-tags {
    margin-bottom: 16px;
}

.vault-section {
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,.08);
}

.vault-section:first-of-type {
    border-top: 0;
}

.vault-text {
    color: var(--text-primary, rgba(255,255,255,.90));
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.vault-checklist {
    color: var(--text-secondary, rgba(255,255,255,.76));
}

.vault-prompts {
    border: 1px solid rgba(10,132,255,.25);
    background: rgba(10,132,255,.08);
    border-radius: 18px;
    padding: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
}

.vault-source .vault-text {
    color: var(--text-secondary, rgba(255,255,255,.62));
    font-size: 13px;
}

.vault-loading {
    opacity: .75;
    pointer-events: none;
}

@media (min-width: 768px) {
    .vault-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .vault-reader {
        padding: 28px;
    }
}

/* =========================================================
   PLAYLIST VIDEO ACTIONS — VAULT AI
   Toolbar orizzontale leggibile stile Apple/iOS
========================================================= */

.playlist-video-link {
    text-decoration: none;
}

.playlist-video-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
    flex-shrink: 0;
}

.playlist-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.playlist-action-btn:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.18);
    color: #fff;
    transform: translateY(-1px);
}

.playlist-action-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.playlist-action-btn.is-active,
.playlist-action-btn.on {
    background: rgba(52,199,89,.13);
    border-color: rgba(52,199,89,.35);
    color: #8ff0a2;
}

.playlist-action-formation {
    border-color: rgba(255,149,0,.30);
    color: #ffc26d;
}

.playlist-action-formation:hover {
    background: rgba(255,149,0,.13);
    border-color: rgba(255,149,0,.50);
}

.playlist-action-vault {
    border-color: rgba(10,132,255,.32);
    color: #7dc4ff;
}

.playlist-action-vault:hover {
    background: rgba(10,132,255,.14);
    border-color: rgba(10,132,255,.55);
}

.playlist-action-ai {
    background: linear-gradient(
        135deg,
        rgba(10,132,255,.95),
        rgba(94,92,230,.95)
    );
    border-color: rgba(255,255,255,.14);
    color: #fff;
    box-shadow: 0 8px 22px rgba(10,132,255,.18);
}

.playlist-action-ai:hover {
    background: linear-gradient(
        135deg,
        rgba(10,132,255,1),
        rgba(94,92,230,1)
    );
    border-color: rgba(255,255,255,.22);
}

.playlist-action-danger {
    border-color: rgba(255,69,58,.32);
    color: #ff9b96;
}

.playlist-action-danger:hover {
    background: rgba(255,69,58,.15);
    border-color: rgba(255,69,58,.55);
    color: #ffd0cc;
}

@media (max-width: 768px) {
    .playlist-video-actions {
        justify-content: flex-start;
        width: 100%;
        margin-top: 12px;
        margin-left: 0;
    }

    .playlist-action-btn {
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
        gap: 6px;
    }

    .playlist-action-ico {
        font-size: 13px;
    }
}

/* =========================================================
   PLAYLIST VIDEO ACTIONS — TOGGLE REVERSIBILI
========================================================= */

.playlist-action-btn:disabled,
.playlist-action-btn.is-loading {
    opacity: .72;
    cursor: wait;
    transform: none;
}

.playlist-action-formation.is-active {
    background: rgba(255,149,0,.18);
    border-color: rgba(255,149,0,.55);
    color: #ffd08a;
}

.playlist-action-vault.is-active {
    background: rgba(10,132,255,.18);
    border-color: rgba(10,132,255,.58);
    color: #9bd0ff;
}

.playlist-action-ai.is-active {
    background: linear-gradient(
        135deg,
        rgba(52,199,89,.9),
        rgba(10,132,255,.72)
    );
    border-color: rgba(255,255,255,.16);
    color: #fff;
}


/* =========================================================
   VAULT AI — FASE 2 KNOWLEDGE SYSTEM
   Lista note, indice e collegamenti automatici
========================================================= */

.vault-kb-header {
    padding-bottom: 8px;
}

.vault-kb-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 20px 18px;
}

.vault-kb-summary-card {
    display: block;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,.055);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 14px 32px rgba(0,0,0,.16);
}

.vault-kb-summary-card strong {
    display: block;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.03em;
}

.vault-kb-summary-card span {
    display: block;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 650;
}

.vault-kb-summary-card.is-active,
.vault-kb-summary-card:hover {
    border-color: rgba(10,132,255,.42);
    background: rgba(10,132,255,.11);
}

.vault-kb-search {
    display: flex;
    gap: 10px;
    padding: 0 20px 14px;
}

.vault-kb-search input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,.075);
    color: var(--text-color);
    border-radius: 18px;
    padding: 0 16px;
    outline: none;
    font-family: inherit;
    font-size: 15px;
}

.vault-kb-search input:focus {
    border-color: rgba(10,132,255,.45);
    box-shadow: 0 0 0 4px rgba(10,132,255,.10);
}

.vault-kb-filters {
    padding-bottom: 16px;
}

.vault-kb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 20px 110px;
}

.vault-kb-card {
    position: relative;
    border: 1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at top left, rgba(10,132,255,.08), transparent 36%),
        rgba(255,255,255,.045);
    border-radius: 28px;
    padding: 18px;
    box-shadow: 0 20px 54px rgba(0,0,0,.20);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.vault-kb-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.16);
    background:
        radial-gradient(circle at top left, rgba(10,132,255,.12), transparent 38%),
        rgba(255,255,255,.06);
}

.vault-kb-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.vault-kb-source {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vault-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.vault-status-ok {
    background: rgba(52,199,89,.16);
    color: #7ee787;
}

.vault-status-warn {
    background: rgba(255,149,0,.16);
    color: #ffd08a;
}

.vault-kb-thumb {
    display: block;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 16px;
    background: rgba(255,255,255,.055);
}

.vault-kb-thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform .25s ease;
}

.vault-kb-card:hover .vault-kb-thumb img {
    transform: scale(1.025);
}

.vault-kb-title {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: -.02em;
}

.vault-kb-preview {
    margin: 0 0 16px;
    color: rgba(255,255,255,.76);
    font-size: 14px;
    line-height: 1.55;
}

.vault-kb-tags,
.vault-topic-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.vault-kb-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(10,132,255,.15);
    color: #7dc4ff;
    font-size: 12px;
    font-weight: 750;
}

.vault-kb-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
}

.vault-kb-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vault-kb-delete,
.vault-danger-link {
    border: 1px solid rgba(255,69,58,.30);
    background: rgba(255,69,58,.08);
    color: #ff9b96;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.vault-kb-delete:hover,
.vault-danger-link:hover {
    background: rgba(255,69,58,.15);
}

.vault-reader-pro {
    margin: 0 20px 110px;
}

.vault-index-box {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    border-radius: 22px;
    padding: 16px;
    margin: 0 0 16px;
}

.vault-index-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.vault-index-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.82);
    font-size: 13px;
    font-weight: 650;
}

.vault-index-links a:hover {
    background: rgba(10,132,255,.14);
    border-color: rgba(10,132,255,.28);
    color: #9bd0ff;
}

.vault-related-empty {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    padding: 14px;
}

.vault-related-list {
    display: grid;
    gap: 10px;
}

.vault-related-item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    border-radius: 18px;
    padding: 10px;
    transition: background .18s ease, transform .18s ease;
}

.vault-related-item:hover {
    background: rgba(255,255,255,.075);
    transform: translateX(2px);
}

.vault-related-item img,
.vault-related-item > span {
    width: 54px;
    height: 38px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(255,255,255,.07);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vault-related-item strong {
    display: block;
    font-size: 14px;
    line-height: 1.25;
}

.vault-related-item small {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 12px;
}

.vault-kb-empty {
    margin: 0 20px;
}

@media (min-width: 768px) {
    .vault-kb-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vault-kb-summary {
        grid-template-columns: repeat(2, minmax(0, 220px));
    }
}

@media (min-width: 1200px) {
    .vault-kb-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .vault-kb-summary,
    .vault-kb-search,
    .vault-kb-grid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .vault-kb-search {
        flex-direction: column;
    }

    .vault-kb-card {
        border-radius: 24px;
        padding: 16px;
    }

    .vault-reader-pro {
        margin-left: 16px;
        margin-right: 16px;
    }
}


/* =========================================================
   VAULT AI — RIFINITURE FASE 2.1
   Spaziatura, stato vuoto e azioni sulle card
========================================================= */

.vault-kb-search,
.vault-kb-filters {
    margin-left: 24px;
    margin-right: 24px;
}

.vault-kb-search {
    padding-left: 0;
    padding-right: 0;
}

.vault-kb-empty-pro {
    margin: 18px 24px 120px;
    padding: 30px 22px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 26px;
}

.vault-empty-title {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 800;
}

.vault-empty-text {
    max-width: 520px;
    margin: 8px auto 0;
    line-height: 1.55;
}

.vault-empty-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}

.vault-kb-generate {
    border-color: rgba(10,132,255,.35);
    background: rgba(10,132,255,.12);
    color: #8fc9ff;
}

.vault-kb-generate:hover {
    background: rgba(10,132,255,.20);
}

.vault-kb-delete {
    min-height: 32px;
}

@media (max-width: 600px) {
    .vault-kb-search,
    .vault-kb-filters {
        margin-left: 16px;
        margin-right: 16px;
    }

    .vault-kb-empty-pro {
        margin-left: 16px;
        margin-right: 16px;
    }

    .vault-empty-actions {
        justify-content: stretch;
    }

    .vault-empty-actions .btn-nav,
    .vault-empty-actions .btn-nav-primary {
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
    }
}


/* =========================================================
   VAULT AI — FASE 3 ARGOMENTI / INDICE AUTOMATICO
========================================================= */

.vault-topics-panel {
    margin: 4px 24px 22px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    border-radius: 24px;
}

.vault-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.vault-panel-head h3 {
    margin: 2px 0 0;
    font-size: 18px;
    line-height: 1.2;
}

.vault-panel-head > span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.vault-topic-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.vault-topic-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(10,132,255,.22);
    background: rgba(10,132,255,.10);
    color: #8fc9ff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.vault-topic-pill:hover {
    background: rgba(10,132,255,.18);
    border-color: rgba(10,132,255,.38);
    transform: translateY(-1px);
}

.vault-topic-pill strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: #fff;
    font-size: 12px;
}

.vault-topic-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 180px));
    gap: 12px;
    margin: 4px 24px 18px;
}

.vault-topic-stat {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    border-radius: 20px;
    padding: 16px;
}

.vault-topic-stat strong {
    display: block;
    font-size: 26px;
    line-height: 1;
}

.vault-topic-stat span {
    display: block;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.vault-topic-related-panel {
    margin-top: 0;
}

@media (max-width: 600px) {
    .vault-topics-panel,
    .vault-topic-overview {
        margin-left: 16px;
        margin-right: 16px;
    }

    .vault-topic-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .vault-topic-stat {
        padding: 13px 10px;
    }

    .vault-topic-stat strong {
        font-size: 22px;
    }
}


/* =========================================================
   VAULT AI — FASE 4 INDICE NOTA / READER
========================================================= */

.vault-reader-with-index {
    scroll-behavior: smooth;
}

.vault-index-sticky {
    position: sticky;
    top: 10px;
    z-index: 20;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.vault-index-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.vault-index-head strong {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    color: var(--text-color);
}

.vault-index-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.vault-index-status.is-ready {
    background: rgba(52,199,89,.14);
    color: #8ff0a2;
    border: 1px solid rgba(52,199,89,.25);
}

.vault-index-status.is-draft {
    background: rgba(255,149,0,.13);
    color: #ffd08a;
    border: 1px solid rgba(255,149,0,.25);
}

.vault-index-links-pro {
    gap: 9px;
}

.vault-index-link {
    gap: 7px;
}

.vault-index-link small {
    margin-left: 2px;
    font-size: 11px;
    color: rgba(255,255,255,.48);
    font-weight: 650;
}

.vault-index-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    flex-shrink: 0;
}

.vault-index-link.is-ready .vault-index-dot {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(52,199,89,.12);
}

.vault-index-link.is-missing {
    color: rgba(255,255,255,.52);
    border-color: rgba(255,255,255,.06);
    background: rgba(255,255,255,.035);
}

.vault-index-link.is-missing .vault-index-dot {
    background: var(--warning);
    box-shadow: 0 0 0 3px rgba(255,149,0,.10);
}

.vault-section {
    scroll-margin-top: 120px;
}

.vault-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.vault-section-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255,149,0,.12);
    color: #ffd08a;
    border: 1px solid rgba(255,149,0,.25);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.vault-section-missing {
    opacity: .86;
}

.vault-section-missing .vault-text,
.vault-section-missing .vault-related-empty {
    color: rgba(255,255,255,.62);
    font-style: italic;
}

@media (min-width: 1024px) {
    .vault-index-sticky {
        top: 14px;
    }
}

@media (max-width: 600px) {
    .vault-index-sticky {
        top: 6px;
        border-radius: 20px;
        padding: 14px;
    }

    .vault-index-head {
        align-items: flex-start;
    }

    .vault-index-links-pro {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .vault-index-links-pro::-webkit-scrollbar {
        display: none;
    }

    .vault-index-link {
        flex: 0 0 auto;
    }

    .vault-index-link small {
        display: none;
    }

    .vault-section {
        scroll-margin-top: 150px;
    }
}


/* =========================================================
   VAULT AI — FASE 5 NOTE CORRELATE / PERCORSI
========================================================= */

.vault-related-list-pro {
    gap: 10px;
}

.vault-related-item-pro {
    align-items: center;
}

.vault-related-item-pro div {
    min-width: 0;
}

.vault-related-item-pro em {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 11px;
    font-style: normal;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vault-path-box {
    margin-top: 14px;
    border: 1px solid rgba(10,132,255,.18);
    background: rgba(10,132,255,.075);
    border-radius: 18px;
    padding: 14px;
}

.vault-path-box p {
    margin: 6px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.5;
}

.vault-topic-path-panel {
    margin-top: 0;
}

.vault-path-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.vault-path-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 112px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    padding: 14px;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.vault-path-card:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(10,132,255,.26);
    transform: translateY(-1px);
}

.vault-path-card span {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,132,255,.13);
    color: #8fc9ff;
    font-weight: 800;
}

.vault-path-card strong {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
}

.vault-path-card small {
    color: rgba(255,255,255,.52);
    font-size: 12px;
    font-weight: 650;
}

@media (max-width: 700px) {
    .vault-path-cards {
        grid-template-columns: 1fr;
    }

    .vault-path-card {
        min-height: 0;
    }
}

/* =========================================================
   VAULT AI — FASE 6 KNOWLEDGE EXTRACTION
========================================================= */
.vault-knowledge-section { scroll-margin-top: 88px; }
.vault-knowledge-summary { border:1px solid rgba(10,132,255,.22); background:rgba(10,132,255,.08); border-radius:20px; padding:14px 16px; color:rgba(255,255,255,.86); font-size:14px; line-height:1.55; margin-bottom:16px; }
.vault-knowledge-summary span { display:inline-flex; margin-left:8px; height:24px; padding:0 10px; border-radius:999px; align-items:center; background:rgba(255,255,255,.08); color:#9bd0ff; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.vault-empty-inline { border:1px dashed rgba(255,255,255,.16); background:rgba(255,255,255,.035); border-radius:18px; padding:14px; color:rgba(255,255,255,.62); font-size:13px; line-height:1.5; }
.vault-concept-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.vault-concept-group { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); border-radius:20px; padding:14px; }
.vault-concept-group h3 { margin:0 0 10px; font-size:13px; color:rgba(255,255,255,.72); text-transform:uppercase; letter-spacing:.06em; }
.vault-concept-chips { display:flex; flex-wrap:wrap; gap:8px; }
.vault-concept-chip { display:inline-flex; align-items:center; min-height:30px; padding:0 12px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.055); color:rgba(255,255,255,.86); font-size:12px; font-weight:750; text-decoration:none; }
.vault-concept-chip:hover { background:rgba(10,132,255,.12); border-color:rgba(10,132,255,.30); color:#9bd0ff; }
.vault-concept-strumento { color:#9bd0ff; border-color:rgba(10,132,255,.26); }
.vault-concept-workflow { color:#ffd08a; border-color:rgba(255,149,0,.25); }
.vault-concept-domanda { color:#c7b7ff; border-color:rgba(94,92,230,.25); }
.vault-glossary-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; padding:0 24px 120px; }
.vault-glossary-card { display:flex; flex-direction:column; gap:7px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); border-radius:22px; padding:16px; text-decoration:none; transition:background .18s ease, transform .18s ease, border-color .18s ease; }
.vault-glossary-card:hover { background:rgba(255,255,255,.07); border-color:rgba(10,132,255,.28); transform:translateY(-1px); }
.vault-glossary-card span { color:rgba(255,255,255,.48); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.vault-glossary-card strong { color:var(--text-color); font-size:17px; line-height:1.25; }
.vault-glossary-card small { color:#8fc9ff; font-size:12px; font-weight:750; }
@media (max-width:700px) { .vault-concept-grid,.vault-glossary-grid { grid-template-columns:1fr; } .vault-glossary-grid { padding-left:16px; padding-right:16px; } }

/* =========================================================
   VAULT AI — FASE 7 KNOWLEDGE GRAPH
========================================================= */

.kg-filter-row {
    margin-left: 24px;
    margin-right: 24px;
}

.kg-panel {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 26px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.kg-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.kg-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
    letter-spacing: -.02em;
}

.kg-node-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kg-node {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.055);
    padding: 10px 14px;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.kg-node:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(10,132,255,.28);
    transform: translateY(-1px);
}

.kg-node span {
    color: var(--text-color);
    font-weight: 800;
    line-height: 1.15;
}

.kg-node small {
    color: rgba(255,255,255,.48);
    font-size: 11px;
    font-weight: 700;
}

.kg-node-lg {
    padding: 13px 18px;
    font-size: 17px;
}

.kg-node-md {
    padding: 11px 15px;
    font-size: 15px;
}

.kg-node-sm {
    font-size: 13px;
}

.kg-node-tool {
    border-color: rgba(10,132,255,.28);
}

.kg-node-workflow {
    border-color: rgba(255,149,0,.28);
}

.kg-node-question {
    border-color: rgba(94,92,230,.28);
}

.kg-cluster-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kg-cluster-card {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 22px;
    padding: 15px;
}

.kg-cluster-card strong {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
}

.kg-cluster-card div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.kg-cluster-card a {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    padding: 0 10px;
    background: rgba(10,132,255,.10);
    color: #9bd0ff;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.kg-connection-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kg-connection-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 12px;
}

.kg-connection-item a {
    color: var(--text-color);
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kg-connection-item span {
    color: rgba(255,255,255,.38);
    font-weight: 900;
}

.kg-connection-item em {
    color: rgba(255,255,255,.46);
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
}

.kg-note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kg-note-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 4px 12px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 20px;
    padding: 12px;
    text-decoration: none;
}

.kg-note-card img {
    grid-row: 1 / span 2;
    width: 64px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
}

.kg-note-card strong {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kg-note-card span {
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 700px) {
    .kg-filter-row,
    .kg-panel {
        margin-left: 16px;
        margin-right: 16px;
    }

    .kg-cluster-grid,
    .kg-note-grid {
        grid-template-columns: 1fr;
    }

    .kg-connection-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .kg-connection-item span {
        display: none;
    }
}


/* =========================================================
   VAULT AI — FASE 8 PERCORSI STUDIO
========================================================= */

.vault-path-related {
    margin-left: 24px;
    margin-right: 24px;
}

.vault-path-layout{
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:0 24px 120px;
}

.vault-path-section{
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    border-radius:28px;
    padding:20px;
}

.vault-path-section-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    margin-bottom:14px;
}

.vault-path-section h2{
    margin:0 0 4px;
    font-size:20px;
}

.vault-path-section p {
    margin:0;
    color:rgba(255,255,255,.55);
    font-size:13px;
    line-height:1.45;
}

.vault-path-section-head span {
    min-width:32px;
    height:32px;
    border-radius:999px;
    background:rgba(10,132,255,.13);
    color:#9bd0ff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
}

.vault-path-card{
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:12px;
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    text-decoration:none;
    margin-bottom:10px;
}

.vault-path-card img {
    width:72px;
    height:52px;
    object-fit:cover;
    border-radius:14px;
}

.vault-path-card:not(:has(img)) {
    grid-template-columns:1fr;
}

.vault-path-card strong{
    color:#fff;
    font-size:15px;
    line-height:1.3;
}

.vault-path-card small{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.55);
    font-size:12px;
    font-weight:700;
}

.vault-path-card p {
    margin-top:7px;
    color:rgba(255,255,255,.66);
    font-size:13px;
    line-height:1.45;
}

@media (max-width:768px){
    .vault-path-related,
    .vault-path-layout{
        padding-left:16px;
        padding-right:16px;
        margin-left:0;
        margin-right:0;
    }

    .vault-path-card {
        grid-template-columns:1fr;
    }

    .vault-path-card img {
        width:100%;
        height:auto;
        max-height:160px;
    }
}

/* =========================================================
   VAULT AI — FASE 9 DASHBOARD CONOSCENZA
========================================================= */

.vd-hero {
    margin: 0 24px 18px;
    padding: 22px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at top right, rgba(10,132,255,.24), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
    box-shadow: 0 22px 60px rgba(0,0,0,.24);
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-end;
}

.vd-hero h2 {
    margin: 5px 0 6px;
    font-size: 28px;
    letter-spacing: -.04em;
}

.vd-hero p {
    margin:0;
    color:rgba(255,255,255,.66);
    font-size:14px;
    line-height:1.45;
}

.vd-grid {
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:16px;
    padding:0 24px 120px;
}

.vd-panel {
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    border-radius:26px;
    padding:18px;
    min-width:0;
}

.vd-panel-wide {
    grid-column:1 / -1;
}

.vd-panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.vd-panel-head h3 {
    margin:4px 0 0;
    font-size:18px;
}

.vd-note-list {
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
}

.vd-note-row {
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:12px;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.035);
    border-radius:20px;
    padding:12px;
    text-decoration:none;
}

.vd-note-row img,
.vd-note-row > span {
    width:72px;
    height:52px;
    border-radius:14px;
    object-fit:cover;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.055);
}

.vd-note-row strong,
.vd-study-grid strong,
.vd-chip-cloud strong,
.vd-concept-list strong,
.vd-connection-list strong {
    color:var(--text-color);
}

.vd-note-row strong {
    display:block;
    font-size:14px;
    line-height:1.3;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.vd-note-row small {
    display:block;
    margin-top:3px;
    color:rgba(255,255,255,.48);
    font-size:12px;
    font-weight:700;
}

.vd-note-row p {
    margin:6px 0 0;
    color:rgba(255,255,255,.62);
    font-size:12px;
    line-height:1.4;
}

.vd-chip-cloud {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}

.vd-chip-cloud a {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    border-radius:999px;
    padding:0 12px;
    background:rgba(10,132,255,.10);
    border:1px solid rgba(10,132,255,.18);
    text-decoration:none;
}

.vd-chip-cloud span {
    color:#9bd0ff;
    font-size:12px;
    font-weight:900;
}

.vd-concept-list,
.vd-connection-list {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.vd-concept-list a,
.vd-connection-list a,
.vd-study-grid a {
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.035);
    border-radius:18px;
    padding:12px;
    text-decoration:none;
}

.vd-concept-list span {
    display:block;
    color:rgba(255,255,255,.45);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:4px;
}

.vd-connection-list a {
    display:grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
}

.vd-connection-list span {
    color:rgba(255,255,255,.34);
    font-weight:900;
}

.vd-connection-list small,
.vd-study-grid span {
    color:rgba(255,255,255,.48);
    font-size:12px;
    font-weight:750;
}

.vd-study-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.vd-study-grid a {
    display:flex;
    flex-direction:column;
    gap:6px;
}

@media (max-width: 768px) {
    .vd-hero {
        margin-left:16px;
        margin-right:16px;
        flex-direction:column;
        align-items:flex-start;
    }

    .vd-grid {
        grid-template-columns:1fr;
        padding-left:16px;
        padding-right:16px;
    }

    .vd-note-list,
    .vd-study-grid {
        grid-template-columns:1fr;
    }

    .vd-connection-list a {
        grid-template-columns:1fr;
    }

    .vd-connection-list span {
        display:none;
    }
}


/* =========================================================
   VAULT AI — FASE 10 UX / QA
========================================================= */

.vault-nav-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 24px 16px;
    margin-top: -2px;
}

.vault-nav-strip::-webkit-scrollbar {
    display: none;
}

.vault-nav-strip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.vault-nav-strip a:hover {
    background: rgba(10,132,255,.12);
    border-color: rgba(10,132,255,.28);
    color: #9bd0ff;
}

.vault-empty-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.hc-empty .vault-empty-actions .btn-nav,
.hc-empty .vault-empty-actions .btn-nav-primary {
    min-height: 38px;
    align-items: center;
}

.kg-panel-head .btn-nav-sm,
.vault-panel-head .btn-nav-sm {
    flex-shrink: 0;
}

@media (max-width: 700px) {
    .vault-nav-strip {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 14px;
    }

    .vault-empty-actions {
        flex-direction: column;
        align-items: stretch;
        padding: 0 20px;
    }

    .vault-empty-actions .btn-nav,
    .vault-empty-actions .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   VAULT AI — FASE 11 ASSISTENTE VAULT
========================================================= */

.va-ask-panel,
.va-result-panel,
.va-side-panel,
.va-history-panel {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.va-ask-panel label {
    display: block;
    margin-bottom: 10px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.va-ask-panel textarea {
    width: 100%;
    resize: vertical;
    min-height: 110px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: var(--text-color);
    padding: 15px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    outline: none;
}

.va-ask-panel textarea:focus {
    border-color: rgba(10,132,255,.42);
    box-shadow: 0 0 0 4px rgba(10,132,255,.10);
}

.va-ask-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.va-result-panel.is-hidden {
    display: none;
}

.va-loading,
.va-error {
    border-radius: 18px;
    padding: 14px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.72);
    font-size: 14px;
}

.va-error {
    background: rgba(255,69,58,.12);
    color: #ffb3ae;
    border: 1px solid rgba(255,69,58,.22);
}

.va-answer-card {
    border: 1px solid rgba(10,132,255,.18);
    background: rgba(10,132,255,.07);
    border-radius: 22px;
    padding: 16px;
}

.va-answer-text {
    margin-top: 8px;
    color: rgba(255,255,255,.88);
    font-size: 15px;
    line-height: 1.65;
}

.va-sources {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.va-sources a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 18px;
    padding: 12px;
    text-decoration: none;
}

.va-sources strong {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
}

.va-sources span {
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

.va-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.va-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.va-mini-note-list,
.va-history-list {
    display: grid;
    gap: 10px;
}

.va-mini-note-list a,
.va-history-card {
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
    text-decoration: none;
}

.va-mini-note-list strong,
.va-history-card h4 {
    display: block;
    margin: 0;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.35;
}

.va-mini-note-list span,
.va-history-card small {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

.va-history-card p {
    margin: 8px 0 0;
    color: rgba(255,255,255,.64);
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 700px) {
    .va-ask-panel,
    .va-result-panel,
    .va-side-panel,
    .va-history-panel {
        margin-left: 16px;
        margin-right: 16px;
        padding: 16px;
        border-radius: 24px;
    }

    .va-ask-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .va-ask-actions .btn-nav,
    .va-ask-actions .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   VAULT AI — FASE 12 RETRIEVAL INTELLIGENTE
========================================================= */

.va-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.va-mode-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.76);
    font-size: 12px;
    font-weight: 750;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    cursor: pointer;
}

.va-mode-row input {
    accent-color: var(--accent);
}

.va-sources a span {
    color: #9bd0ff;
}

.va-answer-card::after {
    content: "Risposta basata sul retrieval intelligente del Vault";
    display: block;
    margin-top: 12px;
    color: rgba(255,255,255,.38);
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .06em;
}

@media (max-width: 700px) {
    .va-mode-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .va-mode-row label {
        justify-content: center;
    }
}


/* =========================================================
   VAULT AI — FASE 13 NOTE COLLEGATE AUTOMATICHE
========================================================= */

.vr-builder-panel {
    margin: 0 24px 120px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at top right, rgba(10,132,255,.18), transparent 42%),
        rgba(255,255,255,.04);
    border-radius: 30px;
    padding: 26px;
    text-align: center;
    box-shadow: 0 22px 60px rgba(0,0,0,.22);
}

.vr-builder-panel h2 {
    margin: 12px 0 8px;
    font-size: 24px;
    letter-spacing: -.03em;
}

.vr-builder-panel p {
    max-width: 520px;
    margin: 0 auto 16px;
    color: rgba(255,255,255,.64);
    font-size: 14px;
    line-height: 1.55;
}

.vault-related-obsidian {
    scroll-margin-top: 88px;
}

.vault-linked-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.vault-linked-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 20px;
    padding: 12px;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.vault-linked-card:hover {
    background: rgba(10,132,255,.08);
    border-color: rgba(10,132,255,.22);
    transform: translateY(-1px);
}

.vault-linked-card img,
.vault-linked-icon {
    width: 74px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    background: rgba(255,255,255,.055);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-linked-card strong {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vault-linked-card small {
    display: block;
    margin-top: 4px;
    color: #9bd0ff;
    font-size: 12px;
    font-weight: 750;
}

.vault-linked-card em {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 11px;
    font-style: normal;
    line-height: 1.35;
}

.vault-related-actions {
    justify-content: flex-start;
    margin-top: 12px;
}

@media (max-width: 700px) {
    .vr-builder-panel {
        margin-left: 16px;
        margin-right: 16px;
        padding: 20px;
        border-radius: 26px;
    }

    .vault-linked-card {
        grid-template-columns: 1fr;
    }

    .vault-linked-card img,
    .vault-linked-icon {
        width: 100%;
        height: auto;
        min-height: 90px;
    }
}


/* =========================================================
   VAULT AI — FASE 14 TIMELINE CONOSCENZA
========================================================= */

.vt-hero,
.vt-panel {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.vt-hero {
    background:
        radial-gradient(circle at top right, rgba(52,199,89,.20), transparent 38%),
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}

.vt-hero h2 {
    margin: 5px 0 6px;
    font-size: 28px;
    letter-spacing: -.04em;
}

.vt-hero p {
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: 14px;
    line-height: 1.45;
}

.vt-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.vt-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.vt-heatmap {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    gap: 5px;
}

.vt-day {
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.04);
}

.vt-day-2 { background: rgba(52,199,89,.22); }
.vt-day-3 { background: rgba(52,199,89,.42); }
.vt-day-4 { background: rgba(52,199,89,.72); }

.vt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 0 24px 120px;
}

.vt-grid .vt-panel {
    margin: 0;
}

.vt-panel-wide {
    grid-column: 1 / -1;
}

.vt-month-list,
.vt-topic-list,
.vt-stale-list {
    display: grid;
    gap: 10px;
}

.vt-month-card,
.vt-topic-list a,
.vt-stale-list a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
    text-decoration: none;
}

.vt-month-card strong,
.vt-topic-list strong,
.vt-stale-list strong {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
}

.vt-month-card span,
.vt-topic-list span,
.vt-topic-list em,
.vt-stale-list span {
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
}

.vt-topic-list a,
.vt-stale-list a {
    flex-direction: column;
}

.vt-bars {
    display: grid;
    gap: 13px;
}

.vt-bar-row {
    display: grid;
    gap: 7px;
}

.vt-bar-row div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.vt-bar-row strong {
    color: var(--text-color);
    font-size: 13px;
}

.vt-bar-row span {
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

.vt-bar-row i {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    overflow: hidden;
}

.vt-bar-row b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(10,132,255,.85), rgba(52,199,89,.85));
}

@media (max-width: 768px) {
    .vt-hero,
    .vt-panel {
        margin-left: 16px;
        margin-right: 16px;
        border-radius: 24px;
        padding: 16px;
    }

    .vt-grid {
        grid-template-columns: 1fr;
        padding-left: 16px;
        padding-right: 16px;
    }

    .vt-heatmap {
        grid-template-columns: repeat(15, 1fr);
    }

    .vt-hero h2 {
        font-size: 24px;
    }
}


/* =========================================================
   VAULT AI — BADGE AI / LOCALE
========================================================= */

.ai-badge,
.local-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ai-badge {
    color: #ffcc9b;
    border: 1px solid rgba(255,159,10,.28);
    background: rgba(255,159,10,.12);
}

.local-badge {
    color: #9ff0b5;
    border: 1px solid rgba(52,199,89,.24);
    background: rgba(52,199,89,.10);
}

.ai-inline-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}


/* =========================================================
   VAULT AI — FASE 15 RIPASSO INTELLIGENTE
========================================================= */

.vrp-session-panel,
.vrp-panel {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.vrp-session-panel {
    background:
        radial-gradient(circle at top right, rgba(52,199,89,.18), transparent 38%),
        rgba(255,255,255,.04);
}

.vrp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.vrp-head h2,
.vrp-head h3 {
    margin: 4px 0 0;
}

.vrp-session-grid,
.vrp-list,
.vrp-relations {
    display: grid;
    gap: 10px;
}

.vrp-session-card,
.vrp-review-card,
.vrp-relation-card {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 20px;
    text-decoration: none;
}

.vrp-session-card {
    display: grid;
    grid-template-columns: 92px minmax(0,1fr);
    gap: 14px;
    padding: 12px;
    align-items: center;
}

.vrp-session-card img {
    width: 92px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
}

.vrp-session-card strong,
.vrp-review-card strong {
    display: block;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
}

.vrp-session-card small,
.vrp-review-card small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

.vrp-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.vrp-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(10,132,255,.12);
    color: #9bd0ff;
    font-size: 11px;
    font-weight: 800;
}

.vrp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    padding: 0 24px 120px;
}

.vrp-grid .vrp-panel {
    margin: 0;
}

.vrp-review-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 13px;
}

.vrp-score {
    display: grid;
    justify-items: end;
}

.vrp-score span {
    color: rgba(255,255,255,.48);
    font-size: 11px;
    font-weight: 700;
}

.vrp-score b {
    color: #9ff0b5;
    font-size: 20px;
    line-height: 1;
}

.vrp-relation-card {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
}

.vrp-relation-card a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.35;
}

.vrp-relation-card span {
    color: rgba(255,255,255,.38);
    font-size: 18px;
}

.vrp-relation-card small {
    color: #9bd0ff;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .vrp-session-panel,
    .vrp-panel {
        margin-left: 16px;
        margin-right: 16px;
        border-radius: 24px;
        padding: 16px;
    }

    .vrp-grid {
        grid-template-columns: 1fr;
        padding-left: 16px;
        padding-right: 16px;
    }

    .vrp-session-card {
        grid-template-columns: 1fr;
    }

    .vrp-session-card img {
        width: 100%;
        height: auto;
        min-height: 120px;
    }

    .vrp-relation-card {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}


/* =========================================================
   VAULT AI — FASE 16 MEMORIA STUDIO LOCALE
========================================================= */

.vs-hero,
.vs-panel {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.vs-hero {
    background:
        radial-gradient(circle at top right, rgba(10,132,255,.20), transparent 38%),
        rgba(255,255,255,.04);
}

.vs-hero h2 {
    margin: 5px 0 6px;
    font-size: 28px;
    letter-spacing: -.04em;
}

.vs-hero p {
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: 14px;
}

.vs-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.vs-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.vs-activity {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    gap: 5px;
}

.vs-day {
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.04);
}

.vs-day-2 { background: rgba(10,132,255,.24); }
.vs-day-3 { background: rgba(10,132,255,.46); }
.vs-day-4 { background: rgba(10,132,255,.78); }

.vs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    padding: 0 24px 120px;
}

.vs-grid .vs-panel {
    margin: 0;
}

.vs-list {
    display: grid;
    gap: 10px;
}

.vs-card {
    display: grid;
    grid-template-columns: 72px minmax(0,1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 20px;
    padding: 12px;
    text-decoration: none;
}

.vs-card img {
    width: 72px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
}

.vs-card:not(:has(img)) {
    grid-template-columns: 1fr;
}

.vs-card strong {
    display: block;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
}

.vs-card span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .vs-hero,
    .vs-panel {
        margin-left: 16px;
        margin-right: 16px;
        border-radius: 24px;
        padding: 16px;
    }

    .vs-grid {
        grid-template-columns: 1fr;
        padding-left: 16px;
        padding-right: 16px;
    }

    .vs-activity {
        grid-template-columns: repeat(15, 1fr);
    }

    .vs-card {
        grid-template-columns: 1fr;
    }

    .vs-card img {
        width: 100%;
        height: auto;
        min-height: 120px;
    }
}


/* =========================================================
   VAULT AI — FASE 17 RIPASSO + MEMORIA STUDIO
========================================================= */

.vf-session {
    display: grid;
    gap: 16px;
    padding: 0 24px 120px;
}

.vf-card {
    position: relative;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.vf-card img {
    width: 120px;
    height: 82px;
    border-radius: 18px;
    object-fit: cover;
}

.vf-card:not(:has(img)) {
    grid-template-columns: 1fr;
}

.vf-step {
    position: absolute;
    top: -10px;
    left: 18px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(10,132,255,.95);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(10,132,255,.24);
}

.vf-body strong {
    display: block;
    color: var(--text-color);
    font-size: 17px;
    line-height: 1.3;
}

.vf-body span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.50);
    font-size: 12px;
    font-weight: 700;
}

.vf-body p {
    margin: 10px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.5;
}

.vf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 768px) {
    .vf-session {
        padding-left: 16px;
        padding-right: 16px;
    }

    .vf-card {
        grid-template-columns: 1fr;
        border-radius: 24px;
        padding: 16px;
    }

    .vf-card img {
        width: 100%;
        height: auto;
        min-height: 130px;
    }

    .vf-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vf-actions .btn-nav,
    .vf-actions .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   VAULT AI — FASE 18 GRAPH VISUALE
========================================================= */

.vgv-panel {
    margin: 0 24px 120px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at top right, rgba(10,132,255,.18), transparent 40%),
        rgba(255,255,255,.04);
    border-radius: 30px;
    padding: 18px;
    box-shadow: 0 22px 60px rgba(0,0,0,.22);
}

.vgv-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.vgv-toolbar h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.vgv-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.vgv-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.vgv-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 10px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.70);
    font-size: 12px;
    font-weight: 750;
}

.vgv-legend i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.vgv-dot-note { background: #0a84ff; }
.vgv-dot-concept { background: #30d158; }
.vgv-dot-tool { background: #bf5af2; }
.vgv-dot-workflow { background: #ff9f0a; }

.vgv-stage-wrap {
    position: relative;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.20);
    border-radius: 24px;
    overflow: hidden;
    min-height: 520px;
}

.vgv-graph {
    display: block;
    width: 100%;
    height: 68vh;
    min-height: 520px;
    cursor: grab;
    touch-action: none;
}

.vgv-edge {
    stroke: rgba(255,255,255,.22);
    stroke-linecap: round;
}

.vgv-edge-concept {
    stroke: rgba(48,209,88,.22);
    stroke-dasharray: 5 7;
}

.vgv-node {
    cursor: pointer;
}

.vgv-node circle {
    stroke: rgba(255,255,255,.45);
    stroke-width: 1.4;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.32));
}

.vgv-node text {
    fill: rgba(255,255,255,.80);
    font-size: 12px;
    font-weight: 750;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(0,0,0,.65);
    stroke-width: 4px;
    stroke-linejoin: round;
}

.vgv-info {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: min(280px, calc(100% - 28px));
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(20,20,25,.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.vgv-info.is-hidden {
    display: none;
}

.vgv-info strong {
    display: block;
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.3;
}

.vgv-info span,
.vgv-info small {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    font-weight: 700;
}

.vgv-info a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    margin-top: 12px;
    border-radius: 999px;
    background: rgba(10,132,255,.18);
    color: #9bd0ff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.vgv-empty {
    fill: rgba(255,255,255,.58);
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .vgv-panel {
        margin-left: 16px;
        margin-right: 16px;
        border-radius: 24px;
        padding: 14px;
    }

    .vgv-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .vgv-actions {
        width: 100%;
    }

    .vgv-actions .btn-nav {
        flex: 1;
    }

    .vgv-stage-wrap,
    .vgv-graph {
        min-height: 480px;
    }

    .vgv-graph {
        height: 62vh;
    }
}


/* =========================================================
   VAULT AI — FASE 19 RICERCA SEMANTICA LOCALE
========================================================= */

.vss-search-panel,
.vss-results {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.vss-search-panel {
    background:
        radial-gradient(circle at top right, rgba(10,132,255,.18), transparent 42%),
        rgba(255,255,255,.04);
}

.vss-search-panel label {
    display: block;
    margin-bottom: 10px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.vss-search-box {
    display: flex;
    gap: 10px;
}

.vss-search-box input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: var(--text-color);
    padding: 0 15px;
    font-size: 15px;
    outline: none;
}

.vss-search-box input:focus {
    border-color: rgba(10,132,255,.42);
    box-shadow: 0 0 0 4px rgba(10,132,255,.10);
}

.vss-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.vss-suggestions a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.74);
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.vss-results-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}

.vss-results-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.vss-results-head > span {
    max-width: 45%;
    color: #9bd0ff;
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vss-result-list {
    display: grid;
    gap: 12px;
}

.vss-result-card {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 14px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
    border-radius: 22px;
    padding: 13px;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.vss-result-card:hover {
    background: rgba(10,132,255,.07);
    border-color: rgba(10,132,255,.22);
    transform: translateY(-1px);
}

.vss-result-card img,
.vss-result-icon {
    width: 94px;
    height: 66px;
    border-radius: 16px;
    object-fit: cover;
    background: rgba(255,255,255,.055);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.vss-result-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.vss-result-top strong {
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.3;
}

.vss-result-top em {
    flex-shrink: 0;
    color: #9ff0b5;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.vss-result-card small {
    display: block;
    margin-top: 4px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

.vss-result-card p {
    margin: 8px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 13px;
    line-height: 1.45;
}

.vss-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.vss-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(10,132,255,.12);
    color: #9bd0ff;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .vss-search-panel,
    .vss-results {
        margin-left: 16px;
        margin-right: 16px;
        border-radius: 24px;
        padding: 16px;
    }

    .vss-search-box {
        flex-direction: column;
    }

    .vss-search-box .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }

    .vss-result-card {
        grid-template-columns: 1fr;
    }

    .vss-result-card img,
    .vss-result-icon {
        width: 100%;
        height: auto;
        min-height: 120px;
    }

    .vss-results-head {
        flex-direction: column;
    }

    .vss-results-head > span {
        max-width: 100%;
    }
}

/* =========================================================
   VAULT AI — FASE 20 KNOWLEDGE ENGINE
========================================================= */

.ke-hero,
.ke-panel {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.ke-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    background:
        radial-gradient(circle at top right, rgba(10,132,255,.22), transparent 36%),
        radial-gradient(circle at bottom left, rgba(52,199,89,.14), transparent 42%),
        rgba(255,255,255,.04);
}

.ke-hero h2 {
    margin: 5px 0 6px;
    font-size: 28px;
    letter-spacing: -.04em;
}

.ke-hero p {
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: 14px;
    line-height: 1.45;
}

.ke-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ke-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    padding: 0 24px 120px;
}

.ke-grid .ke-panel {
    margin: 0;
}

.ke-panel-wide {
    grid-column: 1 / -1;
}

.ke-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.ke-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.ke-action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
}

.ke-action-grid a,
.ke-list a,
.ke-connections article {
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
    text-decoration: none;
}

.ke-action-grid a {
    position: relative;
    min-height: 118px;
    border-radius: 22px;
    padding: 15px;
}

.ke-action-grid strong,
.ke-list strong,
.ke-connections a {
    color: var(--text-color);
}

.ke-action-grid strong,
.ke-list strong {
    display: block;
    font-size: 14px;
    line-height: 1.3;
}

.ke-action-grid span,
.ke-list span {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    line-height: 1.4;
}

.ke-action-grid em {
    position: absolute;
    left: 12px;
    bottom: 12px;
    color: #ffcc9b;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.ke-list,
.ke-connections {
    display: grid;
    gap: 10px;
}

.ke-chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.ke-chip-cloud a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(10,132,255,.10);
    border: 1px solid rgba(10,132,255,.18);
    color: var(--text-color);
    text-decoration: none;
}

.ke-chip-cloud span {
    color: #9bd0ff;
    font-size: 12px;
    font-weight: 900;
}

.ke-connections article {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto;
    gap: 8px;
    align-items: center;
}

.ke-connections a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 13px;
    font-weight: 750;
}

.ke-connections span {
    color: rgba(255,255,255,.38);
    font-weight: 900;
}

.ke-connections small {
    color: #9bd0ff;
    font-size: 11px;
    font-weight: 900;
}

@media (max-width: 900px) {
    .ke-action-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 768px) {
    .ke-hero,
    .ke-panel {
        margin-left: 16px;
        margin-right: 16px;
        border-radius: 24px;
        padding: 16px;
    }

    .ke-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .ke-hero h2 {
        font-size: 24px;
    }

    .ke-hero-actions,
    .ke-hero-actions .btn-nav,
    .ke-hero-actions .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }

    .ke-grid {
        grid-template-columns: 1fr;
        padding-left: 16px;
        padding-right: 16px;
    }

    .ke-action-grid {
        grid-template-columns: 1fr;
    }

    .ke-action-grid a {
        min-height: 0;
    }

    .ke-connections article {
        grid-template-columns: 1fr;
    }

    .ke-connections article > span {
        display: none;
    }
}

/* =========================================================
   VAULT AI — FASE 21 IMPORT ENGINE
========================================================= */

.vi-panel,
.vi-result {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.vi-panel {
    background:
        radial-gradient(circle at top right, rgba(52,199,89,.16), transparent 40%),
        rgba(255,255,255,.04);
}

.vi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

.vi-textarea {
    min-height: 240px;
    resize: vertical;
    line-height: 1.55;
}

.vi-actions,
.vi-result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.vi-result.is-hidden {
    display: none;
}

.vi-loading,
.vi-error,
.vi-success {
    border-radius: 20px;
    padding: 16px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.74);
}

.vi-error {
    background: rgba(255,69,58,.12);
    border: 1px solid rgba(255,69,58,.22);
    color: #ffb3ae;
}

.vi-success {
    background: rgba(52,199,89,.10);
    border: 1px solid rgba(52,199,89,.22);
}

.vi-success strong {
    display: block;
    color: var(--text-color);
    font-size: 17px;
}

.vi-success span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
}

.vi-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.vi-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.vi-list {
    display: grid;
    gap: 10px;
}

.vi-list a {
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
    text-decoration: none;
}

.vi-list strong {
    display: block;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
}

.vi-list span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .vi-panel,
    .vi-result {
        margin-left: 16px;
        margin-right: 16px;
        padding: 16px;
        border-radius: 24px;
    }

    .vi-grid {
        grid-template-columns: 1fr;
    }

    .vi-actions,
    .vi-result-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vi-actions .btn-nav,
    .vi-actions .btn-nav-primary,
    .vi-result-actions .btn-nav,
    .vi-result-actions .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   VAULT AI — FASE 22 AUTO KNOWLEDGE LOCALE
========================================================= */

.vk-panel {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.vk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    padding: 0 24px;
}

.vk-grid .vk-panel {
    margin: 0 0 18px;
}

.vk-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.vk-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.vk-chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vk-chip-cloud a,
.vk-chip-cloud span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(10,132,255,.10);
    border: 1px solid rgba(10,132,255,.18);
    color: #9bd0ff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.vk-list {
    display: grid;
    gap: 10px;
}

.vk-list a {
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
    text-decoration: none;
}

.vk-list strong {
    display: block;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
}

.vk-list span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .vk-panel {
        margin-left: 16px;
        margin-right: 16px;
        padding: 16px;
        border-radius: 24px;
    }

    .vk-grid {
        grid-template-columns: 1fr;
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* =========================================================
   VAULT AI — FASE 23 WORKSPACE DINAMICI
========================================================= */

.vw-topic-strip {
    margin: 0 0 14px;
}

.vw-topic-strip .chips-scroll {
    padding-left: 24px;
    padding-right: 24px;
}

.vw-hero,
.vw-panel {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.vw-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    background:
        radial-gradient(circle at top right, rgba(10,132,255,.20), transparent 38%),
        radial-gradient(circle at bottom left, rgba(52,199,89,.12), transparent 42%),
        rgba(255,255,255,.04);
}

.vw-hero h2 {
    margin: 5px 0 6px;
    font-size: 28px;
    letter-spacing: -.04em;
}

.vw-hero p {
    margin: 0;
    color: rgba(255,255,255,.64);
    font-size: 14px;
}

.vw-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.vw-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    padding: 0 24px 120px;
}

.vw-grid .vw-panel {
    margin: 0;
}

.vw-panel-wide {
    grid-column: 1 / -1;
}

.vw-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.vw-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.vw-note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}

.vw-note-card {
    display: grid;
    grid-template-columns: 88px minmax(0,1fr);
    gap: 13px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 20px;
    padding: 13px;
    text-decoration: none;
}

.vw-note-card img {
    width: 88px;
    height: 62px;
    border-radius: 15px;
    object-fit: cover;
}

.vw-note-card:not(:has(img)) {
    grid-template-columns: 1fr;
}

.vw-note-card strong,
.vw-list strong,
.vw-relations a {
    color: var(--text-color);
}

.vw-note-card strong,
.vw-list strong {
    display: block;
    font-size: 14px;
    line-height: 1.3;
}

.vw-note-card span,
.vw-list span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

.vw-note-card p {
    margin: 8px 0 0;
    color: rgba(255,255,255,.64);
    font-size: 13px;
    line-height: 1.45;
}

.vw-chip-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.vw-chip-cloud a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(10,132,255,.10);
    border: 1px solid rgba(10,132,255,.18);
    color: var(--text-color);
    text-decoration: none;
}

.vw-chip-cloud span {
    color: #9bd0ff;
    font-size: 12px;
    font-weight: 900;
}

.vw-list,
.vw-relations {
    display: grid;
    gap: 10px;
}

.vw-list a,
.vw-relations article {
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
    text-decoration: none;
}

.vw-relations article {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto;
    gap: 8px;
    align-items: center;
}

.vw-relations a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
}

.vw-relations span {
    color: rgba(255,255,255,.38);
    font-weight: 900;
}

.vw-relations small {
    color: #9bd0ff;
    font-size: 11px;
    font-weight: 900;
}

@media (max-width: 768px) {
    .vw-topic-strip .chips-scroll {
        padding-left: 16px;
        padding-right: 16px;
    }

    .vw-hero,
    .vw-panel {
        margin-left: 16px;
        margin-right: 16px;
        border-radius: 24px;
        padding: 16px;
    }

    .vw-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .vw-hero h2 {
        font-size: 24px;
    }

    .vw-hero-actions,
    .vw-hero-actions .btn-nav,
    .vw-hero-actions .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }

    .vw-grid,
    .vw-note-grid {
        grid-template-columns: 1fr;
    }

    .vw-grid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .vw-note-card {
        grid-template-columns: 1fr;
    }

    .vw-note-card img {
        width: 100%;
        height: auto;
        min-height: 120px;
    }

    .vw-relations article {
        grid-template-columns: 1fr;
    }

    .vw-relations span {
        display: none;
    }
}


/* =========================================================
   VAULT AI — FASE 24 QUIZ ENGINE
========================================================= */

.vq-toolbar,
.vq-stats {
    margin: 0 24px 18px;
}

.vq-search {
    display: flex;
    gap: 10px;
}

.vq-search input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: var(--text-color);
    padding: 0 15px;
    font-size: 15px;
    outline: none;
}

.vq-search input:focus {
    border-color: rgba(10,132,255,.42);
    box-shadow: 0 0 0 4px rgba(10,132,255,.10);
}

.vq-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}

.vq-stat {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 22px;
    padding: 18px;
    text-align: center;
}

.vq-stat strong {
    display: block;
    color: var(--text-color);
    font-size: 28px;
    line-height: 1;
}

.vq-stat span {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.56);
    font-size: 12px;
    font-weight: 700;
}

.vq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    padding: 0 24px 120px;
}

.vq-card {
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at top right, rgba(10,132,255,.12), transparent 42%),
        rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.vq-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.vq-type {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(10,132,255,.12);
    color: #9bd0ff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.vq-card-top a {
    color: rgba(255,255,255,.52);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.vq-card strong {
    display: block;
    color: var(--text-color);
    font-size: 18px;
    line-height: 1.45;
}

.vq-card small {
    display: block;
    margin-top: 10px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

.vq-reveal-btn {
    margin-top: 16px;
}

.vq-answer {
    display: none;
    margin-top: 16px;
    border-radius: 18px;
    padding: 16px;
    background: rgba(52,199,89,.10);
    border: 1px solid rgba(52,199,89,.18);
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.55;
}

.vq-answer.is-visible {
    display: block;
}

@media (max-width: 768px) {
    .vq-toolbar,
    .vq-stats {
        margin-left: 16px;
        margin-right: 16px;
    }

    .vq-search {
        flex-direction: column;
    }

    .vq-search .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }

    .vq-stats,
    .vq-grid {
        grid-template-columns: 1fr;
    }

    .vq-grid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .vq-card {
        border-radius: 24px;
        padding: 16px;
    }

    .vq-card strong {
        font-size: 16px;
    }
}


/* =========================================================
   VAULT AI — FASE 26 PRIVACY MODES
========================================================= */

.privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.privacy-cloud {
    color: #9bd0ff;
    border: 1px solid rgba(10,132,255,.28);
    background: rgba(10,132,255,.12);
}

.privacy-hybrid {
    color: #ffe08a;
    border: 1px solid rgba(255,204,0,.28);
    background: rgba(255,204,0,.10);
}

.privacy-local {
    color: #ffb3ae;
    border: 1px solid rgba(255,69,58,.28);
    background: rgba(255,69,58,.12);
}

.vp-hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin: 0 24px 18px;
}

.vp-stat {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 22px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.vp-stat strong {
    display: block;
    color: var(--text-color);
    font-size: 30px;
    line-height: 1;
}

.vp-stat span {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 800;
}

.vp-filters {
    margin: 0 0 14px;
}

.vp-filters .chips-scroll {
    padding-left: 24px;
    padding-right: 24px;
}

.vp-panel {
    margin: 0 24px 120px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.vp-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.vp-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.vp-list {
    display: grid;
    gap: 10px;
}

.vp-card {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
}

.vp-card a {
    color: var(--text-color);
    text-decoration: none;
}

.vp-card strong {
    display: block;
    font-size: 14px;
    line-height: 1.3;
}

.vp-card span:not(.privacy-badge) {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

.vp-mode-form select {
    min-height: 38px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: var(--text-color);
    padding: 0 10px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .vp-hero,
    .vp-panel {
        margin-left: 16px;
        margin-right: 16px;
    }

    .vp-hero {
        grid-template-columns: 1fr;
    }

    .vp-filters .chips-scroll {
        padding-left: 16px;
        padding-right: 16px;
    }

    .vp-panel {
        border-radius: 24px;
        padding: 16px;
    }

    .vp-card {
        grid-template-columns: 1fr;
    }

    .vp-mode-form select {
        width: 100%;
    }
}


/* =========================================================
   VAULT AI — FASE 27 PRIVATE INDEX
========================================================= */

.pi-hero,
.pi-alert,
.pi-panel,
.ps-search-panel,
.ps-answer,
.ps-results {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.pi-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-end;
    background:
        radial-gradient(circle at top right, rgba(255,69,58,.18), transparent 40%),
        rgba(255,255,255,.04);
}

.pi-hero h2 {
    margin: 5px 0 6px;
    font-size: 28px;
    letter-spacing: -.04em;
}

.pi-hero p,
.ps-answer p {
    margin: 0;
    color: rgba(255,255,255,.66);
    font-size: 14px;
    line-height: 1.55;
}

.pi-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pi-alert {
    background: rgba(52,199,89,.10);
    border-color: rgba(52,199,89,.22);
}

.pi-alert strong {
    display: block;
    color: var(--text-color);
    font-size: 16px;
}

.pi-alert span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
}

.pi-panel-head,
.ps-results-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.pi-panel-head h3,
.ps-results-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.pi-list,
.ps-list {
    display: grid;
    gap: 10px;
}

.pi-list a,
.ps-list a {
    display: grid;
    gap: 7px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
    text-decoration: none;
}

.pi-list strong,
.ps-list strong {
    display: block;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
}

.pi-list span,
.ps-list span,
.ps-list small,
.pi-list em {
    display: block;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
}

.ps-search {
    display: flex;
    gap: 10px;
}

.ps-search input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: var(--text-color);
    padding: 0 15px;
    font-size: 15px;
    outline: none;
}

.ps-search input:focus {
    border-color: rgba(255,69,58,.42);
    box-shadow: 0 0 0 4px rgba(255,69,58,.10);
}

.ps-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ps-meta em {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(255,69,58,.10);
    color: #ffb3ae;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

@media (max-width: 768px) {
    .pi-hero,
    .pi-alert,
    .pi-panel,
    .ps-search-panel,
    .ps-answer,
    .ps-results {
        margin-left: 16px;
        margin-right: 16px;
        padding: 16px;
        border-radius: 24px;
    }

    .pi-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .pi-hero h2 {
        font-size: 24px;
    }

    .pi-actions,
    .pi-actions .btn-nav,
    .pi-actions .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }

    .ps-search {
        flex-direction: column;
    }

    .ps-search .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   VAULT AI — FASE 28 OCR MANUALE + POLICY LOCALE
========================================================= */

.ocr-panel,
.ocr-result {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.ocr-panel {
    background:
        radial-gradient(circle at top right, rgba(255,69,58,.15), transparent 38%),
        rgba(255,255,255,.04);
}

.ocr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

.ocr-textarea {
    min-height: 240px;
    resize: vertical;
    line-height: 1.55;
}

.ocr-actions,
.ocr-result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.ocr-result.is-hidden {
    display: none;
}

.ocr-loading,
.ocr-error,
.ocr-success {
    border-radius: 20px;
    padding: 16px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.74);
}

.ocr-error {
    background: rgba(255,69,58,.12);
    border: 1px solid rgba(255,69,58,.22);
    color: #ffb3ae;
}

.ocr-success {
    background: rgba(52,199,89,.10);
    border: 1px solid rgba(52,199,89,.22);
}

.ocr-success strong {
    display: block;
    color: var(--text-color);
    font-size: 17px;
}

.ocr-success span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
}

.ocr-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.ocr-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.ocr-list {
    display: grid;
    gap: 10px;
}

.ocr-list a {
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
    text-decoration: none;
}

.ocr-list strong {
    display: block;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
}

.ocr-list span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .ocr-panel,
    .ocr-result {
        margin-left: 16px;
        margin-right: 16px;
        padding: 16px;
        border-radius: 24px;
    }

    .ocr-grid {
        grid-template-columns: 1fr;
    }

    .ocr-actions,
    .ocr-result-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ocr-actions .btn-nav,
    .ocr-actions .btn-nav-primary,
    .ocr-result-actions .btn-nav,
    .ocr-result-actions .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================
   VAULT AI — FASE 29 SEMANTIC MEMORY LOCALE
========================================================= */

.sm-hero,
.sm-alert,
.sm-panel,
.vsx-search-panel,
.vsx-answer,
.vsx-results {
    margin: 0 24px 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 28px;
    padding: 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.sm-hero {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-end;
    background:
        radial-gradient(circle at top right, rgba(10,132,255,.18), transparent 38%),
        radial-gradient(circle at bottom left, rgba(52,199,89,.12), transparent 42%),
        rgba(255,255,255,.04);
}

.sm-hero h2 {
    margin: 5px 0 6px;
    font-size: 28px;
    letter-spacing: -.04em;
}

.sm-hero p,
.vsx-answer p {
    margin: 0;
    color: rgba(255,255,255,.66);
    font-size: 14px;
    line-height: 1.55;
}

.sm-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sm-alert {
    background: rgba(52,199,89,.10);
    border-color: rgba(52,199,89,.22);
}

.sm-alert strong {
    display: block;
    color: var(--text-color);
    font-size: 16px;
}

.sm-alert span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
}

.sm-panel-head,
.vsx-results-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.sm-panel-head h3,
.vsx-results-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.sm-list,
.vsx-list {
    display: grid;
    gap: 10px;
}

.sm-list a,
.vsx-list a {
    display: grid;
    gap: 7px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
    text-decoration: none;
}

.sm-list strong,
.vsx-list strong {
    display: block;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
}

.sm-list span,
.vsx-list span,
.vsx-list small {
    display: block;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

.vsx-search {
    display: grid;
    grid-template-columns: minmax(0,1fr) 180px auto;
    gap: 10px;
}

.vsx-search input,
.vsx-search select {
    min-width: 0;
    height: 46px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: var(--text-color);
    padding: 0 15px;
    font-size: 15px;
    outline: none;
}

.vsx-list a {
    position: relative;
}

.vsx-list em {
    position: absolute;
    top: 13px;
    right: 13px;
    color: #9ff0b5;
    font-size: 14px;
    font-weight: 900;
    font-style: normal;
}

@media (max-width: 768px) {
    .sm-hero,
    .sm-alert,
    .sm-panel,
    .vsx-search-panel,
    .vsx-answer,
    .vsx-results {
        margin-left: 16px;
        margin-right: 16px;
        padding: 16px;
        border-radius: 24px;
    }

    .sm-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .sm-hero h2 {
        font-size: 24px;
    }

    .sm-actions,
    .sm-actions .btn-nav,
    .sm-actions .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }

    .vsx-search {
        grid-template-columns: 1fr;
    }

    .vsx-search .btn-nav-primary {
        width: 100%;
        justify-content: center;
    }

    .vsx-list em {
        position: static;
    }
}


/* =========================================================
   VAULT AI — FASE 30 PRIVACY DASHBOARD
========================================================= */

.pd-hero {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin: 0 24px 18px;
}

.pd-stat,
.pd-panel,
.pd-alert {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.pd-stat {
    padding: 18px;
    text-align: center;
}

.pd-stat strong {
    display: block;
    color: var(--text-color);
    font-size: 30px;
    line-height: 1;
}

.pd-stat span {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 800;
}

.pd-local {
    background: rgba(255,69,58,.10);
}

.pd-hybrid {
    background: rgba(255,204,0,.09);
}

.pd-cloud {
    background: rgba(10,132,255,.10);
}

.pd-alert {
    margin: 0 24px 18px;
    padding: 16px;
    background: rgba(255,159,10,.12);
    border-color: rgba(255,159,10,.24);
}

.pd-alert strong {
    display: block;
    color: var(--text-color);
    font-size: 16px;
}

.pd-alert span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.45;
}

.pd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    padding: 0 24px 120px;
}

.pd-panel {
    padding: 18px;
}

.pd-panel-wide {
    grid-column: 1 / -1;
}

.pd-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.pd-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.pd-list,
.pd-timeline {
    display: grid;
    gap: 10px;
}

.pd-row,
.pd-timeline article {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
}

.pd-row a,
.pd-timeline strong {
    color: var(--text-color);
    text-decoration: none;
}

.pd-row strong,
.pd-timeline strong {
    display: block;
    font-size: 14px;
    line-height: 1.3;
}

.pd-row span:not(.privacy-badge),
.pd-timeline span:not(.privacy-badge) {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

.pd-bars {
    display: grid;
    gap: 13px;
}

.pd-bar-row {
    display: grid;
    gap: 7px;
}

.pd-bar-row div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.pd-bar-row strong {
    color: var(--text-color);
    font-size: 13px;
}

.pd-bar-row span {
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 800;
}

.pd-bar-row i {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    overflow: hidden;
}

.pd-bar-row b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255,69,58,.75), rgba(10,132,255,.75));
}

@media (max-width: 900px) {
    .pd-hero {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 768px) {
    .pd-hero,
    .pd-alert {
        margin-left: 16px;
        margin-right: 16px;
    }

    .pd-hero,
    .pd-grid {
        grid-template-columns: 1fr;
    }

    .pd-grid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pd-row,
    .pd-timeline article {
        grid-template-columns: 1fr;
    }

    .pd-panel {
        border-radius: 24px;
        padding: 16px;
    }
}


/* =========================================================
   VAULT AI — FASE 31 SYSTEM CHECK
========================================================= */

.sc-hero {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
    margin: 0 24px 18px;
}

.sc-stat,
.sc-panel,
.sc-alert {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.sc-stat {
    padding: 18px;
    text-align: center;
}

.sc-stat strong {
    display: block;
    color: var(--text-color);
    font-size: 30px;
    line-height: 1;
}

.sc-stat span {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 800;
}

.sc-ok {
    background: rgba(52,199,89,.10);
}

.sc-warn {
    background: rgba(255,159,10,.12);
}

.sc-alert {
    margin: 0 24px 18px;
    padding: 16px;
    background: rgba(255,159,10,.12);
    border-color: rgba(255,159,10,.24);
}

.sc-alert strong {
    display: block;
    color: var(--text-color);
    font-size: 16px;
}

.sc-alert span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.45;
}

.sc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    padding: 0 24px 120px;
}

.sc-panel {
    padding: 18px;
}

.sc-panel-wide {
    grid-column: 1 / -1;
}

.sc-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.sc-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.sc-check-list,
.sc-file-grid,
.sc-list {
    display: grid;
    gap: 10px;
}

.sc-file-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.sc-check-list div,
.sc-file-grid div,
.sc-list a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
    text-decoration: none;
}

.sc-check-list span,
.sc-file-grid span,
.sc-list strong {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.sc-list a {
    display: block;
}

.sc-list span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .sc-hero,
    .sc-file-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 768px) {
    .sc-hero,
    .sc-alert {
        margin-left: 16px;
        margin-right: 16px;
    }

    .sc-hero,
    .sc-grid,
    .sc-file-grid {
        grid-template-columns: 1fr;
    }

    .sc-grid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sc-panel {
        border-radius: 24px;
        padding: 16px;
    }
}


/* =========================================================
   VAULT AI — FASE 32 SECURITY HARDENING
========================================================= */

.sd-hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin: 0 24px 18px;
}

.sd-stat,
.sd-panel {
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.sd-stat {
    padding: 18px;
    text-align: center;
}

.sd-stat strong {
    display: block;
    color: var(--text-color);
    font-size: 30px;
    line-height: 1;
}

.sd-stat span {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 800;
}

.sd-ok {
    background: rgba(52,199,89,.10);
}

.sd-warn {
    background: rgba(255,159,10,.12);
}

.sd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
    padding: 0 24px 120px;
}

.sd-panel {
    padding: 18px;
}

.sd-panel-wide {
    grid-column: 1 / -1;
}

.sd-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
}

.sd-panel-head h3 {
    margin: 4px 0 0;
    font-size: 18px;
}

.sd-check-list,
.sd-action-list,
.sd-policy-grid {
    display: grid;
    gap: 10px;
}

.sd-check-list div,
.sd-action-list article,
.sd-policy-grid div {
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.035);
    border-radius: 18px;
    padding: 13px;
}

.sd-check-list div {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
}

.sd-check-list strong,
.sd-action-list strong,
.sd-policy-grid strong {
    display: block;
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.3;
}

.sd-check-list em,
.sd-policy-grid span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.50);
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
}

.sd-action-list article {
    display: grid;
    gap: 10px;
}

.sd-action-list article div {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sd-policy-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

@media (max-width: 900px) {
    .sd-policy-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 768px) {
    .sd-hero {
        margin-left: 16px;
        margin-right: 16px;
        grid-template-columns: 1fr;
    }

    .sd-grid,
    .sd-policy-grid {
        grid-template-columns: 1fr;
    }

    .sd-grid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sd-panel {
        border-radius: 24px;
        padding: 16px;
    }

    .sd-check-list div {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   ORARI LAVORO — RIEPILOGO TM TRIMESTRALE
   ===================================================== */
.tm-rec-card {
    margin: 16px 20px 20px;
    border: .5px solid var(--border-color);
    border-radius: 22px;
    background: var(--card-bg);
    padding: 18px 18px 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.07);
}

.tm-rec-card-warning {
    border-color: rgba(255,149,0,.38);
    background: linear-gradient(135deg, rgba(255,149,0,.14), var(--card-bg) 58%);
}

.tm-rec-card-ok {
    border-color: rgba(52,199,89,.32);
    background: linear-gradient(135deg, rgba(52,199,89,.10), var(--card-bg) 58%);
}

.tm-rec-meta {
    color: var(--text-secondary);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.tm-rec-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.tm-rec-label {
    color: var(--text-color);
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.tm-rec-sub {
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: .9rem;
    font-weight: 700;
}

.tm-rec-value {
    min-width: 96px;
    color: var(--warning);
    font-size: 2.25rem;
    font-weight: 950;
    letter-spacing: -.05em;
    line-height: 1;
    text-align: right;
}

.tm-rec-card-ok .tm-rec-value {
    color: var(--success);
}

.tm-rec-note {
    margin-top: 12px;
    border-top: .5px solid var(--border-color);
    padding-top: 12px;
    color: var(--text-secondary);
    font-size: .88rem;
    font-weight: 800;
}

.tm-rec-inline-warning {
    color: var(--warning);
    font-weight: 900;
}

.tm-rec-inline-ok {
    color: var(--success);
    font-weight: 900;
}

@media (max-width: 600px) {
    .tm-rec-card {
        margin: 14px 16px 18px;
        padding: 16px;
        border-radius: 20px;
    }

    .tm-rec-value {
        min-width: 82px;
        font-size: 2rem;
    }

    .tm-rec-label {
        font-size: 1.04rem;
    }
}

/* =====================================================
   FIX ORARI LAVORO - SETTIMANA SENZA SCROLL ORIZZONTALE
   Mantiene i 5 giorni sempre visibili su iPhone.
   ===================================================== */

#week-scroll-sett {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0 20px 14px;
}

#week-scroll-sett .week-scroll-inner {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 8px;
}

#week-scroll-sett .day-card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

#week-scroll-sett .day-card * {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

#week-scroll-sett .day-card .day-ore,
#week-scroll-sett .day-card .day-delta,
#week-scroll-sett .day-card div {
    white-space: nowrap;
}

@media (max-width: 600px) {

    #week-scroll-sett {
        padding-left: 12px;
        padding-right: 12px;
    }

    #week-scroll-sett .week-scroll-inner {
        gap: 6px;
    }

    #week-scroll-sett .day-card {
        min-height: 82px;
        padding: 8px 3px 6px;
        border-radius: 13px;
    }

    #week-scroll-sett .day-nome {
        font-size: .54rem;
        letter-spacing: .02em;
    }

    #week-scroll-sett .day-num {
        font-size: 1rem;
    }

}


/* =====================================================
   ALLENAMENTO / TAI CHI
   ===================================================== */
.workout-page {
    padding: 0 20px 24px;
}

.movement-intro {
    margin: 2px 0 14px;
}
.movement-intro p,
.movement-section-heading span,
.movement-outdoor-empty span {
    margin: 0 0 3px;
    color: var(--text-secondary);
    font-size: .71rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.movement-intro h3 {
    margin: 0;
    font-size: 1.32rem;
    letter-spacing: -.02em;
}
.movement-intro > span {
    display: block;
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: .84rem;
}
.movement-routines {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}
.movement-routine-card {
    display: flex;
    min-width: 0;
    min-height: 112px;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    color: var(--text-color);
    text-decoration: none;
}
.movement-routine-card.is-tai-chi { border-color: color-mix(in srgb, var(--success) 35%, var(--border-color)); }
.movement-routine-card.is-physio { border-color: color-mix(in srgb, #5856d6 38%, var(--border-color)); }
.movement-routine-card.is-chair-yoga { border-color: color-mix(in srgb, #ff9500 42%, var(--border-color)); }
.movement-routine-icon,
.movement-outdoor-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: var(--bg-secondary);
}
.movement-routine-icon { width: 38px; height: 38px; font-size: 1.28rem; }
.movement-routine-card > span:nth-child(2) { min-width: 0; }
.movement-routine-card strong,
.movement-outdoor-row strong { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.movement-routine-card small,
.movement-outdoor-row small { display: block; margin-top: 4px; color: var(--text-secondary); font-size: .74rem; line-height: 1.35; }
.movement-routine-card b,
.movement-outdoor-row b { margin-left: auto; align-self: center; font-size: 1.35rem; font-weight: 400; color: var(--text-secondary); }
.movement-routine-card em { align-self: flex-end; margin-left: -48px; color: var(--text-secondary); font-size: .67rem; font-style: normal; white-space: nowrap; }
.movement-outdoor { margin: 0 0 24px; }
.movement-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 2px 9px; }
.movement-section-heading h3 { margin: 0; font-size: 1.06rem; }
.movement-section-heading a { color: var(--accent); font-size: .78rem; font-weight: 800; text-decoration: none; }
.movement-weekly { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 9px; }
.movement-weekly span { flex: 0 0 auto; padding: 7px 9px; border-radius: 999px; background: var(--bg-secondary); color: var(--text-secondary); font-size: .72rem; }
.movement-weekly strong { color: var(--text-color); }
.movement-outdoor-list { display: grid; gap: 8px; }
.movement-outdoor-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--card-bg); color: var(--text-color); text-decoration: none; }
.movement-outdoor-icon { width: 37px; height: 37px; font-size: 1.1rem; }
.movement-outdoor-row > span:nth-child(2) { min-width: 0; }
.movement-outdoor-empty { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px dashed var(--border-color); border-radius: 18px; background: var(--card-bg); }
.movement-outdoor-empty h3 { margin: 2px 0; font-size: 1rem; }
.movement-outdoor-empty p { margin: 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.4; }
.movement-routine-heading { margin-top: 2px; }

.chair-yoga-page { padding: 0 20px 28px; }
.chair-yoga-hero { display: flex; align-items: center; gap: 18px; margin: 2px 0 16px; padding: 17px; border: 1px solid color-mix(in srgb, #ff9500 40%, var(--border-color)); border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, #ff9500 10%, var(--card-bg)), var(--card-bg)); }
.chair-yoga-hero > div:first-child { min-width: 0; }
.chair-yoga-hero span, .chair-yoga-index { color: var(--text-secondary); font-size: .7rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.chair-yoga-hero h3 { margin: 4px 0 5px; font-size: 1.24rem; }
.chair-yoga-hero p { margin: 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.45; }
.chair-yoga-hero-icon { display: grid; place-items: center; flex: 0 0 auto; width: 55px; height: 55px; border-radius: 18px; background: color-mix(in srgb, #ff9500 17%, var(--card-bg)); font-size: 1.7rem; }
.chair-yoga-list { display: grid; gap: 14px; }
.chair-yoga-card { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; overflow: hidden; border: 1px solid var(--border-color); border-radius: 19px; background: var(--card-bg); }
.chair-yoga-card img { width: 100%; height: 100%; min-height: 184px; object-fit: cover; background: var(--bg-secondary); }
.chair-yoga-card-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 14px; }
.chair-yoga-card h3 { margin: 4px 0; font-size: 1rem; overflow-wrap: anywhere; }
.chair-yoga-card strong { color: #b86e00; font-size: .78rem; }
.chair-yoga-card p { margin: 8px 0 0; color: var(--text-secondary); font-size: .79rem; line-height: 1.43; }

.physio-page { padding: 0 20px 28px; }
.physio-hero { display:flex; align-items:center; gap:18px; margin:2px 0 16px; padding:17px; border:1px solid color-mix(in srgb,#5856d6 36%,var(--border-color)); border-radius:22px; background:linear-gradient(135deg,color-mix(in srgb,#5856d6 9%,var(--card-bg)),var(--card-bg)); }
.physio-hero > div:first-child { min-width:0; }.physio-hero span,.physio-card-body>span { color:var(--text-secondary); font-size:.7rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }.physio-hero h3{margin:4px 0 5px;font-size:1.24rem}.physio-hero p,.physio-card-body p{margin:0;color:var(--text-secondary);font-size:.82rem;line-height:1.45}.physio-hero>div:last-child{display:grid;place-items:center;flex:0 0 auto;width:55px;height:55px;border-radius:18px;background:color-mix(in srgb,#5856d6 14%,var(--card-bg));font-size:1.7rem}
.physio-list { display:grid; gap:14px; }.physio-card { overflow:hidden; border:1px solid var(--border-color); border-radius:19px; background:var(--card-bg); }.physio-gallery { display:grid; grid-template-columns:1fr; max-height:220px; background:var(--bg-secondary); }.physio-gallery.is-multiple { grid-template-columns:repeat(3,minmax(0,1fr)); }.physio-gallery a { display:block; height:175px; background:var(--bg-secondary); cursor:zoom-in; }.physio-gallery img { width:100%; height:175px; object-fit:contain; display:block; }.physio-gallery.is-multiple a,.physio-gallery.is-multiple img { height:125px; }.physio-card-body { padding:14px; }.physio-card h3 { margin:4px 0 7px; font-size:1rem; }.physio-card small { display:block; margin-top:9px; color:#5856d6; font-size:.75rem; font-weight:800; }

.workout-hero,
.workout-card,
.workout-current-card,
.workout-finished-card,
.workout-image-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    margin-bottom: 14px;
    padding: 16px;
}

.workout-hero-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.workout-hero-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(52,199,89,.14);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.workout-hero h3,
.workout-card h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 800;
}

.workout-hero p,
.workout-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: .86rem;
    line-height: 1.5;
}

.workout-progress-top {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.workout-progress-top strong { margin-left: auto; color: var(--text-color); }

.workout-progress-track {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-secondary);
}

.workout-progress-fill {
    height: 100%;
    width: var(--workout-progress, 0%);
    border-radius: 999px;
    background: var(--success);
    transition: width .25s ease;
}

.workout-current-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px 24px;
    align-items: center;
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border-color));
}

.workout-current-card.is-active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.workout-current-info { min-width: 0; }
.workout-current-info h3 { margin: 4px 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.workout-current-info p { margin: 0; color: var(--text-secondary); font-size: .86rem; line-height: 1.45; }
.workout-current-benefits { margin-top: 7px !important; }
.workout-clock { min-width: 150px; text-align: center; }

.workout-timer-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.workout-timer-controls button {
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-color);
    font: inherit;
    font-size: .82rem;
    font-weight: 750;
    cursor: pointer;
}

.workout-timer-controls button:disabled { opacity: .4; cursor: default; }
.workout-timer-controls .workout-complete-current { grid-column: 1 / -1; color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border-color)); }
}

.workout-timer-label {
    color: var(--text-secondary);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.workout-timer {
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -1px;
    margin-top: 4px;
}

.workout-timer-sub {
    color: var(--text-secondary);
    font-size: .86rem;
    margin-top: 2px;
}

.workout-list {
    margin-left: 0;
    margin-right: 0;
}

.workout-item {
    align-items: flex-start;
    border: 1px solid transparent;
    transition: opacity .2s, border-color .2s, background .2s;
}

.workout-item[data-state="completed"] { opacity: .62; }
.workout-item[data-state="current"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--card-bg)); opacity: 1; }
.workout-tick { display: none; }
.workout-item[data-state="completed"] .workout-order { display: none; }
.workout-item[data-state="completed"] .workout-tick { display: inline; }

.workout-mini {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.35;
}

.workout-row-actions {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.workout-check-btn {
    min-height: 44px;
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 900;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.workout-check-icon { font-size: 1rem; }
.workout-check-btn:disabled { opacity: .45; cursor: wait; }

.workout-check-btn.is-done {
    background: var(--success);
    color: var(--card-bg);
    border-color: var(--success);
}

.workout-finished-card { display: none; align-items: center; gap: 14px; border-color: color-mix(in srgb, var(--success) 45%, var(--border-color)); }
.workout-finished-card.is-visible { display: flex; }
.workout-finished-card h3 { margin: 0 0 4px; }
.workout-finished-card p { margin: 2px 0; color: var(--text-secondary); font-size: .86rem; }
.workout-finished-icon { font-size: 2rem; }
.workout-finished-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.workout-status-message { position: sticky; top: 8px; z-index: 5; display: none; padding: 11px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--success); color: var(--text-color); font-size: .85rem; box-shadow: var(--shadow); }
.workout-status-message.is-visible { display: block; }
.workout-status-message.is-error { border-color: var(--danger); color: var(--danger); }

.workout-warning-card {
    border-color: rgba(255,149,0,.35);
}

.workout-image-card {
    overflow: hidden;
    padding: 0;
}

.workout-image-card img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}

@media (max-width: 600px) {
    .workout-page {
        padding: 0 12px 20px;
    }

    .movement-routine-card { min-height: 105px; padding: 11px; }
    .movement-routine-icon { width: 34px; height: 34px; font-size: 1.1rem; }
    .movement-routine-card em { margin-left: -44px; }
    .chair-yoga-page { padding: 0 12px 24px; }
    .physio-page { padding:0 12px 24px; }
    .physio-gallery a,.physio-gallery img { height:160px; }
    .physio-gallery.is-multiple a,.physio-gallery.is-multiple img { height:112px; }
    .chair-yoga-card { grid-template-columns: 42% 1fr; }
    .chair-yoga-card img { min-height: 164px; }
    .chair-yoga-card-body { padding: 12px; }

    .workout-row-actions .nav-pill-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .workout-current-card { grid-template-columns: 1fr; gap: 12px; }
    .workout-clock { min-width: 0; }
    .workout-timer-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workout-check-btn { align-self: center; }
    .workout-check-text { display: none; }
    .workout-check-btn { width: 44px; justify-content: center; padding: 8px; }
    .workout-finished-card { align-items: flex-start; flex-wrap: wrap; }
    .workout-finished-actions { width: 100%; margin-left: 0; }
    .workout-finished-actions > * { flex: 1 1 auto; }
}

/* =====================================================
   OUTDOOR
   ===================================================== */
.outdoor-stats,
.outdoor-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 20px 14px;
}

.outdoor-stat {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 13px;
    text-align: center;
}

.outdoor-stat span {
    display: block;
    font-size: .68rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.outdoor-stat strong {
    font-size: 1rem;
    color: var(--text-color);
}

.outdoor-tabs {
    display: flex;
    gap: 8px;
    padding: 0 20px 14px;
    overflow-x: auto;
}

.outdoor-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 20px 14px;
}

.outdoor-toolbar .nav-pill-btn,
.outdoor-page-actions .nav-pill-btn {
    text-decoration: none;
}

.nav-pill-btn.is-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.nav-pill-btn.is-disabled {
    cursor: default;
    opacity: .55;
}

.outdoor-notice {
    margin: 0 20px 14px;
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.4;
}

.outdoor-notice.is-success {
    border-color: rgba(48, 176, 199, .4);
    color: var(--text-color);
}

.outdoor-notice.is-error {
    border-color: rgba(255, 59, 48, .45);
    color: var(--danger);
}

.outdoor-feature,
.outdoor-entry-list {
    margin: 0 20px 18px;
    box-sizing: border-box;
}

.outdoor-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 20px 10px;
    color: var(--text-secondary);
    font-size: .78rem;
    box-sizing: border-box;
}

.outdoor-section-heading strong {
    color: var(--text-color);
    font-size: 1rem;
}

.outdoor-form .outdoor-section-heading {
    margin: 18px 0 10px;
}

.outdoor-entry-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    color: var(--text-color);
    text-decoration: none;
    transition: border-color .18s, transform .18s;
    min-height: 82px;
    box-sizing: border-box;
}

.outdoor-entry-card + .outdoor-entry-card {
    margin-top: 9px;
}

.outdoor-entry-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.outdoor-entry-card.is-featured {
    padding: 18px;
    background: linear-gradient(135deg, rgba(48,176,199,.12), var(--card-bg));
}

.outdoor-entry-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 14px;
    background: rgba(48,176,199,.14);
    font-size: 1.35rem;
}

.outdoor-entry-content {
    flex: 1;
    min-width: 0;
}

.outdoor-entry-content > strong,
.outdoor-entry-content > span {
    display: block;
}

.outdoor-entry-content > strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.25;
    font-size: .96rem;
}

.outdoor-entry-content > span {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: .78rem;
    line-height: 1.35;
}

.outdoor-entry-metrics {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    align-items: center;
}

.outdoor-entry-metrics span {
    color: var(--accent);
    font-size: .75rem;
    font-weight: 700;
}

.outdoor-entry-metrics i {
    color: var(--text-secondary);
    font-size: .7rem;
    font-style: normal;
}

.outdoor-entry-arrow {
    flex: 0 0 auto;
    align-self: center;
    color: var(--text-secondary);
    font-size: 1.5rem;
    line-height: 1;
}

.outdoor-tabs a,
.outdoor-actions .nav-pill-btn,
.outdoor-delete-form .nav-pill-btn {
    text-decoration: none;
}

.outdoor-tabs a {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.outdoor-tabs a.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(10,132,255,.10);
}

.outdoor-form,
.outdoor-card {
    margin: 0 20px 16px;
    padding: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 22px;
}

.outdoor-form-title,
.outdoor-list-title {
    margin: 0 20px 12px;
    font-size: .72rem;
    color: var(--text-secondary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.outdoor-form label {
    display: block;
    margin-bottom: 12px;
}

.outdoor-form label span {
    display: block;
    font-size: .72rem;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 5px;
}

.outdoor-form input,
.outdoor-form select,
.outdoor-form textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-secondary);
    color: var(--text-color);
    padding: 10px 12px;
    font-family: inherit;
    font-size: .9rem;
}

.outdoor-form textarea {
    resize: vertical;
}

.outdoor-form small {
    display: block;
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: .72rem;
    line-height: 1.4;
}

.outdoor-quick-actions {
    padding: 0 20px 14px;
    display: flex;
}

.outdoor-quick-actions .nav-pill-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: .92rem;
    background: rgba(10,132,255,.12);
    border-color: rgba(10,132,255,.35);
}

.outdoor-import-box {
    display: flex;
    gap: 12px;
    margin: 2px 0 16px;
    padding: 16px;
    border: 2px dashed rgba(10,132,255,.45);
    border-radius: 18px;
    background: rgba(10,132,255,.08);
}

.outdoor-import-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(10,132,255,.14);
    font-size: 1.35rem;
}

.outdoor-import-content {
    flex: 1;
    min-width: 0;
}

.outdoor-import-title {
    font-size: .98rem;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 5px;
}

.outdoor-import-subtitle {
    font-size: .8rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 10px;
}

.outdoor-import-input {
    width: 100%;
    margin-bottom: 8px;
}

.outdoor-import-hint {
    font-size: .72rem;
    color: var(--accent);
    line-height: 1.45;
}

.outdoor-grid-2,
.outdoor-grid-3 {
    display: grid;
    gap: 10px;
}

.outdoor-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.outdoor-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.outdoor-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.outdoor-list {
    margin: 0 20px 24px;
}

.outdoor-item {
    text-decoration: none;
}

.outdoor-card h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.outdoor-card p {
    margin: 0 0 8px;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: .9rem;
}

.outdoor-detail-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.outdoor-detail-list > div {
    display: grid;
    grid-template-columns: minmax(90px, .45fr) 1fr;
    gap: 12px;
    padding: 9px 0;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    padding: 10px 12px;
    background: var(--bg-secondary);
}

.outdoor-detail-list > div:last-child {
    border-bottom: 1px solid var(--border-color);
}

.outdoor-detail-list dt {
    color: var(--text-secondary);
    font-size: .8rem;
}

.outdoor-detail-list dd {
    margin: 0;
    color: var(--text-color);
    font-size: .86rem;
}

.outdoor-page-actions {
    margin: 0 20px 14px;
}

.outdoor-delete-form {
    margin: 0 20px 24px;
}

.outdoor-danger {
    border-color: rgba(255,59,48,.35);
    color: var(--danger);
}

.outdoor-notice-hidden {
    display: none;
}

.outdoor-detail-card {
    padding: 16px;
}

.outdoor-detail-layout {
    margin: 0;
}

.outdoor-quick-edit[hidden] {
    display: none;
}

.outdoor-quick-edit h3 {
    margin: 0 0 14px;
}

.outdoor-detail-summary .outdoor-detail-stats {
    padding: 0 0 14px;
}

.outdoor-coordinates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: var(--bg-secondary);
}

.outdoor-coordinates span {
    color: var(--text-secondary);
    font-size: .8rem;
}

.outdoor-coordinates strong {
    color: var(--text-color);
    font-size: .86rem;
    word-break: break-word;
    text-align: right;
}

.outdoor-location-actions .nav-pill-btn {
    flex: 1 1 auto;
    justify-content: center;
}

.outdoor-location-message {
    margin-top: 10px !important;
    color: var(--text-secondary) !important;
    font-size: .8rem !important;
}

.outdoor-detail-card .outdoor-notice {
    margin: 12px 0 0;
}

.outdoor-note-text {
    color: var(--text-color) !important;
    white-space: normal;
}

.outdoor-route-map {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 190px;
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background:
        linear-gradient(rgba(48,176,199,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(48,176,199,.08) 1px, transparent 1px),
        var(--bg-secondary);
    background-size: 28px 28px;
}

.outdoor-route-map svg {
    display: block;
    width: 100%;
    height: 100%;
}

.outdoor-route-map .outdoor-route-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.outdoor-route-map .outdoor-route-start {
    fill: var(--success);
    stroke: var(--card-bg);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.outdoor-route-map .outdoor-route-end {
    fill: var(--danger);
    stroke: var(--card-bg);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.outdoor-route-map:fullscreen {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background-color: var(--bg-color);
}

.outdoor-route-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: .76rem;
}

.outdoor-route-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.outdoor-route-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.outdoor-route-legend .is-start {
    background: var(--success);
}

.outdoor-route-legend .is-end {
    background: var(--danger);
}

.outdoor-photo-empty {
    color: var(--text-color) !important;
    font-weight: 700;
}

.outdoor-nearby-list {
    display: grid;
    gap: 8px;
}

.outdoor-nearby-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    background: var(--bg-secondary);
    color: var(--text-color);
    text-decoration: none;
}

.outdoor-nearby-list a:hover {
    border-color: var(--accent);
}

.outdoor-nearby-list span,
.outdoor-nearby-list strong,
.outdoor-nearby-list small {
    display: block;
}

.outdoor-nearby-list span {
    min-width: 0;
}

.outdoor-nearby-list strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .86rem;
}

.outdoor-nearby-list small {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: .72rem;
}

.outdoor-nearby-list b {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: .78rem;
}

.outdoor-delete-zone {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid rgba(255,59,48,.22);
}

.outdoor-delete-zone strong,
.outdoor-delete-zone span {
    display: block;
    width: 100%;
}

.outdoor-delete-zone strong {
    color: var(--danger);
    font-size: .82rem;
}

.outdoor-delete-zone span {
    margin-top: -7px;
    color: var(--text-secondary);
    font-size: .76rem;
}

@media (max-width: 600px) {
    .outdoor-stats,
    .outdoor-detail-stats,
    .outdoor-tabs,
    .outdoor-toolbar,
    .outdoor-quick-actions,
    .outdoor-list,
    .outdoor-delete-form {
        margin-left: 12px;
        margin-right: 12px;
    }

    .outdoor-feature,
    .outdoor-entry-list,
    .outdoor-section-heading,
    .outdoor-notice,
    .outdoor-page-actions {
        margin-left: 12px;
        margin-right: 12px;
    }

    .outdoor-toolbar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .outdoor-toolbar .nav-pill-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .outdoor-stats,
    .outdoor-detail-stats {
        padding-bottom: 12px;
    }

    .outdoor-form,
    .outdoor-card {
        margin-left: 12px;
        margin-right: 12px;
        padding: 14px;
    }

    .outdoor-import-box {
        flex-direction: column;
        gap: 10px;
        padding: 14px;
    }

    .outdoor-grid-2,
    .outdoor-grid-3 {
        grid-template-columns: 1fr;
    }

    .outdoor-detail-list {
        grid-template-columns: 1fr;
    }

    .outdoor-entry-card,
    .outdoor-entry-card.is-featured {
        gap: 10px;
        min-height: 76px;
        padding: 12px;
    }

    .outdoor-entry-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
        font-size: 1.15rem;
    }

    .outdoor-entry-metrics {
        gap: 6px;
    }
}

@media (min-width: 900px) {
    .outdoor-entry-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .outdoor-entry-card + .outdoor-entry-card {
        margin-top: 0;
    }

    .outdoor-form,
    .outdoor-card,
    .outdoor-feature,
    .outdoor-entry-list,
    .outdoor-section-heading,
    .outdoor-toolbar,
    .outdoor-stats,
    .outdoor-detail-stats,
    .search-filter-container {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .outdoor-detail-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        max-width: 1100px;
        margin: 0 auto 16px;
    }

    .outdoor-detail-layout .outdoor-card {
        width: auto;
        max-width: none;
        margin: 0;
    }

    .outdoor-detail-summary,
    .outdoor-route-card {
        grid-column: 1 / -1;
    }
}

/* =====================================================
   AREA PRIVATA — Agenda task per periodi su riga
   ===================================================== */
.task-agenda-section {
    overflow: hidden;
}

.task-period-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 12px 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: .5px solid var(--border-color);
}
.task-period-tabs::-webkit-scrollbar { display: none; }

.task-period-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: max-content;
    padding: 7px 10px;
    border: .5px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.task-period-chip:active { transform: scale(.96); }
.task-period-chip.active {
    color: var(--accent);
    background: rgba(10,132,255,.13);
    border-color: rgba(10,132,255,.38);
    box-shadow: inset 0 0 0 1px rgba(10,132,255,.12);
}
.task-period-chip.danger:not(.active) {
    color: var(--danger);
    border-color: rgba(255,59,48,.28);
    background: rgba(255,59,48,.08);
}
.task-period-chip.danger.active {
    color: var(--danger);
    border-color: rgba(255,59,48,.42);
    background: rgba(255,59,48,.13);
    box-shadow: inset 0 0 0 1px rgba(255,59,48,.12);
}
.task-period-chip-icon { font-size: .86rem; line-height: 1; }
.task-period-chip-label { line-height: 1; }
.task-period-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: currentColor;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
}

.task-period-rows {
    padding: 0;
}
.task-agenda-panel {
    display: none;
}
.task-agenda-panel.active {
    display: block;
}
.task-period-row {
    background: transparent;
    border: none;
}
.task-agenda-list {
    padding: 0;
    min-height: 64px;
}
.task-agenda-list .task-empty-msg {
    padding: 22px 16px 26px;
    font-size: .88rem;
}
.task-agenda-list .task-item:last-child {
    border-bottom: none;
}
.task-period-row-highlight {
    animation: taskPeriodFlash .75s ease;
}
@keyframes taskPeriodFlash {
    0%   { background: rgba(10,132,255,.12); }
    100% { background: transparent; }
}
.task-date-input {
    flex: 0 0 132px;
    min-width: 118px;
}

@media (max-width: 600px) {
    .task-period-tabs {
        padding: 9px 10px 8px;
        gap: 6px;
    }
    .task-period-chip {
        padding: 5px 8px;
        font-size: .72rem;
    }
    .task-add-row {
        flex-wrap: wrap;
    }
    .task-add-input {
        min-width: 0;
    }
    .task-date-input {
        flex: 1 1 100%;
        order: 2;
    }
    .task-mic-btn,
    .task-add-btn {
        order: 3;
    }
}

@media (min-width: 768px) {
    .task-period-tabs {
        padding: 12px 16px 10px;
        gap: 10px;
    }
    .task-period-chip {
        padding: 7px 11px;
        font-size: .8rem;
    }
}

/* =====================================================
   AREA PRIVATA — titoli agenda task più evidenti
   ===================================================== */
.ap-section-title.task-main-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
    margin: 22px 0 10px;
    color: var(--text-color);
    font-size: 1.12rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.task-main-title-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.task-main-title-icon {
    font-size: 1.18rem;
    line-height: 1;
}

.task-main-title .task-main-badge {
    margin-left: auto;
    min-width: 30px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: .86rem;
    font-weight: 900;
    letter-spacing: .01em;
    flex-shrink: 0;
}

.task-main-title + .task-agenda-section {
    margin-top: 0;
}

.task-agenda-section > .task-period-tabs:first-child {
    border-top: none;
}

@media (max-width: 600px) {
    .ap-section-title.task-main-title {
        padding: 0 16px;
        margin: 20px 0 9px;
        font-size: 1.02rem;
    }

    .task-main-title-icon {
        font-size: 1.1rem;
    }

    .task-main-title .task-main-badge {
        min-width: 28px;
        height: 22px;
        font-size: .74rem;
    }
}


/* =====================================================
   AREA FAMIGLIA — Widget Documenti / Garanzie
   ===================================================== */
.fam-doc-widget {
    display: block;
    margin: 16px 16px 14px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(52,199,89,.11), rgba(10,132,255,.07));
    border: .5px solid rgba(52,199,89,.24);
    border-radius: 18px;
    color: var(--text-color);
    text-decoration: none;
}

.hc-area-quick-link {
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 16px 14px;
    padding:13px 15px;
    border:1px solid rgba(52,199,89,.34);
    border-radius:18px;
    background:rgba(52,199,89,.11);
    color:var(--text-color);
    text-decoration:none;
}
.hc-area-quick-link__icon { font-size:1.25rem; }
.hc-area-quick-link span:nth-child(2) { display:grid; gap:2px; flex:1; min-width:0; }
.hc-area-quick-link strong { color:var(--success); font-size:.94rem; }
.hc-area-quick-link em { color:var(--text-secondary); font-size:.76rem; font-style:normal; font-weight:700; }
.hc-area-quick-link > span:last-child { color:var(--text-secondary); font-size:1.35rem; }

.fam-doc-widget-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fam-doc-kicker {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--success);
    margin-bottom: 4px;
}

.fam-doc-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.fam-doc-arrow {
    color: var(--text-secondary);
    font-size: 1.45rem;
    line-height: 1;
}

.fam-doc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.fam-doc-stat {
    background: rgba(255,255,255,.05);
    border: .5px solid var(--border-color);
    border-radius: 14px;
    padding: 10px 8px;
    text-align: center;
}

.fam-doc-stat strong {
    display: block;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
}

.fam-doc-stat span {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1.2;
}

.fam-doc-stat.danger strong { color: var(--danger); }
.fam-doc-stat.warning strong { color: var(--warning); }
.fam-doc-stat.soft strong { color: var(--accent); }

.fam-doc-next {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 10px;
    border-top: .5px solid var(--border-color);
}

.fam-doc-next-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .78rem;
}

.fam-doc-next-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.fam-doc-next-date {
    flex-shrink: 0;
    font-weight: 800;
    color: var(--text-secondary);
}

.fam-doc-next-date.warning { color: var(--warning); }
.fam-doc-next-date.danger { color: var(--danger); }
.fam-doc-next-date.muted { color: var(--text-secondary); }

.fam-doc-empty {
    padding-top: 10px;
    border-top: .5px solid var(--border-color);
    color: var(--text-secondary);
    font-size: .8rem;
    font-weight: 600;
}

@media (max-width: 389px) {
    .fam-doc-widget {
        margin: 14px 12px 12px;
        padding: 14px;
    }

    .fam-doc-stat {
        padding: 9px 5px;
    }

    .fam-doc-stat strong {
        font-size: 1.1rem;
    }

    .fam-doc-stat span {
        font-size: .62rem;
    }
}


/* =====================================================
   v3.8 — DOCUMENTI: dashboard layout 3
   ===================================================== */
.doc-dashboard {
    padding: 6px 16px 14px;
}

.doc-dashboard-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

.doc-dash-stat {
    position: relative;
    min-width: 0;
    padding: 12px 6px 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    border-right: .5px solid var(--border-color);
}

.doc-dash-stat:last-child {
    border-right: none;
}

.doc-dash-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 1.05rem;
    line-height: 1;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    filter: grayscale(1);
    opacity: .55;
}

.doc-dash-value {
    font-size: 1.55rem;
    font-weight: 850;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.doc-dash-label {
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-secondary);
    white-space: nowrap;
}

.doc-dash-stat.is-active .doc-dash-icon {
    filter: none;
    opacity: 1;
}

.doc-dash-stat.danger.is-active .doc-dash-icon,
.doc-dash-stat.danger.is-active .doc-dash-value,
.doc-dash-stat.danger.is-active .doc-dash-label {
    color: var(--danger);
}

.doc-dash-stat.alert.is-active .doc-dash-icon,
.doc-dash-stat.alert.is-active .doc-dash-value,
.doc-dash-stat.alert.is-active .doc-dash-label {
    color: var(--warning);
}

.doc-dash-stat.warn.is-active .doc-dash-icon,
.doc-dash-stat.warn.is-active .doc-dash-value,
.doc-dash-stat.warn.is-active .doc-dash-label {
    color: #d8a800;
}

.doc-dash-stat.total.is-active .doc-dash-icon,
.doc-dash-stat.total.is-active .doc-dash-value,
.doc-dash-stat.total.is-active .doc-dash-label {
    color: var(--accent);
}

.doc-dash-stat.danger.is-active {
    background: rgba(255,59,48,.06);
}

.doc-dash-stat.alert.is-active {
    background: rgba(255,149,0,.06);
}

.doc-dash-stat.warn.is-active {
    background: rgba(255,214,10,.07);
}

.doc-dash-stat.total.is-active {
    background: rgba(10,132,255,.06);
}

.doc-next-card {
    margin-top: 10px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

.doc-next-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 10px;
    border-bottom: .5px solid var(--border-color);
}

.doc-next-header span {
    font-size: .85rem;
    font-weight: 800;
}

.doc-next-header small {
    font-size: .72rem;
    color: var(--text-secondary);
    font-weight: 700;
    white-space: nowrap;
}

.doc-next-list {
    display: flex;
    flex-direction: column;
}

.doc-next-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: .5px solid var(--border-color);
}

.doc-next-row:last-child {
    border-bottom: none;
}

.doc-next-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-next-title {
    font-size: .86rem;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-next-meta {
    font-size: .72rem;
    color: var(--text-secondary);
}

.doc-next-days {
    flex-shrink: 0;
    font-size: .76rem;
    font-weight: 800;
    color: var(--text-secondary);
    white-space: nowrap;
}

.doc-next-row.scaduto .doc-next-days { color: var(--danger); }
.doc-next-row.alert .doc-next-days   { color: var(--warning); }
.doc-next-row.warn .doc-next-days    { color: #d8a800; }

/* Tab Documenti più uniforme su 4 voci */
.ap-tab-bar .ap-tab-btn {
    min-width: 0;
}

.ap-tab-bar .ap-tab-btn .tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 389px) {
    .doc-dashboard {
        padding-left: 12px;
        padding-right: 12px;
    }

    .doc-dash-stat {
        padding: 10px 4px;
    }

    .doc-dash-icon {
        width: 25px;
        height: 25px;
        font-size: .95rem;
    }

    .doc-dash-value {
        font-size: 1.35rem;
    }

    .doc-dash-label {
        font-size: .62rem;
    }
}

@media (min-width: 768px) {
    .doc-dashboard {
        padding-left: 28px;
        padding-right: 28px;
    }

    .doc-dashboard-card {
        border-radius: 20px;
    }

    .doc-dash-stat {
        padding: 15px 8px 14px;
    }

    .doc-dash-icon {
        width: 32px;
        height: 32px;
        font-size: 1.15rem;
    }

    .doc-dash-value {
        font-size: 1.8rem;
    }
}


/* =====================================================
   v3.8 — DOCUMENTI: campi specifici per categoria
   ===================================================== */
.doc-cat-panel {
    margin: 0 0 18px;
    padding: 14px;
    background: rgba(10,132,255,.05);
    border: .5px solid rgba(10,132,255,.18);
    border-radius: 16px;
}
.doc-panel-title {
    font-size: .9rem;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 10px;
}
.doc-panel-hint {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--text-secondary);
}
.doc-cat-panel .doc-form-section:last-child {
    margin-bottom: 0;
}
.doc-cat-panel .doc-form-row-2col:last-child .doc-form-section {
    margin-bottom: 0;
}
@media (max-width: 600px) {
    .doc-cat-panel {
        padding: 12px;
        border-radius: 14px;
    }
}

/* =====================================================
   HOME HUBCLOUD — layout approvato
   ===================================================== */
.hub-home-body {
    background: #111827;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: #1f2937;
}

.hub-home {
    width: 100%;
    max-width: 690px;
    min-height: 100vh;
    min-height: 100dvh;
    background: #f7f8fb;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
}

.hub-hero {
    position: relative;
    min-height: 388px;
    padding: 34px 38px 0;
    background:
        linear-gradient(180deg, rgba(0,40,90,.08) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.12) 100%),
        url('../img/home-hero-molveno.webp');
    background-size: cover;
    background-position: center top;
}

.hub-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.hub-logo-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.28);
}

.hub-logo-cloud {
    width: 62px;
    height: 42px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 7px rgba(0,0,0,.25));
}

.hub-logo-title {
    font-size: 2.35rem;
    line-height: .9;
    font-weight: 900;
    letter-spacing: -.045em;
}

.hub-logo-subtitle {
    margin-top: 7px;
    font-size: 1.02rem;
    font-weight: 600;
    opacity: .86;
    letter-spacing: .01em;
}

.hub-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.hub-access-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 17px;
    border: none;
    border-radius: 999px;
    background: #0a84ff;
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 8px 22px rgba(10,132,255,.34);
    text-decoration: none;
}


.hub-info-card {
    position: absolute;
    left: 94px;
    right: 94px;
    bottom: -33px;
    z-index: 3;
    height: 76px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 15px;
    box-shadow: 0 12px 35px rgba(15,23,42,.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hub-info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    height: 100%;
    border-right: 1px solid rgba(31,41,55,.08);
}
.hub-info-item:last-child { border-right: none; }
.hub-info-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}
.hub-info-icon svg { width: 100%; height: 100%; }
.hub-blue { color: #0a84ff; }
.hub-gold { color: #ffb000; }
.hub-weather-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.hub-info-item strong {
    display: block;
    color: #25324a;
    font-size: .82rem;
    line-height: 1.15;
    font-weight: 800;
    white-space: nowrap;
}
.hub-weather strong { font-size: 1.55rem; letter-spacing: -.04em; }
.hub-info-item span {
    display: block;
    color: #45546d;
    font-size: .74rem;
    line-height: 1.25;
    font-weight: 600;
    white-space: nowrap;
}

.hub-main {
    padding: 60px 37px 28px;
    flex: 1;
}

.hub-pensiero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 142px;
    padding: 18px 31px 18px 21px;
    border-radius: 17px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.64)),
        linear-gradient(135deg, #eaf5ff 0%, #f8fbff 48%, #dbeafe 100%);
    border: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 7px 25px rgba(15,23,42,.08);
    color: #1f2a44;
    text-decoration: none;
}
.hub-pensiero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 35%;
    height: 82%;
    background: linear-gradient(135deg, transparent 10%, rgba(147,197,253,.20) 65%, rgba(59,130,246,.18));
    clip-path: polygon(10% 100%, 45% 20%, 72% 100%, 100% 35%, 100% 100%);
    pointer-events: none;
}
.hub-pensiero-illustrazione {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hub-meditation-dot {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(59,130,246,.26), rgba(59,130,246,.08) 48%, transparent 49%);
}
.hub-meditation-person {
    position: relative;
    z-index: 1;
    font-size: 3.1rem;
    transform: translateY(5px);
}
.hub-pensiero-content { position: relative; z-index: 1; min-width: 0; }
.hub-pensiero-label {
    color: #0a84ff;
    font-size: .82rem;
    font-weight: 900;
    margin-bottom: 13px;
    text-transform: uppercase;
}
.hub-pensiero-testo {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.28rem;
    line-height: 1.35;
    font-style: italic;
    font-weight: 700;
    color: #1d2d52;
}

.hub-gallery-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 19px;
    margin: 34px 9px 26px;
    color: #232c3b;
}
.hub-gallery-title span { height: 1px; background: rgba(31,41,55,.18); }
.hub-gallery-title strong {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .02em;
    white-space: nowrap;
}

.hub-gallery-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.hub-gallery-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #1f2937;
    text-decoration: none;
}
.hub-gallery-photo {
    width: 102px;
    height: 102px;
    border-radius: 50%;
    overflow: hidden;
    background: #e5e7eb;
    box-shadow: 0 7px 17px rgba(15,23,42,.14);
}
.hub-gallery-photo img { width: 100%; height: 100%; object-fit: cover; }
.hub-gallery-badge {
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 5px 14px rgba(15,23,42,.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a84ff;
    font-size: 1.15rem;
}
.hub-gallery-name {
    margin-top: 8px;
    font-size: .88rem;
    font-weight: 900;
    color: #202a3b;
}
.hub-gallery-count {
    margin-top: 2px;
    font-size: .76rem;
    font-weight: 600;
    color: #5b677b;
}

@media (max-width: 600px) {
    .hub-home { max-width: none; box-shadow: none; }
    .hub-hero { min-height: 252px; padding: 22px 22px 0; }
    .hub-logo-cloud { width: 42px; height: 31px; }
    .hub-logo-title { font-size: 1.52rem; }
    .hub-logo-subtitle { font-size: .78rem; margin-top: 5px; }
    .hub-hero-actions { gap: 8px; }
    .hub-access-btn { padding: 8px 12px; font-size: .72rem; }
    .hub-info-card { left: 20px; right: 20px; bottom: -28px; height: 58px; border-radius: 12px; }
    .hub-info-item { gap: 6px; padding: 0 5px; }
    .hub-info-icon { width: 24px; height: 24px; }
    .hub-weather-icon { font-size: 1.45rem; }
    .hub-info-item strong { font-size: .56rem; }
    .hub-weather strong { font-size: 1.05rem; }
    .hub-info-item span { font-size: .52rem; }
    .hub-main { padding: 45px 14px 22px; }
    .hub-pensiero { min-height: 88px; gap: 10px; padding: 13px 16px 13px 12px; border-radius: 14px; }
    .hub-pensiero-illustrazione { width: 72px; height: 72px; }
    .hub-meditation-person { font-size: 2.1rem; }
    .hub-pensiero-label { font-size: .62rem; margin-bottom: 7px; }
    .hub-pensiero-testo { font-size: .95rem; line-height: 1.3; }
    .hub-gallery-title { margin: 23px 5px 18px; gap: 10px; }
    .hub-gallery-title strong { font-size: .78rem; gap: 7px; }
    .hub-gallery-row { gap: 7px; }
    .hub-gallery-photo { width: 72px; height: 72px; }
    .hub-gallery-badge { width: 26px; height: 26px; margin-top: -13px; font-size: .92rem; }
    .hub-gallery-name { font-size: .72rem; margin-top: 5px; }
    .hub-gallery-count { font-size: .61rem; }
}

@media (max-width: 374px) {
    .hub-hero { padding-left: 14px; padding-right: 14px; }
    .hub-logo-title { font-size: 1.32rem; }
    .hub-logo-subtitle { font-size: .68rem; }
    .hub-access-btn { padding: 7px 9px; }
    .hub-gallery-photo { width: 64px; height: 64px; }
}



/* =====================================================
   HC BOTTOM NAV — footer comune ospite/loggato
   ===================================================== */
.hc-bottom-nav {
    position: relative;
    z-index: 80;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    padding: 10px 10px max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(135deg, #061d35 0%, #082b4e 55%, #03172c 100%);
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 -12px 34px rgba(3, 23, 44, .30);
    color: rgba(255,255,255,.72);
}

.hc-bottom-nav-item {
    position: relative;
    flex: 1;
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
}

.hc-bottom-nav-item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.hc-bottom-nav-item.is-active,
.hc-bottom-nav-item:hover {
    color: #ffffff;
}

.hc-bottom-nav-item.is-active svg {
    filter: drop-shadow(0 4px 10px rgba(10,132,255,.45));
}

.hc-nav-icon-wrap {
    position: relative;
    display: inline-flex;
}

.hc-badge,
.hc-nav-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ff2d55;
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    line-height: 1;
}

.hc-nav-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    border: 2px solid #082b4e;
}

/* =====================================================
   HUBCLOUD HOME FIX DEFINITIVO 2026-06-29
   Questo blocco deve restare in fondo al file.
   ===================================================== */

.hub-home-body {
    background: #0f172a !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding: 10px 0 !important;
    color: #102033 !important;
}

.hub-home {
    width: min(690px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    min-height: calc(100vh - 20px) !important;
    min-height: calc(100dvh - 20px) !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: #f7f8fb !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.35) !important;
    display: flex !important;
    flex-direction: column !important;
}

.hub-hero {
    border-radius: 0 0 24px 24px !important;
    overflow: visible !important;
    min-height: 330px !important;
    padding: 34px 38px 0 !important;
    background:
        linear-gradient(180deg, rgba(0,40,90,.08) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.12) 100%),
        url('../img/home-hero-molveno.webp') center top / cover no-repeat !important;
}

.hub-logged-greeting {
    position: relative;
    z-index: 3;
    margin-top: 24px;
    max-width: 360px;
    padding: 14px 18px;
    border-radius: 20px;
    background: rgba(255,255,255,.24);
    border: 1px solid rgba(255,255,255,.38);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hub-logged-kicker {
    font-size: .72rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
}

.hub-logged-title {
    margin-top: 4px;
    font-size: 1.45rem;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -.04em;
}

.hub-info-card .hub-weather span {
    font-size: .78rem;
}

.hub-home .hc-bottom-nav {
    position: relative !important;
    width: 100% !important;
    margin-top: auto !important;
    border-radius: 0 0 24px 24px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #061d35 0%, #082b4e 55%, #03172c 100%) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 -12px 34px rgba(3, 23, 44, .30) !important;
}

@media (max-width: 600px) {
    .hub-home-body {
        padding: 8px 0 !important;
    }

    .hub-home {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-height: calc(100dvh - 16px) !important;
        border-radius: 22px !important;
    }

    .hub-hero {
        min-height: 286px !important;
        padding: 30px 28px 0 !important;
        border-radius: 22px 22px 0 0 !important;
        background-position: center top !important;
    }

    .hub-logo-title {
        font-size: 1.72rem !important;
    }

    .hub-logo-subtitle {
        font-size: .84rem !important;
    }

    .hub-logo-cloud {
        width: 46px !important;
        height: 34px !important;
    }

    .hub-hero-actions {
        gap: 8px !important;
    }

    .hub-access-btn {
        padding: 9px 13px !important;
        font-size: .75rem !important;
        max-width: 112px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .hub-logged-greeting {
        margin-top: 18px !important;
        max-width: 250px !important;
        padding: 11px 14px !important;
        border-radius: 17px !important;
    }

    .hub-logged-title {
        font-size: 1rem !important;
    }

    .hub-info-card {
        left: 18px !important;
        right: 18px !important;
        bottom: -28px !important;
        height: 72px !important;
        border-radius: 15px !important;
    }

    .hub-home .hc-bottom-nav {
        border-radius: 0 0 22px 22px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
}


/* =====================================================
   HUBCLOUD HOME — FIX iPhone header/logout 2026-06-29
   ===================================================== */
.hub-hero-top {
    align-items: flex-start;
}
.hub-hero-actions {
    min-width: 0;
    max-width: 44%;
    justify-content: flex-end;
}
.hub-user-logout::after {
    content: "\21AA";
    font-size: .9em;
    line-height: 1;
    opacity: .9;
    margin-left: 2px;
}

@media (max-width: 600px) {
    .hub-hero {
        padding-left: 18px !important;
        padding-right: 14px !important;
    }
    .hub-hero-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 8px !important;
        align-items: flex-start !important;
    }
    .hub-logo-block,
    .hub-logo-line,
    .hub-logo-line > div {
        min-width: 0 !important;
    }
    .hub-logo-line {
        gap: 7px !important;
    }
    .hub-logo-title {
        font-size: clamp(1.34rem, 8.3vw, 2.05rem) !important;
        line-height: .9 !important;
        max-width: 178px !important;
        white-space: nowrap !important;
    }
    .hub-logo-subtitle {
        font-size: clamp(.68rem, 3.5vw, .88rem) !important;
        line-height: 1.08 !important;
        max-width: 156px !important;
    }
    .hub-logo-cloud {
        width: clamp(38px, 12vw, 48px) !important;
        height: clamp(28px, 9vw, 36px) !important;
    }
    .hub-hero-actions {
        max-width: none !important;
        width: auto !important;
        gap: 6px !important;
        justify-self: end !important;
        overflow: visible !important;
    }
    .hub-access-btn {
        max-width: 108px !important;
        min-width: 0 !important;
        padding: 8px 11px !important;
        gap: 5px !important;
        font-size: .72rem !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }
    .hub-access-btn svg {
        width: 13px !important;
        height: 13px !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 374px) {
    .hub-hero {
        padding-left: 12px !important;
        padding-right: 10px !important;
    }
    .hub-logo-title {
        font-size: 1.25rem !important;
        max-width: 140px !important;
    }
    .hub-logo-subtitle {
        font-size: .66rem !important;
        max-width: 126px !important;
    }
    .hub-access-btn {
        max-width: 92px !important;
        padding: 7px 9px !important;
    }
}


/* =====================================================
   HUBCLOUD HOME FIX 3 — header iPhone + tema + logout
   2026-06-29
   ===================================================== */

/* Il tema home usava colori rigidi: qui il dark mode diventa visibile */
html[data-theme="dark"] .hub-home,
body[data-theme="dark"] .hub-home {
    background: #101827 !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .hub-main,
body[data-theme="dark"] .hub-main {
    background: linear-gradient(180deg, #101827 0%, #111827 100%) !important;
}
html[data-theme="dark"] .hub-info-card,
body[data-theme="dark"] .hub-info-card,
html[data-theme="dark"] .hub-pensiero,
body[data-theme="dark"] .hub-pensiero {
    background: rgba(20, 29, 45, .94) !important;
    color: #f8fafc !important;
    border-color: rgba(255,255,255,.10) !important;
}
html[data-theme="dark"] .hub-info-item strong,
body[data-theme="dark"] .hub-info-item strong,
html[data-theme="dark"] .hub-gallery-name,
body[data-theme="dark"] .hub-gallery-name,
html[data-theme="dark"] .hub-pensiero-testo,
body[data-theme="dark"] .hub-pensiero-testo,
html[data-theme="dark"] .hub-gallery-title strong,
body[data-theme="dark"] .hub-gallery-title strong {
    color: #f8fafc !important;
}
html[data-theme="dark"] .hub-info-item span,
body[data-theme="dark"] .hub-info-item span,
html[data-theme="dark"] .hub-gallery-count,
body[data-theme="dark"] .hub-gallery-count {
    color: rgba(248,250,252,.70) !important;
}
html[data-theme="dark"] .hub-gallery-title span,
body[data-theme="dark"] .hub-gallery-title span {
    background: rgba(255,255,255,.20) !important;
}

/* Il click su nome/avatar deve essere chiaramente logout */
.hub-user-logout {
    cursor: pointer !important;
}
.hub-user-logout::after {
    content: "\21AA";
    font-size: .9em;
    line-height: 1;
    opacity: .9;
    margin-left: 2px;
}

/* Switch più compatto e sempre dentro l'iPhone */

/* Loggato: niente sovrapposizione fra logo, nome e switch */
.hub-home.is-logged .hub-hero-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
}
.hub-home.is-logged .hub-logo-block,
.hub-home.is-logged .hub-logo-line,
.hub-home.is-logged .hub-logo-line > div {
    min-width: 0 !important;
}
.hub-home.is-logged .hub-hero-actions {
    max-width: none !important;
    width: auto !important;
    justify-self: end !important;
    overflow: visible !important;
}
.hub-home.is-logged .hub-access-btn {
    max-width: 112px !important;
}

/* Ospite: logo e pulsanti non devono accavallarsi */
.hub-home.is-guest .hub-hero-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
}
.hub-home.is-guest .hub-hero-actions {
    justify-self: end !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
}

/* Layout mobile definitivo */
@media (max-width: 600px) {
    .hub-hero {
        padding-left: 18px !important;
        padding-right: 12px !important;
    }

    .hub-logo-line {
        gap: 7px !important;
    }

    .hub-logo-cloud {
        width: 42px !important;
        height: 32px !important;
    }

    .hub-logo-title {
        font-size: clamp(1.34rem, 7.1vw, 1.86rem) !important;
        line-height: .92 !important;
        max-width: 148px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }

    .hub-logo-subtitle {
        font-size: clamp(.68rem, 3.2vw, .82rem) !important;
        line-height: 1.08 !important;
        max-width: 138px !important;
    }

    .hub-hero-actions {
        gap: 6px !important;
    }

    .hub-access-btn {
        max-width: 98px !important;
        min-width: 0 !important;
        padding: 8px 10px !important;
        gap: 5px !important;
        font-size: .72rem !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .hub-access-btn svg {
        width: 13px !important;
        height: 13px !important;
        flex: 0 0 auto !important;
    }

    .hub-home.is-logged .hub-access-btn {
        max-width: 104px !important;
    }

    .hub-logged-greeting {
        margin-top: 18px !important;
        max-width: 245px !important;
        padding: 11px 14px !important;
        border-radius: 17px !important;
    }

    .hub-logged-kicker {
        font-size: .64rem !important;
    }

    .hub-logged-title {
        font-size: 1.08rem !important;
    }
}

@media (max-width: 374px) {
    .hub-hero {
        padding-left: 12px !important;
        padding-right: 8px !important;
    }
    .hub-logo-cloud {
        width: 36px !important;
        height: 28px !important;
    }
    .hub-logo-title {
        font-size: 1.20rem !important;
        max-width: 118px !important;
    }
    .hub-logo-subtitle {
        font-size: .62rem !important;
        max-width: 112px !important;
    }
    .hub-access-btn {
        max-width: 82px !important;
        padding: 7px 8px !important;
        font-size: .66rem !important;
    }
}

/* =====================================================
   HUBCLOUD HOME FIX 4 — logo non tagliato su iPhone
   ===================================================== */
@media (max-width: 600px) {
    .hub-hero {
        padding-left: 14px !important;
        padding-right: 10px !important;
    }

    .hub-hero-top {
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 5px !important;
        overflow: visible !important;
    }

    .hub-logo-line {
        gap: 5px !important;
        min-width: 0 !important;
    }

    .hub-logo-cloud {
        width: 38px !important;
        height: 29px !important;
        flex: 0 0 38px !important;
    }

    .hub-logo-title {
        font-size: clamp(1.28rem, 6.6vw, 1.62rem) !important;
        line-height: .96 !important;
        max-width: 158px !important;
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: nowrap !important;
        letter-spacing: -.045em !important;
    }

    .hub-logo-subtitle {
        max-width: 150px !important;
        font-size: clamp(.66rem, 3vw, .78rem) !important;
    }

    .hub-hero-actions {
        gap: 5px !important;
        flex-shrink: 0 !important;
    }

    .hub-access-btn {
        max-width: 88px !important;
        padding: 7px 9px !important;
        font-size: .68rem !important;
        flex-shrink: 1 !important;
    }

    .hub-home.is-logged .hub-access-btn {
        max-width: 94px !important;
    }
}

@media (max-width: 374px) {
    .hub-logo-cloud {
        width: 34px !important;
        height: 26px !important;
        flex-basis: 34px !important;
    }

    .hub-logo-title {
        font-size: 1.14rem !important;
        max-width: 128px !important;
    }

    .hub-access-btn {
        max-width: 76px !important;
        font-size: .62rem !important;
        padding: 7px 7px !important;
    }
}

/* =====================================================
   HUBCLOUD HOME — nasconde il pulsante help flottante
   sulla home, perché copre le gallerie su iPhone.
   ===================================================== */
.hub-home-body .mc-help-float {
    display: none !important;
}

/* =====================================================
   HUBCLOUD DESIGN SYSTEM — START 1
   Header pagine interne + help contestuale
   ===================================================== */
:root {
    --hc-radius-sm: 12px;
    --hc-radius-md: 16px;
    --hc-radius-lg: 22px;
    --hc-radius-xl: 28px;
    --hc-shadow-card: 0 10px 28px rgba(0,0,0,.10);
    --hc-shadow-soft: 0 18px 44px rgba(0,0,0,.14);
}

/* Il vecchio pulsante help flottante non deve più comparire.
   Da ora l'aiuto sarà contestuale nell'header della pagina. */
.mc-help-float,
.help-floating,
.floating-help,
.help-float,
.btn-help-floating {
    display: none !important;
}

.hc-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 10px;
    color: var(--text-color);
}

.hc-page-header-left,
.hc-page-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.hc-page-header-left {
    flex: 1;
}

.hc-page-title-wrap {
    min-width: 0;
}

.hc-page-title {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -.035em;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-page-subtitle {
    margin-top: 3px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-page-back,
.hc-page-help,
.hc-page-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: .5px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.hc-page-back:active,
.hc-page-help:active,
.hc-page-icon-btn:active {
    transform: scale(.94);
    opacity: .82;
}

.hc-page-help {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}

@media (max-width: 600px) {
    .hc-page-header {
        padding: 12px 16px 8px;
        gap: 8px;
    }
    .hc-page-title {
        font-size: 1.28rem;
    }
    .hc-page-subtitle {
        font-size: .76rem;
    }
    .hc-page-back,
    .hc-page-help,
    .hc-page-icon-btn {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}

/* =====================================================
   HUBCLOUD — layout interno definitivo v1
   Header unico + dashboard Area Privata
   ===================================================== */
.hc-app-header {
    position: relative;
    flex-shrink: 0;
    padding: 22px 30px 24px;
    background: linear-gradient(135deg, #0a84ff 0%, #28b6ff 100%);
    color: #fff;
    border-radius: 0;
    box-shadow: 0 12px 30px rgba(10, 132, 255, .22);
    overflow: hidden;
}
.hc-app-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.24), transparent 34%),
                radial-gradient(circle at 86% 12%, rgba(255,255,255,.18), transparent 28%);
    pointer-events: none;
}
.hc-app-header-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(240px, .9fr) minmax(270px, 1fr);
    align-items: center;
    gap: 28px;
}
.hc-app-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #fff;
}
.hc-app-cloud {
    width: 52px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hc-app-cloud svg { width: 100%; height: 100%; }
.hc-app-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.hc-app-brand-text strong {
    font-size: clamp(1.55rem, 3.2vw, 2.05rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    white-space: nowrap;
}
.hc-app-brand-text em {
    margin-top: 5px;
    font-style: normal;
    font-size: .95rem;
    font-weight: 600;
    opacity: .92;
    white-space: nowrap;
}
.hc-app-center {
    min-width: 0;
}
.hc-app-center strong {
    display: block;
    font-size: 1.08rem;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}
.hc-app-center span {
    display: block;
    margin-top: 8px;
    font-size: .92rem;
    font-weight: 600;
    opacity: .92;
    white-space: nowrap;
}
.hc-app-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}
.hc-app-weather {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "icon temp" "icon city";
    align-items: center;
    column-gap: 10px;
    padding-left: 22px;
    border-left: 1px solid rgba(255,255,255,.35);
    min-width: 110px;
}
.hc-weather-icon { grid-area: icon; font-size: 2.1rem; line-height: 1; }
.hc-app-weather strong { grid-area: temp; font-size: 1.55rem; font-weight: 900; line-height: 1; }
.hc-app-weather em { grid-area: city; font-style: normal; font-size: .76rem; font-weight: 650; opacity: .92; margin-top: 3px; }
.hc-user-pill {
    min-width: 116px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    font-weight: 850;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.hc-user-pill svg { width: 15px; height: 15px; opacity: .88; flex-shrink: 0; }

.hc-dashboard-shell {
    padding: 22px 24px 8px;
}
.hc-search-wide {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 58px;
    padding: 0 18px;
    margin-bottom: 22px;
    border-radius: 20px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.hc-search-wide span { font-size: 1.25rem; opacity: .8; }
.hc-search-wide input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 650;
}
.hc-search-wide input::placeholder { color: var(--text-secondary); }
.hc-search-wide button {
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 900;
}
.hc-dashboard-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 18px;
    margin-bottom: 24px;
}
.hc-dash-card {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 20px;
    border-radius: 22px;
    color: var(--text-color);
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.hc-dash-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    font-size: .98rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.hc-dash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(10,132,255,.12);
}
.hc-dash-icon.danger { background: rgba(255,59,48,.12); }
.hc-dash-icon.blue { background: rgba(10,132,255,.12); }
.hc-dash-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: auto;
}
.hc-dash-metrics span {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 12px;
    border-right: .5px solid var(--border-color);
}
.hc-dash-metrics span:last-child { border-right: 0; padding-right: 0; }
.hc-dash-metrics b {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--accent);
}
.hc-dash-attention .hc-dash-metrics span:first-child b { color: var(--danger); }
.hc-dash-metrics em,
.hc-today-list em {
    font-style: normal;
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 700;
}
.hc-today-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}
.hc-today-list span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    color: var(--text-secondary);
}
.hc-today-list b { color: var(--text-color); font-size: 1.1rem; }
.hc-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.hc-section-row h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -.02em;
}
.hc-info-link {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(10,132,255,.10);
    color: var(--accent);
    font-size: 1.15rem;
    font-weight: 800;
}
.hc-area-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.hc-area-card {
    min-height: 150px;
    padding: 18px;
    border-radius: 20px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    color: var(--text-color);
    box-shadow: 0 10px 24px rgba(0,0,0,.07);
}
.hc-area-card span {
    display: block;
    font-size: 1.7rem;
    margin-bottom: 14px;
}
.hc-area-card strong {
    display: block;
    font-size: 1rem;
    font-weight: 900;
    margin-bottom: 8px;
}
.hc-area-card em {
    display: block;
    font-style: normal;
    font-size: .76rem;
    line-height: 1.35;
    color: var(--text-secondary);
    font-weight: 650;
}
.hc-dashboard-tasks { padding-top: 8px; }
.hc-page-header-private { display: none !important; }

@media (max-width: 700px) {
    .hc-app-header {
        padding: 20px 22px 22px;
    }
    .hc-app-header-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "brand right"
            "center weather";
        gap: 16px 12px;
        align-items: start;
    }
    .hc-app-brand { grid-area: brand; align-self: center; gap: 10px; }
    .hc-app-cloud { width: 40px; height: 30px; }
    .hc-app-brand-text strong { font-size: 1.7rem; }
    .hc-app-brand-text em { font-size: .72rem; white-space: normal; max-width: 160px; line-height: 1.1; }
    .hc-app-center { grid-area: center; }
    .hc-app-center strong { font-size: 1.05rem; }
    .hc-app-center span { font-size: .82rem; margin-top: 6px; }
    .hc-app-right { grid-area: right; gap: 8px; align-self: center; }
    .hc-app-weather {
        grid-area: weather;
        border-left: 0;
        padding-left: 0;
        min-width: 96px;
        justify-self: end;
        align-self: end;
    }
    .hc-weather-icon { font-size: 1.45rem; }
    .hc-app-weather strong { font-size: 1.35rem; }
    .hc-app-weather em { display: none; }
    .hc-user-pill {
        min-width: 0;
        height: 40px;
        padding: 0 12px;
        max-width: 108px;
    }
    .hc-user-pill span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .hc-user-pill svg { display: none; }
    .hc-dashboard-shell { padding: 18px 16px 6px; }
    .hc-search-wide { height: 56px; border-radius: 18px; margin-bottom: 18px; }
    .hc-dashboard-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
    .hc-dash-card { min-height: 132px; padding: 17px; border-radius: 20px; }
    .hc-dash-card-head { margin-bottom: 18px; }
    .hc-dash-metrics { gap: 8px; }
    .hc-dash-metrics b { font-size: 1.35rem; }
    .hc-dash-metrics em { font-size: .68rem; }
    .hc-area-card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hc-area-card { min-height: 126px; padding: 15px; }
    .hc-area-card span { font-size: 1.45rem; margin-bottom: 10px; }
}

@media (min-width: 1024px) {
    .hc-dashboard-shell { padding-left: 28px; padding-right: 28px; }
}

/* =====================================================
   HUBCLOUD — refinement dashboard Area Privata FINAL2
   ===================================================== */
.hc-app-header-row {
    grid-template-columns: minmax(210px, 1.05fr) minmax(210px, .85fr) minmax(250px, 1fr);
    gap: 32px;
}
.hc-app-right { gap: 12px; }
.hc-app-weather {
    min-width: 126px;
    column-gap: 9px;
}
.hc-user-pill {
    min-width: 104px;
    height: 40px;
    padding: 0 12px;
}
.hc-search-wide button { display: none !important; }
.hc-search-wide { cursor: text; }
.hc-dash-card { text-decoration: none; }
.hc-dash-card:active { transform: scale(.985); }
.hc-dash-metrics b { font-size: 1.9rem; font-weight: 950; }
.hc-dash-metrics span { gap: 8px; }
.hc-dash-metrics em { font-size: .82rem; line-height: 1.15; }
.hc-today-list { gap: 14px; }
.hc-today-list span {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
}
.hc-today-list i {
    font-style: normal;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: rgba(10,132,255,.08);
    font-weight: 900;
}
.hc-today-list em {
    font-size: .9rem;
    color: var(--text-color);
    font-weight: 750;
}
.hc-today-list b {
    font-size: 1.15rem;
    min-width: 22px;
    text-align: right;
}

@media (max-width: 700px) {
    .hc-app-header {
        padding: 20px 20px 24px;
    }
    .hc-app-header-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "brand controls"
            "center weather";
        gap: 20px 12px;
        align-items: start;
    }
    .hc-app-brand {
        grid-area: brand;
        align-self: start;
        gap: 9px;
        max-width: 230px;
    }
    .hc-app-cloud {
        width: 42px;
        height: 32px;
        align-self: flex-start;
        margin-top: 3px;
    }
    .hc-app-brand-text strong {
        font-size: clamp(1.42rem, 8vw, 2rem);
        letter-spacing: -.055em;
        line-height: .95;
    }
    .hc-app-brand-text em {
        margin-top: 4px;
        font-size: .82rem;
        line-height: 1.05;
        max-width: 120px;
        white-space: normal;
    }
    .hc-app-center {
        grid-area: center;
        align-self: end;
        padding-top: 2px;
    }
    .hc-app-center strong {
        font-size: 1.22rem;
        letter-spacing: -.02em;
    }
    .hc-app-center span {
        font-size: .9rem;
        margin-top: 7px;
    }
    .hc-app-right {
        grid-area: controls;
        align-self: start;
        justify-self: end;
        gap: 8px;
    }
    .hc-app-weather {
        grid-area: weather;
        justify-self: end;
        align-self: end;
        min-width: 0;
        padding-left: 0;
        border-left: 0;
        grid-template-columns: auto auto;
        grid-template-areas: "icon temp";
        column-gap: 8px;
    }
    .hc-weather-icon { font-size: 1.55rem; }
    .hc-app-weather strong { font-size: 1.6rem; }
    .hc-app-weather em { display: none; }
    .hc-user-pill {
        width: 86px;
        min-width: 86px;
        max-width: 86px;
        height: 38px;
        padding: 0 10px;
        gap: 6px;
    }
    .hc-user-pill span {
        max-width: 58px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .88rem;
    }
    .hc-user-pill svg {
        display: block;
        width: 13px;
        height: 13px;
    }
    .hc-search-wide {
        height: 54px;
        padding: 0 16px;
        gap: 12px;
        margin-bottom: 16px;
    }
    .hc-search-wide input { font-size: .96rem; }
    .hc-dash-card { min-height: auto; }
    .hc-dash-card-head {
        margin-bottom: 20px;
        font-size: 1rem;
    }
    .hc-dash-icon {
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }
    .hc-dash-metrics b { font-size: 1.75rem; }
    .hc-dash-metrics em { font-size: .76rem; }
    .hc-today-list span { grid-template-columns: 30px 1fr auto; }
    .hc-today-list i { width: 30px; height: 30px; }
    .hc-today-list em { font-size: .96rem; }
}

@media (max-width: 389px) {
    .hc-app-header { padding-left: 18px; padding-right: 18px; }
    .hc-app-brand { max-width: 200px; }
    .hc-app-cloud { width: 38px; height: 30px; }
    .hc-app-brand-text strong { font-size: 1.55rem; }
    .hc-app-brand-text em { font-size: .76rem; max-width: 104px; }
    .hc-user-pill { width: 78px; min-width: 78px; max-width: 78px; }
    .hc-user-pill span { max-width: 50px; font-size: .82rem; }
    .hc-weather-icon { font-size: 1.35rem; }
    .hc-app-weather strong { font-size: 1.4rem; }
}

/* =====================================================
   HUBCLOUD — header mobile definitivo FINAL3
   Meteo separato dai controlli: niente sovrapposizioni su iPhone
   ===================================================== */
.hc-app-header-row {
    grid-template-columns: minmax(210px, 1.25fr) minmax(220px, .9fr) minmax(132px, auto) minmax(188px, auto) !important;
    grid-template-areas: "brand center weather controls";
    gap: 24px !important;
}
.hc-app-brand { grid-area: brand; }
.hc-app-center { grid-area: center; }
.hc-app-weather { grid-area: weather; }
.hc-app-right { grid-area: controls; }

@media (max-width: 700px) {
    .hc-app-header {
        padding: 18px 20px 22px !important;
    }
    .hc-app-header-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand controls"
            "center center"
            "date weather";
        gap: 12px 12px !important;
        align-items: start;
    }
    .hc-app-brand {
        grid-area: brand;
        max-width: none !important;
        min-width: 0;
        align-items: flex-start;
        gap: 10px !important;
    }
    .hc-app-cloud {
        width: 40px !important;
        height: 30px !important;
        margin-top: 2px;
        flex: 0 0 40px;
    }
    .hc-app-brand-text {
        min-width: 0;
        max-width: 190px;
    }
    .hc-app-brand-text strong {
        font-size: clamp(1.55rem, 7.8vw, 2rem) !important;
        line-height: .95 !important;
        letter-spacing: -.055em !important;
        white-space: nowrap;
    }
    .hc-app-brand-text em {
        display: block;
        max-width: 160px !important;
        margin-top: 5px !important;
        font-size: .78rem !important;
        line-height: 1.08 !important;
        white-space: normal !important;
    }
    .hc-app-right {
        grid-area: controls;
        justify-self: end;
        align-self: start;
        display: flex;
        gap: 8px !important;
        min-width: 0;
    }
    .hc-user-pill {
        width: auto !important;
        min-width: 84px !important;
        max-width: 104px !important;
        height: 38px !important;
        padding: 0 10px !important;
    }
    .hc-user-pill span {
        max-width: 62px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .86rem !important;
    }
    .hc-user-pill svg {
        display: block !important;
        width: 13px !important;
        height: 13px !important;
        flex-shrink: 0;
    }
    .hc-app-center {
        display: contents;
    }
    .hc-app-center strong {
        grid-area: center;
        display: block;
        margin-top: 14px;
        font-size: 1.18rem !important;
        line-height: 1.15 !important;
        letter-spacing: -.025em;
        white-space: nowrap;
    }
    .hc-app-center span {
        grid-area: date;
        display: block;
        margin-top: 0 !important;
        align-self: center;
        font-size: .9rem !important;
        line-height: 1.15;
        font-weight: 700;
        white-space: nowrap;
        opacity: .96;
    }
    .hc-app-weather {
        grid-area: weather;
        justify-self: end;
        align-self: center;
        display: inline-grid !important;
        grid-template-columns: auto auto;
        grid-template-areas: "icon temp";
        column-gap: 7px !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        border-left: 0 !important;
    }
    .hc-weather-icon { font-size: 1.35rem !important; }
    .hc-app-weather strong {
        font-size: 1.45rem !important;
        line-height: 1 !important;
    }
    .hc-app-weather em { display: none !important; }
}

@media (max-width: 389px) {
    .hc-app-header { padding-left: 16px !important; padding-right: 16px !important; }
    .hc-app-cloud { width: 36px !important; height: 28px !important; flex-basis: 36px; }
    .hc-app-brand-text { max-width: 168px; }
    .hc-app-brand-text strong { font-size: 1.45rem !important; }
    .hc-app-brand-text em { font-size: .72rem !important; max-width: 140px !important; }
    .hc-user-pill { min-width: 78px !important; max-width: 82px !important; }
    .hc-user-pill span { max-width: 46px !important; font-size: .8rem !important; }
    .hc-app-center strong { font-size: 1.08rem !important; }
    .hc-app-center span { font-size: .82rem !important; }
    .hc-weather-icon { font-size: 1.2rem !important; }
    .hc-app-weather strong { font-size: 1.3rem !important; }
}

/* =====================================================
   HUBCLOUD — header mobile FINAL4
   Logo su riga propria: evita definitivamente sovrapposizioni
   ===================================================== */
@media (max-width: 700px) {
    .hc-app-header {
        padding: 18px 20px 22px !important;
    }

    .hc-app-header-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand brand"
            "center controls"
            "date weather" !important;
        gap: 12px 12px !important;
        align-items: center !important;
    }

    .hc-app-brand {
        grid-area: brand !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding-right: 0 !important;
    }

    .hc-app-cloud {
        width: 40px !important;
        height: 30px !important;
        flex: 0 0 40px !important;
        margin-top: 4px !important;
    }

    .hc-app-brand-text {
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }

    .hc-app-brand-text strong {
        display: block !important;
        font-size: clamp(1.65rem, 8.4vw, 2.15rem) !important;
        line-height: 1 !important;
        letter-spacing: -.055em !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    .hc-app-brand-text em {
        display: block !important;
        max-width: none !important;
        margin-top: 5px !important;
        font-size: .78rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .hc-app-center {
        display: contents !important;
    }

    .hc-app-center strong {
        grid-area: center !important;
        display: block !important;
        margin-top: 10px !important;
        font-size: 1.18rem !important;
        line-height: 1.1 !important;
        letter-spacing: -.025em !important;
        white-space: nowrap !important;
        align-self: center !important;
    }

    .hc-app-center span {
        grid-area: date !important;
        display: block !important;
        margin-top: 0 !important;
        font-size: .9rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: .96 !important;
        align-self: center !important;
    }

    .hc-app-right {
        grid-area: controls !important;
        justify-self: end !important;
        align-self: center !important;
        display: flex !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .hc-user-pill {
        width: auto !important;
        min-width: 92px !important;
        max-width: 118px !important;
        height: 38px !important;
        padding: 0 11px !important;
        gap: 7px !important;
    }

    .hc-user-pill span {
        max-width: 72px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: .88rem !important;
    }

    .hc-user-pill svg {
        display: block !important;
        width: 13px !important;
        height: 13px !important;
        flex-shrink: 0 !important;
    }

    .hc-app-weather {
        grid-area: weather !important;
        justify-self: end !important;
        align-self: center !important;
        display: inline-grid !important;
        grid-template-columns: auto auto !important;
        grid-template-areas: "icon temp" !important;
        column-gap: 7px !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        border-left: 0 !important;
    }

    .hc-weather-icon { font-size: 1.35rem !important; }
    .hc-app-weather strong {
        font-size: 1.45rem !important;
        line-height: 1 !important;
    }
    .hc-app-weather em { display: none !important; }
}

@media (max-width: 389px) {
    .hc-app-header { padding-left: 16px !important; padding-right: 16px !important; }
    .hc-app-cloud { width: 36px !important; height: 28px !important; flex-basis: 36px !important; }
    .hc-app-brand-text strong { font-size: 1.48rem !important; }
    .hc-app-brand-text em { font-size: .72rem !important; }
    .hc-user-pill { min-width: 82px !important; max-width: 92px !important; }
    .hc-user-pill span { max-width: 54px !important; font-size: .8rem !important; }
    .hc-app-center strong { font-size: 1.06rem !important; }
    .hc-app-center span { font-size: .82rem !important; }
    .hc-weather-icon { font-size: 1.18rem !important; }
    .hc-app-weather strong { font-size: 1.25rem !important; }
}


/* =====================================================
   HUBCLOUD — IDENTITÀ DEFINITIVA v5
   Header compatto con immagine/colore, aree a lista,
   angoli header/footer ripristinati
   ===================================================== */

.phone-window {
    background: var(--phone-bg);
}
.hc-app-header {
    isolation: isolate;
    background:
        linear-gradient(135deg, rgba(0, 80, 160, .82), rgba(10, 132, 255, .74)),
        url('../img/home-hero-molveno.webp') center center / cover no-repeat !important;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: 0 16px 32px rgba(7, 44, 86, .22) !important;
}
.hc-app-header::after {
    background:
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.14)),
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.22), transparent 28%) !important;
}
.hc-bottom-nav {
    border-radius: 0 0 28px 28px !important;
    overflow: hidden;
}

/* Header desktop/tablet */
@media (min-width: 701px) {
    .hc-app-header {
        padding: 18px 28px 18px !important;
    }
    .hc-app-header-row {
        grid-template-columns: minmax(260px, 1.15fr) minmax(210px, .75fr) minmax(110px, auto) minmax(210px, .75fr) !important;
        grid-template-areas: "brand center weather controls" !important;
        gap: 24px !important;
        align-items: center !important;
    }
    .hc-app-brand { grid-area: brand; }
    .hc-app-center { grid-area: center; }
    .hc-app-weather { grid-area: weather; }
    .hc-app-right { grid-area: controls; }
}

/* Header mobile compatto: non occupa più mezza schermata */
@media (max-width: 700px) {
    .hc-app-header {
        padding: 14px 18px 16px !important;
        min-height: 0 !important;
    }
    .hc-app-header-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand controls"
            "center weather"
            "date weather" !important;
        gap: 8px 10px !important;
        align-items: center !important;
    }
    .hc-app-brand {
        grid-area: brand !important;
        width: auto !important;
        max-width: 100% !important;
        gap: 8px !important;
        align-items: center !important;
        min-width: 0 !important;
    }
    .hc-app-cloud {
        width: 34px !important;
        height: 26px !important;
        flex: 0 0 34px !important;
        margin: 0 !important;
    }
    .hc-app-brand-text {
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 auto !important;
    }
    .hc-app-brand-text strong {
        font-size: clamp(1.25rem, 7vw, 1.75rem) !important;
        line-height: 1 !important;
        letter-spacing: -.055em !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    .hc-app-brand-text em {
        margin-top: 3px !important;
        font-size: .64rem !important;
        line-height: 1.05 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        max-width: none !important;
        opacity: .94 !important;
    }
    .hc-app-right {
        grid-area: controls !important;
        justify-self: end !important;
        align-self: center !important;
        gap: 7px !important;
        min-width: 0 !important;
    }
    .hc-user-pill {
        min-width: 82px !important;
        max-width: 102px !important;
        height: 34px !important;
        padding: 0 10px !important;
        gap: 6px !important;
        font-size: .82rem !important;
    }
    .hc-user-pill span {
        max-width: 58px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .hc-user-pill svg {
        display: block !important;
        width: 12px !important;
        height: 12px !important;
        flex-shrink: 0 !important;
    }
    .hc-app-center {
        display: contents !important;
    }
    .hc-app-center strong {
        grid-area: center !important;
        margin: 10px 0 0 !important;
        font-size: 1.02rem !important;
        line-height: 1.05 !important;
        letter-spacing: -.025em !important;
        white-space: nowrap !important;
    }
    .hc-app-center span {
        grid-area: date !important;
        margin: 0 !important;
        font-size: .76rem !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: .95 !important;
    }
    .hc-app-weather {
        grid-area: weather !important;
        justify-self: end !important;
        align-self: end !important;
        display: inline-grid !important;
        grid-template-columns: auto auto !important;
        grid-template-areas: "icon temp" !important;
        column-gap: 6px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    .hc-weather-icon {
        font-size: 1.15rem !important;
        line-height: 1 !important;
    }
    .hc-app-weather strong {
        font-size: 1.22rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
    .hc-app-weather em {
        display: none !important;
    }
}

/* Dashboard più compatta e leggibile */
.hc-dashboard-shell {
    padding-top: 18px !important;
}
.hc-search-wide {
    height: 52px !important;
    border-radius: 18px !important;
}
.hc-dash-card {
    border-radius: 20px !important;
}
.hc-dash-metrics span {
    position: relative;
    gap: 5px !important;
}
.hc-dash-metrics span:nth-child(1)::before { content: "\1F534"; font-size: 1.05rem; line-height: 1; }
.hc-dash-metrics span:nth-child(2)::before { content: "\1F4C4"; font-size: 1.05rem; line-height: 1; }
.hc-dash-metrics span:nth-child(3)::before { content: "\1F4E6"; font-size: 1.05rem; line-height: 1; }
.hc-today-list b:empty::before,
.hc-today-list b[data-count="0"]::before { content: "\2713"; }

/* Le tue aree: lista elegante in stile Apple */
.hc-area-card-grid {
    display: none !important;
}
.hc-area-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}
.hc-area-row {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 14px 15px;
    border-radius: 18px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    color: var(--text-color);
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.hc-area-row-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,132,255,.10);
    font-size: 1.25rem;
}
.hc-area-row.personale .hc-area-row-icon { background: rgba(255,59,48,.12); }
.hc-area-row.famiglia .hc-area-row-icon { background: rgba(52,199,89,.14); }
.hc-area-row.finanze .hc-area-row-icon { background: rgba(175,82,222,.14); }
.hc-area-row.lavoro .hc-area-row-icon { background: rgba(8,145,178,.14); }
.hc-area-row-copy {
    min-width: 0;
}
.hc-area-row-copy strong {
    display: block;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1.1;
}
.hc-area-row-copy em {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-size: .74rem;
    line-height: 1.25;
    color: var(--text-secondary);
    font-weight: 650;
}
.hc-area-row-arrow {
    color: var(--text-secondary);
    font-size: 1.4rem;
    font-weight: 300;
}

@media (max-width: 700px) {
    .hc-dashboard-shell {
        padding: 16px 14px 6px !important;
    }
    .hc-search-wide {
        height: 50px !important;
        margin-bottom: 14px !important;
        padding: 0 14px !important;
    }
    .hc-dashboard-grid {
        gap: 10px !important;
        margin-bottom: 18px !important;
    }
    .hc-dash-card {
        min-height: 118px !important;
        padding: 15px !important;
    }
    .hc-dash-card-head {
        margin-bottom: 14px !important;
    }
    .hc-dash-metrics b {
        font-size: 1.28rem !important;
    }
    .hc-dash-metrics em {
        font-size: .64rem !important;
    }
    .hc-area-list {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .hc-area-row {
        min-height: 62px !important;
        padding: 12px 14px !important;
    }
    .hc-section-row {
        margin-bottom: 10px !important;
    }
    .hc-section-row h2 {
        font-size: 1.02rem !important;
    }
}

/* Su schermi senza cornice iPhone reale: mantieni angoli coerenti */
@media (max-width: 600px) {
    .phone-window {
        background: var(--phone-bg);
    }
    .hc-app-header {
        border-radius: 24px 24px 0 0 !important;
        margin: 0 0 0 0;
    }
    .hc-bottom-nav {
        border-radius: 0 0 24px 24px !important;
    }
}

/* Aree future: classi colore riutilizzabili */
.hc-area-theme-personale { --hc-area-accent: #ff3b30; }
.hc-area-theme-famiglia { --hc-area-accent: #22c55e; }
.hc-area-theme-finanze { --hc-area-accent: #af52de; }
.hc-area-theme-lavoro { --hc-area-accent: #0891b2; }
.hc-area-title-strip {
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--hc-area-accent, var(--accent)) 12%, var(--card-bg));
    border-left: 4px solid var(--hc-area-accent, var(--accent));
}
.hc-area-title-strip strong {
    color: var(--hc-area-accent, var(--accent));
    text-transform: uppercase;
    letter-spacing: .03em;
}


/* =====================================================
   HUBCLOUD — DASHBOARD v6
   Riquadri attenzione ordinati per urgenza + dock Apple
   ===================================================== */

.hc-dashboard-shell {
    padding: 18px 18px 18px !important;
}

.hc-urgent-banner,
.hc-attention-panel,
.hc-today-card,
.hc-tools-panel {
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

.hc-urgent-banner {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    margin: 0 0 14px;
    color: var(--text-color);
    background: linear-gradient(135deg, rgba(255,59,48,.12), var(--card-bg));
    border-color: rgba(255,59,48,.22);
}
.hc-urgent-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 950;
    box-shadow: 0 10px 22px rgba(255,59,48,.24);
}
.hc-urgent-copy strong {
    display: block;
    font-size: 1rem;
    font-weight: 900;
}
.hc-urgent-copy em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: .84rem;
    color: var(--text-secondary);
    font-weight: 650;
}
.hc-urgent-action {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255,59,48,.10);
    color: var(--danger);
    font-size: .82rem;
    font-weight: 850;
    white-space: nowrap;
}

.hc-attention-panel,
.hc-today-card,
.hc-tools-panel {
    padding: 16px;
    margin-bottom: 16px;
}

.hc-section-row .hc-section-link {
    color: var(--accent);
    font-size: .84rem;
    font-weight: 800;
    white-space: nowrap;
}
.hc-section-row h2 span {
    margin-right: 6px;
}

.hc-attention-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.hc-alert-card {
    min-height: 152px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 13px;
    border-radius: 18px;
    color: var(--text-color);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.hc-alert-card.red {
    background: linear-gradient(135deg, rgba(255,59,48,.12), rgba(255,255,255,.02));
    border-color: rgba(255,59,48,.28);
}
.hc-alert-card.orange {
    background: linear-gradient(135deg, rgba(255,149,0,.12), rgba(255,255,255,.02));
    border-color: rgba(255,149,0,.28);
}
.hc-alert-card.blue {
    background: linear-gradient(135deg, rgba(10,132,255,.11), rgba(255,255,255,.02));
    border-color: rgba(10,132,255,.28);
}
.hc-alert-card.green {
    background: linear-gradient(135deg, rgba(52,199,89,.10), rgba(255,255,255,.02));
    border-color: rgba(52,199,89,.24);
}
.hc-alert-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
    margin-bottom: 3px;
}
.hc-alert-card.red .hc-alert-icon { background: rgba(255,59,48,.16); }
.hc-alert-card.orange .hc-alert-icon { background: rgba(255,149,0,.16); }
.hc-alert-card.blue .hc-alert-icon { background: rgba(10,132,255,.16); }
.hc-alert-card.green .hc-alert-icon { background: rgba(52,199,89,.14); }
.hc-alert-card strong {
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 950;
}
.hc-alert-card.red strong { color: var(--danger); }
.hc-alert-card.orange strong { color: var(--warning); }
.hc-alert-card.blue strong { color: var(--accent); }
.hc-alert-card.green strong { color: var(--success); }
.hc-alert-title {
    font-size: .9rem;
    line-height: 1.08;
    font-weight: 900;
}
.hc-alert-card em {
    min-height: 30px;
    font-style: normal;
    font-size: .74rem;
    line-height: 1.2;
    color: var(--text-secondary);
    font-weight: 650;
}
.hc-alert-card b {
    align-self: flex-start;
    margin-top: auto;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .68rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .01em;
}
.hc-alert-card.red b { color: var(--danger); background: rgba(255,59,48,.12); }
.hc-alert-card.orange b { color: var(--warning); background: rgba(255,149,0,.12); }
.hc-alert-card.blue b { color: var(--accent); background: rgba(10,132,255,.12); }
.hc-alert-card.green b { color: var(--success); background: rgba(52,199,89,.12); }

.hc-today-rows {
    display: flex;
    flex-direction: column;
}
.hc-today-row {
    display: grid;
    grid-template-columns: 10px 38px minmax(0,1fr) auto 14px;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 9px 0;
    color: var(--text-color);
    border-bottom: .5px solid var(--border-color);
}
.hc-today-row:last-child { border-bottom: 0; }
.hc-today-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}
.hc-today-row.red .hc-today-dot { background: var(--danger); }
.hc-today-row.orange .hc-today-dot { background: var(--warning); }
.hc-today-row.green .hc-today-dot { background: var(--success); }
.hc-today-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    font-size: 1.2rem;
}
.hc-today-copy strong {
    display: block;
    font-size: .94rem;
    font-weight: 850;
}
.hc-today-copy em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: .78rem;
    color: var(--text-secondary);
    font-weight: 650;
}
.hc-today-row b {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(10,132,255,.12);
    color: var(--accent);
    font-size: .82rem;
    line-height: 1;
}
.hc-today-row.red b { background: rgba(255,59,48,.12); color: var(--danger); }
.hc-today-row.orange b { background: rgba(255,149,0,.12); color: var(--warning); }
.hc-today-row.green b { background: rgba(52,199,89,.12); color: var(--success); }
.hc-today-row i {
    color: var(--text-secondary);
    font-style: normal;
    font-size: 1.2rem;
}
.hc-today-empty {
    padding: 18px 6px 6px;
    color: var(--text-secondary);
    font-weight: 750;
    text-align: center;
}

.hc-area-list {
    margin-bottom: 18px !important;
}
.hc-area-row {
    border-left: 4px solid transparent;
}
.hc-area-row.personale { border-left-color: #ff3b30; }
.hc-area-row.famiglia { border-left-color: #34c759; }
.hc-area-row.finanze { border-left-color: #af52de; }
.hc-area-row.lavoro { border-left-color: #0891b2; }

.hc-tools-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.hc-tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-color);
}
.hc-tool-item span {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    font-size: 1.55rem;
}
.hc-tool-item em {
    font-style: normal;
    font-size: .75rem;
    font-weight: 750;
    text-align: center;
}

/* Dettaglio task visibile sotto alla dashboard e raggiungibile dalle card. */
.hc-dashboard-tasks {
    display: block !important;
    padding-top: 8px;
    scroll-margin-top: 210px;
}
#task-personali,
#task-famiglia {
    scroll-margin-top: 210px;
}

/* Dock inferiore stile Apple */
.hc-tab-bar,
.hc-bottom-nav {
    margin: 8px 14px max(10px, env(safe-area-inset-bottom)) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    background: linear-gradient(135deg, rgba(1,34,64,.96), rgba(0,68,112,.94)) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10) !important;
    overflow: hidden !important;
}
.hc-tab-bar .hc-tab,
.hc-bottom-nav .hc-tab {
    color: rgba(255,255,255,.68) !important;
}
.hc-tab-bar .hc-tab.hc-tab-active,
.hc-tab-bar .hc-tab:hover,
.hc-bottom-nav .hc-tab.hc-tab-active,
.hc-bottom-nav .hc-tab:hover {
    color: #fff !important;
}

@media (max-width: 700px) {
    .hc-dashboard-shell {
        padding: 14px 12px 8px !important;
    }
    .hc-urgent-banner {
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 13px 14px;
    }
    .hc-urgent-icon {
        width: 42px;
        height: 42px;
        font-size: 1.45rem;
    }
    .hc-urgent-action {
        grid-column: 2;
        justify-self: start;
        margin-top: 2px;
        padding: 7px 11px;
        font-size: .76rem;
    }
    .hc-attention-panel,
    .hc-today-card,
    .hc-tools-panel {
        padding: 13px;
        border-radius: 20px;
    }
    .hc-attention-grid {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 3px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .hc-attention-grid::-webkit-scrollbar { display: none; }
    .hc-alert-card {
        flex: 0 0 154px;
        min-height: 150px;
        scroll-snap-align: start;
    }
    .hc-today-row {
        grid-template-columns: 8px 34px minmax(0,1fr) auto 10px;
        gap: 10px;
        min-height: 58px;
    }
    .hc-today-icon {
        width: 34px;
        height: 34px;
        border-radius: 12px;
    }
    .hc-today-copy strong { font-size: .9rem; }
    .hc-today-copy em { font-size: .72rem; }
    .hc-today-row b { font-size: .74rem; padding: 5px 8px; }
    .hc-tools-row {
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 12px 8px;
    }
    .hc-tool-item span {
        width: 52px;
        height: 52px;
        border-radius: 15px;
    }
    .hc-tab-bar,
    .hc-bottom-nav {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 24px 24px 0 0 !important;
    }
}

@media (min-width: 900px) {
    .hc-attention-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* =====================================================
   HUBCLOUD — DASHBOARD v9
   Rimosso banner duplicato + card attenzione non scrollabili
   ===================================================== */

/* Il riepilogo urgente sopra ATTENZIONE è stato rimosso dal PHP.
   Tenere comunque la classe nascosta evita residui se resta in cache. */
.hc-urgent-banner { display: none !important; }

/* ATTENZIONE: niente carosello orizzontale su iPhone.
   Le card vanno in griglia, ordinate dal PHP per priorità. */
@media (max-width: 700px) {
    .hc-attention-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
        scroll-snap-type: none !important;
    }

    .hc-alert-card {
        flex: initial !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 138px !important;
        padding: 12px 11px !important;
        scroll-snap-align: none !important;
    }

    .hc-alert-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
    }

    .hc-alert-card strong {
        font-size: 1.55rem !important;
    }

    .hc-alert-title {
        font-size: .84rem !important;
    }

    .hc-alert-card em {
        font-size: .70rem !important;
        min-height: 24px !important;
    }

    .hc-alert-card b {
        font-size: .62rem !important;
        padding: 5px 8px !important;
    }

    /* Dock più Apple: flottante con quattro angoli arrotondati anche su Safari. */
    .hc-tab-bar,
    .hc-bottom-nav {
        margin: 0 !important;
        border-radius: 0 0 22px 22px !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: 50 !important;
    }

    .hc-scroll {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 389px) {
    .hc-attention-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================================
   DASHBOARD v10 — ancore interne e link card
   ===================================================== */
html { scroll-behavior: smooth; }
#task-personali,
#task-famiglia,
#attenzione,
#aree {
    scroll-margin-top: 220px;
}
@media (max-width: 600px) {
    #task-personali,
    #task-famiglia,
    #attenzione,
    #aree { scroll-margin-top: 190px; }
}

/* =====================================================
   HUBCLOUD — pagine interne aree private (v13)
   ===================================================== */
.hc-internal-area .hc-page-header-private,
.hc-internal-area .ap-tab-bar {
    display: none !important;
}

.hc-area-shell {
    padding: 22px 24px 110px;
}

.hc-area-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 2px 16px;
    font-size: .86rem;
    font-weight: 850;
    color: var(--text-secondary);
}
.hc-area-breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}
.hc-area-breadcrumb span { opacity: .55; }
.hc-area-breadcrumb strong {
    color: var(--text-secondary);
    font-weight: 850;
}

.hc-area-search {
    margin-bottom: 22px;
}

.hc-area-intro {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 122px;
    padding: 20px 20px;
    margin-bottom: 18px;
    border-radius: 26px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(0,0,0,.18), rgba(0,0,0,.05)),
        linear-gradient(135deg, #0a84ff, #38bdf8);
    box-shadow: 0 18px 42px rgba(10,132,255,.22);
}
.hc-area-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../img/home-hero-molveno.webp') center/cover no-repeat;
    opacity: .26;
    mix-blend-mode: soft-light;
}
.hc-area-intro::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -65px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
}
.hc-area-intro.personale { background: linear-gradient(135deg, #ff3b30, #ff7a90); }
.hc-area-intro.famiglia  { background: linear-gradient(135deg, #16a34a, #4ade80); }
.hc-area-intro.finanze   { background: linear-gradient(135deg, #7c3aed, #c084fc); }
.hc-area-intro.lavoro    { background: linear-gradient(135deg, #0891b2, #06b6d4); }

.hc-area-intro-icon,
.hc-area-intro-copy,
.hc-area-info {
    position: relative;
    z-index: 1;
}
.hc-area-intro-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 2rem;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.hc-area-intro-copy {
    flex: 1;
    min-width: 0;
}
.hc-area-intro-copy span {
    display: block;
    margin-bottom: 4px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    opacity: .82;
}
.hc-area-intro-copy h1 {
    margin: 0 0 5px;
    font-size: 1.55rem;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -.04em;
}
.hc-area-intro-copy p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.35;
    font-weight: 700;
    opacity: .88;
}
.hc-area-info {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hc-internal-area .ma-wrap {
    padding: 0;
}
.hc-internal-area .ma-toolbar {
    margin: 0 0 14px;
}
.hc-internal-area .ma-edit-btn {
    margin-left: auto;
    background: rgba(10,132,255,.10);
    box-shadow: none;
}
.hc-internal-area .ma-grid {
    gap: 14px;
}
.hc-internal-area .ma-card {
    min-height: 86px;
    border-radius: 22px;
    padding: 16px 18px;
    background: var(--card-bg);
    border: .5px solid var(--border-color);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.hc-internal-area .ma-card::after {
    content: "\203A";
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 1.55rem;
    line-height: 1;
    opacity: .65;
}
.hc-internal-area .ma-card.edit-mode::after { display: none; }
.hc-internal-area .ma-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 18px;
    font-size: 1.55rem;
}
.hc-internal-area .ma-nome {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -.02em;
}
.hc-internal-area .ma-desc {
    margin-top: 3px;
    font-size: .82rem;
    font-weight: 650;
}
.hc-internal-area .ma-slot.empty {
    min-height: 86px;
    border-radius: 22px;
}

/* widget famiglia dentro layout nuovo */
.hc-internal-area .fam-doc-widget {
    display: block;
    margin-bottom: 18px;
    border-radius: 26px;
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

@media (max-width: 700px) {
    .hc-area-shell {
        padding: 18px 22px 110px;
    }
    .hc-area-breadcrumb {
        margin-bottom: 14px;
        font-size: .82rem;
    }
    .hc-area-search {
        margin-bottom: 18px;
    }
    .hc-area-intro {
        min-height: 114px;
        padding: 18px 18px;
        border-radius: 24px;
        gap: 13px;
    }
    .hc-area-intro-icon {
        width: 54px;
        height: 54px;
        border-radius: 17px;
        font-size: 1.75rem;
    }
    .hc-area-intro-copy h1 {
        font-size: 1.38rem;
    }
    .hc-area-intro-copy p {
        font-size: .82rem;
    }
    .hc-area-info {
        width: 34px;
        height: 34px;
    }
    .hc-internal-area .ma-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .hc-internal-area .ma-card {
        min-height: 78px;
        padding: 14px 14px;
        border-radius: 20px;
    }
    .hc-internal-area .ma-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        border-radius: 16px;
    }
    .hc-internal-area .ma-nome { font-size: .98rem; }
    .hc-internal-area .ma-desc { font-size: .78rem; }
}

@media (max-width: 390px) {
    .hc-area-shell {
        padding-left: 16px;
        padding-right: 16px;
    }
    .hc-area-intro {
        gap: 11px;
    }
    .hc-area-intro-icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 1.55rem;
    }
    .hc-area-intro-copy h1 { font-size: 1.24rem; }
    .hc-area-intro-copy p { font-size: .76rem; }
}

/* =====================================================
   HUBCLOUD — FOOTER CONDIVISO DEFINITIVO
   Chiusura naturale comune a Home e pagine interne.
   ===================================================== */
.hc-tab-bar,
.hc-bottom-nav,
.hub-home .hc-bottom-nav {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: auto 0 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;

    min-height: 88px !important;
    padding: 12px 18px max(12px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;

    border-radius: 0 0 28px 28px !important;
    overflow: hidden !important;
    border: 0 !important;
    background: var(--hc-shell-blue) !important;
    box-shadow: none !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    flex-shrink: 0 !important;
}

.hub-home .hc-bottom-nav {
    margin-top: auto !important;
    border-radius: 0 0 28px 28px !important;
}

.hc-tab,
.hc-bottom-nav-item,
.hub-home .hc-bottom-nav-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 58px !important;
    padding: 4px 0 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
    color: rgba(255,255,255,.72) !important;
}

.hc-tab svg,
.hc-bottom-nav-item svg,
.hub-home .hc-bottom-nav-item svg {
    width: 26px !important;
    height: 26px !important;
}

.hc-tab span,
.hc-bottom-nav-item span,
.hub-home .hc-bottom-nav-item span {
    font-size: .76rem !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.hc-tab.hc-tab-active,
.hc-tab:hover,
.hc-bottom-nav-item.is-active,
.hc-bottom-nav-item:hover,
.hub-home .hc-bottom-nav-item.is-active,
.hub-home .hc-bottom-nav-item:hover {
    color: #fff !important;
}

.hub-home {
    padding-bottom: 0 !important;
    border-right: 10px solid var(--hc-shell-blue) !important;
    box-sizing: border-box !important;
}

.hub-home .hub-main {
    padding-bottom: 22px !important;
}

@media (max-width: 700px) {
    .hc-tab-bar,
    .hc-bottom-nav,
    .hub-home .hc-bottom-nav {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 82px !important;
        margin: auto 0 0 !important;
        border-radius: 0 0 22px 22px !important;
    }

    .hc-tab,
    .hc-bottom-nav-item,
    .hub-home .hc-bottom-nav-item {
        height: 58px !important;
    }

    .hc-scroll,
    .hc-content {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 390px) {
    .hc-tab-bar,
    .hc-bottom-nav,
    .hub-home .hc-bottom-nav {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 0 20px 20px !important;
    }

    .hc-tab span,
    .hc-bottom-nav-item span,
    .hub-home .hc-bottom-nav-item span {
        font-size: .7rem !important;
    }
}


.hc-internal-area .ma-toolbar {
    padding: 0;
}
.hc-internal-area .ma-edit-btn {
    border-radius: 999px;
    padding: 9px 14px;
}
.hc-internal-area .ma-card {
    align-items: center;
}
.hc-internal-area .ma-card:hover {
    border-color: rgba(10,132,255,.34);
}
.hc-internal-area .ma-badge {
    position: absolute;
    top: -6px;
    right: -7px;
}

@media (max-width: 700px) {
    .hc-internal-area .ma-toolbar {
        display: none;
    }
}


/* =====================================================
   HUBCLOUD — Design System responsive v1
   Dashboard + Area Personale. Mantiene header compatto
   senza immagine nelle aree operative e usa colori area.
   ===================================================== */
.hc-ds-page {
    --hc-area-accent: #0a84ff;
    --hc-area-accent-rgb: 10,132,255;
    --hc-area-accent-2: #38bdf8;
}
.hc-area-theme-dashboard { --hc-area-accent:#0a84ff; --hc-area-accent-rgb:10,132,255; --hc-area-accent-2:#38bdf8; }
.hc-area-theme-personale { --hc-area-accent:#8b5cf6; --hc-area-accent-rgb:139,92,246; --hc-area-accent-2:#7c3aed; }
.hc-area-theme-famiglia  { --hc-area-accent:#f59e0b; --hc-area-accent-rgb:245,158,11; --hc-area-accent-2:#f97316; }
.hc-area-theme-finanze   { --hc-area-accent:#84cc16; --hc-area-accent-rgb:132,204,22; --hc-area-accent-2:#65a30d; }
.hc-area-theme-lavoro    { --hc-area-accent:#0891b2; --hc-area-accent-rgb:8,145,178; --hc-area-accent-2:#06b6d4; }

/* Header operativo: niente immagine "pezza", solo sfondo colorato coerente */
.hc-ds-page .hc-app-header {
    background: var(--hc-shell-blue) !important;
    border-radius: 28px 28px 0 0 !important;
    box-shadow: none !important;
}
.hc-ds-page .hc-app-header::after {
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12)),
        radial-gradient(circle at 8% 0, rgba(255,255,255,.18), transparent 34%) !important;
}
.hc-ds-page .hc-app-brand-text strong,
.hc-ds-page .hc-app-brand-text em,
.hc-ds-page .hc-app-center,
.hc-ds-page .hc-app-weather { color:#fff !important; }
.hc-ds-page .hc-user-pill {
    background: rgba(255,255,255,.18) !important;
    border-color: rgba(255,255,255,.30) !important;
    color:#fff !important;
}

/* Layout largo: su iPad/PC non resta una schermata da telefono */
@media (min-width: 900px) {
    body:has(.hc-ds-page),
    body.hc-ds-page {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-color);
    }
    .hc-ds-page .phone-window {
        width: min(1220px, 94vw) !important;
        height: min(900px, 92dvh) !important;
        border-radius: 32px !important;
    }
    .hc-ds-page .hc-scroll {
        padding-bottom: 0 !important;
    }
    .hc-ds-dashboard-layout,
    .hc-ds-area-layout {
        display: grid !important;
        grid-template-columns: 250px minmax(0, 1fr) !important;
        gap: 20px !important;
        align-items: start !important;
        padding: 22px 24px 110px !important;
    }
    .hc-ds-main,
    .hc-ds-area-main {
        min-width: 0;
    }
    .hc-ds-area-layout .hc-area-breadcrumb,
    .hc-ds-area-layout .hc-area-search,
    .hc-ds-area-layout .hc-area-intro,
    .hc-ds-area-layout .hc-ds-summary,
    .hc-ds-area-layout .ma-wrap {
        grid-column: 2;
    }
    .hc-ds-dashboard .hc-area-cards,
    .hc-ds-dashboard .hc-tools-panel,
    .hc-ds-dashboard .hc-today-card,
    .hc-ds-dashboard .hc-attention-panel {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .hc-ds-dashboard .hc-attention-grid {
        grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
        overflow: visible !important;
    }
    .hc-ds-dashboard .hc-area-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 899px) {
    .hc-ds-area-layout,
    .hc-ds-dashboard-layout { padding-bottom: 110px !important; }
}

/* Hero area: colore pieno, senza foto in trasparenza */
.hc-ds-page .hc-area-intro {
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.20), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--hc-area-accent) 92%, #00182f), var(--hc-area-accent-2)) !important;
    box-shadow: 0 18px 42px rgba(var(--hc-area-accent-rgb), .18) !important;
}
.hc-ds-page .hc-area-intro::before {
    display: none !important;
}
.hc-ds-page .hc-area-intro::after {
    background: rgba(255,255,255,.13) !important;
}
.hc-ds-page .hc-area-info {
    text-decoration: none;
}

/* Riepilogo dell'area */
.hc-ds-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}
.hc-ds-summary-card {
    min-height: 122px;
    padding: 16px;
    border-radius: 22px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-shadow: 0 14px 34px rgba(0,0,0,.10);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}
.hc-ds-summary-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--hc-area-accent-rgb), .11), transparent 60%);
    pointer-events: none;
}
.hc-ds-summary-card span,
.hc-ds-summary-card strong,
.hc-ds-summary-card b,
.hc-ds-summary-card em { position: relative; z-index: 1; }
.hc-ds-summary-card span { font-size: 1.45rem; }
.hc-ds-summary-card strong { font-size: .82rem; color: var(--text-secondary); }
.hc-ds-summary-card b { font-size: 1.15rem; line-height: 1.1; }
.hc-ds-summary-card em { font-style: normal; font-size: .75rem; color: var(--hc-area-accent); font-weight: 800; }
.hc-ds-summary-card.is-blue   { border-color: rgba(10,132,255,.28); }
.hc-ds-summary-card.is-purple { border-color: rgba(139,92,246,.30); }
.hc-ds-summary-card.is-green  { border-color: rgba(34,197,94,.30); }
.hc-ds-summary-card.is-red    { border-color: rgba(255,59,48,.30); }

@media (max-width: 700px) {
    .hc-ds-page .hc-app-header {
        border-radius: 24px 24px 0 0 !important;
    }
    .hc-ds-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .hc-ds-summary-card {
        min-height: 104px;
        padding: 14px;
        border-radius: 19px;
    }
    .hc-ds-summary-card b { font-size: 1rem; }
}

@media (max-width: 390px) {
    .hc-ds-summary { grid-template-columns: 1fr; }
}

/* Piccola pulizia: l'area personale usa componenti standard e non vecchie barre inutili */
.hc-ds-page .hc-area-breadcrumb {
    color: var(--text-secondary);
}
.hc-ds-page .hc-area-breadcrumb a,
.hc-ds-page .hc-section-link,
.hc-ds-page .hc-info-link {
    color: var(--hc-area-accent) !important;
}

/* =====================================================
   SPESE — modifica in iframe
   ===================================================== */
.sp-edit-wrap {
    padding: 20px;
}
.sp-edit-error {
    display: none;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--danger);
    background: rgba(255,59,48,.12);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}
.exp-iframe-body.sp-edit-page {
    min-height: 100vh;
    background: var(--phone-bg);
}

/* =====================================================
   HUBCLOUD — AREA PERSONALE RESPONSIVE
   Sidebar iPad/PC e pulizia link manuale
   ===================================================== */
.hc-area-theme-personale {
    --hc-area-accent: #0a84ff;
    --hc-area-accent-rgb: 10,132,255;
    --hc-area-accent-2: #5856d6;
}

.hc-ds-page .hc-app-header {
    min-height: 150px;
    background: var(--hc-shell-blue) !important;
}

.hc-ds-page .hc-app-header::before,
.hc-ds-page .hc-app-header::after {
    background-image: none !important;
}

.hc-ds-page .hc-area-intro.personale {
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.20), transparent 34%),
        linear-gradient(135deg, var(--hc-area-accent), var(--hc-area-accent-2)) !important;
}

.hc-ds-page .hc-area-info,
.hc-ds-page .hc-info-link {
    min-width: 38px;
    min-height: 38px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.hc-ds-page .hc-ds-summary-card {
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.hc-ds-page .hc-ds-summary-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--hc-area-accent-rgb), .36);
}
.hc-ds-page .hc-ds-summary-card:active {
    transform: scale(.98);
}

@media (min-width: 900px) {
    .hc-ds-page .hc-app-header {
        min-height: 118px;
        border-radius: 28px 28px 0 0 !important;
    }

    .hc-ds-page .hc-app-brand-text strong {
        font-size: clamp(1.75rem, 2.2vw, 2.35rem);
    }

    .hc-ds-area-layout {
        grid-template-columns: 270px minmax(0, 1fr) !important;
        gap: 22px !important;
    }

    .hc-ds-area-main {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
    }

    .hc-ds-area-layout .hc-area-breadcrumb,
    .hc-ds-area-layout .hc-area-search,
    .hc-ds-area-layout .hc-area-intro,
    .hc-ds-area-layout .hc-ds-summary,
    .hc-ds-area-layout .ma-wrap {
        grid-column: auto !important;
    }

    .hc-ds-area-layout .hc-area-intro {
        min-height: 136px;
        margin-bottom: 18px;
    }

    .hc-ds-area-layout .hc-ds-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hc-ds-area-layout .ma-wrap {
        padding: 0 !important;
    }

    .hc-ds-area-layout .ma-grid {
        gap: 16px !important;
    }

    .hc-ds-area-layout .ma-card {
        min-height: 110px;
    }


}

@media (max-width: 899px) {
    .hc-ds-page .hc-app-header {
        min-height: 210px;
    }

    .hc-ds-page .hc-area-shell {
        padding-top: 18px;
    }

    .hc-ds-page .hc-ds-summary {
        margin-bottom: 16px;
    }
}

@media (max-width: 600px) {
    .hc-ds-page .hc-app-header {
        min-height: 208px;
    }

    .hc-ds-page .hc-area-breadcrumb {
        display: none;
    }

    .hc-ds-page .hc-area-search {
        margin-top: 0;
    }

    .hc-ds-page .hc-ds-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hc-ds-page .hc-ds-summary-card {
        min-height: 98px;
    }

    .hc-ds-page .hc-ds-summary-card span {
        font-size: 1.25rem;
    }
}

/* =====================================================
   HUBCLOUD — HEADER E FOOTER CONDIVISI
   Home pubblica + Dashboard privata sempre raggiungibili
   ===================================================== */
.hc-app-header {
    min-height: 0 !important;
    padding: 16px 22px !important;
    border-radius: 28px 28px 0 0 !important;
    background: var(--hc-shell-blue) !important;
}
.hc-app-header-row {
    display: grid !important;
    grid-template-columns: minmax(220px,1fr) auto auto !important;
    grid-template-areas: "brand meta controls" !important;
    gap: 18px !important;
    align-items: center !important;
}
.hc-app-brand { grid-area: brand !important; }
.hc-app-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 750;
    white-space: nowrap;
    min-width: 0;
}
.hc-app-meta span,
.hc-app-meta strong {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .9rem;
    line-height: 1.2;
    color: #fff;
}
.hc-app-meta strong { font-weight: 900; }
.hc-app-meta i { font-style: normal; }
.hc-app-right { grid-area: controls !important; }
.hc-header-pill,
.hc-header-icon-btn,
.hub-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.34);
    background: rgba(255,255,255,.17);
    color: #fff;
    border-radius: 999px;
    font-weight: 850;
    text-decoration: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.hc-header-pill {
    min-height: 38px;
    padding: 0 14px;
    font-size: .85rem;
}
.hc-header-icon-btn,
.hub-icon-btn {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    padding: 0;
}
.hc-header-icon-btn svg,
.hub-icon-btn svg { width: 17px; height: 17px; }
.hc-header-pill.is-active { background: rgba(255,255,255,.28); }
.hub-user-logout::after { content: none !important; }
.hub-dashboard-btn { text-transform: none; letter-spacing: 0; }
.hub-icon-btn { border: none; }
.hub-icon-btn svg { stroke: currentColor; }
.hub-logged-greeting { display: none !important; }

.hc-bottom-nav {
    position: relative;
    z-index: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 8px 10px max(10px, env(safe-area-inset-bottom)) !important;
    background: var(--hc-shell-blue) !important;
    border: 0 !important;
    border-bottom: none !important;
    border-radius: 0 0 24px 24px !important;
    box-shadow: 0 -14px 40px rgba(0,0,0,.28);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.hc-bottom-nav-item {
    min-width: 0;
    flex: 1;
    max-width: 132px;
    border-radius: 17px;
    padding: 7px 6px 6px !important;
    color: var(--text-secondary);
    transition: background .16s ease, color .16s ease, transform .12s ease;
}
.hc-bottom-nav-item svg { width: 23px !important; height: 23px !important; }
.hc-bottom-nav-item span { font-size: .68rem; font-weight: 750; }
.hc-bottom-nav-item.is-active {
    color: var(--accent) !important;
    background: rgba(10,132,255,.13);
}
.hc-bottom-nav-item:active { transform: scale(.96); }

@media (min-width: 900px) {
    .hc-bottom-nav {
        width: auto;
        max-width: 440px;
        border-radius: 0 0 24px 24px !important;
        margin-bottom: 0;
        border-bottom: 0 !important;
    }
    .hc-bottom-nav-item { max-width: 116px; }
}

@media (max-width: 700px) {
    .hc-app-header {
        padding: 14px 16px 15px !important;
        border-radius: 22px 22px 0 0 !important;
    }
    .hc-app-header-row {
        grid-template-columns: minmax(0,1fr) auto !important;
        grid-template-areas:
            "brand controls"
            "meta meta" !important;
        gap: 10px 10px !important;
    }
    .hc-app-brand {
        min-width: 0 !important;
        gap: 8px !important;
    }
    .hc-app-cloud {
        width: 34px !important;
        height: 26px !important;
        flex: 0 0 34px !important;
        margin: 0 !important;
    }
    .hc-app-brand-text strong {
        font-size: clamp(1.28rem, 7vw, 1.72rem) !important;
        line-height: 1 !important;
    }
    .hc-app-brand-text em {
        font-size: .66rem !important;
        white-space: nowrap !important;
    }
    .hc-app-meta {
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        padding-top: 2px;
    }
    .hc-app-meta span,
    .hc-app-meta strong { font-size: .78rem; }
    .hc-app-right { gap: 7px !important; }
    .hc-header-pill {
        min-height: 34px;
        padding: 0 10px;
        font-size: .76rem;
    }
    .hc-header-icon-btn,
    .hub-icon-btn {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
    .hub-hero { min-height: 226px !important; }
    .hub-hero-actions { gap: 6px !important; }
    .hub-access-btn { max-width: none !important; }
}

@media (max-width: 380px) {
    .hc-app-meta span,
    .hc-app-meta strong { font-size: .72rem; }
    .hc-header-pill { display: none; }
}

/* =====================================================
   HUBCLOUD — Area privata generale v14
   Dashboard definitiva: sidebar desktop/iPad, colori aree coerenti,
   card più leggibili e CSS localizzato alla pagina dashboard.
   ===================================================== */
.hc-area-theme-dashboard {
    --hc-area-accent: #0a84ff;
    --hc-area-accent-rgb: 10,132,255;
    --hc-area-accent-2: #38bdf8;
}
.hc-area-theme-personale {
    --hc-area-accent: #ef4444;
    --hc-area-accent-rgb: 239,68,68;
    --hc-area-accent-2: #fb7185;
}
.hc-area-theme-famiglia {
    --hc-area-accent: #f97316;
    --hc-area-accent-rgb: 249,115,22;
    --hc-area-accent-2: #f59e0b;
}
.hc-area-theme-finanze {
    --hc-area-accent: #22c55e;
    --hc-area-accent-rgb: 34,197,94;
    --hc-area-accent-2: #16a34a;
}
.hc-area-theme-lavoro {
    --hc-area-accent: #0891b2;
    --hc-area-accent-rgb: 8,145,178;
    --hc-area-accent-2: #06b6d4;
}

.hc-ds-dashboard .hc-dashboard-shell {
    padding: 18px 18px 112px;
}
.hc-ds-dashboard .hc-ds-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hc-ds-dashboard .hc-area-intro.dashboard {
    margin: 0;
    min-height: 132px;
}
.hc-ds-dashboard .hc-search-wide {
    margin: 0;
}
.hc-ds-dashboard .hc-attention-panel,
.hc-ds-dashboard .hc-today-card,
.hc-ds-dashboard .hc-area-cards,
.hc-ds-dashboard .hc-tools-panel {
    margin: 0 !important;
    padding: 18px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 14px 32px rgba(0,0,0,.12);
}
.hc-ds-dashboard .hc-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.hc-ds-dashboard .hc-section-row h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -.03em;
}
.hc-ds-dashboard .hc-section-link,
.hc-ds-dashboard .hc-info-link {
    color: var(--hc-area-accent) !important;
    font-weight: 900;
}

.hc-ds-dashboard .hc-attention-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.hc-ds-dashboard .hc-alert-card {
    min-height: 146px;
    border-radius: 20px;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.hc-ds-dashboard .hc-alert-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
}

.hc-ds-dashboard .hc-today-card {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)), var(--card-bg);
}
.hc-ds-dashboard .hc-today-row {
    padding: 11px 0;
}

.hc-ds-dashboard .hc-area-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 !important;
}
.hc-ds-dashboard .hc-area-row {
    position: relative;
    min-height: 96px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.hc-ds-dashboard .hc-area-row:hover {
    transform: translateY(-2px);
}
.hc-ds-dashboard .hc-area-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--area-color, var(--hc-area-accent));
}
.hc-ds-dashboard .hc-area-row::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -48px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--area-color, var(--hc-area-accent)) 20%, transparent);
    pointer-events: none;
}
.hc-ds-dashboard .hc-area-row.personale { --area-color: #ef4444; border-left-color: #ef4444; }
.hc-ds-dashboard .hc-area-row.famiglia  { --area-color: #f97316; border-left-color: #f97316; }
.hc-ds-dashboard .hc-area-row.finanze   { --area-color: #22c55e; border-left-color: #22c55e; }
.hc-ds-dashboard .hc-area-row.lavoro    { --area-color: #0891b2; border-left-color: #0891b2; }
.hc-ds-dashboard .hc-area-row-icon {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    border-radius: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--area-color, var(--hc-area-accent)) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--area-color, var(--hc-area-accent)) 28%, transparent);
    font-size: 1.45rem;
}
.hc-ds-dashboard .hc-area-row-copy,
.hc-ds-dashboard .hc-area-row-arrow {
    position: relative;
    z-index: 1;
}
.hc-ds-dashboard .hc-area-row-copy strong {
    font-size: 1rem;
    font-weight: 950;
}
.hc-ds-dashboard .hc-area-row-copy em {
    margin-top: 3px;
    font-size: .78rem;
    line-height: 1.3;
    font-weight: 650;
}
.hc-ds-dashboard .hc-area-row-arrow {
    color: color-mix(in srgb, var(--area-color, var(--hc-area-accent)) 80%, var(--text-color));
    font-size: 1.45rem;
    font-weight: 600;
}

.hc-ds-dashboard .hc-tools-row {
    grid-template-columns: repeat(6, minmax(0,1fr));
}
.hc-ds-dashboard .hc-tool-item span {
    background: var(--bg-secondary);
    transition: transform .16s ease, border-color .16s ease;
}
.hc-ds-dashboard .hc-tool-item:hover span {
    transform: translateY(-2px);
    border-color: rgba(var(--hc-area-accent-rgb), .34);
}

.hc-ds-dashboard .hc-dashboard-tasks {
    max-width: 1180px;
    width: calc(100% - 36px);
    margin: 0 auto;
    padding-bottom: 120px;
}
.hc-ds-dashboard .task-section {
    border-radius: 22px;
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.hc-ds-dashboard .ap-section-title {
    font-size: .86rem;
    font-weight: 950;
    letter-spacing: .06em;
}

@media (min-width: 900px) {
    .hc-ds-dashboard .phone-window {
        width: min(1220px, 94vw) !important;
        height: min(900px, 92dvh) !important;
    }
    .hc-ds-dashboard .hc-dashboard-shell {
        padding: 22px 24px 18px !important;
    }
    .hc-ds-dashboard .hc-ds-dashboard-layout {
        grid-template-columns: 246px minmax(0, 1fr) !important;
        gap: 20px !important;
    }
    .hc-ds-dashboard .hc-attention-grid {
        grid-template-columns: repeat(5, minmax(125px, 1fr)) !important;
    }
    .hc-ds-dashboard .hc-dashboard-tasks {
        width: calc(100% - 48px);
        padding-bottom: 126px;
    }
}

@media (max-width: 899px) {
    .hc-ds-dashboard .hc-dashboard-shell {
        padding: 16px 14px 112px !important;
    }
    .hc-ds-dashboard .hc-ds-main {
        gap: 14px;
    }
    .hc-ds-dashboard .hc-area-intro.dashboard {
        min-height: 116px;
        border-radius: 24px;
    }
    .hc-ds-dashboard .hc-attention-panel,
    .hc-ds-dashboard .hc-today-card,
    .hc-ds-dashboard .hc-area-cards,
    .hc-ds-dashboard .hc-tools-panel {
        padding: 15px;
        border-radius: 22px;
    }
    .hc-ds-dashboard .hc-attention-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 10px !important;
    }
    .hc-ds-dashboard .hc-alert-card {
        min-height: 136px !important;
    }
    .hc-ds-dashboard .hc-area-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .hc-ds-dashboard .hc-tools-row {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
    .hc-ds-dashboard .hc-dashboard-tasks {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 390px) {
    .hc-ds-dashboard .hc-dashboard-shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .hc-ds-dashboard .hc-attention-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =====================================================
   HUBCLOUD — Uniform width Home/Dashboard v2
   Home pubblica larga come dashboard su iPad/PC.
   Dashboard non duplicata nel footer/header.
   ===================================================== */
@media (min-width: 900px) {
    .hub-home-body {
        padding: 10px 0 !important;
    }

    .hub-home {
        width: min(1220px, 94vw) !important;
        max-width: min(1220px, 94vw) !important;
        min-height: min(900px, calc(100dvh - 20px)) !important;
        border-radius: 28px !important;
    }

    .hub-home .hub-hero {
        min-height: 310px !important;
        border-radius: 28px 28px 0 0 !important;
        padding-left: 42px !important;
        padding-right: 42px !important;
    }

    .hub-home .hub-main {
        width: 100% !important;
        max-width: 1180px !important;
        margin: 0 auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .hub-home .hub-pensiero {
        max-width: 100% !important;
    }

    .hub-home .hub-gallery-row {
        max-width: 980px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

}

/* Su Home il pulsante Dashboard sta solo nel footer */
.hub-home .hub-dashboard-btn {
    display: none !important;
}

/* Footer stabile anche quando la voce Dashboard viene nascosta nella dashboard */
.hc-bottom-nav .hc-bottom-nav-item {
    min-width: 82px;
}


/* =====================================================
   HUBCLOUD DESIGN SYSTEM — Dashboard / Aree v1
   Sidebar espandibile + layout definitivo
   ===================================================== */
:root {
    --hc-dashboard: #0a84ff;
    --hc-personale: #2457d6;
    --hc-famiglia:  #ff9500;
    --hc-finanze:   #34c759;
    --hc-lavoro:    #0891b2;
    --hc-sidebar-w: 248px;
}

.phone-window {
    width: min(100%, 1120px);
}

@media (min-width: 1024px) {
    .phone-window {
        width: min(1120px, 96vw);
        height: 90vh;
        border-radius: 30px;
    }
}

@media (min-width: 1440px) {
    .phone-window {
        width: min(1220px, 94vw);
    }
}

.hc-dashboard-shell,
.hc-area-shell,
.hc-ds-dashboard-layout,
.hc-ds-area-layout {
    display: grid;
    grid-template-columns: var(--hc-sidebar-w) minmax(0, 1fr);
    gap: 18px;
    min-height: 100%;
    padding: 18px;
}

body.hc-internal-area .hc-scroll,
body.hc-ds-dashboard .hc-scroll {
    display: flex;
    flex-direction: column;
}

body.hc-internal-area .hc-scroll > .hc-ds-area-layout,
body.hc-ds-dashboard .hc-scroll > .hc-ds-dashboard-layout {
    flex: 1 0 auto;
}

.hc-ds-main,
.hc-ds-area-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}











.hc-area-intro,
.hc-ds-area-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(10,132,255,.22), rgba(10,132,255,.08)), var(--card-bg);
    min-height: 118px;
}
.hc-area-intro.dashboard { background: linear-gradient(135deg, rgba(10,132,255,.26), rgba(10,132,255,.07)), var(--card-bg); }
.hc-area-intro.personale { background: linear-gradient(135deg, color-mix(in srgb, var(--hc-personale) 36%, transparent), rgba(255,255,255,.035)), var(--card-bg); }
.hc-area-intro.famiglia  { background: linear-gradient(135deg, color-mix(in srgb, var(--hc-famiglia) 34%, transparent), rgba(255,255,255,.035)), var(--card-bg); }
.hc-area-intro.finanze   { background: linear-gradient(135deg, color-mix(in srgb, var(--hc-finanze) 34%, transparent), rgba(255,255,255,.035)), var(--card-bg); }
.hc-area-intro.lavoro    { background: linear-gradient(135deg, color-mix(in srgb, var(--hc-lavoro) 34%, transparent), rgba(255,255,255,.035)), var(--card-bg); }

.hc-area-intro-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    background: rgba(255,255,255,.14);
    flex-shrink: 0;
}
.hc-area-intro-copy {
    flex: 1;
    min-width: 0;
}
.hc-area-intro-copy span {
    display: block;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    color: rgba(255,255,255,.68);
    margin-bottom: 5px;
}
.hc-area-intro-copy h1 {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    letter-spacing: -.04em;
    line-height: 1.02;
}
.hc-area-intro-copy p {
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: .92rem;
    line-height: 1.35;
}
.hc-area-info {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-weight: 900;
    flex-shrink: 0;
}

.hc-search-wide {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 18px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}
.hc-search-wide input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-color);
    font: inherit;
}
.hc-search-wide input::placeholder { color: var(--text-secondary); }

.hc-attention-panel,
.hc-today-card,
.hc-area-cards,
.hc-tools-panel {
    border-radius: 24px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    padding: 16px;
}
.hc-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.hc-section-row h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: -.02em;
}
.hc-section-link,
.hc-info-link {
    color: var(--accent);
    font-size: .78rem;
    font-weight: 750;
}

.hc-attention-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
}
.hc-alert-card {
    min-height: 128px;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 4px;
    padding: 13px;
    border-radius: 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.hc-alert-card strong {
    font-size: 1.55rem;
    line-height: 1;
}
.hc-alert-title {
    font-size: .78rem;
    font-weight: 800;
}
.hc-alert-card em {
    font-style: normal;
    color: var(--text-secondary);
    font-size: .72rem;
    line-height: 1.25;
}
.hc-alert-card b {
    display: inline-flex;
    align-self: end;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .64rem;
    background: rgba(255,255,255,.08);
}
.hc-alert-card.danger { border-color: rgba(255,59,48,.35); }
.hc-alert-card.warning { border-color: rgba(255,149,0,.35); }

.hc-area-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}
.hc-area-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 14px;
    border-radius: 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.hc-area-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    flex-shrink: 0;
}
.hc-area-row-copy {
    flex: 1;
    min-width: 0;
}
.hc-area-row-copy strong,
.hc-area-row-copy em {
    display: block;
}
.hc-area-row-copy em {
    color: var(--text-secondary);
    font-size: .76rem;
    font-style: normal;
    margin-top: 2px;
}
.hc-area-row.personale { border-color: color-mix(in srgb, var(--hc-personale) 44%, var(--border-color)); }
.hc-area-row.famiglia  { border-color: color-mix(in srgb, var(--hc-famiglia) 44%, var(--border-color)); }
.hc-area-row.finanze   { border-color: color-mix(in srgb, var(--hc-finanze) 44%, var(--border-color)); }
.hc-area-row.lavoro    { border-color: color-mix(in srgb, var(--hc-lavoro) 44%, var(--border-color)); }

.hc-ds-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
}
.hc-ds-summary-card {
    min-height: 112px;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.hc-ds-summary-card span { font-size: 1.45rem; }
.hc-ds-summary-card strong { font-size: .95rem; }
.hc-ds-summary-card b {
    color: var(--text-secondary);
    font-size: .75rem;
    font-weight: 600;
}
.hc-ds-summary-card em {
    margin-top: auto;
    font-style: normal;
    color: var(--accent);
    font-size: .72rem;
    font-weight: 800;
}

.hc-area-breadcrumb {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 700;
}
.hc-area-breadcrumb a { color: var(--accent); }

.hc-tools-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 8px;
}
.hc-tool-item {
    min-height: 72px;
    border-radius: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.hc-tool-item em {
    font-style: normal;
    font-size: .72rem;
    color: var(--text-secondary);
    font-weight: 700;
}

@media (max-width: 900px) {
    .hc-dashboard-shell,
    .hc-area-shell,
    .hc-ds-dashboard-layout,
    .hc-ds-area-layout {
        grid-template-columns: 1fr;
        padding: 14px;
        gap: 14px;
    }


}

@media (max-width: 700px) {
    .hc-dashboard-shell,
    .hc-area-shell,
    .hc-ds-dashboard-layout,
    .hc-ds-area-layout {
        padding: 12px;
    }



    .hc-area-intro,
    .hc-ds-area-hero {
        padding: 15px;
        min-height: 104px;
        border-radius: 21px;
    }

    .hc-area-intro-icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        font-size: 1.55rem;
    }

    .hc-attention-grid,
    .hc-area-list,
    .hc-ds-summary {
        grid-template-columns: 1fr 1fr;
    }

    .hc-tools-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .hc-alert-card {
        min-height: 116px;
    }
}

@media (max-width: 420px) {
    .hc-attention-grid,
    .hc-area-list,
    .hc-ds-summary {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   HUBCLOUD DESIGN SYSTEM v2 — Sidebar definitiva
   Replica layout deciso: aree colorate, sottomenu espandibile,
   parentesi/barra coerente con il colore area.
   ===================================================== */
:root {
    --hc-dashboard: #0a84ff;
    --hc-personale: #2563eb;
    --hc-famiglia: #f97316;
    --hc-finanze: #22c55e;
    --hc-lavoro: #0891b2;
    --hc-sidebar-bg: rgba(255,255,255,.72);
    --hc-sidebar-soft: rgba(255,255,255,.52);
}
[data-theme="dark"] {
    --hc-sidebar-bg: rgba(15,23,42,.82);
    --hc-sidebar-soft: rgba(15,23,42,.58);
}









/* Dashboard: parte interna più vicina al mockup deciso */
.hc-ds-area-hero,
.hc-area-intro.dashboard {
    min-height: 118px;
    padding: 22px 24px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0a84ff 0%, #0ea5e9 58%, #38bdf8 100%);
    box-shadow: 0 16px 34px rgba(10,132,255,.18);
}
.hc-area-intro.dashboard .hc-area-intro-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
}
.hc-search-wide {
    border-radius: 18px;
    min-height: 56px;
}
.hc-attention-panel,
.hc-today-card,
.hc-area-cards {
    border-radius: 24px;
}

@media (min-width: 768px) {
    .hc-ds-dashboard-layout,
    .hc-ds-area-layout {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 22px;
        padding: 20px;
    }
}

@media (max-width: 767px) {
    .hc-ds-dashboard-layout,
    .hc-ds-area-layout { display: block; padding: 14px; }
    .hc-ds-area-hero,
    .hc-area-intro.dashboard { min-height: 104px; padding: 18px; }
}

/* =====================================================
   HUBCLOUD DESIGN SYSTEM v3 — correzione coerenza colori/sidebar
   Personale = blu pieno, Famiglia = arancio, Finanze = verde, Lavoro = viola.
   La parentesi laterale usa sempre lo stesso colore del titolo area aperta.
   ===================================================== */
:root {
    --hc-dashboard: #0a84ff;
    --hc-personale: #2457d6;
    --hc-famiglia:  #f97316;
    --hc-finanze:   #22c55e;
    --hc-lavoro:    #0891b2;
}

.hc-area-theme-personale {
    --hc-area-accent: #2457d6 !important;
    --hc-area-accent-rgb: 36,87,214 !important;
    --hc-area-accent-2: #1d4ed8 !important;
}
.hc-area-theme-famiglia {
    --hc-area-accent: #f97316 !important;
    --hc-area-accent-rgb: 249,115,22 !important;
    --hc-area-accent-2: #fb923c !important;
}
.hc-area-theme-finanze {
    --hc-area-accent: #22c55e !important;
    --hc-area-accent-rgb: 34,197,94 !important;
    --hc-area-accent-2: #16a34a !important;
}
.hc-area-theme-lavoro {
    --hc-area-accent: #0891b2 !important;
    --hc-area-accent-rgb: 8,145,178 !important;
    --hc-area-accent-2: #06b6d4 !important;
}
.hc-area-theme-contenuti {
    --hc-area-accent: #2563eb !important;
    --hc-area-accent-rgb: 37,99,235 !important;
    --hc-area-accent-2: #3b82f6 !important;
}

.hc-ds-dashboard .hc-area-row.personale,
.hc-area-row.personale {
    --area-color: var(--hc-personale) !important;
    border-left-color: var(--hc-personale) !important;
    border-color: color-mix(in srgb, var(--hc-personale) 44%, var(--border-color)) !important;
}
.hc-ds-dashboard .hc-area-row.famiglia,
.hc-area-row.famiglia {
    --area-color: var(--hc-famiglia) !important;
    border-left-color: var(--hc-famiglia) !important;
}
.hc-ds-dashboard .hc-area-row.finanze,
.hc-area-row.finanze {
    --area-color: var(--hc-finanze) !important;
    border-left-color: var(--hc-finanze) !important;
}
.hc-ds-dashboard .hc-area-row.lavoro,
.hc-area-row.lavoro {
    --area-color: var(--hc-lavoro) !important;
    border-left-color: var(--hc-lavoro) !important;
}
.hc-ds-dashboard .hc-area-row.contenuti,
.hc-area-row.contenuti {
    --area-color: #2563eb !important;
    border-left-color: #2563eb !important;
    border-color: color-mix(in srgb, #2563eb 44%, var(--border-color)) !important;
}
.hc-sidebar__area--contenuti { --hc-side-color: #2563eb !important; }

/* Dashboard: identità rosso rubino, distinta dalle aree tematiche. */
.hc-area-theme-dashboard,
.hc-ds-dashboard {
    --hc-dashboard: #b91c1c !important;
    --hc-area-accent: #b91c1c !important;
    --hc-area-accent-rgb: 185,28,28 !important;
    --hc-area-accent-2: #ef4444 !important;
}
.hc-ds-dashboard .hc-area-intro.dashboard,
.hc-area-intro.dashboard {
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, #991b1b, #ef4444) !important;
    box-shadow: 0 16px 34px rgba(185,28,28,.18) !important;
}
.hc-ds-dashboard .hc-sidebar__link--dashboard,
.hc-ds-dashboard .hc-sidebar__link--dashboard.is-active {
    background: linear-gradient(135deg, rgba(153,27,27,.28), rgba(239,68,68,.14)) !important;
    border-color: rgba(239,68,68,.62) !important;
    box-shadow: inset 4px 0 0 #ef4444, 0 5px 14px rgba(185,28,28,.12) !important;
}






.hc-ds-page .hc-area-intro.personale,
.hc-area-intro.personale {
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, var(--hc-personale), #1d4ed8) !important;
}
.hc-ds-page .hc-area-intro.famiglia,
.hc-area-intro.famiglia {
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, var(--hc-famiglia), #fb923c) !important;
}
.hc-ds-page .hc-area-intro.finanze,
.hc-area-intro.finanze {
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, var(--hc-finanze), #16a34a) !important;
}
.hc-ds-page .hc-area-intro.lavoro,
.hc-area-intro.lavoro {
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, var(--hc-lavoro), #06b6d4) !important;
}
.hc-ds-page .hc-area-intro.contenuti,
.hc-area-intro.contenuti {
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, #2563eb, #60a5fa) !important;
}








@media (max-width: 767px) {
}

/* =====================================================
   HUBCLOUD FIX v5.1 — Footer notifiche + overflow stabile
   ===================================================== */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}
.phone-window,
.main-app,
.hc-ds-dashboard,
.hc-ds-page,
.hc-ds-dashboard-layout,
.hc-ds-area-layout,
.hc-ds-main,
.hc-card,
.hc-attention-panel,
.hc-today-card {
    min-width: 0;
    max-width: 100%;
}
.hc-bottom-nav-item {
    position: relative !important;
}
.hc-bottom-nav-item .hc-nav-icon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    line-height: 1 !important;
}
.hc-bottom-nav-item .hc-nav-icon-wrap svg {
    width: 23px !important;
    height: 23px !important;
}
.hc-bottom-nav-item .hc-nav-badge,
.hc-bottom-nav-item .hc-badge.hc-nav-badge {
    position: absolute !important;
    top: -9px !important;
    right: -12px !important;
    z-index: 5 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ff2d55 !important;
    color: #fff !important;
    border: 2px solid rgba(28,28,30,.96) !important;
    box-shadow: 0 4px 10px rgba(255,45,85,.35) !important;
    font-size: .62rem !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
.hc-bottom-nav-item.is-active .hc-nav-badge {
    border-color: rgba(10,132,255,.22) !important;
}
@media (min-width: 768px) {
    .hc-bottom-nav {
        overflow: visible !important;
    }
}


.hc-bottom-nav-item .hc-nav-icon-wrap {
    overflow: visible !important;
}
.hc-bottom-nav-item .hc-nav-badge,
.hc-bottom-nav-item .hc-badge.hc-nav-badge {
    visibility: visible !important;
    opacity: 1 !important;
}


/* =====================================================
   HUBCLOUD FIX v6 — Area personale definitiva
   - badge notifiche footer/sidebar
   - ricerca sotto card area
   - moduli uniformi
   - niente scroll orizzontale
   - info cliccabile
   ===================================================== */
html,
body,
.phone-window,
.hc-scroll,
.hc-ds-area-layout,
.hc-ds-area-main {
    overflow-x: hidden !important;
}

.hc-ds-area-main,
.hc-ds-dashboard-main,
.hc-area-shell,
.hc-dashboard-shell {
    min-width: 0 !important;
    max-width: 100% !important;
}

.hc-area-page-personale .hc-ds-area-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.hc-area-page-personale .hc-area-breadcrumb {
    order: 1 !important;
}
.hc-area-page-personale .hc-area-intro {
    order: 2 !important;
}
.hc-area-page-personale .hc-area-search {
    order: 3 !important;
    width: 100% !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}
.hc-area-page-personale .hc-area-modules,
.hc-area-page-personale .ma-wrap {
    order: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Strumenti personali: sezione spostata dalla dashboard all'Area personale. */
.hc-area-page-personale .hc-personal-tools {
    order: 5;
    width: 100%;
    margin: 0;
}

.hc-area-page-personale .hc-personal-tools .hc-tools-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 767px) {
    .hc-area-page-personale .hc-personal-tools .hc-tools-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* In Area personale resta un solo stile di card: quello dei moduli trascinabili. */
.hc-area-page-personale .hc-ds-summary {
    display: none !important;
}
.hc-area-page-personale .ma-toolbar {
    margin: 0 0 12px !important;
}
.hc-area-page-personale .ma-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 12px !important;
    overflow: visible !important;
}
.hc-area-page-personale .ma-slot,
.hc-area-page-personale .ma-card,
.hc-area-page-personale .ma-info {
    min-width: 0 !important;
    max-width: 100% !important;
}
.hc-area-page-personale .ma-card {
    min-height: 92px !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--card-bg) !important;
    box-shadow: none !important;
}
.hc-area-page-personale .ma-card::after {
    content: '\203A' !important;
    margin-left: auto !important;
    color: var(--text-secondary) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}
.hc-area-page-personale .ma-card.edit-mode::after {
    display: none !important;
}
.hc-area-page-personale .ma-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 15px !important;
}
.hc-area-page-personale .ma-nome {
    font-size: .95rem !important;
}
.hc-area-page-personale .ma-desc {
    font-size: .78rem !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

@media (min-width: 901px) {
    .hc-area-page-personale .ma-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1180px) {
    .hc-area-page-personale .ma-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 900px) {
    .hc-area-page-personale .ma-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 600px) {
    .hc-area-page-personale .ma-grid {
        grid-template-columns: 1fr !important;
    }
    .hc-area-page-personale .ma-toolbar {
        display: none !important;
    }
}

/* Pulsante info: sempre sopra gli overlay e cliccabile. */
.hc-area-info {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    text-decoration: none !important;
}

/* Badge notifiche nel footer. */
.hc-bottom-nav-item .hc-nav-icon-wrap {
    position: relative !important;
    overflow: visible !important;
}
.hc-bottom-nav-item .hc-nav-badge,
.hc-bottom-nav-item .hc-badge.hc-nav-badge {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: -8px !important;
    right: -12px !important;
    z-index: 10 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ff2d55 !important;
    color: #fff !important;
    border: 2px solid var(--nav-bg) !important;
    font-size: .62rem !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-weight: 900 !important;
}



/* =====================================================
   HubCloud — Info modal aree
   ===================================================== */
.hc-area-info,
.hc-info-link {
    border: 0;
    appearance: none;
    -webkit-appearance: none;
}
.hc-info-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 900000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.hc-info-modal.open { display: flex; }
.hc-info-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.hc-info-modal-card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 24px 22px 22px;
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    color: var(--text-color);
}
.hc-info-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 1.35rem;
    line-height: 1;
}
.hc-info-modal-kicker {
    display: inline-flex;
    margin-bottom: 10px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--accent);
}
.hc-info-modal-card h2 {
    margin: 0 42px 10px 0;
    font-size: 1.35rem;
    line-height: 1.15;
}
.hc-info-modal-card p {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: .92rem;
    line-height: 1.55;
}
.hc-info-modal-card p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
    .hc-info-modal { align-items: flex-end; padding: 12px; }
    .hc-info-modal-card { border-radius: 24px 24px max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-bottom)); }
}

















/* Card centrali: niente titoli troncati tipo "Il mio Inv..." */
.hc-area-page-personale .ma-grid {
    align-items: stretch !important;
}

.hc-area-page-personale .ma-slot {
    min-height: 116px !important;
}

.hc-area-page-personale .ma-card {
    min-height: 116px !important;
    height: 100% !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    overflow: visible !important;
}

.hc-area-page-personale .ma-card::after {
    align-self: center !important;
    flex: 0 0 auto !important;
}

.hc-area-page-personale .ma-info {
    min-width: 0 !important;
    overflow: visible !important;
    gap: 5px !important;
    padding-top: 2px !important;
}

.hc-area-page-personale .ma-nome,
.hc-area-page-personale .ma-desc {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.hc-area-page-personale .ma-nome {
    font-size: .98rem !important;
    line-height: 1.22 !important;
}

.hc-area-page-personale .ma-desc {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    font-size: .80rem !important;
    line-height: 1.35 !important;
}

.hc-area-page-personale .ma-icon {
    margin-top: 1px !important;
}

@media (min-width: 901px) {
    .hc-area-page-personale .ma-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

@media (min-width: 1220px) {
    .hc-area-page-personale .ma-grid {
        grid-template-columns: repeat(3, minmax(210px, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .hc-area-page-personale .ma-slot,
    .hc-area-page-personale .ma-card {
        min-height: 108px !important;
    }
}

@media (max-width: 600px) {
    .hc-area-page-personale .ma-slot,
    .hc-area-page-personale .ma-card {
        min-height: auto !important;
    }
    .hc-area-page-personale .ma-card {
        padding: 14px 15px !important;
        align-items: center !important;
    }
}

/* =====================================================
   vNext — Area Personale: ordine da menu/Centro Controllo
   ===================================================== */
.hc-area-page-personale .ma-toolbar,
.hc-area-page-personale .ma-cols-ctrl,
.hc-area-page-personale .ma-edit-btn,
.hc-area-page-personale .ma-drag-hint {
    display: none !important;
}

.hc-area-page-personale .ma-grid {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
}

.hc-area-page-personale .ma-slot {
    min-width: 0;
}

.hc-area-page-personale .ma-card {
    min-width: 0;
    width: 100%;
    align-items: flex-start;
}

.hc-area-page-personale .ma-info {
    min-width: 0;
    overflow: visible;
}

.hc-area-page-personale .ma-nome,
.hc-area-page-personale .ma-desc {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}

.hc-area-page-personale .ma-desc {
    line-height: 1.35;
}














@media (min-width: 768px) {
    .hc-ds-dashboard-layout,
    .hc-ds-area-layout {
        grid-template-columns: 238px minmax(0, 1fr) !important;
        gap: 18px !important;
    }
}

@media (max-width: 767px) {
}

/* =====================================================
   HUBCLOUD SIDEBAR ACCORDION v2
   Una sola area aperta alla volta + parentesi più morbida.
   ===================================================== */
@media (min-width: 768px) {










    @keyframes hcSidebarOpen {
        from { opacity: 0; transform: translateY(-3px); }
        to   { opacity: 1; transform: translateY(0); }
    }







}

/* =====================================================
   HUBCLOUD POLISH — switch tema + parentesi sidebar v1
   ===================================================== */

/* Parentesi sottomenu: vero contenitore aperto a destra, non linea verticale */
@media (min-width: 768px) {









}

/* =====================================================
   HUBCLOUD FIX — parentesi sidebar pulita v2
   Rimuove il riquadro pesante e usa una parentesi morbida laterale.
   ===================================================== */
@media (min-width: 768px) {













}


/* =====================================================
   HUBCLOUD SIDEBAR DEFINITIVA — v1
   Basata sul mockup approvato:
   - etichette aree colorate
   - parentesi/outline anche sulle aree chiuse
   - una sola area aperta alla volta gestita dal JS
   - sottomenu pulito con linea e nodi
   ===================================================== */
@media (min-width: 768px) {

























}

@media (max-width: 767px) {
}

/* =====================================================
   HUBCLOUD SIDEBAR — VERSIONE DEFINITIVA VISIBILE
   Etichette colorate + parentesi anche su aree chiuse
   ===================================================== */
@media (min-width: 901px) {
    :root {
        --hc-dashboard: #0a84ff;
        --hc-personale: #2457d6;
        --hc-famiglia:  #ff9500;
        --hc-finanze:   #34c759;
        --hc-lavoro:    #0891b2;
    }






















    @keyframes hcSideSubmenuIn {
        from { opacity: 0; transform: translateY(-3px); }
        to   { opacity: 1; transform: translateY(0); }
    }






}

/* mobile/tablet stretto: non tocco la struttura, ma evito la parentesi nel menu compatto */
@media (max-width: 900px) {
}


/* =====================================================
   TASK — modifica da area_privata
   ===================================================== */
.task-edit-btn,
.task-more-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: .5px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--accent);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.task-edit-btn:active,
.task-more-btn:active { opacity: .75; }
.task-more-btn {
    width: 34px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 1px;
}
.task-edit-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9500;
    align-items: flex-end;
    justify-content: center;
}
.task-edit-overlay.active { display: flex; }
.task-edit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.task-edit-sheet {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    background: var(--phone-bg);
    border-radius: 24px 24px 0 0;
    border-top: .5px solid var(--border-color);
    box-shadow: 0 -20px 50px rgba(0,0,0,.35);
}
.task-edit-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.task-edit-delete {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255,59,48,.32);
    border-radius: 14px;
    background: rgba(255,59,48,.10);
    color: var(--danger);
    font: inherit;
    font-weight: 800;
}

.task-action-sheet {
    position: relative;
    z-index: 1;
    width: calc(100% - 20px);
    max-width: 420px;
    padding: 0 0 max(10px, env(safe-area-inset-bottom));
}
.task-action-group,
.task-action-cancel {
    overflow: hidden;
    border: .5px solid var(--border-color);
    border-radius: 16px;
    background: color-mix(in srgb, var(--phone-bg) 94%, transparent);
    box-shadow: 0 14px 38px rgba(0,0,0,.24);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.task-action-group button,
.task-action-cancel {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 1rem;
    font-weight: 750;
    text-align: center;
}
.task-action-group button + button {
    border-top: .5px solid var(--border-color);
}
.task-action-group .is-destructive {
    color: var(--danger);
}
.task-action-periods button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
}
.task-action-periods button span {
    width: 28px;
    flex: 0 0 28px;
    text-align: center;
}
.task-action-cancel {
    margin-top: 8px;
    color: var(--accent);
    font-weight: 850;
}

.hc-ds-dashboard .task-drag-handle {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: -5px 0 -5px -8px !important;
    border-radius: 9px !important;
    cursor: grab !important;
    touch-action: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}
.hc-ds-dashboard .task-drag-handle:active {
    cursor: grabbing !important;
    background: rgba(10,132,255,.12) !important;
    color: var(--accent) !important;
    opacity: 1 !important;
}

@media (min-width: 768px) {
    .task-edit-overlay { align-items: center; }
    .task-edit-sheet { border-radius: 24px; max-width: 420px; }
    .task-action-sheet { padding-bottom: 0; }
}


/* =====================================================
   HUBCLOUD — header data/meteo su due righe
   ===================================================== */

/* Area privata / dashboard loggata: meteo sotto la data su iPhone, iPad e PC */
@media (min-width: 701px) {
    .hc-app-header-row {
        grid-template-columns: minmax(260px, 1fr) minmax(210px, auto) minmax(188px, auto) !important;
        grid-template-areas:
            "brand center controls"
            "brand weather controls" !important;
        gap: 4px 24px !important;
        align-items: center !important;
    }

    .hc-app-brand { grid-area: brand !important; }
    .hc-app-center { grid-area: center !important; }
    .hc-app-weather {
        grid-area: weather !important;
        justify-self: start !important;
        align-self: start !important;
        display: inline-grid !important;
        grid-template-columns: auto auto auto !important;
        grid-template-areas: "icon temp city" !important;
        column-gap: 8px !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        border-left: 0 !important;
    }
    .hc-weather-icon { grid-area: icon !important; }
    .hc-app-weather strong { grid-area: temp !important; }
    .hc-app-weather em {
        grid-area: city !important;
        display: inline !important;
        align-self: center !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
    .hc-app-right {
        grid-area: controls !important;
        justify-self: end !important;
    }
}

@media (max-width: 700px) {
    .hc-app-header-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand controls"
            "center center"
            "date date"
            "weather weather" !important;
        gap: 7px 10px !important;
        align-items: center !important;
    }

    .hc-app-center {
        display: contents !important;
    }

    .hc-app-center strong {
        grid-area: center !important;
        margin: 8px 0 0 !important;
    }

    .hc-app-center span {
        grid-area: date !important;
        margin: 0 !important;
        justify-self: start !important;
    }

    .hc-app-weather {
        grid-area: weather !important;
        justify-self: start !important;
        align-self: start !important;
        display: inline-grid !important;
        grid-template-columns: auto auto auto !important;
        grid-template-areas: "icon temp city" !important;
        column-gap: 7px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .hc-weather-icon { grid-area: icon !important; }
    .hc-app-weather strong {
        grid-area: temp !important;
        font-size: 1.22rem !important;
        line-height: 1 !important;
    }
    .hc-app-weather em {
        grid-area: city !important;
        display: inline !important;
        align-self: center !important;
        margin: 0 !important;
        font-size: .76rem !important;
        font-style: normal !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        opacity: .95 !important;
    }
}

/* Home ospite: su schermi piccoli mette data, meteo e santo in verticale */
@media (max-width: 600px) {
    .hub-info-card {
        left: 20px !important;
        right: 20px !important;
        bottom: -86px !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        padding: 8px 0 !important;
        border-radius: 16px !important;
    }

    .hub-info-item {
        min-height: 48px !important;
        height: auto !important;
        justify-content: flex-start !important;
        padding: 7px 18px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(31,41,55,.08) !important;
    }

    .hub-info-item:last-child {
        border-bottom: 0 !important;
    }

    .hub-main {
        padding-top: 108px !important;
    }
}

/* =====================================================
   FIX 2026-07-02 — Home mobile e header Dashboard
   - Home pubblica iPhone: ripristina la card info compatta a 3 colonne
   - Dashboard/iPad/iPhone: evita overflow di data/meteo nell'header
   ===================================================== */

/* HOME PUBBLICA — torna alla versione compatta precedente su iPhone */
@media (max-width: 600px) {
    .hub-home.is-guest .hub-info-card {
        left: 20px !important;
        right: 20px !important;
        bottom: -28px !important;
        height: 58px !important;
        min-height: 58px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    .hub-home.is-guest .hub-info-item {
        min-height: 0 !important;
        height: 100% !important;
        justify-content: center !important;
        padding: 0 5px !important;
        gap: 6px !important;
        border-bottom: 0 !important;
        border-right: 1px solid rgba(31,41,55,.08) !important;
    }

    .hub-home.is-guest .hub-info-item:last-child {
        border-right: 0 !important;
    }

    .hub-home.is-guest .hub-info-icon {
        width: 24px !important;
        height: 24px !important;
    }

    .hub-home.is-guest .hub-weather-icon {
        font-size: 1.45rem !important;
    }

    .hub-home.is-guest .hub-info-item strong {
        font-size: .56rem !important;
        line-height: 1.12 !important;
    }

    .hub-home.is-guest .hub-weather strong {
        font-size: 1.05rem !important;
    }

    .hub-home.is-guest .hub-info-item span {
        font-size: .52rem !important;
        line-height: 1.15 !important;
    }

    .hub-home.is-guest .hub-main {
        padding-top: 45px !important;
    }
}

/* HEADER APP / DASHBOARD — data e meteo non devono uscire dalla schermata */
.hc-app-header {
    overflow: hidden !important;
}

.hc-app-header-row {
    min-width: 0 !important;
}

.hc-app-brand,
.hc-app-brand-text,
.hc-app-center,
.hc-app-weather,
.hc-app-right {
    min-width: 0 !important;
}

.hc-app-center strong,
.hc-app-center span,
.hc-app-weather strong,
.hc-app-weather em {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 900px) {
    .hc-app-header-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand right"
            "center center"
            "weather weather" !important;
        gap: 8px 10px !important;
        align-items: start !important;
    }

    .hc-app-brand {
        grid-area: brand !important;
        align-self: start !important;
        gap: 8px !important;
    }

    .hc-app-brand-text strong {
        font-size: clamp(1.28rem, 6.2vw, 1.7rem) !important;
        line-height: .95 !important;
    }

    .hc-app-brand-text em {
        font-size: .68rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .hc-app-right {
        grid-area: right !important;
        justify-self: end !important;
        align-self: start !important;
        gap: 7px !important;
    }

    .hc-app-center {
        grid-area: center !important;
        display: block !important;
        width: 100% !important;
        padding-top: 2px !important;
    }

    .hc-app-center strong,
    .hc-app-center span {
        display: block !important;
        white-space: normal !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .hc-app-center strong {
        font-size: .95rem !important;
    }

    .hc-app-center span {
        margin-top: 4px !important;
        font-size: .78rem !important;
    }

    .hc-app-weather {
        grid-area: weather !important;
        justify-self: start !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border-left: 0 !important;
    }

    .hc-weather-icon {
        font-size: 1.15rem !important;
        line-height: 1 !important;
        flex: 0 0 auto !important;
    }

    .hc-app-weather strong {
        font-size: 1rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }

    .hc-app-weather em {
        display: inline !important;
        font-size: .78rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        font-style: normal !important;
        flex: 0 1 auto !important;
    }
}

@media (min-width: 901px) {
    .hc-app-header-row {
        grid-template-columns: minmax(260px, 1fr) minmax(220px, auto) auto !important;
        gap: 18px !important;
    }

    .hc-app-center strong,
    .hc-app-center span {
        white-space: normal !important;
    }

    .hc-app-weather {
        max-width: 220px !important;
    }
}

/* =====================================================
   FIX 2026-07-02 — Header meteo/data finale
   - Home pubblica iPhone: torna compatta, non 3 righe
   - Dashboard iPad/PC: data + meteo su 2 righe tra logo e comandi
   - Dashboard iPhone: meta compatta senza uscire dallo schermo
   ===================================================== */

/* HOME PUBBLICA — iPhone compatta come prima: 3 colonne, non 3 righe */
@media (max-width: 700px) {
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-card {
        left: 18px !important;
        right: 18px !important;
        bottom: -34px !important;
        height: 74px !important;
        min-height: 74px !important;
        max-height: 74px !important;
        display: grid !important;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
        grid-template-rows: 1fr !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item {
        height: 74px !important;
        min-height: 0 !important;
        max-height: 74px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 0 5px !important;
        border-bottom: 0 !important;
        border-right: 1px solid rgba(31,41,55,.08) !important;
        overflow: hidden !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item:last-child {
        border-right: 0 !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item > div:last-child {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-icon {
        width: 27px !important;
        height: 27px !important;
        flex: 0 0 27px !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-weather-icon {
        font-size: 1.45rem !important;
        flex: 0 0 auto !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item strong {
        display: block !important;
        font-size: .62rem !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-weather strong {
        font-size: 1.05rem !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item span {
        display: block !important;
        font-size: .55rem !important;
        line-height: 1.08 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-main {
        padding-top: 54px !important;
    }
}

@media (max-width: 390px) {
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-card {
        left: 14px !important;
        right: 14px !important;
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item {
        height: 70px !important;
        padding: 0 4px !important;
        gap: 4px !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-icon {
        width: 24px !important;
        height: 24px !important;
        flex-basis: 24px !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-weather-icon {
        font-size: 1.25rem !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item strong {
        font-size: .56rem !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-weather strong {
        font-size: .95rem !important;
    }

    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item span {
        font-size: .5rem !important;
    }
}

/* DASHBOARD / AREA PRIVATA — iPad e desktop: meta tra logo e pulsanti, su due righe */
@media (min-width: 701px) {
    .hc-app-header-row {
        display: grid !important;
        grid-template-columns: minmax(210px, 1fr) minmax(150px, 210px) auto !important;
        grid-template-areas: "brand meta controls" !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .hc-app-brand {
        grid-area: brand !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .hc-app-brand-text,
    .hc-app-brand-text strong,
    .hc-app-brand-text em {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .hc-app-meta {
        grid-area: meta !important;
        justify-self: center !important;
        align-self: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 210px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: normal !important;
    }

    .hc-app-meta span,
    .hc-app-meta strong {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1.12 !important;
        font-size: .82rem !important;
    }

    .hc-app-meta strong {
        font-size: .92rem !important;
        font-weight: 900 !important;
    }

    .hc-app-right {
        grid-area: controls !important;
        justify-self: end !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* iPad stretto: riduci leggermente per evitare tagli laterali */
@media (min-width: 701px) and (max-width: 1024px) {
    .hc-app-header {
        padding-left: 18px !important;
        padding-right: 18px !important;
        overflow: hidden !important;
    }

    .hc-app-header-row {
        grid-template-columns: minmax(185px, 1fr) minmax(135px, 185px) auto !important;
        gap: 10px !important;
    }

    .hc-app-brand-text strong {
        font-size: clamp(1.35rem, 4.4vw, 1.9rem) !important;
    }

    .hc-app-brand-text em {
        font-size: .72rem !important;
    }

    .hc-app-meta span,
    .hc-app-meta strong {
        font-size: .78rem !important;
    }

    .hc-app-meta strong {
        font-size: .86rem !important;
    }
}

/* DASHBOARD iPhone: meta compatta su una riga sotto logo/comandi */
@media (max-width: 700px) {
    .hc-app-header {
        overflow: hidden !important;
    }

    .hc-app-header-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand controls"
            "meta meta" !important;
        align-items: center !important;
        gap: 8px 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .hc-app-brand {
        grid-area: brand !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .hc-app-right {
        grid-area: controls !important;
        justify-self: end !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }

    .hc-app-meta {
        grid-area: meta !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding-top: 2px !important;
        white-space: nowrap !important;
    }

    .hc-app-meta span,
    .hc-app-meta strong {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        max-width: 50% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: .74rem !important;
        line-height: 1 !important;
    }

    .hc-app-meta strong {
        justify-content: flex-end !important;
        font-size: .78rem !important;
        font-weight: 900 !important;
    }
}

/* =====================================================
   FIX 2026-07-02 — Home info card compatta a 3 colonne
   - iPhone: data | meteo | santo su una sola riga orizzontale
   - iPad/PC: stessa identità, senza effetto 3 righe verticali
   - Dashboard: data/meteo in header su 2 righe e senza uscire dallo schermo
   ===================================================== */

/* HOME ospite/loggato: la card info resta sempre a 3 colonne */
body.hub-home-body .hub-home .hub-info-card,
body.hub-home-body.is-guest .hub-home.is-guest .hub-info-card,
body.hub-home-body.is-logged .hub-home.is-logged .hub-info-card {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

body.hub-home-body .hub-home .hub-info-item,
body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item,
body.hub-home-body.is-logged .hub-home.is-logged .hub-info-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-right: 1px solid rgba(31,41,55,.08) !important;
}
body.hub-home-body .hub-home .hub-info-item:last-child,
body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item:last-child,
body.hub-home-body.is-logged .hub-home.is-logged .hub-info-item:last-child {
    border-right: none !important;
}
body.hub-home-body .hub-home .hub-info-item > div:last-child,
body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item > div:last-child,
body.hub-home-body.is-logged .hub-home.is-logged .hub-info-item > div:last-child {
    min-width: 0 !important;
    overflow: hidden !important;
}
body.hub-home-body .hub-home .hub-info-item strong,
body.hub-home-body .hub-home .hub-info-item span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* Rifinitura 2026-07-02 — card info più compatta: meno aria sopra i testi */
body.hub-home-body .hub-home .hub-info-card,
body.hub-home-body.is-guest .hub-home.is-guest .hub-info-card,
body.hub-home-body.is-logged .hub-home.is-logged .hub-info-card {
    padding: 0 !important;
}
body.hub-home-body .hub-home .hub-info-item > div:last-child,
body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item > div:last-child,
body.hub-home-body.is-logged .hub-home.is-logged .hub-info-item > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1px !important;
    margin: 0 !important;
}
body.hub-home-body .hub-home .hub-info-item strong,
body.hub-home-body .hub-home .hub-info-item span {
    margin: 0 !important;
}

/* iPhone: card bassa, tre colonne affiancate */
@media (max-width: 700px) {
    body.hub-home-body .hub-home .hub-hero,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-hero,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-hero {
        min-height: 280px !important;
        padding-bottom: 0 !important;
    }

    body.hub-home-body .hub-home .hub-info-card,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-card,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-info-card {
        left: 18px !important;
        right: 18px !important;
        bottom: -26px !important;
        height: 58px !important;
        min-height: 58px !important;
        max-height: 58px !important;
        border-radius: 18px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.hub-home-body .hub-home .hub-info-item,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-info-item {
        height: 58px !important;
        padding: 4px 5px 3px !important;
        gap: 4px !important;
        flex-direction: row !important;
    }

    body.hub-home-body .hub-home .hub-info-icon,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-icon,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-info-icon {
        width: 21px !important;
        height: 21px !important;
        flex: 0 0 21px !important;
    }

    body.hub-home-body .hub-home .hub-weather-icon,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-weather-icon,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-weather-icon {
        font-size: 1.08rem !important;
        line-height: 1 !important;
        flex: 0 0 auto !important;
    }

    body.hub-home-body .hub-home .hub-info-item strong,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item strong,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-info-item strong {
        display: block !important;
        font-size: .58rem !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        max-width: 100% !important;
    }

    body.hub-home-body .hub-home .hub-weather strong,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-weather strong,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-weather strong {
        font-size: .92rem !important;
        line-height: 1 !important;
        letter-spacing: -.04em !important;
    }

    body.hub-home-body .hub-home .hub-info-item span,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item span,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-info-item span {
        display: block !important;
        font-size: .52rem !important;
        line-height: 1 !important;
        font-weight: 750 !important;
        max-width: 100% !important;
    }

    body.hub-home-body .hub-home .hub-main,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-main,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-main {
        padding-top: 42px !important;
    }
}

@media (max-width: 390px) {
    body.hub-home-body .hub-home .hub-info-card,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-card,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-info-card {
        left: 14px !important;
        right: 14px !important;
        bottom: -24px !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
    }

    body.hub-home-body .hub-home .hub-info-item,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-info-item {
        height: 54px !important;
        padding: 4px 4px 3px !important;
        gap: 3px !important;
    }

    body.hub-home-body .hub-home .hub-info-icon,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-icon,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-info-icon {
        width: 19px !important;
        height: 19px !important;
        flex-basis: 19px !important;
    }

    body.hub-home-body .hub-home .hub-weather-icon,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-weather-icon,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-weather-icon {
        font-size: 1rem !important;
    }

    body.hub-home-body .hub-home .hub-info-item strong,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item strong,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-info-item strong {
        font-size: .53rem !important;
    }

    body.hub-home-body .hub-home .hub-weather strong,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-weather strong,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-weather strong {
        font-size: .86rem !important;
    }

    body.hub-home-body .hub-home .hub-info-item span,
    body.hub-home-body.is-guest .hub-home.is-guest .hub-info-item span,
    body.hub-home-body.is-logged .hub-home.is-logged .hub-info-item span {
        font-size: .48rem !important;
    }
}

/* Dashboard iPad/PC: data e meteo tra logo e comandi, su due righe, senza sforare */
@media (min-width: 701px) {
    .hc-app-header {
        overflow: hidden !important;
    }

    .hc-app-header-row {
        display: grid !important;
        grid-template-columns: minmax(210px, 1fr) minmax(170px, 220px) auto !important;
        grid-template-areas: "brand center controls" !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .hc-app-brand { grid-area: brand !important; min-width: 0 !important; }
    .hc-app-center {
        grid-area: center !important;
        justify-self: center !important;
        width: 100% !important;
        max-width: 220px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    .hc-app-center strong,
    .hc-app-center span {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1.1 !important;
    }
    .hc-app-center strong { font-size: .9rem !important; font-weight: 900 !important; }
    .hc-app-center span { margin-top: 6px !important; font-size: .82rem !important; font-weight: 750 !important; }

    .hc-app-weather {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding-left: 0 !important;
        border-left: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-top: 5px !important;
    }
    .hc-app-weather .hc-weather-icon { font-size: 1rem !important; }
    .hc-app-weather strong { font-size: .9rem !important; line-height: 1 !important; }
    .hc-app-weather em { display: inline !important; margin-top: 0 !important; font-size: .82rem !important; }

    .hc-app-right {
        grid-area: controls !important;
        justify-self: end !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }
}



/* =====================================================
   FIX 2026-07-02 — Home: santo dinamico + dark mode pulito
   Solo palette/contrasto della home, nessuna modifica al layout.
   ===================================================== */
:root:not([data-theme="light"]) body.hub-home-body,
[data-theme="dark"] body.hub-home-body {
    --hub-dark-surface: rgba(17, 24, 39, .92);
    --hub-dark-surface-soft: rgba(30, 41, 59, .88);
    --hub-dark-border: rgba(148, 163, 184, .22);
    --hub-dark-text: #f8fafc;
    --hub-dark-muted: rgba(226, 232, 240, .72);
}

:root:not([data-theme="light"]) body.hub-home-body .hub-main,
[data-theme="dark"] body.hub-home-body .hub-main {
    background: linear-gradient(180deg, #0f172a 0%, #111827 42%, #0b1120 100%) !important;
}

:root:not([data-theme="light"]) body.hub-home-body .hub-info-card,
[data-theme="dark"] body.hub-home-body .hub-info-card {
    background: rgba(15, 23, 42, .90) !important;
    border: 1px solid var(--hub-dark-border) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .34) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

:root:not([data-theme="light"]) body.hub-home-body .hub-info-item,
[data-theme="dark"] body.hub-home-body .hub-info-item {
    border-right-color: rgba(148, 163, 184, .18) !important;
}

:root:not([data-theme="light"]) body.hub-home-body .hub-info-item strong,
[data-theme="dark"] body.hub-home-body .hub-info-item strong,
:root:not([data-theme="light"]) body.hub-home-body .hub-gallery-title strong,
[data-theme="dark"] body.hub-home-body .hub-gallery-title strong,
:root:not([data-theme="light"]) body.hub-home-body .hub-gallery-name,
[data-theme="dark"] body.hub-home-body .hub-gallery-name {
    color: var(--hub-dark-text) !important;
}

:root:not([data-theme="light"]) body.hub-home-body .hub-info-item span,
[data-theme="dark"] body.hub-home-body .hub-info-item span,
:root:not([data-theme="light"]) body.hub-home-body .hub-gallery-count,
[data-theme="dark"] body.hub-home-body .hub-gallery-count {
    color: var(--hub-dark-muted) !important;
}

:root:not([data-theme="light"]) body.hub-home-body .hub-pensiero,
[data-theme="dark"] body.hub-home-body .hub-pensiero {
    background: linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .88)) !important;
    border: 1px solid var(--hub-dark-border) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .30) !important;
}

:root:not([data-theme="light"]) body.hub-home-body .hub-pensiero-testo,
[data-theme="dark"] body.hub-home-body .hub-pensiero-testo {
    color: #f8fafc !important;
}

:root:not([data-theme="light"]) body.hub-home-body .hub-gallery-title span,
[data-theme="dark"] body.hub-home-body .hub-gallery-title span {
    background: rgba(148, 163, 184, .24) !important;
}

:root:not([data-theme="light"]) body.hub-home-body .hub-gallery-badge,
[data-theme="dark"] body.hub-home-body .hub-gallery-badge {
    background: rgba(15, 23, 42, .96) !important;
    border-color: rgba(148, 163, 184, .22) !important;
}


/* =====================================================
   HUBCLOUD — SIDEBAR STANDARD
   Markup: includes/sidebar.php
   ===================================================== */
.hc-sidebar {
    position: sticky;
    top: 12px;
    align-self: start;
    height: calc(100dvh - 48px);
    min-height: 560px;
    max-height: 820px;
    padding: 12px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 50px rgba(0,0,0,.20);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    color: var(--text-color);
}

/* Shell privata condivisa: le pagine interne ricevono la sidebar dall'header. */
[data-hc-shared-sidebar] {
    display: none;
}

@media (min-width: 768px) {
    .phone-window.hc-has-shared-sidebar {
        display: grid !important;
        grid-template-columns: var(--hc-sidebar-w) minmax(0, 1fr) !important;
        grid-template-rows: auto minmax(0, 1fr) auto !important;
        column-gap: 0 !important;
        align-items: stretch !important;
        padding: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(10,132,255,.72) transparent !important;
    }

    .phone-window.hc-has-shared-sidebar::-webkit-scrollbar {
        display: block !important;
        width: 7px !important;
    }

    .phone-window.hc-has-shared-sidebar::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(64,156,255,.94), rgba(10,132,255,.64));
        background-clip: padding-box;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
    }

    .phone-window.hc-has-shared-sidebar > .hc-app-header {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .phone-window > [data-hc-shared-sidebar] {
        position: relative !important;
        z-index: 35 !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        display: block !important;
        width: 100% !important;
        min-width: var(--hc-sidebar-w) !important;
        max-width: var(--hc-sidebar-w) !important;
        min-height: 100% !important;
        height: 100% !important;
        overflow: visible !important;
    }

    .phone-window > [data-hc-shared-sidebar] > .hc-sidebar {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
    }

    .phone-window > [data-hc-shared-sidebar] ~ .hc-scroll,
    .phone-window > [data-hc-shared-sidebar] ~ .hc-content {
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin-left: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 100% !important;
        overflow: visible !important;
    }

    .phone-window.hc-has-shared-sidebar > .hc-bottom-nav {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 768px) {
    body.hc-ds-page:has(.phone-window),
    body.hc-ds-dashboard:has(.phone-window) {
        align-items: flex-start !important;
        min-height: 100dvh !important;
        padding-top: 4dvh !important;
        padding-bottom: 4dvh !important;
        overflow-y: auto !important;
    }

    body.hc-ds-page .phone-window,
    body.hc-ds-dashboard .phone-window {
        height: auto !important;
        min-height: 92dvh !important;
        max-height: none !important;
        flex: 0 0 auto !important;
    }

    body.hc-ds-page .phone-window > .hc-scroll,
    body.hc-ds-dashboard .phone-window > .hc-scroll {
        flex: 1 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
}
[data-theme="light"] .hc-sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
    border-color: rgba(0,0,0,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 18px 45px rgba(15,23,42,.10);
}
.hc-sidebar svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.hc-sidebar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 4px 8px;
}
.hc-sidebar__collapse {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--glass-bg);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
}
.hc-sidebar__collapse:hover { color: var(--accent); border-color: rgba(10,132,255,.35); }
.hc-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}
.hc-sidebar__nav:not(.hc-sidebar__nav--utility) {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
}
.hc-sidebar__nav::-webkit-scrollbar { display: none; }
.hc-sidebar__nav--utility { flex: 0 0 auto; }
.hc-sidebar__link,
.hc-sidebar__area-toggle {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 9px 10px;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: .9rem;
    font-weight: 720;
    text-align: left;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.hc-sidebar__link:hover,
.hc-sidebar__area-toggle:hover,
.hc-sidebar__link.is-active {
    background: rgba(10,132,255,.10);
    border-color: rgba(10,132,255,.24);
    color: var(--accent);
}
.hc-sidebar__link--dashboard.is-active {
    background: linear-gradient(135deg, rgba(10,132,255,.20), rgba(94,92,230,.14));
}
.hc-sidebar__icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    color: currentColor;
    background: rgba(255,255,255,.075);
}
[data-theme="light"] .hc-sidebar__icon { background: rgba(0,0,0,.045); }
.hc-sidebar__text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hc-sidebar__badge {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .68rem;
    font-weight: 850;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.hc-sidebar__area {
    border-radius: 18px;
}
.hc-sidebar__area-head { display: flex; }
.hc-sidebar__area .hc-sidebar__area-toggle { cursor: pointer; }
.hc-sidebar__chevron {
    margin-left: auto;
    color: var(--text-secondary);
    transition: transform .18s ease;
}
.hc-sidebar__chevron svg {
    width: 16px;
    height: 16px;
}
.hc-sidebar__area.is-open .hc-sidebar__chevron { transform: rotate(90deg); }
.hc-sidebar__submenu {
    display: none;
    margin: 4px 0 8px 42px;
    padding: 6px;
    border-left: 2px solid rgba(10,132,255,.28);
    border-radius: 0 14px 14px 0;
    background: rgba(255,255,255,.045);
}
.hc-sidebar__area.is-open .hc-sidebar__submenu { display: flex; flex-direction: column; gap: 2px; }
.hc-sidebar__subitem {
    display: block;
    padding: 7px 10px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: .8rem;
    font-weight: 680;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-sidebar__subitem:hover,
.hc-sidebar__subitem.is-current {
    color: var(--accent);
    background: rgba(10,132,255,.10);
}
.hc-sidebar__area--personale { --hc-side-color: var(--hc-personale, #2563eb); }
.hc-sidebar__area--famiglia  { --hc-side-color: var(--hc-famiglia, #f97316); }
.hc-sidebar__area--finanze   { --hc-side-color: var(--hc-finanze, #22c55e); }
.hc-sidebar__area--lavoro    { --hc-side-color: var(--hc-lavoro, #0891b2); }
.hc-sidebar__area.is-open .hc-sidebar__area-toggle,
.hc-sidebar__area-link.is-active {
    color: var(--hc-side-color, var(--accent));
    background: color-mix(in srgb, var(--hc-side-color, #0a84ff) 14%, transparent);
    border-color: color-mix(in srgb, var(--hc-side-color, #0a84ff) 34%, transparent);
}
.hc-sidebar.is-collapsed .hc-sidebar__submenu { display: none !important; }
.hc-sidebar.is-collapsed .hc-sidebar__chevron { display: none; }

@media (min-width: 901px) {
    .hc-dashboard-shell.hc-ds-dashboard-layout,
    .hc-area-shell.hc-ds-area-layout,
    .hc-ds-dashboard-layout,
    .hc-ds-area-layout {
        grid-template-columns: var(--hc-sidebar-w, 248px) minmax(0, 1fr) !important;
        align-items: start;
    }
}
@media (max-width: 900px) {
    .hc-sidebar {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        max-height: none;
    }
    .hc-sidebar.is-collapsed .hc-sidebar__text { display: inline; }
    .hc-sidebar__nav:not(.hc-sidebar__nav--utility) { overflow: visible; }
}

/* =====================================================
   HUBCLOUD — Layout aree private unificato v15
   Dashboard, Personale, Famiglia, Finanze, Lavoro
   ===================================================== */
.hc-ds-page .hc-area-shell.hc-ds-area-layout,
.hc-ds-page .hc-dashboard-shell.hc-ds-dashboard-layout {
    min-height: 100%;
}

.hc-ds-page .hc-ds-area-main,
.hc-ds-page .hc-ds-main {
    min-width: 0;
    width: 100%;
}

.hc-ds-page .hc-area-shell .hc-area-breadcrumb,
.hc-ds-page .hc-area-shell .hc-area-search,
.hc-ds-page .hc-area-shell .hc-area-intro,
.hc-ds-page .hc-area-shell .ma-wrap,
.hc-ds-page .hc-area-shell .fam-doc-widget {
    width: 100%;
}

.hc-ds-page .hc-area-shell .hc-area-intro {
    margin-left: 0;
    margin-right: 0;
}

.hc-ds-page .hc-area-shell .hc-area-search {
    margin-left: 0;
    margin-right: 0;
}

.hc-ds-page .hc-area-shell .ma-wrap {
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 901px) {
    .hc-ds-page .hc-area-shell.hc-ds-area-layout,
    .hc-ds-page .hc-dashboard-shell.hc-ds-dashboard-layout {
        display: grid !important;
        grid-template-columns: var(--hc-sidebar-w, 248px) minmax(0, 1fr) !important;
        gap: 22px !important;
        align-items: start !important;
        padding: 22px 24px 112px !important;
    }

    .hc-ds-page .hc-sidebar {
        display: flex !important;
    }

    .hc-ds-page .hc-ds-area-main,
    .hc-ds-page .hc-ds-main {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .hc-ds-page .hc-area-shell .ma-grid {
        gap: 16px !important;
    }

    .hc-ds-page .hc-area-shell .ma-card {
        min-height: 110px;
    }
}

@media (max-width: 900px) {
    .hc-ds-page .hc-area-shell.hc-ds-area-layout,
    .hc-ds-page .hc-dashboard-shell.hc-ds-dashboard-layout {
        display: block !important;
        padding: 16px 16px 110px !important;
    }

    .hc-ds-page .hc-sidebar {
        display: none !important;
    }

}

@media (max-width: 600px) {
    .hc-ds-page .hc-area-shell.hc-ds-area-layout,
    .hc-ds-page .hc-dashboard-shell.hc-ds-dashboard-layout {
        padding: 14px 12px 104px !important;
    }

    .hc-ds-page .hc-area-shell .hc-area-intro {
        border-radius: 22px !important;
    }

    .hc-ds-page .hc-area-shell .ma-card {
        min-height: 88px;
    }
}

/* =====================================================
   HUBCLOUD — Sidebar layout approvato v16
   Riferimento: mockup 1. SIDEBAR / 2. DASHBOARD.
   Solo layout: nessuna logica PHP o query modificata.
   ===================================================== */
:root {
    --hc-shell-blue: #061321;
    --hc-personale: #8b5cf6;
    --hc-famiglia:  #f59e0b;
    --hc-finanze:   #84cc16;
    --hc-lavoro:    #0891b2;
    --hc-salute:    #94a3b8;
    --hc-sidebar-w: 282px;
}

.hc-sidebar {
    padding: 14px !important;
    border-radius: 0 !important;
    background: var(--hc-shell-blue) !important;
    border: 0 !important;
    box-shadow: none !important;
    gap: 12px !important;
}

.hc-sidebar__top {
    min-height: 0 !important;
    padding: 0 !important;
    justify-content: flex-end !important;
}


.hc-sidebar__collapse {
    display: none !important;
}


.hc-sidebar__nav {
    gap: 8px !important;
}

.hc-sidebar__nav:not(.hc-sidebar__nav--utility) {
    overflow-y: auto;
    padding-right: 1px;
}

.hc-sidebar__link,
.hc-sidebar__area-toggle {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
    background: rgba(2,8,18,.42) !important;
    border: 1px solid rgba(148,163,184,.20) !important;
    color: rgba(255,255,255,.86) !important;
    gap: 12px !important;
}

.hc-sidebar__link:hover,
.hc-sidebar__link.is-active {
    background: linear-gradient(135deg, rgba(10,132,255,.18), rgba(59,130,246,.08)) !important;
    border-color: rgba(10,132,255,.45) !important;
    color: #fff !important;
}

.hc-sidebar__link--dashboard.is-active {
    border-color: rgba(139,92,246,.62) !important;
    background: linear-gradient(135deg, rgba(139,92,246,.20), rgba(10,132,255,.10)) !important;
    box-shadow: inset 4px 0 0 rgba(139,92,246,.95);
}

.hc-sidebar__icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    border-radius: 12px !important;
    color: currentColor;
    background: rgba(255,255,255,.06) !important;
}

.hc-sidebar__icon svg {
    width: 20px !important;
    height: 20px !important;
}

.hc-sidebar__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    line-height: 1.1;
}

.hc-sidebar__text strong {
    font-size: .90rem;
    font-weight: 820;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-sidebar__text em {
    display: block;
    font-style: normal;
    font-size: .70rem;
    font-weight: 620;
    color: rgba(255,255,255,.58);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hc-sidebar__chevron,
.hc-sidebar__area-toggle {
    margin-left: auto !important;
}

.hc-sidebar__area {
    position: relative;
    border-radius: 16px !important;
    border: 1px solid transparent;
    background: transparent;
}

.hc-sidebar__area-head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 42px;
    gap: 6px;
}

.hc-sidebar__area-link {
    min-width: 0;
}

.hc-sidebar__area-toggle {
    width: 42px !important;
    min-height: 58px !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    color: var(--hc-side-color) !important;
}

.hc-sidebar__area--personale { --hc-side-color: #8b5cf6; }
.hc-sidebar__area--famiglia  { --hc-side-color: #f59e0b; }
.hc-sidebar__area--finanze   { --hc-side-color: #84cc16; }
.hc-sidebar__area--lavoro    { --hc-side-color: #0891b2; }

.hc-sidebar__area .hc-sidebar__area-link .hc-sidebar__icon,
.hc-sidebar__area .hc-sidebar__area-toggle {
    color: var(--hc-side-color) !important;
}

.hc-sidebar__area.is-open {
    border-color: color-mix(in srgb, var(--hc-side-color) 62%, transparent) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--hc-side-color) 24%, transparent), rgba(2,8,18,.38)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc-side-color) 22%, transparent);
}

.hc-sidebar__area.is-open .hc-sidebar__area-link,
.hc-sidebar__area.is-open .hc-sidebar__area-toggle,
.hc-sidebar__area-link.is-active {
    background: transparent !important;
    border-color: transparent !important;
    color: #fff !important;
}

.hc-sidebar__area.is-open .hc-sidebar__area-link {
    box-shadow: inset 4px 0 0 var(--hc-side-color);
}

.hc-sidebar__area.is-open .hc-sidebar__area-link .hc-sidebar__icon {
    background: color-mix(in srgb, var(--hc-side-color) 18%, transparent) !important;
    color: var(--hc-side-color) !important;
}

.hc-sidebar__submenu {
    position: relative;
    display: none;
    margin: 0 10px 10px 20px !important;
    padding: 5px 6px 5px 22px !important;
    border-left: 1px solid color-mix(in srgb, var(--hc-side-color) 50%, transparent) !important;
    border-radius: 0 12px 12px 0 !important;
    background: rgba(2,8,18,.38) !important;
}

.hc-sidebar__area.is-open .hc-sidebar__submenu {
    display: flex !important;
    flex-direction: column;
    gap: 4px !important;
}

.hc-sidebar__subitem {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 7px 9px !important;
    border-radius: 9px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: .78rem !important;
    font-weight: 680 !important;
}

.hc-sidebar__subitem::before {
    content: "";
    position: absolute;
    left: -25px;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hc-side-color) 78%, #ffffff 0%);
    box-shadow: 0 0 0 4px rgba(2,8,18,.8);
}

.hc-sidebar__subitem .hc-sidebar__icon {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,.82) !important;
    background: transparent !important;
}

.hc-sidebar__subitem .hc-sidebar__icon svg {
    width: 17px !important;
    height: 17px !important;
}

.hc-sidebar__subitem:hover,
.hc-sidebar__subitem.is-current {
    color: #fff !important;
    background: color-mix(in srgb, var(--hc-side-color) 20%, transparent) !important;
}

.hc-sidebar__subitem.is-current {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc-side-color) 28%, transparent);
}


.hc-sidebar__nav--utility .hc-sidebar__link {
    min-height: 42px !important;
    padding: 8px 10px !important;
    background: transparent !important;
    border-color: transparent !important;
}

.hc-sidebar__nav--utility .hc-sidebar__link:hover {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(148,163,184,.18) !important;
}

.hc-sidebar__notify {
    position: relative;
}

.hc-sidebar__badge {
    order: 3;
    margin-left: 4px !important;
    background: #ff2d55 !important;
    box-shadow: 0 0 0 3px rgba(2,8,18,.92);
}

@media (min-width: 901px) {
    .hc-ds-page .phone-window {
        width: min(1500px, 96vw) !important;
    }

    .hc-ds-page .hc-dashboard-shell.hc-ds-dashboard-layout,
    .hc-ds-page .hc-area-shell.hc-ds-area-layout,
    .hc-ds-dashboard-layout,
    .hc-ds-area-layout {
        grid-template-columns: var(--hc-sidebar-w, 282px) minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 14px 14px 96px !important;
    }

    .hc-ds-page .hc-ds-main,
    .hc-ds-page .hc-ds-area-main {
        gap: 14px !important;
    }
}

@media (max-width: 900px) {
    .hc-sidebar { display: none !important; }
}

/* =====================================================
   HUBCLOUD SIDEBAR + AREA PRIVATA v17
   Riferimento layout approvato 09/07/2026.
   Modifica solo presentazione: sidebar iPad/desktop, nascosta iPhone.
   ===================================================== */
:root {
    --hc-sidebar-w: 286px;
    --hc-personale: #8b5cf6;
    --hc-famiglia:  #f59e0b;
    --hc-finanze:   #84cc16;
    --hc-lavoro:    #0891b2;
    --hc-salute:    #94a3b8;
}

body.hc-ds-page .phone-window,
body.hc-ds-dashboard .phone-window {
    background: var(--phone-bg);
    border-right: 10px solid var(--hc-shell-blue) !important;
    box-sizing: border-box !important;
}

.hc-sidebar {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    padding: 12px !important;
    border-radius: 0 !important;
    background: var(--hc-shell-blue) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.hc-sidebar__top {
    display: none !important;
    min-height: 0 !important;
    padding: 0 !important;
}


.hc-sidebar__collapse {
    display: none !important;
}


.hc-sidebar__nav {
    gap: 7px !important;
}

.hc-sidebar__link,
.hc-sidebar__area-toggle {
    min-height: 56px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
    background: rgba(15,23,42,.42) !important;
    border: 1px solid rgba(148,163,184,.18) !important;
    color: rgba(248,250,252,.88) !important;
    gap: 11px !important;
}

.hc-sidebar__link:hover,
.hc-sidebar__link.is-active {
    color: #fff !important;
    background: rgba(15,23,42,.70) !important;
    border-color: rgba(56,189,248,.34) !important;
}

.hc-sidebar__link--dashboard.is-active {
    background: linear-gradient(135deg, rgba(10,132,255,.25), rgba(139,92,246,.18)) !important;
    border-color: rgba(56,189,248,.46) !important;
    box-shadow: inset 4px 0 0 #38bdf8 !important;
}

.hc-sidebar__icon {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.06) !important;
}

.hc-sidebar__text {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    line-height: 1.08 !important;
}

.hc-sidebar__text strong {
    display: block !important;
    font-size: .88rem !important;
    font-weight: 820 !important;
    color: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.hc-sidebar__text em {
    display: block !important;
    font-style: normal !important;
    font-size: .69rem !important;
    font-weight: 620 !important;
    color: rgba(226,232,240,.56) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.hc-sidebar__area {
    --hc-side-color: #38bdf8;
    position: relative !important;
    border-radius: 18px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

.hc-sidebar__area--personale { --hc-side-color: var(--hc-personale) !important; }
.hc-sidebar__area--famiglia  { --hc-side-color: var(--hc-famiglia) !important; }
.hc-sidebar__area--finanze   { --hc-side-color: var(--hc-finanze) !important; }
.hc-sidebar__area--lavoro    { --hc-side-color: var(--hc-lavoro) !important; }

.hc-sidebar__area-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    gap: 0 !important;
}

.hc-sidebar__area-link {
    min-width: 0 !important;
}

.hc-sidebar__area-toggle {
    width: 40px !important;
    min-height: 56px !important;
    padding: 0 !important;
    justify-content: center !important;
    color: var(--hc-side-color) !important;
    font-size: 1.18rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.hc-sidebar__area .hc-sidebar__area-link .hc-sidebar__icon {
    color: var(--hc-side-color) !important;
}

.hc-sidebar__area.is-open {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--hc-side-color) 22%, transparent), rgba(15,23,42,.46)) !important;
    border-color: color-mix(in srgb, var(--hc-side-color) 52%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc-side-color) 16%, transparent) !important;
}


.hc-sidebar__area.is-open .hc-sidebar__area-link,
.hc-sidebar__area.is-open .hc-sidebar__area-toggle,
.hc-sidebar__area-link.is-active {
    background: transparent !important;
    border-color: transparent !important;
    color: #fff !important;
}

.hc-sidebar__area.is-open .hc-sidebar__area-link {
    padding-left: 22px !important;
}

.hc-sidebar__area.is-open .hc-sidebar__area-link .hc-sidebar__icon {
    background: color-mix(in srgb, var(--hc-side-color) 18%, transparent) !important;
    color: var(--hc-side-color) !important;
}

.hc-sidebar__submenu {
    display: none !important;
    margin: 0 10px 10px 30px !important;
    padding: 4px 6px 4px 16px !important;
    border-left: 1px solid color-mix(in srgb, var(--hc-side-color) 48%, transparent) !important;
    border-radius: 0 12px 12px 0 !important;
    background: rgba(15,23,42,.38) !important;
}

.hc-sidebar__area.is-open .hc-sidebar__submenu {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.hc-sidebar__subitem {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    color: rgba(226,232,240,.76) !important;
    font-size: .77rem !important;
    font-weight: 680 !important;
}

.hc-sidebar__subitem .hc-sidebar__icon {
    width: 23px !important;
    height: 23px !important;
    flex-basis: 23px !important;
    background: transparent !important;
    color: rgba(226,232,240,.72) !important;
}

.hc-sidebar__subitem:hover,
.hc-sidebar__subitem.is-current {
    color: #fff !important;
    background: color-mix(in srgb, var(--hc-side-color) 18%, transparent) !important;
}


.hc-sidebar__nav--utility .hc-sidebar__link {
    min-height: 43px !important;
    background: transparent !important;
    border-color: transparent !important;
}

.hc-sidebar__badge {
    margin-left: 4px !important;
    background: #ff2d55 !important;
    box-shadow: 0 0 0 3px rgba(5,12,24,.96) !important;
}

@media (min-width: 768px) {
    body.hc-ds-page .phone-window,
    body.hc-ds-dashboard .phone-window {
        width: min(1500px, 96vw) !important;
        height: 92vh !important;
        border-radius: 30px !important;
        border-right: 12px solid var(--hc-shell-blue) !important;
        box-sizing: border-box !important;
    }

    .hc-ds-page .hc-dashboard-shell.hc-ds-dashboard-layout,
    .hc-ds-page .hc-area-shell.hc-ds-area-layout,
    .hc-ds-dashboard-layout,
    .hc-ds-area-layout {
        display: grid !important;
        grid-template-columns: var(--hc-sidebar-w) minmax(0, 1fr) !important;
        gap: 0 !important;
        align-items: stretch !important;
        padding: 0 !important;
    }

    .hc-ds-page .hc-sidebar,
    .hc-ds-dashboard .hc-sidebar {
        display: flex !important;
    }

    .hc-ds-page .hc-ds-main,
    .hc-ds-page .hc-ds-area-main,
    .hc-ds-dashboard .hc-ds-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        min-width: 0 !important;
        padding: 18px !important;
    }
}

@media (max-width: 767px) {
    html:has(body.hc-ds-page),
    html:has(body.hc-ds-dashboard) {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.hc-ds-page,
    body.hc-ds-dashboard {
        height: auto !important;
        min-height: 100dvh !important;
        padding-bottom: 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    body.hc-ds-page .phone-window,
    body.hc-ds-dashboard .phone-window {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    body.hc-ds-page .phone-window > .hc-scroll,
    body.hc-ds-dashboard .phone-window > .hc-scroll,
    body.hc-ds-page .phone-window > .hc-content,
    body.hc-ds-dashboard .phone-window > .hc-content {
        flex: 1 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .hc-sidebar {
        display: none !important;
    }

    .hc-ds-page .hc-dashboard-shell.hc-ds-dashboard-layout,
    .hc-ds-page .hc-area-shell.hc-ds-area-layout,
    .hc-ds-dashboard-layout,
    .hc-ds-area-layout {
        display: block !important;
        padding: 14px 12px !important;
    }
}

/* =====================================================
   AREA PRIVATA — FLUSSO UNICO DASHBOARD
   Correzione iPhone/iPad: niente spazi artificiali tra
   Oggi, Notifiche, Task, Aree e Strumenti.
   ===================================================== */
.hc-ds-dashboard .hc-dashboard-tasks {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-margin-top: 0 !important;
}

.hc-ds-dashboard .hc-dashboard-tasks .hc-notifications-panel,
.hc-ds-dashboard .hc-dashboard-tasks .task-section,
.hc-ds-dashboard .hc-dashboard-tasks .ap-section-title {
    margin-top: 0 !important;
}

.hc-ds-dashboard .hc-dashboard-tasks .hc-notifications-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hc-ds-dashboard .hc-dashboard-tasks .ap-notif-list {
    margin-bottom: 0 !important;
}

.hc-ds-dashboard .hc-area-cards,
.hc-ds-dashboard .hc-tools-panel {
    width: 100% !important;
    margin: 0 !important;
}

.hc-ds-dashboard .hc-tools-row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

@media (max-width: 767px) {
    .hc-ds-page .hc-dashboard-shell.hc-ds-dashboard-layout {
        padding: 14px 12px !important;
    }

    .hc-ds-dashboard .hc-ds-main {
        gap: 16px !important;
    }

    .hc-ds-dashboard .hc-dashboard-tasks {
        gap: 14px !important;
    }

    .hc-ds-dashboard .hc-dashboard-tasks .ap-tab {
        padding: 0 !important;
    }

    .hc-ds-dashboard .hc-dashboard-tasks .ap-section-title {
        padding: 0 10px !important;
        margin-bottom: 0 !important;
    }

    .hc-ds-dashboard .hc-dashboard-tasks .task-section {
        margin: 0 !important;
    }

    .hc-ds-dashboard .hc-dashboard-tasks .ap-notif-list {
        padding: 0 8px !important;
    }

    .hc-ds-dashboard .hc-tools-row {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px 8px !important;
    }

    .hc-ds-dashboard .hc-tools-panel {
        padding-bottom: 18px !important;
    }
}

/* =====================================================
   AREA PRIVATA — RITOCCO MOBILE MINIMO
   Solo card Aree e Strumenti. Header, footer e sidebar
   restano invariati.
   ===================================================== */
@media (max-width: 767px) {
    .hc-ds-dashboard .hc-area-list {
        gap: 9px !important;
    }

    .hc-ds-dashboard .hc-area-row {
        min-height: 78px !important;
        padding: 11px 12px !important;
        gap: 11px !important;
        border-radius: 18px !important;
    }

    .hc-ds-dashboard .hc-area-row-icon {
        width: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;
        font-size: 1.35rem !important;
    }

    .hc-ds-dashboard .hc-area-row-copy strong {
        font-size: 1rem !important;
    }

    .hc-ds-dashboard .hc-area-row-copy em {
        margin-top: 2px !important;
        font-size: .75rem !important;
        line-height: 1.22 !important;
    }

    .hc-ds-dashboard .hc-tools-row {
        gap: 9px 8px !important;
    }

    .hc-ds-dashboard .hc-tool-item {
        min-height: 72px !important;
        padding: 8px 5px !important;
        gap: 5px !important;
        border-radius: 16px !important;
    }

    .hc-ds-dashboard .hc-tool-item span {
        font-size: 1.35rem !important;
    }

    .hc-ds-dashboard .hc-tool-item em {
        font-size: .72rem !important;
    }

    .hc-ds-dashboard .hc-tools-panel {
        padding-bottom: 14px !important;
    }
}



/* =====================================================
   SIDEBAR IPAD — AREE REALI E VISIBILITA COMPLETA
   Personale, Famiglia, Finanze, Lavoro.
   Salute resta un modulo interno di Area personale.
   ===================================================== */
@media (min-width: 768px) {
    .hc-ds-page .hc-sidebar,
    .hc-ds-dashboard .hc-sidebar {
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        padding: 12px !important;
        gap: 7px !important;
        overflow: visible !important;
        scrollbar-width: none !important;
    }

    .hc-ds-area-layout > .hc-sidebar,
    .hc-ds-dashboard-layout > .hc-sidebar {
        height: 100% !important;
        max-height: none !important;
        min-height: 100% !important;
        position: relative !important;
        top: 0 !important;
    }

    .hc-sidebar__top {
        min-height: 0 !important;
        padding: 3px 5px 7px !important;
    }

    .hc-sidebar__nav {
        gap: 5px !important;
        min-height: 0 !important;
    }

    .hc-sidebar__nav:not(.hc-sidebar__nav--utility) {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }

    .hc-sidebar__nav--utility {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;
        gap: 5px !important;
        overflow: visible !important;
    }

    .hc-sidebar__link,
    .hc-sidebar__area-toggle {
        min-height: 50px !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .hc-sidebar__icon {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 12px !important;
    }

    .hc-sidebar__text strong {
        font-size: .82rem !important;
        line-height: 1.08 !important;
    }

    .hc-sidebar__text em {
        font-size: .66rem !important;
        line-height: 1.08 !important;
    }

    .hc-sidebar__area-head {
        grid-template-columns: minmax(0, 1fr) 38px !important;
        gap: 5px !important;
    }

    .hc-sidebar__area-toggle {
        width: 38px !important;
        min-height: 50px !important;
    }

    .hc-sidebar__icon {
        width: 31px !important;
        height: 31px !important;
        flex-basis: 31px !important;
    }

    .hc-sidebar__text strong {
        font-size: .83rem !important;
    }

    .hc-sidebar__text em {
        font-size: .65rem !important;
    }

    .hc-sidebar__nav--utility .hc-sidebar__link {
        min-height: 38px !important;
        padding: 6px 9px !important;
    }
}

/* =====================================================
   HUBCLOUD SIDEBAR IPAD — CARD UNICHE E AREA APERTA
   - aree chiuse come Dashboard
   - Dashboard sempre invariata
   - parentesi esterna estesa su tutta l'area aperta
   - nessuna parentesi interna nel sottomenu
   ===================================================== */
@media (min-width: 768px) {

    /* Dashboard: mantiene sempre la propria card */
    .hc-sidebar__link--dashboard,
    .hc-sidebar__link--dashboard.is-active {
        min-height: 50px !important;
        padding: 7px 10px !important;
        border-radius: 16px !important;
        background:
            linear-gradient(135deg, rgba(10,132,255,.18), rgba(94,92,230,.10)) !important;
        border: 1px solid rgba(56,189,248,.58) !important;
        color: #fff !important;
        box-shadow:
            inset 4px 0 0 #38bdf8,
            0 5px 14px rgba(10,132,255,.10) !important;
    }

    /* Ogni area chiusa è una sola card, come Dashboard */
    .hc-sidebar__area {
        position: relative !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .hc-sidebar__area-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 38px !important;
        gap: 0 !important;
        min-height: 50px !important;
        overflow: hidden !important;
        border-radius: 16px !important;
        background: color-mix(in srgb, var(--hc-side-color) 8%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--hc-side-color) 48%, rgba(255,255,255,.12)) !important;
        box-shadow:
            inset 4px 0 0 color-mix(in srgb, var(--hc-side-color) 82%, transparent),
            0 4px 14px rgba(0,0,0,.05) !important;
    }

    .hc-sidebar__area-link,
    .hc-sidebar__area-toggle {
        min-height: 50px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .hc-sidebar__area-link {
        padding: 7px 8px 7px 10px !important;
    }

    .hc-sidebar__area-toggle {
        width: 38px !important;
        padding: 0 !important;
        color: var(--hc-side-color) !important;
    }

    .hc-sidebar__area:not(.is-open) .hc-sidebar__area-head:hover {
        background: color-mix(in srgb, var(--hc-side-color) 14%, transparent) !important;
        border-color: color-mix(in srgb, var(--hc-side-color) 70%, rgba(255,255,255,.16)) !important;
    }

    /* Area aperta: un unico contenitore esterno */
    .hc-sidebar__area.is-open {
        padding: 0 !important;
        border-radius: 18px !important;
        background:
            linear-gradient(
                135deg,
                color-mix(in srgb, var(--hc-side-color) 16%, transparent),
                rgba(15,23,42,.30)
            ) !important;
        border: 1px solid color-mix(in srgb, var(--hc-side-color) 60%, transparent) !important;
        box-shadow:
            inset 0 0 0 1px color-mix(in srgb, var(--hc-side-color) 14%, transparent),
            0 8px 20px color-mix(in srgb, var(--hc-side-color) 10%, transparent) !important;
        overflow: hidden !important;
    }

    /* La parentesi più esterna si estende su tutta l'area aperta */
    .hc-sidebar__area.is-open::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 3 !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 13px !important;
        border-left: 4px solid var(--hc-side-color) !important;
        border-top: 4px solid var(--hc-side-color) !important;
        border-bottom: 4px solid var(--hc-side-color) !important;
        border-right: 0 !important;
        border-radius: 18px 0 0 18px !important;
        background: transparent !important;
        box-shadow: -3px 0 12px color-mix(in srgb, var(--hc-side-color) 20%, transparent) !important;
        pointer-events: none !important;
    }

    .hc-sidebar__area.is-open::after {
        display: none !important;
        content: none !important;
    }

    .hc-sidebar__area.is-open .hc-sidebar__area-head {
        border: 0 !important;
        border-radius: 17px 17px 0 0 !important;
        background:
            linear-gradient(
                135deg,
                color-mix(in srgb, var(--hc-side-color) 26%, transparent),
                color-mix(in srgb, var(--hc-side-color) 10%, transparent)
            ) !important;
        box-shadow: none !important;
    }

    .hc-sidebar__area.is-open .hc-sidebar__area-link {
        padding-left: 18px !important;
        color: #fff !important;
    }

    .hc-sidebar__area.is-open .hc-sidebar__area-toggle {
        color: #fff !important;
        background: transparent !important;
    }

    /* Sottomenu integrato nello stesso contenitore, senza parentesi interna */
    .hc-sidebar__submenu,
    .hc-sidebar__area.is-open .hc-sidebar__submenu {
        margin: 0 !important;
        padding: 5px 8px 9px 18px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .hc-sidebar__area.is-open .hc-sidebar__submenu {
        position: static !important;
        width: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .hc-sidebar__nav--utility .hc-sidebar__link {
        min-height: 43px !important;
        padding: 6px 8px !important;
        gap: 8px !important;
    }

    .hc-sidebar__nav--utility .hc-sidebar__text em {
        display: block !important;
    }

    .hc-sidebar__nav--utility .hc-sidebar__text strong {
        font-size: .74rem !important;
        line-height: 1.08 !important;
    }

    .hc-sidebar__area.is-open .hc-sidebar__subitem {
        min-height: 34px !important;
        padding: 5px 8px !important;
        gap: 8px !important;
    }

    .hc-sidebar__area.is-open .hc-sidebar__subitem .hc-sidebar__icon {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
        background: transparent !important;
    }

    .hc-sidebar__area.is-open .hc-sidebar__subitem strong {
        font-size: .72rem !important;
        line-height: 1.08 !important;
    }

    .hc-sidebar__submenu::before,
    .hc-sidebar__submenu::after,
    .hc-sidebar__area.is-open .hc-sidebar__submenu::before,
    .hc-sidebar__area.is-open .hc-sidebar__submenu::after {
        display: none !important;
        content: none !important;
    }

    .hc-sidebar__area.is-open .hc-sidebar__subitem {
        background: transparent !important;
        border: 1px solid transparent !important;
    }

    .hc-sidebar__area.is-open .hc-sidebar__subitem:hover,
    .hc-sidebar__area.is-open .hc-sidebar__subitem.is-current {
        background: color-mix(in srgb, var(--hc-side-color) 16%, transparent) !important;
        border-color: color-mix(in srgb, var(--hc-side-color) 24%, transparent) !important;
        color: #fff !important;
    }
}


/* =====================================================
   HUBCLOUD — HEADER iPad/DESKTOP SU UNA SOLA RIGA
   Logo a sinistra, data/meteo al centro, comandi a destra.
   iPhone invariato.
   ===================================================== */
@media (min-width: 701px) {
    .hc-app-header {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .hc-app-header-row {
        display: grid !important;
        grid-template-columns: minmax(220px, 1fr) minmax(280px, auto) minmax(150px, 1fr) !important;
        grid-template-areas: "brand meta controls" !important;
        align-items: center !important;
        gap: 18px !important;
    }

    .hc-app-brand {
        grid-area: brand !important;
        justify-self: start !important;
    }

    .hc-app-meta {
        grid-area: meta !important;
        justify-self: center !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        width: auto !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    .hc-app-meta span,
    .hc-app-meta strong {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .hc-app-right {
        grid-area: controls !important;
        justify-self: end !important;
        align-self: center !important;
    }
}

/* =====================================================
   HUBCLOUD — FIX HEADER iPad/DESKTOP TESTI COMPLETI
   Corregge il taglio verticale e laterale di logo,
   data, mese, temperatura e città.
   iPhone invariato.
   ===================================================== */
@media (min-width: 701px) {
    .hc-app-header {
        min-height: 102px !important;
        padding: 16px 24px !important;
        overflow: visible !important;
    }

    .hc-app-header-row {
        display: grid !important;
        grid-template-columns: max-content minmax(0, 1fr) max-content !important;
        grid-template-areas: "brand meta controls" !important;
        align-items: center !important;
        gap: 24px !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .hc-app-brand {
        grid-area: brand !important;
        justify-self: start !important;
        min-width: max-content !important;
        overflow: visible !important;
    }

    .hc-app-brand-text,
    .hc-app-brand-text strong,
    .hc-app-brand-text em {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    .hc-app-brand-text strong {
        line-height: 1.05 !important;
    }

    .hc-app-brand-text em {
        line-height: 1.2 !important;
    }

    .hc-app-meta {
        grid-area: meta !important;
        justify-self: center !important;
        align-self: center !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    .hc-app-meta span,
    .hc-app-meta strong {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    .hc-app-right {
        grid-area: controls !important;
        justify-self: end !important;
        align-self: center !important;
        min-width: max-content !important;
        overflow: visible !important;
    }
}

@media (min-width: 701px) and (max-width: 1024px) {
    .hc-app-header {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .hc-app-header-row {
        gap: 14px !important;
    }

    .hc-app-meta {
        gap: 10px !important;
    }

    .hc-app-meta span,
    .hc-app-meta strong {
        font-size: .76rem !important;
    }

    .hc-app-meta strong {
        font-size: .82rem !important;
    }
}

/* =====================================================
   AREA PRIVATA — NOTIFICHE COMPATTE E SENZA DUPLICATI
   La Dispensa resta nelle sezioni Attenzione/Oggi.
   ===================================================== */
.hc-ds-dashboard .hc-notifications-panel .ap-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hc-ds-dashboard .hc-notifications-panel .ap-section-title b {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
}

.hc-ds-dashboard .ap-notif-list-compact {
    gap: 7px;
}

.hc-ds-dashboard .ap-notif-group {
    min-height: 62px;
    padding: 10px 12px;
    gap: 10px;
    cursor: pointer;
    border-left: 3px solid transparent;
}

.hc-ds-dashboard .ap-notif-group.warning {
    border-left-color: var(--warning);
}

.hc-ds-dashboard .ap-notif-group.danger {
    border-left-color: var(--danger);
}

.hc-ds-dashboard .ap-notif-group .ap-notif-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-secondary);
    font-size: 1.05rem;
}

.hc-ds-dashboard .ap-notif-group .ap-notif-title {
    font-size: .84rem;
}

.hc-ds-dashboard .ap-notif-group .ap-notif-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 3px;
}

.hc-ds-dashboard .ap-notif-count {
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: .5px solid var(--border-color);
    color: var(--text-color);
    font-size: .72rem;
    font-weight: 800;
    flex-shrink: 0;
}

.hc-ds-dashboard .ap-notif-arrow {
    color: var(--text-secondary);
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .hc-ds-dashboard .ap-notif-group {
        min-height: 58px;
        padding: 9px 10px;
    }
}

/* =====================================================
   HUBCLOUD DESKTOP — altezza naturale e scroll documento
   La sidebar completa determina l'altezza della shell.
   ===================================================== */
@media (min-width: 768px) {
    html:has(body.hc-ds-page:not(.body-lock)),
    html:has(body.hc-ds-dashboard:not(.body-lock)) {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.hc-ds-page:not(.body-lock),
    body.hc-ds-dashboard:not(.body-lock) {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        align-items: flex-start !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    body.hc-ds-page:not(.body-lock) .phone-window,
    body.hc-ds-dashboard:not(.body-lock) .phone-window {
        height: auto !important;
        min-height: 92dvh !important;
        max-height: none !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    body.hc-ds-page:not(.body-lock) .phone-window > [data-hc-shared-sidebar],
    body.hc-ds-dashboard:not(.body-lock) .phone-window > [data-hc-shared-sidebar],
    body.hc-ds-page:not(.body-lock) .phone-window > [data-hc-shared-sidebar] > .hc-sidebar,
    body.hc-ds-dashboard:not(.body-lock) .phone-window > [data-hc-shared-sidebar] > .hc-sidebar {
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.hc-ds-page:not(.body-lock) .phone-window > .hc-scroll,
    body.hc-ds-dashboard:not(.body-lock) .phone-window > .hc-scroll,
    body.hc-ds-page:not(.body-lock) .phone-window > .hc-content,
    body.hc-ds-dashboard:not(.body-lock) .phone-window > .hc-content {
        flex: 1 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Dashboard: le aree sono già disponibili nella sidebar su tablet/desktop. */
@media (min-width: 768px) {
    .hc-ds-dashboard .hc-area-cards {
        display: none !important;
    }
}

/* OUTDOOR — ESPLORA */
.outdoor-explore-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 20px 18px; }
.outdoor-place-card { display:block;margin:0;color:var(--text-color);text-decoration:none;transition:border-color .18s,transform .18s; }
.outdoor-place-card:hover { border-color:var(--accent);transform:translateY(-1px); }
.outdoor-place-card-head { display:flex;align-items:center;gap:11px; }
.outdoor-place-card-head > span { display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:rgba(48,176,199,.14); }
.outdoor-place-card-head div { min-width:0; }
.outdoor-place-card-head h3 { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.outdoor-place-card-head p { margin:-5px 0 0; }
.outdoor-place-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:14px; }
.outdoor-place-metrics span { padding:9px 7px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary);color:var(--text-secondary);font-size:.68rem;text-align:center; }
.outdoor-place-metrics strong { display:block;color:var(--text-color);font-size:.9rem; }
.outdoor-place-dates { display:flex;justify-content:space-between;gap:10px;margin-top:11px;color:var(--text-secondary);font-size:.7rem; }
.outdoor-explore-create form label,.outdoor-detail-card form label { display:block;color:var(--text-secondary);font-size:.74rem; }
.outdoor-explore-create form label span,.outdoor-detail-card form label span { display:block;margin-bottom:5px; }
.outdoor-explore-create input,.outdoor-explore-create select,.outdoor-detail-card form input,.outdoor-detail-card form select { width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:13px;background:var(--bg-secondary);color:var(--text-color);font:inherit;box-sizing:border-box; }
.outdoor-explore-map-card { max-width:1100px; }
.outdoor-explore-map { width:100%;aspect-ratio:16/8;min-height:300px;overflow:hidden;border:1px solid var(--border-color);border-radius:16px;background:linear-gradient(rgba(48,176,199,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(48,176,199,.08) 1px,transparent 1px),var(--bg-secondary);background-size:30px 30px; }
.outdoor-explore-map.is-global { min-height:480px; }
.outdoor-explore-map svg { display:block;width:100%;height:100%; }
.outdoor-map-marker { fill:var(--accent);stroke:var(--card-bg);stroke-width:4;vector-effect:non-scaling-stroke; }
.outdoor-map-label { fill:var(--text-color);font-size:18px;font-weight:700;paint-order:stroke;stroke:var(--card-bg);stroke-width:5px;stroke-linejoin:round; }
.outdoor-place-outings { display:grid;gap:10px; }
.outdoor-place-outings article { padding:12px;border:1px solid var(--border-color);border-radius:14px;background:var(--bg-secondary); }
.outdoor-place-outings article > a { color:var(--text-color);text-decoration:none; }
.outdoor-place-outings article > a strong,.outdoor-place-outings article > a span { display:block; }
.outdoor-place-outings article > a span { margin-top:4px;color:var(--text-secondary);font-size:.76rem; }
.outdoor-place-outings article > small { display:inline-block;margin-top:8px;padding:4px 8px;border-radius:999px;background:rgba(10,132,255,.1);color:var(--accent);font-size:.68rem;font-weight:700; }
.outdoor-place-outings .outdoor-actions form { display:flex;gap:6px;align-items:center;flex:1 1 auto; }
.outdoor-place-outings .outdoor-actions select { min-width:130px; }
@media (max-width:600px) {
    .outdoor-explore-grid { grid-template-columns:1fr;margin-left:12px;margin-right:12px; }
    .outdoor-place-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .outdoor-explore-map { min-height:260px;aspect-ratio:4/5; }
    .outdoor-explore-map.is-global { min-height:420px; }
    .outdoor-map-label { font-size:22px; }
    .outdoor-place-outings .outdoor-actions form { flex:1 1 100%; }
}
@media (min-width:900px) {
    .outdoor-explore-grid,.outdoor-explore-create,.outdoor-explore-map-card { max-width:1100px;margin-left:auto;margin-right:auto;box-sizing:border-box; }
}

/* Titoli delle pagine interne: colore coerente con l'area della sidebar. */
body[class*="hc-area-theme-"] .page-header .title-large,
body[class*="hc-area-theme-"] .gallery-header .title-large {
    color: var(--hc-area-accent, var(--accent)) !important;
}

/* =====================================================
   HUBCLOUD BUTTON SYSTEM — CASCADE LOCK
   Keep the canonical component above historical module overrides.
   ===================================================== */
body :is(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn,
         .btn-primary, .btn-salva, .btn-save, .exp-btn-save,
         .exp-close-btn, .btn-cancel, .btn-modal, .inline-action-btn,
         .apple-action-button) {
    box-sizing: border-box !important;
    min-height: 44px !important;
    width: auto;
    max-width: 100%;
    padding: 0 20px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-family: inherit !important;
    font-size: .92rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
}

body :is(.hc-btn-primary, .btn-nav-primary, .btn-primary,
         .btn-salva, .btn-save, .exp-btn-save) {
    background: var(--hc-area-accent, var(--accent)) !important;
    border-color: var(--hc-area-accent, var(--accent)) !important;
    color: #fff !important;
}

body :is(.hc-btn-secondary, .btn-nav,
         .nav-pill-btn:not(.is-primary):not(.outdoor-danger),
         .btn-modal) {
    background: color-mix(in srgb, var(--hc-area-accent, var(--accent)) 9%, transparent) !important;
    border-color: color-mix(in srgb, var(--hc-area-accent, var(--accent)) 52%, var(--border-color)) !important;
    color: var(--hc-area-accent, var(--accent)) !important;
}

body :is(.hc-btn-ghost, .exp-close-btn, .btn-cancel,
         .inline-action-btn, .apple-action-button.cancel) {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--hc-area-accent, var(--accent)) !important;
}

body :is(.hc-btn-danger, .btn-danger, .btn-nav-danger,
         .inline-action-btn-danger, .apple-action-button.destructive,
         .outdoor-danger) {
    background: rgba(255,59,48,.09) !important;
    border-color: rgba(255,59,48,.42) !important;
    color: var(--danger) !important;
}

body .hc-btn-danger.hc-btn-danger-primary {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}

body .hc-btn-icon {
    width: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

body .hc-btn-sm {
    min-height: 36px !important;
    padding-inline: 14px !important;
    border-radius: 18px !important;
    font-size: .82rem !important;
}

/* Outdoor: one centered content rail for every top-level section. */
body .hc-scroll > :where(
    .outdoor-stats,
    .outdoor-detail-stats,
    .outdoor-tabs,
    .outdoor-toolbar,
    .outdoor-feature,
    .outdoor-entry-list,
    .outdoor-section-heading,
    .outdoor-form,
    .outdoor-card,
    .outdoor-list,
    .outdoor-page-actions,
    .outdoor-delete-form,
    .search-filter-container
) {
    width: calc(100% - 40px) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

body .hc-scroll > :where(.outdoor-stats, .outdoor-detail-stats) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 600px) {
    body .hc-scroll > :where(
        .outdoor-stats,
        .outdoor-detail-stats,
        .outdoor-tabs,
        .outdoor-toolbar,
        .outdoor-feature,
        .outdoor-entry-list,
        .outdoor-section-heading,
        .outdoor-form,
        .outdoor-card,
        .outdoor-list,
        .outdoor-page-actions,
        .outdoor-delete-form,
        .search-filter-container
    ) {
        width: calc(100% - 24px) !important;
    }
}

body :is(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn,
         .btn-primary, .btn-salva, .btn-save, .exp-btn-save,
         .exp-close-btn, .btn-cancel, .btn-modal, .inline-action-btn,
         .apple-action-button):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--hc-area-accent, var(--accent)) 52%, transparent) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px var(--phone-bg) !important;
}

body :is(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn,
         .btn-primary, .btn-salva, .btn-save, .exp-btn-save,
         .exp-close-btn, .btn-cancel, .btn-modal, .inline-action-btn,
         .apple-action-button):hover:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
    filter: brightness(1.08) !important;
}

body :is(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn,
         .btn-primary, .btn-salva, .btn-save, .exp-btn-save,
         .exp-close-btn, .btn-cancel, .btn-modal, .inline-action-btn,
         .apple-action-button):active:not(:disabled):not([aria-disabled="true"]):not(.is-disabled) {
    transform: translateY(1px) scale(.98) !important;
    filter: brightness(.94) !important;
}

body :is(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn,
         .btn-primary, .btn-salva, .btn-save, .exp-btn-save,
         .exp-close-btn, .btn-cancel, .btn-modal, .inline-action-btn,
         .apple-action-button):disabled,
body :is(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn,
         .btn-primary, .btn-salva, .btn-save, .exp-btn-save,
         .exp-close-btn, .btn-cancel, .btn-modal, .inline-action-btn,
         .apple-action-button)[aria-disabled="true"],
body :is(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn,
         .btn-primary, .btn-salva, .btn-save, .exp-btn-save,
         .exp-close-btn, .btn-cancel, .btn-modal, .inline-action-btn,
         .apple-action-button).is-disabled {
    opacity: .48 !important;
    cursor: not-allowed !important;
    filter: none !important;
    transform: none !important;
}

/* Global touch-target normalization for legacy operational controls. */
body :is(
    .hc-header-icon-btn, .hc-area-info, .task-check,
    .btn-plus, .btn-icon, .list-more-btn,
    .ma-edit-btn, .fmt-btn, .genere-btn, .ant-btn-rimborsa,
    .ap-search-btn, .apl-search-btn, .ap-ai-btn,
    .d730-btn, .dia-filter-toggle, .imp-btn, .imp-btn-import,
    .ui-lib-filter-btn, .edit-btn, .reset-btn,
    .pm-btn, .ric-btn-genera, .rinnova-btn,
    .rss-btn-save, .rss-btn-hide, .aggiorna-btn,
    .ui-sf-nav-btn, .cit-btn
) {
    box-sizing: border-box !important;
    min-height: 44px !important;
}

body :is(
    .hc-header-icon-btn, .hc-area-info, .task-check,
    .btn-plus, .btn-icon, .list-more-btn,
    .ap-ai-btn
) {
    min-width: 44px !important;
    width: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

body :is(
    .ma-edit-btn, .ant-btn-rimborsa,
    .ap-search-btn, .apl-search-btn, .d730-btn,
    .dia-filter-toggle, .imp-btn, .imp-btn-import,
    .edit-btn, .reset-btn, .pm-btn, .ric-btn-genera,
    .rinnova-btn, .aggiorna-btn
) {
    padding-inline: 16px !important;
}

@media (max-width: 600px) {
    body :is(.hc-btn, .btn-nav, .btn-nav-primary, .nav-pill-btn,
             .btn-primary, .btn-salva, .btn-save, .exp-btn-save,
             .exp-close-btn, .btn-cancel, .btn-modal, .inline-action-btn,
             .apple-action-button) { padding-inline: 16px !important; }
    body .hc-btn-group,
    body .page-actions,
    body .outdoor-actions { flex-wrap: wrap !important; }
}

/* =====================================================
   Intestazione moduli interni — componente condiviso
   ===================================================== */
.page-header,
.gallery-header,
.hc-page-header {
    box-sizing: border-box;
    width: 100%;
}

.hc-scroll > .page-header,
.hc-scroll > .gallery-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 8px;
}

.hc-scroll > .page-header > .page-header-top,
.hc-scroll > .gallery-header > .gallery-header-top {
    min-width: 0;
}

.hc-scroll > .page-header > .page-secondary-actions {
    grid-column: 1 / -1;
}

.page-header-top,
.gallery-header-top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.page-header .header-text,
.gallery-header .header-text,
.hc-page-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.page-module-icon,
.hc-page-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid color-mix(in srgb, var(--hc-area-accent, var(--accent)) 35%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--hc-area-accent, var(--accent)) 14%, transparent);
    color: var(--hc-area-accent, var(--accent));
    font-size: 1.25rem;
    line-height: 1;
}

.page-header .title-large,
.gallery-header .title-large,
.hc-page-title {
    color: var(--hc-area-accent, var(--accent));
}

.page-header .subtitle,
.gallery-header .subtitle,
.hc-page-subtitle {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.3;
}

.page-meta,
.hc-page-meta {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: .75rem;
    font-weight: 750;
    line-height: 1.25;
}

.page-header .page-actions,
.gallery-header .page-actions,
.gallery-header .gallery-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 8px;
    padding: 0;
    margin: 0;
    width: auto;
    max-width: max-content;
}

/* Unica misura per le azioni delle intestazioni su desktop e tablet. */
body .page-header .page-actions :is(.hc-btn, .btn-nav, .btn-nav-primary, .add-expense-pill),
body .gallery-header :is(.page-actions, .gallery-actions) :is(.hc-btn, .btn-nav, .btn-nav-primary, .add-expense-pill, .btn-plus, .gallery-select-btn, .sc-pill) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    max-width: max-content !important;
    padding: 0 14px !important;
    border-radius: 18px !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
}

.page-header .btn-nav-primary,
.gallery-header .btn-nav-primary,
.page-header .add-expense-pill,
body[class*="hc-area-theme-"] .btn-nav-primary,
body[class*="hc-area-theme-"] .nav-pill-btn.is-primary {
    border-color: var(--hc-area-accent, var(--accent));
    background: var(--hc-area-accent, var(--accent));
    color: #fff;
}

.page-secondary-actions {
    display: flex;
    gap: 8px;
    padding: 8px 0 0 86px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.page-secondary-actions::-webkit-scrollbar,
.module-tabs::-webkit-scrollbar {
    display: none;
}

.page-secondary-actions .btn-nav,
body[class*="hc-area-theme-"] .page-header .btn-nav {
    border-color: color-mix(in srgb, var(--hc-area-accent, var(--accent)) 42%, var(--border-color));
    color: var(--hc-area-accent, var(--accent));
    background: transparent;
}

.module-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin: 0 20px 16px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-secondary);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.module-tab {
    min-height: 44px;
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.module-tab.active,
.module-tab[aria-current="page"] {
    border-color: color-mix(in srgb, var(--hc-area-accent, var(--accent)) 34%, transparent);
    background: var(--card-bg);
    color: var(--hc-area-accent, var(--accent));
    box-shadow: inset 0 -2px 0 var(--hc-area-accent, var(--accent));
}

body[class*="hc-area-theme-"] .tab-btn.active,
body[class*="hc-area-theme-"] .ui-lib-tab-btn.active,
body[class*="hc-area-theme-"] .ap-tab-btn.active {
    color: var(--hc-area-accent, var(--accent));
    border-color: var(--hc-area-accent, var(--accent));
    box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 -2px 0 var(--hc-area-accent, var(--accent));
}

@media (max-width: 600px) {
    .hc-scroll > .page-header,
    .hc-scroll > .gallery-header {
        grid-template-columns: minmax(0, 1fr);
    }

    .hc-scroll > .page-header > .page-actions,
    .hc-scroll > .gallery-header > .gallery-actions {
        justify-content: flex-start;
        padding-left: 77px;
    }

    .page-header-top,
    .gallery-header-top {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 9px;
    }

    .page-module-icon,
    .hc-page-module-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 11px;
        font-size: 1.08rem;
    }

    .page-header .title-large,
    .gallery-header .title-large {
        font-size: 1.55rem;
        overflow-wrap: anywhere;
    }

    .page-header .page-actions,
    .gallery-header .page-actions,
    .gallery-header .gallery-actions {
        flex: 1 0 100%;
        justify-content: flex-start;
        padding-left: 77px;
        width: 100%;
        max-width: 100%;
    }

    .page-header .page-actions > *,
    .gallery-header .page-actions > *,
    .gallery-header .gallery-actions > * {
        min-height: 42px;
    }

    /* Azioni intestazione compatte su iPhone: restano affiancate e scorrevoli. */
    body .page-header .page-actions,
    body .gallery-header :is(.page-actions, .gallery-actions) {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding-left: 0 !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body .page-header .page-actions::-webkit-scrollbar,
    body .gallery-header .page-actions::-webkit-scrollbar,
    body .gallery-header .gallery-actions::-webkit-scrollbar {
        display: none;
    }

    body .page-header .page-actions :is(.hc-btn, .btn-nav, .btn-nav-primary, .add-expense-pill),
    body .gallery-header :is(.page-actions, .gallery-actions) :is(.hc-btn, .btn-nav, .btn-nav-primary, .add-expense-pill, .btn-plus, .gallery-select-btn, .sc-pill) {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 34px !important;
        max-width: max-content !important;
        padding: 0 10px !important;
        border-radius: 17px !important;
        font-size: .76rem !important;
        white-space: nowrap !important;
    }

    .page-secondary-actions {
        padding-left: 77px;
    }

    .module-tabs {
        margin-right: 12px;
        margin-left: 12px;
    }
}

@media (min-width: 768px) {
    .module-tabs {
        margin-right: 28px;
        margin-left: 28px;
    }
}

/* Footer della shell privata: nessun doppio bordo e soli angoli inferiori. */
body.hc-ds-page > .phone-window,
body.hc-ds-dashboard > .phone-window {
    border: 0 !important;
    border-right: 0 !important;
}

.phone-window.hc-has-shared-sidebar > .hc-bottom-nav {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    box-shadow: none !important;
}

/* Dashboard iPhone: accesso immediato e compatto alle quattro aree. */
@media (max-width: 767px) {
    .hc-ds-dashboard .hc-ds-main > .hc-area-cards {
        position: sticky !important;
        top: 0 !important;
        z-index: 45 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px !important;
        border: 0 !important;
        border-radius: 0 0 16px 16px !important;
        background: color-mix(in srgb, var(--phone-bg) 90%, transparent) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,.10) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .hc-ds-dashboard .hc-area-cards > .hc-section-row {
        display: none !important;
    }

    .hc-ds-dashboard .hc-area-cards .hc-area-list {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 2px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .hc-ds-dashboard .hc-area-cards .hc-area-list::-webkit-scrollbar {
        display: none !important;
    }

    .hc-ds-dashboard .hc-area-cards .hc-area-row {
        flex: 1 0 82px !important;
        min-width: 82px !important;
        min-height: 64px !important;
        padding: 7px 6px !important;
        gap: 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 14px !important;
        scroll-snap-align: start !important;
    }

    .hc-ds-dashboard .hc-area-cards .hc-area-row-icon {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
        border-radius: 9px !important;
        font-size: 1rem !important;
    }

    .hc-ds-dashboard .hc-area-cards .hc-area-row-copy {
        display: block !important;
        min-width: 0 !important;
    }

    .hc-ds-dashboard .hc-area-cards .hc-area-row-copy strong {
        display: block !important;
        font-size: .68rem !important;
        line-height: 1.05 !important;
        white-space: nowrap !important;
    }

    .hc-ds-dashboard .hc-area-cards .hc-area-row-copy em,
    .hc-ds-dashboard .hc-area-cards .hc-area-row-arrow {
        display: none !important;
    }
}

/* Agenda task: periodi su una riga, leggibili e coerenti su ogni formato. */
.hc-ds-dashboard .task-period-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
}

.hc-ds-dashboard .task-period-chip {
    min-height: 38px !important;
    scroll-snap-align: start !important;
}

.hc-ds-dashboard .task-period-chip-count {
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    background: color-mix(in srgb, currentColor 10%, transparent) !important;
}

.hc-ds-dashboard .task-period-row-head {
    display: none !important;
}

@media (min-width: 601px) {
    .hc-ds-dashboard .task-period-chip {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
}

@media (max-width: 600px) {
    .hc-ds-dashboard .task-period-tabs {
        padding: 9px 10px !important;
        scrollbar-width: none !important;
    }

    .hc-ds-dashboard .task-period-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .hc-ds-dashboard .task-period-chip {
        flex: 0 0 auto !important;
        min-width: 88px !important;
        padding: 7px 9px !important;
    }
}

/* =========================================================
   KNOWLEDGE HUB / APPUNTI
   ========================================================= */
.kh-toolbar,.kh-filters,.kh-section-head,.kh-note-heading,.kh-note-meta,.kh-note-tags,.kh-detail-tabs,.kh-map-toolbar,.kh-rating,.kh-dialog-head,.kh-path-step{display:flex;align-items:center;gap:10px}.kh-toolbar{margin:12px 16px}.kh-search{display:flex;align-items:center;gap:8px;flex:1;background:var(--card-bg,#fff);border:1px solid var(--border, var(--border-color));border-radius:14px;padding:0 12px}.kh-search input{border:0;background:transparent;min-height:42px;width:100%;outline:0;color:var(--text-primary)}.kh-toolbar select,.kh-filter-panel select{min-height:42px;border:1px solid var(--border, var(--border-color));border-radius:12px;background:var(--card-bg,#fff);color:var(--text-primary);padding:0 10px}.kh-filters{padding:0 16px 10px;overflow-x:auto;align-items:flex-start}.kh-more-filters{position:relative}.kh-more-filters summary{list-style:none;cursor:pointer}.kh-filter-panel{position:absolute;z-index:12;right:0;top:42px;width:min(330px,85vw);display:grid;gap:10px;padding:14px;background:var(--card-bg,#fff);border:1px solid var(--border, var(--border-color));border-radius:16px;box-shadow:0 14px 36px rgba(0,0,0,.18)}
.kh-card-list{display:grid;gap:10px;padding:0 16px 24px}.kh-note-card{position:relative;display:flex;background:var(--card-bg,#fff);border:1px solid var(--border, var(--border-color));border-left:4px solid #ff9500;border-radius:16px;overflow:hidden}.kh-note-card.kh-type-video{border-left-color:#ff3b30}.kh-note-card.kh-type-manuale{border-left-color:#0a84ff}.kh-note-card.kh-type-corso{border-left-color:#34c759}.kh-note-main{display:block;min-width:0;flex:1;padding:14px;color:inherit;text-decoration:none}.kh-note-heading{align-items:flex-start}.kh-note-heading>div{min-width:0;flex:1}.kh-note-heading h3{margin:0;font-size:1rem;overflow-wrap:anywhere}.kh-note-heading p,.kh-note-preview{margin:3px 0 0;color:var(--text-secondary)}.kh-note-icon{font-size:1.2rem}.kh-note-preview{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.kh-note-tags{flex-wrap:wrap;margin-top:9px}.kh-tag{display:inline-flex;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--hc-area-accent,var(--accent)) 12%,transparent);color:var(--hc-area-accent,var(--accent));font-size:.72rem;font-weight:700}.kh-note-meta{flex-wrap:wrap;margin-top:10px;color:var(--text-secondary);font-size:.72rem}.kh-warning{color:#ff9500;font-weight:800}.kh-note-card>.hc-more-btn{margin:10px 8px 0 0}.kh-pagination{display:flex;justify-content:center;align-items:center;gap:12px;padding:12px 16px 28px}
.kh-dialog{width:min(620px,calc(100vw - 24px));max-height:88dvh;padding:0;border:1px solid var(--border, var(--border-color));border-radius:20px;background:var(--card-bg,#fff);color:var(--text-primary);box-shadow:0 20px 60px rgba(0,0,0,.25)}.kh-dialog::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}.kh-dialog-head{position:sticky;top:0;z-index:2;justify-content:space-between;padding:14px 16px;background:var(--card-bg,#fff);border-bottom:1px solid var(--border, var(--border-color))}.kh-dialog-head h3{margin:0}.kh-editor-form{display:grid;gap:12px;padding:16px}.kh-editor-form label{display:grid;gap:6px;font-weight:700}.kh-editor-form input,.kh-editor-form select,.kh-editor-form textarea,.kh-tutor-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--border, var(--border-color));border-radius:12px;background:var(--input-bg,var(--card-bg,#fff));color:var(--text-primary);padding:10px;font:inherit}.kh-action-list{display:grid;padding:8px}.kh-action-list a,.kh-action-list button{display:block;width:100%;border:0;border-bottom:1px solid var(--border, var(--border-color));background:transparent;color:var(--text-primary);padding:13px;text-align:left;font:inherit}.kh-action-list .destructive{color:#ff3b30}
.kh-detail-tabs{position:sticky;top:0;z-index:5;padding:8px 16px;overflow-x:auto;background:var(--bg-primary);border-bottom:1px solid var(--border, var(--border-color))}.kh-detail-tabs a{flex:0 0 auto;color:var(--text-secondary);text-decoration:none;font-size:.8rem;font-weight:800}.kh-detail-section{margin:12px 16px;padding:16px;background:var(--card-bg,#fff);border:1px solid var(--border, var(--border-color));border-radius:18px;scroll-margin-top:55px}.kh-section-head{justify-content:space-between}.kh-section-head h3,.kh-detail-section>h3{margin:0 0 10px}.kh-summary{margin:12px 0;padding:12px;border-left:3px solid var(--hc-area-accent,var(--accent));background:color-mix(in srgb,var(--hc-area-accent,var(--accent)) 8%,transparent);border-radius:8px}.kh-content{line-height:1.65;overflow-wrap:anywhere}.kh-wikilink{display:inline;border:0;background:transparent;padding:0;color:var(--hc-area-accent,var(--accent));font:inherit;font-weight:800;text-decoration:underline}.kh-wikilink.is-missing{color:#ff9500;text-decoration-style:dashed}.kh-link-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.kh-link-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border, var(--border-color));color:inherit;text-decoration:none}.kh-link-row small,.kh-muted{color:var(--text-secondary)}.kh-version{display:flex;gap:12px;justify-content:space-between;border-bottom:1px solid var(--border, var(--border-color));padding:10px 0}.kh-version small{display:block;color:var(--text-secondary)}.kh-json-result{white-space:pre-wrap;margin-top:10px;padding:10px;background:var(--bg-primary);border-radius:10px;font-size:.78rem}.kh-progress{height:8px;overflow:hidden;background:var(--border, var(--border-color));border-radius:999px}.kh-progress span{display:block;width:var(--kh-progress,0);height:100%;background:var(--hc-area-accent,var(--accent));border-radius:inherit}
.kh-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 16px}.kh-stat-grid article{padding:14px;background:var(--card-bg,#fff);border:1px solid var(--border, var(--border-color));border-radius:16px}.kh-stat-grid span{display:block;color:var(--text-secondary);font-size:.76rem}.kh-stat-grid strong{display:block;margin-top:5px;font-size:1.35rem}.kh-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 24px}.kh-quick-grid a{padding:15px;border-radius:15px;background:var(--card-bg,#fff);border:1px solid var(--border, var(--border-color));color:inherit;text-decoration:none;font-weight:800}
.kh-map-scroll{overflow:hidden}.kh-map-toolbar{padding:8px 16px;flex-wrap:wrap}.kh-map-toolbar input,.kh-map-toolbar select{min-height:38px;border:1px solid var(--border, var(--border-color));border-radius:10px;background:var(--card-bg,#fff);color:var(--text-primary);padding:0 10px}.kh-map-stage{position:relative;height:calc(100dvh - 250px);min-height:420px;margin:0 16px 16px;border:1px solid var(--border, var(--border-color));border-radius:18px;background:var(--card-bg,#fff);overflow:hidden;touch-action:none}.kh-map-stage:fullscreen{height:100vh;margin:0;border:0;border-radius:0}.kh-map-stage canvas{display:block}.kh-map-legend{position:absolute;left:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:color-mix(in srgb,var(--card-bg,#fff) 88%,transparent);border-radius:10px;font-size:.7rem}.kh-map-legend span::before{content:'';display:inline-block;width:8px;height:8px;margin-right:4px;border-radius:50%;background:#ff9500}.kh-map-legend .kh-type-manuale::before{background:#0a84ff}.kh-map-legend .kh-type-video::before{background:#ff3b30}.kh-map-legend .kh-type-corso::before{background:#34c759}.kh-map-status{position:absolute;top:8px;left:10px;color:var(--text-secondary);font-size:.75rem}
.kh-quiz,.kh-flash-stage{max-width:720px;margin:16px auto;padding:0 16px}.kh-quiz-card,.kh-flash-card,.kh-result,.kh-path-card,.kh-tutor-form,.kh-tutor-answer{margin-top:14px;padding:20px;background:var(--card-bg,#fff);border:1px solid var(--border, var(--border-color));border-radius:20px}.kh-quiz-counter{color:var(--text-secondary)}.kh-answer-option{display:flex;gap:10px;margin:8px 0;padding:12px;border:1px solid var(--border, var(--border-color));border-radius:12px}.kh-quiz-card textarea{width:100%;box-sizing:border-box;min-height:100px;margin:10px 0;padding:10px;border:1px solid var(--border, var(--border-color));border-radius:12px;background:var(--input-bg,var(--card-bg,#fff));color:var(--text-primary)}.kh-quiz-feedback{margin-top:12px;padding:10px;border-radius:10px}.kh-quiz-feedback.is-ok{background:rgba(52,199,89,.14);color:#248a3d}.kh-quiz-feedback.is-error{background:rgba(255,59,48,.12);color:#d70015}.kh-flash-card{text-align:center}.kh-flash-card h3{margin:28px 0}.kh-flash-answer p{font-size:1.05rem}.kh-rating{justify-content:center;flex-wrap:wrap}.kh-rating button{min-height:38px;border:1px solid var(--border, var(--border-color));border-radius:12px;background:var(--bg-primary);color:var(--text-primary);padding:0 10px}.kh-path-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 16px}.kh-path-card h3{margin-top:0}.kh-path-step{justify-content:space-between;padding:10px 0;border-top:1px solid var(--border, var(--border-color))}.kh-path-step a{color:inherit}.kh-check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:9px;padding:7px 0}.kh-check input{width:auto!important}.kh-editor-form fieldset,.kh-tutor-form fieldset{max-height:280px;overflow:auto;border:1px solid var(--border, var(--border-color));border-radius:12px}.kh-tutor-form,.kh-tutor-answer{margin:12px 16px}.kh-tutor-form>label{display:grid;gap:7px;font-weight:800}
@media(max-width:700px){.kh-toolbar{flex-wrap:wrap}.kh-search{flex-basis:100%}.kh-toolbar select{flex:1}.kh-link-columns,.kh-stat-grid,.kh-quick-grid,.kh-path-list{grid-template-columns:1fr}.kh-detail-section{margin-inline:10px;padding:13px}.kh-map-stage{height:calc(100dvh - 230px);margin-inline:8px}.kh-dialog{width:calc(100vw - 12px);max-height:94dvh}.kh-tutor-form,.kh-tutor-answer{margin-inline:10px}.kh-card-list{padding-inline:10px}}
.kh-ai-actions{display:flex;flex-wrap:wrap;gap:8px}.kh-ai-actions button{min-height:36px;padding:0 12px;border:1px solid color-mix(in srgb,var(--hc-area-accent,var(--accent)) 45%,transparent);border-radius:18px;background:color-mix(in srgb,var(--hc-area-accent,var(--accent)) 9%,transparent);color:var(--hc-area-accent,var(--accent));font:inherit;font-size:.78rem;font-weight:800}.kh-ai-preview{margin-top:12px;padding:12px;border:1px solid var(--border, var(--border-color));border-radius:12px}.kh-ai-preview pre{max-height:360px;overflow:auto;white-space:pre-wrap;font-size:.75rem}
.kh-content h1,.kh-content h2,.kh-content h3,.kh-content h4{margin:1.25em 0 .5em;line-height:1.2}.kh-content p{margin:.55em 0}.kh-content pre{overflow:auto;padding:12px;border-radius:12px;background:var(--bg-primary);font-size:.8rem}.kh-content blockquote{margin:12px 0;padding:8px 12px;border-left:3px solid var(--hc-area-accent,var(--accent));color:var(--text-secondary)}.kh-table-wrap{max-width:100%;overflow-x:auto}.kh-content table{width:100%;border-collapse:collapse;font-size:.8rem}.kh-content th,.kh-content td{padding:8px;border:1px solid var(--border,var(--border-color));text-align:left}


/* Ricordi: catalogo media centrale */
.hc-area-row.ricordi{--area-color:#ff9f0a;border-left-color:#ff9f0a!important;border-color:color-mix(in srgb,#ff9f0a 44%,var(--border-color))!important}.hc-area-row.ricordi .hc-area-row-icon{background:rgba(255,159,10,.15)}.ricordi-page{--ricordi-accent:#ff9f0a}.ricordi-shell{padding-bottom:28px}.ricordi-hero{display:flex;justify-content:space-between;align-items:end;padding:28px 20px 16px;background:linear-gradient(145deg,#fff4dd,transparent 65%)}.ricordi-kicker{font-size:.68rem;font-weight:800;letter-spacing:.12em;color:#b86e00}.ricordi-hero h1{font-size:2.45rem;line-height:1;margin:5px 0;color:var(--text-primary)}.ricordi-hero p{margin:0;color:var(--text-secondary)}.ricordi-add{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ricordi-accent);color:#fff;font-size:1.7rem;text-decoration:none}.ricordi-segments{display:flex;background:color-mix(in srgb,var(--text-primary) 8%,transparent);margin:0 16px;padding:3px;border-radius:10px}.ricordi-segments a{flex:1;padding:7px;text-align:center;text-decoration:none;color:var(--text-secondary);font-size:.84rem;border-radius:8px}.ricordi-segments .active{background:var(--card-bg);color:var(--text-primary);font-weight:700;box-shadow:0 1px 3px #0002}.ricordi-search{display:flex;margin:14px 16px;border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--text-primary) 9%,transparent)}.ricordi-search input{flex:1;border:0;background:transparent;padding:11px;color:var(--text-primary);outline:0}.ricordi-search button{border:0;background:transparent;font-size:1.25rem;padding:0 12px;color:var(--text-secondary)}.ricordi-albums,.ricordi-library{padding:0 16px}.ricordi-albums h2,.ricordi-library h2{font-size:1.15rem;margin:18px 0 10px}.ricordi-albums>div{display:flex;gap:8px;overflow:auto;padding-bottom:4px}.ricordi-albums a{white-space:nowrap;padding:8px 13px;border-radius:999px;text-decoration:none;background:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary);font-size:.82rem}.ricordi-albums a.active{background:var(--ricordi-accent);color:white}.ricordi-filters{margin:14px 16px;color:var(--text-secondary);font-size:.85rem}.ricordi-filters summary{cursor:pointer}.ricordi-filters form{display:flex;gap:8px;padding-top:10px}.ricordi-filters select{min-width:0;flex:1;border:1px solid var(--border-color);border-radius:8px;background:var(--card-bg);color:var(--text-primary);padding:7px}.ricordi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}.ricordi-card{border:0;padding:0;position:relative;aspect-ratio:1;background:#ddd;overflow:hidden;cursor:pointer}.ricordi-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}.ricordi-card:hover img{transform:scale(1.04)}.ricordi-card>span{display:grid;place-items:center;height:100%;font-size:2rem;background:#333;color:#fff}.ricordi-card b{position:absolute;bottom:5px;right:5px;color:#fff;font-size:.58rem;text-shadow:0 1px 3px #000}.ricordi-viewer{max-width:min(1000px,96vw);width:96vw;max-height:94vh;background:#111;color:#fff;border:0;border-radius:14px;padding:20px;text-align:center}.ricordi-viewer::backdrop{background:#000c}.ricordi-viewer img,.ricordi-viewer video{max-width:100%;max-height:75vh;object-fit:contain}.ricordi-load{display:block;text-align:center;margin:20px;color:#b86e00;font-weight:700}@media(max-width:800px){.ricordi-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:600px){.ricordi-hero{padding:23px 14px 14px}.ricordi-segments,.ricordi-search,.ricordi-filters{margin-inline:10px}.ricordi-albums,.ricordi-library{padding-inline:10px}.ricordi-grid{grid-template-columns:repeat(3,1fr);gap:2px}.ricordi-viewer{padding:12px}}
.ricordi-viewer{width:min(1180px,100vw);height:min(900px,100dvh);max-width:none;max-height:none;border-radius:0;padding:0;background:radial-gradient(circle at center,#2b2b2e 0,#121214 68%);overflow:hidden}.ricordi-viewer #ricordi-content{height:100%;display:grid;place-items:center;padding:58px 88px 82px}.ricordi-viewer img,.ricordi-viewer video{width:auto;max-width:100%;height:auto;max-height:100%;border-radius:4px;box-shadow:0 18px 55px #0008}.ricordi-viewer .close-viewer{position:absolute;z-index:2;top:18px;right:18px;border:0;border-radius:999px;padding:9px 15px;background:#ffffff2b;color:#fff;backdrop-filter:blur(14px);font:600 .82rem inherit}.ricordi-viewer .nav-arrow{position:absolute;z-index:2;top:calc(50% - 24px);width:48px;height:48px;border:0;border-radius:50%;background:#ffffff26;color:#fff;font-size:2.25rem;line-height:1;backdrop-filter:blur(14px)}.ricordi-viewer .arrow-left{left:18px}.ricordi-viewer .arrow-right{right:18px}.ricordi-viewer #ricordi-info{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);margin:0;padding:9px 15px;border-radius:999px;background:#0007;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.82rem;backdrop-filter:blur(14px)}.ricordi-viewer::backdrop{background:#000e}@media(max-width:600px){.ricordi-viewer #ricordi-content{padding:58px 12px 78px}.ricordi-viewer .nav-arrow{width:38px;height:38px;font-size:1.75rem}.ricordi-viewer .arrow-left{left:8px}.ricordi-viewer .arrow-right{right:8px}.ricordi-viewer .close-viewer{top:10px;right:10px}.ricordi-viewer #ricordi-info{bottom:12px}}
.ricordi-viewer{position:fixed;inset:0;width:100vw;height:100dvh;margin:0;overscroll-behavior:contain}.ricordi-viewer #ricordi-content{box-sizing:border-box;min-height:100dvh;overflow:hidden}.ricordi-viewer img,.ricordi-viewer video{display:block;object-fit:contain}.ricordi-viewer .close-viewer{width:38px;height:38px;padding:0;font-size:0}.ricordi-viewer .close-viewer::after{content:'×';font-size:1.7rem;font-weight:300;line-height:1}.ricordi-viewer .nav-arrow{opacity:.84}.ricordi-viewer .nav-arrow:hover{opacity:1;background:#ffffff40}@media(max-width:600px){.ricordi-viewer #ricordi-content{min-height:100dvh;padding:58px 8px 70px}.ricordi-viewer img,.ricordi-viewer video{max-height:calc(100dvh - 128px)}}
.hc-area-theme-ricordi{--hc-area-accent:#ff9f0a;--hc-area-accent-2:#ff6b35}.hc-area-theme-ricordi .hc-sidebar__link.is-active{border-color:#ff9f0a;background:rgba(255,159,10,.13)}.ricordi-hero{padding:22px 28px 18px;background:var(--card-bg);border-bottom:1px solid var(--border-color)}.ricordi-hero h1{font-size:2rem}.ricordi-hero p{font-size:.92rem}.ricordi-kicker{color:#9a5c00}.ricordi-segments{max-width:420px;margin:18px 28px 12px}.ricordi-search{max-width:620px;margin:12px 28px 18px}.ricordi-albums,.ricordi-library{padding:0 28px}.ricordi-filters{margin:12px 28px}@media(max-width:600px){.ricordi-hero{padding:18px 14px 14px}.ricordi-segments,.ricordi-search,.ricordi-filters{margin-inline:14px}.ricordi-albums,.ricordi-library{padding-inline:14px}}
.ricordi-viewer img,.ricordi-viewer video{transition:transform .18s ease;transform-origin:center center}.ricordi-zoom-controls{position:absolute;z-index:3;left:50%;top:18px;transform:translateX(-50%);display:flex;overflow:hidden;border-radius:999px;background:#ffffff2b;backdrop-filter:blur(14px)}.ricordi-zoom-controls button{width:38px;height:38px;border:0;border-right:1px solid #ffffff25;background:transparent;color:#fff;font-size:1.35rem}.ricordi-zoom-controls button:last-child{border-right:0}@media(max-width:600px){.ricordi-zoom-controls{top:10px}.ricordi-viewer .close-viewer{right:12px}}
/* Viewer Ricordi: viewport unico, media sempre intero a zoom 100%. */
.ricordi-viewer{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#121214!important;overflow:hidden!important}.ricordi-viewer #ricordi-content{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;width:100%!important;height:100%!important;min-height:0!important;padding:84px 108px 92px!important;overflow:auto!important}.ricordi-viewer #ricordi-content img,.ricordi-viewer #ricordi-content video{display:block!important;box-sizing:border-box!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;flex:0 0 auto!important}.ricordi-viewer .close-viewer{top:18px!important;right:18px!important}.ricordi-viewer #ricordi-info{bottom:18px!important;z-index:4!important}.ricordi-viewer .nav-arrow{z-index:4!important}@media(max-width:600px){.ricordi-viewer #ricordi-content{padding:64px 12px 76px!important}.ricordi-viewer .close-viewer{top:10px!important;right:10px!important}}
.hc-sidebar__link--ricordi{border-color:rgba(255,159,10,.40)!important;background:linear-gradient(135deg,rgba(255,159,10,.16),rgba(255,107,53,.08))!important;box-shadow:inset 4px 0 0 #ff9f0a}.hc-sidebar__link--ricordi .hc-sidebar__icon{background:rgba(255,159,10,.16)!important;color:#ffb340!important}.hc-sidebar__link--ricordi.is-active{border-color:rgba(255,159,10,.70)!important;background:linear-gradient(135deg,rgba(255,159,10,.28),rgba(255,107,53,.13))!important}.hc-area-theme-ricordi .hc-sidebar__area{display:block!important}.ricordi-hero{display:flex!important;align-items:center!important;min-height:88px!important;padding:18px 28px!important;background:var(--card-bg)!important;border-bottom:1px solid var(--border-color)!important}.ricordi-hero .ricordi-kicker{display:none}.ricordi-hero h1{font-size:2rem!important;margin:0!important}.ricordi-hero p{margin:4px 0 0!important}.ricordi-viewer #ricordi-content{cursor:grab}.ricordi-viewer #ricordi-content:active{cursor:grabbing}
/* Ricordi usa la stessa testata-card delle aree, con identità ambrata propria. */
.ricordi-page .ricordi-hero{position:relative!important;isolation:isolate;min-height:156px!important;margin:20px 22px 0!important;padding:30px 112px 30px 138px!important;border:0!important;border-radius:30px!important;background:linear-gradient(135deg,#ff9f0a 0%,#f97316 46%,#d97706 100%)!important;box-shadow:0 18px 36px rgba(217,119,6,.20)!important;color:#fff!important;overflow:hidden}.ricordi-page .ricordi-hero::before{content:'▦';position:absolute;z-index:-1;left:28px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:82px;height:82px;border:1px solid rgba(255,255,255,.42);border-radius:24px;background:rgba(255,255,255,.14);color:#fff;font-size:3rem;font-weight:400}.ricordi-page .ricordi-hero::after{content:'';position:absolute;z-index:-2;right:-78px;top:-90px;width:290px;height:290px;border-radius:50%;background:rgba(255,255,255,.13)}.ricordi-page .ricordi-hero .ricordi-kicker{display:block!important;color:rgba(255,255,255,.74)!important;font-size:.78rem!important;font-weight:800!important;letter-spacing:.12em}.ricordi-page .ricordi-hero h1{color:#fff!important;font-size:2.55rem!important;line-height:1.05!important;margin:8px 0 4px!important}.ricordi-page .ricordi-hero p{color:rgba(255,255,255,.82)!important;font-size:1.05rem!important}.ricordi-page .ricordi-add{right:28px;bottom:auto;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.20)!important;border:1px solid rgba(255,255,255,.48);box-shadow:none}.hc-sidebar__link--ricordi{color:#fff!important}.hc-sidebar__link--ricordi .hc-sidebar__text em{color:#ffcf8a!important}@media(max-width:600px){.ricordi-page .ricordi-hero{min-height:126px!important;margin:12px 12px 0!important;padding:24px 68px 24px 92px!important;border-radius:24px!important}.ricordi-page .ricordi-hero::before{left:17px;width:58px;height:58px;border-radius:18px;font-size:2.1rem}.ricordi-page .ricordi-hero h1{font-size:2rem!important}.ricordi-page .ricordi-add{right:16px;width:38px;height:38px;font-size:1.45rem}}
/* Ricordi: colore dedicato fucsia, distinto da Area famiglia (arancio). */
.ricordi-page{--ricordi-accent:#ec4899!important}.hc-sidebar__link--ricordi{border-color:rgba(236,72,153,.48)!important;background:linear-gradient(135deg,rgba(236,72,153,.21),rgba(190,24,93,.10))!important;box-shadow:inset 4px 0 0 #ec4899!important}.hc-sidebar__link--ricordi .hc-sidebar__icon{background:rgba(236,72,153,.19)!important;color:#f9a8d4!important}.hc-sidebar__link--ricordi.is-active{border-color:rgba(236,72,153,.78)!important;background:linear-gradient(135deg,rgba(236,72,153,.32),rgba(190,24,93,.16))!important}.hc-sidebar__link--ricordi .hc-sidebar__text em{color:#fbcfe8!important}.ricordi-page .ricordi-hero{background:linear-gradient(135deg,#ec4899 0%,#db2777 48%,#9d174d 100%)!important;box-shadow:0 18px 36px rgba(190,24,93,.22)!important}
/* Ricordi Fase 1: zoom e pan del viewer. */
.ricordi-viewer #ricordi-content.is-zoomed{overflow:hidden!important;touch-action:none}.ricordi-viewer #ricordi-content.is-zoomed img{max-width:none!important;max-height:none!important;will-change:transform}.ricordi-video-placeholder{background:linear-gradient(145deg,#3a3a42,#17171b)!important}.ricordi-card:focus-visible{outline:3px solid var(--ricordi-accent);outline-offset:2px}
.ricordi-viewer.is-open{display:block!important}
.ricordi-context-card{margin:18px 20px;padding:16px;border:1px solid var(--border-color);border-radius:16px;background:var(--card-bg)}.ricordi-context-card h3{margin:0 0 5px;font-size:1.05rem}.ricordi-context-card p{margin:0;color:var(--text-secondary);font-size:.86rem}@media(max-width:600px){.ricordi-context-card{margin:14px}}
.ricordi-context-preview{display:flex;gap:6px;overflow:auto;margin:10px 0}.ricordi-context-preview a{flex:0 0 58px;height:58px}.ricordi-context-preview img{width:100%;height:100%;object-fit:cover;border-radius:9px}.ricordi-picker-filters,.ricordi-picker-actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 28px}.ricordi-picker-filters input,.ricordi-picker-filters select{min-width:0;flex:1;padding:9px;border:1px solid var(--border-color);border-radius:9px;background:var(--card-bg);color:var(--text-primary)}.ricordi-picker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:0 28px}.ricordi-pick{border:2px solid transparent;padding:0;overflow:hidden;background:var(--card-bg);border-radius:9px;text-align:left}.ricordi-pick.is-selected{border-color:var(--ricordi-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--ricordi-accent) 28%,transparent)}.ricordi-pick img,.ricordi-pick>span{display:grid;place-items:center;width:100%;aspect-ratio:1;object-fit:cover;background:#29292f;color:#fff}.ricordi-pick b{display:block;padding:5px;font-size:.65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:600px){.ricordi-picker-filters,.ricordi-picker-actions{margin-inline:14px}.ricordi-picker-grid{grid-template-columns:repeat(3,1fr);padding-inline:14px}}