/* ===== PlantDiary Theme ===== */
:root {
    color-scheme: light;

    /* Marca — verde vivo + teal sobre mint frio */
    --hp-green-deep: #12433A;             /* fundos escuros de marca (header, badges) */
    --hp-green-dark: #0E9F6E;             /* enfase/texto verde escuro (no dark vira claro) */
    --hp-green: #22C55E;                  /* primario (acoes) */
    --hp-green-mid: #34CE72;
    --hp-green-light: #86E8AE;
    --hp-green-soft: #E4F9EC;             /* fill suave */

    /* Teal — titulos de pagina e destaques frios */
    --hp-teal: #0EBCA4;
    --hp-teal-soft: #DFF6F4;

    /* Superficies */
    --hp-bg: #F4FBFA;                     /* fundo de pagina (mint/ice) */
    --hp-surface: #FFFFFF;                /* cartoes */
    --hp-surface-2: #EDF6F8;              /* fills subtis */
    --hp-white: var(--hp-surface);        /* legado */
    --hp-beige: var(--hp-surface-2);      /* legado */
    --hp-beige-dark: #E2EFF2;             /* legado */

    /* Texto e bordas */
    --hp-text: #1E2A36;                   /* navy */
    --hp-text-muted: #9CA8B4;
    --hp-border: #E4EFF1;

    /* Estados */
    --hp-amber: #F0A94C;
    --hp-amber-light: #FFF4DF;
    --hp-amber-border: #F8E0B4;
    --hp-red: #EF6B5E;
    --hp-red-light: #FDEDEB;
    --hp-red-border: #F8CFC9;
    --hp-success: #12B76A;
    --hp-success-light: #DEF7EA;
    --hp-success-border: #A8ECC6;

    /* Geometria e sombra */
    --hp-radius: 22px;
    --hp-radius-sm: 12px;
    --hp-radius-full: 999px;
    --hp-shadow: 0 2px 12px rgba(31,42,55,0.06);
    --hp-shadow-lg: 0 10px 30px rgba(31,42,55,0.10);

    /* Gradiente das CTA principais (verde -> teal) */
    --hp-gradient-cta: linear-gradient(95deg, #7FD957 0%, #22C2C6 100%);

    /* Movimento */
    --hp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --hp-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Tipografia */
    --hp-font-accent: 'Quicksand', sans-serif;
}

[data-theme="dark"] {
    color-scheme: dark;

    --hp-green-deep: #0B2A25;
    --hp-green-dark: #6EE7A8;
    --hp-green: #25C264;
    --hp-green-mid: #3ACB77;
    --hp-green-light: #74DCA2;
    --hp-green-soft: #16302A;

    --hp-teal: #19C3AB;
    --hp-teal-soft: #143430;

    --hp-bg: #0D1618;
    --hp-surface: #161F22;
    --hp-surface-2: #1D272A;
    --hp-beige-dark: #243034;

    --hp-text: #E3EEF0;
    --hp-text-muted: #93A3A8;
    --hp-border: #2A3639;

    --hp-amber: #E8AC55;
    --hp-amber-light: #33290F;
    --hp-amber-border: #54451C;
    --hp-red: #E87b6E;
    --hp-red-light: #341A17;
    --hp-red-border: #572C25;
    --hp-success: #3FCB86;
    --hp-success-light: #12301F;
    --hp-success-border: #1F5B38;

    --hp-shadow: 0 2px 12px rgba(0,0,0,0.35);
    --hp-shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }

/* ===== Lucide icon sizing ===== */
[data-lucide], svg.lucide {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    stroke-width: 2;
    flex-shrink: 0;
}

.hp-brand-icon  { width: 1.3em; height: 1.3em; vertical-align: -0.28em; cursor: pointer; transform-origin: bottom center; }

@keyframes leaf-sway {
    0%   { transform: rotate(0deg)   scale(1);    }
    20%  { transform: rotate(-18deg) scale(1.1);  }
    45%  { transform: rotate(14deg)  scale(1.05); }
    65%  { transform: rotate(-10deg) scale(1.02); }
    80%  { transform: rotate(6deg)   scale(1.01); }
    100% { transform: rotate(0deg)   scale(1);    }
}
.hp-leaf-animate { animation: leaf-sway 0.65s ease both; }
@media (prefers-reduced-motion: reduce) { .hp-leaf-animate { animation: none; } }
.hp-footer-icon { width: 0.85em; height: 0.85em; opacity: 0.6; }
.hp-alert-icon  { width: 1.1em; height: 1.1em; flex-shrink: 0; }
@keyframes hp-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}

.hp-empty-lucide {
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    color: var(--hp-green-light);
    stroke-width: 1.5;
    animation: hp-float 5s ease-in-out infinite;
}

/* Lucide inside badges */
.hp-badge [data-lucide] { width: 0.8em; height: 0.8em; }

/* Lucide inside section titles */
.hp-section-title [data-lucide] { width: 1em; height: 1em; color: var(--hp-green-light); }

/* Lucide inside alert section titles */
.hp-alert-section-title [data-lucide] { color: var(--hp-green-light); }

/* Nav icons */
.hp-nav-link [data-lucide] { width: 1rem; height: 1rem; }

html { font-size: 16px; background-color: var(--hp-bg); }

