:root{
  --bg:#ffffff;
  --text:#0b0d10;
  --muted:#5c6675;
  --line:#e7e9ee;
  --primary:#2563eb;
  --primary2:#1d4ed8;
  --shadow:0 18px 60px rgba(0,0,0,.12);
  --shadow2:0 10px 30px rgba(0,0,0,.10);
  --radius:18px;
  --accent:#2563eb;
  --accentRing:rgba(37,99,235,.25);

  --landingBg:#dfe3ea; /* slightly darker than light gray */
  --storeBg:#0b1020;
  --storeLine:rgba(255,255,255,.10);
  --storeText:#eaf0ff;
  --storeMuted:rgba(234,240,255,.72);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:13px}
.shell{width:100%;max-width:none;margin:0;padding:16px 16px 34px}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
.topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.brand{display:flex;align-items:center}
.topbar-logo{height:32px;width:auto;display:block}
.ghost{background:transparent;color:var(--text);border:1px solid var(--line);height:42px;border-radius:14px;padding:0 14px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.ghost:hover{border-color:#cfd5df}
.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border:1px solid transparent;height:54px;border-radius:16px;padding:0 16px;font-weight:900;cursor:pointer;box-shadow:0 14px 30px rgba(37,99,235,.18);transition:transform .08s ease,opacity .12s ease}
.primary:hover{transform:translateY(-1px)}
.primary:active{transform:translateY(0);opacity:.92}
.secondary{background:#f3f4f6;color:var(--text);border:1px solid #e5e7eb;height:46px;border-radius:16px;padding:0 14px;font-weight:900;cursor:pointer}
.link-btn{text-decoration:none}
.search{flex:1;height:54px;border-radius:16px;border:1px solid var(--line);background:#fff;color:var(--text);padding:0 16px;font-size:16px;outline:none}
.search:focus{border-color:rgba(37,99,235,.55);box-shadow:0 0 0 6px rgba(37,99,235,.10)}
.home{min-height:calc(100vh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:36px}
.home-logo{width:min(740px,96vw);height:auto;display:block}
.home-search{margin-top:18px;display:flex;gap:10px;width:min(760px,96vw);align-items:center}
.home-subactions{position:fixed;left:18px;bottom:18px;z-index:60;width:auto;display:flex;justify-content:flex-start}
.result-wrap{margin-top:18px;width:min(760px,96vw)}
.card{display:flex;justify-content:space-between;align-items:center;padding:16px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.card-title{font-weight:900;font-size:18px}
.card-sub{font-size:13px;color:var(--muted);margin-top:4px}
.pill{display:inline-flex;margin-top:10px;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#f8fafc;color:var(--muted)}
.view-landing{background:var(--landingBg);border-radius:22px;padding:10px}
.landing{display:grid;place-items:start center;min-height:calc(100vh - 64px);padding:26px 0 46px;background:radial-gradient(900px 420px at 20% 0%, rgba(99,102,241,.12), transparent 60%), radial-gradient(900px 420px at 80% 10%, rgba(234,88,12,.10), transparent 55%), #f8fafc}
.landing-card{width:min(1100px,100%);border-radius:22px;border:1px solid #d1d5db;box-shadow:var(--shadow);overflow:hidden;background:#fff;display:grid;grid-template-columns:1.2fr .8fr}
.landing-img{height:420px}
.landing-img img{width:100%;height:100%;object-fit:cover;display:block}
.landing-body{padding:18px}
.landing-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.view-store{background:var(--storeBg);border-radius:22px;padding:14px;color:var(--storeText)}
.view-store .muted{color:var(--storeMuted)}
.view-store .ghost{color:var(--storeText);border-color:var(--storeLine)}
.view-store .ghost:hover{border-color:rgba(255,255,255,.22)}
.view-store .nav{border-color:var(--storeLine);background:rgba(255,255,255,.06);color:var(--storeText)}
.view-store .mini{border-color:var(--storeLine);background:rgba(255,255,255,.06);color:var(--storeText)}
.view-store .badge{border-color:var(--storeLine);background:rgba(15,23,42,.72);color:var(--storeText)}
.view-store .thumb{border-color:var(--storeLine);background:rgba(255,255,255,.06)}
.store-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 0 14px;flex-wrap:wrap}
.store-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
/* Request + Clear live in a reserved slot above the store buttons (no overlap, no shifting). */
.store-actions-wrap{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.store-cta-slot{height:52px;display:flex;align-items:center;justify-content:center}
.store-cta{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:nowrap;pointer-events:auto}
/* Fade-in/out for request + clear without shifting layout */
.store-cta .cta-fade{opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .18s ease, transform .18s ease}
.store-cta .cta-fade.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.request-outside{height:42px;border-radius:14px;padding:0 14px;font-weight:900;border:1px solid transparent;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 14px 30px rgba(37,99,235,.20)}
.clear-outside{height:42px}

@media (max-width: 720px){
  .home-subactions{left:12px;bottom:12px}
  .store-cta-slot{height:52px}
}
.viewer{display:grid;grid-template-columns:54px 1fr 54px;align-items:center;gap:10px}
.nav{width:54px;height:54px;border-radius:16px;border:1px solid var(--line);background:#fff;color:var(--text);font-size:18px;cursor:pointer;box-shadow:var(--shadow2)}
.frame{position:relative;border-radius:22px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid var(--storeLine);box-shadow:0 18px 60px rgba(0,0,0,.30);min-height:520px;touch-action:pan-y}
.frame.grab{cursor:grab}
.frame.grabbing{cursor:grabbing}
.zoomWrap{position:relative;width:100%;transform-origin:0 0}
.zoomWrap img{width:100%;height:auto;display:block;user-select:none}
.marker-layer{position:absolute;inset:0;pointer-events:none}
.marker{position:absolute;width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 8px var(--accentRing);transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer}
.marker::after{content:"";position:absolute;inset:-10px;border-radius:999px;border:2px solid rgba(37,99,235,.25)}
.hud{position:absolute;left:0;right:0;bottom:0;padding:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(180deg,transparent,rgba(15,23,42,.82))}
.hud-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hud-right{display:flex;gap:10px;align-items:center}
.badge{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.85)}
.zoom-controls{position:absolute;left:14px;top:14px;display:flex;gap:8px}
.mini{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:#fff;font-weight:900;cursor:pointer;box-shadow:var(--shadow2)}
.thumbs{display:flex;gap:10px;overflow:auto;padding:12px 2px 2px;margin-top:10px}
.thumb{width:140px;border-radius:14px;border:1px solid var(--line);overflow:hidden;background:#fff;cursor:pointer;flex:0 0 auto;opacity:.85}
.thumb img{width:100%;height:auto;display:block}
.thumb.active{border-color:rgba(37,99,235,.55);opacity:1}
.hold-wheel{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.hold-wheel svg{display:block}
.hw-bg{fill:none;stroke:rgba(255,255,255,.85);stroke-width:5}
.hw-fg{fill:none;stroke:rgba(37,99,235,.98);stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:23px 23px;stroke-dasharray:113.097;stroke-dashoffset:113.097;filter:drop-shadow(0 10px 18px rgba(0,0,0,.25))}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;padding:18px;overflow:auto;display:flex;align-items:flex-start;justify-content:center}
.modal{width:min(1040px,100%);border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;max-height:calc(100vh - 36px)}
.modal-top{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:16px 16px 10px;border-bottom:1px solid var(--line);background:#fff}
.modal-title{font-weight:900;font-size:18px}
.modal-body{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;padding:14px;overflow:auto;max-height:calc(100vh - 110px)}
.apply-grid{grid-template-columns:1fr}
.preview{position:relative;border-radius:18px;overflow:hidden;background:#f8fafc;border:1px solid var(--line);min-height:360px}
.preview-meta{position:absolute;left:12px;bottom:12px;display:flex;gap:10px;flex-wrap:wrap}
.shot{width:100%;height:100%;background:#111;position:relative}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
/* Canvas closeups should scale exactly like images so dot coordinates stay accurate */
.shot-canvas{width:100%;height:100%;display:block}
.closeup-bg{position:absolute;inset:0;background:#111 center/cover no-repeat}
.shot-dot{position:absolute;width:10px;height:10px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 8px var(--accentRing);transform:translate(-50%,-50%)}
.shot-dot::after{content:"";position:absolute;inset:-10px;border-radius:999px;border:2px solid rgba(37,99,235,.25)}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);margin-bottom:12px}
.form input,.form textarea{border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--text);padding:12px;outline:none;font-size:14px}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tiny{font-size:12px;margin-top:8px}
.confirm-title{font-weight:900;font-size:16px}
.confirm-actions{display:flex;gap:10px;margin:10px 0;flex-wrap:wrap}
.request-text{margin:0;padding:12px;border-radius:14px;border:1px solid var(--line);background:#f8fafc;max-height:220px;overflow:auto;font-size:12px}
.sep{border:none;border-top:1px solid var(--line);margin:12px 0}
.list-title{font-weight:900;margin:4px 0 10px}
.marked-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto;padding-right:4px;overflow-x:hidden}
.item-row{display:grid;grid-template-columns:74px minmax(0,1fr) 120px 42px;gap:8px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:10px;background:#fff}
.item-thumb{width:74px;height:54px;border-radius:12px;overflow:hidden;border:1px solid var(--line);position:relative;background:#111}
.item-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.item-thumb .shot-dot{width:8px;height:8px;box-shadow:0 0 0 6px var(--accentRing)}
.item-meta{min-width:0;display:flex;flex-direction:column;gap:3px}
.item-title{font-weight:900;font-size:13px}
.item-sub{font-size:12px;color:var(--muted)}
.qty-input{height:40px;border-radius:12px;border:1px solid var(--line);padding:0 10px;font-weight:900;width:74px}
.qty-wrap{display:flex;align-items:center;gap:8px}
.qty-label{font-size:12px;font-weight:900;color:rgba(15,23,42,.72)}
.icon-btn{width:42px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:900}
.item-row.active{border-color:rgba(37,99,235,.55);box-shadow:0 0 0 4px rgba(37,99,235,.10)}
@media (max-width:980px){
  .landing-card{grid-template-columns:1fr}
  .viewer{grid-template-columns:44px 1fr 44px}
  .nav{width:44px;height:44px;border-radius:14px}
  .modal-body{grid-template-columns:1fr}
  .preview{min-height:220px}
  .primary{height:50px}
  .search{height:50px}
  .topbar-logo{height:28px}
}

.item-thumb .closeup-bg{position:absolute;inset:0}


/* --- Anti-spam: Honeypot + lightweight captcha (MVP) --- */
.hp-wrap{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.hp-label{font-size:0; line-height:0;}
.captcha{
  margin-top:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fafbfc;
}
.captcha-q{
  font-weight:900;
  margin-bottom:8px;
}
.captcha-row{
  display:flex;
  gap:10px;
  align-items:center;
}
.captcha-row input{
  flex:1;
}
.captcha-refresh{
  height:46px;
  width:56px;
  padding:0;
  border-radius:14px;
  font-weight:900;
}
.error{color:#b91c1c;}


/* ENCLAVE_TUNING_V13 */

/* Tighten Apply modal so it fits without scrolling on most screens */
#applyBackdrop .modal{
  max-width: 520px;
}
#applyBackdrop .modal-top{
  padding: 12px 14px;
}
#applyBackdrop .modal-body{
  padding: 12px 14px 14px;
}
#applyBackdrop .form label{
  font-size: 13px;
}
#applyBackdrop .form input,
#applyBackdrop .form textarea,
#applyBackdrop .form select{
  padding: 8px 10px;
  font-size: 14px;
}
#applyBackdrop .form textarea{
  min-height: 78px; /* ~3 rows */
}
#applyBackdrop .apply-grid{
  gap: 12px;
}
#applyBackdrop .captcha{
  padding: 10px;
}
#applyBackdrop .captcha-row{
  gap: 8px;
}
#applyBackdrop .form-actions{
  margin-top: 8px;
  gap: 10px;
}

/* If viewport is short, keep it comfortable without scrolling much */
@media (max-height: 740px){
  #applyBackdrop .modal-top{ padding: 10px 12px; }
  #applyBackdrop .modal-body{ padding: 10px 12px 12px; }
  #applyBackdrop .form textarea{ min-height: 64px; }
  #applyBackdrop .captcha{ padding: 8px; }
}

/* Add a subtle border around main search results */
.result-wrap{
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(20,20,20,0.22);
  padding: 10px 12px;
}


/* ENCLAVE_SHARPNESS_V15 */
/* Sharper image rendering in the main viewer and allow deeper zoom */
.zoomWrap{will-change:transform;backface-visibility:hidden;transform-style:preserve-3d}
.zoomWrap img{
  width:100%;
  height:auto;
  display:block;
  user-select:none;
  image-rendering:auto;
  image-rendering:high-quality;
  image-rendering:-webkit-optimize-contrast;
  backface-visibility:hidden;
  -webkit-user-drag:none;
}
.frame{
  min-height:560px;
}
#zoomInBtn,#zoomOutBtn,#zoomResetBtn{
  min-width:40px;
}


/* ENCLAVE_FULLRES_ZOOM_V16 */
.zoomWrap{
  position:relative;
  width:max-content;
  height:auto;
  transform-origin:0 0;
  will-change:transform;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.zoomWrap img{
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  display:block;
  user-select:none;
  image-rendering:auto;
  image-rendering:high-quality;
  image-rendering:-webkit-optimize-contrast;
  backface-visibility:hidden;
  -webkit-user-drag:none;
}
.frame{
  min-height:560px;
  overflow:hidden;
}
.marker-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}


/* ENCLAVE_STREETVIEW_V17 */
.frame{
  cursor: grab;
}
.frame.grabbing{
  cursor: grabbing;
}
.zoomWrap{
  transition: transform 70ms linear;
}
.frame.grabbing .zoomWrap,
.frame.dragging .zoomWrap{
  transition: none;
}