:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eaf2f6;background:#091522;font-synthesis:none}*{box-sizing:border-box}body{margin:0;line-height:1.5}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,.file-label:focus-within{outline:3px solid #5adfcb;outline-offset:2px}.shell{max-width:1200px;margin:0 auto;padding:0 22px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid #203248}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;background:#42d4b4;color:#062b2b;width:42px;height:42px;border-radius:13px;font-size:25px;font-weight:900}.brand strong{display:block;font-size:20px}.brand small{display:block;color:#9cbbcc}.status{color:#8ad3c5;font-size:13px}.intro{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:42px 0 28px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#6ae0c7}.intro h1{font-size:clamp(28px,4vw,44px);line-height:1.15;margin:0 0 10px}.intro p:not(.eyebrow){color:#a8bdcc;max-width:590px;margin:0}.primary,.secondary,.danger,.file-label{border:0;border-radius:11px;padding:11px 16px;font-weight:700;text-align:center}.primary{background:#48dfbd;color:#06302d}.primary:hover{background:#81efd7}.secondary,.file-label{background:#203246;color:#eaf2f6;border:1px solid #38506a}.secondary:hover,.file-label:hover{background:#30465c}.danger{background:#5a2535;color:#ffd4dc;margin-right:auto}.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:12px 0 25px}.stat,.panel,.day{background:#112336;border:1px solid #294058;border-radius:17px}.stat{padding:20px}.stat span,.stat small{display:block;color:#a3bdc9}.stat span{font-size:13px}.stat strong{font-size:clamp(22px,2.4vw,32px);display:block;margin:7px 0}.stat:first-child strong{color:#61e2c7}.stat small{font-size:12px}.panel{padding:22px;margin:18px 0}.panel h2{margin:0 0 4px;font-size:20px}.panel p{color:#a4bdca;margin:0}.tools,.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.week-controls,.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.week-controls strong{min-width:190px;text-align:center}.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.day{min-height:146px;padding:12px;overflow-wrap:anywhere}.day.today{border-color:#48dfbd}.day-heading{display:flex;justify-content:space-between;gap:4px;align-items:baseline;border-bottom:1px solid #284055;padding-bottom:9px;margin-bottom:8px}.day-heading b{font-size:13px}.day-heading span{font-size:11px;color:#a3b8c6}.day-empty{font-size:12px;color:#668398}.day-job{border-left:3px solid #42d4b4;background:#1a3547;border-radius:7px;padding:7px 6px;margin:5px 0;font-size:11px;cursor:pointer;width:100%;color:#e9f5f7;text-align:left}.day-job.server{border-color:#d1a6ff}.day-job.landscaper{border-color:#a6d978}.day-job.petcare{border-color:#ffba8e}.day-job.freelance{border-color:#93befb}.day-job.completed{opacity:.72}.day-job.cancelled{opacity:.45;text-decoration:line-through}.day-job span{display:block;color:#c8dfeb}.job-list{display:grid;gap:10px;margin-top:20px}.job-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid #30475c;border-radius:11px;background:#192e41}.job-row strong,.job-row small{display:block}.job-row small{color:#99b3c5}.job-row .money{font-weight:800;color:#68e2c9}.job-row .right{display:flex;align-items:center;gap:12px}.pill{font-size:11px;padding:3px 8px;border-radius:100px;color:#a8c8da;background:#274257}.pill.completed{background:#18483f;color:#87ebd0}.pill.cancelled{background:#53383b;color:#ffc4c4}.notice p{margin:10px 0 15px}footer{padding:25px 0 35px;text-align:center;color:#8299a8;font-size:12px}dialog{background:#112336;color:#eaf2f6;border:1px solid #39546e;border-radius:19px;width:min(94vw,560px);max-height:90vh;overflow:auto;padding:26px;box-shadow:0 24px 80px #0008}dialog::backdrop{background:#010b15cc}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{margin:0 0 16px}.close{border:0;background:none;color:#cbdbe5;font-size:30px}.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}.field label{font-size:13px;color:#bed2df}.field input,.field select{background:#091b2d;color:white;border:1px solid #38546a;padding:12px;border-radius:9px;width:100%;min-width:0}.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.estimate{display:flex;justify-content:space-between;padding:15px;border-radius:11px;background:#1a3543;gap:10px}.estimate strong{color:#76e6cc}.hint{font-size:12px;color:#a6bfcb}.dialog-actions{display:flex;justify-content:flex-end;margin-top:14px}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#284759;color:white;padding:12px 18px;border-radius:12px;display:none;box-shadow:0 10px 30px #0007}.toast.show{display:block}@media(max-width:850px){.summary{grid-template-columns:repeat(2,1fr)}.calendar{grid-template-columns:repeat(4,1fr)}.intro{align-items:flex-start;flex-direction:column}.tools{flex-direction:column;align-items:flex-start}}@media(max-width:550px){.shell{padding:0 13px}.topbar{padding:17px 0}.status{font-size:10px}.intro{padding:27px 0 15px;gap:17px}.intro .primary{width:100%}.summary{gap:8px}.stat{padding:14px 11px}.stat strong{font-size:23px}.stat small{font-size:10px}.calendar{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.day{min-height:108px}.panel{padding:16px}.week-controls strong{min-width:155px}.job-row{align-items:flex-start}.job-row .right{flex-direction:column;align-items:flex-end;gap:5px}.two-col{gap:8px}.dialog-actions{gap:9px}}
/* Quick actions for completing shifts and paying bills */
.finish-job{white-space:nowrap;padding:8px 12px;font-size:12px}.finish-job:disabled{opacity:.72;cursor:default}.job-row .right{flex-wrap:wrap;justify-content:flex-end}.planner-paid{white-space:nowrap;font-size:12px;padding:8px 10px}.planner-row .planner-paid{padding:8px 10px}.planner-row:has(.planner-paid) .planner-name{min-width:90px}#completion-dialog .hint{margin:8px 0 16px}.dialog-actions{gap:10px}@media(max-width:600px){.job-row .right{gap:7px}.finish-job{padding:8px}.planner-row{flex-wrap:wrap}.planner-row .planner-name{flex-basis:55%}.planner-row .planner-paid{margin-left:auto}.planner-row>strong{margin-left:auto}}

