*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --gf-black:#0a0a0a; --gf-white:#FFF; --gf-lime:#E2E2E2;
    --border:rgba(255,255,255,.10); --bg-card:rgba(255,255,255,.04);
    --radius:8px; --font:-apple-system,BlinkMacSystemFont,'Inter',sans-serif;
}


/* ── GHOSTFRAME shared color tokens (synced with design-system.css) ── */
:root {
  --gf-bg:           #0a0a0a;
  --gf-surface:      #111111;
  --gf-surface-2:    #1a1a1a;
  --gf-border:       rgba(255,255,255,0.10);
  --gf-border-solid: #2a2a2a;
  --gf-text:         #e2e2e2;
  --gf-text-dim:     #888888;
  --gf-accent:       #E2E2E2;
  --gf-amber:        #FFA500;
  --gf-danger:       #ff4444;
  --gf-success:      #4ade80;
  --gf-radius:       12px;
  --gf-radius-sm:    8px;
  --gf-radius-lg:    20px;
}

html { scroll-behavior:smooth; }
body { background:var(--gf-black); color:var(--gf-white); font-family:var(--font); min-height:100vh; }

.gf-top-bar { position:sticky;top:0;z-index:100;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(10,10,10,.9);border-bottom:1px solid var(--border);backdrop-filter:blur(12px); }
.gf-top-bar__back { display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.65);text-decoration:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transition:color .2s; }
.gf-top-bar__back:hover { color: var(--gf-text); }
.gf-top-bar__title { font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5); }

.page-wrap { max-width:720px;margin:0 auto;padding:28px 20px 48px; }

.hero { text-align:center;margin-bottom:28px; }
.hero h1 { font-size:26px;font-weight:800;margin-bottom:8px; }
.hero p  { font-size:13px;color:rgba(255,255,255,.5);line-height:1.6;max-width:400px;margin:0 auto; }

#upload-zone { border:1.5px dashed rgba(255,255,255,.2);border-radius:12px;padding:36px 20px;text-align:center;cursor:pointer;background:var(--bg-card);transition:border-color .25s,background .25s; }
#upload-zone:hover,.drag-over { border-color:var(--gf-lime);background:rgba(212,255,0,.04); }
#upload-zone.has-file { border-style:solid;border-color:var(--gf-lime); }
.upload-icon { font-size:30px;margin-bottom:10px;opacity:.6; }
.upload-title { font-size:14px;font-weight:600;margin-bottom:4px; }
.upload-hint  { font-size:12px;color:rgba(255,255,255,.4); }
.upload-types { font-size:10px;color:rgba(255,255,255,.25);margin-top:4px;letter-spacing:.05em;text-transform:uppercase; }
#upload-preview { display:none;margin-top:12px;border-radius:8px;overflow:hidden;max-height:180px; }
#upload-preview img { width:100%;object-fit:cover; }
.upload-actions { display:flex;gap:10px;justify-content:center;margin-top:16px; }

/* progress */
#progress-section { display:none; }
.progress-header { text-align:center;margin-bottom:20px; }
.progress-spinner { width:40px;height:40px;border-radius:50%;border:2.5px solid rgba(255,255,255,.08);border-top-color:var(--gf-lime);animation:spin .75s linear infinite;margin:0 auto 12px; }
@keyframes spin{to{transform:rotate(360deg)}}
.progress-label    { font-size:13px;font-weight:600;color: var(--gf-text); }
.progress-sublabel { font-size:11px;color:rgba(255,255,255,.4);margin-top:3px; }

.steps-list { display:flex;flex-direction:column;gap:7px;margin-bottom:20px; }
.step-row { display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:11px 14px;transition:border-color .3s,background .3s; }
.step-row.active  { border-color:var(--gf-lime);background:rgba(212,255,0,.05); }
.step-row.done    { border-color:rgba(212,255,0,.25); }
.step-icon  { font-size:16px;width:28px;text-align:center; }
.step-label { flex:1;font-size:12px;color:rgba(255,255,255,.7); }
.step-row.active .step-label { color: var(--gf-text);font-weight:600; }
.step-status { font-size:10px;color:rgba(255,255,255,.3); }
.step-row.active .step-status { color:var(--gf-lime); }
.step-row.done   .step-status { color:rgba(212,255,0,.6); }

.prog-track { width:100%;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden; }
.prog-fill  { height:100%;width:0%;background:var(--gf-lime);border-radius:3px;transition:width .4s ease; }

.input-tabs { display:flex;gap:0;margin-bottom:14px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden; }
.input-tab { flex:1;padding:10px;background:var(--bg-card);border:none;color:rgba(255,255,255,.5);font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s; }
.input-tab.active { background:rgba(212,255,0,.12);color:var(--gf-lime); }
.camera-view-wrap { border-radius:10px;overflow:hidden;background:var(--gf-surface); }
.camera-controls { display:flex;gap:8px;justify-content:center;margin-top:10px; }

.prog-pct { text-align:center;font-size:13px;font-weight:700;color:var(--gf-lime);margin-bottom:14px;font-variant-numeric:tabular-nums; }

/* 3d viewer */
#viewer-section { display:none; }
.viewer-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px; }
.viewer-title { font-size:16px;font-weight:700; }
.viewer-subtitle { font-size:11px;color:rgba(255,255,255,.4);margin-top:2px; }

#model-canvas { width:100%;aspect-ratio:1/1;border-radius:12px;background:var(--gf-surface);cursor:grab;display:block;max-height:420px; }
#model-canvas:active { cursor:grabbing; }

.viewer-hint { text-align:center;font-size:11px;color:rgba(255,255,255,.3);margin-top:8px; }

.model-selector { display:flex;gap:8px;overflow-x:auto;padding:12px 0 4px;scrollbar-width:none; }
.model-selector::-webkit-scrollbar { display:none; }
.model-btn { flex-shrink:0;padding:8px 14px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);cursor:pointer;font-family:var(--font);transition:border-color .2s,color .2s; white-space:nowrap; }
.model-btn.active { border-color:var(--gf-lime);color:var(--gf-lime); }

.viewer-actions { display:flex;gap:10px;margin-top:16px;flex-wrap:wrap; }

/* buttons */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 22px;border-radius:var(--radius);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;font-family:var(--font);text-decoration:none;transition:opacity .2s;border:none; }
.btn-primary   { background:var(--gf-lime);color:var(--gf-black); }
.btn-secondary { background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);border:1px solid var(--border); }
.btn:hover { opacity:.85; } .btn:disabled { opacity:.35;pointer-events:none; }

.p3d-toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(6px);background:rgba(0,0,0,0.92);color: var(--gf-text);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;padding:10px 20px;opacity:0;transition:opacity .25s,transform .25s;z-index:9999;pointer-events:none; }
.p3d-toast.show { opacity:1;transform:translateX(-50%) translateY(0); }

@media (max-width: 768px) {
  #upload-zone { padding:24px 16px; }
  .upload-actions { flex-direction:column; align-items:stretch; }
  .upload-actions .btn { text-align:center; }
  .viewer-actions { flex-direction:column; }
  .viewer-actions .btn { width:100%; }
}

@media (max-width: 480px) {
  .page-wrap { padding:16px 14px 40px; }
  .upload-title { font-size:13px; }
  #model-canvas { max-height:300px; }
}