:root{
  --ground:#F4F2ED;--surface:#FFFFFF;--ink:#15171C;--muted:#5A5F6B;--soft:#3F4450;
  --line:#E2DED5;--line-strong:#D6D1C6;--blue:#1D4ED8;--blue-bg:#E8EEFD;--blue-tint:#F5F8FF;
  --orange:#B45309;--orange-ink:#9A4508;--orange-bg:#FDF1E3;--gray-bg:#EEF0F3;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--ground);color:var(--ink)}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
a{color:var(--blue)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.chip{display:inline-block;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.chip.current,.chip.next{background:var(--blue-bg);color:var(--blue)}
.chip.past_due,.chip.missed{background:var(--orange-bg);color:var(--orange-ink)}
.chip.paused{background:var(--orange-ink);color:#fff}
.chip.paid_off,.chip.paid{background:var(--gray-bg);color:var(--soft)}
.chip.up{border:1px solid var(--line);color:var(--muted)}
.logo{width:32px;height:32px;border-radius:8px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.pill{height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-weight:600}
.pill[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.select-card{border:2px solid var(--line);background:var(--surface);border-radius:14px;text-align:left}
.select-card[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-tint)}
.btn{height:48px;border-radius:12px;border:none;font-weight:600;padding:0 18px}
.btn.primary{background:var(--blue);color:#fff}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);font-weight:500}
.bar{height:8px;border-radius:999px;background:#EEEAE2;overflow:hidden}
.bar>span{display:block;height:100%;border-radius:999px;background:var(--blue)}
.bar.risk>span{background:var(--orange)}
.bar.done>span{background:var(--soft)}
[hidden]{display:none!important}

/* Interaction polish */
.btn,.pill,.select-card,label.field input,label.field select{transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .06s ease,opacity .15s ease}
.btn:hover:not(:disabled){filter:brightness(.96)}
.btn:active:not(:disabled),.select-card:active{transform:scale(.992)}
.pill:hover:not([aria-pressed="true"]){border-color:var(--ink)}
.select-card:hover:not([aria-pressed="true"]){border-color:var(--line-strong)}
label.field input:focus,label.field select:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-bg);outline:none}
label.field input.ok{border-color:#2F6B45;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232F6B45' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}
::placeholder{color:#9DA2AE}