/* ==========================================================================
   高考倒计时 · 样式表
   ========================================================================== */

:root{
  --bg:#070b1c;
  --bg2:#0d1330;
  --ink:#eef2ff;
  --ink-dim:#9aa6d4;
  --ink-faint:#6b78a8;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --c1:#7c5cff;   /* 紫 */
  --c2:#22d3ee;   /* 青 */
  --c3:#ffb020;   /* 金 */
  --c4:#ff5c8a;   /* 粉 */
  --ok:#22c55e;
  --radius:20px;
  --radius-sm:12px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.75);
  --font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",
         -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- 背景：星空 ---------- */
#stars{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}

/* ---------- 背景：极光 ---------- */
.aurora{position:fixed; inset:-20% -10% -10%; z-index:0; pointer-events:none; overflow:hidden; filter:blur(70px); opacity:.55;}
.aurora span{position:absolute; display:block; border-radius:50%; mix-blend-mode:screen; animation:drift 26s ease-in-out infinite;}
.aurora span:nth-child(1){width:52vw;height:52vw;left:-8vw;top:-6vw;background:radial-gradient(circle at 30% 30%,var(--c1),transparent 68%);}
.aurora span:nth-child(2){width:46vw;height:46vw;right:-6vw;top:10vh;background:radial-gradient(circle at 60% 40%,var(--c2),transparent 68%);animation-delay:-9s;}
.aurora span:nth-child(3){width:40vw;height:40vw;left:28vw;bottom:-14vh;background:radial-gradient(circle at 50% 50%,var(--c4),transparent 70%);animation-delay:-17s;opacity:.7;}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  33%{transform:translate3d(4vw,3vh,0) scale(1.12);}
  66%{transform:translate3d(-3vw,2vh,0) scale(.94);}
}

.wrap{
  position:relative; z-index:2;
  max-width:1080px; margin:0 auto;
  padding:clamp(14px,2.6vw,30px) clamp(14px,3vw,26px) 40px;
}

/* ==========================  顶栏  ========================== */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:clamp(14px,2vw,22px);}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px; font-size:15px; color:var(--ink-dim);}
.brand .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--c2);
  box-shadow:0 0 0 0 rgba(34,211,238,.7);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(34,211,238,.65);}
  70%{box-shadow:0 0 0 11px rgba(34,211,238,0);}
  100%{box-shadow:0 0 0 0 rgba(34,211,238,0);}
}
.top-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}

