:root {
    --primary: #00f2fe;
    --primary-dark: #0099cc;
    --accent: #ff0055;
    --success: #00ff88;
    --warning: #ffcc00;
    --bg-deep: #050505;
    --glass-bg: rgba(20, 20, 25, 0.7);
    --glass-bg-strong: rgba(10, 10, 14, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-main: #ffffff;
    --text-muted: #8b949e;
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
    --radius-lg: 24px;
    --radius-md: 16px;
}

/* --- THEMATIC OVERRIDES FOR THE DASHBOARD --- */
body.theme-fitness {
    --primary: #00f2fe;
    --primary-dark: #0099cc;
    --accent: #ffb347;
}

body.theme-both {
    --primary: #00f2fe;
    --primary-dark: #0099cc;
    --accent: #7c83ff;
}

/* Isolate the Recipe results from taking on the global profile theme */
#results-container {
    --primary: #00f2fe;
    --primary-dark: #0099cc;
    --accent: #ff0055;
    --primary-rgb: 0, 242, 254;
}

.iahc-tier-badge.tier-supremo {
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(120deg,
            rgba(255, 0, 85, 0.22),
            rgba(139, 92, 246, 0.22),
            rgba(0, 242, 254, 0.18),
            rgba(255, 204, 0, 0.16));
    background-size: 260% 260%;
    animation:
        iahcSupremoShift 4.4s ease-in-out infinite,
        iahcTierPulse 2.2s ease-in-out infinite;
}

.iahc-tier-badge.tier-supremo .tier-pill {
    color: #0b0b10;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.92),
            rgba(255, 204, 0, 0.85));
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.2),
        0 0 40px rgba(255, 204, 0, 0.18);
}

.iahc-tier-badge.tier-supremo {
    animation:
        iahcSupremoShift 4.4s ease-in-out infinite,
        iahcSupremoGlow 1.9s ease-in-out infinite;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Outfit", sans-serif;
    background:
        radial-gradient(1200px 700px at 12% 15%,
            rgba(0, 242, 254, 0.12),
            transparent 60%),
        radial-gradient(1000px 600px at 88% 20%,
            rgba(255, 0, 85, 0.12),
            transparent 62%),
        radial-gradient(900px 600px at 50% 90%,
            rgba(0, 255, 136, 0.1),
            transparent 60%),
        radial-gradient(circle at 10% 20%, #1a1a2e 0%, var(--bg-deep) 90%);
    color: var(--text-main);
    min-height: 100dvh; /* Mobile viewport height fallback */
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    -webkit-tap-highlight-color: transparent; /* Remove tap blink */
    padding-top: env(safe-area-inset-top); /* iPhone Notch safe areas */
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-sizing: border-box;
    line-height: 1.6;
    letter-spacing: 0.2px;
    -webkit-font-smoothing: antialiased;
}

body.hc {
    background:
        radial-gradient(1300px 760px at 10% 10%,
            rgba(0, 242, 254, 0.2),
            transparent 58%),
        radial-gradient(980px 640px at 90% 16%,
            rgba(255, 0, 85, 0.16),
            transparent 62%),
        radial-gradient(920px 620px at 50% 92%,
            rgba(0, 255, 136, 0.14),
            transparent 62%),
        radial-gradient(circle at 12% 18%, #0f1630 0%, #05050a 90%) !important;
    background-color: #05050a !important;
    background-attachment: fixed;
}

body.hc[data-dashboard-contrast-level="soft"] {
    background:
        radial-gradient(1300px 760px at 10% 10%,
            rgba(0, 242, 254, 0.13),
            transparent 58%),
        radial-gradient(980px 640px at 90% 16%,
            rgba(255, 0, 85, 0.1),
            transparent 62%),
        radial-gradient(920px 620px at 50% 92%,
            rgba(0, 255, 136, 0.09),
            transparent 62%),
        radial-gradient(circle at 12% 18%, #0d1226 0%, #06070d 90%) !important;
}

body.hc[data-dashboard-contrast-level="high"] {
    background:
        radial-gradient(1300px 760px at 10% 10%,
            rgba(0, 242, 254, 0.28),
            transparent 56%),
        radial-gradient(980px 640px at 90% 16%,
            rgba(255, 0, 85, 0.24),
            transparent 60%),
        radial-gradient(920px 620px at 50% 92%,
            rgba(0, 255, 136, 0.2),
            transparent 60%),
        radial-gradient(circle at 12% 18%, #111a38 0%, #04050a 90%) !important;
}

body.ui-less-glow .btn-icon-primary {
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.15);
}

body.ui-less-glow .btn-icon-upgrade {
    animation: none;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.2);
}

body.ui-less-glow .app-loading-chip {
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.12);
}

body.ui-text-large {
    font-size: 17px;
}

body.ui-text-large .chat-input,
body.ui-text-large .form-input,
body.ui-text-large .styled-select,
body.ui-text-large .custom-select-trigger {
    font-size: 0.95rem;
}

body.ui-density-compact #app-dashboard {
    padding: 14px;
}

body.ui-density-compact .header-bar {
    margin-bottom: 24px;
    padding: 12px 0;
}

body.ui-density-compact .main-grid {
    gap: 14px;
}

body.ui-no-motion *,
body.ui-no-motion *::before,
body.ui-no-motion *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

@keyframes iahcTierPulse {
    0% {
        transform: translateZ(0) scale(1);
        filter: brightness(1);
    }

    50% {
        transform: translateZ(0) scale(1.02);
        filter: brightness(1.15);
    }

    100% {
        transform: translateZ(0) scale(1);
        filter: brightness(1);
    }
}

@keyframes iahcSupremoShift {
    0% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg) saturate(1.05);
    }

    50% {
        background-position: 100% 50%;
        filter: hue-rotate(18deg) saturate(1.25);
    }

    100% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg) saturate(1.05);
    }
}

@keyframes iahcSupremoGlow {
    0% {
        box-shadow:
            0 12px 34px rgba(0, 0, 0, 0.38),
            0 0 0 1px rgba(255, 255, 255, 0.12),
            0 0 22px rgba(255, 0, 85, 0.14);
    }

    50% {
        box-shadow:
            0 14px 40px rgba(0, 0, 0, 0.42),
            0 0 0 1px rgba(255, 255, 255, 0.16),
            0 0 34px rgba(0, 242, 254, 0.22);
    }

    100% {
        box-shadow:
            0 12px 34px rgba(0, 0, 0, 0.38),
            0 0 0 1px rgba(255, 255, 255, 0.12),
            0 0 22px rgba(255, 0, 85, 0.14);
    }
}

.iahc-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: var(--shadow-md);
    font-weight: 900;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.iahc-tier-badge::before {
    content: "";
    position: absolute;
    inset: -2px;
    background:
        radial-gradient(600px 120px at 10% 10%,
            rgba(0, 242, 254, 0.18),
            transparent 55%),
        radial-gradient(600px 120px at 90% 90%,
            rgba(255, 0, 85, 0.16),
            transparent 55%);
    opacity: 0.55;
    pointer-events: none;
}

.iahc-tier-badge>* {
    position: relative;
    z-index: 1;
}

.iahc-tier-badge .tier-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.iahc-tier-badge.tier-free .tier-pill {
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 242, 254, 0.35);
    background: rgba(0, 242, 254, 0.1);
}

.iahc-tier-badge.tier-pro {
    border-color: rgba(139, 92, 246, 0.6);
    background: linear-gradient(135deg,
            rgba(139, 92, 246, 0.22),
            rgba(0, 242, 254, 0.1));
    animation: iahcTierPulse 2.4s ease-in-out infinite;
}

.iahc-tier-badge.tier-pro .tier-pill {
    color: #ffffff;
    border-color: rgba(139, 92, 246, 0.85);
    background: rgba(139, 92, 246, 0.28);
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.18),
        0 0 22px rgba(139, 92, 246, 0.28);
}

.iahc-tier-badge.tier-empresa {
    border-color: rgba(255, 204, 0, 0.6);
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.18),
            rgba(0, 242, 254, 0.08));
    animation: iahcTierPulse 2s ease-in-out infinite;
}

.iahc-tier-badge.tier-empresa .tier-pill {
    color: #111827;
    border-color: rgba(255, 204, 0, 0.92);
    background: rgba(255, 204, 0, 0.92);
    box-shadow:
        0 0 0 1px rgba(255, 204, 0, 0.2),
        0 0 26px rgba(255, 204, 0, 0.2);
}

/* Auth (login / registro) */
#iahc-auth-shell {
    min-height: 100dvh;
    display: none;
    align-items: center;
    justify-content: center;
    padding: calc(40px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}

.iahc-auth-container {
    width: min(1120px, 100%);
}

.iahc-auth-hero {
    margin-bottom: 26px;
    /* Anula estilos globales de header del tema (sticky + fondo oscuro) */
    position: static;
    top: auto;
    border: none;
    background: transparent;
    backdrop-filter: none;
}

.iahc-auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.iahc-auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    font-size: 0.95rem;
}

.iahc-auth-logo i {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%,
            rgba(0, 242, 254, 0.35),
            rgba(0, 242, 254, 0.08));
    border: 1px solid rgba(0, 242, 254, 0.22);
    color: var(--primary);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.16);
}

.iahc-auth-logo .logo-accent {
    color: var(--primary);
}

.iahc-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-radius: 999px;
    font-size: 0.8rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.iahc-auth-back:hover {
    color: var(--primary);
    text-decoration: underline;
}

.iahc-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
}

.iahc-auth-badge strong {
    color: var(--primary);
}

.iahc-auth-title {
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    margin-top: 14px;
    line-height: 1.1;
    letter-spacing: -0.4px;
}

.iahc-auth-title .grad {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.iahc-auth-sub {
    margin-top: 10px;
    max-width: 60ch;
    color: var(--text-muted);
    font-size: 0.98rem;
}

.iahc-auth-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 900px) {
    .iahc-auth-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.iahc-auth-card {
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.iahc-auth-card-primary {
    position: relative;
    overflow: hidden;
}

.iahc-auth-card-primary::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 180deg,
            rgba(0, 242, 254, 0),
            rgba(0, 242, 254, 0.18),
            rgba(255, 0, 85, 0.12),
            rgba(0, 255, 136, 0.1),
            rgba(0, 242, 254, 0));
    opacity: 0.7;
    pointer-events: none;
}

.iahc-auth-card-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.65),
            rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

.iahc-auth-card-primary>* {
    position: relative;
    z-index: 1;
}

.iahc-auth-card h2 {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
}

.iahc-auth-card p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.iahc-auth-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.iahc-auth-field {
    margin-bottom: 10px;
}

.iahc-auth-actions {
    margin-top: 8px;
}

.iahc-auth-status {
    margin-top: 8px;
    min-height: 18px;
    font-size: 0.8rem;
}

.iahc-auth-footnote {
    margin-top: 16px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.iahc-auth-login-note {
    margin-top: 14px;
    max-width: 34ch;
}

.iahc-auth-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.iahc-auth-link {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}

.iahc-auth-link:hover {
    color: var(--primary);
    border-color: rgba(0, 242, 254, 0.6);
}

.iahc-auth-helper {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.iahc-auth-helper-title {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
}

.iahc-auth-helper-list {
    list-style: none;
    display: grid;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.iahc-auth-helper-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.iahc-auth-helper-list li::before {
    content: "•";
    color: var(--primary);
}

.iahc-auth-card-login {
    min-height: 420px;
}

.iahc-auth-card-login .iahc-auth-actions {
    margin-top: auto;
}

.btn-auth-create {
    /* Turquesa principal (igual landing) */
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.btn-auth-login {
    /* Color claramente distinto para login */
    background: linear-gradient(135deg, #ff7ad9, #ff2e93);
    box-shadow: 0 0 28px rgba(255, 122, 217, 0.45);
    color: #000;
}

.btn-auth-login:hover {
    box-shadow: 0 0 44px rgba(255, 122, 217, 0.65);
}

@media (max-width: 600px) {
    #iahc-auth-shell {
        padding: 28px 14px;
    }

    .iahc-auth-card {
        padding: 18px 16px;
    }

    .iahc-auth-topbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

.glass-panel {
    background: linear-gradient(135deg,
            rgba(25, 25, 30, 0.78),
            rgba(10, 10, 15, 0.6));
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.btn-neon {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #000;
    font-weight: 800;
    border: none;
    padding: 16px 30px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

.btn-neon:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 40px rgba(0, 242, 254, 0.6);
}

.btn-neon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-cta-primary {
    border-radius: 18px;
    padding: 16px 18px;
    text-transform: none;
    letter-spacing: 0.3px;
    box-shadow: 0 18px 36px rgba(0, 242, 254, 0.25);
}

.btn-cta-primary:hover {
    box-shadow: 0 22px 44px rgba(0, 242, 254, 0.32);
}

.btn-cta-primary.btn-scope-comida {
    background: linear-gradient(135deg, #00f2fe, #4facfe);
}

.btn-cta-primary.btn-scope-dia {
    background: linear-gradient(135deg, #7af7ff, #00d2ff);
}

.btn-cta-primary.btn-scope-semana {
    background: linear-gradient(135deg, #ffd166, #ff8f00);
    color: #1a1400;
}

.btn-neon.btn-scope-comida,
.plan-confirm-cta.btn-scope-comida {
    background: linear-gradient(135deg, #00f2fe, #4facfe);
}

.btn-neon.btn-scope-dia,
.plan-confirm-cta.btn-scope-dia {
    background: linear-gradient(135deg, #7af7ff, #00d2ff);
}

.btn-neon.btn-scope-semana,
.plan-confirm-cta.btn-scope-semana {
    background: linear-gradient(135deg, #ffd166, #ff8f00);
    color: #1a1400;
}

.btn-cta-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 16px;
    padding: 12px 16px;
    text-transform: none;
    letter-spacing: 0.2px;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
}

.btn-cta-secondary:hover {
    border-color: rgba(0, 242, 254, 0.5);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(0, 242, 254, 0.18);
}

.btn-neon:focus-visible,
.btn-chat-control:focus-visible,
.btn-icon:focus-visible,
.tab-btn:focus-visible,
.chat-input:focus-visible,
.btn-chat-upload:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Overrides específicos para auth: se definen DESPUÉS de .btn-neon para ganar prioridad */
.btn-neon.btn-auth-create {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 0 24px rgba(0, 242, 254, 0.4);
}

.btn-neon.btn-auth-login {
    background: linear-gradient(135deg, #ff7ad9, #f052c4);
    box-shadow: 0 0 24px rgba(240, 82, 196, 0.45);
    color: #000;
}

.btn-neon.btn-auth-login:hover {
    box-shadow: 0 0 36px rgba(240, 82, 196, 0.65);
}

.recipe-save-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
}

.recipe-save-btn.active {
    background: rgba(0, 242, 254, 0.2);
    border-color: rgba(0, 242, 254, 0.6);
    color: var(--primary);
}

.saved-recipe-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.saved-recipe-actions button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    color: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.7rem;
}

.saved-recipe-actions button:hover {
    border-color: rgba(0, 242, 254, 0.6);
    color: var(--primary);
}

.plan-loading-banner {
    margin-top: 12px;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid rgba(0, 229, 255, 0.35);
    color: var(--primary);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.recipe-loading-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top,
            rgba(0, 229, 255, 0.12),
            rgba(5, 12, 20, 0.8) 60%);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border-radius: 18px;
}

.recipe-loading-card {
    position: relative;
    background: rgba(8, 18, 32, 0.88);
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 18px;
    padding: 22px 26px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    min-width: 260px;
    overflow: hidden;
}

.recipe-loading-card::before {
    content: "";
    position: absolute;
    inset: -50% -30%;
    background: conic-gradient(from 180deg,
            rgba(0, 229, 255, 0),
            rgba(0, 229, 255, 0.25),
            rgba(0, 229, 255, 0));
    animation: sweepGlow 3.2s linear infinite;
    opacity: 0.6;
    pointer-events: none;
}

.recipe-loading-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.recipe-loading-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(0, 229, 255, 0.35),
            rgba(0, 229, 255, 0.1));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 10px;
    animation:
        pulseGlow 1.6s ease-in-out infinite,
        rotateSpark 4s linear infinite;
}

.recipe-loading-title {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 6px;
}

.recipe-loading-subtitle {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 12px;
}

.recipe-loading-dots span {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
    animation: loadingDot 1s ease-in-out infinite;
}

.recipe-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.recipe-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

.recipe-loading-dots span {
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
}

.plan-loading-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulseGlow 1.4s ease-in-out infinite;
}

.plan-loading-text {
    display: flex;
    align-items: center;
    gap: 4px;
}

.loading-dots span {
    animation: loadingDot 1s ease-in-out infinite;
    display: inline-block;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

.chat-plan-loading {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: var(--primary);
}

.chat-plan-loading .msg-body {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-plan-loading .loading-dots {
    color: var(--primary);
}

@keyframes loadingDot {

    0%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(0, 229, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 18px rgba(0, 229, 255, 0.45);
    }
}

@keyframes sweepGlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateSpark {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes heartReminderGlow {

    0%,
    100% {
        box-shadow: 0 0 18px rgba(255, 0, 85, 0.25);
    }

    50% {
        box-shadow: 0 0 32px rgba(255, 0, 85, 0.55);
    }
}

@keyframes heartPremiumSweep {
    0% {
        transform: translateX(-120%) rotate(8deg);
        opacity: 0;
    }

    20% {
        opacity: 0.7;
    }

    100% {
        transform: translateX(120%) rotate(8deg);
        opacity: 0;
    }
}

@keyframes heartHaloPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.45;
    }

    50% {
        transform: scale(1.25);
        opacity: 0.75;
    }
}

@keyframes heartSparkle {
    0% {
        transform: translateY(0) scale(0.6);
        opacity: 0;
    }

    20% {
        opacity: 0.9;
    }

    100% {
        transform: translateY(-8px) scale(1.2);
        opacity: 0;
    }
}

@keyframes upgradePulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 204, 0, 0.25);
    }

    50% {
        box-shadow: 0 0 22px rgba(255, 204, 0, 0.55);
    }
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning), #ff9900);
    color: #000;
}

.btn-warning:hover {
    box-shadow: 0 0 40px rgba(255, 204, 0, 0.6);
}

.btn-icon {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px) scale(1.05);
}

.btn-icon-primary {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.18),
            rgba(0, 160, 255, 0.12));
    border-color: rgba(0, 242, 254, 0.65);
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.25);
}

.btn-icon-primary:hover {
    box-shadow: 0 0 26px rgba(0, 242, 254, 0.45);
}

.btn-icon-dashboard {
    background: linear-gradient(135deg,
            rgba(34, 211, 238, 0.2),
            rgba(14, 165, 233, 0.12));
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.2);
}

.btn-icon-dashboard:hover {
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.35);
}

.btn-icon-upgrade {
    background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.28),
            rgba(255, 165, 0, 0.16));
    border-color: rgba(255, 215, 0, 0.6);
    color: #ffd966;
    position: relative;
    box-shadow: 0 0 16px rgba(255, 204, 0, 0.35);
    animation: upgradePulse 2.2s ease-in-out infinite;
}

.btn-icon-upgrade.is-pro {
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.32),
            rgba(255, 120, 0, 0.22));
    border-color: rgba(255, 204, 0, 0.75);
}

.btn-icon-upgrade::after {
    content: attr(data-label);
    position: absolute;
    right: -6px;
    top: -8px;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 2px 6px;
    border-radius: 999px;
    color: #000;
    background: linear-gradient(135deg, #ffd700, #ffa500);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.3);
}

.beta-badge,
.beta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    margin-left: 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #000;
    background: linear-gradient(135deg, var(--warning), #ff9900);
    box-shadow: 0 0 18px rgba(255, 204, 0, 0.45);
}

.beta-badge {
    margin-left: 0;
    margin-top: 10px;
}

.app-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 20%, #0b2033 0%, #050c14 60%);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.app-loading-screen.app-loading-hidden {
    opacity: 0;
    transform: scale(1.02);
    pointer-events: none;
}

.app-loading-card {
    width: min(460px, 86vw);
    padding: 36px 28px;
    border-radius: 24px;
    text-align: center;
    background: rgba(10, 18, 30, 0.75);
    border: 1px solid rgba(0, 242, 254, 0.25);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px);
    position: relative;
    z-index: 1;
}

.app-loading-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #9ceeff;
    margin-bottom: 14px;
    border: 1px solid rgba(0, 242, 254, 0.35);
    background: rgba(0, 242, 254, 0.09);
    border-radius: 999px;
    padding: 7px 12px;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.16);
    animation: appChipPulse 1.8s ease-in-out infinite;
}

.app-loading-chip i {
    color: var(--primary);
    font-size: 0.78rem;
}

.app-loading-logo {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    background: transparent;
    border: none;
    box-shadow: none;
    animation: appPulse 1.8s ease-in-out infinite;
}

.app-loading-logo svg {
    width: 90px;
    height: 90px;
    display: block;
    overflow: visible;
}

.app-loading-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.app-loading-sub {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 12px;
    min-height: 1.3em;
}

.app-loading-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.74);
}

#app-loading-phase {
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.15px;
}

#app-loading-percent {
    min-width: 44px;
    text-align: right;
    color: var(--primary);
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.35);
}

.app-loading-bar {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.app-loading-bar span {
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg,
            rgba(0, 242, 254, 0.2),
            rgba(0, 242, 254, 0.9),
            rgba(255, 0, 153, 0.65));
    animation: appLoadBar 1.6s ease-in-out infinite;
}

@keyframes appPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.25));
    }

    50% {
        filter: drop-shadow(0 0 24px rgba(0, 242, 254, 0.6));
    }
}

@keyframes appLoadBar {
    0% {
        transform: translateX(-60%);
    }

    50% {
        transform: translateX(30%);
    }

    100% {
        transform: translateX(130%);
    }
}

@keyframes appChipPulse {

    0%,
    100% {
        transform: translateY(0);
        box-shadow: 0 0 16px rgba(0, 242, 254, 0.14);
    }

    50% {
        transform: translateY(-1px);
        box-shadow: 0 0 26px rgba(0, 242, 254, 0.28);
    }
}

/* WELCOME SCREEN */
#welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:
        radial-gradient(circle at top left,
            rgba(0, 242, 254, 0.18) 0%,
            transparent 42%),
        radial-gradient(circle at top right,
            rgba(255, 0, 85, 0.14) 0%,
            transparent 42%),
        linear-gradient(145deg, #02050c 0%, #050a14 55%, #03060d 100%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    animation: fadeIn 1s ease;
    isolation: isolate;
}

#welcome-screen::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -20%;
    width: 140%;
    height: 200%;
    background:
        radial-gradient(circle at 30% 20%,
            rgba(0, 242, 254, 0.15) 0%,
            transparent 50%),
        radial-gradient(circle at 70% 60%,
            rgba(255, 0, 85, 0.1) 0%,
            transparent 55%);
    pointer-events: none;
    z-index: 1;
    animation: heroMeshSlow 18s ease-in-out infinite alternate;
}

#welcome-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(1, 4, 10, 0.7);
    z-index: 0;
    pointer-events: none;
}

@keyframes heroMeshSlow {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.1) translate(5%, 2%);
    }
}

.welcome-content {
    text-align: center;
    max-width: 650px;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg,
            rgba(18, 18, 24, 0.8),
            rgba(5, 5, 10, 0.75));
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(0, 242, 254, 0.35);
    border-radius: 34px;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        inset 0 0 40px rgba(255, 255, 255, 0.02);
}

.welcome-logo {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: glow 2s ease-in-out infinite;
    margin-bottom: 20px;
}

.welcome-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.welcome-logo svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes glow {

    0%,
    100% {
        filter: drop-shadow(0 0 20px rgba(0, 242, 254, 0.4));
    }

    50% {
        filter: drop-shadow(0 0 40px rgba(0, 242, 254, 0.8));
    }
}

.welcome-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 12px;
    text-align: center;
    animation: slideUp 1s ease 0.2s both;
    line-height: 1.2;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

#plan-badge-title,
.plan-badge.grad {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-block;
    background-size: 200% 200% !important;
}

#plan-badge-title.plan-badge--free,
.plan-badge.plan-badge--free,
#plan-badge-title.grad,
.plan-badge.grad {
    background-image: linear-gradient(135deg, #fff, var(--primary)) !important;
    filter: drop-shadow(0 0 12px rgba(0, 242, 254, 0.4));
    animation: heroGradShift 6s ease-in-out infinite alternate;
}

#plan-badge-title.plan-badge--pro,
.plan-badge.plan-badge--pro {
    background-image: linear-gradient(135deg,
            #fff,
            #8b5cf6,
            var(--primary)) !important;
    filter: drop-shadow(0 0 15px rgba(139, 92, 246, 0.6));
    animation: heroGradShift 6s ease-in-out infinite alternate;
}

#plan-badge-title.plan-badge--empresa,
.plan-badge.plan-badge--empresa {
    background-image: linear-gradient(135deg,
            #fff,
            #ffcc00,
            #ff9900) !important;
    filter: drop-shadow(0 0 15px rgba(255, 204, 0, 0.6));
    animation: heroGradShift 6s ease-in-out infinite alternate;
}

#plan-badge-title.plan-badge--supremo,
.plan-badge.plan-badge--supremo {
    background-image: linear-gradient(135deg,
            var(--accent),
            #8b5cf6,
            var(--primary)) !important;
    filter: drop-shadow(0 0 18px rgba(255, 0, 85, 0.6));
    animation: heroGradShift 4s ease-in-out infinite alternate;
}

@keyframes heroGradShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.welcome-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 35px;
    text-align: center;
    animation: slideUp 1s ease 0.4s both;
}

.welcome-btn-container {
    animation: slideUp 1s ease 0.6s both;
}

.welcome-btn {
    padding: 14px 40px !important;
    font-size: 1rem;
    width: auto;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* WIZARD */
#onboarding-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:
        radial-gradient(circle at top left,
            rgba(0, 242, 254, 0.08) 0%,
            transparent 45%),
        radial-gradient(circle at bottom right,
            rgba(255, 0, 85, 0.06) 0%,
            transparent 45%),
        linear-gradient(135deg, #0a0d18 0%, #0f1424 50%, #0a0d18 100%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(25px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 60px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 242, 254, 0.7) rgba(255, 255, 255, 0.04);
}

.wizard-container {
    width: 750px;
    max-width: 90%;
    padding: 50px 40px;
    text-align: center;
    animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background: linear-gradient(135deg,
            rgba(22, 24, 32, 0.86),
            rgba(10, 12, 18, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-top: 1px solid rgba(0, 242, 254, 0.35);
    border-radius: 34px;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.7),
        inset 0 0 36px rgba(0, 242, 254, 0.03);
    position: relative;
    overflow: hidden;
    margin: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 242, 254, 0.7) transparent;
}

#onboarding-layer::-webkit-scrollbar,
.wizard-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#onboarding-layer::-webkit-scrollbar-track,
.wizard-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}

#onboarding-layer::-webkit-scrollbar-thumb,
.wizard-container::-webkit-scrollbar-thumb {
    background: rgba(0, 242, 254, 0.6);
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.2);
}

#onboarding-layer::-webkit-scrollbar-thumb:hover,
.wizard-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 242, 254, 1);
}

.wizard-container::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%,
            rgba(0, 242, 254, 0.12),
            transparent 70%);
    pointer-events: none;
    opacity: 0.6;
}

.wizard-container::after {
    content: "";
    position: absolute;
    bottom: -40%;
    left: -40%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 70% 80%,
            rgba(255, 0, 85, 0.08),
            transparent 65%);
    pointer-events: none;
    opacity: 0.4;
}

@media (min-width: 1600px) {
    .wizard-container {
        width: min(960px, 88vw);
    }
}

@media (max-width: 1200px) {
    #onboarding-layer {
        padding: 40px 14px;
    }

    .wizard-container {
        width: min(900px, 96vw);
        padding: 36px 28px;
    }
}

@media (max-width: 768px) {
    #onboarding-layer {
        padding: 24px 12px;
        align-items: flex-start;
    }

    .wizard-container {
        padding: 24px 16px;
        border-radius: 24px;
    }
}

@media (max-width: 560px) {
    #onboarding-layer {
        padding: 12px 8px;
        align-items: flex-start;
    }

    .wizard-container {
        width: 100%;
        max-width: 100%;
        padding: 18px 12px;
        border-radius: 18px;
    }
}

.btn-wizard-contrast {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.1),
            rgba(0, 242, 254, 0.02));
    border: 1px solid rgba(0, 242, 254, 0.25);
    color: #00f2fe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 10;
    backdrop-filter: blur(8px);
}

.btn-wizard-contrast:hover {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.2),
            rgba(0, 242, 254, 0.05));
    border-color: rgba(0, 242, 254, 0.5);
    box-shadow:
        0 0 25px rgba(0, 242, 254, 0.4),
        inset 0 0 10px rgba(0, 242, 254, 0.1);
    transform: scale(1.08);
}

.btn-wizard-contrast i {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.btn-wizard-contrast:hover i {
    transform: rotate(15deg) scale(1.1);
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.6);
}

.btn-wizard-contrast[aria-pressed="true"] {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.25),
            rgba(0, 242, 254, 0.1));
    border-color: rgba(0, 242, 254, 0.6);
    box-shadow:
        0 0 35px rgba(0, 242, 254, 0.5),
        inset 0 0 15px rgba(0, 242, 254, 0.2);
    color: #fff;
}

