*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  /* 色彩：深绿主色 + 浅绿辅色 + 中性灰 */
  --bg:#eef0f4;--bg2:#e4e7ee;
  --card:rgba(255,255,255,0.66);--card-solid:#fff;
  --fg:#1a1d23;--fg2:#5a5f6b;--fg3:#8b909a;
  --border:rgba(0,0,0,0.07);--shadow:0 8px 32px rgba(0,0,0,0.06);
  --accent:#2E8B57;--accent-ink:#246b43;--accent-bg:rgba(46,139,87,0.1);
  --accent-soft:#E8F5E9;--accent-soft-border:rgba(46,139,87,0.22);
  --warn:#ea580c;--warn-bg:rgba(234,88,12,0.1);
  --rest:#6b7280;--rest-bg:rgba(107,114,128,0.1);
  --input-bg:rgba(255,255,255,0.75);--input-border:rgba(0,0,0,0.1);
  --blur:22px;--radius:20px;--radius-sm:12px;--radius-xs:10px;
  --topbar-h:54px;
}
[data-theme="dark"]{
  --bg:#0e1015;--bg2:#0a0c10;
  --card:rgba(28,32,42,0.72);--card-solid:#1c202a;
  --fg:#e6e8ec;--fg2:#9ca0ab;--fg3:#6b7080;
  --border:rgba(255,255,255,0.07);--shadow:0 8px 32px rgba(0,0,0,0.3);
  --accent:#3CB371;--accent-ink:#5cc98f;--accent-bg:rgba(60,179,113,0.14);
  --accent-soft:rgba(60,179,113,0.12);--accent-soft-border:rgba(60,179,113,0.3);
  --warn:#f97316;--warn-bg:rgba(249,115,22,0.12);
  --rest:#9ca3af;--rest-bg:rgba(156,163,175,0.1);
  --input-bg:rgba(255,255,255,0.06);--input-border:rgba(255,255,255,0.1);
}
html{font-size:15px}
body{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI','PingFang SC','Noto Sans SC','Hiragino Sans GB',sans-serif;
  background:var(--bg);color:var(--fg);min-height:100vh;
  display:flex;justify-content:center;align-items:center;
  padding:calc(var(--topbar-h) + 1rem) 1rem 3rem;
  transition:background .4s,color .4s;
}
/* 背景装饰：缓慢呼吸的光晕 */
body::before{
  content:'';position:fixed;top:-30%;left:-20%;width:70vw;height:70vw;
  background:radial-gradient(circle,rgba(46,139,87,0.10),transparent 70%);
  border-radius:50%;pointer-events:none;z-index:0;
  animation:bgFloat 20s ease-in-out infinite alternate;
}
body::after{
  content:'';position:fixed;bottom:-30%;right:-20%;width:60vw;height:60vw;
  background:radial-gradient(circle,rgba(234,88,12,0.05),transparent 70%);
  border-radius:50%;pointer-events:none;z-index:0;
  animation:bgFloat 25s ease-in-out infinite alternate-reverse;
}
@keyframes bgFloat{0%{transform:translate(0,0)}100%{transform:translate(40px,-30px)}}

/* 毛玻璃卡片 */
.glass{
  background:var(--card);backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);transition:background .4s,border-color .4s,box-shadow .4s;
}