/* ==========================  按钮  ========================== */
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; font-size:14px;}
.ghost{
  padding:8px 13px; border-radius:11px;
  border:1px solid var(--line);
  background:var(--glass);
  color:var(--ink-dim);
  transition:.18s;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.ghost:hover{color:var(--ink); border-color:rgba(255,255,255,.22); background:var(--glass-2); transform:translateY(-1px);}
.ghost:active{transform:translateY(0);}
.ghost.tiny{padding:5px 10px; font-size:12.5px;}

.primary{
  padding:11px 22px; border-radius:12px; font-weight:700; color:#fff;
  background:linear-gradient(120deg,var(--c1),#4f7bff 55%,var(--c2));
  box-shadow:0 10px 26px -10px rgba(124,92,255,.85);
  transition:.18s;
}
.primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(124,92,255,.95);}
.primary:active{transform:translateY(0);}

/* ==========================  卡片  ========================== */
.card{
  background:linear-gradient(180deg,var(--glass-2),var(--glass));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  padding:clamp(18px,3vw,34px);
  margin-bottom:clamp(14px,2.2vw,22px);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
}

/* ==========================  主倒计时  ========================== */
.hero{text-align:center; padding-top:clamp(22px,3.4vw,40px);}

.badge{
  display:inline-block; font-size:12.5px; letter-spacing:1.4px; font-weight:600;
  padding:6px 15px; border-radius:999px; color:#cfe0ff;
  border:1px solid rgba(124,92,255,.45);
  background:rgba(124,92,255,.14);
  margin-bottom:18px;
}

.title{
  margin:0 0 clamp(18px,2.6vw,28px);
  font-size:clamp(17px,2.5vw,25px);
  font-weight:600; color:var(--ink-dim); letter-spacing:1px;
}
.title em{
  font-style:normal; font-weight:800;
  background:linear-gradient(100deg,var(--c3),var(--c4),var(--c1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:1.28em; padding:0 2px;
}

.flip-row{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(4px,1.1vw,14px); margin-bottom:clamp(14px,2vw,20px);
}
.unit{display:flex; flex-direction:column; align-items:center; gap:9px;}

.flip{
  position:relative;
  min-width:clamp(74px,15.5vw,152px);
  padding:clamp(8px,1.5vw,18px) clamp(6px,1.2vw,16px);
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 18px 34px -22px rgba(0,0,0,.9);
  overflow:hidden;
}
.flip::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:rgba(0,0,0,.35);
}
.flip span{
  display:block;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-size:clamp(38px,8.6vw,84px);
  font-weight:800; line-height:1.06; letter-spacing:-.02em;
  background:linear-gradient(180deg,#ffffff,#a9bcff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:transform .12s ease-out;
}
.flip.sm span{font-size:clamp(28px,6.2vw,62px);}
.flip.tick span{animation:tick .42s cubic-bezier(.2,.8,.3,1);}
@keyframes tick{
  0%{transform:translateY(-38%) scale(.9); opacity:.15; filter:blur(3px);}
  60%{transform:translateY(0) scale(1.03); opacity:1; filter:blur(0);}
  100%{transform:translateY(0) scale(1);}
}
.lbl{font-size:12.5px; letter-spacing:3px; color:var(--ink-faint); font-weight:600;}
.colon{
  align-self:flex-start;
  font-size:clamp(26px,5.6vw,58px); font-weight:800; color:rgba(255,255,255,.24);
  line-height:1.28; padding-top:clamp(6px,1.3vw,16px);
  animation:blink 2s steps(1,end) infinite;
}
@keyframes blink{0%,55%{opacity:.28}56%,100%{opacity:.85}}

.examtime{margin:0 0 clamp(16px,2.2vw,24px); color:var(--ink-dim); font-size:clamp(13px,1.7vw,15px);}
.examtime b{color:var(--c3); font-weight:700;}

/* 进度条 */
.progress-block{max-width:760px; margin:0 auto clamp(18px,2.6vw,26px); text-align:left;}
.pb-head{display:flex; justify-content:space-between; font-size:13px; color:var(--ink-dim); margin-bottom:8px; font-weight:600;}
.pb-head span:last-child{color:var(--c2); font-variant-numeric:tabular-nums;}
.pb-track{
  height:12px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line-soft);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4);
}
.pb-track.slim{height:8px;}
.pb-fill{
  height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--c1),var(--c2) 60%,var(--c3));
  box-shadow:0 0 18px rgba(34,211,238,.55);
  transition:width .8s cubic-bezier(.2,.8,.3,1);
  position:relative;
}
.pb-fill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-100%); animation:sheen 2.8s ease-in-out infinite;
}
@keyframes sheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(220%)}}
.pb-foot{display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-faint); margin-top:7px;}

/* 小统计 */
.mini-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1.4vw,14px);
  max-width:760px; margin:0 auto;
}
.mini{
  padding:clamp(10px,1.6vw,16px) 8px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.035); border:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:3px;
}
.mini b{
  font-size:clamp(15px,2.4vw,23px); font-weight:800; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.mini span{font-size:11.5px; color:var(--ink-faint); letter-spacing:.6px;}

/* ==========================  标签页  ========================== */
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--line-soft);}
.tab{
  padding:9px 15px; border-radius:11px; font-size:13.5px; font-weight:600;
  color:var(--ink-faint); border:1px solid transparent; transition:.18s;
}
.tab:hover{color:var(--ink-dim); background:var(--glass);}
.tab.active{
  color:#fff; border-color:rgba(124,92,255,.5);
  background:linear-gradient(120deg,rgba(124,92,255,.28),rgba(34,211,238,.16));
  box-shadow:0 8px 22px -14px rgba(124,92,255,.9);
}
.panel{display:none; animation:fade .35s ease;}
.panel.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

.h2{margin:0 0 16px; font-size:16px; font-weight:700; letter-spacing:.4px;}
.h2 small{font-weight:400; font-size:12px; color:var(--ink-faint); margin-left:6px; letter-spacing:0;}
.tip{font-size:12.5px; color:var(--ink-faint); margin:14px 0 0;}
.tip b{color:var(--c2); font-variant-numeric:tabular-nums;}