body.hc #onboarding-layer {
    background:
        radial-gradient(800px 600px at 20% 10%,
            rgba(255, 0, 85, 0.12),
            transparent 50%),
        radial-gradient(900px 700px at 80% 80%,
            rgba(0, 242, 254, 0.15),
            transparent 55%),
        linear-gradient(135deg,
            #050508 0%,
            #0a0f1f 25%,
            #0d1a2a 50%,
            #0a0f1f 75%,
            #050508 100%);
    filter: brightness(1.1) contrast(1.15);
}

body.hc .wizard-container {
    background: linear-gradient(180deg,
            rgba(0, 242, 254, 0.12) 0%,
            rgba(255, 0, 85, 0.06) 35%,
            rgba(10, 15, 31, 0.9) 60%,
            rgba(13, 26, 42, 1) 100%);
    border-color: rgba(0, 242, 254, 0.8);
    box-shadow:
        0 0 80px rgba(0, 242, 254, 0.35),
        0 0 50px rgba(255, 0, 85, 0.2),
        0 8px 32px rgba(0, 0, 0, 0.7),
        inset 0 1px 1px rgba(0, 242, 254, 0.2);
}

.btn-wizard-contrast.contrast-enabled {
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.2),
            rgba(255, 0, 85, 0.05));
    border-color: rgba(255, 0, 85, 0.6);
    color: #ff0055;
    box-shadow:
        0 0 30px rgba(255, 0, 85, 0.4),
        inset 0 0 15px rgba(255, 0, 85, 0.1);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.step-content {
    display: none;
    overflow-x: clip;
}

.step-content.active {
    display: block;
    animation: fadeInScale 0.5s ease;
}

.wizard-step-title {
    margin-bottom: 24px;
    font-size: clamp(1.5rem, 3.8vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    text-shadow:
        0 0 20px rgba(0, 242, 254, 0.6),
        0 4px 10px rgba(0, 0, 0, 0.8);
    position: relative;
    display: inline-block;
    width: 100%;
}

.wizard-step-title i,
.wizard-step-title em {
    color: var(--primary);
    font-style: normal;
}

.wizard-step-title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 2px;
    background: rgba(0, 242, 254, 0.5);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

.wizard-step-subtitle {
    color: var(--text-muted);
    margin-bottom: 24px;
    font-size: clamp(0.86rem, 2.2vw, 1rem);
}

.wizard-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 3px 10px;
    margin-right: 8px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    vertical-align: middle;
}

.wizard-flag-required {
    color: #072127;
    background: rgba(0, 242, 254, 0.9);
    border: 1px solid rgba(0, 242, 254, 0.95);
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.22);
}

.wizard-flag-optional {
    color: #d4e6f2;
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.36);
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

@media (min-width: 641px) {
    .profile-grid:has(> :nth-child(4):last-child) {
        grid-template-columns: 1fr 1fr;
    }
}

.profile-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 900px) {
    .profile-grid-3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {

    .form-grid,
    .profile-grid,
    .profile-grid-3 {
        grid-template-columns: 1fr;
    }

    .wizard-buttons {
        flex-direction: column;
        gap: 10px;
    }
}

.profile-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03),
            rgba(0, 0, 0, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 12px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    min-height: auto;
    backdrop-filter: blur(8px);
}

.profile-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(0, 242, 254, 0.08),
            transparent);
    transition: left 0.6s ease;
}

.profile-card:hover::before {
    left: 100%;
}

.profile-card:hover {
    border-color: rgba(0, 242, 254, 0.4);
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.08) 0%,
            rgba(0, 242, 254, 0.02) 100%);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 242, 254, 0.15);
}

.profile-card.selected {
    border-color: var(--primary);
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.15) 0%,
            rgba(0, 242, 254, 0.05) 100%);
    transform: translateY(-2px) scale(1.03);
    box-shadow:
        0 0 25px rgba(0, 242, 254, 0.35),
        inset 0 0 15px rgba(0, 242, 254, 0.1);
    animation: profileSelectPulse 3s ease-in-out infinite alternate;
}

@keyframes profileSelectPulse {

    0%,
    100% {
        box-shadow:
            0 0 25px rgba(0, 242, 254, 0.35),
            inset 0 0 15px rgba(0, 242, 254, 0.1);
        border-color: rgba(0, 242, 254, 0.8);
    }

    50% {
        box-shadow:
            0 0 40px rgba(0, 242, 254, 0.5),
            inset 0 0 25px rgba(0, 242, 254, 0.15);
        border-color: rgba(0, 242, 254, 1);
    }
}

.profile-card i {
    font-size: 1.8rem;
    color: var(--primary);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.3);
}

.profile-card:hover i {
    transform: scale(1.1) rotate(3deg);
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.5);
}

.profile-card.selected i {
    transform: scale(1.2) rotate(-3deg);
    text-shadow: 0 0 25px rgba(0, 242, 254, 0.8);
}

/* --- THEME OVERRIDES FOR STEP 3: SALUD / MEDICAL (Cyan & Blue Calm Theme) --- */
.profile-card[data-usertype="medical"]:hover,
.profile-card[data-medicalprofile]:hover {
    border-color: rgba(0, 191, 255, 0.35);
    background: linear-gradient(135deg,
            rgba(0, 191, 255, 0.08) 0%,
            rgba(0, 191, 255, 0.02) 100%);
    box-shadow: 0 8px 18px rgba(0, 191, 255, 0.12);
}

.profile-card[data-usertype="medical"].selected,
.profile-card[data-medicalprofile].selected {
    border-color: #5cc8ff;
    background: linear-gradient(135deg,
            rgba(0, 191, 255, 0.14) 0%,
            rgba(0, 191, 255, 0.04) 100%);
    box-shadow:
        0 0 18px rgba(0, 191, 255, 0.25),
        inset 0 0 10px rgba(0, 191, 255, 0.08);
    animation: profileSelectPulseMedical 3s ease-in-out infinite alternate;
}

.profile-card[data-usertype="medical"] i,
.profile-card[data-medicalprofile] i {
    color: #5cc8ff;
}

.profile-card[data-usertype="medical"]:hover i,
.profile-card[data-medicalprofile]:hover i {
    text-shadow: 0 0 10px rgba(0, 191, 255, 0.35);
}

.profile-card[data-usertype="medical"].selected i,
.profile-card[data-medicalprofile].selected i {
    text-shadow: 0 0 16px rgba(0, 191, 255, 0.45);
}

@keyframes profileSelectPulseMedical {

    0%,
    100% {
        box-shadow:
            0 0 25px rgba(0, 191, 255, 0.4),
            inset 0 0 15px rgba(0, 191, 255, 0.15);
        border-color: rgba(0, 191, 255, 0.8);
    }

    50% {
        box-shadow:
            0 0 40px rgba(0, 191, 255, 0.6),
            inset 0 0 25px rgba(0, 191, 255, 0.2);
        border-color: #00bfff;
    }
}

/* --- THEME OVERRIDES FOR STEP 3: FITNESS (Magenta Energy Theme) --- */
.profile-card[data-usertype="fitness"]:hover,
.profile-card[data-fitness]:hover {
    border-color: rgba(255, 0, 85, 0.35);
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.08) 0%,
            rgba(255, 0, 85, 0.02) 100%);
    box-shadow: 0 8px 18px rgba(255, 0, 85, 0.12);
}

.profile-card[data-usertype="fitness"].selected,
.profile-card[data-fitness].selected {
    border-color: #ff0055;
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.14) 0%,
            rgba(255, 0, 85, 0.04) 100%);
    box-shadow:
        0 0 18px rgba(255, 0, 85, 0.25),
        inset 0 0 10px rgba(255, 0, 85, 0.08);
    animation: profileSelectPulseFitness 2s ease-in-out infinite alternate;
}

.profile-card[data-usertype="fitness"] i,
.profile-card[data-fitness] i {
    color: #ff0055;
}

.profile-card[data-usertype="fitness"]:hover i,
.profile-card[data-fitness]:hover i {
    text-shadow: 0 0 10px rgba(255, 0, 85, 0.35);
}

.profile-card[data-usertype="fitness"].selected i,
.profile-card[data-fitness].selected i {
    text-shadow: 0 0 16px rgba(255, 0, 85, 0.45);
}

@keyframes profileSelectPulseFitness {

    0%,
    100% {
        box-shadow:
            0 0 25px rgba(255, 0, 85, 0.4),
            inset 0 0 15px rgba(255, 0, 85, 0.15);
        border-color: rgba(255, 0, 85, 0.8);
    }

    50% {
        box-shadow:
            0 0 40px rgba(255, 0, 85, 0.6),
            inset 0 0 25px rgba(255, 0, 85, 0.2);
        border-color: #ff0055;
    }
}

/* --- THEME OVERRIDES FOR STEP 3: WELLNESS (Neon Green Theme) --- */
.profile-card[data-usertype="wellness"]:hover,
.profile-card[data-wellnessprofile]:hover {
    border-color: rgba(0, 255, 136, 0.35);
    background: linear-gradient(135deg,
            rgba(0, 255, 136, 0.08) 0%,
            rgba(0, 255, 136, 0.02) 100%);
    box-shadow: 0 8px 18px rgba(0, 255, 136, 0.12);
}

.profile-card[data-usertype="wellness"].selected,
.profile-card[data-wellnessprofile].selected {
    border-color: #00ff88;
    background: linear-gradient(135deg,
            rgba(0, 255, 136, 0.14) 0%,
            rgba(0, 255, 136, 0.04) 100%);
    box-shadow:
        0 0 18px rgba(0, 255, 136, 0.25),
        inset 0 0 10px rgba(0, 255, 136, 0.08);
    animation: profileSelectPulseWellness 2s ease-in-out infinite alternate;
}

.profile-card[data-usertype="wellness"] i,
.profile-card[data-wellnessprofile] i {
    color: #00ff88;
}

.profile-card[data-usertype="wellness"]:hover i,
.profile-card[data-wellnessprofile]:hover i {
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.35);
}

.profile-card[data-usertype="wellness"].selected i,
.profile-card[data-wellnessprofile].selected i {
    text-shadow: 0 0 16px rgba(0, 255, 136, 0.45);
}

@keyframes profileSelectPulseWellness {

    0%,
    100% {
        box-shadow:
            0 0 25px rgba(0, 255, 136, 0.4),
            inset 0 0 15px rgba(0, 255, 136, 0.15);
        border-color: rgba(0, 255, 136, 0.8);
    }

    50% {
        box-shadow:
            0 0 40px rgba(0, 255, 136, 0.6),
            inset 0 0 25px rgba(0, 255, 136, 0.2);
        border-color: #00ff88;
    }
}

/* --- THEME OVERRIDES FOR STEP 3: BOTH (Indigo & Cyan Professional Theme) --- */
.profile-card[data-usertype="both"]:hover {
    border-color: rgba(124, 131, 255, 0.35);
    background: linear-gradient(135deg,
            rgba(124, 131, 255, 0.08) 0%,
            rgba(0, 242, 254, 0.08) 100%);
    box-shadow: 0 8px 18px rgba(124, 131, 255, 0.12);
}

.profile-card[data-usertype="both"].selected {
    border-color: #7c83ff;
    background: linear-gradient(135deg,
            rgba(124, 131, 255, 0.12) 0%,
            rgba(0, 242, 254, 0.12) 100%);
    box-shadow:
        0 0 18px rgba(124, 131, 255, 0.25),
        inset 0 0 10px rgba(0, 242, 254, 0.12);
    animation: profileSelectPulseBoth 2.5s ease-in-out infinite alternate;
}

.profile-card[data-usertype="both"] i {
    background: linear-gradient(135deg, #7c83ff, #00f2fe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.profile-card[data-usertype="both"]:hover i {
    filter: drop-shadow(0 0 6px rgba(124, 131, 255, 0.4));
}

.profile-card[data-usertype="both"].selected i {
    filter: drop-shadow(0 0 10px rgba(124, 131, 255, 0.6));
}

@keyframes profileSelectPulseBoth {

    0%,
    100% {
        box-shadow:
            0 0 25px rgba(112, 0, 255, 0.4),
            inset 0 0 15px rgba(0, 242, 254, 0.2);
        border-image: linear-gradient(45deg, #7000ff, #00f2fe) 1;
    }

    50% {
        box-shadow:
            0 0 45px rgba(112, 0, 255, 0.6),
            inset 0 0 25px rgba(0, 242, 254, 0.3);
        border-image: linear-gradient(45deg, #7000ff, #00f2fe) 1;
    }
}

.profile-card span,
.profile-card p {
    font-size: 0.85rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.9);
}

.form-input {
    width: 100%;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03),
            rgba(0, 0, 0, 0.15));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 16px 20px;
    border-radius: 12px;
    outline: none;
    font-size: 1rem;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    color-scheme: dark;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    font-family: "Outfit", sans-serif;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-input option {
    background: #0d1117;
    color: #fff;
    padding: 12px;
}

.form-input:hover {
    border-color: rgba(0, 242, 254, 0.3);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 242, 254, 0.02));
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px rgba(0, 242, 254, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.05),
            rgba(0, 0, 0, 0.3));
    transform: translateY(-2px);
}

select.form-input {
    appearance: none;
    color-scheme: dark;
    background-color: #0a111b;
    color: #eaf8ff;
    border: 1px solid rgba(0, 242, 254, 0.24);
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bff7ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"),
        linear-gradient(135deg, rgba(0, 242, 254, 0.1), rgba(8, 14, 24, 0.88));
    background-repeat: no-repeat, no-repeat;
    background-position:
        right 16px center,
        0 0;
    background-size:
        16px,
        100% 100%;
    padding-right: 48px;
    box-shadow:
        inset 0 0 0 1px rgba(0, 242, 254, 0.08),
        inset 0 8px 16px rgba(0, 0, 0, 0.18);
}

#onboarding-layer select.form-input {
    color-scheme: dark;
}

select.form-input:hover {
    border-color: rgba(0, 242, 254, 0.5);
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f2fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"),
        linear-gradient(135deg, rgba(0, 242, 254, 0.14), rgba(10, 18, 30, 0.92));
    background-repeat: no-repeat, no-repeat;
    background-position:
        right 16px center,
        0 0;
    background-size:
        16px,
        100% 100%;
}

select.form-input:focus {
    background-image:
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300f2fe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"),
        linear-gradient(135deg, rgba(0, 242, 254, 0.18), rgba(8, 15, 26, 0.96));
    background-repeat: no-repeat, no-repeat;
    background-position:
        right 16px center,
        0 0;
    background-size:
        16px,
        100% 100%;
}

select.form-input option {
    background: #0a111b;
    color: #f4fbff;
}

select.form-input option[value=""] {
    color: #9ec7d3;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.wizard-step3-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}

.wizard-step3-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03),
            rgba(0, 0, 0, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
}

.wizard-step3-title {
    margin: 0 0 10px;
    font-size: 0.88rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.wizard-step3-title i {
    color: var(--primary);
}

.wizard-step3-usertype-grid {
    gap: 10px;
    margin-top: 0;
}

.wizard-step3-usertype-card {
    padding: 18px;
}

.wizard-step3-usertype-card h3 {
    margin: 8px 0 4px;
}

.wizard-step3-usertype-card small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.wizard-step3-medical-grid {
    gap: 10px;
    margin-top: 0;
}

.wizard-step3-fitness-grid {
    gap: 10px;
    margin-top: 0;
    grid-template-columns: repeat(3, 1fr);
}

.wizard-step3-option-card {
    padding: 14px;
}

.wizard-step3-option-card h3 {
    margin: 6px 0 2px;
    font-size: 0.86rem;
}

.wizard-step3-form-grid {
    margin-top: 12px;
}

.wizard-step3-input {
    font-size: 0.9rem;
}

.wizard-step3-actions {
    margin-top: 22px;
}

@media (max-width: 900px) {
    .wizard-step3-fitness-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {

    .wizard-step3-usertype-grid,
    .wizard-step3-fitness-grid {
        grid-template-columns: 1fr;
    }

    .wizard-step3-medical-grid {
        grid-template-columns: 1fr;
    }
}

.wizard-step5-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}

.wizard-step5-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.wizard-step5-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03),
            rgba(0, 0, 0, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
}

.wizard-step5-title {
    margin: 0 0 10px;
    font-size: 0.88rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.wizard-step5-title i {
    color: var(--primary);
}

.wizard-step5-card .form-input {
    margin-bottom: 12px;
}

.wizard-step5-card .form-input:last-child {
    margin-bottom: 0;
}

.wizard-step5-frequency {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 0;
}

.wizard-step5-frequency-card {
    min-height: 104px;
    padding: 14px;
}

.wizard-step5-frequency-card h3 {
    font-size: 0.9rem;
    margin: 6px 0 0;
}

.wizard-step5-equipment-grid {
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.wizard-step5-actions {
    margin-top: 20px;
}

@media (max-width: 900px) {
    .wizard-step5-grid {
        grid-template-columns: 1fr;
    }

    .wizard-step5-frequency {
        grid-template-columns: 1fr;
    }

    .wizard-step5-equipment-grid {
        grid-template-columns: 1fr;
    }
}

.wizard-step6-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 8px;
}

.wizard-step6-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03),
            rgba(0, 0, 0, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px;
}

.wizard-step6-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.wizard-step6-title {
    margin: 0 0 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wizard-step6-title i {
    color: var(--primary);
}

.wizard-step6-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.wizard-step6-refresh-btn {
    width: auto;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 0.78rem;
}

.wizard-step6-refresh-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.wizard-step6-reco-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wizard-step6-reco-item {
    border: 1px solid rgba(0, 242, 254, 0.2);
    border-radius: 12px;
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.1),
            rgba(8, 18, 30, 0.75));
    padding: 10px 12px;
}

.wizard-step6-reco-badge {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #d6f8ff;
    border: 1px solid rgba(0, 242, 254, 0.26);
    margin-bottom: 6px;
}

.wizard-step6-reco-text {
    margin: 0;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.35;
}

.wizard-step6-apply-btn {
    margin-top: 10px;
    width: auto;
    padding: 12px 16px;
    font-size: 0.82rem;
}

.wizard-step6-extra-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.wizard-step6-add-btn {
    width: auto;
    border-radius: 999px;
    padding: 12px 14px;
    font-size: 0.78rem;
}

.wizard-step6-extra-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.wizard-step6-extra-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(0, 242, 254, 0.12);
    border: 1px solid rgba(0, 242, 254, 0.22);
    font-size: 0.78rem;
}

.wizard-step6-extra-remove {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.wizard-step6-actions {
    margin-top: 20px;
}

.wizard-select {
    position: relative;
    margin-bottom: 12px;
    z-index: 1;
}

.wizard-native-select-hidden {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.wizard-select-trigger {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid rgba(0, 242, 254, 0.26);
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.1),
            rgba(8, 14, 24, 0.88));
    color: #eaf8ff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow:
        inset 0 0 0 1px rgba(0, 242, 254, 0.08),
        inset 0 8px 16px rgba(0, 0, 0, 0.18);
    font-size: 0.95rem;
}

.wizard-select-trigger i {
    color: #00f2fe;
    transition: transform 0.2s ease;
}

.wizard-select.is-open .wizard-select-trigger i {
    transform: rotate(180deg);
}

.wizard-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    border-radius: 12px;
    border: 1px solid rgba(0, 242, 254, 0.22);
    background: #09111c;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55);
    padding: 4px;
    display: none;
    z-index: 80;
    max-height: 190px;
    overflow: auto;
}

.wizard-select.is-open .wizard-select-menu {
    display: block;
}

.wizard-select.is-open {
    z-index: 90;
}

.wizard-select-option {
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #f4fbff;
    padding: 8px 10px;
    font-size: 0.9rem;
    cursor: pointer;
}

.wizard-select-option:hover,
.wizard-select-option.is-active {
    background: rgba(0, 242, 254, 0.14);
}

.wizard-select-option.is-placeholder {
    color: #9ec7d3;
}

@media (max-width: 640px) {
    .wizard-step6-extra-row {
        grid-template-columns: 1fr;
    }
}

.imc-result {
    background: rgba(0, 242, 254, 0.08);
    border: 1.5px solid rgba(0, 242, 254, 0.3);
    padding: 14px;
    border-radius: 12px;
    margin-top: 12px;
    animation: slideDown 0.4s ease;
    font-size: 0.9rem;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.checkbox-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.checkbox-item:hover {
    background: rgba(0, 242, 254, 0.08);
    transform: translateX(3px);
}

.checkbox-item input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
}

.wizard-buttons {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    justify-content: center;
}

.wizard-buttons button {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    padding: 16px 24px;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-next {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #000;
    box-shadow: 0 10px 25px rgba(0, 242, 254, 0.3);
}

.btn-next:hover {
    transform: translateY(-4px);
    box-shadow:
        0 15px 35px rgba(0, 242, 254, 0.5),
        inset 0 0 10px rgba(255, 255, 255, 0.4);
}

.btn-back {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.wizard-actions-optional {
    gap: 12px;
}

.wizard-actions-optional .btn-back {
    flex: 0.95 1 0;
}

.wizard-actions-optional .btn-optional-skip {
    flex: 1.25 1 0;
    background: rgba(255, 255, 255, 0.06);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.24);
}

.wizard-actions-optional .btn-next {
    flex: 1.3 1 0;
}

.wizard-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
    align-items: start;
}

.wizard-summary-row {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03),
            rgba(0, 0, 0, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: 0.9rem;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.wizard-summary-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--primary);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

@media (hover: hover) {
    .wizard-summary-row:hover {
        background: linear-gradient(135deg,
                rgba(0, 242, 254, 0.08),
                rgba(0, 242, 254, 0.02));
        border-color: rgba(0, 242, 254, 0.3);
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 242, 254, 0.15);
    }

    .wizard-summary-row:hover::before {
        opacity: 1;
    }
}

.wizard-summary-row span {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.wizard-summary-row strong {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    background: linear-gradient(135deg, #fff, var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@keyframes summarySlideUpRefined {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Stagger animations for summary rows */
/* animation-delay removed for GSAP */

/* animation-delay removed for GSAP */

/* animation-delay removed for GSAP */

/* animation-delay removed for GSAP */

/* animation-delay removed for GSAP */

/* animation-delay removed for GSAP */

/* animation-delay removed for GSAP */

/* animation-delay removed for GSAP */

/* animation-delay removed for GSAP */

/* animation-delay removed for GSAP */

.wizard-summary-modern {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    text-align: left;
}

.summary-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--glass-border);
}

.summary-hero-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.summary-hero-sub {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.summary-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.summary-badge {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 242, 254, 0.12);
    border: 1px solid rgba(0, 242, 254, 0.2);
    color: #c9f7ff;
    font-size: 0.75rem;
    font-weight: 600;
}

.summary-focus {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
}

.summary-focus-title {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.58px;
    color: var(--text-muted);
    font-weight: 700;
    flex: 0 0 auto;
    white-space: nowrap;
}

.summary-focus-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
}

.summary-pill {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    align-items: start;
}

.summary-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.summary-next {
    padding: 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-next-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.summary-next-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.summary-next-item {
    font-size: 0.85rem;
    color: #fff;
    display: flex;
    gap: 8px;
}

.summary-card {
    padding: 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: start;
    height: auto;
}

.summary-card-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.summary-row {
    display: grid;
    grid-template-columns: minmax(120px, 40%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    padding: 12px;
    margin-bottom: 8px;
    /* PERFORMANCE: Remove backdrop-filter as it causes jank when animating many rows */
    background: rgba(20, 25, 30, 0.95);
}

.summary-row:last-child {
    margin-bottom: 0;
}

.summary-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--primary);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
    opacity: 0;
    /* Changed from 0.5 to 0 so it only appears on hover as a neon effect */
    transition: opacity 0.4s ease;
}

@media (hover: hover) {
    .summary-row:hover {
        background: linear-gradient(135deg,
                rgba(0, 242, 254, 0.08),
                rgba(0, 242, 254, 0.02));
        border-color: rgba(0, 242, 254, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 242, 254, 0.15);
    }

    .summary-row:hover::before {
        opacity: 1;
    }
}

.summary-row span {
    color: var(--text-muted);
    line-height: 1.38;
}

.summary-row strong {
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff, var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: right;
    overflow-wrap: anywhere;
    line-height: 1.38;
}

#step-11 .summary-focus {
    flex-wrap: wrap;
    overflow: visible;
}

#step-11 .summary-focus-pills {
    flex-wrap: wrap;
}

/* Stagger animations for summary rows within cards */
.summary-row:nth-child(1) {
    animation-delay: 0.05s;
}

.summary-row:nth-child(2) {
    animation-delay: 0.1s;
}

.summary-row:nth-child(3) {
    animation-delay: 0.15s;
}

.summary-row:nth-child(4) {
    animation-delay: 0.2s;
}

.summary-row:nth-child(5) {
    animation-delay: 0.25s;
}

.summary-row:nth-child(6) {
    animation-delay: 0.3s;
}

.summary-row:nth-child(7) {
    animation-delay: 0.35s;
}

.summary-row:nth-child(8) {
    animation-delay: 0.4s;
}

.summary-row:nth-child(9) {
    animation-delay: 0.45s;
}

.summary-row:nth-child(10) {
    animation-delay: 0.5s;
}

.wizard-privacy-note {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    line-height: 1.5;
}

.wizard-progress {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.wizard-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), #0099cc);
    transition: width 0.3s ease;
}

.wizard-step-label {
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.wizard-error {
    background: rgba(255, 0, 85, 0.1);
    border: 1px solid #ff0055;
    color: #ffd6df;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.form-input.invalid {
    border-color: #ff0055;
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.3);
}

.water-tracker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.water-count {
    font-size: 1.5rem;
    font-weight: 800;
    color: #00f2fe;
    width: 40px;
    text-align: center;
}

.water-btn {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
    background: rgba(0, 242, 254, 0.1);
    border-color: var(--primary);
}

.water-progress {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden;
}

.water-bar {
    height: 100%;
    background: linear-gradient(90deg,
            var(--primary-dark) 0%,
            var(--primary) 50%,
            var(--primary-dark) 100%);
    background-size: 200% 100%;
    transition: width 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 10px;
    position: relative;
    animation: barShimmerFluid 2s linear infinite;
}

.water-bar::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 12px 4px var(--primary);
    opacity: 0.9;
}

@keyframes barShimmerFluid {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: 0% 0;
    }
}

.btn-neon.btn-small {
    padding: 8px 14px;
    font-size: 0.7rem;
}

.micro-goal-input {
    display: flex;
    gap: 8px;
    align-items: center;
}

.micro-goal-input .form-input {
    flex: 1;
}

.micro-goal-progress {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.micro-goal-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.micro-goal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.3));
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 10px 12px;
    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.micro-goal-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 0, 242, 254), 0.15);
    border-color: rgba(var(--primary-rgb, 0, 242, 254), 0.4);
}

.micro-goal-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #fff;
}

.micro-goal-label input {
    accent-color: var(--primary);
}

.micro-goal-item.done span {
    text-decoration: line-through;
    color: var(--text-muted);
}

.micro-goal-remove {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    color: #fff;
    border-radius: 999px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.micro-goal-remove:hover {
    background: rgba(255, 0, 85, 0.15);
    color: var(--accent);
    border-color: rgba(255, 0, 85, 0.5);
    transform: scale(1.1);
}

.micro-goal-feedback {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.micro-goal-feedback.success {
    color: var(--success);
}

.micro-goal-feedback.warn {
    color: var(--warning);
}

/* Premium Features */
.premium-card {
    background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.1),
            rgba(255, 165, 0, 0.1));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 16px;
    padding: 15px;
    margin-top: 20px;
    text-align: center;
    animation: glow-gold 3s infinite;
}

@keyframes glow-gold {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    }
}

.premium-btn {
    background: linear-gradient(135deg, #ffd700, #ffa500);
    color: #000;
    font-weight: bold;
    border: none;
    width: 100%;
    padding: 10px;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 10px;
    text-transform: uppercase;
    font-size: 0.8rem;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

.premium-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
}

/* Shopping List Checkboxes */
.shopping-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.shopping-item input[type="checkbox"] {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
}

.shopping-item.checked span {
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.7;
}

.user-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03),
            rgba(0, 0, 0, 0.25));
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 16px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    animation: dashboardBadgeAmbientPulse 4s ease-in-out infinite alternate;
}

.user-badge-inline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    box-shadow: inset 0 0 12px var(--primary);
    opacity: 0.15;
    pointer-events: none;
}

.user-badge-inline .badge-name {
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--primary), #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.user-badge-inline .badge-sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.6rem;
}

@keyframes dashboardBadgeAmbientPulse {
    0% {
        box-shadow:
            0 4px 15px rgba(0, 0, 0, 0.3),
            0 0 5px rgba(var(--primary), 0);
        border-color: rgba(255, 255, 255, 0.08);
    }

    100% {
        box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.4),
            0 0 15px var(--primary);
        border-color: var(--primary);
    }
}

#app-dashboard {
    display: none;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
    animation: fadeIn 1s ease;
}

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding: 20px 0;
    flex-wrap: wrap;
    gap: 15px;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-title-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.header-heart i {
    font-size: 1.25rem;
}

.user-badge {
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid var(--primary);
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    animation: slideInRight 0.8s ease;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.main-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 30px;
    align-items: start;
}

