:root{
  --ink:#20241F;
  --paper:#EEECDF;
  --card:#FBFAF4;
  --amber:#D98E2B;
  --amber-deep:#B8721A;
  --teal:#3D6B63;
  --teal-deep:#2C4E48;
  --header-bg:#4F8177;
  --line:#C9C2A9;
  --line-soft:#DDD7C2;
  --danger:#B5453A;
  --shadow: 0 2px 0 rgba(32,36,31,0.06), 0 8px 20px -12px rgba(32,36,31,0.35);
  --radius: 6px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0; overflow-x:hidden; width:100%;}
body{
  background:var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(32,36,31,0.06) 1px, transparent 0);
  background-size: 18px 18px;
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
}
.mono{font-family:'Space Mono',monospace;}
.eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--teal-deep);
}
#app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  background:transparent;
  display:flex;
  flex-direction:column;
  position:relative;
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
body.modal-open{overflow:hidden;}
body.modal-open #app{overflow:hidden; height:100dvh;}

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--header-bg);
  color:var(--paper);
  padding: calc(16px + env(safe-area-inset-top)) 16px 14px;
  border-bottom: 3px solid var(--amber);
}
.topbar-row{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
.brand{
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:20px;
  letter-spacing:.02em;
}
.brand span{color:var(--amber);}

.search-wrap{
  margin-top:14px;
  position:relative;
}
.search-wrap svg{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; stroke:var(--ink); opacity:.55;
}
.search-input{
  width:100%;
  font-family:'Space Mono',monospace;
  font-size:16px;
  letter-spacing:.02em;
  text-transform:uppercase;
  background:var(--card);
  border:2px dashed var(--line);
  border-radius:4px;
  padding:11px 12px 11px 36px;
  color:var(--ink);
  outline:none;
}
.search-input::placeholder{color:#8b8571; text-transform:uppercase;}
.search-input:focus{border-color:var(--amber); border-style:solid;}

/* ---------- Location chip rail ---------- */
.chip-rail{
  display:flex; gap:8px; overflow-x:auto;
  padding: 14px 16px 4px;
  scrollbar-width:none;
}
.chip-rail::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:13px;
  padding:7px 13px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:var(--card);
  color:var(--ink);
  cursor:pointer;
  display:flex; align-items:center; gap:6px;
  transition:transform .12s ease;
}
.chip:active{transform:scale(.96);}
.chip.active{
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
}
/* Ancestor of the selected chip — a lighter callout than .active so the
   parent chain reads at a glance without competing with the real selection. */
.chip.chip-ancestor{
  border-color:var(--teal);
  border-style:dashed;
  background:rgba(61,107,99,0.16);
  color:var(--teal-deep);
}
.chip .count{opacity:.6; font-size:11px;}

/* ---------- Main content ---------- */
main{flex:1; padding:8px 16px 24px;}
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin: 14px 2px 10px;
}
.section-head .eyebrow{margin:0;}

/* ---------- Item ticket card ---------- */
.item-list{display:flex; flex-direction:column; gap:12px;}
.item-card{
  position:relative;
  display:flex;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  cursor:pointer;
}
.item-stub{
  flex:0 0 62px;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  border-right:2px dashed var(--line);
  background:repeating-linear-gradient(135deg, rgba(32,36,31,0.02) 0 6px, transparent 6px 12px);
}
.item-stub::before{
  content:"";
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
  z-index:2;
}
.item-stub.has-image{padding:0; background:#000;}
.item-stub.has-image img{
  width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;
}
.image-count-badge{
  position:absolute; bottom:4px; right:4px;
  background:rgba(32,36,31,0.75); color:#fff;
  font-family:'Space Mono',monospace; font-size:9.5px; font-weight:700;
  padding:1px 5px; border-radius:8px; z-index:2;
}
.avatar{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-weight:700; font-size:14px;
  color:#fff;
  border:2px solid rgba(255,255,255,0.5);
}
.item-body{flex:1; padding:12px 12px 12px 14px; min-width:0;}
.item-name{
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:14.5px;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.25;
}
.item-loc{
  margin-top:5px;
  display:flex; align-items:center; gap:5px;
  font-size:12.5px; color:var(--teal-deep); font-weight:600;
}
.item-loc svg{width:12px; height:12px; stroke:var(--teal-deep); flex:0 0 auto;}
.item-note{
  margin-top:5px; font-size:12.5px; color:#6b6553;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.item-meta{
  margin-top:8px; font-size:11px; color:#9a9481;
  font-family:'Barlow Condensed',sans-serif; letter-spacing:.04em; text-transform:uppercase;
}
.item-actions{
  flex:0 0 auto; display:flex; flex-direction:column; border-left:1px solid var(--line-soft);
}
.item-actions button{
  flex:1; width:44px; min-height:44px;
  background:transparent; border:0; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); opacity:.55; cursor:pointer;
}
.item-actions button:last-child{border-bottom:0;}
.item-actions button:active{opacity:1; background:rgba(0,0,0,0.04);}
.item-actions svg{width:15px; height:15px; stroke:currentColor;}
.item-actions .del:active{color:var(--danger);}

