:root{
  --paper:#F5F6F2;
  --card:#FFFFFF;
  --ink:#22291F;
  --ink-soft:#5C6656;
  --line:#E2E5DC;
  --olive:#556036;
  --olive-deep:#454F2B;
  --olive-tint:#EDEFE3;
  --open-blue:#2A6C9B;
  --open-tint:#E8F1F7;
  --paid-green:#3E7A46;
  --paid-tint:#E9F3EA;
  --late:#A94E2B;
  --late-tint:#F8ECE5;
  --planned:#6A4C9B;
  --planned-tint:#EFEAF7;
  --focus:#2A6C9B;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  min-height:100vh;
  padding-bottom:80px;
}
.mono{font-variant-numeric:tabular-nums}
a,button,input,select{font-family:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px}

/* ---------- topbar ---------- */
.topbar{
  background:var(--olive-deep);
  color:#F2F4EA;
  padding:20px 24px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
}
.topbar .brand{
  grid-column:2;justify-self:center;text-align:center;
  font-size:2.1rem;font-weight:800;letter-spacing:.02em;
}
.topbar .account-menu{grid-column:3;justify-self:end}
.account-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--olive-tint);color:var(--olive-deep);border:0;border-radius:8px;
  font-size:.85rem;font-weight:700;padding:9px 16px;
  transition:background .12s;
}
.account-btn:hover{background:#fff}

/* ---------- rustige werkbalk boven het facturenoverzicht ---------- */
.facturen-toolbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;margin:18px 0 20px;
}
.toolbar-group{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--ink-soft)}
.seg-light{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg-light button{
  background:transparent;border:0;color:var(--ink-soft);
  font-size:.75rem;font-weight:600;padding:5px 10px;
}
.seg-light button.on{background:var(--olive);color:#fff}
.toggle-light{
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:1px solid var(--line);border-radius:6px;
  color:var(--ink-soft);font-size:.75rem;font-weight:600;padding:5px 10px;
}
.toggle-light .dot{width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .15s}
.toggle-light.on .dot{background:var(--paid-green)}

.search-row{margin:0 0 14px}
.search-row input{
  width:100%;border:1px solid var(--line);border-radius:8px;background:#FBFCF9;
  padding:10px 14px;font-size:.9rem;color:var(--ink);
}
.search-row input:focus{border-color:var(--open-blue);outline:none;box-shadow:0 0 0 2px rgba(42,108,155,.15)}

/* ---------- pdf-download, bewust onderaan als rustig afsluitend actie ---------- */
.pdf-export-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:32px 0 10px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--ink-soft);
}
.pdf-export-row input[type=month]{
  border:1px solid var(--line);border-radius:6px;background:#FBFCF9;color:var(--ink);
  padding:6px 10px;font-size:.82rem;
}

.account-menu{position:relative}
.account-dropdown{
  position:absolute;top:100%;right:0;margin-top:8px;
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);min-width:190px;overflow:hidden;z-index:60;
}
.account-dropdown button{
  display:block;width:100%;text-align:left;padding:11px 14px;
  background:none;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-size:.85rem;font-family:inherit;cursor:pointer;
}
.account-dropdown button:last-child{border-bottom:0}
.account-dropdown button:hover{background:var(--olive-tint)}

.wrap{max-width:960px;margin:0 auto;padding:0 20px}

/* ---------- tabbladen ---------- */
.tabbar{display:flex;gap:8px;margin:22px 0 4px}
.tabbtn{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  color:var(--ink-soft);font-weight:700;font-size:.82rem;padding:9px 16px;
}
.tabbtn:hover:not(.on){border-color:var(--ink-soft);color:var(--ink)}
.tabbtn.on{background:var(--olive);color:#fff;border-color:var(--olive)}

/* ---------- stats ---------- */
.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  margin:22px 0 8px;
}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;
}
.stat .lbl{
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:6px;
}
.stat .val{font-size:1.35rem;font-weight:600}
.stat .cnt{font-size:.72rem;color:var(--ink-soft);margin-top:3px}
.stat.s-late .val{color:var(--late)}
.stat.s-ontime .val{color:var(--paid-green)}