@media (max-width: 1100px) {
    .main-grid {
        grid-template-columns: 1fr;
    }

    .sidebar-ctrl {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

.sidebar-ctrl {
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: static;
    align-self: start;
    max-height: none;
    overflow: visible;
    background: radial-gradient(circle at 0% 0%,
            rgba(0, 242, 254, 0.12),
            rgba(0, 0, 0, 0.45));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    animation: slideInLeft 0.8s ease;
}

.sidebar-ctrl h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding: 0 4px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.92;
    position: relative;
}

.sidebar-ctrl h3::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.sidebar-ctrl h3::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg,
            rgba(0, 242, 254, 0.08),
            rgba(0, 242, 254, 0.92),
            rgba(255, 0, 85, 0.86),
            rgba(0, 242, 254, 0.08));
    background-size: 180% 100%;
    box-shadow:
        0 0 10px rgba(0, 242, 254, 0.45),
        0 0 16px rgba(255, 0, 85, 0.28);
    animation: controlHeadingFlow 4.2s linear infinite;
}

.control-section {
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Softer glass border */
    border-radius: 16px;
    overflow: hidden;
    background: rgba(11, 15, 20, 0.4);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.control-section:hover {
    border-color: rgba(0, 242, 254, 0.35);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}

#tour-utilities {
    border-color: rgba(0, 242, 254, 0.4);
    box-shadow: 0 14px 30px rgba(0, 242, 254, 0.18);
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.08),
            rgba(0, 0, 0, 0.22));
}

#tour-utilities .control-section-header {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.22),
            rgba(0, 0, 0, 0.2));
    padding: 16px 18px;
    font-size: 0.9rem;
}

#tour-utilities.open .control-section-header {
    box-shadow: inset 0 0 20px rgba(0, 242, 254, 0.2);
}

.control-section-header {
    width: 100%;
    padding: 16px 18px;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.control-section-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
            transparent 25%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 75%);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.control-section-header:hover::before,
.control-section[data-open="true"] .control-section-header::before {
    transform: translateX(120%);
}

.control-section[data-open="true"] .control-section-header span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d9faff;
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.28);
}

.control-section[data-open="true"] .control-section-header span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(0, 242, 254, 0.9) 45%,
            rgba(0, 242, 254, 0.2) 100%);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.55);
    animation: controlSectionPulse 2.2s ease-in-out infinite;
}

.control-section-body {
    display: flex;
    padding: 0 16px;
    flex-direction: column;
    gap: 12px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
        max-height 0.28s ease,
        padding 0.22s ease,
        opacity 0.2s ease;
}

.control-section[data-open="true"] .control-section-body {
    padding: 20px 18px;
    opacity: 1;
    pointer-events: auto;
}

.control-section[data-open="true"] .section-chevron {
    transform: rotate(180deg);
}

.control-section[data-open="true"] .control-section-header {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.2),
            rgba(0, 0, 0, 0.2));
    box-shadow: inset 0 0 20px rgba(0, 242, 254, 0.15);
}

.control-section.open .control-section-body,
.control-section[data-open="true"] .control-section-body {
    overflow: visible !important;
    pointer-events: auto;
}

.section-chevron {
    transition: transform 0.3s ease;
}

.control-section.open .section-chevron {
    transform: rotate(180deg);
}

.control-section.open .control-section-header {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.2),
            rgba(0, 0, 0, 0.2));
    box-shadow: inset 0 0 20px rgba(0, 242, 254, 0.15);
}

.control-section[data-open="true"] {
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(0, 242, 254, 0.2),
        0 0 22px rgba(0, 242, 254, 0.12);
    animation: controlSectionBreathe 4.8s ease-in-out infinite;
}

.control-section-header:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes controlHeadingFlow {
    0% {
        background-position: 0% 50%;
        opacity: 0.5;
    }

    50% {
        background-position: 100% 50%;
        opacity: 0.95;
    }

    100% {
        background-position: 0% 50%;
        opacity: 0.5;
    }
}

@keyframes controlSectionPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
}

@keyframes controlSectionBreathe {
    0% {
        box-shadow:
            0 10px 26px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(0, 242, 254, 0.16),
            0 0 16px rgba(0, 242, 254, 0.08);
    }

    50% {
        box-shadow:
            0 10px 26px rgba(0, 0, 0, 0.38),
            0 0 0 1px rgba(0, 242, 254, 0.24),
            0 0 28px rgba(0, 242, 254, 0.16);
    }

    100% {
        box-shadow:
            0 10px 26px rgba(0, 0, 0, 0.35),
            0 0 0 1px rgba(0, 242, 254, 0.16),
            0 0 16px rgba(0, 242, 254, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-ctrl h3::after {
        animation: none;
    }

    .control-section-header::before {
        display: none;
    }

    .control-section[data-open="true"],
    .control-section[data-open="true"] .control-section-header span::before {
        animation: none;
    }
}

.control-group label {
    display: flex;
    /* Use flex to align accent and text nicely */
    align-items: center;
    color: #8a9fc4;
    /* A sophisticated, slightly bluish gray */
    font-size: 0.72rem;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 1.8px;
    font-weight: 700;
}

/* Add a subtle cyan accent line before the text */
.control-group label::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 12px;
    background: #00f2fe;
    /* The same cyan color used elsewhere */
    margin-right: 8px;
    border-radius: 4px;
    opacity: 0.8;
    box-shadow: 0 0 6px rgba(0, 242, 254, 0.4);
}

.styled-select {
    width: 100%;
    background: #0b0f14;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: white;
    padding: 14px 16px;
    border-radius: 12px;
    outline: none;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.1px;
    color-scheme: dark;
}

.styled-select option {
    background: #11161d;
    color: #fff;
}

.styled-select option:checked {
    background: #1a222c;
    color: #fff;
}

.styled-select option:hover,
.styled-select option:focus {
    background: #161e26;
    color: #fff;
}

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(11, 15, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    padding: 16px 18px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1px;
    transition: all 0.2s ease;
}

.custom-select-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.custom-select-value .opt-emoji,
.custom-select-option .opt-emoji {
    font-family:
        "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1rem;
    line-height: 1;
}

.custom-select-option .opt-text,
.custom-select-value .opt-text {
    display: inline-block;
}

.custom-select-trigger i {
    font-size: 0.7rem;
    opacity: 0.7;
}

.custom-select.is-open .custom-select-trigger {
    border-color: rgba(0, 242, 254, 0.7);
    box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.25);
}

.custom-select.is-disabled .custom-select-trigger {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

.custom-select.is-disabled .custom-select-trigger i {
    opacity: 0.35;
}

.custom-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #0f141b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 6px;
    display: none;
    z-index: 30;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    transform: translateZ(0);
    backface-visibility: hidden;
}

.custom-select-menu::before {
    content: none;
}

.custom-select.is-open .custom-select-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.custom-select-option {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-select-option:hover {
    background: rgba(0, 242, 254, 0.08);
    border-color: rgba(0, 242, 254, 0.35);
    color: var(--primary);
}

.custom-select-option.active {
    background: rgba(0, 242, 254, 0.16);
    border-color: rgba(0, 242, 254, 0.6);
    color: var(--primary);
}

.select-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 0;
    width: 0;
    display: none;
}

.styled-select:focus {
    border-color: rgba(0, 242, 254, 0.7);
    box-shadow: 0 0 0 1px rgba(0, 242, 254, 0.25);
}

.scope-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
    padding: 0;
    background: transparent;
    border: none;
}

.scope-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    /* Brighter border */
    color: rgba(255, 255, 255, 0.65);
    /* More visible text */
    padding: 18px 10px;
    border-radius: 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: none;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-direction: column;
    /* Icon stacked over text like the picture */
    box-shadow: none;
    width: 100%;
    min-height: 90px;
    position: relative;
    overflow: hidden;
}

.scope-pill-text {
    display: block;
    text-align: center;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

/* Subtle icon inside pill */
.scope-pill .scope-pill-icon {
    font-size: 1.1rem;
    opacity: 0.85;
    /* Brighter icon */
    margin-bottom: 4px;
}

/* Subtitle for the pills to match reference */
.scope-pill-subtitle {
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    /* Slightly brighter subtitle */
    margin-top: 4px;
    line-height: 1.2;
}

.scope-pill-badge {
    font-size: 0.48rem;
    padding: 1px 5px;
    border-radius: 999px;
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.35),
            rgba(255, 153, 0, 0.3));
    border: 1px solid rgba(255, 204, 0, 0.5);
    color: #1a1400;
    font-weight: 800;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.scope-pill.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.scope-pill.is-generation-locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: saturate(0.4);
}

.scope-pill:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.07);
}

.scope-pill.active {
    background: rgba(0, 136, 204, 0.08);
    /* Faint teal wash */
    border-color: #00f2fe;
    /* Bright neon cyan border */
    color: #00f2fe;
    /* Bright cyan text */
    box-shadow:
        0 0 16px rgba(0, 242, 254, 0.15),
        inset 0 0 16px rgba(0, 242, 254, 0.1);
}

.scope-pill.active .scope-pill-icon {
    opacity: 1;
}

.scope-pill.active .scope-pill-subtitle {
    color: rgba(0, 242, 254, 0.7);
}

/* Premium Styling specifically for "Modo de Salida" pills */
#result-mode-segmented .scope-pill {
    min-height: 105px;
    background: linear-gradient(180deg, rgba(20, 24, 34, 0.6), rgba(12, 16, 24, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    align-items: flex-start;
    padding: 16px;
    text-align: left;
    justify-content: flex-start;
}

#result-mode-segmented .scope-pill .scope-pill-icon {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: #7be9ff;
    font-family:
        "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    filter: drop-shadow(0 2px 4px rgba(0, 242, 254, 0.3));
}

#result-mode-segmented .scope-pill .scope-pill-text {
    text-align: left;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

#result-mode-segmented .scope-pill .scope-pill-subtitle {
    text-align: left;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
}

#result-mode-segmented .scope-pill:hover {
    background: linear-gradient(180deg, rgba(28, 34, 46, 0.8), rgba(16, 22, 32, 0.9));
    border-color: rgba(0, 242, 254, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 242, 254, 0.1);
}

#result-mode-segmented .scope-pill.active {
    background: linear-gradient(180deg, rgba(0, 80, 150, 0.15), rgba(0, 242, 254, 0.05));
    border: 1px solid #00f2fe;
    box-shadow:
        inset 0 0 20px rgba(0, 242, 254, 0.1),
        0 8px 24px rgba(0, 242, 254, 0.2);
}

#result-mode-segmented .scope-pill.active .scope-pill-text {
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.6);
}

#result-mode-segmented .scope-pill.active .scope-pill-subtitle {
    color: rgba(0, 242, 254, 0.9);
}

/* Secondary "small" variations for options like "Día", "Semana" */
.scope-segmented.is-small {
    display: flex;
    /* Override grid */
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.scope-segmented.is-small .scope-pill {
    flex: 1 1 auto;
    flex-direction: row;
    /* Icon and text side-by-side */
    min-height: 48px;
    /* Shorter height */
    padding: 10px 18px;
    border-radius: 999px;
    /* Fully rounded pill shape */
    font-size: 0.8rem;
    width: auto;
    justify-content: center;
}

.scope-segmented.is-small .scope-pill-text {
    white-space: nowrap;
    /* Keep text on one line */
}

.scope-segmented.is-small .scope-pill .scope-pill-icon {
    margin-bottom: 0;
    margin-right: 6px;
    font-size: 1rem;
}

/* Specific styling for the PRO badge in small pills */
.scope-segmented.is-small .scope-pill-badge {
    margin-left: 6px;
}

@media (max-width: 420px) {
    .scope-segmented {
        gap: 5px;
        padding: 3px;
    }

    .scope-pill {
        font-size: 0.58rem;
        min-height: 42px;
        padding: 6px 5px;
        border-radius: 11px;
    }

    .scope-pill-badge {
        font-size: 0.44rem;
        padding: 1px 4px;
        letter-spacing: 0.4px;
    }
}

.scope-select-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 0;
}

.plan-selection-summary {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    letter-spacing: 0.2px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.plan-selection-main {
    flex: 1 1 240px;
    min-width: 0;
}

.plan-selection-mini-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    border: 1px solid rgba(0, 242, 254, 0.28);
    background: rgba(0, 242, 254, 0.12);
    color: rgba(223, 252, 255, 0.98);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* AI-UX: chips de uso/cuotas (sustituyen al texto plano "Consultas mes: X · Imágenes mes: Y"). */
.usage-chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    line-height: 1.4;
}

.usage-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

.usage-chip-label {
    opacity: 0.85;
    font-weight: 600;
}

.usage-chip-value {
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.usage-chip--ok {
    border-color: rgba(140, 232, 142, 0.38);
    background: rgba(140, 232, 142, 0.10);
    color: #e2ffe7;
}
.usage-chip--ok .usage-chip-value {
    background: rgba(140, 232, 142, 0.22);
}

.usage-chip--warn {
    border-color: rgba(255, 184, 0, 0.5);
    background: rgba(255, 184, 0, 0.14);
    color: #fff1cc;
}
.usage-chip--warn .usage-chip-value {
    background: rgba(255, 184, 0, 0.28);
}

.usage-chip--alert {
    border-color: rgba(255, 90, 90, 0.55);
    background: rgba(255, 90, 90, 0.16);
    color: #ffe2e2;
}
.usage-chip--alert .usage-chip-value {
    background: rgba(255, 90, 90, 0.32);
}

.usage-chip--info {
    border-color: rgba(0, 242, 254, 0.38);
    background: rgba(0, 242, 254, 0.10);
    color: #d9fbff;
}
.usage-chip--info .usage-chip-value {
    background: rgba(0, 242, 254, 0.20);
}

.plan-info-banner {
    margin: 8px 0 6px;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0, 242, 254, 0.28);
    background:
        radial-gradient(120% 160% at 0% 0%,
            rgba(0, 242, 254, 0.16),
            rgba(0, 242, 254, 0) 65%),
        linear-gradient(180deg, rgba(11, 26, 35, 0.92), rgba(8, 19, 27, 0.9));
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}

.plan-info-title {
    font-weight: 800;
    color: #eaffff;
    font-size: 0.84rem;
    letter-spacing: 0.15px;
}

.plan-info-text {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.75rem;
    margin-top: 5px;
    line-height: 1.35;
}

.privacy-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    line-height: 1.5;
}

.privacy-content {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.privacy-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    line-height: 1.5;
}

.btn-soft {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
}

.btn-soft:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.alert-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(10, 16, 24, 0.92), rgba(5, 10, 16, 0.88));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

.alert-card h4 {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
}

.alert-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
}

.support-feedback-card {
    gap: 12px;
}

.support-feedback-actions .btn-soft,
.support-feedback-actions .btn-neon {
    min-height: 46px;
}

.btn-danger {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 0, 85, 0.35);
    background: rgba(255, 0, 85, 0.12);
    color: #ffd6e5;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 800;
    font-size: 0.8rem;
}

.btn-danger:hover {
    background: rgba(255, 0, 85, 0.18);
    transform: translateY(-1px);
}

.ai-personalization[data-open="true"] .control-section-body,
.ai-personalization.open .control-section-body {
    gap: 14px;
}

.ai-personalization-intro {
    padding: 12px 14px 13px;
    border-radius: 14px;
    border: 1px solid rgba(0, 242, 254, 0.24);
    background:
        radial-gradient(120% 180% at 0% 0%,
            rgba(0, 242, 254, 0.18),
            rgba(0, 242, 254, 0) 62%),
        linear-gradient(135deg,
            rgba(0, 120, 255, 0.12),
            rgba(0, 242, 254, 0.08));
    box-shadow: 0 10px 26px rgba(0, 242, 254, 0.16);
}

.ai-personalization-title {
    font-weight: 800;
    color: #eaffff;
    font-size: 0.92rem;
    margin-bottom: 5px;
    letter-spacing: 0.2px;
}

.ai-personalization-subtitle {
    color: rgba(230, 248, 255, 0.84);
    font-size: 0.77rem;
    line-height: 1.35;
}

.ai-personalization-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.ai-pill-note {
    margin-top: 8px;
    color: rgba(226, 242, 250, 0.76);
    font-size: 0.76rem;
    line-height: 1.45;
}

.travel-mode-note {
    max-width: 48ch;
}

.ai-sub-block {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ai-sub-block:first-child,
.ai-personalization-intro+.ai-sub-block {
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
}

.ai-sub-block-header {
    font-size: 0.78rem;
    font-weight: 800;
    color: rgba(188, 226, 246, 0.9);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-sub-block-header i {
    opacity: 0.82;
    color: rgba(0, 242, 254, 0.85);
}

/* AI-UX-GROUPS: micro-grupos dentro de cada sub-block (Nutrición / Entrenamiento)
   para reducir la sensación de "lista interminable de toggles idénticos". */
.ai-group {
    margin-top: 12px;
}

.ai-group:first-of-type {
    margin-top: 6px;
}

.ai-group-header {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(170, 200, 215, 0.78);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 0 0 7px 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ai-group-header i {
    font-size: 0.72rem;
    opacity: 0.7;
    color: rgba(0, 242, 254, 0.65);
}

/* dentro de un .ai-group, los grids quedan sin margen propio porque el espaciado
   ya lo controla el contenedor .ai-group */
.ai-group .ai-personalization-grid,
.ai-group .ai-preference-grid {
    margin-top: 0;
}

.ai-group .ai-personalization-grid + .ai-preference-grid {
    margin-top: 6px;
}

/* AI-UX-COMPACT: el panel "IA y Personalización" suma 7 toggles + 4 inputs y se
   sentía demasiado largo en el sidebar. Comprimimos padding, gaps y forzamos
   2 columnas en los toggles para reducir altura sin perder legibilidad.
   Scoped a `.ai-personalization` para no afectar otros paneles. */
.ai-personalization .ai-personalization-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.ai-personalization .ai-preference-grid {
    gap: 6px;
    margin-top: 8px;
}

.ai-personalization .ai-pill {
    padding: 7px 10px;
    border-radius: 11px;
}

.ai-personalization .ai-pill-label {
    font-size: 0.78rem;
    line-height: 1.22;
}

.ai-personalization .ai-pill-badge {
    padding: 1px 6px;
    font-size: 0.54rem;
}

.ai-personalization .ai-input {
    padding: 7px 10px 7px 32px;
    font-size: 0.82rem;
}

.ai-personalization .ai-input-icon {
    left: 10px;
    font-size: 0.85rem;
}

.ai-personalization .ai-sub-block {
    margin-top: 10px;
    padding-top: 10px;
}

.ai-personalization .ai-sub-block-header {
    margin-bottom: 6px;
    font-size: 0.72rem;
}

.ai-personalization .ai-group {
    margin-top: 8px;
}

.ai-personalization .ai-group:first-of-type {
    margin-top: 4px;
}

.ai-personalization .ai-group-header {
    margin-bottom: 4px;
    font-size: 0.64rem;
}

/* AI-UX-COMPACT-V2: cuando las tabs Nutrición/Entrenamiento están visibles,
   los sub-block-headers ("🍴 NUTRICIÓN" / "🏋 ENTRENAMIENTO") son redundantes
   porque la propia tab activa ya lo indica. Los ocultamos solo en ese caso
   (sibling general selector `~` sobre `.ai-personalization-tabs`). */
.ai-personalization .ai-personalization-tabs ~ .ai-sub-block > .ai-sub-block-header {
    display: none;
}

/* compactar la card "Personaliza tu IA / Elige qué bloque..." */
.ai-personalization .ai-personalization-intro {
    padding: 9px 12px 10px;
}

.ai-personalization .ai-personalization-title {
    font-size: 0.92rem;
    margin-bottom: 3px;
}

.ai-personalization .ai-personalization-subtitle {
    font-size: 0.72rem;
    line-height: 1.3;
}

/* compactar la pill MODO VIAJE y MODO FAMILIA (ambos destacados al mismo nivel)
   y reducir tipografía/margen de su nota larga */
.ai-personalization .travel-mode-toggle,
.ai-personalization .family-mode-toggle {
    padding: 7px 10px;
}

/* AI-UX-V4: el grupo de Modo familia se separa visualmente del Modo viaje
   con un pequeño gap superior. Solo aplica a supremos (display lo controla JS). */
.ai-personalization #tour-family-mode-group {
    margin-top: 6px;
}

.ai-personalization .ai-pill-note {
    margin-top: 6px;
    font-size: 0.7rem;
    line-height: 1.35;
}

.ai-personalization .travel-mode-note,
.ai-personalization .family-mode-note {
    max-width: 100%;
}

/* AI-UX-COMPACT-V3: utilidad <details> compartida para plegar bloques opcionales
   (nota del modo viaje, "Sabores y matices", "Detalles del entreno"). El usuario
   solo paga el coste vertical de la cabecera (~22px) hasta que decide expandir. */
.ai-personalization .ai-collapsible {
    display: block;
}

.ai-personalization .ai-collapsible > .ai-collapsible-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px;
    border-radius: 8px;
    transition: background 0.15s ease;
    outline: none;
    font-size: 0.7rem;
    color: rgba(180, 205, 220, 0.7);
    font-weight: 500;
}

.ai-personalization .ai-collapsible > .ai-collapsible-summary > i:first-child {
    font-size: 0.72rem;
    opacity: 0.7;
}

.ai-personalization .ai-collapsible > .ai-collapsible-summary::-webkit-details-marker {
    display: none;
}

.ai-personalization .ai-collapsible > .ai-collapsible-summary:hover {
    background: rgba(255, 255, 255, 0.04);
}

.ai-personalization .ai-collapsible > .ai-collapsible-summary:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.35);
}

.ai-personalization .ai-collapsible-hint {
    margin-left: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    color: rgba(160, 190, 205, 0.6);
    letter-spacing: 0.4px;
    text-transform: lowercase;
    font-style: italic;
}

.ai-personalization .ai-collapsible-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(160, 190, 205, 0.6);
    transition: transform 0.18s ease;
}

.ai-personalization .ai-collapsible[open] > .ai-collapsible-summary .ai-collapsible-chevron {
    transform: rotate(180deg);
}

/* el contenido del details necesita su propio respiro al abrirse */
.ai-personalization .ai-collapsible[open] > .ai-preference-grid,
.ai-personalization .ai-collapsible[open] > .ai-pill-note {
    margin-top: 6px;
}

/* travel-mode-info: sin padding extra a izquierda para alinearse con la pill */
.ai-personalization .travel-mode-info {
    margin-top: 4px;
}

.ai-personalization-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 2px 0 4px;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.18);
}

.ai-personalization-tab {
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: rgba(210, 230, 242, 0.8);
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: all 0.18s ease;
    cursor: pointer;
}

.ai-personalization-tab:hover {
    color: rgba(231, 248, 255, 0.95);
    background: rgba(255, 255, 255, 0.04);
}

.ai-personalization-tab.active {
    color: rgba(231, 248, 255, 0.98);
    border-color: rgba(0, 242, 254, 0.38);
    background: rgba(0, 242, 254, 0.14);
    box-shadow: 0 8px 18px rgba(0, 242, 254, 0.14);
}

.ai-personalization-tab i {
    font-size: 0.72rem;
}

.ai-pill {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
    position: relative;
}

.ai-pill:hover {
    border-color: rgba(0, 242, 254, 0.55);
    box-shadow: 0 10px 24px rgba(0, 242, 254, 0.18);
}

.ai-pill-label {
    flex: 1 1 auto;
    color: rgba(233, 244, 252, 0.95);
    font-weight: 600;
    line-height: 1.34;
    letter-spacing: 0.12px;
}

.ai-pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.ai-pill-badge-pro {
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.4),
            rgba(255, 140, 0, 0.4));
    border: 1px solid rgba(255, 198, 0, 0.6);
    color: #1c1400;
    box-shadow: 0 6px 14px rgba(255, 170, 0, 0.2);
}

.ai-pill-badge-preview {
    background: rgba(0, 242, 254, 0.14);
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: #9ff9ff;
    box-shadow: 0 6px 14px rgba(0, 242, 254, 0.12);
}

.ai-pill-badge-hot {
    animation: aiBadgePulse 1.8s ease-in-out infinite;
}

.ai-pill.is-locked {
    opacity: 0.62;
    border-style: dashed;
}

@keyframes aiBadgePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 6px 14px rgba(255, 170, 0, 0.24);
    }

    50% {
        transform: scale(1.06);
        box-shadow: 0 8px 18px rgba(255, 170, 0, 0.34);
    }
}

.ai-preference-grid {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.ai-input-wrap {
    position: relative;
}

.ai-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 242, 254, 0.7);
    font-size: 0.85rem;
    pointer-events: none;
}

.ai-input {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px 12px 10px 36px;
}

.ai-input:focus {
    border-color: rgba(0, 242, 254, 0.7);
    box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.2);
}

.pdf-dropzone {
    border: 2px dashed var(--glass-border);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease;
}

.pdf-dropzone:hover {
    border-color: var(--primary);
    background: rgba(0, 242, 254, 0.05);
    transform: scale(1.02);
}

.pdf-dropzone:active {
    transform: scale(0.99);
}

.control-status {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
}

.control-status[data-state="loaded"] {
    color: #0c0f12;
    background: linear-gradient(135deg,
            rgba(0, 255, 136, 0.95),
            rgba(0, 242, 254, 0.8));
    border-color: rgba(0, 255, 136, 0.6);
}

.control-status[data-state="loading"] {
    color: #1a1300;
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.9),
            rgba(255, 168, 0, 0.85));
    border-color: rgba(255, 204, 0, 0.6);
}

.control-status[data-state="error"] {
    color: #1a0508;
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.9),
            rgba(255, 95, 120, 0.85));
    border-color: rgba(255, 0, 85, 0.6);
}

.status-badge {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--success);
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 0.85rem;
    color: var(--success);
    margin-top: 10px;
    display: none;
    animation: slideDown 0.5s ease;
}

.pdf-status {
    margin-top: 12px;
    border-radius: 16px;
    padding: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdf-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pdf-status-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
}

.pdf-status-state {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pdf-status-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pdf-status-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.pdf-status-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    word-break: break-word;
}

.pdf-status[data-state="loaded"] {
    border-color: rgba(0, 255, 136, 0.45);
    box-shadow: 0 10px 22px rgba(0, 255, 136, 0.12);
}

.pdf-status[data-state="loading"] {
    border-color: rgba(255, 204, 0, 0.45);
    box-shadow: 0 10px 22px rgba(255, 204, 0, 0.12);
}

.pdf-status[data-state="error"] {
    border-color: rgba(255, 0, 85, 0.45);
    box-shadow: 0 10px 22px rgba(255, 0, 85, 0.12);
}

.alert-panel {
    background: rgba(255, 204, 0, 0.1);
    border: 2px solid var(--warning);
    padding: 20px;
    border-radius: 16px;
    margin-top: 15px;
    display: none;
    animation: slideDown 0.6s ease;
}

.alert-panel.danger {
    background: rgba(255, 0, 85, 0.1);
    border-color: var(--accent);
}

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

.plan-error-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.plan-error-title {
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-error-message {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.plan-error-debug {
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.24);
    padding: 8px 10px;
}

.plan-error-debug summary {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    font-weight: 700;
}

.plan-error-debug pre {
    margin: 8px 0 0;
    font-size: 0.7rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
    white-space: pre-wrap;
    word-break: break-word;
}

.plan-error-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.deficiency-list {
    margin: 15px 0;
    padding-left: 20px;
}

.deficiency-list li {
    margin: 8px 0;
    font-size: 0.9rem;
}

.results-area {
    display: none;
    flex-direction: column;
    gap: 30px;
}

.plan-card {
    display: none;
    grid-template-columns: 1.3fr 0.7fr;
    position: relative;
    overflow: hidden;
    min-height: 450px;
    animation: zoomIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
}

.plan-view-toggle {
    display: none;
    width: 100%;
    padding: 12px 12px 0;
    gap: 10px;
    grid-column: 1 / -1;
}

.plan-view-btn {
    flex: 1;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.92);
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.plan-view-btn.active {
    color: #00131b;
    border-color: transparent;
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.96),
            rgba(59, 213, 255, 0.92));
    box-shadow: 0 10px 24px rgba(0, 242, 254, 0.25);
}

.plan-view-btn:hover {
    border-color: rgba(0, 242, 254, 0.35);
    transform: translateY(-1px);
}

.workout-open-btn,
.workout-alt-btn {
    border-radius: 999px;
    border: 1px solid rgba(0, 242, 254, 0.35);
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.2),
            rgba(0, 153, 204, 0.2));
    color: #d8fbff;
    box-shadow: 0 8px 18px rgba(0, 242, 254, 0.14);
    text-transform: none;
    letter-spacing: 0.15px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 6px 12px;
    min-height: 32px;
    white-space: nowrap;
}

.workout-open-btn {
    margin-left: auto;
}

.workout-open-btn:hover,
.workout-alt-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(0, 242, 254, 0.2);
}

.workout-open-btn i,
.workout-alt-btn i {
    font-size: 0.72rem;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 900px) {
    .plan-card {
        grid-template-columns: 1fr;
    }

    .plan-view-toggle {
        display: flex !important;
    }

    .plan-card.view-recipe .exercise-side {
        display: none;
    }

    .plan-card.view-exercise .recipe-side {
        display: none;
    }
}

.workout-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 16000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(3, 8, 14, 0.55);
    backdrop-filter: blur(3px);
    padding: 14px;
    box-sizing: border-box;
}