/* ---------- Empty state ---------- */
.empty{
  text-align:center; padding:48px 20px 20px; color:#7d775f;
}
.empty svg{width:44px; height:44px; stroke:var(--line); margin-bottom:10px;}
.empty h3{font-family:'Space Mono',monospace; font-size:14px; margin:0 0 6px; text-transform:uppercase; color:var(--ink);}
.empty p{font-size:13px; margin:0 0 16px; line-height:1.5;}
.empty button{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--amber); color:#fff; border:0; padding:10px 18px; border-radius:4px; font-size:13.5px; cursor:pointer;
}

/* ---------- Skeleton ---------- */
.skeleton{ display:flex; flex-direction:column; gap:12px; }
.sk-card{height:78px; border-radius:var(--radius); background:linear-gradient(90deg, #E6E2D2 25%, #EFEBDD 37%, #E6E2D2 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite;}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- Locations tab (tree) ---------- */
.loc-list{display:flex; flex-direction:column; gap:8px;}
.loc-row{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 10px; box-shadow:var(--shadow);
  position:relative;
}
.loc-row.is-nested{background:#F5F3E8;}
.loc-toggle{
  flex:0 0 auto; width:32px; height:32px; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--teal-deep); opacity:.8;
  padding:0;
}
.loc-toggle svg{width:14px; height:14px; stroke:currentColor; transition:transform .15s ease;}
.loc-toggle.collapsed svg{transform:rotate(-90deg);}
.loc-toggle-spacer{flex:0 0 32px;}
.loc-dot{width:14px; height:14px; border-radius:50%; flex:0 0 auto; border:2px solid rgba(255,255,255,.6); box-shadow:0 0 0 1px var(--line);}
.loc-row .loc-name{font-family:'Space Mono',monospace; font-weight:700; font-size:13.5px; text-transform:uppercase; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.loc-row .loc-count{font-size:12px; color:#8b8571; font-family:'Barlow Condensed',sans-serif; letter-spacing:.04em; flex:0 0 auto;}
.loc-row-actions{display:flex; align-items:center; gap:0; flex:0 0 auto;}
.loc-row button.icon-btn{background:transparent; border:0; opacity:.5; cursor:pointer; padding:10px 6px; min-width:36px; min-height:36px;}
.loc-row button.icon-btn svg{width:16px; height:16px; stroke:var(--teal-deep);}
.loc-row button.icon-btn.del svg{stroke:var(--danger);}
.add-loc-form{
  display:flex; gap:8px; margin-top:4px;
}
.add-loc-form input{
  flex:1; font-family:'Inter'; font-size:16px; padding:10px 12px;
  border:1.5px solid var(--line); border-radius:4px; background:var(--card); outline:none;
  min-width:0;
}
.add-loc-form input:focus{border-color:var(--teal);}
.add-loc-form button{
  background:var(--teal); color:#fff; border:0; border-radius:4px; padding:0 16px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase; cursor:pointer;
}
.add-loc-form button:disabled{opacity:.5; cursor:not-allowed;}
.parent-hint{
  display:flex; align-items:center; gap:6px; margin-top:8px;
  font-size:12px; color:var(--teal-deep); background:#E7E9DA; border-radius:4px; padding:6px 9px;
}
.parent-hint button{background:transparent; border:0; padding:0; margin-left:auto; color:var(--danger); font-size:12px; cursor:pointer; font-weight:700; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.04em;}
.chip-indent{opacity:.45; margin-right:1px;}

/* ---------- FAB ---------- */
.fab{
  position:fixed; z-index:30;
  right:calc(50% - 240px + 20px);
  bottom:calc(78px + env(safe-area-inset-bottom) + 16px);
  width:56px; height:56px; border-radius:50%;
  background:var(--amber); color:#fff;
  border:2px dashed rgba(255,255,255,0.55);
  box-shadow:0 10px 20px -6px rgba(184,114,26,0.55);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transform:rotate(-4deg);
  transition:transform .15s ease;
}
.fab:active{transform:rotate(-4deg) scale(.92);}
.fab svg{width:24px; height:24px; stroke:#fff; stroke-width:2.4;}
@media (max-width:520px){
  .fab{ right:20px; }
}

/* ---------- Desktop sidebar (hidden on phones; enabled at min-width:900px below) ---------- */
.sidebar-nav{ display:none; }

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:0; width:100%; max-width:480px;
  background:var(--header-bg); color:var(--paper);
  display:flex;
  padding-bottom: env(safe-area-inset-bottom);
  border-top:3px solid var(--amber);
  z-index:25;
}
.nav-btn{
  flex:1; background:transparent; border:0; color:rgba(238,236,223,0.55);
  padding:11px 4px 9px; display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700;
}
.nav-btn svg{width:19px; height:19px; stroke:currentColor;}
.nav-btn.active{color:#fff;}
.nav-btn.active svg{stroke:var(--amber);}

/* ---------- Modal / bottom sheet ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(32,36,31,0.55);
  display:flex; align-items:flex-end; justify-content:center;
  z-index:50;
}
.sheet{
  width:100%; max-width:480px;
  background:var(--paper);
  border-radius:16px 16px 0 0;
  padding:14px 18px calc(20px + env(safe-area-inset-bottom));
  max-height:88vh; overflow-y:auto;
  border-top:3px solid var(--amber);
}
.sheet-handle{width:38px; height:4px; background:var(--line); border-radius:2px; margin:0 auto 14px;}
.sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.sheet-head h2{
  font-family:'Space Mono',monospace; font-size:16px; text-transform:uppercase; margin:0;
}
.sheet-head button{background:transparent; border:0; padding:4px; opacity:.6; cursor:pointer;}
.sheet-head button svg{width:20px; height:20px; stroke:var(--ink);}

.field{margin-bottom:14px;}
.field label{
  display:block; margin-bottom:6px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  font-size:12px; color:var(--teal-deep);
}
.field input, .field select, .field textarea{
  width:100%; font-family:'Inter'; font-size:16px;
  padding:11px 12px; border:1.5px solid var(--line); border-radius:5px;
  background:var(--card); color:var(--ink); outline:none; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--amber);}
.field-error{color:var(--danger); font-size:12px; margin-top:5px;}
.field-error-top{margin-top:-8px; margin-bottom:14px;}
.field-hint{color:#9a9481; font-size:11.5px; margin-top:5px;}

.image-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px;}
.image-thumb{
  position:relative; width:68px; height:68px; border-radius:6px; overflow:hidden;
  border:1px solid var(--line); flex:0 0 auto;
}
.image-thumb img{width:100%; height:100%; object-fit:cover; cursor:zoom-in;}
.image-thumb .remove-img{
  position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%;
  background:rgba(32,36,31,0.75); display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:0; padding:0;
}
.image-thumb .remove-img svg{width:10px; height:10px; stroke:#fff; stroke-width:3;}
.image-add-btn{
  width:68px; height:68px; border-radius:6px; flex:0 0 auto;
  border:2px dashed var(--line); display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:var(--card); color:var(--teal-deep);
}
.image-add-btn.uploading{opacity:.5; pointer-events:none;}
.image-add-btn svg{width:20px; height:20px; stroke:currentColor;}

.lightbox-overlay{
  position:fixed; inset:0; background:rgba(15,16,13,0.92); z-index:80;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-overlay img{max-width:90%; max-height:76vh; border-radius:6px; box-shadow:0 20px 50px rgba(0,0,0,0.5);}
.lightbox-close{
  position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px;
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.12); border:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lightbox-close svg{width:18px; height:18px; stroke:#fff;}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.12); border:0;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lightbox-nav svg{width:18px; height:18px; stroke:#fff;}
.lightbox-prev{left:12px;}
.lightbox-next{right:12px;}
.lightbox-counter{
  position:absolute; bottom:calc(20px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.7); font-family:'Space Mono',monospace; font-size:12px;
}
.swatches{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;}
.swatch{width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent;}
.swatch.active{border-color:var(--ink);}

.sheet-actions{display:flex; gap:10px; margin-top:6px;}
.btn{
  flex:1; padding:13px; border-radius:5px; border:0; cursor:pointer;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:14.5px;
}
.btn-primary{background:var(--amber); color:#fff;}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn-danger{background:var(--danger); color:#fff;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- Confirm dialog ---------- */
.confirm-box{
  width:100%; max-width:380px; background:var(--card);
  border-radius:10px; padding:20px; margin:0 16px 0;
  border-top:3px solid var(--danger);
}
.confirm-box h3{font-family:'Space Mono',monospace; font-size:15px; margin:0 0 8px; text-transform:uppercase;}
.confirm-box p{font-size:13.5px; color:#6b6553; margin:0 0 16px; line-height:1.5;}
.confirm-actions{display:flex; gap:10px;}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(90px + env(safe-area-inset-bottom));
  background:var(--ink); color:var(--paper);
  padding:10px 18px; border-radius:999px; font-size:13px;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 8px 20px -6px rgba(0,0,0,0.4);
  z-index:60; max-width:90%;
  border:1px solid rgba(238,236,223,0.15);
}
.toast svg{width:14px; height:14px; stroke:var(--amber); flex:0 0 auto;}
.toast-enter-active,.toast-leave-active{transition:opacity .2s, transform .2s;}
.toast-enter-from,.toast-leave-to{opacity:0; transform:translate(-50%,8px);}
.sheet-enter-active,.sheet-leave-active{transition:opacity .2s;}
.sheet-enter-active .sheet, .sheet-leave-active .sheet{transition:transform .22s ease;}
.sheet-enter-from, .sheet-leave-to{opacity:0;}
.sheet-enter-from .sheet, .sheet-leave-to .sheet{transform:translateY(24px);}

/* ---------- Auth screen ---------- */
.auth-screen{
  min-height:100vh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:24px 18px;
}
.auth-card{
  width:100%; max-width:380px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:var(--shadow);
  border-top:4px solid var(--amber);
  padding:26px 22px 24px;
  position:relative;
}
.auth-brand{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-bottom:20px;
}
.auth-brand .brand{font-size:24px; color:var(--ink);}
.auth-brand .brand span{color:var(--amber-deep);}
.auth-brand .eyebrow{margin-top:4px; color:var(--teal-deep);}

.auth-error{
  background:#F5E2DE; border:1px solid var(--danger); color:#7A2E25;
  border-radius:5px; padding:9px 11px; font-size:12.5px; margin-bottom:14px; line-height:1.4;
}
.auth-submit{width:100%; margin-top:4px;}

.lang-select{
  align-self:flex-start; min-width:180px;
  font-family:'Space Mono',monospace; font-weight:700; font-size:11.5px;
  padding:8px 12px; border:1.5px solid var(--line); border-radius:5px;
  background:var(--card); color:var(--ink); outline:none; cursor:pointer;
}
.lang-select:focus{border-color:var(--amber);}
.lang-select.depth-input{min-width:0; width:90px;}
.profile-card p.field-hint{margin:-6px 0 10px;}

/* ---------- Profile page ---------- */
.profile-page{display:flex; flex-direction:column; gap:14px; max-width:420px;}
/* Purely structural on phones — keeps .profile-card/.btn-logout as direct
   flex children of .profile-page so the gap above still applies to them.
   Desktop turns this into the actual masonry container, see media query. */
.profile-cards{display:contents;}
.profile-card{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:16px 16px 18px;
}
.profile-card h3{
  margin:0 0 12px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  font-size:13px; color:var(--teal-deep);
}
.btn-logout{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; border:1.5px solid var(--danger); border-radius:5px; padding:13px;
  color:var(--danger); cursor:pointer;
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:14.5px;
}
.btn-logout:active{background:rgba(181,69,58,0.08);}
.btn-logout svg{width:16px; height:16px; stroke:currentColor;}

/* ---------- Narrow phones ---------- */
@media (max-width:430px){
  .topbar{padding:calc(14px + env(safe-area-inset-top)) 12px 12px;}
  main{padding:8px 12px 24px;}
  .brand{font-size:18px;}
  .item-stub{flex-basis:52px;}
  .sheet{padding:14px 14px calc(18px + env(safe-area-inset-bottom));}
  .add-loc-form button{padding:0 12px; font-size:13px;}
  .fab{width:52px; height:52px; right:14px;}
}

/* ---------- Phones: kill page-level scroll/bounce, scroll only inside the app shell ----------
   Desktop keeps normal document scrolling untouched. */
@media (max-width:480px){
  html, body{
    height:100%;
    overflow:hidden;
    overscroll-behavior-y:none;
  }
  #app{
    height:100dvh;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
  }
}

/* =========================================================================
   Desktop layout — a real two-column app shell instead of the centered
   phone card: a persistent sidebar for navigation replaces the bottom nav
   and FAB, items lay out in a grid, and dialogs are centered instead of
   sliding up as bottom sheets. Everything below this point only applies at
   900px and up; the phone layout above is untouched at narrower widths.
   ========================================================================= */
@media (min-width:900px){
  body{ background-attachment:fixed; }

  #app{
    display:grid;
    grid-template-columns:232px minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    grid-template-areas:"sidebar content";
    max-width:none;
    width:100%;
    margin:0;
    height:100vh;
    height:100dvh;
    min-height:0;
    padding-bottom:0;
    border-radius:0;
    overflow:visible;
    box-shadow:none;
    border:0;
  }

  /* Auth screen has no sidebar/topbar/etc — let it size to its own content
     instead of being pinned to the exact viewport height like the app shell
     (which relies on that fixed height so its `main` column can scroll
     internally while the sidebar stays put). */
  #app:has(> .auth-screen){
    display:block;
    height:auto;
    min-height:100vh;
    min-height:100dvh;
  }

  /* ---- Sidebar ---- */
  .sidebar-nav{
    grid-area:sidebar;
    display:flex; flex-direction:column; gap:4px;
    background:var(--header-bg); color:var(--paper);
    padding:22px 16px;
  }
  .sidebar-brand{
    font-family:'Space Mono',monospace; font-weight:700; font-size:19px; letter-spacing:.02em;
    padding:0 10px; margin-bottom:22px;
  }
  .sidebar-brand span{color:var(--amber);}
  /* The sidebar is a fixed 232px, so the search box has far less room than
     the full-width topbar one it replaces. 16px there is deliberate (it
     stops iOS zooming the page on focus), but this box only ever renders on
     desktop, so it can shrink enough for longer localized placeholders
     ("Gegenstand suchen…") to fit instead of being clipped. */
  .sidebar-search{ margin:0 0 18px; }
  .sidebar-search .search-input{ font-size:13px; padding-left:32px; }
  .sidebar-search svg{ left:10px; width:14px; height:14px; }
  .sidebar-links{display:flex; flex-direction:column; gap:2px;}
  .sidebar-links button{
    display:flex; align-items:center; gap:10px;
    background:transparent; border:0; border-radius:8px;
    padding:11px 12px; color:rgba(238,236,223,0.7); cursor:pointer;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:13.5px;
    text-align:left;
  }
  .sidebar-links button svg{width:18px; height:18px; stroke:currentColor; flex:0 0 auto;}
  .sidebar-links button:hover{background:rgba(255,255,255,0.08); color:#fff;}
  .sidebar-links button.active{background:rgba(255,255,255,0.14); color:#fff;}
  .sidebar-links button.active svg{stroke:var(--amber);}
  .sidebar-add-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:18px; background:var(--amber); color:#fff; border:0; border-radius:6px;
    padding:11px; cursor:pointer;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:13.5px;
  }
  .sidebar-add-btn:hover{background:var(--amber-deep);}
  .sidebar-add-btn svg{width:16px; height:16px; stroke:currentColor;}

  /* ---- Main column: topbar + tab content scroll together, sidebar stays put ---- */
  .content-col{
    grid-area:content;
    display:flex; flex-direction:column;
    min-width:0; min-height:0;
    overflow-y:auto;
  }
  .topbar{ border-bottom:1px solid var(--line-soft); padding:10px 28px 20px; }
  .topbar-row .brand{ display:none; } /* the sidebar already shows the brand */
  .topbar .search-wrap{ display:none; } /* the sidebar already shows the search box */
  .chip-rail{ padding:14px 28px 4px; flex-wrap:wrap; overflow-x:visible; }
  main{ padding:8px 28px 28px; }

  /* Bottom-nav and FAB are phone-only navigation; the sidebar replaces both. */
  .bottom-nav, .fab{ display:none; }

  /* ---- Item grid ---- */
  .item-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:14px;
  }
  .item-card{ cursor:pointer; }

  /* ---- Profile page: balanced masonry columns instead of one narrow
     stack, so cards of very different heights (a two-line language picker
     next to a three-field password form) don't leave ragged gaps. Log out
     is kept out of the masonry flow (see .profile-cards below) so it can't
     end up stranded alone in its own mostly-empty column on wide screens. ---- */
  .profile-page{
    display:block;
    max-width:none;
  }
  .profile-cards{
    display:block;
    column-width:320px;
    column-gap:14px;
  }
  .profile-cards .profile-card{
    break-inside:avoid;
    margin-bottom:14px;
  }
  .profile-page .btn-logout{ width:auto; padding-left:22px; padding-right:22px; margin-top:2px; }

  /* ---- Centered dialogs instead of bottom sheets ---- */
  .overlay{ align-items:center; padding:24px; }
  .sheet{
    border-radius:14px;
    max-width:520px;
    max-height:85vh;
    border-top:3px solid var(--amber);
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.45);
  }
  .sheet-enter-from .sheet, .sheet-leave-to .sheet{ transform:translateY(12px); }
}