/* ============================================================
   Watch Clock · Apple 风格全屏时钟 — styles.css
   整页即时钟:无屏幕框,主题背景铺满视口,时间居中大气
   ============================================================ */

:root{
  --bg:#05060a;
  --ink:#f5f5f7;
  --ink-2:rgba(235,235,245,.62);
  --ink-3:rgba(235,235,245,.4);
  --line:rgba(255,255,255,.08);
  --acc:#ff453a;
  --font:"Inter","SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  user-select:none;
}
::selection{background:rgba(10,132,255,.35)}
button{font-family:var(--font)}
svg{display:block}

/* ============ 舞台与图层 ============ */
.stage{
  position:fixed;inset:0;
  overflow:hidden;
  opacity:1;
  transition:opacity .3s ease;
}
.stage.th-fade{opacity:0}

/* 主题背景层:绝对铺满 */
.tbg{position:absolute;inset:0;pointer-events:none}
.tbg svg{width:100%;height:100%}

/* 主题内容层:居中 */
.tbody{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  padding:4vh 3vw;
}
.core{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  position:relative;
}

/* ============ 时钟排版 ============ */
.fs{font-family:"Inter","SF Pro Display",-apple-system,sans-serif;font-variant-numeric:tabular-nums}
.t-date{
  position:absolute;top:6.2vh;left:0;right:0;z-index:3;
  text-align:center;
  font-size:clamp(13px,1.55vw,18px);
  font-weight:500;letter-spacing:.5px;
  color:var(--ink);opacity:.6;
}
.t-time{
  font-size:clamp(92px,16vw,252px);
  font-weight:200;
  letter-spacing:-.035em;
  line-height:1.04;
  font-variant-numeric:tabular-nums;
}
.t-sec{
  margin-top:.06em;
  font-size:clamp(20px,2.5vw,40px);
  font-weight:500;
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.t-sub{
  position:absolute;bottom:4.6vh;left:0;right:0;z-index:3;
  text-align:center;
  font-size:clamp(12px,1.25vw,15px);
  opacity:.5;letter-spacing:.4px;
}
/* 关闭项保持占位 → 主时间绝不移位 */
.t-date.off,.t-sec.off,.t-sub.off{visibility:hidden}

/* ============ 主题 · 数字(翻页时钟) ============ */
.tbg-digital{
  background:
    radial-gradient(1100px 720px at 18% -8%, #182540 0%, transparent 60%),
    radial-gradient(1000px 700px at 86% 108%, #2a1730 0%, transparent 58%),
    radial-gradient(600px 420px at 50% 42%, #0d1526 0%, transparent 70%),
    #05060a;
}
.theme-digital .tbody{flex-direction:column;justify-content:center}
.theme-digital .core{flex-direction:column;gap:4vh}

/* 翻页时钟容器 */
.flip-clock{
  display:flex;align-items:center;
  gap:clamp(8px,1.4vw,22px);
  padding:clamp(8px,1vw,16px) clamp(10px,1.4vw,22px);
  font-variant-numeric:tabular-nums;
}
/* 单个翻页单位:字号为主驱动,卡片尺寸用 em 跟随,数字恒在接缝处对齐 */
.flip-unit{
  position:relative;
  font-size:clamp(86px,15.5vw,248px);
  width:.64em;
  height:1.1em;
  border-radius:.12em;
  background:#0c0f1a;
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 .14em .4em -.08em rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
  perspective:6em;
}
/* 上/下静态半片(始终在,翻片在其上方转动) */
.flip-unit .half{
  position:absolute;left:0;right:0;height:50%;overflow:hidden;
  background:linear-gradient(#171d35,#0d1020);
}
.flip-unit .half.top{top:0;border-radius:.12em .12em 0 0}
.flip-unit .half.bot{bottom:0;background:linear-gradient(#0a0d17,#12162a)}
/* 数字:完整高度 1.1em,top 从半片顶排下 / bot 从半片底上排 → 上下半在接缝无缝拼接 */
.flip-unit .n{
  position:absolute;left:0;right:0;
  height:1.1em;line-height:1.1em;
  text-align:center;
  font-weight:600;letter-spacing:-.03em;
  font-style:normal;
  color:#f5f5f7;
  font-variant-numeric:tabular-nums;
}
.flip-unit .half.top .n,.flip-unit .flap.ft .n{top:0}
.flip-unit .half.bot .n,.flip-unit .flap.fb .n{bottom:0}
/* 中缝(翻页铰链线) */
.flip-unit::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;z-index:6;
  background:rgba(0,0,0,.68);
  box-shadow:0 1px 0 rgba(255,255,255,.05);
}
/* ============ 翻页:铰链式半页翻动 ============
   上翻片(.flap.ft)显示旧值上半,绕中缝(下边缘)向下折 0°→-90°;
   下翻片(.flap.fb)显示新值下半,从中缝(上边缘)展开 90°→0°。
   前半程折上片(重力加速 ease-in),后半程展下片(减速微回弹 ease-out)。 */
.flip-unit .flap{
  position:absolute;left:0;right:0;height:50%;overflow:hidden;z-index:5;
  backface-visibility:hidden;
  will-change:transform;
}
.flip-unit .flap.ft{
  top:0;border-radius:.12em .12em 0 0;
  background:linear-gradient(#171d35,#0d1020);
  transform-origin:50% 100%;
  transform:rotateX(-90deg);          /* 静止态折起(贴向下半,不可见),翻页时才从 0° 折下 */
}
.flip-unit .flap.fb{
  bottom:0;border-radius:0 0 .12em .12em;
  background:linear-gradient(#0a0d17,#12162a);
  transform-origin:50% 0;
  transform:rotateX(90deg);           /* 待展开:立起贴着中缝,正对不可见 */
}
.flip-unit .flap.ft.go{animation:flapFold var(--flip-half,320ms) cubic-bezier(.55,.06,.78,.35) forwards}
.flip-unit .flap.fb.go{animation:flapUnfold var(--flip-half,320ms) var(--flip-half,320ms) cubic-bezier(.16,.7,.3,1.06) forwards}
/* 上翻片:0°(盖住静态上半)→ -90°(折平贴向下半,边缘朝前不可见) */
@keyframes flapFold{
  from{transform:rotateX(0deg)}
  to{transform:rotateX(-90deg)}
}
/* 下翻片:90°(立起不可见)→ 0°(展开盖住静态下半,带轻微回弹) */
@keyframes flapUnfold{
  from{transform:rotateX(90deg)}
  to{transform:rotateX(0deg)}
}

/* 冒号:上下两个点 */
.flip-sep{
  display:flex;flex-direction:column;align-items:center;gap:.42em;
  opacity:.5;
}
.flip-sep i,.flip-sep span{
  width:.09em;height:.09em;
  border-radius:50%;background:#f5f5f7;
  box-shadow:0 0 16px rgba(255,255,255,.25);
}
/* 上午/下午(12 小时制)竖排小字 */
.flip-ampm{
  writing-mode:vertical-rl;
  font-size:clamp(13px,1.5vw,20px);
  font-weight:500;letter-spacing:.3em;
  color:var(--ink-2);opacity:.7;
  padding-left:clamp(4px,.5vw,10px);
}

/* ============ 主题 · 指针 ============ */
.tbg-analog{background:radial-gradient(900px 600px at 50% 42%, #0a0f1c 0%, transparent 62%), #05060a}
.dialbox{
  width:min(80vmin,88vh,80vw);
  aspect-ratio:1;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.dialbox svg{
  position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(120,150,255,.08));
}
/* 指针主题:盘组垂直居中,盘与秒行间距 */
.theme-analog .tbody{flex-direction:column;justify-content:center}
.theme-analog .core{flex-direction:column;gap:3.2vh}

/* ============ 主题 · 天空(整页天空) ============ */
.tbg-sky{background:#0a1020}
.tbg-sky svg{position:absolute;inset:0;width:100%;height:100%}
/* 天空全屏,时间文字需阴影保证可读(挂在内容层 .theme-sky) */
.theme-sky .t-time{
  text-shadow:0 2px 34px rgba(4,8,20,.65), 0 0 8px rgba(4,8,20,.4);
}
.theme-sky .t-date,.theme-sky .t-sec,.theme-sky .t-sub{
  text-shadow:0 1px 14px rgba(4,8,20,.6);
}

/* ============ 主题 · 轨道 ============ */
.tbg-orbit{background:
  radial-gradient(900px 640px at 50% 46%, #0b1222 0%, transparent 64%),#05060a}
.orb-svg{
  position:absolute;left:50%;top:50%;
  width:min(66vmin,74vh,86vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:0;
  opacity:.92;
}
.theme-orbit .core{z-index:2}
.theme-orbit .t-time{text-shadow:0 0 70px rgba(255,255,255,.06)}

/* ============ 悬浮按钮 ============ */
.fab{
  position:fixed;right:22px;bottom:22px;z-index:40;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,30,38,.72);
  border:1px solid var(--line);
  color:#e8e8ed;cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.2), background .2s, border-color .2s;
}
.fab svg{width:23px;height:23px}
.fab:hover{background:rgba(44,44,54,.85);border-color:rgba(255,255,255,.16)}
.fab:active{transform:scale(.94)}

/* ============ 折叠菜单 ============ */
.menu{
  position:fixed;right:22px;bottom:84px;z-index:50;
  width:344px;max-width:calc(100vw - 32px);
  max-height:min(660px, calc(100vh - 112px));
  overflow-y:auto;
  background:rgba(24,24,30,.85);
  border:1px solid var(--line);
  border-radius:24px;padding:18px;
  backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;transform:translateY(12px) scale(.97);transform-origin:bottom right;
  pointer-events:none;
  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.8,.25,1.2);
}
.menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.menu::-webkit-scrollbar{width:6px}
.menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
.menu::-webkit-scrollbar-track{background:transparent}

.m-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.m-head h2{font-size:14.5px;font-weight:700;letter-spacing:.2px}
.m-close{
  width:28px;height:28px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);color:var(--ink-2);
  transition:background .18s,color .18s;
}
.m-close:hover{background:rgba(255,255,255,.14);color:var(--ink)}
.m-close svg{width:13px;height:13px}

/* 主题宫格(缩略图为静态 SVG) */
.m-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.fitem{
  position:relative;cursor:pointer;border:0;overflow:hidden;
  background:#0a0a0e;border-radius:15px;
  aspect-ratio:300/186;
  display:block;padding:0;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform .16s ease, box-shadow .16s ease;
}
.fitem:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 20px -8px rgba(0,0,0,.6)}
.fitem.active{box-shadow:0 0 0 2px #fff, inset 0 0 0 1px rgba(255,255,255,.06)}
.fitem .thumb{position:absolute;inset:0}
.fitem .thumb svg{width:100%;height:100%}
.fitem .fname{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px 10px 7px;
  font-size:11px;font-weight:600;letter-spacing:.4px;color:rgba(255,255,255,.92);
  background:linear-gradient(transparent, rgba(0,0,0,.78) 60%);
  text-align:left;
  pointer-events:none;
}

.m-sec{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.m-label{
  display:flex;align-items:baseline;justify-content:space-between;
  font-size:12.5px;font-weight:600;margin-bottom:10px;
}
.m-label small{font-weight:400;font-size:10.5px;color:var(--ink-3)}
.swatches{display:flex;flex-wrap:wrap;gap:11px}
.sw{
  position:relative;width:26px;height:26px;border-radius:50%;cursor:pointer;border:0;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1);
  transition:transform .15s ease;
}
.sw:hover{transform:scale(1.14)}
.sw.active{box-shadow:0 0 0 2px rgba(0,0,0,.4), 0 0 0 3.6px #fff}

.rows{display:flex;flex-direction:column;gap:2px}
.row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 4px;border-radius:10px;cursor:pointer;
  transition:background .15s;
}
.row:hover{background:rgba(255,255,255,.045)}
.row-t{font-size:12.5px;font-weight:500;color:var(--ink)}
.row-t small{display:block;font-weight:400;font-size:10.5px;color:var(--ink-3);margin-top:1px}
.swch{flex:none}
.swch input{display:none}
.swch i{position:relative;display:block;width:40px;height:24px;border-radius:99px;background:rgba(255,255,255,.16);transition:background .22s}
.swch i::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:left .22s cubic-bezier(.3,.8,.3,1.1);
}
.swch input:checked + i{background:var(--acc,#ff453a)}
.swch input:checked + i::after{left:19px}
.m-note{font-size:10.5px;color:var(--ink-3);text-align:center;margin-top:14px;line-height:1.6}

/* ============ 响应式 ============ */
@media (max-width:700px){
  .fab{right:16px;bottom:16px}
  .menu{right:12px;bottom:78px;width:320px}
  .t-time{font-size:clamp(84px,23vw,132px)}
  .t-date{top:7vh}
  .dialbox{width:min(88vw,62vh)}
  .orb-svg{width:min(92vw,58vh)}
  .flip-clock{gap:clamp(5px,1.6vw,10px)}
  .flip-unit{font-size:clamp(52px,17.5vw,86px)}
  .flip-ampm{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}