:root{
  --bg:#121316; --panel:#1b1d21; --border:#2c2f36; --text:#f2f3f5;
  --muted:#9aa0aa; --accent:#4caf7d; --danger:#e05656;
  --pad:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  max-width:560px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column;
}
.app-header{
  padding:14px var(--pad); border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; background:var(--bg); z-index:5;
}
.app-header h1{font-size:1.25rem}
.header-net{font-size:.9rem; color:var(--muted)}
.header-net strong{color:var(--accent); font-size:1.05rem}
.tabs{display:flex; border-bottom:1px solid var(--border); background:var(--panel)}
.tab{
  flex:1; padding:12px 0; background:none; border:none; color:var(--muted);
  font-size:.95rem; cursor:pointer; border-bottom:2px solid transparent;
}
.tab.active{color:var(--text); border-bottom-color:var(--accent); font-weight:600}
main{flex:1; padding:var(--pad)}
.panel{display:none}
.panel.active{display:block}
h2{font-size:1.05rem; margin:8px 0 14px}
form label{display:block; margin-bottom:12px; font-size:.85rem; color:var(--muted)}
form input{
  display:block; width:100%; margin-top:4px; padding:10px;
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:1rem;
}
.row{display:flex; gap:10px}
.row label{flex:1}
.hint{font-weight:normal; font-size:.75rem; opacity:.8}
button{
  font-size:1rem; border:none; border-radius:8px; cursor:pointer; padding:12px;
}
.primary{background:var(--accent); color:#0c1410; font-weight:700; width:100%; margin-top:6px}
.secondary{background:var(--panel); color:var(--text); border:1px solid var(--border); width:100%; margin-top:8px}
.danger{background:none; color:var(--danger); border:1px solid var(--danger); width:100%; margin-top:8px}
.hidden{display:none}
.preview{
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  padding:12px; margin:4px 0 12px; font-size:.9rem; line-height:1.6;
}
.preview .net{font-size:1.25rem; font-weight:700; color:var(--accent)}
.shift-card{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:12px 14px; margin-bottom:10px;
}
.shift-card .top{display:flex; justify-content:space-between; align-items:baseline}
.shift-card .date{font-weight:600}
.shift-card .net{color:var(--accent); font-weight:700; font-size:1.1rem}
.shift-card .mid{color:var(--muted); font-size:.85rem; margin:6px 0}
.shift-card .note{font-size:.85rem; color:var(--text); opacity:.85; margin-bottom:6px}
.shift-card .actions{display:flex; gap:8px; margin-top:6px}
.shift-card .actions button{width:auto; padding:8px 14px; font-size:.85rem}
.shift-card .edit-btn{background:var(--border); color:var(--text)}
.shift-card .del-btn{background:none; color:var(--danger); border:1px solid var(--danger)}
.empty{color:var(--muted); text-align:center; padding:30px 0}
.totals-switcher{display:flex; gap:8px; margin-bottom:14px}
.seg{flex:1; background:var(--panel); color:var(--muted); border:1px solid var(--border); padding:10px 0; font-size:.9rem}
.seg.active{background:var(--accent); color:#0c1410; font-weight:700}
.tot-grid{
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px;
}
.tot-grid .big-net{font-size:1.6rem; font-weight:800; color:var(--accent); margin:2px 0 12px}
.tot-row{display:flex; justify-content:space-between; padding:6px 0; border-top:1px solid var(--border); font-size:.92rem}
.tot-row span:last-child{font-variant-numeric:tabular-nums}
.tot-row.tax span:last-child{color:var(--danger)}
.tot-label{font-size:.85rem; color:var(--muted); margin-bottom:2px}
.fica-line{margin:4px 0 14px; font-size:.9rem; color:var(--muted)}
.disclaimer{
  margin:16px 0; padding:12px; border:1px dashed var(--border); border-radius:8px;
  font-size:.82rem; color:var(--muted); line-height:1.5;
}
footer{
  text-align:center; color:var(--muted); font-size:.78rem;
  padding:14px; border-top:1px solid var(--border);
}