/* QuotePilot v0.4: two main views, time-aware weekly calendar, daily agenda */
.app-tabs{display:flex;gap:10px;padding:18px 0 4px;flex-wrap:wrap}
.app-tab{border:1px solid #34546b;background:#172f46;color:#d8ebf2;border-radius:12px;padding:13px 24px;font-weight:800}
.app-tab.active{background:#48dfbd;color:#06302d;border-color:#48dfbd}
.app-tab:focus-visible,.day-select:focus-visible{outline:3px solid #5adfcb;outline-offset:2px}
.app-view[hidden]{display:none!important}
.money-intro{padding:31px 0 4px}.money-intro h1{font-size:clamp(27px,4vw,42px);margin:0 0 10px}.money-intro p:not(.eyebrow){color:#a8bdcc;margin:0}
.day.selected{border-color:#48dfbd;box-shadow:0 0 0 1px #48dfbd}
.day-select{background:#1c394a;color:#d6f9ed;border:1px solid #42677b;border-radius:7px;font-size:11px;padding:4px 8px;margin-bottom:6px}
.day-job.overlaps,.agenda-entry.overlap{border-color:#e3ae62}
.agenda-panel{margin-top:20px}.day-agenda{margin-top:17px;display:grid;gap:9px}
.agenda-entry{display:flex;align-items:center;gap:13px;background:#192e41;padding:13px;border:1px solid #355069;border-left:4px solid #4bdcba;border-radius:11px}
.agenda-time{min-width:158px;font-size:13px}.agenda-detail{flex:1;min-width:0}.agenda-detail strong,.agenda-detail small{display:block}.agenda-detail small{color:#a7bfd0}.overlap-note{display:block;color:#f4be73;font-weight:700;font-size:12px}
.agenda-entry button{padding:7px 11px}
@media(max-width:550px){.app-tab{flex:1;padding:12px 9px;font-size:13px}.agenda-entry{flex-wrap:wrap;gap:8px}.agenda-time{width:100%}.agenda-detail{flex-basis:60%}}

/* Hidden form controls must stay hidden even when .field uses display:flex. */
[hidden]{display:none!important}


/* v0.6 tip inputs, mileage and reusable templates */
.inline-label{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:#d4e9f0}
.inline-label input{width:18px;height:18px;accent-color:#4bdcba}
#tip-fields{border:1px solid #37556a;background:#162d41;border-radius:12px;padding:12px;margin:0 0 15px}
#completion-tips{border:1px solid #37556a;border-radius:12px;padding:12px;margin-bottom:14px}
#completion-tips .two-col{grid-template-columns:repeat(3,minmax(0,1fr))}
#completion-tips .hint{margin:0 0 10px!important}
#save-template{font-size:12px;margin-right:auto}
.worktools-panel{margin-top:18px}
.tool-list{display:grid;gap:10px;margin-top:16px}
.tool-row{display:flex;align-items:center;gap:12px;border-radius:10px;padding:12px 14px;background:#192e41;border:1px solid #34516a}
.tool-detail{flex:1;min-width:0}
.tool-detail strong,.tool-detail small{display:block}
.tool-detail small{font-size:12px;color:#a9c5d1;overflow-wrap:anywhere}
.tool-row button{padding:8px 11px}
.mileage-summary{display:flex;gap:15px;align-items:center;flex-wrap:wrap;background:#1b354a;border-radius:12px;padding:14px;margin-top:17px}
.mileage-summary label{color:#d2e4ed;font-size:13px}
.mileage-summary input{background:#091b2d;color:#fff;border:1px solid #436077;padding:9px;border-radius:9px}
.mileage-summary strong{font-size:19px;margin-left:auto}
.payment-action{font-size:12px;padding:8px 12px;white-space:nowrap}
.job-row .right{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:600px){
#completion-tips .two-col{grid-template-columns:1fr 1fr}
.tool-row{flex-wrap:wrap;gap:7px}
.tool-detail{flex-basis:65%}
.mileage-summary strong{margin-left:0;width:100%}
#save-template{width:100%}
}


/* Free monthly earnings history and template allowance */
.earnings-history{margin-top:18px}
.earnings-picker{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0}
.earnings-picker label{font-size:13px;color:#b3cbd6}
.earnings-picker input{background:#12293c;color:#eef8f9;border:1px solid #43647b;border-radius:9px;padding:9px;min-width:150px}
.earnings-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.earnings-stat{background:#183146;border:1px solid #3c5c70;border-radius:13px;padding:17px;display:flex;flex-direction:column;gap:7px}
.earnings-stat span{color:#b1c8d4;font-size:13px}
.earnings-stat strong{font-size:clamp(21px,3vw,30px);font-weight:800}
.earnings-stat small{color:#9fb9c7}
.earnings-history h3{margin:22px 0 10px}
.history-month-list{display:flex;flex-wrap:wrap;gap:8px}
.history-month{background:#163449;border:1px solid #456279;color:#dcebf3;border-radius:9px;padding:10px 13px;text-align:left;cursor:pointer;font:inherit;font-size:13px}
.history-month.active{border-color:#4de0bd;background:#13453f;color:#ddfff2}
.template-quota{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:10px 14px;border:1px solid #3f5a6d;border-radius:10px;margin-top:14px}
.template-quota strong{font-size:13px}
.template-quota label{font-size:13px;color:#bad1dc}
@media(max-width:680px){.earnings-stat-grid{grid-template-columns:1fr}.earnings-picker input{flex:1;min-width:130px}.history-month{flex:1;min-width:135px}}

/* Four primary tabs: keep premium sections usable on smaller displays. */
.app-tabs{align-items:stretch}
.app-tabs .app-tab{flex:1 1 170px;min-width:0;text-align:center;white-space:normal}
@media(max-width:620px){.app-tabs{gap:8px}.app-tabs .app-tab{flex:1 1 calc(50% - 8px);padding:11px 8px;font-size:13px;line-height:1.3}}


/* Optional cloud account controls and accessibility */
.cloud-account-wrap{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap;max-width:420px}
.cloud-account-wrap button{padding:9px 12px;font-size:12px;white-space:normal}
#cloud-state{font-size:11px;color:#bdd7df;line-height:1.4;max-width:210px}
#cloud-member .actions,#cloud-form .actions{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}
#cloud-member .actions button,#cloud-form .actions button{font-size:12px}
#cloud-billing{border-top:1px solid #37546a;margin-top:20px;padding-top:13px}
#cloud-billing h3{font-size:17px;margin:8px 0}
#cloud-plan{font-weight:700}
.cloud-account-wrap :focus-visible,#cloud-member :focus-visible,#cloud-form :focus-visible{outline:3px solid #64ebd4;outline-offset:3px}
@media(max-width:620px){.cloud-account-wrap{width:100%;justify-content:flex-start;max-width:none}.cloud-account-wrap button{flex:0 1 auto}#cloud-state{max-width:none}}

/* Hide protected account data when the cloud session cannot be verified. */
.cloud-locked .shell main,.cloud-locked .shell footer{display:none!important}
.cloud-locked .cloud-account-wrap{position:relative;z-index:2}

/* Account mode selector: a clear, keyboard-accessible active state. */
.cloud-auth-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:16px 0 14px;padding:5px;border:1px solid #36576b;border-radius:12px;background:#102538}
.cloud-auth-mode{border:1px solid transparent;border-radius:9px;padding:11px 7px;background:transparent;color:#bdd3df;font:inherit;font-weight:650;font-size:13px;cursor:pointer;line-height:1.25;min-width:0;transition:background-color .16s,color .16s,border-color .16s}
.cloud-auth-mode:hover{color:white;background:#214357}
.cloud-auth-mode.active,.cloud-auth-mode[aria-pressed="true"]{background:#166451;border-color:#70f5d6;color:#fff;box-shadow:0 0 0 1px rgba(112,245,214,.25) inset,0 0 14px rgba(78,225,188,.18)}
.cloud-auth-mode:focus-visible{outline:3px solid #75f8db;outline-offset:2px}
#cloud-form .field{margin-bottom:12px}
#cloud-form #cloud-auth-submit{min-width:155px}
@media(max-width:460px){.cloud-auth-modes{gap:4px;padding:4px}.cloud-auth-mode{font-size:12px;padding:10px 5px}}