.workout-drawer {
    width: min(980px, 96vw);
    max-height: min(92vh, 880px);
    background: linear-gradient(165deg,
            rgba(11, 16, 26, 0.98),
            rgba(6, 10, 18, 0.98));
    border: 1px solid rgba(0, 242, 254, 0.22);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.workout-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 8px;
    margin-bottom: 2px;
    background: linear-gradient(180deg,
            rgba(10, 15, 24, 0.94),
            rgba(10, 15, 24, 0.7));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.workout-drawer-kicker {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.62);
}

.workout-drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: auto;
    padding-right: 4px;
    padding-bottom: 4px;
    min-height: 0;
}

.workout-day-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
}

.workout-day-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: #fff;
    font-weight: 700;
    flex-wrap: wrap;
}

.workout-day-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.workout-day-head+.workout-day-meta {
    margin-bottom: 8px;
}

.workout-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    border: 1px solid rgba(0, 242, 254, 0.28);
    background: rgba(0, 242, 254, 0.1);
    color: #baf6ff;
    margin-bottom: 8px;
}

.workout-blocks-list {
    display: grid;
    gap: 8px;
}

.workout-block-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0;
    overflow: hidden;
    transition:
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.24s ease;
}

.workout-block-card:hover {
    border-color: rgba(0, 242, 254, 0.28);
    box-shadow: 0 8px 24px rgba(0, 242, 254, 0.1);
    transform: translateY(-1px);
}

.workout-block-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid transparent;
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

.workout-block-summary::-webkit-details-marker {
    display: none;
}

.workout-block-accordion[open] .workout-block-summary {
    border-bottom-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.02);
}

.workout-block-summary-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.workout-block-summary strong {
    color: #fff;
    font-size: 0.82rem;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.workout-block-metrics {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.workout-block-metrics span {
    font-size: 0.7rem;
    color: #bff7ff;
    border: 1px solid rgba(0, 242, 254, 0.2);
    border-radius: 999px;
    padding: 2px 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 242, 254, 0.08);
}

.workout-block-chevron {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #bff7ff;
    font-size: 0.66rem;
    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease;
    background: rgba(255, 255, 255, 0.02);
}

.workout-block-accordion[open] .workout-block-chevron {
    transform: rotate(180deg);
    border-color: rgba(0, 242, 254, 0.45);
    background: rgba(0, 242, 254, 0.12);
}

.workout-block-description {
    margin: 0 0 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.86);
}

.workout-block-content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0.65;
    transition:
        grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.24s ease;
}

.workout-block-accordion[open] .workout-block-content {
    grid-template-rows: 1fr;
    opacity: 1;
}

.workout-block-content-inner {
    overflow: hidden;
    padding: 10px;
    overflow-wrap: anywhere;
}

.workout-block-howto {
    margin: 0 0 6px;
    padding-left: 16px;
    display: grid;
    gap: 3px;
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.84);
}

.workout-block-note,
.workout-block-warning {
    margin-top: 6px;
    border-radius: 10px;
    padding: 7px 8px;
    font-size: 0.7rem;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.workout-block-note {
    border: 1px solid rgba(0, 242, 254, 0.18);
    background: rgba(0, 242, 254, 0.08);
    color: #c9f8ff;
}

.workout-block-warning {
    border: 1px solid rgba(255, 184, 77, 0.22);
    background: rgba(255, 184, 77, 0.08);
    color: #ffe3b2;
}

.workout-drawer-grid.single-day-view {
    grid-template-columns: minmax(0, 780px);
    justify-content: center;
}

@media (max-width: 900px) {
    .workout-drawer {
        width: min(760px, 98vw);
        max-height: min(94vh, 880px);
        padding: 14px;
        border-radius: 18px;
    }

    .workout-drawer-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }
}

@media (max-width: 640px) {
    .workout-drawer-overlay {
        padding: 0;
        align-items: flex-end;
        background: rgba(3, 8, 14, 0.72);
    }

    .workout-drawer {
        width: 100vw;
        max-height: 95vh;
        border-radius: 18px 18px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        padding: 12px;
    }

    .workout-drawer-head {
        gap: 10px;
    }

    .workout-drawer-kicker {
        font-size: 0.66rem;
        letter-spacing: 0.7px;
    }

    #workout-drawer-title {
        font-size: 1rem;
        line-height: 1.3;
        margin: 2px 0;
    }

    #workout-drawer-subtitle {
        font-size: 0.74rem;
        line-height: 1.35;
        color: rgba(255, 255, 255, 0.74);
    }

    .workout-day-card {
        padding: 10px;
        border-radius: 12px;
    }

    .workout-chip {
        font-size: 0.69rem;
        padding: 4px 7px;
    }

    .workout-block-summary {
        padding: 9px;
    }

    .workout-block-summary-right {
        gap: 6px;
        align-self: flex-start;
    }

    .workout-block-metrics {
        gap: 4px;
    }

    .workout-block-metrics span {
        font-size: 0.66rem;
        padding: 2px 6px;
    }
}

.recipe-side {
    padding: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), transparent);
    overflow-y: auto;
    max-height: 600px;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 242, 254, 0.7) rgba(255, 255, 255, 0.04);
}

.exercise-side {
    padding: 24px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 1px solid var(--glass-border);
    overflow-y: auto;
    max-height: 600px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 242, 254, 0.7) rgba(255, 255, 255, 0.04);
}

.exercise-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}

.exercise-head h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: #ecf8ff;
}

.exercise-head-title {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.exercise-head-title>span:last-child {
    color: #ff2b7a;
    text-shadow: 0 0 10px rgba(255, 43, 122, 0.25);
}

.exercise-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    filter: drop-shadow(0 0 12px rgba(255, 43, 122, 0.38));
}

.exercise-head-icon svg {
    width: 32px;
    height: 32px;
    display: block;
    overflow: visible;
}

.exercise-heart-path {
    animation: exerciseHeartPulse 1.9s ease-in-out infinite;
    transform-origin: 50% 50%;
}

.exercise-wave-path {
    stroke-dasharray: 56;
    stroke-dashoffset: 56;
    animation: exerciseWaveRun 2.2s linear infinite;
}

@keyframes exerciseHeartPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.92;
    }

    30% {
        transform: scale(1.06);
        opacity: 1;
    }

    55% {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

@keyframes exerciseWaveRun {
    0% {
        stroke-dashoffset: 56;
        opacity: 0.2;
    }

    22% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0.25;
    }
}

@media (prefers-reduced-motion: reduce) {

    .exercise-heart-path,
    .exercise-wave-path {
        animation: none !important;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

#exe-title {
    font-size: 1.22rem !important;
    line-height: 1.18;
    margin: 18px 0 14px !important;
}

.exercise-plan-preview {
    margin: 12px 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0, 242, 254, 0.22);
    background: rgba(0, 242, 254, 0.08);
    color: #c7f9ff;
    font-size: 0.78rem;
    line-height: 1.4;
}

.recipe-side::-webkit-scrollbar,
.exercise-side::-webkit-scrollbar {
    width: 6px;
}

.recipe-side::-webkit-scrollbar-track,
.exercise-side::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
}

.recipe-side::-webkit-scrollbar-thumb,
.exercise-side::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            rgba(0, 242, 254, 0.95),
            rgba(0, 242, 254, 0.35));
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.35);
}

.recipe-side::-webkit-scrollbar-thumb:hover,
.exercise-side::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            rgba(122, 247, 255, 0.95),
            rgba(0, 242, 254, 0.55));
    box-shadow: 0 0 14px rgba(0, 242, 254, 0.55);
}

.tag {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    background: rgba(0, 242, 254, 0.1);
    color: var(--primary);
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    animation: popIn 0.4s ease;
}

.tag.comfort {
    background: rgba(255, 0, 85, 0.1);
    color: var(--accent);
}

.tag.medical {
    background: rgba(255, 204, 0, 0.2);
    color: var(--warning);
}

.tag.meal-desayuno {
    background: rgba(255, 193, 7, 0.18);
    color: #ffd966;
}

.tag.meal-almuerzo {
    background: rgba(0, 229, 255, 0.18);
    color: var(--primary);
}

.tag.meal-cena {
    background: rgba(156, 39, 176, 0.2);
    color: #d7a2ff;
}

.tag.meal-snack {
    background: rgba(76, 175, 80, 0.2);
    color: #9dffb0;
}

.tag.restriction {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px dashed rgba(255, 255, 255, 0.2);
}

.tag.restriction-gluten {
    background: rgba(255, 87, 34, 0.2);
    color: #ffb199;
}

.tag.restriction-lacteos {
    background: rgba(3, 169, 244, 0.2);
    color: #9fdcff;
}

.tag.restriction-frutos {
    background: rgba(255, 152, 0, 0.2);
    color: #ffd199;
}

.tag.restriction-pescado {
    background: rgba(0, 188, 212, 0.2);
    color: #9ff3ff;
}

.tag.restriction-vegetariano {
    background: rgba(139, 195, 74, 0.2);
    color: #d7ff9f;
}

.macro-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.macro-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.macro-pill strong {
    color: #fff;
    font-weight: 700;
}

.instruction-step {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: start;
    animation: slideInLeft 0.5s ease;
}

.step-num {
    min-width: 28px;
    height: 28px;
    background: var(--primary);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.exercise-how-to {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.how-to-step {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: start;
    animation: fadeIn 0.5s ease;
}

.how-to-icon {
    width: 35px;
    height: 35px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: bold;
    flex-shrink: 0;
}

.chat-widget {
    /* CHAT-HEIGHT-V2: alto adaptable a pantallas grandes (TV 42", 28" 4K)
       y a escalados Windows 125%/150% (que reducen el viewport CSS). El cap
       anterior de 860px se quedaba corto en monitores grandes. V2.1: ajustado
       para no estirar demasiado en monitor estándar (cap base 1000px). */
    height: clamp(520px, 73vh, 1000px);
    display: flex;
    flex-direction: column;
    margin-top: 24px;
    background: linear-gradient(180deg,
            rgba(12, 16, 22, 0.78),
            rgba(8, 12, 16, 0.55));
    border: 1px solid rgba(0, 242, 254, 0.12);
    border-radius: 22px;
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(0, 242, 254, 0.08);
    overflow: hidden;
}

/* CHAT-HEIGHT-V2: en pantallas con altura física grande (TV 42" 4K nativa,
   monitores ultrawide verticales, etc.) permitir crecer aún más sin tocar
   el comportamiento de laptops normales. */
@media (min-height: 1100px) {
    .chat-widget {
        height: clamp(680px, 75vh, 1200px);
    }
}

/* CHAT-HEIGHT-V2: en pantallas con altura intermedia pero ancho amplio
   (típico de monitor 27"/28" a 125% de escala Windows ≈ viewport ~920-1020px
   de alto) damos un poco más de aire respecto al cálculo base. */
@media (min-height: 900px) and (max-height: 1099px) {
    .chat-widget {
        height: clamp(600px, 74vh, 980px);
    }
}

/* CHAT-HEIGHT-V2.2: TVs 42"/38" a 1080p físico con escalado Windows 125%/150%
   (viewport CSS efectivo ≈ 1536×864 o 1280×720) y monitores 27"+ con scaling
   parecido. Tienen viewport corto (< 900px) pero ancho cómodo (≥ 1280px), así
   que el chat se quedaba a 525-630px desperdiciando ~150px de espacio útil.
   Subimos a 85vh con cap 920px para que cuadre con el largo de la sidebar.
   No se solapa con las reglas (min-height: 900px+) anteriores. */
@media (min-width: 1280px) and (max-height: 899px) {
    .chat-widget {
        height: clamp(580px, 85vh, 920px);
    }
}

.chat-header {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.38),
            rgba(0, 0, 0, 0.08));
}

.chat-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-header h4 {
    margin: 0;
}

.chat-header-info small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
}

#chat-usage-counter {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 700;
    letter-spacing: 0.2px;
}

.chat-header-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chat-options {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
}

.chat-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.chat-select {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
}

.btn-chat-control {
    border: 1px solid rgba(0, 242, 254, 0.18);
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.18));
    color: white;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(0, 242, 254, 0.06);
}

.btn-chat-control-special {
    border-color: rgba(0, 242, 254, 0.75);
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.18),
            rgba(0, 120, 255, 0.2));
    box-shadow:
        0 0 22px rgba(0, 242, 254, 0.28),
        inset 0 0 0 1px rgba(0, 242, 254, 0.25);
    font-weight: 700;
}

.btn-chat-control-special:hover {
    box-shadow:
        0 0 30px rgba(0, 242, 254, 0.45),
        inset 0 0 0 1px rgba(0, 242, 254, 0.35);
}

.btn-chat-control-heart {
    border-color: rgba(255, 0, 85, 0.5);
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.22),
            rgba(255, 122, 217, 0.16));
    box-shadow:
        0 0 20px rgba(255, 0, 85, 0.25),
        inset 0 0 0 1px rgba(255, 0, 85, 0.18);
    font-weight: 700;
}

.btn-chat-control-heart:hover {
    border-color: rgba(255, 0, 85, 0.8);
    box-shadow:
        0 0 28px rgba(255, 0, 85, 0.4),
        inset 0 0 0 1px rgba(255, 0, 85, 0.28);
}

.btn-chat-control-heart {
    position: relative;
    overflow: hidden;
}

.btn-chat-control-heart::after {
    content: "";
    position: absolute;
    inset: -20% 0;
    width: 40%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent);
    animation: heartPremiumSweep 3.2s ease-in-out infinite;
    opacity: 0.35;
    pointer-events: none;
}

.btn-chat-control-heart.is-remind {
    border-color: rgba(255, 0, 85, 0.9);
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.32),
            rgba(255, 122, 217, 0.24));
    box-shadow:
        0 0 44px rgba(255, 0, 85, 0.75),
        inset 0 0 0 1px rgba(255, 0, 85, 0.5);
    animation: heartReminderGlow 1.05s ease-in-out infinite;
    transform: translateY(-2px) scale(1.07);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-chat-control-heart.is-remind i {
    text-shadow: 0 0 14px rgba(255, 0, 85, 0.95);
}

.btn-chat-control-heart.is-remind::before {
    content: "";
    position: absolute;
    inset: -10%;
    border-radius: 999px;
    background: radial-gradient(circle,
            rgba(255, 102, 178, 0.4) 0%,
            rgba(255, 0, 85, 0) 65%);
    animation: heartHaloPulse 1.4s ease-in-out infinite;
    z-index: 0;
}

.btn-chat-control-heart.is-remind::after {
    content: "";
    position: absolute;
    inset: -20% 0;
    width: 40%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.5),
            transparent);
    animation: heartPremiumSweep 2s ease-in-out infinite;
    z-index: 1;
}

.btn-chat-control-heart.is-remind span,
.btn-chat-control-heart.is-remind i {
    position: relative;
    z-index: 2;
}

.btn-chat-control-heart.is-remind .spark {
    position: absolute;
    right: 10px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 10px rgba(255, 0, 85, 0.9);
    animation: heartSparkle 1.4s ease-in-out infinite;
}

.btn-chat-control:hover {
    border-color: rgba(0, 242, 254, 0.7);
    box-shadow:
        0 10px 26px rgba(0, 242, 254, 0.22),
        inset 0 0 0 1px rgba(0, 242, 254, 0.18);
    transform: translateY(-1px);
}

.btn-chat-control.danger:hover {
    border-color: rgba(255, 0, 85, 0.6);
    box-shadow:
        0 10px 26px rgba(255, 0, 85, 0.25),
        inset 0 0 0 1px rgba(255, 0, 85, 0.18);
}

.chat-tips {
    padding: 12px 15px 16px 15px;
    border-top: 1px solid var(--glass-border);
}

.chat-tips-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.chat-tips-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.habits-modal {
    max-width: 896px;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 90vh;
    overflow: hidden;
    background: rgba(23, 35, 43, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 0 20px rgba(0, 229, 255, 0.18);
}

.habits-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
}

.habits-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.habits-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 242, 254, 0.18);
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: var(--primary, #00f2fe);
    box-shadow: 0 10px 24px rgba(0, 242, 254, 0.15);
}

.habits-header-left h3 {
    margin: 0;
    font-size: 1.02rem;
    letter-spacing: 0.2px;
}

.habits-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.habit-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #94a3b8;
    border-radius: 12px;
    padding: 8px 24px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 auto;
}

.habit-tab-icon {
    font-size: 0.9rem;
}

.habit-tab-label {
    font-weight: 600;
}

.habit-tab:hover {
    color: rgba(255, 255, 255, 0.9);
}

.habit-tab.is-active {
    color: #00e5ff;
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
}

.habits-panels {
    overflow: auto;
    padding: 32px;
    max-height: calc(90vh - 120px);
}

.habits-summary-layout {
    display: grid;
    gap: 28px;
}

@media (min-width: 860px) {
    .habits-summary-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .habits-summary-status {
        grid-column: 1 / -1;
    }
}

.habits-summary-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 24px;
    box-shadow: none;
}

.habits-summary-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.habits-summary-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.habits-summary-meta {
    font-size: 0.875rem;
    color: #94a3b8;
}

.habits-summary-ring {
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.habits-summary-ring-svg {
    width: 48px;
    height: 48px;
    transform: rotate(-90deg);
}

.habits-summary-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 4;
}

.habits-summary-ring-fill {
    fill: none;
    stroke: var(--primary, #00f2fe);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.25s ease;
}

.habits-summary-ring-label {
    position: absolute;
    font-size: 0.75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
}

.habits-summary-bar {
    margin-top: 16px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.habits-summary-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #00e5ff, #00f2ff);
    box-shadow: 0 0 14px rgba(0, 242, 255, 0.35);
    transition: width 0.25s ease;
}

.habits-summary-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.habits-summary-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #00e5ff;
}

.habits-summary-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.habits-summary-card-title {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.habits-summary-card-sub {
    color: #00e5ff;
    font-size: 0.75rem;
    font-weight: 600;
}

.habits-summary-card-sub i {
    color: var(--primary, #00f2fe);
    margin-right: 6px;
}

.habits-summary-pill {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.habits-summary-chip {
    margin-left: auto;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.2);
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: #00e5ff;
    font-weight: 800;
    font-size: 0.875rem;
}

.habits-summary-water-ctrl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.habits-summary-water-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-weight: 700;
}

.habits-summary-water-count span:first-child {
    font-size: 3.75rem;
    line-height: 1;
    color: #00e5ff;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.35);
}

.habits-summary-water-count span:last-child {
    font-size: 0.875rem;
    color: #94a3b8;
}

.habits-summary-sleep-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.habits-summary-sleep-row .sleep-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: none;
    border-radius: 12px;
    padding: 16px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 64px;
}

.habits-summary-sleep-row .sleep-pill i {
    font-size: 1rem;
}

.habits-summary-sleep-row .sleep-pill:hover {
    border-color: rgba(0, 242, 255, 0.35);
}

.habits-summary-sleep-row .sleep-pill:focus-visible {
    outline: 2px solid rgba(0, 242, 255, 0.5);
    outline-offset: 2px;
}

.habits-checkin-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.habits-checkin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 900px) {
    .habits-checkin-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.checkin-wide {
    grid-column: 1 / -1;
}

.checkin-section-divider {
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: none;
    justify-content: flex-end;
}

.checkin-section-divider .checkin-section-icon {
    display: none;
}

.checkin-section-divider .checkin-section-title {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    color: rgba(0, 242, 254, 0.7);
    text-align: right;
}

.checkin-section-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 242, 254, 0.4), transparent);
    opacity: 0.6;
    order: -1;
}

.checkin-notes {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.habits-modal .habits-checkin-layout .checkin-metric-strip {
    background: rgba(23, 35, 43, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    min-height: 72px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    box-shadow: none;
}

.habits-modal .habits-checkin-layout .metric-strip-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #cbd5e1;
    white-space: normal;
}

.habits-modal .habits-checkin-layout .metric-strip-levels,
.habits-modal .habits-checkin-layout .metric-strip-moods {
    justify-content: flex-start;
    gap: 8px;
}

.habits-modal .habits-checkin-layout .mood-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.habits-modal .habits-checkin-layout .mood-grid .mstrip-mood {
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
}

.habits-modal .habits-checkin-layout .recovery-strip,
.habits-modal .habits-checkin-layout .diet-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.habits-modal .habits-checkin-layout .rpe-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
}

.habits-modal .habits-checkin-layout .recovery-strip .mstrip-mood,
.habits-modal .habits-checkin-layout .diet-strip .mstrip-mood,
.habits-modal .habits-checkin-layout .rpe-strip .mstrip-btn {
    min-width: 0;
    width: 100%;
    height: 36px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    justify-content: center;
}

.habits-modal .habits-checkin-layout .mstrip-btn,
.habits-modal .habits-checkin-layout .mstrip-mood {
    min-width: 46px;
    height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 700;
}

.habits-modal .habits-checkin-layout .mstrip-mood {
    min-width: 110px;
    height: 48px;
    justify-content: flex-start;
    text-transform: none;
    font-size: 0.75rem;
}

.habits-modal .habits-checkin-layout .mstrip-btn.is-active,
.habits-modal .habits-checkin-layout .mstrip-mood.is-active {
    background: #00f2ff;
    color: #0a0f12;
    border-color: #00f2ff;
    box-shadow: 0 0 18px rgba(0, 242, 255, 0.35);
}

.habits-modal .habits-checkin-layout .mstrip-btn:hover,
.habits-modal .habits-checkin-layout .mstrip-mood:hover {
    border-color: rgba(0, 242, 254, 0.35);
    color: rgba(255, 255, 255, 0.9);
}

.habits-modal .habits-checkin-layout .mstrip-number-input {
    width: 100%;
    height: auto;
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-align: left;
    padding-left: 0;
}

.habits-modal .habits-checkin-layout .metric-strip-sub {
    color: #00e5ff;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.habits-modal .habits-checkin-layout .metric-strip-stack {
    align-items: flex-start;
}

.habits-modal .habits-checkin-layout .metric-strip-input {
    gap: 10px;
}

.habits-modal .habits-checkin-layout .checkin-activity-strip .metric-strip-stack {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.habits-modal .habits-checkin-layout .checkin-activity-strip .metric-strip-input {
    flex: 1;
    align-items: center;
}

.habits-modal .habits-checkin-layout .checkin-activity-strip .metric-strip-sub {
    margin-left: auto;
    text-align: right;
}

.habits-modal .habits-checkin-layout .mstrip-unit {
    color: #94a3b8;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.habits-modal.habits-tab-summary {
    max-width: 896px;
    max-height: 90vh;
    background: rgba(23, 35, 43, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.habits-modal.habits-tab-goals {
    max-width: 896px;
    max-height: 90vh;
    background: rgba(23, 35, 43, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.habits-modal.habits-tab-checkin {
    max-width: 896px;
    max-height: 90vh;
    background: rgba(23, 35, 43, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.habits-modal.habits-tab-summary .modal-header {
    padding: 24px 32px;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.habits-modal.habits-tab-checkin .modal-header {
    padding: 24px 32px;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.habits-modal.habits-tab-summary .habits-tabs {
    gap: 4px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
}

.habits-modal.habits-tab-summary .habit-tab {
    flex: 0 0 auto;
    padding: 8px 24px;
    font-size: 0.875rem;
}

.habits-modal.habits-tab-checkin .habits-tabs {
    gap: 4px;
    padding: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
}

.habits-modal.habits-tab-checkin .habit-tab {
    flex: 0 0 auto;
    padding: 8px 24px;
    font-size: 0.875rem;
    border-radius: 12px;
    color: #94a3b8;
}

.habits-modal.habits-tab-checkin .habit-tab.is-active {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.15);
    color: #00e5ff;
}

.habits-modal.habits-tab-summary .habits-panels {
    padding: 24px;
    max-height: calc(90vh - 120px);
}

.habits-modal.habits-tab-goals .habits-panels {
    padding: 24px;
    max-height: calc(90vh - 120px);
}

.habits-modal.habits-tab-checkin .habits-panels {
    padding: 32px;
    max-height: calc(90vh - 120px);
}

.habits-modal.habits-tab-checkin .checkin-section-divider {
    align-items: center;
    gap: 12px;
    padding: 0;
    margin-bottom: 24px;
    justify-content: flex-start;
}

.habits-modal.habits-tab-checkin .checkin-section-divider .checkin-section-title {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #00e5ff;
    text-align: left;
}

.habits-modal.habits-tab-checkin .checkin-section-divider-line {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.5), transparent);
    height: 1px;
    opacity: 1;
    order: 0;
}

.habits-modal.habits-tab-checkin .habits-checkin-grid {
    gap: 20px;
}

.habits-modal.habits-tab-checkin .checkin-metric-strip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: none;
}

.habits-modal.habits-tab-checkin .metric-strip-name {
    color: #e2e8f0;
    font-size: 0.875rem;
    font-weight: 600;
}

.habits-modal.habits-tab-checkin .mstrip-btn,
.habits-modal.habits-tab-checkin .mstrip-mood {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.habits-modal.habits-tab-checkin .mstrip-btn:hover,
.habits-modal.habits-tab-checkin .mstrip-mood:hover {
    border-color: rgba(0, 229, 255, 0.5);
    color: #e2e8f0;
}

.habits-modal.habits-tab-checkin .mstrip-btn.is-active,
.habits-modal.habits-tab-checkin .mstrip-mood.is-active {
    background: #00f2ff;
    color: #0a0f12;
    border-color: #00f2ff;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.35);
}

.habits-modal.habits-tab-checkin .metric-strip-sub {
    color: #00f2ff;
}

.habits-modal .habits-summary-water-ctrl .water-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.habits-modal .habits-summary-water-ctrl .water-btn:hover {
    border-color: rgba(0, 242, 255, 0.45);
    color: #00f2ff;
}

.habits-modal .habits-summary-water-ctrl .water-btn:last-child {
    background: #00f2ff;
    color: #0a0f12;
    border-color: #00f2ff;
    box-shadow: 0 0 16px rgba(0, 242, 255, 0.35);
}

.habits-goals-layout {
    display: grid;
    gap: 16px;
}

@media (min-width: 900px) {
    .habits-goals-layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: start;
    }
}

.progress-modal {
    max-width: 720px;
    width: 100%;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 88vh;
    overflow: hidden;
}

.progress-v2-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.progress-v2-header-main {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.progress-v2-header-main h3 {
    margin: 0;
}

.progress-v2-header-meta {
    display: inline-flex;
    align-items: center;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(13, 242, 242, 0.78);
    font-weight: 800;
}

.progress-v2-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.progress-v2-insight-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(13, 242, 242, 0.28);
    background: rgba(13, 242, 242, 0.08);
    color: rgba(179, 255, 255, 0.95);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 6px 12px;
}

.progress-v2-close {
    flex: 0 0 auto;
}

.progress-v2-ai-insight {
    border: 1px solid rgba(13, 242, 242, 0.35);
    border-radius: 24px;
    background: linear-gradient(135deg,
            rgba(0, 255, 255, 0.1),
            rgba(0, 12, 20, 0.6));
    padding: 14px 18px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.progress-v2-ai-insight-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    color: rgba(13, 242, 242, 0.96);
    margin-bottom: 4px;
}

.progress-v2-ai-insight-text {
    color: rgba(232, 252, 255, 0.95);
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 560;
}

.progress-v2-ai-insight-text strong {
    color: rgba(0, 255, 255, 1);
    font-weight: 800;
}

.progress-v2-insight-percent {
    display: inline-block;
    font-weight: 900;
    letter-spacing: 0.2px;
    background: linear-gradient(90deg, #00fff0 0%, #7afcff 45%, #00e1ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 14px rgba(0, 242, 254, 0.42);
    animation: progressInsightPulse 1.4s ease-in-out infinite;
}

@keyframes progressInsightPulse {

    0%,
    100% {
        transform: translateY(0);
        filter: brightness(1);
    }

    50% {
        transform: translateY(-1px);
        filter: brightness(1.22);
    }
}

.progress-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px 14px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.06),
            rgba(2, 10, 18, 0.45));
}

.progress-avatar-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.progress-status-title {
    color: rgba(232, 253, 255, 0.95);
    font-size: 0.9rem;
    font-weight: 700;
}

.progress-status-sub {
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.72rem;
    font-weight: 650;
}

.progress-status-score {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.progress-status-score-value {
    color: rgba(0, 255, 255, 0.95);
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 850;
    text-shadow: 0 0 16px rgba(0, 242, 254, 0.35);
}

.progress-status-score-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.58);
    font-weight: 700;
}

.status-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
    position: relative;
}

.status-avatar::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}

.status-avatar.low {
    border-color: rgba(255, 0, 85, 0.45);
    box-shadow: 0 0 16px rgba(255, 0, 85, 0.25);
}

.status-avatar.medium {
    border-color: rgba(255, 190, 0, 0.55);
    box-shadow: 0 0 16px rgba(255, 190, 0, 0.25);
}

.status-avatar.high {
    border-color: rgba(0, 242, 254, 0.7);
    box-shadow: 0 0 18px rgba(0, 242, 254, 0.35);
}

.status-avatar.low,
.status-avatar.medium,
.status-avatar.high {
    animation: avatarPulse 2.4s ease-in-out infinite;
}

.status-avatar.high::after {
    background: rgba(0, 242, 254, 0.45);
}

.status-avatar.medium::after {
    background: rgba(255, 190, 0, 0.45);
}

.status-avatar.low::after {
    background: rgba(255, 0, 85, 0.35);
}

@keyframes avatarPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.progress-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.progress-badges {
    display: block;
}

.progress-badge {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    padding: 10px 12px;
}

.progress-badge.is-achieved {
    border-color: rgba(0, 242, 254, 0.6);
    background: rgba(0, 242, 254, 0.12);
    box-shadow: 0 10px 24px rgba(0, 242, 254, 0.2);
}

