/* ===== 时钟 ===== */
.clock-face{
  display:grid; place-items:center; gap: 18px; padding: 26px 0 20px;
}
.clk-dial{ width: 214px; height: 214px; position:relative; }
.clk-dial svg{ width:100%; height:100%; display:block; }
.clk-digital{
  font-size: 46px; font-weight: 250; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.clk-sub{ font-size:12.5px; color: var(--fg-3); font-weight:600; margin-top:-8px; }

.tm-big{
  font-size: 62px; font-weight: 200; letter-spacing: -.03em; text-align:center;
  font-variant-numeric: tabular-nums; padding: 22px 0 6px;
}
.tm-ms{ font-size: 26px; color: var(--fg-3); font-weight: 300; }
.tm-ring{ display:grid; place-items:center; padding: 12px 0 8px; }
.tm-ring svg{ width: 216px; height: 216px; }
.tm-ring .t{ font-size: 34px; font-weight: 250; font-variant-numeric: tabular-nums; }
.tm-acts{ display:flex; gap: 12px; justify-content:center; padding: 14px 0 6px; }
.tm-btn{
  min-width: 96px; height: 46px; border-radius: 15px; font-size:14px; font-weight:650;
  background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--t-fast) var(--e-spring), background var(--t-base);
}
.tm-btn:active{ transform: scale(.95); }
.tm-btn.acc{ background: var(--accent); color: var(--accent-fg); box-shadow:none; }
.tm-btn.warn{ color: var(--warn); }
.lap-row{
  display:grid; grid-template-columns: auto 1fr auto; gap:10px;
  padding: 11px 15px; font-variant-numeric: tabular-nums; font-size:13px;
  box-shadow: inset 0 -1px 0 var(--line);
  animation: fadeUp 320ms var(--e-out) both;
}
.lap-row b{ color: var(--fg-3); font-weight:650; }
.wheel{
  display:flex; gap: 4px; justify-content:center; padding: 8px 0 16px;
}
.wheel-col{
  height: 168px; width: 74px; overflow-y: scroll; scroll-snap-type: y mandatory;
  mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
  text-align:center;
}
.wheel-col::before,.wheel-col::after{ content:""; display:block; height: 63px; }
.wheel-col i{
  display:block; height: 42px; line-height: 42px; scroll-snap-align: center;
  font-size: 22px; font-style: normal; font-variant-numeric: tabular-nums;
  color: var(--fg-4);
  transition: color var(--t-base) var(--e-soft), transform var(--t-base) var(--e-soft);
}
.wheel-col i.mid{ color: var(--fg); transform: scale(1.14); }
.wheel-lb{ font-size:11px; color: var(--fg-3); text-align:center; font-weight:650; margin-top:-10px; }

/* ===== 计算器 ===== */
.calc{ display:grid; grid-template-rows: auto 1fr; height:100%; }
.calc-out{
  padding: 26px 20px 14px; text-align:right;
  display:grid; align-content:end; gap:6px; min-height: 130px;
}
.calc-expr{ font-size:14px; color: var(--fg-3); min-height:20px; font-variant-numeric: tabular-nums; word-break: break-all; }
.calc-val{
  font-size: 52px; font-weight: 250; letter-spacing:-.03em; line-height:1.05;
  font-variant-numeric: tabular-nums; word-break: break-all;
  transition: font-size var(--t-base) var(--e-soft);
}
.calc-val.sm{ font-size: 34px; }
.calc-val.flash{ animation: calcFlash 380ms var(--e-out); }
@keyframes calcFlash{ 0%{ transform: scale(1.06); opacity:.6; } 100%{ transform:none; opacity:1; } }
.calc-pad{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 9px;
  padding: 8px 14px calc(var(--nav-h) + 16px);
}
.ck{
  border-radius: 18px; font-size: 22px; font-weight: 400;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
  display:grid; place-items:center; position:relative; overflow:hidden;
  transition: transform 80ms var(--e-out), background 110ms linear;
}
.ck:active{ transform: scale(.94); background: var(--ink-3); }
.ck.fn{ color: var(--accent-2); font-size: 19px; font-weight:600; }
.ck.op{ background: var(--accent); color: var(--accent-fg); box-shadow:none; font-size:24px; }
.ck.op.armed{ background: var(--accent-fg); color: var(--accent); }
.ck.zero{ grid-column: span 2; }
.ck svg{ width:22px; height:22px; }