body {
    margin: 0;
    font-family: 'Nunito', system-ui, sans-serif;
    background-color: var(--hp-bg);
    /* Gradiente vertical subtil: mint no topo a esbater para o fundo */
    background-image: linear-gradient(180deg, var(--hp-green-soft) 0%, var(--hp-bg) 220px);
    background-repeat: no-repeat;
    color: var(--hp-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== Header / Nav ===== */
.hp-header {
    background: var(--hp-surface);
    border-bottom: 1px solid var(--hp-border);
    position: sticky;
    top: 0;
    z-index: 100;
    padding-top: env(safe-area-inset-top);
    transition: box-shadow 0.3s var(--hp-ease);
}

@supports (backdrop-filter: blur(12px)) and (background: color-mix(in srgb, red 50%, blue)) {
    .hp-header {
        background: color-mix(in srgb, var(--hp-surface) 82%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

.hp-header-scrolled { box-shadow: 0 4px 18px rgba(31,42,55,0.08); }

.hp-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.hp-brand {
    font-family: var(--hp-font-accent);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--hp-teal);
    text-decoration: none;
    letter-spacing: -0.01em;
}

.hp-nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.hp-nav-link {
    color: var(--hp-text-muted);
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border-radius: var(--hp-radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    transition: background 0.15s, color 0.15s;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.hp-nav-link:hover,
.hp-nav-link.active {
    background: var(--hp-green-soft);
    color: var(--hp-green-dark);
}

.hp-nav-logout {
    color: rgba(245,240,232,0.7);
}

/* ===== Main ===== */
.hp-main {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* ===== Loading state ===== */
.hp-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-height: 50vh;
    color: var(--hp-text-muted);
    font-size: 0.95rem;
}

/* Loader animado: planta a crescer no vaso */
.hp-loader { width: 4rem; height: 4rem; }
.hp-loader-rim  { fill: #B06A42; }
.hp-loader-pot  { fill: #C9835A; }

.hp-loader-stem {
    fill: none;
    stroke: #5FAE6F;
    stroke-width: 16;
    stroke-linecap: round;
    stroke-dasharray: 13;
    animation: hp-loader-stem 2.6s var(--hp-ease) infinite;
}

.hp-loader-leaf {
    transform-box: fill-box;
    animation: 2.6s var(--hp-spring) infinite;
}
.hp-loader-leaf-left  { fill: #3F9455; transform-origin: 100% 100%; animation-name: hp-loader-leaf-left; }
.hp-loader-leaf-right { fill: #3F9455; transform-origin: 0% 100%;   animation-name: hp-loader-leaf-right; }
.hp-loader-leaf-top   { fill: #E8A6BC; transform-origin: 50% 100%;  animation-name: hp-loader-leaf-top; }

@keyframes hp-loader-stem {
    0%       { stroke-dashoffset: 13; }
    30%, 84% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: 13; }
}

@keyframes hp-loader-leaf-left {
    0%, 22%   { transform: scale(0) rotate(10deg); }
    38%       { transform: scale(1.1) rotate(-4deg); }
    46%       { transform: scale(1) rotate(0deg); }
    62%       { transform: scale(1) rotate(4deg); }
    78%       { transform: scale(1) rotate(0deg); }
    92%, 100% { transform: scale(0) rotate(10deg); }
}

@keyframes hp-loader-leaf-right {
    0%, 30%   { transform: scale(0) rotate(-10deg); }
    46%       { transform: scale(1.1) rotate(4deg); }
    54%       { transform: scale(1) rotate(0deg); }
    68%       { transform: scale(1) rotate(-4deg); }
    80%       { transform: scale(1) rotate(0deg); }
    92%, 100% { transform: scale(0) rotate(-10deg); }
}

@keyframes hp-loader-leaf-top {
    0%, 38%   { transform: scale(0); }
    54%       { transform: scale(1.12); }
    62%       { transform: scale(1); }
    92%, 100% { transform: scale(0); }
}

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

@media (prefers-reduced-motion: reduce) {
    .hp-loader-stem { animation: none; stroke-dashoffset: 0; }
    .hp-loader-leaf { animation: none; }
}

/* ===== Pull-to-refresh indicator ===== */
.hp-ptr-indicator {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 1.75rem);
    left: 50%;
    margin-left: -1.25rem;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--hp-green-deep);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-6rem);
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.hp-ptr-indicator::after {
    content: "↓";
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    transition: transform 0.2s;
}
.hp-ptr-indicator.hp-ptr-ready::after { transform: rotate(180deg); }
.hp-ptr-indicator.hp-ptr-refreshing {
    opacity: 1;
    transform: translateY(0);
}
.hp-ptr-indicator.hp-ptr-refreshing::after {
    content: "🍃";
    font-size: 1.15rem;
    animation: hp-leaf-twirl 0.9s ease-in-out infinite;
}

@keyframes hp-leaf-twirl {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(0.82); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ===== Footer ===== */
.hp-footer {
    background: var(--hp-surface);
    border-top: 1px solid var(--hp-border);
    color: var(--hp-text-muted);
    text-align: center;
    padding: 0.75rem;
    font-size: 0.8rem;
}

/* ===== Alerts (TempData) ===== */
@keyframes hpAlertIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hp-alert {
    padding: 0.875rem 1rem;
    border-radius: var(--hp-radius);
    margin-bottom: 1rem;
    font-weight: 500;
    animation: hpAlertIn 0.3s ease both;
}
@media (prefers-reduced-motion: reduce) {
    .hp-alert { animation: none; }
}

.hp-alert-success {
    background: var(--hp-success-light);
    color: var(--hp-success);
    border: 1px solid var(--hp-success-border);
}

.hp-alert-error {
    background: var(--hp-red-light);
    color: var(--hp-red);
    border: 1px solid #F5C6CB;
}

.hp-alert-warning {
    background: #fff8e6;
    color: #7a5a00;
    border: 1px solid #e7c66b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hp-alert-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(90deg, #fff8e6, #fdf1cf);
    color: #7a5a00;
    border: 1px solid #e7c66b;
    text-decoration: none;
}
.hp-alert-badge:hover { border-color: #d4af37; }
.hp-alert-badge .hp-alert-icon { color: #d4af37; }

/* ===== Header badge indicator ===== */
@keyframes hp-pop {
    0%   { transform: scale(0);    }
    70%  { transform: scale(1.25); }
    100% { transform: scale(1);    }
}

.hp-nav-badge {
    animation: hp-pop 0.45s var(--hp-spring) both;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.3rem;
    margin-left: 0.1rem;
    border-radius: 999px;
    background: #d4af37;
    color: #2b2200;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}

/* ===== Conquistas (badges) ===== */
.hp-badges-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.hp-badges-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--hp-font-accent);
    font-weight: 400;
    color: var(--hp-green-dark);
}
.hp-badges-title [data-lucide] { color: #d4af37; }
.hp-badges-count {
    font-weight: 700;
    color: var(--hp-green);
    background: var(--hp-beige);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
}
.hp-badges-section {
    font-size: 1.05rem;
    color: var(--hp-green-dark);
    margin: 1.5rem 0 0.75rem;
}
.hp-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.hp-badge-card {
    position: relative;
    background: var(--hp-white);
    border: 1px solid #ece6da;
    border-radius: 16px;
    padding: 1.4rem 1.1rem 1.2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 1px 3px rgba(45,74,45,0.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.hp-badge-card.earned:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 24px -8px rgba(45,74,45,0.22);
}

/* Medalhão — forma orgânica de folha/gota */
.hp-badge-medallion {
    --m1: #f0b079; --m2: #cd7f32; --m3: #7e4715;
    --ring: #b87333; --glow: rgba(205,127,50,.5);
    position: relative;
    width: 4.6rem;
    height: 4.6rem;
    margin: 0.4rem 0 0.75rem;
    border-radius: 14% 50% 50% 50%;
    transform: rotate(45deg);
    background: linear-gradient(145deg, var(--m1) 0%, var(--m2) 48%, var(--m3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 3px rgba(255,255,255,.9),
        0 0 0 5px var(--ring),
        0 11px 22px -6px var(--glow),
        inset 2px 2px 6px rgba(255,255,255,.5),
        inset -3px -3px 8px rgba(0,0,0,.3);
}
.hp-badge-medallion::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%);
    pointer-events: none;
}
.hp-badge-medallion-face {
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.hp-badge-medallion-face [data-lucide] { width: 1.7rem; height: 1.7rem; stroke-width: 2.1; }

/* Paletas metálicas por tier */
.hp-tier-bronze .hp-badge-medallion {
    --m1:#f0b079; --m2:#cd7f32; --m3:#7e4715; --ring:#b87333; --glow:rgba(205,127,50,.5);
}
.hp-tier-silver .hp-badge-medallion {
    --m1:#fbfbfb; --m2:#bcc4cc; --m3:#79838f; --ring:#9aa5b0; --glow:rgba(150,165,185,.55);
}
.hp-tier-gold .hp-badge-medallion {
    --m1:#fbe9a0; --m2:#d4af37; --m3:#937012; --ring:#c9a227; --glow:rgba(212,175,55,.55);
}
.hp-tier-leaf .hp-badge-medallion {
    --m1:#8fd07e; --m2:#4a7a4a; --m3:#2c4a2c; --ring:#5a9a5a; --glow:rgba(74,122,74,.5);
}

/* Bloqueado — gravado em relevo, sem brilho */
.hp-badge-medallion.locked {
    background: linear-gradient(145deg, #ece7db, #cfc8b6);
    box-shadow:
        0 0 0 3px rgba(255,255,255,.7),
        0 0 0 5px #ddd5c4,
        inset 3px 3px 7px rgba(0,0,0,.18),
        inset -3px -3px 7px rgba(255,255,255,.7);
}
.hp-badge-medallion.locked::before { background: none; }
.hp-badge-medallion.locked .hp-badge-medallion-face {
    color: #a39c89;
    filter: none;
}

.hp-badge-name { font-weight: 700; color: var(--hp-green-dark); font-size: .95rem; }
.hp-badge-desc { font-size: 0.8rem; color: var(--hp-text-muted, #6b7280); line-height: 1.35; }
.hp-badge-meta { font-size: 0.74rem; color: var(--hp-text-muted, #6b7280); margin-top: .15rem; }
.hp-badge-progress { width: 100%; margin-top: 0.55rem; }
.hp-badge-bar {
    width: 100%;
    height: 7px;
    background: #ece7dc;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}
.hp-badge-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--hp-green-light, #7FB069), var(--hp-green, #4A7A4A));
    border-radius: 999px;
}

.hp-link { color: var(--hp-green); text-decoration: none; font-weight: 500; }
.hp-link:hover { text-decoration: underline; }

/* ===== Cards ===== */
.hp-card {
    background: var(--hp-white);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    padding: 1.5rem;
    border: 1px solid var(--hp-border);
}

/* ===== Anel de progresso (ritual da estacao, no hero do Dashboard) ===== */
.hp-progress-ring-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
}

.hp-progress-ring-caption {
    font-size: .7rem;
    font-weight: 600;
    color: var(--hp-text-muted);
    text-align: center;
    max-width: 5.5rem;
}

.hp-progress-ring {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    text-decoration: none;
    transition: transform .25s var(--hp-spring);
}

.hp-progress-ring:active { transform: scale(0.94); }

.hp-progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.hp-progress-ring-track { fill: none; stroke: var(--hp-surface-2); stroke-width: 7; }

.hp-progress-ring-fill {
    fill: none;
    stroke: var(--hp-green);
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s var(--hp-ease);
}

.hp-progress-ring-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.hp-progress-ring-value {
    font-family: var(--hp-font-accent);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--hp-text);
}

.hp-progress-ring-total { font-size: .8rem; font-weight: 600; color: var(--hp-text-muted); }

/* ===== Count tabs (contadores com indicador, no topo das listagens) ===== */
.hp-count-tabs {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    margin: 0 0 1.25rem;
    border-bottom: 2px solid var(--hp-border);
}

.hp-count-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .35rem;
    padding: .35rem .25rem .7rem;
    margin-bottom: -2px;
    border-bottom: 3px solid transparent;
    color: var(--hp-text-muted);
    font-size: .95rem;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s var(--hp-ease), border-color .2s var(--hp-ease);
}

.hp-count-tab strong {
    font-family: var(--hp-font-accent);
    font-size: 1.35rem;
    font-weight: 800;
}

.hp-count-tab:hover { color: var(--hp-green-dark); }

.hp-count-tab.active {
    color: var(--hp-green);
    border-bottom-color: var(--hp-green);
}

/* ===== Identidade do perfil (avatar + nome) ===== */
.hp-profile-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}

.hp-profile-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: var(--hp-radius-sm);
    background: var(--hp-surface-2);
    color: var(--hp-text-muted);
}

.hp-profile-avatar [data-lucide] { width: 2.4rem; height: 2.4rem; }

.hp-profile-name {
    font-family: var(--hp-font-accent);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--hp-text);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Stat grid (cartoes de numeros, 2 colunas) ===== */
.hp-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin: 1.25rem 0;
}

.hp-stat-tile {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.1rem 1.15rem;
    background: var(--hp-surface);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .25s var(--hp-spring), box-shadow .25s var(--hp-ease);
}

a.hp-stat-tile:hover { transform: translateY(-2px); box-shadow: var(--hp-shadow-lg); }
a.hp-stat-tile:active { transform: scale(0.97); }

.hp-stat-tile-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    color: var(--hp-green);
}

.hp-stat-tile-icon [data-lucide] { width: 1.8rem; height: 1.8rem; stroke-width: 2.25; }
.hp-stat-tile-icon--teal  { color: var(--hp-teal); }
.hp-stat-tile-icon--amber { color: var(--hp-amber); }
.hp-stat-tile-icon--red   { color: var(--hp-red); }

.hp-stat-tile-body { min-width: 0; }

.hp-stat-tile-value {
    display: block;
    font-family: var(--hp-font-accent);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--hp-text);
}

.hp-stat-tile-label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--hp-text-muted);
}

.hp-card-narrow {
    max-width: 480px;
}

/* ===== Login ===== */
.hp-login-wrapper {
    min-height: calc(100vh - 56px - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.hp-login-card {
    background: var(--hp-white);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow-lg);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 400px;
    text-align: center;
    border: 1px solid var(--hp-border);
}

.hp-lang-settings {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.hp-lang-settings-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    border: 2px solid var(--hp-border);
    background: var(--hp-white);
    color: var(--hp-text);
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.hp-lang-settings-btn:hover {
    border-color: var(--hp-green-mid);
}
.hp-lang-settings-btn.hp-lang-settings-active {
    border-color: var(--hp-green-mid);
    background: var(--hp-beige-dark);
    font-weight: 600;
}

.hp-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.hp-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.hp-toggle-track {
    display: inline-block;
    width: 44px;
    height: 24px;
    background: var(--hp-beige-dark);
    border: 1.5px solid var(--hp-border);
    border-radius: 12px;
    position: relative;
    transition: background .2s;
}
.hp-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: var(--hp-surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
}
.hp-toggle input:checked + .hp-toggle-track {
    background: var(--hp-green-mid);
    border-color: var(--hp-green-mid);
}
.hp-toggle input:checked + .hp-toggle-track::after {
    transform: translateX(20px);
}

.hp-lang-picker {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 200px;
    justify-content: flex-end;
}
.hp-lang-flag {
    font-size: 1.4rem;
    opacity: 0.45;
    text-decoration: none;
    line-height: 1;
    transition: opacity 0.15s;
}
.hp-lang-flag:hover,
.hp-lang-flag.hp-lang-active {
    opacity: 1;
}

.hp-login-logo {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 0.5rem;
}

.hp-login-title {
    font-family: var(--hp-font-accent);
    font-weight: 400;
    font-size: 1.75rem;
    color: var(--hp-green-dark);
    margin: 0 0 0.25rem;
}

.hp-login-subtitle {
    color: var(--hp-text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.75rem;
}

/* ===== Forms ===== */
.hp-field {
    margin-bottom: 1rem;
    text-align: left;
}

.hp-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hp-text);
    margin-bottom: 0.35rem;
}

.hp-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
    background: var(--hp-white);
    color: var(--hp-text);
    transition: border-color 0.2s var(--hp-ease), box-shadow 0.2s var(--hp-ease);
    appearance: none;
}

.hp-input:focus {
    outline: none;
    border-color: var(--hp-green);
    box-shadow: 0 0 0 3px rgba(21,128,61,0.15);
}

h1:focus, h2:focus, h3:focus {
    outline: none;
}

.hp-input.input-validation-error {
    border-color: var(--hp-red);
}

.hp-field-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hp-field-check label {
    font-size: 0.875rem;
    color: var(--hp-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hp-field-error {
    display: block;
    font-size: 0.8rem;
    color: var(--hp-red);
    margin-top: 0.25rem;
}

.hp-field-success {
    display: block;
    font-size: 0.8rem;
    color: var(--hp-success);
    background: var(--hp-success-light);
    border: 1px solid var(--hp-success-border);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin-top: 0.25rem;
}

.hp-validation-summary {
    background: var(--hp-red-light);
    color: var(--hp-red);
    border: 1px solid #F5C6CB;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.hp-validation-summary ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* ===== Buttons ===== */
.hp-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.625rem 1.35rem;
    border-radius: var(--hp-radius-full);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: background 0.2s var(--hp-ease),
                color 0.2s var(--hp-ease),
                border-color 0.2s var(--hp-ease),
                transform 0.35s var(--hp-spring),
                box-shadow 0.3s var(--hp-ease);
}

/* Shine sweep em hover (padrao B2B) */
.hp-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.25) 50%, transparent 65%);
    transform: translateX(-130%);
    pointer-events: none;
}
.hp-btn:hover::after { transform: translateX(130%); transition: transform 0.55s ease; }

.hp-btn:active { transform: scale(0.96); }

.hp-btn-primary {
    background: var(--hp-gradient-cta);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(34,194,198,0.28);
}

/* CTA flutuante centrada (o "+ Add" da Flora) */
.hp-fab-cta {
    position: sticky;
    bottom: 1rem;
    z-index: 40;
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 1.25rem auto 0;
    padding: .95rem 2.25rem;
    border: none;
    border-radius: var(--hp-radius-full);
    background: var(--hp-gradient-cta);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(34,194,198,0.35);
    transition: transform .25s var(--hp-spring), box-shadow .25s var(--hp-ease);
}

.hp-fab-cta [data-lucide] { width: 1.25rem; height: 1.25rem; stroke-width: 3; }
.hp-fab-cta:hover { box-shadow: 0 10px 30px rgba(34,194,198,0.45); }
.hp-fab-cta:active { transform: scale(0.95); }

.hp-btn-primary:hover {
    background: var(--hp-green-mid);
    box-shadow: 0 6px 20px rgba(21,128,61,0.3);
}

.hp-btn-ghost {
    background: transparent;
    color: var(--hp-text-muted);
    border-color: var(--hp-border);
}

.hp-btn-ghost:hover {
    background: var(--hp-beige);
    color: var(--hp-text);
}

.hp-btn-full { width: 100%; }

.hp-btn-social {
    background: var(--hp-white);
    color: var(--hp-text);
    border: 1px solid var(--hp-border);
}

.hp-btn-social:hover { background: var(--hp-beige); }

.hp-social-login { display: flex; flex-direction: column; gap: 0.6rem; }

.hp-login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--hp-text-muted);
    font-size: 0.8rem;
}

.hp-login-divider::before,
.hp-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hp-border);
}

.hp-form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* ===== Back button ===== */
.hp-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: var(--hp-text-muted);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
    transition: color 0.15s;
    text-decoration: none;
}
.hp-back-btn:hover { color: var(--hp-green-dark); }

/* ===== Page headers ===== */
.hp-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.hp-page-title {
    font-family: var(--hp-font-accent);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.01em;
    color: var(--hp-teal);
    margin: 0;
}

/* Botao redondo de icone no canto do header (settings/pesquisa) */
.hp-header-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--hp-radius-sm);
    background: var(--hp-teal-soft);
    color: var(--hp-teal);
    cursor: pointer;
    text-decoration: none;
    transition: transform .25s var(--hp-spring), background .25s var(--hp-ease);
}

