:root{
  --bg:#f4f7fc;--card:#ffffff;--card2:#f8fafd;--line:#e3e9f2;--line2:#eef2f8;
  --txt:#0f172a;--dim:#64748b;--muted:#64748b;
  --blue:#2a78d6;--blue-d:#256abf;--blue-l:#eaf2fd;--blue-b:#cfe1f9;
  --ok:#0f9d58;--warn:#b8860b;--crit:#d03b3b;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.05);
}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--txt);
font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}

.nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:12px 24px;
background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.14em;font-size:14px}
/* the logo replaces the old gradient square; no box-shadow, it has its own shape */
.mark{width:34px;height:34px;border-radius:8px;display:block;object-fit:contain}
.menu{display:flex;gap:6px;flex:1}
.menu a{padding:7px 13px;border-radius:8px;color:var(--dim);font-size:13.5px;font-weight:600}
.menu a:hover{background:var(--blue-l);color:var(--blue);text-decoration:none}
.who{display:flex;align-items:center;gap:13px;font-size:13px;color:var(--dim)}
.who .nick{color:var(--txt);font-weight:600}
.role{padding:3px 9px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;background:var(--card2);border:1px solid var(--line);color:var(--dim)}
.role.admin{background:var(--blue-l);border-color:var(--blue-b);color:var(--blue-d)}
.role.editor{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}

