:root {
  --cream: #f7f1e6; --teal: #34618a; --teal-soft:#3d6f9c; --terracotta:#a9763f;
  --wheat:#d6b488; --tomato:#c2502f; --ink:#25303a; --muted:#6c6a63; --line:#ddd0ba; --white:#fffdf8;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif:"Playfair Display", Georgia, serif;
}
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: var(--sans); background: var(--cream); color: var(--ink); }
a { color: var(--teal); }

/* The hidden attribute must win over class-level display rules (e.g. .login-wrap{display:grid}),
   otherwise the login view stays visible after sign-in and the panel renders below it. */
[hidden] { display: none !important; }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { background: var(--white); border:1px solid var(--line); border-radius: 18px; padding: 2.4rem; width: min(380px, 100%); box-shadow: 0 20px 50px -25px rgba(0,0,0,.5); text-align:center; }
.login-card .logo-lab { background: var(--terracotta); color:#fff; font-weight:700; padding:.1rem .7rem; border-radius:999px; }
.login-card h1 { font-family: var(--serif); color: var(--teal); margin:.8rem 0 .3rem; }
.login-card p { color: var(--muted); font-size:.9rem; margin-bottom: 1.4rem; }

label { display:block; font-size:.78rem; letter-spacing:.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; font-weight:600; }
input, textarea, select {
  width:100%; font-family: inherit; font-size:.95rem; color: var(--ink);
  background: var(--cream); border:1px solid var(--line); border-radius:10px; padding:.7rem .85rem; transition: border .2s, box-shadow .2s;
}
input:focus, textarea:focus { outline:0; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(224,138,44,.15); }
textarea { resize: vertical; min-height: 88px; }

.btn { display:inline-flex; align-items:center; gap:.5rem; font-family:inherit; font-weight:600; font-size:.9rem; padding:.7rem 1.3rem; border-radius:999px; border:2px solid transparent; cursor:pointer; transition: transform .15s, background .2s, color .2s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--tomato); color:#fff; }
.btn-teal { background: var(--teal); color: var(--cream); }
.btn-ghost { background:transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--teal); }
.btn-sm { padding:.4rem .8rem; font-size:.8rem; }
.btn-danger { background:transparent; border-color:#d99; color:#b3402a; }
.btn-danger:hover { background:#b3402a; color:#fff; border-color:#b3402a; }

/* App shell */
.topbar { position: sticky; top:0; z-index: 20; background: var(--teal); color: var(--cream); padding:.85rem 0; box-shadow: 0 6px 20px -14px #000; }
.topbar-inner { width:min(1080px,94vw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.topbar .brand { font-family: var(--serif); font-size:1.15rem; display:flex; align-items:center; gap:.5rem; }
.topbar .logo-lab { background: var(--terracotta); color:#fff; font-family: var(--sans); font-weight:700; font-size:.8rem; padding:.05rem .55rem; border-radius:999px; }
.topbar-actions { display:flex; gap:.6rem; align-items:center; }

.wrap { width:min(1080px,94vw); margin:1.6rem auto 5rem; }
.tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.4rem; border-bottom:1px solid var(--line); }
.tab { background:none; border:0; border-bottom:3px solid transparent; padding:.7rem 1rem; font-family:inherit; font-weight:600; color: var(--muted); cursor:pointer; font-size:.92rem; }
.tab.active { color: var(--teal); border-bottom-color: var(--terracotta); }

.panel { display:none; }
.panel.active { display:block; animation: fade .25s ease; }
@keyframes fade { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }

.card { background: var(--white); border:1px solid var(--line); border-radius:16px; padding:1.5rem; margin-bottom:1.2rem; box-shadow: 0 10px 30px -24px rgba(0,0,0,.4); }
.card h2 { font-family: var(--serif); color: var(--teal); font-size:1.3rem; margin-bottom:.2rem; }
.card .hint { color: var(--muted); font-size:.85rem; margin-bottom:1.1rem; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { margin-bottom:1rem; }

/* Menu editor */
.cat { border:1px solid var(--line); border-radius:14px; padding:1.1rem; margin-bottom:1rem; background: var(--cream); }
.cat-top { display:flex; gap:.8rem; align-items:flex-end; margin-bottom:.9rem; }
.cat-top .field { flex:1; margin:0; }
.item-row { display:grid; grid-template-columns: 1.4fr .6fr 2.4fr auto; gap:.6rem; align-items:start; margin-bottom:.6rem; background: var(--white); padding:.6rem; border-radius:10px; border:1px solid var(--line); }
.item-row textarea { min-height: 44px; }
.item-row-bi { grid-template-columns: 1fr 1fr .7fr auto; }
.item-row-bi .item-desc-bi { grid-column: span 2; }
.item-row-bi label { font-size:.68rem; }
.row-actions { display:flex; flex-direction:column; gap:.3rem; }

/* Gallery editor */
.gal-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:.9rem; }
.gal-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; background: var(--white); }
.gal-card img { width:100%; height:120px; object-fit: cover; display:block; }
.gal-card .gc-body { padding:.5rem; }
.gal-card input { font-size:.8rem; padding:.4rem .5rem; margin-bottom:.4rem; }
.gal-card .gc-actions { display:flex; gap:.3rem; justify-content:space-between; }
.uploader { border:2px dashed var(--line); border-radius:12px; padding:1.4rem; text-align:center; color: var(--muted); cursor:pointer; transition: border .2s, background .2s; }
.uploader:hover, .uploader.drag { border-color: var(--terracotta); background: #fff8ec; }
.add-row { margin-top:.4rem; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--teal); color: var(--cream); padding:.8rem 1.4rem; border-radius:999px; box-shadow:0 12px 30px -12px rgba(0,0,0,.5); transition: transform .35s ease; z-index:60; font-size:.9rem; }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--tomato); }
.err-msg { color: var(--tomato); font-size:.85rem; margin-top:.6rem; min-height:1em; }
.muted { color: var(--muted); font-size:.85rem; }

/* tab badge */
.tab-badge { display:inline-block; min-width:18px; padding:0 .35rem; margin-left:.2rem; font-size:.7rem; line-height:18px; text-align:center; color:#fff; background: var(--tomato); border-radius:999px; vertical-align:middle; }

/* reservations */
.res-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.res-row { display:flex; gap:1rem; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; border:1px solid var(--line); border-left:4px solid var(--line); border-radius:12px; padding:1rem 1.1rem; margin-bottom:.8rem; background: var(--white); }
.res-row.res-new { border-left-color: var(--tomato); background:#fffaf3; }
.res-row.res-confirmed { border-left-color: var(--teal); }
.res-row.res-done { opacity:.62; }
.res-main { min-width:0; }
.res-when { font-weight:700; color: var(--ink); font-size:1.02rem; }
.res-guests { font-weight:500; color: var(--muted); font-size:.85rem; margin-left:.4rem; }
.res-name { margin-top:.2rem; font-size:.95rem; }
.res-note { margin-top:.3rem; color: var(--ink); font-style:italic; font-size:.88rem; }
.res-meta { margin-top:.4rem; color: var(--muted); font-size:.76rem; }
.res-side { display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; }
.res-badge { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .6rem; border-radius:999px; }
.res-badge-new { background: var(--tomato); color:#fff; }
.res-badge-confirmed { background: var(--teal); color: var(--cream); }
.res-badge-done { background: var(--line); color: var(--ink); }
.res-actions { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end; }
.res-del:hover { border-color: var(--tomato); color: var(--tomato); }

.imgpick { display:flex; gap:.5rem; align-items:center; }
.imgpick img { width:54px; height:54px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }

/* md — tablets */
@media (max-width:720px){
  .grid2 { grid-template-columns:1fr; }
  .item-row { grid-template-columns:1fr 1fr; }
  .item-row textarea, .item-row .row-actions { grid-column:1 / -1; }
  .row-actions { flex-direction:row; }
  .cat-top { flex-wrap:wrap; }
  .cat-top .field { flex:1 1 45%; }
  .topbar-inner { gap:.5rem; }
}

/* sm — phones */
@media (max-width:520px){
  .topbar-inner { flex-wrap:wrap; row-gap:.5rem; }
  .topbar .brand img { height:28px !important; }
  .topbar-actions { width:100%; justify-content:flex-end; flex-wrap:wrap; gap:.4rem; }
  .topbar-actions .btn { padding:.45rem .8rem; font-size:.8rem; }
  .wrap { width:92vw; margin-top:1rem; }
  .tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:.2rem; }
  .tab { padding:.6rem .7rem; font-size:.85rem; white-space:nowrap; }
  .card { padding:1.1rem; border-radius:14px; }
  .item-row { grid-template-columns:1fr; }
  .item-row .row-actions { flex-direction:row; justify-content:flex-end; }
  .gal-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; }
  .gal-card img { height:96px; }
  .login-card { padding:1.6rem 1.3rem; }
  .res-side { align-items:flex-start; width:100%; flex-direction:row; justify-content:space-between; }
  .toast { left:12px; right:12px; transform:translateY(140%); width:auto; text-align:center; }
  .toast.show { transform:translateY(0); }
}