@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--font-primary:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display:"Outfit", sans-serif;--bg-main:#0a0b10;--bg-surface:#ffffff08;--bg-surface-hover:#ffffff12;--bg-card:#12141e99;--border-color:#ffffff14;--border-color-active:#fff3;--text-main:#f3f4f6;--text-muted:#9ca3af;--text-dim:#6b7280;--accent-cyan:#00f2fe;--accent-blue:#4facfe;--accent-purple:#8a2be2;--accent-pink:#ff1493;--shadow-sm:0 2px 8px #00000080;--shadow-lg:0 10px 30px #000000b3;--glow-cyan:0 0 20px #00f2fe66;--glow-purple:0 0 20px #8a2be266;--glass-bg:#ffffff08;--glass-border:#ffffff0f;--glass-blur:blur(16px);--glass-shadow:0 8px 32px 0 #0000005e;--transition-fast:all .2s cubic-bezier(.4, 0, .2, 1);--transition-normal:all .3s cubic-bezier(.4, 0, .2, 1);--transition-slow:all .5s cubic-bezier(.4, 0, .2, 1);--border-radius-sm:8px;--border-radius-md:16px;--border-radius-lg:24px;--max-width:600px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-primary);background-color:var(--bg-main);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(at 0 0,#8a2be20d 0,#0000 50%),radial-gradient(at 100% 100%,#00f2fe0d 0,#0000 50%);min-height:100vh;line-height:1.6;overflow-x:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-main)}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}a{color:inherit;transition:var(--transition-fast);text-decoration:none}button{cursor:pointer;background:0 0;border:none;outline:none;font-family:inherit}.app-container{flex-direction:column;width:100%;min-height:100vh;display:flex}.main-content{width:100%;max-width:var(--max-width);flex-direction:column;flex:1;align-items:center;margin:0 auto;padding:2rem 1rem;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.5s cubic-bezier(.4,0,.2,1) forwards fadeIn}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--border-radius-md);box-shadow:var(--glass-shadow);width:100%;padding:2rem}.main-header{z-index:100;-webkit-backdrop-filter:blur(12px);background:#0a0b10b3;border-bottom:1px solid #ffffff0d;width:100%;position:sticky;top:0;left:0}.header-content{max-width:var(--max-width);justify-content:space-between;align-items:center;margin:0 auto;padding:1rem;display:flex}.header-logo{font-family:var(--font-display);background:linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:800;display:flex}.logo-spark{-webkit-text-fill-color:initial;font-size:1.25rem}.logo-domain{opacity:.8;font-size:1.1rem;font-weight:400}.header-badge{font-family:var(--font-display);text-transform:uppercase;letter-spacing:1px;color:var(--accent-cyan);background:linear-gradient(135deg,#00f2fe1a 0%,#4facfe1a 100%);border:1px solid #00f2fe4d;border-radius:50px;padding:.25rem .6rem;font-size:.75rem;font-weight:600;box-shadow:0 0 10px #00f2fe1a}.main-footer{background:#0a0b1080;border-top:1px solid #ffffff0d;width:100%;margin-top:auto;padding:2rem 1rem}.footer-content{max-width:var(--max-width);text-align:center;flex-direction:column;gap:.5rem;margin:0 auto;display:flex}.copyright{color:var(--text-muted);font-size:.85rem;font-family:var(--font-display)}.footer-description{color:var(--text-dim);font-size:.75rem}.main-page{flex-direction:column;gap:3rem;width:100%;display:flex}.hero-section{text-align:center;padding:3rem 1rem 1rem}.hero-title{font-family:var(--font-display);letter-spacing:-1px;margin-bottom:1.5rem;font-size:2.75rem;font-weight:800;line-height:1.25}.hero-title .highlight{background:linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.hero-subtitle{color:var(--text-muted);max-width:480px;margin:0 auto;font-size:1.05rem}.test-list-section{flex-direction:column;gap:1.5rem;display:flex}.section-title{font-family:var(--font-display);letter-spacing:-.5px;border-left:4px solid var(--accent-cyan);padding-left:.75rem;font-size:1.5rem;font-weight:700}.test-grid{flex-direction:column;gap:1.5rem;display:flex}.test-card{background:var(--bg-card);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);transition:var(--transition-normal);flex-direction:column;gap:1rem;padding:2rem;display:flex;position:relative;overflow:hidden}.test-card:before{content:"";background:radial-gradient(800px circle at var(--x,0px) var(--y,0px), #ffffff0f, transparent 40%);z-index:1;pointer-events:none;opacity:0;width:100%;height:100%;transition:opacity .5s;position:absolute;top:0;left:0}.test-card:hover:before{opacity:1}.test-card:hover{border-color:var(--border-color-active);transform:translateY(-5px)}.card-otrovert:hover{box-shadow:0 10px 30px #00f2fe26,inset 0 0 15px #00f2fe0d}.card-mbti:hover{box-shadow:0 10px 30px #8a2be226,inset 0 0 15px #8a2be20d}.card-badge{font-family:var(--font-display);border-radius:50px;padding:.25rem .6rem;font-size:.7rem;font-weight:700;position:absolute;top:1.25rem;right:1.25rem}.card-otrovert .card-badge{color:var(--accent-cyan);background:#00f2fe1a;border:1px solid #00f2fe4d}.card-mbti .card-badge{color:#c084fc;background:#8a2be21a;border:1px solid #8a2be24d}.card-icon{margin-bottom:.5rem;font-size:2.5rem}.card-title{font-family:var(--font-display);letter-spacing:-.3px;font-size:1.35rem;font-weight:700}.card-desc{color:var(--text-muted);font-size:.95rem;line-height:1.5}.card-footer{margin-top:.5rem;display:flex}.card-action{font-family:var(--font-display);color:var(--text-main);transition:var(--transition-fast);font-size:.9rem;font-weight:600}.card-otrovert:hover .card-action{color:var(--accent-cyan)}.card-mbti:hover .card-action{color:#c084fc}@media (width<=480px){.hero-title{font-size:2.25rem}}.test-page{flex-direction:column;gap:1.5rem;width:100%;display:flex}.test-header{justify-content:space-between;align-items:center;padding:.5rem 0;display:flex}.back-button{color:var(--text-muted);transition:var(--transition-fast);font-size:.9rem;font-weight:500}.back-button:hover{color:var(--text-main)}.test-badge{font-family:var(--font-display);color:var(--accent-cyan);background:#00f2fe14;border:1px solid #00f2fe33;border-radius:50px;padding:.3rem .8rem;font-size:.85rem;font-weight:700}.config-container{flex-direction:column;gap:2rem;display:flex}.config-title{font-family:var(--font-display);letter-spacing:-.5px;font-size:1.75rem;font-weight:800}.config-desc{color:var(--text-muted);margin-top:-1rem;font-size:.95rem}.config-option-group{flex-direction:column;gap:.75rem;display:flex}.config-label{font-family:var(--font-display);color:var(--text-main);font-size:1.05rem;font-weight:700}.config-buttons{grid-template-columns:repeat(3,1fr);gap:.75rem;display:grid}.config-btn{border:1px solid var(--border-color);border-radius:var(--border-radius-md);transition:var(--transition-normal);background:#ffffff05;flex-direction:column;align-items:center;gap:.25rem;padding:1rem .5rem;display:flex}.config-btn:hover{background:var(--bg-surface-hover);border-color:#ffffff26}.config-btn.active{border-color:var(--accent-cyan);background:#00f2fe0d;box-shadow:inset 0 0 10px #00f2fe1a,0 4px 15px #00f2fe1a}.config-btn .btn-title{color:var(--text-main);font-size:.95rem;font-weight:700}.config-btn.active .btn-title{color:var(--accent-cyan)}.config-btn .btn-sub{color:var(--text-dim);font-size:.75rem}.start-test-button{background:linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);color:#0a0b10;font-family:var(--font-display);border-radius:var(--border-radius-md);text-align:center;transition:var(--transition-normal);box-shadow:var(--glow-cyan);margin-top:1rem;padding:1.1rem;font-size:1.1rem;font-weight:800}.start-test-button:hover{transform:translateY(-2px);box-shadow:0 0 25px #00f2fe99}.playing-container{flex-direction:column;gap:2.5rem;min-height:400px;display:flex}.progress-section{flex-direction:column;gap:.5rem;display:flex}.progress-info{font-size:.85rem;font-family:var(--font-display);color:var(--text-muted);justify-content:space-between;font-weight:600;display:flex}.progress-bar-wrapper{background:#ffffff0d;border-radius:3px;height:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));border-radius:3px;height:100%;transition:width .3s cubic-bezier(.4,0,.2,1)}.question-card{text-align:center;justify-content:center;align-items:center;min-height:100px;animation:.4s cubic-bezier(.4,0,.2,1) fadeIn;display:flex}.question-text{word-break:keep-all;font-size:1.35rem;font-weight:600;line-height:1.5}.options-container{justify-content:center;width:100%;display:flex}.options-container.scale-2{flex-direction:row;gap:1.5rem}.options-container.scale-2 .option-button{border:1px solid var(--border-color);border-radius:var(--border-radius-lg);transition:var(--transition-normal);background:#ffffff05;flex-direction:column;flex:1;align-items:center;gap:1rem;padding:2rem 1rem;display:flex}.options-container.scale-2 .option-button:hover{background:var(--bg-surface-hover);transform:translateY(-3px)}.options-container.scale-2 .agree-2:hover{border-color:var(--accent-cyan);box-shadow:0 5px 20px #00f2fe26}.options-container.scale-2 .disagree-2:hover{border-color:var(--accent-pink);box-shadow:0 5px 20px #ff149326}.options-container.scale-2 .option-circle{border:2px solid;border-radius:50%;width:48px;height:48px;position:relative}.options-container.scale-2 .agree-2{color:var(--accent-cyan)}.options-container.scale-2 .disagree-2{color:var(--accent-pink)}.options-container.scale-2 .agree-2 .option-circle:before{content:"";border:2px solid var(--accent-cyan);border-radius:50%;width:20px;height:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.options-container.scale-2 .disagree-2 .option-circle:before,.options-container.scale-2 .disagree-2 .option-circle:after{content:"";background:var(--accent-pink);width:22px;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}.options-container.scale-2 .disagree-2 .option-circle:after{transform:translate(-50%,-50%)rotate(-45deg)}.options-container.scale-2 .option-label{color:var(--text-main);font-size:1.1rem;font-weight:700}.options-container.scale-3{flex-direction:column;gap:1rem}.options-container.scale-3 .option-button{border:1px solid var(--border-color);border-radius:var(--border-radius-md);text-align:left;transition:var(--transition-normal);background:#ffffff05;align-items:center;gap:1.25rem;padding:1.25rem 2rem;display:flex}.options-container.scale-3 .option-button:hover{background:var(--bg-surface-hover);transform:translate(5px)}.options-container.scale-3 .option-circle{border:2px solid var(--border-color);width:20px;height:20px;transition:var(--transition-fast);border-radius:50%}.options-container.scale-3 .agree-3:hover{border-color:var(--accent-cyan)}.options-container.scale-3 .agree-3:hover .option-circle{border-color:var(--accent-cyan);background:var(--accent-cyan)}.options-container.scale-3 .neutral-3:hover{border-color:var(--text-muted)}.options-container.scale-3 .neutral-3:hover .option-circle{border-color:var(--text-muted);background:var(--text-muted)}.options-container.scale-3 .disagree-3:hover{border-color:var(--accent-pink)}.options-container.scale-3 .disagree-3:hover .option-circle{border-color:var(--accent-pink);background:var(--accent-pink)}.options-container.scale-3 .option-label{color:var(--text-main);font-size:1rem;font-weight:600}.options-container.scale-5{flex-direction:row;justify-content:space-between;align-items:center;padding:1.5rem .5rem;display:flex;position:relative}.options-container.scale-5:before{content:"";z-index:1;background:#ffffff0d;height:2px;position:absolute;top:50%;left:10%;right:10%}.options-container.scale-5 .option-button{z-index:2;cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:.75rem;display:flex;position:relative}.options-container.scale-5 .option-circle{border:2px solid var(--border-color);background:var(--bg-main);transition:var(--transition-normal);border-radius:50%}.options-container.scale-5 .option-label{color:var(--text-muted);transition:var(--transition-fast);white-space:nowrap;font-size:.75rem;font-weight:600;position:absolute;bottom:-1.75rem}.options-container.scale-5 .agree-large .option-circle{width:44px;height:44px}.options-container.scale-5 .agree-small .option-circle{width:32px;height:32px}.options-container.scale-5 .neutral .option-circle{width:24px;height:24px}.options-container.scale-5 .disagree-small .option-circle{width:32px;height:32px}.options-container.scale-5 .disagree-large .option-circle{width:44px;height:44px}.options-container.scale-5 .agree-large:hover .option-circle{border-color:var(--accent-cyan);background:var(--accent-cyan);box-shadow:0 0 15px #00f2fe80}.options-container.scale-5 .agree-large:hover .option-label{color:var(--accent-cyan)}.options-container.scale-5 .agree-small:hover .option-circle{border-color:var(--accent-blue);background:var(--accent-blue);box-shadow:0 0 10px #4facfe80}.options-container.scale-5 .agree-small:hover .option-label{color:var(--accent-blue)}.options-container.scale-5 .neutral:hover .option-circle{border-color:var(--text-muted);background:var(--text-muted);box-shadow:0 0 8px #ffffff4d}.options-container.scale-5 .neutral:hover .option-label{color:var(--text-main)}.options-container.scale-5 .disagree-small:hover .option-circle{background:#f43f5e;border-color:#f43f5e;box-shadow:0 0 10px #f43f5e80}.options-container.scale-5 .disagree-small:hover .option-label{color:#f43f5e}.options-container.scale-5 .disagree-large:hover .option-circle{border-color:var(--accent-pink);background:var(--accent-pink);box-shadow:0 0 15px #ff149380}.options-container.scale-5 .disagree-large:hover .option-label{color:var(--accent-pink)}@media (width<=480px){.config-buttons{grid-template-columns:1fr}.options-container.scale-5 .option-circle{transform:scale(.95)}}.result-card-wrapper{border-radius:var(--border-radius-lg);box-sizing:border-box;width:100%;box-shadow:0 15px 35px #00000080, 0 0 30px rgba(var(--card-theme-primary), .1);transition:var(--transition-normal);border:1px solid #ffffff14;padding:2.25rem;position:relative;overflow:hidden;background-color:#12141e!important}.result-card-wrapper:after{content:"";border-radius:var(--border-radius-lg);width:100%;height:100%;box-shadow:inset 0 0 0 1px var(--card-theme-primary);opacity:.3;pointer-events:none;position:absolute;top:0;left:0}.result-card-inner{z-index:2;flex-direction:column;gap:1.5rem;display:flex;position:relative}.card-header-decor{opacity:.5;align-items:center;gap:.5rem;display:flex}.decor-dot{background-color:var(--card-theme-primary);width:6px;height:6px;box-shadow:0 0 8px var(--card-theme-primary);border-radius:50%}.decor-line{background:linear-gradient(90deg, var(--card-theme-primary), transparent);flex:1;height:1px}.result-brand{font-family:var(--font-display);letter-spacing:2px;color:var(--text-dim);font-size:.75rem;font-weight:700}.result-title-section{flex-direction:column;gap:.5rem;display:flex}.result-subtitle{color:var(--text-muted);font-size:.95rem;font-weight:500}.result-title{font-family:var(--font-display);letter-spacing:-.5px;background:linear-gradient(135deg, var(--text-main) 30%, var(--card-theme-primary) 100%);-webkit-text-fill-color:transparent;text-shadow:0 2px 10px #0000004d;-webkit-background-clip:text;font-size:1.85rem;font-weight:800}.traits-container{flex-wrap:wrap;gap:.5rem;display:flex}.trait-tag{font-family:var(--font-display);color:var(--card-theme-primary);background:#ffffff08;border:1px solid #ffffff14;border-radius:50px;padding:.3rem .75rem;font-size:.8rem;font-weight:600;box-shadow:inset 0 0 8px #ffffff05}.divider{background:linear-gradient(90deg,#ffffff0d,#ffffff03);height:1px}.description-section{flex-direction:column;gap:1rem;display:flex}.desc-paragraph{color:var(--text-muted);word-break:keep-all;text-align:justify;font-size:.95rem;line-height:1.6}.card-footer-decor{font-family:var(--font-display);letter-spacing:1px;justify-content:space-between;align-items:center;margin-top:1rem;font-size:.7rem;font-weight:700;display:flex}.scan-text{color:var(--card-theme-primary);opacity:.8;text-shadow:0 0 5px var(--card-theme-primary)}.url-text{color:var(--text-dim)}.result-page{flex-direction:column;gap:2rem;width:100%;display:flex}.result-card-container{perspective:1000px;width:100%}.result-actions-panel{flex-direction:column;gap:1.25rem;display:flex}.actions-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.action-btn{font-family:var(--font-display);border-radius:var(--border-radius-md);transition:var(--transition-normal);justify-content:center;align-items:center;gap:.5rem;padding:1rem;font-size:1rem;font-weight:700;display:flex}.btn-save{background:linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-blue) 100%);color:#0a0b10;box-shadow:var(--glow-cyan)}.btn-save:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 25px #00f2fe99}.btn-share{border:1px solid var(--border-color);color:var(--text-main);background:#ffffff0d}.btn-share:hover{background:var(--bg-surface-hover);border-color:var(--border-color-active);transform:translateY(-2px)}.nav-buttons{flex-direction:column;gap:.75rem;margin-top:.5rem;display:flex}.nav-btn{text-align:center;border-radius:var(--border-radius-md);transition:var(--transition-normal);padding:.85rem;font-size:.9rem;font-weight:600}.btn-retry{color:#c084fc;background:#8a2be21a;border:1px solid #8a2be24d}.btn-retry:hover{background:#8a2be233;transform:translateY(-1px)}.btn-home{color:var(--text-muted);background:0 0;border:1px solid #ffffff0d}.btn-home:hover{color:var(--text-main);background:#ffffff05}.mini-spinner{border:2px solid #0a0b1033;border-top-color:#0a0b10;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-result{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:300px;display:flex}.spinner{border:3px solid #00f2fe1a;border-top-color:var(--accent-cyan);width:40px;height:40px;box-shadow:var(--glow-cyan);border-radius:50%;animation:1s linear infinite spin}.toast-notification{-webkit-backdrop-filter:blur(8px);color:var(--text-main);z-index:1000;white-space:nowrap;background:#12141ed9;border:1px solid #ffffff1a;border-radius:50px;padding:.85rem 1.75rem;font-size:.9rem;font-weight:500;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards toastFadeIn;position:fixed;bottom:2rem;left:50%;transform:translate(-50%);box-shadow:0 10px 25px #00000080}@keyframes toastFadeIn{0%{opacity:0;bottom:1rem}to{opacity:1;bottom:2rem}}@media (width<=480px){.actions-grid{grid-template-columns:1fr}}