:root {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-alt: #f2f2f7;
  --border: #d1d1d6;
  --text: #000000;
  --text-muted: #8e8e93;
  --accent: #007aff;
  --accent-strong: #0060df;
  --accent-soft: rgba(0, 122, 255, 0.12);
  --accent-text: #ffffff;
  --danger: #ff3b30;
  --warning: #ff9500;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --surface: #1c1c1e;
    --surface-alt: #2c2c2e;
    --border: #38383a;
    --text: #ffffff;
    --text-muted: #98989d;
    --accent: #0a84ff;
    --accent-strong: #409cff;
    --accent-soft: rgba(10, 132, 255, 0.24);
    --accent-text: #ffffff;
    --danger: #ff453a;
    --warning: #ff9f0a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }

/* .field sets its own `display`, which would otherwise beat the UA
   stylesheet's `[hidden] { display: none }` and make dialog
   fields marked `hidden` show up anyway. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Bottom clearance for the app view's fixed grand-total bar — kept off the
   login view so its centered card isn't pushed off true-center. */
#app-screen { padding-bottom: 5rem; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 9px;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--accent-text);
  transition: filter 0.15s ease, transform 0.15s ease;
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.6; cursor: not-allowed; filter: none; transform: none; }
button.secondary {
  background: var(--surface-alt);
  color: var(--text);
  border: 1px solid var(--border);
}
button.secondary:hover { filter: none; background: var(--border); }
button.icon {
  background: transparent;
  color: var(--text-muted);
  padding: 0.3rem;
  min-width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  line-height: 1;
}
button.icon:hover { background: var(--accent-soft); color: var(--accent-strong); filter: none; }
button.danger-text { color: var(--danger); }
button.danger-text:hover { background: rgba(255, 59, 48, 0.12); color: var(--danger); }
button.icon.btn-ghost {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid transparent;
  opacity: 0.85;
}
button.icon.btn-ghost:hover { opacity: 1; background: var(--accent-soft); filter: brightness(1.05); }

input, select {
  font: inherit;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.55rem 0.7rem;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="range"] { accent-color: var(--accent); padding: 0; }

/* iOS-style toggle switch, standing in for the native checkbox. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2.2rem;
  height: 1.25rem;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--border);
  border: none;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}
input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
input[type="checkbox"]:checked { background: var(--accent); }
input[type="checkbox"]:checked::after { transform: translateX(0.95rem); }
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---- Login ---- */
.login-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .login-body { background: #121212; }
}
.login-card {
  width: 100%;
  max-width: 180px;
}
.login-card form { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.login-card input[type="password"] {
  width: 100%;
  text-align: center;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.2em;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  color: #111;
}
.login-card input[type="password"]::placeholder { color: #999; letter-spacing: 0.2em; }
.login-card input[type="password"]:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.25);
}
@media (prefers-color-scheme: dark) {
  .login-card input[type="password"] {
    background: #1c1c1e;
    color: #fff;
    border-color: #38383a;
  }
  .login-card input[type="password"]::placeholder { color: #8e8e93; }
  .login-card input[type="password"]:focus {
    border-color: #0a84ff;
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3);
  }
}
.login-card button[type="submit"] {
  width: 48px;
  height: 20px;
  padding: 0;
  border-radius: 8px;
  background: #007aff;
}
@media (prefers-color-scheme: dark) {
  .login-card button[type="submit"] { background: #0a84ff; }
}
.login-card button[type="submit"]:hover { filter: brightness(1.08); }

.copyright {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-align: center;
}
.login-body .copyright {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  color: #999;
}
@media (prefers-color-scheme: dark) {
  .login-body .copyright { color: #6e6e73; }
}

/* ---- App header ---- */
.app-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 5;
}
.app-header h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}
.app-header .logo-icon { color: var(--accent); flex-shrink: 0; }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }

.tree {
  max-width: 900px;
  margin: 1.5rem auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.empty-state { text-align: center; color: var(--text-muted); margin-top: 3rem; }

.category {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  /* No overflow:hidden here — it would clip the item dropdown menu, which
     needs to be able to render outside the card's box. The header gets its
     own matching top radius instead, so its square corners don't poke out. */
}
.category-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.1rem 0.9rem;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
}
.category-header .heading { display: flex; align-items: center; gap: 0.6rem; }
.category-header h2 { margin: 0; font-size: 1.08rem; }
.category-actions { display: flex; align-items: center; gap: 0.4rem; }
.total { font-weight: 700; color: var(--accent); }

