:root{--color-bg: #0f1117;--color-surface: #171a23;--color-surface-2: #1f2330;--color-border: #2a2f3d;--color-text: #f2f3f7;--color-text-muted: #9ba0b3;--color-primary: #7c6cf0;--color-primary-hover: #9285f4;--color-accent: #f0a86c;--radius: 14px;--max-width: 760px;--topbar-height: 57px;font-family:Segoe UI,Inter,system-ui,-apple-system,sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-text);line-height:1.6}.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:center;background:var(--color-surface);border-bottom:1px solid var(--color-border)}.topbar__brand{display:flex;align-items:center;gap:10px;padding:12px 20px;width:100%;max-width:var(--max-width);text-decoration:none}.topbar__logo{height:32px;width:auto}.topbar__name{font-size:1.15rem;font-weight:700;background:linear-gradient(90deg,#e879c9,var(--color-primary));-webkit-background-clip:text;background-clip:text;color:transparent}.app-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:32px 20px 80px}.page{width:100%;max-width:var(--max-width);display:flex;flex-direction:column;gap:20px}h1{font-size:1.8rem;margin:0 0 4px}h2{font-size:1.3rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid transparent;padding:12px 24px;font-size:1rem;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .15s ease,background .15s ease,opacity .15s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn--primary{background:var(--color-primary);color:#fff}.btn--primary:not(:disabled):hover{background:var(--color-primary-hover)}.btn--secondary{background:var(--color-surface-2);color:var(--color-text);border-color:var(--color-border)}.btn--ghost{background:transparent;color:var(--color-text-muted);border-color:var(--color-border)}.btn--lg{padding:16px 32px;font-size:1.1rem}.btn--sm{padding:8px 16px;font-size:.85rem}.page__actions{display:flex;gap:12px;flex-wrap:wrap}.email-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:-8px}.email-form input[type=email]{flex:1 1 260px;padding:12px 16px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:1rem}.email-form input[type=email]:disabled{opacity:.5}.email-form__status{width:100%;margin:0;font-size:.9rem}.email-form__status--success{color:#4ade80}.email-form__status--error{color:#f87171}.hero{text-align:center;padding:40px 0 24px;display:flex;flex-direction:column;align-items:center;gap:14px}.hero__eyebrow{color:var(--color-accent);font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:.8rem}.hero__title{font-size:2.2rem;margin:0}.hero__subtitle{color:var(--color-text-muted);max-width:560px}.hero__note{color:var(--color-text-muted);font-size:.85rem;font-style:italic}.archetype-grid-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}.archetype-chip{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:12px 8px;text-align:center}.archetype-chip__image{width:56px;height:56px;border-radius:50%;background:#fff;object-fit:cover;padding:4px}.archetype-chip__name{font-size:.78rem;line-height:1.25;color:var(--color-text-muted)}@media (max-width: 520px){.archetype-grid-preview{grid-template-columns:repeat(2,1fr)}}.page--start-loading{min-height:55vh;align-items:center;justify-content:center}.start-loading{display:flex;flex-direction:column;align-items:center;gap:16px}.start-loading__ring{transform:rotate(-90deg);filter:drop-shadow(0 0 8px rgba(124,108,240,.55))}.start-loading__ring-track{fill:none;stroke:var(--color-surface-2);stroke-width:5}.start-loading__ring-fill{fill:none;stroke-width:5;stroke-linecap:round;animation:start-loading-ring .5s cubic-bezier(.4,0,.2,1) forwards}.start-loading__label{color:var(--color-text-muted);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:0;animation:start-loading-fade .5s ease forwards}@keyframes start-loading-ring{to{stroke-dashoffset:0}}@keyframes start-loading-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.progress-bar{display:flex;flex-direction:column;gap:6px}.page--quiz .progress-bar{position:fixed;top:calc(var(--topbar-height) + 32px);left:50%;transform:translate(-50%);width:calc(100% - 40px);max-width:var(--max-width);background:var(--color-bg);z-index:10}.progress-bar__track{height:8px;border-radius:999px;background:var(--color-surface-2);overflow:hidden}.progress-bar__fill{height:100%;background:var(--color-primary);transition:width .3s ease}.progress-bar__label{font-size:.8rem;color:var(--color-text-muted)}.resume-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}.resume-modal{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:28px 24px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:16px;text-align:center}.resume-modal h2{margin:0}.resume-modal p{margin:0;color:var(--color-text-muted)}.resume-modal__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.page--quiz{flex:1;padding-top:64px}.quiz-content{flex:1;display:flex;flex-direction:column;gap:20px;justify-content:center;transform:translateY(-10%)}.quiz-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:28px 24px;display:flex;flex-direction:column;gap:20px}.quiz-card__text{font-size:1.2rem;margin:0}.image-choice{display:flex;flex-direction:column;gap:16px}.image-choice__frame{border-radius:var(--radius);background:#fff;padding:12px;display:flex;align-items:center;justify-content:center;position:relative;height:260px}.image-choice__img{max-width:100%;max-height:100%;object-fit:contain;opacity:0;transition:opacity .25s ease}.image-choice__img--loaded{opacity:1}.image-choice__skeleton{position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:calc(var(--radius) - 4px);background:linear-gradient(90deg,#e5e7eb 25%,#f3f4f6,#e5e7eb 75%);background-size:200% 100%;animation:image-choice-shimmer 1.4s ease-in-out infinite}@keyframes image-choice-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.image-choice__options{display:flex;flex-direction:column;gap:10px}.image-choice__option{text-align:left;padding:14px 16px;border-radius:10px;border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:.95rem;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .1s ease}.image-choice__option:hover{border-color:var(--color-text-muted)}.quiz-card--pending-hover .image-choice__option:hover{border-color:var(--color-border)}.image-choice__option:active{border-color:var(--color-primary);background:#7c6cf033;transform:scale(.98)}.image-choice__option:focus{outline:none}.image-choice__option:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.likert{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:32px}.likert__option{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:10px;border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .1s ease}.likert__option:hover{border-color:var(--color-text-muted)}.quiz-card--pending-hover .likert__option:hover{border-color:var(--color-border)}.likert__option:active{border-color:var(--color-primary);background:#7c6cf033;transform:scale(.98)}.likert__option:focus{outline:none}.likert__option:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.likert__num{font-weight:700;font-size:1.1rem}.likert__label{font-size:.7rem;text-align:center;color:var(--color-text-muted)}@media (max-width: 520px){.likert{grid-template-columns:repeat(5,1fr)}.likert__label{display:none}}.mid-break{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:60px 20px}.mid-break__ring{filter:drop-shadow(0 0 10px rgba(124,108,240,.55))}.mid-break__ring-rotate{transform:rotate(-90deg);transform-origin:40px 40px}.mid-break__ring-track{fill:none;stroke:var(--color-surface-2);stroke-width:6}.mid-break__ring-fill{fill:none;stroke-width:6;stroke-linecap:round}.mid-break__ring-text{fill:var(--color-text);font-size:15px;font-weight:700}.mid-break__title{font-size:1.3rem;font-weight:700;margin:0;opacity:0;animation:mid-break-fade .4s ease .1s forwards}.mid-break__text{color:var(--color-text-muted);max-width:420px;margin:0;opacity:0;animation:mid-break-fade .4s ease .25s forwards}@keyframes mid-break-fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.page--loading{align-items:center;text-align:center;padding-top:80px}.loading-spinner{width:56px;height:56px;border-radius:50%;border:4px solid var(--color-surface-2);border-top-color:var(--color-primary);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-step{color:var(--color-text-muted)}.archetype-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.archetype-card{position:relative;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:8px}.archetype-card__rank{position:absolute;top:14px;right:16px;font-weight:700;color:var(--color-accent)}.archetype-card__name{margin:0}.archetype-card__tagline{color:var(--color-text-muted);margin:0;font-size:.9rem}.archetype-card__score-track{position:relative;height:10px;background:var(--color-surface-2);border-radius:999px;overflow:hidden;margin-top:4px}.archetype-card__score-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent))}.archetype-card__score-label{font-size:.75rem;color:var(--color-text-muted)}.archetype-card__desc{font-size:.85rem;color:var(--color-text-muted);margin:4px 0 0}.archetype-card--blurred{filter:blur(6px);-webkit-user-select:none;user-select:none;pointer-events:none}.radar-chart-section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:24px}.radar-chart-section h2{margin-top:0;color:var(--color-accent)}.radar-chart{display:flex;justify-content:center}.radar-chart__svg{width:100%;max-width:440px;height:auto}.radar-chart__ring{fill:none;stroke:var(--color-border);stroke-width:1}.radar-chart__axis{stroke:var(--color-border);stroke-width:1}.radar-chart__area{fill:color-mix(in srgb,var(--color-primary) 35%,transparent);stroke:var(--color-primary);stroke-width:2}.radar-chart__point{fill:var(--color-accent)}.radar-chart__label{fill:var(--color-text-muted);font-size:12px}.radar-chart__label-score{fill:var(--color-text);font-weight:700}.archetype-full-list{display:flex;flex-direction:column;gap:10px;margin-top:20px}.archetype-full-list__row{display:grid;grid-template-columns:24px 140px 1fr 40px;align-items:center;gap:10px}.archetype-full-list__rank{color:var(--color-text-muted);font-size:.8rem}.archetype-full-list__name{font-size:.9rem}.archetype-full-list__track{position:relative;height:8px;background:var(--color-surface-2);border-radius:999px;overflow:hidden}.archetype-full-list__fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent))}.archetype-full-list__score{text-align:right;font-size:.8rem;color:var(--color-text-muted)}.paywall-subtitle{color:var(--color-text-muted)}.paywall-cta{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:24px;text-align:center;display:flex;flex-direction:column;gap:16px}.payment-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}.payment-card__price{font-size:2rem;font-weight:700;color:var(--color-accent);margin:0}.payment-note{font-size:.8rem;color:var(--color-text-muted)}.payment-note--error{color:#f87171}.payment-field{display:flex;flex-direction:column;gap:6px;width:100%;font-size:.9rem;color:var(--color-text-muted)}.payment-field input{padding:12px 16px;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:1rem}.payment-field input:disabled{opacity:.5}.payment-qr-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;max-width:420px;margin:0 auto}.payment-qr-card__img{width:240px;height:240px;border-radius:12px;border:1px solid var(--color-border);background:#fff}.payment-qr-card__details{width:100%;display:flex;flex-direction:column;gap:10px;text-align:left}.payment-qr-card__details>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--color-border);padding-bottom:8px}.payment-qr-card__details dt{color:var(--color-text-muted)}.payment-qr-card__details dd{margin:0;font-weight:600;text-align:right}.payment-qr-card__content{display:flex;align-items:center;gap:8px;color:var(--color-accent)}.payment-qr-card__copy{border:1px solid var(--color-border);background:transparent;color:var(--color-text-muted);border-radius:999px;padding:2px 10px;font-size:.75rem;cursor:pointer}.payment-qr-card__status{display:flex;align-items:center;gap:10px;color:var(--color-text-muted);font-size:.9rem}.loading-spinner--sm{width:20px;height:20px;border-width:3px}.payment-support{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin-top:8px}.payment-support .payment-note{margin:0}.report{display:flex;flex-direction:column;gap:20px}.report__section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:20px 24px}.report__section h2{margin-top:0;color:var(--color-accent)}.report__bullets{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:10px}.report__bullets li{line-height:1.6}
