@font-face{font-family:OutfitNumbers;src:url('/outfit.ttf') format('truetype');font-style:normal;font-weight:400;unicode-range:U+0030-0039,U+0025,U+002E,U+003A,U+00A5}
:root{font-variant-numeric:tabular-nums;font-family:OutfitNumbers,-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;color:#101f46;background:#000000}*{box-sizing:border-box}body{margin:0}.app{max-width:480px;min-height:100vh;margin:auto;padding:22px 20px 28px;background:radial-gradient(circle at 100% 15%,#e7efff,transparent 30%),#f9f9fc}header,.brand,.date-row,.status-row,.countdown,.progress-heading{display:flex;align-items:center;justify-content:space-between}.brand{gap:12px}.logo,.login-symbol{display:grid;place-items:center;background:linear-gradient(145deg,#35bcff,#1345e8);color:white;border-radius:12px;width:37px;height:37px;font-size:25px;box-shadow:0 5px 12px #7a9cf45c}h1{font-size:21px;margin:0;letter-spacing:.04em}.icon-button,.back{border:0;background:transparent;color:#101f46;font-size:25px;cursor:pointer}.date-row{font-size:14px;color:#65718c;margin:30px 1px 25px}.date-row span:last-child{font-size:inherit;font-weight:400;color:#101f46}.status-row{gap:8px;margin-bottom:22px}.status{background:#e2ebff;border-radius:99px;padding:9px 14px;font-size:16px;font-weight:400;white-space:nowrap}.status i{display:inline-block;background:#23c0aa;width:9px;height:9px;border-radius:50%;margin-right:7px}.countdown{gap:8px;color:#66718b;font-size:13px;white-space:nowrap}.countdown strong{font-size:clamp(21px,6vw,32px);color:#1555f2;letter-spacing:-.04em}.earn-card,.progress-card,.summary{border:1px solid #fff;border-radius:23px;box-shadow:0 7px 24px #253d6910}.earn-card{position:relative;overflow:hidden;padding:22px 22px 18px;background:linear-gradient(125deg,#fffaf4 5%,#fff4e9 60%,#f7dfc8);min-height:215px}.card-label{font-size:17px;font-weight:400}.coin{color:#dc9d38;margin-right:5px}.money{position:relative;z-index:1;font-size:clamp(39px,11vw,54px);font-weight:400;letter-spacing:-.05em;color:#aa6c14;margin:15px 0 10px}.speed{display:inline-block;background:#ffebcf;border-radius:99px;padding:6px 13px;color:#8c591e;font-size:14px}.briefcase{position:absolute;right:-8px;top:75px;width:110px;height:86px;border-radius:16px;transform:rotate(-8deg);background:linear-gradient(135deg,#ffffffba,#e6c4a180);border:2px solid #ffffffb0;box-shadow:0 8px 25px #bf834b30}.briefcase:before{content:'';position:absolute;left:34px;top:-21px;width:42px;height:24px;border:7px solid #f4d5ab;border-bottom:0;border-radius:12px 12px 0 0}.progress-card,.summary{background:#ffffffbf;padding:18px}.progress-heading b{font-size:16px}.progress-heading strong{color:#1b57ed;font-size:27px}.hours{font-size:14px;color:#768096;margin:4px 0 10px}.track{background:#dce5f3;border-radius:20px;height:8px;overflow:hidden}.track div{height:100%;background:#2361ef;border-radius:20px}.summary{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;padding:18px 6px}.summary div{padding:0 10px;min-width:0}.summary div+div{border-left:1px solid #e4e6ec}.summary span{display:block;font-size:12px;color:#626f88;white-space:nowrap}.summary b{display:block;color:#a66a19;font-size:clamp(13px,4vw,19px);margin-top:9px;white-space:nowrap}.refresh{display:block;margin:14px auto 0;border:0;background:transparent;color:#7886a0;font-size:13px;cursor:pointer}.login{text-align:center;padding:90px 8px}.login-symbol{margin:0 auto;width:58px;height:58px;font-size:34px}.login h2{font-size:21px;margin:25px 0 10px}.login p,.hint{color:#8490a4;font-size:13px}.primary{display:block;width:100%;border:0;border-radius:13px;padding:14px;background:#2059ed;color:white;text-align:center;text-decoration:none;font-size:16px;font-weight:400;cursor:pointer;margin-top:30px}.setting-title{display:flex;align-items:center;gap:12px;margin:32px 0}.setting-title h2{font-size:21px}.back{font-size:32px}.setting form{background:white;border-radius:20px;padding:20px;box-shadow:0 6px 20px #273b5d0d}.setting label{display:block;font-size:14px;font-weight:400;margin-bottom:20px}.setting label span{float:right;color:#9ca6b8;font-weight:400}.setting input{display:block;width:100%;margin-top:10px;border:1px solid #e6ebf3;background:#f9faff;border-radius:10px;padding:12px;font:inherit;color:#142446}.error{color:#c83838;font-size:13px}.message{text-align:center;color:#bf4a40;font-size:13px}[hidden]{display:none!important}

#time,#countdown,.money,.speed,#percent,.hours,.summary b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

.icon-button{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:#23375e;transition:background .18s,color .18s}
.icon-button:hover{background:#e7edfb;color:#1755eb}
.icon-button:focus-visible,.close-button:focus-visible{outline:2px solid #1b5aff;outline-offset:2px}
.setting{width:min(400px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:1px solid #ffffffd9;border-radius:24px;background:#fff;box-shadow:0 24px 70px #16244338;color:#101f46;overflow:auto}
.setting::backdrop{background:rgba(21,33,59,.32);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.setting-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 24px;gap:16px}
.setting-title h2{font-size:19px;margin:0}
.close-button{width:34px;height:34px;border:0;border-radius:10px;background:#f2f5fa;color:#68748b;display:grid;place-items:center;cursor:pointer}
.close-button:hover{background:#e8eef9;color:#1a305b}
.close-button svg{width:18px;height:18px}
.setting form{background:transparent;padding:0;box-shadow:none;border-radius:0}
.setting label{margin-bottom:18px}
.setting .primary{margin-top:20px}
.empty{padding:72px 8px;text-align:center;color:#758099}
.empty .primary{max-width:230px;margin:20px auto}

/* 收入卡片：柔和香槟金玻璃质感，文字始终位于装饰之上。 */
.earn-card{isolation:isolate;border:1px solid rgba(255,255,255,.96);background:radial-gradient(ellipse at 93% 24%,rgba(255,225,198,.62),transparent 46%),radial-gradient(ellipse at 12% 5%,#fffdfb 5%,transparent 55%),linear-gradient(115deg,#fff8f1 12%,#fff6ec 55%,#f9e6d5 100%);box-shadow:inset 0 0 0 1px rgba(241,205,168,.42),0 10px 24px rgba(111,75,50,.09)}
.earn-card:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 62%,rgba(255,255,255,.42) 62.2%,rgba(255,255,255,.14) 72%,transparent 72.2%);pointer-events:none;z-index:-1}
.briefcase{position:absolute;right:-31px;top:29px;width:190px;height:170px;border:0;border-radius:0;transform:translate(10%,-5%) scale(1.56);box-shadow:none;background:url('/glass-briefcase.png') center/contain no-repeat;opacity:.92;pointer-events:none;z-index:-1}
.briefcase:before{content:none}
.card-label,.money,.speed,
.money{background:linear-gradient(180deg,#c98c37,#9d610f);background-clip:text;-webkit-background-clip:text;color:transparent}

@media(max-width:360px){.briefcase{width:155px;right:-31px;opacity:.76}.money{font-size:clamp(37px,11vw,48px)}}

.logo,.login-symbol{overflow:hidden;background:linear-gradient(145deg,#76d9ff 0%,#2379fa 46%,#1740c5 100%);box-shadow:inset 0 1px 2px #ffffffa6,0 5px 12px #7a9cf45c}.logo img,.login-symbol img{display:block;width:140%;height:140%;object-fit:contain;max-width:none;filter:drop-shadow(0 1px 2px #08388055)}

.app h1,.app h2,.app b,.app strong{font-weight:400}

.earn-card{margin-bottom:16px}

.logo svg,.login-symbol svg{width:68%;height:68%;fill:#fff;filter:drop-shadow(0 1px 1px #07399155)}

.month-progress{margin-top:12px}

.earn-card .summary{position:relative;z-index:1;margin-top:15px;padding:15px 0 1px;background:transparent;border:0;border-top:1px solid rgba(216,180,141,.28);border-radius:0;box-shadow:none}
.earn-card .summary div{padding:0 9px}
.earn-card .summary div:first-child{padding-left:0}
.earn-card .summary div+div{border-left:1px solid rgba(216,180,141,.35)}
.earn-card .summary span{color:#7b6b61}
.earn-card .summary b{font-size:clamp(13px,3.7vw,17px);margin-top:8px}

.earn-card .summary{grid-template-columns:1.2fr 1fr}
.week-progress{margin-top:12px}
.clock-block{display:flex;align-items:center;gap:8px;flex-shrink:0}
.clock-copy{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.clock-copy #daypart{font-size:10px;color:#8f95a8}
.clock-copy #time{font-size:14px;color:#101f46}
.time-scene{width:43px;height:43px;display:block;filter:drop-shadow(0 3px 5px #eebc5e25)}
.time-scene svg{width:100%;height:100%;overflow:visible}
.moon-body{display:none}
.phase-night .sun-body,.phase-night .sun-rays{display:none}
.phase-night .moon-body{display:block}
.app.phase-dawn{background:radial-gradient(ellipse at 90% 2%,#ffe9dc 0,transparent 35%),#f9f9fc}
.app.phase-morning{background:radial-gradient(ellipse at 90% 2%,#fff3c9 0,transparent 35%),#f9f9fc}
.app.phase-noon{background:radial-gradient(ellipse at 90% 2%,#e5f3ff 0,transparent 35%),#f9f9fc}
.app.phase-afternoon{background:radial-gradient(ellipse at 90% 2%,#ffedda 0,transparent 35%),#f9f9fc}
.app.phase-sunset{background:radial-gradient(ellipse at 90% 2%,#f8e0e3 0,transparent 35%),#f9f9fc}
.app.phase-night{background:radial-gradient(ellipse at 90% 2%,#dce2f7 0,transparent 35%),#f9f9fc}
.phase-dawn .sun-rays{opacity:.55}
.phase-noon .sun-rays{stroke:#ffad25;stroke-width:4}
.phase-afternoon .sun-body{filter:hue-rotate(-8deg)}
.phase-sunset .sun-body{filter:hue-rotate(-20deg)}
.phase-sunset .sun-rays{opacity:.35}
@media(max-width:360px){.clock-block{gap:3px}.time-scene{width:34px;height:34px}.date-row{font-size:12px}.clock-copy #time{font-size:12px}}

header{gap:10px;align-items:center;margin-bottom:12px}
.brand{justify-content:flex-start;gap:9px;flex-shrink:0}
.brand h1{font-size:18px;letter-spacing:0;white-space:nowrap}
.brand .icon-button{width:27px;height:32px;border-radius:8px;color:#999fa9;margin-left:-4px}
.brand .icon-button svg{width:21px;height:21px}
.brand .icon-button:hover{color:#6f7785;background:#e9edf5}
.date-row{margin:0;font-size:12px;gap:5px;justify-content:flex-end;flex-shrink:0}
.date-row .time-scene{width:37px;height:37px}
.date-row .clock-copy{gap:1px}
.date-row .clock-copy #date,.date-row .clock-copy #time{font-size:12px;line-height:1.3;white-space:nowrap}
.date-row .clock-copy #daypart{font-size:9px;line-height:1.1}
.progress-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.progress-meta .hours{margin:4px 0 10px}
.period-total{font-size:12px;color:#8a7250;white-space:nowrap}
@media(max-width:430px){.brand h1{font-size:16px}.brand{gap:6px}.brand .logo{width:32px;height:32px;border-radius:10px}.date-row{gap:2px}.date-row .time-scene{width:30px;height:30px}.date-row .clock-copy #date,.date-row .clock-copy #time{font-size:11px}.brand .icon-button{width:23px}.brand .icon-button svg{width:18px;height:18px}.period-total{font-size:11px}.progress-meta .hours{font-size:12px}}
@media(max-width:360px){header{flex-wrap:wrap;gap:12px}.date-row{margin-left:auto}.period-total{font-size:10px}}

.date-row .clock-copy #date,.date-row .clock-copy #weekday,.date-row .clock-copy #time{font-size:14px;line-height:1.35;color:#56627c}.date-row .clock-copy #time{color:#14274b}.date-row .clock-copy{gap:1px}.date-row{gap:8px}

.earn-card .summary{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:26px;padding-top:17px}

#daily{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;background:linear-gradient(110deg,#ffe4b9,#ffedce);border:1px solid rgba(255,220,164,.65);box-shadow:inset 0 1px 1px #fff8e9;color:#936124;font-size:14px}
.earn-card .summary b{font-size:22px;line-height:1.25;letter-spacing:-.015em}
@media(max-width:430px){.brand h1{font-size:15px}.brand{gap:5px}.date-row .time-scene{width:27px;height:27px}.date-row{gap:4px}.earn-card .summary b{font-size:19px}}
@media(max-width:360px){.earn-card .summary b{font-size:17px}}

/* 收入细节：小号币种、原字号数字，以及统一的薪资图标。 */
.money{display:flex;align-items:baseline;gap:3px;background:none;color:#b57a26}
.money>span{background:linear-gradient(180deg,#c48b35,#a96b18);background-clip:text;-webkit-background-clip:text;color:transparent}
.money .currency{font-size:.6em;letter-spacing:0}
.earn-card .card-label{position:relative;top:10px}
.earn-card .summary span{display:flex;align-items:center;gap:5px}
.earn-card .summary .rate-icon{width:14px;height:14px;flex-shrink:0;fill:currentColor}
.earn-card .summary b{margin-top:2px}

.period-total .period-amount{font-size:17px;color:#a66a19;margin-left:4px}
@media(max-width:430px){.period-total .period-amount{font-size:15px}}
@media(max-width:360px){.progress-meta{flex-wrap:wrap;column-gap:6px;row-gap:0}.progress-meta .hours{margin-bottom:4px}.progress-meta .period-total{margin-left:auto;margin-bottom:8px}}

.progress-heading b{display:flex;align-items:center;gap:8px}.progress-icon{width:15px;height:15px;flex-shrink:0;fill:currentColor}
