:root{
        --bg:#f6f2eb;
        --paper:#ffffff;
        --paper-2:#fcfaf6;
        --line:#e8ddd0;
        --line-2:#ddd0c1;
        --text:#141414;
        --muted:#626262;
        --dark:#121212;
        --soft:#efe6da;
        --accent:#b08968;
        --accent-2:#8d6b4f;
        --radius:22px;
        --radius-sm:16px;
        --shadow:0 14px 36px rgba(0,0,0,.06);
        --shadow-strong:0 20px 48px rgba(0,0,0,.08);
        --topbar:86px;
        --sidebar:264px;
        --content-max:1400px;
    }
    *{box-sizing:border-box}
    html,body{--bottomnav:0px;margin:0;padding:0;max-width:100%;overflow-x:hidden}
    body *{min-width:0}
    body{--bottomnav:0px;
        font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
        color:var(--text);
        background:
            radial-gradient(circle at top right, rgba(255,255,255,.72), transparent 26%),
            linear-gradient(180deg,#f9f6f0 0%,#f2ece3 100%);
        min-height:100vh;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    .app-shell{
        max-width:var(--content-max);
        width:100%;
        margin:0 auto;
        min-height:100vh;
        overflow-x:hidden;
    }
    .topbar{
            position:fixed;
            top:0;left:0;right:0;
            width:100%;
            max-width:100vw;
            overflow:hidden;
            z-index:40;
            height:var(--topbar);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            padding:1rem 1.2rem;
            background:rgba(255,255,255,.88);
            backdrop-filter:blur(16px);
            border-bottom:1px solid rgba(232,221,208,.72);
            box-shadow:0 8px 22px rgba(0,0,0,.03);
        }
        .topbar-inner{
            max-width:var(--content-max);
            margin:0 auto;
            width:100%;
            min-width:0;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            padding:.55rem .7rem;
            border:1px solid rgba(232,221,208,.9);
            border-radius:24px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(252,248,242,.82) 100%);
            box-shadow:0 10px 26px rgba(0,0,0,.04);
        }
        .topbar-left,.topbar-right{display:flex;align-items:center;gap:.9rem;min-width:0}
        .menu-toggle{
            display:none;
            width:44px;height:44px;
            border:1px solid var(--line);
            border-radius:14px;
            background:#fff;
            font-size:1.1rem;
            cursor:pointer;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:.9rem;
            min-width:0;
            padding:.35rem .45rem;
            border-radius:18px;
            transition:.18s ease;
        }
        .brand:hover{
            background:rgba(255,255,255,.66);
        }
        .brand img{
            width:54px;height:54px;border-radius:16px;object-fit:cover;
            background:#fff;border:1px solid var(--line);padding:3px;
            box-shadow:0 8px 18px rgba(0,0,0,.05);
        }
        .brand-text{display:flex;flex-direction:column;min-width:0}
        .brand-text strong{
            font-size:1.02rem;
            line-height:1.08;
            letter-spacing:-.01em;
        }
        .brand-text span{
            font-size:.82rem;color:var(--muted);line-height:1.35;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px;
        }
        .social-links,.auth-links{
            display:flex;
            align-items:center;
            gap:.55rem;
            flex-wrap:wrap
        }
        .social-links{
            position:relative;
            display:flex;
            align-items:center;
            gap:.38rem;
            padding:.34rem;
            border-radius:22px;
            background:
                linear-gradient(135deg, rgba(18,18,18,.98) 0%, rgba(43,34,27,.96) 100%);
            border:1px solid rgba(176,137,104,.36);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.08),
                0 12px 28px rgba(18,18,18,.10);
            overflow:hidden;
        }
        .social-links::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 18% 0%, rgba(255,255,255,.12), transparent 28%),
                radial-gradient(circle at 100% 100%, rgba(176,137,104,.20), transparent 34%);
            pointer-events:none;
        }
        .social-link{
            position:relative;
            z-index:1;
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            min-height:40px;
            padding:.48rem .74rem .48rem .52rem;
            border-radius:16px;
            color:rgba(255,255,255,.86);
            font-size:.84rem;
            font-weight:850;
            letter-spacing:.01em;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.045);
            transition:.18s ease;
        }
        .social-link:hover{
            color:#fff;
            background:rgba(176,137,104,.22);
            border-color:rgba(226,190,135,.42);
            transform:translateY(-1px);
            box-shadow:0 10px 18px rgba(0,0,0,.16);
        }
        .social-icon{
            width:28px;
            height:28px;
            flex:0 0 auto;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            border-radius:11px;
            background:linear-gradient(135deg, #d7b779, #a5792e);
            color:#18130f;
            box-shadow:0 7px 14px rgba(0,0,0,.16);
            font-size:.92rem;
            line-height:1;
        }
        .social-label{white-space:nowrap}
        .auth-links{
            padding:.18rem;
            border-radius:999px;
            background:rgba(255,255,255,.54);
            border:1px solid rgba(232,221,208,.74);
        }
        .auth-user{
            font-size:.88rem;
            color:var(--muted);
            font-weight:700;
            padding:0 .35rem;
        }
    .button,.button-link{
        display:inline-flex;align-items:center;justify-content:center;
        min-height:42px;padding:.74rem 1rem;border-radius:999px;
        border:1px solid var(--line);font-weight:700;font-size:.92rem;
        transition:.18s ease;
    }
    .button:hover,.button-link:hover{transform:translateY(-1px)}
    .button-light{background:#fff}
    .button-dark{background:var(--dark);color:#fff;border-color:var(--dark)}
    .sidebar{
        position:fixed;
        top:calc(var(--topbar) + 16px);
        left:max(16px, calc((100vw - var(--content-max)) / 2 + 16px));
        bottom:16px;
        width:var(--sidebar);
        z-index:25;
    }
    .sidebar-panel{
        height:100%;
        background:
            linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(252,248,242,.92) 100%);
        backdrop-filter:blur(12px);
        border:1px solid var(--line);
        border-radius:26px;
        box-shadow:var(--shadow-strong);
        padding:1rem;
        overflow-y:auto;
        overflow-x:hidden;
        display:flex;
        flex-direction:column;
        gap:1rem;
    }
    .sidebar-top{
        padding:.4rem;
        border:1px solid var(--line);
            border-radius:18px;
            margin:1rem auto 0;
            box-shadow:0 8px 18px rgba(0,0,0,.04);
    }
    .sidebar-top-card{
        display:flex;
        gap:.8rem;
        align-items:center;
        padding:.9rem;
        border-radius:20px;
        background:
            linear-gradient(135deg, rgba(176,137,104,.1) 0%, rgba(255,255,255,.8) 100%);
        border:1px solid rgba(176,137,104,.16);
    }
    .sidebar-top-card img{
        width:42px;
        height:42px;
        border-radius:14px;
        object-fit:cover;
        background:#fff;
        padding:3px;
        border:1px solid var(--line);
    }
    .sidebar-overline{
        margin:0;
        font-size:.72rem;
        text-transform:uppercase;
        letter-spacing:.08em;
        color:var(--accent-2);
        font-weight:800;
    }
    .sidebar-brand-name{
        margin:.18rem 0 0;
        font-size:.9rem;
        font-weight:800;
        line-height:1.2;
        color:var(--text);
    }
    .sidebar-title{
        margin:0;
        font-size:.76rem;
        text-transform:uppercase;
        letter-spacing:.08em;
        color:var(--muted);
        font-weight:800;
        padding:0 .35rem;
    }
    .sidebar-nav{
        display:grid;
        gap:.55rem;
    }
    .sidebar-link{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:.75rem;
        max-width:100%;
        padding:.95rem 1rem;
        border-radius:18px;
        font-weight:800;
        border:1px solid transparent;
        background:rgba(255,255,255,.52);
        transition:.18s ease;
    }
    .sidebar-link-main{
        display:flex;
        align-items:center;
        gap:.75rem;
        min-width:0;
    }
    .sidebar-link-icon{
        width:10px;
        height:10px;
        border-radius:999px;
        background:linear-gradient(135deg, var(--accent), var(--accent-2));
        box-shadow:0 0 0 4px rgba(176,137,104,.12);
        flex:0 0 auto;
    }
    .sidebar-link-label{
        min-width:0;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .sidebar-link-arrow{
        color:#9a8a77;
        font-size:1rem;
        line-height:1;
        transition:.18s ease;
    }
    .sidebar-link:hover{
        background:#fff;
        border-color:rgba(176,137,104,.18);
        transform:translateY(-1px);
        box-shadow:0 10px 22px rgba(0,0,0,.05);
    }
    .sidebar-link:hover .sidebar-link-arrow{
        color:var(--accent-2);
        transform:translateX(2px);
    }
    .sidebar-link.is-active{
        background:linear-gradient(135deg, var(--dark), #2a2a2a);
        color:#fff;
        border-color:var(--dark);
        box-shadow:0 14px 26px rgba(18,18,18,.18);
    }
    .sidebar-link.is-active .sidebar-link-icon{
        background:linear-gradient(135deg, #fff, #d9d9d9);
        box-shadow:0 0 0 4px rgba(255,255,255,.08);
    }
    .sidebar-link.is-active .sidebar-link-arrow{
        color:#fff;
    }
    .sidebar-note{
        margin-top:auto;
        padding:.9rem 1rem;
        border-radius:18px;
        background:rgba(255,255,255,.65);
        border:1px solid var(--line);
        color:var(--muted);
        font-size:.84rem;
        line-height:1.55;
    }
    .content{
        padding:calc(var(--topbar) + 20px) 18px 30px calc(var(--sidebar) + 34px);
    }
    @media (max-width: 860px){ body{--bottomnav:64px;} }
    @media (max-width: 860px){ body.no-sidebar{--bottomnav:0px;} }
    .content{padding-bottom:calc(30px + var(--bottomnav));}

    
    body.no-sidebar .content{padding:calc(var(--topbar) + 20px) 18px 30px 18px;}
.flash{
        margin-bottom:1rem;padding:1rem 1.1rem;border-radius:16px;
        font-weight:700;border:1px solid var(--line);background:#fff;
        box-shadow:var(--shadow);
    }
    .flash-success{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
    .flash-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
    .page-header{margin-bottom:1.45rem}
    .page-header h1{
        margin:0;
        font-size:clamp(2rem,2.7vw,3rem);
        line-height:1.02;
        letter-spacing:-.03em;
    }
    .page-header p{
        margin:.8rem 0 0;
        max-width:860px;
        color:var(--muted);
        line-height:1.74;
        font-size:1rem;
    }
    .hero-grid,.grid-2,.grid-3,.grid-4{
        display:grid;gap:1.25rem;
    }
    .hero-grid{
        grid-template-columns:1.08fr .92fr;
        align-items:stretch;
    }
    .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .panel,.card{
        background:var(--paper);
        border:1px solid var(--line);
        border-radius:var(--radius);
        box-shadow:var(--shadow);
    }
    .panel{padding:1.45rem}
    .panel h2{
        margin:0;
        font-size:clamp(1.7rem,2.3vw,2.75rem);
        line-height:1.02;
        letter-spacing:-.03em;
    }
    .panel p,.card p{
        margin:.82rem 0 0;
        color:var(--muted);
        line-height:1.74;
        font-size:.97rem;
    }
    .hero-art{
        position:relative;
        min-height:360px;
        overflow:hidden;
        background:
            linear-gradient(135deg, rgba(18,18,18,.98) 0%, rgba(34,34,34,.96) 100%);
        color:#fff;
        box-shadow:var(--shadow-strong);
    }
    .hero-art::before,
    .hero-art::after{
        content:"";
        position:absolute;
        border-radius:999px;
        opacity:.12;
    }
    .hero-art::before{
        width:300px;height:300px;
        top:-60px;right:-40px;
        background:#ffffff;
        filter:blur(2px);
    }
    .hero-art::after{
        width:250px;height:250px;
        bottom:-70px;left:-40px;
        background:#c8b8a2;
        filter:blur(2px);
    }
    .hero-art-inner{
        position:relative;
        z-index:1;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        height:100%;
        padding:1.7rem;
    }
    .hero-art-top{
        display:flex;align-items:center;gap:1rem;
    }
    .hero-art-top img{
        width:84px;height:84px;border-radius:18px;background:#fff;padding:6px;
    }
    .hero-art-badge{
        display:inline-flex;
        padding:.42rem .75rem;
        border-radius:999px;
        border:1px solid rgba(255,255,255,.18);
        font-size:.76rem;
        font-weight:800;
        text-transform:uppercase;
        letter-spacing:.06em;
    }
    .hero-art-quote{
        font-size:1.03rem;
        line-height:1.76;
        max-width:460px;
        color:rgba(255,255,255,.88);
    }
    .section{margin-top:1.55rem}
    .section-head{
        display:flex;align-items:end;justify-content:space-between;gap:1rem;
        margin-bottom:1rem;
    }
    .section-kicker{
        margin:0;
        font-size:.78rem;
        text-transform:uppercase;
        letter-spacing:.08em;
        color:var(--muted);
    }
    .section-title{
        margin:.35rem 0 0;
        font-size:clamp(1.35rem,1.9vw,2rem);
        line-height:1.12;
        letter-spacing:-.02em;
    }
    .section-link{font-size:.92rem;color:var(--muted)}
    .section-link:hover{color:var(--text)}
    .card{
        padding:1.25rem;
        position:relative;
    }
    .card h3,.card h4{
        margin:0;
        line-height:1.18;
        font-size:1.1rem;
        letter-spacing:-.01em;
    }
    .card-premium{
        background:
            linear-gradient(180deg,#fff 0%,#fdfbf8 100%);
        border-color:var(--line-2);
    }
    .card-premium::after{
        content:"";
        position:absolute;
        top:0;left:0;right:0;
        height:4px;
        border-radius:22px 22px 0 0;
        background:linear-gradient(90deg,var(--accent),var(--accent-2));
        opacity:.65;
    }

    .card-no-ribbon.card-premium::after{
        display:none;
    }
    .tag{
        display:inline-flex;align-items:center;min-height:30px;
        padding:.36rem .7rem;border-radius:999px;
        background:var(--paper-2);border:1px solid var(--line);
        font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    }
    .tag-dark{
        background:#181818;
        color:#fff;
        border-color:#181818;
    }
    .meta-line{
        display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
        margin-top:.75rem;
        color:var(--muted);
        font-size:.86rem;
        font-weight:600;
    }
    .dot{
        width:4px;height:4px;border-radius:999px;background:#b8aa98;
    }
    .cta-row{
        display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem;
    }
    .button-block{
        display:inline-flex;align-items:center;justify-content:center;
        min-height:46px;padding:.86rem 1rem;border-radius:16px;
        font-weight:800;border:1px solid var(--line);
        transition:.18s ease;
    }
    .button-block:hover{transform:translateY(-1px)}
    .button-soft{background:var(--soft)}
    .button-inline{
        display:inline-flex;
        margin-top:1rem;
        font-weight:800;
        color:var(--text);
    }
    .button-inline:hover{text-decoration:underline}
    .list{
        margin:.85rem 0 0;
        padding-left:1rem;
        color:var(--muted);
        line-height:1.7;
    }
    .list li + li{margin-top:.28rem}
    .callout{
        margin-top:1rem;
        padding:1rem 1rem;
        border-radius:16px;
        background:var(--paper-2);
        border:1px solid var(--line);
    }
    .editorial-lead{
        display:grid;
        gap:1rem;
    }
    .featured-band{
        display:grid;
        grid-template-columns:1.15fr .85fr;
        gap:1.25rem;
        align-items:stretch;
    }
    .featured-side{
        display:grid;
        gap:1.25rem;
    }
    .split-note{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:1.25rem;
    }
    .form-card{padding:1.25rem}
    .form-grid{display:grid;gap:.9rem}
    label{
        display:grid;gap:.35rem;
        font-size:.92rem;font-weight:700;
    }
    input{
        width:100%;
        min-height:48px;
        border:1px solid var(--line);
        border-radius:14px;
        padding:.85rem .95rem;
        font:inherit;
        background:#fff;
        color:var(--text);
    }
    input:focus{
        outline:2px solid #ddd3c4;
        outline-offset:1px;
        border-color:#d8cbb8;
    }
    .hint{margin-top:.85rem;color:var(--muted);font-size:.92rem}
    .page-footer{
        margin-top:1.7rem;
        padding:1rem 0 .4rem;
        color:var(--muted);
        font-size:.88rem;
    }
.course-feature{
    display:grid;
    grid-template-columns:minmax(260px, 360px) 1fr;
    gap:1.1rem;
    align-items:stretch;
    margin-top:.95rem;
    margin-bottom:1rem;
}
.course-feature-media{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    border:1px solid rgba(232,221,208,.9);
    background:#f7f2ea;
    min-height:100%;
    box-shadow:0 10px 22px rgba(0,0,0,.05);
}
.course-feature-media img{
    width:100%;
    height:100%;
    min-height:280px;
    object-fit:cover;
    display:block;
}
.course-feature-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:.8rem;
    padding:1rem 1rem;
    border-radius:18px;
    border:1px solid rgba(232,221,208,.9);
    background:linear-gradient(180deg, #fff 0%, #fdfbf8 100%);
}
.course-feature-title{
    margin:0;
    font-size:clamp(1.3rem, 1.8vw, 2rem);
    line-height:1.06;
    letter-spacing:-.03em;
    color:#4f3526;
}
.course-feature-text{
    margin:0;
    color:#3f3f3f;
    line-height:1.68;
    font-size:.95rem;
    max-width:520px;
}
.course-feature-pills{
    display:flex;
    flex-wrap:wrap;
    gap:.55rem;
}
.course-feature-pill{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:.45rem .72rem;
    border-radius:999px;
    border:1px solid rgba(176,137,104,.14);
    background:rgba(176,137,104,.08);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.02em;
    color:#5f4433;
}
.course-feature-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:.72rem 1rem;
    border-radius:14px;
    background:linear-gradient(135deg, #c79b2c, #a97d12);
    color:#fff;
    font-weight:800;
    font-size:.9rem;
    box-shadow:0 10px 18px rgba(169,125,18,.18);
    width:max-content;
}
.course-feature-cta:hover{
    transform:translateY(-1px);
    color:#fff;
}

    @media (max-width: 1200px){
        .social-label{display:none}
        .social-link{padding:.48rem .52rem}
    }
    @media (max-width: 1050px){
        .social-links{display:none}
    }
    @media (max-width: 1100px){
        .featured-band{grid-template-columns:1fr}
        .split-note{grid-template-columns:1fr}
    }
    @media (max-width: 980px){
        .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
        .sidebar{
            left:10px;
            right:auto;
            width:min(300px, calc(100vw - 20px));
            max-width:calc(100vw - 20px);
            transform:translateX(calc(-100% - 22px));
            transition:transform .2s ease;
            top:calc(var(--topbar) + 12px);
        }
        .sidebar.is-open{transform:translateX(0)}
        .content{
            padding-left:16px;
            padding-right:16px;
        }
        .hero-grid,.grid-2,.grid-3,.grid-4{
            grid-template-columns:1fr;
        }
        .hero-art{min-height:280px}
    }
@media (max-width: 900px){
    .course-feature{
        grid-template-columns:1fr;
    }
    .course-feature-media img{
        min-height:220px;
    }
}

    @media (max-width: 700px){
        .topbar{
            height:auto;
            min-height:var(--topbar);
            padding:.85rem .95rem;
        }
        .topbar-inner{
            align-items:flex-start;
            flex-wrap:wrap;
            gap:.6rem;
            max-width:100%;
            overflow:hidden;
        }
        .topbar-left{
            width:100%;
            max-width:100%;
        }
        .topbar-right{
            width:100%;
            max-width:100%;
            justify-content:space-between;
            flex-wrap:wrap;
            gap:.5rem;
        }
        .auth-links{
            width:100%;
            justify-content:flex-start;
        }
        .brand-text span{max-width:180px}
        .content{
            padding-top:calc(var(--topbar) + 28px);
        }
        .panel,.card,.form-card{padding:1rem}
        .button,.button-link,.button-block{width:100%}
        .cta-row{display:grid}
    }
/* --- Artigos (listagem) --- */
.article-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.25rem;
}
.article-card{
    padding:0;
    overflow:hidden;
    border-color:rgba(22,63,54,.18);
    background:linear-gradient(180deg, #fff 0%, #fdfbf8 100%);
}
.article-content{
    padding:1.25rem;
    display:flex;
    flex-direction:column;
    min-height:100%;
}
.article-title-bar{
    margin:-1.25rem -1.25rem 0;
    padding:1rem 1.25rem;
    background:linear-gradient(135deg, #163f36 0%, #235c4f 100%);
    border-bottom:1px solid rgba(255,255,255,.18);
}
.card .article-title-card,
.article-title-card{
    margin:0;
    color:#fff;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(1.08rem, 1.24vw, 1.28rem);
    line-height:1.18;
    letter-spacing:-.012em;
    font-weight:700;
}
.article-excerpt{
    margin:.9rem 0 0;
    color:var(--muted);
    line-height:1.68;
    font-size:.96rem;
}
.article-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
    margin-top:1rem;
}
@media (max-width: 900px){
    .article-grid{
        grid-template-columns:1fr;
    }
}
@media (max-width: 700px){
    .article-content{
        padding:1rem;
    }
    .article-title-bar{
        margin:-1rem -1rem 0;
        padding:.95rem 1rem;
    }
    .card .article-title-card,
    .article-title-card{
        font-size:1.12rem;
        line-height:1.18;
    }
}

.herb-toolbar{
    display:grid;
    gap:1rem;
    margin-top:.25rem;
    margin-bottom:1.2rem;
    padding:1rem;
    border-radius:20px;
    border:1px solid var(--line);
    background:linear-gradient(180deg, #fff 0%, #fdfbf8 100%);
    box-shadow:var(--shadow);
}
.herb-search{
    width:100%;
    min-height:48px;
    border:1px solid var(--line);
    border-radius:14px;
    padding:.85rem .95rem;
    font:inherit;
    background:#fff;
    color:var(--text);
}
.herb-search:focus{
    outline:2px solid #ddd3c4;
    outline-offset:1px;
    border-color:#d8cbb8;
}
.filter-chips{
    display:flex;
    flex-wrap:wrap;
    gap:.55rem;
}
.filter-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:.6rem .9rem;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--muted);
    font-size:.84rem;
    font-weight:800;
    cursor:pointer;
    transition:.18s ease;
}
.filter-chip:hover{
    transform:translateY(-1px);
    color:var(--text);
    border-color:rgba(176,137,104,.22);
}
.filter-chip.is-active{
    background:linear-gradient(135deg, var(--dark), #2a2a2a);
    color:#fff;
    border-color:var(--dark);
}
.herb-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.25rem;
}
.herb-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:0 0 1rem;
}
.herb-visual{
    position:relative;
    width:40%;
    max-width:200px;
    min-width:130px;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:#f4eee5;
    border:1px solid var(--line);
    border-radius:18px;
    margin:1rem auto 0;
    box-shadow:0 8px 18px rgba(0,0,0,.04);
}
.herb-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.herb-visual-fill{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
}
.herb-visual-fill::before,
.herb-visual-fill::after{
    content:"";
    position:absolute;
    border-radius:999px;
    opacity:.14;
}
.herb-visual-fill::before{
    width:160px;
    height:160px;
    top:-35px;
    right:-25px;
    background:#fff;
}
.herb-visual-fill::after{
    width:120px;
    height:120px;
    bottom:-25px;
    left:-18px;
    background:#eddcc5;
}
.herb-visual-mark{
    position:absolute;
    inset:auto 18px 18px auto;
    width:54px;
    height:54px;
    border-radius:18px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(4px);
}
.herb-body{--bottomnav:0px;
    padding:1rem 1.1rem 0;
    display:flex;
    flex-direction:column;
    gap:.85rem;
}
.herb-card-title{
    margin:0;
    font-size:1.18rem;
    line-height:1.12;
    letter-spacing:-.02em;
    color:var(--text);
}
.herb-card-sub{
    margin:0;
    color:var(--muted);
    line-height:1.65;
    font-size:.93rem;
}
.herb-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
}
.herb-tag{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:.34rem .66rem;
    border-radius:999px;
    border:1px solid rgba(176,137,104,.14);
    background:rgba(176,137,104,.08);
    color:#5f4433;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.02em;
}
.herb-points{
    display:grid;
    gap:.5rem;
}
.herb-point{
    color:var(--muted);
    font-size:.9rem;
    line-height:1.55;
}
.herb-point strong{
    color:var(--text);
}
.herb-empty{
    display:none;
    margin-top:1rem;
    padding:1.15rem;
    border-radius:18px;
    border:1px dashed var(--line);
    color:var(--muted);
    background:rgba(255,255,255,.55);
}
.herb-empty.is-visible{
    display:block;
}
@media (max-width: 900px){
    .herb-grid{
        grid-template-columns:1fr;
    }
}
@media (max-width: 700px){
    .herb-visual{
        width:48%;
        max-width:180px;
        min-width:120px;
    }
}
    
/* Override: detalhe das ervas com o mesmo critério visual dos cards */
.detail-hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:1.1rem !important;
    align-items:stretch !important;
}
.detail-visual{
    position:relative !important;
    width:40% !important;
    max-width:220px !important;
    min-width:140px !important;
    min-height:auto !important;
    aspect-ratio:1 / 1 !important;
    border-radius:18px !important;
    overflow:hidden !important;
    margin:0 auto !important;
    padding:0 !important;
    display:block !important;
    border:1px solid var(--line) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.04) !important;
    background:#f4eee5 !important;
}
.detail-visual::before,
.detail-visual::after{
    display:none !important;
}
.detail-visual-content{
    display:none !important;
}
.detail-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
@media (max-width: 700px){
    .detail-visual{
        width:48% !important;
        max-width:190px !important;
        min-width:120px !important;
    }
}
        .detail-visual img{
            width:100% !important;
            height:100% !important;
            object-fit:contain !important;
            display:block !important;
            background:#f4eee5 !important;
        }

    
/* Imagens de ervas: corte quadrado (sem distorção) */
.herb-visual img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
    background:transparent !important;
}
.detail-visual img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
    background:transparent !important;
}
    
    /* Doação (topo + modal) */
    .donate-inline{
        display:flex;
        align-items:center;
        gap:.42rem;
        padding:.34rem;
        border-radius:22px;
        background:
            linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(252,248,242,.86) 100%);
        border:1px solid rgba(176,137,104,.24);
        box-shadow:0 12px 24px rgba(0,0,0,.05);
    }
    .donate-inline .donate-note{
        font-size:.76rem;
        color:#6d503c;
        font-weight:900;
        padding:0 .35rem;
        white-space:nowrap;
        letter-spacing:.04em;
        text-transform:uppercase;
    }
    .donate-inline .button{
        min-height:40px;
        padding:.55rem .82rem;
        border-radius:16px;
        font-weight:950;
        border-color:rgba(176,137,104,.28);
        background:#fff;
    }
    .donate-inline .button:hover{
        border-color:rgba(176,137,104,.48);
        box-shadow:0 10px 18px rgba(176,137,104,.12);
    }
    .modal-backdrop{
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.55);
        display:none;
        align-items:center;
        justify-content:center;
        z-index:90;
        padding:1.2rem;
    }
    .modal-backdrop.is-open{display:flex}
    .modal{
        width:min(820px, 100%);
        background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(252,248,242,.98) 100%);
        border:1px solid rgba(232,221,208,.92);
        border-radius:24px;
        box-shadow:0 24px 68px rgba(0,0,0,.22);
        overflow:hidden;
        position:relative;
    }
    .modal-close{
        position:absolute;
        top:.65rem;
        right:.65rem;
        width:42px;
        height:42px;
        border-radius:999px;
        border:1px solid rgba(232,221,208,.9);
        background:rgba(255,255,255,.9);
        font-size:1.4rem;
        line-height:1;
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .modal-inner{
        padding:1.15rem 1.2rem 1.2rem;
        display:grid;
        grid-template-columns:1.15fr .85fr;
        gap:1rem;
    }
    .modal h3{
        margin:.2rem 0 .35rem;
        letter-spacing:-.01em;
        font-size:1.18rem;
    }
    .modal p{
        margin:.25rem 0 .7rem;
        color:var(--muted);
        line-height:1.55;
        font-size:.95rem;
    }
    .qr-wrap{
        border-radius:18px;
        border:1px solid rgba(232,221,208,.92);
        background:rgba(255,255,255,.9);
        padding:.75rem;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .qr-wrap img{
        width:100%;
        max-width:260px;
        height:auto;
    }
    .qr-caption{
        margin-top:.55rem;
        text-align:center;
        color:var(--muted);
        font-size:.86rem;
        font-weight:800;
        letter-spacing:.01em;
    }
    @media (max-width: 720px){
        .modal-inner{grid-template-columns:1fr}
        .qr-wrap img{max-width:320px}
    }


        /* PWA install + navegação inferior (mobile) */
        .pwa-install{ display:none !important; }
        @media (max-width: 860px) and (pointer: coarse){
            .pwa-install.is-visible{ display:inline-flex !important; }
        }

        .app-bottom-nav{ display:none; }
        @media (max-width: 860px){
            body{--bottomnav:0px; padding-bottom: 76px; }
            .app-bottom-nav{
                position: fixed;
                left: 10px;
                right: 10px;
                bottom: 10px;
                height: 60px;
                background: rgba(255,255,255,.92);
                backdrop-filter: blur(14px);
                border: 1px solid rgba(232,221,208,.85);
                border-radius: 18px;
                display: grid;
                grid-template-columns: repeat(5, minmax(0, 1fr));
                z-index: 45;
                box-shadow: 0 14px 36px rgba(0,0,0,.10);
                overflow:hidden;
            }
            .app-bottom-nav a{
                display:flex;
                flex-direction:column;
                align-items:center;
                justify-content:center;
                gap:4px;
                min-width:0;
                padding:0 4px;
                font-size: 12px;
                font-weight: 700;
                color: var(--text);
                overflow:hidden;
            }
            .app-bottom-nav a span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 11px; font-weight: 700; }
            .app-bottom-nav a:active{ background: rgba(176,137,104,.10); }
        }


    .bottomnav{
        position:fixed;
        left:0; right:0; bottom:0;
        z-index:70;
        height:64px;
        background:var(--paper);
        border-top:1px solid var(--line);
        display:none;
        padding:8px 10px calc(8px + env(safe-area-inset-bottom));
        gap:8px;
        justify-content:space-around;
        align-items:center;
        box-shadow:0 -14px 26px rgba(0,0,0,.06);
    }
    .bottomnav .bn-item{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        text-decoration:none;
        color:var(--muted);
        background:transparent;
        border:0;
        padding:6px 10px;
        border-radius:12px;
        font-size:12px;
        line-height:1;
        min-width:64px;
        cursor:pointer;
    }
    .bottomnav .bn-ico{ font-size:18px; line-height:1; color:var(--text); opacity:.85; }
    .bottomnav .bn-item.is-active{
        color:var(--text);
        background:var(--soft);
        border:1px solid var(--line);
    }
    @media (max-width: 860px){
        .bottomnav{ display:flex; }
        body.no-sidebar .bottomnav{ display:none; }
        .sidebar{ transform: translateX(calc(-100% - 22px)); position:fixed; top:var(--topbar); left:10px; right:auto; bottom:0; width:min(300px, calc(100vw - 20px)); max-width:calc(100vw - 20px); z-index:80; box-shadow: 18px 0 30px rgba(0,0,0,.12); }
        .sidebar.is-open{ transform: translateX(0); }
        .content{ padding-left:18px; }
    }


    .login-hero{
        display:grid;
        grid-template-columns: 1.25fr .95fr;
        gap: 18px;
        align-items: start;
        margin-top: 6px;
    }
    .login-hero h1{ font-size: clamp(28px, 3.4vw, 44px); letter-spacing:-.02em; margin:.55rem 0 .35rem; }
    .login-hero .lead{ font-size: 16px; color: var(--muted); line-height:1.6; max-width: 60ch; }
    .login-highlights{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin-top: 14px; }
    .login-highlights .mini{ padding: 12px 12px; }
    .login-highlights strong{ display:block; font-size: 14px; }
    .login-highlights span{ display:block; color: var(--muted); font-size: 13px; margin-top: 4px; }
    .login-card{ position: sticky; top: calc(var(--topbar) + 12px); }
    .login-actions{ margin-top: 12px; display:flex; flex-direction:column; gap:10px; }
    .login-footer-card{ margin-top: 16px; }
    @media (max-width: 980px){
        .login-hero{ grid-template-columns: 1fr; }
        .login-card{ position: static; }
        .login-highlights{ grid-template-columns: 1fr; }
    }