/* ============================================================
 * 「佳怡也要好好学习⭐」· 视图样式 views.css v3.3
 * 覆盖: 进度页(圆环/时间轴/月历/徽章/小结) / 错题本 / 我的 /
 *       歌词卡片 / 歌曲主题渐变 / 响应式断点 / 夜读对比度
 * ============================================================ */

/* ============ 进度页 ============ */
.pg-count-big{font-size:44px;font-weight:800;color:var(--pink-deep)}
.pg-count-sub{color:var(--ink2);font-size:14px}
.stage-track{display:flex;height:14px;border-radius:99px;overflow:hidden;margin:14px 0 6px;position:relative}
.stage-track div{height:100%}
.stage-track .s-prep{background:#F6D9B0}.stage-track .s-base{background:var(--pink)}
.stage-track .s-inten{background:var(--blue)}.stage-track .s-sprint{background:var(--coral)}
.stage-track .s-mock{background:var(--lav)}
.stage-cursor{position:absolute;top:-4px;width:2px;height:22px;background:var(--ink);border-radius:2px}
/* v3.3.1: 五段旅程标签 grid 均分, 名字下方标注时间范围 */
.stage-labels{display:grid;grid-template-columns:repeat(5,1fr);font-size:11px;color:var(--ink2);margin-top:8px}
.stage-labels span{text-align:center;display:flex;flex-direction:column;gap:2px;min-width:0}
.stage-labels .sd{font-size:10px;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.ring-row{display:flex;gap:14px;justify-content:space-around;flex-wrap:wrap}
.ring-item{text-align:center;width:120px}
.ring-item svg{margin:0 auto}
.ring-num{font-size:20px;font-weight:700}
.ring-name{font-size:13px;color:var(--ink2)}
.bar-all{height:10px;border-radius:99px;background:var(--pink-soft);margin-top:14px;overflow:hidden}
.bar-all i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--coral));border-radius:99px}
/* v3.3.1: 徽章改等宽网格, 尺寸统一整齐对齐(2列 → 宽屏4列) */
.badge-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:480px){.badge-row{grid-template-columns:repeat(4,1fr)}}
.badge{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--pink-soft);
  border-radius:14px;padding:14px 8px;text-align:center}
