.sociable-quizzes { max-width: 1160px; margin: 0 auto; padding: 44px 24px 72px; color: #171b29; }
.sociable-quizzes a { color: #d90042; text-underline-offset: 3px; }
.quiz-breadcrumb { margin-bottom: 20px; font-size: 14px; }
.quiz-toolbar { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #e9e5ec; }
.quiz-toolbar a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.quiz-intro { margin: 36px 0 28px; max-width: 900px; }
.quiz-intro h1 { font-size: clamp(30px, 4vw, 52px); font-weight: 800; line-height: 1.13; letter-spacing: -.025em; margin: 12px 0 20px; overflow-wrap: anywhere; }
.quiz-intro p { color: #5a6273; font-size: 19px; line-height: 1.7; }
.quiz-category { display: block; color: #d90042; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.quiz-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; font-weight: 700; }
.quiz-filter select { padding: 10px 40px 10px 12px; min-height: 46px; max-width: 100%; border: 1px solid #ddd8e5; border-radius: 12px; background: white; color: #171b29; font: inherit; }
.quiz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 24px 0 40px; padding: 0; }
.quiz-grid > li { background: white; border: 1px solid #eee5ec; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 32px rgba(33, 12, 33, .035); }
.quiz-card-art { display: block; }
.quiz-card-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.quiz-card-content { padding: 22px; }
.quiz-card-content h2 { font-size: 23px; line-height: 1.3; margin: 8px 0 12px; overflow-wrap: anywhere; }
.quiz-card-content h2 a { color: #171b29; text-decoration: none; }
.quiz-card-content h2 a:hover { color: #d90042; text-decoration: underline; }
.quiz-card-content p { font-size: 16px; line-height: 1.65; color: #5a6273; }
.quiz-card-link { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-weight: 700; }
.quiz-cover { width: 100%; max-width: 900px; height: auto; display: block; border-radius: 24px; margin: 28px 0 16px; }
.quiz-small { font-size: 14px; line-height: 1.7; color: #626978; }
.quiz-questions { max-width: 900px; }
.quiz-progress { font-weight: 700; color: #d90042; }
.quiz-questions fieldset { min-width: 0; border: 0; margin: 36px 0; padding: 0; }
.quiz-questions legend { float: none; display: block; width: 100%; font-size: 24px; line-height: 1.45; font-weight: 700; margin-bottom: 18px; border: 0; }
.quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.quiz-option { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 18px; border: 2px solid #e8e2eb; background: white; border-radius: 16px; cursor: pointer; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.quiz-option:hover, .quiz-option.is-selected { border-color: #e50049; background: #fff0f5; }
.quiz-option input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: #d90042; cursor: pointer; }
.quiz-option span { min-width: 0; }
.quiz-option:focus-within { outline: 3px solid #6b55d2; outline-offset: 3px; }
.sociable-quizzes button { cursor: pointer; font: inherit; min-height: 46px; padding: 10px 18px; border: 1px solid #dcd5e3; background: white; color: #30283e; border-radius: 12px; line-height: 1.5; }
.sociable-quizzes button.quiz-button { border: 1px solid #d90042; background: #d90042; color: white; font-weight: 700; padding: 14px 24px; }
.sociable-quizzes button:hover { box-shadow: 0 4px 16px rgba(37, 12, 30, .1); }
.sociable-quizzes button:disabled { opacity: .55; cursor: wait; box-shadow: none; }
.sociable-quizzes :focus-visible { outline: 3px solid #6b55d2; outline-offset: 4px; }
.quiz-result { background: #fff0f5; border: 1px solid #f0dce7; border-radius: 24px; padding: 32px; max-width: 900px; margin: 32px 0; }
.quiz-result h2 { font-size: 34px; line-height: 1.2; overflow-wrap: anywhere; }
.quiz-result > p { font-size: 19px; line-height: 1.8; }
.quiz-result > p.quiz-small { font-size: 14px; }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; }
.quiz-actions a { min-height: 46px; display: inline-flex; align-items: center; font-weight: 700; }
.quiz-login { border-top: 1px solid #ead4e2; padding-top: 24px; margin-top: 28px; }
.quiz-login h2, .quiz-related > h2 { font-size: 28px; line-height: 1.3; letter-spacing: -.02em; }
.quiz-login p { line-height: 1.7; }
.quiz-provider-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.quiz-provider-buttons button { flex: 1 1 180px; font-weight: 700; background: white; }
.quiz-save-status { margin-top: 24px; border-top: 1px solid #ead4e2; padding-top: 20px; }
.quiz-save-status p { font-weight: 600; }
.quiz-error { margin: 24px 0; padding: 18px; border: 1px solid #d14158; border-radius: 12px; background: #fff3f5; color: #8f1334; line-height: 1.7; }
.quiz-error p { color: inherit; }
.quiz-result textarea { display: block; box-sizing: border-box; width: 100%; min-height: 130px; margin-top: 12px; border: 1px solid #b6aabc; border-radius: 12px; background: white; padding: 12px; font: inherit; }
.quiz-download { background: #f5f1fc; border-radius: 24px; padding: 30px; margin: 40px 0; }
.quiz-download h2 { font-size: 28px; line-height: 1.3; }
.quiz-download p { max-width: 760px; line-height: 1.8; color: #5a6273; }
.quiz-store-links { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 20px; }
.quiz-store-links a { display: inline-flex; }
.quiz-related { margin-top: 56px; border-top: 1px solid #e9e5ec; padding-top: 28px; }
.quiz-history { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 22px; }
.quiz-history li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; background: white; border: 1px solid #eee5ec; border-radius: 20px; padding: 20px; }
.quiz-history li > img { width: 100%; height: auto; border-radius: 14px; }
.quiz-history h2 { margin: 8px 0; font-size: 25px; }
.quiz-history p { line-height: 1.7; }
.quiz-history time { color: #626978; font-size: 14px; }
@media (max-width: 1000px) { .quiz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
    .sociable-quizzes { padding: 28px 20px 48px; }
    .quiz-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .quiz-intro { margin-top: 28px; }
    .quiz-intro p { font-size: 18px; }
    .quiz-options { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .quiz-option { min-height: 64px; padding: 16px; }
    .quiz-questions legend { font-size: 22px; }
    .quiz-result, .quiz-download { padding: 22px; border-radius: 20px; }
    .quiz-result h2 { font-size: 28px; }
    .quiz-result > p { font-size: 18px; }
    .quiz-history li { grid-template-columns: minmax(0, 1fr); padding: 18px; }
    .quiz-history li > img { max-width: 320px; }
    .quiz-provider-buttons { flex-direction: column; }
    .quiz-provider-buttons button { flex: 0 0 auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sociable-quizzes * { scroll-behavior: auto !important; } }