/* 基础 */
:root{ --bg:#ffffff; --fg:#111; --muted:#6b7280; --card:#f8fafc; --line:#e5e7eb; --primary:#0ea5e9; --radius:14px; --space:16px; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,system-ui,Arial,'Noto Sans SC','PingFang SC','Hiragino Sans GB',sans-serif; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* 布局 */
.container{ max-width:720px; margin:0 auto; padding:24px var(--space); }
.site-header{ position:sticky; top:0; backdrop-filter:saturate(180%) blur(10px); background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--line); padding:14px var(--space); display:flex; align-items:center; gap:12px; z-index:10; }
.site-header h1{ font-size:20px; margin:0; font-weight:700; }
.subtitle{ color:var(--muted); margin:4px 0 0 0; font-size:14px; }
.site-footer{ border-top:1px solid var(--line); padding:18px var(--space); text-align:center; color:var(--muted); }
.with-back .back-btn{ appearance:none; border:1px solid var(--line); background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; }
/* 标题区分隔竖线 */
.v-sep{ display:inline-block; width:1px; height:22px; background:var(--line); margin:0 6px; }
/* 顶部导航按钮禁用态 */
.with-back .back-btn[disabled],
.with-back .back-btn[aria-disabled="true"]{ opacity:0.45; cursor:not-allowed; }

/* 首页卡片 */
.section-title{ font-size:16px; color:#111; margin:6px 0 12px; font-weight:600; }
.card-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.card{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); overflow:hidden; }
.card-link{ padding:16px; display:flex; justify-content:space-between; align-items:center; }
.card-title{ font-size:16px; font-weight:600; }
.card-meta{ color:var(--muted); font-size:14px; margin-top:6px; }
.card-arrow{ font-size:22px; color:var(--muted); }

/* 列表 */
.list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.list-item{ display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:#fff; }
.list-link{ font-weight:600; }
.list-meta{ color:var(--muted); font-size:13px; }

/* 目录网格（醒来页面） */
.day-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:12px; }
/* 按钮为正方形：优先用 aspect-ratio，旧版 Safari 用 ::before 回退方案 */
.day-btn{ position:relative; display:block; width:100%; /* 稍微降低高度 */ aspect-ratio: 1 / 0.75; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--fg); text-align:center; overflow:hidden; box-sizing:border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
/* 回退：用内边距撑出正方形 */
.day-btn::before{ content:""; display:block; /* 与上面的纵横比匹配的回退高度 */ padding-top:75%; }
/* 内容绝对居中显示 */
.day-btn > span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:600; }
.day-btn:active{ transform: translateY(1px); }
/* 完成态：降低不透明度并灰化 */
.day-btn.done{ opacity:0.55; filter: grayscale(0.6); }

/* 播放器 */
.player{ display:grid; gap:16px; }
.controls{ border:1px solid var(--line); border-radius:var(--radius); padding:16px; background:#fff; display:grid; gap:12px; }
.time-row{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
#seek{ width:100%; }
.btn-row{ display:flex; gap:10px; justify-content:center; }
.btn{ appearance:none; border:none; background:transparent; padding:8px 12px; border-radius:12px; cursor:pointer; color:var(--fg); display:inline-flex; align-items:center; justify-content:center; gap: 4px; font-size: 14px; font-weight: 500; }
.btn.primary{ padding: 8px; border-radius: 50%; }
.btn.primary svg{ transform: scale(1.2); }
.btn:active{ transform:translateY(1px); }
.extra-row{ text-align:center; }
.link{ color:var(--primary); text-decoration:underline; }

/* 触控优化 */
@media (hover:none){
  .btn{ padding:12px 16px; }
  #seek{ height:28px; }
}

/* 密码弹窗（遮罩 + 模态框） */
.pw-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter: blur(2px); display:flex; align-items:center; justify-content:center; padding:24px; z-index:1000; }
.pw-modal{ width:min(480px, 100%); background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,0.12); }
.pw-modal h2{ font-size:16px; margin:0 0 10px; }
.pw-input{ width:100%; padding:12px 14px; border:1.5px solid #cbd5e1; /* 比 var(--line) 更清晰一点 */ border-radius:12px; outline:none; font-size:16px; transition:border-color .15s ease, box-shadow .15s ease; background:#fff; color:var(--fg); }
.pw-input::placeholder{ color:#9ca3af; }
.pw-input:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.pw-input-error{ border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,0.15); }
.pw-error{ color:#ef4444; font-size:13px; min-height:18px; margin:8px 2px 0; }
.pw-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.pw-btn{ appearance:none; border:1px solid var(--line); background:#fff; color:var(--fg); padding:10px 14px; border-radius:12px; cursor:pointer; font-size:14px; font-weight:500; }
.pw-btn.primary{ background: var(--primary); color:#fff; border-color: var(--primary); }
.pw-btn:active{ transform: translateY(1px); }

/* 解释与链接区域间距（醒来页面） */
.after-grid{ margin-top: 20px; }

@media (prefers-reduced-motion: reduce){
  .pw-input{ transition:none; }
}