/* ===================================================================
   摸鱼搞钱 · 下班倒计时  |  Designed & Powered by MICKEY
   =================================================================== */

:root{
  --bg:#eef1f8; --bg2:#e3e9f5; --bg3:#f7f9ff;
  --card:rgba(255,255,255,.66); --card-solid:#ffffff; --card-brd:rgba(255,255,255,.9);
  --text:#18233c; --text-dim:#5a6785; --text-mute:#8a95b0;
  --accent:#5b6cf5; --accent2:#9b5cf6; --good:#0fa968; --warn:#e8604c;
  --line:rgba(24,35,60,.09); --soft:rgba(24,35,60,.045);
  --shadow:0 18px 50px rgba(40,60,110,.13);
  --glow:0 0 26px rgba(91,108,245,.35);
  --num:#18233c;
  --orb1:rgba(91,108,245,.28); --orb2:rgba(155,92,246,.22); --orb3:rgba(47,190,170,.20);
  --grid:rgba(24,35,60,.035);
  --chip:rgba(91,108,245,.10);
}
[data-theme="dark"]{
  --bg:#090e1c; --bg2:#101a33; --bg3:#0d1528;
  --card:rgba(255,255,255,.055); --card-solid:#141d33; --card-brd:rgba(255,255,255,.10);
  --text:#e9eefb; --text-dim:#a9b6d3; --text-mute:#6f7f9f;
  --accent:#7c8dff; --accent2:#b887ff; --good:#3ddc9a; --warn:#ff7a6b;
  --line:rgba(255,255,255,.10); --soft:rgba(255,255,255,.04);
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --glow:0 0 30px rgba(124,141,255,.42);
  --num:#f2f6ff;
  --orb1:rgba(91,108,245,.24); --orb2:rgba(155,92,246,.20); --orb3:rgba(47,190,170,.13);
  --grid:rgba(255,255,255,.025);
  --chip:rgba(124,141,255,.14);
}
[data-theme="rage"]{
  --bg:#0d0406; --bg2:#1b070b; --bg3:#120507;
  --card:rgba(255,255,255,.045); --card-solid:#1b0a0e; --card-brd:rgba(255,90,100,.16);
  --text:#ffe9eb; --text-dim:#e2a4ad; --text-mute:#a86b74;
  --accent:#ff4d61; --accent2:#ff9a4d; --good:#ff6b6b; --warn:#ff3b4e;
  --line:rgba(255,90,100,.14); --soft:rgba(255,90,100,.05);
  --shadow:0 18px 55px rgba(0,0,0,.6);
  --glow:0 0 34px rgba(255,60,80,.48);
  --num:#fff0f1;
  --orb1:rgba(255,45,70,.26); --orb2:rgba(180,20,50,.24); --orb3:rgba(255,120,40,.13);
  --grid:rgba(255,80,95,.035);
  --chip:rgba(255,77,97,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; transition:background .5s ease,color .5s ease;
}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* ---------- 背景 ---------- */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(1200px 700px at 12% -8%,var(--bg3),transparent 70%),linear-gradient(160deg,var(--bg),var(--bg2));}
.orb{position:absolute;border-radius:50%;filter:blur(70px);animation:drift 18s ease-in-out infinite alternate}
.orb-a{width:46vw;height:46vw;left:-10vw;top:-12vw;background:var(--orb1)}
.orb-b{width:38vw;height:38vw;right:-8vw;top:18vh;background:var(--orb2);animation-delay:-6s}
.orb-c{width:34vw;height:34vw;left:32vw;bottom:-16vw;background:var(--orb3);animation-delay:-11s}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(#000,transparent 85%)}
@keyframes drift{to{transform:translate3d(4vw,5vh,0) scale(1.15)}}

/* ---------- 通用 ---------- */
.glass{
  background:var(--card); border:1px solid var(--card-brd);
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  box-shadow:var(--shadow); border-radius:20px;
}
.view{display:none;position:relative;z-index:1}
.view.active{display:block;animation:viewIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.section-label{font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--text-dim);margin-bottom:11px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.section-label em{font-style:normal;font-weight:500;font-size:11px;color:var(--text-mute);letter-spacing:0}

/* ---------- 前台 ---------- */
#board{max-width:1160px;margin:0 auto;padding:22px 22px 30px}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:42px;height:42px;flex:0 0 42px;border-radius:13px;display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:var(--glow)}
.brand-title{font-size:18px;font-weight:800;letter-spacing:.3px;white-space:nowrap}
.brand-sub{font-size:9px;letter-spacing:1.6px;color:var(--text-mute);margin-top:3px;white-space:nowrap}
.top-actions{display:flex;gap:8px;flex-shrink:0}
.icon-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:12px;font-size:12px;font-weight:650;
  color:var(--text-dim);background:var(--card);border:1px solid var(--card-brd);transition:.2s;white-space:nowrap}
.icon-btn:hover{color:var(--text);transform:translateY(-2px);box-shadow:var(--shadow)}
.icon-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;box-shadow:var(--glow)}
.icon-btn span{font-size:11px}

