.tlr-wrap { max-width: 760px; margin: 0 auto; padding: 12px; }
.tlr-card { border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); background: #fff; overflow: hidden; }
.tlr-header { padding: 16px 16px 10px; }
.tlr-title { font-size: 20px; font-weight: 700; line-height: 1.2; }
.tlr-sub { margin-top: 6px; font-size: 14px; opacity: 0.75; }

.tlr-progress { display:flex; justify-content:space-between; align-items:center; padding:10px 16px 8px; border-top:1px solid rgba(0,0,0,0.06); border-bottom:1px solid rgba(0,0,0,0.06); }
.tlr-dots { display:flex; gap:6px; }
.tlr-dot { width:10px; height:10px; border-radius:999px; background:rgba(0,0,0,0.15); }
.tlr-dot.on { background:rgba(0,0,0,0.65); }
.tlr-count { font-size:12px; opacity:0.7; }

.tlr-stage { position:relative; width:100%; aspect-ratio:4/5; background:#f6f2e8; }
.tlr-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tlr-hotspots { position:absolute; inset:0; }

.tlr-hotspot {
  position:absolute;
  border:2px dashed rgba(255,255,255,0.0);
  background:rgba(255,255,255,0.0);
  border-radius:14px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.tlr-hotspot:active { transform: scale(0.99); }
.tlr-hotspot.found { outline:3px solid rgba(255,255,255,0.55); background:rgba(255,255,255,0.12); }

.tlr-message {
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  padding:10px 14px; border-radius:999px; background:rgba(0,0,0,0.82);
  color:#fff; font-size:13px; opacity:0; pointer-events:none;
  transition: opacity 180ms ease; z-index:9999;
}
.tlr-message.show { opacity:1; }

.tlr-sheet { position:fixed; inset:0; background:rgba(0,0,0,0.25); opacity:0; pointer-events:none; transition:opacity 180ms ease; z-index:9998; }
.tlr-sheet.open { opacity:1; pointer-events:auto; }
.tlr-sheet-inner {
  position:absolute; left:12px; right:12px; bottom:12px;
  border-radius:22px; background:#fbf6ea; box-shadow:0 18px 50px rgba(0,0,0,0.18);
  padding:14px; border:1px solid rgba(0,0,0,0.06);
}
.tlr-sheet-title { font-weight:800; font-size:16px; }
.tlr-sheet-sub { margin-top:6px; font-size:13px; opacity:0.75; }
.tlr-input { margin-top:12px; width:100%; padding:12px; border-radius:14px; border:1px solid rgba(0,0,0,0.12); font-size:16px; background:rgba(255,255,255,0.75); }
.tlr-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.tlr-btn { border:0; border-radius:14px; padding:10px 12px; font-size:14px; cursor:pointer; }
.tlr-btn.primary { background:rgba(0,0,0,0.86); color:#fff; }
.tlr-btn.ghost { background:rgba(0,0,0,0.06); }

.tlr-done { padding:14px 16px; border-top:1px solid rgba(0,0,0,0.06); background:#fffaf0; }
.tlr-done-title { font-weight:800; }
.tlr-done-sub { margin-top:6px; font-size:13px; opacity:0.75; }

.tlr-footer { padding:12px 16px 16px; }
.tlr-small { font-size:12px; opacity:0.7; }

.tlr-loading { position:absolute; inset:0; display:grid; place-items:center; font-size:14px; background:rgba(255,255,255,0.72); }