:root{
  --bg:#ececec; --side:#e3e3e3; --card:#ffffff; --line:#d9d9d9; --text:#1d1d1f; --muted:#86868b;
  --accent:#0a66d9; --leaf:#2f8f4e; --accent-soft:#e5effc; --danger:#d63a2f; --field:#f5f5f7;
  color-scheme:light;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1e1e1e; --side:#262626; --card:#2c2c2e; --line:#3a3a3c; --text:#f5f5f7; --muted:#98989d;
  --accent:#3b8cff; --leaf:#5cc27a; --accent-soft:#1f3350; --danger:#ff5f52; --field:#3a3a3c; color-scheme:dark;}}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-size:14px}
.app{display:flex;height:100%}
aside{width:220px;flex-shrink:0;background:var(--side);border-right:1px solid var(--line);padding:16px 10px}
aside h1{margin:4px 10px 16px;display:flex;align-items:center;gap:8px;font-weight:normal}
.logo{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--leaf);flex-shrink:0}
aside h1 .appname{font-size:20px;font-weight:650;letter-spacing:-.01em;color:var(--text)}
.nav{display:flex;align-items:center;gap:14px;width:100%;border:0;background:none;color:var(--text);
  font:inherit;padding:7px 10px;border-radius:7px;cursor:pointer;text-align:left}