.hp-header-action [data-lucide] { width: 1.35rem; height: 1.35rem; stroke-width: 2.5; }
.hp-header-action:hover { background: var(--hp-green-soft); color: var(--hp-green); }
.hp-header-action:active { transform: scale(0.92); }

/* ===== Dashboard ===== */
.hp-dashboard-hero {
    margin-bottom: 2rem;
}

.hp-dashboard-greeting {
    font-family: var(--hp-font-accent);
    font-weight: 400;
    font-size: 2rem;
    color: var(--hp-green-dark);
    margin: 0 0 0.25rem;
}

.hp-dashboard-sub {
    color: var(--hp-text-muted);
    margin: 0;
}

/* ===== Empty state ===== */
.hp-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--hp-text-muted);
}

/* ===== Erro nao tratado (ErrorBoundary) ===== */
.hp-app-error {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.25rem;
    gap: .5rem;
}
.hp-app-error-icon { font-size: 2.75rem; line-height: 1; margin-bottom: .5rem; }
.hp-app-error-title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.hp-app-error-msg { color: var(--hp-text-muted); max-width: 420px; margin: 0 0 .5rem; }
.hp-app-error-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem; }

/* ===== House switcher ===== */
.hp-house-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .75rem;
    margin-bottom: 1rem;
    padding: .55rem .8rem;
    background: var(--hp-surface-2);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
}
.hp-house-switcher-label {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--hp-text-muted);
    white-space: nowrap;
}
.hp-house-switcher-label [data-lucide] { width: 1em; height: 1em; color: var(--hp-green-light); }
.hp-house-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.hp-house-switcher--dropdown {
    position: relative;
    display: inline-flex;
    margin-bottom: 1rem;
}
.hp-house-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .4rem .9rem;
    border-radius: var(--hp-radius-full);
    border: none;
    background: var(--hp-green-soft);
    color: var(--hp-green-dark);
    font-size: .85rem;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    transition: background .2s var(--hp-ease);
}
.hp-house-toggle:hover { background: var(--hp-border); }
.hp-house-toggle [data-lucide] { width: 1em; height: 1em; color: var(--hp-green); }
.hp-house-toggle [data-lucide]:last-child { width: .8em; height: .8em; }

.hp-house-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 12rem;
    margin: 0;
    padding: .4rem;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow-lg);
}
.hp-house-menu-item {
    display: flex;
    align-items: center;
    gap: .5em;
    padding: .5rem .7rem;
    border: none;
    background: none;
    border-radius: var(--hp-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    color: var(--hp-text);
    text-align: left;
    cursor: pointer;
}
.hp-house-menu-item:hover { background: var(--hp-green-soft); }
.hp-house-menu-item.active { color: var(--hp-green-dark); background: var(--hp-green-soft); cursor: default; }
.hp-house-menu-item [data-lucide] { width: 1em; height: 1em; color: var(--hp-green); }

/* ===== Dashboard ===== */
.hp-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.hp-dashboard-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Sprout mascot */
.hp-sprout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.hp-sprout-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    transition: transform 0.3s var(--hp-spring);
}

.hp-sprout-worried .hp-sprout-avatar {
    transform: rotate(-4deg) translateY(2px);
}

.hp-sprout-bubble {
    background: var(--hp-green-soft);
    border-radius: var(--hp-radius) var(--hp-radius) var(--hp-radius) 4px;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    color: var(--hp-text);
    max-width: 32rem;
}

.hp-sprout-worried .hp-sprout-bubble {
    background: var(--hp-amber-light);
}

.hp-sprout-lg {
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0;
}
.hp-sprout-lg .hp-sprout-avatar { width: 128px; height: 128px; }
.hp-sprout-lg .hp-sprout-bubble {
    border-radius: var(--hp-radius);
    font-size: 1rem;
    text-align: center;
}

/* ===== Intro pré-login ===== */
.hp-intro-shell {
    min-height: 100dvh;
    background: linear-gradient(180deg, var(--hp-green-soft), var(--hp-bg) 45%);
}

.hp-intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100dvh;
    max-width: 620px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: calc(1rem + env(safe-area-inset-top)) 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
}

.hp-intro-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.hp-intro-logo { width: 28px; height: 28px; }
.hp-intro-wordmark {
    font-family: var(--hp-font-accent);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--hp-green-dark);
}
.hp-intro-skip {
    margin-left: auto;
    border: none;
    background: none;
    padding: 0.4rem 0.2rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hp-text-muted);
    cursor: pointer;
}

.hp-intro-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    animation: hpDoctorStep 0.35s var(--hp-ease) backwards;
}

.hp-intro-body .hp-sprout { margin-bottom: 0; }

.hp-intro-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--hp-surface);
    box-shadow: var(--hp-shadow);
    color: var(--hp-green);
}
.hp-intro-icon [data-lucide] { width: 30px; height: 30px; }

.hp-intro-title {
    margin: 0;
    font-family: var(--hp-font-accent);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--hp-green-dark);
    text-wrap: pretty;
}

.hp-intro-text {
    margin: 0;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--hp-text);
    text-wrap: pretty;
}

.hp-intro-note {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    max-width: 34ch;
    font-size: 0.85rem;
    color: var(--hp-text-muted);
}
.hp-intro-note [data-lucide] { width: 1em; height: 1em; color: var(--hp-green-light); flex-shrink: 0; }

/* Planos lado a lado — o cartão inteiro é o botão */
/* Plano unico: bloco de vantagens (nao e um cartao escolhivel de entre varios) */
.hp-plan-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 1.6rem 1.35rem 1.35rem;
    border: 1.5px solid var(--hp-green-light);
    border-radius: var(--hp-radius);
    background: var(--hp-surface);
    box-shadow: var(--hp-shadow);
    text-align: center;
}

.hp-plan-card-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 12px;
    border-radius: var(--hp-radius-full);
    background: var(--hp-green);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: var(--hp-shadow);
}

.hp-plan-card-name {
    font-family: var(--hp-font-accent);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--hp-green-dark);
}

.hp-plan-card-price {
    font-family: var(--hp-font-accent);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--hp-text);
}

.hp-plan-cycle-toggle {
    display: flex;
    width: 100%;
    gap: 3px;
    padding: 3px;
    margin: 0.6rem 0 0.2rem;
    background: var(--hp-surface-2);
    border-radius: var(--hp-radius-full);
}
.hp-plan-cycle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    border: none;
    border-radius: var(--hp-radius-full);
    background: transparent;
    color: var(--hp-text-muted);
    font-family: var(--hp-font-accent);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.hp-plan-cycle-btn.is-active {
    background: var(--hp-green);
    color: #fff;
    box-shadow: var(--hp-shadow);
}
.hp-plan-cycle-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: var(--hp-radius-full);
    background: var(--hp-green-light);
    color: var(--hp-green-dark);
}
.hp-plan-cycle-btn.is-active .hp-plan-cycle-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.hp-plan-benefits {
    list-style: none;
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    width: 100%;
    border-top: 1px solid var(--hp-border);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
}

.hp-plan-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--hp-text);
}

.hp-plan-benefits svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    padding: 2px;
    border-radius: var(--hp-radius-full);
    background: var(--hp-green-soft);
    color: var(--hp-green-dark);
}

.hp-plan-card-cta-form { width: 100%; }

.hp-plan-card-cta {
    width: 100%;
    margin-top: 1.1rem;
}

.hp-plan-card-current {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.1rem;
    padding: 0.5rem 0.9rem;
    border-radius: var(--hp-radius-full);
    background: var(--hp-success-light);
    color: var(--hp-success);
    font-size: 0.85rem;
    font-weight: 700;
}

.hp-plan-card-current svg { width: 16px; height: 16px; }

.hp-plan-card-footnote {
    margin: 0.75rem auto 0;
    max-width: 380px;
    font-size: 0.75rem;
    line-height: 1.45;
    text-align: center;
}

.hp-intro-footnote {
    margin: 0;
    max-width: 44ch;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--hp-text-muted);
}

.hp-intro-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.hp-intro-dots { display: flex; gap: 0.4rem; }
.hp-intro-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--hp-border);
    cursor: pointer;
    transition: width 0.25s var(--hp-spring), background 0.25s var(--hp-ease);
}
.hp-intro-dot.active { width: 22px; border-radius: var(--hp-radius-full); background: var(--hp-green); }

.hp-intro-next { width: 100%; max-width: 20rem; }

.hp-intro-login {
    border: none;
    background: none;
    padding: 0.3rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hp-green-dark);
    text-decoration: underline;
    cursor: pointer;
}

@media (min-width: 560px) {
    .hp-intro-title { font-size: 1.9rem; }
    .hp-plan-card-price { font-size: 2.1rem; }
}

.hp-stats {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--hp-white);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding: 0.55rem 0.9rem;
    text-align: left;
    box-shadow: var(--hp-shadow);
    transition: background 0.2s var(--hp-ease), transform 0.2s var(--hp-spring);
}
.hp-stats:hover { background: var(--hp-green-soft); }
.hp-stats:active { transform: scale(0.97); }

.hp-stats-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.hp-stats [data-lucide] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--hp-green);
}

.hp-stat-num {
    display: block;
    font-family: var(--hp-font-accent);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--hp-green-dark);
    line-height: 1;
}

.hp-stat-label {
    font-size: 0.75rem;
    color: var(--hp-text-muted);
}

/* Meteo widget */
.hp-meteo {
    align-items: center;
    gap: 0.4rem;
    background: var(--hp-white);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    box-shadow: var(--hp-shadow);
    flex-wrap: wrap;
    text-decoration: none;
    color: inherit;
}

.hp-meteo-icon { font-size: 1.1rem; }
.hp-meteo-temp { font-weight: 600; color: var(--hp-green-dark); }
.hp-meteo-rain {
    font-size: 0.78rem;
    color: #1a5276;
    background: #d6eaf8;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
}

/* All-good state */
.hp-all-good {
    text-align: center;
    padding: 2.5rem 1rem;
    background: var(--hp-white);
    border-radius: var(--hp-radius);
    border: 1px solid var(--hp-border);
    box-shadow: var(--hp-shadow);
}

.hp-all-good-icon {
    display: block;
    font-size: 2.5rem;
    color: var(--hp-green-light);
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.hp-all-good p { color: var(--hp-text-muted); margin: 0 0 1rem; }

/* Frost alert banner */
.hp-onboarding-card {
    background: linear-gradient(135deg, var(--hp-surface-2), var(--hp-beige-dark));
    border: 1px solid #c2deba;
    border-radius: var(--hp-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.hp-onboarding-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}
.hp-onboarding-emoji { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.hp-onboarding-title { display: block; font-size: 1rem; color: var(--hp-green-dark); }
.hp-onboarding-sub { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--hp-text-muted); }
.hp-onboarding-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.hp-onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}
.hp-step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--hp-border);
    background: var(--hp-white);
    color: var(--hp-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, border-color .2s, color .2s;
}
.hp-step-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
    flex: 1;
}
/* line-height = altura do círculo: mantém o label alinhado com ele mesmo quando o botão passa para a linha seguinte */
.hp-step-label { font-size: 0.9rem; line-height: 1.75rem; color: var(--hp-text); }
.hp-step-action { flex-shrink: 0; }
.hp-onboarding-step.hp-step-done .hp-step-circle {
    background: var(--hp-green-mid);
    border-color: var(--hp-green-mid);
    color: #fff;
}
.hp-onboarding-step.hp-step-done .hp-step-label {
    text-decoration: line-through;
    color: var(--hp-text-muted);
}
.hp-onboarding-step.hp-step-locked .hp-step-circle {
    opacity: 0.4;
}
.hp-onboarding-step.hp-step-locked .hp-step-label {
    color: var(--hp-text-muted);
    opacity: 0.6;
}

