/* 自托管 Great Vibes 字体 */
@font-face {
    font-family: 'Great Vibes';
    src: url('fonts/great-vibes-latin-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}

:root {
    --splash-font: 'Great Vibes';
            --bg-main: #f7f5ff;
            --bg-soft: #eef7f5;
            --bg-card: rgba(255, 255, 255, 0.82);
            --panel-strong: #fbfcff;
            --primary: #2e6b79;
            --primary-dark: #214d58;
            --primary-light: #dff1f3;
            --primary-ink: #1f3f49;
            --accent: #f07c63;
            --accent-soft: #ffe1d9;
            --support: #8f7cf7;
            --support-soft: #ece6ff;
            --text-main: #22303a;
            --text-secondary: #5d6875;
            --text-muted: #8a91a4;
            --ink-strong: #111827;
            --ink-stronger: #0f172a;
            --ink-strong-06: rgba(17, 24, 39, 0.06);
            --ink-strong-08: rgba(17, 24, 39, 0.08);
            --ink-strong-14: rgba(17, 24, 39, 0.14);
            --ink-strong-16: rgba(17, 24, 39, 0.16);
            --ink-strong-24: rgba(17, 24, 39, 0.24);
            --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
            --border: rgba(84, 99, 125, 0.14);
            --border-light: rgba(84, 99, 125, 0.08);
            --shadow-sm: 0 16px 38px rgba(96, 108, 139, 0.08);
            --shadow-md: 0 24px 60px rgba(96, 108, 139, 0.14);
            --shadow-lg: 0 36px 100px rgba(79, 88, 120, 0.18);
            --listening: #5b8def;
            --reading: #39a67d;
            --writing: #f0a531;
            --speaking: #8f7cf7;
            --translation: #ef6a6a;
        }

        * { box-sizing: border-box; font-family: 'Manrope', sans-serif; }

        body {
            background: var(--bg-main);
            min-height: 100vh;
            color: var(--text-main);
            background-image:
                radial-gradient(circle at 10% 12%, rgba(240, 124, 99, 0.22), transparent 24%),
                radial-gradient(circle at 86% 18%, rgba(46, 107, 121, 0.18), transparent 28%),
                radial-gradient(circle at 68% 84%, rgba(143, 124, 247, 0.18), transparent 24%),
                linear-gradient(180deg, #fcfbff 0%, #f4f7ff 46%, #eef7f5 100%);
            background-attachment: fixed;
        }

        body::before,
        body::after {
            content: '';
            position: fixed;
            inset: auto;
            pointer-events: none;
            z-index: 0;
            filter: blur(10px);
            opacity: 0.55;
            animation: floatAura 18s ease-in-out infinite;
        }

        body::before {
            top: 8%;
            right: 6%;
            width: 280px;
            height: 280px;
            border-radius: 42% 58% 57% 43% / 42% 43% 57% 58%;
            background: radial-gradient(circle, rgba(240, 124, 99, 0.24), rgba(240, 124, 99, 0));
        }

        body::after {
            left: 4%;
            bottom: 10%;
            width: 340px;
            height: 340px;
            border-radius: 54% 46% 36% 64% / 48% 58% 42% 52%;
            background: radial-gradient(circle, rgba(143, 124, 247, 0.18), rgba(143, 124, 247, 0));
            animation-delay: -8s;
        }

        #app {
            position: relative;
            z-index: 1;
        }

        @keyframes floatAura {
            0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
            50% { transform: translate3d(0, 18px, 0) scale(1.06); }
        }

        .brand-meta {
            margin-top: 0.18rem;
            font-size: 0.72rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .hidden { display: none !important; }

        .card {
            background: var(--bg-card);
            backdrop-filter: blur(18px);
            border-radius: 28px;
            box-shadow: var(--shadow-sm);
            transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
            border: 1px solid var(--border-light);
        }

        .card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--border);
            transform: translateY(-2px);
        }

        .nav-btn {
            padding: 0.8rem 1.1rem;
            border-radius: 999px;
            font-weight: 600;
            transition: background 0.28s var(--ease-smooth), color 0.28s var(--ease-smooth), transform 0.28s var(--ease-smooth);
            cursor: pointer;
            border: none;
            background: transparent;
            color: var(--text-secondary);
            letter-spacing: 0.01em;
            transform: translateY(0);
            position: relative;
            isolation: isolate;
            -webkit-tap-highlight-color: transparent;
        }

        .nav-btn::before {
            content: "";
            position: absolute;
            inset: 2px;
            border-radius: 999px;
            background: var(--ink-strong-06);
            opacity: 0;
            transform: scale(0.9);
            transition: opacity 0.28s var(--ease-smooth), transform 0.28s var(--ease-smooth), background 0.28s var(--ease-smooth);
            z-index: -1;
        }

        .nav-btn:hover {
            color: var(--ink-strong);
            transform: translateY(0);
        }

        .nav-btn:hover::before,
        .nav-btn:focus-visible::before,
        .nav-btn.active::before {
            opacity: 1;
            transform: scale(1);
        }

        .nav-btn:focus-visible {
            outline: none;
            color: var(--ink-strong);
        }

        .nav-btn.active {
            position: relative;
            background: transparent;
            color: var(--ink-strong);
            font-weight: 700;
            box-shadow: none;
        }

        .nav-btn.active::before {
            background: var(--ink-strong-08);
        }

        .nav-btn.active::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0.25rem;
            transform: translateX(-50%);
            width: 16px;
            height: 3px;
            border-radius: 999px;
            background: var(--ink-strong);
        }

        .btn-primary {
            background: var(--primary);
            color: #f8f4ec;
            border: 1px solid rgba(15, 58, 45, 0.14);
            border-radius: 16px;
            padding: 0.95rem 1.5rem;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
            box-shadow: 0 14px 28px rgba(31, 106, 82, 0.18);
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            box-shadow: 0 18px 34px rgba(31, 106, 82, 0.24);
            transform: translateY(-1px);
        }

        .btn-secondary {
            background: rgba(255, 251, 245, 0.82);
            color: var(--primary-ink);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 0.8rem 1.15rem;
            font-weight: 700;
            font-size: 0.875rem;
            cursor: pointer;
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        }

        .btn-secondary:hover {
            background: var(--primary-light);
            border-color: var(--primary);
            transform: translateY(-1px);
        }

        .exam-card {
            background: rgba(255, 251, 245, 0.84);
            border: 1.5px solid var(--border);
            border-radius: 22px;
            padding: 1.5rem;
            text-align: center;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        .exam-card:hover {
            border-color: rgba(31, 106, 82, 0.4);
            background: rgba(255, 248, 240, 0.95);
            box-shadow: var(--shadow-sm);
            transform: translateY(-2px);
        }

        .exam-card.active {
            background: var(--primary-light);
            border-color: var(--primary);
            box-shadow: inset 0 0 0 1px rgba(31, 106, 82, 0.06);
        }

        /* 科目手风琴 */
        .subject-box {
            border-radius: 16px;
            margin-bottom: 1rem;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .subject-box.listening { background: #eff6ff; border: 1.5px solid #93bbfd; }
        .subject-box.reading { background: #ecfdf5; border: 1.5px solid #6ee7b7; }
        .subject-box.writing { background: #fffbeb; border: 1.5px solid #fcd34d; }
        .subject-box.speaking { background: #faf5ff; border: 1.5px solid #c4b5fd; }
        .subject-box.translation { background: #fef2f2; border: 1.5px solid #fca5a5; }

        .accordion-header {
            padding: 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }

        .accordion-content.expanded {
            max-height: 600px;
        }

        .accordion-arrow {
            transition: transform 0.3s ease;
            width: 20px;
            height: 20px;
        }

        .accordion-arrow.expanded {
            transform: rotate(180deg);
        }

        /* 输入框 */
        .input {
            background: white;
            border: 1.5px solid var(--border);
            border-radius: 12px;
            padding: 0.875rem 1rem;
            width: 100%;
            outline: none;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
            color: var(--text-main);
        }

        .input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(15, 157, 110, 0.1);
        }

        .input-error {
            border-color: #ef4444 !important;
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
        }
        .input-error-msg {
            font-size: 0.72rem;
            color: #ef4444;
            margin-top: 0.15rem;
        }

        /* Score Slider */
        .score-slider-wrap { margin-bottom: 0.5rem; }
        .score-range {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 999px;
            background: rgba(84, 99, 125, 0.08);
            outline: none;
            cursor: pointer;
            transition: background 0.1s ease;
        }
        .score-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 22px; height: 22px;
            border-radius: 999px;
            background: #fff;
            border: 2px solid var(--slider-color, var(--primary));
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .score-range::-webkit-slider-thumb:hover {
            transform: scale(1.15);
            box-shadow: 0 3px 12px rgba(0,0,0,0.15);
        }
        .score-range::-moz-range-thumb {
            width: 22px; height: 22px;
            border-radius: 999px;
            background: #fff;
            border: 2px solid var(--slider-color, var(--primary));
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .score-range::-moz-range-thumb:hover {
            box-shadow: 0 3px 12px rgba(0,0,0,0.15);
        }
        .score-range::-moz-range-track {
            height: 6px;
            border-radius: 999px;
            background: transparent;
        }
        .score-range-marks {
            display: flex;
            justify-content: space-between;
            padding: 0.15rem 0.25rem 0;
        }
        .score-range-marks span {
            font-size: 0.65rem;
            color: #9ca3af;
        }
        .score-range-val {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--slider-color, var(--primary));
            min-width: 2.5rem;
            text-align: right;
            flex-shrink: 0;
        }

        /* Tab */
        .tab-btn {
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            background: transparent;
            color: #6b7280;
            transition: all 0.3s ease;
        }

        .tab-btn:hover {
            color: #10b981;
        }

        .tab-btn.active {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }

        /* 统计卡片 */
        .stat-box {
            background: white;
            border: 1.5px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem;
            transition: border-color 0.15s ease;
        }

        .stat-box:hover {
            border-color: var(--primary);
        }

        /* 记录项 */
        .record-box {
            background: white;
            border: 1.5px solid var(--border);
            border-radius: 16px;
            padding: 1.25rem;
            margin-bottom: 0.75rem;
            transition: border-color 0.15s ease;
        }

        .record-box:hover {
            border-color: var(--primary);
        }

        .record-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
        }

        .record-main {
            flex: 1;
            min-width: 0;
        }

        .record-meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            flex-wrap: wrap;
        }

        .record-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .record-side {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            flex-shrink: 0;
        }

        .record-total {
            text-align: right;
        }

        .record-delete {
            background: none;
            border: none;
            color: #9ca3af;
            cursor: pointer;
            font-size: 1.5rem;
            line-height: 1;
            width: 34px;
            height: 34px;
            border-radius: 9999px;
        }

        .record-delete:hover {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.08);
        }

        /* 分数标签 */
        .score-badge {
            display: inline-flex;
            padding: 0.375rem 0.875rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-right: 0;
            white-space: nowrap;
        }

        .recent-score-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .recent-score-item {
            border-radius: 16px;
            padding: 0.8rem 1rem;
            text-align: center;
            min-height: 118px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .recent-score-item-label {
            font-size: 0.75rem;
            font-weight: 600;
        }

        .recent-score-item-value {
            font-size: 1.5rem;
            font-weight: bold;
        }

        @media (min-width: 1024px) {
            .recent-score-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 0.9rem;
            }

            .recent-score-item {
                min-height: 132px;
                padding: 0.95rem 1.1rem;
            }

            .recent-score-item-label {
                font-size: 1rem;
            }

            .recent-score-item-value {
                font-size: 2.35rem;
                line-height: 1.1;
            }
        }

        /* 模态框 */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background: white;
            border-radius: 24px;
            padding: 2rem;
            max-width: 600px;
            width: 90%;
            max-height: 85vh;
            overflow-y: auto;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
            transform: scale(0.9) translateY(20px);
            transition: all 0.3s ease;
        }

        .modal-overlay.active .modal-content {
            transform: scale(1) translateY(0);
        }

        /* 模式选择弹窗 */
        .mode-choice-content {
            max-width: 420px;
            padding: 2rem 2rem 1.5rem;
            text-align: center;
        }
        .mode-choice-header {
            margin-bottom: 1rem;
        }
        .mode-choice-icon {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }
        .mode-choice-header h2 {
            font-size: 1.3rem;
            font-weight: 800;
            color: #111827;
            margin: 0;
        }
        .mode-choice-desc {
            font-size: 0.88rem;
            color: #6b7280;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }
        .mode-choice-buttons {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        .mode-choice-btn {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            width: 100%;
            padding: 1rem 1.2rem;
            border-radius: 14px;
            border: 1.5px solid #e5e7eb;
            background: white;
            cursor: pointer;
            text-align: left;
            transition: all 0.2s ease;
        }
        .mode-choice-btn:hover {
            border-color: #6366f1;
            background: rgba(99,102,241,0.04);
            transform: translateY(-1px);
        }
        .mode-choice-btn-icon {
            font-size: 1.6rem;
            flex-shrink: 0;
        }
        .mode-choice-btn-title {
            font-weight: 700;
            font-size: 0.95rem;
            color: #111827;
        }
        .mode-choice-btn-sub {
            font-size: 0.78rem;
            color: #9ca3af;
            margin-top: 0.15rem;
        }
        .mode-choice-login {
            border-color: rgba(99,102,241,0.3);
            background: rgba(99,102,241,0.03);
        }
        .mode-choice-login:hover {
            background: rgba(99,102,241,0.08);
            border-color: #6366f1;
        }

        /* 渐变文字 — 改为纯色 */
        .gradient-text {
            color: var(--primary);
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 3rem;
            color: #9ca3af;
        }

        /* 总分预览 */
        .total-preview {
            background: var(--primary-light);
            border: 1.5px solid var(--primary);
            border-radius: 16px;
            padding: 1.5rem;
        }

        /* Task 分数框 */
        .task-box {
            background: rgba(255, 255, 255, 0.7);
            border: 1.5px solid;
            border-radius: 12px;
            padding: 1rem;
            margin-top: 1rem;
        }
        /* 版本日志与使用文档 */
        .doc-btn {
            background: transparent;
            color: var(--primary);
            border: 1px solid var(--border);
        }

        .doc-btn:hover {
            background: var(--primary-light);
            border-color: var(--primary);
        }

        .info-modal-content {
            max-width: 680px;
            max-height: 85vh;
            min-height: 420px;
        }

        .info-modal-body {
            background: #f9fafb;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.25rem;
            line-height: 1.7;
            color: #374151;
            overflow-y: auto;
            max-height: 68vh;
        }

        .info-modal-layout {
            display: flex;
            gap: 0;
            flex-direction: column;
        }

        .guide-sidebar {
            display: flex;
            gap: 0.25rem;
            padding: 0.15rem;
            background: #f3f4f6;
            border-radius: 10px;
            margin-bottom: 0.75rem;
            flex-shrink: 0;
        }

        .guide-nav-btn {
            flex: 1;
            padding: 0.5rem 0.75rem;
            font-size: 0.82rem;
            font-weight: 600;
            text-align: center;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: #6b7280;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .guide-nav-btn:hover {
            color: #374151;
        }

        .guide-nav-btn.active {
            background: #fff;
            color: #1f6a52;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }

        .info-modal-body .guide-section {
            animation: guideSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
        }

        @keyframes guideSlideIn {
            from { opacity: 0; transform: translateX(12px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .info-modal-footer {
            margin-top: 1.25rem;
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        /* ==================== Changelog Styles ==================== */
        .changelog-beta-banner {
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            border: 1px solid #fbbf24;
            border-radius: 12px;
            padding: 0.85rem 1rem;
            margin-bottom: 1rem;
            font-size: 0.78rem;
            line-height: 1.6;
            color: #92400e;
            animation: changelogFadeIn 0.3s ease both;
        }

        .changelog-beta-banner p {
            margin: 0;
        }

        .changelog-beta-badge {
            display: inline-block;
            font-size: 0.6rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            background: #f59e0b;
            color: #fff;
            padding: 0.12rem 0.45rem;
            border-radius: 99px;
            line-height: 1.5;
            margin-bottom: 0.35rem;
        }

        .changelog-entry {
            padding: 0.25rem 0;
        }

        .changelog-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.5rem;
        }

        .changelog-version {
            font-size: 1.1rem;
            font-weight: 800;
            color: #111827;
        }

        .changelog-date {
            font-size: 0.75rem;
            color: #9ca3af;
            padding: 0.15rem 0.6rem;
            border-radius: 99px;
            background: #f3f4f6;
        }

        .changelog-codename {
            font-size: 0.85rem;
            color: #6b7280;
            margin-bottom: 1.25rem;
            letter-spacing: 0.02em;
        }

        .changelog-section {
            margin-bottom: 1rem;
            padding-left: 0;
            animation: changelogFadeIn 0.4s ease both;
        }

        .changelog-section:nth-child(2) { animation-delay: 0.05s; }
        .changelog-section:nth-child(3) { animation-delay: 0.1s; }
        .changelog-section:nth-child(4) { animation-delay: 0.15s; }
        .changelog-section:nth-child(5) { animation-delay: 0.2s; }

        @keyframes changelogFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .changelog-section-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.4rem;
        }

        .changelog-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 6px;
            color: #fff;
            font-size: 0.65rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .changelog-list {
            list-style: none;
            padding: 0;
            margin: 0 0 0 0.1rem;
        }

        .changelog-list li {
            position: relative;
            padding-left: 1rem;
            margin-bottom: 0.3rem;
            font-size: 0.82rem;
            line-height: 1.7;
            color: #374151;
        }

        .changelog-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.55em;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #d1d5db;
        }

        /* ==================== Guide Styles ==================== */
        .guide-entry {
            padding: 0.25rem 0;
        }

        .guide-section {
            margin-bottom: 1.25rem;
        }

        .guide-desc {
            font-size: 0.85rem;
            color: #6b7280;
            line-height: 1.65;
            margin: 0 0 0.75rem;
        }

        .guide-quick {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .guide-quick-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 0.88rem;
            color: #374151;
            line-height: 1.5;
        }

        .guide-num {
            width: 1.4rem;
            height: 1.4rem;
            line-height: 1.4rem;
            text-align: center;
            font-size: 0.7rem;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, #10b981, #3b82f6);
            border-radius: 50%;
            flex-shrink: 0;
        }

        .guide-exam-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.4rem;
        }

        .guide-chip {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            font-size: 0.88rem;
            font-weight: 600;
            color: #374151;
            background: #f9fafb;
            border: 1px solid #f0f0f0;
            border-radius: 10px;
            padding: 0.6rem;
        }

        .guide-section-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.75rem;
        }

        .guide-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 1.5rem;
            border-radius: 6px;
            color: #fff;
            font-size: 0.75rem;
            flex-shrink: 0;
        }

        /* Quick Start Steps */
        .guide-steps {
            list-style: none;
            padding: 0;
            margin: 0;
            counter-reset: guide-step;
        }

        .guide-steps li {
            counter-increment: guide-step;
            position: relative;
            padding-left: 2rem;
            margin-bottom: 0.4rem;
            font-size: 0.8rem;
            line-height: 1.7;
            color: #374151;
        }

        .guide-steps li::before {
            content: counter(guide-step);
            position: absolute;
            left: 0;
            top: 0.05em;
            width: 1.3rem;
            height: 1.3rem;
            line-height: 1.3rem;
            text-align: center;
            font-size: 0.65rem;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, #10b981, #3b82f6);
            border-radius: 50%;
        }

        /* AI Cards */
        .guide-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .guide-card {
            background: #f9fafb;
            border: 1px solid #f0f0f0;
            border-radius: 10px;
            padding: 0.65rem;
            text-align: center;
        }

        .guide-card-icon {
            font-size: 1.25rem;
            margin-bottom: 0.2rem;
        }

        .guide-card-title {
            font-size: 0.85rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.15rem;
        }

        .guide-card-desc {
            font-size: 0.75rem;
            color: #6b7280;
            line-height: 1.5;
        }

        .guide-hint {
            font-size: 0.78rem;
            color: #9ca3af;
            text-align: center;
            margin: 0;
        }

        /* Exam List */
        .guide-exam-list {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }

        .guide-exam-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            background: #f9fafb;
            border-radius: 10px;
            padding: 0.55rem 0.7rem;
            border: 1px solid #f0f0f0;
        }

        .guide-exam-icon {
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .guide-exam-item strong {
            color: #111827;
            font-size: 0.88rem;
        }

        .guide-exam-item div {
            font-size: 0.78rem;
            color: #6b7280;
            line-height: 1.5;
        }

        /* Creation Steps */
        .guide-steps-list {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            margin-bottom: 1rem;
        }

        .guide-sub-title {
            font-size: 0.78rem;
            font-weight: 700;
            color: #9ca3af;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 0.5rem;
        }

        .guide-step {
            display: flex;
            align-items: flex-start;
            gap: 0.6rem;
            font-size: 0.88rem;
            line-height: 1.6;
            color: #374151;
        }

        .guide-step-num {
            width: 1.4rem;
            height: 1.4rem;
            line-height: 1.4rem;
            text-align: center;
            font-size: 0.7rem;
            font-weight: 700;
            color: #fff;
            background: linear-gradient(135deg, #8b5cf6, #ec4899);
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 0.05rem;
        }

        .guide-step strong {
            color: #111827;
        }

        /* Scoring Methods */
        .guide-methods {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }

        .guide-method {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            color: #374151;
            line-height: 1.5;
        }

        .guide-method-badge {
            width: 1.1rem;
            height: 1.1rem;
            line-height: 1.1rem;
            text-align: center;
            font-size: 0.6rem;
            font-weight: 700;
            color: #fff;
            background: #8b5cf6;
            border-radius: 4px;
            flex-shrink: 0;
        }

        .guide-method strong {
            color: #111827;
        }

        /* Generic List */
        .guide-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .guide-list li {
            position: relative;
            padding-left: 1rem;
            margin-bottom: 0.35rem;
            font-size: 0.88rem;
            line-height: 1.65;
            color: #374151;
        }

        .guide-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.55em;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #10b981;
        }

        .changelog-fab {
            position: fixed;
            left: 1.25rem;
            bottom: 1.25rem;
            z-index: 950;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, 0.96);
            color: var(--primary-dark);
            border-radius: 9999px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 0.6rem 0.7rem;
            cursor: pointer;
            transition: background 0.15s ease;
        }

        .changelog-fab:hover {
            background: var(--primary-light);
            border-color: var(--primary);
        }

        .changelog-fab-label {
            max-width: 0;
            overflow: hidden;
            white-space: nowrap;
            opacity: 0;
            font-size: 0.85rem;
            font-weight: 600;
            transition: max-width 0.25s ease, opacity 0.2s ease;
        }

        .changelog-fab:hover .changelog-fab-label,
        .changelog-fab:focus-visible .changelog-fab-label {
            max-width: 88px;
            opacity: 1;
        }

        .changelog-fab:focus-visible {
            outline: 2px solid rgba(16, 185, 129, 0.35);
            outline-offset: 2px;
        }

        .tutuer-fab {
            position: fixed;
            left: 1.25rem;
            bottom: 5.3rem;
            z-index: 970;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border: 1px solid rgba(195, 95, 61, 0.2);
            background: rgba(251, 247, 241, 0.96);
            color: var(--accent);
            border-radius: 9999px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 0.6rem 0.7rem;
            cursor: pointer;
            transition: background 0.15s ease;
        }

        .tutuer-fab-dot {
            position: absolute;
            top: 0.18rem;
            right: 0.18rem;
            width: 9px;
            height: 9px;
            border-radius: 9999px;
            background: #ef4444;
            border: 2px solid #ffffff;
            box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25);
        }

        .tutuer-fab:hover {
            background: #eff6ff;
            border-color: rgba(59, 130, 246, 0.4);
        }

        .tutuer-fab-label {
            max-width: 0;
            overflow: hidden;
            white-space: nowrap;
            opacity: 0;
            font-size: 0.85rem;
            font-weight: 600;
            transition: max-width 0.25s ease, opacity 0.2s ease;
        }

        .tutuer-fab:hover .tutuer-fab-label,
        .tutuer-fab:focus-visible .tutuer-fab-label {
            max-width: 92px;
            opacity: 1;
        }

        .tutuer-panel {
            position: fixed;
            left: 1.25rem;
            bottom: 1.25rem;
            width: min(360px, calc(100vw - 1.5rem));
            height: 470px;
            background: #ffffff;
            border: 1px solid #efd3c8;
            border-radius: 20px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            z-index: 980;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .tutuer-panel-header {
            background: #fff1ea;
            border-bottom: 1px solid #efd3c8;
            padding: 0.85rem 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .tutuer-panel-controls {
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .tutuer-expand-btn {
            display: none;
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 9999px;
            background: #ffffff;
            color: #64748b;
            cursor: pointer;
            font-size: 0.95rem;
            line-height: 1;
        }

        .tutuer-chat-list {
            flex: 1;
            overflow-y: auto;
            padding: 0.9rem;
            background: #f8fafc;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .tutuer-msg {
            max-width: 86%;
            border-radius: 16px;
            padding: 0.6rem 0.75rem;
            line-height: 1.55;
            font-size: 0.92rem;
            white-space: pre-wrap;
            word-break: break-word;
        }

        .tutuer-msg.assistant {
            background: #ffffff;
            color: #1f2937;
            border: 1px solid #e5e7eb;
            align-self: flex-start;
        }

        .tutuer-msg.user {
            background: #dbe7e1;
            color: var(--primary-ink);
            border: 1px solid #bfd5ca;
            align-self: flex-end;
        }

        .tutuer-panel-footer {
            padding: 0.75rem;
            border-top: 1px solid #e5e7eb;
            background: #ffffff;
        }

        .tutuer-quick-actions {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 0.55rem;
            flex-wrap: wrap;
        }

        .tutuer-quick-btn {
            border: 1px solid #efd3c8;
            border-radius: 9999px;
            background: #fff1ea;
            color: #a24c30;
            font-size: 0.78rem;
            font-weight: 600;
            padding: 0.33rem 0.72rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .tutuer-quick-btn:hover {
            background: #f8dfd5;
            border-color: #e8bcae;
        }

        .tutuer-input-row {
            display: flex;
            gap: 0.5rem;
            align-items: flex-end;
        }

        .tutuer-input {
            flex: 1;
            border: 1px solid #d1d5db;
            border-radius: 12px;
            padding: 0.65rem 0.8rem;
            min-height: 42px;
            max-height: 98px;
            resize: vertical;
            outline: none;
            font-size: 0.9rem;
        }

        .tutuer-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(195, 95, 61, 0.15);
        }

        .site-footer {
            padding: 1.8rem 1rem 5.8rem;
        }

        .footer-shell {
            max-width: 1180px;
            margin: 0 auto;
            padding: 1.1rem;
            border-radius: 30px;
            background:
                radial-gradient(circle at top right, rgba(255, 138, 99, 0.14), transparent 28%),
                radial-gradient(circle at bottom left, rgba(91, 124, 255, 0.12), transparent 24%),
                rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(92, 104, 138, 0.1);
            box-shadow: 0 24px 50px -40px rgba(66, 75, 102, 0.42);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .footer-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 0.95rem;
        }

        .footer-brand {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            min-width: 0;
        }

        .footer-brand-mark {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            background: linear-gradient(135deg, #5b7cff, #ff8a63);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 16px 34px -20px rgba(91, 124, 255, 0.55);
            flex-shrink: 0;
        }

        .footer-brand-mark svg {
            display: block;
        }

        .footer-title {
            font-family: 'Noto Serif SC', serif;
            font-size: 1.02rem;
            font-weight: 700;
            color: var(--primary-ink);
            margin-bottom: 0.12rem;
        }

        .footer-desc {
            font-size: 0.84rem;
            color: #7a8197;
        }

        .footer-pills {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 0.65rem;
        }

        .footer-matrix {
            margin: 0.2rem 0 1rem;
            padding: 0.85rem 0.9rem;
            border-radius: 20px;
            background: transparent;
            border: 1px solid rgba(92, 104, 138, 0.06);
            box-shadow: none;
        }

        .footer-matrix-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0.75rem;
        }

        .footer-matrix-kicker {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.38rem 0.72rem;
            border-radius: 999px;
            background: rgba(91, 124, 255, 0.1);
            color: #5568dc;
            font-size: 0.74rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            margin-bottom: 0.55rem;
        }

        .footer-matrix-title {
            font-size: 0.88rem;
            font-weight: 700;
            color: var(--primary-ink);
            margin-bottom: 0.12rem;
        }

        .footer-matrix-desc {
            font-size: 0.78rem;
            color: #7a8197;
            max-width: 680px;
        }

        .footer-matrix-note {
            font-size: 0.74rem;
            color: #8b90a3;
            white-space: nowrap;
        }

        .footer-matrix-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.65rem;
        }

        .matrix-card {
            position: relative;
            display: block;
            padding: 0.6rem 0.7rem;
            border-radius: 14px;
            text-decoration: none;
            color: inherit;
            overflow: hidden;
            min-height: 0;
            border: 1px solid rgba(92, 104, 138, 0.08);
            box-shadow: 0 2px 8px -4px rgba(66, 75, 102, 0.12);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }

        .matrix-card::after {
            display: none;
        }

        .matrix-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px -6px rgba(66, 75, 102, 0.18);
        }

        .matrix-card.current {
            border-color: rgba(41, 111, 103, 0.15);
            box-shadow: 0 2px 8px -4px rgba(41, 111, 103, 0.1);
        }

        .matrix-card-shell {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 0.55rem;
        }

        .matrix-card-head {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0;
            flex-shrink: 0;
        }

        .matrix-card-icon {
            width: 2rem;
            height: 2rem;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            box-shadow: 0 4px 10px -6px rgba(66, 75, 102, 0.2);
            flex-shrink: 0;
        }

        .matrix-card-icon svg {
            display: block;
        }

        .matrix-card-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.28rem 0.52rem;
            border-radius: 999px;
            font-size: 0.66rem;
            font-weight: 700;
            background: rgba(255,255,255,0.72);
            color: #55606f;
            border: 1px solid rgba(92,104,138,0.08);
        }

        .matrix-card-main {
            min-width: 0;
            flex: 1;
        }

        .matrix-card-name {
            font-size: 0.85rem;
            font-weight: 700;
            color: #223047;
            margin-bottom: 0.08rem;
        }

        .matrix-card-text {
            font-size: 0.72rem;
            line-height: 1.45;
            color: #626c84;
            margin-bottom: 0;
        }

        .matrix-card-foot {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 0.45rem;
            font-size: 0.72rem;
            color: #5f6b82;
            flex-shrink: 0;
        }

        .matrix-card-link {
            display: inline-flex;
            align-items: center;
            gap: 0.38rem;
            font-weight: 700;
            color: #32435f;
        }

        .footer-pill,
        .footer-link-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 0.9rem;
            border-radius: 999px;
            font-size: 0.82rem;
            line-height: 1;
            border: 1px solid rgba(92, 104, 138, 0.1);
            background: rgba(255, 255, 255, 0.88);
            color: #5b6278;
            box-shadow: 0 14px 30px -26px rgba(66, 75, 102, 0.45);
        }

        .footer-pill strong,
        .footer-link-pill strong {
            color: var(--primary-ink);
            font-weight: 700;
        }

        .footer-link-pill {
            text-decoration: none;
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }

        .footer-link-pill:hover {
            transform: translateY(-1px);
            border-color: rgba(91, 124, 255, 0.24);
            box-shadow: 0 18px 32px -24px rgba(91, 124, 255, 0.38);
        }

        .footer-pill-icon {
            width: 1.55rem;
            height: 1.55rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .footer-pill-icon svg {
            display: block;
        }

        .footer-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            padding-top: 0.95rem;
            border-top: 1px solid rgba(92, 104, 138, 0.1);
            color: #7a8197;
            font-size: 0.82rem;
        }

        .footer-meta-copy {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem 1rem;
            align-items: center;
        }

        .beta-banner {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0.6rem 1rem;
            display: flex;
            align-items: stretch;
            gap: 0;
            animation: bannerSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
        }
        .beta-banner.hidden {
            display: none;
        }
        @keyframes bannerSlideIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .banner-badge {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-shrink: 0;
            padding: 0.5rem 0.85rem 0.5rem 0.9rem;
            background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(236,72,153,0.08));
            border: 1px solid rgba(99,102,241,0.15);
            border-radius: 10px 0 0 10px;
            border-right: none;
            font-size: 0.82rem;
            font-weight: 700;
            color: #6366f1;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        .banner-badge-icon {
            font-size: 0.95rem;
        }
        .banner-scroll-wrapper {
            flex: 1;
            overflow: hidden;
            position: relative;
            padding: 0.5rem 0;
            background: rgba(99,102,241,0.03);
            border-top: 1px solid rgba(99,102,241,0.1);
            border-bottom: 1px solid rgba(99,102,241,0.1);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
        }
        .banner-scroll-track {
            display: inline-flex;
            white-space: nowrap;
            animation: bannerScroll 60s linear infinite;
        }
        .banner-scroll-track:hover {
            animation-play-state: paused;
        }
        .banner-scroll-track > span {
            padding: 0 1.6rem;
            font-size: 0.84rem;
            color: #4b5563;
            line-height: 1.6;
        }
        @keyframes bannerScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        .banner-name {
            display: inline-block;
            padding: 0.1rem 0.5rem;
            border-radius: 99px;
            font-weight: 700;
            font-size: 0.82rem;
            margin: 0 0.15rem;
        }
        .banner-name-red {
            background: rgba(239,68,68,0.12);
            color: #dc2626;
        }
        .banner-name-blue {
            background: rgba(59,130,246,0.12);
            color: #2563eb;
        }
        .banner-name-green {
            background: rgba(16,185,129,0.12);
            color: #059669;
        }
        .banner-close {
            flex-shrink: 0;
            width: 36px;
            border: 1px solid rgba(99,102,241,0.12);
            border-left: none;
            border-radius: 0 10px 10px 0;
            background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.04));
            color: #9ca3af;
            font-size: 1.1rem;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        .banner-close:hover {
            background: rgba(99,102,241,0.15);
            color: #4338ca;
        }
        .banner-close:active {
            transform: scale(0.92);
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(248, 249, 255, 0.72);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(84, 99, 125, 0.1);
        }

        .site-header-inner,
        .site-main {
            max-width: 1180px;
            margin: 0 auto;
        }

        .site-header-inner {
            padding: 0.75rem 1rem;
        }

        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.65rem;
        }

        .brand-lockup {
            display: flex;
            align-items: center;
            gap: 0.95rem;
        }

        .brand-mark {
            width: 58px;
            height: 58px;
            border-radius: 20px;
            background:
                radial-gradient(circle at 30% 28%, rgba(255,255,255,0.34), transparent 28%),
                linear-gradient(145deg, #2e6b79, #f07c63 62%, #8f7cf7);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 18px 34px rgba(93, 103, 147, 0.24);
        }

        .brand-mark svg {
            display: block;
        }

        .brand-title {
            font-family: 'Noto Serif SC', serif;
            font-size: 1.82rem;
            font-weight: 700;
            color: var(--primary-ink);
            letter-spacing: -0.03em;
            margin: 0;
            line-height: 1;
        }

        .brand-subtitle {
            font-size: 0.92rem;
            color: var(--text-secondary);
        }

        .nav-shell {
            display: flex;
            gap: 0.55rem;
            flex-wrap: wrap;
            justify-content: flex-end;
            padding: 0.35rem;
            border: 1px solid rgba(84, 99, 125, 0.08);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.62);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
        }

        .site-main {
            padding: 2rem 1rem;
        }

        .hero-card {
            padding: 2rem;
            margin-bottom: 1.75rem;
            overflow: hidden;
            position: relative;
            background:
                radial-gradient(circle at top left, rgba(46, 107, 121, 0.16), transparent 24%),
                radial-gradient(circle at 85% 18%, rgba(240, 124, 99, 0.16), transparent 22%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 249, 255, 0.92));
        }

        .hero-card::after {
            content: '';
            position: absolute;
            inset: auto -8% -32% auto;
            width: 220px;
            height: 220px;
            background: radial-gradient(circle, rgba(31, 106, 82, 0.12), transparent 68%);
            pointer-events: none;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr);
            gap: 1.25rem;
            align-items: stretch;
        }

        .hero-copy,
        .hero-side {
            position: relative;
            z-index: 1;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.42rem 0.8rem;
            border-radius: 999px;
            background: rgba(236, 230, 255, 0.84);
            border: 1px solid rgba(143, 124, 247, 0.16);
            color: var(--support);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .hero-title {
            margin-top: 1rem;
            font-family: 'Noto Serif SC', serif;
            font-size: clamp(1.8rem, 3vw, 2.8rem);
            line-height: 1.14;
            letter-spacing: -0.04em;
            color: #1a332b;
        }

        .hero-desc {
            margin-top: 1rem;
            max-width: 42rem;
            font-size: 1rem;
            line-height: 1.8;
            color: var(--text-secondary);
        }

        .hero-actions {
            display: flex;
            gap: 0.85rem;
            flex-wrap: wrap;
            margin-top: 1.35rem;
        }

        .hero-note {
            margin-top: 1.1rem;
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .hero-side {
            padding: 1.3rem;
            border-radius: 24px;
            background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,247,255,0.92));
            border: 1px solid rgba(84, 99, 125, 0.08);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 1rem;
        }

        .hero-side-label {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .hero-side-score {
            font-size: 3.25rem;
            font-weight: 800;
            color: var(--primary);
            line-height: 1;
        }

        .hero-side-meta {
            display: grid;
            gap: 0.75rem;
        }

        .hero-archive-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .hero-archive-pill {
            padding: 0.88rem 0.95rem;
            border-radius: 18px;
            background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(249,250,255,0.92));
            border: 1px solid rgba(84, 99, 125, 0.1);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
            min-width: 0;
            text-align: left;
        }

        .hero-archive-pill-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.65rem;
            margin-bottom: 0.45rem;
        }

        .hero-archive-name {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-main);
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .hero-archive-value {
            font-family: 'Noto Serif SC', serif;
            font-style: italic;
            font-size: 1.28rem;
            line-height: 1;
            letter-spacing: -0.03em;
            color: var(--primary);
            white-space: nowrap;
        }

        .hero-archive-meta {
            display: grid;
            gap: 0.22rem;
            font-size: 0.78rem;
            color: var(--text-muted);
            line-height: 1.45;
        }

        .hero-archive-meta-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
        }

        .hero-archive-meta-label {
            color: var(--text-muted);
        }

        .hero-archive-meta-value {
            color: var(--text-secondary);
            font-weight: 700;
            text-align: right;
            white-space: nowrap;
        }

        .hero-archive-pill.c1 {
            background: linear-gradient(180deg, rgba(233, 243, 255, 0.96), rgba(245, 249, 255, 0.92));
            border-color: rgba(91, 141, 239, 0.2);
        }

        .hero-archive-pill.c1 .hero-archive-value {
            color: #5b8def;
        }

        .hero-archive-pill.c2 {
            background: linear-gradient(180deg, rgba(232, 250, 240, 0.96), rgba(244, 253, 247, 0.92));
            border-color: rgba(57, 166, 125, 0.2);
        }

        .hero-archive-pill.c2 .hero-archive-value {
            color: #39a67d;
        }

        .hero-archive-pill.c3 {
            background: linear-gradient(180deg, rgba(255, 245, 225, 0.96), rgba(255, 250, 240, 0.92));
            border-color: rgba(240, 165, 49, 0.2);
        }

        .hero-archive-pill.c3 .hero-archive-value {
            color: #f0a531;
        }

        .hero-archive-pill.c4 {
            background: linear-gradient(180deg, rgba(241, 236, 255, 0.96), rgba(248, 245, 255, 0.92));
            border-color: rgba(143, 124, 247, 0.2);
        }

        .hero-archive-pill.c4 .hero-archive-value {
            color: #8f7cf7;
        }

        .hero-side-row {
            display: flex;
            justify-content: space-between;
            gap: 0.8rem;
            font-size: 0.92rem;
            color: var(--text-secondary);
        }

        .hero-side-row strong {
            color: var(--text-main);
        }

        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 1rem;
            margin-bottom: 1.2rem;
        }

        .section-title {
            font-family: 'Noto Serif SC', serif;
            font-size: 1.35rem;
            line-height: 1.2;
            letter-spacing: -0.03em;
            color: #1c362d;
        }

        .section-caption {
            color: var(--text-muted);
            font-size: 0.92rem;
            line-height: 1.7;
        }

        .dashboard-grid {
            display: grid;
            grid-template-columns: 1.25fr 0.95fr;
            gap: 1.5rem;
            align-items: stretch;
            margin-bottom: 1.75rem;
        }

        .dashboard-grid > .card {
            min-width: 0;
            height: 100%;
        }

        .insight-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
            margin-top: 1.4rem;
        }

        .metric-card {
            padding: 1.1rem 1.2rem;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.74);
            border: 1px solid rgba(84, 99, 125, 0.08);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
        }

        .metric-label {
            color: var(--text-muted);
            font-size: 0.8rem;
            margin-bottom: 0.55rem;
        }

        .metric-value {
            font-size: clamp(1.6rem, 2vw, 2.3rem);
            font-weight: 800;
            color: var(--primary-ink);
            letter-spacing: -0.03em;
        }

        .content-card {
            padding: 1.7rem;
        }

        .soft-block {
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(84, 99, 125, 0.08);
            border-radius: 22px;
            padding: 1rem;
        }

        .dashboard-actions {
            display: grid;
            gap: 1rem;
            align-content: stretch;
            flex: 1;
        }

        .actions-card {
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .actions-card .soft-block {
            display: flex;
            flex-direction: column;
        }

        .actions-card .soft-block:last-child {
            flex: 1;
            justify-content: space-between;
        }

        .site-footer {
            color: var(--text-muted);
        }

        .card,
        .stat-box,
        .record-box,
        .exam-card,
        .modal-content {
            background: rgba(255, 255, 255, 0.82);
            border-radius: 24px;
            border-color: rgba(84, 99, 125, 0.1);
            box-shadow: var(--shadow-sm);
        }

        .card:hover,
        .stat-box:hover,
        .record-box:hover,
        .exam-card:hover {
            box-shadow: var(--shadow-md);
        }

        .tab-btn,
        .nav-btn {
            border-radius: 999px;
        }

        .tab-btn {
            background: rgba(255, 251, 245, 0.72);
            border: 1px solid transparent;
            color: var(--text-secondary);
            font-weight: 700;
        }

        .tab-btn.active {
            background: var(--primary);
            color: #f8f4ec;
            box-shadow: 0 12px 22px rgba(31, 106, 82, 0.16);
        }

        .doc-btn {
            background: rgba(255, 248, 241, 0.84);
            color: var(--accent);
            border-color: rgba(188, 108, 37, 0.18);
        }

        .changelog-fab,
        .tutuer-fab {
            background: rgba(255, 250, 243, 0.95);
            box-shadow: var(--shadow-sm);
        }

        .tutuer-fab {
            color: var(--accent);
            border-color: rgba(188, 108, 37, 0.18);
        }

        .tutuer-fab:hover {
            background: var(--accent-soft);
            border-color: rgba(188, 108, 37, 0.35);
        }

        .tutuer-panel {
            background: rgba(255, 251, 245, 0.97);
            border-color: rgba(188, 108, 37, 0.12);
            border-radius: 24px;
            box-shadow: var(--shadow-lg);
        }

        .tutuer-panel-header {
            background: linear-gradient(180deg, rgba(243, 224, 207, 0.8), rgba(255, 247, 238, 0.95));
            border-bottom-color: rgba(188, 108, 37, 0.12);
        }

        .tutuer-chat-list {
            background:
                linear-gradient(180deg, rgba(255, 250, 243, 0.92), rgba(247, 239, 228, 0.92)),
                radial-gradient(circle at top left, rgba(31, 106, 82, 0.04), transparent 30%);
        }

        .tutuer-msg.assistant {
            background: rgba(255, 255, 255, 0.92);
            border-color: rgba(81, 63, 44, 0.1);
        }

        .tutuer-msg.user {
            background: rgba(221, 238, 231, 0.95);
            color: var(--primary-ink);
            border-color: rgba(31, 106, 82, 0.14);
        }

        .tutuer-quick-btn {
            border-color: rgba(188, 108, 37, 0.18);
            background: rgba(255, 246, 237, 0.9);
            color: #8e5520;
        }

        .tutuer-input {
            border-color: rgba(81, 63, 44, 0.14);
            border-radius: 16px;
        }

        .tutuer-input:focus {
            border-color: rgba(188, 108, 37, 0.6);
            box-shadow: 0 0 0 3px rgba(188, 108, 37, 0.12);
        }

        .subject-box.listening {
            background: #eef1f7;
            border-color: #b2c2d6;
        }

        .subject-box.reading {
            background: #eaf4ef;
            border-color: #a9d1bf;
        }

        .subject-box.writing {
            background: #fff1ea;
            border-color: #f0bca7;
        }

        .subject-box.speaking {
            background: #f1edfa;
            border-color: #cbbde8;
        }

        .subject-box.translation {
            background: #fbeaea;
            border-color: #e1b3b3;
        }

        @media (max-width: 980px) {
            .hero-grid,
            .dashboard-grid {
                grid-template-columns: 1fr;
            }

            .insight-strip {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        .icp-link {
            color: #6b7280;
            text-decoration: none;
            border-bottom: 1px dashed rgba(107, 114, 128, 0.35);
            transition: all 0.2s ease;
        }

        .icp-link:hover {
            color: #374151;
            border-bottom-color: rgba(55, 65, 81, 0.55);
        }

        @media (max-width: 768px) {
            .tutuer-fab {
                bottom: 4.9rem;
                left: 0.9rem;
            }

            .tutuer-panel {
                left: 0.5rem;
                bottom: 0.8rem;
                width: auto;
                height: 60vh;
            }
        }

        @media (max-width: 768px) {
            body::before,
            body::after {
                opacity: 0.38;
                filter: blur(18px);
            }

            .site-header-inner {
                padding: 0.75rem;
            }

            .topbar {
                flex-direction: column;
                align-items: stretch;
                gap: 0.85rem;
            }

            .brand-lockup {
                align-items: center;
            }

            .brand-mark {
                width: 50px;
                height: 50px;
                border-radius: 16px;
            }

            .brand-title {
                font-size: 1.58rem;
            }

            .brand-subtitle {
                font-size: 0.86rem;
                line-height: 1.6;
            }

            .nav-shell {
                width: 100%;
                border-radius: 18px;
                padding: 0;
                background: transparent;
                border: none;
                box-shadow: none;
            }

            .hero-card,
            .content-card {
                padding: 1.2rem;
            }

            .hero-title {
                font-size: 1.72rem;
                line-height: 1.15;
            }

            .hero-desc,
            .section-caption {
                font-size: 0.92rem;
                line-height: 1.75;
            }

            .hero-actions {
                flex-direction: column;
            }

            .hero-actions .btn-primary,
            .hero-actions .btn-secondary {
                width: 100%;
            }

            .insight-strip {
                grid-template-columns: 1fr;
                gap: 0.7rem;
            }

            .metric-card {
                padding: 0.95rem 1rem;
            }

            .metric-value {
                font-size: 1.8rem;
            }

            .section-head {
                flex-direction: column;
                align-items: stretch;
                margin-bottom: 1rem;
            }

            .hero-archive-grid {
                grid-template-columns: 1fr;
            }

            header > div {
                padding: 0.75rem !important;
            }

            header > div > div {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 0.85rem !important;
            }

            header nav {
                width: 100%;
                justify-content: stretch !important;
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.55rem !important;
            }

            .nav-btn {
                width: 100%;
                padding: 0.62rem 0.85rem;
                font-size: 0.85rem;
                border-radius: 999px;
            }

            main {
                padding: 1rem 0.75rem !important;
                padding-bottom: 8rem !important;
            }

            .card,
            .stat-box,
            .record-box,
            .exam-card,
            .modal-content {
                border-radius: 16px;
            }

            .card:hover,
            .record-box:hover {
                transform: none;
            }

            .btn-primary,
            .btn-secondary {
                width: 100%;
                padding: 0.85rem 1rem;
            }

            #dashboard-tabs {
                flex-wrap: nowrap !important;
                overflow-x: auto;
                padding-bottom: 0.6rem !important;
                -webkit-overflow-scrolling: touch;
            }

            #dashboard-tabs .tab-btn {
                flex: 0 0 auto;
            }

            #total-count,
            #exam-types-count {
                font-size: 2rem !important;
            }

            #latest-exam-date {
                font-size: 1.2rem !important;
                word-break: break-word;
            }

            .site-footer {
                padding: 1.4rem 1rem 7.2rem;
                font-size: 0.83rem;
            }

            .footer-shell {
                padding: 1rem;
                border-radius: 22px;
            }

            .footer-top {
                flex-direction: column;
                align-items: stretch;
            }

            .footer-brand {
                align-items: flex-start;
            }

            .footer-pills {
                justify-content: flex-start;
            }

            .footer-pill,
            .footer-link-pill {
                width: 100%;
                justify-content: flex-start;
            }

            .footer-meta {
                flex-direction: column;
                align-items: flex-start;
            }

            .footer-matrix {
                padding: 0.9rem;
                border-radius: 14px;
            }

            .footer-matrix-head {
                flex-direction: column;
                align-items: flex-start;
            }

            .footer-matrix-note {
                white-space: normal;
            }

            .footer-matrix-grid {
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }

            .matrix-card {
                min-height: 0;
            }

            .matrix-card-shell {
                grid-template-columns: auto 1fr;
                align-items: flex-start;
            }

            .matrix-card-main {
                width: 100%;
            }

            .matrix-card-foot {
                width: 100%;
                justify-content: space-between;
                grid-column: 1 / -1;
            }

            .brand-meta {
                font-size: 0.67rem;
            }

            .score-range::-webkit-slider-thumb {
                width: 28px; height: 28px;
            }
            .score-range::-moz-range-thumb {
                width: 28px; height: 28px;
            }

            #ai-actions,
            #reply-input-area > div,
            .info-modal-footer {
                flex-direction: column !important;
                align-items: stretch !important;
            }

            .changelog-fab {
                left: 0.8rem;
                bottom: 0.9rem;
            }

            .tutuer-fab {
                left: 0.8rem;
                bottom: 4.5rem;
            }

            .tutuer-panel {
                left: 0.5rem;
                right: 0.5rem;
                width: auto;
                bottom: max(0.5rem, env(safe-area-inset-bottom));
                height: min(68dvh, 560px);
                border-radius: 18px;
            }

            .tutuer-panel.expanded-mobile {
                top: 0.5rem;
                bottom: 0.5rem;
                height: auto;
            }

            .tutuer-panel.keyboard-open-mobile {
                transition: height 0.18s ease, bottom 0.18s ease;
            }

            .tutuer-panel-footer {
                padding: 0.65rem;
            }

            .tutuer-quick-actions {
                margin-bottom: 0.45rem;
                gap: 0.4rem;
            }

            .tutuer-quick-btn {
                font-size: 0.75rem;
                padding: 0.3rem 0.62rem;
            }

            .tutuer-input-row {
                align-items: stretch;
            }

            .tutuer-input {
                min-width: 0;
                min-height: 40px;
                max-height: 84px;
                resize: none;
            }

            .recent-score-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.65rem;
            }

            .recent-score-item {
                min-height: 126px;
                padding: 0.75rem 0.6rem;
            }

            .recent-score-item-label {
                font-size: 0.7rem;
            }

            .recent-score-item-value {
                font-size: 2.05rem;
                line-height: 1.15;
            }

            .record-row {
                flex-direction: column;
                gap: 0.7rem;
            }

            .record-badges {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 0.45rem;
            }

            .score-badge {
                width: 100%;
                justify-content: center;
                padding: 0.48rem 0.4rem;
                font-size: 0.9rem;
            }

            .record-side {
                width: 100%;
                justify-content: space-between;
                border-top: 1px solid #f1f5f9;
                padding-top: 0.6rem;
            }

            .record-total {
                text-align: left;
            }

            .record-delete {
                width: 36px;
                height: 36px;
                font-size: 1.4rem;
            }

            .tutuer-input-row .btn-primary {
                width: auto;
                flex: 0 0 auto;
                padding: 0.65rem 0.95rem !important;
            }

            .tutuer-expand-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            .tutuer-fab {
                bottom: 4.9rem;
                left: 0.7rem;
                padding: 0.52rem 0.58rem;
            }

            .changelog-fab {
                bottom: 0.7rem;
                left: 0.7rem;
                padding: 0.52rem 0.58rem;
            }

            .tutuer-fab-label,
            .changelog-fab-label {
                display: none;
            }

            #desktop-pet:not(.pet-positioned) {
                right: 0.7rem !important;
                bottom: 2.85rem !important;
                transform: scale(0.68);
                transform-origin: bottom right;
                z-index: 940 !important;
            }

            #desktop-pet.pet-positioned {
                z-index: 940 !important;
            }

            #pet-avatar {
                font-size: 3.6rem !important;
            }

            #pet-bubble {
                width: 150px !important;
                font-size: 0.74rem !important;
                padding: 0.6rem !important;
            }

            body.tutuer-open-mobile #desktop-pet {
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
            }

            body.tutuer-open-mobile .pet-show-fab {
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
            }

            #pet-scale-handle {
                display: none !important;
            }

            #pet-close-btn {
                width: 18px !important;
                height: 18px !important;
                font-size: 10px !important;
            }

            .pet-show-fab {
                right: 0.7rem;
                bottom: 2.85rem;
                width: 36px;
                height: 36px;
            }

            .profile-card {
                display: none !important;
            }

            .profile-panel {
                position: fixed;
                top: auto;
                right: 0.75rem;
                left: 0.75rem;
                width: auto;
                max-width: 340px;
            }
        }

