:root {
    --text-main: #0f172a;
    --text-muted: rgba(15, 23, 42, .62);
    --surface-glass: rgba(255, 255, 255, .45);
    --surface-panel: rgba(255, 255, 255, .24);
    --surface-song: rgba(255, 255, 255, .60);
    --surface-song-hover: rgba(255, 255, 255, .93);
    --pink-soft: rgba(252, 231, 243, .88);
    --pink-medium: rgba(251, 207, 232, .90);
    --pink-strong: #f472b6;
    --border-glass: rgba(255, 255, 255, .28);
    --border-soft: rgba(15, 23, 42, .08);
    --border-pink: rgba(244, 114, 182, .40);
    --scan-active: rgba(200, 228, 232, .55);
    --sc-yellow: #e5bd16;
    --shadow-panel: 0 30px 80px rgba(15, 23, 42, .20);
    --shadow-hover: 0 12px 30px rgba(15, 23, 42, .12);
    --shadow-pink: 0 14px 30px rgba(219, 39, 119, .28);
    --ease-ui: cubic-bezier(.2, .8, .2, 1);
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-modal: 220ms;
    --duration-flip: 600ms;
    --ink: var(--text-main);
    --muted: var(--text-muted);
    --line: var(--border-soft);
    --white-glass: var(--surface-glass);
    --panel-glass: var(--surface-panel);
    --pink: var(--pink-medium);
    --blue: #2a60b2;
    --radius: 28px;
    --shadow: var(--shadow-panel);
    --white-text-shadow: 0 1px 2px rgba(15, 23, 42, .2);
    --strong-text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

html, body { width: 100%; min-height: 100%; }
body { color: var(--ink); overflow-x: hidden; background: #aeb6c3; }
button, select, input { color: inherit; }
button { border: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sidebar-action-icon { width: 22px; height: 22px; display: block; transition: transform var(--duration-normal) var(--ease-ui); }

.tag-cloud-stack { display: grid; grid-template-rows: auto 1fr; align-items: start; justify-items: center; width: 100%; height: 100%; min-height: 0; }
.tag-cloud-wrap { position: relative; width: min(100%, 420px); height: 100%; min-height: 0; max-width: 100%; max-height: 100%; overflow: hidden; opacity: 1; align-self: center; transition: opacity 220ms ease; }
.tag-cloud-wrap.is-fading { opacity: 0; }
.tag-cloud-progress { width: min(100%, 420px); max-width: 100%; height: 6px; margin-bottom: 14px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.tag-cloud-progress-bar { width: 100%; height: 100%; background: rgba(255, 255, 255, .75); transform-origin: right center; transition: width 180ms linear; }
.tag-cloud-container { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tag-cloud-item {
    --sphere-transform: translate3d(-50%, -50%, 0) scale(1);
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 2px 4px;
    white-space: nowrap;
    color: #fff;
    background: transparent;
    text-shadow: var(--strong-text-shadow), 0 0 5px rgba(15, 23, 42, .25);
    cursor: pointer;
    will-change: transform, opacity;
    transform: var(--sphere-transform) scale(1);
    transform-origin: 50% 50%;
    transition: color 200ms ease, text-shadow 200ms ease, filter 200ms ease;
}
.tag-cloud-item.sc-glow { color: rgba(248, 113, 113, .85); text-shadow: 0 0 8px rgba(248, 113, 113, .35), 0 0 16px rgba(252, 165, 165, .25); }
.tag-cloud-item:hover { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .6); transform: var(--sphere-transform) scale(1.1); }
.tag-cloud-item:focus-visible { z-index: 9999 !important; }

.danmaku-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
.danmaku-item {
    position: absolute;
    left: 100%;
    padding: 0;
    white-space: nowrap;
    color: rgba(255, 255, 255, .8);
    background: transparent;
    cursor: pointer;
    text-shadow: var(--strong-text-shadow);
    animation-name: danmaku-flow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transition: color 200ms ease, text-shadow 200ms ease, font-size 200ms ease;
    will-change: transform;
}
.danmaku-item:hover { animation-play-state: paused; color: #fff; }
.danmaku-item.sc-glow { color: rgba(248, 113, 113, .85); text-shadow: 0 0 8px rgba(248, 113, 113, .35), 0 0 16px rgba(252, 165, 165, .25); }
.danmaku-item.sc-glow:hover { text-shadow: 0 0 12px rgba(248, 113, 113, .5), 0 0 22px rgba(252, 165, 165, .35); }
.layout-danmaku.is-paused .danmaku-item { animation-play-state: paused !important; }
@keyframes danmaku-flow {
    0% { transform: translate(0); animation-timing-function: cubic-bezier(.55, 0, .75, .2); }
    20% { transform: translate(var(--mid-start-x)); animation-timing-function: linear; }
    80% { transform: translate(var(--mid-end-x)); animation-timing-function: cubic-bezier(.55, 0, .75, .2); }
    100% { transform: translate(calc(-100vw - 100%)); }
}

:where(button, a, input, select, [tabindex]):focus-visible {
    outline: 2px solid rgba(244, 114, 182, .75);
    outline-offset: 2px;
}

:where(button, input, select):disabled {
    cursor: not-allowed;
    opacity: .52;
}

.app-root {
    --background-poster:
        radial-gradient(circle at 18% 15%, rgba(242, 216, 232, .52), transparent 33%),
        radial-gradient(circle at 82% 78%, rgba(190, 205, 231, .5), transparent 36%),
        linear-gradient(135deg, #aeb7c3, #9ba6b5 55%, #b5bec8);
    min-height: 100vh;
    width: 100%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.background-fallback, .background-video, .background-shade {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

.background-fallback {
    z-index: -4;
    background-image: var(--background-poster);
    background-color: #aeb7c3;
    background-position: center;
    background-size: cover;
}

.background-video { z-index: -3; object-fit: cover; object-position: center; }
.background-shade { z-index: -2; background: rgba(5, 10, 18, .24); pointer-events: none; }
#sakura-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

.avatar-pulse { position: relative; width: 76px; height: 76px; isolation: isolate; }
.avatar-pulse::before, .avatar-pulse::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border: 2px solid rgba(255, 123, 173, .72);
    border-radius: 50%;
    animation: avatar-live-pulse 2.6s ease-out infinite;
    pointer-events: none;
}
.avatar-pulse::after { animation-delay: 1.3s; }
@keyframes avatar-live-pulse {
    0% { transform: scale(.88); opacity: .85; }
    70% { opacity: .10; }
    100% { transform: scale(1.32); opacity: 0; }
}

.app-shell { flex: 1; position: relative; z-index: 1; min-height: 0; }
.app-cards { flex: 1; width: 100%; min-height: 0; }
.glass {
    background: var(--panel-glass);
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: var(--shadow);
}
.app-card { min-width: 0; min-height: 0; }
.desktop-only { display: none; }
.mobile-only { display: block; }

.main-card {
    --glass-bg: transparent;
    --glass-radius: 28px;
    --glass-border: 1px solid rgba(255, 255, 255, .2);
    --glass-shadow: 0 30px 80px rgba(15, 23, 42, .2);
    --glass-padding: 24px;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: rgb(15, 23, 42);
    text-shadow: var(--strong-text-shadow);
    box-shadow: var(--glass-shadow, 0 20px 60px rgba(15, 23, 42, .15));
    backdrop-filter: none;
    background: var(--glass-bg, rgba(255, 255, 255, .45));
    border: var(--glass-border, 1px solid rgba(255, 255, 255, .4));
    border-radius: var(--glass-radius, 18px);
    padding: var(--glass-padding, 20px);
}

.main-body { min-width: 0; }
.main-body { transition: opacity 120ms ease; }
.main-body.is-leaving { opacity: 0; }
.main-body.is-entering { animation: content-enter 180ms ease both; }
.song-list.results-refresh { animation: results-refresh 140ms ease both; }
@keyframes content-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes results-refresh { from { opacity: .86; } to { opacity: 1; } }
.app-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.app-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

.mobile-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(44px, 10.5vw, 92px) clamp(60px, 13.5vw, 118px) clamp(54px, 12vw, 105px);
    column-gap: clamp(8px, 1.8vw, 16px);
    row-gap: 0;
    margin-bottom: clamp(10px, 2vw, 18px);
}
.search-control {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 14px;
    background: rgba(255, 255, 255, .52);
    padding: 0 13px;
    transition: background-color var(--duration-normal) ease, border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
.search-control svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .48; }
.search-control input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; padding: 11px 0; font-size: 14px; }
.search-control input::placeholder { color: rgba(15, 23, 42, .48); }
.search-control:focus-within, .sidebar-select:focus, .mobile-filters select:focus {
    background-color: rgba(255, 255, 255, .68);
    border-color: rgba(244, 114, 182, .55);
    box-shadow: 0 0 0 3px rgba(244, 114, 182, .12);
}

.mobile-search {
    grid-column: 1 / -1;
    min-height: clamp(48px, 10vw, 88px);
    margin-bottom: clamp(18px, 4.55vw, 40px);
    border-radius: clamp(16px, 3.2vw, 28px);
    padding-inline: clamp(14px, 3.8vw, 33px);
}
.mobile-search input { padding: 0; font-size: clamp(16px, 3.9vw, 34px); }
.mobile-search svg { width: clamp(18px, 3.2vw, 28px); height: clamp(18px, 3.2vw, 28px); }
.mobile-actions { display: contents; }
.mobile-actions button, .mobile-sc-filter, .mobile-filters select {
    min-width: 0;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .5);
    border-radius: 12px;
    padding: 9px 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.mobile-actions button {
    min-height: clamp(48px, 9.1vw, 80px);
    border-radius: clamp(14px, 3vw, 26px);
    font-size: clamp(14px, 2.75vw, 24px);
}
#mobileRandomSong, #mobileRandomCards {
    border-color: rgba(244, 114, 182, .32);
    background: linear-gradient(135deg, rgba(252, 231, 243, .95), rgba(251, 207, 232, .9) 60%, rgba(249, 168, 212, .78));
    box-shadow: 0 8px 20px rgba(219, 39, 119, .12);
}
#mobileRandomCards { border: none; box-shadow: 0 8px 20px rgba(219, 39, 119, .14), 0 0 0 1px rgba(244, 114, 182, .32); }
#mobileProfileButton { border-color: rgba(244, 114, 182, .58); background: rgba(252, 231, 243, .62); }
#mobileLayoutToggle { border-color: rgba(244, 114, 182, .38); background: rgba(252, 231, 243, .46); }
.mobile-action-icon { width: clamp(22px, 4.6vw, 40px); height: clamp(22px, 4.6vw, 40px); display: block; margin: auto; }
.mobile-sc-filter {
    grid-column: 1;
    width: 100%;
    min-height: clamp(42px, 7.1vw, 62px);
    margin-top: clamp(8px, 1.8vw, 16px);
    border-radius: clamp(14px, 2.8vw, 24px);
    color: #5f3650;
    font-size: clamp(14px, 2.75vw, 24px);
    border-color: rgba(244, 114, 182, .42);
    background: rgba(252, 231, 243, .36);
}
.mobile-sc-filter.active { color: #7c2d5d; background: var(--pink-medium); border-color: rgba(244, 114, 182, .82); box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 8px 20px rgba(219, 39, 119, .2); }
.mobile-filters {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.55vw, 14px);
    margin-top: clamp(8px, 2vw, 18px);
}
.mobile-filters select {
    appearance: auto;
    min-height: clamp(44px, 8.8vw, 77px);
    border-radius: clamp(14px, 2.8vw, 24px);
    padding-inline: clamp(10px, 3.8vw, 33px) clamp(24px, 3.8vw, 33px);
    font-weight: 500;
    font-size: clamp(14px, 2.75vw, 24px);
    background-color: rgba(255, 255, 255, .34);
}
.mobile-summary { display: none; }

.song-list { display: grid; gap: 8px; }
.song-row {
    min-width: 0;
    border-radius: 14px;
    padding: 13px 14px;
    background: var(--surface-song);
    border: 1px solid rgba(15, 23, 42, .06);
    transition: transform var(--duration-normal) ease, box-shadow var(--duration-normal) ease, background-color var(--duration-normal) ease, border-color var(--duration-normal) ease;
    cursor: pointer;
    overflow: hidden;
}
.song-row:active { transform: scale(.985); background: rgba(255, 255, 255, .9); }
.song-row.highlighted { background: rgba(254, 224, 238, .96); box-shadow: 0 0 0 2px rgba(239, 121, 177, .46), 0 14px 30px rgba(97, 41, 72, .18); }
.song-mobile { display: grid; gap: 8px; }
.song-desktop { display: none; }
.song-mobile-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
.song-title-text { font-size: 16px; font-weight: 600; word-break: break-word; }
.song-meta { display: flex; flex-wrap: wrap; gap: 7px 12px; color: rgba(15, 23, 42, .6); font-size: 13px; }
.song-meta span + span::before { content: none; }
.song-remark { color: rgba(15, 23, 42, .6); font-size: 13px; line-height: 1.6; padding-top: 2px; }
.badge { display: inline-flex; align-items: center; white-space: nowrap; padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.45; }
.badge-new { color: #b91c1c; background: rgba(239, 68, 68, .16); }
.badge-sc { color: #fff; background: var(--blue); box-shadow: 0 3px 9px rgba(42, 96, 178, .22); }
.empty-state { padding: 72px 20px; text-align: center; border-radius: 14px; background: rgba(255, 255, 255, .5); color: var(--muted); }
.load-more { display: block; margin: 14px auto 0; padding: 10px 22px; border-radius: 999px; background: rgba(255, 255, 255, .7); cursor: pointer; }

.layout-tile { overflow: hidden; padding: 16px 0 0; }
.layout-tile .song-list { width: 100%; height: 100%; display: block; }
.monitor-shell {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(148, 156, 166, .45);
    border-radius: 18px;
    background: rgba(225, 228, 232, .72);
    box-shadow: inset 0 0 24px rgba(120, 126, 132, .16);
}
.monitor-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(11, minmax(30px, 1fr));
    gap: 8px;
}
.monitor-unit {
    min-width: 0;
    min-height: 30px;
    display: flex;
    align-items: center;
    padding: 6px 8px;
    overflow: hidden;
    border: 1px solid rgba(180, 186, 192, .55);
    border-radius: 8px;
    background: rgba(248, 249, 250, .8);
    color: rgba(70, 76, 82, .8);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.unit-inner { display: flex; align-items: center; min-width: 0; width: 100%; }
.unit-text { display: block; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 400; line-height: normal; }
.unit-text.sc-glow { color: rgba(214, 82, 104, .86); text-shadow: none; }
.monitor-unit:hover { transform: none; color: rgba(45, 50, 56, .96); border-color: rgba(120, 130, 140, .32); background: rgba(248, 249, 250, .9); box-shadow: none; }
.monitor-unit.active { transform: none; background: var(--scan-active); border-color: rgba(120, 130, 140, .7); animation: monitor-flash .45s ease; }
.monitor-unit.is-scanning { background: rgba(200, 228, 232, .62); border-color: rgba(125, 171, 177, .68); }
.monitor-unit.is-entering { animation: monitor-enter 360ms cubic-bezier(.2, .8, .2, 1) both; }
.monitor-unit.is-typing .unit-text::after { content: ""; display: inline-block; height: 1em; margin-left: 2px; border-right: 1px solid currentColor; vertical-align: -.12em; animation: monitor-caret .55s step-end infinite; }
.monitor-scanline {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, transparent, rgba(157, 220, 228, .34), transparent);
}
.monitor-scanline.is-row { animation: monitor-scan-x 800ms linear both; }
.monitor-scanline.is-column { background: linear-gradient(180deg, transparent, rgba(157, 220, 228, .34), transparent); animation: monitor-scan-y 800ms linear both; }
@keyframes monitor-flash { from { background: rgba(200, 228, 232, .62); } to { background: rgba(248, 249, 250, .8); } }
@keyframes monitor-enter { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes monitor-caret { 50% { opacity: 0; } }
@keyframes monitor-scan-x {
    from { opacity: 0; transform: translateX(var(--scan-from)); }
    12%, 82% { opacity: 1; }
    to { opacity: 0; transform: translateX(var(--scan-to)); }
}
@keyframes monitor-scan-y {
    from { opacity: 0; transform: translateY(var(--scan-from)); }
    12%, 82% { opacity: 1; }
    to { opacity: 0; transform: translateY(var(--scan-to)); }
}

.mode-song {
    border: 0;
    color: #df5967;
    background: transparent;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.mode-song.highlighted { color: #a620b5; text-shadow: 0 0 14px rgba(239, 121, 177, .9); }

.app-footer {
    position: relative;
    z-index: 1;
    padding: 12px 16px 18px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 2px rgba(15, 23, 42, .42);
}

.toast {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 100;
    max-width: min(88vw, 520px);
    transform: translate(-50%, calc(-50% + 6px));
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .88);
    color: var(--text-main);
    box-shadow: 0 14px 38px rgba(15, 23, 42, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--duration-normal) ease, transform var(--duration-normal) var(--ease-ui), visibility 0s linear var(--duration-normal);
    text-align: center;
    font-size: 14px;
}
.toast.visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition-delay: 0s; }
.toast.is-leaving { opacity: 0; transform: translate(-50%, calc(-50% - 4px)); transition-duration: 180ms; }

.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) var(--ease-ui), visibility 0s linear var(--duration-normal); }
.modal.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.modal.is-closing { visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(12, 20, 32, .5); backdrop-filter: none; }
#randomModal { padding: 6px; }
.modal-panel {
    position: relative;
    width: min(760px, 100%);
    max-height: min(760px, calc(100vh - 36px));
    overflow: auto;
    border: 1px solid rgba(170, 176, 182, .6);
    border-radius: 20px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .15);
    padding: 24px;
    opacity: 0;
    transform: translateY(6px) scale(.985);
    transition: transform var(--duration-modal) var(--ease-ui), opacity var(--duration-normal) ease;
}
.modal.is-open .modal-panel { opacity: 1; transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: rgba(15, 23, 42, .66); font-size: 24px; cursor: pointer; transition: color var(--duration-normal) ease, background-color var(--duration-normal) ease; }
.modal-close:hover, .modal-close:focus-visible { color: var(--text-main); background: rgba(15, 23, 42, .06); }
.modal-open { overflow: hidden; }
.song-detail-panel { width: min(420px, 90vw); padding: 24px 22px 20px; border-radius: 16px; text-align: center; overflow: visible; }
.song-detail-panel h2 { margin: 12px 36px 8px; font-size: 28px; line-height: 1.25; overflow-wrap: anywhere; }
.song-detail-singer { margin: 0; color: rgba(15, 23, 42, .68); font-size: 14px; }
.song-detail-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 18px; }
.song-detail-tags .detail-tag { padding: 4px 10px; border: 1px solid rgba(170, 176, 182, .5); border-radius: 999px; background: rgba(243, 244, 246, .9); color: rgba(15, 23, 42, .66); font-size: 12px; }
.song-detail-tags .badge-sc { color: #5d4800; background: var(--sc-yellow); box-shadow: none; }
.song-detail-remark { margin: -6px 0 16px; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.song-detail-copy { width: 100%; min-height: 46px; border: 1px solid rgba(170, 176, 182, .6); border-radius: 12px; background: rgba(247, 247, 247, .96); font-weight: 700; cursor: pointer; transition: background-color var(--duration-normal) ease, border-color var(--duration-normal) ease; }
.song-detail-copy:hover, .song-detail-copy:focus-visible { border-color: rgba(120, 130, 140, .72); background: #fff; }
.profile-modal-head { display: flex; align-items: center; gap: 16px; padding-right: 42px; }
.profile-modal-head img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pink-strong); }
.profile-modal-head p, .random-heading p { margin: 0 0 4px; color: var(--pink-strong); letter-spacing: .18em; font-size: 10px; font-weight: 700; }
.profile-modal-head h2, .random-heading h2 { margin: 0; font-size: 23px; }
.profile-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.profile-section { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(15, 23, 42, .08); }
.profile-section h3 { margin: 0 0 8px; font-size: 14px; }
.profile-section p { margin: 0; color: rgba(15, 23, 42, .68); white-space: pre-line; line-height: 1.7; font-size: 13px; }
.profile-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.profile-links a { color: #7c2d5d; background: #fce7f3; border-radius: 999px; padding: 8px 13px; text-decoration: none; font-size: 12px; font-weight: 600; }

.random-panel {
    width: calc(100vw - 12px);
    max-width: none;
    height: calc(100vh - 12px);
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, .96);
    border-radius: 30px;
    background: rgba(250, 250, 251, .98);
    padding: clamp(24px, 3vw, 58px) clamp(20px, 2.2vw, 42px);
}
.random-panel .modal-close { top: clamp(14px, 2vw, 30px); right: clamp(14px, 2vw, 30px); }
.random-heading {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: clamp(28px, 3.1vh, 40px);
    padding: 0 48px;
    text-align: center;
}
.random-heading h2 { margin: 0; font-size: clamp(30px, 2.75vw, 50px); font-weight: 800; line-height: 1.15; letter-spacing: .02em; }
.random-heading p { margin: 0; color: rgba(100, 110, 126, .72); font-size: clamp(15px, 1.35vw, 25px); font-weight: 400; letter-spacing: 0; }
.random-heading button {
    min-height: 46px;
    margin-top: 8px;
    padding: 8px 24px;
    border: 2px solid rgba(183, 194, 210, .72);
    border-radius: 999px;
    color: rgba(35, 45, 61, .88);
    background: rgba(255, 255, 255, .78);
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    transition: border-color var(--duration-normal) ease, background-color var(--duration-normal) ease, transform var(--duration-normal) var(--ease-ui);
}
.random-heading button:hover, .random-heading button:focus-visible { border-color: rgba(135, 151, 173, .82); background: #fff; }
.random-heading button:active { transform: scale(.98); transition-duration: 80ms; }
.random-cards-grid {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: clamp(18px, 3vw, 38px) clamp(14px, 3vw, 34px);
}
.random-card {
    --card-line: rgba(255, 255, 255, .94);
    --card-glow: rgba(15, 23, 42, .12);
    --random-deal-x: -12px;
    min-width: 0;
    aspect-ratio: 2 / 3;
    perspective: 1200px;
    cursor: pointer;
    transition: transform var(--duration-normal) var(--ease-ui);
}
.random-card.is-dealing {
    animation: random-card-deal 320ms cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: var(--random-card-delay);
}
@keyframes random-card-deal {
    0% { opacity: 0; transform: translate3d(var(--random-deal-x), 18px, 0) rotate(-6deg) scale(.94); }
    72% { opacity: 1; transform: translate3d(1px, -1px, 0) rotate(.8deg) scale(1.01); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
.random-card.flipped.is-standard { --card-line: #62adff; --card-glow: rgba(74, 158, 255, .42); }
.random-card.flipped.has-sc { --card-line: #f0ce67; --card-glow: rgba(238, 190, 61, .42); }
.random-card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform var(--duration-flip) cubic-bezier(.2, .7, .2, 1); }
.random-card.flipped .random-card-inner { transform: rotateY(180deg); }
.random-card-face { position: absolute; inset: 0; overflow: hidden; border-radius: 0; backface-visibility: hidden; border: 2px solid var(--card-line); box-shadow: 0 0 24px var(--card-glow); transition: border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease; }
.random-card-front { background: #e8b0c9; }
.random-card-front img, .random-card-placeholder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.random-card-back { transform: rotateY(180deg); padding: clamp(10px, 3.5vw, 16px) clamp(7px, 2.6vw, 14px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(7px, 2vw, 12px); text-align: center; background: #fff; color: #242a32; }
.random-card-back h3 { width: 100%; margin: 0; font-size: clamp(14px, 4.2vw, 19px); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.random-card-meta { display: flex; flex: 0 1 auto; flex-direction: column; align-items: center; gap: clamp(5px, 1.6vw, 8px); width: 100%; min-height: 0; }
.random-card-singer { margin: 0; color: rgba(64, 70, 79, .76); font-size: clamp(10px, 3vw, 12px); line-height: 1.4; }
.random-card-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.random-card-tag { padding: 2px clamp(6px, 2.2vw, 10px); border: 1px solid rgba(139, 146, 154, .34); border-radius: 999px; background: #f3f4f4; color: rgba(58, 64, 71, .84); font-size: clamp(9px, 2.8vw, 11px); line-height: 1.25; }
.random-card-sc { margin-top: 0; padding: 2px clamp(7px, 2.2vw, 10px); border-radius: 999px; background: #3c86a8; color: #10283b; font-size: clamp(10px, 3vw, 11px); font-weight: 800; line-height: 1.25; }
.random-card-remark { display: -webkit-box; margin: 0; overflow: hidden; color: rgba(64, 70, 79, .72); font-size: clamp(9px, 2.7vw, 11px); line-height: 1.35; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.random-card-copy { width: auto; min-height: auto; margin-top: 4px; padding: clamp(6px, 2vw, 8px) clamp(8px, 2.6vw, 12px); border: 1px solid rgba(171, 176, 181, .58); border-radius: 8px; color: #2d333b; background: #f7f7f7; cursor: pointer; font-size: clamp(10px, 3vw, 12px); font-weight: 600; transition: border-color var(--duration-normal) ease, background-color var(--duration-normal) ease, transform var(--duration-normal) var(--ease-ui); }
.random-card-copy:hover, .random-card-copy:focus-visible { border-color: rgba(120, 130, 140, .72); background: #fff; }
.random-card-copy:active { transform: scale(.98); transition-duration: 80ms; }
.random-card-placeholder { display: none; }

@media (min-width: 900px) {
    html, body { height: 100%; overflow: hidden; }
    .app-root { height: 100vh; min-height: 0; }
    .desktop-only { display: flex; }
    .mobile-only { display: none; }
    .app-shell { display: flex; align-items: center; justify-content: center; padding: 32px; }
    .app-cards { width: min(1100px, 92vw); height: 85vh; display: flex; align-items: stretch; gap: 18px; }
    .app-card { height: 100%; border-radius: var(--radius); overflow: hidden; }
    .sidebar-card { width: 288px; flex: 0 0 288px; padding: 24px; }
    .sidebar-body { height: 100%; display: flex; flex-direction: column; padding: 16px; border-radius: 18px; background: rgba(15, 23, 42, .08); }
    .sidebar-profile { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
    .avatar { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(255, 123, 173, .95); box-shadow: 0 0 10px rgba(255, 123, 173, .45); animation: none; }
    .sidebar-name { margin: 0; font-size: 16px; font-weight: 700; }
    .sidebar-profile-actions { display: flex; gap: 8px; justify-content: center; }
    .sidebar-link { display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; border-radius: 10px; border: 1px solid rgba(251, 146, 153, .45); background: rgba(254, 240, 229, .6); color: rgba(124, 45, 18, .88); text-decoration: none; font-size: 12px; font-weight: 600; cursor: pointer; transition: color var(--duration-normal) ease, border-color var(--duration-normal) ease, background-color var(--duration-normal) ease; }
    .sidebar-random-row { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
    .sidebar-random-row .sidebar-action { width: auto; min-width: 0; white-space: nowrap; }
    .sidebar-action { min-height: 44px; border-radius: 14px; border: 1px solid rgba(244, 114, 182, .35); background: linear-gradient(135deg, rgba(252, 231, 243, .95), rgba(251, 207, 232, .9) 60%, rgba(249, 168, 212, .88)); padding: 12px 14px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 24px rgba(219, 39, 119, .2); transition: transform var(--duration-normal) var(--ease-ui), box-shadow var(--duration-normal) var(--ease-ui), background-color var(--duration-normal) var(--ease-ui), border-color var(--duration-normal) var(--ease-ui); }
    .sidebar-action:hover, .sidebar-action:focus-visible { transform: translateY(-1px); border-color: rgba(244, 114, 182, .58); box-shadow: var(--shadow-pink); }
    .sidebar-action:active { transform: translateY(0) scale(.99); transition-duration: 80ms; }
    .icon-button { display: inline-flex; align-items: center; justify-content: center; }
    .random-icon-button { min-height: 0; padding: 8px; border: none; box-shadow: 0 10px 24px rgba(219, 39, 119, .2), 0 0 0 1px rgba(244, 114, 182, .35); }
    .icon-button:hover .sidebar-action-icon, .icon-button:focus-visible .sidebar-action-icon { transform: scale(1.04); }
    .sidebar-sc-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: auto; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(244, 114, 182, .35); background: rgba(252, 231, 243, .6); color: rgba(15, 23, 42, .8); font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .4px; cursor: pointer; transition: color var(--duration-normal) ease, border-color var(--duration-normal) ease, background-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease, transform var(--duration-normal) var(--ease-ui); }
    .sidebar-sc-toggle.active { color: #7c2d5d; border-color: rgba(244, 114, 182, .82); background: var(--pink-medium); box-shadow: inset 0 0 10px rgba(255, 255, 255, .5), 0 8px 20px rgba(219, 39, 119, .2); }
    .sidebar-search { margin-top: 14px; }
    .sidebar-search input { font-size: 14px; }
    .sidebar-filters { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
    .sidebar-select { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .4); padding: 10px 12px; background: rgba(255, 255, 255, .2); cursor: pointer; font-size: 14px; transition: background-color var(--duration-normal) ease, border-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease; }
    .layout-toggle { margin-top: 1px; }
    .sidebar-count { margin-top: auto; padding-top: 16px; text-align: center; color: var(--muted); font-size: 12px; }
    .main-card { flex: 1 1 0%; }
    .list-header { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1fr); gap: 12px; width: calc(100% - 6px); margin-top: 12px; padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(15, 23, 42, .18); font-size: 17px; font-weight: 700; }
    .main-body { flex: 1 1 0; overflow-y: auto; min-height: 0; padding: 16px 6px 0 0; }
    .song-row { padding: 12px 16px; }
    .song-row:hover { transform: translateY(-2px); background: var(--surface-song-hover); box-shadow: var(--shadow-hover); }
    .song-mobile { display: none; }
    .song-desktop { display: grid; align-items: center; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1fr); gap: 12px; font-size: 14px; }
    .song-desktop > div { min-width: 0; overflow-wrap: anywhere; }
    .song-desktop-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .desktop-remark { color: rgba(15, 23, 42, .66); font-size: 12px; line-height: 1.45; }
    .layout-cloud, .layout-danmaku { overflow: hidden; padding: 0; }
    .layout-cloud .song-list, .layout-danmaku .song-list { position: relative; width: 100%; height: 100%; min-height: 420px; overflow: hidden; }
    .tag-cloud-wrap { width: 600px; }
    .tag-cloud-progress { width: 600px; }
    .layout-danmaku.is-paused .danmaku-item { animation-play-state: paused !important; }
    #randomModal { padding: 24px; }
    #randomModal .modal-backdrop { background: rgba(12, 20, 32, .55); backdrop-filter: blur(6px); }
    .random-panel { width: min(920px, 92vw); min-height: min(640px, 86vh); height: auto; max-height: calc(100vh - 48px); padding: 30px 24px 26px; border-radius: 28px; align-items: center; gap: 18px; }
    .random-panel .modal-close { top: 16px; right: 18px; }
    .random-heading { gap: 0; margin-bottom: 0; padding: 0; }
    .random-heading h2 { font-size: 28px; }
    .random-heading p { margin-top: 6px; font-size: 13px; }
    .random-heading button { min-height: auto; margin-top: 12px; padding: 6px 14px; border-width: 1px; font-size: 12px; }
    .random-cards-grid { flex: 0 0 auto; width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 225px; gap: 12px; justify-items: center; }
    .random-card { width: 150px; height: 225px; justify-self: center; }
    .random-card-back { padding: 16px 14px; gap: 12px; }
    .random-card-back h3 { font-size: 19px; }
    .random-card-meta { gap: 8px; }
    .random-card-singer { font-size: 12px; }
    .random-card-tag, .random-card-sc, .random-card-remark { font-size: 11px; }
    .random-card-copy { min-height: auto; padding: 8px 12px; font-size: 12px; }
    .app-footer { flex: 0 0 auto; }
}

@media (max-width: 899px) {
    .app-root:has(.layout-danmaku) { height: 100vh; min-height: 0; }
    .app-shell:has(.layout-danmaku), .app-cards:has(.layout-danmaku) { height: 100%; min-height: 0; }
    .main-card:has(.layout-danmaku) { height: 100%; min-height: 0; flex: 1 1 0; overflow: hidden; }
    .modal-close { width: 44px; height: 44px; }
    #randomModal { padding: 4px; }
    .random-panel { --random-mobile-card-width: min(150px, calc((100vw - 56px) / 2)); width: 100%; height: 100%; padding: 58px clamp(10px, 4vw, 16px) 24px; border-radius: 24px; }
    .random-heading { gap: 7px; margin-bottom: 24px; padding: 0 34px; }
    .random-heading h2 { font-size: clamp(26px, 8vw, 34px); }
    .random-heading p { font-size: clamp(14px, 4vw, 17px); }
    .random-heading button { min-height: 44px; margin-top: 6px; padding: 7px 20px; font-size: 15px; }
    .random-cards-grid { grid-template-columns: repeat(2, var(--random-mobile-card-width)); grid-auto-rows: calc(var(--random-mobile-card-width) * 1.5); justify-content: center; justify-items: center; gap: 12px; }
    .random-card { --random-deal-x: -8px; width: var(--random-mobile-card-width); height: calc(var(--random-mobile-card-width) * 1.5); }
    .layout-tile { padding-top: 0; overflow: visible; }
    .layout-cloud { padding: 0; overflow: hidden; min-height: min(100vw, 520px); }
    .layout-cloud .song-list { position: relative; width: 100%; height: min(100vw, 480px); min-height: 360px; overflow: hidden; }
    .tag-cloud-stack { width: min(100%, 420px); height: 100%; }
    .tag-cloud-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; aspect-ratio: 1 / 1; max-height: 420px; overflow: visible; }
    .tag-cloud-progress { width: 100%; margin-bottom: 12px; }
    .layout-danmaku { height: auto; min-height: 0; flex: 1 1 0; padding: 0; overflow: hidden; }
    .layout-danmaku .song-list { width: 100%; height: 100%; overflow: hidden; }
    .layout-tile .song-list { display: block; }
    .monitor-shell { height: auto; padding: clamp(12px, 2.6vw, 23px); overflow: visible; border: 0; border-radius: clamp(20px, 2.8vw, 25px); background: rgba(225, 228, 232, .72); box-shadow: none; }
    .monitor-grid { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: clamp(40px, 9.1vw, 80px); gap: clamp(8px, 1.5vw, 13px) clamp(10px, 1.7vw, 15px); }
    .monitor-unit { padding: clamp(6px, 1.4vw, 12px) clamp(8px, 1.8vw, 16px); min-height: clamp(40px, 9.1vw, 80px); }
    .unit-text { font-size: clamp(13px, 2.8vw, 24px); }
    .main-card {
        --glass-padding: clamp(12px, 2.85vw, 25px);
        width: 100%;
        height: auto;
        min-height: calc(100vh - 58px);
        flex: none;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        text-shadow: none;
    }
}

@media (hover: hover) and (pointer: fine) {
    .random-card:hover { transform: scale(1.04); }
    .sidebar-link:hover, .sidebar-link:focus-visible {
        color: rgba(124, 45, 18, 1);
        border-color: rgba(251, 146, 153, .72);
        background: rgba(254, 240, 229, .82);
    }
}

@media (max-width: 520px) {
    .profile-sections { grid-template-columns: 1fr; }
    .modal-panel { padding: 20px 16px; border-radius: 20px; }
    .song-detail-panel { width: calc(100vw - 32px); max-width: 390px; padding: 24px 18px 18px; border-radius: 16px; }
    .random-heading { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .random-card.is-dealing { animation: none; }
    .monitor-scanline, .monitor-unit.is-typing .unit-text::after, .monitor-unit.is-entering { animation: none !important; }
    .background-video { display: none !important; }
    #sakura-canvas { display: none !important; }
}

@media (hover: none), (pointer: coarse) {
    :where(button, a, .song-row, .monitor-unit, .random-card):hover {
        transform: none;
    }
    :where(button, .song-row, .monitor-unit, .random-card):active {
        transform: scale(.985);
        opacity: .92;
        transition-duration: 80ms;
    }
}