/* THEME VARIABLES */
:root {
    /* Background Colors */
    --bg-body: #000000;
    --bg-card: #1c1c1e;
    
    /* Text Colors */
    --text-main: #F5F5F7;
    --text-muted: #86868B;
    
    /* Glass Morphism */
    --glass-bg: rgba(28, 28, 30, 0.65);
    --glass-border: rgba(255, 255, 255, 0.1);
    
    /* Interactive Elements */
    --card-hover: rgba(255, 255, 255, 0.08);
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-focus: rgba(255, 255, 255, 0.12);
    
    /* Accent Colors */
    --accent-blue: #0A84FF;
    --accent-green: #30D158;
    --accent-red: #FF453A;
    --accent-orange: #FF9F0A;
    --accent-purple: #BF5AF2;
    --accent-yellow: #FFD60A;

    /* Modal */
    --modal-bg: #1c1c1e;
    --modal-header: rgba(255, 255, 255, 0.03);

    /* Toggle States */
    --toggle-bg: #F5F5F7;
    --toggle-text: #000000;

    /* Mood Selection */
    --mood-selected-bg: rgba(255, 255, 255, 0.2);
    --mood-selected-border: transparent;

    /* Kanban Columns */
    --col-todo-bg: rgba(255, 59, 48, 0.05);
    --col-prog-bg: rgba(10, 132, 255, 0.05);
    --col-done-bg: rgba(48, 209, 88, 0.05);

    /* Calendar */
    --cal-hover: rgba(255, 255, 255, 0.1);
    --cal-active: #0A84FF;

    /* Tabs */
    --tab-bg: rgba(118, 118, 128, 0.24);
    --tab-active: #636366;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] {
    /* Background Colors */
    --bg-body: #FAFAFA;
    --bg-card: #FFFFFF;
    
    /* Text Colors */
    --text-main: #000000;
    --text-muted: #666666;
    
    /* Glass Morphism */
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 0, 0, 0.12);
    
    /* Interactive Elements */
    --card-hover: rgba(0, 0, 0, 0.06);
    --input-bg: #F0F0F0;
    --input-focus: #E8E8E8;
    
    /* Accent Colors */
    --accent-blue: #007AFF;
    --accent-green: #34C759;
    --accent-red: #FF3B30;
    --accent-orange: #FF9500;
    --accent-purple: #AF52DE;
    --accent-yellow: #FFCC00;

    /* Modal */
    --modal-bg: #FFFFFF;
    --modal-header: #F5F5F7;

    /* Toggle States */
    --toggle-bg: #1D1D1F;
    --toggle-text: #FFFFFF;

    /* Mood Selection */
    --mood-selected-bg: rgba(0, 0, 0, 0.05);
    --mood-selected-border: #0071E3;

    /* Kanban Columns */
    --col-todo-bg: rgba(255, 59, 48, 0.03);
    --col-prog-bg: rgba(0, 113, 227, 0.03);
    --col-done-bg: rgba(52, 199, 89, 0.03);

    /* Calendar */
    --cal-hover: rgba(0, 0, 0, 0.05);
    --cal-active: #0071E3;

    /* Tabs */
    --tab-bg: rgba(0, 0, 0, 0.08);
    --tab-active: #FFFFFF;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.08);
}

/* Fix text-white in light mode */
.preserve-white {
    color: #ffffff !important;
}

[data-theme="light"] .text-white:not(.preserve-white) {
    color: var(--text-main) !important;
}

/* OVERRIDE FOR MISUSED PRESERVE-WHITE: Force variable texts to be dark in light mode unless they sit on explicitly dark/colored backgrounds */
[data-theme="light"] .preserve-white {
    color: var(--text-main) !important;
}

/* Re-apply white color ONLY when the element itself, or its parent, is a primary colored background */
[data-theme="light"] .bg-\[var\(--accent-blue\)\].preserve-white,
[data-theme="light"] .bg-\[var\(--accent-blue\)\] .preserve-white,
[data-theme="light"] button.bg-\[var\(--accent-blue\)\].preserve-white,
[data-theme="light"] button.bg-\[var\(--accent-blue\)\] .preserve-white,
[data-theme="light"] .bg-blue-500.preserve-white,
[data-theme="light"] .bg-blue-500 .preserve-white,
[data-theme="light"] .bg-blue-600.preserve-white,
[data-theme="light"] .bg-blue-600 .preserve-white,
[data-theme="light"] .bg-green-500.preserve-white,
[data-theme="light"] .bg-green-500 .preserve-white,
[data-theme="light"] .bg-green-600.preserve-white,
[data-theme="light"] .bg-green-600 .preserve-white,
[data-theme="light"] .bg-red-500.preserve-white,
[data-theme="light"] .bg-red-500 .preserve-white,
[data-theme="light"] .bg-red-600.preserve-white,
[data-theme="light"] .bg-red-600 .preserve-white,
[data-theme="light"] .bg-purple-500.preserve-white,
[data-theme="light"] .bg-purple-500 .preserve-white,
[data-theme="light"] .bg-purple-600.preserve-white,
[data-theme="light"] .bg-purple-600 .preserve-white,
[data-theme="light"] .bg-orange-500.preserve-white,
[data-theme="light"] .bg-orange-500 .preserve-white,
[data-theme="light"] .bg-yellow-500.preserve-white,
[data-theme="light"] .bg-yellow-500 .preserve-white,
[data-theme="light"] .bg-yellow-600.preserve-white,
[data-theme="light"] .bg-yellow-600 .preserve-white,
[data-theme="light"] .bg-emerald-500.preserve-white,
[data-theme="light"] .bg-emerald-500 .preserve-white,
[data-theme="light"] .bg-indigo-500.preserve-white,
[data-theme="light"] .bg-indigo-500 .preserve-white {
    color: #ffffff !important;
}
/* NB: gradients are handled separately below — `bg-gradient-to-*` says nothing
   about how dark the gradient actually is, so it cannot be listed here. */

/* Fix group-hover in light mode */
[data-theme="light"] .group:hover .group-hover\:text-\[var\(--accent-blue\)\] {
    color: var(--accent-blue) !important;
}

/* ==========================================================
   LIGHT MODE — GRADIENT SURFACES
   `bg-gradient-to-*` carries no information about how dark the gradient is,
   so it must never be used on its own to force white text. Two very common
   gradients in this app are almost white in light mode:
     - the modal shells:  from-[var(--bg-card)] to-[var(--bg-card)]/80
     - the tinted panels: from-red-500/10 to-red-500/5, green, blue, purple…
   Forcing white on those made the text invisible (white on white) — e.g. the
   "Errori Commessi" / "Aree di Miglioramento" panels of a revisione, and the
   whole trade-detail modal.

   The default is therefore dark text on gradients (inherited from the generic
   .preserve-white rule above); white is re-applied here only when the gradient
   starts from a solid, saturated color. Adding a new solid gradient? Add its
   `from-*` token to the list below.
   ========================================================== */
[data-theme="light"] [class*="bg-gradient-to-"]:is(
    [class~="from-[var(--accent-blue)]"],
    [class~="from-[var(--text-main)]"],
    [class~="from-black"], [class~="from-black/80"],
    [class~="from-slate-900/70"],
    [class~="from-blue-400"], [class~="from-blue-500"], [class~="from-blue-600"],
    [class~="from-blue-500/50"],
    [class~="from-indigo-500"], [class~="from-indigo-600"],
    [class~="from-violet-500"], [class~="from-violet-600"],
    [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-purple-500/50"],
    [class~="from-cyan-400"], [class~="from-cyan-500"], [class~="from-cyan-600"],
    [class~="from-green-500"], [class~="from-green-600"],
    [class~="from-emerald-500"], [class~="from-emerald-600"],
    [class~="from-red-500"], [class~="from-red-600"],
    [class~="from-orange-500"], [class~="from-orange-600"],
    [class~="from-amber-400"], [class~="from-amber-500"],
    [class~="from-yellow-500"]
) :is(.preserve-white, .text-white),
[data-theme="light"] [class*="bg-gradient-to-"]:is(
    [class~="from-[var(--accent-blue)]"],
    [class~="from-[var(--text-main)]"],
    [class~="from-black"], [class~="from-black/80"],
    [class~="from-slate-900/70"],
    [class~="from-blue-400"], [class~="from-blue-500"], [class~="from-blue-600"],
    [class~="from-blue-500/50"],
    [class~="from-indigo-500"], [class~="from-indigo-600"],
    [class~="from-violet-500"], [class~="from-violet-600"],
    [class~="from-purple-500"], [class~="from-purple-600"], [class~="from-purple-500/50"],
    [class~="from-cyan-400"], [class~="from-cyan-500"], [class~="from-cyan-600"],
    [class~="from-green-500"], [class~="from-green-600"],
    [class~="from-emerald-500"], [class~="from-emerald-600"],
    [class~="from-red-500"], [class~="from-red-600"],
    [class~="from-orange-500"], [class~="from-orange-600"],
    [class~="from-amber-400"], [class~="from-amber-500"],
    [class~="from-yellow-500"]
):is(.preserve-white, .text-white) {
    color: #ffffff !important;
}

/* Exception: Keep white text on colored buttons */
[data-theme="light"] .bg-\[var\(--accent-blue\)\] .text-white,
[data-theme="light"] .bg-green-500 .text-white,
[data-theme="light"] .bg-green-600 .text-white,
[data-theme="light"] .bg-red-500 .text-white,
[data-theme="light"] .bg-purple-500 .text-white,
[data-theme="light"] button.bg-\[var\(--accent-blue\)\],
[data-theme="light"] button.bg-green-500,
[data-theme="light"] button.bg-red-500,
[data-theme="light"] .from-green-500,
[data-theme="light"] .from-green-600 {
    color: white !important;
}

/* Fix icons on colored backgrounds (gradients: see the dedicated block below) */
[data-theme="light"] .bg-blue-500 .text-white,
[data-theme="light"] .bg-emerald-500 .text-white,
[data-theme="light"] .bg-orange-500 .text-white,
[data-theme="light"] .bg-indigo-500 .text-white {
    color: white !important;
}

/* === ONBOARDING LIGHT MODE FIXES === */

/* Hero card: swap dark gradient for a soft light gradient */
[data-theme="light"] .onboarding-hero {
    background: linear-gradient(135deg, rgba(240, 247, 255, 0.95), rgba(235, 243, 255, 0.9), rgba(230, 240, 255, 0.85)) !important;
    border-color: var(--glass-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Decorative blobs: softer in light mode */
[data-theme="light"] .onboarding-hero .bg-cyan-500\/20 {
    background-color: rgba(6, 182, 212, 0.08) !important;
}
[data-theme="light"] .onboarding-hero .bg-indigo-500\/20 {
    background-color: rgba(99, 102, 241, 0.08) !important;
}

/* Badge: darker text for readability */
[data-theme="light"] .onboarding-badge {
    color: #0e7490 !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
    background-color: rgba(6, 182, 212, 0.08) !important;
}

/* Hero title: dark text in light mode */
[data-theme="light"] .onboarding-hero h1 {
    color: #0f172a !important;
}

/* Subtitle: readable on light bg */
[data-theme="light"] .onboarding-subtitle {
    color: #475569 !important;
}

/* Feature cards in the hero */
[data-theme="light"] .onboarding-feature-card {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-color: var(--glass-border) !important;
}

/* Completion card: lighter gradient */
[data-theme="light"] .onboarding-complete-card {
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.7), rgba(240, 249, 255, 0.6), rgba(238, 242, 255, 0.7)) !important;
    border-color: var(--glass-border) !important;
}

/* Completion badge: darker green text */
[data-theme="light"] .onboarding-complete-badge {
    color: #047857 !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    background-color: rgba(16, 185, 129, 0.08) !important;
}

/* Validation message: readable in light mode */
[data-theme="light"] .border-rose-500\/40 {
    border-color: rgba(244, 63, 94, 0.4) !important;
}
[data-theme="light"] .bg-rose-500\/10 {
    background-color: rgba(244, 63, 94, 0.08) !important;
}
[data-theme="light"] .text-rose-200 {
    color: #be123c !important;
}

/* Fix bg-black in light mode */
[data-theme="light"] .bg-black\/30,
[data-theme="light"] .bg-black\/40,
[data-theme="light"] .bg-black\/60 {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Fix hardcoded dark backgrounds in light mode */
[data-theme="light"] .bg-\[\#1c1c1e\] {
    background-color: var(--bg-card) !important;
}

/* Fix select options in modals - light mode */
[data-theme="light"] option {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

/* Fix borders in light mode */
[data-theme="light"] .border-white\/5 {
    border-color: #E0E0E0 !important;
}

[data-theme="light"] .border-white\/10 {
    border-color: #D0D0D0 !important;
}

[data-theme="light"] .border-white\/20 {
    border-color: #C0C0C0 !important;
}

[data-theme="light"] .border-white\/30 {
    border-color: #B0B0B0 !important;
}

/* Fix bg-white in light mode hover states */
[data-theme="light"] .hover\:bg-white\/5:hover {
    background-color: #F0F0F0 !important;
}

[data-theme="light"] .hover\:bg-white\/10:hover {
    background-color: #E8E8E8 !important;
}

[data-theme="light"] .hover\:bg-white\/15:hover {
    background-color: #E0E0E0 !important;
}

[data-theme="light"] .hover\:bg-white\/20:hover {
    background-color: #D8D8D8 !important;
}

/* Fix hover border states in light mode */
[data-theme="light"] .hover\:border-white\/10:hover {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .hover\:border-white\/20:hover {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .hover\:text-white:hover {
    color: var(--text-main) !important;
}

/* Fix placeholders in light mode */
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.6;
}

/* Todo modal light mode fixes */
[data-theme="light"] #modal-todo .bg-black\/20,
[data-theme="light"] #modal-edit-todo .bg-black\/20 {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

/* Stable todo modal states (avoid fragile dynamic utility classes) */
#modal-todo .todo-mode-tab {
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    transition: color 0.22s ease, background-color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

#modal-todo .todo-mode-tab:hover {
    color: var(--text-main) !important;
}

#modal-todo .todo-mode-tab.active {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: rgba(10, 132, 255, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.18), var(--shadow-sm);
    transform: translateY(-1px);
}

#modal-todo .todo-mode-tab.active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.12) 45%, transparent 100%);
    animation: todoTabShimmer 360ms ease;
    pointer-events: none;
}

#modal-todo .todo-form-panel {
    transform-origin: top center;
    will-change: transform, opacity, filter;
}

#modal-todo .todo-form-enter {
    animation: todoFormEnter 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

#modal-todo .todo-form-exit {
    animation: todoFormExit 170ms cubic-bezier(0.4, 0, 1, 1);
    pointer-events: none;
}

#modal-todo #todo-modal-title.todo-title-switch {
    animation: todoTitleSwitch 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes todoFormEnter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.99);
        filter: blur(1.5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes todoFormExit {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    to {
        opacity: 0;
        transform: translateY(-6px) scale(0.99);
        filter: blur(1px);
    }
}

@keyframes todoTitleSwitch {
    from {
        opacity: 0.35;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes todoTabShimmer {
    from {
        transform: translateX(-120%);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #modal-todo .todo-mode-tab,
    #modal-todo .todo-mode-tab.active,
    #modal-todo .todo-form-enter,
    #modal-todo .todo-form-exit,
    #modal-todo #todo-modal-title.todo-title-switch {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }
}

#modal-todo .type-btn {
    color: var(--text-muted) !important;
    border-color: transparent !important;
}

#modal-todo .type-btn i {
    color: currentColor;
}

#modal-todo .type-btn.active {
    color: var(--text-main) !important;
    background: var(--bg-card) !important;
    border-color: rgba(10, 132, 255, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.22);
}

#modal-todo .type-btn.active i {
    color: var(--accent-blue);
}

#modal-edit-todo .edit-type-btn {
    color: var(--text-muted) !important;
}

#modal-edit-todo .edit-type-btn.active {
    color: var(--text-main) !important;
    background: var(--bg-card) !important;
    border-color: rgba(10, 132, 255, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.22);
}

#modal-todo input,
#modal-todo select,
#modal-todo textarea,
#modal-edit-todo input,
#modal-edit-todo select,
#modal-edit-todo textarea {
    color: var(--text-main) !important;
}

[data-theme="light"] #modal-todo input::placeholder,
[data-theme="light"] #modal-todo select::placeholder,
[data-theme="light"] #modal-edit-todo input::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* Enhanced tab contrast in light mode */
[data-theme="light"] #modal-todo .bg-black\/20 {
    background-color: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Improve color contrast in light mode */
[data-theme="light"] .text-green-400,
[data-theme="light"] .text-green-500 {
    color: #24a148 !important;
}

[data-theme="light"] .text-red-400,
[data-theme="light"] .text-red-500 {
    color: #d9342b !important;
}

[data-theme="light"] .text-blue-400,
[data-theme="light"] .text-blue-500 {
    color: #0066cc !important;
}

[data-theme="light"] .text-purple-400,
[data-theme="light"] .text-purple-500 {
    color: #9b45db !important;
}

[data-theme="light"] .text-orange-400,
[data-theme="light"] .text-orange-500 {
    color: #e67700 !important;
}

[data-theme="light"] .text-yellow-400,
[data-theme="light"] .text-yellow-500 {
    /* #cc9f00 was still only ~2:1 on the yellow-500/10 badge background */
    color: #a17c00 !important;
}

[data-theme="light"] .text-emerald-400,
[data-theme="light"] .text-emerald-500 {
    color: #0f8a5f !important;
}

[data-theme="light"] .text-indigo-400,
[data-theme="light"] .text-indigo-500 {
    color: #3f51b5 !important;
}

/* Fix white/5, white/10 backgrounds in light mode */
[data-theme="light"] .bg-white\/5 {
    background-color: #F8F8F8 !important;
}

[data-theme="light"] .bg-white\/10 {
    background-color: #F0F0F0 !important;
}

[data-theme="light"] .bg-white\/15 {
    background-color: #ECECEC !important;
}

[data-theme="light"] .bg-white\/20 {
    background-color: #E8E8E8 !important;
}