/* ==================== Splash Screen ==================== */
#splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fbfbfd;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#splash-screen.fade-out {
    opacity: 0;
    filter: blur(10px);
    transform: scale(1.05);
    pointer-events: none;
}

/* ---- Fluid Orbs Background (Siri Style) ---- */
.splash-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.orb {
    position: absolute;
    border-radius: 50%;
    opacity: 0.4;
}
.orb-1 {
    width: 50vw; height: 50vw;
    background: radial-gradient(circle, rgba(66,133,244,0.35), rgba(155,114,203,0.12));
    filter: blur(100px);
    top: -10%; left: -10%;
    animation: orbFloat1 10s ease-in-out infinite;
}
.orb-2 {
    width: 60vw; height: 60vw;
    background: radial-gradient(circle, rgba(217,101,112,0.3), rgba(249,171,0,0.1));
    filter: blur(100px);
    bottom: -15%; right: -10%;
    animation: orbFloat2 12s ease-in-out infinite;
}
.orb-3 {
    width: 40vw; height: 40vw;
    background: radial-gradient(circle, rgba(155,114,203,0.3), rgba(66,133,244,0.08));
    filter: blur(100px);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: orbFloat3 8s ease-in-out infinite;
}
@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
    50% { transform: translate(60px, 50px) scale(1.12); opacity: 0.7; }
}
@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; }
    50% { transform: translate(-70px, -60px) scale(1.2); opacity: 0.65; }
}
@keyframes orbFloat3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.55; }
    50% { transform: translate(-40%, -40%) scale(1.15); opacity: 0.7; }
}