.progress-badge-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: #fff;
}

.progress-badge-desc {
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-top: 4px;
}

.progress-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    cursor: default;
}

.progress-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(var(--primary-rgb, 0, 242, 254), 0.2);
    border-color: var(--primary);
}

.progress-label {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.progress-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
}

.progress-grid {
    display: grid;
    gap: 12px;
    overflow: hidden;
}

.progress-matrix {
    display: grid;
    grid-template-columns: 84px repeat(7, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
}

.progress-matrix-header {
    height: 0;
}

.progress-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}

.progress-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 10px;
    align-items: center;
}

.progress-selector {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}

.progress-day-pill {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    border-radius: 12px;
    padding: 6px 4px;
    font-size: 0.68rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.progress-day-pill.is-active {
    border-color: rgba(0, 242, 254, 0.7);
    box-shadow: 0 8px 18px rgba(0, 242, 254, 0.2);
    transform: translateY(-1px);
}

.progress-row-label {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.progress-row-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
    height: 60px;
}

.progress-mini {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    height: 60px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: transform 0.2s ease;
}

.progress-mini>div {
    width: 100%;
    background: linear-gradient(180deg,
            rgba(0, 242, 254, 0.9) 0%,
            rgba(0, 120, 255, 0.7) 50%,
            rgba(0, 242, 254, 0.9) 100%);
    background-size: 100% 200%;
    min-height: 6px;
    animation:
        progressGrow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        verticalShimmerFluid 2s linear infinite;
    box-shadow: 0 10px 18px rgba(0, 242, 254, 0.15);
    position: relative;
}

.progress-mini>div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 0 10px 3px rgba(0, 242, 254, 0.8);
    opacity: 0.9;
}

.progress-mini.stress>div {
    background: linear-gradient(180deg,
            rgba(255, 90, 120, 0.95) 0%,
            rgba(255, 0, 85, 0.7) 50%,
            rgba(255, 90, 120, 0.95) 100%);
    background-size: 100% 200%;
    box-shadow: 0 10px 18px rgba(255, 0, 85, 0.15);
}

.progress-mini.stress>div::after {
    box-shadow: 0 0 10px 3px rgba(255, 90, 120, 0.8);
}

.progress-mini.water>div {
    background: linear-gradient(180deg,
            rgba(0, 255, 255, 0.9) 0%,
            rgba(0, 180, 255, 0.7) 50%,
            rgba(0, 255, 255, 0.9) 100%);
    background-size: 100% 200%;
    box-shadow: 0 10px 18px rgba(0, 180, 255, 0.15);
}

.progress-mini.water>div::after {
    box-shadow: 0 0 10px 3px rgba(0, 255, 255, 0.8);
}

.progress-mini.activity>div {
    background: linear-gradient(180deg,
            rgba(0, 255, 136, 0.9) 0%,
            rgba(0, 200, 120, 0.7) 50%,
            rgba(0, 255, 136, 0.9) 100%);
    background-size: 100% 200%;
    box-shadow: 0 10px 18px rgba(0, 200, 120, 0.15);
}

.progress-mini.activity>div::after {
    box-shadow: 0 0 10px 3px rgba(0, 255, 136, 0.8);
}

@keyframes verticalShimmerFluid {
    0% {
        background-position: 0 200%;
    }

    100% {
        background-position: 0 0;
    }
}

.progress-mini.is-empty>div {
    height: 6px;
    opacity: 0.4;
}

.progress-mini.has-value {
    transform: translateY(-2px);
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(0, 242, 254, 0);
    }

    50% {
        box-shadow: 0 0 16px rgba(0, 242, 254, 0.35);
    }
}

.progress-mini[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 14, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 5;
}

.progress-mini:hover::after {
    opacity: 1;
}

.progress-mini {
    position: relative;
}

@keyframes progressGrow {
    from {
        height: 0;
    }

    to {
        height: 100%;
    }
}

.progress-detail {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03),
            rgba(0, 0, 0, 0.2));
    border-radius: 14px;
    padding: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.progress-detail-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.progress-detail-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.3));
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.progress-detail-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.25),
        0 0 8px rgba(var(--primary-rgb, 0, 242, 254), 0.15);
    border-color: var(--primary);
}

.progress-sparkline-wrap {
    margin-top: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03),
            rgba(0, 0, 0, 0.2));
}

.progress-sparkline {
    width: 100%;
    height: 48px;
}

.progress-sparkline polyline {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3;
    filter: drop-shadow(0 6px 12px rgba(var(--primary-rgb, 0, 242, 254), 0.3));
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: sparklineDraw 1.5s ease-out forwards;
}

@keyframes sparklineDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.progress-v2-shell {
    max-width: min(1120px, 96vw);
    background:
        radial-gradient(900px 320px at 8% 0%,
            rgba(0, 242, 254, 0.11),
            transparent 58%),
        radial-gradient(720px 260px at 92% 10%,
            rgba(255, 0, 153, 0.11),
            transparent 62%),
        linear-gradient(160deg, rgba(8, 17, 28, 0.94), rgba(4, 11, 18, 0.96));
    border: 1px solid rgba(0, 242, 254, 0.18);
}

.progress-modal.progress-v2-shell {
    max-height: min(94vh, 980px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(13, 242, 242, 0.35) rgba(255, 255, 255, 0.04);
}

.progress-modal.progress-v2-shell::-webkit-scrollbar {
    width: 8px;
}

.progress-modal.progress-v2-shell::-webkit-scrollbar-thumb {
    background: rgba(13, 242, 242, 0.35);
    border-radius: 999px;
}

.progress-modal.progress-v2-shell::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

.progress-v2-kpi {
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    border-left-width: 4px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

.progress-v2-kpi.is-cyan {
    border-left-color: #0df2f2;
}

.progress-v2-kpi.is-rose {
    border-left-color: #fb7185;
}

.progress-v2-kpi.is-blue {
    border-left-color: #60a5fa;
}

.progress-v2-kpi.is-green {
    border-left-color: #34d399;
}

.progress-v2-kpi-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    color: rgba(255, 255, 255, 0.56);
    font-weight: 700;
}

.progress-v2-kpi-value {
    margin-top: 6px;
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
}

.progress-v2-kpi-value .progress-v2-number {
    font-size: 1.9rem;
    line-height: 1;
    font-weight: 800;
    color: #ecfeff;
    text-shadow: 0 0 14px rgba(0, 242, 254, 0.3);
}

.progress-v2-kpi-value small {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.44);
    margin-bottom: 3px;
    font-weight: 700;
}

.progress-v2-streak-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-v2-streak-title {
    margin: 0;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.85px;
    color: rgba(13, 242, 242, 0.9);
    font-weight: 800;
}

.progress-v2-streaks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.progress-v2-streak {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.76rem;
    font-weight: 700;
}

.progress-v2-streak.is-achieved {
    border-color: rgba(13, 242, 242, 0.34);
    background: rgba(13, 242, 242, 0.16);
    color: #d8ffff;
}

.progress-v2-streak-icon {
    opacity: 0.9;
}

.progress-v2-detail-head {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: rgba(255, 255, 255, 0.62);
    font-weight: 700;
}

.progress-v2-table-wrap {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    overflow-x: hidden;
}

.progress-modal.progress-v2-shell .progress-grid {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.progress-v2-matrix {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.progress-v2-matrix-row {
    display: grid;
    grid-template-columns: minmax(110px, 1.15fr) repeat(7,
            minmax(0, 1fr)) minmax(62px, 0.7fr);
    align-items: center;
}

.progress-v2-matrix-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.progress-v2-matrix-cell {
    padding: 10px;
    min-height: 56px;
}

.progress-v2-matrix-head .progress-v2-matrix-cell {
    padding: 12px 10px;
    text-align: center;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700;
}

.progress-v2-matrix-head .progress-v2-metric-cell {
    text-align: left;
}

.progress-v2-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    table-layout: fixed;
}

.progress-v2-table thead th {
    padding: 12px 10px;
    text-align: center;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.progress-v2-table thead th:first-child {
    text-align: left;
    width: 162px;
}

.progress-v2-table thead th:last-child {
    width: 96px;
}

.progress-v2-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.progress-v2-table td {
    padding: 10px;
    vertical-align: middle;
}

.progress-v2-table tbody {
    display: table-row-group;
}

.progress-v2-table tbody tr {
    display: table-row;
    min-height: 72px;
}

.progress-v2-metric-cell {
    min-width: 0;
}

.progress-v2-metric-title {
    font-size: 0.82rem;
    font-weight: 800;
}

.progress-v2-metric-sub {
    margin-top: 3px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.65px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 700;
}

.tone-cyan {
    color: #0df2f2;
}

.tone-rose {
    color: #fb7185;
}

.tone-blue {
    color: #60a5fa;
}

.tone-green {
    color: #34d399;
}

.tone-aqua {
    color: #2dd4bf;
}

.progress-v2-metric-title .metric-icon {
    margin-left: 6px;
    font-size: 0.78rem;
    opacity: 0.9;
}

.progress-v2-micro {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 1;
}

.progress-v2-cell-value {
    position: absolute;
    right: 4px;
    bottom: -2px;
    font-size: 0.56rem;
    color: rgba(255, 255, 255, 0.42);
    letter-spacing: 0.25px;
    font-weight: 700;
}

.progress-v2-micro-line svg {
    width: 100%;
    height: 36px;
}

.progress-v2-micro-line .line-core {
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation:
        progressV2LineDraw 0.85s ease forwards,
        progressV2LineFloat 2.8s ease-in-out infinite;
}

.progress-v2-micro-line .line-glow {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.78;
    stroke-dasharray: 20 150;
    animation: progressV2LineSweep 2.2s linear infinite;
}

.progress-v2-micro-line.tone-cyan .line-core {
    stroke: #0df2f2;
    filter: drop-shadow(0 0 6px rgba(13, 242, 242, 0.7));
}

.progress-v2-micro-line.tone-cyan .line-glow {
    stroke: rgba(13, 242, 242, 0.95);
    filter: drop-shadow(0 0 8px rgba(13, 242, 242, 0.85));
}

.progress-v2-micro-line.tone-rose .line-core {
    stroke: #fb7185;
    filter: drop-shadow(0 0 6px rgba(251, 113, 133, 0.7));
}

.progress-v2-micro-line.tone-rose .line-glow {
    stroke: rgba(251, 113, 133, 0.95);
    filter: drop-shadow(0 0 8px rgba(251, 113, 133, 0.85));
}

.progress-v2-micro-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 34px;
}

.progress-v2-micro-bars span {
    width: 4px;
    min-height: 5px;
    border-radius: 999px;
    animation:
        progressV2BarsIn 0.55s ease both,
        progressV2BarsPulse 2.1s ease-in-out infinite;
}

.progress-v2-micro-bars span:nth-child(2) {
    animation-delay: 0.06s;
}

.progress-v2-micro-bars span:nth-child(3) {
    animation-delay: 0.1s;
}

.progress-v2-micro-bars span:nth-child(4) {
    animation-delay: 0.14s;
}

.progress-v2-micro-bars span:nth-child(5) {
    animation-delay: 0.18s;
}

.progress-v2-micro-bars.tone-rose span {
    background: rgba(251, 113, 133, 0.82);
    box-shadow: 0 0 8px rgba(251, 113, 133, 0.36);
}

.progress-v2-micro-bars.tone-cyan span {
    background: rgba(13, 242, 242, 0.82);
    box-shadow: 0 0 8px rgba(13, 242, 242, 0.3);
}

.progress-v2-micro-radial svg {
    width: 34px;
    height: 34px;
    transform: rotate(-90deg);
}

.progress-v2-micro-radial .ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 3;
}

.progress-v2-micro-radial .ring-fg {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    animation:
        progressV2RingIn 0.9s ease both,
        progressV2RingBreath 2.6s ease-in-out infinite;
}

.progress-v2-micro-radial.tone-blue .ring-fg {
    stroke: #60a5fa;
    filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.7));
}

.progress-v2-micro-radial.tone-cyan .ring-fg {
    stroke: #0df2f2;
    filter: drop-shadow(0 0 5px rgba(13, 242, 242, 0.7));
}

.progress-v2-micro-radial.tone-aqua .ring-fg {
    stroke: #22d3ee;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.75));
}

.progress-v2-micro-radial .ring-dot {
    fill: rgba(255, 255, 255, 0.88);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
    transform-origin: 18px 18px;
    animation: progressV2DotOrbit 2.9s linear infinite;
}

.progress-v2-micro-heat {
    display: grid;
    grid-template-columns: repeat(4, 6px);
    grid-template-rows: repeat(2, 6px);
    gap: 3px;
}

.progress-v2-micro-heat span {
    border-radius: 2px;
    animation: progressV2HeatPulse 1.8s ease-in-out infinite;
}

.progress-v2-micro-heat.tone-green span {
    background: #34d399;
}

.progress-v2-micro-heat.tone-rose span {
    background: #fb7185;
}

.progress-v2-micro-heat.tone-cyan span {
    background: #0df2f2;
}

.progress-v2-micro-heat.tone-aqua span {
    background: #2dd4bf;
    box-shadow: 0 0 8px rgba(45, 212, 191, 0.45);
}

.progress-v2-micro-fill.tone-aqua .progress-v2-micro-fill-bar {
    background: linear-gradient(90deg,
            rgba(45, 212, 191, 0.95),
            rgba(0, 180, 170, 0.85));
    box-shadow: 0 0 14px rgba(45, 212, 191, 0.45);
}

.progress-v2-micro-fill.tone-aqua .progress-v2-micro-fill-track {
    background: rgba(45, 212, 191, 0.08);
    border-color: rgba(45, 212, 191, 0.25);
}

.progress-v2-micro-fill {
    width: 100%;
    padding: 0 8px;
}

.progress-v2-micro-fill-track {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
}

.progress-v2-micro-fill-bar {
    height: 100%;
    width: 0;
    border-radius: 999px;
    transition: width 0.55s ease;
    position: relative;
}

.progress-v2-micro-fill-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
            transparent 0%,
            rgba(255, 255, 255, 0.45) 45%,
            transparent 100%);
    transform: translateX(-110%);
    animation: progressV2FillSweep 1.9s ease-in-out infinite;
}

.progress-v2-micro-fill.tone-green .progress-v2-micro-fill-bar {
    background: linear-gradient(90deg,
            rgba(52, 211, 153, 0.7),
            rgba(16, 235, 190, 0.98));
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
}

@keyframes progressV2FillSweep {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(120%);
    }
}

.progress-v2-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.progress-v2-day {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.progress-v2-day.is-active {
    color: #dbffff;
    border-color: rgba(13, 242, 242, 0.5);
    background: rgba(13, 242, 242, 0.16);
    box-shadow: 0 0 14px rgba(13, 242, 242, 0.2);
}

.progress-v2-summary-cell {
    text-align: center;
    font-size: 0.74rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.2px;
}

.progress-v2-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.progress-v2-current,
.progress-v2-trend {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    padding: 14px;
}

.progress-v2-current h4,
.progress-v2-trend h4 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 10px;
}

.progress-v2-current-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.progress-v2-current-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.progress-v2-current-item span {
    width: 100%;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.65px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
}

.progress-v2-current-item strong {
    font-size: 1.08rem;
    font-weight: 800;
    color: #ecfeff;
}

.progress-v2-current-item small {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 2px;
}

.progress-v2-water-spotlight {
    margin-top: 10px;
    border: 1px solid rgba(0, 242, 254, 0.28);
    border-radius: 12px;
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.12),
            rgba(0, 120, 255, 0.08));
    padding: 10px;
    box-shadow: 0 10px 22px rgba(0, 242, 254, 0.14);
}

.progress-v2-water-head {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
}

.progress-v2-water-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0df2f2;
    background: rgba(0, 242, 254, 0.16);
    box-shadow: 0 0 14px rgba(13, 242, 242, 0.35);
    animation: waterPulse 1.9s ease-in-out infinite;
}

.progress-v2-water-text strong {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.4px;
}

.progress-v2-water-text small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
}

.progress-v2-water-ratio {
    font-weight: 800;
    font-size: 0.9rem;
    color: #e8ffff;
}

.progress-v2-water-track {
    margin-top: 8px;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.progress-v2-water-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg,
            rgba(0, 255, 255, 0.95),
            rgba(0, 170, 255, 0.8));
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.42);
    animation: waterFillGlow 2.2s ease-in-out infinite;
}

@keyframes waterPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes waterFillGlow {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.2);
    }
}

.progress-v2-trend-chart {
    position: relative;
    height: 140px;
}

.progress-v2-trend-chart svg {
    width: 100%;
    height: 112px;
}

.progress-v2-trend-chart .area-line {
    fill: url(#progressV2Gradient);
    opacity: 0.9;
}

.progress-v2-trend-chart .main-line {
    fill: none;
    stroke: #0df2f2;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(13, 242, 242, 0.5));
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
    animation: progressV2LineDraw 1.1s ease forwards;
}

.progress-v2-trend-days {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@keyframes progressV2LineDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes progressV2LineSweep {
    from {
        stroke-dashoffset: 170;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes progressV2LineFloat {

    0%,
    100% {
        opacity: 0.95;
    }

    50% {
        opacity: 0.78;
    }
}

@keyframes progressV2BarsIn {
    from {
        transform: scaleY(0.2);
        transform-origin: bottom;
        opacity: 0.35;
    }

    to {
        transform: scaleY(1);
        transform-origin: bottom;
        opacity: 1;
    }
}

@keyframes progressV2BarsPulse {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.2);
    }
}

@keyframes progressV2RingIn {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

@keyframes progressV2RingBreath {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes progressV2DotOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes progressV2HeatPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@media (max-width: 980px) {
    .progress-v2-header {
        flex-wrap: wrap;
    }

    .progress-v2-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .progress-v2-table-wrap {
        overflow-x: auto;
    }

    .progress-v2-matrix-row {
        grid-template-columns: minmax(104px, 1.1fr) repeat(7,
                minmax(46px, 1fr)) minmax(56px, 0.7fr);
    }

    .progress-v2-bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .progress-modal.progress-v2-shell {
        max-height: 96vh;
        padding: 16px;
    }

    .progress-v2-kpi-value .progress-v2-number {
        font-size: 1.5rem;
    }

    .progress-v2-current-grid {
        grid-template-columns: 1fr;
    }

    .progress-v2-ai-insight-text {
        font-size: 0.9rem;
    }

    .progress-avatar-row {
        flex-wrap: wrap;
    }

    .progress-status-score {
        margin-left: 0;
        align-items: flex-start;
    }

    .progress-v2-streak-bar {
        align-items: flex-start;
    }

    .progress-v2-streaks {
        justify-content: flex-start;
    }
}

@media (min-width: 1700px) {
    .progress-modal.progress-v2-shell {
        max-width: min(1380px, 96vw);
        max-height: 92vh;
    }

    .progress-v2-matrix-row {
        grid-template-columns: minmax(180px, 1.3fr) repeat(7,
                minmax(86px, 1fr)) minmax(100px, 0.85fr);
    }

    .progress-v2-matrix-cell {
        min-height: 68px;
        padding: 12px;
    }

    .progress-v2-micro {
        min-height: 54px;
    }

    .progress-v2-micro-line svg {
        height: 44px;
    }
}

.habits-grid {
    display: grid;
    gap: 12px;
}

.habit-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.3));
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

/* ===== COMPACT METRIC STRIP DESIGN ===== */

/* CRITICAL: panels are hidden by default, shown only when active */
.habit-panel {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.habit-panel.is-active {
    display: flex;
}

/* --- Section Header --- */
.checkin-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 2px;
}

.checkin-section-icon {
    font-size: 1rem;
}

.checkin-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    flex: 1;
}

.metric-strip-badge {
    font-size: 0.7rem;
    color: var(--primary, #00f2fe);
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* --- Metric Strip Row --- */
.checkin-metric-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
    min-height: 42px;
}

.checkin-metric-strip:hover {
    background: rgba(255, 255, 255, 0.06);
}

.metric-strip-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    min-width: 90px;
    flex-shrink: 0;
}

.metric-strip-name i {
    margin-right: 5px;
    color: var(--primary, #00f2fe);
    opacity: 0.8;
}

/* Number buttons strip (1-5 or Nada/Leve/Mod) */
.metric-strip-levels {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mstrip-btn {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.mstrip-btn:hover {
    background: rgba(var(--primary-rgb, 0, 242, 254), 0.15);
    color: #fff;
    border-color: rgba(var(--primary-rgb, 0, 242, 254), 0.4);
}

.mstrip-btn.is-active {
    background: linear-gradient(135deg,
            var(--primary, #00f2fe),
            var(--secondary, #4facfe));
    color: #000;
    border-color: transparent;
    box-shadow: 0 0 10px rgba(var(--primary-rgb, 0, 242, 254), 0.4);
    font-weight: 800;
}

/* Mood buttons strip */
.metric-strip-moods {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mstrip-mood {
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.73rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.mstrip-mood:hover {
    background: rgba(var(--primary-rgb, 0, 242, 254), 0.12);
    color: #fff;
}

.mstrip-mood.is-active {
    background: linear-gradient(135deg,
            rgba(var(--primary-rgb, 0, 242, 254), 0.3),
            rgba(var(--secondary-rgb, 79, 172, 254), 0.3));
    border-color: var(--primary, #00f2fe);
    color: #fff;
    box-shadow: 0 0 8px rgba(var(--primary-rgb, 0, 242, 254), 0.3);
    font-weight: 700;
}

/* Number input strip */
.metric-strip-input {
    display: flex;
    align-items: center;
    gap: 6px;
}

.metric-strip-sub {
    margin-left: auto;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.52);
    font-weight: 600;
    letter-spacing: 0.2px;
}

.checkin-activity-strip .metric-strip-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.checkin-activity-strip .metric-strip-sub {
    margin-left: 0;
}

.mstrip-number-input {
    width: 60px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
}

.mstrip-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Water control inside strip */
.metric-strip-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}

.metric-strip-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: normal;
    line-height: 1.2;
}

.metric-strip-water-ctrl {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.water-count-inline {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary, #00f2fe);
    min-width: 20px;
    text-align: center;
}

/* Sleep pills */
.habit-sleep-row-compact {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}

.sleep-pill {
    flex: 1;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.sleep-pill:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sleep-bad.is-active {
    background: rgba(255, 0, 85, 0.25);
    border-color: #ff0055;
    color: #ff4477;
    box-shadow: 0 0 8px rgba(255, 0, 85, 0.3);
}

.sleep-ok.is-active {
    background: rgba(255, 204, 0, 0.2);
    border-color: #ffcc00;
    color: #ffd740;
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.3);
}

.sleep-good.is-active {
    background: rgba(0, 255, 136, 0.15);
    border-color: #00ff88;
    color: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

/* Compact notes textarea */
.habit-notes-compact {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.85);
    padding: 8px 10px;
    font-size: 0.8rem;
    resize: none;
    font-family: inherit;
    transition: all 0.3s;
}

.habit-notes-compact:focus,
.premium-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(var(--primary-rgb, 0, 242, 254), 0.6);
    box-shadow: 0 0 12px rgba(var(--primary-rgb, 0, 242, 254), 0.3);
}

.habit-notes-insight {
    margin-top: 8px;
    font-size: 0.76rem;
    line-height: 1.35;
    color: rgba(222, 244, 255, 0.86);
    border: 1px solid rgba(0, 242, 254, 0.2);
    background: rgba(0, 242, 254, 0.08);
    border-radius: 10px;
    padding: 8px 10px;
}

.habit-reminders-panel {
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(10, 18, 30, 0.56);
    padding: 8px 10px;
}

.habit-reminders-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.habit-reminders-title {
    font-size: 0.77rem;
    font-weight: 700;
    color: rgba(232, 246, 255, 0.92);
}

.habit-reminders-count {
    font-size: 0.72rem;
    border-radius: 999px;
    padding: 2px 8px;
    border: 1px solid rgba(0, 242, 254, 0.34);
    color: rgba(202, 244, 255, 0.9);
    background: rgba(0, 242, 254, 0.1);
}

.habit-reminders-empty {
    font-size: 0.74rem;
    color: rgba(210, 232, 246, 0.7);
    padding: 6px 2px 2px;
}

.habit-reminders-list {
    display: grid;
    gap: 6px;
}

.habit-reminder-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 8px;
}

.habit-reminder-topic {
    font-size: 0.75rem;
    color: rgba(238, 248, 255, 0.92);
    line-height: 1.35;
}

.habit-reminder-meta {
    margin-top: 3px;
    font-size: 0.7rem;
    color: rgba(196, 223, 240, 0.72);
}

.habit-reminder-actions {
    margin-top: 6px;
    display: flex;
    gap: 6px;
}

.habit-reminder-btn {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(231, 246, 255, 0.88);
    border-radius: 8px;
    font-size: 0.69rem;
    padding: 4px 8px;
    cursor: pointer;
}

.habit-reminder-btn:hover {
    background: rgba(0, 242, 254, 0.12);
    border-color: rgba(0, 242, 254, 0.4);
}

/* ===== MICRO-GOALS BOARD ===== */
.micro-goals-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.habits-summary-stack {
    display: grid;
    gap: 14px;
}

.habits-weekly-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg,
            rgba(8, 14, 24, 0.95),
            rgba(5, 9, 16, 0.95));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}

.habits-weekly-status-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.habits-weekly-status-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #eaf8ff;
}

.habits-weekly-status-meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.habits-weekly-status-badge {
    min-width: 64px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.82rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    animation: habitsPulse 3s ease-in-out infinite;
}

.habits-weekly-status-badge.is-mid {
    border-color: rgba(0, 242, 254, 0.35);
    color: #dff8ff;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
}

.habits-weekly-status-badge.is-high {
    border-color: rgba(92, 192, 255, 0.55);
    color: #e8f7ff;
    box-shadow: 0 0 12px rgba(92, 192, 255, 0.3);
}

.habits-weekly-status-badge.is-complete {
    border-color: rgba(255, 0, 85, 0.55);
    color: #ffe8f1;
    box-shadow: 0 0 14px rgba(255, 0, 85, 0.35);
}

@keyframes habitsPulse {
    0% {
        transform: scale(1);
        opacity: 0.85;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.85;
    }
}

.habits-summary-card {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg,
            rgba(12, 18, 28, 0.9),
            rgba(8, 12, 18, 0.95));
    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.35),
        inset 0 0 12px rgba(0, 242, 254, 0.08);
}

.habits-smart-goals-card {
    margin-bottom: 14px;
    background: linear-gradient(135deg,
            rgba(10, 16, 26, 0.75),
            rgba(8, 12, 18, 0.9));
    border: 1px solid rgba(0, 242, 254, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.habits-smart-goals-card .wizard-step6-head {
    margin-bottom: 8px;
}

.habits-smart-goals-card .wizard-step6-title {
    color: #eaf8ff;
    font-weight: 700;
}

.habits-smart-goals-card .wizard-step6-reco-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.habits-smart-goals-card .wizard-step6-reco-item {
    background: rgba(5, 10, 16, 0.7);
    border: 1px solid rgba(0, 242, 254, 0.2);
    padding: 10px 12px;
}

.habits-smart-goals-card .wizard-step6-reco-badge {
    background: rgba(0, 242, 254, 0.18);
    color: #dff8ff;
}

.habits-smart-goals-card .wizard-step6-reco-text {
    font-size: 0.82rem;
}

.habits-smart-goals-card .wizard-step6-extra-list {
    margin-top: 8px;
}

.habits-smart-goals-card .wizard-step6-extra-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

#habits-smart-goals-empty {
    margin-top: 8px;
}

.habits-smart-timeline {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.habits-smart-timeline-track {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.habits-smart-timeline-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(90deg,
            rgba(0, 242, 254, 0.9),
            rgba(92, 192, 255, 0.9),
            rgba(255, 0, 85, 0.8));
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.4);
    transition: width 0.6s ease;
}

.habits-smart-timeline-marker {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #eaffff;
    border: 2px solid rgba(0, 242, 254, 0.7);
    box-shadow:
        0 0 10px rgba(0, 242, 254, 0.5),
        0 0 20px rgba(0, 242, 254, 0.25);
    transition: left 0.6s ease;
}

.habits-smart-timeline-points {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.habits-smart-point {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(7, 12, 18, 0.9);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.68rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.habits-smart-point.is-active {
    border-color: rgba(0, 242, 254, 0.6);
    color: #eaffff;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.35);
}

.habits-smart-timeline-meta {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}

.micro-goals-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.micro-goals-board-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.micro-goals-board-title i {
    color: var(--primary, #00f2fe);
}

.micro-goal-progress-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: linear-gradient(135deg,
            rgba(var(--primary-rgb, 0, 242, 254), 0.2),
            rgba(var(--secondary-rgb, 79, 172, 254), 0.2));
    border: 1px solid rgba(var(--primary-rgb, 0, 242, 254), 0.3);
    color: var(--primary, #00f2fe);
}

.micro-goal-feedback-strip {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    text-align: center;
    padding: 6px;
}

.micro-goal-add-row {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.micro-goal-add-input {
    flex: 1;
    padding: 9px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 0.82rem;
    font-family: inherit;
}

.micro-goal-add-input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb, 0, 242, 254), 0.5);
}

.micro-goal-add-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg,
            var(--primary, #00f2fe),
            var(--secondary, #4facfe));
    color: #000;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.micro-goal-add-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 12px rgba(var(--primary-rgb, 0, 242, 254), 0.4);
}

/* ===== PREMIUM SUMMARY ENHANCEMENTS ===== */
.premium-glass-strip {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.03),
            rgba(0, 0, 0, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.animated-glow {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
            rgba(var(--primary-rgb, 0, 242, 254), 0.15),
            rgba(var(--secondary-rgb, 79, 172, 254), 0.15));
    border: 1px solid rgba(var(--primary-rgb, 0, 242, 254), 0.4);
    color: var(--primary, #00f2fe);
    font-weight: 800;
}

.animated-glow::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.2) 0%,
            transparent 60%);
    animation: rotateGlow 4s linear infinite;
    pointer-events: none;
}

@keyframes rotateGlow {
    100% {
        transform: rotate(360deg);
    }
}

.pop-anim {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pop-anim.active {
    transform: scale(1.3);
    color: #fff;
    text-shadow: 0 0 10px rgba(var(--primary-rgb, 0, 242, 254), 0.8);
}

.neon-btn {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.3s;
}

.neon-btn:hover {
    background: rgba(var(--primary-rgb, 0, 242, 254), 0.15);
    border-color: rgba(var(--primary-rgb, 0, 242, 254), 0.5);
    box-shadow: 0 0 10px rgba(var(--primary-rgb, 0, 242, 254), 0.3);
    color: var(--primary, #00f2fe);
}

.premium-progress-track {
    height: 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.premium-liquid-bar {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg,
            var(--secondary, #4facfe),
            var(--primary, #00f2fe));
    box-shadow: 0 0 15px rgba(var(--primary-rgb, 0, 242, 254), 0.6);
    position: relative;
    overflow: hidden;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-liquid-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.glow-text {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.premium-pills-row .sleep-pill {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.premium-pills-row .sleep-bad.is-active {
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.3),
            rgba(200, 0, 60, 0.2));
    border-color: #ff0055;
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.4);
}

.premium-pills-row .sleep-ok.is-active {
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.25),
            rgba(200, 150, 0, 0.15));
    border-color: #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.4);
}

.premium-pills-row .sleep-good.is-active {
    background: linear-gradient(135deg,
            rgba(0, 255, 136, 0.2),
            rgba(0, 180, 90, 0.15));
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

.micro-goal-item-premium {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.micro-goal-item-premium:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--primary-rgb, 0, 242, 254), 0.3);
    transform: translateX(2px);
}

.mgoal-cbx-container {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1;
}

.mgoal-cbx-hidden {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.mgoal-cbx-custom {
    height: 22px;
    width: 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mgoal-cbx-custom i {
    color: transparent;
    font-size: 0.75rem;
    transition:
        color 0.2s,
        transform 0.2s;
    transform: scale(0.5);
}

.mgoal-cbx-container:hover .mgoal-cbx-hidden~.mgoal-cbx-custom {
    background: rgba(var(--primary-rgb, 0, 242, 254), 0.1);
    border-color: rgba(var(--primary-rgb, 0, 242, 254), 0.5);
}

.mgoal-cbx-hidden:checked~.mgoal-cbx-custom {
    background: linear-gradient(135deg,
            var(--primary, #00f2fe),
            var(--secondary, #4facfe));
    border-color: transparent;
    box-shadow: 0 0 10px rgba(var(--primary-rgb, 0, 242, 254), 0.4);
}

.mgoal-cbx-hidden:checked~.mgoal-cbx-custom i {
    color: #000;
    transform: scale(1);
}

.mgoal-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.3s;
    line-height: 1.3;
}

.micro-goal-item-premium.is-done .mgoal-text {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.4);
}

.mgoal-remove-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s;
    opacity: 0;
}

.micro-goal-item-premium:hover .mgoal-remove-btn {
    opacity: 1;
}

.mgoal-remove-btn:hover {
    color: #ff4477;
    background: rgba(255, 0, 85, 0.15);
}

@media (max-width: 480px) {
    .micro-goal-item-premium {
        padding: 10px 12px;
    }

    .mgoal-text {
        font-size: 0.8rem;
    }

    .mgoal-cbx-custom {
        width: 20px;
        height: 20px;
    }

    .mgoal-remove-btn {
        opacity: 1;
        color: rgba(255, 255, 255, 0.4);
    }

    /* Always visible on mobile */
}

/* Profile section header hide/show (same JS-driven approach) */
.checkin-section-header[data-profile] {
    display: none;
}

#habits-modal.profile-medical .checkin-section-header[data-profile="medical"],
#habits-modal.profile-both .checkin-section-header[data-profile="medical"] {
    display: flex;
}

#habits-modal.profile-fitness .checkin-section-header[data-profile="fitness"],
#habits-modal.profile-both .checkin-section-header[data-profile="fitness"] {
    display: flex;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px) {
    .checkin-metric-strip {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 8px;
    }

    .metric-strip-name {
        min-width: 70px;
        font-size: 0.75rem;
    }

    .mstrip-btn,
    .mstrip-mood {
        font-size: 0.68rem;
        padding: 4px 7px;
    }

    .metric-strip-levels,
    .metric-strip-moods {
        gap: 3px;
    }

    .checkin-activity-strip .metric-strip-stack {
        width: 100%;
        align-items: flex-start;
    }

    .habit-tab {
        font-size: 0.72rem;
        padding: 7px 10px;
    }

    .habit-tab i {
        display: none;
    }
}

@media (max-width: 360px) {

    .mstrip-btn,
    .mstrip-mood {
        padding: 3px 6px;
        font-size: 0.65rem;
    }

    .metric-strip-name {
        font-size: 0.7rem;
        min-width: 60px;
    }
}

.habit-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(var(--primary-rgb, 0, 242, 254), 0.15);
    border-color: rgba(var(--primary-rgb, 0, 242, 254), 0.5);
}

.habit-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.habit-title {
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
}

.habit-subtitle {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.habit-chip {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: #e6fbff;
    font-size: 0.75rem;
    background: rgba(0, 242, 254, 0.12);
}

.habit-compact {
    justify-content: center;
    gap: 12px;
}

.habit-sleep-row {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.3));
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
}

.habit-sleep-row .btn-icon {
    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.25s ease;
}

.habit-sleep-row .btn-icon:hover {
    transform: scale(1.3) translateY(-2px);
    filter: drop-shadow(0 4px 10px currentColor);
}

.habit-status {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.habit-levels {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.habit-level {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.3));
    color: #fff;
    border-radius: 12px;
    padding: 10px 0;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.habit-level.is-active,
.habit-level:hover {
    border-color: rgba(var(--primary-rgb, 0, 242, 254), 0.8);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(var(--primary-rgb, 0, 242, 254), 0.3);
    background: linear-gradient(135deg,
            rgba(var(--primary-rgb, 0, 242, 254), 0.15),
            rgba(0, 0, 0, 0.4));
    transform: translateY(-3px) scale(1.05);
}

.habit-moods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.habit-mood {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.3));
    color: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition:
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}

.habit-mood.is-active,
.habit-mood:hover {
    border-color: rgba(var(--primary-rgb, 0, 242, 254), 0.8);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(var(--primary-rgb, 0, 242, 254), 0.3);
    background: linear-gradient(135deg,
            rgba(var(--primary-rgb, 0, 242, 254), 0.15),
            rgba(0, 0, 0, 0.4));
    transform: translateY(-3px) scale(1.05);
}

.habit-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.habit-unit {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.habit-notes {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    resize: vertical;
    min-height: 80px;
}

.chat-tip {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.3));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 0.82rem;
    line-height: 1.6;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.chat-tip-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.chat-tip-actions button {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.3));
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-tip-actions button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    border-color: rgba(var(--primary-rgb, 0, 242, 254), 0.5);
    box-shadow: 0 4px 10px rgba(var(--primary-rgb, 0, 242, 254), 0.2);
}