/* Fix backdrop blur overlay in light mode */
[data-theme="light"] .bg-black\/60 {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

[data-theme="light"] .backdrop-blur-md {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Fix scanner container in light mode */
[data-theme="light"] .bg-black {
    background-color: #1c1c1e !important;
}

/* Fix account type selector - peer-checked states in light mode */
[data-theme="light"] .peer:checked ~ div {
    background-color: inherit !important;
}

[data-theme="light"] input[name="acc_type"][value="live"]:checked ~ div {
    background-color: rgba(52, 199, 89, 0.2) !important;
    border-color: rgba(52, 199, 89, 0.6) !important;
}

[data-theme="light"] input[name="acc_type"][value="funded"]:checked ~ div {
    background-color: rgba(0, 113, 227, 0.2) !important;
    border-color: rgba(0, 113, 227, 0.6) !important;
}

[data-theme="light"] input[name="acc_type"][value="challenge"]:checked ~ div {
    background-color: rgba(255, 149, 0, 0.2) !important;
    border-color: rgba(255, 149, 0, 0.6) !important;
}

/* Touch action and user select */
body {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Light mode - Card gradienti premium */
[data-theme="light"] .card-apple {
    background: linear-gradient(135deg, #FFFFFF 0%, rgba(250, 250, 252, 0.98) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06),
                0 1px 3px rgba(0, 0, 0, 0.08),
                inset 0 0.5px 0 rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .card-apple::before {
    background: linear-gradient(90deg, transparent, rgba(0, 122, 255, 0.12), transparent);
}

[data-theme="light"] .card-apple:hover {
    background: linear-gradient(135deg, #FFFFFF 0%, rgba(245, 248, 255, 1) 100%);
    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.15),
                0 4px 12px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(0, 122, 255, 0.3),
                inset 0 0.5px 0 rgba(255, 255, 255, 1);
    transform: translateY(-2px);
}

/* Light mode - Modal premium */
[data-theme="light"] .modal-clean {
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(252, 252, 254, 1) 100%);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15),
                0 20px 40px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(0, 0, 0, 0.1),
                inset 0 0.5px 0 rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Light mode - Input gradienti */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: #F5F5F5;
    border-color: #D0D0D0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    background: #FFFFFF;
    border-color: #007AFF;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15),
                0 2px 8px rgba(0, 122, 255, 0.1);
}

/* Light mode - Stat boxes premium */
[data-theme="light"] .stat-box {
    background: linear-gradient(135deg, #FFFFFF 0%, rgba(248, 248, 250, 1) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 1);
}

[data-theme="light"] .stat-box::before {
    background: linear-gradient(90deg, transparent, rgba(0, 113, 227, 0.2), transparent);
}

[data-theme="light"] .stat-box:hover {
    box-shadow: 0 8px 20px rgba(0, 113, 227, 0.12),
                0 4px 8px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Light mode - Dock premium */
[data-theme="light"] .dock-container {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 245, 247, 0.98) 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08),
                0 20px 40px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 1);
}

[data-theme="light"] .dock-icon.active {
    background: rgba(0, 122, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.18);
    color: var(--accent-blue);
}

[data-theme="light"] .dock-icon:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* Light mode - Glass effect premium */
[data-theme="light"] .glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(30px) saturate(180%) brightness(1.1);
    -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Light mode - Review cards premium */
[data-theme="light"] .review-hero-card {
    background: linear-gradient(135deg, #FFFFFF 0%, rgba(248, 248, 252, 1) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 1);
}

[data-theme="light"] .review-hero-card::before {
    background: linear-gradient(90deg, transparent, rgba(0, 113, 227, 0.3), transparent);
}

[data-theme="light"] .review-hero-card:hover {
    background: linear-gradient(135deg, #FFFFFF 0%, rgba(252, 252, 254, 1) 100%);
    box-shadow: 0 16px 48px rgba(0, 113, 227, 0.2),
                0 0 0 1px var(--accent-blue),
                inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Light mode - Todo columns premium */
[data-theme="light"] .todo-col {
    background: linear-gradient(135deg, #FFFFFF 0%, rgba(250, 250, 252, 1) 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Light mode - Calendar premium */
[data-theme="light"] .calendar-day:hover {
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.08) 0%, rgba(0, 113, 227, 0.04) 100%);
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .calendar-day.today {
    background: linear-gradient(135deg, var(--accent-blue) 0%, rgba(0, 113, 227, 0.9) 100%);
    box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.2),
                0 4px 12px rgba(0, 113, 227, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Light mode - Kanban columns premium */
[data-theme="light"] .kanban-col-todo {
    background: linear-gradient(135deg, rgba(255, 59, 48, 0.04) 0%, rgba(255, 59, 48, 0.01) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .kanban-col-prog {
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.04) 0%, rgba(0, 113, 227, 0.01) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .kanban-col-done {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.04) 0%, rgba(52, 199, 89, 0.01) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Logo text styling */
.logo-text-eazy {
    background: linear-gradient(to right, #FFFFFF, #C0C0C0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .logo-text-eazy {
    background: linear-gradient(to right, #1a1a1a, #4a4a4a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Light mode - Review meta pills premium */
[data-theme="light"] .review-meta-pill {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Light mode - Buttons premium */
[data-theme="light"] button:not(:disabled):hover {
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] button::after {
    background: rgba(0, 113, 227, 0.3);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.2s ease, color 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    overscroll-behavior-y: none;
    overflow-x: hidden;
}

/* Blocca scroll del body quando un modal è aperto (fix per iPad/mobile) */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Safety net: while a popup is open, only modal overlay and its content remain interactive */
body.app-modal-active > *:not([data-modal-allowed-root="1"]):not(script):not(style) {
    pointer-events: none !important;
}

body.app-modal-active [data-modal-allowed-root="1"],
body.app-modal-active [data-modal-allowed-root="1"] * {
    pointer-events: auto !important;
}

/* Prevent iOS zoom on input focus - CRITICAL FOR IPAD */
input,
select,
textarea {
    font-size: 16px !important; /* Prevents auto-zoom on iOS */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Better touch scrolling */
* {
    -webkit-overflow-scrolling: touch;
}

/* Mobile Navigation - Compatta e Simmetrica */
@media (max-width: 767px) {
    nav {
        bottom: 0 !important;
        padding: 0.5rem !important;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
        background: transparent !important;
    }
    
    .dock-container {
        padding: 0.375rem !important;
        gap: 0.375rem !important;
    }
    
    .dock-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .dock-icon i {
        font-size: 24px !important;
        transition: color 0.3s ease, transform 0.3s ease;
    }
    
    /* Active state compatto */
    .dock-icon.active {
        background: var(--accent-blue) !important;
        color: white !important;
        transform: scale(1.03);
        box-shadow: 0 4px 12px rgba(10, 132, 255, 0.25);
    }
    
    /* Touch feedback ridotto */
    .dock-icon:active {
        transform: scale(0.94) !important;
    }
    
    /* Draft badge compatto */
    #draft-alert {
        width: 48px !important;
        height: 48px !important;
    }
    
    #draft-badge {
        width: 20px !important;
        height: 20px !important;
        font-size: 10px !important;
        top: -3px !important;
        right: -3px !important;
    }
    
    /* Separatore più sottile */
    .dock-container .w-px {
        width: 1px !important;
        height: 24px !important;
        margin: 0 0.25rem !important;
    }
    
    /* Ensure buttons are large enough */
    button {
        min-height: 44px !important;
    }
    
    /* Prevent iOS zoom on input focus */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Global button animations */
button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Fix specifico per iOS/iPad - garantisce che i button siano sempre cliccabili */
button[onclick] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    touch-action: manipulation;
    pointer-events: auto !important;
    position: relative;
    /* RIMOSSO z-index: 10 - causava stacking issues */
}

/* HITBOX FIX: translateY sposta il visuale ma NON l'hitbox → bottone parzialmente cliccabile.
   Usiamo solo box-shadow per simulare il "lift" senza muovere l'elemento. */
button:not(:disabled):hover {
    box-shadow: none;
}

button:not(:disabled):active {
    transform: scale(0.985);
}

/* Custom Scrollbar - Migliorata per PC e Mobile */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px; /* Larghezza visibile per desktop */
    height: 6px; /* Altezza per scroll orizzontale */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    transition: background 0.2s;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Nascondi scrollbar su mobile ma mantieni funzionalità */
@media (hover: none) and (pointer: coarse) {
    .custom-scrollbar::-webkit-scrollbar {
        width: 0px;
        height: 0px;
    }
}

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
}

/* Apple Style Cards */
.card-apple {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(28, 28, 30, 0.95) 100%);
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    position: relative;
    overflow: visible;
}

.card-apple::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.card-apple:hover::before {
    opacity: 1;
}

.card-apple:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.5), 
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.card-apple:active {
    transform: translateY(-4px) scale(1.01);
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Modal Clean */
.modal-clean {
    background: linear-gradient(180deg, var(--modal-bg) 0%, rgba(28, 28, 30, 0.98) 100%);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(255, 255, 255, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: modalZoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalZoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Modal overlay animation */
#modal-overlay {
    animation: fadeInOverlay 0.3s ease-out;
    /* Fix per scroll su iPad - permetti touch events */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Fix per tutti i modal - assicura scroll corretto */
.modal-clean {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

/* Mobile modal optimizations - Compatto */
@media (max-width: 768px) {
    #modal-overlay {
        padding: 0 !important;
    }
    
    /* Modal full-screen compatto */
    #modal-overlay > div {
        max-height: 100vh !important;
        max-width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    #modal-account,
    #modal-trade {
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        padding: 1rem !important;
    }

    /* Header compatto */
    #modal-account > div:first-child,
    #modal-trade > div:first-child {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--modal-bg);
        border-bottom: 1px solid var(--glass-border);
        padding: 0.75rem !important;
        margin: -1rem -1rem 0.75rem -1rem;
    }
    
    /* Drag indicator piccolo */
    #modal-account::before,
    #modal-trade::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 28px;
        height: 3px;
        background: var(--text-muted);
        border-radius: 100px;
        opacity: 0.3;
        z-index: 20;
    }

    /* Modal content scroll */
    #modal-account > div,
    #modal-trade > div {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* Bottoni compatti */
    #modal-account button,
    #modal-trade button {
        min-height: 42px !important;
        font-size: 15px !important;
        padding: 0.625rem 1rem !important;
    }
    
    /* Bottone chiudi compatto */
    #modal-account button[onclick*="closeModals"],
    #modal-trade button[onclick*="closeModals"] {
        width: 36px !important;
        height: 36px !important;
        font-size: 20px !important;
        padding: 0 !important;
    }

    /* Scroll margin ridotto */
    #modal-account input:focus,
    #modal-account textarea:focus,
    #modal-account select:focus,
    #modal-trade input:focus,
    #modal-trade textarea:focus,
    #modal-trade select:focus {
        scroll-margin-bottom: 150px;
    }
    
    /* Safe area minima */
    #modal-account,
    #modal-trade {
        padding-top: max(1rem, env(safe-area-inset-top)) !important;
        padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
    
    /* Titoli modal più piccoli */
    #modal-account h3,
    #modal-trade h3 {
        font-size: 1.25rem !important;
    }
}

/* Mobile-friendly form inputs - Compatto */
@media (max-width: 768px) {
    /* Font-size minimo per evitare zoom iOS */
    input,
    select,
    textarea,
    button {
        font-size: 16px !important;
    }

    /* Checkbox/radio compatti */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
        cursor: pointer;
    }
    
    /* Input compatti ma usabili */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        min-height: 44px !important;
        padding: 0.625rem 0.875rem !important;
        border-radius: 12px !important;
        font-size: 16px !important;
    }
    
    /* Date/time picker semplificato */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: var(--input-bg);
        color: var(--text-main);
        padding-right: 2rem;
    }
    
    /* Textarea compatta */
    textarea {
        min-height: 80px !important;
        resize: vertical;
    }
    
    /* Select semplificato */
    select {
        padding-right: 2rem !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    
    /* Focus state sottile */
    input:focus,
    select:focus,
    textarea:focus {
        outline: none !important;
        border: 1px solid var(--accent-blue) !important;
        box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.08) !important;
    }

    /* Label compatte */
    label {
        margin-bottom: 0.375rem;
        display: block;
        font-weight: 600;
        font-size: 13px;
    }

    /* Dropdown più touch-friendly */
    select {
        padding: 0.75rem !important;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F5F5F7' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        padding-right: 3rem !important;
    }

    /* Date inputs più grandi */
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        padding: 0.875rem !important;
        min-height: 48px;
    }
}

/* Inputs */
input,
select,
textarea {
    background: linear-gradient(135deg, var(--input-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 14px;
    will-change: transform;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    background: linear-gradient(135deg, var(--input-focus) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: var(--accent-blue);
    transform: scale(1.01);
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15),
                0 8px 16px -4px rgba(10, 132, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* High Contrast Radio/Toggle Logic */
.status-radio:checked+div,
.review-toggle-radio:checked+div,
.tab-radio:checked+div {
    background-color: var(--toggle-bg) !important;
    color: var(--toggle-text) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
    font-weight: 700;
    transform: scale(1.02);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Account Select Buttons logic */
.account-select-btn.active {
    background-color: var(--toggle-bg);
    color: var(--toggle-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Mood Button Selected State */
.mood-btn {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid transparent;
}

.mood-btn.selected {
    transform: scale(1.2);
    background-color: var(--mood-selected-bg);
    border-color: var(--mood-selected-border);
}

/* Modern Stars */
.star-rating i {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
    cursor: pointer;
}

.star-rating i:hover {
    transform: scale(1.3) rotate(15deg);
    filter: drop-shadow(0 0 8px currentColor);
}

.star-rating i:active {
    transform: scale(1.1);
}

/* Account Selector Button */
.account-pill {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    will-change: transform;
}

.account-pill.active {
    background-color: var(--toggle-bg);
    color: var(--toggle-text);
    font-weight: 600;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}

.account-pill:not(.active):hover {
    background-color: var(--input-bg);
    color: var(--text-main);
}

/* Time Filter Pills */
.time-filter-pill {
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    background-color: var(--input-bg);
    color: var(--text-muted);
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.time-filter-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.1), rgba(191, 90, 242, 0.1));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.time-filter-pill:hover:not(.active) {
    background-color: var(--card-hover);
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.08);
}

.time-filter-pill.active {
    background: var(--accent-blue);
    color: #fff;
    font-weight: 700;
    border-color: transparent;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.time-filter-pill.active::before {
    opacity: 1;
}

/* NEW: Journal Tab Filters */
.filter-tab-container {
    background: var(--input-bg);
    padding: 4px;
    border-radius: 12px;
    display: inline-flex;
    gap: 2px;
}

.filter-tab {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.filter-tab:hover {
    color: var(--text-main);
}

.filter-tab.active {
    background-color: var(--toggle-bg);
    color: var(--toggle-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* NEW: Icon Radio Buttons for ToDo */
.icon-radio-label {
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.icon-radio:checked+div {
    background-color: var(--toggle-bg);
    color: var(--toggle-text);
    border-color: var(--accent-blue);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Dock */
nav {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), 
                opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dock-container {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1),
                0 30px 60px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    background: linear-gradient(180deg, rgba(28, 28, 30, 0.85) 0%, rgba(20, 20, 20, 0.9) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    max-width: 95vw;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: slideUpDock 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dock-container::-webkit-scrollbar {
    display: none;
}

.dock-icon {
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.6s ease,
                background 0.7s ease,
                box-shadow 0.7s ease;
    flex-shrink: 0;
    will-change: transform, background, box-shadow;
    position: relative;
}

.dock-icon.active {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.dock-icon.active:hover {
    transform: none;
}

.dock-icon:not(.active):hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

@keyframes slideUpDock {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Payout Modal Button Active Style (NEW) */
.payout-acc-btn {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}
.payout-acc-btn.active {
    background-color: var(--accent-blue) !important;
    color: white !important;
    border-color: var(--accent-blue);
    box-shadow: 0 4px 10px rgba(10, 132, 255, 0.3);
}

/* =========================================
   4. ANIMATIONS (Aggiornato per Splash Screen & Onboarding)
   ========================================= */

/* Fade In generico con movimento pi\u00f9 fluido */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fade-in {
    animation: fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: opacity, transform;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bounce animazione per il check finale */
@keyframes bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Slide Up (per la Nav Bar quando si clicca Inizia) */
@keyframes slide-up {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* Utility generica per nascondere elementi (usata da JS) */
.hidden {
    display: none !important;
}

/* List items animation */
.space-y-2 > div,
.space-y-3 > div,
.space-y-4 > div {
    animation: slideInFromLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.space-y-2 > div:nth-child(1) { animation-delay: 0.05s; }
.space-y-2 > div:nth-child(2) { animation-delay: 0.1s; }
.space-y-2 > div:nth-child(3) { animation-delay: 0.15s; }
.space-y-2 > div:nth-child(4) { animation-delay: 0.2s; }
.space-y-2 > div:nth-child(5) { animation-delay: 0.25s; }
.space-y-2 > div:nth-child(6) { animation-delay: 0.3s; }
.space-y-2 > div:nth-child(7) { animation-delay: 0.35s; }
.space-y-2 > div:nth-child(8) { animation-delay: 0.4s; }
.space-y-2 > div:nth-child(9) { animation-delay: 0.45s; }
.space-y-2 > div:nth-child(10) { animation-delay: 0.5s; }

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Trade card hover effects */
.group.flex.items-center.justify-between {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.group.flex.items-center.justify-between:hover {
    transform: translateX(4px);
    box-shadow: -4px 0 0 0 var(--accent-blue), 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Review Page Specifics */
.kanban-col {
    border-radius: 28px;
    padding: 20px;
    padding-top: 24px;
    /* FIX HOVER CLIPPING */
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 300px;
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.kanban-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.6;
}

.kanban-col-todo {
    background: linear-gradient(135deg, var(--col-todo-bg) 0%, rgba(255, 59, 48, 0.02) 100%);
}

.kanban-col-todo::before {
    background: linear-gradient(90deg, transparent, var(--accent-red), transparent);
}

.kanban-col-prog {
    background: linear-gradient(135deg, var(--col-prog-bg) 0%, rgba(10, 132, 255, 0.02) 100%);
}

.kanban-col-prog::before {
    background: linear-gradient(90deg, transparent, var(--accent-blue), transparent);
}

.kanban-col-done {
    background: linear-gradient(135deg, var(--col-done-bg) 0%, rgba(48, 209, 88, 0.02) 100%);
}

.kanban-col-done::before {
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
}

.review-hero-card {
    background: var(--bg-card);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.review-hero-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(10, 132, 255, 0.5);
    transform: translateY(-2px);
}

.review-quote {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.review-meta-pill {
    background: rgba(255, 255, 255, 0.05);
    padding: 0 12px;
    height: 28px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ToDo Column Styles */
.todo-col {
    min-height: 500px;
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(28, 28, 30, 0.95) 100%);
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    /* Avoid cutoff at bottom */
}

/* Scroll container padding for shadows */
.todo-scroll-container {
    padding: 10px;
}

/* Stats Card (Journal) */
.stat-box {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(28, 28, 30, 0.9) 100%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    animation: statBoxFadeIn 0.5s ease-out backwards;
    position: relative;
    overflow: visible;
}

.stat-box:nth-child(1) { animation-delay: 0.1s; }
.stat-box:nth-child(2) { animation-delay: 0.2s; }
.stat-box:nth-child(3) { animation-delay: 0.3s; }
.stat-box:nth-child(4) { animation-delay: 0.4s; }

.stat-box:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Stessa entrata dei .stat-box, riusabile su blocchi che non lo sono
   (le card della home usano .card-apple). */
.stat-enter { animation: statBoxFadeIn 0.5s ease-out backwards; }
.stat-enter:nth-child(1) { animation-delay: 0.1s; }
.stat-enter:nth-child(2) { animation-delay: 0.2s; }
.stat-enter:nth-child(3) { animation-delay: 0.3s; }
.stat-enter:nth-child(4) { animation-delay: 0.4s; }
.stat-enter:nth-child(5) { animation-delay: 0.5s; }
.stat-enter:nth-child(6) { animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
    .stat-enter { animation: none; }
}

/* Calendario delle revisioni: largo quanto il resto della pagina. Le celle non
   sono più quadrate — a tutta larghezza diventerebbero quadrati da 215px — ma
   hanno altezza fissa, come quelle del calendario del Journal. */
.rev-cal { width: 100%; }

@keyframes statBoxFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Calendar Styles */
.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    will-change: transform;
}

.calendar-day:hover {
    background: linear-gradient(135deg, var(--cal-hover) 0%, rgba(255, 255, 255, 0.05) 100%);
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.calendar-day.today {
    background: linear-gradient(135deg, var(--accent-blue) 0%, rgba(10, 132, 255, 0.8) 100%);
    border: none;
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3),
                0 4px 16px rgba(10, 132, 255, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: pulse 2s infinite;
}

.calendar-day.selected {
    background-color: var(--accent-blue);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.4);
}

.cal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 2px;
    animation: dotPulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(10, 132, 255, 0); }
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* Language Toggle Buttons */
.lang-btn {
    min-width: 36px;
    min-height: 28px;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    color: var(--text-muted);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
}

.lang-btn.active {
    color: white;
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.lang-btn:hover:not(.active) {
    color: var(--text-main);
    background: var(--input-bg);
}

/* ============================================
   MOBILE OPTIMIZATIONS - RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {

    /* === GLOBAL MOBILE IMPROVEMENTS === */

    /* Main content padding reduction */
    #main-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 5rem !important;
        padding-bottom: 10rem !important;
    }

    /* Typography scaling */
    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    /* === HEADER === */
    header {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    header .glass {
        padding: 0.5rem 0.75rem !important;
    }

    header h1 {
        font-size: 0.875rem !important;
    }

    header .w-8.h-8 {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    /* === BOTTOM NAVIGATION === */
    .dock-icon {
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                    color 0.3s ease,
                    background 0.4s ease,
                    box-shadow 0.4s ease !important;
    }
    nav.fixed.bottom-8 {
        bottom: 1rem !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .dock-container {
        padding: 0.375rem !important;
        gap: 0.25rem !important;
    }

    .dock-icon {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }

    .dock-icon i {
        font-size: 1.25rem !important;
        transition: color 0.3s ease, transform 0.3s ease;
    }

    /* Draft button */
    #draft-alert {
        width: 2.75rem !important;
        height: 2.75rem !important;
    }

    /* === MODALS === */
    .modal-clean {
        max-width: 100% !important;
        margin: 0.5rem !important;
        max-height: 95vh !important;
    }

    /* Modal Trade */
    #modal-trade .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #modal-trade .p-6,
    #modal-trade .md\:p-8 {
        padding: 1rem !important;
    }

    /* Stack form columns on mobile */
    #trade-form.grid.md\:grid-cols-12 {
        grid-template-columns: 1fr !important;
    }

    #trade-form .md\:col-span-8,
    #trade-form .md\:col-span-4 {
        grid-column: span 1 !important;
    }

    /* Make buttons full width on mobile */
    #modal-trade .flex.justify-end {
        flex-direction: column !important;
    }

    #modal-trade .flex.justify-end button {
        width: 100% !important;
    }

    /* Modal Review */
    #modal-review .p-8 {
        padding: 1rem !important;
    }

    #modal-review .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Modal Todo */
    #modal-todo .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Modal Account */
    #modal-account .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* === CARDS === */
    .card-apple {
        border-radius: 1rem !important;
    }

    .card-apple:hover {
        transform: scale(1.01) !important;
    }

    /* === DASHBOARD === */

    /* Header section compatto */
    .flex.flex-col.md\:flex-row.justify-between.items-start.md\:items-end {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    /* Stats grid compatto */
    .grid.grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* Chart takes full width */
    .grid.grid-cols-1.md\:grid-cols-4 .md\:col-span-3 {
        grid-column: span 2 !important;
    }

    /* Calendar takes full width */
    .grid.grid-cols-1.md\:grid-cols-4>div:last-child {
        grid-column: span 2 !important;
    }

    /* Account pills compatti */
    .account-pill {
        font-size: 0.6875rem !important;
        padding: 0.3125rem 0.625rem !important;
    }

    /* Migliora scroll orizzontale per contenuti larghi */
    .overflow-x-auto {
        scroll-snap-type: x proximity;
        scroll-padding: 0 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    .overflow-x-auto::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    .overflow-x-auto > * {
        scroll-snap-align: start;
    }

    /* Cards più compatte su mobile */
    .card-apple {
        border-radius: 12px !important;
        padding: 0.75rem !important;
    }

    /* Riduce padding interno delle cards */
    .card-apple .p-6,
    .card-apple .p-8 {
        padding: 0.75rem !important;
    }
    
    /* Icone e testi cards più piccoli */
    .card-apple h3 {
        font-size: 0.9375rem !important;
    }
    
    .card-apple p {
        font-size: 0.6875rem !important;
    }
    
    .card-apple .w-12.h-12 {
        width: 40px !important;
        height: 40px !important;
    }
    
    .card-apple i {
        font-size: 20px !important;
    }

    /* Migliora leggibilità testo piccolo */
    .text-xs {
        font-size: 0.75rem !important;
        line-height: 1.125rem !important;
    }

    .text-sm {
        font-size: 0.8125rem !important;
        line-height: 1.25rem !important;
    }

    /* === JOURNAL === */

    /* Stats boxes compatte */
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .stat-box {
        padding: 0.625rem !important;
    }
    
    .stat-box p:first-child {
        font-size: 8px !important;
        margin-bottom: 0.2rem !important;
    }
    
    .stat-box p:last-child {
        font-size: 1.125rem !important;
    }

    /* Filters stack vertically */
    .flex.flex-wrap.gap-3 {
        flex-direction: column !important;
        width: 100% !important;
    }

    .flex.flex-wrap.gap-3 select,
    .flex.flex-wrap.gap-3 button {
        width: 100% !important;
    }

    /* Trade list items */
    .group.flex.items-center.justify-between.p-4 {
        padding: 0.75rem !important;
    }

    /* Always show edit/delete buttons on mobile (no hover) */
    .group-hover\:opacity-100 {
        opacity: 100 !important;
    }

    /* === REVIEW (KANBAN) === */

    /* Kanban columns narrower and full-viewport width */
    .kanban-col {
        min-width: 85vw !important;
        max-width: 85vw !important;
        padding: 0.75rem !important;
    }

    /* Review cards compatte */
    .review-hero-card {
        padding: 0.75rem !important;
    }

    /* Toggle buttons compatti */
    .flex.p-1.rounded-2xl button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.6875rem !important;
    }

    /* === TODO === */

    /* Weekly goals compatti */
    .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    /* Todo columns compatte */
    .todo-col {
        min-width: 82vw !important;
        width: 82vw !important;
        padding: 0.625rem !important;
    }

    /* Todo scroll container compatto */
    .todo-scroll-container {
        padding: 0.375rem !important;
    }

    /* === NEWS === */

    /* News grid - 1 column */
    .grid.grid-cols-1.md\:grid-cols-3.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    .grid.grid-cols-1.md\:grid-cols-3.lg\:grid-cols-4 .md\:col-span-2,
    .grid.grid-cols-1.md\:grid-cols-3.lg\:grid-cols-4 .lg\:col-span-2 {
        grid-column: span 1 !important;
    }

    .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* === ACCOUNTS === */

    /* Account cards - 1 column */
    .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* === TOUCH TARGETS === */

    /* Trade cards compatte e simmetriche */
    [onclick*="showTradeDetail"] {
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        border-radius: 12px !important;
        min-height: 64px;
        touch-action: pan-y;
    }
    
    /* Asset compatto */
    [onclick*="showTradeDetail"] h4 {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }
    
    /* PnL compatto */
    [onclick*="showTradeDetail"] .text-right p:first-child {
        font-size: 1rem !important;
        font-weight: 700 !important;
    }
    
    /* Nascondo bottoni su mobile, usa long-press */
    [onclick*="showTradeDetail"] .group-hover\:opacity-100 {
        opacity: 0 !important;
        display: none !important;
    }
    
    /* Stat boxes simmetriche e compatte */
    .stat-box {
        padding: 0.625rem !important;
        border-radius: 10px !important;
    }
    
    .stat-box p:first-child {
        font-size: 8px !important;
        margin-bottom: 0.2rem !important;
        letter-spacing: 0.03em;
    }
    
    .stat-box p:last-child {
        font-size: 1.125rem !important;
        line-height: 1.2;
    }
    
    /* Cards grid simmetrico */
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    /* === DASHBOARD MOBILE === */
    
    /* Chart containers compatti */
    .grid.grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    /* Chart canvas compatto */
    canvas {
        max-height: 240px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Stats cards scroll compatto */
    .grid.grid-cols-2.md\:grid-cols-4.gap-4 {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 0.5rem !important;
        padding-bottom: 0.375rem;
    }
    
    .grid.grid-cols-2.md\:grid-cols-4.gap-4 > div {
        min-width: 130px !important;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    
    /* Cards compatte e simmetriche */
    .card-apple {
        padding: 0.75rem !important;
        border-radius: 12px !important;
    }
    
    .card-apple h3 {
        font-size: 0.9375rem !important;
        line-height: 1.25;
    }
    
    .card-apple p {
        font-size: 0.6875rem !important;
        line-height: 1.2;
    }
    
    /* Icone cards più piccole */
    .card-apple .w-12.h-12 {
        width: 40px !important;
        height: 40px !important;
    }
    
    .card-apple i {
        font-size: 20px !important;
    }
    
    /* Chart titles compatti */
    .bg-\[var\(--bg-card\)\] h3 {
        font-size: 0.9375rem !important;
        padding: 0.75rem !important;
    }

    /* === CALENDAR === */

    .calendar-day {
        min-height: 40px;
        font-size: 0.6875rem !important;
        padding: 0.25rem !important;
    }

    /* === FORM INPUTS === */

    /* Già definiti sopra - rimosso duplicato */

    /* === TYPOGRAPHY - Compatta === */

    /* Padding generale ridotto */
    #main-content {
        padding: 0.75rem !important;
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }

    /* Titoli più piccoli */
    .text-4xl {
        font-size: 1.625rem !important;
        line-height: 2rem !important;
    }

    .text-3xl {
        font-size: 1.375rem !important;
        line-height: 1.75rem !important;
    }

    .text-2xl {
        font-size: 1.125rem !important;
        line-height: 1.5rem !important;
    }
    
    .text-xl {
        font-size: 1rem !important;
        line-height: 1.375rem !important;
    }
    
    .text-lg {
        font-size: 0.9375rem !important;
        line-height: 1.25rem !important;
    }

    .text-5xl {
        font-size: 2rem !important;
        line-height: 2.5rem !important;
    }

    /* === UTILITIES === */

    /* Reduce gaps and spacing */
    .gap-8 {
        gap: 1rem !important;
    }

    .gap-6 {
        gap: 0.75rem !important;
    }

    .gap-4 {
        gap: 0.5rem !important;
    }

    /* Padding utilities */
    .p-6 {
        padding: 1rem !important;
    }

    .p-8 {
        padding: 1rem !important;
    }

    /* === SPECIFIC FIXES === */

    /* Day modal */
    #day-modal-content {
        max-height: 70vh !important;
    }

    /* Image gallery in trade modal */
    #drop-zone {
        aspect-ratio: 4/3 !important;
    }

    /* Toast notification */
    #toast {
        bottom: 6rem !important;
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
    }
}

/* Extra small devices (iPhone SE, etc.) */
@media (max-width: 375px) {
    #main-content {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .dock-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .dock-icon i {
        font-size: 1.125rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    .kanban-col,
    .todo-col {
        min-width: 90vw !important;
        width: 90vw !important;
    }

    /* Even smaller text */
    .text-4xl {
        font-size: 1.5rem !important;
    }

    .text-3xl {
        font-size: 1.25rem !important;
    }
}

/* =========================================
   TABLET & IPAD OPTIMIZATIONS (768px - 1024px)
   ========================================= */

/* Touch Targets - iOS Human Interface Guidelines */
button,
a[role="button"],
.dock-icon,
input[type="checkbox"],
input[type="radio"] {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
}

/* Utility classes for responsive display */
.hidden-mobile {
    display: initial;
}

.hidden-tablet {
    display: initial;
}

.hidden-desktop {
    display: none;
}

@media (max-width: 767px) {
    .hidden-mobile {
        display: none !important;
    }
    .show-mobile {
        display: initial !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hidden-tablet {
        display: none !important;
    }
    .show-tablet {
        display: initial !important;
    }
}

@media (min-width: 1025px) {
    .hidden-desktop {
        display: none !important;
    }
    .show-desktop {
        display: initial !important;
    }
}

/* Tablet Portrait & Landscape (iPad specific) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Grid adjustments */
    .grid.grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .todo-col {
        min-width: 280px !important;
    }
    
    /* Larger touch targets for tablet */
    button:not(.time-filter-pill):not(.account-pill) {
        min-height: 48px !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    
    /* Make primary action buttons more prominent */
    button.bg-\[var\(--accent-blue\)\],
    button[onclick*="openNewTradeModal"],
    button[onclick*="openModal"] {
        min-height: 52px !important;
        padding: 0.875rem 1.75rem !important;
        font-size: 1rem !important;
        border-radius: 1rem !important;
    }
    
    /* Improve dock icons size for tablet */
    .dock-icon {
        width: 56px !important;
        height: 56px !important;
    }
    
    .dock-icon i {
        font-size: 28px !important;
    }
    
    /* Larger header profile widget on tablet */
    #header-profile {
        padding: 0.625rem 1rem !important;
    }
    
    #header-profile .w-8.h-8 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    /* Better spacing for nav items */
    .dock-container {
        gap: 0.75rem !important;
        padding: 0.75rem !important;
    }
    
    /* Modal optimization for tablet */
    .modal-clean {
        max-width: 90vw !important;
        max-height: 85vh !important;
    }
    
    /* Improve form inputs touch targets */
    input,
    select,
    textarea {
        min-height: 48px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.875rem 1rem !important;
    }
    
    /* Calendar widget sizing */
    .calendar-day {
        min-height: 44px !important;
        min-width: 44px !important;
        font-size: 0.9rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Calendar month/year navigation */
    #calendar-widget button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    /* Todo items larger touch targets */
    .todo-item,
    [draggable="true"] {
        min-height: 52px !important;
        padding: 0.875rem 1rem !important;
    }
    
    /* Account modal improvements */
    #modal-account button,
    #modal-account input,
    #modal-account select {
        min-height: 52px !important;
        font-size: 16px !important;
    }
    
    /* Radio/checkbox labels larger */
    label:has(input[type="radio"]),
    label:has(input[type="checkbox"]) {
        min-height: 48px !important;
        padding: 0.75rem !important;
    }
    
    /* Settings page cards no hover */
    .settings-no-hover {
        transform: none !important;
    }
    
    /* Select dropdowns better sized */
    select {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="%23666"><path d="M4 6l4 4 4-4z"/></svg>') !important;
        background-repeat: no-repeat !important;
        background-position: right 0.75rem center !important;
        padding-right: 2.5rem !important;
    }
    
    /* Time filter pills larger */
    .time-filter-pill,
    .account-pill {
        min-height: 44px !important;
        padding: 0.75rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Stats scrolling improvements */
    #stats-grid {
        gap: 1rem !important;
        padding: 0.75rem 0 !important;
    }
    
    .stat-box {
        min-width: 45% !important;
        scroll-snap-align: start !important;
        padding: 1.25rem !important;
    }
    
    /* Card hover effects adjusted for tablet touch */
    .card-apple:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
}

/* iPad Portrait Specific (768px) */
@media (width: 768px) and (orientation: portrait) {
    /* Single column layouts */
    .grid.grid-cols-1.lg\:grid-cols-2,
    .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Larger text for better readability */
    body {
        font-size: 16px !important;
    }
    
    h2, h3 {
        font-size: 1.5rem !important;
    }
}

/* iPad Landscape Specific (1024px) */
@media (width: 1024px) and (orientation: landscape) {
    /* Two column layouts work well */
    .grid.grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Three columns for stats */
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Mobile landscape optimizations */
@media (max-height: 500px) and (orientation: landscape) {
    #main-content {
        padding-top: 3.5rem !important;
        padding-bottom: 6rem !important;
    }

    nav.fixed.bottom-8 {
        bottom: 0.5rem !important;
    }

    .dock-container {
        padding: 0.25rem !important;
    }

    .dock-icon {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }

    .dock-icon i {
        font-size: 1rem !important;
    }

    header .glass {
        padding: 0.375rem 0.5rem !important;
    }

    /* Riduce altezza header in landscape */
    header .w-8.h-8 {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    header h1 {
        font-size: 0.75rem !important;
    }

    /* Modali più compatte in landscape */
    .modal-clean {
        max-height: 90vh !important;
    }
}

/* iOS Safe Area Support */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    header {
        padding-top: calc(env(safe-area-inset-top) + 0.75rem) !important;
    }

    nav.fixed.bottom-8 {
        padding-bottom: calc(env(safe-area-inset-bottom) + 1rem) !important;
    }

    @media (max-width: 767px) {
        #main-content {
            padding-top: calc(env(safe-area-inset-top) + 5rem) !important;
            padding-bottom: calc(env(safe-area-inset-bottom) + 10rem) !important;
        }
    }
    
    /* iPad specific safe area adjustments */
    @media (min-width: 768px) and (max-width: 1024px) {
        #main-content {
            padding-top: calc(env(safe-area-inset-top) + 6rem) !important;
            padding-bottom: calc(env(safe-area-inset-bottom) + 8rem) !important;
        }
    }
}

/* Keyboard visible adjustments for iPad */
@media (min-width: 768px) and (max-width: 1024px) {
    /* When keyboard is visible, modals should be scrollable */
    .modal-clean {
        position: fixed !important;
        top: 5vh !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    
    /* Form inputs should scroll into view when focused */
    input:focus,
    textarea:focus,
    select:focus {
        scroll-margin-top: 100px;
        scroll-margin-bottom: 100px;
    }
}

/* Migliora scroll momentum su iOS */
#main-content {
    overflow-x: hidden !important;
}

#main-content,
.custom-scrollbar,
.overflow-y-auto,
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

/* Electron: rende l'header la drag region per spostare la finestra */
header {
    -webkit-app-region: drag;
    animation: slideDownHeader 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards;
}

/* Tutti gli elementi interattivi nell'header NON devono essere drag */
header button,
header a,
header [onclick],
header #header-profile,
header #theme-toggle,
header .pointer-events-auto {
    -webkit-app-region: no-drag;
}

@keyframes slideDownHeader {
    from {
        transform: translateY(-100%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Welcome screen animations */
#welcome-screen h1 {
    animation: fadeInScale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}

#welcome-screen button {
    animation: fadeInScale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s backwards;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#welcome-screen button:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(10, 132, 255, 0.3);
}

#welcome-screen button:active {
    transform: scale(0.97);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* === PLAYBOOK STYLES === */

/* Full page layout */
/* La vecchia pagina Playbook è stata sostituita dalle carte .pb-*.
   Resta .playbook-rule-item, usata dal modal di dettaglio del setup. */

@keyframes pb-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rule items entrance */
.playbook-rule-item {
    animation: pb-fade-in 0.3s ease-out backwards;
}
.playbook-rule-item:nth-child(1) { animation-delay: 0.03s; }
.playbook-rule-item:nth-child(2) { animation-delay: 0.06s; }
.playbook-rule-item:nth-child(3) { animation-delay: 0.09s; }
.playbook-rule-item:nth-child(4) { animation-delay: 0.12s; }
.playbook-rule-item:nth-child(5) { animation-delay: 0.15s; }


/* Loading spinner animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 0.8s linear infinite;
}

/* Shimmer loading effect */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--input-bg) 25%, var(--input-focus) 50%, var(--input-bg) 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* Ottimizzazioni specifiche per gesti touch */
button,
a,
.dock-icon,
.card-apple {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Touch device detection - disable hover effects on touch-only devices */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch-only devices */
    button:hover,
    .card-apple:hover,
    .dock-icon:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    /* Use active states instead */
    button:active,
    .card-apple:active,
    .dock-icon:active {
        transform: scale(0.985) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Remove icon hover animations on touch */
    button:hover i {
        transform: none !important;
        animation: none !important;
    }
}

/* Devices with hover support (desktop and iPad with pointer) */
@media (hover: hover) and (pointer: fine) {
    /* Nessuna ombra diffusa in hover: la profondita' la da' il sistema bottoni */
    button:hover {
        box-shadow: none;
    }
    
    .card-apple:hover {
        transform: translateY(-2px); /* OK su card non-interattive */
    }
}

/* Migliora performance animazioni su mobile */
@media (max-width: 767px) {
    .card-apple,
    .dock-icon,
    button {
        will-change: transform;
    }

    /* Riduce complessità animazioni su mobile */
    .card-apple:hover {
        transform: scale(1.01);
    }

    /* Effetto touch feedback */
    button:active,
    .dock-icon:active {
        transform: scale(0.985);
        transition: transform 0.1s ease;
    }
}

/* =========================================
   REVIEW MODAL IMPROVEMENTS
   ========================================= */

/* Review Modal Container */
#modal-review {
    animation: slideInUp 0.25s ease-out;
}

@keyframes slideInUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Review modal responsive improvements */
@media (min-width: 768px) and (max-width: 1024px) {
    #modal-review .bg-\[var\(--bg-card\)\] {
        max-width: 95vw !important;
        max-height: 90vh !important;
    }
    
    /* Ensure form sections don't overlap */
    #modal-review .grid.grid-cols-1.gap-4 > div {
        margin-bottom: 0.5rem;
    }
    
    /* Better textarea sizing on tablet */
    #modal-review textarea {
        min-height: 120px !important;
        font-size: 16px !important;
    }
    
    /* Date input larger touch target */
    #modal-review input[type="date"] {
        min-height: 52px !important;
        font-size: 16px !important;
        padding: 0.875rem 1rem !important;
    }
    
    /* Type selector buttons larger */
    #modal-review button[id^="btn-"] {
        min-height: 52px !important;
        font-size: 1rem !important;
    }
}

/* Todo modal responsive improvements */
@media (min-width: 768px) and (max-width: 1024px) {
    #modal-todo #todo-content,
    #modal-edit-todo .bg-\[var\(--bg-card\)\],
    #modal-edit-weekly-goal .bg-\[var\(--bg-card\)\] {
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    /* Better form inputs */
    #modal-todo input,
    #modal-todo select,
    #modal-edit-todo input,
    #modal-edit-todo select,
    #modal-edit-weekly-goal input {
        min-height: 52px !important;
        font-size: 16px !important;
        padding: 0.875rem 1rem !important;
    }
    
    /* Tab buttons larger */
    #modal-todo button[id^="tab-"] {
        min-height: 52px !important;
        font-size: 0.875rem !important;
        padding: 0.875rem 1rem !important;
    }
    
    /* Category buttons larger */
    #modal-todo .type-btn {
        min-height: 64px !important;
        padding: 0.875rem !important;
    }
    
    /* Submit buttons */
    #modal-todo button[type="submit"],
    #modal-edit-todo button[type="submit"],
    #modal-edit-weekly-goal button[type="submit"] {
        min-height: 56px !important;
        font-size: 1rem !important;
        padding: 1rem !important;
    }
}

@media (max-width: 767px) {
    #modal-review .bg-\[var\(--bg-card\)\] {
        max-width: 100vw !important;
        max-height: 95vh !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
    }
    
    /* Stack everything vertically on mobile */
    #modal-review .grid {
        grid-template-columns: 1fr !important;
    }
}