/* ============ 顶部控制条 ============ */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 .8rem 0 .7rem;z-index:1000;
  border-radius:0;border-left:none;border-right:none;border-top:none;
  background:transparent;
}
.topbar-icon{
  width:38px;height:38px;border-radius:50%;border:none;
  background:transparent;color:var(--fg2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
  transition:background .2s,color .2s,transform .2s;font-family:inherit;
}
.topbar-icon:hover{background:var(--accent-bg);color:var(--accent);transform:rotate(45deg)}
.topbar-icon:active{transform:rotate(90deg) scale(.95)}
.topbar-status{flex:1;display:flex;justify-content:center}
.topbar-icon[aria-expanded="true"]{background:var(--accent-bg);color:var(--accent)}

/* 状态徽标 */
.status-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 14px;border-radius:20px;font-size:.78rem;font-weight:500;
  transition:all .3s;
}
.status-badge .dot{width:7px;height:7px;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}
.status-badge.working{background:var(--accent-bg);color:var(--accent-ink)}
.status-badge.working .dot{background:var(--accent)}
.status-badge.resting{background:var(--rest-bg);color:var(--rest)}
.status-badge.resting .dot{background:var(--rest);animation:none}
.status-badge.paused{background:var(--warn-bg);color:var(--warn)}
.status-badge.paused .dot{background:var(--warn);animation:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* ============ 控制抽屉 ============ */
.drawer-scrim{
  position:fixed;inset:0;z-index:1001;opacity:0;pointer-events:none;
  background:rgba(0,0,0,0.18);transition:opacity .3s;
}
.drawer-scrim.show{opacity:1;pointer-events:auto}
.control-drawer{
  position:fixed;top:var(--topbar-h);left:0;right:0;z-index:1002;
  max-width:560px;margin:0 auto;
  transform:translateY(-12px) scale(.98);opacity:0;pointer-events:none;
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .28s;
  padding:.4rem;overflow:hidden;
}
.control-drawer.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.control-drawer[aria-hidden="false"]{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}

/* 配置折叠头 */
.section-title{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.1rem;cursor:pointer;user-select:none;border-radius:var(--radius-sm);
  font-size:.88rem;font-weight:600;color:var(--fg2);
  transition:color .2s,background .2s;
}
.section-title:hover{color:var(--fg);background:var(--accent-bg)}
.section-title .arrow{display:inline-block;transition:transform .3s;font-size:.7rem}
.section-title .arrow.up{transform:rotate(180deg)}

/* 设置区折叠 */
.settings-section{overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s,padding .4s}
.settings-section.collapsed{max-height:0!important;opacity:0;padding:0!important}
.settings-inner{padding:.6rem 1.1rem 1rem}

/* 表单 */
.form-row{margin-bottom:1rem}
.form-row:last-child{margin-bottom:0}
.form-label{display:block;font-size:.74rem;font-weight:600;color:var(--fg3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.form-input{
  width:100%;padding:10px 14px;border-radius:var(--radius-xs);
  border:1px solid var(--input-border);background:var(--input-bg);
  color:var(--fg);font-size:.95rem;font-family:inherit;
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.form-input::placeholder{color:var(--fg3)}

/* 模板按钮组 */
.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1.2rem}
.tpl-btn{
  padding:8px 4px;border-radius:var(--radius-xs);border:1px solid var(--input-border);
  background:var(--input-bg);color:var(--fg2);font-size:.8rem;font-weight:500;
  cursor:pointer;transition:all .2s;text-align:center;font-family:inherit;
}
.tpl-btn:hover{border-color:var(--accent);color:var(--accent)}
.tpl-btn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-ink);font-weight:600}

/* 自定义参数网格 */
.custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.custom-grid .full{grid-column:1/-1}

/* 按钮通用 */
.save-row{display:flex;gap:10px;margin-top:1.2rem}
.btn{
  padding:10px 20px;border-radius:var(--radius-sm);border:none;
  font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit;
  transition:all .2s;display:inline-flex;align-items:center;gap:6px;
}
.btn-primary{background:var(--accent);color:#fff;flex:1;justify-content:center}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 6px 18px var(--accent-bg)}
.btn-ghost{background:transparent;color:var(--fg3);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--warn);border-color:var(--warn)}
.btn-sm{padding:7px 14px;font-size:.8rem}

/* 抽屉内的操作按钮组 */
.drawer-actions{display:flex;gap:8px;padding:.5rem .6rem .2rem}
.drawer-actions .btn-primary{flex:1.4}
.drawer-actions .btn-ghost{flex:1}

/* 悬浮窗开关 */
.float-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1.1rem;margin:.2rem .3rem .3rem;
  border-top:1px solid var(--border);
}
.ft-label{font-size:.85rem;font-weight:500;color:var(--fg2)}
.switch{
  position:relative;width:44px;height:24px;border-radius:14px;border:none;
  background:var(--input-border);cursor:pointer;padding:0;transition:background .25s;flex:none;
}
.switch[aria-checked="true"]{background:var(--accent)}
.switch-knob{
  position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s;
}
.switch[aria-checked="true"] .switch-knob{transform:translateX(20px)}

/* ============ 主舞台：今日累计为锚点 ============ */
.app{width:100%;max-width:560px;position:relative;z-index:1}
.stage{
  padding:1.6rem 1.5rem 1.5rem;position:relative;
  display:flex;flex-direction:column;gap:1rem;
}

/* 实时每秒收入：呼吸式副标题 */
.second-income{
  display:flex;align-items:baseline;gap:6px;
  padding-left:.2rem;
}
.second-income .live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  align-self:center;margin-right:2px;animation:livePulse 1.4s ease-in-out infinite;
  box-shadow:0 0 0 0 var(--accent-bg);
}
@keyframes livePulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 var(--accent-bg)}
  50%{opacity:.5;box-shadow:0 0 0 5px transparent}
}
.second-income .label{font-size:.78rem;color:var(--fg3);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.second-income .value{
  font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;line-height:1;
  animation:breathe 2s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.62}}
.second-income .unit{font-size:.8rem;color:var(--fg3)}

/* 今日累计：绝对视觉中心 */
.hero-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.4rem .2rem 0;
}
.hero{position:relative;min-width:0;
  animation:heartbeat 1.1s ease-in-out infinite;transform-origin:left center;
}
@keyframes heartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.012)}24%{transform:scale(1)}}
.hero-label{
  font-size:.74rem;font-weight:700;color:var(--accent-ink);text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:.2rem;
}
.hero-value{display:flex;align-items:baseline;gap:6px}
.hero-num{
  font-size:3.4rem;font-weight:800;letter-spacing:-.04em;line-height:.95;
  font-variant-numeric:tabular-nums;color:var(--fg);
}
.hero-unit{font-size:1rem;font-weight:600;color:var(--fg3)}
.hero-sub{font-size:.78rem;color:var(--fg3);margin-top:.35rem;font-variant-numeric:tabular-nums}