/* ===== 备忘录 ===== */
.note-card{
  border-radius: var(--radius-card); padding: 14px 15px; margin-bottom: 10px;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  animation: fadeUp 380ms var(--e-out) both;
  transition: transform var(--t-fast) var(--e-spring);
}
.note-card:active{ transform: scale(.985); }
.note-card h5{ margin:0 0 5px; font-size:14.5px; font-weight:700; letter-spacing:-.01em; }
.note-card p{ margin:0; font-size:12.5px; color: var(--fg-2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; }
.note-card .mt{ margin-top:9px; font-size:10.5px; color: var(--fg-3); display:flex; gap:8px; }
.note-edit{
  position:absolute; inset:0; display:grid; grid-template-rows: auto 1fr;
  background: var(--ink-1);
}
.note-edit input{
  border:0; outline:none; background:none; padding: 14px 18px 4px;
  font-size: 21px; font-weight: 700; letter-spacing:-.02em;
}
.note-edit textarea{
  border:0; outline:none; background:none; resize:none;
  padding: 6px 18px calc(var(--nav-h) + 18px);
  font-size: 14.5px; line-height: 1.65; color: var(--fg-2);
}
.note-meta{ font-size:11px; color: var(--fg-3); padding: 2px 18px 8px; }

/* ===== 日历 ===== */
.cal-head{ display:flex; align-items:center; justify-content:space-between; padding: 2px 4px 12px; }
.cal-head b{ font-size:19px; font-weight:700; letter-spacing:-.02em; }
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{
  width:32px; height:32px; border-radius:11px; display:grid; place-items:center;
  background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--t-fast) var(--e-spring);
}
.cal-nav button:active{ transform: scale(.9); }
.cal-nav svg{ width:15px; height:15px; }
.cal-wk{ display:grid; grid-template-columns: repeat(7,1fr); gap:2px; padding-bottom:6px; }
.cal-wk i{ font-style:normal; text-align:center; font-size:10.5px; font-weight:700; color: var(--fg-3); }
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:2px; }
.cal-grid.turn{ animation: calTurn 380ms var(--e-out) both; }
@keyframes calTurn{ from{ opacity:0; transform: translateY(10px) scale(.985); } }
.cal-d{
  aspect-ratio: 1; border-radius: 13px; position:relative;
  display:grid; place-items:center; font-size:13.5px; font-weight:550;
  transition: background var(--t-base) var(--e-soft), color var(--t-base), transform var(--t-fast) var(--e-spring);
}
.cal-d.dim{ color: var(--fg-4); }
.cal-d.today{ color: var(--accent); font-weight:800; }
.cal-d.sel{ background: var(--accent); color: var(--accent-fg); }
.cal-d:active{ transform: scale(.9); }
.cal-d .dot{
  position:absolute; bottom: 6px; width:4px; height:4px; border-radius:50%; background: var(--accent-2);
}
.cal-d.sel .dot{ background: var(--accent-fg); }
.ev-row{
  display:grid; grid-template-columns: 54px 1fr auto; gap:12px; align-items:center;
  padding: 12px 15px; box-shadow: inset 0 -1px 0 var(--line);
  animation: fadeUp 340ms var(--e-out) both;
}
.ev-row .t{ font-size:12px; font-variant-numeric: tabular-nums; color: var(--fg-3); font-weight:650; }
.ev-row .n{ font-size:13.5px; font-weight:600; }
.ev-row .bar{ width:3px; height:26px; border-radius:2px; background: var(--accent); }