.status-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;margin-bottom:16px;flex-wrap:wrap}
.date-main{font-size:14px;font-weight:650;color:var(--text-dim);letter-spacing:.4px}
.clock-main{font-size:30px;font-weight:800;letter-spacing:1px;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px;color:var(--text)}
.status-badge{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;
  background:linear-gradient(135deg,rgba(15,169,104,.14),rgba(15,169,104,.05));color:var(--good);border:1px solid rgba(15,169,104,.22)}
.status-badge i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:blip 1.8s infinite}
.status-badge.off{background:linear-gradient(135deg,rgba(255,77,97,.16),rgba(255,77,97,.05));color:var(--warn);border-color:rgba(255,77,97,.25)}
.status-badge.rest{background:linear-gradient(135deg,rgba(91,108,245,.16),rgba(155,92,246,.06));color:var(--accent);border-color:rgba(91,108,245,.25)}
@keyframes blip{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* 四档切换：默认收起，入口只是 hero 右上角一个极小的胶囊 */
.mode-trigger{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;
  font-size:10px;font-weight:600;color:var(--text-mute);background:transparent;
  border:1px solid transparent;transition:.22s;white-space:nowrap;letter-spacing:.2px}
.mode-trigger:hover{color:var(--text-dim);background:var(--soft);border-color:var(--line)}
.mode-trigger .mt-diamond{font-size:8px;opacity:.55}
.mode-trigger .mt-chev{font-size:9px;opacity:.6;transition:transform .25s}
.mode-trigger[aria-expanded="true"]{color:var(--accent);background:var(--chip);border-color:var(--line)}
.mode-trigger[aria-expanded="true"] .mt-chev{transform:rotate(180deg)}
.mode-body{display:none;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);position:relative;z-index:2}
.hero.modes-open .mode-body{display:block;animation:modeIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes modeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mode-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.mode-tab{position:relative;overflow:hidden;text-align:left;padding:11px 13px;border-radius:13px;
  background:var(--soft);border:1px solid var(--line);transition:.25s;min-height:70px}
.mode-tab::before{content:"";position:absolute;inset:-40% -60%;background:radial-gradient(circle,var(--tabc),transparent 62%);opacity:0;transition:.35s;pointer-events:none}
.mode-tab:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mode-tab.active{border-color:var(--tabc);box-shadow:0 0 0 1px var(--tabc),var(--glow);animation:breathe 2.6s ease-in-out infinite}
.mode-tab.active::before{opacity:.20}
@keyframes breathe{0%,100%{box-shadow:0 0 0 1px var(--tabc),0 0 16px -4px var(--tabc)}50%{box-shadow:0 0 0 1px var(--tabc),0 0 30px 2px var(--tabc)}}
.mode-tab .mt-top{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;font-weight:800;color:var(--text)}
.mode-tab .mt-idx{font:700 10px/1 monospace;color:var(--tabc);letter-spacing:1px}
.mode-tab .mt-val{font-size:15px;font-weight:800;margin-top:7px;font-variant-numeric:tabular-nums;color:var(--tabc)}
.mode-tab .mt-sub{font-size:10px;color:var(--text-mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 大数字 */
.hero{padding:22px 26px 18px;margin-bottom:16px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;width:340px;height:340px;right:-120px;top:-180px;border-radius:50%;
  background:radial-gradient(circle,var(--chip),transparent 68%);pointer-events:none}
.hero-head{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:3}
.hero-label{font-size:13px;font-weight:700;letter-spacing:1px;color:var(--text-dim)}
.big-wrap{display:flex;align-items:baseline;gap:10px;margin:10px 0 4px;position:relative;z-index:1}
.currency{font-size:clamp(24px,3.4vw,40px);font-weight:700;color:var(--accent);opacity:.85}
.big-number{font-family:"SF Mono","Cascadia Code",Consolas,"Roboto Mono",ui-monospace,monospace;
  font-size:clamp(46px,8.4vw,104px);font-weight:800;line-height:1.06;letter-spacing:-2px;
  font-variant-numeric:tabular-nums;color:var(--num);
  background:linear-gradient(120deg,var(--text),var(--accent) 55%,var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 8px 40px rgba(91,108,245,.18);white-space:nowrap}
.big-number.flash{animation:numFlash .55s cubic-bezier(.2,.8,.2,1)}
@keyframes numFlash{0%{filter:brightness(2.4) drop-shadow(0 0 18px var(--accent));transform:scale(1.035)}100%{filter:none;transform:none}}
.speed-line{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim);position:relative;z-index:1}
.speed-line b{color:var(--accent);font-variant-numeric:tabular-nums;font-size:14px}
.pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--good);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.hero-foot{display:flex;gap:0;margin-top:18px;border-top:1px solid var(--line);padding-top:14px;position:relative;z-index:1}
.hero-foot>div{flex:1;padding-left:16px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.hero-foot>div:first-child{padding-left:0;border-left:none}
.hero-foot span{font-size:11px;color:var(--text-mute)}
.hero-foot b{font-size:15px;font-variant-numeric:tabular-nums;color:var(--text)}

/* 倒计时 */
.metrics{padding:18px 24px 20px;margin-bottom:16px}
.metric-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.metric-label{font-size:12px;color:var(--text-dim);font-weight:600}
.countdown{font:800 clamp(17px,2.6vw,25px)/1.2 "SF Mono",Consolas,monospace;font-variant-numeric:tabular-nums;color:var(--accent)}
.progress-head{display:flex;justify-content:space-between;font-size:11px;color:var(--text-mute);margin:16px 0 7px}
.progress-head b{color:var(--text);font-variant-numeric:tabular-nums;font-size:12px}
.progress-track{height:12px;border-radius:999px;background:var(--soft);border:1px solid var(--line);overflow:hidden;position:relative}
.progress-fill{height:100%;width:0%;border-radius:999px;position:relative;
  background:linear-gradient(90deg,var(--accent),var(--accent2),#41d3b6,var(--accent));background-size:280% 100%;
  animation:flow 3.5s linear infinite;box-shadow:0 0 16px var(--accent);transition:width .25s linear}
.progress-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shine 2.4s linear infinite}
@keyframes flow{to{background-position:280% 0}}
@keyframes shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.progress-scale{display:flex;justify-content:space-between;font-size:10px;color:var(--text-mute);margin-top:6px;font-variant-numeric:tabular-nums}
.month-line{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.month-amount{font:800 clamp(17px,2.4vw,24px)/1 "SF Mono",Consolas,monospace;font-variant-numeric:tabular-nums;
  color:var(--good);text-shadow:0 0 20px rgba(15,169,104,.22)}
.overtime-box{margin-top:16px;padding:16px;border-radius:15px;background:linear-gradient(135deg,rgba(255,60,80,.12),rgba(255,60,80,.03));border:1px solid rgba(255,77,97,.25)}
.ot-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ot-title{font-size:11px;color:var(--text-mute);font-weight:600;letter-spacing:.5px}
.ot-amount{font:800 clamp(22px,3.4vw,34px)/1.2 "SF Mono",Consolas,monospace;color:var(--warn);margin:6px 0 3px;font-variant-numeric:tabular-nums;
  text-shadow:0 0 24px rgba(255,60,80,.4)}
.ot-desc{font-size:11px;color:var(--text-dim)}
.ot-timer{font:800 clamp(16px,2.4vw,22px)/1.2 "SF Mono",Consolas,monospace;margin:8px 0 3px;font-variant-numeric:tabular-nums;color:var(--text)}
.ot-coffee{font-size:11px;color:var(--warn)}

/* 摸鱼打卡 */
.fun-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:18px}
.fish-card{padding:16px 20px}
.fish-buttons{display:flex;gap:10px;flex-wrap:wrap}
.fish-btn{display:inline-flex;align-items:center;gap:7px;padding:11px 15px;border-radius:13px;font-size:13px;font-weight:700;
  background:var(--soft);border:1px solid var(--line);color:var(--text);transition:.2s}
.fish-btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.fish-btn.running{background:linear-gradient(135deg,rgba(255,77,97,.18),rgba(255,154,77,.10));border-color:var(--warn);animation:breathe 1.8s infinite}
.fish-btn .fish-timer{font:700 12px/1 "SF Mono",Consolas,monospace;color:var(--warn);min-width:0;font-variant-numeric:tabular-nums}
.fish-tip{font-size:11px;color:var(--text-mute);margin-top:12px;line-height:1.5}

/* 怨种语录：无标题无卡片，偶尔淡淡浮现一句，几秒后自行散去 */
.quote-float{position:fixed;right:24px;bottom:22px;z-index:60;max-width:min(320px,72vw);
  text-align:right;font-size:11.5px;line-height:1.75;font-style:italic;color:var(--text-mute);
  opacity:0;transform:translateY(9px);pointer-events:none;cursor:pointer;
  transition:opacity .9s ease,transform .9s ease;text-shadow:0 1px 14px var(--bg)}
.quote-float::before{content:"";display:block;width:20px;height:1px;margin:0 0 8px auto;background:var(--accent);opacity:.45}
.quote-float.show{opacity:.9;transform:none;pointer-events:auto}
.quote-float.show:hover{opacity:1;color:var(--text-dim)}

/* 签名 */
.board-footer{display:flex;justify-content:center;padding:6px 0 2px}
.signature,.admin-signature{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 30px;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,var(--soft),transparent);border:1px solid var(--line)}
.sig-spark{position:absolute;top:0;left:-60%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sweep 4.5s ease-in-out infinite}
[data-theme="dark"] .sig-spark,[data-theme="rage"] .sig-spark{background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
@keyframes sweep{0%{left:-60%}55%,100%{left:130%}}
.sig-main{font-size:12px;letter-spacing:1.2px;color:var(--text-dim);position:relative;z-index:1}
.sig-main b{font-size:13px;letter-spacing:2.5px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shineText 3s linear infinite}
@keyframes shineText{to{background-position:200% center}}
.sig-sub{font-size:9.5px;letter-spacing:.8px;color:var(--text-mute);position:relative;z-index:1}

/* ===================================================================
   后台
   =================================================================== */
.admin-view{max-width:1400px;margin:0 auto;padding:22px 22px 40px}
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;margin-bottom:18px;flex-wrap:wrap}
.admin-brand{display:flex;align-items:center;gap:13px}
.admin-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:800 20px/1 Georgia,serif;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:var(--glow)}
.admin-title{font-size:17px;font-weight:800}
.admin-title .ver{font-size:10px;letter-spacing:1.4px;color:var(--text-mute);font-weight:600}
.admin-sub{font-size:11px;color:var(--text-mute);margin-top:3px}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.pill-btn{padding:9px 14px;border-radius:11px;font-size:12px;font-weight:700;background:var(--soft);border:1px solid var(--line);color:var(--text-dim);transition:.2s;white-space:nowrap}
.pill-btn:hover{color:var(--text);border-color:var(--accent);transform:translateY(-2px)}
.pill-btn.solid{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent;box-shadow:var(--glow)}
.pill-btn.danger:hover{border-color:var(--warn);color:var(--warn)}
.pill-btn.wide{width:100%;padding:12px;margin-top:16px;font-size:13px}

.admin-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.9fr);gap:18px;align-items:start}
.admin-inputs{display:flex;flex-direction:column;gap:16px;min-width:0}
.panel{padding:20px 22px;border-radius:20px}
.panel.sticky{position:sticky;top:18px}
.panel-head{display:flex;align-items:center;gap:11px;margin-bottom:18px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:14.5px;font-weight:800;letter-spacing:.3px;white-space:nowrap}
.panel-hint{font-size:10.5px;color:var(--text-mute);margin-left:auto;text-align:right}
.panel-hint b{color:var(--accent)}
.step{width:24px;height:24px;flex:0 0 24px;border-radius:8px;display:grid;place-items:center;font:800 10px/1 monospace;
  background:var(--chip);color:var(--accent)}
