/* TOOL PAGE STYLES */
.tool-hero{text-align:center;padding:40px 24px 24px;position:relative;}
.tool-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(245,197,24,0.08),transparent 65%);pointer-events:none;}
.tool-hero h1{font-family:"Playfair Display",serif;font-size:clamp(28px,5vw,52px);font-weight:900;margin-bottom:8px;}
.tool-hero h1 em{color:var(--amber);font-style:italic;}
.tool-hero p{font-size:14px;color:var(--muted);}

.tool-app{max-width:1100px;margin:0 auto;padding:24px 24px 80px;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:768px){.tool-app{grid-template-columns:1fr;}}

/* UPLOAD */
.upload-zone{border:2px dashed rgba(245,197,24,0.25);border-radius:14px;padding:36px 20px;text-align:center;cursor:pointer;transition:all 0.3s;position:relative;background:rgba(245,197,24,0.02);}
.upload-zone:hover,.upload-zone.drag-over{border-color:rgba(245,197,24,0.6);background:rgba(245,197,24,0.06);}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.upload-icon{font-size:40px;display:block;margin-bottom:12px;}
.upload-title{font-family:"Playfair Display",serif;font-size:18px;font-weight:700;margin-bottom:8px;}
.upload-sub{font-size:12px;color:var(--muted);line-height:1.6;}
.upload-sub strong{color:var(--cream);}

/* STYLE GRID */
.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px;}
.style-btn{border:1px solid var(--border);background:rgba(255,255,255,0.03);border-radius:12px;padding:12px 6px;text-align:center;cursor:pointer;transition:all 0.25s;position:relative;overflow:hidden;}
.style-btn:hover{border-color:rgba(245,197,24,0.35);background:rgba(245,197,24,0.04);}
.style-btn.active{border-color:var(--amber);background:rgba(245,197,24,0.1);}
.style-btn.active::after{content:"✓";position:absolute;top:5px;right:7px;font-size:10px;color:var(--amber);font-weight:700;}
.s-emoji{font-size:26px;display:block;margin-bottom:5px;}
.s-name{font-size:11px;font-weight:600;color:var(--cream);line-height:1.2;}
.s-desc{font-size:9px;color:var(--muted);margin-top:2px;}

/* SLIDER */
.slider-wrap{margin-bottom:18px;}
.slider-label{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:7px;}
.slider-label span:last-child{color:var(--amber);font-weight:500;}
input[type=range]{width:100%;-webkit-appearance:none;height:3px;border-radius:100px;background:rgba(255,255,255,0.1);outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--amber);cursor:pointer;box-shadow:0 0 8px rgba(245,197,24,0.5);}