/* Todo modal mobile improvements */
@media (max-width: 767px) {
    #modal-todo #todo-content,
    #modal-edit-todo .bg-\[var\(--bg-card\)\],
    #modal-edit-weekly-goal .bg-\[var\(--bg-card\)\] {
        max-width: 100vw !important;
        max-height: 95vh !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
        padding: 1.5rem !important;
    }
    
    /* Stack grids vertically */
    #modal-todo .grid,
    #modal-edit-todo .grid {
        grid-template-columns: 1fr !important;
    }
}

/* Textarea focus states */
textarea:focus,
input:focus {
    background-color: var(--input-focus);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--accent-blue);
    opacity: 1;
}

/* Review Modal Scrollbar */
#modal-review .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

#modal-review .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

#modal-review .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

#modal-review .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* =========================================
   PERFORMANCE E ACCESSIBILITÀ MOBILE
   ========================================= */

/* Riduce animazioni per utenti con preferenze reduced-motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .card-apple:hover {
        transform: none !important;
    }
}

/* Enhanced Focus States for Accessibility */
*:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

button:focus-visible,
.dock-icon:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.2);
}

/* =========================================
   DASHBOARD & CHARTS MOBILE OPTIMIZATION
   ========================================= */

/* Trade Modal responsive improvements */
@media (min-width: 768px) and (max-width: 1024px) {
    #modal-trade .bg-\[var\(--bg-card\)\] {
        max-width: 95vw !important;
        max-height: 90vh !important;
    }
    
    /* Better form inputs */
    #modal-trade input,
    #modal-trade select,
    #modal-trade textarea {
        min-height: 52px !important;
        font-size: 16px !important;
        padding: 0.875rem 1rem !important;
    }
    
    /* Action buttons larger */
    #modal-trade button[type="button"],
    #modal-trade button[onclick*="saveTrade"] {
        min-height: 52px !important;
        font-size: 1rem !important;
        padding: 0.875rem 1.5rem !important;
    }
    
    /* Grid adjustments for trade details */
    #modal-trade .grid.grid-cols-1.md\:grid-cols-2,
    #modal-trade .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Direction buttons larger */
    #modal-trade label:has(input[name="direction_radio"]) > div {
        min-height: 52px !important;
        padding: 0.875rem 1.25rem !important;
    }
    
    /* P&L input larger */
    #modal-trade input#t-pnl {
        font-size: 2.5rem !important;
    }
    
    /* Account selection items */
    #modal-trade label:has(input[name="t-accounts"]) {
        min-height: 56px !important;
        padding: 0.875rem 1rem !important;
    }
}

