* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
       color: #2d1b0e; background: #fffbf5; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* Topbar */
.topbar { background: #d97706; color: #fff; padding: 12px 0; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; }
.brand { color: #fff; text-decoration: none; font-size: 1.2em; }
.topbar nav a { color: #fff; text-decoration: none; margin-left: 16px; }
.topbar nav a:hover { text-decoration: underline; }

/* Main */
.main-content { padding: 32px 16px; min-height: 60vh; }

/* Hero */
.hero { text-align: center; padding: 40px 0; }
.hero h1 { font-size: 2.2em; color: #b45309; margin: 0 0 8px; }

/* Botões */
.btn { display: inline-block; padding: 10px 18px; border-radius: 8px;
       border: 1px solid #d1d5db; background: #fff; color: #374151;
       text-decoration: none; cursor: pointer; font-size: 1em; }
.btn:hover { background: #f3f4f6; }
.btn-primary { background: #d97706; color: #fff; border-color: #d97706; }
.btn-primary:hover { background: #b45309; }
.btn-lg { padding: 14px 28px; font-size: 1.1em; }

/* Categorias */
.categoria { margin: 32px 0; }
.categoria h2 { color: #92400e; border-bottom: 2px solid #fde68a; padding-bottom: 6px; }
.categoria-desc { color: #78716c; }
.grid-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.card-produto { background: #fff; border: 1px solid #fde68a; border-radius: 10px;
                padding: 16px; transition: .2s; }
.card-produto:hover { box-shadow: 0 6px 20px rgba(217,119,6,.15); transform: translateY(-2px); }
.card-produto-nome { font-weight: bold; color: #78350f; margin-bottom: 4px; }
.card-produto-desc { font-size: .9em; color: #78716c; margin-bottom: 8px; }
.card-produto-preco { color: #d97706; font-weight: bold; font-size: 1.1em; }
.unidade { color: #a16207; font-weight: normal; font-size: .85em; }

.empty { color: #a8a29e; font-style: italic; }

/* Formulário */
.form-pedido fieldset { border: 1px solid #fde68a; border-radius: 10px;
                        padding: 16px; margin: 0 0 20px; background: #fff; }
.form-pedido legend { color: #92400e; font-weight: bold; padding: 0 8px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.form-pedido label { display: block; font-size: .9em; color: #57534e; }
.form-pedido input, .form-pedido select, .form-pedido textarea {
    width: 100%; padding: 8px 10px; border: 1px solid #d6d3d1;
    border-radius: 6px; font-size: 1em; margin-top: 4px;
}
.form-pedido textarea { font-family: inherit; }

.tabela-itens { width: 100%; border-collapse: collapse; margin: 8px 0; }
.tabela-itens th, .tabela-itens td { padding: 8px; border-bottom: 1px solid #f3f4f6; text-align: left; }
.tabela-itens th { background: #fef3c7; color: #78350f; }
.input-qtd { width: 70px; }
.mini { font-size: .8em; color: #a8a29e; }
.total-linha { text-align: right; font-size: 1.1em; }

.form-acoes { text-align: center; margin-top: 20px; }

/* Alertas */
.alerta { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; }
.alerta-erro { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Avisos */
.aviso-pix { background: #fef3c7; border-left: 4px solid #d97706; padding: 12px 16px;
             border-radius: 6px; color: #78350f; }

/* Sucesso */
.sucesso { text-align: center; padding: 32px 0; }
.sucesso h1 { color: #16a34a; }
.numero-pedido { font-size: 2em; font-weight: bold; color: #d97706;
                 padding: 16px; background: #fef3c7; border-radius: 12px;
                 display: inline-block; margin: 16px 0; }
.link-acompanhamento { word-break: break-all; margin: 16px 0; }

/* Acompanhamento */
.status-badge { display: inline-block; padding: 6px 14px; border-radius: 20px;
                color: #fff; font-weight: bold; margin: 8px 0 20px; }

.timeline { list-style: none; padding-left: 0; }
.timeline li { padding: 12px 16px; border-left: 3px solid #fde68a; margin-bottom: 8px;
               background: #fff; border-radius: 0 8px 8px 0; }
.timeline .data { color: #a8a29e; font-size: .85em; margin-left: 8px; }
.timeline .obs { color: #57534e; font-size: .9em; margin-top: 4px; }

/* Footer */
.footer { background: #78350f; color: #fef3c7; text-align: center;
          padding: 16px 0; margin-top: 40px; font-size: .9em; }

/* Responsivo */
@media (max-width: 600px) {
    .hero h1 { font-size: 1.6em; }
    .topbar-inner { flex-direction: column; gap: 8px; }
}