/* APPLY BTN */
.apply-btn{width:100%;background:linear-gradient(135deg,#F5C518,#FFD700);color:#0D0D0D;border:none;border-radius:100px;padding:15px 24px;font-size:15px;font-weight:700;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:8px;font-family:"DM Sans",sans-serif;position:relative;overflow:hidden;}
.apply-btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(245,197,24,0.3);}
.apply-btn:disabled{opacity:0.35;cursor:not-allowed;transform:none;}

/* STATUS */
.status-bar{background:rgba(245,197,24,0.07);border:1px solid rgba(245,197,24,0.18);border-radius:10px;padding:11px 14px;font-size:12px;color:var(--amber);margin-top:14px;display:flex;align-items:center;gap:8px;min-height:42px;}
.status-bar .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0;animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.3;transform:scale(0.7)}}
.status-bar.success{background:rgba(34,197,94,0.07);border-color:rgba(34,197,94,0.2);color:#86efac;}
.status-bar.success .dot{background:#86efac;animation:none;}
.status-bar.error{background:rgba(239,68,68,0.07);border-color:rgba(239,68,68,0.18);color:#fca5a5;}
.status-bar.error .dot{background:#fca5a5;animation:none;}

/* CANVAS */
.canvas-wrap{position:relative;background:rgba(0,0,0,0.25);border-radius:14px;overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center;}
#result-canvas{display:none;max-width:100%;max-height:500px;border-radius:12px;}
.canvas-placeholder{text-align:center;padding:40px 20px;}
.ph-logo{width:80px;height:80px;border-radius:50%;object-fit:cover;opacity:0.15;margin:0 auto 14px;display:block;}
.canvas-placeholder p{color:var(--muted);font-size:13px;line-height:1.6;}
.dl-section{display:none;margin-top:14px;flex-direction:column;gap:8px;}
.dl-btn{width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--cream);border-radius:100px;padding:12px 18px;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.25s;font-family:"DM Sans",sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;}
.dl-btn:hover{background:rgba(245,197,24,0.08);border-color:rgba(245,197,24,0.3);color:var(--amber);transform:translateY(-1px);}
.gold-outline{border-color:rgba(245,197,24,0.25) !important;color:var(--amber) !important;}

/* LOADER */
#model-loader{position:fixed;inset:0;background:rgba(13,13,13,0.97);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9998;}
.loader-logo{width:100px;height:100px;border-radius:50%;object-fit:cover;margin-bottom:22px;animation:float 2s ease-in-out infinite;border:2px solid rgba(245,197,24,0.3);box-shadow:0 0 40px rgba(245,197,24,0.2);}
.loader-title{font-family:"Playfair Display",serif;font-size:13px;font-weight:700;color:var(--amber);margin-bottom:6px;letter-spacing:3px;text-transform:uppercase;}
.loader-sub{font-size:13px;color:var(--muted);margin-bottom:28px;}
.loader-bar-wrap{width:260px;height:2px;background:rgba(255,255,255,0.08);border-radius:100px;overflow:hidden;}
.loader-bar{height:100%;background:linear-gradient(90deg,var(--amber),var(--gold));border-radius:100px;width:0%;transition:width 0.5s ease;}
.loader-status{font-size:11px;color:var(--muted);margin-top:10px;letter-spacing:1px;}

/* ═══ CAMERA STYLES ═══ */
.source-tabs{display:flex;gap:8px;margin-bottom:18px;}
.source-tab{flex:1;background:rgba(255,255,255,0.03);border:1px solid var(--border);color:var(--muted);border-radius:12px;padding:11px 8px;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.25s;font-family:"DM Sans",sans-serif;}
.source-tab:hover{border-color:rgba(245,197,24,0.3);color:var(--cream);}
.source-tab.active{background:rgba(245,197,24,0.1);border-color:var(--amber);color:var(--amber);font-weight:700;}

.camera-wrap{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/3;}
.camera-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);}
.camera-wrap canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);}

.live-badge{position:absolute;top:12px;left:12px;background:rgba(220,38,38,0.85);color:#fff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:100px;letter-spacing:2px;animation:blink 1.5s ease-in-out infinite;z-index:10;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.4}}

.live-status-bar{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.65);color:var(--amber);font-size:12px;font-weight:600;padding:10px 16px;text-align:center;z-index:10;backdrop-filter:blur(4px);}

.camera-btns{display:flex;gap:10px;margin-top:14px;}
.capture-btn{flex:1;background:linear-gradient(135deg,var(--amber),var(--gold));color:#0D0D0D;border:none;border-radius:100px;padding:14px;font-size:14px;font-weight:700;cursor:pointer;font-family:"DM Sans",sans-serif;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:6px;}
.capture-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(245,197,24,0.3);}
.stop-btn{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;border-radius:100px;padding:14px 18px;font-size:13px;cursor:pointer;font-family:"DM Sans",sans-serif;transition:all 0.25s;}
.stop-btn:hover{background:rgba(239,68,68,0.2);}

.camera-tips{background:rgba(245,197,24,0.05);border:1px solid rgba(245,197,24,0.12);border-radius:10px;padding:10px 14px;margin-top:12px;font-size:11px;color:var(--muted);text-align:center;line-height:1.6;}