.chat-header-heart {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border-radius: 0;
    animation: none;
}

.chat-header-heart svg {
    width: 34px;
    height: 34px;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.4));
}

.chat-msgs {
    flex: 1;
    padding: 18px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.22),
            rgba(0, 0, 0, 0.12));
}

.chat-msgs,
.week-summary-body,
.history-list,
.shopping-groups,
.history-modal-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 242, 254, 0.7) rgba(255, 255, 255, 0.04);
}

.chat-msgs::-webkit-scrollbar,
.week-summary-body::-webkit-scrollbar,
.history-list::-webkit-scrollbar,
.shopping-groups::-webkit-scrollbar,
.history-modal-list::-webkit-scrollbar {
    width: 6px;
}

.chat-msgs::-webkit-scrollbar-track,
.week-summary-body::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track,
.shopping-groups::-webkit-scrollbar-track,
.history-modal-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35);
}

.chat-msgs::-webkit-scrollbar-thumb,
.week-summary-body::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb,
.shopping-groups::-webkit-scrollbar-thumb,
.history-modal-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            rgba(0, 242, 254, 0.95),
            rgba(0, 242, 254, 0.35));
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.35);
}

.chat-msgs::-webkit-scrollbar-thumb:hover,
.week-summary-body::-webkit-scrollbar-thumb:hover,
.history-list::-webkit-scrollbar-thumb:hover,
.shopping-groups::-webkit-scrollbar-thumb:hover,
.history-modal-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            rgba(122, 247, 255, 0.95),
            rgba(0, 242, 254, 0.55));
    box-shadow: 0 0 14px rgba(0, 242, 254, 0.55);
}

.chat-quick-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg,
            rgba(8, 12, 18, 0.65),
            rgba(5, 8, 14, 0.45));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: visible;
    z-index: 5;
}

.chat-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 242, 254, 0.28);
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.2),
            rgba(0, 242, 254, 0.06));
    color: #e8fbff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.chat-quick-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 20px rgba(0, 242, 254, 0.22);
    border-color: rgba(0, 242, 254, 0.55);
}

.chat-quick-action:active {
    transform: translateY(0);
    box-shadow: 0 8px 14px rgba(0, 242, 254, 0.18);
}

.chat-quick-action i {
    font-size: 0.9rem;
    color: var(--primary);
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.35);
}

.chat-quick-action[data-tooltip] {
    position: relative;
}

.chat-quick-action[data-tooltip]::after,
.chat-quick-action[data-tooltip]::before {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    transition-delay: 140ms;
    z-index: 10;
}

.chat-quick-action[data-tooltip]::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 16px);
    background: rgba(6, 10, 16, 0.95);
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: #eafaff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 242, 254, 0.2);
    white-space: nowrap;
}

.chat-quick-action[data-tooltip]::before {
    content: "";
    bottom: calc(100% + 8px);
    width: 8px;
    height: 8px;
    background: rgba(6, 10, 16, 0.95);
    border-left: 1px solid rgba(0, 242, 254, 0.35);
    border-top: 1px solid rgba(0, 242, 254, 0.35);
    transform: translateX(-50%) rotate(45deg);
}

.chat-quick-action[data-tooltip]:hover::after,
.chat-quick-action[data-tooltip]:hover::before,
.chat-quick-action[data-tooltip]:focus-visible::after,
.chat-quick-action[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
    animation: tooltipGlow 2.4s ease-in-out infinite;
}

.chat-quick-action.is-disabled::after,
.chat-quick-action.is-disabled::before {
    display: none;
}

.chat-quick-action.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.chat-quick-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 2px 6px;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    border-radius: 999px;
    color: #000;
    background: linear-gradient(135deg, #ffd700, #ffa500);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 6px 14px rgba(255, 215, 0, 0.25);
}

.chat-quick-form {
    display: grid;
    gap: 10px;
}

.chat-quick-form .btn-chat-action {
    width: 100%;
    justify-content: center;
}

.chat-quick-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(6, 10, 16, 0.6);
    color: #fff;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.chat-quick-input:focus {
    border-color: rgba(0, 242, 254, 0.6);
}

@media (max-width: 720px) {
    .chat-quick-actions {
        gap: 8px;
        padding: 10px 12px 12px 12px;
    }

    .chat-quick-action {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
    }
}

@keyframes tooltipGlow {

    0%,
    100% {
        box-shadow: 0 10px 20px rgba(0, 242, 254, 0.18);
    }

    50% {
        box-shadow: 0 12px 24px rgba(0, 242, 254, 0.3);
    }
}

.chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    margin: 4px 0 6px 0;
    border-radius: 999px;
    background: linear-gradient(135deg,
            rgba(8, 12, 18, 0.85),
            rgba(12, 16, 22, 0.6));
    border: 1px solid rgba(0, 242, 254, 0.25);
    font-size: 0.72rem;
    color: #bfefff;
    align-self: flex-start;
    box-shadow:
        0 10px 22px rgba(0, 242, 254, 0.14),
        0 0 12px rgba(0, 242, 254, 0.1);
    position: relative;
}

.chat-typing-icon {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
    overflow: visible;
    filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.35));
}

.chat-typing-label {
    font-weight: 700;
    letter-spacing: 0.2px;
}


.msg {
    padding: 14px 18px;
    border-radius: 16px;
    max-width: 85%;
    line-height: 1.55;
    font-size: 0.92rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
    animation: msgPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.msg-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.msg-title i {
    color: var(--primary);
}

.msg-body {
    font-size: 0.95rem;
}

.msg.ai {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.02));
    align-self: flex-start;
    border-left: 3px solid var(--primary);
}

.msg.user {
    background: linear-gradient(135deg, #00f2fe, #79f3ff);
    color: #000;
    align-self: flex-end;
    font-weight: 700;
}

.msg.system {
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.1),
            rgba(255, 136, 0, 0.06));
    border-left: 3px solid var(--warning);
    align-self: center;
    max-width: 95%;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.92);
}

.msg.ai.habits-reminder {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.16),
            rgba(255, 0, 85, 0.12));
    border-left-color: var(--accent);
    border-color: rgba(255, 0, 85, 0.35);
    box-shadow: 0 12px 26px rgba(255, 0, 85, 0.18);
    cursor: pointer;
}

.msg.ai.habits-reminder .msg-body {
    font-weight: 700;
    color: #fff;
}

.msg.ai.habits-reminder:hover {
    box-shadow: 0 14px 30px rgba(255, 0, 85, 0.26);
    transform: translateY(-1px);
}

.habits-highlight {
    color: #ff7ad9;
    text-shadow: 0 0 12px rgba(255, 0, 85, 0.6);
}

.msg.system.chat-upgrade {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.14),
            rgba(0, 0, 0, 0.2));
    border-left-color: var(--primary);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.msg.system.chat-queue-note {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.2),
            rgba(255, 0, 85, 0.14));
    border-left-color: rgba(0, 242, 254, 0.8);
    box-shadow: 0 10px 22px rgba(0, 242, 254, 0.18);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.msg.system.chat-queue-note .msg-body {
    font-weight: 700;
}

.chat-upgrade-actions {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.msg.system.chat-plan-action {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.16),
            rgba(0, 0, 0, 0.24));
    border-left-color: var(--primary);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(0, 242, 254, 0.15);
}

.msg.system.chat-profile-update {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.14),
            rgba(255, 0, 153, 0.1));
    border-left-color: var(--primary);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(0, 242, 254, 0.15);
}

.msg.system.chat-profile-confirmation {
    border-left-color: #00ff88;
    background: linear-gradient(135deg,
            rgba(0, 255, 136, 0.14),
            rgba(0, 242, 254, 0.09));
}

.chat-profile-confirmation .chat-profile-update-chips {
    margin-top: 8px;
}

.chat-profile-update-text {
    color: #ecffff;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.chat-profile-update-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-update-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    color: #e9fbff;
    border: 1px solid rgba(0, 242, 254, 0.32);
    background: rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.chat-profile-update-note {
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
}

/* ============================================================
   RECIPE UPDATE FROM CHAT (banner con swap viejo → nuevo)
   ============================================================ */
.msg.system.chat-recipe-update {
    background: linear-gradient(135deg,
            rgba(0, 255, 136, 0.16),
            rgba(0, 242, 254, 0.08));
    border-left-color: var(--success, #00ff88);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(0, 255, 136, 0.18);
}

.chat-recipe-update-text {
    color: #eafff5;
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-recipe-update-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.recipe-update-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.4);
    color: #f0fff7;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    max-width: 100%;
}

.recipe-update-chip-old {
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.18);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 0, 85, 0.55);
    text-decoration-thickness: 1.5px;
}

.recipe-update-chip-new {
    color: #1a1f25;
    background: linear-gradient(135deg, #00ff88, #00f2fe);
    border-color: rgba(0, 255, 136, 0.65);
    font-weight: 800;
    box-shadow:
        0 6px 14px rgba(0, 255, 136, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.recipe-update-chip-arrow {
    color: var(--success, #00ff88);
    font-weight: 900;
    font-size: 0.95rem;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.45);
}

.chat-recipe-update-note {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
}

/* ============================================================
   FLASH animation on recipe card when chat applies a change
   ============================================================ */
.recipe-card-flash {
    animation: recipeCardFlash 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes recipeCardFlash {
    0% {
        box-shadow:
            0 0 0 0 rgba(0, 255, 136, 0),
            0 0 0 0 rgba(0, 242, 254, 0);
        outline: 0 solid rgba(0, 255, 136, 0);
        outline-offset: 0;
    }
    18% {
        box-shadow:
            0 0 0 8px rgba(0, 255, 136, 0.32),
            0 0 32px 4px rgba(0, 242, 254, 0.35);
        outline: 2px solid rgba(0, 255, 136, 0.7);
        outline-offset: 4px;
    }
    55% {
        box-shadow:
            0 0 0 4px rgba(0, 255, 136, 0.18),
            0 0 24px 6px rgba(0, 242, 254, 0.22);
        outline: 1.5px solid rgba(0, 255, 136, 0.4);
        outline-offset: 6px;
    }
    100% {
        box-shadow:
            0 0 0 0 rgba(0, 255, 136, 0),
            0 0 0 0 rgba(0, 242, 254, 0);
        outline: 0 solid rgba(0, 255, 136, 0);
        outline-offset: 0;
    }
}

.chat-plan-action-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chat-plan-action-title {
    font-weight: 800;
    color: #ecffff;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chat-plan-action-title i {
    color: var(--primary);
}

.chat-plan-action-text {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    line-height: 1.45;
}

.chat-plan-action-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-neon.chat-upgrade-btn {
    padding: 8px 14px;
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    box-shadow: 0 0 18px rgba(0, 242, 254, 0.28);
}

.tabs-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.22);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.25);
}

.tabs-bar.secondary {
    margin-top: 8px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.16);
    border-color: rgba(255, 255, 255, 0.08);
}

#plan-tabs,
#plan-subtabs,
#day-total {
    margin-top: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

#plan-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0;
    justify-content: flex-start;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

#plan-tabs.week-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
}

#plan-tabs.week-tabs .tab-btn {
    flex: 1 1 calc(25% - 12px);
    min-width: 84px;
    padding: 6px 10px;
    border-radius: 12px;
    gap: 2px;
}

@media (max-width: 1100px) {
    #plan-tabs.week-tabs .tab-btn {
        flex: 1 1 calc(33.333% - 12px);
    }
}

@media (max-width: 800px) {
    #plan-tabs.week-tabs .tab-btn {
        flex: 1 1 calc(50% - 12px);
    }
}

#plan-tabs,
#plan-subtabs,
#day-total {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 242, 254, 0.65) rgba(255, 255, 255, 0.04);
}

#plan-tabs::-webkit-scrollbar,
#plan-subtabs::-webkit-scrollbar,
#day-total::-webkit-scrollbar {
    height: 5px;
}

#plan-tabs::-webkit-scrollbar-track,
#plan-subtabs::-webkit-scrollbar-track,
#day-total::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
}

#plan-tabs::-webkit-scrollbar-thumb,
#plan-subtabs::-webkit-scrollbar-thumb,
#day-total::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,
            rgba(0, 242, 254, 0.85),
            rgba(0, 242, 254, 0.35));
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.35);
}

#plan-tabs .tab-btn,
#plan-subtabs .tab-btn,
#day-total .tab-btn {
    scroll-snap-align: start;
}

#plan-tabs .tab-btn {
    flex: 0 1 auto;
    min-width: 112px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    gap: 3px;
    flex-direction: column;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

#plan-tabs:not(.week-tabs) .tab-btn {
    min-width: 126px;
    padding: 10px 14px;
    gap: 4px;
    border-radius: 14px;
}

@media (max-width: 900px) {
    #plan-tabs .tab-btn {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }
}

#week-summary {
    margin: 16px 0 24px;
}

#rec-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
    margin-bottom: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tab-btn {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.66rem;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
    letter-spacing: 0.2px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.tab-btn.secondary {
    padding: 6px 10px;
    font-size: 0.68rem;
    min-width: 0;
    background: rgba(255, 255, 255, 0.05);
}

.tab-label {
    letter-spacing: 0.2px;
    font-weight: 650;
}

.tab-macros {
    font-size: 0.58rem;
    color: rgba(234, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 2px 7px;
    line-height: 1.1;
}

#plan-tabs .tab-macros {
    background: none;
    border: none;
    padding: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.74rem;
    font-weight: 720;
    letter-spacing: 0.1px;
    text-align: center;
    text-shadow: none;
}

#plan-tabs .tab-label {
    text-align: center;
    width: 100%;
    font-weight: 800;
    font-size: 0.72rem;
}

.tab-btn:hover {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.16),
            rgba(0, 120, 255, 0.08));
    border-color: rgba(0, 242, 254, 0.65);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 242, 254, 0.18);
}

.tab-btn.active {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.32),
            rgba(0, 120, 255, 0.22));
    border-color: rgba(0, 242, 254, 0.9);
    color: #eaffff;
    box-shadow:
        0 10px 20px rgba(0, 242, 254, 0.26),
        inset 0 0 0 1px rgba(0, 242, 254, 0.25);
}

#plan-tabs .tab-btn.active {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.18),
            rgba(0, 153, 204, 0.18));
    border-color: rgba(0, 242, 254, 0.78);
    box-shadow:
        0 10px 22px rgba(0, 242, 254, 0.2),
        inset 0 0 0 1px rgba(0, 242, 254, 0.2);
}

.tab-btn.active .tab-macros {
    color: #eaffff;
}

#day-total .tab-btn.secondary {
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    min-width: 140px;
    padding: 8px 10px;
}

#day-total .tab-label {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.75);
}

#day-total .tab-macros {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
}

.week-summary {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 18px;
}

.week-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.week-summary-title {
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.week-summary-target {
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.week-summary-toggle {
    padding: 6px 10px;
    font-size: 0.7rem;
}

.week-summary-body {
    margin-top: 12px;
    max-height: 260px;
    overflow: auto;
}

.week-summary.collapsed .week-summary-body {
    display: none;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.week-day-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 12px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.week-day-card:hover {
    border-color: rgba(0, 242, 254, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.week-day-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 10px;
    color: #fff;
}

.week-day-macros {
    color: var(--text-muted);
}

.week-day-meals {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.week-meal-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    align-items: center;
}

.week-meal-label {
    color: #fff;
}

.week-meal-title {
    color: var(--text-muted);
}

.week-meal-macros {
    color: var(--primary);
}

.exercise-gif {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    margin-bottom: 12px;
}

.exercise-gif img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.exercise-gif video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.exercise-options {
    display: flex;
    justify-content: flex-end;
    margin: 4px 0 14px;
}

.btn-small {
    padding: 8px 14px;
    font-size: 0.75rem;
}

.recipe-media {
    width: 100%;
    height: 160px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    margin: 10px 0 14px 0;
}

.recipe-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.msg.pdf-analysis {
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.12),
            rgba(0, 0, 0, 0.2));
    border: 1px solid rgba(255, 0, 85, 0.55);
    align-self: stretch;
    max-width: 100%;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(255, 0, 85, 0.18);
}

@keyframes msgPop {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.chat-input-area {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    gap: 12px;
    background: rgba(0, 0, 0, 0.25);
}

.chat-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    padding: 14px 20px;
    border-radius: 50px;
    color: white;
    outline: none;
    transition: all 0.3s ease;
}

.chat-input:focus {
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(0, 242, 254, 0.25);
}

.btn-chat-upload {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, 0.35);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-chat-upload:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(0, 242, 254, 0.25);
    transform: translateY(-1px);
}

.btn-chat-upload.btn-chat-upload-premium {
    border-color: rgba(255, 215, 0, 0.45);
    color: #ffd700;
    background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.1),
            rgba(255, 165, 0, 0.08));
    position: relative;
}

.btn-chat-upload.btn-chat-upload-premium:hover {
    border-color: rgba(255, 215, 0, 0.75);
    box-shadow: 0 10px 22px rgba(255, 215, 0, 0.25);
}

.btn-chat-upload.btn-chat-upload-premium:focus-visible {
    outline: 2px solid rgba(255, 215, 0, 0.85);
    outline-offset: 2px;
}

.btn-chat-upload.btn-chat-upload-premium::after {
    content: "PDF";
    position: absolute;
    right: -4px;
    top: -6px;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 2px 6px;
    border-radius: 999px;
    color: #000;
    background: linear-gradient(135deg, #ffd700, #ffa500);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.25);
}

.info-panel {
    background: rgba(0, 242, 254, 0.05);
    border-left: 4px solid var(--primary);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    font-size: 0.9rem;
}

.btn-regenerate {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    padding: 12px 16px;
    border-radius: 16px;
    cursor: pointer;
    margin-top: 15px;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    text-align: center;
    font-weight: 600;
    width: 100%;
}

.btn-regenerate:hover {
    border-color: rgba(0, 242, 254, 0.45);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(0, 242, 254, 0.16);
}

.recipe-counter {
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid var(--primary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    text-align: center;
    margin-top: 10px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow: auto;
}

.shopping-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 360px;
    overflow: auto;
}

.shopping-group {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.shopping-group:hover {
    border-color: rgba(0, 242, 254, 0.35);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}

.shopping-group-title {
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.shopping-group-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.shopping-group-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shopping-group-item.is-checked span {
    text-decoration: line-through;
    opacity: 0.55;
}

.shopping-item-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.shopping-item-check input {
    display: none;
}

.shopping-item-mark {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.2s ease;
    background: rgba(10, 12, 16, 0.6);
}

.shopping-group-item.is-checked .shopping-item-mark {
    border-color: rgba(0, 242, 254, 0.6);
    color: #00f2fe;
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.4);
}

.history-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

@media (hover: hover) {
    .history-item:hover {
        background: rgba(0, 242, 254, 0.1);
        border-color: rgba(0, 242, 254, 0.6);
        color: var(--primary);
    }
}

.history-title {
    font-weight: 600;
    display: block;
}

.history-meta {
    display: block;
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-top: 4px;
}

.history-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    padding: 8px 0;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.spinner {
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.btn-full-width {
    width: 100%;
}

.analysis-section {
    margin: 15px 0;
    padding: 16px;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.45),
            rgba(255, 255, 255, 0.02));
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--warning);
    box-shadow: var(--shadow-md);
}

.analysis-section h4 {
    margin-bottom: 10px;
    color: var(--warning);
    font-size: 0.95rem;
}

.analysis-section ul {
    list-style: none;
    padding: 0;
}

.analysis-section li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
}

.analysis-section li:last-child {
    border-bottom: none;
}

.analysis-section p {
    font-size: 0.85rem;
    line-height: 1.5;
}

.btn-chat-action {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 15px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 24px rgba(0, 242, 254, 0.2);
}

.btn-chat-action:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 30px rgba(0, 242, 254, 0.4);
}

.btn-chat-action.btn-chat-action-brand {
    background: linear-gradient(135deg, #00f2fe, #00b7ff);
    color: #051018;
    box-shadow:
        0 12px 28px rgba(0, 242, 254, 0.28),
        0 0 16px rgba(0, 242, 254, 0.2);
}

.btn-chat-action.btn-chat-action-brand:hover {
    box-shadow:
        0 16px 34px rgba(0, 242, 254, 0.42),
        0 0 20px rgba(0, 242, 254, 0.28);
}

.btn-chat-action.btn-chat-action-ghost {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: none;
}

/* MODAL SETTINGS */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

#habits-modal.modal-overlay {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

.modal-content {
    width: 500px;
    max-width: 90%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dashboard-prefs-modal {
    width: min(620px, 94vw);
    max-width: 94vw;
    gap: 16px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-prefs-header {
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
    padding-bottom: 12px;
    margin-bottom: 4px;
}

.dashboard-prefs-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-prefs-header-left h3 {
    margin: 0;
    font-size: 1.05rem;
}

.dashboard-prefs-header-left small {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.dashboard-prefs-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 242, 254, 0.12);
    border: 1px solid rgba(0, 242, 254, 0.34);
    color: #aaf6ff;
}

.dashboard-prefs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
}

.dashboard-prefs-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(7, 12, 18, 0.52);
}

.dashboard-prefs-row label {
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.88rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dashboard-prefs-row input[type="checkbox"] {
    accent-color: #00f2fe;
}

.dashboard-prefs-row small {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.78rem;
    line-height: 1.35;
}

.dashboard-prefs-sub {
    display: none;
}

.dashboard-prefs-modal label {
    color: rgba(255, 255, 255, 0.94);
}

@media (max-width: 760px) {
    .dashboard-prefs-grid {
        grid-template-columns: 1fr;
    }
}

.plan-confirm-modal {
    width: 520px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    animation: planConfirmIn 0.35s ease;
}

.plan-confirm-overlay {
    animation: planConfirmOverlay 0.3s ease;
}

.plan-confirm-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(500px 180px at 15% 0%,
            rgba(0, 242, 254, 0.12),
            transparent 60%),
        radial-gradient(420px 160px at 85% 10%,
            rgba(255, 0, 85, 0.12),
            transparent 60%);
    pointer-events: none;
}

