:root{
  --accent:#0084CC;
  --ink:#2A2A2A;
  --unit:#555;
  --footer-text:#888;
  --card-border:#C8C8C8;
  --blur:3px;
  --font:'MiSans Semibold','MiSans','Microsoft YaHei UI','Microsoft YaHei',SimHei,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  color:#fff;
  background:#0084CC;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== 背景层（压缩图 + 模糊 + 蓝色主题叠加） ===== */
.bg-layer{
  position:fixed;inset:0;z-index:-2;
  background:url('assets/bg.jpg') center/cover no-repeat #0084CC;
  filter:blur(var(--blur));
  transform:scale(1.08);
  transition:filter .25s ease;
}
.tint{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(0,132,204,.30), rgba(0,72,140,.55)),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.28));
}

/* ===== 顶栏 ===== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(14px,3vw,40px);
  pointer-events:none;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(15px,2.2vw,20px);font-weight:700;letter-spacing:1px;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
  pointer-events:auto;
}
.brand img{width:30px;height:30px;border-radius:7px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.attribution{
  font-size:clamp(10px,1.5vw,13px);opacity:.82;text-align:right;
  text-shadow:0 2px 6px rgba(0,0,0,.45);pointer-events:auto;
}

/* ===== 主体 ===== */
.wrap{
  position:relative;z-index:1;
  min-height:100vh;display:flex;flex-direction:column;
}
.hero{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2.4vh,26px);
  padding:96px 16px 120px;
}
.hitokoto{
  font-size:clamp(20px,3.4vw,34px);font-weight:600;
  text-shadow:0 3px 14px rgba(0,0,0,.5);
  max-width:min(92vw,760px);text-align:center;line-height:1.35;
}
.greeting{
  font-size:clamp(14px,2.2vw,20px);opacity:.92;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* ===== 倒计时卡片（模仿壁纸，三段式方形） ===== */
.card{
  position:relative;
  width:min(86vw,520px);aspect-ratio:1/1;
  border-radius:clamp(16px,3.2vw,30px);
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  border:2px solid var(--card-border);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.card-header{
  position:relative;flex:0 0 20%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1E5FA8 0%,#2E7FC8 100%);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.card-header::before{
  /* 顶部高光线 */
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  background:rgba(255,255,255,.16);
}
.fold{
  position:absolute;top:0;left:0;
  width:clamp(36px,8.6%,52px);aspect-ratio:1/1;
  background:linear-gradient(135deg,#C0D0E8 0%,#A0B8D8 100%);
  clip-path:polygon(0 0,100% 0,0 100%);
  filter:drop-shadow(2px 2px 2px rgba(0,0,0,.18));
}
.fold::after{
  /* 折痕对角阴影线 */
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 47%,rgba(0,0,0,.22) 49%,rgba(0,0,0,.22) 51%,transparent 53%);
}
.htext{
  font-size:clamp(20px,3.6vw,32px);font-weight:700;color:#fff;letter-spacing:2px;
  text-shadow:0 2px 6px rgba(0,0,0,.4);
}
.card-body{
  flex:0 0 65%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8F8F8 100%);
  gap:6px;
}
.days{
  font-size:clamp(72px,30vw,158px);font-weight:800;line-height:1;color:var(--ink);
  text-shadow:0 4px 10px rgba(0,0,0,.12);
  font-variant-numeric:tabular-nums;
}
.card-body .unit{
  font-size:clamp(22px,4.4vw,40px);color:var(--unit);font-weight:600;
  margin-top:4px;
}
.card-footer{
  flex:0 0 15%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#F5F5F5 0%,#E8E8E8 100%);
  font-size:clamp(12px,2vw,17px);color:var(--footer-text);font-weight:600;letter-spacing:.5px;
  border-top:1px solid rgba(0,0,0,.05);
}

/* ===== 实时倒计时条（页面上倒计时） ===== */
.live{
  display:flex;align-items:center;gap:clamp(6px,1.2vw,14px);
  font-variant-numeric:tabular-nums;
}
.live .cell{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  border-radius:14px;
  padding:clamp(8px,1.4vw,14px) clamp(14px,2.6vw,26px);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  min-width:clamp(64px,12vw,96px);
}
.live .cell span{
  font-size:clamp(26px,5vw,46px);font-weight:800;line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.live .cell label{font-size:clamp(11px,1.6vw,14px);opacity:.85;letter-spacing:2px}
.live i{font-style:normal;font-size:clamp(22px,4vw,38px);opacity:.7;font-weight:700}
.live.over{display:none}

.slogan{
  font-size:clamp(13px,2vw,18px);opacity:.9;letter-spacing:3px;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:opacity .5s;
}

/* ===== 控制面板（模仿壁纸服务页控件，实时生效） ===== */
.dock{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:10px;
  background:rgba(10,24,40,.55);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:8px 8px 8px 14px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  max-width:94vw;
}
.dock-body{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.dock.collapsed .dock-body{display:none}
.dock-toggle{
  width:38px;height:38px;flex:0 0 auto;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.dock-toggle:hover{background:rgba(255,255,255,.28)}
.ctrl{display:flex;align-items:center;gap:8px;font-size:13px;color:#fff;white-space:nowrap}
.ctrl input[type=range]{width:96px;accent-color:#7fc4ff;cursor:pointer}
.ctrl input[type=checkbox]{width:16px;height:16px;accent-color:#7fc4ff;cursor:pointer}
.ctrl input[type=text]{
  width:120px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  border-radius:8px;padding:6px 10px;color:#fff;font-size:13px;outline:none;
}
.ctrl input[type=text]::placeholder{color:rgba(255,255,255,.55)}
.btn{
  border:0;border-radius:8px;padding:7px 14px;cursor:pointer;
  background:linear-gradient(135deg,#1E5FA8,#2E7FC8);color:#fff;font-size:13px;font-weight:600;
}
.btn:hover{filter:brightness(1.1)}

@media (max-width:640px){
  .attribution{display:none}
  .live i{display:none}
  .live{gap:8px}
  .live .cell{padding:8px 12px}
}