/* ============================================================
   HNR 音乐解析 · 设计系统
   日间浅色调 + 彩色拼色点缀 / 夜间深色调 / 移动端自适应
   ============================================================ */

:root {
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --radius: 14px;
    --radius-sm: 9px;
    --transition: .22s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 日间主题：浅色主调 + 拼色 ---------- */
[data-theme="light"] {
    --bg: #f3f6fa;
    --bg-soft: #e9eff6;
    --card: #ffffff;
    --card-2: #f7fafd;
    --text: #1b2334;
    --text-2: #5b6577;
    --text-3: #97a1b3;
    --border: #e4e9f1;
    --primary: #1677d2;
    --primary-2: #0f62b0;
    --primary-soft: rgba(22, 119, 210, .1);
    --teal: #0e9f8a;
    --teal-soft: rgba(14, 159, 138, .12);
    --amber: #dd9a2b;
    --amber-soft: rgba(221, 154, 43, .13);
    --coral: #f0674f;
    --coral-soft: rgba(240, 103, 79, .12);
    --green: #2c9e67;
    --green-soft: rgba(44, 158, 103, .12);
    --danger: #dd4545;
    --danger-soft: rgba(221, 69, 69, .1);
    --warn: #dd9a2b;
    --warn-soft: rgba(221, 154, 43, .13);
    --success: #2c9e67;
    --success-soft: rgba(44, 158, 103, .12);
    --shadow: 0 1px 2px rgba(20, 40, 80, .04), 0 8px 24px rgba(20, 40, 80, .06);
    --shadow-lg: 0 12px 40px rgba(20, 40, 80, .13);
    --hero-grad: linear-gradient(120deg, #1565c0 0%, #1677d2 34%, #0e9f8a 72%, #d99a2b 130%);
    --input-bg: #f2f6fa;
    --mask: rgba(15, 23, 38, .5);
    --table-hover: #f3f8fe;
    --glass: rgba(255, 255, 255, .82);
}

/* ---------- 夜间主题 ---------- */
[data-theme="dark"] {
    --bg: #0d131b;
    --bg-soft: #111927;
    --card: #161f2c;
    --card-2: #1b2635;
    --text: #e7edf5;
    --text-2: #9aa6b8;
    --text-3: #667183;
    --border: #243040;
    --primary: #3b96e8;
    --primary-2: #5aaaf0;
    --primary-soft: rgba(59, 150, 232, .16);
    --teal: #2bbfa6;
    --teal-soft: rgba(43, 191, 166, .15);
    --amber: #e8b45a;
    --amber-soft: rgba(232, 180, 90, .14);
    --coral: #f0836d;
    --coral-soft: rgba(240, 131, 109, .14);
    --green: #4cc78b;
    --green-soft: rgba(76, 199, 139, .14);
    --danger: #e86a6a;
    --danger-soft: rgba(232, 106, 106, .14);
    --warn: #e8b45a;
    --warn-soft: rgba(232, 180, 90, .14);
    --success: #4cc78b;
    --success-soft: rgba(76, 199, 139, .14);
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .45);
    --hero-grad: linear-gradient(120deg, #0d3a66 0%, #125a9e 40%, #0b6e60 80%, #8a6117 130%);
    --input-bg: #101823;
    --mask: rgba(4, 8, 14, .66);
    --table-hover: #1a2434;
    --glass: rgba(22, 31, 44, .82);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 15px; }
html[data-style-pending]:not([data-style]) body { visibility: hidden; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    transition: background var(--transition), color var(--transition);
    min-height: 100vh;
    user-select: none;
    -webkit-user-select: none;
}
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
input, textarea, [contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.icon { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.22em; fill: currentColor; flex: none; }
.hidden { display: none !important; }
.muted { color: var(--text-3); }
.text-sm { font-size: .84rem; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 14px; } .mt-3 { margin-top: 20px; }
.mb-2 { margin-bottom: 14px; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }

/* ---------- 布局骨架 ---------- */
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.topbar {
    position: sticky; top: 0; z-index: 90;
    width: min(1040px, calc(100% - 40px)); margin: 12px auto 0;
    background: var(--glass);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.topbar-inner { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.08rem; cursor: pointer; flex: none; }
.brand-logo {
    width: 34px; height: 34px; border-radius: 10px; background: var(--hero-grad);
    display: grid; place-items: center; color: #fff; box-shadow: var(--shadow);
}
.brand-logo .icon { width: 20px; height: 20px; }
.brand-logo.has-site-icon { background: transparent; padding: 0; overflow: hidden; }
.brand-logo.has-site-icon img { width: 100%; height: 100%; object-fit: cover; }
.nav { display: flex; gap: 4px; }
.nav a {
    padding: 7px 14px; border-radius: 999px; color: var(--text-2); font-size: .95rem;
    transition: var(--transition); cursor: pointer; white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--bg-soft); }
.nav a.active { color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.icon-btn {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--card); color: var(--text-2); cursor: pointer;
    display: grid; place-items: center; transition: var(--transition); flex: none;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }

/* 日夜切换使用独立的太阳/月亮图标，不显示按钮边框和底色。 */
[data-theme-icon].icon-btn {
    width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--text-2); box-shadow: none;
}
[data-theme-icon].icon-btn .icon { width: 22px; height: 22px; }
[data-theme-icon].icon-btn:hover {
    border: 0; background: transparent; color: var(--primary); transform: none;
}
[data-theme="light"] [data-theme-icon].icon-btn { color: #000; }
[data-theme="dark"] [data-theme-icon].icon-btn { color: #fff; }

.user-chip {
    display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px;
    border-radius: 999px; border: 1px solid var(--border); background: var(--card);
    cursor: pointer; transition: var(--transition);
}
.user-chip:hover { border-color: var(--primary); }
.avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--hero-grad);
    color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 600; flex: none;
}

/* 下拉菜单 */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg); padding: 6px; z-index: 99;
    opacity: 0; transform: translateY(-6px); pointer-events: none; transition: var(--transition);
}
.dropdown.open .dropdown-menu { opacity: 1; transform: none; pointer-events: auto; }
.dropdown-menu .menu-item {
    display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 7px;
    color: var(--text-2); font-size: .92rem; cursor: pointer; transition: var(--transition);
}
.dropdown-menu .menu-item:hover { background: var(--bg-soft); color: var(--text); }
.dropdown-menu .menu-item.danger { color: var(--danger); }
.dropdown-menu .menu-item.danger:hover { background: var(--danger-soft); }
.menu-divider { height: 1px; background: var(--border); margin: 5px 8px; }

/* ---------- Hero 区 ---------- */
.hero { width: min(1040px, calc(100% - 40px)); margin: 16px auto 0; background: var(--hero-grad); color: #fff; padding: 18px 0 62px; position: relative; overflow: hidden; border-radius: var(--radius); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .09); pointer-events: none; }
.hero::before { width: 420px; height: 420px; right: -120px; top: -170px; }
.hero::after { width: 240px; height: 240px; left: -70px; bottom: -110px; background: rgba(255, 255, 255, .07); }
.hero h1 { font-size: 1.8rem; letter-spacing: .5px; position: relative; }
.hero p { opacity: .9; margin-top: 8px; position: relative; }
.hero .container { position: relative; z-index: 1; }
.hero-badges { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; position: relative; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); font-size: .8rem; backdrop-filter: blur(4px);
}

/* 解析盒子 */
.parse-box {
    margin: -44px auto 0; position: relative; z-index: 5;
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 22px; border: 1px solid var(--border);
}
.parse-tabs { display: flex; gap: 7px; margin-bottom: 15px; flex-wrap: wrap; }
.parse-tab {
    padding: 7px 16px; border-radius: 999px; font-size: .9rem; cursor: pointer;
    color: var(--text-2); border: 1px solid var(--border); background: var(--bg-soft);
    transition: var(--transition); display: inline-flex; align-items: center; gap: 6px;
}
.parse-tab:hover { color: var(--text); }
.parse-tab.active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); font-weight: 600; }
.parse-tab:disabled { opacity: .42; cursor: not-allowed; }

.parse-input-row { display: flex; gap: 10px; }
.parse-input-row .input { flex: 1; }
.parse-hint { margin-top: 10px; font-size: .82rem; color: var(--text-3); display: flex; align-items: center; gap: 6px; }

/* ---------- 表单控件 ---------- */
.input, .select, .textarea {
    width: 100%; padding: 11px 14px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--input-bg); color: var(--text);
    outline: none; transition: var(--transition);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.textarea { resize: vertical; min-height: 90px; }
