* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #fafafa;
  color: #202020;
  font:
    15px system-ui,
    sans-serif;
}
button,
select,
input {
  font: inherit;
  color: inherit;
}
button,
select {
  border: 1px solid #d5d5d5;
  background: white;
  border-radius: 5px;
  padding: 10px 14px;
  cursor: pointer;
}
button:focus-visible,
select:focus-visible {
  outline: 2px solid #555;
  outline-offset: 3px;
}
button:disabled,
select:disabled {
  opacity: 0.4;
  cursor: default;
}
[hidden] {
  display: none !important;
}
.sr-only,
.settings label {
  font-size: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
header,
main,
.item-tray {
  width: min(960px, 100%);
  margin: auto;
}
header {
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
h1 {
  font-size: 20px;
  letter-spacing: -0.5px;
  margin: 0;
}
header button {
  font-size: 13px;
  border: 0;
  background: transparent;
  padding: 10px 0;
}
h2 {
  font-size: 20px;
  margin: 12px 0;
}
h3 {
  font-size: 15px;
  margin-top: 24px;
}
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#connection-message {
  max-width: 912px;
  margin: 0 auto;
  color: #666;
  font-size: 13px;
}
#connection-message:empty {
  display: none;
}
main {
  padding: 0 24px;
}
.settings {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  height: 40px;
  margin-bottom: 12px;
}
.settings label {
  min-width: 0;
  display: block;
}
.settings label + label {
  border-left: 1px solid #ddd;
}
.settings select {
  font-size: 13px;
  border: 0;
  background: transparent;
  padding: 8px;
  max-width: 100%;
  text-overflow: ellipsis;
}
.settings label:first-child {
  max-width: 50%;
}
.stage {
  height: clamp(280px, calc(100svh - 390px), 640px);
  position: relative;
  background: #eaeaea;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.layout section > .actions {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  gap: 20px;
  height: 96px;
  max-width: 400px;
  margin: auto;
}
.layout .actions > #camera,
.layout .actions > #upload {
  border: 0;
  background: transparent;
  font-size: 13px;
  padding: 12px 0;
  justify-self: center;
}
.layout .actions > #capture {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid #222;
  background: #222;
  box-shadow: inset 0 0 0 5px #fafafa;
  justify-self: center;
}
#capture:active:not(:disabled) {
  transform: scale(0.94);
}
#status {
  font-size: 12px;
  color: #666;
  min-height: 18px;
  margin: 0 0 10px;
  text-align: center;
  overflow-wrap: anywhere;
}
.item-tray {
  padding: 0 24px 14px;
  border-top: 1px solid #e2e2e2;
  touch-action: pan-x;
}
.tray-heading {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.tray-heading button {
  border: 0;
  background: transparent;
  padding: 8px 0;
  font-size: 13px;
}
#recent-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 0 4px;
  min-height: 84px;
}
.recent-item {
  flex: 0 0 108px;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
}
.recent-item img {
  width: 108px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.recent-item span {
  display: block;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 5px;
}
.empty-tray {
  font-size: 13px;
  color: #888;
  margin: 22px 0;
}
.row {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  overflow-wrap: anywhere;
}
.row img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 3px;
}
.row span {
  min-width: 0;
}
.row small {
  display: block;
  margin-top: 5px;
  color: #666;
  font-size: 12px;
}
dialog {
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 8px;
  max-width: calc(100% - 24px);
}
dialog::backdrop {
  background: #0005;
}
#drawer {
  margin: 0 0 0 auto;
  width: 440px;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  overflow: auto;
}
#drawer .top {
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: -24px;
  background: white;
  z-index: 1;
  padding: 12px 0;
}
#drawer .top h2 {
  flex: 1;
  font-size: 17px;
}
#drawer .top button {
  font-size: 13px;
  border: 0;
  padding: 10px 0;
}
#detail:empty {
  display: none;
}
#drawer[data-view="detail"] #list {
  display: none;
}
.detail-photo {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  margin: 12px 0 20px;
  border-radius: 4px;
}
#detail p,
#detail li {
  line-height: 1.55;
  overflow-wrap: anywhere;
}
#detail p {
  color: #555;
  font-size: 14px;
}
#detail .price {
  font-size: 24px;
  font-weight: 600;
  color: #202020;
  margin: 10px 0 20px;
}
#detail a {
  color: #164d85;
  overflow-wrap: anywhere;
}
#detail .metadata {
  font-size: 12px;
  color: #777;
}
#account {
  width: 460px;
}
#account .actions {
  margin-top: 18px;
}
.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  overflow-wrap: anywhere;
}
#account-status {
  overflow-wrap: anywhere;
}
.error {
  color: #a11 !important;
}
.notifications {
  position: fixed;
  bottom: 160px;
  left: 24px;
  width: min(350px, calc(100% - 48px));
  z-index: 3;
  display: grid;
  gap: 8px;
  max-height: 25vh;
  overflow-y: auto;
}
.notifications:empty {
  display: none;
}
.notification {
  display: flex;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 10px #0001;
}
.notification button {
  border: 0;
  background: none;
  font-size: 13px;
  text-align: left;
}
.notification button:first-child {
  flex: 1;
}
.notification button:last-child {
  font-size: 11px;
  color: #777;
  padding: 8px;
}
@media (max-width: 600px) {
  header {
    height: 56px;
    padding: 0 16px;
  }
  main {
    padding: 0 12px;
  }
  .settings {
    height: 34px;
    margin-bottom: 8px;
  }
  .settings select {
    font-size: 12px;
    padding: 8px 6px;
  }
  .stage {
    height: clamp(250px, calc(100svh - 365px), 680px);
  }
  .layout section > .actions {
    height: 88px;
    gap: 12px;
  }
  .item-tray {
    padding: 0 16px 10px;
  }
  #connection-message {
    padding: 0 16px;
  }
  #drawer {
    margin: auto 0 0;
    width: 100%;
    height: 90dvh;
    max-height: 90dvh;
    border-radius: 12px 12px 0 0;
    padding: 20px;
  }
  #drawer .top {
    top: -20px;
  }
  .notifications {
    left: 16px;
    width: calc(100% - 32px);
    bottom: 146px;
  }
  .account-row {
    flex-wrap: wrap;
  }
}

