/* ════════════════════════════════════════════════════════════════════════════
   INSIGHT Photo to 3D — app-specific styles on top of the template style.css.
   Only theme variables are used, so light/dark both work.
════════════════════════════════════════════════════════════════════════════ */
.p3d-hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.p3d-link { margin-left:auto; font-size:11px; font-weight:600; color:var(--accent); cursor:pointer; text-transform:none; letter-spacing:0; }
.p3d-link:hover { text-decoration:underline; }
.p3d-steps { padding-left:20px; display:flex; flex-direction:column; gap:7px; }
.p3d-steps li { font-size:13px; color:var(--text-muted); line-height:1.55; }
.p3d-tips { list-style:none; display:flex; flex-direction:column; gap:8px; }
.p3d-tips li { font-size:13px; color:var(--text-muted); line-height:1.5; display:flex; gap:8px; align-items:flex-start; }
.p3d-tips li i { color:var(--accent); font-size:11px; margin-top:4px; flex-shrink:0; }

/* ─── Model cards ──────────────────────────────────────────────────────────── */
.p3d-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; margin-bottom:16px; }
.p3d-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; overflow:hidden; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,0.05); transition:border-color .15s, transform .15s, box-shadow .15s; }
.p3d-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.10); }
.p3d-card-thumb { height:140px; background:var(--bg-stripe); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); }
.p3d-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.p3d-card-thumb i { font-size:42px; color:var(--text-dim); }
.p3d-card-body { padding:10px 12px 12px; }
.p3d-card-title { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p3d-card-meta { font-size:11px; color:var(--text-muted); margin-top:3px; }

/* ─── New model: photo drop zones ──────────────────────────────────────────── */
.p3d-drops { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.p3d-drop { position:relative; border:2px dashed var(--border-strong); border-radius:10px; background:var(--bg-stripe); cursor:pointer; display:flex; flex-direction:column; overflow:hidden; outline:none; transition:border-color .15s, background .15s; }
.p3d-drop:hover, .p3d-drop:focus, .p3d-drop.drag { border-color:var(--accent); background:var(--bg-hover); }
.p3d-drop.has-photo { border-style:solid; border-color:var(--border); }
.p3d-drop img { width:100%; aspect-ratio:4/3; object-fit:contain; background:var(--bg); display:block; }
.p3d-drop-empty { aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-dim); font-size:12px; text-align:center; padding:10px; }
.p3d-drop-empty i { font-size:30px; }
.p3d-drop-label { padding:8px 10px 10px; border-top:1px solid var(--border); background:var(--bg-card); display:flex; flex-direction:column; gap:2px; }
.p3d-drop-label b { font-size:12px; color:var(--text); }
.p3d-drop-label span { font-size:11px; color:var(--text-muted); line-height:1.35; }
.p3d-drop.required .p3d-drop-label b { color:var(--accent); }
.p3d-drop-remove { position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; }
.p3d-drop-remove:hover { color:#fff; background:var(--accent); border-color:var(--accent); }

.p3d-two { display:grid; grid-template-columns:3fr 2fr; gap:14px; align-items:start; }
.p3d-two > .card { margin-bottom:14px; }
.p3d-form { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.p3d-span2 { grid-column:1 / -1; }
.p3d-field { display:flex; flex-direction:column; gap:5px; }
.p3d-field > span { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; }
.p3d-field input, .p3d-field select, .p3d-field textarea { width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:6px; background:var(--bg); color:var(--text); font-family:inherit; font-size:13px; resize:vertical; }
.p3d-field input:focus, .p3d-field select:focus, .p3d-field textarea:focus { outline:none; border-color:var(--accent); }
.p3d-gen-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
.p3d-gen-row .btn:disabled { opacity:.55; cursor:default; }
.p3d-gen-status { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); }
.p3d-gen-status i { color:var(--accent); }
.p3d-gen-status b { color:var(--text); font-variant-numeric:tabular-nums; }

/* ─── Viewer ───────────────────────────────────────────────────────────────── */
.p3d-viewer { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; align-items:start; }
.p3d-stage-wrap { position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.p3d-stage { width:100%; height:calc(100vh - var(--header-h) - var(--toolbar-h) - 120px); min-height:360px; }
.p3d-stage canvas { display:block; width:100% !important; height:100% !important; cursor:grab; }
.p3d-stage canvas:active { cursor:grabbing; }
.p3d-stage-tools { position:absolute; top:10px; right:10px; display:flex; gap:6px; }
.p3d-stage-tools .on { color:var(--accent); border-color:var(--accent); }
.p3d-info { margin-bottom:0; }
.p3d-info-row { display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.p3d-info-row:last-of-type { border-bottom:none; }
.p3d-info-k { flex:0 0 112px; font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.4px; padding-top:1px; }
.p3d-info-v { flex:1; min-width:0; color:var(--text); line-height:1.45; word-break:break-word; }
.p3d-conf { display:flex; align-items:center; gap:8px; }
.p3d-conf-bar { flex:1; height:6px; border-radius:3px; background:var(--border); overflow:hidden; }
.p3d-conf-bar div { height:100%; border-radius:3px; }
.p3d-conf span { font-size:12px; font-variant-numeric:tabular-nums; color:var(--text-muted); }
.p3d-assume { margin-top:10px; }
.p3d-assume ul { margin:6px 0 0 18px; display:flex; flex-direction:column; gap:4px; }
.p3d-assume li { font-size:12px; color:var(--text-muted); line-height:1.45; }
.p3d-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

/* ─── Additional photos (multi / ZIP) ──────────────────────────────────────── */
.p3d-count { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:none; letter-spacing:0; background:var(--bg-hover); border-radius:10px; padding:1px 8px; }
.p3d-extra-btns { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; text-transform:none; letter-spacing:0; }
.p3d-extra-btns .btn { padding:5px 10px; font-size:12px; }
.p3d-extra-btns .btn:disabled { opacity:.55; cursor:default; }
.p3d-extra { border:2px dashed var(--border-strong); border-radius:10px; background:var(--bg-stripe); min-height:110px; padding:10px; outline:none; transition:border-color .15s, background .15s; }
.p3d-extra.drag, .p3d-extra:focus { border-color:var(--accent); background:var(--bg-hover); }
.p3d-extra-empty { aspect-ratio:auto; min-height:86px; cursor:pointer; }
.p3d-extra-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; }
.p3d-extra-item { position:relative; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--bg); }
.p3d-extra-item img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.p3d-extra-item .p3d-drop-remove { width:22px; height:22px; top:4px; right:4px; font-size:11px; }
.p3d-extra-n { position:absolute; left:4px; bottom:4px; font-size:10px; font-weight:700; color:var(--text); background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:0 6px; }
.p3d-hint { margin-top:8px; font-size:11.5px; color:var(--text-muted); display:flex; gap:6px; align-items:center; }
.p3d-hint i { color:var(--accent); }

/* ─── Public sharing ───────────────────────────────────────────────────────── */
.p3d-card-thumb { position:relative; }
.p3d-badge-pub { position:absolute; top:8px; left:8px; font-size:10.5px; font-weight:700; color:#fff; background:#16a085; border-radius:10px; padding:2px 8px; display:flex; align-items:center; gap:4px; }
.p3d-card-thumb .p3d-badge-pub i { font-size:10px; color:#fff; }
.p3d-vis { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; border-radius:10px; padding:2px 10px; }
.p3d-vis.pub { color:#fff; background:#16a085; }
.p3d-vis.priv { color:var(--text-muted); background:var(--bg-hover); }
.p3d-vis-hint { font-size:11.5px; color:var(--text-muted); margin-top:4px; }

/* ─── How it works ─────────────────────────────────────────────────────────── */
.p3d-pipe { list-style:none; display:flex; flex-direction:column; gap:12px; }
.p3d-pipe li { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--text-muted); line-height:1.55; }
.p3d-pipe li > i { color:var(--accent); width:18px; text-align:center; margin-top:3px; flex-shrink:0; }
.p3d-pipe-n { flex:0 0 22px; height:22px; border-radius:50%; background:var(--bg-hover); color:var(--text); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.p3d-prompt { white-space:pre-wrap; word-break:break-word; font-family:Consolas, 'Courier New', monospace; font-size:12px; line-height:1.55; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:14px 16px; max-height:520px; overflow:auto; }

@media (max-width:1100px) {
  .p3d-drops { grid-template-columns:repeat(2, 1fr); }
  .p3d-two, .p3d-viewer { grid-template-columns:1fr; }
  .p3d-stage { height:60vh; }
}
@media (max-width:768px) {
  .p3d-form { grid-template-columns:1fr; }
}