.plan-confirm-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.plan-confirm-heading small {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.plan-confirm-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 242, 254, 0.12);
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: var(--primary);
    box-shadow: 0 0 18px rgba(0, 242, 254, 0.2);
}

.plan-confirm-icon i {
    font-size: 1.1rem;
}

.plan-confirm-summary {
    position: relative;
    z-index: 1;
}

.plan-confirm-summary {
    display: grid;
    gap: 10px;
}

.plan-confirm-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.plan-confirm-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 8px 10px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.88);
    text-align: center;
    letter-spacing: 0.2px;
}

.plan-confirm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.85rem;
    position: relative;
    overflow: hidden;
}

.plan-confirm-row::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent,
            rgba(0, 242, 254, 0.08),
            transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.plan-confirm-row:hover::after {
    opacity: 1;
}

.plan-confirm-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.72rem;
}

.plan-confirm-value {
    color: #fff;
    font-weight: 600;
    text-align: right;
}

.plan-confirm-usage {
    border: 1px solid rgba(0, 242, 254, 0.18);
    background: rgba(0, 242, 254, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-confirm-usage i {
    color: var(--primary);
}

.plan-confirm-note {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.plan-confirm-cta {
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 34px rgba(0, 242, 254, 0.28);
}

.plan-confirm-cta::after {
    content: "";
    position: absolute;
    top: -20%;
    left: -60%;
    width: 40%;
    height: 140%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.7),
            transparent);
    transform: skewX(-18deg);
    opacity: 0.6;
    animation: planConfirmShine 3.2s ease-in-out infinite;
}

.plan-confirm-cta:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 20px 44px rgba(0, 242, 254, 0.35);
}

@keyframes planConfirmIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes planConfirmOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes planConfirmShine {
    0% {
        left: -60%;
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    40% {
        left: 120%;
        opacity: 0;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

.history-modal {
    width: 560px;
}

.history-modal-list,
.saved-recipes-list {
    max-height: calc(85vh - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-right: 8px;
    transform: translate3d(0, 0, 0);
    /* will-change removed to restore WebView tiling */
    overscroll-behavior: contain;
}

.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 24000;
    display: none;
}

.tour-highlight {
    position: fixed;
    border: 2px solid var(--primary);
    border-radius: 16px;
    box-shadow:
        0 0 0 9999px rgba(5, 8, 12, 0.75),
        0 0 24px rgba(0, 242, 254, 0.6);
    transition: all 0.2s ease;
    pointer-events: none;
}

.tour-card {
    position: fixed;
    max-width: 360px;
    background: rgba(10, 12, 18, 0.92);
    border: 1px solid rgba(0, 242, 254, 0.35);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.tour-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.tour-title {
    font-weight: 700;
    color: var(--primary);
}

.tour-progress {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.tour-text {
    font-size: 0.85rem;
    color: #e2e8f0;
    line-height: 1.5;
    margin-bottom: 14px;
}

.tour-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tips-modal {
    width: 560px;
}

.tips-modal-list {
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shopping-modal {
    width: 600px;
}

.shopping-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(8, 12, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.shopping-toolbar label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

.shopping-select {
    flex: 1;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(6, 10, 16, 0.7);
    color: #fff;
    font-size: 0.82rem;
}

.shopping-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.shopping-toggle input {
    accent-color: #00f2fe;
}

.profile-modal {
    width: min(1060px, 94vw);
    max-width: 94vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}

.profile-modal h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.profile-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
}

.profile-edit-actions .btn-soft {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.76rem;
}

.profile-modal .wizard-summary-modern {
    max-height: calc(90vh - 230px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
    transform: translate3d(0, 0, 0);
    /* will-change removed to restore WebView tiling */
    overscroll-behavior: contain;
}

@media (min-width: 1200px) {
    .profile-modal {
        max-height: min(94vh, 1040px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .profile-modal .wizard-summary-modern {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

.profile-summary-modern {
    margin-top: 0;
}

.profile-modal .summary-grid {
    gap: 14px;
}

.profile-modal .summary-column {
    gap: 14px;
}

.profile-modal .summary-card {
    width: 100%;
}

@media (max-width: 1000px) {
    .profile-modal {
        width: min(760px, 96vw);
        max-height: 90vh;
    }

    .profile-modal .wizard-summary-modern {
        max-height: calc(90vh - 240px);
    }
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 720px) {
    .modal-actions {
        justify-content: stretch;
    }

    .modal-actions .btn-soft,
    .modal-actions .btn-neon {
        flex: 1 1 100%;
        width: 100%;
    }
}

.iahc-upgrade-modal {
    width: 820px;
    max-width: 94vw;
    padding: 22px;
}

.iahc-upgrade-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.iahc-upgrade-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.iahc-upgrade-title {
    margin: 6px 0 0;
    font-size: 1.25rem;
}

.iahc-upgrade-sub {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.iahc-upgrade-billing {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.iahc-billing-pill {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.3px;
    transition: all 0.18s ease;
}

.iahc-billing-pill.active {
    border-color: rgba(0, 242, 254, 0.55);
    background: rgba(0, 242, 254, 0.12);
    color: var(--primary);
    box-shadow: 0 10px 24px rgba(0, 242, 254, 0.16);
}

.iahc-save {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 204, 0, 0.14);
    color: rgba(255, 204, 0, 0.95);
    border: 1px solid rgba(255, 204, 0, 0.22);
    font-weight: 900;
    font-size: 0.7rem;
}

.iahc-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

@media (max-width: 900px) {
    .iahc-upgrade-grid {
        grid-template-columns: 1fr;
    }
}

.iahc-plan-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.22);
    border-radius: 18px;
    padding: 14px;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.iahc-plan-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 242, 254, 0.35);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.iahc-plan-card.is-current {
    border-color: rgba(255, 255, 255, 0.22);
}

.iahc-plan-card.iahc-highlight {
    border-color: rgba(255, 204, 0, 0.32);
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.1),
            rgba(0, 242, 254, 0.06));
}

.iahc-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.iahc-plan-name {
    font-weight: 1000;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.iahc-plan-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.86);
    font-weight: 900;
    letter-spacing: 0.4px;
}

.iahc-plan-card[data-plan="free"] .iahc-plan-badge {
    opacity: 0.8;
}

.iahc-plan-price {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 800;
    font-size: 0.95rem;
}

.iahc-plan-feats {
    margin: 10px 0 0;
    padding-left: 18px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
    line-height: 1.55;
}

.iahc-plan-feats li {
    margin: 6px 0;
}

.iahc-plan-cta {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 999px;
    font-weight: 1000;
    letter-spacing: 0.3px;
    border: 1px solid rgba(0, 242, 254, 0.3);
    background: rgba(0, 242, 254, 0.14);
    color: var(--primary);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.iahc-plan-cta:hover {
    transform: translateY(-1px);
    background: rgba(0, 242, 254, 0.18);
    box-shadow: 0 14px 30px rgba(0, 242, 254, 0.16);
}

.iahc-plan-cta.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
}

.iahc-upgrade-actions {
    justify-content: space-between;
    margin-top: 16px;
}

/* -----------------------------------------------------------------
 * UPGRADE MODAL — premium redesign (2026-05-22)
 * Manteniendo el diseño base de iahc-upgrade-modal arriba, añadimos
 * el hero con icono, las cintas (ribbons), el footer sticky, y el
 * tratamiento neón del CTA primario. Las clases base se mantienen
 * por retrocompatibilidad — esto solo agrega.
 * ----------------------------------------------------------------- */
.iahc-upgrade-overlay {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    background: radial-gradient(ellipse at top,
            rgba(0, 242, 254, 0.08),
            rgba(0, 0, 0, 0.85) 60%);
}

.iahc-upgrade-overlay .iahc-upgrade-modal {
    width: min(960px, 96vw);
    max-width: 960px;
    padding: 28px 26px 22px;
    position: relative;
    animation: iahcUpgradeIn 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
    border: 1px solid rgba(0, 242, 254, 0.2);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 242, 254, 0.08);
}

@keyframes iahcUpgradeIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.iahc-upgrade-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    z-index: 2;
}

.iahc-upgrade-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 242, 254, 0.4);
    color: var(--primary);
    transform: rotate(90deg);
}

.iahc-upgrade-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 50px;
    margin-bottom: 8px;
}

.iahc-upgrade-hero-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.22),
            rgba(0, 242, 254, 0.16));
    border: 1px solid rgba(255, 204, 0, 0.4);
    color: #ffcc00;
    box-shadow: 0 10px 24px rgba(255, 204, 0, 0.18);
}

.iahc-upgrade-hero-text {
    flex: 1;
    min-width: 0;
}

.iahc-upgrade-hero-text .iahc-upgrade-title {
    margin: 4px 0 6px;
    font-size: 1.4rem;
    background: linear-gradient(90deg, #fff 30%, var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 1000;
    letter-spacing: -0.01em;
}

.iahc-upgrade-reason {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
    line-height: 1.5;
}

.iahc-plan-card {
    display: flex;
    flex-direction: column;
}

.iahc-plan-feats {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;
}

.iahc-plan-feats li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 7px 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.85rem;
    line-height: 1.45;
}

.iahc-feat-check {
    flex: 0 0 16px;
    margin-top: 3px;
    color: var(--primary);
    font-size: 0.78rem;
    text-shadow: 0 0 8px rgba(0, 242, 254, 0.5);
}

.iahc-plan-ribbon {
    position: absolute;
    top: 10px;
    right: -2px;
    padding: 4px 12px;
    border-radius: 999px 4px 4px 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.66rem;
    font-weight: 1000;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.iahc-plan-ribbon-pop {
    background: linear-gradient(90deg, #ffcc00, #ff0055);
    color: #0a0a12;
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(255, 0, 85, 0.28);
}

.iahc-plan-price {
    margin-top: 8px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}

.iahc-plan-price-period {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.iahc-plan-card.iahc-highlight {
    border-color: rgba(0, 242, 254, 0.5);
    background: linear-gradient(160deg,
            rgba(0, 242, 254, 0.08),
            rgba(255, 0, 85, 0.04));
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(0, 242, 254, 0.18);
    transform: scale(1.02);
}

.iahc-plan-card.iahc-highlight:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.5),
        0 0 36px rgba(0, 242, 254, 0.28);
}

.iahc-plan-cta {
    margin-top: auto;
    gap: 6px;
}

.iahc-cta-primary {
    background: linear-gradient(90deg, var(--primary), #0099cc);
    color: #001218;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(0, 242, 254, 0.24);
}

.iahc-cta-primary:hover {
    background: linear-gradient(90deg, #00f2fe, #00b8e6);
    color: #001218;
    box-shadow: 0 18px 36px rgba(0, 242, 254, 0.36);
    transform: translateY(-1px);
}

.iahc-upgrade-footer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.iahc-upgrade-later {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 0.88rem;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.18s ease;
}

.iahc-upgrade-later:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.05);
}

.iahc-upgrade-manage {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0, 242, 254, 0.28);
    background: rgba(0, 242, 254, 0.06);
    transition: all 0.18s ease;
}

.iahc-upgrade-manage:hover {
    background: rgba(0, 242, 254, 0.12);
    border-color: rgba(0, 242, 254, 0.5);
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    .iahc-upgrade-overlay .iahc-upgrade-modal {
        padding: 22px 16px 16px;
    }

    .iahc-upgrade-hero {
        padding-right: 44px;
    }

    .iahc-upgrade-hero-icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .iahc-upgrade-hero-text .iahc-upgrade-title {
        font-size: 1.15rem;
    }

    .iahc-plan-card.iahc-highlight {
        transform: none;
    }
}

#ing-content {
    white-space: pre-line;
}

/* TIMELINE SEMANAL CON MACROS Y ADHERENCIA */
.timeline-wrapper {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 16px;
    margin-top: 16px;
}

.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.timeline-title {
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.6px;
}

.timeline-toggle {
    padding: 6px 12px;
    font-size: 0.7rem;
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: var(--primary);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timeline-toggle:hover {
    background: rgba(0, 242, 254, 0.15);
    box-shadow: 0 4px 12px rgba(0, 242, 254, 0.1);
}

.timeline-body {
    display: grid;
    gap: 10px;
}

.timeline-day {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 242, 254, 0.12);
    border-radius: 12px;
    padding: 12px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timeline-day:hover {
    border-color: rgba(0, 242, 254, 0.3);
    background: rgba(0, 242, 254, 0.04);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.timeline-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.timeline-day-name {
    color: #fff;
}

.timeline-adherence {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--success);
    font-size: 0.7rem;
    font-weight: 700;
}

.timeline-macros-mini {
    display: flex;
    gap: 8px;
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.timeline-macro {
    display: flex;
    align-items: center;
    gap: 3px;
}

.timeline-macro-value {
    color: var(--primary);
    font-weight: 700;
}

/* SUGERENCIAS INTELIGENTES POST-PLAN */
.suggestions-panel {
    background: rgba(0, 242, 254, 0.06);
    border: 1px solid rgba(0, 242, 254, 0.2);
    border-radius: 14px;
    padding: 16px;
    margin-top: 16px;
}

.suggestions-title {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.suggestion-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 242, 254, 0.15);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.suggestion-item:hover {
    background: rgba(0, 242, 254, 0.1);
    border-color: rgba(0, 242, 254, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.suggestion-icon {
    font-size: 1.3rem;
    color: var(--primary);
}

.suggestion-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 600;
    line-height: 1.4;
}

/* MODO IMPRESIÓN - LIMPIO PARA PDF */
@media print {
    body {
        background: white;
        color: #000;
    }

    .header-bar,
    .sidebar-ctrl,
    .chat-widget,
    .btn-icon,
    .btn-print,
    .modal-overlay,
    .tour-overlay,
    .control-section {
        display: none !important;
    }

    .plan-card {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    .recipe-side,
    .exercise-side {
        background: transparent;
        border: none;
        page-break-inside: avoid;
    }

    .msg,
    .tag,
    .macro-pill {
        border-color: #999;
        background: #f9f9f9;
        page-break-inside: avoid;
    }

    .msg.user {
        background: #e3f2fd;
        color: #000;
    }

    .week-summary,
    .timeline-wrapper,
    .suggestions-panel {
        page-break-inside: avoid;
    }
}

.print-button-group {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.btn-print {
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 10px 18px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-transform: uppercase;
}

.btn-print:hover {
    background: rgba(0, 242, 254, 0.2);
    box-shadow: 0 8px 20px rgba(0, 242, 254, 0.2);
    transform: translateY(-2px);
}

/* Ensure Recipe Side handles absolute overlay correctly */
.recipe-side {
    position: relative;
    /* other styles... */
}

/* Ensure Loading Overlay covers parent */
.recipe-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(5, 12, 20, 0.7);
    /* darker backdrop */
    backdrop-filter: blur(4px);
    border-radius: inherit;
    /* Flex content centering if needed, but we use absolute center in card */
}

/* Loading Skeletons */
@keyframes skeletonShimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.skeleton-loading {
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 242, 254, 0.1) 50%,
            rgba(0, 0, 0, 0.3) 100%);
    background-size: 1000px 100%;
    animation: skeletonShimmer 2s infinite;
    border-radius: 8px;
    min-height: 12px;
}

.skeleton-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 242, 254, 0.1);
    border-radius: 14px;
    padding: 16px;
}

.skeleton-title {
    height: 24px;
    width: 40%;
    margin-bottom: 12px;
    border-radius: 6px;
}

.skeleton-text {
    height: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text:last-child {
    margin-bottom: 0;
}

/* Typography Unification */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.5em;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.1rem;
}

p {
    margin-bottom: 1em;
    color: var(--text-muted);
}

small {
    font-size: 0.85em;
}

/* Enhanced Skeletons */
.plan-skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeIn 0.5s ease;
}

.skeleton-block {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.skeleton-line {
    height: 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.02) 25%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.02) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

.skeleton-line.short {
    width: 40%;
}

.skeleton-line.medium {
    width: 70%;
}

.skeleton-line.title {
    height: 24px;
    margin-bottom: 16px;
    width: 60%;
    border-radius: 6px;
}

.skeleton-img {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    margin-bottom: 15px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.02) 25%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.02) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

/* Modal Spacing */
.modal-content {
    padding: 32px;
}

/* Typography Unification */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0.5em;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.1rem;
}

p {
    margin-bottom: 1em;
    color: var(--text-muted);
}

small {
    font-size: 0.85em;
}

/* Enhanced Skeletons */
.plan-skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeIn 0.5s ease;
}

.skeleton-block {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.skeleton-line {
    height: 12px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.02) 25%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.02) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

.skeleton-line.short {
    width: 40%;
}

.skeleton-line.medium {
    width: 70%;
}

.skeleton-line.title {
    height: 24px;
    margin-bottom: 16px;
    width: 60%;
    border-radius: 6px;
}

.skeleton-img {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    margin-bottom: 15px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.02) 25%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.02) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

/* Modal Spacing */
.modal-content {
    padding: 32px;
}

/* Typing Effect */
.typing-cursor {
    display: inline-block;
    width: 6px;
    height: 14px;
    background: var(--primary);
    animation: blink 1s infinite;
    margin-left: 4px;
    vertical-align: middle;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Typing Effect */
.typing-cursor {
    display: inline-block;
    width: 6px;
    height: 14px;
    background: var(--primary);
    animation: blink 1s infinite;
    margin-left: 4px;
    vertical-align: middle;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Compact Result Layout Overrides */
#rec-ing-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 15px;
}

#rec-ing-list .shopping-item {
    padding: 6px 10px;
    font-size: 0.85rem;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
}

#rec-ing-list .shopping-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

#rec-title,
#exe-title {
    font-size: 1.5rem;
    margin-bottom: 0.3em;
}

#rec-desc,
#exe-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.how-to-step {
    margin-bottom: 8px;
    gap: 10px;
}

.how-to-icon {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
}

.how-to-step div:last-child {
    font-size: 0.9rem;
    line-height: 1.3;
    padding-top: 2px;
}

@media (max-width: 600px) {
    #rec-ing-list {
        grid-template-columns: 1fr;
    }
}

/* Compact Result Layout Overrides */
#rec-ing-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin-bottom: 15px;
}

#rec-ing-list .shopping-item {
    padding: 6px 10px;
    font-size: 0.85rem;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
}

#rec-ing-list .shopping-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

#rec-title,
#exe-title {
    font-size: 1.5rem;
    margin-bottom: 0.3em;
}

#rec-desc,
#exe-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.how-to-step {
    margin-bottom: 8px;
    gap: 10px;
}

.how-to-icon {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
}

.how-to-step div:last-child {
    font-size: 0.9rem;
    line-height: 1.3;
    padding-top: 2px;
}

@media (max-width: 600px) {
    #rec-ing-list {
        grid-template-columns: 1fr;
    }
}

/* Recipe Meta Layout */
.recipe-meta-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.macros-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 25px;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

.macro-item {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.macro-item strong {
    color: #fff;
    margin-left: 4px;
}

/* Adjust checklist inside recipe card */
#rec-ing-list.checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}

/* Enhanced Header Layout */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px 0;
    gap: 20px;
}

.header-branding {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-title-text h1 {
    font-size: 1.6rem;
    margin: 0;
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title-text .user-name {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}

.plan-badge {
    color: #00f2fe;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.78em;
    letter-spacing: 0.6px;
    background: rgba(0, 242, 254, 0.12);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0, 242, 254, 0.28);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(0, 242, 254, 0.12);
}

.plan-badge--free {
    color: #9aa4b2;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.plan-badge--pro {
    color: #eaffff;
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.2),
            rgba(139, 92, 246, 0.16));
    border-color: rgba(0, 242, 254, 0.6);
    box-shadow:
        0 10px 28px rgba(0, 242, 254, 0.22),
        inset 0 0 0 1px rgba(0, 242, 254, 0.22);
    animation: iahcTierPulse 2.6s ease-in-out infinite;
}

.plan-badge--empresa {
    color: #1a1400;
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.65),
            rgba(255, 153, 0, 0.35));
    border-color: rgba(255, 204, 0, 0.8);
    box-shadow:
        0 12px 30px rgba(255, 204, 0, 0.28),
        inset 0 0 0 1px rgba(255, 204, 0, 0.3);
    animation: iahcTierPulse 2.2s ease-in-out infinite;
}

.plan-badge--supremo {
    color: #fff;
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.4),
            rgba(139, 92, 246, 0.35),
            rgba(0, 242, 254, 0.25));
    border-color: rgba(255, 0, 85, 0.55);
    box-shadow:
        0 12px 34px rgba(255, 0, 85, 0.28),
        inset 0 0 0 1px rgba(255, 0, 85, 0.22);
    animation: iahcSupremoGlow 2.2s ease-in-out infinite;
}

.plan-badge:empty {
    display: none;
}

body[data-plan-tier="pro"] .header-buttons {
    border-color: rgba(0, 242, 254, 0.35);
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.14),
            rgba(139, 92, 246, 0.12));
    box-shadow: 0 12px 26px rgba(0, 242, 254, 0.16);
}

body[data-plan-tier="empresa"] .header-buttons {
    border-color: rgba(255, 204, 0, 0.45);
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.18),
            rgba(0, 242, 254, 0.1));
    box-shadow: 0 12px 28px rgba(255, 204, 0, 0.2);
}

body[data-plan-tier="supremo"] .header-buttons {
    border-color: rgba(255, 0, 85, 0.45);
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.16),
            rgba(139, 92, 246, 0.16),
            rgba(0, 242, 254, 0.1));
    box-shadow: 0 12px 30px rgba(255, 0, 85, 0.24);
}

body[data-plan-tier="pro"] .plan-info-banner {
    border-color: rgba(0, 242, 254, 0.4);
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.12),
            rgba(139, 92, 246, 0.08));
}

body[data-plan-tier="empresa"] .plan-info-banner {
    border-color: rgba(255, 204, 0, 0.45);
    background: linear-gradient(135deg,
            rgba(255, 204, 0, 0.16),
            rgba(0, 242, 254, 0.08));
}

body[data-plan-tier="supremo"] .plan-info-banner {
    border-color: rgba(255, 0, 85, 0.5);
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.14),
            rgba(139, 92, 246, 0.12));
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 12px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
}

@media (max-width: 900px) {
    .header-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

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

    .header-buttons {
        justify-content: center;
    }

    .user-badge {
        text-align: center;
    }
}

/* Enhanced Header Layout */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px 0;
    gap: 20px;
}

.header-branding {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-title-text h1 {
    font-size: 1.6rem;
    margin: 0;
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title-text .user-name {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 12px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
}

@media (max-width: 900px) {
    .header-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

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

    .header-buttons {
        justify-content: center;
    }

    .user-badge {
        text-align: center;
    }
}

/* User Meta Inline Styling */
.user-meta-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-badge-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    margin-top: 2px;
}

/* Override JS-injected classes */
.iahc-tier-badge {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    animation: none !important;
    box-shadow: none !important;
}

.tier-pill {
    font-weight: 800;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tier Colors for the small pill only */
.tier-free .tier-pill {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.tier-pro .tier-pill {
    background: rgba(0, 242, 254, 0.15);
    color: var(--primary);
    border: 1px solid rgba(0, 242, 254, 0.3);
}

.tier-empresa .tier-pill {
    background: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
    border: 1px solid rgba(255, 204, 0, 0.3);
}

.tier-supremo .tier-pill {
    background: linear-gradient(90deg, #ff0055, #7a00ff);
    color: white;
}

.user-badge-inline span:not(.tier-pill) {
    opacity: 0.8;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .user-badge-inline {
        justify-content: center;
    }
}

/* User Meta Inline Styling */
.user-meta-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-badge-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    margin-top: 2px;
}

/* Override JS-injected classes */
.iahc-tier-badge {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    animation: none !important;
    box-shadow: none !important;
}

.tier-pill {
    font-weight: 800;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Tier Colors for the small pill only */
.tier-free .tier-pill {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

.tier-pro .tier-pill {
    background: rgba(0, 242, 254, 0.15);
    color: var(--primary);
    border: 1px solid rgba(0, 242, 254, 0.3);
}

.tier-empresa .tier-pill {
    background: rgba(255, 204, 0, 0.15);
    color: #ffcc00;
    border: 1px solid rgba(255, 204, 0, 0.3);
}

.tier-supremo .tier-pill {
    background: linear-gradient(90deg, #ff0055, #7a00ff);
    color: white;
}

.user-badge-inline span:not(.tier-pill) {
    opacity: 0.8;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .user-badge-inline {
        justify-content: center;
    }
}

/* Logo Alignment consolidated */

/* User Meta Refinements */
.user-badge-inline {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 4px;
    color: #bbb;
    font-weight: 400;
}

.user-badge-inline span {
    display: inline-block;
}

/* Modal Improvements (Saved Plans, History, etc) */
.modal-content {
    background: #0a0f18;
    /* Darker solid bg for better readability */
    border: 1px solid rgba(0, 242, 254, 0.2);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.history-list,
.history-modal-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.history-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.history-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: block;
}

.history-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #fff;
}

.history-summary {
    font-size: 0.8rem;
    color: #aaa;
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .modal-content {
        width: min(980px, 92vw);
    }

    .history-modal,
    .shopping-modal,
    .tips-modal,
    .profile-modal,
    .habits-modal,
    .progress-modal {
        width: min(980px, 92vw);
        max-width: 980px;
    }

    .iahc-upgrade-modal {
        width: min(1100px, 94vw);
        max-width: 1100px;
    }

    .history-modal-list,
    .tips-modal-list,
    .shopping-groups,
    .profile-modal .wizard-summary,
    .habits-panels,
    .progress-modal {
        max-height: 70vh;
    }

    .progress-modal {
        max-height: 84vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        transform: translate3d(0, 0, 0);
        /* will-change removed to restore WebView tiling */
        overscroll-behavior: contain;
    }

    .progress-grid {
        max-height: calc(84vh - 220px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-right: 6px;
        transform: translate3d(0, 0, 0);
        /* will-change removed to restore WebView tiling */
        overscroll-behavior: contain;
    }
}

/* Logo Alignment consolidated */

/* User Meta Refinements */
.user-badge-inline {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 4px;
    color: #bbb;
    font-weight: 400;
}

.user-badge-inline span {
    display: inline-block;
}

/* Modal Improvements (Saved Plans, History, etc) */
.modal-content {
    background: #0a0f18;
    /* Darker solid bg for better readability */
    border: 1px solid rgba(0, 242, 254, 0.2);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.history-list,
.history-modal-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.history-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary);
    transform: translateY(-2px);
}

.history-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: block;
}

.history-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #fff;
}

.history-summary {
    font-size: 0.8rem;
    color: #aaa;
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Enhanced User Info Pill - Cyan Theme */
.user-badge-inline {
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.35);
    padding: 8px 16px;
    border-radius: 999px;
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0, 242, 254, 0.12);
    transition: all 0.3s ease;
}

.user-badge-inline:hover {
    background: rgba(0, 242, 254, 0.15);
    border-color: rgba(0, 242, 254, 0.5);
    box-shadow: 0 6px 20px rgba(0, 242, 254, 0.2);
}

.user-badge-inline .badge-name {
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.user-badge-inline .badge-sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.6rem;
}

.user-badge-inline span:not(.badge-name):not(.badge-sep) {
    color: rgba(255, 255, 255, 0.9);
}

/* Bigger Branding & Alignment */
.header-branding {
    display: flex;
    align-items: center;
    /* Center vertically */
    gap: 18px;
}

.header-heart {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: transparent;
    border: 0;
    box-shadow: none;
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    overflow: visible;
}

.header-heart i {
    font-size: 1.8rem;
    color: var(--primary);
}

.header-heart img,
.header-heart svg {
    width: 60px;
    height: 60px;
    display: block;
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 0 12px rgba(0, 242, 254, 0.35));
    overflow: visible;
}

.header-heart.tier-pro {
    background: transparent;
}

.header-heart.tier-empresa {
    background: transparent;
}

.header-heart.tier-supremo {
    background: transparent;
    animation: none;
}

.header-heart.tier-pro img,
.header-heart.tier-pro svg {
    filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.65));
}

.header-heart.tier-empresa img,
.header-heart.tier-empresa svg {
    filter: drop-shadow(0 0 16px rgba(255, 204, 0, 0.65));
}

.header-heart.tier-supremo img,
.header-heart.tier-supremo svg {
    filter: drop-shadow(0 0 10px rgba(255, 0, 85, 0.6)) drop-shadow(0 0 8px rgba(0, 242, 254, 0.6));
}

.header-heart.tier-pro::before,
.header-heart.tier-empresa::before,
.header-heart.tier-supremo::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 18px;
    background: conic-gradient(from 0deg,
            rgba(139, 92, 246, 0),
            rgba(139, 92, 246, 0.4),
            rgba(0, 242, 254, 0),
            rgba(139, 92, 246, 0.4),
            rgba(139, 92, 246, 0));
    opacity: 0.5;
    animation:
        logoRingSpin 6s linear infinite,
        logoRingPulse 2.8s ease-in-out infinite;
    pointer-events: none;
    filter: blur(2px);
}

.header-heart.tier-empresa::before {
    background: conic-gradient(from 0deg,
            rgba(255, 204, 0, 0),
            rgba(255, 204, 0, 0.5),
            rgba(0, 242, 254, 0),
            rgba(255, 204, 0, 0.5),
            rgba(255, 204, 0, 0));
    opacity: 0.55;
}