.hp-frost-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(135deg, #e8f4fd, #d0e9f8);
    border: 1px solid #a8d4ef;
    border-radius: var(--hp-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.hp-frost-banner-icon { font-size: 1.75rem; flex-shrink: 0; line-height: 1; color: #1a5276; }
.hp-frost-banner-body { flex: 1; }
.hp-frost-banner-body strong { color: #1a5276; }
.hp-frost-banner-body p { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--hp-text); }

/* Alert sections */
.hp-alert-section {
    margin-bottom: 2rem;
}

.hp-alert-section-title {
    font-family: var(--hp-font-accent);
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--hp-green-dark);
    margin: 0 0 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hp-alert-section-icon { font-size: 1.1rem; }

.hp-alert-section-sub {
    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
    color: var(--hp-text-muted);
    font-weight: 400;
}

/* Alert cards grid */
.hp-alert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.875rem;
}

.hp-alert-card {
    background: var(--hp-white);
    border-radius: var(--hp-radius);
    border: 1.5px solid var(--hp-border);
    box-shadow: var(--hp-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s var(--hp-ease), box-shadow 0.35s var(--hp-ease);
}

@media (hover: hover) {
    .hp-alert-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--hp-shadow-lg);
    }
}

.hp-alert-card-overdue { border-color: var(--hp-red-border); }
.hp-alert-card-today   { border-color: #ffeaa7; }
.hp-alert-card-treatment { border-color: var(--hp-success-border); }
.hp-alert-card-location  { border-color: #bee5eb; }

.hp-alert-card-photo {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--hp-beige-dark);
    flex-shrink: 0;
}

.hp-alert-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-alert-card-nophoto {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.hp-alert-card-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.hp-alert-plant-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--hp-text);
    text-decoration: none;
}

.hp-alert-plant-name:hover { color: var(--hp-green-dark); text-decoration: underline; }

.hp-alert-message {
    font-size: 0.78rem;
    color: var(--hp-text-muted);
    margin: 0;
    flex: 1;
}

.hp-empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.hp-empty-state a {
    color: var(--hp-green-dark);
    font-weight: 600;
    text-decoration: underline;
}

/* ===== Search ===== */
.hp-search-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.hp-search-input {
    max-width: 360px;
}

/* ===== Plant grid ===== */
.hp-plant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.hp-plant-card {
    background: var(--hp-white);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    border: 1px solid var(--hp-border);
    overflow: hidden;
    transition: transform 0.35s var(--hp-ease), box-shadow 0.35s var(--hp-ease), border-color 0.35s var(--hp-ease);
    display: flex;
    flex-direction: column;
}

@media (hover: hover) {
    .hp-plant-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--hp-shadow-lg);
        border-color: var(--hp-green-light);
    }
}

.hp-plant-card-photo {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--hp-beige-dark);
}

.hp-plant-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-plant-card-nophoto {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.hp-plant-card-body {
    padding: 0.75rem;
    flex: 1;
    text-decoration: none;
    color: var(--hp-text);
    display: flex;
    flex-direction: column;
}

.hp-plant-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}

.hp-plant-card-scientific {
    font-size: 0.75rem;
    color: var(--hp-text-muted);
    font-style: italic;
    margin-bottom: 0.4rem;
}

.hp-plant-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: auto;
    padding-top: 0.4rem;
}

/* ===== Badges ===== */
.hp-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.hp-badge-danger { background: var(--hp-red-light); color: var(--hp-red); }
.hp-badge-warning { background: var(--hp-amber-light); color: #8a6200; }
[data-theme="dark"] .hp-badge-warning { color: #E8C36A; }
.hp-badge-ok { background: var(--hp-success-light); color: var(--hp-success); }

/* ===== Detail page ===== */
.hp-scientific-name {
    color: var(--hp-text-muted);
    font-style: italic;
    margin: 0;
}

.hp-detail-description {
    color: var(--hp-text-muted);
    margin-bottom: 1.5rem;
}

.hp-detail-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.hp-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    align-items: start;
}

.hp-detail-full {
    grid-column: 1 / -1;
}

.hp-detail-section {
    background: var(--hp-white);
    border-radius: var(--hp-radius);
    border: 1px solid var(--hp-border);
    padding: 1.25rem;
    box-shadow: var(--hp-shadow);
}

.hp-section-title {
    font-family: var(--hp-font-accent);
    font-weight: 400;
    font-size: 1rem;
    color: var(--hp-green-dark);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hp-beige-dark);
}

/* Titulo de seccao com um botao de accao alinhado a direita (ex: Evolution) */
.hp-section-title--action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hp-section-title--action .hp-btn { margin-left: auto; }

.hp-info-list { display: flex; flex-direction: column; gap: 0.4rem; }

.hp-info-row {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.hp-info-label {
    color: var(--hp-text-muted);
    min-width: 110px;
    flex-shrink: 0;
}

.hp-action-form { margin-top: 1rem; }

/* ===== Gallery ===== */
.hp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.hp-gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
}

.hp-gallery-primary {
    border-color: var(--hp-green-light);
}

.hp-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-gallery-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0.3rem;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.hp-gallery-btn, .hp-gallery-primary-badge { pointer-events: auto; }

.hp-gallery-item:hover .hp-gallery-actions { opacity: 1; }

/* Sem hover persistente em ecrãs táteis (telemóvel/tablet) — sem isto os botões de
   apagar/definir capa ficavam invisíveis e inacessíveis, nunca haveria ":hover" para os revelar. */
@media (hover: none) {
    .hp-gallery-actions { opacity: 1; pointer-events: auto; }
}

.hp-gallery-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0 0.2rem;
}

.hp-gallery-btn-delete { color: #ffaaaa; }

.hp-gallery-primary-badge {
    color: var(--hp-amber);
    font-size: 0.7rem;
    font-weight: 600;
}

.hp-upload-form {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hp-upload-label { display: inline-flex; }

/* Doctor panel — botões mais "friendly" (pill, cor própria, ícone), sem crescer o
   tamanho base (mantém hp-btn-sm); escopado a .hp-doctor-picker/-diagnose-btn para não
   afetar o picker de fotos partilhado com Create/Edit. */
.hp-doctor-picker .hp-upload-label .hp-btn {
    border-radius: 999px;
    gap: 0.4rem;
}
.hp-doctor-picker .hp-upload-label .hp-btn [data-lucide] {
    width: 1em;
    height: 1em;
}
.hp-doctor-picker .hp-upload-label:not(.hp-upload-camera) .hp-btn {
    background: var(--hp-green-soft);
    border-color: var(--hp-green-light);
    color: var(--hp-green-dark);
}
.hp-doctor-picker .hp-upload-camera .hp-btn {
    background: #fff4e0;
    border-color: #f0c98a;
    color: #8a5a00;
}

.hp-doctor-diagnose-btn {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.hp-doctor-diagnose-btn [data-lucide] { width: 1em; height: 1em; }

/* Botão do Doctor no Dashboard — hp-btn-ghost ficava demasiado esbatido/deslocado ali;
   pill com a mesma cor de destaque usada no painel do Doctor. */
.hp-doctor-dashboard-btn {
    background: var(--hp-green-soft);
    border-color: var(--hp-green-light);
    color: var(--hp-green-dark);
    font-weight: 600;
}
.hp-doctor-dashboard-btn:hover {
    background: var(--hp-green-light);
    color: var(--hp-green-deep);
}

[data-theme="dark"] .hp-doctor-picker .hp-upload-camera .hp-btn {
    background: #3a2a10;
    border-color: #7a5a20;
    color: #E8C36A;
}

/* Botão de câmara só em dispositivos táteis (telemóvel/tablet) */
@media (hover: hover) and (pointer: fine) {
    .hp-upload-camera { display: none; }
}

.hp-upload-input {
    display: none;
}

/* ===== Treatments ===== */
.hp-treatment-block {
    padding: 0.75rem;
    background: var(--hp-beige);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.hp-treatment-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ===== Logs ===== */
.hp-log-list { display: flex; flex-direction: column; gap: 0.4rem; }

.hp-log-row {
    display: flex;
    gap: 0.75rem;
    font-size: 0.875rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--hp-beige-dark);
}

.hp-log-date { color: var(--hp-text-muted); min-width: 80px; }
.hp-log-type { font-weight: 600; min-width: 90px; }
.hp-log-note { color: var(--hp-text-muted); }

/* ===== Timeline ===== */
.hp-timeline { display: flex; flex-direction: column; padding-left: 1rem; position: relative; }
.hp-timeline::before { content: ''; position: absolute; left: 0.75rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: var(--hp-border); }
.hp-timeline-item { display: flex; gap: 0.75rem; padding: 0.5rem 0; align-items: flex-start; position: relative; }
.hp-timeline-dot { width: 1.75rem; height: 1.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hp-surface); border: 2px solid var(--hp-border); flex-shrink: 0; margin-left: -0.125rem; position: relative; z-index: 1; }
.hp-timeline-dot i { width: 0.875rem; height: 0.875rem; }
.hp-timeline-dot--water { background: #e0f2fe; border-color: #38bdf8; color: #0284c7; }
.hp-timeline-dot--treat { background: var(--hp-success-light); border-color: #4ade80; color: var(--hp-success); }
.hp-timeline-dot--move { background: #fff7ed; border-color: #fb923c; color: #ea580c; }
.hp-timeline-body { display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.2rem; }
.hp-timeline-label { font-weight: 600; font-size: 0.875rem; }
.hp-timeline-date { font-size: 0.75rem; color: var(--hp-text-muted); }
.hp-timeline-note { font-size: 0.8rem; color: var(--hp-text-muted); font-style: italic; margin: 0; }
.hp-timeline-delete { margin-left: auto; flex-shrink: 0; }

/* ===== Photo evolution strip ===== */
.hp-photo-strip { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.hp-photo-strip-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; flex-shrink: 0; scroll-snap-align: start; }
.hp-photo-strip-item img { width: 90px; height: 90px; object-fit: cover; border-radius: 0.5rem; cursor: pointer; }
.hp-photo-strip-date { font-size: 0.7rem; color: var(--hp-text-muted); }

/* ===== Form sections ===== */
.hp-form-section {
    margin-bottom: 1rem;
}

.hp-field-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.hp-field-grow { flex: 1; min-width: 140px; }
.hp-input-narrow { max-width: 90px; }
.hp-textarea { resize: vertical; }
.hp-select { cursor: pointer; }

.hp-field-check-inline {
    padding-bottom: 0.4rem;
}

.hp-field-check-inline label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
}

/* Treatment rows in form */
.hp-treatment-row {
    background: var(--hp-beige);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.hp-remove-treatment {
    align-self: flex-end;
    margin-bottom: 0;
}

/* ===== AI panel ===== */
.hp-ai-panel {
    background: var(--hp-white);
    border: 1.5px dashed var(--hp-green-light);
    border-radius: var(--hp-radius);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.hp-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(127,176,105,0.08);
}

.hp-ai-title {
    font-weight: 600;
    color: var(--hp-green-dark);
    font-size: 0.9rem;
}

.hp-ai-toggle {
    background: none;
    border: 1px solid var(--hp-green-light);
    color: var(--hp-green-dark);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
}

.hp-ai-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hp-ai-instructions { margin: 0; font-size: 0.875rem; }
.hp-ai-textarea { font-family: monospace; font-size: 0.8rem; }

.hp-ai-filled {
    border-color: var(--hp-green-light) !important;
    background: rgba(127,176,105,0.06);
}

/* ===== Nova planta: IA em destaque, formulario manual por baixo ===== */
.hp-ai-hero {
    background: linear-gradient(160deg, var(--hp-green-soft) 0%, var(--hp-teal-soft) 100%);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow);
    padding: 1.75rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
}

.hp-ai-hero-icon {
    width: 58px;
    height: 58px;
    border-radius: var(--hp-radius-full);
    background: var(--hp-surface);
    color: var(--hp-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--hp-shadow);
}

.hp-ai-hero-icon svg { width: 27px; height: 27px; }

.hp-ai-hero-title {
    margin: 0;
    font-family: var(--hp-font-accent);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--hp-green-deep);
    text-wrap: balance;
}

.hp-ai-hero-sub {
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--hp-text-muted);
    max-width: 30ch;
    text-wrap: balance;
}

.hp-ai-hero-pickers {
    display: flex;
    gap: 0.6rem;
    width: 100%;
    max-width: 380px;
}

.hp-ai-hero-pick {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-full);
    padding: 0.7rem 0.9rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--hp-green-deep);
    cursor: pointer;
    transition: transform 0.18s var(--hp-ease), border-color 0.18s var(--hp-ease);
}

