* { margin: 0; padding: 0; box-sizing: border-box; }
        [v-cloak] { display: none; }

        :root {
            --navy: #20283b;
            --navy-2: #2c3650;
            --navy-3: #141a29;
            --accent: #ff7b16;
            --accent-dark: #ff7b16;
            --brand: #ff7b16;
            --brand-dark: #213aa8;
            --cyan: #16a8b7;
            --lime: #8fbd35;
            --bg: #f5f4f9;
            --bg-2: #f0eef6;
            --card: #ffffff;
            --border: #e6e4ee;
            --border-strong: #d8d5e2;
            --text: #26272b;
            --text-2: #5f5f6a;
            --text-3: #70717c;
            --text-1: var(--text);
            --bg-2: #f0f1f6;
            --brand-light: #fff5e6;
            --amber: #b4550d;
            --radius: 8px;
            --shadow: 0 1px 2px rgba(20, 20, 40, 0.05), 0 4px 16px rgba(20, 20, 40, 0.05);
        }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Noto Sans CJK SC', 'Noto Sans CJK JP', system-ui, sans-serif;
            color: var(--text);
            background-color: var(--bg);
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            min-height: 100vh;
            overflow-x: clip;
        }
        body.subpage-bg { background-image: url('/uma_tools/img/bg_texture_white.webp'); }

        ::selection { background: rgba(255, 123, 22, 0.2); color: var(--navy-3); }
        :focus-visible { outline: 2px solid rgba(255, 123, 22, 0.72); outline-offset: 2px; }

        /* ===== HOME (KEY VISUAL) LAYOUT ===== */
        .home-layout {
            position: relative;
            display: flex; min-height: 100vh; height: 100vh;
            background: #fff; overflow: hidden;
        }
        .home-nav {
            flex: 0 0 220px; width: 220px; max-width: 32vw;
            display: flex; flex-direction: column; color: #fff;
            padding: 150px 0 20px;
            background-image: url('/uma_tools/img/bg_kv_nav.png');
            background-size: 100% auto;
            background-repeat: repeat-y;
            background-position: left top;
            box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
        }
        .home-brand {
            position: absolute; top: 44px; left: 55px; z-index: 4;
            display: flex; flex-direction: column; gap: 6px;
            color: #fff; pointer-events: none;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
        }
        .home-brand .hl-zh { font-size: 2.3rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1.15; }
        .home-brand .hl-en { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.34em; color: rgba(255, 255, 255, 0.92); }
        .home-stats {
            position: absolute; top: 44px; right: 36px; z-index: 4;
            display: flex; align-items: stretch; color: #fff;
            padding: 12px 20px;
            background: rgba(20, 26, 41, 0.42);
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 14px;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
            pointer-events: none;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
        }
        .home-stat {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 0 24px; min-width: 96px;
        }
        .home-stat + .home-stat { border-left: 1px solid rgba(255, 255, 255, 0.3); }
        .home-stat-number { font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: 0.02em; }
        .home-stat-label { margin-top: 5px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; opacity: 0.85; }
        .home-tabs { display: flex; flex-direction: column; }
        .home-tab {
            position: relative; display: flex; align-items: center; gap: 10px;
            padding: 15px 22px; border: none; border-left: 3px solid transparent;
            background: rgba(0, 0, 0, 0); cursor: pointer; text-align: left;
            color: #fff; font-family: inherit; font-size: 1em; font-weight: 700;
            letter-spacing: 0.06em;
            transition: color 0.2s, background 0.2s, border-color 0.2s;
        }
        .home-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
        .home-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.14); border-left-color: var(--accent); }
        .home-tab::after {
            content: '>>'; position: absolute; right: 18px; top: 50%;
            transform: translateY(-50%); font-weight: 800; font-size: 1em; letter-spacing: 0;
            opacity: 0; transition: opacity 0.2s, transform 0.2s;
        }
        .home-tab:hover::after { opacity: 1; transform: translate(6px, -50%); }
        .home-hero {
            flex: 1 1 auto; min-width: 0; position: relative;
            background:
                linear-gradient(180deg, rgba(24, 30, 48, 0.25) 0%, rgba(20, 26, 41, 0.42) 100%),
                url('/uma_tools/img/hero_bg.webp') center center / cover no-repeat;
        }
        .home-upcoming {
            position: absolute; right: 28px; bottom: 24px; z-index: 5;
            max-width: 360px; width: auto;
            display: flex; flex-direction: column; gap: 6px;
            padding: 14px 18px;
            color: #fff; cursor: pointer; text-decoration: none;
            background: rgba(20, 26, 41, 0.45);
            border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 14px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 14px 38px rgba(0, 0, 0, 0.35);
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
            transition: transform 0.2s, border-color 0.2s;
        }
        .home-upcoming:hover { transform: translateY(-3px); border-color: rgba(255, 199, 87, 0.7); }
        .home-upcoming .hu-badge {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 3px 10px; border-radius: 999px;
            background: linear-gradient(90deg, #ff7b16, #ffa932);
            color: #fff; font-size: 0.72em; font-weight: 800; letter-spacing: 0.1em;
            text-shadow: none; align-self: flex-start;
        }
        .home-upcoming .hu-title {
            font-size: 1em; font-weight: 700; line-height: 1.4;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .home-upcoming .hu-meta { font-size: 0.8em; opacity: 0.88; letter-spacing: 0.02em; }
        .home-upcoming .hu-link {
            margin-top: 3px; font-size: 0.82em; font-weight: 700;
            color: #ffc657; letter-spacing: 0.04em;
        }

        /* ===== SUBPAGE HEADER (top navy bar, like umamusume.jp sub pages) ===== */
        .sub-header {
            position: sticky; top: 0; z-index: 1001;
            display: flex; align-items: stretch; color: #fff;
            overflow-x: clip;
            background-color: #3157ed;
            background-image: url('/uma_tools/img/bg_blue.webp');
            background-size: 100vw auto;
            background-repeat: repeat-y;
            background-position: left top;
            box-shadow: 0 8px 24px rgba(20, 26, 41, 0.35);
        }
        .sub-brand {
            display: inline-flex; flex: 0 0 27%; min-width: 0;
            align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
            padding: 0 16px; border: none; border-right: 1px solid rgba(255, 255, 255, 0.4);
            background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer;
            font-family: inherit; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.04em;
            transform: skewX(-30deg);
            transition: background 0.2s;
        }
        .sub-brand > span { display: inline-block; transform: skewX(30deg); }
        .sub-brand:hover { background: rgba(255, 255, 255, 0.14); }
        .sub-tabs {
            flex: 1 1 auto; display: flex; align-items: stretch; padding: 0; height: 61px;
        }
        .sub-tab {
            position: relative; flex: 1 1 0; min-width: 0;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            border: none; border-right: 1px solid rgba(255, 255, 255, 0.4);
            background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer;
            font-family: inherit; font-size: 1.05em; font-weight: 700; letter-spacing: 0.05em;
            transform: skewX(-30deg);
            transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
        }
        .sub-tab > span { display: inline-block; transform: skewX(30deg); }
        .sub-tab:first-child { border-left: none; }
        .sub-tab:last-child { border-right: none; }
        .sub-tab svg { width: 18px; height: 18px; flex-shrink: 0; }
        .sub-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
        .sub-tab.active {
            color: #fff;
            background: linear-gradient(125deg, #ff7b16, #ffa932);
            height: calc(100% + 8px);
            transform: translateY(-8px) skewX(-30deg);
            box-shadow: 0 18px 42px rgba(20, 26, 41, 0.38);
        }

        /* ===== CONTAINER ===== */
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .tab-content { display: none; }
        .tab-content.active { display: block; animation: fadeSlideIn 0.3s ease; }
        @keyframes fadeSlideIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .albums-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px; min-height: 70vh; align-content: start; padding-bottom: 84px;
        }

        .album-card {
            position: relative; display: block; width: 100%; padding: 0;
            border-radius: var(--radius); overflow: hidden; cursor: pointer;
            background: var(--card);
            border: 1px solid var(--border);
            color: inherit; font: inherit; text-align: left;
            box-shadow: 4px 6px 16px -4px rgba(20, 20, 40, 0.32);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
        .album-card:hover {
            transform: translateY(-3px);
            border-color: var(--brand);
            box-shadow: 8px 12px 24px -6px rgba(20, 20, 40, 0.42);
        }
        .album-cover { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f0eef6; }

        .album-info {
            position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
            padding: 26px 16px 16px; color: #fff;
            background: linear-gradient(180deg, rgba(20, 26, 41, 0) 0%, rgba(20, 26, 41, 0.5) 52%, rgba(20, 26, 41, 0.82) 100%);
        }
        .album-name {
            font-size: 1.04em; font-weight: 700; color: #fff;
            margin-bottom: 4px; line-height: 1.35; letter-spacing: 0.02em;
        }
        .album-count {
            font-size: 0.8em; color: rgba(255, 255, 255, 0.85);
            font-variant-numeric: tabular-nums;
        }

        /* ===== LIVE TAB ===== */
        .events-container { padding-bottom: 84px; }

        .event-group {
            border-radius: var(--radius); overflow: hidden; margin-bottom: 20px;
            background: var(--card);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            transition: box-shadow 0.2s, border-color 0.2s;
        }
        .event-group:hover {
            border-color: var(--border-strong);
            box-shadow: 0 6px 22px rgba(20, 20, 40, 0.1);
        }

        .event-group-header {
            background: #f2f0f8;
            border-bottom: 1px solid var(--border);
            padding: 16px 22px; color: var(--text); cursor: pointer;
            display: flex; justify-content: space-between; align-items: center;
            font-size: 1em; font-weight: 700; user-select: none; letter-spacing: 0.03em;
        }
        .event-group-header:hover { background: #ece9f4; }
        .event-group-title { flex: 1; }
        .event-group-header .collapse-icon { font-size: 0.72em; color: var(--text-3); transition: transform 0.25s; }
        .event-group.expanded .event-group-header .collapse-icon { transform: rotate(90deg); }

        .event-group-body { transition: opacity 0.2s ease; }
        .event-group.expanded .event-group-body { max-height: none !important; }

        .event-sub { border-bottom: 1px solid var(--border); }
        .event-sub:last-child { border-bottom: none; }

        .event-header {
            padding: 13px 22px; cursor: pointer; display: flex;
            justify-content: space-between; align-items: center;
            background: transparent; transition: background 0.2s; user-select: none;
        }
        .event-header:hover { background: #faf9fd; }
        .event-title { font-size: 0.95em; font-weight: 600; color: var(--text); flex: 1; }
        .event-date { font-size: 0.82em; color: var(--text-3); margin: 0 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
        .event-header .collapse-icon { font-size: 0.62em; color: var(--text-3); transition: transform 0.25s; }
        .event-sub.expanded .event-header .collapse-icon { transform: rotate(90deg); }

        .event-sub-body { transition: opacity 0.2s ease; }
        .event-sub.expanded .event-sub-body { max-height: none !important; }

        .event-body { padding: 15px 22px 20px; }
        .event-cast { font-size: 0.83em; color: var(--text-2); margin-bottom: 10px; line-height: 1.75; }
        .cast-line { margin-bottom: 2px; }
        .cast-label { font-weight: 700; color: var(--text); }

        .vid-link {
            display: inline-flex; align-items: center; gap: 6px;
            margin: 0;
            padding: 5px 13px;
            background: var(--card);
            border: 1px solid var(--border-strong); border-radius: 4px;
            text-decoration: none; color: var(--text-2); font-size: 0.82em; font-weight: 600;
            transition: all 0.2s;
        }
        .vid-link::before {
            content: ''; width: 0; height: 0;
            border-left: 6px solid currentColor;
            border-top: 4px solid transparent; border-bottom: 4px solid transparent;
        }
        .vid-link:hover {
            background: var(--brand);
            border-color: var(--brand); color: #fff;
        }

        .event-setlists { display: flex; gap: 18px; flex-wrap: wrap; }
        .setlist-day { flex: 1; min-width: 270px; }
        .setlist-day-title {
            font-size: 0.92em; color: var(--text); margin-bottom: 8px; padding: 7px 12px;
            background: #f6f5fa;
            border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
            display: flex; justify-content: space-between; align-items: center;
            user-select: none; font-weight: 600;
            transition: background 0.2s;
        }
        .setlist-day-title:hover { background: #efedf6; }
        .setlist-day-title .collapse-icon { font-size: 0.62em; color: var(--text-3); transition: transform 0.25s; }
        .setlist-day.expanded .setlist-day-title .collapse-icon { transform: rotate(90deg); }
        .setlist-body { transition: opacity 0.2s ease; }
        .setlist-day.expanded .setlist-body { max-height: none !important; }
        .setlist-empty { color: var(--text-3); font-size: 0.85em; padding: 8px; font-style: italic; }

        .setlist-table { width: 100%; border-collapse: collapse; font-size: 0.82em; }
        .setlist-table thead th {
            background: rgba(203, 223, 243, 0.85);
            padding: 8px 9px; text-align: left; font-weight: 700; color: var(--text);
            border-bottom: 1px solid var(--border);
            position: sticky; top: 0; z-index: 1;
        }
        .setlist-table tbody td { padding: 6px 9px; border-bottom: 1px solid var(--border); vertical-align: middle; }
        .setlist-no { width: 26px; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
        .setlist-song { font-weight: 600; color: var(--text); min-width: 110px; }
        .setlist-perf { color: var(--text-2); font-size: 0.95em; line-height: 1.75; }
        .setlist-src { color: var(--text-3); font-size: 0.9em; min-width: 80px; }
        .setlist-table tbody tr:hover { background: rgba(192, 216, 242, 0.55); }

        .char-avatar {
            width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
            vertical-align: middle; margin-right: 2px; border: 1px solid var(--border-strong);
            display: inline-block;
        }
        .perf-name { vertical-align: middle; font-size: 0.92em; }
        .perf-item { display: inline-block; white-space: nowrap; vertical-align: middle; margin-right: 4px; }
        .perf-sep { font-size: 0; line-height: 0; width: 0; overflow: hidden; color: transparent; }

        .event-tips { margin-top: 8px; font-size: 0.76em; color: var(--text-3); }

        @media (max-width: 900px) {
            .setlist-table { min-width: 0; }
            .setlist-table thead { display: none; }
            .setlist-table, .setlist-table tbody, .setlist-table tr, .setlist-table td { display: block; }
            .setlist-table tr {
                padding: 10px 4px;
                border-bottom: 1px solid var(--border);
            }
            .setlist-table tr:hover { background: transparent; }
            .setlist-table tbody td { padding: 0; border-bottom: none; vertical-align: baseline; }
            .setlist-table td.setlist-no {
                display: inline-block; width: 30px; margin-right: 8px;
                text-align: left; font-weight: 700; color: var(--text-2);
            }
            .setlist-table td.setlist-song { display: inline-block; min-width: 0; }
            .setlist-perf {
                margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border);
                font-size: 0.95em; line-height: 1.8;
            }
            .setlist-perf::before {
                content: '出演者：'; font-weight: 700; color: var(--text); margin-right: 8px;
            }
            .setlist-table td.setlist-perf.encore-hide { display: none; }
            .setlist-src {
                margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
                min-width: 0; font-size: 0.9em; line-height: 1.7;
            }
            .setlist-src:empty { display: none; }
            .setlist-src::before {
                content: '歌曲信息：'; font-weight: 700; color: var(--text); margin-right: 8px;
            }
        }
        .news-list { display: flex; flex-direction: column; gap: 14px; }

        .hidden { display: none !important; }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 900px) {
            .sub-brand { padding: 0 16px; font-size: 1.15em; }
        }
        @media (max-width: 768px) {
            .home-layout { flex-direction: column; height: auto; min-height: 100vh; position: relative; background: #0d1220; }
            .home-hero {
                position: absolute; inset: 0; z-index: 0; min-height: 0;
                background-image:
                    linear-gradient(180deg, rgba(24, 30, 48, 0.25) 0%, rgba(20, 26, 41, 0.42) 100%),
                    url('/uma_tools/img/hero_bg_tablet.webp');
            }
            .home-brand { position: relative; z-index: 1; top: 0; left: 0; width: 100%; padding: 26px 10px 8px; margin: 0; align-items: center; }
            .home-brand .hl-zh { font-size: 1.7rem; letter-spacing: 0.08em; white-space: nowrap; max-width: 100%; }
            .home-brand .hl-en { font-size: 0.82rem; letter-spacing: 0.18em; white-space: nowrap; max-width: 100%; }
            .home-stats { position: relative; z-index: 1; top: 0; left: 0; right: 0; width: 100%; justify-content: center; flex-wrap: wrap; padding: 8px; margin: 0; border-radius: 0; border-left: none; border-right: none; background: rgba(10, 14, 24, 0.5); }
            .home-stat { flex: 1 1 0; min-width: 0; padding: 6px 8px; text-align: center; }
            .home-stat + .home-stat { border-left: 1px solid rgba(255, 255, 255, 0.22); }
            .home-stat-number { font-size: 1.1rem; }
            .home-stat-label { font-size: 0.75rem; letter-spacing: 0.04em; }
            .home-nav { position: relative; z-index: 1; top: 0; flex: 1 1 auto; width: 100%; max-width: none; padding: 18px 12px 30px; background: transparent; }
            .home-upcoming { position: relative; left: auto; right: auto; bottom: auto; z-index: 1; max-width: none; margin: 10px 14px 22px; }
            .home-tabs { flex-direction: column; gap: 10px; }
            .home-tab { flex: none; justify-content: flex-start; padding: 14px 18px; border-left: none; border-bottom: none; border-radius: 12px; background: rgba(35, 65, 143, 0.45); border: 1px solid rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
            .home-tab:hover { border-left: none; border-bottom: none; background: rgba(58, 109, 240, 0.42); }
            .home-tab::after { display: none; }
            .sub-tabs { flex: 0 0 auto; flex-wrap: wrap; padding: 0; width: 100%; height: auto; overflow: visible; }
            .sub-tab { flex: 1 1 110px; min-width: 0; height: 52px; padding: 0 12px; font-size: 0.9em; transform: skewX(-30deg); white-space: normal; }
            .sub-tab > span { transform: skewX(30deg); }
            .sub-tab svg { width: 15px; height: 15px; }
            .sub-tab.active { height: 52px; transform: skewX(-30deg); box-shadow: none; }
            .sub-tab.active > span { transform: skewX(30deg); }
            .sub-header { flex-direction: column; flex-wrap: nowrap; overflow: visible; }
            .sub-brand { flex: 0 0 44px; width: 100%; min-width: 0; justify-content: flex-start; padding: 0 16px; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); transform: none; font-size: 1.05em; }
            .sub-brand > span { transform: none; white-space: nowrap; }
            .albums-grid { grid-template-columns: 1fr; }
            .event-setlists { flex-direction: column; }
            .event-date { display: none; }
            .live-setlist { overflow-x: hidden; }
            .progress-bar { flex: 0 0 80px; }
        }
        @media (max-width: 480px) {
            .home-hero {
                background-image:
                    linear-gradient(180deg, rgba(24, 30, 48, 0.25) 0%, rgba(20, 26, 41, 0.42) 100%),
                    url('/uma_tools/img/hero_bg_phone.webp');
            }
            .setlist-table { font-size: 0.78em; }
        }

        /* ===== REDUCED MOTION ===== */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ===== SCROLLBAR ===== */
        ::-webkit-scrollbar { width: 9px; height: 9px; }
        ::-webkit-scrollbar-track { background: #f0eef6; }
        ::-webkit-scrollbar-thumb {
            background: #c6c3d2; border-radius: 5px;
            border: 2px solid transparent; background-clip: padding-box;
        }
        ::-webkit-scrollbar-thumb:hover { background: #a9a5ba; background-clip: padding-box; }

        /* ===== DATABASE ALBUMS LIST (releases) ===== */
        .rel-toolbar {
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
            margin: 4px 0 16px; flex-wrap: wrap;
        }
        .rel-toolbar .rel-clear {
            flex-shrink: 0; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 20px;
            background: var(--card); color: var(--accent-dark); font-family: inherit; font-size: 0.82em; font-weight: 600;
            cursor: pointer; transition: all 0.18s; white-space: nowrap;
        }
        .rel-toolbar .rel-clear:hover { border-color: var(--accent); background: rgba(255, 123, 22, 0.08); }
        .rel-filters { display: flex; gap: 8px; flex-wrap: wrap; }
        .rel-chip {
            padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 20px;
            background: var(--card); color: var(--text-2); font-family: inherit; font-size: 0.82em; font-weight: 600;
            cursor: pointer; transition: all 0.18s;
        }
        .rel-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
        .rel-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
        .rel-divider { width: 1px; align-self: stretch; background: var(--border); margin: 2px 6px; }
        .rel-table {
            width: 100%; border-collapse: collapse; background: var(--card);
            border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
            box-shadow: var(--shadow); margin-bottom: 30px;
        }
        .rel-table thead th {
            padding: 11px 14px; text-align: left;
            background: #2c3650; color: #fff;
            font-size: 0.78em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
            border-bottom: 1px solid var(--border);
        }
        .rel-table tbody td {
            padding: 10px 14px; vertical-align: middle; border-top: 1px solid var(--border);
            font-size: 0.88em;
        }
        .rel-table tbody tr { transition: background 0.15s; }
        .rel-table tbody tr:hover { background: #faf9fc; }
        .rel-table tbody tr:hover .rel-title { color: var(--accent-dark); }
        .rel-date { white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
        .rel-cat { white-space: nowrap; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
        .rel-title-cell { display: flex; align-items: center; gap: 12px; min-width: 260px; }
        .rel-cover {
            width: 52px; height: 52px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
            border: 1px solid var(--border); background: #eee;
        }
        .rel-title { font-weight: 700; color: var(--text); line-height: 1.4; transition: color 0.15s; cursor: pointer; }
        .rel-type {
            display: inline-block; padding: 3px 10px; border-radius: 20px;
            font-size: 0.78em; font-weight: 600; white-space: nowrap;
            background: rgba(140, 131, 255, 0.12); color: #5a4fd0;
        }
        .rel-status { white-space: nowrap; font-size: 0.82em; }
        .rel-status .st-sold { color: #1e8e5a; font-weight: 700; }
        .rel-status .st-soon { color: var(--amber); font-weight: 700; }
        @media (max-width: 820px) {
            .rel-table thead { display: none; }
            .rel-table, .rel-table tbody, .rel-table tr, .rel-table td { display: block; }
            .rel-table { border: none; background: transparent; box-shadow: none; }
            .rel-table tbody tr {
                display: flex; flex-direction: column; gap: 6px;
                background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
                padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow);
            }
            .rel-table tbody td { border: none; padding: 0; }
            .rel-title-cell { min-width: 0; }
            .rel-date::before { content: "发售时间："; color: var(--text-3); }
            .rel-cat::before { content: "编号："; color: var(--text-3); }
            .rel-type::before { content: "类型："; }
            .rel-status::before { content: "状态："; }
        }
        @media (max-width: 720px) {
            .db-grid { grid-template-columns: 1fr; }
            .db-card { min-height: 120px; }
        }

        /* Album-card hover treatment shared by the canonical album catalog. */
        .album-overlay {
            position: absolute; inset: 0; z-index: 3;
            display: flex; align-items: center; justify-content: center;
            background: rgba(var(--cover-tint, 22, 26, 41), 0.58);
            opacity: 0; transition: opacity 0.22s ease;
            pointer-events: none;
        }
        .album-card:hover .album-overlay { opacity: 1; }
        .album-more {
            display: inline-flex; align-items: center;
            color: #fff; font-size: 1.05rem; font-weight: 800;
            letter-spacing: 0.1em; text-transform: uppercase;
            text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
        }
        .album-more .more-a { font-style: normal; width: 0.55em; }
        .album-more .more-gr { font-style: normal; font-size: 1.3em; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, 0.35); }
        .album-more .more-wh { font-style: normal; font-size: 1.3em; font-weight: 900; line-height: 1; color: #fff; }
        /* ===== NEWS ===== */
        .news-list { min-height: calc(100vh - 61px); padding-bottom: 84px; }
        .news-error { padding: 20px; text-align: center; color: var(--amber); font-size: 0.92em; }
        .news-hero-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 18px; margin-bottom: 22px;
        }
        .news-hero-card {
            position: relative; display: flex; flex-direction: column;
            border-radius: var(--radius); overflow: hidden; cursor: pointer;
            background: var(--card); border: 1px solid var(--border);
            box-shadow: 4px 6px 16px -4px rgba(20, 20, 40, 0.28);
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
        .news-hero-card:hover { transform: translateY(-3px); border-color: var(--brand); }
        .news-hero-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #ecebf3; }
        .news-hero-body { flex: 1; padding: 13px 16px 15px; }
        .news-hero-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
        .news-hero-tag {
            display: inline-block; padding: 2px 9px; border-radius: 999px;
            font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: #fff;
        }
        .news-hero-tag.media { background: var(--brand); }
        .news-hero-tag.game { background: #5b7bd5; }
        .news-hero-tag.cd { background: #2a9d8f; }
        .news-hero-date { font-size: 0.74em; color: var(--text-3); font-variant-numeric: tabular-nums; margin-bottom: 5px; }
        .news-hero-title {
            font-size: 1em; font-weight: 700; color: var(--text); line-height: 1.45;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .news-hero-skeleton { pointer-events: none; box-shadow: none; }
        .news-hero-skeleton .news-hero-cover {
            background: linear-gradient(100deg, #ecebf3 20%, #f7f6fa 40%, #ecebf3 60%);
            background-size: 200% 100%; animation: newsSkeleton 1.4s ease-in-out infinite;
        }
        .news-skeleton-line {
            display: block; width: 88%; height: 12px; margin-top: 10px; border-radius: 999px;
            background: #ecebf3;
        }
        .news-skeleton-line.short { width: 38%; margin-top: 0; }
        @keyframes newsSkeleton { to { background-position-x: -200%; } }
        .news-rows { display: flex; flex-direction: column; }
        .news-row {
            display: grid;
            grid-template-columns: 110px 82px 1fr 190px;
            align-items: center;
            gap: 8px 18px;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            cursor: pointer; transition: background 0.15s;
        }
        .news-row:last-child { border-bottom: none; }
        .news-row:hover { background: var(--card); }
        .news-row-head {
            cursor: default; padding-top: 4px; padding-bottom: 8px;
            border-bottom: 1px solid var(--border-strong);
            font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em;
            color: var(--text-3); text-transform: uppercase;
        }
        .news-row-head:hover { background: transparent; }
        .nw-d {
            font-size: 0.78rem; color: var(--text-3);
            font-variant-numeric: tabular-nums; white-space: nowrap;
        }
        .nw-t {
            display: inline-block; justify-self: start;
            padding: 2px 10px; border-radius: 999px;
            font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: #fff;
            white-space: nowrap;
        }
        .nw-t.media { background: var(--brand); }
        .nw-t.game { background: #5b7bd5; }
        .nw-t.cd { background: #2a9d8f; }
        .nw-title {
            font-size: 0.95rem; font-weight: 600; color: var(--text);
            line-height: 1.45; min-width: 0;
        }
        .news-row:hover .nw-title { color: var(--brand-dark, #b94c00); }
        .nw-source { font-size: 0.76rem; color: var(--text-3); white-space: nowrap; }
        .news-empty { padding: 60px 20px; text-align: center; color: var(--text-3); font-size: 0.95em; }

        @media (max-width: 900px) {
            .news-row {
                display: flex; flex-wrap: wrap; align-items: center;
                gap: 4px 12px; padding: 12px 14px;
            }
            .news-row-head { display: none; }
            .nw-d { flex: 0 0 auto; }
            .nw-t { flex: 0 0 auto; }
            .nw-title { flex: 1 1 100%; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; margin-top: 2px; }
            .nw-source { flex: 1 1 100%; margin-top: 2px; font-size: 0.8em; white-space: normal; }
        }

        /* song detail page */
        .song-back-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .song-back-row .back-btn { margin-bottom: 22px; }
        .song-detail-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
        .song-detail-thumb {
            flex: 0 0 80px; width: 80px; height: 80px; border-radius: 12px;
            background: linear-gradient(135deg, #3157ed 0%, #213aa8 100%);
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 28px; font-weight: 700;
        }
        .song-detail-info { flex: 1; min-width: 0; }
        .song-detail-sub { font-size: 0.82em; color: var(--text-3); margin-bottom: 4px; }
        .song-detail-title { font-size: 1.5em; font-weight: 700; color: var(--text); margin: 0 0 8px; line-height: 1.3; }
        .song-detail-release { font-size: 0.88em; color: var(--text-2); }
        .song-detail-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 0.88em; }
        .song-detail-label { color: var(--text-3); font-weight: 600; }
        .song-detail-artist { color: var(--text-2); }
        .song-detail-link { color: var(--brand); text-decoration: none; font-weight: 600; }
        .song-detail-link:hover { text-decoration: underline; }

        .song-section { margin-bottom: 24px; }
        .song-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .song-section-title {
            font-size: 1.1em; font-weight: 700; color: var(--text); margin: 0;
            padding-bottom: 6px; border-bottom: 2px solid var(--brand);
        }
        .song-section-more {
            font-size: 0.88em; color: var(--brand); text-decoration: none; font-weight: 600;
        }
        .song-section-more:hover { text-decoration: underline; }
        .song-list { list-style: none; margin: 0; padding: 0; }
        .song-list-item {
            display: flex; align-items: center; gap: 12px; padding: 8px 0;
            border-bottom: 1px solid var(--border); font-size: 0.88em;
            transition: background 0.15s;
        }
        .song-list-item:last-child { border-bottom: none; }
        .song-list-item:hover { background: var(--bg-2); }
        .song-list-date { color: var(--text-3); font-size: 0.82em; min-width: 80px; }
        .song-list-artist {
            color: var(--text-2); font-size: 0.85em; flex: 0 1 auto;
            min-width: 0; max-width: 260px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .song-list-cnt { color: var(--brand); font-weight: 700; min-width: 40px; }
.song-list-link { color: var(--brand); text-decoration: none; flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
        .song-list-name { color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .song-list-arrow { margin-left: auto; color: var(--brand); }
        .song-list-more { color: var(--text-3); font-size: 0.82em; margin-top: 8px; }
        .song-list-extra { margin-top: 12px; }
        .song-list-toggle {
            display: block; width: 100%; margin-top: 10px; padding: 10px 14px; cursor: pointer;
            color: var(--brand); border: 1px solid var(--border); border-radius: 8px; background: var(--card);
            font: 600 12px/1 "Microsoft YaHei", "PingFang SC", sans-serif; transition: all .15s;
        }
        .song-list-toggle:hover { border-color: var(--brand); background: var(--brand-light, #fff5e6); }

        .news-pager {
            display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
            gap: 12px; padding: 18px 4px 0; border-top: 1px solid var(--border); margin-top: 8px;
        }
        .news-pager-count { font-size: 0.82em; color: var(--text-3); font-variant-numeric: tabular-nums; }
        .news-pager-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .news-pager-btn {
            min-width: 34px; height: 32px; padding: 0 8px;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: 8px; cursor: pointer;
            font-family: inherit; font-size: 0.86em; font-weight: 600; color: var(--text-2);
            background: var(--card); border: 1px solid var(--border-strong);
            transition: all 0.15s;
        }
        .news-pager-btn:hover:not(:disabled):not(.active) { border-color: var(--brand); color: var(--brand); }
        .news-pager-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
        .news-pager-btn:disabled { opacity: 0.4; cursor: default; }
        .news-pager-ellipsis {
            min-width: 26px; height: 32px; border: none; background: transparent;
            font-size: 0.86em; color: var(--text-3);
        }

        .news-detail { padding-bottom: 84px; max-width: 860px; margin: 0 auto; }
        .news-detail-actions {
            display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
        }
        .news-detail-actions .ui-back { margin-bottom: 0; }
        .news-detail-external {
            display: inline-flex; align-items: center; gap: 6px;
            min-height: 40px; padding: 7px 16px;
            border: 1px solid #8aa0de; border-radius: 999px;
            background: var(--card);
            color: var(--navy); font-family: inherit; font-size: 0.84em; font-weight: 800;
            text-decoration: none; cursor: pointer;
            box-shadow: 0 5px 10px rgba(49, 87, 237, 0.12);
            transition: transform 280ms cubic-bezier(.19, 1, .22, 1), border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
        }
        .news-detail-external:hover {
            color: var(--brand-dark); border-color: var(--brand);
            box-shadow: 0 7px 16px rgba(255, 123, 22, 0.17); transform: scale(.97);
        }
        .news-detail-cover { width: 100%; border-radius: var(--radius); margin-bottom: 18px; background: #ecebf3; }
        .news-detail-date { font-size: 0.8em; color: var(--text-3); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
        .news-detail-title { font-size: 1.5em; font-weight: 800; color: var(--text); line-height: 1.4; margin-bottom: 14px; }
        .news-detail-body { line-height: 1.9; font-size: 0.95em; color: var(--text); }
        .news-detail-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
        .news-detail-body .news-embed {
            display: block; width: 100%; max-width: 720px; aspect-ratio: 16 / 9;
            height: auto; margin: 12px auto; border: 0; border-radius: 8px;
        }
        .news-detail-body a { color: var(--brand-dark, #b94c00); text-decoration: underline; }
        .news-detail-body span[data-text-custom-color] { color: inherit; }

        /* ===== FRIEND LINKS TAB ===== */
        .links-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
        .link-card {
            display: block; padding: 18px 20px; background: var(--card);
            border: 1px solid var(--border); border-radius: var(--radius);
            box-shadow: var(--shadow); text-decoration: none; color: var(--text);
            transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
        }
        .link-card:hover { border-color: var(--brand); box-shadow: 0 8px 24px rgba(255, 123, 22, 0.18); transform: translateY(-2px); }
        .link-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .link-logo {
            width: 36px; height: 36px; flex-shrink: 0;
            object-fit: contain; border-radius: 9px; background: #fff;
            border: 1px solid var(--border); padding: 3px;
        }
        .link-logo-g {
            display: inline-flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; flex-shrink: 0;
            border-radius: 9px; border: 1px solid #e3ddcd; background: #fffaf0;
            color: #d4a853; font-weight: 800; font-size: 1.3em; line-height: 1;
        }
        .link-card-title { font-size: 1.05em; font-weight: 700; color: var(--brand-dark); margin-bottom: 0; }
        .link-card-desc { font-size: 0.85em; color: var(--text-2); line-height: 1.7; }
        @media (max-width: 900px) {
            .events-rows { overflow-x: hidden; }
            .events-row {
                display: flex; flex-wrap: wrap; align-items: flex-start;
                gap: 6px 10px; padding: 12px 14px; min-width: 0;
            }
            .events-row-head { display: none; }
            .ev-d {
                flex: 1 1 100%; font-weight: 700; color: var(--text); font-size: 0.86em;
            }
            .ev-d::before { content: '日期：'; font-weight: 700; color: var(--text); margin-right: 6px; }
            .ev-t {
                flex: 1 1 100%; min-width: 0; align-items: flex-start;
                padding: 6px 0 2px;
            }
            .ev-t::before {
                content: '标题：'; font-weight: 700; color: var(--text); margin-right: 10px;
                flex: 0 0 auto; line-height: 1.45;
            }
            .ev-t-title { white-space: normal; overflow: visible; text-overflow: clip; }
            .ev-t-sub { display: none; }
            .ev-time {
                display: block; flex: 1 1 100%; min-width: 0;
                padding: 4px 0; font-size: 0.85em; color: var(--text-2);
                line-height: 1.7;
            }
            .ev-time::before { content: '时间：'; font-weight: 700; color: var(--text); margin-right: 6px; }
            .ev-v {
                display: block; flex: 1 1 100%; min-width: 0;
                padding: 4px 0; font-size: 0.84em; white-space: normal; overflow: visible; text-overflow: clip;
            }
            .ev-v::before { content: '会场：'; font-weight: 700; color: var(--text); margin-right: 6px; }
            .ev-l {
                display: flex; flex: 1 1 100%; align-items: center; gap: 8px;
                padding: 4px 0; min-width: 0;
            }
            .ev-l::before {
                content: '相关链接：'; font-weight: 700; color: var(--text);
                flex: 0 0 auto;
            }
        }

        /* Shared information-page language for contribution and legal routes. */
        .info-page { max-width: 860px; margin: 0 auto; padding: 4px 0 48px; }
        .info-page-head { margin: 0 0 22px; padding: 8px 0 19px; border-bottom: 2px solid var(--ui-cobalt); }
        .info-page-kicker { display: block; margin-bottom: 8px; color: var(--ui-orange-deep); font-size: .74rem; font-weight: 900; letter-spacing: .11em; }
        .fix-title, .contact-title, .legal-title { margin: 0 0 7px; color: var(--ui-navy); font-size: clamp(1.8rem,3.5vw,2.45rem); font-weight: 900; letter-spacing: .02em; line-height: 1.2; }
        .fix-desc, .contact-intro, .legal-intro { max-width: 68ch; margin: 0; color: var(--text-2); font-size: .9rem; line-height: 1.75; }
        .fix-card, .contact-card { padding: 24px; border: 1px solid var(--ui-line); border-radius: 10px; background: #fff; }
        .fix-row { margin-bottom: 20px; }
        .fix-label { display: block; margin-bottom: 7px; color: var(--ui-navy); font-size: .86rem; font-weight: 850; }
        .fix-label .req { margin-left: 3px; color: var(--ui-orange-deep); }
        .fix-hint, .fix-note { margin-top: 7px; color: var(--text-3); font-size: .76rem; line-height: 1.6; }
        .fix-input, .fix-textarea { display: block; width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid #cbd1e1; border-radius: 8px; outline: 0; background: #fff; color: var(--ui-navy); font: inherit; font-size: .86rem; transition: border-color 160ms ease, box-shadow 160ms ease; }
        .fix-input:focus, .fix-textarea:focus { border-color: var(--ui-orange); box-shadow: 0 0 0 3px rgba(245,130,32,.13); }
        .fix-textarea { min-height: 134px; resize: vertical; }
        .fix-chips > div { gap: 7px; }
        .fix-chips button { font-size: .81rem; cursor: pointer; }
        .fix-agreement { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 7px 14px; }
        .fix-check { display: flex; max-width: 610px; align-items: flex-start; gap: 9px; color: var(--text-2); font-size: .82rem; line-height: 1.6; cursor: pointer; }
        .info-inline-action, .fix-feedback a { border: 0; padding: 0; background: transparent; color: var(--ui-cobalt-deep); font: inherit; font-size: .82rem; font-weight: 800; text-decoration: none; cursor: pointer; }
        .info-inline-action:hover, .fix-feedback a:hover, .contact-v a:hover, .legal-text a:hover { color: var(--ui-orange-deep); text-decoration: underline; }
        .fix-submit { min-height: 46px; padding: 0 22px; border: 1px solid var(--ui-cobalt-deep); border-radius: 7px; background: var(--ui-cobalt); color: #fff; font: inherit; font-size: .86rem; font-weight: 850; cursor: pointer; transition: background 160ms ease, transform 220ms var(--ui-ease); }
        .fix-submit:hover:not(:disabled) { background: var(--ui-cobalt-deep); transform: translateY(-2px); }
        .fix-submit:disabled { opacity: .55; cursor: not-allowed; }
        .fix-feedback { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; padding: 12px 14px; border-radius: 7px; font-size: .83rem; line-height: 1.5; }
        .fix-feedback.error { border: 1px solid #e6b9ab; background: #fff6f1; color: #903f24; }
        .fix-feedback.success { border: 1px solid #91bb9e; background: #f1fbf4; color: #256a3e; }
        .contact-section, .legal-section { margin-bottom: 22px; }
        .contact-sec-head, .legal-sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
        .contact-sec-no, .legal-sec-no { color: var(--ui-orange-deep); font-size: .86rem; font-weight: 900; }
        .contact-sec-title, .legal-sec-title { color: var(--ui-navy); font-size: 1.02rem; font-weight: 900; }
        .contact-row { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 14px; padding: 11px 0; font-size: .86rem; line-height: 1.55; }
        .contact-row + .contact-row { border-top: 1px solid var(--ui-line); }
        .contact-k { color: var(--text-3); font-weight: 700; }
        .contact-v { min-width: 0; color: var(--text-2); overflow-wrap: anywhere; }
        .contact-v a, .legal-text a { display: inline-block; max-width: 100%; margin-right: 18px; color: var(--ui-cobalt-deep); font-weight: 750; overflow-wrap: anywhere; word-break: break-word; }
        .contact-text, .legal-text { color: var(--text-2); font-size: .87rem; line-height: 1.85; overflow-wrap: anywhere; }
        .legal-section { padding-bottom: 19px; border-bottom: 1px solid var(--ui-line); }
        .legal-text + .legal-text { margin-top: 10px; }
        .contact-updated, .legal-updated { margin-top: 22px; color: var(--text-3); font-size: .76rem; }

        #tab-characters { padding-bottom: 20px; }
        #tab-characters #c-intro { position: relative; }
        #tab-characters .cio-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
        #tab-characters .cio-toolbar .c-search { margin-bottom: 0; }
        #tab-characters .cio-sort { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid #6f64ff; border-radius: 42px; height: 42px; overflow: hidden; }
        #tab-characters .cio-sort p { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #7c76cf; font-size: 13px; margin: 0; pointer-events: none; }
        #tab-characters .cio-sort select { appearance: none; border: none; background: transparent; height: 100%; padding: 0 34px 0 54px; font-size: 13px; color: #2c3650; cursor: pointer; outline: none; font-family: inherit; }
        #tab-characters .cio-sort .icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; }
        #tab-characters .c-count { color: #7c7a8a; font-size: 13px; margin-bottom: 12px; }
        #tab-characters .cio-list ul.cio-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 26px 12px; }
        #tab-characters .cio-list ul.cio-grid li {
            margin: 0;
            content-visibility: auto;
            contain-intrinsic-size: auto 324px;
        }
        #tab-characters .cio-card { display: block; text-decoration: none; color: inherit; --color-main: #8c83ff; --color-sub: #ece9ff; background-color: var(--color-sub); box-shadow: 0 3px 7px rgba(0, 0, 0, .2); position: relative; overflow: hidden; transition: transform .16s ease; }
        #tab-characters .cio-card:hover { transform: translateY(-3px); }
        #tab-characters .cio-card dl { background: #fff; margin: 0; position: relative; display: flex; flex-direction: column; }
        #tab-characters .cio-card dl::after { content: ""; border: 1px solid var(--color-main); position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; }
        #tab-characters .cio-card dt { position: relative; }
        #tab-characters .cio-img { position: relative; z-index: 2; aspect-ratio: 197 / 258; overflow: hidden; }
        #tab-characters .cio-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.19, 1, .22, 1); }
        #tab-characters .cio-img-empty { display: flex; align-items: center; justify-content: center; background: #f0eef6; }
        #tab-characters .cio-img-empty p { margin: 0; color: #b9b4c8; font-size: 13px; }
        #tab-characters .cio-card:hover .cio-img img { transform: scale(1.08); }
        #tab-characters .cio-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; display: flex; }
        #tab-characters .cio-bg::before { content: ""; background-color: var(--color-main); width: 82%; height: 86%; }
        #tab-characters .cio-bg p { margin: 6px 0 0; color: var(--color-main); writing-mode: vertical-rl; flex: auto; display: flex; align-items: center; font-family: "Trebuchet MS", Arial, Raleway, sans-serif; font-size: 14px; letter-spacing: .05em; font-weight: 700; line-height: 1.2; }
        #tab-characters .cio-veil { position: absolute; inset: 0; z-index: 3; background: var(--color-main); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; pointer-events: none; }
        #tab-characters .cio-card:hover .cio-veil { opacity: .82; }
        #tab-characters .cio-veil p { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 18px; letter-spacing: .04em; margin: 0; }
        #tab-characters .cio-veil .cio-arrow { margin-left: 8px; font-size: 20px; line-height: 1; }
        #tab-characters .cio-card dd { border-top: 1px solid var(--color-main); position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: center; padding: 10px 12px 10px 14px; min-height: 62px; }
        #tab-characters .cio-card dd::before { content: ""; background-color: var(--color-main); position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
        #tab-characters .cio-name { margin: 0; font-size: 15px; font-weight: 700; color: #20283b; line-height: 1.35; }
        #tab-characters .cio-cv { margin: 3px 0 0; color: #505050; font-size: 12px; line-height: 1.4; }
        #tab-characters .cio-cv span { margin-right: 5px; font-family: Georgia, "Times New Roman", serif; font-size: 12px; letter-spacing: .05em; }
        #tab-characters .cio-nodata { display: none; padding: 60px 0; text-align: center; color: #a99cbf; font-size: 15px; }
        #tab-characters .cio-list.loading ul.cio-grid { min-height: 420px; }

        @media (min-width: 1100px) {
            #tab-characters .cio-list ul.cio-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
        }
        @media (min-width: 701px) and (max-width: 1099px) {
            #tab-characters .cio-list ul.cio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }
        .c-lightbox { position: fixed; inset: 0; background: rgba(16,14,24,.88); display: none; align-items: center; justify-content: center; z-index: 99999; cursor: zoom-out; touch-action: none; overscroll-behavior: contain; }
        .c-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.55); touch-action: none; transform-origin: center; will-change: transform; }
        .c-lightbox img.zoomed { max-width: none; max-height: none; }
        #tab-characters .character-description {
            margin-top: 20px;
            padding-top: 18px;
            border-top: 1px solid var(--surface-line);
            color: var(--text);
            font-size: 0.94rem;
            line-height: 1.85;
        }
        #tab-characters .character-description p { margin: 0 0 0.85em; }
        #tab-characters .character-description p:last-child { margin-bottom: 0; }
        #tab-characters .c-pedigree-lens {
            margin-top: 18px; overflow: hidden; border: 1px solid #dfe1ea; border-radius: 14px;
            background: #f7f8fc; box-shadow: 0 10px 28px rgba(24,33,64,.09);
        }
        #tab-characters .c-pedigree-lens-frame {
            display: block; width: 100%; height: 900px; border: 0; background: #f7f8fc;
        }
        @media screen and (max-width: 700px) {
            #tab-characters .c-pedigree-lens { border-radius: 12px; }
            #tab-characters .c-pedigree-lens-frame { height: 690px; }
        }
        /* ===== SITE FOOTER ===== */
        .home-layout + .site-footer { margin-top: 0; }
        .site-footer {
            margin-top: 40px; padding: 40px 20px 28px; border-top: 1px solid rgba(255, 255, 255, 0.14);
            background-color: #3157ed;
            background-image: url('/uma_tools/img/bg_blue.webp');
            background-size: 100vw auto;
            background-repeat: repeat-y;
            background-position: left top;
            color: rgba(255, 255, 255, 0.85);
        }
        .footer-inner { max-width: 1200px; margin: 0 auto; }
        .footer-brand { display: flex; flex-direction: column; gap: 4px; margin-bottom: 26px; }
        .footer-brand-name {
            font-size: 1.18em; font-weight: 800; letter-spacing: 0.12em;
            line-height: 1.15; color: #fff;
        }
        .footer-brand-sub {
            font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em;
            color: rgba(255, 255, 255, 0.72);
        }
        .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px 20px; }
        .footer-col { display: flex; flex-direction: column; gap: 9px; }
        .footer-col-title {
            font-size: 0.82em; font-weight: 700; color: rgba(255, 255, 255, 0.95);
            letter-spacing: 0.06em; margin-bottom: 4px;
        }
        .footer-link {
            font-size: 0.86em; color: rgba(255, 255, 255, 0.65); text-decoration: none;
            transition: color 0.15s;
        }
        .footer-link:hover { color: var(--brand); }
        .footer-join-card {
            display: flex; flex-direction: column; gap: 8px;
            padding: 20px 22px 18px; text-decoration: none;
            background: rgba(255, 255, 255, 0.98); color: var(--navy);
            border: 1px solid rgba(255, 255, 255, 0.46); border-radius: 10px;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
            transition: background 0.15s, transform 0.15s;
        }
        .footer-join-card:hover { background: #fff; transform: translateY(-2px); }
        .footer-join-card .jc-tag {
            font-family: Consolas, 'Courier New', monospace; letter-spacing: 0.14em;
            color: #6f7480; text-transform: uppercase; font-size: 11px;
        }
        .footer-join-card .jc-title {
            font-size: 40px; font-weight: 800; line-height: 1;
            letter-spacing: -0.015em; color: var(--navy); margin: 2px 0;
        }
        .footer-join-card .jc-sub { color: #5f6570; font-size: 12px; line-height: 1.6; }
        .footer-join-card .jc-cta {
            font-family: Consolas, 'Courier New', monospace; letter-spacing: 0.08em;
            text-transform: uppercase; color: #12b7f5;
            margin-top: 12px; font-size: 11px;
        }
        .footer-note {
            margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14);
            font-size: 0.8em; line-height: 1.9; color: rgba(255, 255, 255, 0.6);
        }
        .footer-copy {
            margin-top: 14px; font-size: 0.76em; color: rgba(255, 255, 255, 0.5);
            letter-spacing: 0.02em;
        }
        .footer-note {
            margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12);
            font-size: 0.8em; line-height: 1.9; color: rgba(255, 255, 255, 0.55);
        }
        .footer-copy {
            margin-top: 14px; font-size: 0.76em; color: rgba(255, 255, 255, 0.45);
            letter-spacing: 0.02em;
        }
        @media (max-width: 700px) {
            .footer-cols { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 480px) {
            .footer-cols { grid-template-columns: 1fr; }
        }

        /* ===== CANONICAL ARCHIVE UI ===== */
        .archive-surface {
            --surface-line: #e3e5ef;
            --surface-muted: #f5f6fb;
            --surface-cobalt: #3157ed;
            --surface-orange: #ff7b16;
            max-width: 1280px;
            margin: 0 auto;
            padding-bottom: 56px;
            color: var(--text);
        }
        .archive-surface button,
        .archive-surface input,
        .archive-surface select { font-family: inherit; }

        #tab-characters .ui-search .c-search,
        #tab-db-voice .ui-search .va-search {
            width: 100%;
            height: 42px;
            margin: 0;
            padding: 0 42px 0 11px;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            outline: 0;
        }

        .ui-back {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 40px;
            margin: 2px 0 20px;
            padding: 7px 16px 7px 11px;
            border: 1px solid #8aa0de;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.94);
            color: var(--navy);
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 5px 10px rgba(49, 87, 237, 0.12);
            transition: transform 280ms cubic-bezier(.19, 1, .22, 1), border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
        }
        .ui-back svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; }
        .ui-back:hover { color: var(--brand-dark); border-color: var(--brand); box-shadow: 0 7px 16px rgba(255, 123, 22, 0.17); transform: translateX(-3px) scale(.97); }

        .library-heading {
            position: relative;
            display: flex;
            align-items: flex-end;
            gap: 16px;
            min-height: 78px;
            margin-bottom: 24px;
            padding: 7px 2px 15px;
            border-bottom: 3px solid #3157ed;
        }
        .library-heading::after,
        .library-heading-mark { display: none; }
        .library-heading > div { min-width: 0; }
        .library-heading h1 {
            margin: 0;
            color: var(--navy-3);
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 900;
            line-height: 1;
            letter-spacing: 0.055em;
        }
        .library-heading > strong {
            margin-left: auto;
            padding: 0 10px 1px 20px;
            color: var(--navy);
            font-size: 1.55rem;
            font-weight: 900;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .library-heading > strong span { color: var(--text-3); font-size: 0.72em; }

        .library-controls {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
        }
        .library-controls.compact { max-width: 720px; margin-bottom: 18px; }
        .ui-search,
        .ui-select,
        .search-box,
        .sort-box {
            min-height: 44px;
            border: 1px solid #a7b4d9;
            border-radius: 999px;
            background: var(--card);
            color: var(--text-2);
            box-shadow: 0 5px 12px rgba(49, 87, 237, 0.1);
            transition: border-color 180ms ease, box-shadow 180ms ease, transform 280ms cubic-bezier(.19, 1, .22, 1);
        }
        .ui-search {
            position: relative;
            display: flex;
            flex: 1 1 420px;
            align-items: center;
            min-width: 190px;
        }
        .ui-search > svg {
            width: 20px;
            height: 20px;
            margin-left: 14px;
            fill: none;
            stroke: var(--navy);
            stroke-width: 2;
            flex: none;
        }
        .ui-search input,
        .search-box input {
            width: 100%;
            height: 42px;
            padding: 0 42px 0 11px;
            border: 0;
            outline: 0;
            background: transparent;
            color: var(--text);
            font-size: 0.92rem;
        }
        .ui-search > button,
        .search-clear {
            position: absolute;
            top: 50%;
            right: 8px;
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: var(--text-3);
            font-size: 1.35rem;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .ui-search:focus-within,
        .ui-select:focus-within,
        .search-box:focus-within,
        .sort-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 123, 22, 0.15), 0 6px 14px rgba(49, 87, 237, 0.1); }
        .ui-select {
            position: relative;
            display: flex;
            flex: 0 1 220px;
            align-items: center;
            min-width: 170px;
        }
        .ui-select > span {
            align-self: stretch;
            display: flex;
            align-items: center;
            min-width: 54px;
            padding: 0 6px 0 16px;
            color: #52639e;
            font-size: 0.76rem;
            font-weight: 800;
            white-space: nowrap;
        }
        .ui-select select,
        .sort-select {
            appearance: none;
            width: 100%;
            height: 42px;
            padding: 0 38px 0 8px;
            border: 0;
            outline: 0;
            background-color: transparent;
            background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
            background-position: calc(100% - 17px) 19px, calc(100% - 12px) 19px;
            background-repeat: no-repeat;
            background-size: 5px 5px, 5px 5px;
            color: var(--text);
            cursor: pointer;
        }
        .ui-clear {
            min-height: 34px;
            padding: 5px 13px;
            border: 1px solid #b8bfd3;
            border-radius: 999px;
            background: #fff;
            color: var(--text-2);
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 3px 8px rgba(49, 87, 237, 0.08);
            transition: transform 280ms cubic-bezier(.19, 1, .22, 1), border-color 180ms ease, color 180ms ease;
        }
        .ui-clear:hover { color: var(--brand-dark); border-color: var(--brand); transform: scale(.95); }

        .library-filters {
            display: flex;
            align-items: flex-start;
            gap: 10px 22px;
            flex-wrap: wrap;
            margin: 0 0 24px;
            padding: 3px 0 1px;
        }
        .ui-filter-group { display: flex; align-items: center; gap: 9px; }
        .ui-filter-group > span {
            color: var(--navy);
            font-size: 0.76rem;
            font-weight: 900;
            white-space: nowrap;
        }
        .ui-filter-group > div { display: flex; gap: 4px; flex-wrap: wrap; }
        .ui-filter-group button {
            min-height: 34px;
            padding: 5px 14px;
            border: 1px solid #c7cad5;
            border-radius: 999px;
            background: #fff;
            color: var(--text-2);
            font-family: inherit;
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
            box-shadow: 0 4px 9px rgba(32, 40, 59, 0.08);
            transition: transform 280ms cubic-bezier(.19, 1, .22, 1), background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
        }
        .ui-filter-group button:hover { border-color: var(--brand); color: var(--brand-dark); transform: scale(.95); }
        .ui-filter-group button.active {
            border-color: #3157ed;
            background: linear-gradient(105deg, #213aa8, #3157ed);
            color: #fff;
            box-shadow: 0 5px 12px rgba(49, 87, 237, 0.2);
        }

        .ui-state {
            padding: 36px 20px;
            border-top: 1px solid var(--surface-line);
            color: var(--text-2);
            text-align: center;
        }
        .ui-state.compact { padding: 22px 12px; }
        .ui-state-error { color: #7f3020; border-color: rgba(185, 76, 0, 0.2); }
        .ui-state-error .ui-retry {
            min-height: 40px;
            margin-inline-start: 12px;
            padding: 0 16px;
            border: 1px solid #cad4f2;
            border-radius: 999px;
            background: #fff;
            color: var(--ui-cobalt-deep);
            font: inherit;
            font-weight: 800;
            cursor: pointer;
            transition: border-color 180ms ease, color 180ms ease, transform 260ms var(--ui-ease);
        }
        .ui-state-error .ui-retry:hover { border-color: var(--ui-orange); color: var(--ui-orange-deep); transform: translateY(-1px); }

        .event-catalog,
        .song-catalog,
        .album-catalog {
            border-top: 2px solid var(--navy);
            border-bottom: 1px solid var(--surface-line);
            background: var(--card);
        }
        .event-catalog-row,
        .song-catalog-row,
        .album-catalog-row {
            position: relative;
            display: grid;
            width: 100%;
            align-items: center;
            gap: 16px;
            padding: 13px 14px;
            border: 0;
            border-bottom: 1px solid var(--surface-line);
            background: transparent;
            color: inherit;
            text-align: left;
            cursor: pointer;
            transition: background 180ms ease, box-shadow 180ms ease, transform 280ms cubic-bezier(.19, 1, .22, 1);
        }
        .event-catalog-row:last-child,
        .song-catalog-row:last-child,
        .album-catalog-row:last-child { border-bottom: 0; }
        .event-catalog-row:hover,
        .song-catalog-row:hover,
        .album-catalog-row:hover { z-index: 1; background: #f5f7ff; box-shadow: 0 8px 20px rgba(49, 87, 237, 0.11); transform: translateY(-1px); }
        .event-catalog-row > svg,
        .song-catalog-row > svg,
        .album-catalog-row > svg,
        .relation-list button > svg {
            width: 21px;
            height: 21px;
            fill: none;
            stroke: var(--brand-dark);
            stroke-width: 2.2;
            transition: transform 150ms ease;
        }
        .event-catalog-row:hover > svg,
        .song-catalog-row:hover > svg,
        .album-catalog-row:hover > svg,
        .relation-list button:hover > svg { transform: translateX(4px); }

        .event-catalog-row { grid-template-columns: 116px 92px minmax(0, 1fr) minmax(180px, auto) 24px; }
        .event-catalog-cover {
            display: block;
            width: 116px;
            aspect-ratio: 16 / 10;
            overflow: hidden;
            border-radius: 7px;
            background: var(--surface-muted);
        }
        .event-catalog-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
        .event-catalog-cover img,
        .song-catalog-row > img,
        .album-catalog-row > img { transition: transform 600ms cubic-bezier(.19, 1, .22, 1); }
        .event-catalog-row:hover img,
        .song-catalog-row:hover > img,
        .album-catalog-row:hover > img { transform: scale(1.06); }
        .event-catalog-row > time,
        .album-catalog-row > time {
            color: var(--navy);
            font-size: 0.82rem;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
        }
        .event-catalog-main,
        .song-catalog-row > span,
        .album-catalog-row > span { min-width: 0; }
        .event-catalog-main b,
        .song-catalog-row > span b,
        .album-catalog-row > span b {
            display: block;
            overflow: hidden;
            color: var(--text);
            font-size: 0.98rem;
            font-weight: 850;
            line-height: 1.45;
            text-overflow: ellipsis;
        }
        .event-catalog-main > span,
        .song-catalog-row > span small,
        .album-catalog-row > span small {
            display: block;
            margin-top: 4px;
            overflow: hidden;
            color: var(--text-2);
            font-size: 0.77rem;
            line-height: 1.35;
            text-overflow: ellipsis;
        }
        .event-catalog-facts { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
        .event-catalog-facts i,
        .event-catalog-facts b,
        .song-catalog-row > i,
        .album-catalog-row > i {
            color: var(--text-2);
            font-size: 0.75rem;
            font-style: normal;
            font-weight: 700;
            white-space: nowrap;
        }
        .event-catalog-facts i {
            padding: 4px 8px;
            border: 1px solid #aab7dc;
            border-radius: 999px;
            color: #4c5e99;
        }
        .song-catalog-row { grid-template-columns: 64px minmax(0, 1fr) repeat(3, 94px) 24px; }
        .song-catalog-row > img,
        .album-catalog-row > img {
            width: 64px;
            height: 64px;
            border-radius: 6px;
            background: var(--surface-muted);
            object-fit: cover;
        }
        .album-catalog-row { grid-template-columns: 64px 96px minmax(0, 1fr) 120px 24px; }
        .song-catalog-row > i,
        .album-catalog-row > i { text-align: right; }

        .ui-pager {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-top: 18px;
            color: var(--text-2);
            font-size: 0.8rem;
            font-variant-numeric: tabular-nums;
        }
        .ui-pager > div { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
        .ui-pager button {
            min-width: 35px;
            min-height: 35px;
            padding: 5px 10px;
            border: 1px solid var(--border-strong);
            border-radius: 999px;
            background: var(--card);
            color: var(--navy);
            font-weight: 750;
            cursor: pointer;
            box-shadow: 0 3px 8px rgba(49, 87, 237, 0.08);
            transition: transform 280ms cubic-bezier(.19, 1, .22, 1), border-color 180ms ease, background 180ms ease;
        }
        .ui-pager button:not(:disabled):hover { border-color: var(--brand); color: var(--brand-dark); transform: scale(.94); }
        .ui-pager button.active { border-color: #3157ed; background: linear-gradient(105deg, #213aa8, #3157ed); color: #fff; }
        .ui-pager button:disabled { opacity: 0.38; cursor: default; }

        .database-directory {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        .database-directory button {
            position: relative;
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: auto auto;
            gap: 5px 18px;
            align-items: center;
            min-height: 106px;
            padding: 19px 22px;
            overflow: hidden;
            border: 1px solid #d5d9e8;
            border-radius: 10px;
            background: var(--card);
            color: var(--text);
            text-align: left;
            cursor: pointer;
            box-shadow: 0 6px 16px rgba(49, 87, 237, 0.07);
            transition: border-color 180ms ease, transform 280ms cubic-bezier(.19, 1, .22, 1), box-shadow 180ms ease, background 180ms ease;
        }
        .database-directory button:hover { border-color: var(--brand); background: #fffaf4; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(255, 123, 22, 0.14); }
        .database-directory button > span { display: none; }
        .database-directory button > b { font-size: 1.35rem; font-weight: 900; }
        .database-directory button > em { color: var(--brand-dark); font-size: 1.25rem; font-style: normal; font-weight: 900; }
        .database-directory button > i { color: var(--text-2); font-size: 0.78rem; font-style: normal; }

        .entity-detail { --entity-accent: var(--brand); }
        .song-entity-detail,
        .album-entity-detail {
            display: grid;
            grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
            align-items: start;
            gap: 20px;
        }
        .song-entity-detail > .entity-hero,
        .album-entity-detail > .entity-hero {
            display: flex;
            min-height: 0;
            flex-direction: column;
            align-items: stretch;
            gap: 24px;
            padding: 24px;
        }
        .media-content { min-width: 0; }
        .media-content > .entity-tabs { margin: 0; }
        .media-content > .entity-section { margin-top: 14px; }
        .song-entity-detail .entity-intro h1,
        .album-entity-detail .entity-intro h1 { font-size: clamp(1.55rem, 2.6vw, 2.35rem); }
        .song-entity-detail .entity-meta,
        .album-entity-detail .entity-meta { grid-template-columns: 1fr; }
        .entity-hero {
            position: relative;
            display: grid;
            grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
            gap: clamp(24px, 4vw, 52px);
            align-items: center;
            min-height: 340px;
            margin-bottom: 24px;
            padding: clamp(24px, 4vw, 46px);
            overflow: hidden;
            border: 1px solid rgba(103, 131, 217, 0.45);
            border-radius: 12px;
            background:
                linear-gradient(112deg, rgba(43, 81, 190, 0.84), rgba(62, 101, 217, 0.72)),
                url('/uma_tools/img/bg_blue.webp') center / cover;
            color: #fff;
            box-shadow: 0 10px 24px rgba(37, 67, 156, 0.16);
        }
        .entity-hero::before { display: none; }
        .entity-cover {
            position: relative;
            z-index: 1;
            width: min(100%, 320px);
            margin: 0 auto;
            overflow: hidden;
            border: 4px solid rgba(255, 255, 255, 0.96);
            border-radius: 9px;
            background: #eef0f7;
            box-shadow: 9px 10px 0 rgba(255, 123, 22, 0.88), 0 10px 24px rgba(22, 40, 92, 0.2);
        }
        .entity-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
        .album-cover-detail { aspect-ratio: 1; }
        .event-cover { aspect-ratio: 16 / 10; width: min(100%, 360px); }
        .event-cover img { object-position: center; }
        .portrait-cover,
        .character-cover { aspect-ratio: 3 / 4; max-width: 270px; }
        .portrait-cover img,
        .character-cover img { object-position: top center; }
        .entity-cover > span { display: grid; place-items: center; width: 100%; height: 100%; color: var(--navy); font-size: 4rem; font-weight: 900; }
        .entity-intro { position: relative; z-index: 1; min-width: 0; animation: entityReveal 480ms cubic-bezier(.22,.75,.24,1) both; }
        @keyframes entityReveal { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
        .entity-kind {
            display: inline-block;
            margin-bottom: 12px;
            padding: 5px 13px;
            border-radius: 999px;
            background: linear-gradient(100deg, #ff7b16, #ffa932);
            color: #fff;
            font-size: 0.75rem;
            font-weight: 900;
            letter-spacing: 0.05em;
        }
        .entity-intro h1 {
            margin: 0;
            color: #fff;
            font-size: clamp(1.8rem, 4.2vw, 3.35rem);
            font-weight: 900;
            line-height: 1.18;
            letter-spacing: 0.025em;
            text-wrap: balance;
        }
        .entity-reading { margin: 10px 0 0; color: rgba(255, 255, 255, 0.74); font-size: 0.9rem; font-weight: 650; letter-spacing: 0.04em; }
        .entity-summary { max-width: 680px; margin: 18px 0 0; color: rgba(255, 255, 255, 0.86); font-size: 0.9rem; line-height: 1.75; }
        .entity-meta {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0;
            margin: 22px 0 0;
        }
        .entity-meta > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.25); }
        .entity-meta dt,
        .entity-meta dd { margin: 0; padding: 10px 8px; font-size: 0.82rem; line-height: 1.45; }
        .entity-meta dt { color: rgba(255, 255, 255, 0.66); font-weight: 700; }
        .entity-meta dd { color: #fff; font-weight: 800; overflow-wrap: anywhere; }
        .entity-tabs {
            position: relative;
            display: flex;
            gap: 10px;
            margin: 0 0 18px;
            padding: 2px 1px 8px;
            overflow-x: auto;
            background: transparent;
            scrollbar-width: thin;
        }
        .entity-tabs button {
            position: relative;
            flex: 1 0 auto;
            min-height: 44px;
            padding: 9px 22px;
            border: 1px solid #9da8c8;
            border-radius: 999px;
            background: #fff;
            color: var(--text-2);
            font-size: 0.88rem;
            font-weight: 850;
            cursor: pointer;
            box-shadow: 0 5px 11px rgba(49, 87, 237, 0.11);
            transition: transform 280ms cubic-bezier(.19, 1, .22, 1), border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
        }
        .entity-tabs button:hover { color: var(--brand-dark); border-color: var(--brand); transform: scale(.96); }
        .entity-tabs button.active { border-color: var(--brand); background: linear-gradient(100deg, #ff7b16, #ffa932); color: #fff; box-shadow: 0 6px 14px rgba(255, 123, 22, 0.23); }
        .entity-tabs button.active::after { display: none; }

        .entity-section {
            position: relative;
            margin-top: 14px;
            padding: clamp(18px, 3vw, 30px);
            overflow-x: auto;
            border: 1px solid #8ca3df;
            border-radius: 12px;
            background: var(--card);
            box-shadow: 0 7px 18px rgba(49, 87, 237, 0.09);
        }
        .entity-section-title {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 16px;
            margin: 0 0 19px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--surface-line);
        }
        .entity-section-title h2 { margin: 0; color: var(--navy-3); font-size: 1.2rem; font-weight: 900; letter-spacing: 0.04em; }
        .entity-section-title span { color: var(--text-2); font-size: 0.78rem; font-weight: 700; }
        .detail-meta { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--surface-line); }
        .detail-meta > div { border-top: 1px solid var(--surface-line); }
        .detail-meta > div:nth-child(-n+2) { border-top: 0; }
        .detail-meta dt { color: var(--navy); background: #f1f4fc; }
        .detail-meta dd { color: var(--text); }

        .data-table { width: 100%; min-width: 700px; border-spacing: 0; border-collapse: collapse; }
        .data-table th {
            padding: 12px 13px;
            border-bottom: 2px solid var(--navy);
            background: var(--surface-muted);
            color: var(--navy);
            font-size: 0.78rem;
            font-weight: 900;
            text-align: left;
        }
        .data-table td {
            padding: 12px 13px;
            border-bottom: 1px solid var(--surface-line);
            color: var(--text-2);
            font-size: 0.84rem;
            line-height: 1.5;
            vertical-align: middle;
        }
        .data-table tbody tr:hover td { background: #f4f7ff; }
        .text-link {
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--navy);
            font-weight: 800;
            text-align: left;
            cursor: pointer;
        }
        .text-link:hover { color: var(--brand-dark); }
        .text-link.stacked { display: flex; flex-direction: column; gap: 3px; }
        .text-link.stacked small { color: var(--text-2); font-weight: 500; }

        .setlist-frame { overflow-x: auto; }
        .setlist-frame .setlist-table { width: 100%; min-width: 760px; border-spacing: 0; border-collapse: collapse; font-size: 0.88rem; }
        .setlist-frame .setlist-table th {
            padding: 13px 12px;
            border: 0;
            border-bottom: 2px solid var(--navy);
            background: var(--surface-muted);
            color: var(--navy);
            font-size: 0.83rem;
            font-weight: 900;
            text-align: left;
        }
        .setlist-frame .setlist-table td { padding: 12px; border-bottom: 1px solid var(--surface-line); vertical-align: middle; }
        .setlist-frame .setlist-table tbody tr:nth-child(even) { background: #f4f7ff; }
        .setlist-frame .setlist-no { width: 46px; color: var(--text-3); font-variant-numeric: tabular-nums; }
        .setlist-frame .setlist-song { min-width: 260px; color: var(--text); font-weight: 850; }
        .setlist-frame .setlist-perf { min-width: 330px; }
        .setlist-song-link { color: var(--text); text-decoration: none; }
        .setlist-song-link:hover { color: var(--brand-dark); }
        .perf-item,
        .setlist-performer-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 3px 9px 3px 0;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--text-2);
            white-space: nowrap;
        }
        .perf-item img { width: 30px; height: 30px; border: 2px solid #c7c2ba; border-radius: 50%; object-fit: cover; object-position: top center; }
        .guest-performer { display: inline-flex; align-items: center; margin: 3px 8px 3px 0; padding: 4px 8px; border: 1px solid var(--ui-line); border-radius: 999px; color: var(--text-2); background: var(--ui-soft); font-size: .79rem; white-space: nowrap; }
        button.setlist-performer-link { cursor: pointer; }
        button.setlist-performer-link:hover { color: var(--brand-dark); }

        .relation-list,
        .history-list { border-top: 1px solid var(--surface-line); }
        .relation-list > button,
        .history-list > button,
        .history-years section > button {
            display: grid;
            width: 100%;
            align-items: center;
            gap: 14px;
            padding: 13px 5px;
            border: 0;
            border-bottom: 1px solid var(--surface-line);
            background: transparent;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }
        .relation-list > button { grid-template-columns: minmax(0, 1fr) 24px; }
        .relation-list b { display: block; color: var(--text); font-size: 0.92rem; }
        .relation-list small { display: block; margin-top: 4px; color: var(--text-2); font-size: 0.75rem; }
        .history-list > button,
        .history-years section > button { grid-template-columns: 105px minmax(0, 1fr) auto; }
        .history-list time,
        .history-years time { color: var(--navy); font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
        .history-list span,
        .history-years button span { color: var(--text); font-weight: 750; }
        .history-list em,
        .history-years em { color: var(--text-2); font-size: 0.72rem; font-style: normal; }
        .history-years section + section { margin-top: 23px; }
        .history-years h2 { display: inline-flex; margin: 0 0 4px; padding: 5px 13px; border-radius: 999px; background: #e9eefc; color: #3151ad; font-size: 0.9rem; }

        .song-version-list { display: grid; gap: 12px; }
        .song-version-list details { border: 1px solid var(--surface-line); border-radius: 8px; background: #fff; overflow: hidden; }
        .song-version-list summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 15px 17px;
            background: var(--surface-muted);
            color: var(--navy);
            cursor: pointer;
            list-style: none;
        }
        .song-version-list summary::-webkit-details-marker { display: none; }
        .song-version-list summary b { display: block; font-size: 0.94rem; }
        .song-version-list summary small { display: block; margin-top: 3px; color: var(--text-2); font-size: 0.72rem; }
        .song-version-list summary em { font-size: 0.76rem; font-style: normal; font-weight: 800; white-space: nowrap; }
        .album-inline { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
        .album-inline img { width: 48px; height: 48px; border-radius: 5px; object-fit: cover; }
        .album-inline b,
        .album-inline small { display: block; }
        .album-inline b { color: var(--navy); font-size: 0.82rem; }
        .album-inline small { margin-top: 3px; color: var(--text-2); font-size: 0.75rem; }

        .album-track-list { border-top: 2px solid var(--navy); }
        .album-track-list > div {
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr) 44px;
            align-items: center;
            gap: 10px;
            min-height: 62px;
            padding: 8px 6px;
            border-bottom: 1px solid var(--surface-line);
        }
        .album-track-list > div > span { color: var(--text-3); font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
        .album-track-main { min-width: 0; }
        .album-track-main > small { display: block; margin-top: 5px; color: var(--text-2); font-size: 0.74rem; line-height: 1.5; }
        .album-track-main .performer-chip-list { margin-top: 8px; }
        .track-play {
            display: grid;
            place-items: center;
            width: 37px;
            height: 37px;
            padding: 0;
            border: 1px solid var(--navy);
            border-radius: 50%;
            background: transparent;
            color: var(--navy);
            cursor: pointer;
        }
        .track-play:hover,
        .track-play.playing { border-color: var(--brand); background: var(--brand); color: #fff; }
        .track-play svg { width: 17px; height: 17px; fill: currentColor; }

        .guest-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--surface-line); }
        .guest-line b { color: var(--navy); font-size: 0.78rem; }
        .guest-line span { color: var(--text-2); font-size: 0.8rem; }
        .event-video-grid,
        .video-library,
        .setting-book-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
        .event-video { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #111; }
        .event-video iframe { width: 100%; height: 100%; border: 0; }
        .video-library a,
        .setting-book-list a {
            display: flex;
            min-width: 0;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--surface-line);
            border-radius: 8px;
            background: #fff;
            color: inherit;
            text-decoration: none;
            box-shadow: 0 5px 14px rgba(49, 87, 237, 0.07);
            transition: transform 280ms cubic-bezier(.19, 1, .22, 1), border-color 180ms ease, box-shadow 180ms ease;
        }
        .video-library a:hover,
        .setting-book-list a:hover { border-color: var(--brand); box-shadow: 0 9px 18px rgba(255, 123, 22, 0.14); transform: translateY(-3px); }
        .video-library img { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; }
        .video-library b,
        .setting-book-list b { padding: 12px 13px 4px; color: var(--text); font-size: 0.86rem; line-height: 1.5; }
        .video-library span,
        .setting-book-list span { margin-top: auto; padding: 5px 13px 12px; color: var(--brand-dark); font-size: 0.72rem; font-weight: 800; }
        .setting-book-list a::before { content: ''; width: 100%; aspect-ratio: 16 / 9; background: var(--thumb) center / cover no-repeat, var(--surface-muted); }
        .roommate-image { display: block; width: 100%; margin-top: 12px; border-radius: 8px; }

        #tab-db-voice ul.va-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 12px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #tab-db-voice ul.va-grid li { position: relative; left: auto; top: auto; width: auto; height: auto; opacity: 1; transform: none; }
        #tab-db-voice .va-card {
            display: grid;
            grid-template-columns: 68px minmax(0, 1fr);
            align-items: center;
            gap: 13px;
            min-height: 104px;
            padding: 10px 13px 10px 10px;
            overflow: hidden;
            border: 1px solid var(--surface-line);
            border-color: color-mix(in srgb, var(--color-main) 48%, var(--surface-line));
            border-radius: 9px;
            background: var(--card);
            color: inherit;
            text-decoration: none;
            box-shadow: 0 5px 15px rgba(35, 38, 51, 0.055);
            transition: transform 280ms cubic-bezier(.19, 1, .22, 1), border-color 180ms ease, box-shadow 180ms ease;
        }
        #tab-db-voice .va-card:hover { border-color: var(--color-main); box-shadow: 0 9px 19px color-mix(in srgb, var(--color-main) 18%, transparent); transform: translateY(-3px); }
        #tab-db-voice .va-card-img,
        #tab-db-voice .va-ph-fb {
            width: 68px;
            height: 88px;
            border: 0;
            border-radius: 6px;
            background: var(--surface-muted);
            object-fit: cover;
            object-position: top center;
        }
        #tab-db-voice .va-ph-fb { display: grid; place-items: center; color: var(--navy); font-size: 1.6rem; font-weight: 900; }
        #tab-db-voice .va-card-txt { min-width: 0; }
        #tab-db-voice .va-name { margin: 0; color: var(--text); font-size: 1rem; font-weight: 900; }
        #tab-db-voice .va-kana { margin: 4px 0 0; color: var(--text-3); font-size: 0.75rem; }
        #tab-db-voice .va-card-roles { margin-top: 9px; }
        #tab-db-voice .va-card-roles .performer-chip { margin: 0; font-size: 0.73rem; }
        #tab-db-voice .va-card-roles .performer-chip img,
        #tab-db-voice .va-card-roles .performer-chip-fallback { width: 28px; height: 28px; }
        #tab-db-voice .va-nodata { display: none; }

        .pedigree-section { overflow: visible; }
        .c-char-blood { min-height: 520px; }

        @media (max-width: 900px) {
            .song-entity-detail,
            .album-entity-detail { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); }
            .event-catalog-row { grid-template-columns: 100px 86px minmax(0, 1fr) 24px; }
            .event-catalog-cover { width: 100px; }
            .event-catalog-facts { grid-column: 3 / 4; justify-content: flex-start; }
            .event-catalog-row > svg { grid-column: 4; grid-row: 1 / 3; }
            .song-catalog-row { grid-template-columns: 58px minmax(0, 1fr) 86px 86px 24px; }
            .song-catalog-row > i:last-of-type { display: none; }
            .album-catalog-row { grid-template-columns: 58px 88px minmax(0, 1fr) 24px; }
            .album-catalog-row > i { display: none; }
            .event-video-grid,
            .video-library,
            .setting-book-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        @media (max-width: 700px) {
            .container { padding: 15px 12px; }
            .archive-surface { padding-bottom: 36px; }
            .library-heading { min-height: 76px; margin-bottom: 18px; padding-bottom: 14px; }
            .library-heading h1 { font-size: 2rem; }
            .library-heading > strong { font-size: 1.15rem; }
            .library-controls { flex-wrap: wrap; }
            .ui-search { flex-basis: 100%; }
            .ui-select { flex: 1 1 180px; }
            .library-filters { flex-direction: column; padding: 12px; }
            .ui-filter-group { width: 100%; align-items: flex-start; }
            .ui-filter-group > span { width: 42px; padding-top: 8px; }
            .database-directory { grid-template-columns: 1fr; }
            .song-entity-detail,
            .album-entity-detail { display: block; }
            .song-entity-detail > .entity-hero,
            .album-entity-detail > .entity-hero {
                display: grid;
                min-height: 230px;
                grid-template-columns: 118px minmax(0, 1fr);
                gap: 20px;
                padding: 20px 16px;
            }
            .media-content { margin-top: 18px; }

            .event-catalog-row {
                grid-template-columns: 92px minmax(0, 1fr) 22px;
                grid-template-rows: auto auto auto;
                gap: 5px 13px;
                padding: 12px 9px;
            }
            .event-catalog-cover { grid-row: 1 / 4; width: 92px; }
            .event-catalog-row > time { grid-column: 2; grid-row: 1; }
            .event-catalog-main { grid-column: 2; grid-row: 2; }
            .event-catalog-facts { grid-column: 2; grid-row: 3; justify-content: flex-start; }
            .event-catalog-row > svg { grid-column: 3; grid-row: 1 / 4; }
            .event-catalog-facts b { display: none; }

            .song-catalog-row { grid-template-columns: 58px minmax(0, 1fr) 22px; gap: 12px; }
            .song-catalog-row > i { display: none; }
            .album-catalog-row { grid-template-columns: 58px minmax(0, 1fr) 22px; gap: 12px; }
            .album-catalog-row > time { grid-column: 2; grid-row: 2; }
            .album-catalog-row > span { grid-column: 2; grid-row: 1; }
            .album-catalog-row > svg { grid-column: 3; grid-row: 1 / 3; }

            .entity-hero {
                grid-template-columns: 118px minmax(0, 1fr);
                gap: 20px;
                min-height: 230px;
                padding: 20px 16px;
            }
            .entity-cover { width: 100%; border-width: 3px; box-shadow: 7px 8px 0 color-mix(in srgb, var(--entity-accent) 70%, transparent); }
            .entity-intro h1 { font-size: clamp(1.35rem, 6vw, 2rem); }
            .entity-kind { margin-bottom: 7px; }
            .entity-reading { margin-top: 6px; font-size: 0.78rem; letter-spacing: 0.04em; }
            .entity-summary { display: none; }
            .entity-meta { grid-template-columns: 1fr; margin-top: 13px; }
            .entity-meta > div { grid-template-columns: 68px minmax(0, 1fr); }
            .entity-meta dt,
            .entity-meta dd { padding: 7px 8px; font-size: 0.75rem; }
            .entity-tabs button { min-height: 44px; padding: 9px 15px; }
            .entity-section { padding: 16px 13px; }
            .detail-meta { grid-template-columns: 1fr; }
            .detail-meta > div:nth-child(2) { border-top: 1px solid var(--surface-line); }
            .history-list > button,
            .history-years section > button { grid-template-columns: 86px minmax(0, 1fr); }
            .history-list em,
            .history-years em { grid-column: 2; }
            .ui-pager { align-items: flex-start; flex-direction: column; }
            .ui-pager > div { justify-content: flex-start; }
            #tab-characters .cio-list ul.cio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
            #tab-db-voice ul.va-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
        }

        @media (max-width: 480px) {
            .library-heading > strong { display: none; }
            .entity-tabs { gap: 6px; overflow-x: hidden; }
            .entity-tabs button {
                flex: 1 1 0;
                min-width: 0;
                padding: 9px 7px;
                font-size: 0.76rem;
                white-space: nowrap;
            }
            .entity-hero { grid-template-columns: 100px minmax(0, 1fr); gap: 15px; }
            .entity-hero::before { right: -22%; width: 68%; }
            .entity-hero .performer-chip-list { margin-top: 10px; }
            .event-video-grid,
            .video-library,
            .setting-book-list { grid-template-columns: 1fr; }
            #tab-characters .cio-list ul.cio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            #tab-db-voice ul.va-grid { grid-template-columns: 1fr; }
            .album-track-list > div { grid-template-columns: 38px minmax(0, 1fr) 38px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .tab-content.active,
            .entity-intro { animation: none; }
            .archive-surface *,
            .archive-surface *::before,
            .archive-surface *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
        }

/* ===== FINAL SHARED INTERFACE SYSTEM ===== */
:root {
    --ui-cobalt: #3157ed;
    --ui-cobalt-deep: #213aa8;
    --ui-navy: #151d3f;
    --ui-orange: #ff7b16;
    --ui-orange-end: #ffa932;
    --ui-orange-deep: #ff7b16;
    --ui-line: #dfe3ee;
    --ui-soft: #f5f7fc;
    --ui-ease: cubic-bezier(.19, 1, .22, 1);
}

body.subpage-bg {
    background-color: #f7f8fc;
    background-image: url('/uma_tools/img/bg_texture_white.webp');
}
.container { position: relative; max-width: 1280px; padding: 26px 24px 38px; }

/* The same disclosure navigation is used on home and inner pages. */
.site-nav { display: flex; }
.site-nav-item { position: relative; }
.site-nav-trigger,
.site-nav-menu button {
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.site-nav-trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    font-weight: 800;
    letter-spacing: .05em;
    transition: color 180ms ease, background 180ms ease, transform 260ms var(--ui-ease), box-shadow 260ms ease;
}
.site-nav-icon {
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    flex: none;
}
.site-nav-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.site-nav-chevron,
.site-nav-menu svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    transition: transform 260ms var(--ui-ease);
}
.site-nav-item.open > .site-nav-trigger > .site-nav-chevron { transform: rotate(180deg); }
.site-nav-menu {
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 160ms ease, transform 360ms var(--ui-ease);
}
.site-nav-item.open > .site-nav-menu { pointer-events: auto; opacity: 1; transform: translateY(0); }
.site-nav-menu button {
    position: relative;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: transparent;
    text-align: left;
}
.site-nav-menu button::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255,255,255,.14);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 420ms var(--ui-ease);
}
.site-nav-menu button:hover::before { clip-path: inset(0 0 0 0); }
.site-nav-menu button:hover svg { transform: translateX(4px); }

.site-nav-home { width: 100%; flex-direction: column; }
.site-nav-home .site-nav-trigger { min-height: 54px; justify-content: flex-start; padding: 0 25px; color: #fff; font-size: 1.04rem; }
.site-nav-home .site-nav-item { border-bottom: 1px solid rgba(255,255,255,.15); }
.site-nav-home .site-nav-item.open { background: rgba(9,27,101,.18); }
.site-nav-home .site-nav-menu { position: static; max-height: 0; }
.site-nav-home .site-nav-item.open .site-nav-menu { max-height: 150px; }
.site-nav-home .site-nav-menu { transition: opacity 160ms ease, transform 360ms var(--ui-ease); }
.site-nav-home .site-nav-menu button { min-height: 43px; padding: 0 26px 0 43px; color: rgba(255,255,255,.9); }

.sub-header {
    position: sticky;
    top: 0;
    z-index: 1001;
    display: flex;
    min-height: 56px;
    align-items: stretch;
    overflow: visible;
    background: var(--ui-cobalt) url('/uma_tools/img/bg_blue.webp') center / cover;
    box-shadow: 0 7px 18px rgba(27,47,125,.2);
}
.sub-brand {
    display: inline-flex;
    flex: 0 0 25%;
    min-width: 230px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.32);
    background: rgba(255,255,255,.06);
    color: #fff;
    font: inherit;
    font-size: 1.16rem;
    font-weight: 900;
    letter-spacing: .05em;
    transform: skewX(-30deg);
    cursor: pointer;
    transition: background 180ms ease;
}
.sub-brand > span { transform: skewX(30deg); }
.sub-brand:hover { background: rgba(255,255,255,.15); }
.site-nav-sub { flex: 1; align-items: stretch; justify-content: flex-end; }
.site-nav-sub .site-nav-item {
    flex: 1 1 0;
    min-width: 112px;
    border-right: 1px solid rgba(255,255,255,.34);
    transform: skewX(-30deg);
    transition: transform 240ms var(--ui-ease), box-shadow 240ms ease;
}
.site-nav-sub .site-nav-trigger { min-height: 56px; padding: 0 18px; color: #fff; }
.site-nav-sub .site-nav-trigger > * { transform: skewX(30deg); }
.site-nav-sub .site-nav-item.open > .site-nav-trigger > .site-nav-chevron { transform: skewX(30deg) rotate(180deg); }
.site-nav-sub .site-nav-trigger:hover { background: rgba(255,255,255,.16); }
.site-nav-sub .site-nav-item.active {
    z-index: 2;
    background: linear-gradient(110deg,#ff7b16,#ffa932);
    transform: translateY(-7px) skewX(-30deg);
    box-shadow: 0 16px 30px rgba(20,26,65,.38);
}
.site-nav-sub .site-nav-item.active .site-nav-trigger { min-height: 63px; }
.site-nav-sub .site-nav-menu {
    position: absolute;
    top: 100%;
    right: -22px;
    left: -22px;
    z-index: 50;
    padding: 6px 0;
    background: rgba(35,62,176,.98);
    box-shadow: 0 15px 28px rgba(19,34,93,.22);
    transform: skewX(30deg) translateY(-8px);
}
.site-nav-sub .site-nav-item.open > .site-nav-menu { transform: skewX(30deg) translateY(0); }
.site-nav-sub .site-nav-menu button { min-height: 44px; padding: 0 18px; color: #fff; }

.route-breadcrumb {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 9px;
    margin: -2px 0 18px;
    color: #536080;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.route-breadcrumb button,
.route-breadcrumb em { overflow: hidden; border: 0; background: transparent; color: inherit; font: inherit; font-style: normal; text-overflow: ellipsis; }
.route-breadcrumb button { cursor: pointer; transition: color 160ms ease; }
.route-breadcrumb button:hover { color: var(--ui-orange-deep); }
.route-breadcrumb em:last-child { color: var(--ui-navy); }
.context-back {
    position: fixed;
    bottom: 22px;
    left: 20px;
    z-index: 45;
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #cdd3e4;
    border-radius: 50%;
    background: rgba(255,255,255,.93);
    color: var(--ui-navy);
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(24,38,91,.1);
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: transform 300ms var(--ui-ease), border-color 160ms ease, color 160ms ease;
}
.context-back span { display: none; }
.context-back:hover { border-color: var(--ui-orange); color: var(--ui-orange-deep); transform: translateX(-3px); }
.context-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; }

/* One control family for every archive. */
.archive-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}
.archive-toolbar.compact { max-width: 820px; margin-bottom: 18px; }
.ui-search,
.ui-select-control {
    min-height: 46px;
    border: 1px solid #cbd1e1;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 300ms var(--ui-ease);
}
.ui-search { flex: 1 1 360px; }
.ui-select-control { position: relative; display: flex; flex: 0 1 190px; min-width: 154px; align-items: center; }
.ui-select-control.ui-select-wide { flex-basis: 260px; }
.ui-search:focus-within,
.ui-select-control.open,
.ui-select-control:focus-within { border-color: var(--ui-orange); box-shadow: 0 0 0 3px rgba(245,130,32,.13); }
.ui-search > svg { stroke: var(--ui-cobalt-deep); }
.ui-search input,
#tab-characters .ui-search .c-search,
#tab-db-voice .ui-search .va-search { height: 44px; }
.ui-select-label {
    display: flex;
    min-width: 54px;
    align-self: stretch;
    align-items: center;
    padding-left: 14px;
    color: #657091;
    font-size: .8rem;
    font-weight: 850;
    white-space: nowrap;
}
.ui-select-trigger {
    display: flex;
    min-width: 0;
    height: 44px;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px 0 8px;
    border: 0;
    background: transparent;
    color: var(--ui-navy);
    font-family: inherit;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}
.ui-select-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-trigger > svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--ui-cobalt-deep); stroke-width: 2.2; transition: transform 220ms var(--ui-ease); }
.ui-select-control.open .ui-select-trigger > svg { transform: rotate(180deg); }
.ui-select-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: -1px;
    left: -1px;
    z-index: 120;
    max-height: 286px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #bfc7da;
    border-radius: 8px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 16px 36px rgba(24,36,82,.18);
    backdrop-filter: blur(12px);
}
.ui-select-menu button {
    display: flex;
    width: 100%;
    min-height: 35px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #38425f;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.ui-select-menu button:hover,
.ui-select-menu button.active { background: #eef2ff; color: var(--ui-cobalt-deep); }
.ui-select-menu button.selected { background: var(--ui-cobalt); color: #fff; }
.ui-select-menu button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.archive-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 10px 22px;
    flex-wrap: wrap;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    background: transparent;
}
.ui-filter-group button {
    min-height: 34px;
    padding: 5px 13px;
    border: 1px solid #cbd1e1;
    border-radius: 17px;
    background: #fff;
    box-shadow: none;
    font-family: inherit;
}
.ui-filter-group button.active {
    border-color: var(--ui-cobalt);
    background: var(--ui-cobalt);
    color: #fff;
    box-shadow: none;
}
.ui-filter-group button:hover { border-color: var(--ui-orange); color: var(--ui-orange-deep); transform: scale(.96); }
.ui-filter-group button.active:hover { border-color: var(--ui-cobalt); color: #fff; }
/* Crisp archive rows with purposeful movement. */
.event-catalog,
.song-catalog { border-top: 3px solid var(--ui-cobalt-deep); }
.event-catalog-row:hover,
.song-catalog-row:hover { background: #f7f9ff; box-shadow: none; transform: translateX(3px); }
.event-catalog-row > svg,
.song-catalog-row > svg,
.relation-song-row svg { stroke: var(--ui-orange-deep); }
.song-catalog-row { grid-template-columns: 64px minmax(0,1fr) repeat(3,88px) 40px 22px; }
.catalog-play { align-self: center; }
.albums-grid { grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 18px; }
.album-card { border-radius: 2px; box-shadow: 0 4px 14px rgba(24,31,70,.1); }
.album-card:hover { border-color: var(--ui-orange); box-shadow: 0 10px 24px rgba(24,31,70,.15); transform: translateY(-4px); }
.album-overlay { background: rgba(49,87,237,.84); }
.news-row { grid-template-columns: 110px 82px minmax(0,1fr); }
.news-detail-date { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.news-detail-date a { color: var(--ui-orange-deep); font-size: .82rem; font-weight: 800; text-decoration: none; }
.news-detail-date a:hover { text-decoration: underline; }
.catalog-subline,
.secondary-line { display: block; margin-top: 4px; color: #687086; font-size: .78rem; font-weight: 550; line-height: 1.45; overflow-wrap: anywhere; }

/* Detail pages share one composition; orange stays the secondary accent. */
.entity-hero {
    border: 0;
    border-radius: 4px;
    background:
        linear-gradient(120deg,rgba(34,64,187,.96),rgba(49,87,237,.88)),
        url('/uma_tools/img/bg_blue.webp') center / cover;
    box-shadow: none;
}
.entity-hero::after {
    content: '';
    position: absolute;
    right: -10%;
    bottom: -46%;
    width: 54%;
    aspect-ratio: 1;
    border: 34px solid rgba(255,255,255,.08);
    transform: rotate(22deg);
}
.entity-cover { border-radius: 3px; box-shadow: 8px 9px 0 var(--ui-orange); }
.entity-kind { border-radius: 3px; background: var(--ui-orange); color: var(--ui-navy); }
.entity-tabs { gap: 8px; border-bottom: 1px solid var(--ui-line); }
.entity-tabs button {
    min-height: 42px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: inset 0 -3px 0 transparent;
}
.entity-tabs button:hover { color: var(--ui-orange-deep); transform: none; }
.entity-tabs button.active { background: transparent; color: var(--ui-cobalt-deep); box-shadow: inset 0 -3px 0 var(--ui-orange); }
.entity-section { border-radius: 4px; box-shadow: none; }
/* Character, voice actor and event records use their own canonical two-colour identity. */
.event-entity-detail > .entity-hero,
.character-entity-detail > .entity-hero,
.voice-entity-detail > .entity-hero {
    isolation: isolate;
    grid-template-columns: 210px minmax(0,1fr);
    gap: clamp(22px,4vw,48px);
    min-height: 228px;
    padding: 26px clamp(24px,4vw,46px);
    border: 1px solid color-mix(in srgb,var(--entity-accent) 28%,#dfe3ee);
    border-radius: 7px;
    background: #fff;
    color: var(--ui-navy);
}
.event-entity-detail > .entity-hero::before,
.character-entity-detail > .entity-hero::before,
.voice-entity-detail > .entity-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    background:
        linear-gradient(154deg,var(--entity-accent) 0 29%,transparent 29.2%),
        linear-gradient(154deg,var(--entity-sub) 0 38%,transparent 38.2%);
}
.event-entity-detail > .entity-hero::after,
.character-entity-detail > .entity-hero::after,
.voice-entity-detail > .entity-hero::after {
    right: -3%;
    bottom: -30%;
    z-index: -1;
    width: 32%;
    border-width: 24px;
    border-color: color-mix(in srgb,var(--entity-accent) 9%,transparent);
}
.event-entity-detail .entity-cover,
.character-entity-detail .entity-cover,
.voice-entity-detail .entity-cover {
    width: 100%;
    border: 3px solid #fff;
    border-radius: 4px;
    box-shadow: 7px 8px 0 var(--entity-sub),0 10px 24px rgba(22,40,92,.16);
}
.event-entity-detail .event-cover { max-width: 230px; aspect-ratio: 16/10; }
.character-entity-detail .character-cover,
.voice-entity-detail .portrait-cover { max-width: 156px; aspect-ratio: 3/4; }
.voice-entity-detail .portrait-cover { background: #fff; }
.event-entity-detail .entity-kind,
.character-entity-detail .entity-kind,
.voice-entity-detail .entity-kind { background: var(--entity-accent); color: #fff; }
.event-entity-detail .entity-intro h1,
.character-entity-detail .entity-intro h1,
.voice-entity-detail .entity-intro h1 { color: var(--ui-navy); font-size: clamp(1.55rem,3.2vw,2.55rem); }
.event-entity-detail .entity-reading,
.character-entity-detail .entity-reading,
.voice-entity-detail .entity-reading,
.event-entity-detail .entity-summary { color: #66708a; }
.event-entity-detail .entity-meta,
.character-entity-detail .entity-meta,
.voice-entity-detail .entity-meta { margin-top: 15px; }
.event-entity-detail .entity-meta > div,
.character-entity-detail .entity-meta > div,
.voice-entity-detail .entity-meta > div { border-color: #dfe3ee; }
.event-entity-detail .entity-meta dt,
.character-entity-detail .entity-meta dt,
.voice-entity-detail .entity-meta dt { color: #69738c; }
.event-entity-detail .entity-meta dd,
.character-entity-detail .entity-meta dd,
.voice-entity-detail .entity-meta dd { color: var(--ui-navy); }
.character-entity-detail .entity-hero .performer-chip,
.voice-entity-detail .entity-hero .performer-chip { color: var(--ui-navy); }
.character-entity-detail .entity-tabs button.active,
.voice-entity-detail .entity-tabs button.active { color: var(--entity-accent); box-shadow: inset 0 -3px 0 var(--entity-sub); }

/* The setlist performer is the canonical person-link shape. */
.performer-chip-list { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 15px; }
.performer-chip-list.compact { gap: 6px 11px; margin-top: 0; }
.performer-chip,
.perf-item,
.setlist-performer-link {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    margin: 2px 7px 2px 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: .82rem;
    font-weight: 750;
    white-space: nowrap;
}
button.performer-chip,
button.setlist-performer-link { cursor: pointer; }
.performer-chip img,
.perf-item img {
    width: 34px;
    height: 34px;
    flex: none;
    border: 2px solid var(--chip-color,#c7c2ba);
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    object-position: top center;
    transition: transform 300ms var(--ui-ease), box-shadow 160ms ease;
}
.performer-chip:hover img,
button.setlist-performer-link:hover img { transform: scale(1.1); box-shadow: 0 3px 9px rgba(20,29,63,.16); }
.performer-chip-fallback {
    display: grid;
    width: 34px;
    height: 34px;
    flex: none;
    place-items: center;
    border: 2px solid var(--chip-color,#c7c2ba);
    border-radius: 50%;
    background: #fff;
    color: var(--ui-navy);
    font-size: .72rem;
    font-weight: 900;
}
.voice-chip img { background: #fff; }
.entity-hero .performer-chip { margin-top: 16px; color: #fff; }
.entity-hero .performer-chip-list .performer-chip { margin-top: 0; }
.album-track-main .performer-chip { font-size: .72rem; }
.album-track-main .performer-chip img { width: 29px; height: 29px; }

.relation-song-row {
    display: block;
    border-bottom: 1px solid var(--ui-line);
}
.relation-song-row b { display: block; color: var(--ui-navy); font-size: .9rem; }
.relation-song-meta { display: block; margin-top: 4px; color: #687086; font-size: .76rem; }
.relation-song-detail { padding: 4px 14px 16px 69px; animation: relationReveal 260ms var(--ui-ease) both; }
@keyframes relationReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.relation-version { padding: 12px 0; border-top: 1px solid #e4e7f0; }
.relation-version > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.relation-version > header b { font-size: .88rem; }
.relation-version > header span { color: #687086; font-size: .76rem; }
.relation-release {
    display: grid;
    grid-template-columns: minmax(250px,1fr) minmax(170px,.7fr) 38px;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.relation-release + .relation-release { border-top: 1px dashed #e1e4ed; }
.relation-release .album-inline { min-width: 0; }
.relation-release .album-inline img { width: 44px; height: 44px; }
.relation-release .performer-chip-list { min-width: 0; }
.relation-song-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--ui-orange-deep);
    font: inherit;
    font-size: .78rem;
    font-weight: 850;
    cursor: pointer;
}
.relation-song-link span { transition: transform 220ms var(--ui-ease); }
.relation-song-link:hover span { transform: translateX(4px); }

/* Music credits, lyrics, and creator relations share the archive's row language. */
.song-credit-list { border-top: 2px solid var(--ui-cobalt-deep); }
.song-credit-version { display: grid; grid-template-columns: minmax(150px,.34fr) minmax(0,1fr); gap: 24px; padding: 18px 4px; border-bottom: 1px solid var(--ui-line); }
.song-credit-version > header h2 { margin: 0; color: var(--ui-navy); font-size: .96rem; }
.song-credit-version > header span { display: block; margin-top: 5px; color: #59637b; font-size: .78rem; overflow-wrap: anywhere; }
.song-credit-version dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px 22px; margin: 0; }
.song-credit-version dl > div { min-width: 0; }
.song-credit-version dt { margin-bottom: 5px; color: #677189; font-size: .75rem; font-weight: 850; letter-spacing: .05em; }
.song-credit-version dd { margin: 0; color: var(--ui-navy); font-size: .88rem; font-weight: 750; overflow-wrap: anywhere; }
.song-credit-version dd .text-link { color: var(--ui-cobalt-deep); font-size: inherit; font-weight: inherit; }
.song-credit-version dd small { display: block; margin-top: 3px; color: #66708a; font-size: .75rem; font-weight: 600; }

.lyrics-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--ui-cobalt-deep); }
.lyrics-toolbar label { display: grid; min-width: min(360px,100%); gap: 5px; color: #5f6980; font-size: .75rem; font-weight: 800; }
.lyrics-toolbar select { width: 100%; min-height: 42px; padding: 0 38px 0 12px; border: 1px solid #cfd5e5; border-radius: 3px; background: #fff; color: var(--ui-navy); font: inherit; font-size: .84rem; font-weight: 750; }
.lyrics-sheet { max-width: 780px; margin: 0 auto; padding: 28px clamp(4px,5vw,48px) 36px; list-style: none; counter-reset: lyric-line; }
.lyrics-sheet li { position: relative; min-height: 31px; padding: 4px 12px 4px 18px; color: #343d54; font-size: .9rem; line-height: 1.65; transition: color 180ms ease,transform 220ms var(--ui-ease); }
.lyrics-sheet li::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 0; width: 3px; background: transparent; }
.lyrics-sheet li.active { color: var(--ui-cobalt-deep); font-weight: 800; transform: translateX(5px); }
.lyrics-sheet li.active::before { background: var(--ui-orange); }
.lyrics-sheet button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lyrics-sheet.is-timed button:not(:disabled):hover { color: var(--ui-orange-deep); }
.lyrics-sheet button:disabled { cursor: text; }

.creator-catalog { border-top: 3px solid var(--ui-cobalt-deep); }
.creator-toolbar { align-items: center; }
.creator-toolbar .ui-search { flex: 1 1 360px; }
.filter-pill-group { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-pill { min-height: 38px; padding: 7px 15px; border: 1px solid #cfd5e5; border-radius: 20px; background: #fff; color: #46516a; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; transition: border-color 160ms ease,color 160ms ease,background 160ms ease; }
.filter-pill:hover { border-color: var(--ui-orange); color: var(--ui-orange-deep); }
.filter-pill.active { border-color: var(--ui-cobalt); background: var(--ui-cobalt); color: #fff; }
.creator-catalog-row { display: grid; width: 100%; grid-template-columns: 48px minmax(140px,1fr) minmax(170px,.7fr) 90px 20px; align-items: center; gap: 14px; padding: 12px 10px; border: 0; border-bottom: 1px solid var(--ui-line); background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background 160ms ease,transform 220ms var(--ui-ease); }
.creator-catalog-row:hover { background: #f7f9ff; transform: translateX(3px); }
.creator-monogram { display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid var(--ui-cobalt); border-radius: 50%; background: #eef2ff; color: var(--ui-cobalt-deep); font-size: .78rem; font-weight: 900; }
.creator-monogram.small { width: 40px; height: 40px; font-size: .75rem; }
.creator-catalog-name { min-width: 0; }
.creator-catalog-name b { display: block; color: var(--ui-navy); font-size: .9rem; overflow-wrap: anywhere; }
.creator-catalog-name small { display: block; margin-top: 3px; color: #657087; font-size: .75rem; }
.creator-catalog-roles,.creator-catalog-count { color: #58637b; font-size: .78rem; font-weight: 700; }
.creator-catalog-row > svg,.creator-work-list svg,.creator-collaborator-list svg { width: 20px; height: 20px; fill: none; stroke: var(--ui-orange-deep); stroke-width: 2.2; }
.creator-cover { display: grid; place-items: center; aspect-ratio: 1; background: rgba(255,255,255,.96); color: var(--ui-cobalt-deep); font-size: clamp(1.5rem,4vw,2.5rem); font-weight: 950; letter-spacing: -.02em; box-shadow: 8px 10px 22px rgba(13,19,35,.16); }
.creator-cover > span { color: var(--ui-cobalt-deep); font-size: clamp(1.5rem,4vw,2.5rem); transform: translateX(-.04em); }
.creator-work-list,.creator-collaborator-list { border-top: 2px solid var(--ui-cobalt-deep); }
.creator-work-list > button,.creator-collaborator-list > button { display: grid; width: 100%; grid-template-columns: 52px minmax(0,1fr) auto 20px; align-items: center; gap: 14px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--ui-line); background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background 160ms ease,transform 220ms var(--ui-ease); }
.creator-work-list > button:hover,.creator-collaborator-list > button:hover { background: #f7f9ff; transform: translateX(3px); }
.creator-work-list img { width: 52px; height: 52px; border-radius: 3px; object-fit: cover; }
.creator-work-list b,.creator-collaborator-list b { display: block; color: var(--ui-navy); font-size: .88rem; }
.creator-work-list small,.creator-collaborator-list small { display: block; margin-top: 4px; color: #657087; font-size: .75rem; font-weight: 600; }
.creator-work-list time { color: #66708a; font-size: .75rem; font-weight: 700; }
.creator-collaborator-list > button { grid-template-columns: 40px minmax(0,1fr) 20px; }
@media (max-width: 760px) {
    .creator-cover { box-shadow: 6px 8px 18px rgba(13,19,35,.16); }
}
.pedigree-section { min-height: 520px; margin-top: 0; padding: 0; overflow: visible; }
.pedigree-section > .c-pedigree-lens { margin: 0; border-radius: 4px; box-shadow: none; }
.pedigree-empty { margin: 0; padding: 36px 20px; color: var(--text-2); text-align: center; }

/* ===== AUDIO PLAYER ===== */
:root {
    --audio-dock-height: 78px;
    --audio-safe-bottom: env(safe-area-inset-bottom, 0px);
    --audio-shadow: 0 -12px 34px rgba(15,20,35,.2);
}
body.audio-dock-active #app { padding-bottom: calc(var(--audio-dock-height) + var(--audio-safe-bottom)); }
body.audio-dock-active .home-layout { height: calc(100vh - var(--audio-dock-height) - var(--audio-safe-bottom)); min-height: 560px; }
.audio-dock {
    position: fixed;
    z-index: 1100;
    right: 0;
    bottom: 0;
    left: 0;
    min-width: 0;
    height: calc(var(--audio-dock-height) + var(--audio-safe-bottom));
    padding-bottom: var(--audio-safe-bottom);
    color: #fff;
    background: linear-gradient(102deg,var(--ui-cobalt) 0%,#2c51de 58%,var(--ui-cobalt-deep) 100%);
    box-shadow: var(--audio-shadow);
    isolation: isolate;
    animation: audioDockIn 240ms cubic-bezier(.19,1,.22,1) both;
}
.audio-dock::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url('/uma_tools/img/bg_blue.webp') center / cover;
    opacity: .13;
    pointer-events: none;
}
.audio-dock::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: clamp(220px,30vw,520px);
    width: clamp(80px,10vw,150px);
    background: linear-gradient(118deg,transparent 0 42%,rgba(255,255,255,.08) 43% 70%,transparent 71%);
    pointer-events: none;
}
.audio-dock-inner {
    width: min(1480px,100%);
    height: 100%;
    margin: 0 auto;
    padding: 10px clamp(16px,2.5vw,40px);
    display: grid;
    grid-template-columns: 52px minmax(160px,1fr) auto minmax(180px,.72fr) minmax(86px,.34fr) 46px 34px;
    align-items: center;
    gap: clamp(8px,1.35vw,18px);
}
.audio-cover {
    position: relative;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 8px;
    background: #dfe5f6;
    box-shadow: 0 5px 14px rgba(20,35,105,.22);
}
.audio-cover::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: var(--ui-orange);
    clip-path: polygon(100% 0,100% 100%,0 100%);
}
.audio-cover img { width: 100%; height: 100%; object-fit: cover; }
.audio-cover img.is-missing { opacity: 0; }
.audio-playing-bars { display: inline-flex; align-items: flex-end; justify-content: center; gap: 2px; }
.audio-cover > .audio-playing-bars {
    position: absolute;
    z-index: 2;
    right: 4px;
    bottom: 4px;
    width: 19px;
    height: 16px;
    padding: 3px;
    border-radius: 4px;
    background: rgba(21,29,63,.82);
}
.audio-playing-bars i { width: 2px; height: 8px; border-radius: 2px; background: #ffa932; transform-origin: bottom; animation: audioBars 680ms ease-in-out infinite alternate; }
.audio-playing-bars i:nth-child(2) { height: 11px; animation-delay: -260ms; }
.audio-playing-bars i:nth-child(3) { height: 6px; animation-delay: -480ms; }
.audio-dock-copy { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.audio-title-link { display: block; min-width: 0; max-width: 100%; padding: 0; border: 0; color: #fff; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.audio-title-link:disabled { cursor: default; }
.audio-title-link:not(:disabled):hover .audio-title { color: #ffd09b; }
.audio-title { display: inline-block; min-width: max-content; font-size: clamp(.82rem,1vw,.94rem); font-weight: 850; white-space: nowrap; transition: color 160ms ease; }
.audio-overflow-viewport { display: block; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; }
.audio-overflow-track { width: max-content; }
.audio-overflow-viewport.is-overflowing .audio-overflow-track { animation: audioMarquee var(--marquee-duration,18s) linear infinite alternate; }
.audio-artist-viewport { color: rgba(255,255,255,.78); }
.audio-dock-vocalists { display: flex; min-width: max-content; gap: 0; color: rgba(255,255,255,.78); white-space: nowrap; }
.audio-dock-vocalists button,
.audio-dock-vocalists > span { flex: 0 0 auto; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-size: .75rem; }
.audio-dock-vocalists button { text-underline-offset: 3px; cursor: pointer; transition: color 160ms ease,transform 220ms var(--ui-ease); }
.audio-dock-vocalists > :not(:last-child)::after { content: ' / '; color: rgba(255,255,255,.38); white-space: pre; }
.audio-dock-vocalists button:hover { color: #ffd09b; text-decoration: underline; transform: translateY(-1px); }
.audio-dock-artist { display: inline-block; color: rgba(255,255,255,.78); font-size: .75rem; white-space: nowrap; }
.audio-dock-controls { display: flex; align-items: center; justify-content: center; gap: 2px; }
.audio-control,
.audio-icon-btn,
.audio-queue-toggle,
.audio-dismiss,
.audio-queue-remove {
    display: inline-grid;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    place-items: center;
    cursor: pointer;
    transition: color 160ms ease,background 160ms ease,transform 260ms var(--ui-ease),box-shadow 180ms ease;
}
.audio-control { width: 40px; height: 40px; border-radius: 50%; color: rgba(255,255,255,.78); }
.audio-control:disabled { opacity: .38; pointer-events: none; }
.audio-control svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.audio-control svg.audio-solid { fill: currentColor; stroke: none; }
.audio-control-primary {
    width: 50px;
    height: 50px;
    margin-inline: 2px;
    color: #fff;
    background: var(--ui-orange);
    box-shadow: 0 7px 18px rgba(126,51,0,.28);
}
.audio-control-primary svg { width: 21px; height: 21px; fill: currentColor; stroke: none; }
.audio-control:hover,
.audio-queue-toggle:hover,
.audio-dismiss:hover { color: #fff; background: rgba(255,255,255,.13); transform: translateY(-2px); }
.audio-control-primary:hover { background: #ffa932; box-shadow: 0 10px 22px rgba(112,43,0,.34); transform: translateY(-2px) scale(1.04); }
.audio-control:active,
.audio-queue-toggle:active,
.audio-dismiss:active { transform: translateY(0) scale(.93); }
.audio-control:focus-visible,
.audio-queue-toggle:focus-visible,
.audio-dismiss:focus-visible,
.audio-dock-vocalists button:focus-visible { outline: 2px solid #ffd19a; outline-offset: 2px; }
.audio-arc-loader { display: grid; width: 24px; height: 24px; place-items: center; }
.audio-arc-loader svg { width: 23px; height: 23px; overflow: visible; fill: none; transform: rotate(-90deg); }
.audio-arc-loader circle { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.audio-arc-loader circle:first-child { stroke: rgba(255,255,255,.36); }
.audio-arc-loader circle:last-child { stroke: #fff; stroke-dasharray: 18 34; animation: audioArc 820ms linear infinite; }
.audio-dock-progress { display: grid; min-width: 0; grid-template-columns: 36px minmax(90px,1fr) 36px; align-items: center; gap: 7px; color: rgba(255,255,255,.72); font-size: .75rem; font-variant-numeric: tabular-nums; }
.audio-dock-progress > span:last-child { text-align: right; }
.audio-dock-progress input {
    width: 100%;
    height: 24px;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    touch-action: pan-y;
}
.audio-dock-progress input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg,#ff7b16 0 var(--audio-played),#9bb0f5 var(--audio-played) var(--audio-buffered),rgba(255,255,255,.25) var(--audio-buffered));
}
.audio-dock-progress input::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg,#ff7b16 0 var(--audio-played),#9bb0f5 var(--audio-played) var(--audio-buffered),rgba(255,255,255,.25) var(--audio-buffered));
}
.audio-dock-progress input::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ui-orange);
    box-shadow: 0 2px 7px rgba(21,29,63,.35);
    appearance: none;
    -webkit-appearance: none;
    transition: transform 160ms ease,box-shadow 160ms ease;
}
.audio-dock-progress input::-moz-range-thumb { width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: var(--ui-orange); box-shadow: 0 2px 7px rgba(21,29,63,.35); }
.audio-dock-progress input:hover::-webkit-slider-thumb,
.audio-dock-progress input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(245,130,32,.22); transform: scale(1.16); }
.audio-dock-progress input:focus-visible { outline: 2px solid #ffd19a; outline-offset: 1px; }
.audio-volume { display: flex; min-width: 0; align-items: center; gap: 3px; }
.audio-volume .audio-control { flex: none; width: 34px; height: 34px; }
.audio-volume input { width: 100%; min-width: 46px; height: 24px; margin: 0; background: transparent; accent-color: var(--ui-orange); cursor: pointer; }
.audio-queue-toggle { position: relative; width: 44px; height: 44px; border-radius: 50%; color: rgba(255,255,255,.84); }
.audio-queue-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.audio-queue-toggle em {
    position: absolute;
    top: 0;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--ui-cobalt-deep);
    border-radius: 9px;
    color: var(--ui-navy);
    background: #fff;
    font-size: .7rem;
    font-style: normal;
    font-weight: 850;
    line-height: 14px;
}
.audio-queue-toggle.active { color: #fff; background: rgba(245,130,32,.28); }
.audio-dismiss { width: 32px; height: 32px; border-radius: 50%; color: rgba(255,255,255,.58); }
.audio-dismiss svg,
.audio-icon-btn svg,
.audio-queue-remove svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.audio-live-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.audio-error {
    position: absolute;
    right: clamp(14px,3vw,42px);
    bottom: calc(100% + 10px);
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 12px;
    max-width: min(420px,calc(100vw - 28px));
    padding: 8px 9px 8px 14px;
    border: 1px solid #efb5b5;
    border-radius: 10px;
    color: #842a2a;
    background: #fff7f7;
    box-shadow: 0 8px 24px rgba(69,25,25,.16);
    font-size: .73rem;
}
.audio-error span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-error button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 14px; color: #fff; background: #a93636; font: inherit; font-weight: 800; cursor: pointer; }

.audio-panel {
    position: fixed;
    z-index: 1090;
    right: max(14px,env(safe-area-inset-right));
    bottom: calc(var(--audio-dock-height) + var(--audio-safe-bottom) + 10px);
    display: grid;
    width: min(400px,calc(100vw - 28px));
    max-height: min(360px,calc(100dvh - var(--audio-dock-height) - var(--audio-safe-bottom) - 28px));
    grid-template-rows: auto minmax(0,1fr);
    overflow: hidden;
    border: 1px solid #d8def0;
    border-radius: 14px;
    color: var(--ui-navy);
    background: #fff url('/uma_tools/img/bg_texture_white.webp') center / cover;
    box-shadow: 0 18px 46px rgba(18,31,79,.24);
    animation: audioPanelIn 200ms cubic-bezier(.19,1,.22,1) both;
}
.audio-panel-head {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 9px 17px;
    border-bottom: 1px solid var(--ui-line);
}
.audio-panel-head h2 { font-size: .96rem; font-weight: 900; }
.audio-panel-head h2 { margin-right: auto; }
.audio-panel-head h2 em { margin-left: 5px; color: #667397; font-size: .75rem; font-style: normal; }
.audio-panel-clear { min-height: 34px; margin-right: 4px; padding: 0 10px; border: 0; border-radius: 17px; color: #536080; background: transparent; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; }
.audio-panel-clear:hover { color: var(--ui-orange-deep); background: #fff0e2; }
.audio-panel-clear:disabled { opacity: .4; cursor: default; }
.audio-icon-btn { width: 34px; height: 34px; border-radius: 50%; color: #657095; }
.audio-icon-btn:hover { color: var(--ui-cobalt-deep); background: #edf1ff; transform: rotate(8deg); }
.audio-queue { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #a6b2db #eef1f8; scrollbar-width: thin; }
.audio-queue-row {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 56px;
    grid-template-columns: 34px 42px minmax(0,1fr) 34px;
    align-items: center;
    border-bottom: 1px solid #e5e8f2;
    background: rgba(255,255,255,.78);
    transition: background 150ms ease,transform 220ms var(--ui-ease);
}
.audio-queue-row:last-child { border-bottom: 0; }
.audio-queue-row:hover { background: #f3f6ff; }
.audio-queue-row.active { background: linear-gradient(90deg,#fff4e8,#fffaf5 72%); }
.audio-queue-row.dragging { z-index: 2; background: #edf2ff; box-shadow: 0 7px 20px rgba(34,61,146,.2); transform: scale(.99); }
.audio-queue-drag { display: grid; width: 34px; height: 44px; padding: 0; border: 0; color: #9099b2; background: transparent; place-items: center; cursor: grab; touch-action: none; }
.audio-queue-drag:active { cursor: grabbing; }
.audio-queue-drag svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.audio-queue-play {
    display: grid;
    min-height: 56px;
    grid-template-columns: 24px 18px;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.audio-queue-play:focus-visible,.audio-queue-copy:focus-visible { outline: 2px solid var(--ui-cobalt); outline-offset: -3px; }
.audio-queue-number { color: #7a849e; font-size: .75rem; font-weight: 750; font-variant-numeric: tabular-nums; text-align: center; }
.audio-queue-row.active .audio-queue-number { color: var(--ui-orange-deep); }
.audio-queue-copy { min-width: 0; padding: 7px 8px; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.audio-queue-copy:disabled { cursor: default; }
.audio-queue-copy b,
.audio-queue-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-queue-copy b { color: var(--ui-navy); font-size: .8rem; font-weight: 850; }
.audio-queue-copy small { margin-top: 2px; color: #687188; font-size: .75rem; }
.audio-queue-play > .audio-playing-bars { width: 18px; height: 16px; }
.audio-queue-remove { width: 30px; height: 30px; border-radius: 50%; color: #9199ad; opacity: 0; }
.audio-queue-row:hover .audio-queue-remove,
.audio-queue-remove:focus-visible { opacity: 1; }
.audio-queue-remove:hover { color: #a93636; background: #fff0f0; transform: scale(1.06); }
.audio-queue-remove:focus-visible { outline: 2px solid var(--ui-cobalt); outline-offset: 1px; }

@keyframes audioDockIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes audioPanelIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes audioBars { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes audioArc { to { stroke-dashoffset: -52; } }
@keyframes audioMarquee { 0%,12% { transform: translateX(0); } 88%,100% { transform: translateX(calc(-1 * var(--overflow-distance))); } }

.track-play { transition: transform 300ms var(--ui-ease), background 160ms ease, border-color 160ms ease; }
.track-play:hover { transform: scale(.92); }
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #ccd2e2;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: var(--ui-cobalt-deep);
    box-shadow: 0 5px 16px rgba(20,29,63,.12);
    cursor: pointer;
    backdrop-filter: blur(8px);
}
.audio-dock-active .context-back,
.audio-dock-active .back-to-top { bottom: calc(var(--audio-dock-height) + var(--audio-safe-bottom) + 10px); }
.back-to-top svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.back-to-top:hover { border-color: var(--ui-orange); color: var(--ui-orange-deep); }

.footer-main { display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(270px,.8fr); gap: 54px; align-items: start; }
.footer-brand { margin: 0; }
.footer-brand p { max-width: 320px; margin-top: 15px; color: rgba(255,255,255,.64); font-size: .8rem; line-height: 1.7; }
.footer-cols { display: grid; grid-template-columns: repeat(2,150px); gap: 26px; }
.footer-community > span { display: block; margin-bottom: 8px; color: rgba(255,255,255,.72); font-size: .76rem; font-weight: 700; }
.footer-community a {
    display: grid;
    grid-template-columns: minmax(0,1fr) 22px;
    gap: 4px 14px;
    padding: 13px 0;
    border-top: 1px solid rgba(255,255,255,.3);
    border-bottom: 1px solid rgba(255,255,255,.3);
    color: #fff;
    text-decoration: none;
}
.footer-community b { font-size: .94rem; }
.footer-community-note { grid-column: 1; color: rgba(255,255,255,.68); font-size: .78rem; line-height: 1.5; }
.footer-community svg { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 20px; fill: none; stroke: var(--ui-orange); stroke-width: 2.3; transition: transform 240ms var(--ui-ease); }
.footer-community a:hover svg { transform: translateX(5px); }

.event-video { position: relative; border: 1px solid #d8ddeb; background: #111; box-shadow: 0 6px 16px rgba(29,42,88,.1); transition: transform 280ms var(--ui-ease),box-shadow 180ms ease,border-color 180ms ease; }
.event-video:hover { border-color: var(--ui-orange); box-shadow: 0 12px 24px rgba(29,42,88,.16); transform: translateY(-3px); }
.event-video > a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; color: #fff; text-decoration: none; }
.event-video > a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(13,20,46,.05) 30%,rgba(13,20,46,.88)); }
.event-video > a img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 520ms var(--ui-ease); }
.event-video:hover > a img { transform: scale(1.045); }
.event-video-platform,
.event-video-label,
.event-video > a svg { position: absolute; z-index: 2; }
.event-video-platform { top: 12px; left: 12px; padding: 4px 9px; border-radius: 3px; background: #fb7299; font-size: .75rem; font-weight: 900; letter-spacing: .04em; }
.event-video-external .event-video-platform { background: var(--ui-cobalt); }
.event-video-label { right: 44px; bottom: 13px; left: 13px; font-size: .86rem; font-weight: 850; line-height: 1.4; }
.event-video > a svg { right: 13px; bottom: 14px; width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.3; transition: transform 220ms var(--ui-ease); }
.event-video:hover > a svg { transform: translateX(4px); }

#tab-characters .cio-card { padding: 0 7px 7px 0; background: var(--color-sub); }
#tab-characters .cio-card dl { height: 100%; }
.fix-row > .ui-select-control { width: 100%; max-width: 360px; }
.fix-check input {
    appearance: none;
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 2px;
    border: 1px solid #aab2c8;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}
.fix-check input:checked { border-color: var(--ui-cobalt); background: var(--ui-cobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='white' stroke-width='2.5'/%3E%3C/svg%3E") center/14px no-repeat; }

@media (max-width: 980px) {
    .sub-brand { flex-basis: clamp(190px,25vw,240px); padding-inline: 20px; font-size: 1rem; }
    .site-nav-sub .site-nav-item { min-width: 102px; }
    .site-nav-sub .site-nav-trigger { padding-inline: 14px; }
    .footer-main { grid-template-columns: 1fr 1fr; gap: 34px; }
    .footer-community { grid-column: 1 / -1; }
    .song-catalog-row { grid-template-columns: 58px minmax(0,1fr) 80px 80px 40px 22px; }
    .song-catalog-row > i:last-of-type { display: none; }
}

/* Keep the tablet header compact and horizontal until the mobile navigation
   takes over at the content-driven breakpoint below. */
@media (min-width: 701px) and (max-width: 768px) {
    .sub-header { flex-direction: row; flex-wrap: nowrap; }
    .sub-brand { flex: 0 0 190px; width: auto; min-width: 190px; }
    .site-nav-sub .site-nav-item { min-width: 0; }
    .site-nav-sub .site-nav-trigger { padding-inline: 8px; font-size: .82rem; }
}

@media (min-width: 701px) and (max-width: 1100px) {
    .audio-dock-inner {
        padding-inline: 16px;
        grid-template-columns: 48px minmax(120px,1fr) auto minmax(100px,.7fr) 72px 42px 30px;
        gap: 7px;
    }
    .audio-cover { width: 48px; height: 48px; }
    .audio-control { width: 38px; height: 38px; }
    .audio-control-primary { width: 48px; height: 48px; }
    .audio-dock-progress { grid-template-columns: 34px minmax(64px,1fr) 34px; gap: 5px; }
    .audio-queue-toggle { width: 42px; height: 42px; }
}

@media (max-width: 700px) {
    body { background-attachment: scroll; }
    .sub-header { display: block; }
    .sub-brand { width: 100%; min-height: 44px; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); transform: none; }
    .sub-brand > span { transform: none; }
    .site-nav-sub { display: grid; width: 100%; grid-template-columns: repeat(5,minmax(0,1fr)); overflow: visible; }
    .site-nav-sub .site-nav-item,
    .site-nav-sub .site-nav-item.active { min-width: 0; transform: none; box-shadow: none; }
    .site-nav-sub .site-nav-trigger { min-height: 48px; gap: 3px; padding-inline: 5px; font-size: .8rem; white-space: nowrap; }
    .site-nav-sub .site-nav-item.active .site-nav-trigger { min-height: 48px; }
    .site-nav-sub .site-nav-trigger > * { transform: none; }
    .site-nav-sub .site-nav-item.open > .site-nav-trigger > .site-nav-chevron { transform: rotate(180deg); }
    .site-nav-sub .site-nav-menu { position: fixed; top: 92px; right: 10px; left: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); transform: translateY(-8px); }
    .site-nav-sub .site-nav-item.open > .site-nav-menu { transform: translateY(0); }
    .site-nav-icon { width: 17px; height: 17px; }
    .container { padding: 18px 12px 34px; }
    .route-breadcrumb { margin-bottom: 12px; }
    .info-page { padding-bottom: 34px; }
    .info-page-head { margin-bottom: 16px; padding-bottom: 15px; }
    .fix-card, .contact-card { padding: 17px; }
    .fix-chips { display: block; }
    .fix-chips > div { display: flex; flex-wrap: wrap; overflow: visible; }
    .contact-row { grid-template-columns: 1fr; gap: 3px; }
    .contact-v a, .legal-text a { margin: 0 12px 4px 0; }
    .context-back { left: 12px; }
    .archive-toolbar { align-items: stretch; }
    .ui-search { flex-basis: 100%; }
    .ui-select-control,
    .ui-select-control.ui-select-wide { flex: 1 1 155px; min-width: 0; }
    .archive-filter-row { flex-direction: column; gap: 10px; }
    .ui-filter-group { width: 100%; align-items: flex-start; }
    .ui-filter-group > span { width: 40px; padding-top: 8px; }
    .song-catalog-row { grid-template-columns: 58px minmax(0,1fr) 38px 20px; gap: 10px; }
    .song-catalog-row > i { display: none; }
    .catalog-play { grid-column: 3; }
    .song-catalog-row > svg { grid-column: 4; }
    .performer-chip img,
    .perf-item img { width: 31px; height: 31px; }
    .event-entity-detail > .entity-hero,
    .character-entity-detail > .entity-hero,
    .voice-entity-detail > .entity-hero { grid-template-columns: 112px minmax(0,1fr); gap: 18px; min-height: 0; padding: 20px 16px; }
    .event-entity-detail .entity-meta { grid-template-columns: 1fr; }
    .relation-song-detail { padding-left: 12px; padding-right: 6px; }
    .relation-release { grid-template-columns: minmax(0,1fr) 38px; }
    .relation-release .performer-chip-list { grid-column: 1; }
    .relation-release > .track-play { grid-column: 2; grid-row: 1 / 3; }
    .footer-main { grid-template-columns: 1fr; }
    .footer-community { grid-column: auto; }
    .footer-cols { grid-template-columns: 1fr 1fr; }
    :root { --audio-dock-height: 98px; }
    body.audio-dock-active .home-layout { height: auto; min-height: calc(100vh - var(--audio-dock-height) - var(--audio-safe-bottom)); }
    .audio-dock-inner {
        position: relative;
        padding: 9px max(10px,env(safe-area-inset-right)) 5px max(10px,env(safe-area-inset-left));
        grid-template-columns: 42px minmax(0,1fr) 34px;
        grid-template-rows: 43px 40px;
        column-gap: 9px;
        row-gap: 1px;
    }
    .audio-cover { grid-column: 1; grid-row: 1; width: 42px; height: 42px; }
    .audio-cover > .audio-playing-bars { right: 2px; bottom: 2px; transform: scale(.82); transform-origin: right bottom; }
    .audio-dock-copy { grid-column: 2; grid-row: 1; }
    .audio-title { font-size: .78rem; }
    .audio-dock-vocalists,
    .audio-dock-artist { font-size: .75rem; }
    .audio-dock-controls { grid-column: 1 / 3; grid-row: 2; gap: 3px; justify-self: center; }
    .audio-control { width: 37px; height: 37px; }
    .audio-control-primary { width: 44px; height: 44px; margin-inline: 1px; }
    .audio-dock-progress {
        position: absolute;
        top: -10px;
        right: max(8px,env(safe-area-inset-right));
        left: max(8px,env(safe-area-inset-left));
        display: grid;
        height: 20px;
        grid-template-columns: 0 minmax(0,1fr) 0;
        gap: 0;
    }
    .audio-dock-progress > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .audio-dock-progress input { height: 20px; }
    .audio-volume { position: absolute; top: 13px; right: 42px; }
    .audio-volume input { display: none; }
    .audio-volume .audio-control { width: 32px; height: 32px; }
    .audio-queue-toggle { grid-column: 3; grid-row: 2; width: 38px; height: 38px; justify-self: end; }
    .audio-queue-toggle em { top: -2px; right: -3px; min-width: 17px; height: 17px; border-color: var(--ui-cobalt-deep); line-height: 13px; }
    .audio-dismiss { grid-column: 3; grid-row: 1; justify-self: end; }
    .audio-panel {
        right: 8px;
        bottom: calc(var(--audio-dock-height) + var(--audio-safe-bottom) + 8px);
        left: 8px;
        width: auto;
        max-height: min(45dvh,360px);
        border-radius: 13px;
    }
    .audio-panel-head { min-height: 50px; padding: 8px 9px 8px 15px; }
    .audio-queue-row,
    .audio-queue-play { min-height: 54px; }
    .audio-queue-remove { opacity: 1; }
    .audio-error { right: 10px; bottom: calc(100% + 8px); max-width: calc(100vw - 20px); }
}

@media (max-width: 480px) {
    .home-nav { flex-basis: auto; width: 100%; }
    .home-brand { left: 0; width: auto; max-width: 100%; padding-inline: 12px; }
    .home-brand .hl-zh { font-size: 1.45rem; }
    .site-nav-home .site-nav-trigger { padding-inline: 18px; }
    .site-nav-home .site-nav-menu button { padding-left: 30px; }
    .route-breadcrumb { font-size: .75rem; }
    .context-back { width: 40px; height: 40px; }
    .site-nav-sub .site-nav-trigger { flex-direction: column; gap: 1px; font-size: .75rem; }
    .site-nav-sub .site-nav-chevron { display: none; }
    .event-entity-detail > .entity-hero,
    .character-entity-detail > .entity-hero,
    .voice-entity-detail > .entity-hero { grid-template-columns: 88px minmax(0,1fr); gap: 15px; padding: 16px 13px; }
    .event-entity-detail .entity-intro h1,
    .character-entity-detail .entity-intro h1,
    .voice-entity-detail .entity-intro h1 { font-size: 1.28rem; }
    .event-entity-detail .entity-meta { display: none; }
    .footer-cols { grid-template-columns: 1fr; }
}

@media (max-height: 560px) and (max-width: 900px) {
    .audio-panel { max-height: min(50dvh,300px); }
}

@media (prefers-reduced-motion: reduce) {
    .audio-overflow-viewport.is-overflowing .audio-overflow-track {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        animation: none !important;
    }
    .site-nav-menu,
    .site-nav-menu button::before,
    .context-back,
    .event-catalog-row,
    .song-catalog-row,
    .performer-chip img,
    .audio-dock *,
    .audio-panel,
    .audio-queue-row { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* The skewed desktop navigation intentionally paints past its own boxes. Clip
   that horizontal paint without hiding the dropdowns below the header. */
@media (min-width: 701px) {
    .sub-header { overflow-x: clip; overflow-y: visible; }
}

/* ===== FAST-PATH AND SMALL-SCREEN FINISH ===== */
.event-catalog-row,
.song-catalog-row,
.news-row,
.album-database-grid > .album-card,
#tab-db-voice .va-grid > li {
    content-visibility: auto;
    contain-intrinsic-size: auto 92px;
}
.album-database-grid > .album-card { contain-intrinsic-size: auto 320px; }

@keyframes archiveShimmer {
    to { background-position-x: -220%; }
}
.archive-row-skeleton {
    display: grid;
    grid-template-columns: 88px minmax(120px, .45fr) minmax(180px, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 88px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--ui-line);
}
.archive-row-skeleton > span,
.archive-card-skeleton > span,
.archive-card-skeletons > span {
    border-radius: 4px;
    background: linear-gradient(100deg,#eef1f7 18%,#fff 38%,#eef1f7 58%);
    background-size: 220% 100%;
    animation: archiveShimmer 1.15s ease-in-out infinite;
}
.archive-row-skeleton > span:first-child { height: 58px; }
.archive-row-skeleton > span:nth-child(2) { height: 14px; }
.archive-row-skeleton > span:last-child { height: 34px; }
.archive-card-skeletons {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 12px;
}
.archive-card-skeletons > span { display: block; min-height: 104px; }
.archive-card-skeleton { display: grid; gap: 12px; padding-bottom: 12px; }
.archive-card-skeleton > span:first-child { aspect-ratio: 1; }
.archive-card-skeleton > span:last-child { width: 72%; height: 18px; }

.event-video-launch {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #111;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.event-video-launch::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(13,20,46,.04) 28%,rgba(13,20,46,.88));
}
.event-video-launch > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 520ms var(--ui-ease); }
.event-video:hover .event-video-launch > img { transform: scale(1.045); }
.event-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 50%;
    background: rgba(30,48,120,.68);
    transform: translate(-50%,-50%);
    transition: transform 260ms var(--ui-ease),background 160ms ease;
}
.event-video:hover .event-video-play { background: var(--ui-orange); transform: translate(-50%,-50%) scale(.92); }
.event-video-play svg { width: 23px; height: 23px; fill: currentColor; }

@media (max-width: 700px) {
    .container {
        padding-right: max(12px,env(safe-area-inset-right));
        padding-bottom: calc(34px + env(safe-area-inset-bottom));
        padding-left: max(12px,env(safe-area-inset-left));
    }
    .sub-header { padding-top: env(safe-area-inset-top); }
    .news-hero-grid {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-auto-columns: auto;
        justify-content: stretch;
        overflow: visible;
        padding: 2px 2px 12px;
    }
    .site-nav-trigger,
    .site-nav-menu button,
    .ui-filter-group button,
    .ui-pager button,
    .track-play { touch-action: manipulation; }
    .archive-filter-row { overflow: hidden; }
    .ui-filter-group { display: grid; grid-template-columns: 42px minmax(0,1fr); }
    .ui-filter-group > div {
        display: flex;
        max-width: 100%;
        flex-wrap: wrap;
        gap: 7px;
        overflow: visible;
        padding: 0 2px 5px;
    }
    .ui-filter-group button { flex: 0 1 auto; min-height: 40px; border-radius: 20px; white-space: normal; }
    .album-database-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .archive-row-skeleton { grid-template-columns: 70px minmax(0,1fr); min-height: 78px; gap: 12px; padding-inline: 9px; }
    .archive-row-skeleton > span:first-child { grid-row: 1 / 3; height: 54px; }
    .archive-row-skeleton > span:last-child { height: 22px; }
    .entity-tabs { flex-wrap: wrap; overflow: visible; }
    .entity-tabs button { flex: 1 1 calc(50% - 4px); min-width: 0; white-space: normal; }
    .entity-section { overflow-x: visible; }
    .song-version-list .data-table,
    .song-version-list .data-table tbody,
    .song-version-list .data-table tr,
    .song-version-list .data-table td,
    .song-entity-detail .entity-section > .data-table,
    .song-entity-detail .entity-section > .data-table tbody,
    .song-entity-detail .entity-section > .data-table tr,
    .song-entity-detail .entity-section > .data-table td { display: block; min-width: 0; width: 100%; }
    .song-version-list .data-table thead,
    .song-entity-detail .entity-section > .data-table thead { display: none; }
    .song-version-list .data-table tr,
    .song-entity-detail .entity-section > .data-table tr { padding: 10px 0; border-bottom: 1px solid var(--ui-line); }
    .song-version-list .data-table td,
    .song-entity-detail .entity-section > .data-table td {
        display: grid;
        grid-template-columns: 76px minmax(0,1fr);
        gap: 10px;
        align-items: start;
        padding: 7px 2px;
        border: 0;
    }
    .song-version-list .data-table td::before,
    .song-entity-detail .entity-section > .data-table td::before {
        content: attr(data-label);
        color: #69738c;
        font-size: .74rem;
        font-weight: 800;
    }
    .song-version-list .data-table td:hover,
    .song-entity-detail .entity-section > .data-table td:hover { background: transparent; }
    .song-performance-cast {
        display: grid;
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px 10px;
    }
    .song-performance-cast .performer-chip {
        min-width: 0;
        margin: 0;
        white-space: normal;
        text-align: left;
    }
    .song-performance-cast .performer-chip span {
        min-width: 0;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }
    .song-credit-version { grid-template-columns: minmax(0,1fr); gap: 13px; padding-block: 15px; }
    .song-credit-version dl { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 16px; }
    .lyrics-toolbar { align-items: stretch; flex-direction: column; }
    .lyrics-toolbar label { min-width: 0; }
    .lyrics-sheet { padding: 20px 0 28px; }
    .lyrics-sheet li { padding-right: 2px; font-size: .86rem; }
    .creator-catalog-row { grid-template-columns: 44px minmax(0,1fr) 18px; gap: 10px; padding-inline: 4px; }
    .creator-catalog-row .creator-monogram { width: 44px; height: 44px; }
    .creator-catalog-roles { grid-column: 2; }
    .creator-catalog-count { display: none; }
    .creator-catalog-row > svg { grid-column: 3; grid-row: 1 / 3; }
    .creator-work-list > button { grid-template-columns: 48px minmax(0,1fr) 18px; gap: 10px; }
    .creator-work-list img { width: 48px; height: 48px; }
    .creator-work-list time { display: none; }
}

@media (max-width: 480px) {
    .archive-toolbar { gap: 8px; }
    .archive-toolbar > .ui-select-control,
    .archive-toolbar > .ui-select-control.ui-select-wide { width: 100%; flex: 1 1 100%; }
    .ui-select-menu { max-height: min(286px,52vh); }
    .event-catalog-row { grid-template-columns: 76px minmax(0,1fr) 18px; gap: 4px 10px; }
    .event-catalog-cover { width: 76px; }
    .event-catalog-main b { font-size: .88rem; }
    .event-catalog-row > time,
    .event-catalog-main > span { font-size: .75rem; }
    .song-catalog-row { grid-template-columns: 50px minmax(0,1fr) 36px 18px; padding-inline: 8px; }
    .song-catalog-row > img { width: 50px; height: 50px; }
    .catalog-play { width: 36px; height: 36px; }
    .entity-section { padding-inline: 11px; }
    .entity-tabs { justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
    .entity-tabs button { flex: 1 1 calc(50% - 3px); min-width: 0; padding-inline: 8px; white-space: normal; }
    .character-entity-detail .entity-tabs,
    .voice-entity-detail .entity-tabs,
    .song-entity-detail .entity-tabs { overflow: visible; }
    .character-entity-detail .entity-tabs button,
    .voice-entity-detail .entity-tabs button,
    .song-entity-detail .entity-tabs button {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 5px;
        font-size: .72rem;
    }
    .creator-toolbar .filter-pill-group { width: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
    .creator-toolbar .filter-pill { min-width: 0; padding-inline: 5px; }
    .song-credit-version dl { grid-template-columns: minmax(0,1fr); }
    .footer-main { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 360px) {
    .song-performance-cast { grid-template-columns: minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .archive-row-skeleton > span,
    .archive-card-skeleton > span,
    .archive-card-skeletons > span { animation: none; }
}

/* ===== HORSE (PROTOTYPE REAL-HORSE) DATABASE ===== */
.horse-db-note { margin: 0 0 10px; color: #687086; font-size: .8rem; font-weight: 600; }
.horse-list { display: flex; flex-direction: column; border-top: 1px solid var(--ui-line); }
.horse-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ui-line);
    color: inherit;
    text-decoration: none;
}
.horse-row:hover { background: color-mix(in srgb,var(--ui-brown, #8c83ff) 5%, #fff); }
.horse-thumb {
    position: relative;
    display: block;
    width: 84px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 4px;
    background: #e8ebf5;
    box-shadow: 0 2px 8px rgba(22, 40, 92, .14);
}
.horse-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.horse-thumb i {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--ui-cobalt-deep);
    font-size: 1.5rem;
    font-weight: 900;
    font-style: normal;
}
.horse-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.horse-row-main b { color: var(--ui-navy); font-size: 1rem; font-weight: 900; }
.horse-row-ja { color: #687086; font-size: .8rem; font-weight: 650; overflow-wrap: anywhere; }
.horse-row-meta { color: #8a90a0; font-size: .74rem; font-weight: 600; overflow-wrap: anywhere; }
.horse-row-go { color: var(--ui-cobalt-deep); font-size: .76rem; font-weight: 800; white-space: nowrap; }
.horse-row-go em { font-style: normal; }
.horse-entity-detail > .entity-hero {
    isolation: isolate;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: clamp(22px, 4vw, 48px);
    min-height: 212px;
    padding: 26px clamp(24px, 4vw, 46px);
    border: 1px solid color-mix(in srgb,var(--entity-accent) 28%, #dfe3ee);
    border-radius: 7px;
    background: #fff;
    color: var(--ui-navy);
}
.horse-entity-detail > .entity-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    background:
        linear-gradient(154deg, var(--entity-accent) 0 29%, transparent 29.2%),
        linear-gradient(154deg, var(--entity-sub) 0 38%, transparent 38.2%);
}
.horse-entity-detail > .entity-hero::after {
    content: '';
    position: absolute;
    right: -3%;
    bottom: -30%;
    z-index: -1;
    width: 32%;
    aspect-ratio: 1;
    border: 24px solid color-mix(in srgb,var(--entity-accent) 9%, transparent);
    transform: rotate(22deg);
}
.horse-entity-detail .entity-cover {
    width: 100%;
    border: 3px solid #fff;
    border-radius: 4px;
    box-shadow: 7px 8px 0 var(--entity-sub), 0 10px 24px rgba(22, 40, 92, .16);
}
.horse-entity-detail .horse-cover { max-width: 200px; aspect-ratio: 4 / 3; background: #eef1f7; }
.horse-entity-detail .horse-cover img { object-position: center; }
.horse-entity-detail .entity-kind { background: var(--entity-accent); color: #fff; }
.horse-entity-detail .entity-intro h1 { color: var(--ui-navy); font-size: clamp(1.55rem, 3.2vw, 2.55rem); }
.horse-entity-detail .entity-reading { color: #66708a; }
.horse-entity-detail .entity-meta { margin-top: 15px; }
.horse-entity-detail .entity-meta > div { border-color: #dfe3ee; }
.horse-entity-detail .entity-meta dt { color: #69738c; }
.horse-entity-detail .entity-meta dd { color: var(--ui-navy); }
.horse-entity-detail .entity-tabs button.active { color: var(--entity-accent); box-shadow: inset 0 -3px 0 var(--entity-sub); }
.horse-badge-line { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.horse-badge {
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--entity-accent) 30%, #dfe3ee);
    border-radius: 999px;
    background: #f5f7fd;
    color: #46506b;
    font-size: .76rem;
    font-weight: 750;
}
.horse-badge-death { border-color: rgba(185, 76, 0, .28); background: #fdf3ec; color: #8a4a28; }
.horse-wins { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.horse-win-medal {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .02em;
}
.horse-win-g1 { background: linear-gradient(105deg, #a84515, #e08a3c); color: #fff; }
.horse-win-g2 { background: linear-gradient(105deg, #23439c, #4d6fd8); color: #fff; }
.horse-win-g3 { background: linear-gradient(105deg, #2e7d46, #5aa976); color: #fff; }
.horse-paragraph { margin: 0 0 10px; color: var(--ui-navy); font-size: .92rem; line-height: 1.85; overflow-wrap: anywhere; }
.horse-table-wrap { overflow-x: auto; }
.horse-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: .8rem;
}
.horse-table th,
.horse-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--ui-line);
    text-align: left;
    white-space: nowrap;
}
.horse-table thead th {
    color: #69738c;
    font-size: .76rem;
    font-weight: 800;
    background: #f1f4fc;
}
.horse-table tbody tr:hover { background: #f7f9fd; }
.horse-table tbody tr.sum td { font-weight: 850; color: var(--ui-cobalt-deep); background: #eef3ff; }
.horse-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.horse-table td.beaten { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: #687086; }
.horse-grade {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 850;
}
.horse-grade-g1 { background: linear-gradient(105deg, #a84515, #e08a3c); color: #fff; }
.horse-grade-g2 { background: linear-gradient(105deg, #23439c, #4d6fd8); color: #fff; }
.horse-grade-g3 { background: linear-gradient(105deg, #2e7d46, #5aa976); color: #fff; }
.horse-awards { display: flex; flex-wrap: wrap; gap: 8px; }
.horse-award-chip {
    padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--entity-accent) 26%, #dfe3ee);
    border-radius: 999px;
    background: #f5f7fd;
    color: var(--ui-cobalt-deep);
    font-size: .8rem;
    font-weight: 800;
}
.horse-children,
.horse-pedigree-links { margin: 0; padding: 0; list-style: none; }
.horse-children li {
    position: relative;
    margin: 0 0 7px;
    padding-left: 16px;
    color: var(--ui-navy);
    font-size: .88rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}
.horse-children li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--ui-orange);
    transform: rotate(45deg);
}
.horse-pedigree-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.horse-pedigree-links a,
.horse-sources a { color: var(--ui-cobalt-deep); font-size: .84rem; font-weight: 750; text-decoration: none; }
.horse-pedigree-links a:hover,
.horse-sources a:hover { text-decoration: underline; }
.horse-sources { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.horse-back {
    margin: 4px 0 16px;
    border: 0;
    background: transparent;
    color: var(--ui-cobalt-deep);
    font-size: .82rem;
    font-weight: 800;
    cursor: pointer;
}
.horse-back:hover { color: var(--ui-orange-deep); }
.horse-expand-btn {
    display: block;
    margin: 12px auto 0;
    padding: 8px 22px;
    border: 1.5px solid color-mix(in srgb, var(--entity-accent) 55%, #dfe3ee);
    border-radius: 999px;
    background: #fff;
    color: color-mix(in srgb, var(--entity-accent) 78%, #1c2b4a);
    font-size: .82rem;
    font-weight: 750;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.horse-expand-btn:hover {
    background: var(--entity-accent);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--entity-accent) 38%, transparent);
    transform: translateY(-1px);
}
.news-refresh-btn {
    margin-left: 10px;
    padding: 6px 18px;
    border: 1.5px solid color-mix(in srgb, var(--brand, #3157ed) 55%, #dfe3ee);
    border-radius: 999px;
    background: #fff;
    color: var(--brand, #3157ed);
    font-size: .82rem;
    font-weight: 750;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.news-refresh-btn:hover:not(:disabled) {
    background: var(--brand, #3157ed);
    color: #fff;
}
.news-refresh-btn:disabled {
    opacity: .55;
    cursor: default;
}
.horse-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    margin-left: 12px;
    padding: 7px 14px;
    border: 1.5px solid color-mix(in srgb, var(--entity-accent) 55%, #dfe3ee);
    border-radius: 999px;
    background: #fff;
    color: color-mix(in srgb, var(--entity-accent) 78%, #1c2b4a);
    font-size: .82rem;
    font-weight: 750;
    letter-spacing: normal;
    text-decoration: none;
    vertical-align: middle;
    transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.horse-link-chip em { font-style: normal; }
.horse-link-chip:hover {
    background: var(--entity-accent);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--entity-accent) 38%, transparent);
    transform: translateY(-1px);
}
.hero-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 16px;
}
.hero-chip-row .performer-chip,
.hero-chip-row .horse-link-chip { margin: 0; }
@media (max-width: 640px) {
    .horse-entity-detail > .entity-hero { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; min-height: 0; padding: 20px 16px; }
    .horse-entity-detail .horse-cover { max-width: 120px; }
    .horse-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; padding-inline: 8px; }
    .horse-thumb { width: 64px; }
    .horse-cover > span { font-size: 2.2rem; }
}
@media (max-width: 420px) {
    .horse-row { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
    .horse-thumb { width: 56px; }
    .horse-row-go { display: none; }
    .horse-win-medal { font-size: .75rem; padding: 4px 9px; }
}

.entity-section-actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 900px) {
    .ui-filter-group.fix-chips { display: block; }
    .ui-filter-group.fix-chips > div { display: flex; max-width: none; flex-wrap: wrap; overflow: visible; }

    /* Event setlists stay in one readable vertical stream on phones and tablets. */
    .event-entity-detail .setlist-frame { overflow: visible; }
    .event-entity-detail .setlist-frame .setlist-table,
    .event-entity-detail .data-table.setlist-table,
    .event-entity-detail .setlist-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }
    .event-entity-detail .setlist-table thead { display: none; }
    .event-entity-detail .setlist-table tbody tr {
        display: grid;
        grid-template-columns: 32px minmax(0,1fr);
        gap: 0 8px;
        padding: 9px 0 11px;
        border-bottom: 1px solid var(--ui-line);
        background: transparent;
    }
    .event-entity-detail .setlist-table tbody tr:hover { background: transparent; }
    .event-entity-detail .setlist-frame .setlist-table td,
    .event-entity-detail .data-table.setlist-table td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .event-entity-detail .setlist-frame .setlist-table td.setlist-no,
    .event-entity-detail .data-table.setlist-table td.setlist-no {
        grid-column: 1;
        width: auto;
        padding-top: 12px;
        color: var(--text-3);
        text-align: right;
        font-size: .76rem;
        font-weight: 800;
    }
    .event-entity-detail .setlist-frame .setlist-table td.setlist-song,
    .event-entity-detail .data-table.setlist-table td.setlist-song {
        grid-column: 2;
        min-width: 0;
        font-size: .9rem;
        line-height: 1.45;
    }
    .event-entity-detail .setlist-song-link,
    .event-entity-detail button.setlist-song-link {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        white-space: normal;
    }
    .event-entity-detail .setlist-frame .setlist-table td.setlist-perf,
    .event-entity-detail .data-table.setlist-table td.setlist-perf,
    .event-entity-detail .setlist-frame .setlist-table td.setlist-src,
    .event-entity-detail .data-table.setlist-table td.setlist-src {
        grid-column: 1 / -1;
        margin: 3px 0 0 40px;
        padding: 0;
        border: 0;
        font-size: .8rem;
        line-height: 1.65;
    }
    .event-entity-detail .setlist-perf::before { content: '演唱'; margin-right: 9px; color: var(--text-3); font-weight: 800; }
    .event-entity-detail .setlist-src::before { content: '歌曲信息'; margin-right: 9px; color: var(--text-3); font-weight: 800; }
    .event-entity-detail .setlist-src:empty { display: none; }
    .event-entity-detail .perf-item,
    .event-entity-detail .setlist-performer-link,
    .event-entity-detail .guest-performer { max-width: 100%; white-space: normal; }
}