/* Approved cold-gray / mint visual layer. No business rules live in this file. */
:root{
  --wn-ink:#171717;--wn-muted:#69717e;--wn-green:#009b77;--wn-orange:#009b77;
  --wn-line:#e3e7ed;--wn-cream:#ffffffb8;--mint:#2ec9a0;--mint-ink:#08795f;
  --mint-pale:#e6f8f3;--surface:#ffffffb8;--line:#e1e6ec;--muted:#69717e;
}
body{color:#171717;background:#f7f8fa;background-image:radial-gradient(ellipse 720px 450px at 6% 0%,#a2eed94d,transparent 78%),radial-gradient(ellipse 900px 650px at 95% 55%,#e7edf74d,transparent 80%);background-attachment:fixed;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
button,input,select{font:inherit}button{font-weight:500}button:hover{filter:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #28b58e;outline-offset:3px}
button:disabled{opacity:.48}
.sidebar{padding:22px 30px 12px;gap:24px;max-width:1380px}
.brand{color:#171717;font-size:25px;letter-spacing:.25px;gap:10px}
.brand-mark{width:46px;height:46px;background:none;flex:0 0 auto}
.brand-mark img{display:block;width:46px;height:46px;object-fit:contain;border-radius:12px}
.brand small{font-size:7px;letter-spacing:2px;color:#68737c;font-weight:500}
.nav-item{color:#4f5660;border-radius:999px;font-size:13px;gap:8px;padding:11px 17px;min-height:42px}
.nav-item.active{color:#171717;background:#d7f5eb;box-shadow:inset 0 0 0 1px #e6fff6;font-weight:650}
.nav-item:hover{background:#edf4f2}
.nav-item svg{width:18px;height:18px;stroke-width:1.7}

main{max-width:1380px;padding:12px 30px 24px}
.page-header{margin-bottom:14px;align-items:center}
.eyebrow,.page-header .eyebrow{color:#7b8390;letter-spacing:.4px}
.page-header h1{color:#515b66;font-size:12px;letter-spacing:0;font-weight:450;line-height:1.6}
.quiet-button,.icon-button{border:1px solid #e5e9ef;background:#ffffffbd;color:#4e5964;border-radius:999px;box-shadow:0 2px 5px #1a263905;min-height:40px;padding:8px 14px}
.quiet-button:hover,.icon-button:hover{background:#fff;border-color:#cdd7df}
.icon-button[aria-pressed=true]{color:#08795f;background:#e6f8f3;border-color:#b8e8d9}
.notice{border:1px solid #e5eaf0;background:#ffffff91;color:#65707c;font-size:11px;border-radius:12px;line-height:1.6;padding:9px 13px;margin-bottom:16px}

.notice button{color:inherit;border-radius:999px;padding:3px 6px;min-height:28px}
.card,.hero,.shift-card,.finance-card,.quick-card,.fixed-overview-card,.fish-card,.goal-card,.purchase-card{background:var(--surface);border:1px solid #ffffffed;border-radius:22px;box-shadow:0 9px 30px #23384d05,inset 0 0 0 1px #edf0f638;backdrop-filter:blur(15px)}
.overview-grid{grid-template-columns:1.2fr 1fr;gap:18px}
.hero{min-height:250px;padding:24px 28px;isolation:isolate}
.hero::before{content:"";position:absolute;width:220px;height:100px;right:20px;bottom:22px;border-radius:50%;background:#c3f5e45c;transform:rotate(-12deg);z-index:-1}
.hero select{font-size:23px;font-weight:700;color:#171717;border:0;background:transparent;padding:0 23px 0 0;min-height:34px}
.hero .hero-value{margin:19px 0 10px;gap:8px;max-width:100%}
.hero .hero-value strong{font-size:76px;font-weight:750;line-height:1.1;letter-spacing:-2.8px;color:#009b77}
.hero .hero-value>span{font-size:35px;color:#171717;font-weight:650}
.hero .hero-value strong.long-value{font-size:46px;letter-spacing:-1.2px}
.hero .hero-value strong.very-long-value{font-size:29px;letter-spacing:-.6px}
.hero-description{color:#64717b;font-size:11px;max-width:62%;line-height:1.7;margin:0 0 15px;min-height:18px}
.hero-bottom{color:#68737c;font-size:11px}.live-dot{background:#2ec9a0;box-shadow:0 0 0 3px #2ec9a016}
.hero-art{width:214px;height:174px;right:17px;bottom:22px;opacity:1}
.hero.large-amount .hero-art{opacity:.14}
.hero .pill,.tag{color:#08795f;background:#e1f9f0;border:1px solid #d4f5e8;box-shadow:0 2px 6px #1f70590a;font-weight:550}
.hero.uncovered{background:#fff8f7c9;border-color:#f6e0de;box-shadow:0 9px 30px #63231d05}
.hero.uncovered::before{background:#ffe6dd85}
.hero.uncovered select{color:#752f35}
.hero.uncovered .hero-description{color:#92555a}
.hero.uncovered .hero-value strong,.hero.uncovered .hero-value>span,.negative-money{color:#b83242!important}
.hero.uncovered .hero-art{opacity:1}
.hero.uncovered.large-amount .hero-art{opacity:.14}
.shift-card{position:relative;padding:24px 28px;min-height:250px}
.shift-card .card-heading{color:#171717;font-size:18px;padding-right:108px;min-height:34px;font-weight:650}
.shift-card .card-heading .muted{font-size:10px;color:#727d88;font-weight:450}
.clock-art{width:106px;height:100px;right:14px;top:23px;filter:grayscale(.42) hue-rotate(90deg);opacity:.65}
.shift-card .countdown{font-size:43px;color:#171717!important;font-weight:700;letter-spacing:.5px;margin:17px 0}
.countdown span{color:#171717;padding:0 1px;font-weight:650}
.shift-card .progress-line{color:#626d79;font-size:11px;margin-bottom:9px}
.progress-line b{color:#525d68}
.shift-card .shift-summary{color:#7c8591;font-size:10px;margin:10px 0 13px}
.primary-button,.shift-card .primary-button,.fish-button{background:#171717;border:1px solid #171717;box-shadow:inset 0 1px 0 #ffffff16,0 2px 4px #00000008;border-radius:999px;color:#fff;font-weight:550;min-height:40px;padding:10px 18px}
.primary-button:hover,.shift-card .primary-button:hover,.fish-button:hover{background:#303030;border-color:#303030}
.primary-button:focus-visible,.fish-button:focus-visible{outline:3px solid #2ec9a0;outline-offset:3px}
.shift-card .primary-button{margin:0 0 0 auto;width:auto;min-width:190px}
.text-button{color:#66717b;font-size:10px;font-weight:450}
.text-button:hover{color:#171717}
progress{height:9px;border-radius:999px;background:#e0e6ec}
progress::-webkit-progress-bar{background:#e1e6ed}
progress::-webkit-progress-value,.goal-card progress::-webkit-progress-value{background:linear-gradient(90deg,#12c39c,#2ec9a0)}
progress::-moz-progress-bar{background:#2ec9a0}
.dashboard-lower{gap:14px;margin-top:14px}
.finance-card{display:grid;grid-template-columns:170px minmax(0,1fr) 190px;align-items:center;padding:17px 24px;gap:18px;border-radius:20px}
.finance-card h2{font-size:16px;color:#171717;font-weight:650}
.finance-card .eyebrow{display:none}
.finance-card .section-top{display:flex;align-items:flex-start;flex-direction:column;gap:11px}
.segmented{background:#e8edf3;padding:2px;border-radius:999px}
.segmented button{font-size:11px;padding:5px 14px;min-height:28px;border-radius:999px;color:#737c87}
.segmented button.active{background:#f6fffc;color:#08795f;box-shadow:0 1px 4px #1a584b14,inset 0 0 0 1px #afe8d7}
.finance-card .money-grid{margin:0;gap:18px}
.finance-card .money-grid>div+div{border-left:1px solid #dbe1e9;padding-left:18px}
.finance-card .money-grid small{color:#5b6570;font-size:11px;margin-left:6px}
.finance-card .money-grid strong{color:#171717;font-size:24px;font-weight:650;letter-spacing:-.6px;margin-top:11px}
.stat-dot{width:5px;height:5px;background:#717b87}.stat-dot.green{background:#2ec9a0}.stat-dot.orange{background:#929ba6}.stat-dot.gray{background:#a9b3bf}
.finance-card .net-row{display:block;border:0;border-radius:16px;background:#e6f8f3c9;padding:11px 20px;color:#5c6973;min-height:80px}
.net-row small{background:none;color:#64736d;font-size:9px}
.finance-card .net-row strong{display:block;margin-top:6px;font-size:30px;line-height:1.2;color:#009b77;font-weight:700}
.quick-card,.fixed-overview-card,.fish-card,.goal-card{padding:20px 22px}
.quick-card h2,.fixed-overview-card h2,.goal-card h2,.purchase-card h2{color:#171717;font-size:16px;font-weight:650}
.quick-card h2 strong,.fixed-overview-card h2 strong{color:#009b77;font-size:21px;font-weight:650;margin-left:7px}
.quick-card h2 svg,.fixed-overview-card h2 svg{color:#0b9c7c;stroke-width:1.7}
.quick-expenses{margin:15px 0 12px;gap:7px}
.quick-expenses button{font-size:10px;color:#68727d;gap:7px}
.quick-expenses span{width:35px;height:35px;display:grid;place-items:center;color:#58616d;background:#eef1f5;border:1px solid #ffffff;border-radius:13px;box-shadow:0 2px 5px #1b26350b}
.quick-expenses span svg{width:21px;height:21px;stroke-width:1.6}
.quick-expenses button:hover span{background:#e6f8f3;border-color:#c8eddf}
.overview-cost-row{font-size:12px;color:#515d66;border-color:#e4e8ed;padding:11px 0}
.overview-cost-row b{font-size:14px;color:#171717;font-weight:500}
.expense-preview{color:#7c8590;font-size:10px}
.fixed-overview-card>.fine-print{color:#87909b;font-size:10px}
.goal-card{background:linear-gradient(115deg,#ffffffbf,#e8faf4b8)}
.goal-card .goal-numbers{color:#64717b;font-size:11px}.goal-card .goal-numbers b{color:#707b86}
.goal-card h2{color:#171717}.goal-icon{color:#0b9c7c;background:#e6f8f3}
.fine-print,.goal-card .fine-print{color:#808b97;font-size:10px;line-height:1.7}
.fish-card{background:#ffffffb8;border-color:#fff;overflow:hidden}
.fish-card .card-heading{color:#171717;font-size:12px;font-weight:550}
.fish-card .card-heading svg{color:#079b77}
.fish-time{font-size:35px;color:#171717;font-weight:700;letter-spacing:.2px;margin-top:19px}
.fish-subtitle{color:#77828e;font-size:10px;margin-bottom:19px}
.fish-art{width:100px;height:89px;right:14px;top:53px}
.fish-button{font-size:12px;min-height:40px}
.efficiency{margin-top:15px;padding-top:13px;border-color:#e1e6ed;gap:9px}
.efficiency>div{color:#7a8491;font-size:10px}.efficiency b{color:#39434e;font-size:11px;font-weight:500}
.efficiency>div:nth-child(2){background:#e6f8f3;border:1px solid #d6eee5;border-radius:12px;padding:9px 11px}
#effective-hour{color:#08795f;font-size:15px;font-weight:650}
.purchase-card{background:#ffffffb8;padding:18px 24px}
.purchase-card .input-currency{border-radius:999px;border-color:#e0e6ed;background:#f9fbfd;padding:8px 14px;min-height:40px}
.purchase-card .input-currency span{color:#63717c}.purchase-card .input-currency input{color:#171717}
.purchase-card p,.purchase-card>small{color:#7c8793}.purchase-card>strong{font-size:22px;color:#171717;font-weight:550}
.view-intro h2,.list-card h2,.settings-card h2{color:#171717}.view-intro .muted,.muted{color:#7b8490}
.list-card,.settings-card{background:#ffffffbd;border-color:#ffffff;border-radius:22px}
.list-card p{color:#697683;font-size:12px}
.list-row{border-color:#e3e8ee;color:#2b333b}.list-row small{color:#87909b}.list-row button{color:#787f89}.list-row button:hover{color:#b83242}
.empty{color:#87929e}.row-value{color:#171717}
label,legend{color:#535f6c}.tag{border-radius:999px}
input:not([type=checkbox]):not([type=radio]),label>select{color:#27313b;background:#f8fafccc;border-color:#dfe5ed;border-radius:12px;font-size:14px}
input[type=checkbox],input[type=radio]{accent-color:#19b38b}
.attendance-settings{background:#edf8f5;border:1px solid #e0f1eb;border-radius:16px;padding:16px 18px}
.attendance-settings legend{color:#458371}
label small,fieldset small,#alternating-settings small{color:#85919c}
.weekdays span{background:#f8fafc;border-color:#e0e6ed;color:#818d99;border-radius:12px}
.weekdays input:checked+span{background:#e1f7ee;border-color:#9bddc8;color:#08795f}
.weekdays input:focus-visible+span{outline:3px solid #2ec9a0;outline-offset:3px}
.settings-explanation,.reminder-setting{background:#edf8f5;border:1px solid #e0f1eb;color:#5e8275;border-radius:14px}
#settings-feedback{color:#08795f}
dialog,#monthly-dialog,#summary-dialog,#reminder-dialog{color:#171717;background:#fafdffff;border:1px solid #fff;border-radius:24px;box-shadow:0 20px 90px #23384d26}
dialog::backdrop{background:#2c3f4e50;backdrop-filter:blur(7px)}
.dialog-heading h2,#summary-title,#monthly-dialog h2{color:#171717;font-weight:650}
.close-button{background:#eaf0f5;color:#6d7985;min-height:30px;min-width:30px;display:grid;place-items:center}
.form-error{color:#b83242}.duration-options span{border-color:#dfe5ed;background:#f5f8fb;color:#6d7885}
.duration-options input:checked+span{background:#e1f7ee;color:#08795f;border-color:#a6ddcb}
#confirm-copy{color:#667582}
.summary-earned,.report-earned{background:#e6f8f3;border:1px solid #d8eee7;border-radius:18px}
.summary-earned span,.report-earned span{color:#588374}.summary-earned strong,.report-earned strong{color:#009b77}
.summary-details>div,.calendar-detail-stats>div{color:#6d7d89;border-color:#e1e6ed}.summary-details b,.calendar-detail-stats b{color:#171717}
.summary-details .summary-net{background:#e6f8f3;border-color:#d8eee7;color:#08795f}.summary-net b{color:#009b77}
.calendar-header strong{color:#171717}.calendar-header button{color:#65727f;background:#edf2f6}
.calendar-weekdays{color:#8a95a1}.calendar-day{background:#f0f4f8;color:#74818e;border-radius:12px}
.calendar-day.ontime{background:#e2f8ed;color:#29805e;border-color:#c4ead9}.calendar-day.late{background:#fbe5e8;color:#aa4b58;border-color:#f1cbd2}
.calendar-day.early{background:#eceff3;color:#79818c;border-color:#dce2e9}.calendar-day.working{background:#e8f6f2;color:#587c71;border-color:#cde7de}
.calendar-day.empty{color:#adb5bf}.calendar-legend{color:#85919d}.calendar-legend .on-time{color:#369573}.calendar-legend .late{color:#ac5965}
#calendar-report{background:#e6f8f3;color:#08795f;border-color:#d5eee5;border-radius:999px}
.report-controls label{color:#6f7f8b}.report-money span,.report-hours span{color:#82909d}.report-money b,.report-hours b{color:#273d36}.report-money small{color:#8a96a1}
.report-hours{border-color:#e1e7ed}.report-attendance span{background:#edf0f4;color:#7c8792;border-radius:999px}.report-attendance span:first-child{background:#e2f8ed;color:#29805e}.report-attendance span:nth-child(2){background:#fbe5e8;color:#aa4b58}
#report-overtime{color:#6f817b}.toast{color:#fff;background:#202827;border:1px solid #ffffff20;border-radius:999px;box-shadow:0 7px 24px #1c2e3a26}
footer{color:#939da8;font-size:10px}
.overtime-mode #shift-label-text,.overtime-mode .shift-card .countdown{color:#a7515e!important}.overtime-mode .shift-card .shift-summary{color:#9a6670}
.amounts-hidden .hero{background:#ffffffc9}.amounts-hidden .hero .hero-value strong{color:#171717}
/* Loading reproduces the approved card and actual artwork; it is removed when initialization resolves. */
.boot-screen{position:fixed;inset:0;display:grid;place-items:center;z-index:1000;padding:24px;background:#f7f8fa;background-image:radial-gradient(ellipse 780px 600px at 5% 0%,#a2eed94d,transparent 80%),radial-gradient(ellipse at 80% 75%,#e5ecf34d,transparent 70%)}
.boot-card{width:min(680px,100%);min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;border-radius:24px;background:linear-gradient(120deg,#ffffff5e,#ffffff96);border:1px solid #fffffff0;box-shadow:0 25px 60px #263f5e0b;text-align:center}
.boot-illustration{width:300px;height:210px;max-width:100%;background-image:url('loading-scene.png');background-repeat:no-repeat;background-size:1338px 753px;background-position:-520px -195px;mask-image:radial-gradient(ellipse at center,#000 62%,transparent 100%)}
.boot-card h1{font-size:42px;color:#26343b;letter-spacing:1px;margin:8px 0 10px;font-weight:750}
.boot-card p{font-size:18px;line-height:1.7;color:#81909c;letter-spacing:1px;margin:0}
.boot-dots{display:flex;gap:20px;margin-top:27px}
.boot-dots i{width:12px;height:12px;border-radius:50%;background:#2ec9a0;opacity:.25;animation:loading-dot 1.2s ease-in-out infinite}
.boot-dots i:nth-child(2){animation-delay:.2s}.boot-dots i:nth-child(3){animation-delay:.4s}
.boot-screen[data-state=error] .boot-dots{display:none}.boot-screen[data-state=error] .boot-card p{font-size:15px;letter-spacing:0;max-width:410px}.boot-screen #boot-retry{margin-top:24px}
.app-loading .app-shell{visibility:hidden}.no-script{position:fixed;inset:0;display:grid;place-items:center;margin:0;padding:30px;background:#f7f8fa;color:#171717;z-index:1001;line-height:1.8;text-align:center}
@keyframes loading-dot{0%,75%,100%{opacity:.25;transform:translateY(0)}35%{opacity:.85;transform:translateY(-3px)}}
@media(min-width:761px){
  .quick-card{grid-column:1;grid-row:2/4}.fixed-overview-card{grid-column:2;grid-row:2}.goal-card{grid-column:2;grid-row:3}.fish-card{grid-column:3;grid-row:2/4}
  .purchase-card{grid-column:1/4;grid-row:4;grid-template-columns:165px 145px 140px minmax(0,1fr)}
}
@media(min-width:761px) and (max-width:1100px){
  .sidebar{gap:12px;padding:20px 24px 10px}.brand{font-size:22px}.nav-item{padding:10px 12px;font-size:12px}
  main{padding:10px 24px 22px}.hero,.shift-card{padding:22px;min-height:245px}.hero .hero-value strong{font-size:61px}.hero .hero-value strong.long-value{font-size:37px}.hero .hero-value strong.very-long-value{font-size:25px}
  .hero-art{width:174px;height:157px;right:8px;bottom:15px}.hero-description{font-size:10px;max-width:62%}.hero select{font-size:21px}.hero .pill{font-size:9px;padding:5px 7px}
  .shift-card .card-heading{font-size:16px;padding-right:80px}.clock-art{width:80px;height:80px}.shift-card .countdown{font-size:35px}
  .finance-card{grid-template-columns:130px minmax(0,1fr) 155px;gap:14px;padding:16px 20px}.finance-card .money-grid{gap:12px}.finance-card .money-grid>div+div{padding-left:12px}.finance-card .money-grid strong{font-size:20px}.finance-card .net-row{padding:12px 15px}.finance-card .net-row strong{font-size:27px}
  .quick-card,.fixed-overview-card,.goal-card,.fish-card{padding:18px 16px}.quick-card h2,.fixed-overview-card h2{font-size:15px}.quick-card h2 strong,.fixed-overview-card h2 strong{font-size:18px}.quick-expenses{grid-template-columns:repeat(3,1fr)}.fish-time{font-size:30px}.fish-art{width:83px;right:6px}
  .purchase-card{grid-template-columns:140px 120px 120px minmax(0,1fr);gap:4px 12px}.purchase-card>strong{font-size:19px}
}
@media(max-width:760px){
  .sidebar{padding:16px 18px 7px;gap:10px}.brand{font-size:23px;gap:8px}.brand-mark,.brand-mark img{width:42px;height:42px}.brand small{font-size:6px;letter-spacing:1.65px}
  nav{gap:5px;margin-top:5px}.nav-item{min-height:44px;padding:10px 5px;font-size:12px;gap:6px}.nav-item svg{width:16px;height:16px}
  main{padding:11px 18px 24px}.page-header h1{font-size:11px}.header-actions .quiet-button{font-size:11px;min-height:36px;padding:7px 11px}.page-header .eyebrow{font-size:9px}
  .notice{font-size:10px;padding:8px 11px;gap:6px}.notice button{font-size:10px;min-height:25px}
  .overview-grid{grid-template-columns:1fr;gap:13px}.hero{min-height:250px;padding:22px}.hero select{font-size:21px}.hero .pill{font-size:9px;padding:5px 8px}
  .hero .hero-value{margin-top:18px;margin-bottom:12px;gap:6px}.hero .hero-value strong{font-size:55px;letter-spacing:-1.6px}.hero .hero-value>span{font-size:28px}.hero .hero-value strong.long-value{font-size:35px}.hero .hero-value strong.very-long-value{font-size:23px}
  .hero-description{max-width:66%;font-size:10px;min-height:35px;margin-bottom:13px}.hero-art{width:105px;height:92px;right:13px;bottom:16px;opacity:1}.hero::before{width:125px;height:70px;right:8px;bottom:18px}
  .hero-bottom{font-size:10px}.hero.uncovered .hero-art{opacity:1}
  .shift-card{padding:22px;min-height:240px}.shift-card .card-heading{font-size:17px;padding-right:83px}.clock-art{width:82px;height:82px;top:20px;right:13px}.shift-card .countdown{font-size:42px;margin:18px 0}.shift-card .primary-button{width:100%;margin-top:15px;min-height:43px}
  .shift-card .progress-line{font-size:10px}.shift-card .shift-summary{font-size:10px}
  .dashboard-lower{display:flex;flex-direction:column;gap:13px;margin-top:13px}.main-column,.side-column{display:contents}
  .finance-card{display:block;padding:20px}.finance-card .section-top{flex-direction:row;align-items:center;margin-bottom:22px}.finance-card .money-grid{gap:10px;margin-bottom:18px}.finance-card .money-grid>div+div{padding-left:10px}.finance-card .money-grid small{font-size:9px;margin-left:4px}.finance-card .money-grid strong{font-size:18px;margin-top:10px}
  .finance-card .net-row{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;min-height:56px;gap:10px}.finance-card .net-row strong{margin:0;font-size:26px}
  .quick-card,.fixed-overview-card,.fish-card,.goal-card,.purchase-card{padding:20px}
  .quick-card h2,.fixed-overview-card h2,.goal-card h2,.purchase-card h2{font-size:16px}.quick-card h2 strong,.fixed-overview-card h2 strong{font-size:20px}.quick-card h2 svg{display:inline-block}
  .quick-expenses{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:13px 0 8px}.quick-expenses button{font-size:10px;min-height:61px}.quick-expenses span{width:34px;height:34px;border-radius:12px}
  .card-heading .text-button,.section-top .text-button{font-size:10px;min-height:40px}
  .fish-card .card-heading{font-size:12px}.fish-time{font-size:35px}.fish-art{width:104px;height:84px;right:17px;top:57px}.fish-subtitle{font-size:10px}.fish-button{min-height:43px}.efficiency>div{font-size:11px}.efficiency b{font-size:12px}
  .purchase-card{display:block}.purchase-card .input-currency{min-height:47px;margin:13px 0}.purchase-card>strong{font-size:22px}.purchase-card p{font-size:11px}
  .settings-card,.list-card{padding:20px}.attendance-settings{padding:13px}.form-grid{grid-template-columns:1fr;gap:0}.weekdays{gap:5px;justify-content:space-between}.weekdays span{width:32px;height:40px}
  input:not([type=checkbox]):not([type=radio]),label>select{font-size:16px}
  dialog,#monthly-dialog,#summary-dialog,#reminder-dialog{padding:21px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.report-controls{flex-wrap:wrap}.report-hours{grid-template-columns:1fr 1fr}.report-money b{font-size:24px}
  .boot-screen{padding:20px}.boot-card{min-height:385px;padding:25px 20px;border-radius:24px}.boot-illustration{width:270px;height:190px;background-size:1204px 678px;background-position:-468px -175px}.boot-card h1{font-size:34px}.boot-card p{font-size:15px}.boot-dots{margin-top:24px;gap:17px}.boot-dots i{width:10px;height:10px}
}
@media(max-width:359px){
  .sidebar{padding-left:12px;padding-right:12px}.brand{font-size:21px}.nav-item{font-size:11px;gap:4px}
  main{padding-left:12px;padding-right:12px}.hero .hero-value strong{font-size:47px}.hero .hero-value strong.long-value{font-size:31px}.hero .hero-value strong.very-long-value{font-size:21px}.hero select{font-size:19px}.hero-art{width:97px;height:89px;bottom:13px}
  .finance-card .money-grid strong{font-size:16px}.finance-card .money-grid small{font-size:8px}.finance-card .money-grid>div+div{padding-left:7px}.finance-card .money-grid{gap:7px}.weekdays span{width:28px}
  .boot-screen{padding:15px}.boot-card{padding:24px 14px}.boot-illustration{width:240px;height:170px;background-size:1070px 602px;background-position:-416px -156px}
}
@media(prefers-reduced-motion:reduce){.boot-dots i{animation:none;opacity:.55;transform:none}}

/* Business controls from the verified desktop snapshot, adapted to this web visual layer. */
.clock-art{filter:none}
.hero-bottom{max-width:calc(100% - 185px)}
.salary-rates{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline}
.salary-rates>span{display:flex;gap:5px;align-items:baseline;white-space:nowrap}
.salary-rates small{color:#77838e;font-size:10px}
.salary-rates b{color:#263f36;font-size:12px;font-weight:600}
#hero-rate-note{flex-basis:100%;font-size:9px}
.recorded-start-row{color:#71808d;gap:10px;margin-bottom:12px;font-size:11px}
.recorded-start-row .text-button{border-color:#cce9de;background:#e6f8f3;color:#08795f;border-radius:999px;padding:4px 10px;min-height:30px}
.section-actions{display:flex;align-items:center;gap:10px}
.quick-fixed-button{display:grid;place-items:center;width:33px;height:33px;min-height:33px;border:1px solid #d2e9e0;border-radius:12px;background:#effbf7;color:#08795f;font-size:22px;padding:0}
.break-duration{gap:18px;margin:15px 0}
.break-duration>button{background:#e6f8f3;color:#08795f;border-color:#cce9de;border-radius:14px;width:46px;height:46px;min-height:46px;touch-action:none}
.break-duration>button:focus-visible,.quick-fixed-button:focus-visible{outline:3px solid #2ec9a0;outline-offset:3px}
.break-duration-input{margin:0;display:flex;flex-direction:row;align-items:baseline}
.break-duration-input input{background:#fff!important;color:#171717!important;font-size:30px!important;width:90px;text-align:center;border-radius:14px}
.break-duration-input span{color:#74818b;font-size:13px}
#break-date-note{color:#577b6e;font-size:11px;line-height:1.7;margin:0 0 10px}
#correction-dialog{background:#fcfdfe;border-color:#fff;max-width:calc(100vw - 24px);border-radius:24px}
.correction-preview{background:#e6f8f3;border-color:#d2ebe1;border-radius:16px}
.correction-preview b{color:#2d493f}.correction-preview>div:nth-child(2)>b{color:#008a69}
.correction-preview>div>span,.correction-preview small,#correction-dialog .eyebrow,#correction-dialog .correction-history{color:#6d8178}
.correction-preview>p{border-color:#cbe5d9;color:#47765f}
#calendar-correct-start{color:#08795f}
.overtime-mode #countdown,.overtime-mode #shift-label-text,.overtime-ended #countdown,.overtime-ended #shift-label-text{color:#bd3c36!important}
.overtime-mode .shift-card{background:linear-gradient(125deg,#fff5f3d0,#ffffffd9);border-color:#e9c8c1}
.overtime-mode .shift-card .shift-summary{color:#9c5b55}
@media(max-width:760px){
  .hero{min-height:275px}
  .hero-bottom{max-width:68%}
  .salary-rates{gap:7px 10px}
  .salary-rates>span{gap:4px}
  .salary-rates small{font-size:9px}.salary-rates b{font-size:11px}
  .hero-art{bottom:26px}
  .shift-card .countdown{margin-bottom:8px}
  .recorded-start-row{margin-bottom:12px;min-height:30px}
  .section-actions{gap:8px}.quick-fixed-button{width:34px;height:34px;min-height:34px}
  #correction-dialog .form-grid{grid-template-columns:1fr;gap:0}
  #goal-complete-dialog .confirm-actions,#overtime-choice{flex-wrap:wrap}
}