* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #FFF8F0;
    color: #3D2C2E;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.screen { display: none; min-height: 100vh; }
.screen.active { display: flex; align-items: center; justify-content: center; }
#landing.active { display: block; }

.container {
    width: 100%; max-width: 560px; margin: 0 auto; padding: 20px;
}

/* ===== Landing Page - Hero ===== */
#landing { background: #FAFAFA; }

.hero-section {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
    padding: 50px 0 40px; text-align: center;
}
.hero-bg-shapes { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; overflow: hidden; }
.hero-shape {
    position: absolute; border-radius: 50%; opacity: 0.06;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
}
.hero-shape-1 { width: 300px; height: 300px; top: -80px; right: -60px; }
.hero-shape-2 { width: 200px; height: 200px; bottom: -40px; left: -40px; opacity: 0.04; }
.hero-shape-3 { width: 120px; height: 120px; top: 40%; left: 60%; opacity: 0.03; }

.hero-content { position: relative; z-index: 1; }

.hero-badge {
    display: inline-block; padding: 6px 18px; border-radius: 20px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    color: #FF8E53; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 1px; margin-bottom: 16px;
}

.hero-title {
    font-size: 2.8rem; font-weight: 900; color: #fff;
    letter-spacing: 3px; margin-bottom: 10px;
}
.hero-highlight {
    font-size: 3rem;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53, #FFA07A);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-slogan {
    font-size: 0.92rem; color: rgba(255,255,255,0.75); line-height: 1.8;
    margin-bottom: 12px; padding: 0 10px;
}

.hero-sub {
    font-size: 0.78rem; color: rgba(255,255,255,0.4); line-height: 1.6;
    margin-bottom: 24px; padding: 0 20px;
}

.hero-section .hero-dog {
    width: 140px; height: 140px; margin: 0 auto 28px;
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 8px 20px rgba(255,143,83,0.25));
}
.hero-section .dog-tail { animation: tailWag 0.6s ease-in-out infinite; transform-origin: 142px 130px; }

.hero-actions { display: flex; flex-direction: column; gap: 10px; padding: 0 10px; }
.hero-actions-row { display: flex; gap: 10px; }

.btn-hero-primary {
    width: 100%; padding: 16px; border-radius: 14px; border: none;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: #fff; font-size: 1.05rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 6px 24px rgba(255,107,107,0.35);
    transition: all 0.3s;
}
.btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,107,107,0.45); }

