:root {
  --accent: #4cd84f;
  --secondary: #7857ff;
  --page: #071321;
  --panel: rgba(8, 22, 38, .72);
  --line: rgba(255,255,255,.12);
  --muted: #9db4c9;
  --text: #eef7ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; min-height:100vh; color:var(--text); background:var(--page); font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 40%), radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 44%), linear-gradient(180deg, #081728, #040c17 70%); }
a { color:inherit; }
img { max-width:100%; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.more-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px clamp(18px,4vw,48px); background:rgba(4,12,22,.74); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.more-brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; }
.more-brand img { width:34px; height:34px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.25); }
.more-back { padding:8px 14px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:13px; text-decoration:none; transition:border-color .2s,color .2s; }
.more-back:hover { border-color:var(--accent); color:var(--accent); }

.more-main { width:min(1180px,92vw); margin:0 auto; padding:40px 0 90px; }
.more-intro { max-width:840px; padding:20px 0 8px; }
.more-kicker { margin:0 0 8px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
.more-intro h1 { margin:0; font-size:clamp(32px,5vw,52px); line-height:1.1; letter-spacing:.01em; }
.more-subtitle { margin:14px 0 0; color:var(--muted); font-size:15px; line-height:1.8; overflow-wrap:anywhere; }
.more-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 30px; }
.more-tab { padding:8px 16px; border:1px solid var(--line); border-radius:999px; color:#d8e7f4; background:rgba(255,255,255,.03); text-decoration:none; font-size:13px; transition:border-color .2s,color .2s,background .2s; }
.more-tab:hover { border-color:rgba(76,216,79,.6); color:#fff; }
.more-tab[aria-current="page"] { border-color:var(--accent); color:#052012; background:var(--accent); font-weight:700; }
.more-content { display:grid; gap:24px; }
.more-status, .more-empty { margin:0; padding:36px 24px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); text-align:center; background:rgba(255,255,255,.02); }
.more-note { margin:0 0 22px; color:var(--muted); font-size:13px; line-height:1.7; }

.more-panel { padding:clamp(16px,3vw,28px); border:1px solid var(--line); border-radius:22px; background:var(--panel); backdrop-filter:blur(20px); }
.more-section-title { display:flex; align-items:baseline; gap:10px; margin:0 0 16px; font-size:18px; }
.more-section-title small { color:var(--accent); font-size:12px; font-weight:700; }

.more-graph-hint { margin:10px 0 0; color:var(--muted); font-size:12px; text-align:center; }

.more-player { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:22px; padding:16px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg, rgba(76,216,79,.07), rgba(120,87,255,.08)); }
.more-now { display:flex; align-items:center; gap:14px; flex:1 1 260px; min-width:0; }
.more-now-cover { flex:0 0 auto; width:64px; height:64px; border-radius:14px; object-fit:cover; background:rgba(255,255,255,.08); }
.more-now-info { min-width:0; }
.more-now-info .more-kicker { margin-bottom:4px; }
.more-now-info h2 { margin:0; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.more-now-info p { margin:4px 0 0; color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.more-audio { flex:1 1 280px; min-width:200px; height:40px; accent-color:var(--accent); }
.more-audio-status { margin:12px 0 0; color:#ffd0b6; font-size:12px; line-height:1.6; }
.more-empty p { margin:0; }
.more-empty p + p { margin-top:6px; }
.more-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.more-filter { padding:6px 13px; border:1px solid var(--line); border-radius:999px; color:#d7e6f3; background:rgba(255,255,255,.04); font:inherit; font-size:12px; cursor:pointer; transition:border-color .2s,color .2s,background .2s; }
.more-filter:hover { border-color:rgba(76,216,79,.6); color:#fff; }
.more-filter.is-active { border-color:var(--accent); color:#052012; background:var(--accent); font-weight:700; }
.more-count { margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
.more-track-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.more-track-item[hidden] { display:none; }
.more-track { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:12px; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:14px; color:var(--text); background:rgba(255,255,255,.025); font:inherit; text-align:left; cursor:pointer; transition:border-color .2s,background .2s; }
.more-track:hover { border-color:rgba(76,216,79,.5); background:rgba(255,255,255,.05); }
.more-track.is-active { border-color:var(--accent); background:rgba(76,216,79,.1); }
.more-track-cover { width:40px; height:40px; border-radius:10px; object-fit:cover; background:rgba(255,255,255,.08); }
.more-track-info { min-width:0; }
.more-track-info strong { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.more-track-info span { display:block; margin-top:3px; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.more-track-state { padding:3px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:11px; white-space:nowrap; }
.more-track.is-active .more-track-state { border-color:transparent; color:#052012; background:var(--accent); font-weight:700; }

.more-oasis-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; }
.more-oasis-card { display:flex; flex-direction:column; gap:10px; text-decoration:none; }
.more-oasis-art { position:relative; aspect-ratio:195/270; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.04); }
.more-oasis-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.more-oasis-art .cover { opacity:.72; transition:transform .35s,opacity .35s; }
.more-oasis-art .hero { opacity:0; transform:translateY(10px); transition:opacity .3s,transform .3s; }
.more-oasis-art .logo { object-fit:contain; padding:14%; }
.more-oasis-card:hover .cover { opacity:.35; transform:scale(1.03); }
.more-oasis-card:hover .hero { opacity:1; transform:none; }
.more-oasis-meta h2 { margin:0; font-size:15px; }
.more-oasis-meta p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.more-badge { display:inline-block; margin-top:8px; padding:3px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:11px; }
.more-badge.is-ready { border-color:rgba(76,216,79,.45); color:var(--accent); }

.more-map { width:100%; height:clamp(380px,52vh,540px); border-radius:16px; background:rgba(2,10,20,.35); }
.more-place-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.more-place-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.025); }
.more-place-photo { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:rgba(255,255,255,.05); }
.more-place-photo.is-empty { display:grid; place-items:center; color:var(--muted); font-size:12px; }
.more-place-body { padding:14px 16px; }
.more-place-body h2 { margin:0; font-size:16px; }
.more-place-body p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.65; overflow-wrap:anywhere; }
.personal-map-tip { display:flex; flex-direction:column; width:220px; }
.personal-map-tip img { display:block; width:100%; height:128px; object-fit:cover; }
.personal-map-tip-text { display:flex; flex-direction:column; gap:4px; padding:10px 12px; }
.personal-map-tip-text strong { font-size:14px; }
.personal-map-tip-text span { color:#a9c2d8; font-size:12px; line-height:1.5; }

.more-timeline { position:relative; display:grid; gap:0; margin:0; padding:0 0 0 24px; list-style:none; }
.more-timeline::before { content:""; position:absolute; top:6px; bottom:6px; left:7px; width:1px; background:linear-gradient(var(--accent), rgba(76,216,79,.08)); }
.more-timeline li { position:relative; padding:0 0 26px 18px; }
.more-timeline li::before { content:""; position:absolute; left:-21px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(76,216,79,.15); }
.more-timeline time { display:block; margin-bottom:5px; color:var(--accent); font-size:13px; font-weight:700; letter-spacing:.04em; }
.more-timeline p { margin:0; color:#dceaf6; font-size:15px; line-height:1.75; overflow-wrap:anywhere; }
.more-timeline .is-upcoming::before { background:var(--muted); box-shadow:0 0 0 4px rgba(157,180,201,.12); }
.more-timeline .is-upcoming time, .more-timeline .is-upcoming p { color:var(--muted); }

.more-overview { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.more-overview-card { display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.03); text-decoration:none; transition:border-color .2s,transform .2s; }
.more-overview-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.more-overview-card h2 { margin:0; font-size:18px; }
.more-overview-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.more-overview-card span { margin-top:auto; padding-top:8px; color:var(--accent); font-size:12px; font-weight:700; }

.more-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; width:min(1180px,92vw); margin:0 auto; padding:26px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.more-footer p { margin:0; }
.more-footer a { color:var(--accent); text-decoration:none; }

/* Light preview theme */
body.theme-light {
  --page:#ffffff;
  --panel:rgba(255,255,255,.88);
  --line:rgba(21,36,53,.12);
  --muted:#61758a;
  --text:#152435;
}
body.theme-light::before {
  background:
    radial-gradient(circle at 12% 0%, rgba(76,216,79,.10), transparent 40%),
    radial-gradient(circle at 88% 8%, rgba(105,217,248,.14), transparent 44%),
    linear-gradient(180deg,#fff,#f7fafc 70%);
}
body.theme-light .more-header { background:rgba(255,255,255,.88); box-shadow:0 1px 0 rgba(21,36,53,.04); }
body.theme-light .more-brand img { border-color:rgba(21,36,53,.12); }
body.theme-light .more-back { color:#52687c; }
body.theme-light .more-back:hover { color:var(--accent); }
body.theme-light .more-kicker, body.theme-light .more-section-title small { color:#238c3c; }
body.theme-light .more-tab { color:#43596d; background:#fff; }
body.theme-light .more-tab:hover { color:var(--text); border-color:rgba(35,140,60,.5); }
body.theme-light .more-status, body.theme-light .more-empty { background:#fbfdfe; }
body.theme-light .more-panel { background:rgba(255,255,255,.9); box-shadow:0 18px 50px rgba(21,36,53,.05); }
body.theme-light .more-map { background:radial-gradient(ellipse at center, #fff, #f3f9fc 76%); border:1px solid var(--line); }
body.theme-light .more-overview-card, body.theme-light .more-place-card { background:#fff; box-shadow:0 8px 26px rgba(21,36,53,.05); }
body.theme-light .more-player { background:linear-gradient(135deg, rgba(76,216,79,.10), rgba(105,217,248,.13)); }
body.theme-light .more-now-cover, body.theme-light .more-track-cover { background:#edf4f8; }
body.theme-light .more-audio-status { color:#c24132; }
body.theme-light .more-filter { color:#43596d; background:#fff; }
body.theme-light .more-filter:hover { color:var(--text); border-color:rgba(35,140,60,.5); }
body.theme-light .more-track { background:#fff; box-shadow:0 4px 16px rgba(21,36,53,.04); }
body.theme-light .more-track:hover { background:#f4fbf7; }
body.theme-light .more-track.is-active { background:rgba(76,216,79,.15); }
body.theme-light .more-track-state { color:#677b8e; }
body.theme-light .more-oasis-art { background:#eef5f9; }
body.theme-light .more-badge.is-ready { color:#238c3c; border-color:rgba(35,140,60,.35); }
body.theme-light .more-timeline p { color:#33485b; }
body.theme-light .more-timeline time { color:#238c3c; }
body.theme-light .more-footer a, body.theme-light .more-overview-card span { color:#238c3c; }
body.theme-light .personal-map-tip-text span { color:#61758a; }
body.theme-light .more-oasis-card { color:var(--text); }

@media (max-width:760px) {
  .more-header { padding:10px 4vw; }
  .more-brand img { width:30px; height:30px; }
  .more-brand span { font-size:14px; }
  .more-back { padding:6px 11px; font-size:12px; }
  .more-main { padding:24px 0 60px; }
  .more-intro { padding-top:8px; }
  .more-subtitle { font-size:14px; }
  .more-tabs { margin:20px 0 22px; }
  .more-panel { padding:14px; border-radius:18px; }
  .more-map { height:420px; }
  .more-player { padding:12px; }
  .more-now-cover { width:52px; height:52px; }
  .more-audio { flex-basis:100%; min-width:0; }
  .more-track-list { grid-template-columns:1fr; }
  .more-oasis-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
  .more-place-grid { grid-template-columns:1fr; }
  .more-count { margin-left:0; width:100%; }
}
.more-track.is-external { text-decoration:none; cursor:pointer; }
.more-track.is-external .more-track-state { border-color:rgba(255,95,122,.5); color:#ffb3c1; }

/* ===== 手机浏览器适配：触控目标与刘海/底部安全区 ===== */
@media (max-width:760px) {
  .more-header { padding-top:calc(10px + env(safe-area-inset-top)); }
  .more-tab, .more-filter { min-height:40px; padding:10px 16px; }
  .more-back { min-height:40px; padding:10px 14px; }
  .more-brand { min-height:40px; }
  .more-footer a { display:inline-flex; align-items:center; min-height:40px; padding:8px 6px; }
  .more-track { min-height:56px; }
  .more-main { padding-bottom:calc(60px + env(safe-area-inset-bottom)); }
  .more-footer { padding-bottom:calc(40px + env(safe-area-inset-bottom)); }
  .more-timeline { padding-left:20px; }
  .more-timeline li { padding:0 0 22px 14px; }
}