@charset "utf-8";
/* Themes. Each sets the same palette variables the app uses, so every screen follows.
   [data-skin] is on <html> for the app and on each picker card for its preview.
   Big timer buttons keep their size in every theme; only colours, fonts and decoration change. */

[data-skin]{--run-ink:#fff;--clock:var(--run);--top-bg:var(--surface);--display:var(--serif);--clockfont:var(--serif);--pattern:none}

/* ===== 彩虹打工人 ===== */
[data-skin="rainbow"]{
  --bg:#fbf9ff; --surface:#ffffff; --surface-2:#f2eefb; --line:#e1d9f2;
  --fg:#2a2238; --muted:#5f5572; --faint:#857c98;
  --accent:#5b2fc9; --accent-ink:#fff; --accent-soft:#ebe3ff;
  --run:#c8203b; --run-soft:#ffe3e8; --run-ink:#fff; --ok:#2e7d32; --danger:#c8203b;
  --gold:#9a5f00; --glow:rgba(160,80,255,.45); --r:10px; --top-bg:#fff;
  --rb:linear-gradient(90deg,#e53935,#fb8c00,#fdd835,#43a047,#1e88e5,#3949ab,#8e24aa);
  --rbd:linear-gradient(90deg,#c62828,#bf4a00,#8a6a00,#2e7d32,#1565c0,#303f9f,#7b1fa2,#c62828);
  color-scheme:light}
[data-skin="rainbow"] header.bar{border-bottom:6px solid transparent;border-image:var(--rb) 1}
:root[data-skin="rainbow"] .btn.primary,:root[data-skin="rainbow"] .go .btn.primary,:root[data-skin="rainbow"] .go .btn.run,
:root[data-skin="rainbow"] .chip[aria-pressed="true"],:root[data-skin="rainbow"] nav.views button[aria-current="page"]{
  background:var(--rbd);border-color:transparent;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
:root[data-skin="rainbow"] .go .btn.pause,:root[data-skin="rainbow"] .go .btn.end{
  background:linear-gradient(#fff,#fff) padding-box,var(--rb) border-box;border-color:transparent}
[data-skin="rainbow"] .clockface{display:inline-block}
[data-skin="rainbow"] .clockface,[data-skin="rainbow"] .sk-clock,
[data-skin="rainbow"] .timer.running .clockface{background:var(--rbd);background-size:170% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
[data-skin="rainbow"] .timer.running .clockface{animation:rbflow 7s ease-in-out infinite alternate}
@keyframes rbflow{from{background-position:0% 50%}to{background-position:100% 50%}}
[data-skin="rainbow"] .timer::after{box-shadow:-14px -8px 22px 2px rgba(229,57,53,.55),0 -12px 22px 2px rgba(253,216,53,.6),14px -8px 22px 2px rgba(251,140,0,.55),
  14px 8px 22px 2px rgba(30,136,229,.55),0 12px 22px 2px rgba(67,160,71,.55),-14px 8px 22px 2px rgba(142,36,170,.55)}
[data-skin="rainbow"] .bar .fill,[data-skin="rainbow"] .sk-btn{background:var(--rbd)}
[data-skin="rainbow"] .skin .sk-top,[data-skin="rainbow"].skin .sk-top{background:var(--rb)}
@media (prefers-reduced-motion:reduce){[data-skin="rainbow"] .timer.running .clockface{animation:none}}

/* ===== 深夜加班 ===== */
[data-skin="night"]{
  --bg:#121016; --surface:#1b1820; --surface-2:#252030; --line:#373043;
  --fg:#ece6f3; --muted:#b5aac4; --faint:#8b809b;
  --accent:#b9a2ff; --accent-ink:#17121f; --accent-soft:#2d2541;
  --run:#ff8fa3; --run-soft:#3a1e27; --run-ink:#1a0d12; --ok:#a6d38f; --danger:#ff8fa3;
  --gold:#f2c55c; --glow:rgba(185,162,255,.5); --top-bg:#17141c;
  --pattern:radial-gradient(1.2px 1.2px at 30px 40px,rgba(255,255,255,.55),transparent) 0 0/180px 180px,
            radial-gradient(1px 1px at 120px 110px,rgba(185,162,255,.6),transparent) 0 0/180px 180px;
  color-scheme:dark}

/* ===== 抹茶团子（柔和） ===== */
[data-skin="matcha"]{
  --bg:#eff4ea; --surface:#fcfdf9; --surface-2:#e5ecdc; --line:#d3ddc7;
  --fg:#2f3a2b; --muted:#5b6955; --faint:#7f8b77;
  --accent:#4a6e3e; --accent-ink:#fff; --accent-soft:#dfe9d5;
  --run:#b0405f; --run-soft:#f6e0e7; --ok:#4a6e3e; --danger:#b0405f;
  --gold:#82620d; --glow:rgba(176,64,95,.35); --r:14px; --top-bg:#fcfdf9;
  --serif:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --display:"ZCOOL KuaiLe","PingFang SC","Microsoft YaHei",sans-serif; --clockfont:var(--serif);
  --pattern:radial-gradient(circle,rgba(176,64,95,.09) 0 5px,transparent 6px) 0 0/48px 48px,
            radial-gradient(circle,rgba(74,110,62,.09) 0 4px,transparent 5px) 24px 24px/48px 48px;
  color-scheme:light}
[data-skin="matcha"] .go .btn{border-radius:28px}

/* ===== 老板来了（假装在做表格） ===== */
[data-skin="sheet"]{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f2f2f2; --line:#d0d0d0;
  --fg:#1f1f1f; --muted:#555; --faint:#7a7a7a;
  --accent:#1d6b40; --accent-ink:#fff; --accent-soft:#dcefe3;
  --run:#b7322c; --run-soft:#fbe3e1; --ok:#1d6b40; --danger:#b7322c;
  --gold:#6f5300; --glow:rgba(29,107,64,.35); --r:0px; --clock:#1f1f1f; --top-bg:#1d6b40;
  --serif:Calibri,Arial,"PingFang SC","Microsoft YaHei",sans-serif; --clockfont:Consolas,Menlo,"Courier New",monospace;
  --script:Calibri,Arial,sans-serif;
  --pattern:linear-gradient(#e4e4e4 1px,transparent 1px) 0 0/100% 24px,linear-gradient(90deg,#e4e4e4 1px,transparent 1px) 0 0/96px 100%;
  color-scheme:light}
[data-skin="sheet"] .wordmark{font-size:15px;font-weight:700;letter-spacing:.02em}
@media (min-width:641px){[data-skin="sheet"] .brand b::after{content:" - 工作簿1.xlsx";font-size:14px;opacity:.85;font-weight:400}}
[data-skin="sheet"] nav.views button{border-radius:0;border-bottom:3px solid transparent}
[data-skin="sheet"] nav.views button[aria-current="page"]{border-bottom-color:#fff}

/* ===== 钞能力 ===== */
[data-skin="rich"]{
  --bg:#e2ebd7; --surface:#f6f9ef; --surface-2:#e4ecd8; --line:#c2d1ae;
  --fg:#1d3022; --muted:#475c42; --faint:#6d7f64;
  --accent:#24543a; --accent-ink:#f6f9ef; --accent-soft:#d4e3c5;
  --run:#7f5900; --run-soft:#f2e5c1; --ok:#24543a; --danger:#a12a1f;
  --gold:#755200; --glow:rgba(212,175,55,.6); --clock:#24543a; --top-bg:#24543a; --r:6px;
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Ctext x='10' y='34' font-family='Georgia' font-size='26' fill='%2324543a' fill-opacity='.08'%3E%24%3C/text%3E%3Ctext x='46' y='68' font-family='Georgia' font-size='20' fill='%23b8860b' fill-opacity='.10'%3E%24%3C/text%3E%3C/svg%3E") 0 0/72px 72px;
  color-scheme:light}
[data-skin="rich"] .brand b::before{content:"$ "}
[data-skin="rich"] .money .num{font-size:30px}

/* ===== 朕的江山 ===== */
[data-skin="emperor"]{
  --bg:#f2c12e; --surface:#fff6d6; --surface-2:#fbe6a0; --line:#d6a52c;
  --fg:#3a1d00; --muted:#674210; --faint:#86622a;
  --accent:#a3150e; --accent-ink:#fff6d6; --accent-soft:#f6d79e;
  --run:#a3150e; --run-soft:#f8dbbf; --run-ink:#fff6d6; --ok:#4d6b14; --danger:#a3150e;
  --gold:#8a4500; --glow:rgba(163,21,14,.45); --clock:#a3150e; --top-bg:#a3150e; --r:3px;
  --display:"Ma Shan Zheng","STKaiti","KaiTi","Noto Serif SC",serif;
  --pattern:radial-gradient(circle,rgba(163,21,14,.07) 0 16px,transparent 17px) 0 0/58px 58px,
            radial-gradient(circle,rgba(163,21,14,.05) 0 9px,transparent 10px) 29px 29px/58px 58px;
  color-scheme:light}
[data-skin="emperor"] .panel{border-width:2px}
@media (min-width:641px){[data-skin="emperor"] .brand b::before{content:"奉天承运 · "}}

/* ===== 东北大花袄 ===== */
[data-skin="huabu"]{
  --bg:#cf1530; --surface:#fff8ef; --surface-2:#ffe7d3; --line:#eeb48a;
  --fg:#2b0b06; --muted:#6a2818; --faint:#8c4e3a;
  --accent:#0a7438; --accent-ink:#fff; --accent-soft:#d6efdf;
  --run:#cf1530; --run-soft:#ffdbe0; --ok:#0a7438; --danger:#cf1530;
  --gold:#8f5300; --glow:rgba(255,222,77,.85); --clock:#cf1530; --top-bg:#0a7438; --r:10px;
  --pattern:radial-gradient(circle at 30px 30px,#ff86bd 0 15px,#ffd3e7 16px 20px,transparent 21px) 0 0/124px 124px,
            radial-gradient(circle at 92px 88px,#ffdc45 0 11px,#fff 12px 15px,transparent 16px) 0 0/124px 124px,
            radial-gradient(18px 8px at 64px 30px,#16a050 96%,transparent 100%) 0 0/124px 124px,
            radial-gradient(8px 17px at 30px 80px,#16a050 96%,transparent 100%) 0 0/124px 124px,
            radial-gradient(circle at 104px 22px,#7fd3ff 0 7px,transparent 8px) 0 0/124px 124px;
  color-scheme:light}
[data-skin="huabu"] .panel{border:2px solid #0a7438}
/* text that sits straight on the flower print gets a dark red plate so it stays readable */
[data-skin="huabu"] .daysbar,[data-skin="huabu"] .stack > p.lbl{background:rgba(110,0,14,.86);color:#fff;--muted:#ffe3e8;padding:8px 12px;border-radius:10px}
[data-skin="huabu"] .daysbar .btn{color:#2b0b06}
[data-skin="huabu"] .stack > .btn.ghost,[data-skin="huabu"] .loading{background:var(--surface);color:var(--fg)}

/* ===== 杀马特蹦迪 ===== */
[data-skin="smart"]{
  --bg:#07000f; --surface:#14052a; --surface-2:#210b40; --line:#50208a;
  --fg:#f7ecff; --muted:#d3b6f3; --faint:#a586cb;
  --accent:#ff2bd6; --accent-ink:#1a0016; --accent-soft:#3c0b44;
  --run:#39ff14; --run-soft:#123309; --run-ink:#061200; --ok:#39ff14; --danger:#ff5c8a;
  --gold:#ffe600; --glow:rgba(255,43,214,.75); --clock:#39ff14; --top-bg:#000; --r:2px;
  --display:"ZCOOL QingKe HuangYou","PingFang SC","Microsoft YaHei",sans-serif;
  --pattern:repeating-linear-gradient(135deg,rgba(255,43,214,.08) 0 2px,transparent 2px 26px),
            repeating-linear-gradient(45deg,rgba(0,229,255,.07) 0 2px,transparent 2px 34px);
  color-scheme:dark}
[data-skin="smart"] header.bar{border-bottom:3px solid transparent;border-image:linear-gradient(90deg,#ff2bd6,#00e5ff,#39ff14) 1}
[data-skin="smart"] .clockface,[data-skin="smart"] .sk-clock{text-shadow:0 0 10px currentColor,0 0 22px currentColor}
[data-skin="smart"] .wordmark,[data-skin="smart"] .brand b{text-shadow:0 0 8px #ff2bd6}
[data-skin="smart"] .go .btn{box-shadow:0 0 14px var(--glow)}

/* ===== 非主流·伤不起 ===== */
[data-skin="feizhuliu"]{
  --bg:#ffd1ea; --surface:#fff3fa; --surface-2:#ffe0f1; --line:#f3a6d1;
  --fg:#4a0b33; --muted:#77285a; --faint:#985283;
  --accent:#bd1178; --accent-ink:#fff; --accent-soft:#ffd4ec;
  --run:#7329cc; --run-soft:#eadcff; --ok:#2e7d32; --danger:#bd1178;
  --gold:#835300; --glow:rgba(255,105,180,.65); --clock:#bd1178; --r:12px;
  --top-bg:linear-gradient(90deg,#d42f7f,#8a3fd0);
  --display:"ZCOOL KuaiLe","PingFang SC","Microsoft YaHei",sans-serif;
  --pattern:radial-gradient(circle,rgba(255,255,255,.95) 0 1.6px,transparent 2.2px) 0 0/22px 22px,
            radial-gradient(circle,rgba(189,17,120,.28) 0 1.6px,transparent 2.2px) 11px 11px/22px 22px;
  color-scheme:light}
@media (min-width:641px){[data-skin="feizhuliu"] .brand b::before{content:"☆ "}[data-skin="feizhuliu"] .brand b::after{content:" ☆"}}

/* ===== 魔法少女 ===== */
[data-skin="mahou"]{
  --bg:#fff2fa; --surface:#ffffff; --surface-2:#fbe5f3; --line:#f0c3e1;
  --fg:#4a2352; --muted:#764c7f; --faint:#9a74a0;
  --accent:#bd3479; --accent-ink:#fff; --accent-soft:#fde0ef;
  --run:#7044d1; --run-soft:#ece3ff; --ok:#2e7d32; --danger:#bd3479;
  --gold:#8e6000; --glow:rgba(189,52,121,.42); --clock:#bd3479; --r:18px;
  --top-bg:linear-gradient(90deg,#ffd6ec,#e2d5ff);
  --display:"ZCOOL KuaiLe","PingFang SC","Microsoft YaHei",sans-serif;
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M20 8l3 9 9 3-9 3-3 9-3-9-9-3 9-3z' fill='%23f39ac8' fill-opacity='.35'/%3E%3Cpath d='M70 56l2 6 6 2-6 2-2 6-2-6-6-2 6-2z' fill='%23a98bf0' fill-opacity='.4'/%3E%3Ccircle cx='78' cy='18' r='2' fill='%23f39ac8' fill-opacity='.5'/%3E%3Ccircle cx='28' cy='74' r='1.6' fill='%23a98bf0' fill-opacity='.5'/%3E%3C/svg%3E") 0 0/96px 96px;
  color-scheme:light}
[data-skin="mahou"] .clockface,[data-skin="mahou"] .sk-clock,[data-skin="mahou"] .timer.running .clockface{
  background:linear-gradient(90deg,#bd3479,#7044d1);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-skin="mahou"] .go .btn{border-radius:36px}
[data-skin="mahou"] .brand b::after{content:" ✦"}

/* ===== 机甲驾驶舱 ===== */
[data-skin="mecha"]{
  --bg:#060c15; --surface:#0b1624; --surface-2:#11223a; --line:#1e4468;
  --fg:#e2f5ff; --muted:#9cc3db; --faint:#6f95b0;
  --accent:#00c8f0; --accent-ink:#001018; --accent-soft:#0b2c40;
  --run:#ff9500; --run-soft:#33200a; --run-ink:#1a0b00; --ok:#5dffa8; --danger:#ff6b5c;
  --gold:#ffd34d; --glow:rgba(0,200,240,.6); --clock:#3fe0ff; --top-bg:#071220; --r:0px;
  --serif:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --display:Orbitron,"PingFang SC","Microsoft YaHei",sans-serif; --clockfont:Orbitron,Menlo,monospace;
  --script:Orbitron,sans-serif;
  --pattern:repeating-linear-gradient(0deg,rgba(0,200,240,.05) 0 1px,transparent 1px 4px),
            linear-gradient(rgba(0,200,240,.06) 1px,transparent 1px) 0 0/100% 48px,
            linear-gradient(90deg,rgba(0,200,240,.06) 1px,transparent 1px) 0 0/48px 100%;
  color-scheme:dark}
[data-skin="mecha"] .wordmark{font-size:17px;letter-spacing:.2em;text-transform:uppercase}
@media (max-width:640px){[data-skin="mecha"] .brand .wordmark{font-size:13px;letter-spacing:.06em}}
[data-skin="mecha"] .clockface,[data-skin="mecha"] .sk-clock{text-shadow:0 0 12px rgba(63,224,255,.6);letter-spacing:.02em}
[data-skin="mecha"] .timer.running .clockface{text-shadow:0 0 14px rgba(63,224,255,.7)}
[data-skin="mecha"] .panel{background:
  linear-gradient(var(--accent),var(--accent)) left top/16px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) left top/2px 16px no-repeat,
  linear-gradient(var(--accent),var(--accent)) right bottom/16px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) right bottom/2px 16px no-repeat,var(--surface)}
[data-skin="mecha"] .go .btn{letter-spacing:.2em}
[data-skin="mecha"] .since input{width:132px}

/* ===== 热血漫画 ===== */
[data-skin="manga"]{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#efefef; --line:#111;
  --fg:#111; --muted:#444; --faint:#666;
  --accent:#111; --accent-ink:#fff; --accent-soft:#e4e4e4;
  --run:#d6001c; --run-soft:#ffe0e3; --ok:#111; --danger:#d6001c;
  --gold:#835a00; --glow:rgba(214,0,28,.45); --clock:#d6001c; --r:0px;
  --display:"ZCOOL QingKe HuangYou","PingFang SC","Microsoft YaHei",sans-serif; --clockfont:Bangers,Impact,"Arial Black",sans-serif;
  --pattern:radial-gradient(circle,rgba(0,0,0,.13) 1.2px,transparent 1.7px) 0 0/9px 9px;
  color-scheme:light}
[data-skin="manga"] .panel{border:3px solid #111;box-shadow:5px 5px 0 #111}
[data-skin="manga"] .go .btn{box-shadow:5px 5px 0 #111;border-color:#111}
[data-skin="manga"] .go .btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #111}
[data-skin="manga"] .clockface,[data-skin="manga"] .sk-clock{letter-spacing:.04em;transform:skewX(-7deg);transform-origin:left bottom}
[data-skin="manga"] .timer.running{background:repeating-conic-gradient(from 0deg at 18% 40%,#fff 0deg 5deg,#ececec 5deg 7deg)}
[data-skin="manga"] header.bar{border-bottom:3px solid #111}

/* Header bars with a coloured background: switch the header's own text to light ink */
[data-skin="sheet"] header.bar,[data-skin="rich"] header.bar,[data-skin="emperor"] header.bar,[data-skin="huabu"] header.bar,[data-skin="feizhuliu"] header.bar{
  --fg:#fff; --muted:rgba(255,255,255,.88); --faint:rgba(255,255,255,.78); --surface-2:rgba(0,0,0,.2); --run:#fff; --line:transparent}
[data-skin="emperor"] header.bar{--fg:#ffe59a; --muted:#ffe08a; --faint:#f7d27a}