/* 右侧垂直堆叠：本月累计 + 入职至今（无背景，垂直居中） */
.hero-side{
  display:flex;flex-direction:column;justify-content:center;
  align-items:flex-end;gap:.7rem;flex:none;text-align:right;
}
.side-item{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.side-label{font-size:.66rem;color:var(--fg3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.side-value{font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--fg)}
.side-value-lg{font-size:1.5rem;color:var(--accent-ink)}
.side-sub{font-size:.66rem;color:var(--fg3);font-variant-numeric:tabular-nums}
.side-divider{width:24px;height:1px;background:var(--border)}

/* 迷你标签组 */
.mini-row{
  display:flex;align-items:center;gap:0;margin-top:.2rem;
  padding:.7rem .8rem;border-radius:var(--radius-xs);
  background:var(--input-bg);border:1px solid var(--border);
}
.mini-item{flex:1;display:flex;align-items:baseline;gap:5px;justify-content:center;min-width:0}
.mini-item .mi-ico{font-size:.85rem;color:var(--accent);font-weight:700;align-self:center}
.mini-item .mi-label{font-size:.66rem;color:var(--fg3);text-transform:uppercase;letter-spacing:.03em;font-weight:600}
.mini-item .mi-value{font-size:.92rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg)}
.mini-item.mini-countdown .mi-value{color:var(--accent-ink)}
.mini-divider{width:1px;align-self:stretch;background:var(--border);margin:2px 0}

/* 下班倒计时进度条 */
.countdown-track{
  height:5px;border-radius:3px;background:var(--input-border);overflow:hidden;
  margin-top:.5rem;
}
.countdown-fill{
  height:100%;width:0;border-radius:3px;
  background:var(--accent);transition:width .4s linear,background .6s;
}

/* ============ 悬浮窗 ============ */
.float-window{
  position:fixed;z-index:99999;
  width:300px;min-width:200px;min-height:100px;
  padding:16px 18px;cursor:default;transition:opacity .15s;
}
.fw-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;cursor:move;user-select:none}
.fw-header .fw-title{font-size:.75rem;color:var(--fg3);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.fw-header .fw-controls{display:flex;gap:8px}
.fw-dot{width:10px;height:10px;border-radius:50%;cursor:pointer;border:none;background:var(--fg3);opacity:.4;transition:opacity .2s,background .2s;padding:0}
.fw-dot:hover{opacity:1}
.fw-dot.minimize:hover{background:var(--warn)}
.fw-dot.close:hover{background:#ef4444}
.fw-body{transition:max-height .3s,opacity .3s,margin .3s;overflow:hidden}
.fw-body.hidden{max-height:0!important;opacity:0;margin:0}
.fw-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.fw-row:last-child{margin-bottom:0}
.fw-row .fw-label{font-size:.75rem;color:var(--fg3)}
.fw-row .fw-val{font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums}
.fw-row.main .fw-val{font-size:1.4rem;font-weight:800;color:var(--accent-ink)}
.fw-footer{margin-top:12px;display:flex;align-items:center;gap:8px}
.fw-footer label{font-size:.68rem;color:var(--fg3);white-space:nowrap}
.fw-footer input[type=range]{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--input-border);border-radius:2px;outline:none}
.fw-footer input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}
.fw-resize{position:absolute;bottom:0;right:0;width:18px;height:18px;cursor:nwse-resize;opacity:.3}
.fw-resize::after{content:'';position:absolute;bottom:4px;right:4px;width:8px;height:8px;border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3)}

/* 主题切换按钮（顶部右侧） */
.theme-toggle{
  width:38px;height:38px;border-radius:50%;border:none;
  background:transparent;color:var(--fg2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  transition:background .2s,color .2s,transform .2s;font-family:inherit;
}
.theme-toggle:hover{background:var(--accent-bg);color:var(--accent);transform:scale(1.08)}

/* Toast */
.toast-container{position:fixed;top:calc(var(--topbar-h) + .6rem);left:50%;transform:translateX(-50%);z-index:100000;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{
  padding:10px 22px;border-radius:var(--radius-sm);
  background:var(--card-solid);color:var(--fg);font-size:.85rem;font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);border:1px solid var(--border);
  animation:toastIn .3s ease,toastOut .3s ease 1.8s forwards;pointer-events:none;
}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

/* 未配置提示 */
.no-config{padding:3rem 1.5rem;text-align:center}
.no-config p{color:var(--fg3);font-size:.95rem;margin-bottom:1rem}
.no-config .btn{display:inline-flex}

/* 响应式 */
@media(max-width:480px){
  body{padding:calc(var(--topbar-h) + .6rem) .6rem 3rem}
  .hero-num{font-size:2.4rem}
  .second-income .value{font-size:1.25rem}
  .side-value{font-size:1rem}
  .side-value-lg{font-size:1.2rem}
  .hero-row{gap:.6rem}
  .template-grid{grid-template-columns:repeat(2,1fr)}
  .mini-item .mi-label{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
  .hero,.second-income .value,.live-dot{animation:none!important}
}