/* Basic PWA app shell styles */
:root{
  --bg:#f5f6f8;
  --surface:#ffffff;
  --text:#323130;
  --muted:#605e5c;
  --tile:#4f6bed;
  --tile-hover:#3f5bd6;
  --border:#e1e4e8;
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Segoe UI, Roboto, Arial, sans-serif;line-height:1.5}
.appbar{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border);padding:14px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.appbar__title{font-weight:700;letter-spacing:.2px}
.btn{border:1px solid var(--border);background:var(--surface);padding:8px 12px;border-radius:8px;cursor:pointer}
.btn--ghost{background:transparent}
.container{max-width:1100px;margin:0 auto;padding:18px 16px 48px}
.section{margin:18px 0 24px}
.section h2{font-size:18px;margin:10px 0 12px 2px}
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tile{display:flex;align-items:center;gap:12px;padding:16px 16px;border-radius:12px;background:var(--tile);color:#fff;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.1);transition:transform .08s ease, background .12s ease}
.tile:hover{transform:translateY(-1px);background:var(--tile-hover)}
.label{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{margin-left:auto;font-size:20px;opacity:.9}
/* Icons via CSS (mask) */
.ico{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);display:inline-block;position:relative}
.ico::before{content:'';position:absolute;inset:0;margin:auto;width:22px;height:22px;background:white; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;}
.ico--calendar::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 2v2H5a2 2 0 0 0-2 2v2h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 6H3v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"black\" d=\"M7 2v2H5a2 2 0 0 0-2 2v2h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 6H3v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8z\"/></svg>');}
.ico--people::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"black\" d=\"M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z\"/></svg>');}
.ico--kitchen::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 6h16v12H4z M7 9h2v6H7zM11 9h6v6h-6z"/></svg>'); mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"black\" d=\"M4 6h16v12H4z M7 9h2v6H7zM11 9h6v6h-6z\"/></svg>');}
/* Snackbar */
.snackbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 14px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.snackbar.show{opacity:1}