/* Journal page - New Trade button improvements */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Make "Nuovo Trade" buttons more prominent on tablet
       (#cmd-new-trade e' escluso: usa il componente .cmd-btn) */
    button[onclick*="openNewTradeModal"]:not(.cmd-btn) {
        min-height: 52px !important;
        min-width: 52px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    button[onclick*="openNewTradeModal"]:not(.cmd-btn) i {
        font-size: 1.5rem !important;
    }
    
    /* Ensure sync button is also large enough */
    button[onclick*="syncBrokerTrades"] {
        min-height: 52px !important;
        min-width: 52px !important;
        padding: 0.875rem !important;
    }
}

@media (max-width: 767px) {
    /* Dashboard layout single column */
    .grid.grid-cols-1.lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Chart containers responsive */
    canvas {
        max-height: 280px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Stats cards horizontal scroll con snap */
    .grid.grid-cols-2.md\\:grid-cols-4 {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 0.75rem !important;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .grid.grid-cols-2.md\\:grid-cols-4::-webkit-scrollbar {
        display: none;
    }
    
    .grid.grid-cols-2.md\\:grid-cols-4 > div {
        min-width: 45% !important;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    
    /* All buttons have minimum touch target */
    button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* All inputs prevent zoom */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
    
    /* Performance indicators - usa classe generica senza escape */
    .bg-card {
        contain: layout style paint;
    }
    
    /* GPU acceleration per scroll fluido */
    .overflow-y-auto {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    /* Riduce blur pesanti per performance */
    .backdrop-blur-2xl {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    .backdrop-blur-xl {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
    
    /* Ottimizza ombre */
    .shadow-2xl {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
    }
    
    .shadow-xl {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* GPU acceleration elementi interattivi */
    .dock-icon,
    button {
        will-change: transform;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
    }
    
    /* Content visibility per lazy loading */
    img {
        content-visibility: auto;
    }
    
    /* Contiene layout reflows */
    .stat-box {
        contain: layout style paint;
    }
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15),
                0 4px 12px -4px rgba(10, 132, 255, 0.25);
}

/* Skeleton Loading States */
.skeleton-card {
    background: linear-gradient(
        90deg,
        var(--input-bg) 25%,
        var(--input-focus) 50%,
        var(--input-bg) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 20px;
}

.skeleton-text {
    height: 1em;
    background: linear-gradient(
        90deg,
        var(--input-bg) 25%,
        var(--input-focus) 50%,
        var(--input-bg) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

.skeleton-circle {
    background: linear-gradient(
        90deg,
        var(--input-bg) 25%,
        var(--input-focus) 50%,
        var(--input-bg) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 50%;
}

/* Kbd styling for keyboard shortcuts */
kbd {
    display: inline-block;
    padding: 3px 8px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
    font-weight: 600;
}

/* Scroll Progress Bar Styles */
#scroll-progress {
    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    height: 3px;
    box-shadow: 0 0 10px rgba(10, 132, 255, 0.5);
}

/* Improved Empty States */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.5;
    animation: float 3s ease-in-out infinite;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Success Toast Enhancements */
#toast {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#toast.show {
    animation: toastSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toastSlideUp {
    from {
        transform: translate(-50%, 20px);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* Light mode enhancements for new features */
[data-theme="light"] kbd {
    background: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .skeleton-card,
[data-theme="light"] .skeleton-text,
[data-theme="light"] .skeleton-circle {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 25%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 75%
    );
    background-size: 200% 100%;
}

/* Interactive elements hover glow */
.card-apple,
button,
.dock-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Performance hints per il browser */
.card-apple,
.dock-icon,
.modal-clean,
button {
    contain: layout style paint;
}

/* Ottimizzazione rendering immagini su mobile */
@media (max-width: 768px) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Loading states più evidenti su mobile */
@media (max-width: 768px) {
    .loading,
    [data-loading="true"] {
        position: relative;
        pointer-events: none;
        opacity: 0.6;
    }

    .loading::after,
    [data-loading="true"]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin: -12px 0 0 -12px;
        border: 3px solid var(--glass-border);
        border-top-color: var(--accent-blue);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }
}

/* Migliora contrasto per luce solare */
@media (max-width: 768px) and (prefers-contrast: high) {
    .glass {
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
    }

    .text-muted,
    [class*="text-gray"] {
        opacity: 1;
        font-weight: 500;
    }
}

/* Pull-to-refresh ottimizzato */
@media (max-width: 768px) {
    #main-content {
        overscroll-behavior-y: contain;
    }
}

/* Focus visibile per accessibilità tastiera su mobile */
@media (max-width: 768px) {
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 3px solid var(--accent-blue);
        outline-offset: 2px;
    }
}

/* =========================================
   MICRO-INTERACTIONS & ICON ANIMATIONS
   ========================================= */

/* Icons rotation on hover */
i.ph-gear,
i.ph-gear-six {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button:hover i.ph-gear,
button:hover i.ph-gear-six {
    transform: rotate(90deg);
}

/* Arrow bounce animation */
i.ph-arrow-right,
i.ph-caret-right {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button:hover i.ph-arrow-right,
a:hover i.ph-caret-right {
    animation: bounceRight 0.6s ease-in-out infinite;
}

@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

/* Plus icon rotation */
i.ph-plus {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button:hover i.ph-plus {
    transform: rotate(90deg) scale(1.1);
}

/* Trash icon shake on hover */
i.ph-trash {
    transition: transform 0.3s ease;
}

button:hover i.ph-trash {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px) rotate(-5deg); }
    75% { transform: translateX(4px) rotate(5deg); }
}

/* Heart beat animation */
i.ph-heart,
i.ph-heart-fill {
    transition: transform 0.3s ease;
}

button:hover i.ph-heart,
button:hover i.ph-heart-fill {
    animation: heartBeat 0.6s ease-in-out;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1.1); }
}

/* Check icon scale */
i.ph-check,
i.ph-check-circle {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

button:hover i.ph-check,
button:hover i.ph-check-circle {
    transform: scale(1.3);
    filter: drop-shadow(0 0 8px var(--accent-green));
}

/* Eye icon blink */
i.ph-eye {
    animation: blink 3s infinite;
}

@keyframes blink {
    0%, 96%, 100% { opacity: 1; }
    98% { opacity: 0.3; }
}

/* Floating animation for badges/notifications */
.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Glow effect */
.glow {
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px currentColor; }
    50% { box-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
}

/* Success animation */
@keyframes successPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.success-pop {
    animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Notification badge pulse */
.badge-pulse {
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
}
/* Drag & Drop Styles */
.todo-day-container {
    transition: all 0.3s ease;
}

.todo-day-container.drag-over {
    background-color: rgba(10, 132, 255, 0.1) !important;
    border-color: var(--accent-blue) !important;
    border-width: 2px !important;
    border-style: dashed !important;
}

[draggable="true"] {
    cursor: move !important;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

[draggable="true"]:active {
    cursor: grabbing !important;
}

[draggable="true"].dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

/* Achievement Popup Animations */
.animate-fade-in {
    animation: fadeIn 0.2s ease-out;
}

.animate-fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(0.95);
    }
    to {
        opacity: 0;
        transform: scale(1); /* Optional: slight scale out or just stay */
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Force fade animations on modal overlay */
#modal-overlay.animate-fade-in {
    animation: fadeIn 0.2s ease-out;
}

#modal-overlay.animate-fade-out {
    animation: fadeOut 0.2s ease-out forwards;
}

/* Remove focus effects from account selection checkboxes */
input[name="t-accounts"]:focus,
input[name="t-accounts"]:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    background: transparent !important;
    border-color: transparent !important;
}

label:has(input[name="t-accounts"]):focus,
label:has(input[name="t-accounts"]):focus-visible,
label:has(input[name="t-accounts"]):focus-within {
    outline: none !important;
    box-shadow: none !important;
}

/* Disable all hover effects for settings cards - CLEAN VERSION */
.settings-no-hover {
    transition: none !important;
    transform: none !important;
    backface-visibility: hidden;
}

.settings-no-hover:hover,
.settings-no-hover:focus,
.settings-no-hover:active {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    background-image: none !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    z-index: auto !important;
    border-color: rgba(255, 255, 255, 0.05) !important; /* Force keep existing border */
}

/* Light mode manual override because we can't trust existing classes in this specific context */
[data-theme="light"] .settings-no-hover:hover {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border-color: rgba(0, 0, 0, 0.1) !important; /* Match light mode border */
}

/* Prevent pseudoelement overlays */
.settings-no-hover:hover::before,
.settings-no-hover:hover::after {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
}

/* Specific overrides for common tailwind interactions */
div.settings-no-hover:hover {
    transform: none !important;
}


/* Navigation Toggle Animation */
nav {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease-out !important;
}

.nav-hidden-mode {
    transform: translateY(200%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ========================================
   FIX TOUCH EVENTS IPAD/IOS
   ======================================== */

/* Garantisce che tutti gli elementi con onclick siano cliccabili su iPad */
[onclick] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* Fix per div cliccabili (tipo card) */
div[onclick] {
    pointer-events: auto !important;
    position: relative;
}

/* Fix per elementi con cursor-pointer */
.cursor-pointer {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* Migliora scrolling su contenuti overflow */
.overflow-y-auto,
.overflow-x-auto,
.overflow-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ==========================================================
   LIGHT MODE — COMPLETE READABILITY FIX
   Fix ALL text, buttons and backgrounds invisible in light mode
   ========================================================== */

/* --- Gray text (designed for dark mode, invisible on white) --- */
[data-theme="light"] .text-gray-300 {
    color: #555555 !important;
}
[data-theme="light"] .text-gray-400 {
    color: #4B5563 !important;
}
[data-theme="light"] .text-gray-500 {
    color: #374151 !important;
}
[data-theme="light"] .text-gray-600 {
    color: #1F2937 !important;
}

/* --- Subtle tinted icon containers (near-invisible on white) --- */
[data-theme="light"] .bg-gray-500\/10 {
    background-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .bg-gray-500\/20 {
    background-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .bg-blue-500\/10 {
    background-color: rgba(0, 122, 255, 0.1) !important;
}
[data-theme="light"] .bg-green-500\/10 {
    background-color: rgba(52, 199, 89, 0.1) !important;
}
[data-theme="light"] .bg-red-500\/10 {
    background-color: rgba(255, 59, 48, 0.08) !important;
}
[data-theme="light"] .bg-purple-500\/10 {
    background-color: rgba(175, 82, 222, 0.08) !important;
}
[data-theme="light"] .bg-yellow-500\/10 {
    background-color: rgba(255, 204, 0, 0.12) !important;
}

/* --- Tinted borders (near-invisible on white) --- */
[data-theme="light"] .border-gray-500\/30 {
    border-color: rgba(0, 0, 0, 0.14) !important;
}
[data-theme="light"] .border-blue-500\/20 {
    border-color: rgba(0, 122, 255, 0.28) !important;
}
[data-theme="light"] .border-blue-500\/30 {
    border-color: rgba(0, 122, 255, 0.38) !important;
}
[data-theme="light"] .border-green-500\/30 {
    border-color: rgba(52, 199, 89, 0.4) !important;
}
[data-theme="light"] .border-red-500\/20 {
    border-color: rgba(255, 59, 48, 0.28) !important;
}
[data-theme="light"] .border-red-500\/30 {
    border-color: rgba(255, 59, 48, 0.38) !important;
}
[data-theme="light"] .border-purple-500\/20 {
    border-color: rgba(175, 82, 222, 0.3) !important;
}
[data-theme="light"] .border-yellow-500\/20 {
    border-color: rgba(200, 160, 0, 0.4) !important;
}
[data-theme="light"] .border-yellow-500\/30 {
    border-color: rgba(200, 160, 0, 0.5) !important;
}

/* --- Toggle track: bg-white/10 is invisible on white bg --- */
[data-theme="light"] .bg-white\/10.rounded-full {
    background-color: rgba(0, 0, 0, 0.15) !important;
}

/* --- Todo item dark hover (#2a2a2d) is black-on-white disaster --- */
[data-theme="light"] .hover\:bg-\[\#2a2a2d\]:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

/* --- group-hover:text-white becomes invisible on light backgrounds --- */
[data-theme="light"] .group:hover .group-hover\:text-white {
    color: var(--text-main) !important;
}

/* --- group-hover:bg-white/20 is near-transparent on white --- */
[data-theme="light"] .group:hover .group-hover\:bg-white\/20 {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

/* --- Pipe separator "text-white opacity-20" is invisible on white --- */
[data-theme="light"] .text-white.opacity-20:not(.preserve-white),
[data-theme="light"] .opacity-20.text-white:not(.preserve-white) {
    color: var(--text-muted) !important;
    opacity: 0.4 !important;
}

/* --- Custom scrollbar thumb visible in light mode --- */
[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important;
}
[data-theme="light"] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* --- text-blue-400 on bg-blue-500/10 (sync button etc.) --- */
[data-theme="light"] .bg-blue-500\/10.text-blue-400,
[data-theme="light"] .text-blue-400.bg-blue-500\/10 {
    color: #0055cc !important;
}

/* --- hover:bg-blue-500 state: keep white text on solid blue --- */
[data-theme="light"] .hover\:bg-blue-500:hover {
    color: #ffffff !important;
}
[data-theme="light"] .hover\:bg-red-500:hover {
    color: #ffffff !important;
}
[data-theme="light"] .hover\:bg-purple-500:hover {
    color: #ffffff !important;
}
[data-theme="light"] .hover\:bg-yellow-500:hover {
    color: #1a1a1a !important;
}

/* --- Input color in light mode --- */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    color: var(--text-main) !important;
}

/* --- Fix hardcoded text-white in peer-checked toggles (radio labels) --- */
[data-theme="light"] .peer-checked\:bg-gray-500:checked ~ * {
    color: #ffffff !important;
}

/* ==========================================================
   MODAL LIGHT MODE FIXES (Override global preserve-white where it breaks readability)
   ========================================================== */
[data-theme="light"] select {
    color: var(--text-main) !important;
}

/* Fix specific placeholders in todo/modals that are hardcoded white */
[data-theme="light"] .placeholder-white\/20::placeholder,
[data-theme="light"] .placeholder-white\/30::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.6 !important;
}

/* ==========================================================
   PLAYBOOK PAGE — Premium Layout
   ========================================================== */

/* Full-width page container — no max-width constraint */

@media (min-width: 1400px) {
    .playbook-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

@media (max-width: 640px) {
    .playbook-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Playbook Card */
.playbook-card {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.playbook-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.playbook-card:active {
    transform: translateY(0);
}

/* Card image container */
.playbook-card-image {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    border-bottom: 1px solid var(--glass-border);
}

.playbook-card-image img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.playbook-card:hover .playbook-card-image img {
    transform: scale(1.08);
}

/* Card body */
.playbook-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Entrance animation */
@keyframes playbookCardIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Light theme overrides */
[data-theme="light"] .playbook-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .playbook-card:hover {
    box-shadow: 
        0 20px 50px -12px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(59, 130, 246, 0.2),
        0 0 30px -5px rgba(59, 130, 246, 0.08);
}


/* ==========================================================
   LIGHT MODE — TEXT ON GENUINELY DARK SURFACES (.on-dark)
   The mirror image of the gradient problem above: photo scrims, black
   pills and hover overlays stay dark in both themes, so the light-mode
   rules that darken text made those labels unreadable (dark on dark) —
   e.g. the Market Pulse hero headline, the "HIGH IMPACT" badges and the
   "Cambia" overlay on the profile photo.
   Mark such a container with `on-dark` and its text stays light.
   ========================================================== */
.on-dark {
    color: #ffffff;
}

[data-theme="light"] .on-dark,
[data-theme="light"] .on-dark .preserve-white,
[data-theme="light"] .on-dark .text-white,
[data-theme="light"] .on-dark .hover\:text-white:hover {
    color: #ffffff !important;
}

/* Muted / accent text inside a dark surface keeps its dark-mode value */
[data-theme="light"] .on-dark .text-gray-300 { color: rgba(255, 255, 255, 0.86) !important; }
[data-theme="light"] .on-dark .text-gray-400 { color: rgba(255, 255, 255, 0.72) !important; }
[data-theme="light"] .on-dark .text-gray-500 { color: rgba(255, 255, 255, 0.6) !important; }
[data-theme="light"] .on-dark .text-\[var\(--text-muted\)\] { color: rgba(255, 255, 255, 0.72) !important; }
[data-theme="light"] .on-dark .text-red-400 { color: #f87171 !important; }
[data-theme="light"] .on-dark .text-green-400 { color: #4ade80 !important; }
[data-theme="light"] .on-dark .text-blue-400 { color: #60a5fa !important; }
[data-theme="light"] .on-dark .text-yellow-400,
[data-theme="light"] .on-dark .text-yellow-500 { color: #facc15 !important; }
[data-theme="light"] .on-dark .text-orange-400 { color: #fb923c !important; }
[data-theme="light"] .on-dark .text-purple-400 { color: #c084fc !important; }
[data-theme="light"] .on-dark .text-cyan-400 { color: #22d3ee !important; }

/* ==========================================================
   LIGHT MODE — REMAINING PALE ACCENT TEXT
   Same idea as the .text-*-400 block further up, for the colors and
   variants that were never covered and so stayed pale on white.
   ========================================================== */
[data-theme="light"] .text-cyan-400,
[data-theme="light"] .text-cyan-500,
[data-theme="light"] .text-sky-400,
[data-theme="light"] .text-sky-500 {
    color: #0e7490 !important;
}

[data-theme="light"] .text-teal-400,
[data-theme="light"] .text-teal-500 {
    color: #0f766e !important;
}

[data-theme="light"] .text-rose-400,
[data-theme="light"] .text-rose-500 {
    color: #be123c !important;
}

[data-theme="light"] .text-pink-400,
[data-theme="light"] .text-pink-500 {
    color: #be185d !important;
}

[data-theme="light"] .text-violet-400,
[data-theme="light"] .text-violet-500 {
    color: #6d28d9 !important;
}

[data-theme="light"] .text-amber-400,
[data-theme="light"] .text-amber-500 {
    color: #b45309 !important;
}

[data-theme="light"] .text-lime-400,
[data-theme="light"] .text-lime-500 {
    color: #4d7c0f !important;
}

[data-theme="light"] .text-blue-300 { color: #1d4ed8 !important; }
[data-theme="light"] .text-red-300 { color: #b91c1c !important; }

/* Opacity variants of the pale accents (text-purple-400/70 etc.) */
[data-theme="light"] [class*="text-purple-400/"] { color: #9b45db !important; }
[data-theme="light"] [class*="text-blue-400/"] { color: #0066cc !important; }
[data-theme="light"] [class*="text-green-400/"] { color: #24a148 !important; }
[data-theme="light"] [class*="text-red-400/"] { color: #d9342b !important; }

/* peer-checked / group-hover variants of the same colors */
[data-theme="light"] .peer:checked ~ .peer-checked\:text-green-400,
[data-theme="light"] .peer:checked ~ * .peer-checked\:text-green-400 { color: #24a148 !important; }
[data-theme="light"] .peer:checked ~ .peer-checked\:text-red-400,
[data-theme="light"] .peer:checked ~ * .peer-checked\:text-red-400 { color: #d9342b !important; }
[data-theme="light"] .peer:checked ~ .peer-checked\:text-blue-400,
[data-theme="light"] .peer:checked ~ * .peer-checked\:text-blue-400 { color: #0066cc !important; }

/* Faint decorative separators: `text-white opacity-20` is invisible on white.
   The generic rule above skips .preserve-white, so cover that case too. */
[data-theme="light"] .text-white.opacity-20.preserve-white,
[data-theme="light"] .preserve-white.text-white.opacity-20 {
    color: var(--text-muted) !important;
    opacity: 0.45 !important;
}

/* Today's calendar cell is solid blue in light mode — keep its number white. */
[data-theme="light"] .calendar-day.today,
[data-theme="light"] .calendar-day.today.preserve-white {
    color: #ffffff !important;
}

/* ==========================================================
   REFRESH IN BACKGROUND (.silent-refresh)
   Applicata a #main-content per la durata del ridisegno fatto da
   ui.silentRefresh(). Il contenuto viene sostituito, ma senza animazioni
   di ingresso né transizioni: per l'utente la pagina resta ferma.
   La classe vive pochi millisecondi, quindi spinner e indicatori
   (animate-spin, animate-pulse) riprendono subito dopo.
   ========================================================== */
#main-content.silent-refresh,
#main-content.silent-refresh *,
#main-content.silent-refresh *::before,
#main-content.silent-refresh *::after {
    animation: none !important;
    transition: none !important;
}

/* ==========================================================
   AI RISK MANAGER (.airm-*)
   Card del Journal.

   Impostazione: a raggruppare è lo spazio, non le linee. Quattro blocchi
   (numeri, analisi, eventi, meta) divisi da un filo solo fra l'uno e l'altro;
   dentro ciascuno tiene insieme il ritmo verticale. Niente gradienti, niente
   aloni, niente maiuscoletto: la gerarchia la fanno corpo e peso del testo.

   Il colore compare una volta per informazione — la fascia del punteggio, il
   segno del P&L, i pallini di ciò che non va — e mai come decorazione. Per
   questo i valori della griglia restano neutri: quel che non va è già scritto
   sotto il punteggio, ripeterlo a colori farebbe un semaforo.

   --airm-ctl vale 44px perché è il minimo imposto a ogni <button> dalla regola
   globale sui touch target: dichiarare misure minori non le otterrebbe.
   ========================================================== */

.airm-tone-good    { --airm-tone: #30D158; }
.airm-tone-ok,
.airm-tone-info    { --airm-tone: #0A84FF; }
.airm-tone-warn    { --airm-tone: #FF9F0A; }
.airm-tone-bad     { --airm-tone: #FF453A; }
.airm-tone-neutral { --airm-tone: #86868B; }

[data-theme="light"] .airm-tone-good    { --airm-tone: #1a9c46; }
[data-theme="light"] .airm-tone-ok,
[data-theme="light"] .airm-tone-info    { --airm-tone: #0066cc; }
[data-theme="light"] .airm-tone-warn    { --airm-tone: #b45309; }
[data-theme="light"] .airm-tone-bad     { --airm-tone: #d9342b; }
[data-theme="light"] .airm-tone-neutral { --airm-tone: #6b6b70; }

/* ---------- Card ---------- */
.airm-card {
    --airm-x: 18px;
    --airm-ctl: 44px;
    --airm-line: rgba(255, 255, 255, 0.08);
    --airm-soft: rgba(255, 255, 255, 0.055);
    --airm-track: rgba(255, 255, 255, 0.09);
    --airm-accent-soft: rgba(10, 132, 255, 0.13);

    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: var(--bg-card);
}

[data-theme="light"] .airm-card {
    --airm-line: rgba(0, 0, 0, 0.08);
    --airm-soft: rgba(0, 0, 0, 0.04);
    --airm-track: rgba(0, 0, 0, 0.08);
    --airm-accent-soft: rgba(0, 122, 255, 0.1);
    border-color: rgba(0, 0, 0, 0.08);
}

/* ---------- Testata ---------- */
.airm-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--airm-x);
}

/* Tutta la parte sinistra apre e chiude la card. */
.airm-toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: none;
}

.airm-toggle:not(:disabled):hover { box-shadow: none; }
.airm-toggle:not(:disabled):hover .airm-title { color: var(--accent-blue); }
.airm-toggle:not(:disabled):active { transform: none; }

.airm-icon {
    width: var(--airm-ctl);
    height: var(--airm-ctl);
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: var(--accent-blue);
    background: var(--airm-accent-soft);
}

.airm-head-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.airm-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-main);
    transition: color 0.2s ease;
}

.airm-sub {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.airm-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--airm-soft);
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.airm-status b {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.airm-band { color: var(--text-muted); }

.airm-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--airm-tone);
}

/* Impatto medio: cerchio vuoto. In tema chiaro l'arancione scuro e il rosso
   sono quasi indistinguibili a 7px, quindi la differenza non può stare
   soltanto nel colore. */
.airm-dot.is-hollow { background: transparent; box-shadow: inset 0 0 0 2px var(--airm-tone); }

/* ---------- Controlli ---------- */
.airm-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--airm-ctl);
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff !important;
    background: var(--accent-blue);
}

.airm-btn i { font-size: 15px; }
.airm-btn:not(:disabled):hover { box-shadow: none; filter: brightness(1.12); }
.airm-btn:disabled { opacity: 0.55; cursor: progress; }

/* Nella card c'è un solo bottone pieno, quello in testata: la ripetizione
   dell'azione nello stato vuoto resta in tono minore. */
.airm-btn-quiet {
    margin-top: 16px;
    padding: 0 16px;
    background: transparent;
    border: 1px solid var(--airm-line);
    color: var(--accent-blue) !important;
}

.airm-btn-quiet:not(:disabled):hover { filter: none; background: var(--airm-soft); }

.airm-icon-btn {
    flex-shrink: 0;
    width: var(--airm-ctl);
    height: var(--airm-ctl);
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--text-muted);
    background: transparent;
}

.airm-icon-btn:not(:disabled):hover { box-shadow: none; background: var(--airm-soft); color: var(--text-main); }

.airm-caret { transition: transform 0.25s ease; }
.airm-caret.is-open { transform: rotate(180deg); }

/* ---------- Blocchi ---------- */
.airm-content { border-top: 1px solid var(--airm-line); }
.airm-content.is-entering { animation: airmExpandIn 0.26s cubic-bezier(0.22, 0.9, 0.3, 1) both; }

.airm-block { padding: 18px var(--airm-x); }
.airm-block + .airm-block { border-top: 1px solid var(--airm-line); }
.airm-block.is-flush { padding: 0; }

.airm-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.airm-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.airm-block-actions { display: flex; align-items: center; gap: 10px; }

/* L'area di tocco resta 44px, l'ingombro visivo no: senza questo la riga di
   intestazione crescerebbe fino all'altezza del bottone. */
.airm-block-head .airm-icon-btn { margin: -12px 0; }

.airm-flag { font-size: 12px; color: var(--airm-tone); }

.airm-toggle-row {
    width: 100%;
    min-height: 52px;
    padding: 0 var(--airm-x);
    background: none;
}

.airm-toggle-row:not(:disabled):hover { box-shadow: none; background: var(--airm-soft); }
.airm-toggle-row:not(:disabled):active { transform: none; }
.airm-toggle-row .airm-caret { color: var(--text-muted); font-size: 13px; }

/* ---------- Punteggio ---------- */
/* Etichetta e numero incolonnati: su una card larga, appaiarli ai due
   estremi li allontanava di mezzo schermo e non si leggevano più insieme. */
.airm-score-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 3px;
}

.airm-score-value b {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.airm-score-value > span { font-size: 12px; color: var(--text-muted); }

.airm-score-value em {
    margin-left: 6px;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: var(--airm-tone);
}

.airm-bar {
    margin-top: 14px;
    height: 6px;
    border-radius: 999px;
    background: var(--airm-track);
    overflow: hidden;
}

.airm-bar span {
    display: block;
    height: 100%;
    width: var(--airm-w);
    border-radius: 999px;
    background: var(--airm-tone);
    animation: airmBar 0.8s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.airm-drivers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 14px;
}

.airm-driver {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-muted);
}

.airm-driver::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--airm-tone);
}

.airm-driver b {
    font-weight: 600;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

/* ---------- Metriche ---------- */
.airm-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    margin-top: 22px;
}

.airm-metric { min-width: 0; }

.airm-metric-value {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.airm-metric-value.airm-tone-good,
.airm-metric-value.airm-tone-bad { color: var(--airm-tone); }

.airm-metric-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Analisi ---------- */
.airm-body {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-main);
}

/* Report lunghi: dissolvenza invece del taglio netto. */
.airm-body.is-clamped {
    max-height: 230px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.airm-section + .airm-section { margin-top: 20px; }

.airm-section-title {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.airm-p { margin: 6px 0; }
.airm-p:first-child { margin-top: 0; }
.airm-p:last-child { margin-bottom: 0; }

.airm-body strong { font-weight: 600; }
.airm-body em { font-style: italic; opacity: 0.85; }

.airm-code {
    padding: 1px 5px;
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    background: var(--airm-soft);
}

.airm-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
}

.airm-list li { display: flex; gap: 10px; }

/* Alto quanto la prima riga di testo: numero e pallino restano centrati su
   quella, non sulla prima lettera. */
.airm-marker {
    flex: 0 0 18px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.airm-marker:empty::after {
    content: '';
    width: 4px;
    height: 4px;
    margin-right: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.55;
}

/* Margini negativi: il collegamento ha l'ingombro di un link, l'area di
   tocco di un bottone. */
.airm-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 -14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-blue);
    background: none;
}

.airm-more:not(:disabled):hover { box-shadow: none; text-decoration: underline; }
.airm-more:not(:disabled):active { transform: none; }

/* ---------- Eventi macro ---------- */
.airm-news {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 2px var(--airm-x) 18px;
}

.airm-news-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.airm-news-time {
    flex-shrink: 0;
    min-width: 36px;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.airm-news-country {
    flex-shrink: 0;
    min-width: 30px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.airm-news-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-main);
}

.airm-news-values {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- Meta e stati ---------- */
.airm-meta { font-size: 12px; color: var(--text-muted); }

.airm-note {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

.airm-empty .airm-p { max-width: 64ch; color: var(--text-muted); }

.airm-error {
    padding-left: 12px;
    border-left: 2px solid currentColor;
    font-size: 13px;
    line-height: 1.6;
    color: var(--accent-red);
}

[data-theme="light"] .airm-error { color: #c62d24; }

.airm-skeleton { display: flex; flex-direction: column; gap: 10px; }
.airm-skeleton .airm-note { margin-bottom: 2px; }

.airm-skel-bar {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--airm-soft) 25%, var(--airm-track) 37%, var(--airm-soft) 63%);
    background-size: 400% 100%;
    animation: airmShimmer 1.4s ease infinite;
}

.airm-setup-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.airm-setup-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.airm-setup-list code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--text-muted);
}

.airm-setup-list a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--accent-blue);
}

.airm-setup-list a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
    .airm-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .airm-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
    .airm-card { --airm-x: 14px; }
    .airm-status .airm-band { display: none; }
    .airm-status { padding: 0 10px; }
    .airm-btn > span { display: none; }
    .airm-btn { width: var(--airm-ctl); padding: 0; }
    .airm-btn-quiet { width: auto; padding: 0 16px; }
    .airm-btn-quiet > span { display: inline; }
    .airm-news-country { display: none; }
    .airm-news-values { display: none; }
}

/* ---------- Animazioni ---------- */
@keyframes airmExpandIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes airmBar {
    from { width: 0; }
    to   { width: var(--airm-w); }
}

@keyframes airmShimmer {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .airm-content,
    .airm-bar span,
    .airm-skel-bar {
        animation: none !important;
    }
    .airm-bar span { width: var(--airm-w); }
}


/* ============================================================
   ACHIEVEMENT DETAIL POPUP  (ui.showAchievementInfo)

   NOTA: ogni selettore è prefissato con .ach-modal e i bottoni usano
   !important sul box model. Serve: più in alto in questo file ci sono
   regole globali che colpiscono OGNI <button> dell'app —
     @media (max-width: 767px)                  button { min-height/-width: 44px !important }
     @media (min-width: 768px) and (max-width: 1024px)
                                                button { min-height: 48px !important;
                                                         padding-inline: 1.25rem !important }
     button { overflow: hidden; contain: layout style paint }
     [data-theme="light"] button:not(:disabled):hover { box-shadow: ... }
   Senza queste difese la X di chiusura diventa una pillola che sborda
   dallo sheet e viene tagliata dall'angolo arrotondato.
   ============================================================ */

.ach-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ach-modal .ach-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
    animation: achBackdropIn 0.28s ease-out both;
}

[data-theme="light"] .ach-modal .ach-backdrop {
    background: rgba(20, 20, 25, 0.34);
}

/* Lo sheet non scrolla: scrolla .ach-scroll al suo interno, così la X e il
   pulsante in fondo restano sempre al loro posto. */
.ach-modal .ach-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 404px;
    max-height: 88vh;
    max-height: min(88dvh, 760px);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    box-shadow:
        0 40px 90px -24px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    animation: achSheetIn 0.44s cubic-bezier(0.22, 1.15, 0.36, 1) both;
}

/* riceve il focus all'apertura, ma senza anello disegnato */
.ach-modal .ach-sheet:focus,
.ach-modal .ach-sheet:focus-visible { outline: none; }

[data-theme="light"] .ach-modal .ach-sheet {
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 30px 70px -22px rgba(0, 0, 0, 0.28);
}

.ach-modal .ach-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ach-modal .ach-scroll::-webkit-scrollbar { display: none; }

/* c'è altro contenuto sotto: sfumo il bordo inferiore dell'area visibile */
.ach-modal .ach-scroll.has-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent 100%);
}

/* chiusura per trascinamento: prosegue dal punto in cui è il dito */
.ach-modal.is-closing .ach-sheet.is-dragging { animation: none !important; }

.ach-modal.is-closing .ach-backdrop { animation: achBackdropOut 0.2s ease-in forwards; }
.ach-modal.is-closing .ach-sheet { animation: achSheetOut 0.2s ease-in forwards; }

/* Maniglia: visibile solo nella versione bottom-sheet su mobile */
.ach-modal .ach-grabber {
    display: none;
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.22);
    z-index: 4;
}

[data-theme="light"] .ach-modal .ach-grabber { background: rgba(0, 0, 0, 0.16); }

/* ---------- Pulsante di chiusura ---------- */

.ach-modal .ach-sheet .ach-close {
    position: absolute;
    top: 12px;
    right: 12px;
    /* !important: batte i min-height/min-width/padding globali dei touch target */
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    flex: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    cursor: pointer;
    z-index: 5;
    /* il globale mette overflow:hidden + contain:paint, che taglierebbero
       l'estensione dell'area di tocco qui sotto */
    overflow: visible !important;
    contain: none !important;
    box-shadow: none;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

/* Area di tocco da 48px senza ingrandire il cerchio visibile */
.ach-modal .ach-sheet .ach-close::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
}

.ach-modal .ach-sheet .ach-close i {
    font-size: 15px;
    line-height: 1;
}

.ach-modal .ach-sheet .ach-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--text-main);
    transform: scale(1.06);
    box-shadow: none;
}

.ach-modal .ach-sheet .ach-close:active {
    transform: scale(0.94);
    box-shadow: none;
}

.ach-modal .ach-sheet .ach-close:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    box-shadow: none;
}

[data-theme="light"] .ach-modal .ach-sheet .ach-close {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .ach-modal .ach-sheet .ach-close:hover {
    background: rgba(0, 0, 0, 0.1);
    box-shadow: none;
}

/* ---------- Hero ---------- */

.ach-modal .ach-hero {
    position: relative;
    padding: 36px 26px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    text-align: center;
}

.ach-modal .ach-hero-glow {
    position: absolute;
    top: -130px;
    left: 50%;
    transform: translateX(-50%);
    width: 340px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ach-c1) 0%, transparent 68%);
    opacity: 0.34;
    filter: blur(26px);
    pointer-events: none;
}

.ach-modal .ach-sheet.is-locked .ach-hero-glow {
    background: radial-gradient(circle, rgba(150, 150, 160, 0.9) 0%, transparent 68%);
    opacity: 0.1;
}

[data-theme="light"] .ach-modal .ach-hero-glow { opacity: 0.2; }

.ach-modal .ach-badge-wrap {
    position: relative;
    width: 98px;
    height: 98px;
    flex: none;
}

.ach-modal .ach-badge {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 32px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--ach-c1), var(--ach-c2));
    box-shadow:
        0 20px 44px -14px var(--ach-glow),
        0 0 0 1px rgba(255, 255, 255, 0.22) inset,
        0 1px 0 rgba(255, 255, 255, 0.3) inset;
    animation: achBadgeIn 0.62s cubic-bezier(0.2, 1.5, 0.4, 1) 0.06s both;
}

.ach-modal .ach-badge i {
    font-size: 46px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

/* Riflesso che scorre: solo per gli achievement sbloccati */
.ach-modal .ach-sheet.is-unlocked .ach-badge::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.5) 47%, transparent 60%);
    transform: translateX(-130%);
    animation: achShine 3.4s ease-in-out 0.8s infinite;
    pointer-events: none;
}

.ach-modal .ach-sheet.is-locked .ach-badge {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset;
}

.ach-modal .ach-sheet.is-locked .ach-badge i {
    color: var(--text-muted);
    text-shadow: none;
}

[data-theme="light"] .ach-modal .ach-sheet.is-locked .ach-badge {
    background: rgba(0, 0, 0, 0.045);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07) inset;
}

/* Alone rotante dietro al badge sbloccato */
.ach-modal .ach-ring {
    position: absolute;
    inset: -9px;
    z-index: 0;
    border-radius: 40px;
    background: conic-gradient(from 0deg, transparent 0deg, var(--ach-c1) 90deg, transparent 200deg, var(--ach-c2) 300deg, transparent 360deg);
    filter: blur(4px);
    opacity: 0;
    pointer-events: none;
}

.ach-modal .ach-sheet.is-unlocked .ach-ring {
    opacity: 0.6;
    animation: achRing 6s linear infinite;
}

.ach-modal .ach-lock {
    position: absolute;
    right: -6px;
    bottom: -6px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.ach-modal .ach-lock i {
    font-size: 14px;
    line-height: 1;
    color: var(--text-muted);
}

[data-theme="light"] .ach-modal .ach-lock {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Scintille decorative — posizione dalle variabili inline, non dall'ordine DOM */
.ach-modal .ach-spark {
    position: absolute;
    top: var(--sy, 60px);
    left: 50%;
    margin-left: var(--sx, 0);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ach-tint);
    opacity: 0;
    pointer-events: none;
    animation: achSpark 2.8s ease-out calc(var(--i, 0) * 0.26s + 0.4s) infinite;
}

[data-theme="light"] .ach-modal .ach-spark { background: var(--ach-c1); }

.ach-modal .ach-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    animation: achRise 0.5s ease-out 0.14s both;
}

.ach-modal .ach-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ach-modal .ach-chip i { font-size: 12px; line-height: 1; }

.ach-modal .ach-chip--rarity {
    color: var(--ach-tint);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .ach-modal .ach-chip--rarity {
    color: var(--ach-ink);
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

.ach-modal .ach-chip--ok {
    color: #34D964;
    background: rgba(48, 209, 88, 0.14);
    border-color: rgba(48, 209, 88, 0.3);
}

[data-theme="light"] .ach-modal .ach-chip--ok {
    color: #0A7A36;
    background: rgba(10, 122, 54, 0.1);
    border-color: rgba(10, 122, 54, 0.22);
}

.ach-modal .ach-chip--locked {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .ach-modal .ach-chip--locked {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.07);
}

.ach-modal .ach-title {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-main);
    text-wrap: balance;
    animation: achRise 0.5s ease-out 0.2s both;
}

/* ---------- Corpo ---------- */

.ach-modal .ach-body {
    padding: 2px 24px 4px;
    animation: achRise 0.5s ease-out 0.26s both;
}

.ach-modal .ach-desc {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
    text-wrap: pretty;
}

.ach-modal .ach-progress {
    padding: 14px 15px 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme="light"] .ach-modal .ach-progress {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.06);
}

.ach-modal .ach-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.ach-modal .ach-progress-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ach-modal .ach-progress-pct {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ach-tint);
    font-variant-numeric: tabular-nums;
}

[data-theme="light"] .ach-modal .ach-progress-pct { color: var(--ach-ink); }

.ach-modal .ach-sheet.is-unlocked .ach-progress-pct { color: #34D964; }

[data-theme="light"] .ach-modal .ach-sheet.is-unlocked .ach-progress-pct { color: #0A7A36; }

.ach-modal .ach-reqs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ach-modal .ach-req-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.ach-modal .ach-req-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.ach-modal .ach-req-label i {
    flex: none;
    font-size: 13px;
    line-height: 1;
    opacity: 0.6;
}

.ach-modal .ach-req.is-done .ach-req-label { color: var(--text-main); }
.ach-modal .ach-req.is-done .ach-req-label i { color: #34D964; opacity: 1; }

[data-theme="light"] .ach-modal .ach-req.is-done .ach-req-label i { color: #0A7A36; }

.ach-modal .ach-req-val {
    flex: none;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ach-modal .ach-req-val b {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
}

.ach-modal .ach-track {
    height: 7px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

[data-theme="light"] .ach-modal .ach-track { background: rgba(0, 0, 0, 0.07); }

.ach-modal .ach-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--ach-c2), var(--ach-c1));
    box-shadow: 0 0 12px -2px var(--ach-glow);
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.ach-modal .ach-req.is-done .ach-fill {
    background: linear-gradient(90deg, #0A7A36, #34D964);
    box-shadow: 0 0 12px -2px rgba(48, 209, 88, 0.6);
}

.ach-modal .ach-hint {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

.ach-modal .ach-hint i { flex: none; font-size: 15px; line-height: 1; }

.ach-modal .ach-hint--ok {
    color: #34D964;
    background: rgba(48, 209, 88, 0.1);
    border: 1px solid rgba(48, 209, 88, 0.2);
}

[data-theme="light"] .ach-modal .ach-hint--ok {
    color: #0A7A36;
    background: rgba(10, 122, 54, 0.08);
    border-color: rgba(10, 122, 54, 0.18);
}

.ach-modal .ach-hint--todo {
    color: var(--accent-yellow);
    background: rgba(255, 214, 10, 0.09);
    border: 1px solid rgba(255, 214, 10, 0.18);
}

[data-theme="light"] .ach-modal .ach-hint--todo {
    color: #8A5A00;
    background: rgba(138, 90, 0, 0.07);
    border-color: rgba(138, 90, 0, 0.16);
}

/* ---------- Footer ---------- */

.ach-modal .ach-footer {
    flex: none;
    padding: 16px 24px 22px;
    animation: achRise 0.5s ease-out 0.32s both;
}

.ach-modal .ach-sheet .ach-cta {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 13px 18px !important;
    padding-inline: 18px !important;
    border: none;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    /* tinta piena (non sfumata) così il contrasto col bianco è garantito */
    background-color: var(--ach-c2);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 62%);
    box-shadow: 0 10px 26px -12px var(--ach-glow);
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.ach-modal .ach-sheet .ach-cta:hover {
    filter: brightness(1.1);
    box-shadow: 0 12px 30px -12px var(--ach-glow);
}

.ach-modal .ach-sheet .ach-cta:active { transform: scale(0.985); }

.ach-modal .ach-sheet .ach-cta:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 3px;
    box-shadow: 0 10px 26px -12px var(--ach-glow);
}

.ach-modal .ach-sheet.is-locked .ach-cta {
    color: var(--text-main);
    background-color: rgba(255, 255, 255, 0.08);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.ach-modal .ach-sheet.is-locked .ach-cta:hover {
    background-color: rgba(255, 255, 255, 0.13);
    box-shadow: none;
}

[data-theme="light"] .ach-modal .ach-sheet.is-locked .ach-cta {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .ach-modal .ach-sheet.is-locked .ach-cta:hover {
    background-color: rgba(0, 0, 0, 0.09);
    box-shadow: none;
}

/* ---------- Tessere achievement nel profilo ---------- */

.ach-tile:focus-visible {
    outline: 3px solid var(--accent-blue);
    outline-offset: 3px;
}

/* ---------- Keyframes ---------- */

@keyframes achBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes achBackdropOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes achSheetIn {
    from { opacity: 0; transform: translateY(22px) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes achSheetOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(10px) scale(0.96); }
}

@keyframes achBadgeIn {
    from { opacity: 0; transform: scale(0.4) rotate(-14deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes achRise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes achShine {
    0% { transform: translateX(-130%); }
    55%, 100% { transform: translateX(130%); }
}

@keyframes achRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes achSpark {
    0% { opacity: 0; transform: translateY(6px) scale(0.4); }
    22% { opacity: 0.9; transform: translateY(-6px) scale(1); }
    60%, 100% { opacity: 0; transform: translateY(-24px) scale(0.5); }
}

/* ---------- Mobile: bottom sheet ---------- */

@media (max-width: 640px) {
    .ach-modal {
        align-items: flex-end;
        padding: 0;
    }

    .ach-modal .ach-sheet {
        max-width: none;
        max-height: 92vh;
        max-height: 92dvh;
        border-radius: 28px 28px 0 0;
        border-bottom: none;
        animation: achSheetUp 0.4s cubic-bezier(0.22, 1.1, 0.36, 1) both;
    }

    .ach-modal.is-closing .ach-sheet { animation: achSheetDown 0.22s ease-in forwards; }

    .ach-modal .ach-grabber { display: block; }

    .ach-modal .ach-hero { padding-top: 32px; }
    .ach-modal .ach-title { font-size: 23px; }
    .ach-modal .ach-badge-wrap { width: 88px; height: 88px; }
    .ach-modal .ach-badge { border-radius: 28px; }
    .ach-modal .ach-badge i { font-size: 42px; }
    .ach-modal .ach-ring { border-radius: 36px; }
    .ach-modal .ach-footer { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}

@keyframes achSheetUp {
    from { opacity: 0.6; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes achSheetDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

/* Schermi molto bassi (telefono in orizzontale): comprimo la parte alta */
@media (max-height: 560px) {
    .ach-modal .ach-hero { padding-top: 24px; padding-bottom: 16px; gap: 10px; }
    .ach-modal .ach-badge-wrap { width: 72px; height: 72px; }
    .ach-modal .ach-badge { border-radius: 24px; }
    .ach-modal .ach-badge i { font-size: 34px; }
    .ach-modal .ach-ring { border-radius: 32px; }
    .ach-modal .ach-title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    .ach-modal .ach-backdrop,
    .ach-modal .ach-sheet,
    .ach-modal .ach-badge,
    .ach-modal .ach-chips,
    .ach-modal .ach-title,
    .ach-modal .ach-body,
    .ach-modal .ach-footer {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .ach-modal .ach-ring,
    .ach-modal .ach-spark,
    .ach-modal .ach-sheet.is-unlocked .ach-badge::after {
        animation: none !important;
    }

    .ach-modal .ach-sheet.is-unlocked .ach-ring { opacity: 0.4; }
    .ach-modal .ach-fill { transition-duration: 0.01ms !important; }
    .ach-modal .ach-sheet .ach-close,
    .ach-modal .ach-sheet .ach-cta { transition: none !important; }
}

/* ============================================================
   PAGINA REVISIONI — il diario di giornata
   ============================================================ */

/* --- Riquadro in cima: la giornata (o la settimana) da chiudere ---
   Due righe soltanto: prima erano quattro (due chip, titolo, numeri, suggerimento)
   e il blocco risultava pesante. Ora l'icona porta lo stato, i numeri stanno in
   linea con la data, e stato + suggerimento condividono la seconda riga. */

.rev-focus {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    margin-bottom: 20px;
    border-radius: 18px;
    background: var(--bg-card);
    border: 1px solid rgba(10, 132, 255, 0.28);
}

.rev-focus.is-done { border-color: rgba(48, 209, 88, 0.26); }

[data-theme="light"] .rev-focus { border-color: rgba(10, 132, 255, 0.3); }
[data-theme="light"] .rev-focus.is-done { border-color: rgba(10, 122, 54, 0.28); }

.rev-focus__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(10, 132, 255, 0.14);
    color: var(--accent-blue);
}

.rev-focus__icon i { font-size: 19px; }

.rev-focus.is-done .rev-focus__icon {
    background: rgba(48, 209, 88, 0.14);
    color: #34D964;
}

[data-theme="light"] .rev-focus.is-done .rev-focus__icon {
    background: rgba(10, 122, 54, 0.12);
    color: #0A7A36;
}

.rev-focus__body { flex: 1 1 auto; min-width: 0; }

/* Riga 1: data, etichetta del periodo, numeri */
.rev-focus__title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-muted);
}

.rev-focus__title > b {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.rev-focus__title > b::first-letter { text-transform: uppercase; }

.rev-focus__tag {
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

[data-theme="light"] .rev-focus__tag { background: rgba(0, 0, 0, 0.055); }

.rev-focus__facts {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rev-focus__facts i { font-style: normal; opacity: 0.35; margin: 0 1px; }
.rev-focus__facts b { font-weight: 800; }
.rev-focus__facts b.is-up { color: #34D964; }
.rev-focus__facts b.is-down { color: #FF6B61; }
.rev-focus__facts .is-quiet { font-style: italic; opacity: 0.7; font-weight: 500; }

[data-theme="light"] .rev-focus__facts b.is-up { color: #0A7A36; }
[data-theme="light"] .rev-focus__facts b.is-down { color: #C42B21; }

/* Riga 2: stato + cosa scriverci (o l'inizio di quello che hai scritto) */
.rev-focus__sub {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rev-focus__sub em {
    font-style: normal;
    font-weight: 800;
    color: var(--accent-orange);
}

.rev-focus.is-done .rev-focus__sub em { color: #34D964; }

[data-theme="light"] .rev-focus__sub em { color: #A8480A; }
[data-theme="light"] .rev-focus.is-done .rev-focus__sub em { color: #0A7A36; }

.rev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: none;
    padding: 10px 16px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: filter 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.rev-btn i { font-size: 14px; }

/* Etichetta lunga dove c'è spazio, corta quando il banner si stringe */
.rev-btn__short { display: none; }

@media (max-width: 760px) {
    .rev-btn__long { display: none; }
    .rev-btn__short { display: inline; }
}
.rev-btn:active { transform: scale(0.985); }

.rev-btn--primary {
    background: var(--accent-blue);
    color: #fff;
}

.rev-btn--primary:hover { filter: brightness(1.08); box-shadow: none; }

.rev-btn--ghost {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.12);
}

.rev-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); box-shadow: none; }

[data-theme="light"] .rev-btn--ghost {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.09);
}

[data-theme="light"] .rev-btn--ghost:hover { background: rgba(0, 0, 0, 0.09); }

@media (max-width: 560px) {
    /* Icona e testo restano sulla stessa riga, il pulsante va sotto a tutta
       larghezza: così l'icona non resta spaiata accanto al pulsante. */
    .rev-focus { flex-wrap: wrap; gap: 12px 13px; align-items: flex-start; }
    .rev-focus__icon { width: 36px; height: 36px; border-radius: 11px; }
    .rev-focus__icon i { font-size: 17px; }
    .rev-focus__body { flex: 1 1 0; }
    .rev-btn { flex: 1 1 100%; }
    .rev-focus__facts { white-space: normal; }
}

/* --- Primo avvio: cosa si scrive qui dentro --- */

.rev-intro {
    padding: 18px 20px;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px dashed rgba(255, 255, 255, 0.16);
}

[data-theme="light"] .rev-intro { border-color: rgba(0, 0, 0, 0.14); }

.rev-intro__head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 16px;
}

.rev-intro__head > i {
    flex: none;
    font-size: 26px;
    color: var(--accent-blue);
    margin-top: 2px;
}

.rev-intro__head h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

.rev-intro__head p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 60ch;
}

.rev-intro__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}

.rev-intro__grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .rev-intro__grid > div {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.06);
}

.rev-intro__grid i { font-size: 16px; color: var(--accent-blue); margin-bottom: 3px; }
.rev-intro__grid b { font-size: 12px; font-weight: 800; color: var(--text-main); }
.rev-intro__grid span { font-size: 11px; color: var(--text-muted); line-height: 1.35; }

/* --- Celle del calendario --- */

.rev-day {
    position: relative;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

[data-theme="light"] .rev-day { border-color: rgba(0, 0, 0, 0.07); }

.rev-day:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .rev-day:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.18);
}

.rev-day:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.rev-day__n {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* il "+" compare al passaggio del mouse: chiarisce che il giorno è scrivibile */
.rev-day__plus {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--accent-blue);
    background: var(--bg-card);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.rev-day:hover .rev-day__plus { opacity: 1; }
.rev-day.is-written .rev-day__plus { display: none; }

@media (hover: none) {
    .rev-day__plus { display: none; }
}

/* giornata operativa mai rivista */
.rev-day.is-todo {
    background: rgba(255, 159, 10, 0.09);
    border-color: rgba(255, 159, 10, 0.3);
}

.rev-day.is-todo .rev-day__n { color: var(--accent-orange); }

[data-theme="light"] .rev-day.is-todo {
    background: rgba(168, 72, 10, 0.08);
    border-color: rgba(168, 72, 10, 0.26);
}

[data-theme="light"] .rev-day.is-todo .rev-day__n { color: #A8480A; }

/* giornata non ancora arrivata: non c'è niente da rivedere */
.rev-day.is-blank {
    background: none;
    border-color: transparent;
    cursor: default;
    pointer-events: none;
}

.rev-day.is-future {
    cursor: default;
    pointer-events: none;
    border-color: transparent;
    opacity: 0.32;
}

.rev-day__dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-orange);
}

[data-theme="light"] .rev-day__dot { background: #A8480A; }

/* oggi */
.rev-day.is-today {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue) inset;
}

.rev-day__today {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-blue);
    line-height: 1;
}

/* giornata già scritta */
.rev-day.is-written {
    background: var(--bg-card);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .rev-day.is-written {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.rev-day.is-written:hover { border-color: var(--accent-blue); }
.rev-day.is-written .rev-day__n { color: var(--text-main); }

.rev-day__bar {
    position: absolute;
    bottom: 0;
    left: 12%;
    width: 76%;
    height: 3px;
    border-radius: 99px 99px 0 0;
}

.rev-day.is-done .rev-day__bar { background: #34D964; }
.rev-day.is-draft .rev-day__bar { background: var(--accent-orange); }

[data-theme="light"] .rev-day.is-done .rev-day__bar { background: #0A7A36; }
[data-theme="light"] .rev-day.is-draft .rev-day__bar { background: #A8480A; }

/* --- Legenda --- */

.rev-legend {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 12px;
    padding: 0 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.rev-legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* i quadratini della legenda riproducono in piccolo le celle del calendario */
.rev-legend__sw {
    position: relative;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    flex: none;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

[data-theme="light"] .rev-legend__sw {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
}

.rev-legend__sw.is-done::after,
.rev-legend__sw.is-draft::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12%;
    width: 76%;
    height: 3px;
    border-radius: 99px 99px 0 0;
}

.rev-legend__sw.is-done::after { background: #34D964; }
.rev-legend__sw.is-draft::after { background: var(--accent-orange); }

.rev-legend__sw.is-todo {
    background: rgba(255, 159, 10, 0.14);
    border-color: rgba(255, 159, 10, 0.4);
}

.rev-legend__sw.is-todo::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-orange);
}

.rev-legend__sw.is-today {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 1px var(--accent-blue) inset;
}

[data-theme="light"] .rev-legend__sw.is-done::after { background: #0A7A36; }
[data-theme="light"] .rev-legend__sw.is-draft::after { background: #A8480A; }

[data-theme="light"] .rev-legend__sw.is-todo {
    background: rgba(168, 72, 10, 0.12);
    border-color: rgba(168, 72, 10, 0.34);
}

[data-theme="light"] .rev-legend__sw.is-todo::after { background: #A8480A; }

.rev-legend__tip {
    margin-left: auto;
    opacity: 0.7;
}

.rev-legend__tip i { font-size: 13px; }

@media (max-width: 900px) {
    .rev-day { height: 68px; }
}

@media (max-width: 640px) {
    .rev-day { height: 54px; }
    .rev-legend__tip { margin-left: 0; width: 100%; }
    .rev-day__n { font-size: 13px; }
}

/* ============================================================
   JOURNAL — vista calendario dei giorni con trade
   ============================================================ */

/* Riga "vista + periodo".
   Classe dedicata di proposito: con le utility Tailwind `flex flex-wrap gap-3`
   sarebbe finita sotto la regola globale
     @media (max-width: 768px) { .flex.flex-wrap.gap-3 { flex-direction: column !important }
                                 .flex.flex-wrap.gap-3 button { width: 100% !important } }
   pensata per i filtri, che mandava i due pulsanti a larghezza piena e li faceva
   sbordare fuori dallo schermo. */
.jbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 6px 0;
}

/* Filtro periodo.
   Prima era un contenitore `overflow-x-auto custom-scrollbar`: da quando la riga
   può restringersi, mostrava una scrollbar grigia sotto le pill. Qui le pill
   vanno semplicemente a capo. Classe dedicata anche qui, per non finire sotto
   `.flex.flex-wrap.gap-3 button { width: 100% !important }`. */
.jperiod {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
    margin-left: auto;
}

.jperiod__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.jperiod__pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* Segmented control riusabile (Journal e Revisioni).
   Colonne di uguale larghezza: l'indicatore si sposta di multipli esatti della
   propria larghezza, senza calcoli in JS e con un numero qualsiasi di opzioni. */
.seg {
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    flex: none;
    padding: 4px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

[data-theme="light"] .seg {
    background: rgba(0, 0, 0, 0.045);
    border-color: rgba(0, 0, 0, 0.06);
}

/* Riga che centra il selettore (pagina Revisioni) */
.seg-row {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.seg__thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    bottom: 4px;
    width: calc((100% - 8px) / var(--seg-n, 2));
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow:
        0 5px 14px -5px rgba(0, 0, 0, 0.6),
        0 1px 0 rgba(255, 255, 255, 0.18) inset;
    transform: translateX(calc(var(--seg-i, 0) * 100%));
    transition: transform 0.34s cubic-bezier(0.32, 1.35, 0.5, 1);
    pointer-events: none;
}

[data-theme="light"] .seg__thumb {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow:
        0 2px 6px -1px rgba(0, 0, 0, 0.14),
        0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Il ridisegno ricrea l'elemento: la transizione non partirebbe, quindi
   all'ingresso lo faccio scorrere dalla posizione precedente. */
.seg.is-sliding .seg__thumb {
    animation: segSlide 0.34s cubic-bezier(0.32, 1.35, 0.5, 1);
}

@keyframes segSlide {
    from { transform: translateX(calc(var(--seg-from, 0) * 100%)); }
}

/* Il box model ripete la classe per arrivare a specificità (0,3,0): serve a
   battere la regola globale
     @media (768–1024px) button:not(.time-filter-pill):not(.account-pill)
        { min-height: 48px !important; padding-inline: 1.25rem !important }
   che da sola vincerebbe. */
.seg .seg__opt.seg__opt {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 17px !important;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    overflow: visible !important;
    contain: none !important;
    transition: color 0.22s ease;
}

.seg__opt i {
    flex: none;
    font-size: 14px;
    line-height: 1;
    transition: color 0.22s ease, transform 0.3s cubic-bezier(0.32, 1.35, 0.5, 1);
}

.seg .seg__opt.seg__opt:hover { color: var(--text-main); box-shadow: none; }
.seg .seg__opt.seg__opt:active { transform: none; box-shadow: none; }

.seg__opt[aria-selected="true"] { color: var(--text-main); }
.seg__opt[aria-selected="true"] i { color: var(--accent-blue); transform: scale(1.06); }

.seg__opt:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 3px;
    border-radius: 11px;
}

@media (max-width: 420px) {
    .seg .seg__opt.seg__opt { padding: 7px 13px !important; font-size: 12px; }
    .seg__opt i { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .seg__thumb { transition: none; animation: none !important; }
    .seg__opt i { transition: none; }
}

.jcal {
    /* Stessa fascia delle altre sezioni della pagina (scheda AI, riga del
       selettore): niente max-width, altrimenti resta rientrato rispetto a loro.
       width:100% serve comunque, perché è un flex item. */
    width: 100%;
    margin: 0 0 20px;
    padding: 16px 16px 18px;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
}

[data-theme="light"] .jcal {
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Riga di intestazione: mese a sinistra, numeri del mese a destra */
.jcal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.jcal-month {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.jcal-month h3 {
    margin: 0;
    min-width: 9.5ch;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
    white-space: nowrap;
}

.jcal-month h3::first-letter { text-transform: uppercase; }

.jcal-nav {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.jcal-nav i { font-size: 13px; }
.jcal-nav:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-main); box-shadow: none; }

[data-theme="light"] .jcal-nav {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .jcal-nav:hover { background: rgba(0, 0, 0, 0.08); }

.jcal-today {
    margin-left: 4px;
    padding: 5px 11px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    border-radius: 99px;
    border: 1px solid rgba(10, 132, 255, 0.32);
    background: rgba(10, 132, 255, 0.12);
    color: var(--accent-blue);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    transition: opacity 0.18s ease, background-color 0.18s ease;
}

.jcal-today:hover:not(:disabled) { background: rgba(10, 132, 255, 0.2); box-shadow: none; }
.jcal-today:disabled { opacity: 0; pointer-events: none; }

/* Numeri del mese: una riga sola, niente scatole */
.jcal-facts {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-muted);
}

.jcal-facts b {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
    margin-right: 3px;
}

.jcal-facts .is-up b { color: #34D964; }
.jcal-facts .is-down b { color: #FF6B61; }
.jcal-facts .is-quiet { font-style: italic; opacity: 0.7; }

[data-theme="light"] .jcal-facts .is-up b { color: #0A7A36; }
[data-theme="light"] .jcal-facts .is-down b { color: #C42B21; }

.jcal-grid-head,
.jcal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.jcal-grid-head { margin-bottom: 8px; }

.jcal-grid-head span {
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.75;
}

/* Cella: P&L al centro, numero e conteggio negli angoli.
   Altezza fissa per non dipendere dalla larghezza del contenitore. */
.jcal-day {
    position: relative;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.18s ease,
                background-color 0.18s ease;
}

[data-theme="light"] .jcal-day {
    background: rgba(0, 0, 0, 0.018);
    border-color: rgba(0, 0, 0, 0.055);
}

.jcal-day.is-blank { background: none; border-color: transparent; }
.jcal-day.is-future { opacity: 0.32; }

.jcal-day__n {
    position: absolute;
    top: 9px;
    left: 11px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.jcal-day__count {
    position: absolute;
    top: 8px;
    right: 9px;
    min-width: 18px;
    text-align: center;
    padding: 2px 5px;
    border-radius: 99px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.15;
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

[data-theme="light"] .jcal-day__count { background: rgba(0, 0, 0, 0.06); }

.jcal-day__pnl {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.jcal-day.has-trades { cursor: pointer; }

.jcal-day.has-trades:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.22);
}

.jcal-day.has-trades:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.jcal-day.is-up {
    background: rgba(48, 209, 88, 0.1);
    border-color: rgba(48, 209, 88, 0.24);
}

.jcal-day.is-up .jcal-day__pnl { color: #34D964; }
.jcal-day.is-up .jcal-day__n { color: rgba(52, 217, 100, 0.85); }
.jcal-day.is-up .jcal-day__count { background: rgba(48, 209, 88, 0.2); color: #8BEDAB; }
.jcal-day.is-up.has-trades:hover { border-color: rgba(48, 209, 88, 0.5); }

.jcal-day.is-down {
    background: rgba(255, 69, 58, 0.1);
    border-color: rgba(255, 69, 58, 0.24);
}

.jcal-day.is-down .jcal-day__pnl { color: #FF6B61; }
.jcal-day.is-down .jcal-day__n { color: rgba(255, 107, 97, 0.85); }
.jcal-day.is-down .jcal-day__count { background: rgba(255, 69, 58, 0.2); color: #FFB0AA; }
.jcal-day.is-down.has-trades:hover { border-color: rgba(255, 69, 58, 0.5); }

[data-theme="light"] .jcal-day.is-up {
    background: rgba(10, 122, 54, 0.085);
    border-color: rgba(10, 122, 54, 0.22);
}

[data-theme="light"] .jcal-day.is-up .jcal-day__pnl { color: #0A7A36; }
[data-theme="light"] .jcal-day.is-up .jcal-day__n { color: rgba(10, 122, 54, 0.8); }
[data-theme="light"] .jcal-day.is-up .jcal-day__count { background: rgba(10, 122, 54, 0.15); color: #0A7A36; }

[data-theme="light"] .jcal-day.is-down {
    background: rgba(196, 43, 33, 0.085);
    border-color: rgba(196, 43, 33, 0.22);
}

[data-theme="light"] .jcal-day.is-down .jcal-day__pnl { color: #C42B21; }
[data-theme="light"] .jcal-day.is-down .jcal-day__n { color: rgba(196, 43, 33, 0.8); }
[data-theme="light"] .jcal-day.is-down .jcal-day__count { background: rgba(196, 43, 33, 0.15); color: #C42B21; }

/* Oggi: anello morbido, non un bordo duro */
.jcal-day.is-today { box-shadow: 0 0 0 1.5px var(--accent-blue) inset; }

.jcal-day.is-selected {
    box-shadow: 0 0 0 2px var(--accent-blue) inset, 0 8px 20px -10px rgba(10, 132, 255, 0.8);
    transform: translateY(-2px);
}

/* Intestazione della giornata selezionata, subito sopra l'elenco dei trade */
.jcal-daybar {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 13px;
    border-radius: 14px;
    background: rgba(10, 132, 255, 0.1);
    border: 1px solid rgba(10, 132, 255, 0.22);
    font-size: 13px;
    color: var(--text-main);
}

.jcal-daybar > i { font-size: 19px; color: var(--accent-blue); flex: none; }

.jcal-daybar__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* "Mercoledì 19 agosto": in italiano il mese resta minuscolo.
   inline-block perché ::first-letter non si applica agli elementi inline. */
.jcal-daybar b { display: inline-block; font-weight: 800; font-size: 13.5px; }
.jcal-daybar b::first-letter { text-transform: uppercase; }

.jcal-daybar__text > span {
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.jcal-daybar__text em { font-style: normal; font-weight: 800; }
.jcal-daybar__text em.is-up { color: #34D964; }
.jcal-daybar__text em.is-down { color: #FF6B61; }

[data-theme="light"] .jcal-daybar__text em.is-up { color: #0A7A36; }
[data-theme="light"] .jcal-daybar__text em.is-down { color: #C42B21; }

.jcal-daybar__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    flex: none;
}

.jcal-daybar__btn:first-of-type { margin-left: auto; }

.jcal-daybar__btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-main); box-shadow: none; }

[data-theme="light"] .jcal-daybar__btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .jcal-daybar__btn:hover { background: rgba(0, 0, 0, 0.09); }

/* Lampo all'arrivo: l'occhio deve capire subito dov'è finito */
.jcal-daybar { animation: jcalDaybarIn 0.9s ease-out; }

@keyframes jcalDaybarIn {
    0% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.45); }
    35% { box-shadow: 0 0 0 7px rgba(10, 132, 255, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .jcal-daybar { animation: none; }
}

/* A tutta larghezza le celle diventano larghe: alzo l'altezza per non
   ritrovarmi rettangoli schiacciati. */
@media (min-width: 1200px) {
    .jcal-day { height: 108px; }
    .jcal-day__pnl { font-size: 17px; }
}

@media (max-width: 900px) {
    .jcal-day { height: 76px; border-radius: 12px; }
    .jcal-day__pnl { font-size: 13.5px; }
    .jcal-day__n { top: 7px; left: 8px; font-size: 11px; }
    .jcal-day__count { top: 6px; right: 6px; }
}

@media (max-width: 640px) {
    .jcal { padding: 12px; border-radius: 18px; }
    .jcal-bar { gap: 8px; }
    .jcal-facts { font-size: 11px; gap: 10px; }
    .jcal-grid-head, .jcal-grid { gap: 4px; }
    .jcal-day { height: 58px; border-radius: 10px; }
    .jcal-day__count { display: none; }
    .jcal-day__n { top: 5px; left: 0; right: 0; text-align: center; font-size: 9.5px; }
    .jcal-day__pnl { font-size: 11px; margin-top: 8px; }
    .jcal-daybar__btn:first-of-type { margin-left: 0; }
}

/* ============================================================
   PLAYBOOK — griglia di carte strategia
   ============================================================ */

.pb-page {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* --- Intestazione --- */

.pb-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.pb-header__text { min-width: 0; }

.pb-header h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-main);
}

.pb-header p {
    margin: 7px 0 0;
    max-width: 56ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}

.pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px !important;
    min-height: 0 !important;
    border: none;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    flex: none;
    transition: filter 0.18s ease, transform 0.18s ease;
}

.pb-btn i { font-size: 15px; }
.pb-btn:active { transform: scale(0.985); }

.pb-btn--primary {
    background: var(--accent-blue);
    color: #fff;
    box-shadow: 0 10px 26px -12px rgba(10, 132, 255, 0.9);
}

.pb-btn--primary:hover { filter: brightness(1.08); }

/* --- Griglia delle carte --- */

.pb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
    padding-bottom: 40px;
}

.pb-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    overflow: hidden;
    cursor: pointer;
    /* Nessuna animazione d'ingresso: la pagina ha già il fade-in generale
       dell'app, e quella in più faceva "salire" i testi solo qui. */
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.22s ease,
                box-shadow 0.22s ease;
}

[data-theme="light"] .pb-card {
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.pb-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--pb-c1) 45%, transparent);
    box-shadow: 0 18px 40px -22px var(--pb-c2);
}

.pb-card:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 3px;
}

/* Copertina */

.pb-card__cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--pb-c1), var(--pb-c2));
}

.pb-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.pb-card:hover .pb-card__img { transform: scale(1.05); }

/* Senza screenshot: monogramma sul gradiente del setup */
.pb-card__mono {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 120% at 20% 10%, rgba(255, 255, 255, 0.28) 0%, transparent 55%),
        linear-gradient(135deg, var(--pb-c1), var(--pb-c2));
}

.pb-card__mono span {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
}

.pb-card__count {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.pb-card__count i { font-size: 11px; }

/* Classe ripetuta per arrivare a specificità (0,3,0). Serve contro due regole
   globali che altrimenti vincono:
     button[onclick] { position: relative }        (0,1,1) -> il pulsante usciva
                                                    dalla copertina e veniva tagliato
     @media (768–1024px) button:not(.time-filter-pill):not(.account-pill)
        { min-height: 48px !important; padding-inline: 1.25rem !important }   (0,2,1) */
.pb-card .pb-card__edit.pb-card__edit {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    box-shadow: none;
    transform: scale(0.9);
    transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.pb-card__edit i { font-size: 14px; }

.pb-card:hover .pb-card__edit.pb-card__edit,
.pb-card:focus-within .pb-card__edit.pb-card__edit { opacity: 1; transform: scale(1); }

.pb-card .pb-card__edit.pb-card__edit:hover { background: var(--accent-blue); box-shadow: none; }

/* dita: il pulsante resta sempre visibile, l'hover non esiste */
@media (hover: none) {
    .pb-card .pb-card__edit.pb-card__edit { opacity: 1; transform: scale(1); }
}

/* Corpo */

.pb-card__body {
    flex: 1 1 auto;
    padding: 15px 16px 12px;
    min-width: 0;
}

.pb-card__name {
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-card__desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-card__desc em { opacity: 0.6; }

.pb-card__rules {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pb-card__rules li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

.pb-card__rules li > span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-card__rules i {
    flex: none;
    margin-top: 1px;
    font-size: 11px;
    color: var(--pb-tint);
}

[data-theme="light"] .pb-card__rules i { color: var(--pb-c2); }

.pb-card__rules li.is-more {
    font-weight: 700;
    opacity: 0.7;
    padding-left: 18px;
}

/* Piede: conteggi e win rate */

.pb-card__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .pb-card__foot { border-top-color: rgba(0, 0, 0, 0.06); }

.pb-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.pb-chip i { font-size: 11px; }

[data-theme="light"] .pb-chip {
    background: rgba(0, 0, 0, 0.035);
    border-color: rgba(0, 0, 0, 0.06);
}

.pb-wr {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    min-width: 0;
}

.pb-wr__bar {
    width: 52px;
    height: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    flex: none;
}

[data-theme="light"] .pb-wr__bar { background: rgba(0, 0, 0, 0.08); }

.pb-wr__bar span {
    display: block;
    height: 100%;
    border-radius: 99px;
}

.pb-wr b {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.pb-wr--good .pb-wr__bar span { background: #34D964; }
.pb-wr--good b { color: #34D964; }
.pb-wr--mid .pb-wr__bar span { background: var(--accent-orange); }
.pb-wr--mid b { color: var(--accent-orange); }
.pb-wr--bad .pb-wr__bar span { background: #FF6B61; }
.pb-wr--bad b { color: #FF6B61; }

[data-theme="light"] .pb-wr--good .pb-wr__bar span { background: #0A7A36; }
[data-theme="light"] .pb-wr--good b { color: #0A7A36; }
[data-theme="light"] .pb-wr--mid .pb-wr__bar span { background: #A8480A; }
[data-theme="light"] .pb-wr--mid b { color: #A8480A; }
[data-theme="light"] .pb-wr--bad .pb-wr__bar span { background: #C42B21; }
[data-theme="light"] .pb-wr--bad b { color: #C42B21; }

.pb-wr--none {
    margin-left: auto;
    font-size: 10.5px;
    font-style: italic;
    color: var(--text-muted);
    opacity: 0.6;
}

/* --- Playbook vuoto --- */

.pb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 46px 22px 60px;
    border-radius: 24px;
    background: var(--bg-card);
    border: 1px dashed rgba(255, 255, 255, 0.14);
}

[data-theme="light"] .pb-empty { border-color: rgba(0, 0, 0, 0.13); }

.pb-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
    border-radius: 20px;
    background: linear-gradient(140deg, #2E90FA, #0B4FC4);
    box-shadow: 0 16px 34px -16px rgba(46, 144, 250, 0.8);
}

.pb-empty__icon i { font-size: 29px; color: #fff; }

.pb-empty h3 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.pb-empty > p {
    margin: 0 0 24px;
    max-width: 56ch;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

.pb-empty__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 660px;
    margin-bottom: 26px;
    text-align: left;
}

.pb-empty__grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 13px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .pb-empty__grid > div {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.06);
}

.pb-empty__grid i { font-size: 16px; color: var(--accent-blue); margin-bottom: 4px; }
.pb-empty__grid b { font-size: 12px; font-weight: 800; color: var(--text-main); }
.pb-empty__grid span { font-size: 11px; line-height: 1.4; color: var(--text-muted); }

@media (max-width: 640px) {
    .pb-header h1 { font-size: 25px; }
    .pb-header { gap: 14px; }
    .pb-btn { width: 100%; }
    .pb-grid { grid-template-columns: 1fr; gap: 14px; }
    .pb-empty { padding: 34px 16px 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .pb-card:hover { transform: none; }
    .pb-card__img, .pb-card:hover .pb-card__img { transition: none; transform: none; }
}

/* ============================================================
   WEEKLY FOCUS — finestra "nuovo task / nuovo obiettivo"
   ============================================================ */

.tm {
    position: relative;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

[data-theme="light"] .tm {
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 30px 70px -22px rgba(0, 0, 0, 0.25);
}

.tm__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 22px 0;
}

.tm__head h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-main);
}

.tm__head p {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* Classe ripetuta: batte button[onclick] e i minimi globali dei touch target */
.tm .tm__close.tm__close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: none;
    overflow: visible !important;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.tm .tm__close.tm__close i { font-size: 14px; }
.tm .tm__close.tm__close:hover { background: rgba(255, 255, 255, 0.13); color: var(--text-main); box-shadow: none; }

[data-theme="light"] .tm .tm__close.tm__close {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.07);
}

.tm__modes { display: flex; justify-content: center; padding: 18px 22px 0; }

.tm__body {
    padding: 20px 22px 22px;
    overflow-y: auto;
}

.todo-form-panel { display: flex; flex-direction: column; gap: 14px; }
.todo-form-panel.hidden { display: none; }

/* --- Campi --- */

/* Nessun riquadro pieno dietro al campo: solo etichetta e una riga sotto.
   Il rettangolo grigio sotto al testo era proprio questo sfondo. */
.tm-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 2px 2px 9px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    transition: border-color 0.18s ease;
}

[data-theme="light"] .tm-field { border-bottom-color: rgba(0, 0, 0, 0.13); }

.tm-field:focus-within { border-bottom-color: var(--accent-blue); }

.tm-field > span {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Le regole globali sugli input impongono min-height 44px e padding, pensati per
   i campi a tutta riga: qui il contenitore ha già il suo, e il campo diventava
   alto 102px. Il font-size lo lascio alla regola globale (16px evita lo zoom su iOS). */
.tm .tm-field input,
.tm .tm-field select {
    width: 100%;
    border: none !important;
    outline: none;
    background: transparent !important;
    color: var(--text-main);
    font-weight: 600;
    font-family: inherit;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.3;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
}

.tm-field select { cursor: pointer; }
.tm-field option { background: var(--bg-card); color: var(--text-main); }
.tm-field input::placeholder { color: var(--text-muted); opacity: 0.55; font-weight: 500; }

.tm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.tm-group { display: flex; flex-direction: column; gap: 8px; }

.tm-group__label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Categoria --- */

.tm-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.tm-chips .tm-chip.tm-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 11px 6px !important;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tm-chips .tm-chip.tm-chip i { font-size: 17px; line-height: 1; }
.tm-chips .tm-chip.tm-chip span { font-size: 10.5px; font-weight: 700; line-height: 1; }
.tm-chips .tm-chip.tm-chip:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-main); box-shadow: none; }

.tm-chips .tm-chip.tm-chip.active {
    background: rgba(10, 132, 255, 0.14);
    border-color: rgba(10, 132, 255, 0.42);
    color: var(--accent-blue);
}

[data-theme="light"] .tm-chips .tm-chip.tm-chip {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .tm-chips .tm-chip.tm-chip:hover { background: rgba(0, 0, 0, 0.06); }

/* --- Priorità --- */

.tm-prio { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.tm-prio .imp-btn.imp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 11px 12px !important;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tm-prio .imp-btn.imp-btn i { font-size: 15px; }
.tm-prio .imp-btn.imp-btn:hover { background: rgba(255, 255, 255, 0.08); box-shadow: none; }

.tm-prio .imp-btn.imp-btn.active {
    background: rgba(10, 132, 255, 0.14);
    border-color: rgba(10, 132, 255, 0.42);
    color: var(--accent-blue);
}

.tm-prio .imp-btn.imp-btn.active.is-high {
    background: rgba(255, 69, 58, 0.14);
    border-color: rgba(255, 69, 58, 0.42);
    color: #FF6B61;
}

[data-theme="light"] .tm-prio .imp-btn.imp-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .tm-prio .imp-btn.imp-btn.active.is-high { color: #C42B21; }

/* --- Salva --- */

.tm .tm-save.tm-save {
    width: 100%;
    margin-top: 4px;
    padding: 13px 18px !important;
    min-height: 0 !important;
    border: none;
    border-radius: 12px;
    background: var(--accent-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 10px 26px -12px rgba(10, 132, 255, 0.9);
    transition: filter 0.18s ease, transform 0.16s ease;
}

.tm .tm-save.tm-save:hover { filter: brightness(1.08); }
.tm .tm-save.tm-save:active { transform: scale(0.99); }

@media (max-width: 480px) {
    .tm__head, .tm__modes { padding-left: 16px; padding-right: 16px; }
    .tm__body { padding: 18px 16px 18px; }
    .tm-row { grid-template-columns: 1fr; }
    .tm-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   HOME — COMMAND BUTTONS (Monte Carlo · Share · Nuovo)
   Trio di azioni della dashboard: registro sobrio, gerarchia
   affidata al peso (neutro → tinta → primario), non agli effetti.
   ============================================================ */

.cmd-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cmd-btn {
    /* tinta del singolo tasto (RGB grezzo per comporre le alpha) */
    --cmd-tint: 255, 255, 255;
    --cmd-icon: var(--text-muted);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition:
        transform 0.18s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Velo uniforme in hover: nessun alone, solo un mezzo tono in piu' */
.cmd-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(var(--cmd-tint), 0.09);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.cmd-btn__icon {
    font-size: 16px;
    line-height: 1;
    color: var(--cmd-icon);
    transition: color 0.2s ease;
}

.cmd-btn__label {
    position: relative;
    top: 0.5px;
}

@media (hover: hover) {
    /* Nessun translateY: il progetto simula il "lift" con la sola ombra
       per non sfasare l'hitbox del bottone. */
    .cmd-btn:hover {
        border-color: rgba(var(--cmd-tint), 0.26);
        box-shadow:
            0 1px 1px rgba(0, 0, 0, 0.16),
            0 6px 14px -10px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .cmd-btn:hover::before { opacity: 1; }
    .cmd-btn:hover .cmd-btn__icon { color: var(--text-main); }
}

.cmd-btn:active {
    transform: scale(0.985);
    transition-duration: 0.08s;
}

.cmd-btn:focus-visible {
    outline: 2px solid rgba(var(--cmd-tint), 0.6);
    outline-offset: 2px;
}

/* --- Variante tinta (Monte Carlo) --- */
.cmd-btn--indigo {
    --cmd-tint: 129, 140, 248;
    --cmd-icon: #8891E8;
}

@media (hover: hover) {
    .cmd-btn--indigo:hover .cmd-btn__icon { color: #A5ACF5; }
}

/* --- Variante primaria (Nuovo) --- */
.cmd-btn--primary {
    --cmd-tint: 10, 132, 255;
    --cmd-icon: #FFFFFF;
    border-color: transparent;
    background: var(--accent-blue);
    color: #FFFFFF;
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.16),
        0 4px 10px -8px rgba(10, 132, 255, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cmd-btn--primary::before {
    background: rgba(255, 255, 255, 0.1);
}

@media (hover: hover) {
    .cmd-btn--primary:hover {
        border-color: transparent;
        box-shadow:
            0 1px 1px rgba(0, 0, 0, 0.16),
            0 6px 14px -8px rgba(10, 132, 255, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    .cmd-btn--primary:hover .cmd-btn__icon { color: #FFFFFF; }
}

/* --- Tema chiaro --- */
[data-theme="light"] .cmd-btn {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .cmd-btn::before {
    background: rgba(var(--cmd-tint), 0.05);
}

[data-theme="light"] .cmd-btn--indigo { --cmd-icon: #5B5BD6; }

[data-theme="light"] .cmd-btn--primary,
[data-theme="light"] .cmd-btn--primary .cmd-btn__label,
[data-theme="light"] .cmd-btn--primary .cmd-btn__icon {
    color: #FFFFFF !important;
}

[data-theme="light"] .cmd-btn--primary {
    background: var(--accent-blue);
    border-color: transparent;
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.06),
        0 4px 10px -8px rgba(0, 122, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

@media (hover: hover) {
    [data-theme="light"] .cmd-btn:hover {
        border-color: rgba(0, 0, 0, 0.16);
        box-shadow:
            0 1px 1px rgba(0, 0, 0, 0.04),
            0 6px 14px -12px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    [data-theme="light"] .cmd-btn--primary:hover {
        border-color: transparent;
        box-shadow:
            0 1px 1px rgba(0, 0, 0, 0.06),
            0 6px 14px -8px rgba(0, 122, 255, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.32);
    }
}

/* Le regole globali (button { min-width/min-height/font-size ... !important })
   verrebbero prima del componente: le riallineiamo qui. */
button.cmd-btn.cmd-btn {
    min-width: 0;
    min-height: 42px;
}

@media (max-width: 768px) {
    button.cmd-btn.cmd-btn {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 11.5px !important;
    }
}

/* --- Sotto i 640px: solo icona, tasto quadrato ---
   NB: non si usa l'utility Tailwind `hidden` perche' in questo progetto
   `.hidden` e' `display:none !important` e vincerebbe su `sm:inline-block`. */
@media (max-width: 639px) {
    button.cmd-btn.cmd-btn {
        width: 44px !important;
        min-width: 44px !important;
        padding: 0 !important;
        gap: 0;
    }

    .cmd-btn .cmd-btn__label { display: none; }
}

/* --- Tablet: target touch più generosi, ma trio sempre allineato --- */
@media (min-width: 768px) and (max-width: 1024px) {
    button.cmd-btn.cmd-btn {
        height: 48px !important;
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 0 20px !important;
        font-size: 12.5px !important;
        border-radius: 13px !important;
    }

    button.cmd-btn.cmd-btn .cmd-btn__icon { font-size: 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .cmd-btn,
    .cmd-btn::before,
    .cmd-btn__icon { transition: none; }
    .cmd-btn:active { transform: none; }
}

/* ============================================================
   SISTEMA BOTTONI — registro sobrio esteso a tutta l'app
   Stessa lingua dei tasti della home (.cmd-btn): superfici
   piatte, raggi contenuti, ombre minime, nessun alone.
   Non tocca i colori scelti sul singolo bottone: agisce solo
   su geometria, peso, ombre e transizioni.

   Esclusi (hanno gia' una forma propria o sono pill/card):
   .cmd-btn, .dock-icon, le pill dei filtri, i componenti
   dedicati (.rev-btn, .airm-*, .pb-btn, .tm-*, .seg__opt,
   .jcal-nav, .imp-btn), tutto cio' che e' rounded-full e i
   bottoni-scheda con padding generoso (p-6 / p-8).
   ============================================================ */

button:not(.cmd-btn, .dock-icon, .account-pill, .time-filter-pill, .seg__opt,
    .jcal-nav, .pb-btn, .airm-btn, .airm-btn-quiet, .airm-icon-btn, .rev-btn,
    .imp-btn, .edit-imp-btn, .tm-save, .tm-chip, .close-btn,
    [class*="rounded-full"], [class*="p-6"], [class*="p-8"]) {
    border-radius: 12px;
    font-weight: 600;
    box-shadow: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease,
        filter 0.2s ease,
        transform 0.18s ease;
}

/* Bottoni con superficie piena: appena staccati dallo sfondo */
button[class^="bg-"]:not(.cmd-btn, .dock-icon, .account-pill, .time-filter-pill,
    .seg__opt, .jcal-nav, .pb-btn, .airm-btn, .airm-btn-quiet, .airm-icon-btn,
    .rev-btn, .imp-btn, .edit-imp-btn, .tm-save, .tm-chip, .close-btn,
    [class*="rounded-full"], [class*="p-6"], [class*="p-8"]),
button[class*=" bg-"]:not(.cmd-btn, .dock-icon, .account-pill, .time-filter-pill,
    .seg__opt, .jcal-nav, .pb-btn, .airm-btn, .airm-btn-quiet, .airm-icon-btn,
    .rev-btn, .imp-btn, .edit-imp-btn, .tm-save, .tm-chip, .close-btn,
    [class*="rounded-full"], [class*="p-6"], [class*="p-8"]) {
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="light"] button[class^="bg-"]:not(.cmd-btn, .dock-icon, .account-pill,
    .time-filter-pill, .seg__opt, .jcal-nav, .pb-btn, .airm-btn, .airm-btn-quiet,
    .airm-icon-btn, .rev-btn, .imp-btn, .edit-imp-btn, .tm-save, .tm-chip, .close-btn,
    [class*="rounded-full"], [class*="p-6"], [class*="p-8"]),
[data-theme="light"] button[class*=" bg-"]:not(.cmd-btn, .dock-icon, .account-pill,
    .time-filter-pill, .seg__opt, .jcal-nav, .pb-btn, .airm-btn, .airm-btn-quiet,
    .airm-icon-btn, .rev-btn, .imp-btn, .edit-imp-btn, .tm-save, .tm-chip, .close-btn,
    [class*="rounded-full"], [class*="p-6"], [class*="p-8"]) {
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* --- Fondi pieni: il feedback in hover e' una leggera schiaritura --- */
@media (hover: hover) {
    button[class*="bg-[var(--accent"]:not(:disabled):hover {
        filter: brightness(1.08);
    }
}

/* --- Ombre colorate (glow) rimosse ovunque --- */
button[class*="shadow-blue"],
button[class*="shadow-indigo"],
button[class*="shadow-violet"],
button[class*="shadow-purple"],
button[class*="shadow-green"],
button[class*="shadow-emerald"],
button[class*="shadow-amber"],
button[class*="shadow-orange"],
button[class*="shadow-red"],
button[class*="shadow-rose"],
button[class*="shadow-cyan"],
button[class*="shadow-\["] {
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

[data-theme="light"] button[class*="shadow-blue"],
[data-theme="light"] button[class*="shadow-indigo"],
[data-theme="light"] button[class*="shadow-violet"],
[data-theme="light"] button[class*="shadow-purple"],
[data-theme="light"] button[class*="shadow-green"],
[data-theme="light"] button[class*="shadow-emerald"],
[data-theme="light"] button[class*="shadow-amber"],
[data-theme="light"] button[class*="shadow-orange"],
[data-theme="light"] button[class*="shadow-red"],
[data-theme="light"] button[class*="shadow-rose"],
[data-theme="light"] button[class*="shadow-cyan"],
[data-theme="light"] button[class*="shadow-\["] {
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* --- Pressione uniforme --- */
button:not(:disabled):not(.cmd-btn, .dock-icon, .account-pill, .time-filter-pill):active {
    transform: scale(0.985);
    transition-duration: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    button:not(:disabled):active { transform: none; }
}