/* ---- Top Bar ---- */
.splash-topbar {
    position: absolute;
    top: 2rem; left: 2.5rem; right: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 20;
    opacity: 0;
    transform: translateY(-15px);
    animation: splashFadeIn 1s ease 0.4s forwards;
}
.splash-topbar-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.splash-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Noto Serif SC', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #4285f4;
    background: rgba(66, 133, 244, 0.08);
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid rgba(66, 133, 244, 0.15);
    backdrop-filter: blur(8px);
}
.splash-version {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: #8b93a8;
    margin-left: 8px;
}
.splash-skip {
    font-family: 'Noto Serif SC', 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #5b6278;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    padding: 8px 24px;
    border-radius: 99px;
    cursor: pointer;
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: all 0.25s ease;
}
.splash-skip .skip-en {
    font-family: 'Manrope', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: #9ca3af;
    margin-left: 4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.splash-skip:hover {
    background: rgba(255, 255, 255, 0.6);
    color: #3b3f54;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.splash-skip:active {
    transform: scale(0.96);
}

/* ---- Center Content ---- */
.splash-center {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -5vh;
}
.splash-text-wrap {
    position: relative;
    width: 90vw;
    max-width: 1000px;
    overflow: visible;
}
.splash-text-svg {
    width: 100%;
    overflow: visible;
}

/* Stroke animation: draw the text outline */
.splash-stroke {
    font-family: var(--splash-font), cursive;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: splashDrawStroke 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
}
@keyframes splashDrawStroke {
    0% { stroke-dashoffset: 900; opacity: 1; }
    75% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0.25; }
}

