/* ============ 主题变量 ============ */
:root{
  --hue: 250;
  --accent: hsl(var(--hue), 85%, 62%);
  --accent-soft: hsl(var(--hue), 85%, 62% / .22);
  --accent-glow: hsl(var(--hue), 90%, 65% / .45);
  --danger: hsl(0, 80%, 62%);
}
body[data-theme="dark"]{
  --bg: #0b0d12;
  --bg2: #11141c;
  --fg: #eef1f7;
  --muted: #8b93a7;
  --glass: hsl(230, 25%, 14% / .72);
  --glass-border: hsl(230, 30%, 60% / .16);
  --shadow: 0 18px 50px rgb(0 0 0 / .45);
}
body[data-theme="light"]{
  --bg: #f3f5fa;
  --bg2: #ffffff;
  --fg: #1c2130;
  --muted: #6a7186;
  --glass: hsl(0, 0%, 100% / .78);
  --glass-border: hsl(230, 30%, 40% / .12);
  --shadow: 0 14px 40px rgb(60 70 110 / .14);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0; font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--fg); overflow-x:hidden;
  transition:background .5s, color .5s;
}
.hidden{display:none !important;}
.muted{color:var(--muted);}
.err{color:var(--danger); min-height:1.2em; font-size:.9rem; margin:.4rem 0 0;}

/* ============ 背景光斑 ============ */
.bg-orbs{position:fixed; inset:0; overflow:hidden; z-index:-1;}
.bg-orbs i{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.35;
  background:var(--accent); animation:drift 18s ease-in-out infinite alternate;
}
.bg-orbs i:nth-child(1){width:44vmax;height:44vmax;left:-12vmax;top:-14vmax;}
.bg-orbs i:nth-child(2){width:36vmax;height:36vmax;right:-10vmax;top:22vh;animation-delay:-6s;background:hsl(calc(var(--hue) + 60),80%,60%);}
.bg-orbs i:nth-child(3){width:30vmax;height:30vmax;left:22vw;bottom:-14vmax;animation-delay:-12s;background:hsl(calc(var(--hue) - 50),80%,60%);}
@keyframes drift{
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(6vmax,-4vmax) scale(1.15);}
}

.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:20px;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow);
}

/* ============ 视图切换特效 ============ */
.view{display:none;}
.view.active{display:block; animation:viewIn .45s cubic-bezier(.22,1,.36,1);}
@keyframes viewIn{
  from{opacity:0; transform:translateY(18px) scale(.985);}
  to{opacity:1; transform:none;}
}

/* ============ 登录 ============ */
#view-login{display:none; min-height:100vh; place-items:center; padding:1.2rem;}
#view-login.active{display:grid;}
.login-card{width:min(92vw, 380px); padding:2.4rem 2rem; text-align:center;}
.login-card .logo{font-size:3rem;}
.login-card h1{margin:.4rem 0 .2rem; font-size:1.6rem; letter-spacing:.08em;}
.login-card input{
  width:100%; margin:1.2rem 0 .8rem; padding:.9rem 1rem; font-size:1.05rem;
  border-radius:14px; border:1px solid var(--glass-border);
  background:transparent; color:var(--fg); outline:none; text-align:center;
}
.login-card input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.shake{animation:shake .4s;}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ============ 按钮 ============ */
.btn{
  border:none; border-radius:14px; padding:.8rem 1.6rem; font-size:1rem;
  color:var(--fg); background:var(--accent-soft); cursor:pointer;
  transition:transform .15s, box-shadow .2s, background .2s; font-family:inherit;
}
.btn:active{transform:scale(.96);}
.btn.primary{background:var(--accent); color:#fff;}
.btn.big{padding:1rem 2.2rem; font-size:1.1rem; border-radius:18px; font-weight:600;}
.btn.small{padding:.45rem .9rem; font-size:.85rem;}
.btn.danger{background:var(--danger); color:#fff;}
.btn.ghost{background:var(--glass); border:1px solid var(--glass-border);}
.btn.glow{box-shadow:0 0 24px var(--accent-glow);}
.btn:disabled{opacity:.4; cursor:not-allowed; box-shadow:none;}
.link-btn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:.9rem;font-family:inherit;}
.icon-btn{
  background:transparent; border:none; font-size:1.15rem; cursor:pointer;
  padding:.45rem .55rem; border-radius:12px; color:var(--fg); transition:background .2s;
}
.icon-btn:hover{background:var(--accent-soft);}

/* ============ 顶栏 ============ */
.topbar{
  position:sticky; top:10px; z-index:20; margin:10px auto 0;
  width:min(1080px, calc(100% - 20px));
  display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem; border-radius:18px;
}
.brand{font-weight:700; letter-spacing:.05em; cursor:pointer; white-space:nowrap;}
.tabs{display:flex; gap:.2rem; margin-left:auto;}
.tab{
  border:none; background:transparent; color:var(--muted); font-size:.95rem;
  padding:.5rem .9rem; border-radius:12px; cursor:pointer; font-family:inherit; transition:all .2s;
}
.tab.active{background:var(--accent-soft); color:var(--fg); font-weight:600;}
.top-actions{display:flex; gap:.1rem;}

.hue-panel{
  position:fixed; top:66px; right:16px; z-index:30; padding:.7rem 1rem;
  display:flex; align-items:center; gap:.6rem; animation:viewIn .25s;
}
.hue-panel input{accent-color:var(--accent); width:150px;}
#hue-dot{width:18px;height:18px;border-radius:50%;background:var(--accent);display:inline-block;}

/* ============ 主区域 ============ */
#main{width:min(1080px, calc(100% - 24px)); margin:0 auto; padding:1.2rem 0 4rem;}
.section-title{margin:.6rem 0 1rem; font-size:1.25rem; letter-spacing:.04em;}

/* ============ 首页 ============ */
.home-wrap{max-width:640px; margin:4vh auto 0; display:flex; flex-direction:column; gap:1rem; align-items:stretch; text-align:center;}
.home-hello{margin:.2rem 0; font-size:clamp(1.6rem, 5vw, 2.4rem); letter-spacing:.05em;}
.home-quote{padding:1rem 1.4rem; font-size:1.05rem; line-height:1.7; margin:0;}
.home-stats{display:flex; gap:1rem;}
.stat-chip{flex:1; padding:1rem; display:flex; flex-direction:column; gap:.2rem;}
.stat-chip span{font-size:1.6rem; font-weight:700; color:var(--accent);}
.stat-chip label{color:var(--muted); font-size:.85rem;}
.mini-chart{padding:1rem 1.2rem; text-align:left;}
.mini-chart-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; color:var(--muted);}

