:root {
  --sf-wall: #f1e7d6;
  --sf-wall-deep: #e6d9c2;
  --sf-wall-weave: rgba(255, 255, 255, 0.4);
  --sf-wall-thread: rgba(166, 137, 100, 0.07);

  --sf-wood-face: #d3763c;
  --sf-wood-lip: #ecaa71;
  --sf-wood-body: #c25f2c;
  --sf-wood-edge: #8d3c14;
  --sf-wood-grain: rgba(255, 236, 214, 0.08);

  --sf-strap: #e8a385;
  --sf-strap-dark: #c07f63;
  --sf-strap-light: #f4c3ac;
  --sf-brass: #ecd0a1;
  --sf-brass-dark: #a9854f;

  --sf-paper: #fbf4e8;
  --sf-paper-deep: #efe2cc;
  --sf-ink: #3b2a1c;
  --sf-ink-soft: #856c55;
  --sf-line: rgba(120, 90, 60, 0.22);
  --sf-danger: #b0402a;

  --sf-accent-filter: #5d8a6a;
  --sf-accent-espresso: #7a4326;
  --sf-accent-omni: #b98327;

  --sf-space-1: 4px;
  --sf-space-2: 8px;
  --sf-space-3: 12px;
  --sf-space-4: 16px;
  --sf-space-5: 24px;
  --sf-space-6: 32px;

  --sf-r-sm: 6px;
  --sf-r-md: 10px;
  --sf-r-lg: 16px;
  --sf-r-pill: 999px;

  --sf-text-xs: 12px;
  --sf-text-sm: 14px;
  --sf-text-md: 16px;
  --sf-text-lg: 20px;
  --sf-text-xl: 26px;
  --sf-font-display: ui-serif, Georgia, "Times New Roman", serif;
  --sf-font-body: -apple-system, system-ui, "Segoe UI", sans-serif;

  --sf-shadow-cast: 0 18px 22px -12px rgba(88, 58, 32, 0.55);
  --sf-shadow-card: 0 6px 14px -8px rgba(88, 58, 32, 0.5);
  --sf-shadow-object: 0 8px 10px -8px rgba(70, 44, 22, 0.75);

  --sf-shelf-rise: 116px;
  --sf-shelf-board: 22px;
  --sf-shelf-splay: 13deg;
  --sf-bag-w: clamp(82px, 22vw, 104px);
  --sf-container: 640px;
}

:root[data-theme="evening"] {
  --sf-wall: #2b2119;
  --sf-wall-deep: #221a13;
  --sf-wall-weave: rgba(255, 255, 255, 0.05);
  --sf-wall-thread: rgba(0, 0, 0, 0.18);

  --sf-wood-face: #a95a2c;
  --sf-wood-lip: #c07f4c;
  --sf-wood-body: #94491f;
  --sf-wood-edge: #5d2a0d;

  --sf-strap: #b47d64;
  --sf-strap-dark: #8c5c47;
  --sf-strap-light: #c99781;
  --sf-brass: #c4a473;
  --sf-brass-dark: #7d6039;

  --sf-paper: #3a2d22;
  --sf-paper-deep: #2f241b;
  --sf-ink: #f0e3d1;
  --sf-ink-soft: #b49c82;
  --sf-line: rgba(255, 232, 205, 0.16);

  --sf-shadow-cast: 0 18px 24px -12px rgba(0, 0, 0, 0.75);
  --sf-shadow-card: 0 6px 16px -8px rgba(0, 0, 0, 0.7);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-md);
  color: var(--sf-ink);
  background-color: var(--sf-wall);
  background-image:
    repeating-linear-gradient(0deg, var(--sf-wall-weave) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, var(--sf-wall-thread) 0 2px, transparent 2px 7px),
    radial-gradient(130% 80% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 65%),
    linear-gradient(180deg, var(--sf-wall), var(--sf-wall-deep));
  background-repeat: repeat, repeat, no-repeat, no-repeat;
}

.sf-title,
h1 {
  margin: 0 0 var(--sf-space-3);
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-xl);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sf-subtitle,
h2 {
  margin: 0 0 var(--sf-space-2);
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-lg);
  font-weight: 600;
}

.sf-hint {
  color: var(--sf-ink-soft);
  font-size: var(--sf-text-sm);
}