/* Fill animation: Gemini gradient fade in with glow */
.splash-fill {
    font-family: var(--splash-font), cursive;
    opacity: 0;
    filter: blur(12px);
    animation: splashFillIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}
@keyframes splashFillIn {
    0% { opacity: 0; filter: blur(12px); }
    60% { opacity: 0.9; filter: blur(2px); }
    100% { opacity: 1; filter: blur(0px); }
}

/* Glow shimmer after fill completes */
.splash-text-wrap::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(ellipse at center, rgba(66,133,244,0.08), transparent 70%);
    opacity: 0;
    animation: splashGlow 2s ease-in-out 2s forwards;
    pointer-events: none;
}
@keyframes splashGlow {
    0% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1); }
}

/* Slogan */
.splash-slogan {
    font-family: 'Noto Serif SC', serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 2;
    color: #6b7280;
    text-align: center;
    max-width: 420px;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(15px);
    animation: splashFadeIn 1s ease 2.2s forwards;
}

/* ---- Bottom Signature ---- */
.splash-bottom {
    position: absolute;
    bottom: 2.5rem;
    left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    z-index: 20;
    opacity: 0;
    filter: blur(10px);
    animation: splashFadeInBlur 1.4s ease 2.6s forwards;
}
.splash-signature {
    font-family: 'Noto Serif SC', serif;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.06em;
    padding: 0 16px;
}