/* ============ 计时设置 ============ */
.timer-setup{max-width:720px; margin:2vh auto 0;}
.subject-grid{
  display:grid; gap:.7rem; margin-bottom:1rem;
  grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
}
.subject-btn{
  padding:1.1rem .4rem; border-radius:16px; border:1px solid var(--glass-border);
  background:var(--glass); color:var(--fg); font-size:1rem; cursor:pointer;
  transition:all .2s; font-family:inherit; backdrop-filter:blur(10px);
}
.subject-btn:hover{transform:translateY(-2px); border-color:var(--accent);}
.subject-btn.sel{
  background:var(--accent); color:#fff; border-color:transparent;
  box-shadow:0 6px 22px var(--accent-glow); font-weight:600;
}
.setup-row{
  display:flex; align-items:center; gap:1rem; padding:.8rem 1.1rem; margin-bottom:.8rem;
}
.setup-row label{flex:1; color:var(--muted); font-size:.95rem;}
.setup-row input{
  width:110px; padding:.55rem .8rem; font-size:1.05rem; text-align:center;
  border-radius:12px; border:1px solid var(--glass-border);
  background:transparent; color:var(--fg); outline:none;
}
.setup-row input:focus{border-color:var(--accent);}
.setup-row.slim{max-width:340px; margin:0 auto 1rem;}
#start-btn{width:100%;}

/* ============ 计时中 ============ */
.timer-running{display:flex; flex-direction:column; align-items:center; gap:1.1rem; padding-top:2vh;}
.ring-wrap{position:relative; width:min(72vw, 340px);}
.ring{width:100%; transform:rotate(-90deg);}
.ring circle{fill:none; stroke-width:12; stroke-linecap:round;}
.ring-bg{stroke:var(--glass-border);}
.ring-fg{
  stroke:var(--accent); stroke-dasharray:741.4; stroke-dashoffset:741.4;
  transition:stroke-dashoffset .4s linear; filter:drop-shadow(0 0 10px var(--accent-glow));
}
.ring-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.2rem;
}
.r-subject{font-size:1.15rem; color:var(--accent); font-weight:700; letter-spacing:.15em;}
.r-time{font-size:clamp(2.6rem, 9vw, 3.6rem); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.03em;}
.r-est{font-size:.9rem;}
.timer-running.paused .ring-fg{stroke:var(--muted); filter:none;}
.timer-running.paused .r-time{opacity:.55;}
.timer-running.overtime .ring-fg{stroke:var(--danger); animation:pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 6px var(--accent-glow));}50%{filter:drop-shadow(0 0 22px var(--danger));}}
.overtime-tip{
  color:var(--danger); background:hsl(0,80%,62% / .12); border:1px solid hsl(0,80%,62% / .3);
  padding:.6rem 1.2rem; border-radius:14px; animation:viewIn .4s;
}
.timer-btns{display:flex; gap:1rem; width:min(92vw, 420px);}
.timer-btns .btn{flex:1;}
.sync-tip{font-size:.8rem;}

/* ============ 统计 ============ */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:.8rem; margin-bottom:1rem;}
.card{padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.15rem;}
.card span{font-size:1.5rem; font-weight:700; color:var(--accent);}
.card label{color:var(--muted); font-size:.85rem;}
.panel{padding:1.1rem 1.3rem; margin-bottom:1rem;}
.panel h3{margin:.1rem 0 .8rem; font-size:1.02rem; color:var(--muted); font-weight:600;}
.chart-box{position:relative; height:280px;}
.chart-box.sm{height:150px;}
.chart-cols{display:grid; grid-template-columns:1.2fr 1fr; gap:1rem; align-items:center;}
.subject-table{display:flex; flex-direction:column; gap:.45rem; font-size:.92rem;}
.subject-table .row{display:flex; justify-content:space-between; gap:1rem;}
.subject-table .bar{height:6px; border-radius:3px; background:var(--accent); margin-top:3px;}

/* ============ 响应式 ============ */
@media (max-width: 768px){
  .brand{font-size:.95rem;}
  .tab{padding:.45rem .6rem; font-size:.88rem;}
  .chart-cols{grid-template-columns:1fr;}
  .chart-box{height:230px;}
  .home-wrap{margin-top:2vh;}
}
@media (max-width: 420px){
  .subject-grid{grid-template-columns:repeat(3, 1fr);}
  .tabs .tab{padding:.45rem .45rem;}
}
@media (min-width: 1024px){
  .subject-grid{grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));}
}