@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=Fira+Code:wght@400;500&display=swap');
:root { --primary:#d97706; --primary-hover:#b45309; --brand-dark:#4E342E; --brand-light:#8D6E63; --brand-bg:#efebe9; --bg-color:#fafaf9; --card-bg:#ffffff; --text-main:#292524; --text-muted:#78716c; --border-color:#e7e5e4; --tab-active:#d97706; --green-profit:#10b981; }

body { font-family:'Inter', sans-serif; background:var(--bg-color); margin:0; padding:0; padding-bottom:120px; min-height:100vh; box-sizing:border-box; }

#login-screen { position:fixed; top:0; left:0; width:100%; height:100%; background:var(--brand-dark); display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:9999; padding:20px; box-sizing:border-box;}
.login-box { background:var(--card-bg); padding:40px 30px; border-radius:24px; text-align:center; width:100%; max-width:350px; box-shadow:0 25px 50px rgba(0,0,0,0.4); animation:popIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275);}
.login-box img { width:120px; margin-bottom:20px; filter:drop-shadow(0 4px 6px rgba(0,0,0,0.1)); border-radius:15px;}
.login-box h2 { color:var(--brand-dark); font-weight:900; margin:0 0 5px; font-size:1.5rem;}
.login-box p { color:var(--text-muted); font-size:0.85rem; margin-bottom:25px; font-weight:600;}
.login-input { width:100%; padding:16px; border:2px solid var(--border-color); border-radius:12px; font-family:'Inter', sans-serif; font-size:1.1rem; text-align:center; margin-bottom:20px; box-sizing:border-box; font-weight:700; letter-spacing:2px; }
.login-input:focus { border-color:var(--primary); outline:none; background:#fffbeb;}

#app-core { display:none; width:100%; max-width:700px; margin: 0 auto; padding:20px; position: relative;}
.admin-card { background:var(--card-bg); width:100%; padding:35px; border-radius:24px; box-shadow:0 20px 40px rgba(78,52,46,0.08); box-sizing:border-box; }
.brand-header { text-align:center; margin-bottom:25px; padding-bottom:20px; border-bottom:2px dashed var(--border-color); position:relative;}
.brand-header img { width:120px !important; max-width:120px !important; height:auto !important; margin-bottom:12px; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.08)); border-radius:12px;}
.brand-header h1 { margin:0; color:var(--brand-dark); font-size:1.5rem; font-weight:900; letter-spacing:-0.5px; }
.brand-header p { margin:5px 0 0; color:var(--brand-light); font-size:0.9rem; font-weight:600; }
.btn-logout { position:absolute; top:0; right:0; background:#fee2e2; color:#991b1b; border:none; padding:8px 12px; border-radius:8px; font-size:0.7rem; font-weight:800; cursor:pointer;}

.tabs-container { display:flex; gap:12px; margin-bottom:25px; padding:0; flex-wrap:wrap; justify-content: center; background: transparent; }
.tab-btn { flex:1; min-width:120px; padding:14px 10px; text-align:center; font-weight:800; font-size:0.8rem; border-radius:12px; cursor:pointer; transition:all 0.2s ease; border:1px solid var(--border-color); background:var(--card-bg); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; box-shadow:0 4px 6px rgba(0,0,0,0.02);}
.tab-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); box-shadow:0 6px 12px rgba(217,119,6,0.1); }
.tab-btn.active { background:var(--primary); color:#ffffff; border-color:var(--primary-hover); box-shadow:0 8px 20px rgba(217,119,6,0.35); transform: translateY(-3px); }

.divisor-erp { width:100%; text-align:center; font-size:0.75rem; font-weight:900; color:var(--text-muted); margin:15px 0; position: relative; display: flex; align-items: center; justify-content: center; text-transform:uppercase; letter-spacing:1px;}
.divisor-erp::before, .divisor-erp::after { content: ""; flex: 1; border-bottom: 2px dashed var(--border-color); margin: 0 15px; }

.tab-content { display:none; animation:fadeIn 0.3s ease; } .tab-content.active { display:block; }
.titulo-wrapper { text-align: center; margin-bottom: 25px; position: sticky; top: 0; z-index: 9900; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 15px 0; border-radius: 0 0 16px 16px; border-bottom: 1px solid rgba(0,0,0,0.08); }
#titulo-modulo-ativo { display: inline-block; font-size:0.75rem; font-weight:900; color:var(--primary); text-transform:uppercase; letter-spacing: 1.5px; background: #fffbeb; padding: 8px 18px; border-radius: 20px; border: 1px solid #fde68a; box-shadow: 0 4px 10px rgba(217,119,6,0.15); }

.section-title { font-size:0.95rem; color:var(--brand-dark); font-weight:900; margin:25px 0 12px; display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:0.5px; border-left:4px solid var(--primary); padding-left:10px;}
.input-group { margin-bottom:15px; } label { font-weight:700; color:var(--text-muted); display:block; margin-bottom:6px; font-size:0.8rem; text-transform:uppercase;}
select, input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"], textarea { width:100%; padding:12px 14px; border:2px solid var(--border-color); border-radius:12px; font-family:'Inter', sans-serif; font-size:0.95rem; color:var(--text-main); box-sizing:border-box; background:#fafaf9; transition:all 0.3s ease; font-weight:500;}
textarea { resize:vertical; min-height:80px; } select:focus, input:focus, textarea:focus { border-color:var(--primary); outline:none; background:#fff; box-shadow:0 0 0 4px rgba(245,158,11,0.15); }
input[type="file"] { background:#fff; border:2px dashed var(--border-color); padding:15px; text-align:center; cursor:pointer; color:var(--text-muted); font-weight:600; width:100%; box-sizing:border-box; font-size:0.8rem;}
.input-var { background-color:#fffbeb !important; border-color:#fde68a !important; font-weight:700 !important; } .input-var:focus { background-color:#fef3c7 !important; border-color:var(--primary) !important; }
.search-bar { background:#fff; border:2px solid var(--primary); box-shadow:0 4px 15px rgba(217,119,6,0.1); margin-bottom:15px; padding:12px 16px; font-weight:700;}
.row { display:flex; gap:15px; } .col { flex:1; }
.badges-container { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; } .badge { font-size:0.7rem; font-weight:700; padding:6px 10px; border-radius:20px; display:flex; align-items:center; gap:6px;} .badge-blue { background:#e0f2fe; color:#0369a1; border:1px solid #bae6fd;} .badge-green { background:#dcfce7; color:#047857; border:1px solid #a7f3d0;}

.btn-magic { width:100%; border:none; padding:15px; border-radius:14px; font-weight:900; font-size:0.95rem; cursor:pointer; transition:all 0.2s ease; display:flex; justify-content:center; align-items:center; gap:10px; background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color:white; margin-top:15px; box-shadow:0 6px 15px rgba(217,119,6,0.3); text-transform:uppercase; letter-spacing:1px; }
.btn-magic:active { transform:translateY(3px); box-shadow:0 2px 5px rgba(217,119,6,0.3); } .btn-magic:disabled { background:#d6d3d1; cursor:not-allowed; box-shadow:none; color:#a8a29e; transform:none; }
.btn-global { background:linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow:0 6px 15px rgba(16,185,129,0.3); margin-top:10px; }
.btn-analise { background:linear-gradient(135deg, #4E342E 0%, #3E2723 100%); box-shadow:0 6px 15px rgba(78,52,46,0.3); margin-top:10px;}
.btn-excluir { background:#fef2f2; border:2px solid #fecaca; color:#b91c1c; box-shadow:none; }
.btn-limpar { background:#f1f5f9; color:#475569; border:1px solid #cbd5e1; padding:8px 12px; border-radius:8px; font-size:0.75rem; font-weight:800; cursor:pointer; transition:0.2s; text-transform:uppercase;} .btn-limpar:active { background:#e2e8f0; transform:translateY(2px);}

.log-container { background:#292524; border-radius:14px; padding:15px; margin-top:20px; height:180px; overflow-y:auto; font-family:'Fira Code', monospace; font-size:0.75rem; box-shadow:inset 0 4px 6px rgba(0,0,0,0.3); line-height:1.5; border: 1px solid #4E342E; }
.log-container::-webkit-scrollbar { width:6px; } .log-container::-webkit-scrollbar-thumb { background:#78716c; border-radius:10px; }
.log-line { margin:5px 0; border-bottom:1px dashed #44403c; padding-bottom:5px; word-wrap:break-word;} .log-time { color:#a8a29e; margin-right:8px;} .log-info { color:#38bdf8; } .log-warn { color:#facc15; } .log-error { color:#ef4444; } .log-success { color:#10b981; font-weight:500;}

.resumo-box { background:var(--brand-dark); color:white; padding:20px; border-radius:16px; margin-bottom:20px; box-shadow:0 10px 20px rgba(78,52,46,0.15);} .resumo-box h3 { margin:0 0 15px; font-weight:900; font-size:1.1rem; color:var(--primary); text-transform:uppercase;}
.custo-linha { display:flex; justify-content:space-between; margin-bottom:8px; font-size:0.85rem; font-weight:600; color:#d6d3d1; border-bottom:1px dashed #78716c; padding-bottom:5px;} .custo-total { display:flex; justify-content:space-between; margin-top:15px; font-size:1.2rem; font-weight:900; color:white; background:rgba(255,255,255,0.1); padding:10px; border-radius:8px;}
.markup-box { background:#f0fdf4; border:2px solid #bbf7d0; padding:15px; border-radius:12px; margin-bottom:15px;} .markup-title { color:#166534; font-weight:900; font-size:0.9rem; margin:0 0 10px; text-transform:uppercase;} .markup-preco { font-size:1.3rem; font-weight:900; color:var(--text-main); margin:0;} .markup-lucro { font-size:0.8rem; font-weight:800; color:var(--green-profit); margin-top:5px;}
.filtros-box { background:var(--card-bg); border:2px solid var(--border-color); padding:15px; border-radius:16px; margin-bottom:20px; box-shadow:0 4px 15px rgba(0,0,0,0.02);} .filtros-title { font-size:0.8rem; font-weight:800; color:var(--brand-dark); text-transform:uppercase; margin-bottom:15px; display:flex; align-items:center; gap:6px;} .btn-filtro { background:var(--brand-dark); color:white; border:none; padding:12px; border-radius:10px; font-weight:800; cursor:pointer; width:100%; transition:0.2s; text-transform:uppercase; letter-spacing:1px; margin-top:10px;}
.dash-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;} .dash-card { background:#ffffff; border:1px solid var(--border-color); border-radius:14px; padding:15px; text-align:center; box-shadow:0 4px 10px rgba(78,52,46,0.04);} .dash-card h3 { margin:0 0 5px; font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:800;} .dash-card .valor { font-size:2.2rem; font-weight:900; color:var(--brand-dark); line-height:1;} .dash-card .sub-valor { font-size:0.7rem; color:var(--text-muted); margin-top:5px; display:block; font-weight:600;}
.ranking-list { background:#fff; border:1px solid var(--border-color); border-radius:14px; padding:10px 15px; margin-bottom:20px; box-shadow:0 4px 10px rgba(78,52,46,0.04);} .ranking-item { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #f5f5f4;} .ranking-item:last-child { border-bottom:none; } .ranking-nome { display:flex; align-items:center; gap:10px; font-weight:900; font-size:0.9rem; width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .ranking-nome img { width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));} .progresso-bg { flex-grow:1; height:8px; background:#f5f5f4; border-radius:4px; margin:0 10px; overflow:hidden;} .progresso-bar { height:100%; border-radius:4px; transition:width 1s ease-in-out;} .ranking-valor { font-weight:900; font-size:1rem; width:40px; text-align:right;} .chart-box { background:#fff; border:1px solid var(--border-color); border-radius:14px; padding:15px; width:100%; box-sizing:border-box; box-shadow:0 4px 10px rgba(78,52,46,0.04);}

.txt-corinthians{color:#000} .txt-palmeiras{color:#006400} .txt-santos{color:#555} .txt-saopaulo{color:#cc0000} .txt-flamengo{color:#c90000}

/* ========================================================================= */
/* TRAVA ABSOLUTA DE TAMANHO NA LISTA DE IMAGENS (CATÁLOGO, ÍMÃS E ANÚNCIOS) */
/* ========================================================================= */
.list-item { display:flex; align-items:center; padding:12px; border:1px solid var(--border-color); border-radius:14px; margin-bottom:12px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.02);} 
.list-img { 
    width: 50px !important; 
    height: 50px !important; 
    min-width: 50px !important; 
    max-width: 50px !important; 
    object-fit: cover !important; 
    border-radius: 8px !important; 
    margin-right: 12px !important; 
    background: #f5f5f4 !important; 
    border: 1px solid #e7e5e4 !important; 
    flex-shrink: 0 !important;
} 
.list-info { flex-grow:1; overflow:hidden;} .list-nome { font-weight:800; color:var(--brand-dark); font-size:0.9rem; margin:0 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .list-detalhes { font-size:0.75rem; color:var(--text-muted); font-weight:600; display:flex; gap:6px; align-items:center; flex-wrap:wrap;} .tag-ativo { background:#dcfce7; color:#166534; padding:2px 6px; border-radius:4px; font-size:0.65rem; text-transform:uppercase; font-weight:800;} .tag-pendente { background:#fef08a; color:#854d0e; padding:2px 6px; border-radius:4px; font-size:0.65rem; text-transform:uppercase; font-weight:800;} .tag-inativo { background:#fee2e2; color:#991b1b; padding:2px 6px; border-radius:4px; font-size:0.65rem; text-transform:uppercase; font-weight:800;} .btn-editar { background:#f1f5f9; border:1px solid #cbd5e1; color:#334155; padding:8px 12px; border-radius:8px; font-weight:800; font-size:0.8rem; cursor:pointer; flex-shrink:0;} .btn-zap-lista { background:#25D366; color:white; padding:8px; border-radius:8px; text-decoration:none; margin-right:8px; display:inline-flex; flex-shrink:0;}

.produto-banco-card { background:#fff; border:1px solid var(--border-color); padding:12px 15px; border-radius:12px; margin-bottom:12px; display:flex; flex-direction:column; box-shadow:0 2px 5px rgba(0,0,0,0.03);} 
.card-row-top { display:flex; justify-content:space-between; align-items:flex-start; width:100%;} 
.pb-info { flex-grow:1; overflow:hidden; padding-right:10px;} 
.pb-nome { margin:0 0 6px; font-size:0.95rem; font-weight:900; color:var(--brand-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 
.pb-detalhes { font-size:0.75rem; color:var(--text-muted); font-weight:600; display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px;} 
.pb-custo { font-size:1.1rem; font-weight:900; color:var(--primary); background:#fffbeb; padding:8px 12px; border-radius:10px; border:1px solid #fde68a; flex-shrink:0; text-align:center;} 
.card-pendente { border:2px solid #fde68a; background:#fffbeb; } 

.acoes-venda-box { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.btn-novera { border: 1px solid var(--border-color); border-radius: 8px; width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.04); background: #fff; }
.btn-novera:active { transform: scale(0.9); }
.btn-n-cobranca { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.btn-n-recibo { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.btn-n-baixa { border-color: #a7f3d0; background: #dcfce7; color: #047857; }
.btn-n-editar { border-color: #cbd5e1; background: #f8fafc; color: #475569; }
.btn-n-apagar { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }

/* ESTILOS PLATAFORMA DE VENDAS */
.plat-item { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #e2e8f0; padding: 12px; border-radius: 10px; margin-bottom: 8px; }
.plat-info strong { color: var(--brand-dark); font-size: 0.9rem; display: block; margin-bottom: 2px;}
.plat-info span { color: var(--text-muted); font-size: 0.75rem; font-weight: 600;}

.scroll-container { max-height:450px; overflow-y:auto; padding-right:5px; margin-top:10px; } .scroll-container::-webkit-scrollbar { width:6px; } .scroll-container::-webkit-scrollbar-track { background:transparent; } .scroll-container::-webkit-scrollbar-thumb { background:var(--border-color); border-radius:10px; }

.modal-overlay, .modal-overlay-alert { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); display:none; justify-content:center; align-items:center; z-index:10000; backdrop-filter:blur(3px); animation:fadeIn 0.2s ease;}
.modal-box { background:#fff; width:92%; max-width:450px; border-radius:20px; padding:20px; box-shadow:0 20px 40px rgba(0,0,0,0.3); animation:popIn 0.3s ease-out; position:relative; max-height:90vh; overflow-y:auto;} .btn-fechar-modal { position:absolute; top:12px; right:12px; background:#f1f5f9; border:none; width:30px; height:30px; border-radius:50%; font-size:1.1rem; font-weight:bold; color:#64748b; cursor:pointer; display:flex; align-items:center; justify-content:center;} .modal-title { font-size:1.1rem; font-weight:900; color:var(--brand-dark); margin:0 0 15px;} 
.modal-box-alert { background:#fff; width:90%; max-width:360px; border-radius:24px; padding:30px 20px 20px; text-align:center; box-shadow:0 20px 40px rgba(0,0,0,0.3); animation:popIn 0.3s ease-out; position:relative;} .modal-icon-alert { font-size:4rem; margin-bottom:10px; display:inline-block; animation:pulseIcon 1s infinite alternate;} .modal-title-alert { font-size:1.3rem; font-weight:900; color:var(--brand-dark); margin:0 0 10px; text-transform:uppercase;} .modal-text-alert { font-size:0.9rem; color:var(--text-muted); margin-bottom:25px; line-height:1.4; font-weight:600;} .btn-modal-ok { color:white; border:none; padding:15px; border-radius:12px; width:100%; cursor:pointer; font-weight:900; font-size:0.95rem; text-transform:uppercase; transition:transform 0.1s;} .btn-modal-ok:active { transform:translateY(4px); box-shadow:0 0 0 transparent !important; } .btn-modal-cancel { flex:1; background:#f1f5f9; color:#475569; border:1px solid #cbd5e1; padding:15px; border-radius:12px; cursor:pointer; font-weight:800; font-size:0.90rem; text-transform:uppercase; transition:0.2s;} .btn-modal-cancel:active { background:#e2e8f0; } .btn-modal-confirm { flex:1; background:#10b981; color:white; border:none; padding:15px; border-radius:12px; cursor:pointer; font-weight:900; font-size:0.90rem; text-transform:uppercase; transition:transform 0.1s; box-shadow:0 6px 0 #059669;} .btn-modal-confirm:active { transform:translateY(4px); box-shadow:0 0 0 transparent !important; }

.fab-btn {
    position: fixed;
    bottom: 30px;
    right: 20px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.5rem;
    border: none;
    box-shadow: 0 8px 25px rgba(217,119,6,0.5);
    cursor: pointer;
    z-index: 9900;
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fab-btn:active { transform: scale(0.9); box-shadow: 0 4px 10px rgba(217,119,6,0.5); }

.lote-item { display: flex; align-items: flex-start; padding: 12px; background: #fafaf9; border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 8px; gap: 10px; }
.lote-check { width: 22px; height: 22px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; margin: 0; margin-top: 2px;}
.lote-input-nome { border: 1px solid #d6d3d1; border-radius: 6px; padding: 10px; font-weight: 800; color: var(--brand-dark); font-size: 0.9rem; width: 100%; margin-bottom: 8px; font-family: 'Inter', sans-serif; transition: 0.2s; background: #ffffff;}
.lote-input-nome:focus { outline: none; border-color: var(--primary); background: #fffbeb; box-shadow: 0 0 0 3px rgba(217,119,6,0.15);}

.grid-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 10px 0; }
.grid-menu button { background: #ffffff; border: 2px solid #f5f5f4; padding: 22px 10px; border-radius: 18px; font-weight: 800; color: var(--brand-dark); font-size: 0.85rem; cursor: pointer; box-shadow: 0 8px 16px rgba(78,52,46,0.06); display: flex; flex-direction: column; align-items: center; gap: 12px; transition: all 0.2s ease; }
.grid-menu button span.icon { font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
.grid-menu button:active { transform: translateY(4px) scale(0.98); box-shadow: 0 2px 4px rgba(78,52,46,0.06); border-color: var(--primary); }

.bottom-nav { display: none; }

@keyframes fadeIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } } @keyframes popIn { 0% { transform:scale(0.9); opacity:0; } 100% { transform:scale(1); opacity:1; } } @keyframes pulseIcon { 0% { transform:scale(1); } 100% { transform:scale(1.1); } }

@media (max-width:600px) { 
    body { padding-bottom: 100px; } 
    #app-core { padding: 0; }
    .admin-card { padding: 20px 15px; border-radius: 0; min-height: 100vh; border: none; box-shadow: none; } 
    .brand-header { margin-bottom:15px; padding-bottom:15px; } 
    .mobile-menu-btn { display:none !important; } 
    .tabs-container { display:none !important; } 
    .row { flex-direction:column; gap:0; } 
    .input-group { margin-bottom:12px; } 
    .dash-cards { grid-template-columns:1fr; gap:10px;} 
    .progresso-bg { display:none; } 
    .ranking-nome { width:auto; flex-grow:1;} 
    
    .titulo-wrapper { position: sticky; top: 0; margin-left: -15px; margin-right: -15px; margin-top: -20px; padding: 15px; border-radius: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.05); z-index: 9900; }
    .fab-btn { bottom: 100px; right: 15px; width: 56px; height: 56px; }
    
    .bottom-nav { 
        display: flex; position: fixed; bottom: 0; left: 0; width: 100%; 
        background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
        box-shadow: 0 -5px 25px rgba(0,0,0,0.08); 
        justify-content: space-around; padding: 10px 5px 20px 5px; z-index: 9999; 
        border-top: 1px solid rgba(0,0,0,0.05);
    }
    .bottom-nav-btn { 
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; 
        background: transparent; border: none; 
        color: var(--text-muted); font-size: 0.65rem; font-weight: 800; gap: 4px; 
        cursor: pointer; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        padding: 8px 0; border-radius: 16px; margin: 0 4px;
    }
    .bottom-nav-btn span.icon { font-size: 1.4rem; margin-bottom: 2px; filter: grayscale(100%) opacity(0.5); transition: 0.3s ease;}
    .bottom-nav-btn.active span.icon { filter: grayscale(0) opacity(1); }
    .bottom-nav-btn.active { background: #fffbeb; color: var(--primary); box-shadow: 0 4px 10px rgba(217,119,6,0.15); transform: translateY(-4px); }
}