.header-heart.tier-supremo::before {
    background: conic-gradient(from 0deg,
            rgba(255, 0, 85, 0),
            rgba(255, 0, 85, 0.6),
            rgba(0, 242, 254, 0),
            rgba(0, 242, 254, 0.6),
            rgba(255, 0, 85, 0));
    opacity: 0.6;
    animation:
        logoRingSpin 4.5s linear infinite,
        logoRingPulse 2s ease-in-out infinite;
    inset: 4px;
    /* Slightly more inside to avoid clipping */
}

@keyframes logoRingSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes logoRingPulse {

    0%,
    100% {
        filter: blur(0px);
    }

    50% {
        filter: blur(1px);
    }
}

.header-title-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-title-text h1 {
    font-size: 2rem;
    margin: 0 0 2px 0;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

#user-name-label {
    display: none !important;
}

.user-name {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    opacity: 0.9;
    margin-left: 2px;
}

#history-modal .history-modal,
#saved-recipes-modal .history-modal {
    border: 1px solid rgba(0, 242, 254, 0.3);
    background:
        radial-gradient(120% 140% at 0% 0%,
            rgba(0, 242, 254, 0.09),
            transparent 45%),
        radial-gradient(120% 140% at 100% 0%,
            rgba(122, 247, 255, 0.08),
            transparent 45%),
        rgba(8, 16, 28, 0.94);
}

#history-modal .modal-header,
#saved-recipes-modal .modal-header {
    border-bottom: 1px solid rgba(0, 242, 254, 0.2);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

#history-modal .history-modal-list,
#saved-recipes-modal .history-modal-list {
    gap: 14px;
}

#history-modal .history-item,
#saved-recipes-modal .history-item {
    border: 1px solid rgba(0, 242, 254, 0.22);
    background: linear-gradient(135deg,
            rgba(11, 24, 39, 0.88),
            rgba(6, 14, 24, 0.92));
    border-radius: 16px;
}

@media (hover: hover) {
    #history-modal .history-item:hover,
    #saved-recipes-modal .history-item:hover {
        border-color: rgba(0, 242, 254, 0.65);
        background: linear-gradient(135deg,
                rgba(15, 35, 55, 0.95),
                rgba(10, 20, 35, 0.98));
    }
}

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

.history-scope-chip,
.history-count-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.history-scope-chip {
    color: var(--primary);
    border: 1px solid rgba(0, 242, 254, 0.35);
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.16),
            rgba(0, 242, 254, 0.08));
    box-shadow: inset 0 0 0 1px rgba(0, 242, 254, 0.08);
}

.history-count-chip {
    color: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
}

/* Enhanced User Info Pill */
.user-badge-inline {
    background: rgba(255, 204, 0, 0.1);
    border: 1px solid rgba(255, 204, 0, 0.3);
    padding: 6px 12px;
    border-radius: 999px;
    margin-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffd966;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.user-badge-inline span {
    display: inline-block;
    color: #fff;
    opacity: 0.9;
}

.user-badge-inline span:first-child {
    font-weight: 800;
    color: #ffd966;
    text-transform: uppercase;
}

/* Consolidated logo styles */

.today-overview {
    margin-bottom: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 18px;
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.08),
            rgba(255, 0, 85, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.today-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.today-title {
    font-weight: 800;
    color: #eaffff;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.today-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.today-badge {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #eaffff;
    border: 1px solid rgba(0, 242, 254, 0.55);
    background: radial-gradient(circle at 20% 20%,
            rgba(0, 242, 254, 0.22),
            rgba(10, 14, 20, 0.6));
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.35),
        inset 0 0 12px rgba(0, 242, 254, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.today-badge-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.today-badge-text {
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
}

.today-badge-track {
    width: 72px;
    height: 7px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 50%,
            rgba(255, 255, 255, 0.22),
            rgba(255, 255, 255, 0.08));
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 0 0 8px rgba(0, 0, 0, 0.5),
        0 0 14px rgba(0, 242, 254, 0.2);
    animation: badgeGlow 2.2s ease-in-out infinite;
}

.today-badge-track::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.today-badge-ring {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.35));
    animation: ringPulse 2.4s ease-in-out infinite;
    position: relative;
}

.today-badge-ring svg {
    width: 38px;
    height: 38px;
    transform: rotate(-90deg);
}

.badge-ring-svg {
    animation: ringSpin 6s linear infinite;
}

.badge-ring-track {
    fill: none;
    stroke: rgba(0, 242, 254, 0.25);
    stroke-width: 3;
}

.badge-ring-orbit {
    fill: none;
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 5 6;
    animation: ringOrbit 2.6s ease-in-out infinite;
}

.badge-ring-liquid {
    fill: url(#badge-ring-gradient);
    opacity: 0.35;
    filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.35));
    animation: ringLiquidGlow 2.2s ease-in-out infinite;
}

.badge-liquid {
    animation: liquidWave 3.2s linear infinite;
    transform-origin: 50% 50%;
}

.badge-ring-progress {
    fill: none;
    stroke: url(#badge-ring-gradient);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 98;
    transition: stroke-dashoffset 0.7s cubic-bezier(0.16, 0.9, 0.2, 1);
    animation: ringGlow 1.9s ease-in-out infinite;
}

.today-badge--complete .badge-ring-progress,
.today-badge--complete .badge-ring-liquid,
.today-badge--complete .today-badge-ring {
    filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.6)) drop-shadow(0 0 18px rgba(255, 0, 85, 0.5));
}

.today-badge--complete .badge-ring-progress {
    animation: ringGlow 1.2s ease-in-out infinite;
}

.today-badge-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(0, 242, 254, 0.95),
            rgba(92, 192, 255, 0.95),
            rgba(255, 0, 85, 0.9));
    background-size: 280% 100%;
    box-shadow:
        0 0 16px rgba(0, 242, 254, 0.45),
        0 0 26px rgba(255, 0, 85, 0.22);
    transition: width 0.7s cubic-bezier(0.16, 0.9, 0.2, 1);
    position: relative;
    overflow: hidden;
    animation: badgeFlow 2.6s ease-in-out infinite;
}

.today-badge-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.9),
            rgba(255, 255, 255, 0));
    animation: badgeShimmer 1.9s ease-in-out infinite;
}

.today-badge-fill::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%,
            rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0) 45%);
    opacity: 0.45;
    mix-blend-mode: screen;
    animation: badgePulse 2.2s ease-in-out infinite;
}

.today-streak {
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: fit-content;
}

.today-streak--active {
    color: #fff;
    border-color: rgba(255, 0, 85, 0.45);
    background: linear-gradient(135deg,
            rgba(255, 0, 85, 0.18),
            rgba(0, 242, 254, 0.14));
    box-shadow:
        0 6px 14px rgba(255, 0, 85, 0.18),
        0 0 18px rgba(255, 0, 85, 0.15);
    position: relative;
    overflow: hidden;
}

.today-streak--gold {
    color: #fff !important;
    border-color: rgba(255, 215, 0, 0.6) !important;
    background: linear-gradient(135deg,
            rgba(255, 215, 0, 0.25),
            rgba(255, 165, 0, 0.15)) !important;
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.4),
        0 0 10px rgba(255, 215, 0, 0.3) inset !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    font-weight: 900 !important;
}

.today-streak--active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.25),
            rgba(255, 255, 255, 0));
    transform: translateX(-120%);
    animation: streakShimmer 3.2s ease-in-out infinite;
}

@keyframes badgeGlow {

    0%,
    100% {
        box-shadow:
            inset 0 0 8px rgba(0, 0, 0, 0.5),
            0 0 12px rgba(0, 242, 254, 0.18);
    }

    50% {
        box-shadow:
            inset 0 0 12px rgba(0, 0, 0, 0.6),
            0 0 18px rgba(0, 242, 254, 0.35);
    }
}

@keyframes badgeFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 120% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes badgeShimmer {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    35% {
        opacity: 0.9;
    }

    100% {
        transform: translateX(220%);
        opacity: 0;
    }
}

@keyframes badgePulse {

    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.75;
    }
}

@keyframes ringPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}

@keyframes ringSpin {
    from {
        transform: rotate(-90deg);
    }

    to {
        transform: rotate(270deg);
    }
}

@keyframes ringOrbit {

    0%,
    100% {
        stroke-dashoffset: 0;
        opacity: 0.4;
    }

    50% {
        stroke-dashoffset: -18;
        opacity: 0.8;
    }
}

@keyframes ringGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 3px rgba(0, 242, 254, 0.25));
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.45));
    }
}

@keyframes liquidWave {
    0% {
        transform: translateX(-6px);
    }

    50% {
        transform: translateX(6px);
    }

    100% {
        transform: translateX(-6px);
    }
}

@keyframes ringLiquidGlow {

    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes streakShimmer {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }

    20% {
        opacity: 0.6;
    }

    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

.today-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.today-card {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.05),
            rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition:
        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.today-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 14px;
    box-shadow: inset 0 0 20px rgba(var(--primary-rgb, 0, 242, 254), 0);
    transition: box-shadow 0.3s ease;
    pointer-events: none;
}

.today-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(var(--primary-rgb, 0, 242, 254), 0.3);
    border-color: var(--primary);
}

.today-card:hover::before {
    box-shadow: inset 0 0 15px rgba(var(--primary-rgb, 0, 242, 254), 0.15);
}

.today-card-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.today-card-title i {
    font-size: 0.85rem;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        color 0.3s ease;
    /* will-change removed to restore WebView tiling */
}

.today-card:hover .today-card-title i {
    transform: scale(1.25) rotate(8deg);
    color: var(--primary);
}

.today-card-value {
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
}

.today-card-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.water-drop-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(0, 242, 254, 0.9);
    background: rgba(0, 242, 254, 0.08);
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid rgba(0, 242, 254, 0.15);
}

.water-drop-anim {
    animation: waterDropPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.6));
}

@keyframes waterDropPulse {

    0%,
    100% {
        transform: scale(1) translateY(0);
        filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.6));
    }

    50% {
        transform: scale(1.15) translateY(-2px);
        filter: drop-shadow(0 0 10px rgba(0, 242, 254, 0.9));
    }
}

.mobility-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.today-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.04),
            rgba(0, 0, 0, 0.25));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    cursor: pointer;
}

.today-action:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(var(--primary-rgb, 0, 242, 254), 0.2);
    border-color: rgba(255, 255, 255, 0.2);
}

.today-action-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.today-action-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.today-action-desc {
    color: #eaffff;
    font-size: 0.9rem;
    font-weight: 700;
}

.today-action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.today-action-btn {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(0, 242, 254, 0.35);
    color: #eaffff;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.today-action-btn.is-primary {
    background: linear-gradient(135deg,
            rgba(0, 242, 254, 0.2),
            rgba(0, 120, 255, 0.16));
    border-color: rgba(0, 242, 254, 0.55);
    box-shadow: 0 10px 18px rgba(0, 242, 254, 0.2);
}

.today-action-btn.is-ghost {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.today-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24);
}

.quick-glance {
    margin-top: 12px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.glance-card {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.glance-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 242, 254, 0.28);
}

.glance-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.glance-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
}

@media (max-width: 1000px) {
    .today-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-glance {
        grid-template-columns: 1fr 1fr;
    }

    .today-action {
        grid-template-columns: 1fr;
    }

    .today-action-buttons {
        justify-content: flex-start;
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {
    .today-cards {
        grid-template-columns: 1fr;
    }

    .quick-glance {
        grid-template-columns: 1fr;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

}

.wizard-save-note {
    margin-top: 6px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wizard-save-note i {
    color: var(--primary);
}

#chat-status-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.18), rgba(255, 0, 85, 0.16));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 18px rgba(0, 242, 254, 0.15);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

#chat-status-hint::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00f2fe;
    box-shadow: 0 0 8px rgba(0, 242, 254, 0.9);
    animation: chatStatusPulse 1.2s ease-in-out infinite;
}

#chat-status-hint::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: translateX(-120%);
    animation: chatStatusShimmer 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes chatStatusPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.4);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

@keyframes chatStatusShimmer {
    0% {
        transform: translateX(-120%);
        opacity: 0.2;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        transform: translateX(120%);
        opacity: 0.2;
    }
}

.header-title-text h1 {
    font-size: 1.9rem;
    margin-bottom: 2px;
}

.header-title-text h1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.header-title-text h1 .beta-pill {
    margin-left: 0;
    margin-top: 0;
    position: relative;
    top: -1px;
}

.header-title-text h1 .plan-badge {
    margin-left: 2px;
}

.app-loading-title .beta-pill,
.iahc-auth-logo .beta-pill {
    margin-left: 8px;
    margin-top: 0;
    vertical-align: middle;
}

.user-name {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    opacity: 0.9;
    margin-left: 2px;
}

/* ==========================================================================
   MOBILE PREMIUM EXPERIENCIE: BOTTOM NAVIGATION & LAYOUT OVERRIDES
   ========================================================================== */

/* Hide sidebar and show bottom nav on mobile/tablet */
.iahc-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    /* ==========================================================================
       MOBILE GENERAL Y PREVENCION OVERFLOW
       ========================================================================== */
    body {
        overscroll-behavior-y: none; /* Prevenir pull-to-refresh SOLO en movil */
    }

    /* BREAKOUT: Ignorar el contenedor del tema de WordPress y hacer la app a pantalla completa (PWA nativa) */
    .iahc-app-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        z-index: 99999 !important;
        background: rgba(10, 10, 15, 1) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Transformar el sidebar/generador en Bottom Sheet oculto por defecto */
    .sidebar-ctrl {
        display: none !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        max-height: 90dvh !important;
        background: rgba(10, 10, 15, 0.98) !important;
        /* PERFORMANCE: Removed backdrop-filter to prevent massive jank on mobile slide-up */
        z-index: 15000 !important;
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        transform: translate3d(0, 0, 0);
        /* animation: slideUpSheet removed for GSAP */
        padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) 20px !important;
        border: none !important;
        border-top: 1px solid rgba(255,255,255,0.15) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
        /* will-change removed to restore WebView tiling */
    }

    /* Pildora de arrastre simulada para el sidebar */
    .sidebar-ctrl::before {
        content: "";
        display: block;
        width: 40px;
        height: 5px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        margin: -10px auto 20px auto;
    }

    /* Mostrar el sidebar/generador cuando el body tenga la clase activa */
    body.mobile-generator-active .sidebar-ctrl {
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y !important;
    }

    /* Ajustar main grid para compensar la barra inferior */
    #app-dashboard {
        padding: 0 !important;
        padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        max-width: 100% !important;
        width: 100% !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: none !important;
        filter: none !important;
    }

    /* Bottom Navigation Bar con Glassmorphism */
    .iahc-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(72px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(15, 20, 30, 0.75), rgba(5, 10, 15, 0.95));
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 100000 !important;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    }

    .nav-item {
        background: transparent;
        border: none;
        color: var(--text-muted);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        flex: 1;
        padding: 10px 0;
        cursor: pointer;
        transition: color 0.3s ease, transform 0.2s ease;
    }

    .nav-item i {
        font-size: 1.3rem;
        margin-bottom: 2px;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .nav-item.active {
        color: var(--primary);
    }

    .nav-item.active i {
        transform: translateY(-2px) scale(1.15);
        filter: drop-shadow(0 4px 8px rgba(0, 242, 254, 0.4));
    }

    .nav-item:active {
        transform: scale(0.92);
    }

    /* Floating Action Button (FAB) en el centro */
    .nav-fab-container {
        position: relative;
        top: -24px;
        display: flex;
        justify-content: center;
        flex: 1.2;
    }

    .nav-fab {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        border: 4px solid #0a0d14; /* Color oscuro para camuflar el borde */
        color: #000;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 24px rgba(0, 242, 254, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.4);
        cursor: pointer;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    }

    .nav-fab i {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }

    .nav-fab:active {
        transform: scale(0.9);
        box-shadow: 0 4px 12px rgba(0, 242, 254, 0.4);
    }

    /* ==========================================================================
       MOBILE DASHBOARD REDESIGN (Fase 3)
       ========================================================================== */
    /* Carruseles horizontales para las tarjetas del día */
    .today-cards {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 8px;
        /* Ocultar barra de scroll nativa */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    .today-cards::-webkit-scrollbar {
        display: none;
    }

    .today-card {
        min-width: 280px;
        width: 80vw;
        max-width: 320px;
        scroll-snap-align: start;
        flex-shrink: 0;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .today-card:active {
        transform: scale(0.96);
    }

    /* Convertir el header bar a sticky */
    .header-bar {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(10, 10, 15, 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        margin: 0 !important;
        padding: calc(8px + env(safe-area-inset-top)) 16px 8px 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .header-heart {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .header-heart svg {
        width: 30px !important;
        height: 30px !important;
    }
    .header-title-text h1 {
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
    }
    .header-branding {
        gap: 8px !important;
    }
    .user-meta-group {
        display: none !important; /* Ocultar badge/meta en mobile — ya está en perfil */
    }
    .header-buttons {
        display: none !important; /* Ocultar botones desktop — funciones disponibles en bottom nav y modales */
    }
    .header-actions {
        display: none !important;
    }

    /* Today overview y cards */
    .today-overview {
        padding: 12px !important;
        border-radius: 12px !important;
        margin: 0 12px 24px 12px !important; /* Añadido margin-bottom para que la sombra no pise las recetas */
    }
    .today-head {
        gap: 8px !important;
    }
    .today-title {
        font-size: 1rem !important;
    }
    .today-sub {
        font-size: 0.75rem !important;
    }

    /* Recetas y Listas en móvil */
    #rec-ing-list {
        grid-template-columns: 1fr !important; /* 1 columna en móvil para que no se apriete el texto */
    }
    .recipe-card .shopping-item {
        font-size: 0.95rem !important;
        padding: 10px 12px !important;
    }

    /* Glass panels y grids */
    .glass-panel {
        border-radius: 14px !important;
    }
    .plan-card, .recipe-card {
        border-radius: 12px !important;
        margin-left: 12px;
        margin-right: 12px;
    }
    .main-grid {
        padding: 0 !important;
        gap: 12px !important;
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* CRITICAL FIX: prevents children from shrink-wrapping */
        width: 100% !important;
        max-width: 100% !important;
    }
    main {
        padding: 0 !important;
        width: 100% !important;
    }
    
    .recipe-card h3, .plan-card h3 {
        white-space: normal !important;
        word-break: break-word !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

@media (max-width: 768px) {
    /* ==========================================================================
       MOBILE ONBOARDING WIZARD (Fase 4)
       ========================================================================== */
    #onboarding-layer {
        padding: 0 !important;
        background: var(--bg-deep) !important;
    }

    .wizard-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex;
        flex-direction: column;
        padding: calc(20px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)) 20px !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow-y: auto;
    }

    /* Progreso estilo "Stories" arriba */
    .wizard-progress {
        position: absolute;
        top: env(safe-area-inset-top);
        left: 20px;
        right: 20px;
        width: auto !important;
        height: 4px !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border: none !important;
        z-index: 10;
        border-radius: 4px;
    }

    .wizard-progress-bar {
        border-radius: 4px;
    }

    /* Espacio superior para compensar la barra de progreso */
    .wizard-title {
        margin-top: 30px !important;
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        text-align: left;
    }

    .wizard-step p {
        text-align: left;
        font-size: 1rem;
        margin-bottom: 24px;
    }

    /* Botones táctiles grandes */
    .btn-option, .btn-option-pill {
        min-height: 60px !important;
        border-radius: 16px !important;
        font-size: 1rem !important;
        padding: 16px 20px !important;
        text-align: left !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        margin-bottom: 12px !important;
        background: rgba(255,255,255,0.06) !important;
    }

    .btn-option:active, .btn-option-pill:active {
        transform: scale(0.98);
        background: rgba(255,255,255,0.1) !important;
    }

    .btn-option.selected {
        background: rgba(0, 242, 254, 0.15) !important;
        border-color: var(--primary) !important;
    }

    /* Botones de navegación del Wizard abajo */
    .wizard-actions {
        margin-top: auto !important;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .wizard-actions button {
        width: 100%;
        min-height: 56px;
        border-radius: 28px !important;
        font-size: 1.05rem !important;
    }
    /* Mejoras de layout para 'Hoy de un vistazo' en móvil */
    body.iahc-app-body .today-overview {
        margin: 0 0 16px 0 !important;
        padding: 16px !important;
        border-radius: 0 0 24px 24px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        border-left: none !important;
        border-right: none !important;
    }
    body.iahc-app-body .today-cards {
        padding-bottom: 12px !important;
        margin-right: -16px !important;
        padding-right: 16px !important;
        gap: 12px !important;
    }

    /* Prevención del salto del teclado en inputs */
    .form-input {
        font-size: 16px !important; /* Evita auto-zoom en iOS */
        padding: 18px 20px !important;
        border-radius: 16px !important;
    }

    /* ==========================================================================
       MOBILE CHAT & BOTTOM SHEETS (Fase 5)
       ========================================================================== */
    /* Transformar modales en Bottom Sheets */
    .modal-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90dvh !important;
        border-radius: 24px 24px 0 0 !important;
        margin: 0 !important;
        transform: translateZ(0); /* Force GPU compositing layer */
        /* animation: slideUpSheet removed for GSAP */
        padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        border: none !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        /* will-change removed to restore WebView tiling */
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }
    
    /* PERFORMANCE: Remove expensive blur on mobile — use solid dark overlay instead */
    .modal,
    .modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.88) !important;
    }

    /* Handle (píldora) para arrastrar/cerrar el modal */
    .modal-content::before {
        content: "";
        display: block;
        width: 40px;
        height: 5px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        margin: -10px auto 20px auto;
    }

    @keyframes slideUpSheet {
        from { transform: translate3d(0, 100%, 0); }
        to { transform: translate3d(0, 0, 0); }
    }

    /* CHAT: Keyboard-aware y burbujas */
    #tour-chat {
        display: none !important; /* Oculto por defecto en móvil */
        position: fixed !important;
        background: #0a0c10 !important; /* FONDO SUPER OPACO */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 72px !important; /* Espacio para el nav */
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: calc(100vh - 72px) !important;
        height: calc(100dvh - 72px) !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 2147483647 !important; /* Max Z-INDEX */
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    body.mobile-chat-active #tour-chat {
        display: flex !important; /* Visible cuando está activa la tab de chat */
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #chat-msgs, .chat-msgs {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 16px 16px 80px 16px !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Fijar la zona de texto abajo y evitar que la tape el teclado iOS */
    .chat-input-area {
        position: relative !important;
        bottom: auto !important;
        flex-shrink: 0;
        width: 100%;
        background: rgba(10, 10, 15, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) 16px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 100;
    }

    /* Burbujas de Chat asimétricas */
    .chat-message.user .message-content {
        border-radius: 20px 20px 4px 20px !important;
        background: linear-gradient(135deg, rgba(0,242,254,0.15), rgba(0,153,204,0.1)) !important;
        border: 1px solid rgba(0,242,254,0.3) !important;
    }

    .chat-message.ai .message-content {
        border-radius: 20px 20px 20px 4px !important;
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
    }
}

@media (max-width: 900px) {
  body.mobile-generator-active .mobile-only-close {
    display: block !important;
  }
}

/* Generator UI Scale Down */
@media (max-width: 1400px) {
    .main-grid { grid-template-columns: 320px 1fr; }
    .sidebar-ctrl { padding: 15px; }
}
@media (max-width: 1100px) {
    .sidebar-ctrl { max-height: 85dvh !important; overflow-y: auto !important; padding: 15px 15px calc(20px + env(safe-area-inset-bottom)) 15px !important; }
    .control-section-header { font-size: 0.9rem; padding: 12px; }
    .custom-select-trigger, .btn-neon, .btn-outline { font-size: 0.85rem; padding: 10px; }
}

/* Force desktop scrolling failsafe */
@media (min-width: 1101px) {
    body { overflow-y: auto !important; }
    html { overflow-y: auto !important; }
}

/* Prevenir overflow horizontal en header y cards */
.header-branding, .header-title-text, .user-meta-group { min-width: 0; flex: 1; }
.header-title-text h1, .user-name { white-space: normal; word-break: break-word; }
.recipe-card * { white-space: normal; word-break: break-word; }

@media (max-width: 768px) {
    /* ==========================================================================
       WORDPRESS THEME NEUTRALIZER (CRITICAL FIX FOR MOBILE APP LAYOUT)
       ========================================================================== */
    /* Neutralizar los wrappers del tema (container, glass) SOLO EN MOVIL para que la app pueda ser PWA nativa edge-to-edge */
    body.iahc-app-body main#top,
    body.iahc-app-body main#top > section {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    body.iahc-app-body .container {
        max-width: 100vw !important;
        width: 100vw !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.iahc-app-body article.glass {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Ocultar elementos sobrantes de la pagina (como el titulo) si existen */
    body.iahc-app-body article.glass > h1 {
        display: none !important;
    }
}
.recipe-card * { white-space: normal; word-break: break-word; }
.recipe-card-header { min-width: 0; }
.recipe-card h3 { white-space: normal; word-break: break-word; }


.plan-card * { white-space: normal; word-break: break-word; }
.plan-card h3 { white-space: normal; word-break: break-word; }


@media (max-width: 768px) {
    /* FIX FOR ANDROID WEBVIEW NESTED SCROLL GLITCH */
    /* Since .modal-content handles the scrolling on mobile, internal lists MUST NOT scroll to prevent GPU checkerboarding */
    .profile-modal .wizard-summary-modern, .shopping-groups, .tips-modal-list, .habits-panels,
    .history-modal-list,
    .saved-recipes-list,
    .progress-modal,
    .progress-grid {
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        -webkit-overflow-scrolling: auto !important;
        overscroll-behavior: auto !important;
    }
}



/* =========================================================
   URGENT PWA PERFORMANCE FIX: MODAL SCROLL LOCK
   ========================================================= */
@media (max-width: 1100px) {
    .modal {
        overflow: hidden !important; /* KILL NESTED SCROLL IN ANDROID WEBVIEW */
        touch-action: none !important; /* Prevent parent touch panning */
    }
    .modal-content {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        height: 100% !important; /* Ensure child has defined bounds to scroll */
        max-height: 90vh !important;
    }
}

/* =========================================================
   URGENT 60FPS SCROLL PERFORMANCE OVERRIDES
   ========================================================= */
@media (max-width: 1100px) {
    /* 1. Kill Generator Panel Blur during scroll */
    body.mobile-generator-active .sidebar-ctrl {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(15, 18, 23, 0.98) !important; /* Solid dark fallback */
    }

    /* 2. Kill Profile Modal inner row lag */
    .wizard-summary-row {
        transition: transform 0.2s ease !important; /* Prevent 'all' transition layout thrashing */
    }
    
    /* 3. Disable expensive glowing shadows inside scrolling lists on mobile */
    .wizard-summary-row::before,
    .history-item,
    .habit-panel {
        box-shadow: none !important;
    }
}

/* =========================================================
   ULTIMATE PWA FIRST-PAINT & SCROLL PATCH
   ========================================================= */
@media (max-width: 1100px) {
    /* 1. Skip rendering off-screen elements until scrolled to */
    .wizard-summary-row,
    .history-item,
    .recipe-card,
    .habit-panel,
    .shopping-group-card {
        /* content-visibility removed to prevent scroll pop-in */
        /* contain-intrinsic-size removed */
        /* transform: translateZ(0) killed: caused Android layer exhaustion */
    }

    /* 2. Prevent hit-testing on complex SVGs and icons during scroll */
    .wizard-summary-row svg,
    .wizard-summary-row i,
    .history-item svg,
    .history-item i,
    .progress-circle svg {
        pointer-events: none !important;
    }
    
    /* 3. Disable any layout-thrashing animations on scroll for SVGs */
    svg circle {
        will-change: stroke-dashoffset;
    }
}

/* =========================================================
   ABSOLUTE GPU LOCK FOR MOBILE SCROLL
   ========================================================= */
@media (max-width: 1100px) {
    .modal-content, 
    .sidebar-ctrl,
    .history-modal-list,
    .wizard-summary-modern,
    .habits-panels {
        
        -webkit-
        perspective: 1000px;
        backface-visibility: hidden;
    }
}


/* =========================================================
   CPU CLIPPING MASK KILLER (15 FPS BUG FIX)
   ========================================================= */
@media (max-width: 1100px) {
    .wizard-summary-row,
    .history-item,
    .habit-panel,
    .recipe-card {
        /* overflow: hidden + border-radius forces CPU masking on scroll. Disabled! */
        overflow: visible !important;
        clip-path: none !important;
    }
}


/* =========================================================
   KILL SCROLL BORDER-RADIUS (ANDROID TILE DROP BUG)
   ========================================================= */
@media (max-width: 1100px) {
    .modal-content, 
    .sidebar-ctrl,
    .history-modal-list,
    .habits-panels {
        border-radius: 0 !important; /* Never mix border-radius and overflow-y: auto on mobile */
    }
}

/* =========================================================
   KILL ALL FILTERS IN SCROLL CONTENT
   ========================================================= */
@media (max-width: 1100px) {
    .modal-content, .modal-content *, .sidebar-ctrl, .sidebar-ctrl * {
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important; mix-blend-mode: normal !important; 
    }
}


/* =========================================================
   KILL REVEAL HIDDEN IN MODALS
   ========================================================= */
.modal .reveal-hidden, 
.modal-overlay .reveal-hidden,
.modal-content .reveal-hidden {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}