.step.live{background:rgba(15,169,104,.14);color:var(--good);font-size:8px;animation:blink 1.4s infinite}

.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-grid.four{grid-template-columns:repeat(4,1fr);gap:12px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>span{font-size:11.5px;font-weight:650;color:var(--text-dim)}
.field>span i{font-style:normal;font-weight:500;color:var(--text-mute);font-size:10px;margin-left:4px}
.field small{font-size:10px;color:var(--text-mute);line-height:1.4}
.input-wrap{display:flex;align-items:center;gap:6px;padding:0 12px;height:40px;border-radius:11px;
  background:var(--soft);border:1px solid var(--line);transition:.2s}
.input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--chip)}
.input-wrap .prefix{font-size:12px;color:var(--text-mute);font-weight:700}
.input-wrap input{width:100%;background:none;border:none;outline:none;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.input-wrap input[type="time"]{font-size:13px}
.input-wrap.tiny{height:34px;width:110px}
.link-btn{font-size:10px;color:var(--accent);font-weight:700;text-decoration:underline;padding:0}
.link-btn:hover{color:var(--accent2)}

.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:11.5px}
.switch input{display:none}
.switch-track{width:38px;height:21px;border-radius:999px;background:var(--soft);border:1px solid var(--line);position:relative;transition:.25s;flex:0 0 38px}
.switch-track::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:var(--text-mute);top:2px;left:2px;transition:.25s}
.switch input:checked + .switch-track{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent}
.switch input:checked + .switch-track::after{left:19px;background:#fff}
.switch b{font-weight:650;color:var(--text-dim)}
.switch-note{font-size:10px;color:var(--text-mute)}
.field.inline{flex-direction:row;align-items:center;gap:9px}

.slider-row{margin-top:16px}
.slider-row.compact{margin-top:12px}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:var(--text-dim);font-weight:650;margin-bottom:9px}
.slider-head em{font-style:normal;font-weight:500;color:var(--text-mute);font-size:10px}
.slider-head b{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
input[type="range"]{width:100%;height:5px;border-radius:999px;appearance:none;-webkit-appearance:none;outline:none;
  background:linear-gradient(90deg,var(--accent),var(--accent2)) no-repeat,var(--soft);background-size:50% 100%}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.2);cursor:pointer}