.nav:hover{background:rgba(127,127,127,.12)}
.nav.active{background:var(--accent);color:#fff}
.ico{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dp-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
main{flex:1;overflow:auto;padding:28px 32px 56px}
.inner{width:100%}
h2{font-size:22px;font-weight:700;margin:0 0 18px}
.group{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:22px;overflow:hidden}
.ghead{font-size:12px;color:var(--muted);margin:0 0 6px 12px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--line);min-height:44px}
.row:first-child{border-top:0}
.row label{flex-shrink:0}
.row .ctl{flex:1;max-width:520px;display:flex;justify-content:flex-end;gap:6px}
input,select,textarea{font:inherit;color:var(--text);background:var(--field);border:1px solid transparent;border-radius:6px;padding:6px 9px;width:100%}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
textarea{resize:vertical;min-height:54px}
.btn{font:inherit;border:0;border-radius:6px;padding:7px 14px;cursor:pointer;background:var(--accent);color:#fff;white-space:nowrap}
.btn.plain{background:var(--field);color:var(--text)}
.btn.link{background:none;color:var(--danger);padding:4px 6px}
.actions{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.muted{color:var(--muted)}
.empty{padding:22px 14px;color:var(--muted);text-align:center}
.cols{display:grid;grid-template-columns:1fr;gap:6px}
.list .item{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;border-top:1px solid var(--line);cursor:pointer}
.list .item:first-child{border-top:0}
.list .item.sel{background:var(--accent-soft)}
.addrow{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:9px 12px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
th{font-weight:600;font-size:12px;color:var(--muted);border-top:0}
td.num,th.num{text-align:right;white-space:nowrap}
tfoot td{font-weight:600}
.summary{display:flex;gap:28px;padding:14px}
.summary b{display:block;font-size:22px}
.hidden{display:none!important}
.about{padding:14px 16px;line-height:1.5}
.about p{margin:0 0 8px;max-width:70ch}
.about p:last-child{margin:0}
.copyright{position:fixed;left:14px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:5;font-size:11px;color:var(--muted);
  background:var(--bg);padding:2px 8px;border-radius:6px;pointer-events:none}
.iname{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.iname small{font-size:12px}
.iact{display:flex;gap:2px;flex-shrink:0;align-items:center}
.details{font-size:12px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:4px;display:grid;grid-template-columns:max-content 1fr;column-gap:8px;row-gap:2px}
.details b{font-weight:600}
.rate{display:flex;gap:6px;width:100%}
.rate input{flex:1}.rate select{flex:0 0 90px}
/* aligned label column in form groups */
.form{display:grid;grid-template-columns:max-content minmax(0,1fr)}
.form>.row,.form>.actions{grid-column:1/-1}
.form>.row{display:grid;grid-template-columns:subgrid;column-gap:14px;justify-content:start}
.form>.row .ctl{justify-content:flex-start;max-width:520px}
.form>.actions.aligned{display:grid;grid-template-columns:subgrid;column-gap:14px}
.form>.actions.aligned .ctl{grid-column:2;max-width:520px;display:flex;justify-content:flex-end}
#log .group.form,#sheets .group.form{grid-template-columns:max-content minmax(0,520px);width:fit-content;max-width:100%}
.todaybtn{font:inherit;font-size:15px;color:var(--accent);background:none;border:0;border-radius:8px;padding:6px 8px;cursor:pointer;white-space:nowrap}
.todaybtn:hover{background:var(--accent-soft)}
.stepper{position:relative;width:100%}
.stepper input{padding-right:34px}
.stepper .steps{position:absolute;right:3px;top:3px;bottom:3px;display:flex;flex-direction:column;width:26px}
.stepper .steps button{flex:1;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:4px;padding:0;display:grid;place-items:center}
.stepper .steps button:hover{background:rgba(127,127,127,.18);color:var(--text)}
.stepper .steps svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
select.ph:invalid{color:var(--muted)}
select.ph option{color:var(--text)}
.dateinput{font-variant-numeric:tabular-nums;cursor:pointer}
/* calendar (one look everywhere, 30% larger than the base text) */
.dp{position:fixed;z-index:50;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);padding:12px;font-size:18px;user-select:none}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dp-head b{font-size:18px}
.dp button{font:inherit;color:var(--text);background:none;border:0;cursor:pointer;border-radius:8px}
.dp-nav{width:40px;height:40px;font-size:22px}
.dp-grid{display:grid;grid-template-columns:repeat(7,40px);gap:2px}
.dp-wd{height:30px;display:grid;place-items:center;font-size:13px;color:var(--muted)}
.dp-day{height:40px;font-size:17px;font-variant-numeric:tabular-nums}
.dp-day:hover,.dp-nav:hover{background:rgba(127,127,127,.15)}
.dp-day.out{color:var(--muted);opacity:.5}
.dp-day.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.dp-day.sel{background:var(--accent);color:#fff}
.dp-foot{display:flex;justify-content:space-between;margin-top:8px}
.dp-foot button{font-size:15px;color:var(--accent);padding:6px 8px}
.dp-foot button:hover{background:var(--accent-soft)}
td.date,td.user{white-space:nowrap}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.list .item>span{min-width:0}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:start center;padding:60px 14px;z-index:20;overflow:auto}
.sheet{width:100%;max-width:520px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.sheet h3{margin:0 0 14px;font-size:16px}
.sheet .group{margin-bottom:0}
.rowbtns{white-space:nowrap}
.btn.edit{background:none;color:var(--accent);padding:4px 6px}
.addrow select{flex:0 0 42%}
.assign{font-size:12px;color:var(--muted);padding:8px 14px 0}
@media (max-width:760px){
  .app{flex-direction:column}
  aside{width:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px;display:flex;gap:4px;overflow-x:auto;
    padding-top:calc(10px + env(safe-area-inset-top,0px))}
  aside h1{margin:0 6px 0 4px;justify-content:center}aside h1 .appname{display:none}
  .nav{width:auto;white-space:nowrap}
  main{padding:18px 14px calc(40px + env(safe-area-inset-bottom,0px))}
  .cols{grid-template-columns:1fr}
  .row{flex-wrap:wrap}.row .ctl{max-width:none;flex-basis:100%;justify-content:stretch}
  .form>.row .ctl,.form>.actions.aligned .ctl{max-width:none}
  #log .group.form,#sheets .group.form{grid-template-columns:max-content minmax(0,1fr);width:auto}
}

/* === Forest background (index_forest.html) === */
html:not(.no-photo),html:not(.no-photo) body{background:#1f2d22 url("forest-1920.webp") center/cover no-repeat fixed}
@media (max-width:900px){html:not(.no-photo),html:not(.no-photo) body{background-image:url("forest-1280.webp")}}
.app{background:transparent}
main{background:transparent}
aside{align-self:flex-start;margin:28px 0 0 20px;max-height:calc(100% - 56px);overflow:auto;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 22px rgba(0,0,0,.28)}
@media (max-width:760px){aside{align-self:stretch;margin:10px 10px 0;max-height:none;border:1px solid var(--line)}}
.group{box-shadow:0 6px 22px rgba(0,0,0,.28)}
main h2,main .ghead{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.copyright{color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.25)}
/* Clients & projects: subtitle inside the card */
#setup .cols>div{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  margin-bottom:22px;box-shadow:0 6px 22px rgba(0,0,0,.28)}
#setup .cols>div>.ghead{color:var(--muted);text-shadow:none;margin:0;padding:10px 14px 4px;font-weight:600}
#setup .cols>div>.group{border:0;border-radius:0;margin:0;box-shadow:none}
/* other cards: subtitle inside the card */
main .group>.ghead{color:var(--muted);text-shadow:none;margin:0;padding:10px 14px 4px;font-weight:600}
.group>.ghead+.row{border-top:0}
.about p{max-width:none}
/* Sign-in screen */
.login{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;overflow:auto}
.loginbox{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:26px 24px 22px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.loginbox .brand{display:flex;flex-direction:column;align-items:center;gap:8px;margin:0 0 22px}
.loginbox .brand .logo{width:44px;height:44px}
.loginbox .brand .appname{font-size:24px;font-weight:650;letter-spacing:-.01em;color:var(--text)}
.loginbox label{display:block;font-size:12px;color:var(--muted);margin:0 0 5px 2px}
.loginbox input{margin-bottom:14px;padding:8px 10px}
.loginerr{min-height:18px;margin:0 0 10px;font-size:12px;color:var(--danger)}
.loginerr.info{color:var(--muted)}
.loginact{display:flex;flex-direction:column;gap:8px}
.loginact .btn{width:100%;padding:9px 14px}
.btn:disabled{opacity:.6;cursor:default}
.guestsep{display:flex;align-items:center;gap:10px;margin:18px 0 12px;font-size:12px;color:var(--muted)}
.guestsep::before,.guestsep::after{content:"";flex:1;border-top:1px solid var(--line)}
.btn.guest{width:100%;padding:9px 14px;background:none;color:var(--accent);border:1px solid var(--line)}
.btn.guest:hover{background:var(--accent-soft)}
.guesthint{margin:8px 0 0;font-size:11px;color:var(--muted);text-align:center}
.sync.guest{color:var(--text)}
/* Save status */
.sync{position:fixed;right:14px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:5;font-size:11px;color:var(--muted);
  background:var(--bg);padding:2px 8px;border-radius:6px;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.sync:empty{display:none}
.sync.error{color:var(--danger)}
/* Sign-in step 2, account dialogs */
.loginbox:not(.two) .s2,.loginbox:not(.reg) .s3,.loginbox.two .s1,.loginbox.reg .s1{display:none!important}
.loginbox:not(.invite) .inv-only{display:none}
.fieldhint{margin:-10px 2px 14px;font-size:11px;line-height:1.4;color:var(--muted)}
.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0}
.check{display:flex!important;gap:8px;align-items:flex-start;font-size:13px!important;color:var(--text)!important;line-height:1.4;margin:2px 2px 14px!important;cursor:pointer}
.loginbox .check input{width:auto;padding:0;margin:2px 0 0;flex:0 0 auto;accent-color:var(--accent)}
.check a,.dlglink{color:var(--accent)}
#dlg{z-index:40}
.terms{max-height:55vh;overflow:auto;padding:4px 16px;background:var(--card);border:1px solid var(--line);border-radius:8px;line-height:1.5;font-size:13px}
.terms h2{font-size:17px;margin:12px 0 6px}
.terms h3{font-size:14px;margin:16px 0 4px}
.terms p{margin:0 0 8px}
.terms-draft{color:var(--danger)}
body.termspage{padding:24px 16px}
.termspage .terms{max-width:760px;max-height:none;margin:0 auto;padding:20px 28px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.stephint{font-size:13px;line-height:1.45;margin:0 0 14px}
#lCode{letter-spacing:.15em;font-variant-numeric:tabular-nums}
.guest-mode #logout{display:none}   /* guests leave with "Exit guest mode" under the menu */
.dlgerr{min-height:18px;margin:8px 2px 0;font-size:12px;color:var(--danger)}
.dlgerr.ok{color:var(--muted)}
.btn.danger{background:var(--danger)}
.dlgnote{font-size:13px;line-height:1.5;margin:0 0 12px}
.dlgnote.muted{font-size:12px}
.sheet .actions{border-top:0;padding:12px 0 0}
.qrwrap{display:flex;gap:16px;align-items:center;margin:0 0 12px;flex-wrap:wrap}
.qr{width:168px;height:168px;flex-shrink:0;border-radius:8px;border:1px solid var(--line)}
.secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all;user-select:all}
.codes{display:grid;grid-template-columns:repeat(2,max-content);gap:6px 28px;margin:0 0 12px;padding:12px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;user-select:all}
.evlist{max-height:50vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:8px}
.evlist table td{font-size:13px}
.evlist .bad{color:var(--danger)}
/* Plain background (Settings → Appearance): original grey, no photo is downloaded */
html.no-photo main h2{color:var(--text);text-shadow:none}
html.no-photo aside,html.no-photo .group,html.no-photo #setup .cols>div,html.no-photo .copyright,html.no-photo .sync{box-shadow:none}
html.no-photo .loginbox{box-shadow:0 10px 30px rgba(0,0,0,.12)}
/* On/off switch */
input.switch{appearance:none;-webkit-appearance:none;width:42px;height:24px;flex:0 0 42px;padding:0;margin:0;border-radius:12px;
  background:var(--line);border:0;position:relative;cursor:pointer;transition:background .2s}
input.switch::before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
input.switch:checked{background:var(--accent)}
input.switch:checked::before{transform:translateX(18px)}
input.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
main .about>.ghead{padding:0 0 6px}
/* === Teams === */
/* Left column: menu card + workspace card below it */
.side{display:flex;flex-direction:column;gap:12px;flex-shrink:0;width:220px;align-self:flex-start;margin:28px 0 0 20px;max-height:calc(100% - 56px)}
.side aside{margin:0;align-self:stretch;width:auto;max-height:none;min-height:0}
.wsbox{background:var(--side);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 22px rgba(0,0,0,.28);
  padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.wsitems{display:flex;flex-direction:column;gap:2px;min-width:0}
.wsitem{display:block;width:100%;border:0;background:none;color:var(--text);font:inherit;padding:7px 10px;border-radius:7px;
  cursor:pointer;text-align:left;overflow-wrap:anywhere}
.wsitem:hover{background:rgba(127,127,127,.12)}
.wsitem.active{background:var(--accent);color:#fff}
html.no-photo .wsbox{box-shadow:none}
@media (max-width:760px){
  .side{width:auto;margin:10px 10px 0;align-self:stretch;max-height:none;gap:8px}
  .side aside{margin:0}
  .wsbox{flex-direction:row;align-items:center;justify-content:space-between}
  .wsitems{flex-direction:row;flex-wrap:wrap;flex:1}
  .wsitem{width:auto}
}
.team-user-only{display:none}
.ws-user .team-user-only{display:block}
.ws-user .admin-only{display:none!important}
.ws-team .personal-only{display:none!important}
.nav .badge{margin-left:auto;background:var(--danger);color:#fff;border-radius:9px;font-size:11px;line-height:18px;min-width:18px;padding:0 5px;text-align:center}
#teamList .row.pick{cursor:pointer}
#teamList .row.sel{background:var(--accent-soft)}
#teamList .row .rowbtns{display:flex;gap:6px}
.role{font-size:12px;color:var(--muted)}
#memBox select{width:auto}
#memBox .addrow{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line);border-bottom:0}
#memBox .addrow select{flex:0 0 auto}
/* Timesheets: "User ID" header never wraps; the ID itself wraps to at most two lines */
#sheetTable th.user{white-space:nowrap}
#sheetTable td.user{white-space:normal;min-width:7em;max-width:12em}
/* Settings → Data (sample data / erase) is for guest mode only */
.guest-only{display:none}
.guest-mode .guest-only{display:block}
/* Guest mode: "Exit guest mode" under the menu */
.guestbox{display:none;background:var(--side);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 22px rgba(0,0,0,.28);
  padding:10px 12px;flex-direction:column;gap:8px}
.guest-mode .guestbox{display:flex}
html.no-photo .guestbox{box-shadow:none}
@media (max-width:760px){.guestbox{flex-direction:row;align-items:center;justify-content:space-between}}
#guestExit{color:var(--danger)}
.wshead{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 -4px 10px}
@media (max-width:760px){.wsbox{flex-direction:column;align-items:stretch}}
/* Clients: search and a scrolling list (max 8 names visible) */
.searchrow{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line)}
.searchrow svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
#lClients{position:relative}
#lClients.scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(127,127,127,.5) transparent}
#lClients.scroll::-webkit-scrollbar{width:10px}
#lClients.scroll::-webkit-scrollbar-thumb{background:rgba(127,127,127,.45);border-radius:5px;border:2px solid var(--card)}
#lClients.scroll::-webkit-scrollbar-track{background:transparent}
.listnav{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 14px;border-top:1px solid var(--line)}
.listnav span{margin-right:auto;font-size:12px;color:var(--muted)}
.listnav button{display:grid;place-items:center;width:30px;height:26px;border:0;border-radius:6px;background:var(--field);color:var(--text);cursor:pointer}
.listnav button:hover{background:rgba(127,127,127,.2)}
.listnav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Messages and questions (own design instead of the browser's pop-ups) */
#msgBox{z-index:40}
#msgBox .sheet{max-width:440px}
#msgText{white-space:pre-line}
.about .author{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.about .author .btn{text-decoration:none;font-size:13px;padding:5px 12px}