/* ---- Shared Keyframes ---- */
@keyframes splashFadeIn {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes splashFadeInBlur {
    to { opacity: 1; filter: blur(0px); }
}

/* ---- Desktop Pet: Show FAB ---- */
.pet-show-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 2rem;
    z-index: 998;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding: 0;
    transition: background 0.15s, transform 0.15s;
}

.pet-show-fab:hover {
    background: var(--primary-light);
    transform: scale(1.1);
}

#pet-close-btn:hover {
    background: rgba(239, 68, 68, 0.7) !important;
}

#pet-scale-handle:hover svg path {
    stroke: var(--primary);
}

#desktop-pet.dragging {
    transition: none !important;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    .splash-topbar { top: 1.5rem; left: 1.5rem; right: 1.5rem; }
    .splash-badge { font-size: 10px; padding: 5px 10px; }
    .splash-version { font-size: 11px; }
    .splash-skip { font-size: 11px; padding: 6px 18px; }
    .splash-skip .skip-en { font-size: 9px; }
    .splash-center { margin-top: -3vh; }
    .splash-slogan { font-size: 11px; max-width: 320px; }
    .splash-bottom { bottom: 1.5rem; }
    .splash-signature { font-size: 10px; }
}

/* ==================== Login / Register Modal ==================== */
.login-modal-content {
    max-width: 420px;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #eceff3;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    padding: 1.75rem;
}
.login-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}
.login-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-strong);
    background: none !important;
}
.login-modal-close {
    background: #f8fafc;
    border: 1px solid #edf0f4;
    font-size: 1.4rem;
    color: #6b7280;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.login-modal-close:hover {
    background: #f1f5f9;
    border-color: #e5e7eb;
    color: #374151;
    transform: translateY(-1px);
}
.login-steps-wrapper {
    position: relative;
    overflow: hidden;
}
.login-step {
    display: none;
    animation: loginStepIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-step.active {
    display: block;
}
@keyframes loginStepIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
.login-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f2937;
}
.login-input {
    width: 100%;
    box-sizing: border-box;
}
.login-modal-content .input {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    color: var(--ink-strong);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.login-modal-content .input:focus {
    border-color: #9ca3af;
    box-shadow: 0 0 0 4px var(--ink-strong-24);
    transform: translateY(-1px);
}
.login-code-input {
    letter-spacing: 0.5em;
    text-align: center;
    font-size: 1.2rem;
}
.login-code-sent {
    color: #6b7280;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.login-step-desc {
    font-size: 0.95rem;
    color: #374151;
    margin-bottom: 1rem;
    font-weight: 500;
}
.login-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: #6b7280;
    cursor: pointer;
    line-height: 1.5;
}
.login-checkbox-row input[type="checkbox"] {
    margin-top: 2px;
    accent-color: #1f6a52;
    flex-shrink: 0;
}
.agreement-link {
    color: #1f6a52;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.agreement-link:hover {
    color: #174f3d;
}
.login-divider {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    color: #d1d5db;
    font-size: 0.85rem;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.login-divider span {
    padding: 0 0.75rem;
    color: #9ca3af;
}
.login-hint {
    color: #6b7280;
    font-size: 0.8rem;
    margin-top: 1rem;
    text-align: center;
    line-height: 1.5;
}
.login-error {
    display: none;
    color: #dc2626;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    text-align: center;
}
.login-modal-content .btn-primary,
.login-modal-content .btn-secondary {
    border-radius: 12px;
    transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.login-modal-content .btn-primary {
    background: var(--ink-strong);
    color: #ffffff;
    border: 1px solid var(--ink-strong);
    box-shadow: 0 10px 24px var(--ink-strong-16);
}
.login-modal-content .btn-primary:hover {
    background: var(--ink-stronger);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.2);
    transform: translateY(-1px);
}
.login-modal-content .btn-secondary {
    background: #f8fafc;
    color: #1f2937;
    border: 1px solid #e5e7eb;
}
.login-modal-content .btn-secondary:hover {
    background: #f1f5f9;
    border-color: #d1d5db;
    transform: translateY(-1px);
}
.login-modal-content .btn-primary:active,
.login-modal-content .btn-secondary:active {
    transform: scale(0.98);
}

.turnstile-container {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
    min-height: 0;
}

.turnstile-container:empty {
    display: none;
}

/* ==================== Avatar Grid ==================== */
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.avatar-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
}
.avatar-option:hover {
    border-color: #1f6a52;
    transform: scale(1.04);
}
.avatar-option.selected {
    border-color: #1f6a52;
    background: rgba(31, 106, 82, 0.06);
    box-shadow: 0 0 0 3px rgba(31, 106, 82, 0.12);
    transform: scale(1.06);
}
.avatar-option img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.avatar-option span {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 500;
}
.avatar-option.selected span {
    color: #1f6a52;
    font-weight: 700;
}

