/* 🏰 记忆宫殿 — 页面布局 */

/* ── 页头 ── */
.header{text-align:center;padding:28px 20px 0;animation:fadeUp .6s var(--ease-out) both}
.header-icon{font-size:48px;display:block;margin-bottom:8px;animation:gentleBob 4s ease-in-out infinite}
h1{font-family:'Noto Serif SC',serif;font-size:1.5em;font-weight:700;color:var(--c-primary);letter-spacing:.03em}
.header p{font-size:13px;color:var(--c-text-muted);margin-top:4px}
.back-link{position:absolute;top:16px;left:16px;color:var(--c-text-muted);text-decoration:none;font-size:14px;padding:10px 16px;border-radius:8px;transition:all .2s;z-index:100}
.back-link:hover{background:var(--c-primary-pale);color:var(--c-primary)}

/* ── 顶部统计栏 ── */
.stats-bar{display:flex;justify-content:center;gap:16px;padding:12px 20px;animation:fadeUp .6s var(--ease-out) .1s both}
.stats-bar .sitem{text-align:center;font-size:12px;color:var(--c-text-soft)}
.stats-bar .sval{font-size:18px;font-weight:700;color:var(--c-primary);display:block}

/* ── Tab导航 ── */
.tabs{display:flex;padding:16px 20px 0;gap:4px;animation:fadeUp .6s var(--ease-out) .15s both}
.tab-btn{flex:1;padding:12px 8px;border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--c-text-muted);cursor:pointer;border-bottom:3px solid transparent;transition:all .3s;border-radius:8px 8px 0 0;white-space:nowrap}
.tab-btn:hover{color:var(--c-text-soft);background:rgba(224,123,57,.04)}
.tab-btn.active{color:var(--c-primary);border-bottom-color:var(--c-primary);background:rgba(224,123,57,.06)}
.tab-btn .badge{display:inline-block;background:var(--c-primary);color:white;font-size:10px;padding:1px 6px;border-radius:8px;margin-left:4px;font-weight:700;vertical-align:middle}
.tab-page{display:none}
.tab-page.active{display:block;animation:fadeUp .4s var(--ease-out) both}

/* ── 主内容区 ── */
.content{max-width:600px;margin:0 auto;padding:12px 16px 40px}

/* ── 响应式 ── */
@media(max-width:420px){
  .tabs{padding:12px 12px 0}
  .tab-btn{font-size:12px;padding:10px 4px}
  .content{padding:10px 12px 40px}
  .room-name{width:75px}
  .btn-label{display:none}
}

@media(min-width:768px){
  .content{max-width:1060px;padding:16px 28px 50px}
  .header{padding:36px 20px 0}
  .header-icon{font-size:56px}
  h1{font-size:1.8em}
  .stats-bar{gap:28px;padding:16px 20px}
  .stats-bar .sval{font-size:22px}
  .tabs{max-width:1060px;margin:0 auto;padding:20px 28px 0;gap:6px}
  .tab-btn{font-size:14px;padding:14px 16px}
  .card{padding:22px;margin-bottom:16px}
  .card-title{font-size:15px}
  .btn-group{max-width:500px}
  .btn{padding:10px 20px;font-size:14px}
  .stats-grid{gap:12px}
  .stat-value{font-size:1.4em}
  .preview-item{padding:12px 18px}
  .config-toggle{max-width:900px;margin:0 auto 12px}
  .config-body{max-width:900px;margin:0 auto}
  .room-progress-item{padding:10px 14px}
  .footer{padding:28px 0 40px}
}

@media(min-width:1100px){
  .content{max-width:1060px}
  .tabs{max-width:1060px}
  .config-toggle{max-width:1060px}
  .config-body{max-width:1060px}
  .stats-grid{grid-template-columns:repeat(3,1fr);max-width:500px}
  .btn-group{max-width:560px}
}