/* museoutlook 催眠小窗 · 温馨可爱主题 */
:root{
  --bg:#FFF7EE;
  --bg2:#FFEFD9;
  --card:#FFFFFF;
  --line:#F3E0C3;
  --ink:#6B4632;
  --dim:#B08D6A;
  --peach:#FF9E7D;
  --peach-deep:#F4794F;
  --pink:#FFB3C1;
  --moon:#FFD66B;
  --lav:#8E7CC3;
  --shadow:0 6px 20px rgba(180,120,70,.10);
  --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(1200px 500px at 50% -80px, #FFE9C9 0%, transparent 60%),
    var(--bg);
  padding-bottom:132px; min-height:100vh;
}
/* subtle twinkling stars on top */
.night-sky{
  position:fixed; inset:0 0 auto 0; height:190px; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(2px 2px at 12% 30%, #FFD66B 60%, transparent 61%),
    radial-gradient(1.6px 1.6px at 28% 62%, #FFB3C1 60%, transparent 61%),
    radial-gradient(2px 2px at 47% 22%, #FFF 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 66% 48%, #FFD66B 60%, transparent 61%),
    radial-gradient(2px 2px at 82% 28%, #FFB3C1 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 92% 60%, #FFF 60%, transparent 61%);
  opacity:.85;
}
header.hero, nav.tabs, section, footer{position:relative; z-index:1}

/* header */
header.hero{
  max-width:760px; margin:0 auto; padding:34px 18px 6px;
  display:flex; align-items:center; gap:14px;
}
.mascot{flex:0 0 auto; filter:drop-shadow(0 4px 8px rgba(232,169,61,.35)); animation:floaty 4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.hero-text h1{font-size:26px; margin:0 0 4px; letter-spacing:.5px}
.hero-text h1::after{content:" 💤"; font-size:20px}
.sub{color:var(--dim); font-size:13px}

/* tabs */
.tabs{max-width:760px; margin:14px auto 0; padding:0 18px; display:flex; gap:10px}
.tab{
  flex:1; border:2px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:999px; padding:11px 0; font-size:15px; cursor:pointer;
  box-shadow:var(--shadow); transition:all .18s;
}
.tab.active{background:var(--peach); border-color:var(--peach); color:#fff; font-weight:700; transform:scale(1.02)}

/* toolbar */
.toolbar{max-width:760px; margin:14px auto 0; padding:0 18px; display:flex; gap:8px}
input[type=search]{
  flex:1; background:var(--card); border:2px solid var(--line); border-radius:999px;
  color:var(--ink); padding:11px 16px; font-size:14px; outline:none; box-shadow:var(--shadow);
}
input[type=search]:focus{border-color:var(--peach)}
/* museoutlook 专区 */
.zone-hero{max-width:760px; margin:18px auto 0; padding:0 18px; text-align:center}
.zone-title{font-size:21px; font-weight:800}
.zone-sub{color:var(--dim); font-size:13px; margin-top:6px}
.zone-hero .tip{font-size:12px; color:var(--dim); margin-top:8px; line-height:1.8}
.zone-hero .tip b{color:var(--peach-deep)}
.folder-grid{
  max-width:760px; margin:16px auto 0; padding:0 18px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px;
}
.folder{
  background:var(--card); border:2px solid var(--line); border-radius:var(--radius);
  padding:20px 12px 16px; text-align:center; cursor:pointer;
  box-shadow:var(--shadow); transition:all .16s;
}
.folder:hover{border-color:var(--peach); transform:translateY(-3px)}
.folder .f-ico{font-size:40px; filter:drop-shadow(0 3px 5px rgba(232,169,61,.3))}
.folder .f-name{font-weight:800; font-size:14px; margin:10px 0 5px; line-height:1.5}
.folder .f-meta{font-size:12px; color:var(--dim)}
.zone-book-head{max-width:760px; margin:16px auto 0; padding:0 18px}
#zone-book-title h2{font-size:16px; color:var(--peach-deep); margin:12px 4px 10px; display:flex; align-items:center; gap:6px}
#zone-book-title h2::before{content:"📁"}
#zone-tracks{max-width:760px; margin:0 auto; padding:0 18px}

/* list */
main{max-width:760px; margin:0 auto; padding:6px 18px}
main h2{font-size:15px; color:var(--peach-deep); margin:24px 4px 10px; display:flex; align-items:center; gap:6px}
main h2::before{content:"📖"}
.count-pill{background:#FFF1DC; border:1px solid var(--moon); border-radius:999px; font-size:11px; padding:2px 9px; color:var(--ink); font-weight:600}
.track{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--card); border:2px solid var(--line); border-radius:var(--radius);
  padding:12px 14px; margin:8px 0; cursor:pointer; box-shadow:var(--shadow); transition:all .15s;
}
.track:hover{border-color:var(--peach); transform:translateY(-1px)}
.track.playing{border-color:var(--peach); background:#FFF6E8}
.track .play-ico{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--peach); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px;
}
.track.playing .play-ico{background:var(--peach-deep)}
.track .t{font-size:14px; line-height:1.5; flex:1}
.track .d{color:var(--dim); font-size:12px; white-space:nowrap; background:#FFF6E8; border-radius:999px; padding:3px 10px}
.msg{color:var(--dim); padding:44px 0; text-align:center; font-size:14px; line-height:2}

/* cards (upload) */
.card{
  max-width:760px; margin:16px auto 0; padding:20px 18px;
  background:var(--card); border:2px solid var(--line); border-radius:22px; box-shadow:var(--shadow);
}
section#tab-upload{padding:0 18px}
section#tab-upload .card{margin-left:auto; margin-right:auto}
.card h2{margin:0 0 8px; font-size:17px}
.hint{color:var(--dim); font-size:13px; line-height:1.8; margin:6px 0 14px}
.hint code{background:#FFF1DC; border-radius:6px; padding:1px 6px; font-size:12px; color:var(--peach-deep)}
.field{margin:12px 0}
.field label{display:block; font-size:14px; font-weight:700; margin-bottom:6px}
.field input[type=text], .field input[type=password]{
  width:100%; border:2px solid var(--line); border-radius:14px; padding:11px 14px;
  font-size:14px; color:var(--ink); outline:none; background:#FFFEFB;
}
.field input:focus{border-color:var(--peach)}
.tip{font-size:12px; color:var(--dim); margin-top:6px}
#drop{
  border:2.5px dashed var(--peach); border-radius:var(--radius); background:#FFF9F1;
  padding:26px 16px; text-align:center; cursor:pointer; color:var(--ink); font-size:14px; line-height:2;
  transition:all .15s; outline:none;
}
#drop:hover, #drop:focus, #drop.over{background:#FFF1DC; border-color:var(--peach-deep)}
.drop-icon{font-size:34px}
.fileinfo{
  margin-top:10px; background:#FFF6E8; border:1.5px solid var(--moon); border-radius:14px;
  padding:10px 14px; font-size:13px; line-height:1.8;
}
.progress{margin:14px 0}
.progress-track{background:#FDEEDC; border-radius:999px; height:26px; overflow:hidden; position:relative}
.progress-bar{
  height:100%; width:0%; background:linear-gradient(90deg,var(--peach),var(--pink));
  border-radius:999px; transition:width .2s; display:flex; align-items:center; justify-content:flex-end;
  font-size:14px; padding-right:6px;
}
.progress-text{text-align:center; font-size:12px; color:var(--dim); margin-top:6px}
.btn-big{
  width:100%; border:none; border-radius:999px; padding:14px; font-size:16px; font-weight:800;
  background:linear-gradient(135deg,var(--peach),var(--peach-deep)); color:#fff; cursor:pointer;
  box-shadow:0 6px 16px rgba(244,121,79,.35); transition:transform .15s;
}
.btn-big:hover{transform:scale(1.015)}
.btn-big:disabled{opacity:.55; cursor:wait; transform:none}
.btn-small{
  border:2px solid var(--line); background:var(--card); border-radius:999px;
  padding:8px 16px; font-size:13px; cursor:pointer; color:var(--ink); margin-top:10px;
}
.btn-small:hover{border-color:var(--peach)}
.result{margin-top:14px; border-radius:14px; padding:13px 15px; font-size:13.5px; line-height:1.9}
.result.ok{background:#F0FAF0; border:1.5px solid #A8D8A8; color:#3E7A3E}
.result.err{background:#FFF0F0; border:1.5px solid #F0B0B0; color:#A34A4A}
.result a{color:var(--peach-deep); word-break:break-all}
.codebox{background:#2E2A26; border-radius:14px; padding:6px 0 14px; overflow:hidden}
.codebox pre{
  margin:0; padding:14px 16px; overflow-x:auto; color:#FFE9C9;
  font-size:12.5px; line-height:1.7; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.codebox .btn-small{margin-left:16px; background:#4a4239; color:#FFE9C9; border-color:#6b5f52}

/* footer */
footer{max-width:760px; margin:34px auto 0; padding:0 18px; text-align:center; font-size:13px; color:var(--dim); line-height:2}
footer .dim{font-size:12px}

/* player */
#player{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  background:#FFFDF8F5; border-top:2px solid var(--line);
  backdrop-filter:blur(10px); box-shadow:0 -6px 24px rgba(180,120,70,.12);
}
#player .in{max-width:760px; margin:0 auto; padding:10px 18px 14px}
#now{font-size:13px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:8px}
#now b{color:var(--ink)}
#player .row{display:flex; align-items:center; gap:8px}
#player button{
  background:var(--card); color:var(--ink); border:2px solid var(--line);
  border-radius:999px; padding:7px 12px; font-size:13px; cursor:pointer; flex:0 0 auto;
}
#player button.main{background:linear-gradient(135deg,var(--peach),var(--peach-deep)); border:none; color:#fff; font-weight:800; min-width:76px; box-shadow:0 4px 12px rgba(244,121,79,.35)}
#player select{
  background:var(--card); color:var(--ink); border:2px solid var(--line);
  border-radius:999px; padding:6px 6px; font-size:12px; flex:0 0 auto; max-width:96px;
}
#player input[type=range]{flex:1; accent-color:var(--peach-deep); min-width:60px}
#player .time{font-size:12px; color:var(--dim); min-width:88px; text-align:right; flex:0 0 auto}

@media (max-width:560px){
  #player select{max-width:76px}
  #player .time{display:none}
  .hero-text h1{font-size:22px}
}

/* 管理员曲目控制（仅登录后显示） */
.admin-ctl{display:inline-flex; gap:6px; margin-left:10px; vertical-align:middle}
.abtn{
  background:#fff; border:1.5px solid var(--line); border-radius:999px;
  width:28px; height:28px; font-size:13px; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); transition:all .15s;
}
.abtn:hover{transform:scale(1.12); border-color:var(--peach)}