/* ==================== Nav User Area ==================== */
.nav-user-area {
    position: relative;
}
.nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(31, 106, 82, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    vertical-align: middle;
}
.nav-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(31, 106, 82, 0.2);
}

/* ==================== Profile Card ==================== */
.profile-card {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    padding: 1.25rem;
    z-index: 1000;
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.22s;
}
.profile-card.hidden {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    visibility: hidden;
    pointer-events: none;
}
.profile-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.profile-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}
.profile-card-info {
    min-width: 0;
}
.profile-card-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.profile-card-uid {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 0.15rem;
}
.profile-card-bio {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
    padding: 0.6rem 0.75rem;
    background: #f9fafb;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
}
.profile-card-actions {
    display: flex;
    gap: 0.5rem;
}
.profile-card-btn {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.profile-card-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.profile-card-btn-logout {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}
.profile-card-btn-logout:hover {
    background: #fef2f2;
    border-color: rgba(239, 68, 68, 0.3);
}

/* ==================== Profile Panel (click expand) ==================== */
.profile-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    padding: 1.35rem;
    z-index: 1001;
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.25s;
}
.profile-panel.hidden {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    visibility: hidden;
    pointer-events: none;
}
.profile-panel-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.profile-panel-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(31, 106, 82, 0.12);
}
.profile-panel-info {
    min-width: 0;
}
.profile-panel-name {
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.profile-panel-uid {
    font-size: 0.82rem;
    color: #9ca3af;
    margin-top: 0.15rem;
}
.profile-panel-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
    margin: 0.85rem 0;
}
.profile-panel-bio {
    font-size: 0.88rem;
    color: #6b7280;
    line-height: 1.55;
    padding: 0;
}
.profile-panel-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
    color: #6b7280;
    line-height: 1.5;
}
.profile-panel-detail + .profile-panel-detail {
    margin-top: 0.35rem;
}
.profile-panel-actions {
    display: flex;
    gap: 0.5rem;
}
.profile-panel-btn {
    flex: 1;
    padding: 0.55rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.55rem;
    background: #fff;
    color: #374151;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.profile-panel-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.profile-panel-btn-logout {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}
.profile-panel-btn-logout:hover {
    background: #fef2f2;
    border-color: rgba(239, 68, 68, 0.3);
}

/* ==================== Admin Badge ==================== */
.admin-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 99px;
    background: linear-gradient(135deg, #f6d365, #fda085);
    color: #7c3a0a;
    letter-spacing: 0.03em;
    vertical-align: middle;
    line-height: 1.6;
    box-shadow: 0 1px 4px rgba(253, 160, 133, 0.3);
}

/* ==================== Beta Tester Badge ==================== */
.beta-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 99px;
    background: linear-gradient(135deg, #34d399, #3b82f6);
    color: #fff;
    letter-spacing: 0.03em;
    vertical-align: middle;
    line-height: 1.6;
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
}

/* ==================== Invite Code Step ==================== */
.invite-header {
    text-align: center;
    margin-bottom: 1rem;
}

.invite-icon {
    font-size: 2rem;
    line-height: 1;
    background: linear-gradient(135deg, #34d399, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.invite-title {
    font-size: 1.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #34d399, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0.25rem 0;
}

.invite-desc {
    font-size: 0.8rem;
    color: #9ca3af;
    line-height: 1.5;
    margin: 0;
}

.invite-skip {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
    margin-top: 0.5rem;
}