main{max-width:1240px;margin:0 auto;padding:26px 24px 70px}
h1{font-size:22px;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
margin:34px 0 12px;font-weight:700}
.sub{color:var(--dim);font-size:13.5px;margin:0 0 22px}
.filters{display:flex;gap:8px;margin-bottom:20px}
.filters a{padding:6px 14px;border-radius:999px;background:var(--card);
border:1px solid var(--line);color:var(--dim);font-size:12.5px;font-weight:600}
.filters a:hover{color:var(--blue);text-decoration:none}
.filters a.on{background:var(--blue);border-color:var(--blue);color:#fff}

.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}
.stat{background:var(--card);border:1px solid var(--line);border-radius:13px;
padding:16px 18px;box-shadow:var(--shadow)}
.stat .k{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600}
.stat .v{font-size:27px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
.stat .v.blue{color:var(--blue-d)}
.stat .s{font-size:12px;color:var(--dim);margin-top:3px}

.chartbox{background:var(--card);border:1px solid var(--line);border-radius:13px;
padding:16px 18px 10px;box-shadow:var(--shadow)}
.charthead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.charthead b{font-size:13.5px}.charthead span{font-size:11.5px;color:var(--dim)}
.chartwrap{position:relative}.chartwrap svg{width:100%;height:auto;display:block}
.hit{cursor:crosshair}.hit:hover{fill:rgba(42,120,214,.06)}
.tip{position:absolute;top:0;width:140px;text-align:center;padding:6px 9px;border-radius:8px;
background:var(--txt);color:#fff;font-size:12px;pointer-events:none;box-shadow:var(--shadow)}

.scroll{overflow-x:auto;border-radius:13px;border:1px solid var(--line);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:13.5px}
th{text-align:left;padding:10px 13px;background:var(--card2);color:var(--dim);
font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 13px;border-top:1px solid var(--line2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--card2)}
.nick-cell{font-weight:600;white-space:nowrap}

.tag{padding:2px 8px;border-radius:5px;font-size:11px;font-weight:700;
background:var(--card2);border:1px solid var(--line);color:var(--dim)}
.gap-pos{color:var(--ok);font-weight:600}
.gap-neg{color:var(--crit);font-weight:600}

/* the four partner numbers: one fixed column each, so they line up exactly */
th.cfg,td.cfg{width:88px;text-align:right;padding-left:6px;padding-right:6px}
td.cfg .mini{width:100%}
.pct{display:flex;align-items:center;gap:3px;justify-content:flex-end}
.pct .mini{width:100%}
.pct i{font-style:normal;color:var(--dim);font-size:12px;font-weight:600}
/* company margin - never leaves the Team page */
th.co,td.co{background:#fffbeb;border-left:1px solid #fde68a;border-right:1px solid #fde68a}
input.mini.co{background:#fffbeb}

.ratebox{display:flex;gap:22px;align-items:center;background:var(--card);
border:1px solid var(--line);border-radius:13px;padding:20px 24px;box-shadow:var(--shadow)}
.ratebig{font-size:56px;font-weight:800;color:var(--blue-d);line-height:1;letter-spacing:-.03em}
.ratebig span{font-size:26px;margin-left:2px}
.ratetxt b{font-size:14px}
.ratecalc{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap;
font-size:13.5px;font-variant-numeric:tabular-nums}
.ratecalc span{padding:5px 10px;border-radius:7px;background:var(--card2);
border:1px solid var(--line)}
.ratecalc i{font-style:normal;color:var(--dim)}
.ratecalc b{padding:5px 12px;border-radius:7px;background:var(--blue-l);
border:1px solid var(--blue-b);color:var(--blue-d)}
.ratetxt .hint{margin-top:8px}

form.box{background:var(--card);border:1px solid var(--line);border-radius:13px;
padding:16px 18px;display:grid;gap:11px;box-shadow:var(--shadow);
grid-template-columns:repeat(auto-fit,minmax(128px,1fr));align-items:end}
label{display:block;font-size:11px;color:var(--dim);letter-spacing:.04em;
margin-bottom:5px;font-weight:600;text-transform:uppercase}
input,select{width:100%;padding:9px 11px;border-radius:8px;background:#fff;
border:1px solid var(--line);color:var(--txt);font:inherit;outline:none}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
input.mini{padding:5px 7px;font-size:12.5px;text-align:right;
font-variant-numeric:tabular-nums;border-radius:6px}
button{padding:9px 17px;border:none;border-radius:8px;font:inherit;font-weight:700;
font-size:13px;background:var(--blue);color:#fff;cursor:pointer}
button:hover{background:var(--blue-d)}
button.small{padding:5px 11px;font-size:12px;background:var(--blue-l);
color:var(--blue-d);border:1px solid var(--blue-b)}
button.small:hover{background:var(--blue-b)}

.login{max-width:380px;margin:9vh auto;background:var(--card);border:1px solid var(--line);
border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.login h1{margin-bottom:18px}.login label{margin-top:13px}
.login button{width:100%;margin-top:20px;padding:11px}
.msg{padding:11px 15px;border-radius:10px;margin-bottom:18px;font-size:13.5px}
.msg.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.msg.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}
.msg:not(.ok):not(.err){background:var(--card2);border:1px solid var(--line);color:var(--dim)}
.msg a{color:inherit;font-weight:600}
.copy{background:var(--blue-l);border:1px dashed var(--blue);border-radius:9px;
padding:12px 14px;font-family:Consolas,monospace;font-size:12.5px;word-break:break-all;
margin-top:10px;color:var(--blue-d)}
.empty{padding:26px;text-align:center;color:var(--dim);background:var(--card);
border:1px solid var(--line);border-radius:13px;font-size:13.5px}
.hint{font-size:12px;color:var(--dim);margin-top:9px}
.inline{display:flex;gap:5px;align-items:center}
/* one row of the editable day table: the save form and the delete button side by side */
td.dayedit{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
button.danger{background:#fff;color:var(--crit);border:1px solid #fecaca}
button.danger:hover{background:#fef2f2;border-color:var(--crit)}
.rowform{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
/* settings: label, control, default - one row each */
table.settbl td{vertical-align:middle}
td.setlbl{width:230px;font-weight:600}
td.setin input:not(.swatch){width:100%;max-width:420px;padding:7px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);color:var(--txt);font:inherit}
td.setdef{color:var(--dim);font-size:12px;white-space:nowrap}
input.swatch{width:44px;height:34px;padding:2px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);cursor:pointer}
label.sw{display:inline-flex;gap:7px;align-items:center;cursor:pointer;user-select:none}
label.sw span{font-size:13px;color:var(--dim)}
.setbar{display:flex;gap:14px;align-items:center;margin:22px 0 30px;padding-top:18px;
  border-top:1px solid var(--line)}
.setbar .hint{margin:0}
/* two-factor setup */
.secret{font:20px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.14em;font-weight:700;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 18px;display:inline-block;user-select:all;color:var(--blue-d)}
ul.codes{list-style:none;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));max-width:720px}
ul.codes code{display:block;padding:10px 12px;border-radius:9px;background:var(--card);
  border:1px solid var(--line);font:15px/1.4 ui-monospace,Consolas,monospace;
  letter-spacing:.06em;user-select:all;text-align:center}
a.btn{display:inline-block;padding:10px 18px;border-radius:9px;background:var(--blue);
  color:#fff;text-decoration:none;font-weight:600}
/* paging under the day table */
.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:14px}
.pager a,.pager span{padding:6px 11px;border-radius:8px;font-size:13px;
  border:1px solid var(--line);background:var(--card);color:var(--txt);
  text-decoration:none;line-height:1}
.pager a:hover{border-color:var(--blue-b);background:var(--blue-l)}
.pager .on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.pager .off{color:var(--dim);background:var(--card2);cursor:default}
.pager .gap{border:0;background:none;padding:6px 2px;color:var(--dim)}
.pager .count{border:0;background:none;color:var(--dim);margin-left:auto}
/* staff typing into somebody else's page */
.asbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:20px;
  padding:12px 16px;border-radius:11px;background:#fffbeb;border:1px solid #fde68a}
.asbar b{font-size:15px}
.asbar .hint{margin:0}
.asbar a{margin-left:auto;color:var(--blue-d);font-weight:600;text-decoration:none;
  white-space:nowrap}
form.raise{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:14px;
  padding:12px 15px;border-radius:11px;background:var(--card2);
  border:1px solid var(--line)}
form.raise label{font-size:13px;font-weight:600;color:var(--dim)}
form.raise .mini{width:82px}
td.nick-cell a{color:var(--blue-d);text-decoration:none;border-bottom:1px solid var(--blue-b)}
td.nick-cell a:hover{border-bottom-color:var(--blue-d);background:var(--blue-l)}
textarea.csv{width:100%;min-height:150px;font:12px/1.5 ui-monospace,Consolas,monospace;
  padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);
  color:var(--ink);resize:vertical}