/* ===== 天气 ===== */
.wx-hero{ padding: 18px 6px 22px; text-align:center; animation: fadeUp var(--t-slow) var(--e-out) both; }
.wx-city{ font-size:22px; font-weight:650; letter-spacing:-.01em; }
.wx-temp{ font-size: 74px; font-weight: 200; letter-spacing:-.045em; line-height:1.02; margin-top:4px; }
.wx-desc{ font-size:14px; color: var(--fg-2); font-weight:600; }
.wx-hl{ font-size:12.5px; color: var(--fg-3); margin-top:6px; }
.wx-hours{ display:flex; gap: 6px; overflow-x:auto; padding: 4px 2px 10px; }
.wx-h{
  flex: 0 0 58px; border-radius: 16px; padding: 11px 0; text-align:center;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
  display:grid; gap:7px; justify-items:center;
}
.wx-h b{ font-size:11px; font-weight:650; color: var(--fg-3); }
.wx-h svg{ width:19px; height:19px; }
.wx-h i{ font-style:normal; font-size:13.5px; font-weight:600; font-variant-numeric: tabular-nums; }
.wx-day{
  display:grid; grid-template-columns: 44px 26px 1fr 34px; gap:10px; align-items:center;
  padding: 10px 15px; box-shadow: inset 0 -1px 0 var(--line); font-size:13px;
}
.wx-day .rg{ height:5px; border-radius:3px; background: var(--fg-4); position:relative; overflow:hidden; }
.wx-day .rg i{
  position:absolute; top:0; bottom:0; border-radius:3px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: left 600ms var(--e-out), right 600ms var(--e-out);
}
.wx-day .lo{ color: var(--fg-3); font-variant-numeric: tabular-nums; }
.wx-day .hi{ text-align:right; font-variant-numeric: tabular-nums; }
.wx-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom: 14px; }
.wx-cell{
  border-radius: var(--radius-card); padding: 13px 14px;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
}
.wx-cell b{ font-size:10.5px; font-weight:700; letter-spacing:.08em; color: var(--fg-3); text-transform:uppercase; }
.wx-cell i{ display:block; font-style:normal; font-size:22px; font-weight:300; margin-top:6px; }

/* ===== 相册 / 相机 ===== */
.ph-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
.ph-cell{
  aspect-ratio: 1; overflow:hidden; border-radius: 5px; position:relative;
  background: var(--ink-2);
  animation: phIn 420ms var(--e-out) both;
  transition: transform var(--t-fast) var(--e-spring);
}
@keyframes phIn{ from{ opacity:0; transform: scale(.86); } }
.ph-cell:active{ transform: scale(.95); }
.ph-cell img{ width:100%; height:100%; object-fit: cover; display:block; }
.ph-view{
  position:absolute; inset:0; background: #07070800; z-index: 8;
  display:grid; place-items:center;
  transition: background var(--t-slow) var(--e-soft);
}
.ph-view.on{ background: rgba(7,7,8,.97); }
.ph-view img{
  max-width:100%; max-height:100%; object-fit:contain;
  transform: scale(.86); opacity:0;
  transition: transform var(--t-page) var(--e-out), opacity var(--t-base);
}
.ph-view.on img{ transform:none; opacity:1; }
.ph-bar{
  position:absolute; left:0; right:0; bottom:0; padding: 12px 18px calc(var(--nav-h) + 14px);
  display:flex; justify-content:space-between; align-items:center;
  background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
  opacity:0; transition: opacity var(--t-base);
}
.ph-view.on .ph-bar{ opacity:1; }
.ph-bar button{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,.12); color:#fff; }
.ph-bar svg{ width:18px; height:18px; }