input[type="range"]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:pointer}
.range-scale{display:flex;justify-content:space-between;font-size:9.5px;color:var(--text-mute);margin-top:7px}
.dual-slider{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.sub-label{font-size:11.5px;font-weight:700;color:var(--text-dim);margin:20px 0 10px;display:flex;gap:8px;align-items:baseline}
.sub-label em{font-style:normal;font-size:10px;color:var(--text-mute);font-weight:500}
.preset-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.preset{padding:11px 8px;border-radius:12px;text-align:center;font-size:12px;font-weight:750;background:var(--soft);border:1px solid var(--line);color:var(--text-dim);transition:.2s;display:flex;flex-direction:column;gap:3px}
.preset i{font-style:normal;font-size:9.5px;font-weight:500;color:var(--text-mute)}
.preset:hover{transform:translateY(-2px)}
.preset.active{background:var(--chip);border-color:var(--accent);color:var(--accent);box-shadow:var(--glow)}
.preset.active i{color:var(--accent)}
.note-line{font-size:10px;color:var(--text-mute);line-height:1.6;margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--soft)}

.radio-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.radio-card{display:flex;flex-direction:column;gap:5px;padding:13px 14px;border-radius:13px;background:var(--soft);border:1px solid var(--line);cursor:pointer;transition:.2s}
.radio-card input{display:none}
.radio-title{font-size:12.5px;font-weight:750;color:var(--text-dim)}
.radio-desc{font-size:10px;color:var(--text-mute);line-height:1.5}
.radio-card.active{background:var(--chip);border-color:var(--accent)}
.radio-card.active .radio-title{color:var(--accent)}