.btn-hero-secondary, .btn-hero-outline {
    flex: 1; padding: 12px; border-radius: 12px; border: none;
    font-size: 0.9rem; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: all 0.3s;
}
.btn-hero-secondary {
    background: rgba(255,255,255,0.1); color: #fff;
    border: 1px solid rgba(255,255,255,0.15);
}
.btn-hero-secondary:hover { background: rgba(255,255,255,0.15); }
.btn-hero-outline {
    background: transparent; color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.1);
}
.btn-hero-outline:hover { color: #fff; border-color: rgba(255,255,255,0.25); }

.hero-section .user-status {
    margin-top: 14px; font-size: 0.78rem; color: rgba(255,255,255,0.35);
}
.hero-section .user-status a { color: #FF8E53; }

/* ===== 16 Types Section ===== */
.types-section {
    padding: 40px 0 20px; background: #FAFAFA;
}
.section-header { text-align: center; margin-bottom: 28px; }
.section-heading {
    font-size: 1.3rem; font-weight: 900; color: #1a1a2e; margin-bottom: 6px;
}
.section-desc { font-size: 0.82rem; color: #999; }

.type-family { margin-bottom: 28px; }
.family-header {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 16px;
    background: #fff; margin-bottom: 12px;
    border-left: 4px solid var(--fc);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.family-icon { font-size: 1.6rem; }
.family-name { font-size: 0.95rem; font-weight: 900; color: #1a1a2e; }
.family-trait { font-size: 0.72rem; color: #999; margin-top: 2px; }

.type-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

.type-card {
    background: #fff; border-radius: 16px; padding: 18px 12px;
    text-align: center; cursor: pointer;
    border: 2px solid #f0f0f0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.type-card:hover {
    border-color: var(--tc); transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.type-card:active { transform: scale(0.97); }

.type-card-avatar { font-size: 2rem; margin-bottom: 8px; }
.type-card-code {
    font-size: 1.1rem; font-weight: 900; color: var(--tc);
    letter-spacing: 2px; margin-bottom: 2px;
}
.type-card-name { font-size: 0.88rem; font-weight: 900; color: #1a1a2e; }
.type-card-en { font-size: 0.68rem; color: #ccc; margin-bottom: 6px; }
.type-card-desc { font-size: 0.72rem; color: #999; line-height: 1.4; }

/* ===== Advantages Section ===== */
.adv-section {
    padding: 30px 0 40px;
    background: linear-gradient(180deg, #FAFAFA, #FFF8F0);
}
.adv-grid { display: flex; flex-direction: column; gap: 14px; }
.adv-card {
    background: #fff; border-radius: 18px; padding: 24px 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s;
}
.adv-card:hover { transform: translateY(-2px); }
.adv-icon { font-size: 2rem; margin-bottom: 10px; }
.adv-title {
    font-size: 1.05rem; font-weight: 900; color: #1a1a2e; margin-bottom: 8px;
}
.adv-text { font-size: 0.85rem; color: #777; line-height: 1.8; }

/* Landing Footer */
.landing-footer {
    padding: 20px 0 30px; background: #FFF8F0;
}
.landing-footer-text { font-size: 0.72rem; color: #CDB9A0; }

.btn {
    border: none; border-radius: 16px; padding: 16px 28px;
    font-size: 1.05rem; font-weight: 700; cursor: pointer;
    transition: all 0.3s ease; font-family: inherit;
    position: relative; overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: #fff; box-shadow: 0 6px 20px rgba(255,107,107,0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255,107,107,0.45); }

.btn-secondary {
    background: #fff; color: #FF6B6B;
    border: 2px solid #FF6B6B; box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.btn-secondary:hover { background: #FFF0F0; transform: translateY(-2px); }

.hint { font-size: 0.8rem; color: #B8A08A; margin-top: 10px; }

/* ===== Quiz Page ===== */
#quiz { background: linear-gradient(180deg, #FFF8F0, #FFF3E8); padding: 20px 0; }

/* ===== Quiz Page ===== */
.quiz-top-bar {
    display: flex; align-items: center; margin-bottom: 10px;
}
.btn-back-quiz {
    background: none; border: none; color: #B8A08A; font-size: 0.85rem;
    cursor: pointer; font-weight: 700; font-family: inherit; padding: 6px 0;
    transition: color 0.2s;
}
.btn-back-quiz:hover { color: #FF6B6B; }

.progress-wrapper { margin-bottom: 20px; text-align: center; }

.progress-bar {
    width: 100%; height: 8px; background: #F0E0D0; border-radius: 4px;
    overflow: hidden; margin-bottom: 8px;
}

.progress-fill {
    height: 100%; width: 0%; border-radius: 4px;
    background: linear-gradient(90deg, #FF6B6B, #FF8E53);
    transition: width 0.4s ease;
}

.progress-text { font-size: 0.85rem; color: #B8A08A; font-weight: 700; }

.quiz-card {
    background: #fff; border-radius: 24px; padding: 30px 24px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    text-align: center;
}

.quiz-dog-wrapper { width: 120px; height: 120px; margin: 0 auto 20px; }

.quiz-dog .dog-tail { transform-origin: 142px 130px; }
.quiz-dog .dog-tongue { opacity: 0; transition: opacity 0.3s; }

/* Dog States */
.dog-state-happy .dog-tail { animation: tailWag 0.4s ease-in-out infinite; }
.dog-state-happy .dog-tongue { opacity: 1; }
.dog-state-happy .dog-mouth { d: path("M90 101 Q100 112 110 101"); }

.dog-state-sad .dog-ear-left { animation: earDroopLeft 0.5s forwards; }
.dog-state-sad .dog-ear-right { animation: earDroopRight 0.5s forwards; }
.dog-state-sad .dog-tail { animation: tailDroop 0.5s forwards; }
.dog-state-sad .dog-mouth { d: path("M93 105 Q100 99 107 105"); }

.dog-state-excited .dog-body { animation: bodyBounce 0.3s ease-in-out infinite; }
.dog-state-excited .dog-tail { animation: tailWag 0.25s ease-in-out infinite; }
.dog-state-excited .dog-tongue { opacity: 1; }

.dog-state-scared .dog-body { animation: shake 0.15s ease-in-out infinite; }
.dog-state-scared .dog-ear-left { animation: earDroopLeft 0.3s forwards; }
.dog-state-scared .dog-ear-right { animation: earDroopRight 0.3s forwards; }
.dog-state-scared .dog-eye-left { r: 8; }
.dog-state-scared .dog-eye-right { r: 8; }

.dog-state-thinking .dog-head { animation: headTilt 1.5s ease-in-out infinite; }
.dog-state-thinking .dog-ear-left { animation: earPerk 0.5s forwards; }

.question-factor {
    display: inline-block; padding: 4px 14px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 700; margin-bottom: 14px;
    background: #FFF0E8; color: #FF8E53;
}

.question-text {
    font-size: 1.15rem; font-weight: 700; line-height: 1.6;
    margin-bottom: 28px; min-height: 60px;
}

.likert-scale {
    display: flex; justify-content: center; gap: 8px; margin-bottom: 10px;
}

.likert-btn {
    width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid #E8D8C8;
    background: #fff; font-size: 1rem; font-weight: 700; color: #8B7355;
    cursor: pointer; transition: all 0.25s ease; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
}

.likert-btn:hover { border-color: #FF8E53; color: #FF8E53; transform: scale(1.12); }

.likert-btn.selected {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    border-color: transparent; color: #fff;
    transform: scale(1.15); box-shadow: 0 4px 12px rgba(255,107,107,0.35);
}

.likert-labels {
    display: flex; justify-content: space-between; padding: 0 10px;
    font-size: 0.75rem; color: #B8A08A;
}

.quiz-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 20px;
}

.btn-back {
    background: none; border: none; color: #B8A08A; font-size: 0.9rem;
    cursor: pointer; padding: 8px 16px; font-family: inherit; font-weight: 700;
    transition: color 0.2s;
}
.btn-back:hover { color: #FF6B6B; }
.btn-back:disabled { opacity: 0; pointer-events: none; }

.quiz-tip { font-size: 0.8rem; color: #CDB9A0; }

/* ===== Loading Page ===== */
#loading { background: linear-gradient(135deg, #FFF8F0, #FFE8D6); }

.loading-container { text-align: center; }

.loading-dog { width: 140px; height: 140px; margin: 0 auto 30px; }
.loading-dog-svg .dog-body { animation: bodyBounce 0.8s ease-in-out infinite; }
.loading-dog-svg .dog-tail { animation: tailWag 0.5s ease-in-out infinite; transform-origin: 142px 130px; }

.loading-text { font-size: 1.1rem; font-weight: 700; color: #8B7355; margin-bottom: 24px; }

.dots { animation: dotPulse 1.5s infinite; }

.loading-bar {
    width: 200px; height: 6px; background: #F0E0D0; border-radius: 3px;
    margin: 0 auto; overflow: hidden;
}
.loading-bar-fill {
    height: 100%; width: 0%; border-radius: 3px;
    background: linear-gradient(90deg, #FF6B6B, #FF8E53);
    animation: loadingProgress 2.5s ease-in-out forwards;
}

/* ===== Result Page ===== */
#result {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30px 0; align-items: flex-start;
}
#result.active { align-items: flex-start; }

.result-card {
    background: #fff; border-radius: 28px; padding: 36px 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15); text-align: center;
    position: relative; overflow: hidden;
}

.result-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 180px;
    background: linear-gradient(135deg, #FF6B6B22, #FF8E5322);
    border-radius: 28px 28px 50% 50%;
}

.result-badge {
    display: inline-block; padding: 6px 18px; border-radius: 20px;
    font-size: 0.8rem; font-weight: 700; margin-bottom: 12px;
    position: relative; z-index: 1;
}

.result-type-code {
    font-size: 3rem; font-weight: 900; letter-spacing: 6px;
    background: linear-gradient(135deg, #FF6B6B, #764ba2);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; position: relative; z-index: 1;
}

.result-name {
    font-size: 1.6rem; font-weight: 900; margin: 8px 0 4px;
    position: relative; z-index: 1;
}

.result-name-en {
    font-size: 0.9rem; color: #B8A08A; margin-bottom: 16px;
    position: relative; z-index: 1;
}

.result-emoji {
    font-size: 4rem; margin: 10px 0; position: relative; z-index: 1;
}

.result-slogan {
    font-size: 1rem; font-weight: 700; color: #FF6B6B;
    margin: 16px 0; line-height: 1.6; position: relative; z-index: 1;
    padding: 0 10px;
}

.result-description {
    font-size: 0.92rem; color: #666; line-height: 1.8;
    margin-bottom: 24px; text-align: left; padding: 0 8px;
    position: relative; z-index: 1;
}

.radar-wrapper {
    margin: 24px 0; position: relative; z-index: 1;
}
.radar-wrapper h3 { font-size: 0.95rem; color: #8B7355; margin-bottom: 10px; }

#radar-chart { max-width: 100%; height: auto; }

.result-dimensions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 20px 0; position: relative; z-index: 1;
}

.dim-item {
    background: #FFF8F0; border-radius: 14px; padding: 12px;
    text-align: center;
}
.dim-label { font-size: 0.75rem; color: #B8A08A; margin-bottom: 4px; }
.dim-value { font-size: 1.1rem; font-weight: 900; color: #FF6B6B; }
.dim-desc { font-size: 0.7rem; color: #999; margin-top: 2px; }

.result-matches {
    display: flex; gap: 12px; margin: 24px 0; position: relative; z-index: 1;
}

.match-item {
    flex: 1; padding: 16px 12px; border-radius: 16px; text-align: center;
}
.match-best { background: #FFF0F5; }
.match-nemesis { background: #F0F0FF; }
.match-label { display: block; font-size: 0.78rem; color: #999; margin-bottom: 6px; }
.match-type { font-size: 1rem; font-weight: 900; color: #3D2C2E; }

/* ===== Owner Match Section ===== */
.owner-match-section {
    margin: 28px 0; padding: 24px 16px; position: relative; z-index: 1;
    background: linear-gradient(135deg, #FFF8F0, #FFF0F5);
    border-radius: 20px; border: 1px solid #FFE8D6;
}
.owner-match-title {
    font-size: 1.05rem; font-weight: 900; color: #3D2C2E;
    margin-bottom: 4px; text-align: center;
}
.owner-match-subtitle {
    font-size: 0.78rem; color: #B8A08A; text-align: center; margin-bottom: 18px;
}
.owner-match-group {
    margin-bottom: 16px;
}
.owner-match-group:last-child { margin-bottom: 0; }
.owner-group-label {
    font-size: 0.75rem; color: #B8A08A; font-weight: 700;
    margin-bottom: 8px; padding-left: 4px;
}
.owner-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.owner-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 14px; border-radius: 24px;
    background: #fff; border: 2px solid #F0E0D0;
    font-size: 0.88rem; font-weight: 700; color: #3D2C2E;
    cursor: pointer; transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    font-family: inherit;
}
.owner-tag:hover {
    border-color: #FF8E53; transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,143,83,0.2);
}
.owner-tag:active { transform: scale(0.96); }
.owner-tag-emoji { font-size: 1.1rem; }
.owner-tag-code { font-weight: 900; color: #FF6B6B; }
.owner-tag-name { font-size: 0.78rem; color: #8B7355; }

/* Owner match detail modal */
.owner-detail-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}
.owner-detail-content {
    background: #fff; border-radius: 24px; padding: 28px 22px;
    max-width: 420px; width: 100%; text-align: center;
    max-height: 85vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: scaleIn 0.25s ease;
}
.od-header-emoji { font-size: 2.4rem; margin-bottom: 8px; }
.od-header-type {
    font-size: 1.8rem; font-weight: 900; letter-spacing: 3px;
    background: linear-gradient(135deg, #FF6B6B, #C471ED);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.od-header-name {
    font-size: 1rem; color: #8B7355; margin: 4px 0 6px; font-weight: 700;
}
.od-match-badge {
    display: inline-block; padding: 4px 14px; border-radius: 16px;
    font-size: 0.78rem; font-weight: 700; margin: 10px 0 16px;
    background: linear-gradient(135deg, #FF6B6B22, #FF8E5322);
    color: #FF6B6B;
}
.od-reason {
    font-size: 0.92rem; color: #555; line-height: 1.8;
    text-align: left; padding: 0 4px; margin-bottom: 20px;
}
.od-close {
    border: none; background: #f5f5f5; color: #666;
    padding: 10px 32px; border-radius: 14px; font-size: 0.9rem;
    font-weight: 700; cursor: pointer; font-family: inherit;
    transition: background 0.2s;
}
.od-close:hover { background: #eee; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== Detail / Compat / Intervention Sections ===== */
.section-title {
    font-size: 1.05rem; font-weight: 900; color: #3D2C2E;
    text-align: center; margin-bottom: 16px;
}

/* Detail Section */
.detail-section {
    margin: 28px 0; position: relative; z-index: 1;
    background: linear-gradient(135deg, #F0F8FF, #FFF8F0);
    border-radius: 20px; padding: 24px 16px;
    border: 1px solid #E8EEF4;
}
.detail-main {
    font-size: 0.92rem; color: #555; line-height: 1.8;
    text-align: left; margin-bottom: 18px; padding: 0 4px;
}
.detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.detail-card {
    background: rgba(255,255,255,0.75); border-radius: 14px;
    padding: 14px 12px; backdrop-filter: blur(4px);
}
.detail-card-full { grid-column: 1 / -1; }
.detail-card-label {
    font-size: 0.78rem; font-weight: 700; margin-bottom: 6px;
    display: flex; align-items: center; gap: 4px;
}
.detail-card-label.pros { color: #10B981; }
.detail-card-label.cons { color: #F59E0B; }
.detail-card-label.family { color: #3B82F6; }
.detail-card-label.social { color: #A78BFA; }
.detail-card-text {
    font-size: 0.85rem; color: #666; line-height: 1.7;
}

/* Compat Section */
.compat-section {
    margin: 28px 0; position: relative; z-index: 1;
    background: linear-gradient(135deg, #FFF8F0, #F0FFF4);
    border-radius: 20px; padding: 24px 16px;
    border: 1px solid #E8F4E8;
}
.compat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.compat-item {
    background: rgba(255,255,255,0.75); border-radius: 14px;
    padding: 14px 10px; text-align: center;
    backdrop-filter: blur(4px);
}
.compat-item-full { grid-column: 1 / -1; }
.compat-icon { font-size: 1.4rem; margin-bottom: 4px; }
.compat-label { font-size: 0.72rem; color: #B8A08A; margin-bottom: 4px; font-weight: 700; }
.compat-value { font-size: 0.92rem; font-weight: 900; color: #3D2C2E; }
.compat-value-sm { font-size: 0.82rem; font-weight: 700; color: #555; }
.compat-stars { color: #F59E0B; letter-spacing: 1px; }
.compat-pain {
    background: #FFF5F5; border: 1px solid #FFE0E0;
}
.compat-pain .compat-value { color: #EF4444; font-size: 0.85rem; }

/* Energy bar */
.energy-bar-wrapper { margin-top: 6px; }
.energy-bar {
    width: 100%; height: 6px; background: #F0E0D0; border-radius: 3px;
    overflow: hidden;
}
.energy-bar-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #4ECDC4, #FF6B6B);
    transition: width 0.6s ease;
}

/* Intervention Section */
.intervention-section {
    margin: 28px 0; position: relative; z-index: 1;
    background: linear-gradient(135deg, #FFF0F5, #F5F0FF);
    border-radius: 20px; padding: 24px 16px;
    border: 1px solid #F0E0F0;
}
.intervention-category {
    display: inline-block; padding: 4px 14px; border-radius: 16px;
    font-size: 0.78rem; font-weight: 700; margin-bottom: 16px;
    background: linear-gradient(135deg, #A78BFA22, #FF6B6B22);
    color: #A78BFA;
}
.intervention-list { display: flex; flex-direction: column; gap: 12px; }
.intervention-item {
    background: rgba(255,255,255,0.75); border-radius: 16px;
    padding: 16px 14px; text-align: left;
    backdrop-filter: blur(4px);
    border-left: 3px solid #A78BFA;
}
.intervention-item-title {
    font-size: 0.9rem; font-weight: 900; color: #3D2C2E;
    margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.intervention-item-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #A78BFA, #FF6B6B);
    color: #fff; font-size: 0.72rem; font-weight: 900;
    flex-shrink: 0;
}
.intervention-item-desc {
    font-size: 0.85rem; color: #666; line-height: 1.7;
}

.share-section {
    margin-top: 28px; position: relative; z-index: 1;
}
.share-section p { font-size: 0.85rem; color: #999; margin-bottom: 14px; }

.btn-share {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff; box-shadow: 0 6px 20px rgba(102,126,234,0.35);
    width: 100%; margin-bottom: 10px;
}
.btn-share:hover { transform: translateY(-2px); }

.btn-retry {
    background: #fff; color: #764ba2; border: 2px solid #764ba2;
    width: 100%;
}
.btn-retry:hover { background: #F8F0FF; }

.btn-save-result {
    background: linear-gradient(135deg, #10B981, #4ECDC4);
    color: #fff; box-shadow: 0 6px 20px rgba(16,185,129,0.3);
    width: 100%; margin-bottom: 10px;
}
.btn-save-result:hover { transform: translateY(-2px); }

.btn-records {
    background: #fff; color: #8B7355; border: 2px solid #E8D8C8;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.btn-records:hover { border-color: #FF8E53; background: #FFF8F0; transform: translateY(-2px); }

/* User status on landing */
.user-status {
    text-align: center; margin-top: 12px; font-size: 0.82rem; color: #B8A08A;
}
.user-status a {
    color: #FF6B6B; text-decoration: none; font-weight: 700; cursor: pointer;
}
.user-status a:hover { text-decoration: underline; }

/* ===== Records Page ===== */
#records {
    background: linear-gradient(135deg, #FFF8F0, #FFE8D6);
    padding: 20px 0; align-items: flex-start;
}
#records.active { align-items: flex-start; }

.records-card {
    background: #fff; border-radius: 24px; padding: 24px 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08); min-height: 60vh;
}
.records-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.records-title { font-size: 1.1rem; font-weight: 900; color: #3D2C2E; }
.btn-back-home {
    background: none; border: none; color: #B8A08A; font-size: 0.9rem;
    cursor: pointer; font-weight: 700; font-family: inherit; padding: 4px 8px;
}
.btn-back-home:hover { color: #FF6B6B; }
.btn-logout {
    background: none; border: 1px solid #E8D8C8; color: #B8A08A;
    font-size: 0.78rem; padding: 4px 12px; border-radius: 12px;
    cursor: pointer; font-family: inherit; font-weight: 700;
}
.btn-logout:hover { border-color: #FF6B6B; color: #FF6B6B; }

.records-user {
    text-align: center; font-size: 0.85rem; color: #8B7355;
    margin-bottom: 16px; font-weight: 700;
}

.records-list { display: flex; flex-direction: column; gap: 10px; }

.records-empty {
    text-align: center; padding: 40px 20px; color: #CDB9A0;
}
.records-empty p:first-child { font-size: 2.5rem; margin-bottom: 10px; }
.records-empty p:nth-child(2) { font-size: 1rem; font-weight: 700; color: #B8A08A; }
.records-empty p:nth-child(3) { font-size: 0.82rem; margin-top: 6px; }

.record-item {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; border-radius: 16px;
    background: linear-gradient(135deg, #FFF8F0, #FFF0F5);
    border: 1px solid #F0E0D0; cursor: pointer;
    transition: all 0.25s ease;
}
.record-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255,143,83,0.15);
    border-color: #FF8E53;
}
.record-emoji { font-size: 1.8rem; flex-shrink: 0; }
.record-info { flex: 1; min-width: 0; }
.record-title {
    font-size: 0.95rem; font-weight: 900; color: #3D2C2E;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.record-meta {
    font-size: 0.75rem; color: #B8A08A; margin-top: 3px;
    display: flex; gap: 10px;
}
.record-code {
    font-size: 0.82rem; font-weight: 900; color: #FF6B6B;
    flex-shrink: 0;
}
.record-arrow { color: #CDB9A0; font-size: 1.2rem; flex-shrink: 0; }
.record-delete {
    background: none; border: none; color: #CDB9A0; font-size: 1rem;
    cursor: pointer; padding: 4px 8px; flex-shrink: 0;
    transition: color 0.2s;
}
.record-delete:hover { color: #EF4444; }

/* ===== Auth Modal ===== */
.auth-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; backdrop-filter: blur(4px);
}
.auth-modal-content {
    background: #fff; border-radius: 24px; padding: 32px 24px;
    max-width: 380px; width: 100%; position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: scaleIn 0.25s ease;
}
.auth-close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none; font-size: 1.2rem; color: #CDB9A0;
    cursor: pointer; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.auth-close:hover { background: #f5f5f5; color: #666; }

.auth-tabs {
    display: flex; gap: 0; margin-bottom: 24px;
    background: #F5F0E8; border-radius: 12px; padding: 3px;
}
.auth-tab {
    flex: 1; padding: 10px; border: none; background: none;
    font-size: 0.9rem; font-weight: 700; color: #B8A08A;
    cursor: pointer; border-radius: 10px; font-family: inherit;
    transition: all 0.2s;
}
.auth-tab.active {
    background: #fff; color: #FF6B6B;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field label {
    display: block; font-size: 0.82rem; font-weight: 700;
    color: #8B7355; margin-bottom: 6px;
}
.auth-field input {
    width: 100%; padding: 12px 14px; border: 2px solid #F0E0D0;
    border-radius: 12px; font-size: 0.95rem; font-family: inherit;
    outline: none; transition: border-color 0.2s;
    box-sizing: border-box;
}
.auth-field input:focus { border-color: #FF8E53; }
.auth-error {
    font-size: 0.82rem; color: #EF4444; min-height: 20px;
    text-align: center;
}
.auth-submit { margin-top: 4px; }

/* Avatar Picker */
.avatar-picker {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.avatar-option {
    width: 56px; height: 56px; border-radius: 14px;
    border: 2px solid #F0E0D0; background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.avatar-option span { font-size: 2rem; }
.avatar-option:hover { border-color: #FF8E53; }
.avatar-option.selected {
    border-color: #FF6B6B; background: #FFF0F0;
    box-shadow: 0 2px 8px rgba(255,107,107,0.2);
}

/* Avatar upload */
.avatar-upload {
    flex-direction: column; gap: 2px;
}
.avatar-upload span:first-child { font-size: 1.4rem; }
.avatar-upload-hint {
    font-size: 0.6rem; color: #B8A08A; font-weight: 700; line-height: 1;
}
.avatar-preview-row {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin-top: 8px;
}
.avatar-preview-row img {
    width: 56px; height: 56px; border-radius: 14px;
    object-fit: cover; border: 2px solid #FF6B6B;
}
.avatar-preview-remove {
    background: none; border: 1px solid #E8D8C8; color: #B8A08A;
    font-size: 0.75rem; padding: 4px 10px; border-radius: 10px;
    cursor: pointer; font-family: inherit; font-weight: 700;
    transition: all 0.2s;
}
.avatar-preview-remove:hover { border-color: #EF4444; color: #EF4444; }

/* Share card new elements */
.sc-dog-name-area {
    text-align: center; margin-bottom: 6px; position: relative; z-index: 1;
    font-size: 18px; font-weight: 900; color: #3D2C2E;
}
.sc-family-badge {
    text-align: center; margin: 6px 0 4px; position: relative; z-index: 1;
    font-size: 11px; color: #B8A08A; font-weight: 700;
}
.sc-desc {
    text-align: center; font-size: 12px; color: #888; line-height: 1.7;
    padding: 0 20px; margin-bottom: 16px; position: relative; z-index: 1;
}
.sc-compat-row {
    display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 18px; position: relative; z-index: 1;
}
.sc-compat-item {
    background: rgba(255,255,255,0.55); border-radius: 10px;
    padding: 6px 12px; text-align: center; backdrop-filter: blur(4px);
}
.sc-compat-label { font-size: 10px; color: #B8A08A; }
.sc-compat-val { font-size: 12px; font-weight: 900; color: #3D2C2E; }

.result-footer {
    margin-top: 24px; padding-top: 16px; border-top: 1px solid #F0E0D0;
    position: relative; z-index: 1;
}
.result-footer p { font-size: 0.75rem; color: #CDB9A0; }

/* ===== Animations ===== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes tailWag {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(25deg); }
}
@keyframes tongueMove {
    0%, 100% { opacity: 1; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(0.85); }
}
@keyframes bodyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}
@keyframes earDroopLeft {
    to { transform: rotate(25deg) translateY(5px); }
}
@keyframes earDroopRight {
    to { transform: rotate(-25deg) translateY(5px); }
}
@keyframes earPerk {
    to { transform: rotate(-10deg) translateY(-5px); }
}
@keyframes tailDroop {
    to { transform: rotate(-40deg); }
}
@keyframes headTilt {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(8deg); }
}
@keyframes dotPulse {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}
@keyframes loadingProgress {
    0% { width: 0%; }
    50% { width: 65%; }
    100% { width: 100%; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

.fade-in-up { animation: fadeInUp 0.5s ease forwards; }
.scale-in { animation: scaleIn 0.4s ease forwards; }

/* ===== Responsive ===== */
@media (max-width: 480px) {
    .title { font-size: 2.2rem; }
    .highlight { font-size: 2.4rem; }
    .quiz-card { padding: 24px 16px; }
    .likert-btn { width: 38px; height: 38px; font-size: 0.9rem; }
    .result-card { padding: 28px 18px; }
    .result-type-code { font-size: 2.4rem; }
    .result-matches { flex-direction: column; }
}

/* ===== Share Card (for image generation) ===== */
.share-card {
    width: 420px; padding: 40px 32px 30px;
    background: linear-gradient(160deg, #FFF5F0 0%, #FFE8F5 35%, #F0E8FF 70%, #E8F0FF 100%);
    font-family: 'Noto Sans SC', -apple-system, sans-serif;
    position: relative; overflow: hidden;
    border-radius: 0;
}

.sc-bg-decor { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
.sc-paw, .sc-star { position: absolute; font-size: 28px; opacity: 0.12; }
.sc-paw-1 { top: 20px; right: 30px; transform: rotate(-20deg); font-size: 36px; }
.sc-paw-2 { bottom: 120px; left: 15px; transform: rotate(15deg); }
.sc-paw-3 { top: 80px; left: 25px; font-size: 22px; }
.sc-star-1 { top: 50px; right: 60px; font-size: 20px; opacity: 0.15; }
.sc-star-2 { bottom: 180px; right: 20px; font-size: 24px; opacity: 0.1; }

.sc-header { text-align: center; margin-bottom: 20px; position: relative; z-index: 1; }
.sc-header-tag {
    display: inline-block; padding: 6px 20px; border-radius: 20px;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: #fff; font-size: 13px; font-weight: 700;
    letter-spacing: 2px;
    box-shadow: 0 3px 12px rgba(255,107,107,0.3);
}

.sc-dog-area { text-align: center; margin-bottom: 8px; position: relative; z-index: 1; }
.sc-dog-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 150px; height: 150px; border-radius: 50%;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 4px 20px rgba(255,143,83,0.15);
    border: 3px solid rgba(255,107,107,0.15);
}

.sc-emoji {
    text-align: center; font-size: 36px; margin: 6px 0;
    position: relative; z-index: 1;
}

.sc-code {
    text-align: center; font-size: 52px; font-weight: 900;
    letter-spacing: 8px; line-height: 1.1;
    background: linear-gradient(135deg, #FF6B6B, #C471ED, #667eea);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative; z-index: 1;
}

.sc-name {
    text-align: center; font-size: 24px; font-weight: 900;
    color: #3D2C2E; margin: 6px 0 2px;
    position: relative; z-index: 1;
}

.sc-name-en {
    text-align: center; font-size: 13px; color: #B8A08A;
    letter-spacing: 1px; position: relative; z-index: 1;
}

.sc-divider {
    text-align: center; margin: 16px 0; position: relative; z-index: 1;
    color: #DCC8B8; font-size: 14px; letter-spacing: 6px;
}

.sc-slogan {
    text-align: center; font-size: 15px; font-weight: 700;
    color: #FF6B6B; line-height: 1.7; padding: 0 16px;
    margin-bottom: 20px; position: relative; z-index: 1;
}

.sc-matches {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: 22px; position: relative; z-index: 1;
}

.sc-match { text-align: center; }
.sc-match-best, .sc-match-nemesis {
    background: rgba(255,255,255,0.65); border-radius: 16px;
    padding: 12px 18px; min-width: 130px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    backdrop-filter: blur(4px);
}
.sc-match-icon { font-size: 20px; margin-bottom: 4px; }
.sc-match-vs .sc-match-icon {
    font-size: 14px; font-weight: 900; color: #CDB9A0;
    background: rgba(255,255,255,0.5); border-radius: 50%;
    width: 32px; height: 32px; line-height: 32px;
    display: inline-block;
}
.sc-match-label { font-size: 11px; color: #B8A08A; margin-bottom: 3px; }
.sc-match-value { font-size: 14px; font-weight: 900; color: #3D2C2E; }

.sc-dims {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 22px; position: relative; z-index: 1;
}

.sc-dim-item {
    background: rgba(255,255,255,0.55); border-radius: 12px;
    padding: 10px 8px; text-align: center;
    backdrop-filter: blur(4px);
}
.sc-dim-letter {
    font-size: 22px; font-weight: 900;
    background: linear-gradient(135deg, #FF6B6B, #C471ED);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sc-dim-desc { font-size: 11px; color: #8B7355; margin-top: 2px; }

.sc-footer { text-align: center; position: relative; z-index: 1; }
.sc-footer-line {
    width: 60px; height: 2px; margin: 0 auto 12px;
    background: linear-gradient(90deg, transparent, #DCC8B8, transparent);
}
.sc-footer-text { font-size: 12px; color: #B8A08A; font-weight: 700; }
.sc-footer-hint { font-size: 10px; color: #CDB9A0; margin-top: 4px; }

/* Share modal overlay */
.share-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; backdrop-filter: blur(4px);
}
.share-modal-content {
    background: #fff; border-radius: 20px; padding: 20px;
    max-width: 460px; width: 100%; text-align: center;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.share-modal-content img {
    width: 100%; border-radius: 8px; margin-bottom: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.share-modal-tip {
    font-size: 14px; color: #666; margin-bottom: 14px; font-weight: 700;
}
.share-modal-btns { display: flex; gap: 10px; }
.share-modal-btns .btn { flex: 1; font-size: 14px; padding: 12px; }
.btn-download {
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: #fff; box-shadow: 0 4px 12px rgba(255,107,107,0.3);
}
.btn-close-modal {
    background: #f5f5f5; color: #666;
}