/* ---------- entry form ---------- */
.entry{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:16px;margin:14px 0 26px;
}
.entry h2{
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--olive);margin-bottom:12px;
}
.entry-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.entry-header h2{margin-bottom:0}
.efactuur-banner{
  background:#F3F0E4;border:1px solid var(--line);border-radius:7px;
  padding:9px 12px;font-size:.8rem;color:var(--ink);margin-bottom:12px;
}
.efactuur-banner b{font-weight:700}
.entry .row{
  display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;
}
.entry .row .field{flex:1 1 150px;min-width:130px}
.field select{
  border:1px solid var(--line);border-radius:6px;background:#FBFCF9;
  padding:8px 10px;font-size:.88rem;color:var(--ink);width:100%;cursor:pointer;
}
.field select:focus{border-color:var(--open-blue);outline:none;box-shadow:0 0 0 2px rgba(42,108,155,.15)}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:.7rem;font-weight:600;color:var(--ink-soft)}
.field input{
  border:1px solid var(--line);border-radius:6px;background:#FBFCF9;
  padding:8px 10px;font-size:.88rem;color:var(--ink);width:100%;
}
.field input:focus{border-color:var(--open-blue);outline:none;box-shadow:0 0 0 2px rgba(42,108,155,.15)}
.btn-add{
  background:var(--olive);color:#fff;border:0;border-radius:7px;
  font-weight:700;font-size:.85rem;padding:10px 18px;
  transition:background .12s;white-space:nowrap;
}
.btn-add:hover{background:var(--olive-deep)}
.btn-cancel{
  background:transparent;color:var(--ink-soft);border:1px solid var(--line);border-radius:7px;
  font-weight:600;font-size:.85rem;padding:10px 16px;white-space:nowrap;
}
.btn-cancel:hover{border-color:var(--ink-soft);color:var(--ink)}
.entry.editing{border-color:var(--open-blue);box-shadow:0 0 0 2px rgba(42,108,155,.12)}
.entry-gevaar{border-color:var(--late-tint)}
.entry-gevaar h2{color:var(--late)}
.btn-gevaar{
  background:transparent;color:var(--late);border:1px solid var(--late);border-radius:7px;
  font-weight:700;font-size:.85rem;padding:10px 18px;white-space:nowrap;
}
.btn-gevaar:hover{background:var(--late);color:#fff}
.entry .hint{font-size:.72rem;color:var(--ink-soft);margin-top:9px}
.entry .hint b{color:var(--ink);font-weight:600}

/* ---------- pop-up (bijv. bedrag: alleen deze maand of alle volgende?) ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(34,41,31,.5);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal-box{
  background:var(--card);border-radius:12px;padding:22px 24px;max-width:380px;width:100%;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.modal-box h3{font-size:1rem;font-weight:800;color:var(--ink);margin-bottom:8px}
.modal-box p{font-size:.82rem;color:var(--ink-soft);margin-bottom:16px}
.modal-actions{display:flex;flex-direction:column;gap:8px}
.modal-actions button{width:100%;text-align:center}
.modal-box.modal-tekst{max-width:640px;max-height:82vh;overflow-y:auto}
.modal-tekst h4{
  font-size:.78rem;font-weight:800;letter-spacing:.04em;color:var(--olive);
  text-transform:uppercase;margin:18px 0 6px;
}
.modal-tekst p{line-height:1.6;margin-bottom:4px}
.modal-sluit{margin-top:20px}

/* ---------- maandnavigatie (vaste lasten) ---------- */
.monthbar{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0 10px}
.monthbar .monthlabel{font-weight:800;font-size:1rem;color:var(--ink);min-width:170px;text-align:center;text-transform:capitalize}
.monthbar .icon-btn{font-size:.9rem;padding:6px 12px}
.vl-total{
  text-align:right;padding:12px 16px;font-size:.85rem;color:var(--ink-soft);
  background:var(--card);border:1px solid var(--line);border-top:0;
  border-radius:0 0 10px 10px;
}
.vl-total strong{color:var(--ink);font-weight:700;font-size:.95rem}

/* ---------- weeks ---------- */
.weekband{
  display:flex;align-items:baseline;gap:12px;
  background:var(--olive);color:#F2F4EA;
  border-radius:8px 8px 0 0;
  padding:9px 14px;margin-top:22px;
}
.weekband.past{background:#8A9070}
.weekband .wknum{font-weight:800;font-size:.95rem;letter-spacing:.02em}
.weekband .wkrange{font-size:.78rem;color:#DDE2C9;font-weight:500}
.weekband .spacer{flex:1}
.weekband .wktotal{font-size:.82rem;font-weight:600;color:#F2F4EA}
.weekband .wktotal small{font-weight:500;color:#D5DBBE;margin-right:6px;font-size:.7rem}

table{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;overflow:hidden}
table.standalone{border-top:1px solid var(--line);border-radius:10px 10px 0 0;margin-top:0}
thead th{
  font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);text-align:left;padding:8px 10px;
  border-bottom:1px solid var(--line);background:#FAFBF7;
}
tbody td{
  padding:9px 10px;font-size:.85rem;border-bottom:1px solid var(--line);
  vertical-align:middle;
}
tbody tr:last-child td{border-bottom:0}
tr.st-open{background:var(--open-tint)}
tr.st-paid{background:var(--paid-tint)}
tr.st-late{background:var(--late-tint)}
tr.st-def{background:#FAF2DF}
tr.st-planned{background:var(--planned-tint)}
tr.editing{outline:2px solid var(--open-blue);outline-offset:-2px}
select.status{
  border:1px solid var(--line);border-radius:6px;background:#fff;
  font-size:.78rem;font-weight:600;padding:4px 6px;color:var(--ink);
  cursor:pointer;
}
select.status.v-open{border-color:var(--open-blue);color:var(--open-blue)}
select.status.v-voldaan{border-color:var(--paid-green);color:var(--paid-green)}
select.status.v-uitgesteld{border-color:#B8892E;color:#8A6A2F}
select.status.v-ingepland{border-color:var(--planned);color:var(--planned)}
.status-toggle{display:inline-flex;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.stbtn{
  background:#fff;border:0;border-left:1px solid var(--line);
  font-size:.72rem;font-weight:600;padding:5px 8px;color:var(--ink-soft);cursor:pointer;
}
.stbtn:first-child{border-left:0}
.stbtn:hover{background:#F3F0E4}
.stbtn.open.active{background:var(--open-blue);color:#fff}
.stbtn.paid.active{background:var(--paid-green);color:#fff}
.stbtn.def.active{background:#B8892E;color:#fff}
select.label-select{
  border:1px solid var(--line);border-radius:6px;background:#fff;
  font-size:.78rem;font-weight:600;padding:4px 6px;color:var(--ink-soft);
  cursor:pointer;max-width:140px;
}
.letop{
  display:inline-block;margin-left:7px;font-size:.68rem;font-weight:800;
  color:var(--late);white-space:nowrap;
}
td.amt{text-align:right;font-weight:600;white-space:nowrap}
td.actions{white-space:nowrap;text-align:right}
.latepaid-note{font-size:.65rem;color:#8A6A2F;font-weight:600;display:block;margin-top:2px}
.subline{
  font-size:.72rem;color:var(--ink-soft);font-weight:500;display:block;margin-top:2px;
  max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.icon-btn{
  background:transparent;border:1px solid var(--line);border-radius:5px;
  color:var(--ink-soft);font-size:.75rem;padding:3px 7px;margin-left:4px;
  transition:all .12s;
}
.icon-btn:hover{border-color:var(--ink-soft);color:var(--ink)}
.icon-btn.del:hover{border-color:var(--late);color:var(--late)}

td.sel{width:34px;text-align:center}
td.sel input,th.sel input{width:15px;height:15px;cursor:pointer;accent-color:var(--olive)}
.exportbar{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:var(--olive-deep);color:#F2F4EA;border-radius:10px;
  padding:10px 16px;display:flex;align-items:center;gap:14px;
  box-shadow:0 6px 24px rgba(34,41,31,.25);z-index:50;
  font-size:.85rem;flex-wrap:wrap;justify-content:center;
}
.exportbar .sum{font-weight:600}
.exportbar .datefield{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:#DCE1CB}
.exportbar .datefield input[type=date]{
  border:1px solid #6B7748;border-radius:6px;background:#3C4527;color:#F2F4EA;
  padding:5px 8px;font-size:.8rem;
}
.exportbar .datefield input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1)}
.btn-sepa{
  background:#F2F4EA;color:var(--olive-deep);border:0;border-radius:7px;
  font-weight:700;font-size:.82rem;padding:8px 14px;
}
.btn-sepa:hover{background:#fff}
.btn-clear{
  background:transparent;border:1px solid #6B7748;color:#DCE1CB;
  border-radius:7px;font-size:.78rem;font-weight:600;padding:7px 12px;
}

.empty{
  text-align:center;padding:56px 20px;color:var(--ink-soft);
  background:var(--card);border:1px dashed var(--line);border-radius:10px;margin-top:26px;
}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:10px;margin:22px 0}
.faq-item{
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:2px 18px;
}
.faq-item summary{
  padding:15px 0;font-weight:700;font-size:.92rem;color:var(--ink);
  cursor:pointer;list-style:none;position:relative;padding-right:26px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:2px;top:13px;color:var(--olive);
  font-weight:800;font-size:1.2rem;line-height:1;
}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-answer{
  padding:0 0 18px;font-size:.85rem;color:var(--ink-soft);line-height:1.65;
  border-top:1px solid var(--line);
}
.faq-answer p{margin:14px 0 0}
.faq-answer b{color:var(--ink);font-weight:600}
.empty b{color:var(--ink)}
.savestate{
  position:fixed;bottom:14px;right:16px;font-size:.68rem;color:var(--ink-soft);
  background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 10px;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.savestate.show{opacity:1}

/* ---------- dashboard ---------- */
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.widget{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;position:relative;transition:opacity .15s}
.widget.dragging{opacity:.35}
.widget.drag-over{outline:2px dashed var(--olive);outline-offset:-4px}
.drag-handle{
  position:absolute;top:12px;right:14px;color:var(--ink-soft);font-size:1.05rem;
  line-height:1;cursor:grab;user-select:none;padding:2px 4px;border-radius:4px;
}
.drag-handle:hover{background:var(--olive-tint);color:var(--ink)}
.motto-widget .drag-handle{top:14px;right:16px}
.hide-widget-btn{
  position:absolute;top:12px;right:40px;
  background:transparent;border:0;color:var(--ink-soft);font-size:.8rem;
  line-height:1;cursor:pointer;padding:3px 4px;border-radius:4px;
}
.hide-widget-btn:hover{background:var(--late-tint);color:var(--late)}
.motto-widget .hide-widget-btn{top:14px;right:42px}
.hidden-widgets-bar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.hidden-widgets-bar button{
  background:var(--card);border:1px dashed var(--line);border-radius:8px;
  color:var(--ink-soft);font-size:.78rem;font-weight:600;padding:7px 12px;
}
.hidden-widgets-bar button:hover{border-color:var(--olive);color:var(--olive)}
.widget h3{
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--olive);margin-bottom:14px;
}
.widget .empty-mini{color:var(--ink-soft);font-size:.82rem;text-align:center;padding:20px 0}
.widget-monthnav{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:-6px 0 14px;font-size:.78rem;font-weight:700;color:var(--ink-soft);
  text-transform:capitalize;
}
.widget-monthnav .icon-btn{font-size:.72rem;padding:3px 8px}

.pie-wrap{position:relative;width:190px;height:190px;margin:0 auto 18px}
.pie-chart{width:190px;height:190px;border-radius:50%;background:var(--line)}
.pie-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:120px;height:120px;border-radius:50%;background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 8px;
}
.pie-total{font-size:.8rem;font-weight:700;color:var(--ink);text-align:center}
.pie-total-lbl{font-size:.6rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.legend{display:flex;flex-direction:column;gap:7px}
.legend-item{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink)}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.legend-amt{margin-left:auto;font-weight:600}

.widget textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;background:#FBFCF9;
  padding:12px;font-size:.95rem;font-style:italic;color:var(--ink);resize:vertical;
  font-family:inherit;min-height:90px;
}
.widget textarea:focus{border-color:var(--open-blue);outline:none;box-shadow:0 0 0 2px rgba(42,108,155,.15)}

/* motto: hoofdtekst bovenaan het dashboard, over de volle breedte */
.motto-widget{grid-column:1 / -1;padding:26px 30px}
.motto-widget textarea{
  width:100%;border:0;border-radius:8px;background:transparent;resize:none;overflow:hidden;
  font-size:2.1rem;font-weight:800;font-style:normal;line-height:1.3;font-family:inherit;
  color:var(--olive-deep);text-align:center;padding:6px;min-height:auto;cursor:text;
  transition:background .15s;
}
.motto-widget textarea:hover{background:var(--olive-tint)}
.motto-widget textarea:focus{box-shadow:none;background:var(--olive-tint)}
.motto-widget textarea::placeholder{color:#B7C0A4}
.motto-hint{
  text-align:center;font-size:.68rem;color:var(--ink-soft);margin-top:10px;
  letter-spacing:.02em;
}

.note-add{display:flex;gap:8px;margin-bottom:14px}
.note-add input{
  flex:1;border:1px solid var(--line);border-radius:6px;background:#FBFCF9;
  padding:8px 10px;font-size:.85rem;font-family:inherit;color:var(--ink);
}
.note-add input:focus{border-color:var(--open-blue);outline:none;box-shadow:0 0 0 2px rgba(42,108,155,.15)}
.note-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.note-item:last-child{border-bottom:0}
.note-check{margin-top:3px;width:15px;height:15px;cursor:pointer;accent-color:var(--olive);flex-shrink:0}
.note-body{flex:1;min-width:0}
.note-text{font-size:.85rem;color:var(--ink);word-break:break-word}
.note-date{font-size:.65rem;color:var(--ink-soft);margin-top:2px}
.note-item.done .note-text{text-decoration:line-through;color:var(--ink-soft)}

.upcoming-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.82rem}
.upcoming-item:last-child{border-bottom:0}
.upcoming-datum{color:var(--ink-soft);min-width:60px}
.upcoming-naam{flex:1;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upcoming-bron{display:block;font-size:.65rem;color:var(--ink-soft);font-weight:500}
.upcoming-bedrag{font-weight:700;color:var(--ink);white-space:nowrap}

/* ---------- inloggen / registreren ---------- */
.auth-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--paper);padding:20px;
}
.auth-box{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:34px 32px;max-width:380px;width:100%;box-shadow:0 10px 40px rgba(34,41,31,.08);
}
.auth-title{
  font-size:1.5rem;font-weight:800;color:var(--olive-deep);text-align:center;margin-bottom:4px;
}
.auth-sub{font-size:.85rem;color:var(--ink-soft);text-align:center;margin-bottom:24px}
.auth-box .field{margin-bottom:14px}
.auth-box .field label{font-size:.72rem;font-weight:600;color:var(--ink-soft);margin-bottom:4px;display:block}
.auth-box .field input{
  width:100%;border:1px solid var(--line);border-radius:7px;background:#FBFCF9;
  padding:10px 12px;font-size:.9rem;color:var(--ink);font-family:inherit;
}
.auth-box .field input:focus{border-color:var(--open-blue);outline:none;box-shadow:0 0 0 2px rgba(42,108,155,.15)}
.auth-submit{width:100%;padding:12px;margin-top:6px;font-size:.9rem}
.auth-toggle{text-align:center;font-size:.82rem;color:var(--ink-soft);margin-top:18px}
.auth-link{
  background:none;border:0;color:var(--open-blue);font-weight:700;font-size:.82rem;
  cursor:pointer;padding:0 0 0 4px;font-family:inherit;text-decoration:underline;
}
.auth-forgot{text-align:right;margin:-6px 0 14px}
.auth-akkoord{
  display:flex;align-items:flex-start;gap:8px;font-size:.78rem;color:var(--ink-soft);
  margin:0 0 14px;cursor:pointer;line-height:1.4;
}
.auth-akkoord input{margin-top:2px;width:15px;height:15px;flex-shrink:0;cursor:pointer;accent-color:var(--olive)}
.auth-link-inline{
  background:none;border:0;color:var(--ink-soft);font-size:.76rem;
  cursor:pointer;padding:0;font-family:inherit;text-decoration:underline;
}
.auth-error{
  background:var(--late-tint);color:var(--late);border-radius:7px;padding:10px 12px;
  font-size:.8rem;margin-bottom:14px;
}
.auth-info{
  background:var(--paid-tint);color:var(--paid-green);border-radius:7px;padding:10px 12px;
  font-size:.8rem;margin-bottom:14px;
}

@media (max-width:720px){
  .stats{grid-template-columns:1fr}
  .entry .row{grid-template-columns:1fr 1fr}
  .btn-add{grid-column:1/-1}
  #weeks thead th:nth-child(4),#weeks tbody td:nth-child(4){display:none}
  .topbar{padding:14px 16px;grid-template-columns:1fr auto}
  .topbar .brand{grid-column:1;justify-self:start;font-size:1.5rem}
  .topbar .account-menu{grid-column:2}
  .dashboard-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}