.hp-ai-hero-pick:hover { border-color: var(--hp-green-light); }
.hp-ai-hero-pick:active { transform: scale(0.97); }
.hp-ai-hero-pick svg { width: 18px; height: 18px; color: var(--hp-green-dark); }

.hp-ai-hero-preview {
    width: 140px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--hp-radius-sm);
    box-shadow: var(--hp-shadow);
}

.hp-ai-hero-cta {
    width: 100%;
    max-width: 380px;
    margin-top: 0.25rem;
}

.hp-ai-hero-note {
    background: var(--hp-surface);
    border-radius: var(--hp-radius-sm);
    padding: 0.8rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    width: 100%;
    max-width: 380px;
}

.hp-or-divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.35rem 0 1rem;
    color: var(--hp-text-muted);
    font-size: 0.8rem;
}

.hp-or-divider::before,
.hp-or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hp-border);
}

.hp-manual-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    padding: 0.9rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hp-text);
    cursor: pointer;
    transition: border-color 0.18s var(--hp-ease), background 0.18s var(--hp-ease);
}

.hp-manual-toggle:hover { border-color: var(--hp-green-light); }
.hp-manual-toggle.is-open { border-color: var(--hp-green-light); background: var(--hp-green-soft); }
.hp-manual-toggle svg { width: 18px; height: 18px; color: var(--hp-green-dark); }

.hp-manual-chevron {
    margin-left: auto;
    display: inline-flex;
    transition: transform 0.22s var(--hp-ease);
}

.hp-manual-toggle.is-open .hp-manual-chevron { transform: rotate(180deg); }

.hp-manual-body {
    margin-top: 1rem;
    animation: hp-manual-in 0.3s var(--hp-ease) both;
}

@keyframes hp-manual-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

/* ===== Plant Doctor ===== */
/* Menu do botao unico "Plant Doctor" (topo do Detail) — escolha entre Photo/Guided */
.hp-doctor-menu-wrap { position: relative; display: inline-flex; }

/* Botao encostado ao limite direito do ecra (ex: Dashboard) - abrir o menu para a
   esquerda evita que ultrapasse a viewport e cause scroll horizontal na pagina toda. */
.hp-doctor-menu-wrap--end .hp-doctor-menu { left: auto; right: 0; }

.hp-doctor-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 20;
    background: var(--hp-white);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 210px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.hp-doctor-menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: var(--hp-text);
    text-decoration: none;
    font-size: 0.9rem;
}

.hp-doctor-menu a:hover { background: var(--hp-beige); }

.hp-doctor-preview {
    background: var(--hp-beige);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid var(--hp-border);
}

.hp-doctor-preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.hp-doctor-preview-text {
    color: var(--hp-text);
    font-size: 0.875rem;
    margin: 0 0 0.5rem;
}

.hp-doctor-divider {
    border: none;
    border-top: 1px solid var(--hp-border);
    margin: 0.75rem 0;
}

/* ===== Buttons extra ===== */
.hp-btn-sm { padding: 0.4rem 0.875rem; font-size: 0.82rem; }

.hp-btn-water {
    background: #0E9BC9;
    color: #fff;
    border-color: transparent;
}

.hp-btn-water:hover { background: #0B87B0; }

.hp-btn-treat {
    background: var(--hp-green-mid);
    color: #fff;
    border-color: transparent;
}

.hp-btn-treat:hover { background: var(--hp-green-deep); }

.hp-btn-danger {
    background: var(--hp-red);
    color: #fff;
    border-color: transparent;
}

.hp-btn-danger:hover { background: #a93226; }

.hp-btn-danger-ghost {
    background: transparent;
    color: var(--hp-red);
    border-color: var(--hp-red-border);
}

.hp-btn-danger-ghost:hover { background: var(--hp-red-light); }

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

.hp-btn-disabled:hover { transform: none; }

/* ===== Confirm dialog ===== */
.hp-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hp-confirm-box {
    background: var(--hp-white);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow-lg);
    max-width: 360px;
    width: 100%;
    padding: 1.5rem;
}

.hp-confirm-message {
    margin: 0 0 1.25rem;
    color: var(--hp-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.hp-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

/* ===== Utils ===== */
.hp-muted { color: var(--hp-text-muted); font-size: 0.875rem; margin: 0; }
.hp-text-danger { color: var(--hp-red); }
.d-inline { display: inline; }

/* ===== Search with icon ===== */
.hp-search-wrapper {
    position: relative;
    flex: 1;
    max-width: 360px;
}

.hp-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hp-text-muted);
    pointer-events: none;
    width: 1rem;
    height: 1rem;
}

.hp-search-has-icon {
    padding-left: 2.25rem;
    max-width: 100%;
}

/* ===== Password field with show/hide toggle ===== */
.hp-password-wrapper {
    position: relative;
}

.hp-password-wrapper .hp-input {
    padding-right: 2.5rem;
}

.hp-password-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--hp-text-muted);
    display: flex;
    align-items: center;
}

.hp-password-toggle:hover {
    color: var(--hp-text);
}

.hp-password-toggle svg,
.hp-password-toggle i {
    width: 1.1rem;
    height: 1.1rem;
}

/* ===== Hamburger button ===== */
.hp-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
    transition: background 0.15s;
}
.hp-hamburger:hover { background: var(--hp-surface-2); }
.hp-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--hp-text);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform-origin: center;
}
.hp-hamburger.hp-nav-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hp-hamburger.hp-nav-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hp-hamburger.hp-nav-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Nav overlay ===== */
.hp-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: calc(env(safe-area-inset-top) + 56px);
    background: rgba(31,42,55,0.28);
    z-index: 90;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .hp-hamburger { display: flex; }

    .hp-nav-overlay.hp-nav-open { display: block; }

    .hp-nav-links {
        position: fixed;
        top: calc(env(safe-area-inset-top) + 56px);
        left: 0;
        right: 0;
        background: var(--hp-surface);
        border-bottom: 1px solid var(--hp-border);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 0 1rem;
        z-index: 95;
        transform: translateY(calc(-100% - 10px));
        visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
        box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    }
    .hp-nav-links.hp-nav-open {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hp-nav-links form { display: contents; }

    .hp-nav-link {
        padding: 0.85rem 1.25rem;
        border-radius: 0;
        font-size: 1rem;
        gap: 0.75rem;
        border-bottom: 1px solid var(--hp-border);
    }
    .hp-nav-link [data-lucide] { width: 1.15rem; height: 1.15rem; }
    .hp-nav-label { display: inline; }
}

@media (max-width: 600px) {
    .hp-nav { height: 50px; }
    .hp-nav-links { top: calc(env(safe-area-inset-top) + 50px); }
    .hp-nav-overlay { top: calc(env(safe-area-inset-top) + 50px); }
    .hp-brand { font-size: 1.05rem; }
    .hp-dashboard-greeting { font-size: 1.5rem; }
    .hp-login-card { padding: 2rem 1.25rem; }
    .hp-plant-grid { grid-template-columns: repeat(2, 1fr); }
    .hp-alert-grid { grid-template-columns: repeat(2, 1fr); }
    .hp-detail-grid { grid-template-columns: 1fr; }
    /* Em coluna o eixo transversal passa a ser horizontal: manter o align-items:flex-end
       do layout lado-a-lado encostava os campos à direita e impedia-os de ocupar a largura
       toda (Watering/Tratamentos apareciam estreitos e desalinhados). O gap fica a 0 para
       o espaçamento vir só do margin-bottom do .hp-field, como nos campos soltos. */
    .hp-field-row { flex-direction: column; align-items: stretch; gap: 0; }
    /* Largura fixa só faz sentido lado a lado; empilhado dava um campo minúsculo. */
    .hp-field-row .hp-input-narrow { max-width: none; }
    .hp-info-label { min-width: 85px; }
    .hp-dashboard-header { flex-direction: column; gap: 0.75rem; }
    .hp-dashboard-meta { width: 100%; justify-content: space-between; }
}

/* ===== Lightbox ===== */
.hp-lightbox-trigger { cursor: zoom-in; }

.hp-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.88);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fade de abertura/fecho — a duracao acompanha HP_LIGHTBOX_FADE_MS (site.js) */
    opacity: 0;
    transition: opacity .25s ease;
}
.hp-lightbox.hp-lightbox--open { opacity: 1; }

.hp-lightbox img {
    max-width: 96vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.hp-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    opacity: .8;
}
.hp-lightbox-close:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .hp-lightbox { transition: none; }
}

.hp-lightbox-caption {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 0.9rem;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 0.85rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* ===== Weather page ===== */
.hp-weather-current { margin-bottom: 1rem; }
.hp-weather-now {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--hp-surface);
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
}
.hp-weather-now-icon { font-size: 2.5rem; }
.hp-weather-now-temp { font-size: 2rem; font-weight: 700; color: var(--hp-green-dark); }
.hp-weather-now-meta { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--hp-text-muted); }

.hp-weather-hourly {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.hp-weather-hour {
    display: grid;
    grid-template-columns: 3.5rem 2rem 3.5rem 4rem 4rem;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1rem;
    background: var(--hp-surface);
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    font-size: .9rem;
}
.hp-weather-hour-now {
    border-left: 3px solid var(--hp-green-light);
    font-weight: 600;
}
.hp-weather-hour-label { color: var(--hp-text-muted); font-size: .8rem; }
.hp-weather-hour-temp { font-weight: 600; }
.hp-weather-hour-rain, .hp-weather-hour-wind { font-size: .8rem; color: var(--hp-text-muted); }

/* hp-stats as link */
a.hp-stats { text-decoration: none; }
a.hp-stats:hover .hp-stat-num { color: var(--hp-green-light); }

/* hp-select-zone hover hint on desktop */
.hp-select-zone:hover .hp-select-overlay { opacity: 0.25; }
.hp-plant-card.hp-selected .hp-select-zone:hover .hp-select-overlay,
.hp-alert-card.hp-selected .hp-select-zone:hover .hp-select-overlay { opacity: 1; }

/* Settings form card */
.hp-form-card {
    background: var(--hp-surface);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
    max-width: 540px;
}

/* Settings page: flow cards into columns on wider screens */
/* ===== Settings — separadores ===== */
/* Telemovel: icone em cima do texto e largura igual, para os 5 caberem sem scroll;
   >=600px: icone ao lado do texto. */
.hp-settings-tabs {
    display: flex;
    gap: .25rem;
    margin: -.5rem 0 1.25rem;
    border-bottom: 1px solid var(--hp-border);
}
.hp-settings-tab {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .5rem .25rem .6rem;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--hp-text-muted);
    font: inherit;
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: color .15s ease, background-color .15s ease;
}
.hp-settings-tab [data-lucide],
.hp-settings-tab svg { width: 1.2rem; height: 1.2rem; }
.hp-settings-tab:hover { color: var(--hp-green-dark); background: var(--hp-surface-2); }
.hp-settings-tab--active {
    color: var(--hp-green-dark);
    border-bottom-color: var(--hp-green-mid);
    font-weight: 600;
}
@media (min-width: 600px) {
    .hp-settings-tabs { gap: .5rem; }
    .hp-settings-tab {
        flex: 0 0 auto;
        flex-direction: row;
        gap: .45rem;
        padding: .6rem 1rem;
        font-size: .9rem;
    }
    .hp-settings-tab [data-lucide],
    .hp-settings-tab svg { width: 1rem; height: 1rem; }
}

.hp-settings-panel {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}
.hp-settings-panel > .hp-form-card { max-width: none; margin: 0; }
.hp-settings-panel--single { max-width: 640px; }
@media (min-width: 900px) {
    .hp-settings-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .hp-settings-panel--single { grid-template-columns: 1fr; }
}

.hp-settings-footer {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}
.hp-settings-footer .hp-btn { min-width: 220px; justify-content: center; }
.hp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 480px) {
    .hp-form-row { grid-template-columns: 1fr; }
    .hp-weather-hour { grid-template-columns: 3rem 1.8rem 3rem 3.5rem; }
    .hp-weather-hour-wind { display: none; }
}