.quote-list{max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:6px}
.quote-list::-webkit-scrollbar{width:5px}
.quote-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.quote-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:var(--soft);font-size:11.5px;color:var(--text-dim);line-height:1.5}
.quote-item .qi-n{font:700 10px/1 monospace;color:var(--text-mute);flex:0 0 22px}
.quote-item .qi-t{flex:1;min-width:0}
.quote-item button{flex:0 0 auto;color:var(--text-mute);font-size:15px;line-height:1;padding:3px 5px;border-radius:6px}
.quote-item button:hover{color:var(--warn);background:rgba(255,77,97,.12)}
.quote-add{display:flex;gap:10px;margin-top:12px;align-items:flex-end}
.quote-add textarea{flex:1;resize:vertical;min-height:52px;padding:10px 12px;border-radius:11px;background:var(--soft);border:1px solid var(--line);outline:none;font-size:12px;line-height:1.5}
.quote-add textarea:focus{border-color:var(--accent)}
.admin-signature{margin-top:4px;align-self:center;min-width:320px}

/* 实时预览 */
.admin-preview{min-width:0}
.calc-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
.calc-meta>div{padding:10px 12px;border-radius:11px;background:var(--soft);display:flex;flex-direction:column;gap:4px}
.calc-meta span{font-size:10px;color:var(--text-mute)}
.calc-meta b{font-size:14px;font-variant-numeric:tabular-nums;color:var(--text)}
.donut-wrap{position:relative;width:190px;height:190px;margin:4px auto 14px}
.donut-wrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut-wrap circle{transition:stroke-dasharray .45s ease,stroke-dashoffset .45s ease}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none}
.donut-center span{font-size:10px;color:var(--text-mute);letter-spacing:1px}
.donut-center b{font:800 20px/1.1 "SF Mono",Consolas,monospace;color:var(--text);font-variant-numeric:tabular-nums}
.donut-center i{font-style:normal;font-size:9px;color:var(--text-mute)}
.donut-legend{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin-bottom:6px}
.donut-legend div{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-dim)}
.donut-legend i{width:8px;height:8px;border-radius:3px;flex:0 0 8px}
.donut-legend b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text);font-weight:700}
.preview-table{display:flex;flex-direction:column;gap:8px}
.pt-row{padding:11px 12px;border-radius:12px;background:var(--soft);border:1px solid transparent;transition:.2s}
.pt-row.active{background:var(--chip);border-color:var(--accent)}
.pt-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px}
.pt-head span{font-size:11.5px;font-weight:750;color:var(--text)}
.pt-head b{font:800 14px/1 "SF Mono",Consolas,monospace;font-variant-numeric:tabular-nums;color:var(--accent)}
.pt-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pt-cols div{display:flex;flex-direction:column;gap:2px}
.pt-cols span{font-size:9px;color:var(--text-mute)}
.pt-cols b{font:700 11px/1.2 "SF Mono",Consolas,monospace;font-variant-numeric:tabular-nums;color:var(--text-dim)}
.formula-box{margin-top:18px;padding:13px 14px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.formula-title{font-size:10.5px;font-weight:800;letter-spacing:1px;color:var(--text-dim);margin-bottom:8px}
.formula-box p{font-size:10px;line-height:1.65;color:var(--text-mute);margin-bottom:5px}
.formula-box p:last-child{margin-bottom:0}

/* ===================================================================
   弹窗 / Toast
   =================================================================== */
.modal-mask{position:fixed;inset:0;z-index:9000;background:rgba(8,14,30,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;animation:fadeIn .25s}
.modal-mask[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{width:min(420px,100%);padding:28px 26px 22px;text-align:center;position:relative;animation:popIn .35s cubic-bezier(.2,1.2,.3,1)}
@keyframes popIn{from{opacity:0;transform:scale(.88) translateY(16px)}to{opacity:1;transform:none}}
.modal-close{position:absolute;right:14px;top:10px;font-size:22px;color:var(--text-mute);line-height:1}
.modal-close:hover{color:var(--text)}
.report-icon{font-size:44px;line-height:1;margin-bottom:8px}
.report-title{font-size:17px;font-weight:800;margin-bottom:14px}
.report-body{font-size:13px;line-height:1.9;color:var(--text-dim);text-align:left;padding:14px 16px;border-radius:13px;background:var(--soft);border:1px solid var(--line)}
.report-body b{color:var(--accent);font-variant-numeric:tabular-nums;font-size:15px}
.report-body .rb-big{display:block;font:800 24px/1.3 "SF Mono",Consolas,monospace;color:var(--good);margin:6px 0;font-variant-numeric:tabular-nums}
.report-body .rb-quip{display:block;margin-top:10px;font-size:11.5px;color:var(--text-mute);font-style:italic}
.report-foot{font-size:10.5px;color:var(--text-mute);margin-top:12px}
.report-foot b{color:var(--accent)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:9500;padding:11px 20px;border-radius:12px;
  background:var(--card-solid);border:1px solid var(--card-brd);box-shadow:var(--shadow);color:var(--text);font-size:12.5px;font-weight:650;animation:toastIn .3s}
.toast[hidden]{display:none}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ===================================================================
   响应式：窄窗口 / 400x600 桌面角落
   =================================================================== */
@media (max-width:1000px){
  .admin-grid{grid-template-columns:1fr}
  .panel.sticky{position:static}
  .admin-preview{order:-1}
}
@media (max-width:760px){
  #board{padding:14px 14px 22px}
  .board-top{flex-wrap:wrap;gap:10px}
  .brand-title{font-size:15px}
  .brand-sub{font-size:8px}
  .top-actions{width:100%;justify-content:flex-end}
  .icon-btn{padding:7px 10px}
  .mode-tabs{grid-template-columns:repeat(2,1fr);gap:8px}
  .mode-tab{min-height:66px;padding:10px 12px}
  .fun-grid{grid-template-columns:1fr}
  .hero{padding:18px 18px 15px}
  .metrics{padding:16px 18px}
  .field-grid,.field-grid.four,.dual-slider{grid-template-columns:1fr 1fr}
  .admin-view{padding:14px 14px 30px}
  .panel{padding:16px}
  .admin-actions{width:100%}
}
@media (max-width:480px){
  #board{padding:11px 10px 16px}
  .brand-mark{width:34px;height:34px;flex-basis:34px;font-size:18px;border-radius:10px}
  .brand-title{font-size:13.5px}
  .brand-sub{display:none}
  .icon-btn{padding:6px 8px;font-size:11px}
  .icon-btn span{display:none}
  .status-bar{padding:10px 13px;margin-bottom:11px}
  .date-main{font-size:11px}
  .clock-main{font-size:22px}
  .status-badge{font-size:11px;padding:7px 11px}
  .section-label{font-size:11px;margin-bottom:8px}
  .section-label em{font-size:9.5px}
  .mode-body{margin-top:10px;padding-top:10px}
  .mode-trigger{font-size:9.5px;padding:3px 7px}
  .mode-tabs{gap:7px}
  .mode-tab{min-height:58px;padding:9px 10px;border-radius:12px}
  .mode-tab .mt-top{font-size:10.5px}
  .mode-tab .mt-val{font-size:13px;margin-top:4px}
  .mode-tab .mt-sub{font-size:9px}
  .hero{padding:13px 14px 12px;margin-bottom:11px;border-radius:16px}
  .big-wrap{gap:6px;margin:6px 0 2px}
  .currency{font-size:22px}
  .big-number{font-size:clamp(32px,11vw,54px);letter-spacing:-1.5px}
  .speed-line{font-size:10.5px}
  .speed-line b{font-size:11.5px}
  .hero-foot{margin-top:11px;padding-top:9px}
  .hero-foot b{font-size:12px}
  .hero-foot span{font-size:9.5px}
  .metrics{padding:12px 14px;margin-bottom:11px;border-radius:16px}
  .countdown{font-size:17px}
  .metric-label{font-size:10.5px}
  .progress-head{margin:11px 0 6px}
  .month-line{margin-top:11px;padding-top:10px}
  .month-amount{font-size:17px}
  .ot-grid{grid-template-columns:1fr;gap:9px}
  .overtime-box{padding:12px;margin-top:11px}
  .fun-grid{gap:11px;margin-bottom:12px}
  .fish-card{padding:13px 14px;border-radius:16px}
  .fish-btn{font-size:11.5px;padding:9px 11px}
  .quote-float{right:12px;left:12px;bottom:52px;max-width:none;text-align:center;font-size:10px;line-height:1.6}
  .quote-float::before{margin:0 auto 6px}
  .signature{padding:10px 18px}
  .sig-main{font-size:10.5px}
  .sig-sub{font-size:8.5px}
  .admin-view{padding:10px 10px 24px}
  .admin-top{padding:12px 14px;margin-bottom:12px}
  .admin-title{font-size:14px}
  .admin-sub{font-size:9.5px}
  .pill-btn{padding:7px 10px;font-size:10.5px}
  .panel{padding:13px 14px;border-radius:16px}
  .panel-head h2{font-size:12.5px}
  .panel-hint{font-size:9px}
  .field-grid,.field-grid.four,.dual-slider,.preset-row,.radio-row{grid-template-columns:1fr}
  .input-wrap{height:36px}
  .admin-signature{min-width:0;width:100%}
  .modal-card{padding:22px 18px 18px}
}
@media (max-height:700px) and (min-width:481px){
  #board{padding-top:12px;padding-bottom:14px}
  .board-top{margin-bottom:11px}
  .status-bar{margin-bottom:11px;padding:10px 18px}
  .clock-main{font-size:24px}
  .mode-body{margin-top:10px;padding-top:10px}
  .mode-tab{min-height:64px;padding:10px 13px}
  .hero{padding:15px 22px 13px;margin-bottom:11px}
  .big-number{font-size:clamp(44px,6.6vw,80px)}
  .hero-foot{margin-top:12px;padding-top:10px}
  .metrics{padding:14px 20px;margin-bottom:11px}
  .fun-grid{margin-bottom:11px}
  .fish-card{padding:14px 18px}
  .board-footer{padding:0}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ===================================================================
   桌面挂件模式  ?widget=1
   给 Windows / UOS 无边框小窗用（约 272x204），只留四项核心数字。
   主界面完全不受影响：所有规则都挂在 html.wg / body.wg 下。
   =================================================================== */
html.wg,body.wg{height:100%;min-height:0;overflow:hidden;background:transparent!important}
body.wg{padding:0;color:#e9edf5}
body.wg .bg-layer,body.wg .board-top,body.wg .board-footer,body.wg .fun-grid,
body.wg #admin,body.wg #reportModal,body.wg #toast,body.wg .quote-float,
body.wg .date-block,body.wg .hero-foot,body.wg .mode-body,body.wg #modeTrigger,
body.wg .progress-scale,body.wg .month-line,body.wg .overtime-box,
body.wg .hero::after{display:none!important}
body.wg #board{max-width:none;margin:0;padding:12px 14px;height:100%;
  background:rgba(18,20,28,.90);border:1px solid rgba(255,255,255,.10);border-radius:14px}
body.wg #board.view.active{display:flex;flex-direction:column;gap:8px;animation:none}
body.wg .status-bar,body.wg .hero,body.wg .metrics{
  background:transparent;border:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-radius:0;padding:0;margin:0;flex:0 0 auto}
body.wg .status-bar{display:flex;justify-content:flex-end;flex-wrap:nowrap}
body.wg .status-badge{padding:3px 9px;font-size:10px;font-weight:600;
  background:rgba(15,169,104,.14);border:1px solid rgba(15,169,104,.28)}
body.wg .status-badge i{width:6px;height:6px}
body.wg .hero-head{margin:0}
body.wg .hero-label{font-size:10px;letter-spacing:.5px;color:#9aa4b8;font-weight:600}
body.wg .big-wrap{margin:2px 0;gap:5px}
body.wg .currency{font-size:16px;color:#7f9cff}
body.wg .big-number{font-size:30px;line-height:1.1;letter-spacing:-1px;color:#fff;
  background:none;-webkit-text-fill-color:#fff;text-shadow:none}
body.wg .speed-line{font-size:10px;color:#9aa4b8}
body.wg .speed-line b{font-size:11px;color:#7f9cff}
body.wg .pulse-dot{width:5px;height:5px}
body.wg .metric-line{margin:0}
body.wg .metric-label{font-size:10px;color:#9aa4b8}
body.wg .countdown{font-size:14px;color:#7f9cff}
body.wg .progress-head{margin:0 0 4px;font-size:10px;color:#9aa4b8}
body.wg .progress-head b{font-size:10px;color:#e9edf5}
body.wg .progress-track{height:7px;background:rgba(255,255,255,.10);border:none}
body.wg .progress-fill{box-shadow:none}
body.wg .progress-fill::after{display:none}
body.wg.wg-hidden #board{visibility:hidden}