.badge.off{opacity:.4;filter:grayscale(.6)}
.badge svg{width:18px;height:18px}
.badge .b-name{font-size:14px;font-weight:600;color:var(--pink-deep)}
.badge .b-desc{font-size:11px;color:var(--ink2);line-height:1.5}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cal-head .m{font-size:16px;font-weight:600}
.cal-nav{width:40px;height:40px;border-radius:10px;background:var(--pink-soft);color:var(--pink-deep);
  display:flex;align-items:center;justify-content:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-wk{font-size:11px;color:var(--ink3);text-align:center;padding:2px 0}
.cal-cell{
  aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:13px;position:relative;color:var(--ink);background:transparent;
}
.cal-cell.dim{color:var(--ink3);opacity:.45}
.cal-cell.study{background:var(--pink-soft)}
.cal-cell.study.f-hot{background:var(--pink);color:#fff}
.cal-cell.study.f-mid{background:var(--pink-deep);color:#fff}
.cal-cell.hs{background:var(--pink-soft);border:1.5px solid var(--pink)}
.cal-cell.rest{background:var(--bg);color:var(--ink3)}
.cal-cell.rest::after{content:"休";font-size:9px;color:var(--ink3)}
.cal-cell.holiday{background:var(--blue-soft);color:var(--blue-deep)}
.cal-cell.exam{background:var(--coral);color:#fff}
.cal-cell.today{outline:2px solid var(--coral);outline-offset:-2px}
.cal-cell .dot-done{position:absolute;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--mint-deep)}
.cal-cell.hs .dot-done,.cal-cell.f-hot .dot-done,.cal-cell.exam .dot-done{background:#fff}
.cal-legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:12px;font-size:11px;color:var(--ink2)}
.cal-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.sum-row{display:flex;justify-content:space-around;text-align:center}
.sum-num{font-size:20px;font-weight:700;color:var(--pink-deep)}
.sum-label{font-size:12px;color:var(--ink2)}

/* ============ 错题本 ============ */
.mk-form{display:flex;flex-direction:column;gap:10px}
.mk-form select,.mk-form textarea{
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--card);font-size:16px;
}
.mk-form textarea{resize:none}
.mk-form textarea:focus{outline:none;border-color:var(--lav)}
.mk-group-title{font-size:14px;font-weight:600;margin:16px 0 6px;color:var(--lav-deep);display:flex;gap:8px;align-items:center}
.mk-item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.mk-item .mk-head{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.mk-content{font-size:14px;word-break:break-all}
.mk-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.mk-acts button{font-size:13px;border-radius:99px;padding:6px 14px;background:var(--lav-soft);color:var(--lav-deep);min-height:36px}
.mk-acts button.warn{background:var(--pink-soft);color:var(--red)}
.mk-item.done-item{opacity:.6}
.mk-due-num{font-size:26px;font-weight:800;color:var(--lav-deep)}

/* ============ 我的 ============ */
.mine-btns{display:flex;flex-direction:column;gap:10px}
.mine-btns button{text-align:left;font-size:15px}
.btn-row-line{border:1px solid var(--line);border-radius:14px;padding:13px 16px;background:var(--card);min-height:48px}
.btn-row-line.danger{color:var(--red);border-color:var(--red)}
.log-item{padding:10px 2px;border-bottom:1px dashed var(--line);font-size:14px}
.log-item:last-child{border-bottom:none}
.log-item .d{color:var(--ink3);font-size:12px;margin-right:8px}
.mine-about p{font-size:13px;color:var(--ink2)}

/* ============ 歌曲主题渐变(四组谦系) ============ */
.theme-early{--lg:linear-gradient(90deg,#F4A7B9,#FFC9D6)}
.theme-learner{--lg:linear-gradient(90deg,#FF8B7B,#FFC9A8)}
.theme-crossing{--lg:linear-gradient(90deg,#C3B1E1,#A8C4D9)}
.theme-alien{--lg:linear-gradient(90deg,#7B96C4,#C9B48A)}

/* ============ 歌词卡片 ============ */
.lyric-card{width:min(340px,100%);background:var(--card);border-radius:24px;overflow:hidden;
  animation:pop .25s;position:relative}
.lc-band{height:86px;position:relative;display:flex;align-items:center;justify-content:center;background:var(--lg,var(--pink))}
.lc-band::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 20% 30%,rgba(255,255,255,.35) 0 2px,transparent 3px),
  radial-gradient(circle at 75% 60%,rgba(255,255,255,.3) 0 2px,transparent 3px),
  radial-gradient(circle at 55% 20%,rgba(255,255,255,.25) 0 1.5px,transparent 2.5px);
  animation:starlight 3s infinite alternate}
@keyframes starlight{from{opacity:.4}to{opacity:1}}
.lc-note{color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))}
.lc-lyric{padding:30px 26px 10px;text-align:center;font-size:19px;line-height:1.9;font-weight:600}
.lc-song{padding:6px 20px;text-align:center;color:var(--pink-deep);font-size:15px}
.lc-meta{padding:0 20px 6px;text-align:center;color:var(--ink2);font-size:12.5px}
.lc-date{padding:4px 20px 18px;text-align:center;color:var(--ink3);font-size:11.5px}
.lc-egg-tag{text-align:center;font-size:12px;color:var(--coral);padding-bottom:8px;font-weight:600}
.lc-btns{display:flex;border-top:1px solid var(--line)}
.lc-btns button{flex:1;padding:14px 0;font-size:14.5px;color:var(--ink2);min-height:48px}
.lc-btns button:first-child{color:var(--pink-deep);font-weight:600;border-right:1px solid var(--line)}

/* ============ 响应式: 平板与 iPhone 优先 ============ */
/* 小屏手机(iPhone SE 等): 键盘已由 base.css 的 1fr+aspect-ratio 全尺寸自适应(v3.3.3), 无需覆盖 */
@media (max-width:375px){
  .greet-card h2{font-size:18px}
  .timer-big{font-size:44px}
}
/* 通用窄屏: 单列布局已内建, 保证触控目标 */
@media (max-width:768px){
  .ring-row{gap:10px}
  .ring-item{width:104px}
}
/* 平板横屏 / 桌面: 侧栏导航 + 内容居中 */
@media (min-width:1024px){
  #tabbar{left:0;top:0;bottom:0;right:auto;width:92px;flex-direction:column;justify-content:flex-start;
    gap:6px;padding-top:26px;border-top:none;border-right:1px solid var(--line)}
  .tab{flex:0 0 auto;min-height:70px}
  .tab.on::before{top:auto;bottom:6px;left:50%;transform:translateX(-50%);width:22px;height:3px}
  /* v3.3.1 布局修复: 父容器让出侧栏宽度, #main 的 margin:0 auto 在剩余空间自然居中,
     与歌词条 left:calc(50%+46px) 严格同轴, 解决"内容靠左而歌词居中"的错位 */
  #view-main.on{padding-left:92px}
  #main{padding-bottom:120px}
  #lyric-bar{left:calc(50% + 46px);bottom:calc(20px + env(safe-area-inset-bottom))}
}
/* 超宽桌面: 内容限宽即可(继承 #main max-width 640px) */

/* ============ 夜读模式对比度增强(U-4) ============ */
html.night .keypad button{color:var(--ink);background:var(--card);border-color:var(--line)}
html.night .keypad button.k-del{color:var(--ink2)}
html.night .timer-big{color:#FFA899}
html.night .timer-big.rest{color:#A9C8E8}