.file-picker-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-picker {
    min-height: 48px; padding: 8px 12px; border: 1.5px dashed var(--primary); border-radius: var(--radius-sm);
    background: var(--primary-soft); color: var(--primary); cursor: pointer; display: flex; align-items: center; gap: 9px;
    transition: var(--transition);
}
.file-picker:hover { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.file-picker .icon { width: 1.35em; height: 1.35em; }
.file-picker small { color: var(--text-2); margin-left: auto; max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.upload-card {
    position: relative; min-height: 138px; padding: 18px 14px; border: 1.5px dashed var(--border); border-radius: 18px;
    background: linear-gradient(135deg, var(--card-2), var(--card)); cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.upload-card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 14px 30px rgba(20,40,80,.1); }
.upload-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-card-icon { width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--teal)); box-shadow: 0 10px 22px var(--primary-soft); }
.upload-card-icon .icon { width: 24px; height: 24px; }
.upload-card strong { font-size: .98rem; position: relative; z-index: 1; }
.upload-card small { max-width: 100%; color: var(--text-3); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; z-index: 1; }
.upload-card.has-file { border-style: solid; border-color: var(--primary); background: var(--primary-soft); }
.upload-card-audio .upload-card-icon { background: linear-gradient(135deg, #1677d2, #22d3ee); }
.upload-card-cover .upload-card-icon { background: linear-gradient(135deg, #f97316, #facc15); }
.upload-card-lyric .upload-card-icon { background: linear-gradient(135deg, #7c3aed, #f472b6); }
.upload-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--transition), transform var(--transition); }
.upload-card-cover.has-file img { opacity: .28; transform: scale(1.03); }
.upload-card-cover.has-file .upload-card-icon { background: rgba(15,23,38,.72); backdrop-filter: blur(8px); }
.upload-card-cover.has-file strong, .upload-card-cover.has-file small { opacity: 0; transition: opacity var(--transition); }
.upload-card-cover.has-file:hover strong, .upload-card-cover.has-file:hover small { opacity: 1; }
.upload-submit-row { display: flex; justify-content: center; }
.upload-progress { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-2); }
.upload-progress .flex-between { font-size: .82rem; color: var(--text-2); }
.upload-progress strong { color: var(--primary); }
.metadata-workbench { display: grid; gap: 18px; }
.metadata-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(135deg,var(--primary-soft),var(--card)); }
.metadata-intro h4 { margin:5px 0 4px; font-size:1.25rem; }
.metadata-intro p { margin:0; }
.eyebrow { color:var(--primary); font-size:.7rem; font-weight:800; letter-spacing:.08em; }
.metadata-local-badge { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:var(--card); color:var(--teal); font-size:.78rem; white-space:nowrap; }
.metadata-local-badge .icon { width:15px; height:15px; }
.metadata-dropzone { min-height:150px; padding:20px; border:1.5px dashed var(--primary); border-radius:18px; background:var(--card-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; position:relative; overflow:hidden; }
.metadata-dropzone input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.metadata-dropzone small { color:var(--text-3); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metadata-preview-grid { display:grid; grid-template-columns:180px minmax(0,1fr); gap:20px; }
.metadata-cover-panel { display:flex; flex-direction:column; align-items:center; gap:8px; }
.metadata-fields .form-row { grid-template-columns:1fr; gap:12px; }
.metadata-fields #metadata-lyrics { min-height:260px; }
.metadata-cover-frame { width:160px; aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--card-2); border:1px solid var(--border); display:grid; place-items:center; color:var(--text-3); }
.metadata-cover-frame img { width:100%; height:100%; object-fit:cover; }
.metadata-cover-frame > .icon { width:38px; height:38px; }
.metadata-cover-upload { position:relative; width:160px; aspect-ratio:1; border:1.5px dashed var(--border); border-radius:18px; background:linear-gradient(135deg,var(--card-2),var(--card)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; overflow:hidden; cursor:pointer; text-align:center; }
.metadata-cover-upload:hover { border-color:var(--primary); background:var(--primary-soft); }
.metadata-cover-upload input { position:absolute; inset:0; opacity:0; cursor:pointer; z-index:2; }
.metadata-cover-upload img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.metadata-cover-upload.has-cover img { opacity:1; }
.metadata-cover-upload.has-cover .upload-card-icon, .metadata-cover-upload.has-cover strong, .metadata-cover-upload.has-cover small { position:relative; z-index:1; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.8); }
.metadata-cover-upload.has-cover:after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.25); }
.metadata-cover-upload.has-cover .upload-card-icon, .metadata-cover-upload.has-cover strong, .metadata-cover-upload.has-cover small { opacity:0; transition:opacity var(--transition); }
.metadata-cover-upload.has-cover:hover .upload-card-icon, .metadata-cover-upload.has-cover:hover strong, .metadata-cover-upload.has-cover:hover small { opacity:1; }
.audio-file-info { width:100%; font-size:.76rem; color:var(--text-2); }
.audio-file-info details { border:1px solid var(--border); border-radius:10px; background:var(--card-2); overflow:hidden; }
.audio-file-info details + details { margin-top:8px; }
.audio-file-info summary { padding:9px 10px; color:var(--text); font-weight:700; cursor:pointer; }
.audio-file-info dl { margin:0; padding:0 10px 10px; display:grid; grid-template-columns:minmax(0,1fr); gap:5px; }
.audio-file-info dt { color:var(--text-3); }
.audio-file-info dd { margin:0; color:var(--text); overflow-wrap:anywhere; }
.audio-workbench { display:grid; gap:18px; }
.audio-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--card); }
.audio-controls .switch-row { grid-column:1 / -1; }
.audio-controls input[type=range] { width:100%; accent-color:var(--primary); }
.metadata-file-btn { position:relative; overflow:hidden; width:max-content; }
.metadata-file-btn input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.metadata-status { padding:10px 12px; border-radius:10px; background:var(--card-2); color:var(--text-2); font-size:.82rem; }
.upload-metadata-preview:empty { display:none; }
.upload-metadata-preview { display:grid; gap:5px; margin-top:12px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--card-2); color:var(--text-2); font-size:.82rem; }
.upload-metadata-preview pre { max-height:110px; margin:4px 0 0; overflow:auto; white-space:pre-wrap; font:inherit; color:var(--text-3); }
.admin-resource-replace { display:grid; gap:8px; margin-top:14px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--card-2); }
.admin-resource-replace strong { font-size:.9rem; }
@media(max-width:640px){.metadata-intro{display:block}.metadata-local-badge{margin-top:12px}.metadata-preview-grid{grid-template-columns:1fr}.metadata-cover-panel{align-items:flex-start}.audio-controls{grid-template-columns:1fr}}
.empty-center { width: 100%; justify-content: center; align-items: center; text-align: center; padding: 34px 18px; }
.select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
    background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
    background-size: 5px 5px; background-repeat: no-repeat;
}
.smart-select { position: relative; width: 100%; max-width: 150px; flex: none; }
.smart-select-source { max-width: 160px; }
.smart-select-page { max-width: 110px; }
.smart-select > .select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.smart-select-button {
    width: 100%; min-height: 47px; padding: 9px 34px 9px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--input-bg), var(--card)); color: var(--text); cursor: pointer;
    display: flex; align-items: center; gap: 5px; font: inherit; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
}
.smart-select-button:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20,40,80,.08); }
.smart-select.open .smart-select-button { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), 0 10px 28px rgba(20,40,80,.1); }
.smart-select.disabled .smart-select-button { opacity: .58; cursor: not-allowed; transform: none; box-shadow: none; }
.smart-select-button span, .smart-select-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-select-button > span { flex: 1; }
.smart-select-button .smart-select-img + span, .smart-select-button .quality-mark + span { margin-left: -10px; }
.smart-select-img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.source-status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.16); }
.source-status-dot.online { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.16); }
.source-status-dot.offline { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.14); }
.source-status-dot.pending { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.16); }
.smart-select-icon { width: 1.12em; height: 1.12em; flex: none; color: var(--primary); fill: currentColor; }
.quality-mark {
    width: 24px; height: 24px; border-radius: 8px; display: inline-grid; place-items: center; flex: none;
    font-size: .58rem; line-height: 1; font-weight: 900; letter-spacing: -.03em; color: #fff;
    background: linear-gradient(135deg, #8b95a7, #556070); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 5px 12px rgba(20,40,80,.12);
}
.smart-select-button .quality-mark { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 6px; font-size: .58rem; }
.smart-select-button .quality-mark + span { margin-left: 0; }
.quality-low, .quality-standard, .quality-128, .quality-h, .quality-s { background: linear-gradient(135deg, #7c8ca3, #48556a); }
.quality-exhigh, .quality-320, .quality-p { background: linear-gradient(135deg, #1677d2, #35a7ff); }
.quality-lossless, .quality-flac, .quality-ff { background: linear-gradient(135deg, #10a37f, #34d399); }
.quality-hires, .quality-highres, .quality-high { background: linear-gradient(135deg, #7c3aed, #c084fc); }
.quality-sky, .quality-viper-atmos, .quality-atmos { background: linear-gradient(135deg, #0ea5e9, #22d3ee); }
.quality-atmos51 { background: linear-gradient(135deg, #2563eb, #818cf8); }
.quality-jyeffect, .quality-viper-clear { background: linear-gradient(135deg, #f59e0b, #f97316); }
.quality-jymaster, .quality-master, .quality-viper-tape, .quality-zpqj, .quality-zp, .quality-zpga201, .quality-zpga501, .quality-zply { background: linear-gradient(135deg, #d946ef, #fb7185); }
.quality-super { background: linear-gradient(135deg, #111827, #64748b); }
.quality-piano { background: linear-gradient(135deg, #4f46e5, #a78bfa); }
.quality-acappella { background: linear-gradient(135deg, #db2777, #f472b6); }
.quality-subwoofer { background: linear-gradient(135deg, #0f766e, #2dd4bf); }
.quality-ancient { background: linear-gradient(135deg, #92400e, #d97706); }
.quality-dj { background: linear-gradient(135deg, #dc2626, #facc15); }
.quality-surnay { background: linear-gradient(135deg, #15803d, #bef264); }
.quality-bcms { background: linear-gradient(135deg, #334155, #14b8a6); }
.smart-select-chevron {
    position: absolute; right: 13px; top: 50%; width: 10px; height: 10px; flex: none;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--text-3);
    transform: translateY(-65%) rotate(45deg); transform-origin: 60% 60%; transition: transform var(--transition), color var(--transition);
}
.smart-select.open .smart-select-chevron { color: var(--primary); transform: translateY(-35%) rotate(225deg); }
.smart-select-menu {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 80; padding: 6px; max-height: 280px; overflow: auto;
    border: 1px solid var(--border); border-radius: 13px; background: var(--card); box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top; pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
}
.smart-select.open .smart-select-menu { opacity: 1; transform: none; pointer-events: auto; }
.smart-select-option {
    width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer;
    display: flex; align-items: center; gap: 5px; font: inherit; text-align: left; transition: background var(--transition), color var(--transition), transform var(--transition);
}
.smart-select-option:hover { background: var(--bg-soft); color: var(--text); transform: translateX(2px); }
.smart-select-option.selected { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.smart-select-check { width: 1em; height: 1em; margin-left: auto; fill: currentColor; flex: none; }
.form-item { margin-bottom: 16px; }
.form-label { display: block; font-size: .88rem; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }
.form-label .req { color: var(--danger); margin-left: 2px; }
.form-tip { font-size: .78rem; color: var(--text-3); margin-top: 5px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.source-cost-list { display: grid; gap: 12px; }
.source-cost-row { display: grid; grid-template-columns: 92px repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; padding-top: 12px; border-top: 1px solid var(--border); }
.source-cost-row:first-child { padding-top: 0; border-top: 0; }
.source-cost-row .form-item { min-width: 0; }
.source-cost-name { padding-top: 28px; font-weight: 700; color: var(--text); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 20px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
    font-size: .95rem; font-weight: 600; cursor: pointer; transition: var(--transition);
    background: transparent; color: var(--primary); border-color: var(--primary); white-space: nowrap; user-select: none;
}
.btn:hover { background: transparent; color: var(--primary-2); border-color: var(--primary-2); transform: translateY(-1px); box-shadow: none; }
.btn:active { transform: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary-soft); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border); }
.btn-ghost:hover { background: transparent; color: var(--text); box-shadow: none; }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: transparent; color: #c73a3a; }
.btn-success { background: transparent; color: var(--success); border-color: var(--success); }
.btn-success:hover { background: transparent; color: #268a58; }
.btn-teal { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-teal:hover { background: transparent; filter: none; }
.btn-sm { padding: 6px 13px; font-size: .84rem; border-radius: 8px; }
.btn-xs { padding: 4px 10px; font-size: .78rem; border-radius: 7px; gap: 4px; }
.btn-block { width: 100%; }
.btn .spin { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 徽章（拼色） */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.tag-primary { background: var(--primary-soft); color: var(--primary); }
.tag-teal { background: var(--teal-soft); color: var(--teal); }
.tag-amber { background: var(--amber-soft); color: var(--amber); }
.tag-coral { background: var(--coral-soft); color: var(--coral); }
.tag-success { background: var(--success-soft); color: var(--success); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }
.tag-muted { background: var(--bg-soft); color: var(--text-2); }

/* ---------- 卡片/面板 ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 22px; }
.section { margin-top: 26px; }
.section-title { display: flex; align-items: center; gap: 10px; font-size: 1.14rem; font-weight: 700; margin-bottom: 14px; }
.section-title .bar { width: 4px; height: 18px; border-radius: 4px; background: var(--hero-grad); }
.section-title .sub { font-size: .82rem; color: var(--text-3); font-weight: 400; }
.section-title .right { margin-left: auto; display: flex; gap: 8px; }

/* ---------- 歌曲列表 ---------- */
.song-list { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.song-item { display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background var(--transition); min-width: 0; max-width: 100%; }
.song-item:last-child { border-bottom: none; }
.song-item:hover { background: var(--table-hover); }
.song-cover { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; flex: none; background: var(--bg-soft); }
.song-cover-wrap { position: relative; width: 48px; height: 48px; flex: none; }
.song-cover-wrap .song-cover { width: 100%; height: 100%; }
.song-platform-icon { position: absolute; top: -5px; left: -5px; width: 22px; height: 22px; padding: 0; border: 0; outline: 2px solid var(--card); border-radius: 6px; background: var(--card); box-shadow: 0 2px 7px rgba(0,0,0,.24); object-fit: cover; transform: scale(1.08); }
.platform-icon { width: 22px; height: 22px; flex: none; object-fit: contain; }
.platform-health-name { display: flex; align-items: center; gap: 7px; }
.platform-health-name .status-dot { margin-right: 1px; }
.song-info { flex: 1; min-width: 0; }
.song-name { font-weight: 600; font-size: .96rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 7px; }
.song-meta { font-size: .8rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.song-actions { display: flex; align-items: center; gap: 7px; flex: none; max-width: 100%; }
.fav-btn svg { fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s, fill .15s, stroke .15s; }
.fav-btn.active { color: #ef5777; border-color: rgba(239,87,119,.4); background: rgba(239,87,119,.08); }
.fav-btn.active svg { fill: #ef5777; stroke: #ef5777; }
.fav-btn:active svg { transform: scale(1.2); }
.song-check { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; flex: none; }
.playing-indicator { color: var(--primary); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* 歌单/专辑头部 */
.list-header { display: flex; gap: 20px; padding: 22px; }
.list-header .cover { width: 130px; height: 130px; border-radius: var(--radius-sm); box-shadow: var(--shadow); flex: none; object-fit: cover; }
.list-header .info { min-width: 0; flex: 1; }
.list-header h3 { font-size: 1.25rem; margin-bottom: 6px; }
.list-header .desc { font-size: .84rem; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-header .ops { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; padding: 11px 14px; color: var(--text-3); font-weight: 600; font-size: .8rem; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--card-2); }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--table-hover); }
.table .row-check { width: 18px; height: 18px; accent-color: var(--primary); }

.page-error { padding: 48px 20px; text-align: center; }
.page-error .icon { width: 42px; height: 42px; color: var(--danger); margin-bottom: 10px; }
.page-error p { color: var(--text-2); margin: 6px 0 16px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.batch-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--card-2); }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.health-item { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); }
.health-item .health-value { font-size: 1.3rem; font-weight: 700; margin-top: 5px; word-break: break-word; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.status-dot.ok { background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.detail-block { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); }
.detail-block.wide { grid-column: 1 / -1; }
.detail-block h4 { margin-bottom: 8px; }
.device-list { display: grid; gap: 10px; }
.device-item { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); }
.device-item .device-copy { flex: 1; min-width: 0; }
.device-item .device-name { font-weight: 700; overflow-wrap: anywhere; }

/* 分页 */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; flex-wrap: wrap; }
.pagination button { min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text-2); cursor: pointer; transition: var(--transition); }
.pagination button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pagination button.cur { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination .pg-info { font-size: .84rem; color: var(--text-3); margin: 0 6px; }

/* ---------- 弹窗 ---------- */
.modal-mask {
    position: fixed; inset: 0; background: var(--mask); z-index: 200;
    display: grid; place-items: center; padding: 18px;
    opacity: 0; pointer-events: none; transition: opacity var(--transition);
    backdrop-filter: blur(3px);
}
.modal-mask.open { opacity: 1; pointer-events: auto; }
.modal {
    width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto;
    background: var(--card); border-radius: var(--radius); border: 1px solid var(--border);
    box-shadow: var(--shadow-lg); transform: translateY(14px) scale(.98); transition: transform var(--transition);
}
.modal-mask.open .modal { transform: none; }
.modal-lg { max-width: 720px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 0; }
.modal-title { font-size: 1.1rem; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: 7px; }
.modal-close:hover { color: var(--danger); background: var(--danger-soft); }
.modal-body { padding: 18px 22px 22px; }
.qq-login-dialog { display:flex; flex-direction:column; align-items:center; gap:14px; padding:2px 0 4px; }
.qq-login-brand { display:flex; align-items:center; gap:11px; width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); }
.qq-login-brand strong { display:block; font-size:.96rem; }
.qq-login-brand p { margin:3px 0 0; color:var(--text-3); font-size:.78rem; }
.qq-login-icon { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:8px; background:#e8f2ff; color:#1677ff; }
.qq-login-scan-icon { width:23px; height:23px; object-fit:contain; }
.scan-login-icon { width:18px; height:18px; object-fit:contain; vertical-align:middle; }
.qq-login-wechat .qq-login-icon { background:#eaf8ee; color:#16a34a; }
.netease-login-dialog .qq-login-icon { background:#fff0f0; color:#d33a31; }
.qq-login-qr { width:230px; height:230px; display:grid; place-items:center; padding:10px; border:1px solid var(--border); border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(20,31,51,.08); }
.qq-login-qr img { display:block; width:100%; height:100%; object-fit:contain; }
.qq-login-status { min-height:22px; margin:0; padding:4px 10px; border-radius:999px; color:var(--text-2); background:var(--bg); font-size:.82rem; text-align:center; }
.qq-login-refresh { min-width:132px; }
@media (max-width:480px) { .qq-login-qr { width:min(230px, calc(100vw - 104px)); height:min(230px, calc(100vw - 104px)); } }
.quality-options { display: grid; gap: 9px; }
.quality-options .btn { justify-content: space-between; width: 100%; }
.code-result-list { display:grid; gap:8px; max-height:48vh; overflow:auto; }
.code-result-list > div { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.code-result-list code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--primary); }
.favorite-quality { width:auto; min-width:118px; padding:5px 28px 5px 9px; font-size:.8rem; }

/* Toast */
.toast-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 9px; align-items: center; pointer-events: none; width: min(92vw, 480px); }
.toast {
    display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 11px;
    background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    font-size: .9rem; animation: toast-in .3s cubic-bezier(.2, .9, .3, 1.2); max-width: 100%;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px); } }
.toast.success { border-color: var(--success); } .toast.success .icon { color: var(--success); }
.toast.error { border-color: var(--danger); } .toast.error .icon { color: var(--danger); }
.toast.warn { border-color: var(--warn); } .toast.warn .icon { color: var(--warn); }
.toast.info .icon { color: var(--primary); }

/* 验证码 */
.captcha-img { height: 44px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); flex: none; background: #fff; }
.input-group { display: flex; gap: 10px; align-items: stretch; }
.input-group .input { flex: 1; min-width: 0; }
.input-group .btn { flex: none; }
.auth-link { display: block; width: 100%; margin-top: 13px; padding: 5px; border: 0; background: transparent; color: var(--primary); font-size: .84rem; cursor: pointer; text-align: center; }
.auth-link:hover { color: var(--primary-2); text-decoration: underline; }
.verify-success { color: var(--success); font-weight: 600; }
.copy-col { position: sticky; right: 0; z-index: 2; text-align: right !important; background: var(--card); box-shadow: -8px 0 12px rgba(0,0,0,.035); }
.table th.copy-col { background: var(--card-2); }

/* 空状态 / 骨架屏 */
.empty { text-align: center; padding: 52px 20px; color: var(--text-3); }
.empty .icon { width: 44px; height: 44px; margin-bottom: 10px; opacity: .5; }
.skeleton { background: linear-gradient(90deg, var(--bg-soft) 25%, var(--card-2) 50%, var(--bg-soft) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 8px; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* 公告条 */
.notice-bar { display: flex; align-items: flex-start; gap: 9px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font-size: .88rem; margin-top: 18px; }
.notice-bar .icon { margin-top: .18em; }
.notice-bar .close { margin-left: auto; cursor: pointer; opacity: .7; flex: none; }
.search-history { display:flex; gap:7px; align-items:center; flex-wrap:wrap; min-height:20px; margin-top:10px; font-size:.78rem; color:var(--text-3); }
.search-history button { border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text-2); cursor:pointer; padding:1px 0; }
.search-history button:hover { color:var(--primary); border-color:var(--primary); }.search-history .clear { color:var(--danger); }
.history-chip { display:inline-flex; align-items:center; border-bottom:1px solid var(--border); }
.search-history .history-chip button { border:0; }
.search-history .history-remove { padding-left:5px; color:var(--text-3); font-size:1rem; line-height:1; }
.search-history .history-remove:hover { color:var(--danger); }

/* ---------- 前端界面主题：布局、组件和视觉语言均独立 ---------- */

/* 山水：东方留白与层叠画卷 */
[data-style="landscape"] {
    --font: "FangSong", "STFangsong", "Songti SC", "Microsoft YaHei", serif;
    --radius: 4px;
    --radius-sm: 3px;
    --shadow: 0 6px 24px rgba(30, 44, 38, .06);
    --shadow-lg: 0 18px 52px rgba(24, 39, 32, .12);
}
[data-theme="light"][data-style="landscape"] {
    --bg: #edf0e9; --bg-soft: #e1e7df; --card: #f8f9f4; --card-2: #f0f3ed;
    --text: #24312b; --text-2: #5c6c63; --text-3: #8d9a92; --border: #cfd8d0;
    --primary: #356b58; --primary-2: #234c3e; --primary-soft: rgba(53,107,88,.11);
    --teal: #3f7d70; --amber: #aa772d; --coral: #ad5545; --hero-grad: linear-gradient(150deg, #233c34, #55796b 55%, #a5b7a6);
    --input-bg: rgba(255,255,255,.55); --table-hover: rgba(53,107,88,.06); --glass: rgba(248,249,244,.88);
}
[data-theme="dark"][data-style="landscape"] {
    --bg: #0f1714; --bg-soft: #17221e; --card: #16201c; --card-2: #1b2822;
    --text: #e2eadf; --text-2: #a0b1a6; --text-3: #65776c; --border: #30443a;
    --primary: #80bca4; --primary-2: #a8d4c1; --primary-soft: rgba(128,188,164,.12);
    --teal: #78b7ad; --amber: #d4a65d; --coral: #d98070; --hero-grad: linear-gradient(150deg, #101a17, #294b3e 55%, #526d60);
    --input-bg: rgba(8,15,12,.55); --table-hover: rgba(128,188,164,.06); --glass: rgba(22,32,28,.88);
}
[data-style="landscape"] body { background-image: radial-gradient(ellipse at 80% 5%, var(--primary-soft), transparent 32%), linear-gradient(90deg, transparent 49.8%, rgba(128,128,128,.04) 50%, transparent 50.2%); }
[data-style="landscape"] .container { max-width: 1120px; }
[data-style="landscape"] .topbar { width: min(1080px, calc(100% - 40px)); background: transparent; border: 0; backdrop-filter: none; }
[data-style="landscape"] .topbar-inner { height: 78px; border-bottom: 1px solid var(--border); }
[data-style="landscape"] .brand { letter-spacing: .18em; }
[data-style="landscape"] .brand-logo { border-radius: 2px; background: var(--primary); box-shadow: none; transform: rotate(2deg); }
[data-style="landscape"] .nav { margin-left: auto; gap: 18px; }
[data-style="landscape"] .nav a { border-radius: 0; padding-inline: 3px; background: transparent !important; }
[data-style="landscape"] .nav a.active { color: var(--primary); box-shadow: inset 0 -1px var(--primary); }
[data-style="landscape"] .topbar-right { margin-left: 12px; }
[data-style="landscape"] .hero { width: min(1080px, calc(100% - 40px)); margin: 16px auto 0; padding: 22px 6%; min-height: 125px; color: var(--text); background: transparent; border: 1px solid var(--border); }
[data-style="landscape"] .hero::before { width: 62%; height: 100%; right: 0; top: 0; border-radius: 0; background: linear-gradient(155deg, transparent 0 18%, var(--primary-soft) 18.5% 20%, transparent 20.5% 32%, rgba(53,107,88,.16) 32.5% 55%, transparent 55.5%), linear-gradient(25deg, transparent 0 42%, rgba(53,107,88,.1) 42.5% 62%, transparent 62.5%); clip-path: polygon(22% 100%, 40% 38%, 52% 62%, 67% 20%, 100% 100%); }
[data-style="landscape"] .hero::after { width: 52%; height: 70%; left: auto; right: 3%; bottom: 0; border-radius: 0; background: linear-gradient(155deg, transparent 0 35%, rgba(35,76,62,.24) 35.5% 100%); clip-path: polygon(0 100%, 28% 28%, 43% 55%, 62% 5%, 100% 100%); }
[data-style="landscape"] .hero h1 { max-width: 46%; font-size: clamp(2.25rem, 5vw, 4.3rem); font-weight: 400; line-height: 1; letter-spacing: .13em; }
[data-style="landscape"] .hero p, [data-style="landscape"] .hero-badges { max-width: 45%; }
[data-style="landscape"] .hero-badge { padding-left: 0; background: transparent; color: var(--text-2); }
[data-style="landscape"] .hero-badge .icon { color: var(--primary); }
[data-style="landscape"] .parse-box { margin-top: 22px; display: grid; grid-template-columns: 180px 1fr; gap: 12px 24px; background: var(--glass); backdrop-filter: blur(12px); box-shadow: var(--shadow); }
[data-style="landscape"] .parse-box > .parse-tabs { grid-row: span 3; flex-direction: column; margin: 0; border-right: 1px solid var(--border); padding-right: 20px; }
[data-style="landscape"] .parse-tab { justify-content: flex-start; border: 0; border-radius: 0; background: transparent; }
[data-style="landscape"] .parse-tab.active { background: transparent; color: var(--primary); box-shadow: inset 3px 0 var(--primary); }
[data-style="landscape"] .parse-hint, [data-style="landscape"] .search-history { grid-column: 2; }
[data-style="landscape"] .input, [data-style="landscape"] .select, [data-style="landscape"] .textarea { border-width: 0 0 1px; background: transparent; }
[data-style="landscape"] .btn { border-radius: 2px; }
[data-style="landscape"] .card { box-shadow: var(--shadow); }
[data-style="landscape"] .song-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 12px 22px; column-gap: 30px; }
[data-style="landscape"] .song-item { padding-inline: 0; min-width: 0; }
[data-style="landscape"] .song-cover { border-radius: 2px; filter: saturate(.72); }
[data-style="landscape"] .section-title { justify-content: center; font-weight: 500; letter-spacing: .18em; }
[data-style="landscape"] .section-title .bar { width: 34px; height: 1px; border-radius: 0; background: var(--primary); }
[data-style="landscape"] .admin-sidebar { background: var(--card); box-shadow: inset -10px 0 30px rgba(53,107,88,.04); }
[data-style="landscape"] .side-item { border-radius: 2px; }

/* 后台主题选择器 */
.theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.theme-option { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; min-height: 84px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); cursor: pointer; transition: var(--transition); overflow: hidden; }
.theme-option:hover { border-color: var(--primary); transform: translateY(-1px); }
.theme-option.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); background: var(--card); }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-copy { min-width: 0; display: grid; gap: 3px; }
.theme-copy strong { font-size: .92rem; }
.theme-copy small { color: var(--text-3); font-size: .72rem; line-height: 1.35; }
.theme-check { position: absolute; right: 7px; top: 7px; width: 18px; height: 18px; border-radius: 50%; display: none; place-items: center; color: #fff; background: var(--primary); }
.theme-check .icon { width: 12px; height: 12px; }
.theme-option.selected .theme-check { display: grid; }
.theme-preview { width: 72px; height: 54px; border: 1px solid rgba(0,0,0,.13); position: relative; overflow: hidden; display: block; background: #fff; }
.theme-preview i { position: absolute; display: block; }
.theme-preview-aurora { border-radius: 8px; background: linear-gradient(145deg,#1677d2 0 43%,#fff 44%); }
.theme-preview-aurora i:nth-child(1) { left:7px; top:8px; width:24px; height:5px; border-radius:4px; background:#fff; }
.theme-preview-aurora i:nth-child(2) { left:8px; right:8px; bottom:7px; height:17px; border-radius:5px; background:#eaf3fb; }
.theme-preview-aurora i:nth-child(3) { right:8px; top:8px; width:14px; height:4px; border-radius:3px; background:#72d4c2; }
.theme-preview-landscape { background:#eef1ea; }
.theme-preview-landscape i:nth-child(1) { inset:0;background:linear-gradient(145deg,transparent 0 48%,#789184 49% 70%,transparent 71%);clip-path:polygon(0 100%,36% 32%,50% 62%,70% 18%,100% 100%); }
.theme-preview-landscape i:nth-child(2) { left:7px;top:8px;width:18px;height:4px;background:#355f4e; }
.theme-preview-landscape i:nth-child(3) { left:7px;right:7px;bottom:6px;height:1px;background:#94a399; }

/* ---------- 下载队列 ---------- */
.queue-fab {
    position: fixed; right: 20px; bottom: 96px; z-index: 150;
    width: 50px; height: 50px; border-radius: 50%; border: none;
    background: var(--hero-grad); color: #fff; cursor: pointer; box-shadow: var(--shadow-lg);
    display: none; place-items: center; transition: var(--transition);
}
.queue-fab.show { display: grid; }
.queue-fab .badge { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; border-radius: 999px; background: var(--danger); font-size: .68rem; display: grid; place-items: center; padding: 0 5px; font-weight: 700; }
.queue-panel {
    position: fixed; right: 20px; bottom: 96px; z-index: 160; width: min(400px, calc(100vw - 40px));
    max-height: 60vh; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden;
}
.queue-panel.open { display: flex; }
.queue-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: .95rem; }
.queue-body { overflow-y: auto; padding: 6px 0; }
.queue-item { padding: 10px 18px; display: flex; align-items: center; gap: 10px; font-size: .86rem; }
.queue-item .q-info { flex: 1; min-width: 0; }
.queue-item .q-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.queue-item .q-status { font-size: .76rem; color: var(--text-3); }
.progress { height: 5px; background: var(--bg-soft); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--teal)); border-radius: 99px; transition: width .3s; }

/* 下载中心 */
.downloads-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; margin-bottom: 16px; }
.downloads-head h2 { font-size: 1.2rem; }
.download-settings { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.download-settings label { color: var(--text-2); font-size: .8rem; display: grid; gap: 4px; }
.download-settings .select { min-width: 100px; padding: 7px 28px 7px 9px; }
.download-list { overflow: hidden; }

/* ---------- 播放器 ---------- */
.player-dock { position:fixed;left:50%;right:auto;bottom:16px;z-index:140;width:calc(100% - 40px);max-width:1040px;transform:translateX(-50%);background:var(--glass);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);backdrop-filter:blur(18px);overflow:hidden;display:none; }
.player-dock.show { display: block; }
.player-dock .aplayer { margin: 0; box-shadow: none; background: transparent; }
.player-dock .aplayer .aplayer-body { background: transparent; }
[data-theme="dark"] .player-dock .aplayer { color: var(--text); }
[data-theme="dark"] .player-dock .aplayer .aplayer-info .aplayer-music .aplayer-title,
[data-theme="dark"] .player-dock .aplayer .aplayer-info .aplayer-music .aplayer-author { color: var(--text); }
[data-theme="dark"] .player-dock .aplayer .aplayer-list ol li { border-top: 1px solid var(--border); color: var(--text-2); }
[data-theme="dark"] .player-dock .aplayer .aplayer-list ol li:hover,
[data-theme="dark"] .player-dock .aplayer .aplayer-list ol li.aplayer-list-light { background: var(--table-hover); }
[data-style="landscape"] .player-dock { max-width:1080px;border-radius:4px;background:var(--glass);box-shadow:var(--shadow); }
[data-style="bento"] .player-dock { max-width:1040px;border-radius:28px; }
[data-style="cassette"] .player-dock { max-width:1040px;border:2px solid var(--text);border-radius:12px;box-shadow:var(--shadow-lg); }
[data-style="atelier"] .player-dock { max-width:1160px;border-radius:2px;border-width:1px 0;background:var(--card); }
[data-style="nocturne"] .player-dock { max-width:1040px;border-color:rgba(140,167,255,.35);background:linear-gradient(135deg,rgba(13,20,39,.94),rgba(19,29,54,.9)); }
[data-style="candy"] .player-dock { max-width:1040px;border-radius:34px; }
[data-style="archive"] .player-dock { max-width:1040px;border:1px solid var(--text);border-radius:0;box-shadow:var(--shadow-lg); }
body.has-player { padding-bottom: 90px; }

/* ---------- 个人中心 ---------- */
.profile-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.profile-grid > *, #profile-content { min-width: 0; max-width: 100%; }
#profile-content .table-wrap { max-width: 100%; }
#profile-content .form-item, #profile-content .form-row { min-width: 0; }
.profile-card { text-align: center; padding: 28px 20px; }
.avatar-lg { width: 84px; height: 84px; border-radius: 50%; background: var(--hero-grad); color: #fff; display: grid; place-items: center; font-size: 2rem; font-weight: 700; margin: 0 auto 14px; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.stat-box { border-radius: var(--radius-sm); padding: 14px 10px; border: 1px solid var(--border); }
.stat-box .num { font-size: 1.35rem; font-weight: 700; }
.stat-box .lbl { font-size: .76rem; color: var(--text-2); margin-top: 2px; }
/* 拼色统计卡 */
.stat-blue { background: var(--primary-soft); } .stat-blue .num { color: var(--primary); }
.stat-teal { background: var(--teal-soft); } .stat-teal .num { color: var(--teal); }
.stat-amber { background: var(--amber-soft); } .stat-amber .num { color: var(--amber); }
.stat-coral { background: var(--coral-soft); } .stat-coral .num { color: var(--coral); }

.sub-nav { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.sub-nav .sub-tab { padding: 8px 16px; border-radius: 999px; font-size: .9rem; color: var(--text-2); cursor: pointer; transition: var(--transition); border: 1px solid transparent; }
.sub-nav .sub-tab:hover { background: var(--bg-soft); }
.sub-nav .sub-tab.active { background: var(--primary); color: #fff; font-weight: 600; }
.site-settings-toolbar { align-items:flex-start; gap:12px; flex-wrap:wrap; }
.site-settings-toolbar .sub-nav { margin-bottom:0; }

.signin-btn.done { background: var(--success); pointer-events: none; }

/* ---------- 后台管理布局 ---------- */
.admin-layout { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.admin-sidebar { background: var(--card); border-right: 1px solid var(--border); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; padding: 6px 10px 18px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.side-group { margin-bottom: 8px; }
.side-group-title { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: .78rem; color: var(--text-3); font-weight: 700; letter-spacing: 1px; }
.side-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-size: .92rem; cursor: pointer; transition: var(--transition); margin-bottom: 2px; }
.side-item:hover { background: var(--bg-soft); color: var(--text); }
.side-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.admin-main { padding: 24px 28px; min-width: 0; }
.admin-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.admin-topbar h2 { font-size: 1.3rem; }
.admin-topbar .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.admin-filter-tabs { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:7px !important; overflow-x:auto; border:0 !important; padding:0 !important; }
.admin-filter-tabs .parse-tab { flex:none; white-space:nowrap; justify-content:center; }

/* 仪表盘统计卡（拼色） */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 22px; }
.dash-card { border-radius: var(--radius); padding: 20px; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.dash-card::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .12); right: -30px; top: -30px; }
.dash-card .d-label { font-size: .82rem; opacity: .9; }
.dash-card .d-num { font-size: 1.9rem; font-weight: 700; margin-top: 4px; }
.dash-card .d-sub { font-size: .74rem; opacity: .85; margin-top: 4px; }
.dash-blue { background: linear-gradient(135deg, #1565c0, #2f8fe0); }
.dash-teal { background: linear-gradient(135deg, #0c8474, #16b39a); }
.dash-amber { background: linear-gradient(135deg, #c77f14, #e8ab3c); }
.dash-coral { background: linear-gradient(135deg, #d14f38, #f07a5f); }
.dash-green { background: linear-gradient(135deg, #1f7a4d, #35ab6f); }

.chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 10px 4px 0; }
.chart-bars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.chart-bars .bar { width: 100%; max-width: 38px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--primary), var(--teal)); min-height: 4px; transition: height .5s; }
.chart-bars .bar-lbl { font-size: .7rem; color: var(--text-3); white-space: nowrap; }
.chart-bars .bar-val { font-size: .72rem; color: var(--text-2); font-weight: 600; }

/* 开关 */
.switch { position: relative; width: 42px; height: 24px; flex: none; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: var(--transition); }
.switch .slider::before { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: var(--transition); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.switch-row:last-child { border-bottom: none; }
.switch-row .s-info .s-name { font-weight: 600; font-size: .94rem; }
.switch-row .s-info .s-desc { font-size: .78rem; color: var(--text-3); }
.source-config-list { display: grid; gap: 12px; }
.source-config { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.source-config summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 19px; cursor: pointer; user-select: none; }
.source-config summary::-webkit-details-marker { display: none; }
.source-config summary::before { content: ">"; color: var(--text-3); font-weight: 700; transition: transform var(--transition); }
.source-config[open] summary::before { transform: rotate(90deg); }
.source-config-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.source-config-title strong { display: flex; align-items: center; gap: 9px; }
.source-config-title small { color: var(--text-3); font-size: .78rem; font-weight: 400; }
.source-config-body { padding: 18px 20px 6px; border-top: 1px solid var(--border); background: var(--bg-soft); }
.user-status-switch { display:inline-block; vertical-align:middle; }
.user-status-switch input:disabled + .slider { opacity:.58; cursor:not-allowed; }

/* 截图预览 */
.shot-thumb { width: 74px; height: 50px; object-fit: cover; border-radius: 7px; cursor: zoom-in; border: 1px solid var(--border); }
.shot-view { max-width: 100%; max-height: 70vh; border-radius: var(--radius-sm); }

/* ---------- 安装向导 ---------- */
.install-wrap { max-width: 640px; margin: 0 auto; padding: 40px 20px; }
.install-head { text-align: center; margin-bottom: 30px; }
.install-head .brand-logo { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px; }
.install-head .brand-logo .icon { width: 30px; height: 30px; }
.install-head h1 { font-size: 1.5rem; }
.install-head p { color: var(--text-2); font-size: .9rem; margin-top: 6px; }
.steps { display: flex; justify-content: center; gap: 0; margin-bottom: 26px; }
.step { display: flex; align-items: center; }
.step .dot { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-soft); color: var(--text-3); display: grid; place-items: center; font-weight: 700; font-size: .88rem; border: 2px solid var(--border); transition: var(--transition); }
.step .lbl { font-size: .82rem; color: var(--text-3); margin: 0 8px; }
.step .line { width: 46px; height: 2px; background: var(--border); margin-right: 8px; }
.step.active .dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.step.active .lbl { color: var(--primary); font-weight: 600; }
.step.done .dot { background: var(--success); border-color: var(--success); color: #fff; }
.check-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 4px; border-bottom: 1px solid var(--border); font-size: .92rem; }
.check-row:last-child { border-bottom: none; }
.check-row .c-ok { color: var(--success); display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.check-row .c-no { color: var(--danger); display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.radio-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.radio-card { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 16px; cursor: pointer; transition: var(--transition); }
.radio-card:hover { border-color: var(--primary); }
.radio-card.sel { border-color: var(--primary); background: var(--primary-soft); }
.radio-card h4 { font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.radio-card p { font-size: .8rem; color: var(--text-2); margin-top: 6px; }
.install-done { text-align: center; padding: 10px 0; }
.done-icon { width: 74px; height: 74px; border-radius: 50%; background: var(--success-soft); color: var(--success); display: grid; place-items: center; margin: 0 auto 18px; }
.done-icon .icon { width: 38px; height: 38px; }
.addr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.addr-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 16px; text-align: left; transition: var(--transition); cursor: pointer; }
.addr-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.addr-card .a-type { font-size: .78rem; color: var(--text-3); }
.addr-card .a-url { font-weight: 700; color: var(--primary); margin-top: 4px; word-break: break-all; }

/* ---------- 页脚 ---------- */
.footer { margin-top: 60px; padding: 26px 0; border-top: 1px solid var(--border); text-align: center; color: var(--text-3); font-size: .82rem; }
.footer-line { min-height: 1.6em; }
.footer-link { color: var(--primary); transition: color var(--transition); }
.footer-link:hover { color: var(--primary-2); text-decoration: underline; }
.footer-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 1.55em; height: 1.55em; margin: 0 .18em; border-radius: 50%; color: var(--primary); background: var(--primary-soft); vertical-align: -.35em; transition: var(--transition); }
.footer-icon-link:hover { color: #fff; background: var(--primary); transform: translateY(-1px); }
.footer-icon-link .icon { width: .95em; height: .95em; }
.favorite-tabs { margin-bottom: 14px; }
.collection-favorite-list { display: grid; gap: 12px; }
.collection-favorite-item { display: flex; align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.collection-favorite-cover { width: 58px; height: 58px; border-radius: 9px; object-fit: cover; flex: none; background: var(--bg-soft); }
.collection-favorite-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.collection-favorite-info strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collection-favorite-info span { color: var(--text-3); font-size: .8rem; }

/* ---------- 赞赏 ---------- */
.reward-upload-grid, .reward-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.reward-hero { position: relative; overflow: hidden; min-height: 220px; padding: 36px; display: flex; align-items: center; justify-content: space-between; background: var(--hero-grad); color: #fff; }
.reward-copy { position: relative; z-index: 2; max-width: 620px; }
.reward-kicker { display: inline-block; margin-bottom: 8px; font-size: .72rem; letter-spacing: .2em; opacity: .75; }
.reward-copy h2 { font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.05; }
.reward-copy p { margin-top: 12px; max-width: 520px; opacity: .86; }
.reward-glow { position: absolute; right: 5%; opacity: .16; transform: rotate(-10deg); }
.reward-heart { width: 180px; height: 180px; fill: currentColor; animation: rewardPulse 2.8s ease-in-out infinite; }
@keyframes rewardPulse { 50% { transform: scale(1.08); opacity: .75; } }
.reward-grid { margin-top: 20px; }
.reward-card { padding: 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); text-align: center; transition: transform .3s ease, box-shadow .3s ease; }
.reward-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.reward-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; font-size: 1rem; }
.reward-alipay .reward-brand { color: #1677ff; } .reward-wechat .reward-brand { color: #16a34a; } .reward-qq .reward-brand { color: #ef4444; }
.reward-qr-button { position: relative; width: min(100%, 280px); aspect-ratio: 1; margin: auto; padding: 10px; border: 0; border-radius: calc(var(--radius) - 4px); background: #fff; cursor: zoom-in; overflow: hidden; }
.reward-qr-button img { width: 100%; height: 100%; object-fit: contain; }
.reward-qr-button span { position: absolute; inset: auto 12px 12px; padding: 5px 10px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.62); opacity: 0; transform: translateY(8px); transition: .25s ease; }
.reward-qr-button:hover span { opacity: 1; transform: none; }
.reward-card p { margin-top: 12px; color: var(--text-3); font-size: .82rem; }
.qq-group-float { position:fixed;z-index:132;right:22px;bottom:22px;display:flex;align-items:center;gap:9px;padding:9px 14px 9px 9px;border:1px solid rgba(255,189,20,.48);border-radius:999px;background:color-mix(in srgb,var(--card) 90%,transparent);color:var(--text);font-size:.82rem;font-weight:700;box-shadow:0 14px 38px rgba(18,18,20,.2);backdrop-filter:blur(16px);transition:transform .25s ease,box-shadow .25s ease;}
.qq-group-float:hover { transform:translateY(-4px) scale(1.02);box-shadow:0 20px 46px rgba(18,18,20,.28); }
.qq-group-float svg { width:42px;height:42px;flex:none;filter:drop-shadow(0 5px 6px rgba(18,18,20,.18)); }
.site-front.has-player .qq-group-float { bottom:92px; }

/* ---------- 节拍方舟：Bento 模块 ---------- */
[data-style="bento"] { --font: Inter, "Segoe UI", sans-serif; --radius: 24px; --radius-sm: 16px; --primary: #5b5ce2; --primary-2: #3435ae; --primary-soft: #ececff; --hero-grad: linear-gradient(135deg,#5b5ce2,#8b5cf6 55%,#ec4899); --shadow: 0 12px 32px rgba(76,70,170,.1); --shadow-lg: 0 24px 60px rgba(76,70,170,.18); }
[data-theme="light"][data-style="bento"] { --bg:#f2f2f8;--bg-soft:#e9e9f2;--card:#fff;--card-2:#f8f8fc;--text:#171725;--text-2:#505068;--text-3:#83839a;--border:#dedeee;--input-bg:#fff;--glass:rgba(255,255,255,.78); }
[data-theme="dark"][data-style="bento"] { --bg:#101018;--bg-soft:#191925;--card:#171722;--card-2:#20202d;--text:#f7f7ff;--text-2:#b9b9ce;--text-3:#85859c;--border:#303044;--input-bg:#20202d;--glass:rgba(16,16,24,.8); }
[data-style="bento"] .topbar { margin:14px auto 0; width:min(1040px,calc(100% - 40px)); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); }
[data-style="bento"] .topbar-inner { height:64px; }
[data-style="bento"] .nav { margin-left:auto; }
[data-style="bento"] .hero { margin:16px auto 0; width:min(1040px,calc(100% - 40px)); border-radius:32px; padding:20px 0 76px; }
[data-style="bento"] .parse-box { margin-top:-56px; border-radius:28px; }
[data-style="bento"] .song-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:12px; }
[data-style="bento"] .song-item { border:1px solid var(--border); border-radius:18px; background:var(--card-2); }
[data-style="bento"] .btn,[data-style="bento"] .icon-btn { border-radius:14px; }
[data-style="bento"] .profile-grid { grid-template-columns:280px minmax(0,1fr); }
[data-style="bento"] .admin-sidebar { margin:14px; border-radius:24px; height:calc(100vh - 28px); }

/* ---------- 磁带日记：复古拼贴 ---------- */
[data-style="cassette"] { --font:"Trebuchet MS","Segoe UI",sans-serif;--radius:12px;--radius-sm:7px;--primary:#d04a2d;--primary-2:#9c2f19;--primary-soft:#ffe1d4;--hero-grad:linear-gradient(135deg,#f1b24a,#e7633d 55%,#8f3b2b);--shadow:5px 7px 0 rgba(80,45,25,.14);--shadow-lg:10px 14px 0 rgba(80,45,25,.16); }
[data-theme="light"][data-style="cassette"] { --bg:#f2e8cf;--bg-soft:#e8d9b8;--card:#fff9e9;--card-2:#f8efd8;--text:#38291d;--text-2:#705b47;--text-3:#9b826a;--border:#cdbb96;--input-bg:#fffaf0;--glass:rgba(255,249,233,.9); }
[data-theme="dark"][data-style="cassette"] { --bg:#201913;--bg-soft:#2c2119;--card:#2a2119;--card-2:#35291f;--text:#fff3d6;--text-2:#d4bea0;--text-3:#9f876d;--border:#55422f;--input-bg:#35291f;--glass:rgba(32,25,19,.9); }
[data-style="cassette"] body { background-image:repeating-linear-gradient(0deg,transparent 0 28px,rgba(80,45,25,.045) 29px); }
[data-style="cassette"] .topbar { position:relative; width:min(1040px,calc(100% - 40px)); border:0; background:transparent; }
[data-style="cassette"] .brand-logo { border-radius:50%; background:radial-gradient(circle,#f6c354 0 18%,#352b25 19% 48%,#d04a2d 49% 56%,#352b25 57%); }
[data-style="cassette"] .hero { width:min(1040px,calc(100% - 40px)); margin:16px auto 0; border:3px solid var(--text); border-radius:15px; box-shadow:var(--shadow-lg); transform:rotate(-.35deg); }
[data-style="cassette"] .hero { padding-bottom:58px; }
[data-style="cassette"] .hero::after { width:210px;height:120px;left:auto;right:7%;bottom:26px;border-radius:12px;background:linear-gradient(#302921 0 18%,#e7d0a5 19% 70%,#302921 71%);box-shadow:inset 0 0 0 7px #c34c31;transform:rotate(3deg); }
[data-style="cassette"] .parse-box { margin-top:-38px; border:2px solid var(--text); transform:rotate(.2deg); }
[data-style="cassette"] .parse-tab.active { box-shadow:3px 3px 0 var(--text); }
[data-style="cassette"] .song-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px; }
[data-style="cassette"] .song-item { border:1px dashed var(--border);background:var(--card-2);transform:rotate(var(--tilt,0deg)); }
[data-style="cassette"] .song-item:nth-child(odd){--tilt:-.25deg}.song-item:nth-child(even){--tilt:.25deg}
[data-style="cassette"] .song-cover { border-radius:3px; }
[data-style="cassette"] .btn { box-shadow:2px 2px 0 currentColor; }

/* ---------- 声色工坊：艺术画布 ---------- */
[data-style="atelier"] { --font:Georgia,"Noto Serif SC",serif;--radius:2px;--radius-sm:1px;--primary:#135d66;--primary-2:#0a3f45;--primary-soft:#dcefed;--hero-grad:linear-gradient(110deg,#154f55 0 45%,#e9aa55 45% 68%,#b34742 68%);--shadow:0 8px 0 rgba(20,40,38,.08);--shadow-lg:0 18px 0 rgba(20,40,38,.1); }
[data-theme="light"][data-style="atelier"] { --bg:#f4f0e6;--bg-soft:#e9e2d4;--card:#faf7ef;--card-2:#f1eadc;--text:#202b29;--text-2:#56635f;--text-3:#89918c;--border:#c8c0af;--input-bg:transparent;--glass:rgba(244,240,230,.92); }
[data-theme="dark"][data-style="atelier"] { --bg:#171d1c;--bg-soft:#202827;--card:#1c2423;--card-2:#26302e;--text:#f3eddf;--text-2:#c4bcad;--text-3:#8d8a80;--border:#3b4845;--input-bg:transparent;--glass:rgba(23,29,28,.92); }
[data-style="atelier"] .container { max-width:1200px; }
[data-style="atelier"] .topbar { position:relative;width:min(1160px,calc(100% - 40px));background:transparent;border:0;border-bottom:1px solid var(--text);border-radius:0; }
[data-style="atelier"] .topbar-inner { height:82px; }
[data-style="atelier"] .nav { margin-left:auto;gap:20px; }
[data-style="atelier"] .nav a { border-radius:0;background:transparent!important;border-bottom:1px solid transparent; }
[data-style="atelier"] .nav a.active { border-color:var(--primary); }
[data-style="atelier"] .hero { margin:16px auto 0;width:min(1160px,calc(100% - 40px));min-height:135px;padding:22px 5%;clip-path:polygon(0 0,94% 0,100% 20%,97% 100%,5% 96%); }
[data-style="atelier"] .hero h1 { font-size:clamp(3rem,7vw,6.4rem);line-height:.82;font-weight:400;max-width:65%; }
[data-style="atelier"] .parse-box { margin:30px auto 0;display:grid;grid-template-columns:180px 1fr;gap:24px;background:transparent;box-shadow:none;border:0;border-top:1px solid var(--text); }
[data-style="atelier"] .parse-tabs { flex-direction:column; }
[data-style="atelier"] .parse-tab { border:0;border-radius:0;justify-content:flex-start;background:transparent;border-bottom:1px solid var(--border); }
[data-style="atelier"] .parse-input-row,[data-style="atelier"] .parse-hint,[data-style="atelier"] .search-history { grid-column:2; }
[data-style="atelier"] .input,[data-style="atelier"] .select,[data-style="atelier"] .textarea { border-width:0 0 1px;border-radius:0;padding-left:0; }
[data-style="atelier"] .song-list { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:20px; }
[data-style="atelier"] .song-item { flex-direction:column;align-items:stretch;border:0;background:var(--card-2);padding:16px; }
[data-style="atelier"] .song-cover { width:100%;height:auto;aspect-ratio:1;border-radius:0; }
[data-style="atelier"] .song-cover-wrap { width:100%;height:auto;aspect-ratio:1; }

/* ---------- 夜航星图：深空 ---------- */
[data-style="nocturne"] { color-scheme:dark;--font:"Segoe UI",sans-serif;--radius:18px;--radius-sm:10px;--primary:#8ca7ff;--primary-2:#c4d1ff;--primary-soft:rgba(112,140,255,.15);--hero-grad:radial-gradient(circle at 65% 20%,#263b84,#101b42 48%,#070b20);--shadow:0 0 0 1px rgba(130,157,255,.16),0 14px 42px rgba(0,0,20,.3);--shadow-lg:0 0 40px rgba(104,129,255,.2),0 30px 80px rgba(0,0,20,.45);--bg:#070b18;--bg-soft:#10172c;--card:#0d1427;--card-2:#131d36;--text:#eef2ff;--text-2:#bdc7e6;--text-3:#7885aa;--border:#273454;--input-bg:#111a31;--glass:rgba(7,11,24,.78); }
[data-theme="light"][data-style="nocturne"] { --bg:#e8edff;--bg-soft:#dce4ff;--card:#f8f9ff;--card-2:#eef2ff;--text:#111a36;--text-2:#465174;--text-3:#7883a5;--border:#c5d0ef;--input-bg:#fff;--glass:rgba(238,242,255,.82); }
[data-style="nocturne"] body { background-image:radial-gradient(circle at 10% 20%,rgba(112,140,255,.18) 0 1px,transparent 2px),radial-gradient(circle at 75% 35%,rgba(255,255,255,.15) 0 1px,transparent 2px);background-size:90px 90px,140px 140px; }
[data-style="nocturne"] .topbar { border:1px solid rgba(140,167,255,.25); }
[data-style="nocturne"] .hero { min-height:175px;padding:22px 0 88px; }
[data-style="nocturne"] .hero::after { width:440px;height:440px;left:auto;right:-100px;bottom:-260px;border:1px solid rgba(255,255,255,.25);background:transparent;box-shadow:0 0 0 40px rgba(140,167,255,.04),0 0 0 80px rgba(140,167,255,.025); }
[data-style="nocturne"] .hero h1 { font-size:clamp(2.6rem,6vw,5rem);letter-spacing:.08em;text-shadow:0 0 36px rgba(140,167,255,.45); }
[data-style="nocturne"] .parse-box { margin-top:-68px;background:linear-gradient(135deg,rgba(13,20,39,.94),rgba(19,29,54,.88));backdrop-filter:blur(22px);border-color:rgba(140,167,255,.35); }
[data-style="nocturne"] .song-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px; }
[data-style="nocturne"] .song-item { border:1px solid var(--border);border-radius:14px;background:linear-gradient(135deg,var(--card-2),transparent); }
[data-style="nocturne"] .btn,[data-style="nocturne"] .icon-btn { box-shadow:inset 0 0 18px var(--primary-soft); }

/* ---------- 软糖电台：弹性泡泡 ---------- */
[data-style="candy"] { --font:"Nunito","Segoe UI",sans-serif;--radius:30px;--radius-sm:18px;--primary:#ff4f9a;--primary-2:#d62d79;--primary-soft:#ffe1ef;--hero-grad:linear-gradient(135deg,#ff74ad,#8b7cff 52%,#42d7c4);--shadow:0 12px 28px rgba(211,68,136,.12);--shadow-lg:0 24px 52px rgba(131,91,218,.2); }
[data-theme="light"][data-style="candy"] { --bg:#fff3f8;--bg-soft:#ffe7f1;--card:#fffafd;--card-2:#fff0f7;--text:#392838;--text-2:#70566e;--text-3:#9f839b;--border:#f2cfe0;--input-bg:#fff;--glass:rgba(255,250,253,.82); }
[data-theme="dark"][data-style="candy"] { --bg:#241722;--bg-soft:#30202e;--card:#2b1d29;--card-2:#382535;--text:#fff0f7;--text-2:#e0bcd1;--text-3:#a98198;--border:#53384c;--input-bg:#382535;--glass:rgba(36,23,34,.82); }
[data-style="candy"] .topbar { border:0;box-shadow:0 8px 30px rgba(255,79,154,.08); }
[data-style="candy"] .brand-logo { border-radius:50% 50% 45% 55%;animation:candyFloat 4s ease-in-out infinite; }
@keyframes candyFloat { 50%{transform:translateY(-3px) rotate(4deg)} }
[data-style="candy"] .hero { border-radius:30px;padding:18px 0 62px; }
[data-style="candy"] .hero::before { width:300px;height:180px;border-radius:45% 55% 60% 40%;animation:candyBlob 7s ease-in-out infinite; }
@keyframes candyBlob { 50%{transform:scale(1.15) rotate(12deg)} }
[data-style="candy"] .parse-box { border-radius:34px; }
[data-style="candy"] .parse-tab,[data-style="candy"] .btn,[data-style="candy"] .icon-btn { border-radius:999px; }
[data-style="candy"] .btn:hover { transform:translateY(-3px) scale(1.02); }
[data-style="candy"] .song-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:14px; }
[data-style="candy"] .song-item { border:0;border-radius:24px;background:var(--card-2); }
[data-style="candy"] .song-cover { border-radius:50%; }

/* ---------- 声音档案：索引资料库 ---------- */
[data-style="archive"] { --font:"IBM Plex Mono","Consolas",monospace;--radius:0;--radius-sm:0;--primary:#b13b2e;--primary-2:#76241d;--primary-soft:#f1d8d3;--hero-grad:linear-gradient(90deg,#24211d,#4b443a);--shadow:none;--shadow-lg:6px 6px 0 rgba(0,0,0,.12); }
[data-theme="light"][data-style="archive"] { --bg:#e9e5da;--bg-soft:#ded8c9;--card:#f7f3e8;--card-2:#eee9dc;--text:#24211d;--text-2:#5e584e;--text-3:#8e8779;--border:#aaa394;--input-bg:#f7f3e8;--glass:rgba(233,229,218,.95); }
[data-theme="dark"][data-style="archive"] { --bg:#191816;--bg-soft:#23211e;--card:#211f1c;--card-2:#2a2723;--text:#eee9dc;--text-2:#c0b9aa;--text-3:#888173;--border:#49443c;--input-bg:#2a2723;--glass:rgba(25,24,22,.95); }
[data-style="archive"] .topbar { position:relative;border:0;border-bottom:3px double var(--text);border-radius:0; }
[data-style="archive"] .topbar-inner { height:76px; }
[data-style="archive"] .brand { text-transform:uppercase;letter-spacing:.12em; }
[data-style="archive"] .brand-logo { border-radius:0;background:var(--text); }
[data-style="archive"] .nav { margin-left:auto; }
[data-style="archive"] .nav a { border-radius:0;border-left:1px solid var(--border); }
[data-style="archive"] .hero { background:var(--card);color:var(--text);padding:14px 0;border:1px solid var(--text); }
[data-style="archive"] .hero::before,[data-style="archive"] .hero::after { display:none; }
[data-style="archive"] .hero h1::before { content:"ARCHIVE / ";font-size:.34em;color:var(--primary);vertical-align:middle; }
[data-style="archive"] .parse-box { margin:24px auto 0;border:1px solid var(--text);box-shadow:var(--shadow-lg); }
[data-style="archive"] .parse-tab { border-radius:0;text-transform:uppercase; }
[data-style="archive"] .input,[data-style="archive"] .select,[data-style="archive"] .textarea,[data-style="archive"] .btn { border-radius:0; }
[data-style="archive"] .song-item { counter-increment:archiveSong; }
[data-style="archive"] .song-item::before { content:counter(archiveSong,decimal-leading-zero);color:var(--primary);font-size:.72rem; }
[data-style="archive"] .song-cover { border-radius:0;filter:grayscale(.35); }
[data-style="archive"] .card { box-shadow:none; }

/* ---------- 环形声场：轨道舞台 ---------- */
[data-style="orbit"] { --font:"Avenir Next","Segoe UI",sans-serif;--radius:22px;--radius-sm:12px;--primary:#ec6c3e;--primary-2:#bd4522;--primary-soft:#ffe4d8;--hero-grad:radial-gradient(circle at 72% 50%,#f6b657 0 10%,#252934 10.5% 28%,#ec6c3e 28.5% 31%,#252934 31.5% 55%,#12151d 56%);--shadow:0 12px 36px rgba(28,30,38,.12);--shadow-lg:0 28px 70px rgba(28,30,38,.22); }
[data-theme="light"][data-style="orbit"] { --bg:#f0ede7;--bg-soft:#e5e0d8;--card:#fffdf8;--card-2:#f7f2ea;--text:#272a32;--text-2:#5f626b;--text-3:#8e8e92;--border:#d3cdc2;--input-bg:#fffdf8;--glass:rgba(255,253,248,.84); }
[data-theme="dark"][data-style="orbit"] { --bg:#11131a;--bg-soft:#1a1d26;--card:#181b23;--card-2:#222630;--text:#fff8ed;--text-2:#d2c8b9;--text-3:#928a80;--border:#373b46;--input-bg:#222630;--glass:rgba(17,19,26,.84); }
[data-style="orbit"] .topbar { margin:14px auto 0;width:min(1040px,calc(100% - 40px));border-radius:999px;border:1px solid var(--border);box-shadow:var(--shadow); }
[data-style="orbit"] .nav { margin-left:auto; }
[data-style="orbit"] .nav a { border-radius:999px; }
[data-style="orbit"] .brand-logo { border-radius:50%;background:radial-gradient(circle,#f6b657 0 20%,#222 21% 47%,#ec6c3e 48% 54%,#222 55%); }
[data-style="orbit"] .hero { margin:16px auto 0;width:min(1040px,calc(100% - 40px));min-height:180px;border-radius:36px;padding:24px 5% 80px; }
[data-style="orbit"] .hero h1,[data-style="orbit"] .hero p,[data-style="orbit"] .hero-badges { max-width:48%; }
[data-style="orbit"] .parse-box { margin-top:-58px;border-radius:999px;padding:16px 20px; }
[data-style="orbit"] .parse-tabs { margin-bottom:10px;justify-content:center; }
[data-style="orbit"] .parse-input-row .input { border-radius:999px; }
[data-style="orbit"] .btn,[data-style="orbit"] .icon-btn,[data-style="orbit"] .parse-tab { border-radius:999px; }
[data-style="orbit"] .song-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px; }
[data-style="orbit"] .song-item { border:0;border-radius:999px;background:var(--card-2); }
[data-style="orbit"] .song-cover { border-radius:50%; }
[data-style="orbit"] .player-dock { max-width:1040px;border-radius:999px; }

html[data-style] .brand-logo.has-site-icon { background: transparent; padding: 0; overflow: hidden; box-shadow: none; }
html[data-style] .brand-logo.has-site-icon img { width: 100%; height: 100%; object-fit: contain; }

/* New theme previews */
.theme-preview-bento{background:linear-gradient(135deg,#5b5ce2,#ec4899)}.theme-preview-bento i{border-radius:6px;background:#fff}.theme-preview-bento i:nth-child(1){inset:8px 45% 30px 8px}.theme-preview-bento i:nth-child(2){inset:8px 8px 8px 58%}.theme-preview-bento i:nth-child(3){inset:38px 45% 8px 8px}
.theme-preview-cassette{background:#e8d2a5}.theme-preview-cassette i:nth-child(1){inset:9px 12px;border:4px solid #3b3026;background:#cf5738}.theme-preview-cassette i:nth-child(2){width:15px;height:15px;border-radius:50%;left:20px;top:22px;background:#222}.theme-preview-cassette i:nth-child(3){width:15px;height:15px;border-radius:50%;right:20px;top:22px;background:#222}
.theme-preview-atelier{background:linear-gradient(110deg,#154f55 0 48%,#e9aa55 48% 70%,#b34742 70%)}.theme-preview-atelier i{background:#fff}.theme-preview-atelier i:nth-child(1){inset:9px 55% 28px 9px}.theme-preview-atelier i:nth-child(2){inset:36px 35% 9px 9px}.theme-preview-atelier i:nth-child(3){inset:9px 9px 9px 72%}
.theme-preview-nocturne{background:radial-gradient(circle at 65% 30%,#5065c4,#101a40 45%,#070b20)}.theme-preview-nocturne i{border:1px solid #8ca7ff;border-radius:50%}.theme-preview-nocturne i:nth-child(1){width:28px;height:28px;right:8px;bottom:5px}.theme-preview-nocturne i:nth-child(2){width:12px;height:12px;left:12px;top:12px;background:#fff}.theme-preview-nocturne i:nth-child(3){width:4px;height:4px;left:38px;top:22px;background:#fff}
.theme-preview-candy{background:linear-gradient(135deg,#ff74ad,#8b7cff,#42d7c4)}.theme-preview-candy i{border-radius:50%;background:#fff}.theme-preview-candy i:nth-child(1){width:28px;height:28px;left:8px;top:9px}.theme-preview-candy i:nth-child(2){width:20px;height:20px;right:10px;top:18px}.theme-preview-candy i:nth-child(3){height:12px;left:12px;right:12px;bottom:8px;border-radius:999px}
.theme-preview-archive{background:#e9e5da;border-color:#24211d}.theme-preview-archive i{background:#24211d;border-radius:0}.theme-preview-archive i:nth-child(1){height:4px;left:7px;right:7px;top:9px}.theme-preview-archive i:nth-child(2){height:1px;left:7px;right:7px;top:24px}.theme-preview-archive i:nth-child(3){height:18px;width:5px;left:11px;bottom:6px;background:#b13b2e}
.theme-preview-orbit{background:radial-gradient(circle at 65% 50%,#f6b657 0 10%,#252934 11% 30%,#ec6c3e 31% 35%,#12151d 36%)}.theme-preview-orbit i:nth-child(1){height:10px;left:8px;right:34px;top:12px;border-radius:999px;background:#fff}.theme-preview-orbit i:nth-child(2){height:7px;left:8px;right:45px;top:28px;border-radius:999px;background:#fff}.theme-preview-orbit i:nth-child(3){display:none}

@media(max-width:860px){.reward-grid,.reward-upload-grid{grid-template-columns:repeat(2,minmax(0,1fr))}[data-style="atelier"] .song-list{grid-template-columns:repeat(2,minmax(0,1fr))}[data-style="bento"] .admin-sidebar{margin:0;border-radius:0}}
@media(max-width:640px){.reward-grid,.reward-upload-grid{grid-template-columns:1fr}.reward-hero{padding:28px 22px}.reward-heart{width:110px;height:110px}[data-style="bento"] .song-list,[data-style="cassette"] .song-list,[data-style="atelier"] .song-list,[data-style="nocturne"] .song-list,[data-style="candy"] .song-list,[data-style="orbit"] .song-list{grid-template-columns:1fr}[data-style="atelier"] .parse-box{display:block}[data-style="atelier"] .parse-tabs{flex-direction:row;overflow-x:auto}[data-style="atelier"] .hero h1,[data-style="orbit"] .hero h1,[data-style="orbit"] .hero p,[data-style="orbit"] .hero-badges{max-width:100%}[data-style="orbit"] .parse-box{border-radius:26px}[data-style="orbit"] .song-item{border-radius:20px}}

/* 移动端导航始终独立固定在底部，播放器显示状态不改变其位置。 */
@media screen and (max-width: 1024px) {
    .site-front .topbar {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .site-front .topbar .nav {
        position: fixed !important;
        top: auto !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important;
        z-index: 300 !important;
        display: grid !important;
        grid-template-columns: repeat(var(--nav-items, 5), minmax(0, 1fr)) !important;
        gap: 3px !important;
        padding: 6px !important;
        margin: 0 !important;
        border: 1px solid var(--border) !important;
        border-radius: 16px !important;
        background: var(--glass) !important;
        box-shadow: var(--shadow-lg) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    .site-front .topbar .nav a {
        display: block !important;
        padding: 8px 3px !important;
        text-align: center !important;
        font-size: .78rem !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
    }
    .site-front .player-dock {
        bottom: calc(62px + env(safe-area-inset-bottom)) !important;
        z-index: 290 !important;
    }
    .site-front {
        padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }
    .site-front.has-player {
        padding-bottom: calc(158px + env(safe-area-inset-bottom));
    }
}

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
    .site-front { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
    .site-front.has-player { padding-bottom: calc(158px + env(safe-area-inset-bottom)); }
    .site-front .topbar .nav {
        position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 150;
        display: grid; grid-template-columns: repeat(var(--nav-items, 5), 1fr); gap: 3px; padding: 6px;
        border: 1px solid var(--border); border-radius: 16px; background: var(--glass);
        box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    }
    .site-front .topbar .nav a { padding: 8px 3px; text-align: center; font-size: .78rem; border-radius: 10px; }
    .player-dock,[data-style="landscape"] .player-dock,[data-style="bento"] .player-dock,[data-style="cassette"] .player-dock,[data-style="atelier"] .player-dock,[data-style="nocturne"] .player-dock,[data-style="candy"] .player-dock,[data-style="archive"] .player-dock,[data-style="orbit"] .player-dock { width:calc(100% - 16px); bottom:calc(82px + env(safe-area-inset-bottom)); border-radius:16px; }
    html[data-style] .profile-grid { grid-template-columns: minmax(0, 1fr); }
    html[data-style] .upload-card-grid { grid-template-columns: 1fr; }
    html[data-style] .song-list { grid-template-columns: minmax(0, 1fr); }
    html[data-style] .song-item { flex-direction: row; align-items: center; flex-wrap: wrap; min-width: 0; max-width: 100%; transform: none; }
    html[data-style] .song-cover { width: 42px; height: 42px; aspect-ratio: auto; flex: none; }
    html[data-style] .song-cover-wrap { width: 42px; height: 42px; }
    html[data-style] .song-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
    .collection-favorite-item { flex-wrap: wrap; min-width: 0; max-width: 100%; }
    .collection-favorite-item > .flex { width: 100%; justify-content: flex-end; }
    .profile-records { overflow: visible; }
    .profile-records .table { display: block; width: 100%; min-width: 0; }
    .profile-records .table thead { display: none; }
    .profile-records .table tbody { display: grid; gap: 10px; width: 100%; }
    .profile-records .table tr { display: block; width: 100%; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-2); }
    .profile-records .table tr:hover { background: var(--card-2); }
    .profile-records .table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; padding: 7px 0; border-bottom: 1px dashed var(--border); text-align: right; white-space: normal; overflow-wrap: anywhere; }
    .profile-records .table td:last-child { border-bottom: 0; }
    .profile-records .table td::before { content: attr(data-label); flex: 0 0 72px; color: var(--text-3); font-size: .78rem; font-weight: 600; text-align: left; }
    .profile-records .table td[colspan] { display: block; text-align: center; }
    .profile-records .table td[colspan]::before { display: none; }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { position: fixed; z-index: 180; left: 0; top: 0; bottom: 0; width: 240px; transform: translateX(-100%); transition: transform var(--transition); box-shadow: var(--shadow-lg); height: 100vh; }
    .admin-sidebar.open { transform: none; }
    .admin-main { padding: 18px 16px; }
    .theme-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    html { font-size: 14px; }
    html[data-style] .topbar { width: calc(100% - 28px); margin: 8px auto 0; }
    .hero { width: calc(100% - 28px); margin-top: 10px; padding: 14px 0 54px; }
    .hero h1 { font-size: 1.5rem; }
    .parse-box { padding: 16px; margin-top: -36px; }
    html[data-style] .parse-box > .parse-tabs { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding: 0 0 4px; border-right: 0; scrollbar-width: thin; }
    html[data-style] .parse-box > .parse-tabs .parse-tab { flex: none; white-space: nowrap; justify-content: center; padding: 6px 12px; }
    html[data-style] .parse-input-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; min-width: 0; }
    html[data-style] .parse-input-row #parse-input { grid-column: 1 / 5; grid-row: 1; min-width: 0; max-width: none; }
    html[data-style] .parse-input-row #parse-btn { grid-column: 5 / 7; grid-row: 1; width: 100%; min-width: 0; padding-inline: 8px; }
    html[data-style] .parse-input-row { grid-template-columns: 1.3fr 1.15fr .85fr; }
    html[data-style] .parse-input-row #parse-input { grid-column: 1 / 3; }
    html[data-style] .parse-input-row #parse-btn { grid-column: 3 / 4; }
    html[data-style] .parse-input-row .smart-select-source { grid-column: 1; grid-row: 2; }
    html[data-style] .parse-input-row .smart-select-quality { grid-column: 2; grid-row: 2; }
    html[data-style] .parse-input-row #page-size-select { grid-column: 3; grid-row: 2; }
    html[data-style] .parse-input-row .smart-select-page { grid-column: 3; grid-row: 2; }
    html[data-style] .parse-input-row .select { min-width: 0; max-width: none !important; padding: 9px 24px 9px 9px; font-size: .82rem; }
    html[data-style] .parse-input-row .smart-select { min-width: 0; max-width: none !important; }
    html[data-style] .parse-input-row .smart-select-button { min-height: 38px; padding: 6px 17px 6px 6px; gap: 3px; font-size: .76rem; }
    html[data-style] .parse-input-row .smart-select-button > span { overflow: visible; text-overflow: clip; white-space: nowrap; }
    html[data-style] .parse-input-row .smart-select-img { width: 16px; height: 16px; }
    html[data-style] .parse-input-row .smart-select-source .smart-select-button .smart-select-img { display: block; flex: 0 0 16px; }
    html[data-style] .parse-input-row .smart-select-source .smart-select-button > span { overflow: visible; text-overflow: clip; white-space: nowrap; }
    html[data-style] .parse-input-row .smart-select-source .smart-select-button { padding-left: 5px; padding-right: 17px; gap: 3px; }
    html[data-style] .parse-input-row .smart-select-source .source-status-dot { width: 6px; height: 6px; box-shadow: none; }
    html[data-style] .parse-input-row .quality-mark,
    html[data-style] .parse-input-row .smart-select-button .quality-mark { width: 18px; height: 18px; flex-basis: 18px; border-radius: 5px; font-size: .45rem; }
    html[data-style] .parse-input-row .smart-select-chevron { right: 7px; width: 8px; height: 8px; }
     html[data-style] .parse-input-row .smart-select-menu { left: auto; right: 0; min-width: 150px; }
     html[data-style] .parse-input-row .smart-select-source .smart-select-menu {
         left: 0; right: auto; min-width: 0; width: min(150px, calc(100vw - 28px)); max-width: calc(100vw - 28px);
     }
    html[data-style] .parse-input-row .input,
    html[data-style] .parse-input-row .btn { min-height: 42px; }
    html[data-style] .parse-hint { margin-top: 8px; line-height: 1.45; }
     .qq-group-float { right:14px;bottom:calc(82px + env(safe-area-inset-bottom));padding:8px; }
     .qq-group-float span { display:none; }
     .qq-group-float svg { width:40px;height:40px; }
     .site-front.has-player .qq-group-float { bottom:calc(156px + env(safe-area-inset-bottom)); }
    .song-cover { width: 42px; height: 42px; }
    .song-cover-wrap { width: 42px; height: 42px; }
    .song-item { flex-wrap: wrap; min-width: 0; padding: 11px 12px; gap: 10px; }
    .song-actions { width: 100%; justify-content: flex-end; gap: 6px; }
    .song-actions > button { min-width: 34px; min-height: 32px; padding-inline: 8px; }
    .song-actions .btn-text { display: none; }
    .flex-between { flex-wrap: wrap; }
    .profile-card + .card { padding: 16px; }
    .sub-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .sub-nav .sub-tab { flex: none; white-space: nowrap; }
    #profile-content .device-copy, #profile-content .muted { overflow-wrap: anywhere; }
    .list-header { flex-direction: column; align-items: center; text-align: center; padding: 18px; }
    .list-header .ops { justify-content: center; }
    .form-row { grid-template-columns: 1fr; }
    .source-cost-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .source-cost-name { grid-column: 1 / -1; padding-top: 0; }
    .radio-cards, .addr-cards { grid-template-columns: 1fr; }
    .steps { flex-wrap: wrap; gap: 8px; justify-content: center; }
    .step .line { display: none; }
    .user-chip .uc-name { display: none; }
    .container { padding: 0 14px; }
    .topbar-inner { gap: 10px; }
    .downloads-head { align-items: stretch; flex-direction: column; }
    .theme-picker { grid-template-columns: 1fr; }
    .theme-option { grid-template-columns: 82px 1fr; }
    .theme-preview { width: 82px; }
    .detail-grid { grid-template-columns: 1fr; }
    .device-item { align-items: flex-start; flex-wrap: wrap; }
    .device-item .btn { margin-left: auto; }
    .mobile-cards { overflow: visible; }
    .mobile-cards .table { display: block; }
    .mobile-cards .table thead { display: none; }
    .mobile-cards .table tbody { display: grid; gap: 12px; padding: 12px; }
    .mobile-cards .table tr { display: block; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; background: var(--card-2); box-shadow: var(--shadow); }
    .mobile-cards .table tr:hover { background: var(--card-2); }
    .mobile-cards .table td { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--border); text-align: right; max-width: none !important; }
    .mobile-cards .table td:last-child { border-bottom: 0; }
    .mobile-cards .table td::before { content: attr(data-label); color: var(--text-3); font-size: .78rem; font-weight: 600; text-align: left; flex: 0 0 76px; }
    .mobile-cards .table td[colspan] { display: block; text-align: center; }
    .mobile-cards .table td[colspan]::before { display: none; }
    .mobile-cards .copy-col { position: static; box-shadow: none; background: transparent; }

    [data-style="landscape"] .topbar-inner { height: 64px; }
    [data-style="landscape"] .hero { width: calc(100% - 28px); margin-top: 10px; min-height: 120px; padding: 14px 22px 34px; }
    [data-style="bento"] .hero { width: calc(100% - 28px); margin-top: 10px; padding-top: 16px; padding-bottom: 66px; }
    [data-style="cassette"] .hero { width: calc(100% - 28px); margin-top: 10px; padding-bottom: 50px; }
    [data-style="atelier"] .hero { width: calc(100% - 28px); margin-top: 10px; min-height: 125px; padding: 16px 5%; }
    [data-style="nocturne"] .hero { min-height: 165px; padding: 16px 0 76px; }
    [data-style="candy"] .hero { padding: 14px 0 54px; }
    [data-style="archive"] .hero { padding: 10px 0; }
    [data-style="orbit"] .hero { width: calc(100% - 28px); margin-top: 10px; min-height: 165px; padding: 18px 5% 68px; }
    [data-style="landscape"] .hero h1, [data-style="landscape"] .hero p, [data-style="landscape"] .hero-badges { max-width: 100%; }
    [data-style="landscape"] .hero h1 { font-size: 2.5rem; letter-spacing: .08em; }
    [data-style="landscape"] .hero::before, [data-style="landscape"] .hero::after { width: 85%; height: 44%; top: auto; bottom: 0; }
    [data-style="landscape"] .parse-box { margin-top: 14px; display: block; }
    [data-style="landscape"] .parse-tabs { border: 0; border-bottom: 1px solid var(--border); }
    [data-style="landscape"] .parse-tab { white-space: nowrap; }
    [data-style="landscape"] .song-list { grid-template-columns: 1fr; padding: 8px 14px; }
}