.notifications {
  top: 116px;
  bottom: auto;
  right: 24px;
  left: auto;
}
@media (max-width: 600px) {
  .notifications {
    top: 108px;
    bottom: auto;
    left: 20px;
    right: 20px;
    width: auto;
  }
}

/* Full-screen camera composition, following the approved visual reference. */
body{height:100dvh;overflow:hidden;background:#26231e;color:#fff9ed;font-family:Arial,Helvetica,sans-serif}
header{position:fixed;z-index:3;inset:0 0 auto;width:100%;max-width:none;height:100px;padding:24px 40px;pointer-events:none}
header h1{font:36px 'Times New Roman',Times,serif;letter-spacing:-1.7px;font-weight:400;text-shadow:0 1px 10px #0005}
header .actions{align-items:center;gap:24px;pointer-events:auto}
header button{border:1px solid #fff9ed99;background:#30292030;color:#fff9ed;padding:10px 20px;border-radius:32px;backdrop-filter:blur(16px)}
button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;display:block}
.settings-toggle{display:flex;gap:14px;align-items:center}header #connect{width:44px;height:44px;padding:10px;display:grid;place-items:center}
main{padding:0;width:100%;height:100%;max-width:none}.stage{position:fixed;inset:0;height:100dvh;border-radius:0;background:#51483c}
#placeholder{position:absolute;inset:0;background:url('/assets/antique-room-desktop.9c2fcbbe7648.avif') center/cover no-repeat}
.stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0005,transparent 20%,transparent 55%,#000b)}
.stage video{position:absolute;inset:0;object-fit:cover}
.capture-controls{position:fixed;z-index:2;bottom:34px;left:50%;transform:translateX(-50%);text-align:center;width:420px;max-width:100%}
.capture-mode{font-size:11px;letter-spacing:3px;margin:0 0 18px}.capture-controls .actions{display:flex;justify-content:center;align-items:center;gap:70px;flex-wrap:nowrap}
.capture-controls button{padding:12px;border:0;background:none;color:#fff8e9}.capture-controls button svg{width:32px;height:32px}
.capture-controls #capture{flex:none;width:94px;height:94px;border-radius:50%;border:2px solid #fff9ed;background:#fff5e4;box-shadow:inset 0 0 0 5px #383126;padding:0}
.capture-controls #capture:disabled{opacity:.5}.keyboard-hint{font-size:12px;letter-spacing:.5px;color:#e1d6c0b0;margin:16px 0 0}
.camera-start{position:fixed;left:50%;top:48%;transform:translate(-50%,-50%);border:1px solid #fff8e999;background:#27231cb0;color:#fff8e9;backdrop-filter:blur(18px);border-radius:30px;padding:14px 26px;z-index:2}
.camera-active .camera-start{top:110px;left:auto;right:40px;transform:none;padding:9px 16px;font-size:12px}
#connection-message{position:fixed;bottom:32px;left:36px;z-index:2;margin:0;color:#e4dbc9ad;max-width:27%;font-size:12px;line-height:1.5;padding:0}
#status{position:fixed;bottom:210px;left:50%;transform:translateX(-50%);width:min(480px,80%);color:#fff9ed;z-index:3;font-size:13px;text-shadow:0 1px 6px #000;margin:0;pointer-events:none}
.item-tray{position:fixed;z-index:2;bottom:58px;right:36px;left:auto;width:auto;max-width:28%;margin:0;padding:0;border:0}
#items{display:flex;align-items:center;gap:22px;padding:0;background:none;border:0;text-align:left;color:#fff9ed;font-size:13px}
.collection-stack{display:block;position:relative;width:70px;height:80px;flex:none}.collection-stack:before,.collection-stack:after{content:'';position:absolute;inset:3px;background:#d8cdb9;border:3px solid #fff9ed;transform:rotate(-12deg)}.collection-stack:after{transform:rotate(9deg)}
.collection-cover{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:#a99d89;border:4px solid #fff9ed;box-shadow:0 3px 15px #0003}.collection-cover img{width:100%;height:100%;object-fit:cover}.collection-cover svg{width:30px;height:30px}.collection-copy small{display:block;max-width:160px;color:#e4dbc9ad;font-size:12px;margin-top:9px;line-height:1.5}
#recent-list[hidden]{display:none!important}
button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #c9ad7b;outline-offset:6px}
dialog{color:#28241e;background:#faf7f0;border:0;border-radius:18px;padding:28px;box-shadow:0 20px 100px #0005}dialog::backdrop{background:#15110c88;backdrop-filter:blur(8px)}dialog h2{font:30px 'Times New Roman',Times,serif;font-weight:400;letter-spacing:-.5px}dialog button,dialog select{background:#fffcf6;color:#28241e;border-color:#d9d2c4;border-radius:8px}dialog .top{display:flex;align-items:center;justify-content:space-between;gap:16px}dialog .top button{border:0;background:none}dialog p{line-height:1.6}
#settings-dialog{width:420px}.settings{display:grid;gap:22px;height:auto;justify-content:stretch;margin:24px 0 8px}.settings label{font-size:12px;max-width:none!important;border:0!important;color:#746b5d}.settings select{display:block;width:100%;font-size:15px;margin-top:8px;padding:12px;background:#eee9df;border-radius:8px}
#drawer{width:480px;background:#faf7f0;padding:28px}#drawer .top{background:#faf7f0;top:-28px}#drawer .top h2{font:26px 'Times New Roman',Times,serif}.row{background:transparent;border:0;border-bottom:1px solid #e2dacd;border-radius:0;padding:16px 0;margin:0}.row img{width:80px;height:80px;border-radius:8px}.row small{color:#8a7d69}.detail-photo{max-height:42dvh;border-radius:10px}#detail a{color:#755326}.notifications{top:110px;right:36px;color:#28241e}.notification{background:#faf7f0}
@media(max-width:800px){header{height:82px;padding:18px 22px}header h1{font-size:30px}header .actions{gap:12px}.settings-toggle{padding:10px 14px}.settings-toggle svg{width:20px;height:20px}header #connect{width:40px;height:40px}.capture-controls{bottom:36px;width:100%;padding:0 20px}.capture-controls .actions{gap:44px}.capture-controls #capture{width:82px;height:82px}.capture-mode{margin-bottom:14px}.keyboard-hint{display:none}.item-tray{bottom:168px;right:24px;max-width:55%}.collection-stack{width:42px;height:49px}#items{gap:14px;font-size:12px}.collection-copy small{font-size:10px;margin-top:4px}.collection-cover{border-width:3px}.collection-cover svg{width:22px;height:22px}#connection-message{left:22px;bottom:174px;max-width:36%;font-size:10px}#status{bottom:250px;font-size:12px}.camera-active .camera-start{top:90px;right:22px}#placeholder{background-image:url('/assets/antique-room-mobile.f886d12ff7b9.avif');background-position:center bottom}.notifications{top:90px;left:22px;right:22px;width:auto}#drawer{height:94dvh;max-height:94dvh;width:100%;border-radius:20px 20px 0 0;padding:22px}#drawer .top{top:-22px}#drawer .top h2{font-size:23px}}
@media(max-height:520px) and (min-width:601px){header{height:72px;padding:14px 28px}.capture-controls{bottom:16px}.capture-controls #capture{width:68px;height:68px}.keyboard-hint{display:none}.capture-mode{margin-bottom:10px}.item-tray{bottom:24px}.camera-start{top:40%}#status{bottom:140px}}
.layout .capture-controls .actions > #capture{width:94px;height:94px;background:#fff5e4;border:2px solid #fff9ed;box-shadow:inset 0 0 0 5px #383126}
.layout .capture-controls .actions > #capture:disabled{opacity:.7}
@media(max-width:800px){.layout .capture-controls .actions > #capture{width:82px;height:82px}#connection-message{color:#eee5d4;text-shadow:0 1px 5px #000}}
@media(max-height:520px) and (min-width:601px){.layout .capture-controls .actions > #capture{width:68px;height:68px}}