/* ==== · Front (Cards, Mobile-first) ==== */
:root{
  --sc-primary:#ff4e63;
  --sc-dark:#3f494e;
  --sc-mid:#676767;
  --sc-bg:#f6f7f9;
  --sc-bg-soft:#ffffff;
  --sc-line:#e9edf0;
  --sc-radius:14px;
  --sc-shadow:0 10px 25px rgba(15,23,42,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--sc-primary);text-decoration:none}
a:hover{opacity:.9}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--sc-dark);
  background:linear-gradient(180deg, #fafbfc 0%, #f5f7f9 100%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Header */
header{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.85); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--sc-line);
  padding:12px 16px; display:flex; align-items:center; gap:12px;
}
header h1{font-size:18px;margin:0}
.mesa-badge{
  margin-left:auto; font-size:12px; color:#fff; background:var(--sc-dark);
  padding:6px 10px; border-radius:999px; white-space:nowrap
}

main{padding:16px; padding-bottom:92px} /* espaço para o menu fixo */

/* Utilities */
.hr{height:1px;background:var(--sc-line);margin:14px 0}
.small{font-size:12px;color:#8a95a0}
.note{color:var(--sc-mid)}
.center{text-align:center}

/* Cards base */
.card{
  background:var(--sc-bg-soft);
  border:1px solid #eef1f4;
  border-radius:var(--sc-radius);
  padding:14px;
  box-shadow:var(--sc-shadow);
  transition:transform .12s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(15,23,42,.08)}
.card-title{margin:0 0 6px; font-weight:700; font-size:16px}
.card-sub{margin:0; color:#6b7380; font-size:13px}

/* Grid responsivo */
.grid{display:grid; gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 1024px){ .grid.cols-4{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 768px){ .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 480px){ .grid,.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr} }

/* Botões */
.btn{
  appearance:none; cursor:pointer; border:0; border-radius:12px;
  padding:10px 14px; font-weight:700; line-height:1; user-select:none;
  box-shadow:var(--sc-shadow); transition:transform .06s ease, filter .15s ease;
}
.btn.primary{background:var(--sc-primary); color:#fff}
.btn.dark{background:var(--sc-dark); color:#fff}
.btn.ghost{background:#fff; color:var(--sc-primary); border:2px solid var(--sc-primary); box-shadow:none}
.btn.muted{background:#f1f3f5; color:#3d4349; box-shadow:none}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:translateY(1px)}

/* Inputs */
input[type="text"], input[type="number"], input[type="password"], textarea, select{
  width:100%; max-width:560px; border-radius:12px; border:1px solid #dfe3e6; background:#fff;
  padding:12px 14px; color:var(--sc-dark); outline:none;
  transition:border .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--sc-primary); box-shadow:0 0 0 4px rgba(255,78,99,.15);
}
label{display:block; margin:.4rem 0 .3rem; font-weight:600; color:#49535b}

/* Títulos de página */
.page-home h2, section h2{margin:4px 0 12px; font-size:20px}

/* Produtos */
.product .card h3{margin:.2rem 0}
.product .actions{display:flex; gap:8px; align-items:center; margin-top:8px}

/* Tabelas simples (se usadas no front) */
table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; background:#fff; border-radius:14px; box-shadow:var(--sc-shadow)}
thead th{background:#f8fafc; border-bottom:1px solid var(--sc-line); padding:12px; font-weight:700; color:#5a6570; text-align:left}
td{padding:12px; border-bottom:1px solid #f1f3f5}
tr:last-child td{border-bottom:0}

/* Drawer carrinho */
#cart-ajax{position:fixed; left:0; right:0; bottom:64px; z-index:25; display:none}
#cart-ajax .card{margin:0 12px}

/* Menu fixo inferior */
#fixed-menu{
  position:fixed; left:12px; right:12px; bottom:12px; height:64px; z-index:40;
  background:#ffffff; border:1px solid var(--sc-line); border-radius:18px;
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center; gap:4px;
  box-shadow:0 18px 40px rgba(15,23,42,.08);
}
#fixed-menu a, #fixed-menu button{
  background:none; border:0; cursor:pointer; font:inherit; color:#2e343a; text-align:center
}
#fixed-menu span{display:block; font-size:11px; color:#707b86; margin-top:2px}

/* Alertas */
.alert{padding:12px 14px; border-radius:12px; font-weight:600}
.alert.ok{background:#e9f9ef; color:#176d46}
.alert.err{background:#fdecef; color:#b00020}

/* QR modal (criamos via JS) */
#qr-reader__scan_region video{border-radius:12px}

/* Pequenos helpers */
.badge{
  display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px;
  background:#eef2f5; color:#44505a
}