:root{
  --bg:#EFF5F1; --ink:#1C3B36; --ink-soft:#4A6560;
  --primary:#2F6F5E; --primary-ink:#EFF8F4;
  --secondary:#7A5C3E; --secondary-ink:#FBF5EC;
  --alert:#A6432F; --alert-bg:#F7E9E5;
  --bonus:#A9791E; --bonus-bg:#FBF1DD;
  --card:#FFFFFF; --line:#D8E3DD;
  --radius:18px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#122420; --ink:#EAF3EF; --ink-soft:#9FB8B1;
    --primary:#4C9A83; --primary-ink:#0B1E19;
    --secondary:#C79F73; --secondary-ink:#2A1E10;
    --alert:#E28671; --alert-bg:#3A211C;
    --bonus:#E4BE5E; --bonus-bg:#3A2E12;
    --card:#183430; --line:#2A4A43;
  }
}
:root[data-theme="dark"]{
  --bg:#122420; --ink:#EAF3EF; --ink-soft:#9FB8B1;
  --primary:#4C9A83; --primary-ink:#0B1E19;
  --secondary:#C79F73; --secondary-ink:#2A1E10;
  --alert:#E28671; --alert-bg:#3A211C;
  --bonus:#E4BE5E; --bonus-bg:#3A2E12;
  --card:#183430; --line:#2A4A43;
}
*{box-sizing:border-box;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Karla',sans-serif;
  min-height:100%;
  display:flex; justify-content:center;
}
.wrap{
  width:100%; max-width:460px;
  padding:28px 20px calc(28px + env(safe-area-inset-bottom,0px));
}
header{ text-align:center; margin-bottom:6px; }
.brand{
  font-family:'Fraunces',serif; font-weight:600; font-size:22px;
  letter-spacing:0.2px;
}
.subtitle{ color:var(--ink-soft); font-size:14px; margin-top:2px; }
.clock{
  font-family:'Fraunces',serif; font-weight:500; font-optical-sizing:auto;
  font-size:56px; text-align:center; margin:18px 0 2px; line-height:1;
  font-variant-numeric: tabular-nums;
}
.date{ text-align:center; color:var(--ink-soft); font-size:15px; margin-bottom:22px; text-transform:capitalize; }

.notice{
  background:var(--alert-bg); color:var(--alert); border-radius:var(--radius);
  padding:14px 16px; font-size:14px; margin-bottom:18px; line-height:1.45;
}

.toggle-row{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 14px; margin-bottom:18px; font-size:14px; color:var(--ink-soft);
}
.toggle-row input{ width:19px; height:19px; accent-color:var(--secondary); flex-shrink:0; }
.toggle-row label{ flex:1; }
.sub-toggle{ margin-left:29px; margin-top:-10px; }

.punch-btn{
  width:100%; border:none; border-radius:24px; padding:26px 20px;
  font-family:'Fraunces',serif; font-weight:600; font-size:24px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; transition:transform .12s ease, opacity .12s ease;
  margin-bottom:14px;
}
.punch-btn:active{ transform:scale(0.97); }
.punch-btn .sub{ font-family:'Karla',sans-serif; font-weight:500; font-size:13px; opacity:0.85; }
.punch-btn.entrada{ background:var(--primary); color:var(--primary-ink); }
.punch-btn.saida{ background:var(--secondary); color:var(--secondary-ink); }
.punch-btn:disabled{ opacity:0.35; cursor:not-allowed; }
.punch-btn.ghost{
  background:transparent; border:1.5px solid var(--line); color:var(--ink-soft);
  font-family:'Karla',sans-serif; font-weight:600; font-size:15px; padding:14px;
}

.result{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin:6px 0 18px;
}
.result h3{
  font-family:'Fraunces',serif; font-weight:600; font-size:18px; margin:0 0 12px;
}
.row{ display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.row:last-child{ border-bottom:none; }
.row .label{ color:var(--ink-soft); }
.row .value{ font-weight:600; font-variant-numeric:tabular-nums; }
.tag{ font-size:12px; padding:2px 8px; border-radius:99px; font-weight:600; }
.tag.he{ background:var(--bonus-bg); color:var(--bonus); }
.tag.atraso{ background:var(--alert-bg); color:var(--alert); }
.tag.ok{ background:var(--primary); color:var(--primary-ink); }

.whats-btn{
  width:100%; border:none; border-radius:16px; padding:15px;
  background:#1C3B36; color:#EFF8F4; font-family:'Karla',sans-serif;
  font-weight:700; font-size:15px; cursor:pointer; margin-top:4px;
}
:root[data-theme="dark"] .whats-btn, .wrap .whats-btn { background:var(--ink); color:var(--bg); }

details{ margin-top:22px; }
summary{
  cursor:pointer; font-size:14px; font-weight:600; color:var(--ink-soft);
  padding:10px 0; list-style:none;
}
summary::-webkit-details-marker{ display:none; }
summary:before{ content:'▸ '; }
details[open] summary:before{ content:'▾ '; }

.month-summary{ display:flex; gap:10px; margin-bottom:14px; }
.month-card{ flex:1; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center; }
.month-card .n{ font-family:'Fraunces',serif; font-weight:600; font-size:19px; }
.month-card .l{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }

.log-item{ font-size:13px; padding:9px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:8px; }
.log-item:last-child{ border-bottom:none; }
.log-item .d{ color:var(--ink-soft); white-space:nowrap; }
.log-item .t{ text-align:right; }

.config{ margin-top:22px; }
.config input[type=text]{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line);
  font-family:'Karla',sans-serif; font-size:14px; background:var(--card); color:var(--ink);
  margin-bottom:8px;
}
.config .save{
  width:100%; padding:12px; border-radius:12px; border:none; background:var(--primary);
  color:var(--primary-ink); font-weight:700; font-size:14px; cursor:pointer;
}
.saved-msg{ font-size:12.5px; color:var(--primary); margin-top:6px; display:none; }

.empty{ color:var(--ink-soft); font-size:13.5px; text-align:center; padding:10px 0; }