.subcategory { border-bottom: 1px solid var(--border); }
.subcategory:last-child { border-bottom: none; }
.subcategory-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: color-mix(in srgb, var(--surface-alt) 45%, transparent);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.subcategory-header .heading { display: flex; align-items: center; gap: 0.5rem; }
.subcategory-header .name { font-weight: 600; color: var(--text); }
.subcategory-actions { display: flex; align-items: center; gap: 0.3rem; }

.items { display: flex; flex-direction: column; }
.item-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.1rem;
  border-top: 1px solid var(--border);
  transition: background 0.15s ease;
}
.item-row:hover { background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.item-row.bought { opacity: 0.5; }
.item-row.bought .item-name { text-decoration: line-through; }

.item-name-cell { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.item-name { color: var(--text); text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-name:hover { text-decoration: underline; color: var(--accent); }
.item-name.no-link { cursor: default; color: var(--text); }
.item-name.no-link:hover { color: var(--text); text-decoration: none; }
.redirect-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.redirect-btn:hover { filter: brightness(1.1); text-decoration: none; }
.open-cell { display: flex; align-items: center; }

/* Rating shown as a bar of even segments instead of a number, sitting on a
   semi-transparent chip tinted to match its importance tier — same shape
   and sizing as the Open button next to it. */
.rating-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  /* Horizontal padding close to the inter-segment gap so the edge spacing
     doesn't read as visually different from the spacing between bars. */
  padding: 0.35rem 0.3rem;
  border-radius: 8px;
}
.rating-bar.high { background: rgba(52, 199, 89, 0.15); }
.rating-bar.mid { background: rgba(255, 149, 0, 0.15); }
.rating-bar.low { background: rgba(255, 59, 48, 0.15); }
.rating-seg {
  width: 4px;
  height: 14px;
  border-radius: 2px;
}
/* Unfilled segments are a darker, dimmer version of the tier's own color
   rather than a neutral gray. */
.rating-bar.high .rating-seg { background: rgba(52, 199, 89, 0.18); }
.rating-bar.mid .rating-seg { background: rgba(255, 149, 0, 0.18); }
.rating-bar.low .rating-seg { background: rgba(255, 59, 48, 0.18); }
.rating-bar.high .rating-seg.filled { background: #34c759; }
.rating-bar.mid .rating-seg.filled { background: #ff9500; }
.rating-bar.low .rating-seg.filled { background: #ff3b30; }
.rating-bar.inherited { opacity: 0.5; }

.price-cell { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; min-width: 5.5rem; }
.price-cell .warning { color: var(--warning); margin-left: 0.25rem; }
.price-cell .pending { color: var(--text-muted); font-style: italic; }
.price-cell .tbd { color: var(--text-muted); font-style: italic; }

.item-menu-wrap { position: relative; }
.item-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 10;
}
.item-menu button {
  background: transparent;
  color: var(--text);
  text-align: left;
  justify-content: flex-start;
  padding: 0.5rem 0.6rem;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 500;
  width: 100%;
  height: auto;
}
.item-menu button:hover { background: var(--accent-soft); filter: none; }
.item-menu button.danger-text { color: var(--danger); }
.item-menu button.danger-text:hover { background: rgba(255, 59, 48, 0.12); color: var(--danger); }

.grand-total-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
  font-size: 1.1rem;
}
.grand-total-bar .total-group { display: flex; align-items: baseline; gap: 0.5rem; }
.grand-total-bar strong {
  color: var(--accent);
  font-size: 1.3rem;
}

dialog {
  border: none;
  border-radius: 18px;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 380px;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); }
#dialog-form { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.5rem; }
#dialog-form h2 { margin: 0; font-size: 1.15rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: 0.85rem; color: var(--text-muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.5rem; }

.error { color: var(--danger); font-size: 0.85rem; margin: 0; }

@media (max-width: 560px) {
  .item-row { grid-template-columns: auto 1fr; grid-template-areas: "check name" "spacer meta"; row-gap: 0.4rem; }
}