/* ===== Generic modal ===== */
@keyframes hp-fade-in { from { opacity: 0; } }
@keyframes hp-modal-in {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
}

.hp-modal {
    position: fixed;
    inset: 0;
    background: rgba(8,16,10,.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: hp-fade-in 0.25s var(--hp-ease) both;
}
.hp-modal-box {
    background: var(--hp-surface);
    border-radius: var(--hp-radius);
    padding: 1.5rem;
    width: 100%;
    max-width: 340px;
    box-shadow: 0 12px 48px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: hp-modal-in 0.35s var(--hp-spring) both;
}
.hp-modal-title {
    font-family: var(--hp-font-accent);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--hp-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    margin: 0;
}
.hp-modal-title [data-lucide] { width: 1.1em; height: 1.1em; }
.hp-modal-options {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

/* Opcoes do sheet: preenchimento pastel + texto colorido (estilo Flora) */
.hp-modal-options .hp-btn {
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 800;
    border-radius: var(--hp-radius-sm);
    box-shadow: none;
}

.hp-modal-options .hp-btn-water {
    background: #E6F4FB;
    color: #0E90C4;
}

.hp-modal-options .hp-btn-water:hover { background: #D6ECF7; }

.hp-modal-options .hp-btn-treat {
    background: var(--hp-green-soft);
    color: var(--hp-green-dark);
}

.hp-modal-options .hp-btn-treat:hover { background: var(--hp-teal-soft); }

.hp-modal-options .hp-btn-ghost {
    background: var(--hp-surface-2);
    color: var(--hp-text);
    border-color: transparent;
}
.hp-modal-options .hp-btn { flex: 1; justify-content: center; }
.hp-modal-picker {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.hp-modal-picker .hp-input { flex: 1; }
.hp-modal-cancel {
    background: none;
    border: none;
    color: var(--hp-text-muted);
    font-size: .85rem;
    cursor: pointer;
    text-align: center;
    padding: .25rem;
}
.hp-modal-cancel:hover { color: var(--hp-text); }

/* Em ecras pequenos os modais sobem de baixo como bottom sheet (estilo Flora) */
@media (max-width: 768px) {
    .hp-modal {
        align-items: flex-end;
        padding: 0;
    }

    .hp-modal-box {
        max-width: none;
        border-radius: var(--hp-radius) var(--hp-radius) 0 0;
        padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
        animation: hp-sheet-up 0.35s var(--hp-ease) both;
    }
}

@keyframes hp-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ===== Room filter chips ===== */
.hp-room-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .75rem 0 1rem;
}
.hp-room-chip {
    padding: .6rem 1.3rem;
    border-radius: var(--hp-radius-full);
    border: none;
    background: var(--hp-surface-2);
    color: var(--hp-text);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .25s var(--hp-ease), color .25s var(--hp-ease), transform .25s var(--hp-spring);
}
.hp-room-chip:active { transform: scale(0.94); }
.hp-room-chip:hover { background: var(--hp-green-soft); color: var(--hp-green-dark); }
.hp-room-chip.active {
    background: var(--hp-green);
    color: #fff;
    box-shadow: 0 4px 12px rgba(34,197,94,0.28);
}

/* Room label on plant card */
.hp-plant-card-room {
    display: flex;
    align-items: center;
    gap: .25em;
    font-size: .75rem;
    color: var(--hp-text-muted);
    margin-top: .15rem;
}
.hp-plant-card-room [data-lucide] { width: .8em; height: .8em; }

/* Room selector in detail */
.hp-room-select-form { display: contents; }
.hp-input-sm { padding: .25rem .5rem; font-size: .85rem; height: auto; }

/* Doctor — sugestão de mudança de divisão */
.hp-doctor-room-suggestion {
    margin: .5rem 0 .25rem;
    padding: .6rem .75rem;
    border-radius: var(--hp-radius);
    background: var(--hp-green-soft);
    border: 1px solid var(--hp-green-mid);
}
.hp-doctor-room-suggestion p { margin: 0 0 .5rem; }

/* Settings — specs ambientais da divisão */
.hp-room-list-item--specs { gap: .5rem; }
.hp-room-row { display: flex; align-items: center; gap: .6rem; }

/* flex:1 + min-width:0 — sem isto o nome não ocupa a linha e a coluna acabava
   empurrada para o meio, com os botões colados ao texto. */
.hp-room-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
}

.hp-room-row-actions { display: flex; align-items: center; gap: .35rem; flex: none; }
/* O <form> do apagar não deve criar uma caixa própria entre os dois botões. */
.hp-room-row-actions form { display: contents; }

.hp-room-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hp-radius-sm);
}
.hp-room-icon-btn svg { width: 16px; height: 16px; }

.hp-room-name {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-weight: 600;
    color: var(--hp-text);
    overflow-wrap: anywhere;
}
.hp-room-name svg { width: 16px; height: 16px; flex: none; color: var(--hp-green); }

.hp-room-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.hp-room-spec-chip {
    font-size: .72rem;
    padding: .12rem .5rem;
    border-radius: var(--hp-radius-full);
    background: var(--hp-surface-2);
    border: 1px solid var(--hp-border);
    color: var(--hp-text-muted);
    white-space: nowrap;
}
.hp-room-specs-form {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .75rem;
    border-radius: var(--hp-radius);
    background: var(--hp-surface-2);
    border: 1px solid var(--hp-border);
}
.hp-spec-toggle { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; }
.hp-spec-slider { width: 100%; accent-color: var(--hp-green); margin: 0; }
.hp-spec-ticks {
    display: flex;
    justify-content: space-between;
    font-size: .68rem;
    color: var(--hp-text-muted);
    margin-top: -.15rem;
}
/* Os extremos encostam às pontas do slider; os do meio ficam centrados no seu tick. */
.hp-spec-ticks span { flex: 1; text-align: center; }
.hp-spec-ticks span:first-child { text-align: left; }
.hp-spec-ticks span:last-child { text-align: right; }
.hp-spec-hint { font-size: .72rem; margin: .25rem 0 0; }
.hp-spec-actions { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .35rem; }

/* Settings rooms list */
.hp-room-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.hp-room-list-item {
    display: flex;
    flex-direction: column;
    padding: .7rem .8rem;
    background: var(--hp-surface);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    font-size: .9rem;
    text-align: left;
}

/* Campo só de leitura (ex: email do perfil) — tem de se ver que não é editável. */
.hp-input-locked { position: relative; }

.hp-input-locked .hp-input {
    background: var(--hp-surface-2);
    color: var(--hp-text-muted);
    border-style: dashed;
    padding-right: 2.4rem;
    cursor: default;
    user-select: none;
}

.hp-input-locked .hp-input:focus {
    outline: none;
    border-color: var(--hp-border);
    box-shadow: none;
}

.hp-input-locked svg {
    position: absolute;
    top: 50%;
    right: .9rem;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--hp-text-muted);
    pointer-events: none;
}

.hp-add-room-form {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}
.hp-add-room-form .hp-input { flex: 1; }

/* ===== Settings — Casas ===== */
.hp-house-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1rem;
}
.hp-house-header .hp-section-title { flex: 1; }
.hp-house-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: var(--hp-green-dark);
}
.hp-house-chevron { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--hp-text-muted); }
.hp-house-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1;
    min-width: 0;
    font-family: var(--hp-font-accent);
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hp-house-name [data-lucide] { width: 1em; height: 1em; flex-shrink: 0; }
.hp-house-summary {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
    font-size: .8rem;
    color: var(--hp-text-muted);
}
.hp-house-summary [data-lucide] { width: .9em; height: .9em; }
.hp-house-rename-form {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1;
}
.hp-house-subtitle {
    display: flex;
    align-items: center;
    gap: .4em;
    font-size: .85rem;
    font-weight: 600;
    color: var(--hp-text-muted);
    margin: 0 0 .5rem;
}
.hp-house-subtitle [data-lucide] { width: .9em; height: .9em; }

/* ===== Bulk selection ===== */
.hp-plant-card,
.hp-alert-card { position: relative; }

.hp-select-zone {
    position: relative;
    cursor: pointer;
}

.hp-select-overlay {
    position: absolute;
    inset: 0;
    background: rgba(45, 74, 45, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    z-index: 1;
}

.hp-plant-card.hp-selected .hp-select-overlay,
.hp-alert-card.hp-selected .hp-select-overlay { opacity: 1; }

.hp-plant-card.hp-selected {
    outline: 2px solid var(--hp-green-mid);
    outline-offset: -1px;
    background: var(--hp-surface-2);
}
.hp-alert-card.hp-selected {
    outline: 2px solid var(--hp-green-mid);
    outline-offset: -1px;
}

.hp-alert-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.hp-select-all-btn {
    margin-left: auto;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
}

.hp-bulk-bar {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 1.25rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--hp-white);
    border: 1.5px solid var(--hp-border);
    border-radius: 999px;
    box-shadow: var(--hp-shadow-lg);
    padding: 0.45rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 200;
    animation: hpBulkIn 0.18s ease;
    white-space: nowrap;
}
@keyframes hpBulkIn {
    from { transform: translateX(-50%) translateY(calc(env(safe-area-inset-bottom) + 0.75rem)); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.hp-bulk-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hp-text);
    padding-right: 0.5rem;
    border-right: 1px solid var(--hp-border);
    margin-right: 0.1rem;
}

/* ===== Plantedex ===== */
.hp-pdx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.hp-pdx-counter {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    font-size: 1rem;
}
.hp-pdx-num   { font-size: 1.5rem; font-weight: 700; color: var(--hp-green-mid); }
.hp-pdx-sep   { color: var(--hp-text-muted); }
.hp-pdx-total { font-size: 1.1rem; font-weight: 600; color: var(--hp-text); }
.hp-pdx-label { font-size: 0.8rem; color: var(--hp-text-muted); margin-left: 0.25rem; }

.hp-pdx-progress-bar {
    height: 8px;
    background: var(--hp-beige-dark);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.hp-pdx-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--hp-green-mid), var(--hp-green-light));
    border-radius: 999px;
    transition: width 0.6s ease;
}

.hp-pdx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.85rem;
}

.hp-pdx-card {
    background: var(--hp-white);
    border: 1.5px solid var(--hp-border);
    border-radius: var(--hp-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: left;
    cursor: default;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}
.hp-pdx-unlocked {
    cursor: pointer;
}
.hp-pdx-unlocked:hover {
    box-shadow: var(--hp-shadow-lg);
    border-color: var(--hp-green-light);
    transform: translateY(-2px);
}
.hp-pdx-locked {
    opacity: 0.55;
    filter: grayscale(0.4);
}
.hp-pdx-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.hp-pdx-img-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--hp-beige-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hp-text-muted);
    font-size: 2.5rem;
}
.hp-pdx-img-placeholder [data-lucide] { width: 2rem; height: 2rem; }
.hp-pdx-locked-img { background: var(--hp-beige); }
.hp-pdx-card-body {
    padding: 0.55rem 0.65rem 0.65rem;
}
.hp-pdx-card-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hp-text);
    line-height: 1.3;
}
.hp-pdx-card-sci {
    font-size: 0.7rem;
    color: var(--hp-text-muted);
    font-style: italic;
    margin-top: 0.15rem;
    line-height: 1.3;
}
.hp-pdx-locked-name { font-style: normal; color: var(--hp-text-muted); }

/* Reveal animation */
@keyframes pdxReveal {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.hp-pdx-reveal {
    animation: pdxReveal 0.35s ease both;
}
@media (prefers-reduced-motion: reduce) {
    .hp-pdx-reveal { animation: none; }
    .hp-pdx-progress-fill { transition: none; }
    .hp-pdx-unlocked:hover { transform: none; }
}

/* Plantedex modal */
.hp-pdx-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.hp-pdx-modal-box {
    background: var(--hp-white);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow-lg);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}
