:root{--fgr-primary:#4f46e5;--fgr-primary-hover:#4338ca;--fgr-secondary:#059669;--fgr-bg-light:#f8fafc;--fgr-bg-card:rgba(255, 255, 255, 0.8);--fgr-text-main:#1e293b;--fgr-text-muted:#64748b;--fgr-border:rgba(0, 0, 0, 0.08);--fgr-success:#10b981;--fgr-warning:#f59e0b;--fgr-error:#ef4444;--fgr-glass:blur(16px);--fgr-shadow:0 10px 40px -10px rgba(0, 0, 0, 0.1);--fgr-radius:16px;--fgr-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}#face-golden-ratio-tool{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--fgr-text-main);background:radial-gradient(circle at top,#eff6ff,#f8fafc);min-height:100vh;padding:1.5rem;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;line-height:1.4}#face-golden-ratio-tool *{box-sizing:border-box}.fgr-header{text-align:center;margin-bottom:2.5rem;animation:fadeInDown 0.8s cubic-bezier(.16,1,.3,1)}.fgr-top-badge{display:inline-block;background:rgb(79 70 229 / .1);color:var(--fgr-primary);padding:.25rem .85rem;border-radius:100px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem}.fgr-accent-text{color:var(--fgr-primary)}.fgr-header h1{font-size:2.25rem;font-weight:800;letter-spacing:-.025em;color:var(--fgr-text-main);margin:0 0 .25rem 0}.fgr-header p{color:var(--fgr-text-muted);font-size:1rem;margin:0;max-width:600px;margin-left:auto;margin-right:auto}.fgr-main{width:100%;max-width:1000px}.fgr-card,.fgr-result-card{background:var(--fgr-bg-card);backdrop-filter:var(--fgr-glass);border:1px solid var(--fgr-border);border-radius:var(--fgr-radius);padding:1.5rem;box-shadow:0 20px 50px -12px rgb(0 0 0 / .15);transition:var(--fgr-transition);position:relative;overflow:hidden}.fgr-result-card::after{content:'';position:absolute;top:0;left:0;right:0;height:100%;background:linear-gradient(135deg,rgb(255 255 255 / .4) 0%,transparent 50%);pointer-events:none}.fgr-result-card{display:flex;gap:3rem;align-items:center}.fgr-upload-area{border:2px dashed rgb(0 0 0 / .1);border-radius:var(--fgr-radius);padding:1.5rem 1rem;text-align:center;cursor:pointer;transition:var(--fgr-transition);background:rgb(255 255 255 / .3);position:relative}.fgr-upload-area::before,.fgr-upload-area::after{content:'';position:absolute;width:20px;height:20px;border-color:var(--fgr-primary);border-style:solid;pointer-events:none;opacity:.3;transition:var(--fgr-transition)}.fgr-upload-area::before{top:-2px;left:-2px;border-width:3px 0 0 3px;border-top-left-radius:var(--fgr-radius)}.fgr-upload-area::after{bottom:-2px;right:-2px;border-width:0 3px 3px 0;border-bottom-right-radius:var(--fgr-radius)}.fgr-upload-area:hover::before,.fgr-upload-area:hover::after,.fgr-upload-area.dragover::before,.fgr-upload-area.dragover::after{opacity:1;width:30px;height:30px}.fgr-upload-area:hover,.fgr-upload-area.dragover{border-color:var(--fgr-primary);background:rgb(79 70 229 / .05)}.fgr-icon-upload{color:var(--fgr-primary);margin-bottom:1rem}.fgr-upload-area h3{margin:0 0 .5rem 0;font-size:1.25rem}.fgr-subtext{font-size:.875rem;color:var(--fgr-text-muted);margin-bottom:1.5rem}.fgr-btn{padding:.75rem 1.5rem;border-radius:8px;border:none;font-weight:500;font-size:1rem;cursor:pointer;transition:var(--fgr-transition);display:inline-flex;align-items:center;gap:.5rem}.fgr-btn-primary{background:linear-gradient(135deg,var(--fgr-primary),#6366f1);color:#fff;box-shadow:0 4px 12px rgb(79 70 229 / .25);border:1px solid rgb(255 255 255 / .1)}.fgr-btn-primary:hover{background:linear-gradient(135deg,var(--fgr-primary-hover),#4f46e5);transform:translateY(-2px) scale(1.02);box-shadow:0 8px 20px rgb(79 70 229 / .4)}.fgr-btn-pulse{animation:fgr-pulse 2s infinite}@keyframes fgr-pulse{0%{box-shadow:0 0 0 0 rgb(79 70 229 / .4)}70%{box-shadow:0 0 0 10px #fff0}100%{box-shadow:0 0 0 0 #fff0}}.fgr-btn-secondary{background:rgb(79 70 229 / .05);color:var(--fgr-primary);border:1px solid rgb(79 70 229 / .2)}.fgr-btn-secondary:hover{background:var(--fgr-primary);color:#fff;border-color:var(--fgr-primary);transform:translateY(-2px);box-shadow:0 4px 12px rgb(79 70 229 / .2)}.fgr-btn:active{transform:scale(.98)}.fgr-loading{display:flex;flex-direction:column;align-items:center;margin:3rem 0}.fgr-spinner{width:48px;height:48px;border:4px solid rgb(0 0 0 / .05);border-left-color:var(--fgr-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.fgr-result-container{animation:fadeInUp 0.6s ease-out}.fgr-image-wrapper{position:relative;flex:1.2;margin-bottom:0;border-radius:var(--fgr-radius);overflow:hidden;box-shadow:0 8px 30px rgb(0 0 0 / .1);background:#fff;border:1px solid var(--fgr-border)}#fgr-preview-image{width:100%;display:block;height:auto}#fgr-overlay-canvas{position:absolute;top:0;left:0;width:100%;height:100%}.fgr-scanner-line{position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,transparent,var(--fgr-primary),transparent);box-shadow:0 0 15px var(--fgr-primary);z-index:10;display:none;pointer-events:none}.fgr-scanner-active .fgr-scanner-line{display:block;animation:scan 2s linear infinite}@keyframes scan{0%{top:0%}50%{top:100%}100%{top:0%}}.fgr-scores{flex:1;padding:0}.fgr-score-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;gap:2rem}.fgr-header-main{flex:2;min-width:0}.fgr-header-title-row{display:flex;flex-direction:row;align-items:center;gap:.75rem}.fgr-score-header h2{margin:0;font-size:1.5rem;font-weight:900;color:var(--fgr-text-main);line-height:1.1;white-space:nowrap}.fgr-metrics-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-bottom:1.5rem}.fgr-metric-group h3{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fgr-text-muted);margin:0 0 .75rem 0}.fgr-info-icon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;background:var(--fgr-border);color:var(--fgr-text-muted);font-size:9px;font-style:normal;border-radius:50%;margin-left:4px;cursor:help;transition:var(--fgr-transition)}.fgr-info-icon:hover{background:var(--fgr-primary);color:#fff}.fgr-btn-accent{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 4px 12px rgb(245 158 11 / .2)}.fgr-btn-accent:hover{background:linear-gradient(135deg,#d97706,#b45309);transform:translateY(-2px);box-shadow:0 6px 16px rgb(245 158 11 / .3)}.fgr-badge{padding:.35rem .85rem;border-radius:30px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:#e0e7ff;color:var(--fgr-primary);border:1px solid rgb(79 70 229 / .3);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.fgr-metric{margin-bottom:1rem}.fgr-metric-label{display:flex;justify-content:space-between;margin-bottom:.5rem;font-weight:500}.fgr-progress-bg{height:12px;background:rgb(0 0 0 / .04);border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 4px rgb(0 0 0 / .05)}#fgr-bar-face{background:linear-gradient(90deg,#4f46e5,#818cf8)}#fgr-bar-eyes{background:linear-gradient(90deg,#6366f1,#a5b4fc)}#fgr-bar-mouth{background:linear-gradient(90deg,#8b5cf6,#c4b5fd)}#fgr-bar-ocular{background:linear-gradient(90deg,#0d9488,#5eead4)}#fgr-bar-nasal{background:linear-gradient(90deg,#059669,#34d399)}#fgr-bar-symmetry{background:linear-gradient(90deg,#10b981,#6ee7b7)}.fgr-progress-fill{height:100%;border-radius:10px;transition:width 1.5s cubic-bezier(.34,1.56,.64,1)}.fgr-total-score{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.25rem 1.5rem;background:rgb(79 70 229 / .04);border-radius:12px;border:1px solid rgb(79 70 229 / .1);min-width:170px;text-align:center}.fgr-total-score span{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--fgr-text-muted);font-weight:700;margin-bottom:.25rem;white-space:nowrap}.fgr-total-score strong{font-size:3rem;line-height:1;font-weight:900;color:var(--fgr-primary);letter-spacing:-.05em;text-shadow:0 5px 15px rgb(79 70 229 / .15)}.fgr-results-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;margin-top:1.5rem;padding:.75rem 1rem;background:rgb(79 70 229 / .03);border:1px solid rgb(79 70 229 / .1);border-radius:50px}.fgr-is-capturing .fgr-toolbar-primary,.fgr-is-capturing .fgr-toolbar-divider,.fgr-is-capturing .fgr-toolbar-share{display:none!important}.fgr-is-capturing .fgr-results-toolbar{background:#fff0;border:none;padding:0;margin-top:1rem}.fgr-is-capturing .fgr-capture-footer{display:block!important;width:100%;text-align:center}.fgr-capture-cta{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.65rem 1rem;background:var(--fgr-primary);color:#fff;border-radius:12px;text-decoration:none;box-shadow:0 4px 15px rgb(79 70 229 / .2);transition:var(--fgr-transition)}.fgr-capture-cta:hover{background:var(--fgr-primary-hover);transform:translateY(-1px)}.fgr-cta-text{font-weight:700;font-size:1rem;letter-spacing:-.01em}.fgr-cta-url{font-size:.7rem;opacity:.9;font-weight:500;text-decoration:underline;text-underline-offset:2px}@media (max-width:600px){.fgr-score-header{flex-direction:column;gap:1rem;align-items:center}.fgr-header-title-row{justify-content:center}.fgr-score-header h2{white-space:normal;text-align:center}.fgr-total-score{width:100%}.fgr-total-score span{white-space:normal}.fgr-results-toolbar{border-radius:20px;padding:1.25rem;gap:1rem}.fgr-toolbar-divider{display:none}.fgr-toolbar-primary,.fgr-toolbar-share{width:100%;justify-content:center}}.fgr-toolbar-primary{display:flex;gap:.75rem}.fgr-toolbar-divider{width:1px;height:24px;background:var(--fgr-border)}.fgr-toolbar-share{display:flex;align-items:center;gap:.75rem}.fgr-toolbar-share span{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--fgr-text-muted)}.fgr-result-footer-standalone{width:100%;text-align:center;margin-top:1.5rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--fgr-text-muted);opacity:.6}.fgr-share-icons{display:flex;align-items:center;gap:.75rem}.fgr-share-icons a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgb(0 0 0 / .03);color:var(--fgr-text-muted);transition:all 0.3s cubic-bezier(.4,0,.2,1)}.fgr-share-icons a svg{width:18px;height:18px}#share-facebook{color:#1877F2}#share-facebook:hover{background:#1877F2;color:#fff}#share-instagram{color:#E4405F}#share-instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc23b3,#bc1888);color:#fff}#share-tiktok{color:#000}#share-tiktok:hover{background:#000;color:#fff}#share-whatsapp{color:#25D366}#share-whatsapp:hover{background:#25D366;color:#fff}.fgr-share-icons a:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 0 0 / .15)}.fgr-error{width:100%;max-width:600px;margin:0 auto 2rem auto;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem 1.5rem;background:linear-gradient(135deg,#fff1f2 0%,#ffe4e6 100%);color:#e11d48;border-radius:12px;border:1px solid #fecdd3;font-size:.95rem;font-weight:600;box-shadow:0 4px 12px rgb(225 29 72 / .08);animation:fadeInDown 0.5s cubic-bezier(.16,1,.3,1)}.fgr-error-icon{flex-shrink:0;color:#e11d48}.fgr-error.hidden{display:none!important}.hidden{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:900px){.fgr-result-card{flex-direction:column;gap:2rem}.fgr-image-wrapper{width:100%}}@media (max-width:640px){.fgr-actions{flex-direction:column}.fgr-header h1{font-size:1.5rem}.fgr-header p{font-size:.9rem}.fgr-header{margin-bottom:1.5rem}#face-golden-ratio-tool{padding:.75rem}}.fgr-capture-footer{display:none;padding:.75rem 1rem;background:#4f46e5;border-radius:0 0 16px 16px;margin-top:1.5rem}.fgr-is-capturing .fgr-capture-footer{display:block!important}.fgr-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 0.3s ease}.fgr-modal-overlay{position:absolute;width:100%;height:100%;background:rgb(15 23 42 / .6);backdrop-filter:blur(4px)}.fgr-modal-content{position:relative;width:90%;max-width:450px;background:#fff;border-radius:24px;padding:2rem;box-shadow:0 25px 50px -12px rgb(0 0 0 / .25);transform:translateY(0);transition:transform 0.3s cubic-bezier(.16,1,.3,1);z-index:10}.fgr-modal.hidden{display:none!important}.fgr-modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;cursor:pointer;color:var(--fgr-text-muted);padding:.5rem;border-radius:50%;transition:all 0.2s}.fgr-modal-close:hover{background:#f1f5f9;color:var(--fgr-text)}.fgr-modal-header{text-align:center;margin-bottom:1.5rem}.fgr-modal-icon{width:64px;height:64px;background:rgb(16 185 129 / .1);color:#10b981;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem auto}.fgr-modal-header h2{font-size:1.5rem;font-weight:800;color:#0f172a;margin:0}.fgr-modal-body p{text-align:center;color:var(--fgr-text-muted);line-height:1.6;margin-bottom:2rem}.fgr-guide-steps{display:flex;flex-direction:column;gap:1rem}.fgr-step{display:flex;align-items:center;gap:1rem;padding:1rem;background:#f8fafc;border-radius:12px;border:1px solid #f1f5f9}.fgr-step-num{width:28px;height:28px;background:var(--fgr-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}.fgr-step p{margin:0;font-size:.95rem;text-align:left;color:#334155}.fgr-modal-footer{margin-top:2rem}.fgr-modal-footer .fgr-btn{width:100%}.fgr-toast-container{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;gap:.75rem}.fgr-toast{padding:.75rem 1.5rem;background:#1e293b;color:#fff;border-radius:50px;font-size:.9rem;font-weight:600;box-shadow:0 10px 15px -3px rgb(0 0 0 / .1);animation:toastIn 0.3s cubic-bezier(.16,1,.3,1),toastOut 0.3s cubic-bezier(.16,1,.3,1) 2.7s forwards;display:flex;align-items:center;gap:.5rem}@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}