.cam{ position:absolute; inset:0; background:#000; display:grid; grid-template-rows: 1fr auto; }
.cam-view{ position:relative; overflow:hidden; }
.cam-view video{ width:100%; height:100%; object-fit: cover; display:block; }
.cam-view canvas{ display:none; }
.cam-flash{
  position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none;
}
.cam-flash.go{ animation: camFlash 420ms var(--e-out); }
@keyframes camFlash{ 0%{ opacity:.95; } 100%{ opacity:0; } }
.cam-bar{
  padding: 16px 26px calc(var(--nav-h) + 18px);
  display:grid; grid-template-columns: 46px 1fr 46px; align-items:center; gap:14px;
  background:#000;
}
.cam-shut{
  width: 68px; height:68px; border-radius:50%; justify-self:center;
  background:#fff; box-shadow: 0 0 0 4px #000, 0 0 0 6px #fff;
  transition: transform 120ms var(--e-out);
}
.cam-shut:active{ transform: scale(.9); }
.cam-thumb{ width:44px; height:44px; border-radius:11px; overflow:hidden; background: #1a1a1c; }
.cam-thumb img{ width:100%; height:100%; object-fit:cover; }
.cam-side{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,.12); color:#fff; }
.cam-side svg{ width:19px; height:19px; }
.cam-msg{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding: 30px; color: var(--fg-2); font-size:13px; line-height:1.6; }

/* ===== 录音机 ===== */
.rec{ display:grid; grid-template-rows: 1fr auto auto; height:100%; }
.rec-wave{ position:relative; }
.rec-wave canvas{ position:absolute; inset:0; width:100%; height:100%; }
.rec-time{
  text-align:center; font-size: 40px; font-weight: 250; font-variant-numeric: tabular-nums;
  padding: 6px 0 12px; letter-spacing:-.02em;
}
.rec-ctl{ display:grid; place-items:center; padding-bottom: 14px; gap: 12px; }
.rec-btn{
  width: 68px; height: 68px; border-radius:50%;
  background: var(--danger); display:grid; place-items:center;
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--danger) 26%, transparent);
  transition: transform var(--t-base) var(--e-spring), border-radius var(--t-base) var(--e-spring), box-shadow var(--t-base);
}
.rec-btn.on{ border-radius: 22px; transform: scale(.9); box-shadow: 0 0 0 9px color-mix(in oklab, var(--danger) 20%, transparent); }
.rec-btn i{ display:block; width:24px; height:24px; border-radius:6px; background:#fff; transition: all var(--t-base) var(--e-spring); }
.rec-btn.on i{ border-radius: 3px; width:20px; height:20px; }
.rec-item{
  display:grid; grid-template-columns: 38px 1fr auto auto; gap:11px; align-items:center;
  padding: 11px 15px; box-shadow: inset 0 -1px 0 var(--line);
  animation: fadeUp 340ms var(--e-out) both;
}
.rec-item button{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--line); }
.rec-item button svg{ width:15px; height:15px; }
.rec-item .n{ font-size:13.5px; font-weight:600; }
.rec-item .d{ font-size:11px; color: var(--fg-3); margin-top:2px; }