.hp-pdx-modal-close {
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--hp-text-muted);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
}
.hp-pdx-modal-close:hover { color: var(--hp-text); }
.hp-pdx-modal-inner {
    display: flex;
    flex-direction: column;
}
.hp-pdx-modal-img-wrap { width: 100%; }
.hp-pdx-modal-img {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: var(--hp-radius) var(--hp-radius) 0 0;
    display: block;
}
.hp-pdx-modal-img-placeholder {
    width: 100%;
    height: 140px;
    background: var(--hp-beige-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hp-text-muted);
    border-radius: var(--hp-radius) var(--hp-radius) 0 0;
}
.hp-pdx-modal-img-placeholder [data-lucide] { width: 3rem; height: 3rem; }
.hp-pdx-modal-img-clickable { cursor: zoom-in; }
.hp-pdx-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}
.hp-pdx-lightbox-img {
    max-width: 94vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.hp-pdx-lightbox-close {
    position: absolute;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    right: 1.2rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
    padding: .25rem .5rem;
}
.hp-pdx-lightbox-close:hover { opacity: 1; }
.hp-pdx-modal-content { padding: 1.1rem 1.25rem 1.4rem; }
.hp-pdx-modal-name {
    font-family: var(--hp-font-accent);
    font-weight: 400;
    font-size: 1.4rem;
    margin: 0 0 0.15rem;
    color: var(--hp-text);
    padding-right: 2rem;
}
.hp-pdx-modal-sci {
    font-size: 0.88rem;
    font-style: italic;
    color: var(--hp-text-muted);
    margin-bottom: 0.25rem;
}
.hp-pdx-modal-meta {
    font-size: 0.78rem;
    color: var(--hp-text-muted);
    margin-bottom: 0.75rem;
}
.hp-pdx-modal-desc {
    font-size: 0.9rem;
    color: var(--hp-text);
    margin: 0 0 0.5rem;
    line-height: 1.6;
}
.hp-pdx-modal-care {
    font-size: 0.85rem;
    color: var(--hp-text-muted);
    margin: 0 0 0.85rem;
    line-height: 1.5;
}
.hp-pdx-modal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}
.hp-pdx-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--hp-beige-dark);
    color: var(--hp-green-dark);
    border: 1px solid var(--hp-border);
    white-space: nowrap;
}
.hp-pdx-modal-facts { }
.hp-pdx-facts-list {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.85rem;
    color: var(--hp-text);
    line-height: 1.7;
}

/* Unlock toast variant */
.hp-alert-species {
    background: #E8F5E9;
    border-left: 4px solid var(--hp-green-mid);
    color: var(--hp-green-dark);
}

/* Blazor error UI — escondida por defeito, mostrada pelo runtime em excepcao */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    background: lightyellow;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    color-scheme: light only;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ─── Photo picker (Create.razor) ─────────────────────────────────────────── */
.hp-photo-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hp-photo-preview {
    width: 100%;
    max-width: 280px;
    max-height: 220px;
    object-fit: cover;
    border-radius: var(--hp-radius);
    border: 1px solid var(--hp-border);
}

.hp-photo-preview-loading {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    height: 140px;
    border-radius: var(--hp-radius);
    border: 1px solid var(--hp-border);
    background: var(--hp-surface-2);
}

.hp-photo-preview-loading .hp-btn-spinner {
    width: 28px;
    height: 28px;
    border-width: 3px;
    margin-right: 0;
    color: var(--hp-green-dark);
}

/* ─── Plans grid (Register.razor) ──────────────────────────────────────────── */
.hp-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.hp-plan-card {
    cursor: pointer;
    position: relative;
}

.hp-plan-card input[type="radio"]:checked + .hp-plan-card-content {
    border-color: var(--hp-green-dark);
    background: linear-gradient(135deg, var(--hp-green-soft) 0%, var(--hp-surface-2) 100%);
    box-shadow: 0 0 0 2px rgba(45, 74, 45, 0.1);
}

.hp-plan-card-content {
    padding: 1.5rem;
    border: 2px solid var(--hp-border);
    border-radius: var(--hp-radius);
    background: var(--hp-white);
    transition: all 0.3s ease;
}

.hp-plan-card:hover .hp-plan-card-content {
    border-color: var(--hp-green-mid);
    box-shadow: var(--hp-shadow);
}

.hp-plan-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hp-green-dark);
    margin: 0 0 0.5rem 0;
}

.hp-plan-price {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hp-green-mid);
    margin: 0 0 0.75rem 0;
}

.hp-plan-desc {
    font-size: 0.85rem;
    color: var(--hp-text-muted);
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.hp-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}

.hp-plan-features li {
    padding: 0.35rem 0;
    color: var(--hp-text);
}

.hp-plan-features li:before {
    content: "✓ ";
    color: var(--hp-green-light);
    font-weight: 600;
    margin-right: 0.5rem;
}

/* Card grid com botão por plano (ChangePlan.razor): cards iguais, botão alinhado em baixo */
.hp-plans-grid .hp-plan-card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hp-plan-action {
    margin-top: auto;
    padding-top: 1rem;
}

.hp-plan-badge {
    align-self: flex-start;
    display: inline-block;
    background: var(--hp-green-deep);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

/* Plano atual: destacado mas não selecionável */
.hp-plan-card-current {
    cursor: default;
}

    .hp-plan-card-current .hp-plan-card-content {
        border-color: var(--hp-green-dark);
        background: linear-gradient(135deg, var(--hp-green-soft) 0%, var(--hp-surface-2) 100%);
    }

    .hp-plan-card-current:hover .hp-plan-card-content {
        border-color: var(--hp-green-dark);
        box-shadow: none;
    }

/* ─── Subscription info (Settings.razor) ────────────────────────────────── */
.hp-subscription-info {
    background: var(--hp-beige);
    border-radius: var(--hp-radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.hp-subscription-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--hp-border);
}

.hp-subscription-row:last-child {
    border-bottom: none;
}

.hp-subscription-label {
    font-weight: 600;
    color: var(--hp-text);
    font-size: 0.9rem;
}

.hp-subscription-value {
    color: var(--hp-text-muted);
    text-align: right;
    font-size: 0.9rem;
}

/* ─── Netflix-style Plans Carousel (ChangePlan.razor) ───────────────────── */
.hp-plans-carousel {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    margin: 40px 0;
    perspective: 1000px;
    padding: 20px 0;
}

.hp-plan-card-netflix {
    position: relative;
    width: 180px;
    height: 220px;
    background: var(--hp-surface);
    border: 2px solid var(--hp-border);
    border-radius: 12px;
    padding: 28px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    outline: none;
}

.hp-plan-card-netflix:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(45, 74, 45, 0.15);
}

.hp-plan-card-netflix.hp-plan-selected {
    background: linear-gradient(135deg, var(--hp-green-deep) 0%, var(--hp-green-mid) 100%);
    color: white;
    border-color: var(--hp-green-deep);
    transform: scale(1.12);
    box-shadow: 0 12px 32px rgba(45, 74, 45, 0.3);
}

.hp-plan-card-inner {
    position: relative;
    z-index: 2;
}

.hp-plan-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    letter-spacing: 0.5px;
}

.hp-plan-subtitle-netflix {
    font-size: 14px;
    margin: 0;
    opacity: 0.8;
}

.hp-plan-card-netflix.hp-plan-selected .hp-plan-title {
    color: white;
}

.hp-plan-card-netflix.hp-plan-selected .hp-plan-subtitle-netflix {
    color: #E8F5E9;
}

.hp-plan-badge-netflix {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #FFC107;
    color: #333;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hp-plan-badge-popular {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--hp-green-deep);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    white-space: nowrap;
}

.hp-plan-checkmark {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: var(--hp-surface);
    color: var(--hp-green-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}

.hp-plan-details {
    background: var(--hp-surface-2);
    border-radius: 8px;
    padding: 32px;
    margin: 32px 0;
}

.hp-details-content {
    max-width: 600px;
    margin: 0 auto;
}

.hp-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--hp-border);
}

.hp-detail-row:last-child {
    border-bottom: none;
}

.hp-detail-label {
    font-size: 14px;
    color: var(--hp-text-muted);
    font-weight: 500;
}

.hp-detail-value {
    font-size: 16px;
    color: var(--hp-green-dark);
    font-weight: 600;
}

.hp-plan-action-section {
    display: flex;
    justify-content: center;
    margin: 32px 0 16px 0;
}

.hp-btn-disabled {
    background: #ccc;
    color: var(--hp-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .hp-plans-carousel {
        flex-wrap: wrap;
    }

    .hp-plan-card-netflix {
        width: 160px;
        height: 200px;
    }

    .hp-plan-details {
        padding: 24px;
    }
}

@media (max-width: 540px) {
    .hp-login-wrapper { align-items: flex-start; }
    .hp-plans-carousel { flex-direction: column; align-items: stretch; gap: 10px; margin: 20px 0; }
    .hp-plan-card-netflix { width: 100%; height: auto; min-height: 72px; flex-direction: row; justify-content: flex-start; padding: 16px 20px; gap: 16px; }
    .hp-plan-card-netflix.hp-plan-selected { transform: scale(1); }
    .hp-plan-card-inner { display: flex; align-items: center; gap: 16px; text-align: left; }
    .hp-plan-title { font-size: 18px; margin: 0; }
    .hp-plan-subtitle-netflix { font-size: 13px; }
    .hp-plan-checkmark { position: static; width: 28px; height: 28px; font-size: 16px; margin-left: auto; flex-shrink: 0; }
    .hp-plan-badge-netflix { top: 8px; left: 8px; font-size: 10px; padding: 4px 8px; }
    .hp-plan-badge-popular { top: -10px; font-size: 10px; padding: 4px 10px; }
    .hp-plan-details { padding: 16px; margin: 12px 0; }
    .hp-plan-action-section { margin: 16px 0 8px; }
}

/* ─── Danger zone (DeleteAccount/Settings) — migrado do site.css da Web ── */
.hp-danger-zone {
    border: 1px solid var(--hp-red-border);
    border-radius: var(--hp-radius);
    padding: 1.25rem;
    background: var(--hp-red-light);
}

.hp-danger-zone .hp-section-title { color: var(--hp-red); }

.hp-restore-banner {
    background: var(--hp-amber-light);
    border: 1px solid var(--hp-amber-border);
    border-radius: var(--hp-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.hp-restore-banner p { margin: 0 0 .25rem; }

.hp-deleted-banner {
    background: var(--hp-success-light);
    border: 1px solid var(--hp-success-border);
    border-radius: var(--hp-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.hp-deleted-banner p { margin: 0 0 .25rem; }

/* ─── Service Down Overlay — migrado do site.css da Web ── */
.hp-service-down-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(3px);
}

.hp-service-down-box {
    background: var(--hp-surface);
    border-radius: var(--hp-radius);
    padding: 2.5rem 3rem;
    text-align: center;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}

.hp-service-down-icon { font-size: 3rem; margin-bottom: 1rem; }

.hp-service-down-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hp-green-dark);
    margin: 0 0 .5rem;
}

.hp-service-down-msg {
    font-size: .9rem;
    color: var(--hp-text-muted);
    margin: 0 0 1.5rem;
}

.hp-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 0.45rem;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hp-spin 0.6s linear infinite;
}

.hp-service-down-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--hp-border);
    border-top-color: var(--hp-green-dark);
    border-radius: 50%;
    animation: hp-spin 0.8s linear infinite;
    margin: 0 auto;
}

/* ===== Nav underline animado (desktop) ===== */
@media (min-width: 769px) {
    .hp-nav-link { position: relative; }
    .hp-nav-link::after {
        content: '';
        position: absolute;
        left: 0.75rem;
        right: 0.75rem;
        bottom: 1px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform 0.3s var(--hp-ease);
    }
    .hp-nav-link:hover::after,
    .hp-nav-link.active::after {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

/* ===== Skeletons (shimmer) ===== */
@keyframes hp-shimmer { to { transform: translateX(100%); } }

.hp-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--hp-surface-2);
    border-radius: var(--hp-radius-sm);
}
.hp-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-100%);
    animation: hp-shimmer 1.4s ease infinite;
}
[data-theme="dark"] .hp-skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}
.hp-skeleton-title { height: 1.4rem; width: 40%; margin-bottom: 0.75rem; }
.hp-skeleton-text  { height: 0.9rem; width: 100%; margin-bottom: 0.5rem; }
.hp-skeleton-card  { height: 140px; border-radius: var(--hp-radius); }

/* ===== Reduced motion (componentes F2) ===== */
@media (prefers-reduced-motion: reduce) {
    .hp-btn::after,
    .hp-nav-badge,
    .hp-modal,
    .hp-modal-box,
    .hp-empty-lucide,
    .hp-skeleton::after { animation: none !important; }

    .hp-btn,
    .hp-plant-card,
    .hp-alert-card,
    .hp-room-chip,
    .hp-nav-link::after { transition: none !important; }
}

