:root{
  --bg:#ffffff;
  --red:#AE3943;
  --red-deep:#8A2A33;
  --ink:#1c1c1e;
  --muted:#6c6c70;
  --line:#e5e5ea;
  --card:#ffffff;
  --chrome:#ffffff;
  --offwhite:#F7F2EA;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  margin:0;padding:0;
  min-height:100%;
}
body{
  margin:0;
  min-height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  line-height:1.3;
  padding-left:var(--safe-l);
  padding-right:var(--safe-r);
  padding-bottom:calc(16px + var(--safe-b));
  /* Original clean page background (pre checker / red-fade) */
  background-color:var(--bg);
  background-image:none;
  overflow-x:hidden;
}

/* Compact Inventory-style menu bar — solid, no blur/fade */
.app-chrome{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--chrome); /* solid white */
  border-bottom:1px solid var(--line);
  padding:calc(6px + var(--safe-t)) 10px 8px;
  overflow:visible;
}
.chrome-brand{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  margin:0;
  width:100%;
}
a.home-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  text-decoration:none;
  color:inherit;
  min-width:44px;
  min-height:44px;
  max-width:120px;
}
.chrome-logo{
  display:block;
  height:28px;
  width:auto;
  max-width:120px;
  object-fit:contain;
  object-position:left center;
}
h1{
  font-size:1.05rem;
  margin:0;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
  min-width:0;
  flex:1;
}
.sub{display:none}

main{
  max-width:520px;
  margin:0 auto;
  padding:14px 14px 0;
  width:100%;
}
.cards{display:grid;gap:10px}
.card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  background:var(--card); /* solid readable surface */
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  min-height:52px;
  -webkit-tap-highlight-color:transparent;
}
.card:active{opacity:.92}
.label{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--red-deep);
}
.hint{
  font-size:.85rem;
  color:var(--muted);
  line-height:1.3;
}

/* Top-right Login — UI only; hub auth backend not deployed */
.login-btn{
  flex:none;
  margin-left:auto;
  min-height:36px;
  min-width:64px;
  padding:6px 14px;
  border:1.5px solid var(--ink);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
.login-btn:active{background:#f2f2f7}
.login-dialog{
  border:0;
  border-radius:16px;
  padding:0;
  max-width:min(360px, calc(100vw - 32px));
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.login-dialog::backdrop{background:rgba(0,0,0,.35)}
.login-sheet{margin:0;padding:18px 16px 14px;display:flex;flex-direction:column;gap:10px}
.login-sheet h2{margin:0;font-size:1.1rem;font-weight:700;letter-spacing:-.02em}
.login-status{margin:0;font-size:.92rem;color:var(--ink);line-height:1.4}
.login-hint{margin:0;font-size:.8rem;color:var(--muted);line-height:1.35}
.login-close{
  align-self:flex-end;
  min-height:40px;
  min-width:72px;
  margin-top:4px;
  padding:8px 16px;
  border:0;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}