.annual-report-window.dual-report-window { .hero-title { font-size: clamp(22px, 4vw, 34px); white-space: nowrap; } .dual-cover-title { font-size: clamp(26px, 5vw, 44px); white-space: normal; } .dual-names { font-size: clamp(24px, 4vw, 40px); font-weight: 700; display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; color: var(--ar-text-main); .amp { color: var(--ar-primary); } } .dual-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .dual-info-card { background: var(--ar-card-bg); border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.05)); border-radius: 14px; padding: 16px; &.full { grid-column: 1 / -1; } .info-label { font-size: 12px; color: var(--ar-text-sub); margin-bottom: 8px; } .info-value { font-size: 16px; font-weight: 600; color: var(--ar-text-main); } } .dual-message-list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; } .dual-message { background: var(--ar-card-bg); border-radius: 14px; padding: 14px; &.received { background: var(--ar-card-bg-hover); } .message-meta { font-size: 12px; color: var(--ar-text-sub); margin-bottom: 6px; } .message-content { font-size: 14px; color: var(--ar-text-main); } } .first-chat-scene { background: linear-gradient(180deg, #8f5b85 0%, #e38aa0 50%, #f6d0c8 100%); border-radius: 20px; padding: 28px 24px 24px; color: #fff; position: relative; overflow: hidden; margin-top: 16px; } .first-chat-scene::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.2), transparent 40%), radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.15), transparent 35%), radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.12), transparent 45%); opacity: 0.6; pointer-events: none; } .scene-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 8px; } .scene-subtitle { font-size: 18px; font-weight: 500; text-align: center; margin-bottom: 20px; opacity: 0.95; } .scene-messages { display: flex; flex-direction: column; gap: 14px; } .scene-message { display: flex; align-items: flex-end; gap: 12px; &.sent { flex-direction: row-reverse; } } .scene-avatar { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; } .scene-bubble { background: rgba(255, 255, 255, 0.85); color: #5a4d5e; padding: 10px 14px; border-radius: 14px; max-width: 60%; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); } .scene-message.sent .scene-bubble { background: rgba(255, 224, 168, 0.9); color: #4a3a2f; } .scene-meta { font-size: 11px; opacity: 0.7; margin-bottom: 4px; } .scene-content { font-size: 14px; line-height: 1.4; word-break: break-word; } .scene-message.sent .scene-avatar { background: rgba(255, 224, 168, 0.9); color: #4a3a2f; } .dual-stat-grid { display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 14px; margin: 20px -28px 24px; padding: 0 28px; overflow: visible; } .dual-stat-card { background: var(--ar-card-bg); border-radius: 14px; padding: 14px 12px; text-align: center; } .stat-num { font-size: clamp(20px, 2.8vw, 30px); font-variant-numeric: tabular-nums; white-space: nowrap; } .stat-unit { font-size: 12px; } .dual-stat-card.long .stat-num { font-size: clamp(18px, 2.4vw, 26px); letter-spacing: -0.02em; } .emoji-row { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 20px; margin: 0 -12px; } .emoji-card { border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.08)); border-radius: 16px; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; background: var(--ar-card-bg); img { width: 64px; height: 64px; object-fit: contain; } } .emoji-title { font-size: 12px; color: var(--ar-text-sub); } .emoji-placeholder { font-size: 12px; color: var(--ar-text-sub); word-break: break-all; text-align: center; } .word-cloud-empty { color: var(--ar-text-sub); font-size: 14px; text-align: center; padding: 24px 0; } }