/* ===== Sistema de reveal-on-scroll (F3) =====
   Visivel por defeito (SSR-safe). hpInitReveal arma com .hp-reveal-armed
   e dispara .hp-revealed via IntersectionObserver. Re-invocavel apos
   cada re-render Blazor (elementos ja processados sao ignorados). */

.hp-reveal {
    transition: opacity 0.6s var(--hp-ease), transform 0.6s var(--hp-ease);
    transition-delay: var(--hp-reveal-delay, 0ms);
}
.hp-reveal-armed { opacity: 0; transform: translateY(24px); }
.hp-reveal-armed.hp-revealed { opacity: 1; transform: none; }

.hp-stagger > *:nth-child(1) { --hp-reveal-delay: 0ms;   }
.hp-stagger > *:nth-child(2) { --hp-reveal-delay: 70ms;  }
.hp-stagger > *:nth-child(3) { --hp-reveal-delay: 140ms; }
.hp-stagger > *:nth-child(4) { --hp-reveal-delay: 210ms; }
.hp-stagger > *:nth-child(5) { --hp-reveal-delay: 280ms; }
.hp-stagger > *:nth-child(6) { --hp-reveal-delay: 350ms; }
.hp-stagger > *:nth-child(7) { --hp-reveal-delay: 420ms; }
.hp-stagger > *:nth-child(8) { --hp-reveal-delay: 490ms; }
.hp-stagger > *:nth-child(n+9) { --hp-reveal-delay: 540ms; }

/* ===== Transicao de pagina ===== */
@keyframes hp-page-in {
    from { opacity: 0; transform: translateY(10px); }
}
.hp-page-anim { animation: hp-page-in 0.35s var(--hp-ease) both; }

/* ===== Particulas de acao (rega/tratamento) ===== */
/* Chuva de celebracao em ecra inteiro (rega/tratamento) - substitui o antigo burst
   curto e localizado; cai do topo ao fundo com deriva e rotacao suaves. */
@keyframes hp-rain-fall {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    12%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}
.hp-rain-drop {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9000;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .18));
    animation-name: hp-rain-fall;
    animation-timing-function: cubic-bezier(.3, .1, .4, 1);
    animation-fill-mode: forwards;
    will-change: transform, opacity;
}

/* ===== Confetti de celebracao (badges/especies) ===== */
@keyframes hp-confetti-fall {
    from { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    to   { opacity: 0; transform: translate(var(--bx), var(--by)) rotate(var(--br)); }
}
.hp-confetti {
    position: fixed;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    z-index: 9000;
    pointer-events: none;
    animation: hp-confetti-fall 1.1s ease-out forwards;
}

/* ===== Reduced motion (F3) ===== */
@media (prefers-reduced-motion: reduce) {
    .hp-reveal,
    .hp-reveal-armed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .hp-page-anim { animation: none !important; }
    .hp-rain-drop,
    .hp-confetti { display: none !important; }
}

/* ===== F4: paginas ===== */

/* Zoom suave da foto nos cartoes */
.hp-plant-card-photo img,
.hp-alert-card-photo img { transition: transform 0.5s var(--hp-ease); }

@media (hover: hover) {
    .hp-plant-card:hover .hp-plant-card-photo img { transform: scale(1.06); }
    .hp-alert-card:hover .hp-alert-card-photo img { transform: scale(1.06); }
}

/* Shine sweep nos badges conquistados */
@keyframes hp-shine-sweep {
    from { transform: translateX(-160%) skewX(-15deg); }
    to   { transform: translateX(260%)  skewX(-15deg); }
}
.hp-badge-card.earned { position: relative; overflow: hidden; }
.hp-badge-card.earned::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-160%) skewX(-15deg);
    pointer-events: none;
    z-index: 1;
}
@media (hover: hover) {
    .hp-badge-card.earned:hover::before { animation: hp-shine-sweep 0.7s ease; }
}

/* Login: entrada spring + fundo botanico suave */
.hp-login-wrapper {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(99,168,111,0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(21,128,61,0.10) 0%, transparent 55%);
}
.hp-login-card { animation: hp-modal-in 0.45s var(--hp-spring) both; }

@media (prefers-reduced-motion: reduce) {
    .hp-login-card { animation: none !important; }
    .hp-badge-card.earned::before { animation: none !important; }
}

/* ===== F5: Bottom tab bar (mobile) ===== */
.hp-tabbar { display: none; }

@media (max-width: 768px) {
    .hp-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        background: var(--hp-surface);
        border-top: 1px solid var(--hp-border);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -4px 20px rgba(31,42,55,0.06);
    }

    .hp-tabbar-link {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 62px;
        color: var(--hp-text-muted);
        text-decoration: none;
        background: none;
        border: none;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        position: relative;
        transition: color 0.25s var(--hp-ease), transform 0.25s var(--hp-spring);
    }

    .hp-tabbar-link [data-lucide] { width: 1.45rem; height: 1.45rem; stroke-width: 2.25; }
    .hp-tabbar-link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
    .hp-tabbar-link.active { color: var(--hp-green); }
    .hp-tabbar-link.active [data-lucide] { stroke-width: 2.75; }
    .hp-tabbar-link:active { transform: scale(0.9); }

    .hp-tabbar-badge {
        position: absolute;
        top: 8px;
        left: calc(50% + 6px);
        min-width: 0.55rem;
        height: 0.55rem;
        padding: 0;
        border-radius: 999px;
        background: var(--hp-green);
        border: 2px solid var(--hp-surface);
        color: transparent;
        font-size: 0;
        text-align: center;
        animation: hp-pop 0.45s var(--hp-spring) both;
    }

    /* tab bar substitui o menu hamburguer */
    .hp-hamburger { display: none !important; }

    /* conteudo e overlays acima da tab bar */
    /* folga para a tab bar e para a CTA flutuante nao taparem o fim da lista */
    .hp-main { padding-bottom: calc(152px + env(safe-area-inset-bottom)); }
    .hp-footer { display: none; }
    .hp-bulk-bar { bottom: calc(env(safe-area-inset-bottom) + 76px); }
    .hp-fab-cta { bottom: calc(env(safe-area-inset-bottom) + 88px); }

    /* touch targets */
    .hp-btn:not(.hp-btn-sm) { min-height: 44px; }
}

/* ===== Rituais sazonais ===== */
.hp-ritual-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--hp-green-soft), var(--hp-surface-2));
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
    color: var(--hp-text);
    transition: transform 0.3s var(--hp-ease), box-shadow 0.3s var(--hp-ease);
}
@media (hover: hover) {
    .hp-ritual-banner:hover { transform: translateY(-2px); box-shadow: var(--hp-shadow-lg); }
}
.hp-ritual-banner-icon { font-size: 1.8rem; flex-shrink: 0; }
.hp-ritual-banner-body { flex: 1; }
.hp-ritual-banner-body strong { display: block; color: var(--hp-green-dark); }
.hp-ritual-banner-body p { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--hp-text-muted); }

.hp-ritual-progress {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}
.hp-ritual-bar {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: var(--hp-surface-2);
    overflow: hidden;
}
.hp-ritual-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hp-green), var(--hp-green-light));
    transition: width 0.5s var(--hp-ease);
}
.hp-ritual-pct {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hp-green-dark);
    min-width: 2.6rem;
    text-align: right;
}

.hp-ritual-list { display: flex; flex-direction: column; gap: 0.6rem; max-width: 640px; }
.hp-ritual-task {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--hp-surface);
    border: 1.5px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--hp-text);
    transition: border-color 0.25s var(--hp-ease), background 0.25s var(--hp-ease),
                opacity 0.25s var(--hp-ease), transform 0.25s var(--hp-spring);
}
.hp-ritual-task:active { transform: scale(0.98); }
@media (hover: hover) {
    .hp-ritual-task:hover { border-color: var(--hp-green-light); }
}
.hp-ritual-task.done { opacity: 0.55; background: var(--hp-surface-2); }
.hp-ritual-task.done .hp-ritual-label { text-decoration: line-through; }
.hp-ritual-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid var(--hp-green-light);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background 0.25s var(--hp-ease);
}
.hp-ritual-task.done .hp-ritual-check { background: var(--hp-green); border-color: var(--hp-green); }

.hp-ritual-history { margin-bottom: 1.5rem; }
.hp-ritual-history-list { display: flex; flex-direction: column; gap: 0.5rem; max-width: 640px; }
.hp-ritual-history-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--hp-surface);
    border: 1.5px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding: 0.7rem 1.1rem;
    text-decoration: none;
    color: var(--hp-text);
    transition: border-color 0.25s var(--hp-ease);
}
@media (hover: hover) {
    .hp-ritual-history-row:hover { border-color: var(--hp-green-light); }
}
.hp-ritual-history-row.done { opacity: 0.7; }
.hp-ritual-history-icon { font-size: 1.3rem; flex-shrink: 0; }
.hp-ritual-history-body { flex: 1; min-width: 0; }
.hp-ritual-history-bar {
    width: 90px;
    height: 8px;
    border-radius: 999px;
    background: var(--hp-surface-2);
    overflow: hidden;
    flex-shrink: 0;
}
.hp-ritual-history-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hp-green), var(--hp-green-light));
}
.hp-ritual-history-pct {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--hp-green-dark);
    min-width: 2.4rem;
    text-align: right;
    flex-shrink: 0;
}

/* ===== Rega inteligente: nota de chuva ===== */
.hp-rain-note {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--hp-surface-2);
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius-sm);
    padding: 0.6rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--hp-text-muted);
}

/* ===== Cemiterio ===== */
.hp-death-causes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hp-death-cause {
    padding: 0.4rem 0.8rem;
    border-radius: var(--hp-radius-full);
    border: 1.5px solid var(--hp-border);
    background: var(--hp-surface);
    color: var(--hp-text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.25s var(--hp-ease), background 0.25s var(--hp-ease), transform 0.25s var(--hp-spring);
}
.hp-death-cause:active { transform: scale(0.94); }
.hp-death-cause.active { border-color: var(--hp-green); background: var(--hp-green-soft); }

.hp-memorial-photo img { filter: grayscale(0.85) brightness(0.96); }
.hp-memorial-cause { font-size: 0.8rem; color: var(--hp-text-muted);
}

/* ===== Doutor de plantas ===== */
.hp-doctor-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1.1rem;
    margin-bottom: 0.5rem;
    border-radius: var(--hp-radius);
    border: 1.5px solid var(--hp-border);
    background: var(--hp-surface);
    color: var(--hp-text);
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.25s var(--hp-ease), transform 0.25s var(--hp-spring);
}
.hp-doctor-option:active { transform: scale(0.98); }
@media (hover: hover) { .hp-doctor-option:hover { border-color: var(--hp-green-light); } }

.hp-doctor-step { animation: hpDoctorStep 0.35s var(--hp-ease) backwards; }
.hp-doctor-step .hp-doctor-option,
.hp-doctor-step .hp-doctor-plant-card { animation: hpDoctorStep 0.3s var(--hp-ease) backwards; }
@keyframes hpDoctorStep {
    from { opacity: 0; transform: translateY(10px); }
}

.hp-doctor-analyzing { text-align: center; padding: 2.5rem 0; }
.hp-doctor-analyzing-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.75rem;
    animation: hpDoctorPulse 1s ease-in-out infinite;
}
@keyframes hpDoctorPulse {
    0%, 100% { transform: scale(1); opacity: 0.65; }
    50% { transform: scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hp-doctor-step,
    .hp-doctor-step .hp-doctor-option,
    .hp-doctor-step .hp-doctor-plant-card,
    .hp-doctor-analyzing-icon { animation: none; }
}

.hp-doctor-result { text-align: center; }
.hp-doctor-result-emoji { font-size: 3rem; display: block; margin-bottom: 0.5rem; }
.hp-doctor-result-plant { margin: 1.25rem 0 0.75rem; font-weight: 600; }
.hp-doctor-result-actions { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--hp-border); }

.hp-doctor-plant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}
.hp-doctor-plant-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1.5px solid var(--hp-border);
    border-radius: var(--hp-radius);
    background: var(--hp-surface);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.25s var(--hp-ease), transform 0.25s var(--hp-spring);
}
.hp-doctor-plant-card:active { transform: scale(0.97); }
@media (hover: hover) { .hp-doctor-plant-card:hover { border-color: var(--hp-green-light); } }
.hp-doctor-plant-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.hp-doctor-plant-card-name {
    padding: 0.5rem 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hp-text);
}