.sf-page {
  max-width: var(--sf-container);
  margin: 0 auto;
  padding: var(--sf-space-4) var(--sf-space-4) calc(var(--sf-space-6) + env(safe-area-inset-bottom));
}

.sf-rack {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sf-space-3);
  padding: var(--sf-space-4) 0 var(--sf-space-6);
}

.sf-shelf {
  position: relative;
  min-width: 0;
  isolation: isolate;
}

.sf-shelf__strap {
  position: absolute;
  z-index: 2;
  top: 0;
  width: 14px;
  height: calc(var(--sf-shelf-rise) + var(--sf-shelf-board));
  transform-origin: top center;
  border-radius: 2px;
  background:
    linear-gradient(90deg, var(--sf-strap-dark) 0 2px, var(--sf-strap) 2px 5px, var(--sf-strap-light) 5px 8px, var(--sf-strap) 8px 12px, var(--sf-strap-dark) 12px 14px);
  box-shadow: 0 6px 10px -6px rgba(88, 58, 32, 0.6);
}

.sf-shelf__strap--l {
  left: 11%;
  transform: rotate(calc(-1 * var(--sf-shelf-splay)));
}

.sf-shelf__strap--r {
  right: 11%;
  transform: rotate(var(--sf-shelf-splay));
}

.sf-shelf__strap::before,
.sf-shelf__strap::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--sf-brass), var(--sf-brass-dark));
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(70, 44, 22, 0.4);
}

.sf-shelf__strap::before {
  top: -6px;
}

.sf-shelf__strap::after {
  bottom: 2px;
}

.sf-shelf__items {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: var(--sf-space-4);
  min-height: var(--sf-shelf-rise);
  padding: 0 var(--sf-space-5);
  overflow: hidden;
}

.sf-shelf__board {
  position: relative;
  height: var(--sf-shelf-board);
  border-radius: 2px 2px 4px 4px;
  background-color: var(--sf-wood-body);
  background-image:
    repeating-linear-gradient(180deg, var(--sf-wood-grain) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--sf-wood-face) 0 35%, var(--sf-wood-body) 35% 72%, var(--sf-wood-edge) 100%);
  box-shadow: var(--sf-shadow-cast), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.sf-shelf__board::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -7px;
  height: 8px;
  background: linear-gradient(180deg, var(--sf-wood-lip), var(--sf-wood-face));
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
}

.sf-shelf__label {
  position: absolute;
  left: var(--sf-space-4);
  bottom: calc(-1 * var(--sf-space-3));
  z-index: 4;
  padding: var(--sf-space-1) var(--sf-space-3);
  border-radius: var(--sf-r-pill);
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-sm);
  color: var(--sf-ink);
  background: var(--sf-paper);
  border: 1px solid var(--sf-line);
  box-shadow: var(--sf-shadow-card);
}

.sf-shelf--empty .sf-shelf__items {
  align-items: center;
  justify-content: center;
  color: var(--sf-ink-soft);
  font-size: var(--sf-text-sm);
}

.sf-bag {
  position: relative;
  flex: 0 0 auto;
  width: var(--sf-bag-w);
  min-height: 88px;
  padding: var(--sf-space-4) 7px var(--sf-space-2);
  border: none;
  border-radius: 3px 3px var(--sf-r-sm) var(--sf-r-sm);
  font: inherit;
  text-align: left;
  color: var(--sf-ink);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.09) 0 4px, transparent 4px calc(100% - 4px), rgba(0, 0, 0, 0.09) calc(100% - 4px)),
    linear-gradient(180deg, var(--sf-paper), var(--sf-paper-deep));
  box-shadow: var(--sf-shadow-object), inset 0 0 0 1px var(--sf-line);
  cursor: pointer;
  transition: transform 120ms ease;
}

.sf-bag:hover,
.sf-bag:focus-visible {
  transform: translateY(-4px);
}

.sf-bag::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  border-radius: 3px 3px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 5px),
    var(--sf-bag-accent, var(--sf-accent-omni));
}

.sf-bag__name {
  display: block;
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-sm);
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.sf-bag__meta {
  display: block;
  margin-top: var(--sf-space-1);
  color: var(--sf-ink-soft);
  font-size: var(--sf-text-xs);
}

