:root{
  --bg:#fbfbfa; --page:#ffffff; --text:#1f2328; --muted:#6b7280; --line:#e5e7eb;
  --chip:#f3f4f6; --chip-text:#1f2328; --btn:#f6f6f7; --btn-border:#e6e7e9; --link:#2f80ed;
  --suburb-bg:#e6f0ff; --suburb-text:#0b3a82; --suburb-active:#2f80ed; --suburb-active-text:#ffffff;
  --cuisine-bg:#eef6f3; --cuisine-text:#0f3b2e; --cuisine-active:#22c55e; --cuisine-active-text:#06210f;
}
html[data-theme="dark"]{
  --bg:#0f1113; --page:#17191c; --text:#e9eaee; --muted:#a1a1ab; --line:#2a2b2d;
  --chip:#232427; --chip-text:#f2f3f5; --btn:#1f2023; --btn-border:#2a2b2d; --link:#7db7ff;
  --suburb-bg:#0f1e33; --suburb-text:#b7cff9; --suburb-active:#4ea1ff; --suburb-active-text:#0b0f14;
  --cuisine-bg:#0f1d17; --cuisine-text:#9be7c4; --cuisine-active:#22d3a3; --cuisine-active-text:#08130d;
}
@media (prefers-color-scheme: dark){
  html[data-theme="system"]{
    --bg:#0f1113; --page:#17191c; --text:#e9eaee; --muted:#a1a1ab; --line:#2a2b2d;
    --chip:#232427; --chip-text:#f2f3f5; --btn:#1f2023; --btn-border:#2a2b2d; --link:#7db7ff;
    --suburb-bg:#0f1e33; --suburb-text:#b7cff9; --suburb-active:#4ea1ff; --suburb-active-text:#0b0f14;
    --cuisine-bg:#0f1d17; --cuisine-text:#9be7c4; --cuisine-active:#22d3a3; --cuisine-active-text:#08130d;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial}

.page-header{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px;
  padding:12px 20px; border-bottom:1px solid var(--line); background:var(--page)}
.page-icon{font-size:28px; line-height:1}
.page-titles h1{font-size:22px; margin:0}
.page-titles .subtitle{margin:2px 0 0; color:var(--muted); font-size:13px}
.spacer{flex:1}
.theme-toggle{display:grid; grid-auto-flow:column; gap:6px; border:1px solid var(--btn-border); background:var(--btn); border-radius:10px; padding:4px}
.theme-btn{appearance:none; border:none; background:transparent; padding:6px 10px; border-radius:8px; cursor:pointer}
.theme-btn.active{background:var(--page)}

.page{max-width:960px; margin:0 auto; padding:16px 16px 28px}
.command-bar.simple{display:flex; gap:12px; align-items:center; justify-content:space-between;
  margin:10px 0; border:1px solid var(--line); border-radius:10px; background:var(--page); padding:10px}
.search-wrap{display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:var(--page); border-radius:8px; padding:8px 10px; min-width:280px; flex:1}
.search-wrap input{flex:1; border:none; outline:none; background:transparent; color:var(--text)}
.search-wrap .subtle{opacity:.8}

.view-and-fav{display:flex; gap:10px; align-items:center}
.segmented{display:inline-grid; grid-auto-flow:column; gap:4px; padding:4px; border:1px solid var(--line); border-radius:8px; background:var(--page)}
.seg{appearance:none; border:none; background:transparent; padding:6px 10px; border-radius:6px; cursor:pointer}
.seg.active{background:var(--btn); border:1px solid var(--btn-border)}

.filters{display:grid; gap:8px; margin:6px 0 10px}
details{border:1px solid var(--line); border-radius:8px; background:var(--page)}
summary{display:flex; justify-content:space-between; align-items:center; gap:8px; cursor:pointer; padding:10px 12px; list-style:none; border-bottom:1px solid var(--line)}
summary::-webkit-details-marker{display:none}
summary .small{font-size:12px}
.options{padding:10px 12px}
.select-wrap{display:grid; gap:4px; font-size:13px}
.select-wrap select{padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--page); color:var(--text)}

.chip-row{display:flex; gap:8px; flex-wrap:wrap; padding:10px 12px}
.chip{padding:6px 10px; border-radius:999px; font-size:13px; cursor:pointer; white-space:nowrap; border:1px solid transparent}
.chip.suburb{background:var(--suburb-bg); color:var(--suburb-text)}
.chip.suburb.active{background:var(--suburb-active); color:var(--suburb-active-text)}
.chip.cuisine{background:var(--cuisine-bg); color:var(--cuisine-text)}
.chip.cuisine.active{background:var(--cuisine-active); color:var(--cuisine-active-text)}

.results-info{color:var(--muted); font-size:13px; margin:8px 2px}

.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:10px}
.card{background:var(--page); border:1px solid var(--line); border-radius:8px; padding:12px; display:grid; gap:8px; position:relative}
.card h3{margin:0; font-size:16px}
.badges{display:flex; gap:6px; flex-wrap:wrap}
.badge{border-radius:999px; padding:2px 8px; font-size:12px; background:transparent; border:1px solid var(--line)}
.badge.suburb{border-style:dashed; color:var(--suburb-text)}
.badge.cuisine{color:var(--muted)}
.summary{font-size:13px; color:var(--text)}

.actions{display:flex; gap:8px; flex-wrap:wrap}
.actions a,.actions button{
  appearance:none; text-decoration:none; font-size:13px; line-height:1;
  padding:10px 12px; border-radius:6px; cursor:pointer; border:1px solid var(--btn-border); background:var(--btn); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; flex:0 0 auto;
}
.actions a.primary{background:var(--link); color:#fff; border-color:transparent}

.fav{position:absolute; top:10px; right:10px; border:none; background:transparent; cursor:pointer; font-size:18px}

.list{display:grid; gap:6px}
.row{display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; background:var(--page); border:1px solid var(--line); border-radius:8px; padding:10px}
.row .meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.row .name{font-weight:600}
.row .tags{display:flex; gap:6px; flex-wrap:wrap}
.tag{border-radius:999px; padding:2px 8px; font-size:12px; border:1px solid var(--line)}
.tag.suburb{border-style:dashed; color:var(--suburb-text)}
.tag.cuisine{color:var(--muted)}
.row .actions{display:flex; gap:8px}
.row .summary{grid-column:1 / -1; color:var(--muted); font-size:13px}

.page-footer{max-width:960px; margin:18px auto 36px; padding:8px 16px; display:flex; align-items:center; justify-content:flex-end; color:var(--muted); border-top:1px solid var(--line)}
.link{color:var(--link); background:none; border:none; padding:0; cursor:pointer}
.link.small{font-size:12px}