:root{
  /* ---- GREENIPATH brand color system -------------------------------- */
  --teal:#0F4051;          /* Primary   — Teal Blue   */
  --teal-d:#0B3241;        /* primary pressed / hover-darken */
  --sage-forest:#3D7A5C;   /* Secondary — hover / interactive feedback */
  --lime:#E1FCAD;          /* Accent    — Lime Tea (use sparingly) */
  --slate:#172E33;         /* Typography — Slate */
  --bg:#FAF7F4;            /* Cotton — primary background */
  --bg-alt:#FAF6EA;        /* Sandy  — secondary surfaces / hover rows */
  --sage:#EADDD0;          /* Sage   — warm badges / dividers */
  --surface:#fff;          /* White  — floating cards / modals */

  /* typography scale (Slate opacity) */
  --ink:#172E33;                  /* primary text  100% */
  --muted:rgba(23,46,51,.70);     /* secondary     70%  */
  --faint:rgba(23,46,51,.40);     /* tertiary      40%  */
  --line:rgba(23,46,51,.15);      /* borders/rules 15%  */

  /* semantic + back-compat aliases (older rules referenced --green) */
  --green:#0F4051; --green-d:rgba(15,64,81,.40);
  --hover:#3D7A5C;
  --warn:#8a5a00; --warn-bg:#F3E7CB;
  --danger:#b0483c; --danger-line:rgba(176,72,60,.35); --danger-bg:#FBF1EF;
  --ok:#3D7A5C;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 Arial,Helvetica,"Liberation Sans",sans-serif}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--sage-forest);text-decoration:underline}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.small{font-size:.85em}
.right{text-align:right}
.nowrap{white-space:nowrap}
.absblock .btn.small{padding:.1rem .45rem;line-height:1;font-size:.9em}
.halfday{display:inline-flex;align-items:center;gap:.35rem;margin-top:.45rem;font-size:.85em;font-weight:600;color:var(--muted);cursor:pointer}
.halfday input{margin:0}
.workinghours .wh-row{display:flex;align-items:flex-start;gap:1.4rem;flex-wrap:wrap}
.workinghours .wh-col{display:flex;flex-direction:column;gap:.35rem}
.workinghours .wh-days{margin-left:2rem}
.workinghours .wh-col input[type=number]{width:6rem}
/* no spinner arrows on the weekly-hours field — plain value entry */
input.nospin{-moz-appearance:textfield;appearance:textfield}
input.nospin::-webkit-outer-spin-button,
input.nospin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fielderr{color:var(--danger);font-size:.75em;font-weight:600}
.daychecks{display:flex;gap:.65rem;flex-wrap:wrap;padding-top:.15rem}
.daycheck{display:flex;align-items:center;gap:.25rem;font-size:.82em;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.daycheck input{margin:0}
/* narrow screens: stack "Weekly hours" above "Working days" instead of letting
   the flex row wrap — a wrapping flex row inside a grid cell mis-measures its
   height (Safari) and overlaps the next field. */
@media(max-width:800px){
  .workinghours .wh-row{flex-direction:column;gap:.9rem}
  .workinghours .wh-days{margin-left:0}
}

/* top bar — primary Teal Blue nav with a single Lime Tea accent line */
.topbar{display:flex;align-items:center;gap:1.5rem;background:var(--teal);
  border-bottom:2px solid var(--lime);padding:.7rem 1.3rem;position:sticky;top:0;z-index:10}
.brand{display:inline-flex;align-items:center;font-weight:700;color:#fff}
.brand-logo{height:22px;width:auto;display:block}
.toolname{color:rgba(255,255,255,.92);font-weight:600;font-size:.95rem;
  padding-left:.9rem;margin-left:-.3rem;border-left:1px solid rgba(255,255,255,.28)}
.topbar nav{display:flex;gap:1.1rem;margin-right:auto}
.topbar nav a{color:rgba(255,255,255,.72);font-weight:500}
.topbar nav a:hover{color:var(--lime);text-decoration:none}
.userbox{display:flex;align-items:center;gap:.8rem;font-size:.9em}
.userbox a{color:#fff}
.logout{color:rgba(255,255,255,.72)!important}

main{max-width:1080px;margin:0 auto;padding:1.6rem 1.3rem 4rem}
main.centered{display:flex;justify-content:center;padding-top:8vh}

.pagehead{display:flex;align-items:center;margin-bottom:1.2rem;gap:1rem}
.header-logo{height:26px;width:auto;flex-shrink:0}
.pagehead h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.headactions{display:flex;align-items:center;gap:.55rem;flex-shrink:0;margin-left:auto}
.headactions .btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding-top:0;padding-bottom:0}
.btn.nav-arrow{padding:0 .7rem;font-size:1.15rem;line-height:1;font-weight:700}
.btn.disabled{opacity:.35;pointer-events:none}
h1{font-size:1.5rem;margin:0;color:var(--teal)}

/* buttons + pills — one uniform, understated style for every button */
.btn{display:inline-block;background:rgba(61,122,92,.12);border:1px solid rgba(61,122,92,.24);
  border-radius:8px;padding:.5rem .9rem;font:inherit;font-weight:600;color:#2C5E45;cursor:pointer;
  transition:background .13s ease,color .13s ease,border-color .13s ease}
/* hover = solid Sage Forest fill with white text */
.btn:hover{background:var(--sage-forest);border-color:var(--sage-forest);color:#fff;text-decoration:none}
/* primary is no longer visually dominant — same family as the rest */
.btn.primary{background:rgba(61,122,92,.12);color:#2C5E45;border-color:rgba(61,122,92,.24)}
.btn.primary:hover{background:var(--sage-forest);border-color:var(--sage-forest);color:#fff}
/* ghost = the quiet member of the family (used for cancel / row icons) */
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--sage-forest);border-color:var(--sage-forest);color:#fff}
/* destructive keeps the same fill-on-hover behaviour but in red for safety */
.btn.danger-btn{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
.btn.danger-btn:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger-btn.small{padding:.1rem .45rem;line-height:1}
/* edit/delete icon buttons: ~20% larger symbols; trash without a frame */
.btn.ghost.small{font-size:1.08em}
.btn.danger-btn.small{font-size:1.08em;border:none;background:transparent;padding:.1rem .3rem}
.btn.danger-btn.small:hover{background:transparent;border:none;color:#8a2e26}
.ic-trash{width:15px;height:15px;vertical-align:-2px;display:inline-block}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}
.pill{display:inline-block;padding:.1em .55em;border-radius:6px;background:var(--sage);
  font-size:.78em;font-weight:600;color:var(--muted)}
.pill.ok{background:rgba(61,122,92,.14);color:#2C5E45}
.pill.status-approved{background:rgba(61,122,92,.14);color:#2C5E45}
.pill.status-denied{background:var(--danger-bg);color:var(--danger)}
.pill.status-pending{background:var(--bg-alt);color:var(--muted)}
.pill.status-cancelled{background:#F0ECE6;color:var(--faint)}
.role{padding:.1em .5em;border-radius:5px;font-size:.75em;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:var(--sage);color:var(--slate)}
.role-admin{background:rgba(15,64,81,.12);color:var(--teal)}
.role-legal{background:rgba(61,122,92,.14);color:#2C5E45}
.role-hr{background:var(--warn-bg);color:var(--warn)}
.role-supervisor{background:var(--sage);color:var(--slate)}

/* flash */
.flash{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;font-weight:500}
.flash.ok{background:rgba(61,122,92,.14);color:#2C5E45}
.flash.error{background:var(--danger-bg);color:var(--danger)}
.flash.warn{background:var(--warn-bg);color:var(--warn)}

/* filters */
.filters{display:flex;gap:.6rem;margin-bottom:1rem;align-items:center}
.filters input[type=search]{flex:1}
.filters select{width:auto}
/* filter fields + button all the same height as the header buttons (36px) */
.filters input,.filters select,.filters .btn{height:36px;box-sizing:border-box}
.filters .btn{display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0}
.pager{display:flex;align-items:center;gap:.7rem;margin-top:1rem}
.pager .count{color:var(--muted)}
input,select,textarea,button{font:inherit}
input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:.5rem .6rem;
  background:var(--surface);color:var(--ink);width:100%}
input[type=checkbox],input[type=radio]{accent-color:var(--teal)}
input::placeholder,textarea::placeholder{color:var(--faint)}
/* date fields: render the value/format in the normal text colour (not the
   browser's blue accent), and mute the empty placeholder + picker icon */
input[type=date]{color:var(--ink)}
input[type=date]::-webkit-datetime-edit{color:var(--ink)}
input[type=date]::-webkit-datetime-edit-year-field,
input[type=date]::-webkit-datetime-edit-month-field,
input[type=date]::-webkit-datetime-edit-day-field,
input[type=date]::-webkit-datetime-edit-text{color:var(--ink)}
input[type=date]:invalid::-webkit-datetime-edit{color:var(--faint)}
input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-d)}

/* table */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
th{font-size:.75em;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
/* resizable columns */
table.resizable{table-layout:fixed}
table.resizable td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.resizable th{position:relative}
table.resizable th:nth-child(1){width:70px}
table.resizable th:nth-child(2){width:20%}
table.resizable th:nth-child(3){width:22%}
table.resizable th:nth-child(4){width:15%}
table.resizable th:nth-child(5){width:80px}
table.resizable th:nth-child(6){width:16%}
table.resizable th:nth-child(7){width:95px}
/* absence tables (Vacation, Sick) — identical fixed columns so they line up,
   using percentages so both fill the full available width and stay aligned */
table.absfixed{table-layout:fixed;width:100%}
table.absfixed th:nth-child(1),table.absfixed td:nth-child(1){width:22%}
table.absfixed th:nth-child(2),table.absfixed td:nth-child(2){width:22%}
table.absfixed th:nth-child(3),table.absfixed td:nth-child(3){width:14%}
table.absfixed th:nth-child(4),table.absfixed td:nth-child(4){width:22%}
table.absfixed th:nth-child(5),table.absfixed td:nth-child(5){width:20%}
/* Other absences: has an extra Type column; keep Days at 44% and Status at 58%
   so they line up with the Vacation/Sick tables, and pull From to the left. */
table.absfixed-other{table-layout:fixed;width:100%}
table.absfixed-other th:nth-child(1),table.absfixed-other td:nth-child(1){width:10%}  /* Type */
table.absfixed-other th:nth-child(2),table.absfixed-other td:nth-child(2){width:17%}  /* From */
table.absfixed-other th:nth-child(3),table.absfixed-other td:nth-child(3){width:17%}  /* To */
table.absfixed-other th:nth-child(4),table.absfixed-other td:nth-child(4){width:14%}  /* Days */
table.absfixed-other th:nth-child(5),table.absfixed-other td:nth-child(5){width:20%}  /* Status */
/* Bank holidays: put the Holiday column at the Days position (44%) of the tables above. */
table.absfixed-bh{table-layout:fixed;width:100%}
table.absfixed-bh th:nth-child(1),table.absfixed-bh td:nth-child(1){width:44%}  /* Date */
table.absfixed-bh th:nth-child(2),table.absfixed-bh td:nth-child(2){width:46%}  /* Holiday */
.col-resizer{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;z-index:5}
.col-resizer:hover{background:var(--sage-forest);opacity:.5}

tbody tr{cursor:pointer}
tbody tr:hover{background:var(--bg-alt)}
tr.inactive{color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:1.5rem}
.count{color:var(--muted);font-size:.85em;margin-top:.7rem}

/* login */
.loginbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:2.2rem;width:340px;box-shadow:0 6px 24px rgba(23,46,51,.08)}
.loginbox h1{color:var(--teal);text-align:center;margin:0}
.login-logo{display:block;height:30px;width:auto;margin:0 auto .2rem}
.loginbox .sub{text-align:center;color:var(--muted);margin:.2rem 0 1.4rem}
.loginbox label{display:block;margin-bottom:.9rem;font-size:.85em;color:var(--muted)}
.loginbox input{margin-top:.25rem}
.loginbox button{width:100%;margin-top:.4rem}

/* big form */
.bigform fieldset,fieldset{border:1px solid var(--line);border-radius:12px;
  background:var(--surface);padding:1rem 1.2rem 1.2rem;margin-bottom:1.1rem}
legend{font-weight:700;padding:0 .4rem;color:var(--teal)}
fieldset.sensitive{border-color:var(--danger-line)}
fieldset.sensitive legend{color:var(--danger)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem 1.1rem}
@media(max-width:800px){.grid{grid-template-columns:1fr}}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 1.1rem}
@media(max-width:800px){.grid2{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.25rem}
/* uniform field height: same control height for text/number/select (they
   otherwise render a touch shorter, esp. in Safari) + a container min-height so
   short fields (checkboxes) line up too */
.bigform .field{min-height:3.6rem}
.bigform .field input:not([type=checkbox]),
.bigform .field select,
.salaryadd input:not([type=checkbox]),
.salaryadd select{height:2.5rem;box-sizing:border-box}
.field.wide{grid-column:1/-1}
.rowbreak{grid-column:1/-1;height:0;margin:0;padding:0}
.field label{font-size:.8em;color:var(--muted);font-weight:600}
.field small{color:var(--muted);font-size:.75em}
.field input[type=checkbox]{width:auto;height:1.1rem;width:1.1rem}
.stack label,.loginbox label{display:block}
.stack{display:flex;flex-direction:column;gap:.9rem}
.formactions{display:flex;gap:.8rem;margin:.5rem 0 1.5rem}

.danger{border:1px solid var(--danger-line);border-radius:12px;padding:1rem 1.2rem;background:var(--danger-bg)}
.danger h3{margin:.2rem 0 .8rem;color:var(--danger);font-size:1rem}
.danger form{margin-right:.6rem}
.newuser{margin-top:1.5rem}

/* sortable headers */
th.sortable{padding:0}
th.sortable a{display:flex;align-items:center;gap:.35rem;padding:.6rem .8rem;color:var(--muted);
  text-transform:uppercase;font-size:.85em;letter-spacing:.05em;font-weight:700;white-space:nowrap}
th.sortable a:hover{color:var(--sage-forest);text-decoration:none;background:var(--bg-alt)}
th.sortable .arrow{opacity:.3;font-size:.9em}
th.sortable.sorted a{color:var(--teal)}
th.sortable.sorted .arrow{opacity:1}

/* salary history */
.salaryhist{margin-top:1.1rem}
.salaryhist table form{margin:0}
.salaryhist .btn.small{padding:.15rem .5rem;font-size:.85em;line-height:1}
td.up{color:var(--sage-forest);font-weight:600}
td.down{color:var(--danger);font-weight:600}
.salaryadd{display:grid;grid-template-columns:1fr 1fr 90px 1fr auto;gap:.9rem;align-items:end;margin-top:1rem}
/* bonuses */
.bonustitle{display:flex;align-items:center;gap:.8rem;margin:.1rem 0 1rem}
.bonusyearsel{width:auto;height:2.2rem;box-sizing:border-box;padding:0 .5rem;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
/* compact bonus notification (Bonus/Payment added etc.) */
.bonusflash{display:inline-block;width:auto;padding:.4rem .8rem;font-size:.9em;margin-bottom:.7rem}
/* payment tables: identical fixed columns so Amount/Payout/Paid on/Note line up */
table.paytable{table-layout:fixed;width:100%}
table.paytable th:nth-child(1),table.paytable td:nth-child(1){width:17%}   /* Amount */
table.paytable th:nth-child(2),table.paytable td:nth-child(2){width:16%}   /* Payout */
table.paytable th:nth-child(3),table.paytable td:nth-child(3){width:21%}   /* Paid on */
table.paytable th:nth-child(4),table.paytable td:nth-child(4){width:26%}   /* Note */
table.paytable th:nth-child(5),table.paytable td:nth-child(5){width:20%}   /* actions */
/* inline-editable payment cells */
table.paytable td input{width:100%;height:2.3rem;box-sizing:border-box;padding:.25rem .5rem}
table.paytable td.payactions{white-space:nowrap;display:flex;gap:.4rem;align-items:center}
table.paytable td.payactions .btn{height:2.3rem;display:inline-flex;align-items:center}
/* inline-editable bonus header (Year / Period / Amount / Currency + Save + delete) */
.bonuseditrow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.6rem}
.bonuseditrow input,.bonuseditrow select{height:2.4rem;box-sizing:border-box;width:auto}
.bonuseditrow .w-year{width:5.5rem}
.bonuseditrow .w-period{width:8rem}
.bonuseditrow .w-amt{width:9rem}
.bonuseditrow .w-ccy{width:5.5rem}
.bonuseditrow .btn{height:2.4rem;display:inline-flex;align-items:center}
/* add-forms: buttons match the height of the input fields to their left */
.instadd .btn,.bonusadd .btn{height:2.5rem;display:inline-flex;align-items:center}
.bonuscard{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;margin-bottom:.9rem;background:var(--surface)}
.bonushead{margin-bottom:.5rem}
.bonusrow + .bonusrow{border-top:1px solid var(--line);margin-top:1.1rem;padding-top:1.1rem}
.instadd{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}
.instadd input:not([type=checkbox]){width:auto;height:2.5rem;box-sizing:border-box}
.instadd input[name=amount]{width:8rem}
.instadd input[name=payout]{width:11rem}
.instadd input[name=note]{min-width:12rem}
.bonusadd{display:grid;grid-template-columns:1fr 1fr 1fr 90px auto;gap:.9rem;align-items:end;margin-top:1rem}
.bonusadd input,.bonusadd select{height:2.5rem;box-sizing:border-box}
@media(max-width:800px){.bonusadd{grid-template-columns:1fr}}
.ccy{color:var(--muted);font-size:.85em}
.yearsel{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.yearsel select{width:auto}
.yearsel h4{margin:0;font-size:.95rem;font-weight:600}
/* Year select + Add-absence button share the same height */
.yearsel select,.yearsel .btn{height:2.5rem;box-sizing:border-box}
.yearsel .btn{display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
.absblock{margin:.4rem 0 1.3rem}
.absblock h4{margin:.2rem 0 .5rem;font-size:.95rem;font-weight:600}
.absblock h4 strong{color:var(--teal)}
/* expandable bank holidays */
.bankhol>summary{cursor:pointer;font-size:.95rem;font-weight:600;margin:.2rem 0;list-style:none;
  display:inline-flex;align-items:center;user-select:none}
.bankhol>summary::-webkit-details-marker{display:none}
.bankhol>summary::after{content:'\25B8';margin-left:.5rem;color:var(--muted);
  transition:transform .12s ease}
.bankhol[open]>summary::after{transform:rotate(90deg)}
.bankhol>summary strong{color:var(--teal);margin-right:.3rem}
.bhadd{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.bhadd input{width:auto}
.bhadd input,.bhadd .btn{height:2.5rem;box-sizing:border-box}
.currentsal{margin:.2rem 0 1rem;font-size:1.05rem}
.currentsal strong{font-size:1.15rem;color:var(--teal)}
.muted{color:var(--muted)}
@media(max-width:800px){.salaryadd{grid-template-columns:1fr}}

/* client database — stat tiles + breakdowns + read-only values */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.4rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem}
.stat .num{font-size:1.7rem;font-weight:700;color:var(--teal);line-height:1.1}
.stat .lbl{font-size:.8rem;color:var(--muted);font-weight:600;margin-top:.2rem}
.breakcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.breakcols h4{margin:.2rem 0 .5rem;font-size:.95rem;color:var(--teal)}
.field .val{padding:.15rem 0;min-height:1.2rem}

/* platform hub — tool tiles */
.hub{max-width:840px;margin:0 auto}
.hubhead{margin:.6rem 0 1.6rem}
.hubhead h1{color:var(--teal)}
.hubhead .muted{margin:.25rem 0 0}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media(max-width:680px){.tiles{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;gap:.55rem;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.5rem;text-decoration:none;color:var(--ink);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(23,46,51,.10);
  border-color:var(--sage-forest);text-decoration:none}
.tile-icon{width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:rgba(15,64,81,.08);color:var(--teal);margin-bottom:.3rem}
.tile-icon svg{width:28px;height:28px}
.tile.trading .tile-icon{background:rgba(61,122,92,.14);color:#2C5E45}
.tile.clients .tile-icon{background:rgba(23,46,51,.10);color:var(--slate)}
.tile h2{margin:0;font-size:1.2rem;color:var(--teal)}
.tile p{margin:0;color:var(--muted);font-size:.92rem;flex:1}
.tile-cta{font-weight:700;color:var(--sage-forest);font-size:.92rem}
.tile:hover .tile-cta{color:var(--teal)}
.tile.disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}
.tile.disabled:hover{transform:none;box-shadow:none;border-color:var(--line)}
.tile.disabled .tile-cta{color:var(--muted)}
/* per-tool access controls in the users table */
.rolesel{width:auto;min-width:9rem;padding:.32rem .5rem;font-size:.9em}
.toolgrid{display:grid;grid-template-columns:auto 1fr;gap:.45rem .8rem;align-items:center;max-width:26rem}
.toolchk{display:flex;align-items:center;gap:.45rem;font-weight:600;font-size:.9em;white-space:nowrap;cursor:pointer}
.toolchk input{width:auto;height:1rem;margin:0;flex:0 0 auto}

/* new-tool placeholder */
.emptytool{background:var(--surface);border:1px dashed var(--line);border-radius:16px;
  padding:2.4rem 1.6rem;text-align:center;margin-top:1.2rem}
.emptytool-badge{display:inline-block;background:var(--bg-alt);color:var(--muted);font-size:.72rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.28em .75em;border-radius:20px;margin-bottom:.6rem}
.emptytool h3{margin:.2rem 0 .45rem;color:var(--teal);font-size:1.15rem}
.emptytool p{margin:0 auto;max-width:540px;color:var(--muted)}