.sf-bag--filter {
  --sf-bag-accent: var(--sf-accent-filter);
}

.sf-bag--espresso {
  --sf-bag-accent: var(--sf-accent-espresso);
}

.sf-bag--omni {
  --sf-bag-accent: var(--sf-accent-omni);
}

.sf-card {
  padding: var(--sf-space-4);
  border-radius: var(--sf-r-lg);
  background: var(--sf-paper);
  border: 1px solid var(--sf-line);
  box-shadow: var(--sf-shadow-card);
}

.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-2);
  min-height: 44px;
  padding: 0 var(--sf-space-4);
  border: none;
  border-radius: var(--sf-r-pill);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  color: #fff6ec;
  background: linear-gradient(180deg, var(--sf-wood-face), var(--sf-wood-body));
  box-shadow: 0 4px 0 -1px var(--sf-wood-edge), var(--sf-shadow-card);
  cursor: pointer;
}

.sf-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 -1px var(--sf-wood-edge);
}

.sf-btn--ghost {
  color: var(--sf-ink);
  background: var(--sf-paper);
  border: 1px solid var(--sf-line);
  box-shadow: var(--sf-shadow-card);
}

.sf-btn--danger {
  color: var(--sf-danger);
  background: var(--sf-paper);
  border: 1px solid currentColor;
  box-shadow: var(--sf-shadow-card);
}

.sf-field {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sf-space-3);
  border-radius: var(--sf-r-md);
  border: 1px solid var(--sf-line);
  font: inherit;
  color: var(--sf-ink);
  background: var(--sf-paper);
}

textarea.sf-field {
  padding: var(--sf-space-3);
  resize: vertical;
}

.sf-field::placeholder {
  color: var(--sf-ink-soft);
}

.sf-field:focus-visible {
  outline: 2px solid var(--sf-wood-face);
  outline-offset: 1px;
}

.sf-tag {
  display: inline-block;
  padding: var(--sf-space-1) var(--sf-space-3);
  border-radius: var(--sf-r-pill);
  font-size: var(--sf-text-xs);
  color: var(--sf-ink);
  background: var(--sf-wall-deep);
  border: 1px solid var(--sf-line);
}

.sf-meter {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: var(--sf-space-3);
  margin-bottom: var(--sf-space-2);
  font-size: var(--sf-text-sm);
}

.sf-meter__track {
  height: 8px;
  border-radius: var(--sf-r-pill);
  background: var(--sf-wall-deep);
  border: 1px solid var(--sf-line);
  overflow: hidden;
}

.sf-meter__fill {
  height: 100%;
  border-radius: var(--sf-r-pill);
  background: linear-gradient(90deg, var(--sf-wood-face), var(--sf-wood-edge));
}

.sf-row {
  display: flex;
  gap: var(--sf-space-2);
  margin-bottom: var(--sf-space-4);
}

.sf-row > .sf-field {
  flex: 1;
}

.sf-form {
  display: grid;
  gap: var(--sf-space-2);
}

.sf-form fieldset {
  display: grid;
  gap: var(--sf-space-2);
  margin: 0;
  padding: var(--sf-space-3);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r-md);
}

.sf-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sf-space-2);
}

.sf-list {
  display: grid;
  gap: var(--sf-space-2);
  margin: 0 0 var(--sf-space-4);
  padding: 0;
  list-style: none;
}

.sf-list li {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  cursor: pointer;
}

.sf-list li::before {
  content: "";
  flex: 0 0 34px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sf-wood-lip), var(--sf-wood-body) 60%, var(--sf-wood-edge));
}

.sf-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sf-space-2) var(--sf-space-3);
  margin: 0;
}

.sf-dl dt {
  color: var(--sf-ink-soft);
}

.sf-dl dd {
  margin: 0;
}

.sf-error {
  padding: var(--sf-space-3);
  border-radius: var(--sf-r-md);
  color: var(--sf-danger);
  background: var(--sf-paper);
  border: 1px solid currentColor;
  white-space: pre-wrap;
}

@media (min-width: 640px) {
  :root {
    --sf-text-xl: 30px;
    --sf-shelf-rise: 132px;
  }

  .sf-shelf__items {
    gap: var(--sf-space-5);
    padding: 0 var(--sf-space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-bag {
    transition: none;
  }
}