/* Leo The Handyman - 3D Design Studio - Premium Dark Luxury */
.leo-3d-wrapper { font-family: 'Inter', system-ui, sans-serif; background: #0A0F1E; color: #fff; border-radius: 24px; overflow: hidden; border: 1px solid rgba(201,168,106,0.2); }
.leo-3d-hero { background: radial-gradient(ellipse at top, #1A2A4A 0%, #0A1931 100%); padding: 40px; text-align: center; border-bottom: 1px solid rgba(201,168,106,0.15); }
.leo-3d-hero h1 { font-size: 42px; font-weight: 900; line-height: 1.1; margin: 0; background: linear-gradient(180deg, #FFEBB5 0%, #C9A86A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.leo-3d-hero p { color: #C9A86A; margin-top: 12px; font-size: 18px; }
.leo-3d-steps { display: flex; justify-content: center; gap: 24px; margin-top: 24px; }
.leo-3d-step { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); padding: 8px 16px; border-radius: 999px; font-size: 13px; border: 1px solid rgba(255,255,255,0.08); }
.leo-3d-main { display: grid; grid-template-columns: 380px 1fr; min-height: 700px; }
.leo-3d-controls { background: #0F1D35; padding: 28px; border-right: 1px solid rgba(201,168,106,0.15); overflow-y: auto; }
.leo-3d-label { font-size: 12px; letter-spacing: 1.2px; color: #C9A86A; font-weight: 700; margin: 22px 0 10px; text-transform: uppercase; }
.leo-3d-upload { border: 2px dashed rgba(201,168,106,0.3); background: rgba(201,168,106,0.06); border-radius: 16px; padding: 28px; text-align: center; cursor: pointer; transition: all .2s; }
.leo-3d-upload:hover { border-color: #C9A86A; background: rgba(201,168,106,0.12); }
.leo-3d-pill { display: inline-block; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); font-size: 13px; margin: 4px; cursor: pointer; transition: all .2s; }
.leo-3d-pill.active { background: #C9A86A; color: #0A1931; border-color: #C9A86A; font-weight: 700; }
.leo-3d-style-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all .2s; background: rgba(255,255,255,0.03); }
.leo-3d-style-card.active { border-color: #C9A86A; box-shadow: 0 0 0 2px #C9A86A; }
.leo-3d-style-card img { width: 100%; height: 80px; object-fit: cover; }
.leo-3d-style-card span { display: block; padding: 8px; font-size: 12px; font-weight: 600; }
.leo-3d-btn { width: 100%; background: linear-gradient(180deg, #FFD87A 0%, #C9A86A 100%); color: #0A1931; border: 0; padding: 18px; border-radius: 14px; font-weight: 900; font-size: 16px; cursor: pointer; box-shadow: 0 8px 24px rgba(201,168,106,0.3); transition: transform .2s; margin-top: 20px; }
.leo-3d-btn:hover { transform: translateY(-2px); }
.leo-3d-preview { background: #080E1E; padding: 24px; display: flex; flex-direction: column; }
.leo-3d-result-box { flex: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; min-height: 500px; }
.leo-3d-before-after { position: relative; width: 100%; height: 100%; }
.leo-3d-badge { position: absolute; top: 16px; left: 16px; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1px; border: 1px solid rgba(255,255,255,0.15); z-index: 5; }
.leo-3d-actions { display: flex; gap: 12px; margin-top: 16px; }
.leo-3d-actions button { flex: 1; padding: 14px; border-radius: 12px; font-weight: 700; cursor: pointer; }
.leo-3d-actions .primary { background: #fff; color: #0A1931; border: 0; }
.leo-3d-actions .secondary { background: transparent; color: #C9A86A; border: 1px solid #C9A86A; }
@media(max-width:900px){ .leo-3d-main{ grid-template-columns:1fr } }