/* ============================================================
   YOUR 27 ARCHETYPES
   ============================================================ */

:root {
    --y27-purple:      #7D5BA6;
    --y27-purple-dark: #6a4d8f;
    --y27-green:       #38a169;
    --y27-red:         #e53e3e;
    --y27-white:       #ffffff;
    --y27-gray-50:     #fafafa;
    --y27-gray-200:    #edf2f7;
    --y27-gray-300:    #e2e8f0;
    --y27-gray-400:    #cbd5e0;
    --y27-gray-500:    #a0aec0;
    --y27-gray-600:    #718096;
    --y27-gray-700:    #4a5568;
    --y27-gray-800:    #2d3748;
    --y27-radius:      8px;
}

.y27-wrap { max-width:860px; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--y27-gray-800); }
.y27-heading { font-size:1.6em; font-weight:700; margin:0 0 24px; }
.y27-notice { background:var(--y27-gray-50); border:2px solid var(--y27-gray-300); border-radius:var(--y27-radius); padding:16px 20px; color:var(--y27-gray-700); margin-bottom:24px; }
.y27-notice-warning { border-color:#f6ad55; background:#fffaf0; color:#744210; }
.y27-notice a { color:#744210; }

.y27-btn { display:inline-block; padding:10px 18px; border-radius:var(--y27-radius); font-size:.9em; font-weight:600; cursor:pointer; border:none; font-family:inherit; transition:all .2s; white-space:nowrap; line-height:1; }
.y27-btn-primary { background:var(--y27-purple); color:var(--y27-white); }
.y27-btn-primary:hover:not(:disabled) { background:var(--y27-purple-dark); color:var(--y27-white); }
.y27-btn-primary:disabled { opacity:.65; cursor:not-allowed; }
.y27-btn-secondary { background:var(--y27-gray-200); color:var(--y27-gray-800); border:1px solid var(--y27-gray-400); }
.y27-btn-secondary:hover { background:var(--y27-gray-300); color:var(--y27-gray-800); border-color:var(--y27-gray-500); }

.y27-form-section { background:var(--y27-white); border:2px solid var(--y27-gray-200); border-radius:var(--y27-radius); padding:20px; margin-bottom:16px; }
.y27-section-heading { font-size:1em; font-weight:700; color:var(--y27-purple); margin:0 0 16px; }
.y27-form-group { margin-bottom:12px; }
.y27-form-group:last-child { margin-bottom:0; }
.y27-form-label { display:block; font-size:.78em; font-weight:700; color:var(--y27-gray-600); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.y27-input { width:100%; padding:10px 12px; border:2px solid var(--y27-gray-300); border-radius:var(--y27-radius); font-size:.95em; font-family:inherit; color:var(--y27-gray-800); background:var(--y27-white); box-sizing:border-box; transition:border-color .2s; }
.y27-input:focus { outline:none; border-color:var(--y27-purple); box-shadow:0 0 0 3px rgba(125,91,166,.1); }
.y27-field-hint { font-size:.82em; color:var(--y27-gray-500); margin:6px 0 0; line-height:1.5; }
.y27-form-actions { display:flex; align-items:center; gap:14px; margin-top:8px; }
.y27-form-feedback { font-size:.88em; }
.y27-feedback-error { color:var(--y27-red); }
.y27-feedback-success { color:var(--y27-green); font-weight:600; }

.y27-quiz-url-box { background:var(--y27-gray-50); border:2px solid var(--y27-gray-300); border-radius:var(--y27-radius); padding:16px 20px; margin-bottom:24px; }
.y27-url-label { font-size:.8em; font-weight:700; color:var(--y27-gray-600); text-transform:uppercase; letter-spacing:.04em; margin:0 0 8px; }
.y27-url-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.y27-url-input { flex:1; min-width:200px; padding:9px 12px; border:2px solid var(--y27-gray-300); border-radius:var(--y27-radius); font-size:.9em; font-family:monospace; color:var(--y27-purple); background:var(--y27-white); box-sizing:border-box; }

.y27-progress { font-size:.9em; color:var(--y27-gray-600); margin-bottom:20px; font-weight:600; }
.y27-arch-block { border:2px solid var(--y27-gray-200); border-radius:var(--y27-radius); margin-bottom:8px; overflow:hidden; }
.y27-arch-block.is-saved { border-color:#c6f6d5; }
.y27-arch-row { display:flex; align-items:center; gap:12px; padding:12px 16px; flex-wrap:wrap; }
.is-saved .y27-arch-row { background:#f0fff4; }
.not-saved .y27-arch-row { background:var(--y27-gray-50); }
.y27-arch-label { font-size:.82em; font-weight:700; color:var(--y27-purple); background:#f3eeff; padding:3px 10px; border-radius:4px; white-space:nowrap; min-width:90px; text-align:center; }
.y27-arch-name { flex:1; font-weight:600; font-size:.95em; color:var(--y27-gray-800); }
.y27-arch-badge { font-size:.72em; font-weight:700; color:var(--y27-green); background:#c6f6d5; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.y27-arch-empty { flex:1; color:var(--y27-gray-500); font-style:italic; font-size:.9em; }
.y27-arch-editor { padding:20px; border-top:2px solid var(--y27-gray-200); background:var(--y27-white); }
.y27-arch-editor-header { display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; font-weight:700; color:var(--y27-gray-800); }
.y27-editing-note { font-size:.82em; color:var(--y27-gray-500); font-style:italic; font-weight:400; }
.y27-arch-editor-actions { display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.y27-arch-feedback { font-size:.88em; }

.y27-quiz-intro { font-size:1.15em; font-weight:600; color:var(--y27-gray-800); margin-bottom:20px; line-height:1.5; text-align:center; }
.y27-quiz-owner { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:28px; }
.y27-owner-avatar { width:96px; height:96px; border-radius:50%; overflow:hidden; border:3px solid var(--y27-gray-200); flex-shrink:0; }
.y27-avatar-img { width:96px; height:96px; border-radius:50%; display:block; object-fit:cover; }
.y27-owner-name { font-size:.95em; font-weight:600; color:var(--y27-gray-700); margin:0; text-align:center; }
.y27-quiz-for { font-size:.82em; color:var(--y27-gray-600); background:var(--y27-gray-200); border:1px solid var(--y27-gray-300); border-radius:20px; padding:4px 14px; margin:0; text-align:center; line-height:1.5; }
.y27-step-indicator { font-size:.82em; font-weight:700; color:var(--y27-gray-500); text-transform:uppercase; letter-spacing:.06em; margin:0 0 12px; }
.y27-quiz-question { background:var(--y27-white); border:2px solid var(--y27-gray-200); border-radius:var(--y27-radius); padding:20px; margin-bottom:16px; }
.y27-question-text { font-size:1.05em; font-weight:600; color:var(--y27-gray-800); margin:0 0 16px; line-height:1.5; }
.y27-answers { display:flex; flex-direction:column; gap:10px; }
.y27-answer-label { display:flex; align-items:center; gap:10px; padding:10px 14px; border:2px solid var(--y27-gray-300); border-radius:var(--y27-radius); cursor:pointer; transition:all .2s; font-size:.95em; color:var(--y27-gray-700); }
.y27-answer-label:hover { border-color:var(--y27-purple); background:#faf5ff; }
.y27-answer-label input[type="radio"] { accent-color:var(--y27-purple); width:18px; height:18px; flex-shrink:0; }
.y27-answer-label:has(input:checked) { border-color:var(--y27-purple); background:#f3eeff; color:var(--y27-purple-dark); font-weight:600; }
.y27-quiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:20px; }
.y27-error { color:var(--y27-red); font-size:.9em; margin-top:10px; }
#y27Result { background:var(--y27-white); border:2px solid var(--y27-gray-200); border-radius:var(--y27-radius); padding:30px; }
.y27-result-name { font-size:1.5em; font-weight:700; color:var(--y27-purple); margin:0 0 20px; }
.y27-result-content { font-size:.95em; color:var(--y27-gray-700); line-height:1.7; margin-bottom:24px; }
.y27-result-content p { margin-bottom:1em; }
.y27-result-content h2,.y27-result-content h3 { color:var(--y27-gray-800); margin-bottom:.5em; }
.y27-result-blocks { margin-top:24px; }
.y27-result-block { margin-bottom:16px; }

.y27-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:99999; padding:20px; box-sizing:border-box; }
.y27-modal { background:var(--y27-white); border-radius:var(--y27-radius); box-shadow:0 20px 60px rgba(0,0,0,.3); width:100%; max-width:680px; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; }
.y27-modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:2px solid var(--y27-gray-200); flex-shrink:0; }
.y27-modal-title { margin:0; font-size:1.1em; font-weight:700; color:var(--y27-purple); }
.y27-modal-close { background:none; border:none; font-size:1.4em; cursor:pointer; color:var(--y27-gray-500); line-height:1; padding:0 4px; }
.y27-modal-close:hover { color:var(--y27-gray-800); }
.y27-modal-body { padding:20px; overflow-y:auto; font-size:.95em; color:var(--y27-gray-700); line-height:1.7; }
.y27-modal-body p { margin-bottom:1em; }
.y27-modal-body h2,.y27-modal-body h3 { color:var(--y27-gray-800); margin-bottom:.5em; }

@media (max-width:600px) {
    .y27-arch-row,.y27-url-row,.y27-form-actions,.y27-arch-editor-actions { flex-direction:column; align-items:flex-start; }
    .y27-url-input { width:100%; }
}