/* 时间线 */
.timeline{list-style:none; margin:0; padding:0;}
.timeline li{
  display:flex; gap:14px; padding:12px 0 12px 4px;
  border-bottom:1px dashed var(--line-soft);
  align-items:flex-start;
}
.timeline li:last-child{border-bottom:0;}
.timeline .tk{
  flex:0 0 auto; min-width:118px; font-weight:700; font-size:13.5px;
  color:var(--c2); font-variant-numeric:tabular-nums;
}
.timeline .tv{flex:1 1 auto; font-size:14px; color:var(--ink-dim);}
.timeline .tv b{color:var(--ink);}
.timeline li.past{opacity:.42;}
.timeline li.past .tk{color:var(--ink-faint);}
.timeline .cd{
  flex:0 0 auto; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px;
  background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.3); color:#9fe9f7;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.timeline li.past .cd{background:rgba(255,255,255,.05); border-color:var(--line-soft); color:var(--ink-faint);}
.timeline li.next .cd{background:rgba(255,176,32,.16); border-color:rgba(255,176,32,.42); color:#ffd27a;}

/* 番茄钟 */
.pomo{display:flex; gap:clamp(20px,4vw,46px); align-items:center; flex-wrap:wrap; justify-content:center;}
.pomo-ring{position:relative; width:clamp(180px,42vw,220px); aspect-ratio:1; flex:0 0 auto;}
.pomo-ring svg{width:100%; height:100%; transform:rotate(-90deg);}
.ring-bg{fill:none; stroke:rgba(255,255,255,.08); stroke-width:11;}
.ring-fg{
  fill:none; stroke:url(#g); stroke-width:11; stroke-linecap:round;
  stroke:var(--c2);
  stroke-dasharray:603.2; stroke-dashoffset:0;
  filter:drop-shadow(0 0 9px rgba(34,211,238,.7));
  transition:stroke-dashoffset .35s linear, stroke .3s;
}
.pomo-ring.done .ring-fg{stroke:var(--c3); filter:drop-shadow(0 0 11px rgba(255,176,32,.8));}
.pomo-ring.rest .ring-fg{stroke:var(--ok); filter:drop-shadow(0 0 11px rgba(34,197,94,.7));}
.pomo-time{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
}
.pomo-time b{font-size:clamp(30px,7vw,42px); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.pomo-time span{font-size:12.5px; color:var(--ink-faint); letter-spacing:1.5px; font-weight:600;}
.pomo-ctl{flex:1 1 260px; min-width:240px; display:flex; flex-direction:column; gap:14px;}
.seg{display:flex; gap:7px; flex-wrap:wrap;}
.seg-btn{
  padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600;
  border:1px solid var(--line); background:var(--glass); color:var(--ink-faint); transition:.18s;
}
.seg-btn:hover{color:var(--ink-dim);}
.seg-btn.active{color:#fff; border-color:rgba(34,211,238,.5); background:rgba(34,211,238,.16);}
.pomo-btns{display:flex; gap:10px;}

/* 清单 */
.checklist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:8px;}
.checklist li{
  display:flex; gap:11px; align-items:flex-start;
  padding:11px 13px; border-radius:11px; cursor:pointer;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.028);
  transition:.18s; font-size:13.8px; color:var(--ink-dim);
  user-select:none;
}
.checklist li:hover{background:var(--glass-2); border-color:var(--line);}
.checklist li.done{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:rgba(34,197,94,.6);}
.checklist .box{
  flex:0 0 auto; width:18px; height:18px; border-radius:6px; margin-top:2px;
  border:1.5px solid rgba(255,255,255,.28); display:grid; place-items:center;
  font-size:11px; color:transparent; transition:.18s;
}
.checklist li.done .box{background:var(--ok); border-color:var(--ok); color:#04120a;}
.cl-foot{display:flex; align-items:center; gap:12px; margin-top:18px; font-size:12.5px; color:var(--ink-faint);}
.cl-foot .pb-track{flex:1 1 auto;}
.cl-foot span{font-variant-numeric:tabular-nums; white-space:nowrap;}

/* 每日一句 */
.quote-box{
  padding:clamp(22px,4vw,42px); border-radius:var(--radius-sm);
  background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(34,211,238,.08));
  border:1px solid var(--line); text-align:center;
}
.quote-box blockquote{
  margin:0 0 14px; font-size:clamp(17px,2.7vw,26px); font-weight:700;
  line-height:1.65; letter-spacing:.6px;
  background:linear-gradient(100deg,#fff,#bcd0ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.quote-box cite{font-style:normal; font-size:13px; color:var(--ink-faint); letter-spacing:.8px;}
.quote-ctl{display:flex; gap:10px; justify-content:center; margin-top:18px;}

/* ==========================  弹层  ========================== */
.modal{
  position:fixed; inset:0; z-index:60;
  background:rgba(3,6,18,.72);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  display:grid; place-items:center; padding:18px;
  animation:fade .22s ease;
}
.modal[hidden]{display:none;}
.modal-card{
  width:min(520px,100%); max-height:88vh; overflow:auto;
  background:linear-gradient(180deg,#131a3d,#0b1029);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(20px,3.4vw,30px); box-shadow:0 40px 80px -30px #000;
  animation:pop .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{from{transform:scale(.94) translateY(12px); opacity:0;} to{transform:none; opacity:1;}}
.modal-card h3{margin:0 0 20px; font-size:18px;}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:15px;}
.field span{font-size:12.8px; color:var(--ink-dim); font-weight:600;}
.field input{
  font-family:inherit; font-size:14.5px; color:var(--ink);
  padding:11px 13px; border-radius:11px;
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  transition:.18s; width:100%;
}
.field input:focus{outline:none; border-color:rgba(34,211,238,.6); background:rgba(255,255,255,.08); box-shadow:0 0 0 3px rgba(34,211,238,.13);}
.field input::-webkit-calendar-picker-indicator{filter:invert(.8) brightness(1.6); cursor:pointer;}
.presets{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:4px 0 20px;}
.presets-lbl{font-size:12.5px; color:var(--ink-faint);}
.chip{
  padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:600;
  border:1px solid var(--line); background:var(--glass); color:var(--ink-dim); transition:.18s;
}
.chip:hover{border-color:rgba(124,92,255,.6); background:rgba(124,92,255,.18); color:#fff;}
.modal-btns{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.modal-btns .tiny{margin-left:auto;}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%);
  z-index:90; padding:11px 20px; border-radius:12px;
  background:rgba(18,24,52,.96); border:1px solid var(--line);
  color:var(--ink); font-size:13.5px; box-shadow:0 20px 44px -18px #000;
  animation:toastIn .28s cubic-bezier(.2,.9,.3,1.2);
  max-width:88vw; text-align:center;
}
.toast[hidden]{display:none;}
@keyframes toastIn{from{transform:translate(-50%,16px); opacity:0;} to{transform:translate(-50%,0); opacity:1;}}

/* 彩带 */
.fx{position:fixed; inset:0; z-index:80; pointer-events:none; overflow:hidden;}
.fx i{position:absolute; width:9px; height:15px; border-radius:2px; animation:fall linear forwards;}
@keyframes fall{
  0%{transform:translate3d(0,-12vh,0) rotate(0); opacity:1;}
  100%{transform:translate3d(var(--dx,0),112vh,0) rotate(760deg); opacity:.1;}
}

/* 页脚 */
.foot{
  display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center;
  color:var(--ink-faint); font-size:12.5px; padding:12px 6px 0; letter-spacing:.5px;
}
.foot-dim{font-size:11.5px; opacity:.66;}

/* 全屏自习模式 */
body.zen .topbar,
body.zen .card:not(.hero),
body.zen .foot,
body.zen .mini-stats,
body.zen .progress-block{display:none !important;}
body.zen .wrap{display:grid; place-items:center; min-height:100vh; max-width:none;}
body.zen .hero{padding:clamp(24px,5vw,60px) clamp(16px,5vw,70px);}

/* ==========================  响应式  ========================== */
@media (max-width:720px){
  .hide-sm{display:none;}
  .mini-stats{grid-template-columns:repeat(2,1fr);}
  .timeline li{flex-wrap:wrap;}
  .timeline .tk{min-width:auto;}
  .timeline .tv{flex:1 1 60%;}
  .pomo{justify-content:center; text-align:center;}
  .pomo-ctl{align-items:center;}
  .seg{justify-content:center;}
  .checklist{grid-template-columns:1fr;}
  .pb-foot span:nth-child(2){display:none;}
}
@media (max-width:420px){
  .flip{min-width:19vw;}
  .colon{font-size:16px; line-height:1.9;}
  .unit{gap:6px;}
  .lbl{font-size:11px; letter-spacing:1.5px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

@media print{
  body{background:#fff; color:#000;}
  #stars,.aurora,.top-actions,.tabs,.foot,.fx{display:none !important;}
  .card{box-shadow:none; border-color:#ccc;}
}