:root {
    --bg: #12100c;
    --bg-2: #1b1813;
    --card: #221e18;
    --line: rgba(243, 232, 210, 0.1);
    --ink: #f6f0e6;
    --muted: #b3a794;
    --accent: #e2a15a;
    --accent-2: #7dbe86;
    --warn: #e07a4c;
    --danger: #d46060;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    --radius: 22px;
    --font: "Outfit", "Segoe UI", sans-serif;
    --display: "Fraunces", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    background:
        radial-gradient(900px 420px at 10% -10%, rgba(226, 161, 90, 0.16), transparent 50%),
        var(--bg);
    color: var(--ink);
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 560; letter-spacing: -0.03em; margin: 0; }
.eyebrow { margin: 0 0 4px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; }
.muted, small { color: var(--muted); }
.shell { display: block; }
.sidebar { display: none; }
.main { padding: 22px 18px 108px; max-width: 980px; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 18px; }
.topbar h1 { font-size: 34px; }
.ghost, .btn {
    border: 0; border-radius: 999px; padding: 12px 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.btn { background: var(--accent); color: #23180d; font-weight: 650; }
.ghost { background: transparent; border: 1px solid var(--line); }
.flash { padding: 12px 14px; border-radius: 16px; margin-bottom: 14px; background: #2a241c; }
.flash-ok { outline: 1px solid rgba(125, 190, 134, 0.5); }
.flash-erro { outline: 1px solid rgba(212, 96, 96, 0.6); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat, .panel, .product, .auth-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%), var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.stat { padding: 16px; min-height: 124px; }
.stat span, .stat small { display: block; color: var(--muted); }
.stat strong { display: block; margin: 8px 0 4px; font-family: var(--display); font-size: 28px; }
.stat.accent { background: #2a2118; }
.stat.warn strong { color: var(--warn); }
.panel { padding: 16px; margin-top: 14px; }
.panel-head, .form-actions, .side-user { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.panel-head a { color: var(--accent); }
.meter { height: 10px; border-radius: 99px; background: #12100c; overflow: hidden; margin: 12px 0; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.cats { display: grid; gap: 10px; }
.cat { display: block; padding: 12px; border-radius: 18px; background: #191610; }
.cat div { display: flex; justify-content: space-between; gap: 8px; }
.cat strong { font-family: var(--display); font-size: 22px; }
.bar { height: 6px; background: #12100c; border-radius: 99px; margin: 8px 0; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }
.cat-limpeza .bar i, .dot.cat-limpeza { background: #7eb8c4; }
.cat-higiene .bar i, .dot.cat-higiene { background: #b7a4d6; }
.cat-casa .bar i, .dot.cat-casa { background: #d2b48c; }
.cat-alimentacao .bar i, .dot.cat-alimentacao { background: var(--accent); }
.total-line { text-align: right; font-size: 18px; }
.rows { display: grid; gap: 8px; }
.row, .buy-row {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
    padding: 12px; border-radius: 16px; background: #191610;
}
.row strong, .buy-row strong, .product h3 { display: block; }
.row small, .buy-row small, .product p { color: var(--muted); }
.row em, .buy-row em { font-style: normal; color: var(--accent); }
.dot { width: 10px; height: 10px; border-radius: 99px; background: var(--accent); }
.quick { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.quick a { padding: 14px; border-radius: 16px; background: #2a2118; text-align: center; }
.period-bar form, .chips { display: flex; gap: 8px; overflow: auto; padding-bottom: 4px; }
.period-bar { margin-bottom: 14px; }
.period-bar span { align-self: center; color: var(--muted); white-space: nowrap; }
.period-bar button, .chips a {
    border: 1px solid var(--line); background: transparent; color: var(--ink);
    border-radius: 999px; padding: 8px 12px; white-space: nowrap;
}
.period-bar button.on, .chips a.on { background: var(--ink); color: #1b140d; }
.chips { margin-bottom: 12px; }
.cards { grid-template-columns: 1fr; }
.product { padding: 16px; }
.product footer { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 10px; }
.tag { font-size: 12px; padding: 4px 8px; border-radius: 99px; background: #143024; color: var(--accent-2); }
.tag.warn, .tag.consumo { background: #3a241c; color: var(--warn); }
.tag.compra { background: #143024; color: var(--accent-2); }
.tag.ajuste { background: #2a261c; color: var(--accent); }
.form-grid, .stack { display: grid; gap: 12px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
input, select {
    width: 100%; background: #12100c; border: 1px solid var(--line); border-radius: 14px; padding: 12px;
}
.check { display: flex; gap: 8px; align-items: center; }
.check input { width: auto; }
.formula { color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.span-2 { grid-column: 1 / -1; }
.group { margin: 16px 0 8px; font-size: 20px; }
.buy-row { grid-template-columns: auto 1fr 84px; }
.buy-row em { grid-column: 2 / -1; }
.qty { padding: 8px; }
.inline-danger { margin-top: 12px; }
.inline-danger button { background: transparent; color: var(--danger); border: 0; padding: 8px 0; }
.auth-body { display: grid; place-items: center; padding: 24px 16px; }
.auth-card { width: min(520px, 100%); padding: 28px 22px; }
.auth-card h1 { font-size: 48px; }
.lead { color: var(--muted); }
@media (min-width: 860px) {
    .shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
    .sidebar {
        display: flex; flex-direction: column; gap: 18px; padding: 22px 16px;
        border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh;
    }
    .brand { display: flex; gap: 10px; align-items: center; }
    .brand-mark {
        width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px;
        background: var(--accent); color: #23180d; font-family: var(--display); font-size: 24px;
    }
    .brand small, .side-user { color: var(--muted); }
    .side-nav { display: grid; gap: 4px; }
    .side-nav a { padding: 10px 12px; border-radius: 12px; color: var(--muted); }
    .side-nav a.active, .side-nav a:hover { background: #2a241c; color: var(--ink); }
    .side-user { margin-top: auto; }
        .main { padding: 28px 32px 48px; }
    .stats, .cards { grid-template-columns: 1fr 1fr; }
    .cats { grid-template-columns: 1fr 1fr; }
    .quick { grid-template-columns: repeat(3, 1fr); }
    .buy-row { grid-template-columns: auto 1fr 90px auto; }
    .buy-row em { grid-column: auto; }
}
@media print {
    .sidebar, .topbar .ghost, .period-bar, .print-hide { display: none !important; }
    body { background: white; color: black; }
    .panel, .row, .buy-row { box-shadow: none; }
}
.top-actions{display:flex;gap:10px;align-items:center}.top-actions button{font:inherit;cursor:pointer;border:0}.top-actions button[hidden]{display:none}
@media(max-width:720px){.top-actions .ghost{padding:9px 10px}.top-actions #install-app{display:none}.top-actions #install-app:not([hidden]){display:inline-block}}

/* Camada visual adicional para instalação pelo Chrome */
.brand strong{font-size:18px;display:block}.brand small{display:block;margin-top:2px}.topbar{position:relative}.panel h2{font-size:23px}.stat{transition:transform .18s ease,border-color .18s ease}.stat:hover,.cat:hover,.row:hover,.quick a:hover{transform:translateY(-2px);border-color:rgba(226,161,90,.28)}.quick a{border:1px solid var(--line);transition:.18s ease}.auth-card .btn{width:100%;min-height:48px}.auth-card input,.auth-card select{min-height:46px}.panel-head h2{line-height:1.1}.top-actions .ghost{white-space:nowrap}

/* Barra principal fixa e arrastável */
.menu-strip{position:sticky;top:0;z-index:50;margin: -22px -18px 18px;padding:10px 14px;background:rgba(15,14,23,.92);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.09);border-radius:0 0 28px 28px;box-shadow:0 14px 34px rgba(0,0,0,.22);overflow:hidden;user-select:none}
.menu-track{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;touch-action:pan-x;scroll-behavior:smooth}
.menu-track::-webkit-scrollbar{display:none}.menu-track.dragging{cursor:grabbing;scroll-behavior:auto}
.menu-item{flex:0 0 auto;min-width:116px;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:22px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.035);color:#c7c4cf;font-weight:650;transition:.18s ease}
.menu-item:hover,.menu-item.active{background:rgba(255,255,255,.11);color:#fff;border-color:rgba(255,255,255,.14);transform:translateY(-1px)}
.menu-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.06);flex:0 0 34px}.menu-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.navigation-panel{padding:18px}.dashboard-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.dashboard-action{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:13px;border-radius:18px;background:#191721;border:1px solid rgba(255,255,255,.07);transition:.18s ease}.dashboard-action:hover{transform:translateY(-2px);border-color:rgba(226,161,90,.35)}.dashboard-action strong,.dashboard-action small{display:block}.dashboard-action small{margin-top:3px;color:var(--muted);font-size:11px}.dashboard-action b{font-size:24px;color:var(--muted)}.action-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.06);font-size:23px}.action-alimentacao .action-icon{background:rgba(226,161,90,.14)}.action-limpeza .action-icon{background:rgba(126,184,196,.14)}.action-higiene .action-icon{background:rgba(183,164,214,.14)}.action-casa .action-icon{background:rgba(210,180,140,.14)}
.buy-row{transition:.18s ease;border:1px solid transparent;cursor:pointer}.buy-row.picked{background:linear-gradient(90deg,rgba(65,165,105,.20),rgba(65,165,105,.07));border-color:rgba(92,201,130,.42)}.buy-row.picked .buy-check{accent-color:#56bd79}.buy-row:not(.picked){background:#191610}.picked-label{display:none;color:#65d48b;font-weight:700;margin-right:5px}.buy-row.picked .picked-label{display:inline}.delete-form{margin:0}.delete-btn{border:0;background:transparent;color:#ff8585;cursor:pointer;font-size:17px;padding:7px;border-radius:10px}.delete-btn:hover{background:rgba(212,96,96,.12)}.danger-actions{margin-top:10px;padding:12px 14px;border:1px solid rgba(212,96,96,.2);border-radius:16px;background:rgba(212,96,96,.05)}
@media(max-width:859px){.main{padding-top:12px}.menu-strip{margin:-12px -18px 16px;border-radius:0 0 24px 24px}.dashboard-actions{grid-template-columns:1fr}.menu-item{min-width:126px}.menu-track{padding:2px 1px 3px}}
@media(min-width:860px){.main{padding-top:22px}.menu-strip{margin:-22px -32px 22px;padding-left:22px;padding-right:22px;border-radius:0 0 28px 28px}.menu-item{min-width:140px;padding:13px 18px}.sidebar{display:none}.shell{display:block}.dashboard-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}

.buy-list{display:grid;gap:8px}.buy-row.picked{order:999}.buy-row{will-change:order}.user-list .user-row{min-height:68px}.user-row small{display:block}.user-row .delete-btn{margin-left:auto}.user-list{gap:6px}
.offline-pill{position:fixed;right:12px;bottom:14px;z-index:30;padding:6px 10px;border-radius:99px;background:rgba(49,120,75,.18);border:1px solid rgba(95,202,132,.25);color:#76d996;font-size:11px;font-weight:700;backdrop-filter:blur(10px)}
.offline-pill.offline{background:rgba(180,110,38,.16);border-color:rgba(226,161,90,.28);color:#e2a15a}
@media(min-width:860px){.offline-pill{bottom:14px}}
.alert-list,.activity-list{display:grid;gap:8px}.alert-row,.activity-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;background:#191721;border:1px solid rgba(255,255,255,.06)}.alert-row.warn{border-color:rgba(226,161,90,.2)}.alert-row.danger{border-color:rgba(230,100,100,.22)}.activity-row small{display:block;color:var(--muted);margin-top:3px}.activity-row em{margin-left:auto;font-style:normal;font-weight:700}.activity-icon{font-size:20px}.alerts-panel .tag{margin-left:auto}
.feature-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-bottom:14px}.feature-hero{background:linear-gradient(135deg,#1d1913,#241b13)}.feature-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.feature-stats div,.report-cards div{padding:13px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid var(--line)}.feature-stats strong,.report-cards strong{display:block;font-size:22px}.feature-stats small,.report-cards span{color:var(--muted);font-size:11px}.mini-list{display:grid;gap:7px;margin:12px 0}.mini-list>div{padding:10px 12px;border-radius:13px;background:#191610;border:1px solid var(--line)}.mini-list strong,.mini-list small{display:block}.mini-list small{color:var(--muted);margin-top:3px}.report-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.scanner{position:fixed;inset:0;background:#000d;z-index:100;display:grid;place-items:center}.scanner video{width:min(92vw,520px);border-radius:20px;border:3px solid white}@media(max-width:760px){.feature-grid{grid-template-columns:1fr}.feature-stats{grid-template-columns:1fr 1fr 1fr}.report-cards{grid-template-columns:1fr 1fr}}

/* Menu principal no topo: substitui completamente a barra inferior. */
.menu-strip{isolation:isolate;}
.menu-strip::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:rgba(255,255,255,.06);pointer-events:none;}


/* Ajuste final: menu principal fixo na parte inferior e compacto. */
.menu-strip{position:fixed;left:8px;right:8px;bottom:8px;top:auto;z-index:80;margin:0 auto;padding:7px 8px;background:rgba(15,14,23,.94);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.09);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.30);overflow:hidden;user-select:none;max-width:1100px;}
.menu-track{gap:6px;padding:1px 1px 2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;touch-action:pan-x;}
.menu-track.dragging{cursor:grabbing;}
.menu-item{min-width:82px;padding:7px 9px;border-radius:14px;gap:5px;font-size:12px;font-weight:650;}
.menu-icon{width:27px;height:27px;flex-basis:27px;border-radius:9px;}
.menu-icon svg{width:16px;height:16px;}
.main{padding-bottom:92px!important;}
.offline-pill{bottom:82px!important;right:10px;}
@media(min-width:860px){.menu-strip{left:50%;right:auto;transform:translateX(-50%);width:min(92vw,980px);border-radius:20px;padding:7px 10px;}.menu-item{min-width:96px;padding:8px 11px;font-size:12px;}.menu-icon{width:28px;height:28px;flex-basis:28px;}.main{padding-bottom:100px!important;}.offline-pill{bottom:90px!important;}}
@media(max-width:859px){.menu-strip{left:6px;right:6px;bottom:6px;border-radius:18px;}.menu-item{min-width:82px;}.main{padding-bottom:90px!important;}}