/* ===== 音乐 ===== */
.mu-art{
  width: 100%; aspect-ratio: 1; border-radius: 26px; overflow:hidden;
  box-shadow: var(--shadow-2); position:relative;
  background: var(--ink-2);
}
.mu-art canvas{ width:100%; height:100%; display:block; }
.mu-art.spin canvas{ animation: muPulse 5.5s var(--e-soft) infinite; }
@keyframes muPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.035); } }
.mu-meta{ text-align:center; padding: 18px 8px 8px; }
.mu-meta b{ display:block; font-size:18px; font-weight:700; letter-spacing:-.015em; }
.mu-meta span{ font-size:13px; color: var(--fg-3); }
.mu-bar{ padding: 6px 4px 2px; }
.mu-track{ height: 5px; border-radius:3px; background: var(--fg-4); position:relative; cursor:pointer; touch-action:none; }
.mu-track i{ position:absolute; left:0; top:0; bottom:0; border-radius:3px; background: var(--fg); }
.mu-track i::after{
  content:""; position:absolute; right:-5px; top:50%; transform: translateY(-50%);
  width:11px; height:11px; border-radius:50%; background: var(--fg);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: transform var(--t-fast) var(--e-spring);
}
.mu-times{ display:flex; justify-content:space-between; font-size:10.5px; color: var(--fg-3); margin-top:7px; font-variant-numeric: tabular-nums; }
.mu-ctl{ display:flex; align-items:center; justify-content:center; gap: 26px; padding: 14px 0 10px; }
.mu-ctl button{ display:grid; place-items:center; transition: transform var(--t-fast) var(--e-spring); color: var(--fg); }
.mu-ctl button:active{ transform: scale(.88); }
.mu-ctl svg{ width: 28px; height:28px; }
.mu-play{
  width: 62px; height:62px; border-radius:50%;
  background: var(--fg); color: var(--ink-0);
  box-shadow: var(--shadow-1);
}
.mu-play svg{ width: 26px; height:26px; }
.mu-list-item{
  display:grid; grid-template-columns: 30px 1fr auto; gap:11px; align-items:center;
  padding: 11px 15px; box-shadow: inset 0 -1px 0 var(--line); font-size:13.5px;
}
.mu-list-item.on{ color: var(--accent); }
.mu-list-item .idx{ font-size:11.5px; color: var(--fg-3); text-align:center; font-variant-numeric: tabular-nums; }
.mu-eq{ display:flex; gap:2px; align-items:flex-end; height:14px; }
.mu-eq i{ width:2.5px; background: var(--accent); border-radius:2px; animation: eq 900ms var(--e-soft) infinite alternate; }
.mu-eq i:nth-child(2){ animation-delay: 160ms; }
.mu-eq i:nth-child(3){ animation-delay: 320ms; }
@keyframes eq{ from{ height:3px; } to{ height:14px; } }

/* ===== 文件 / 设置补充 ===== */
.st-hero{
  border-radius: var(--radius-card); padding: 16px; margin-bottom: 14px;
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
}
.st-bar{ height: 12px; border-radius: 7px; overflow:hidden; display:flex; background: var(--fg-4); }
.st-bar i{ transition: width 700ms var(--e-out); }
.st-legend{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 12px; font-size:11.5px; color: var(--fg-2); }
.st-legend span{ display:flex; align-items:center; gap:6px; }
.st-legend em{ width:9px; height:9px; border-radius:3px; }
.sw-color{ display:flex; gap: 10px; padding: 14px 15px; flex-wrap: wrap; }
.sw-color button{
  width: 34px; height:34px; border-radius:50%; position:relative;
  transition: transform var(--t-base) var(--e-spring);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.sw-color button:active{ transform: scale(.88); }
.sw-color button.on::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  box-shadow: 0 0 0 2px var(--fg);
}
.wp-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 9px; padding: 14px 15px; }
.wp-cell{
  aspect-ratio: 9/16; border-radius: 14px; overflow:hidden; position:relative;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--t-base) var(--e-spring);
}
.wp-cell canvas{ width:100%; height:100%; display:block; }
.wp-cell:active{ transform: scale(.94); }
.wp-cell.on{ box-shadow: 0 0 0 2px var(--accent); }
.about-hero{ display:grid; place-items:center; gap:10px; padding: 24px 0 18px; }
.about-hero .mark{
  width: 76px; height:76px; border-radius: 24px; display:grid; place-items:center;
  background: linear-gradient(150deg, var(--accent), color-mix(in oklab, var(--accent) 50%, var(--accent-2)));
  box-shadow: var(--shadow-2);
}
.about-hero .mark svg{ width:40px; height:40px; color: var(--accent-fg); }
.about-hero b{ font-size:19px; font-weight:700; }
.about-hero span{ font-size:12px; color: var(--fg-3); }