/* Fonts are loaded via in index.html (more reliable than @import). */
:root{
--ink:#141414; --muted:#6b7280; --line:#e7e5e4; --bg:#f6f5f3; --card:#ffffff;
--accent:#fdc629; --accent-soft:#fff4d1; --accent-ink:#1f1a05; --link:#a9781a;
--dark:#14110a;
--good:#059669; --bad:#dc2626; --warn:#d97706;
--t-private:#6366f1; --t-accelerate:#0ea5e9; --t-foundations:#10b981;
--t-faststart:#f59e0b; --t-special:#ec4899; --t-other:#94a3b8;
--shadow:0 1px 2px rgba(20,17,10,.05), 0 8px 24px rgba(20,17,10,.07);
--radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0; overflow-x:hidden}
body{
background:var(--bg); color:var(--ink);
font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Montserrat",-apple-system,"Segoe UI",sans-serif; font-weight:800}
h1{font-size:25px; margin:0; letter-spacing:-.02em}
h2{font-size:15px; margin:0; letter-spacing:-.01em; font-weight:700}
.lead{color:var(--muted); margin:6px 0 0; font-size:14px}
.hidden{display:none !important}
/* Buttons/inputs don't inherit font-family by default — make the menu & controls use the brand font */
button, input, select, textarea{font-family:inherit}
/* Topbar */
.topbar{
position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:22px;
background:var(--dark); border-bottom:1px solid rgba(255,255,255,.08); padding:12px 22px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{display:inline-flex; align-items:center; background:transparent; padding:0; border-radius:0; color:#fff; font-weight:700; font-size:14px}
.brand-mark img{height:22px; width:auto; max-width:170px; display:block}
.brand-divider{width:1px; height:22px; background:rgba(255,255,255,.15)}
.logo{font-size:24px}
.brand-title{font-weight:800; letter-spacing:-.02em; line-height:1}
.brand-sub{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em}
.tabs{display:flex; gap:4px; background:rgba(255,255,255,.06); padding:4px; border-radius:11px}
.tab{
border:0; background:transparent; padding:8px 16px; border-radius:8px; cursor:pointer;
font-size:14px; font-weight:700; color:rgba(255,255,255,.7); transition:.15s;
}
.tab:hover{color:#fff}
.tab.active{background:var(--accent); color:var(--accent-ink)}
/* Dropdown menus (Client Tracker + account) */
.menu{position:relative; display:inline-flex}
.menu-panel{position:absolute; top:calc(100% + 8px); left:0; min-width:180px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(15,23,42,.22); padding:6px; z-index:50; display:flex; flex-direction:column; gap:2px}
#acctMenuPanel{left:auto; right:0}
.menu-item{border:0; background:transparent; text-align:left; padding:8px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap; transition:.12s}
.menu-item:hover{background:var(--accent-soft)}
.menu-item.active{background:var(--accent-soft); color:var(--accent-ink)}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:12px}
.whoami{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.85); font-weight:600; background:transparent; border:0; cursor:pointer; padding:5px 8px; border-radius:9px; transition:.15s}
.whoami:hover{background:rgba(255,255,255,.08); color:#fff}
.whoami .avatar{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:700; overflow:hidden; flex:0 0 auto}
.whoami .avatar img{width:100%; height:100%; object-fit:cover}
/* Large avatar for My Profile */
.profile-pic{display:flex; align-items:center; gap:18px; margin-bottom:18px}
.avatar-lg{display:inline-flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:26px; font-weight:800; overflow:hidden; flex:0 0 auto}
.avatar-lg img{width:100%; height:100%; object-fit:cover}
.topbar .btn.ghost{color:#fff; border-color:rgba(255,255,255,.28); background:transparent}
.topbar .btn.ghost:hover{border-color:rgba(255,255,255,.55)}
.src{font-size:11px; color:var(--muted)}
/* Auth screen (setup / login) */
.auth-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:20px}
.auth-card{width:100%; max-width:380px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 28px}
.auth-logo{margin-bottom:18px; background:var(--dark); padding:9px 15px; border-radius:10px}
.auth-card h2{font-size:19px; margin:0 0 6px; letter-spacing:-.01em}
.auth-card .lead{margin-bottom:18px}
.auth-card form{display:flex; flex-direction:column; gap:12px}
.auth-card label{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--ink)}
.auth-card input{font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink)}
.auth-card input:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.auth-submit{margin-top:6px; width:100%}
.auth-error{color:var(--bad); font-size:13px; margin:0}
.auth-switch{margin:2px 0 0; font-size:13px; color:var(--muted); text-align:center}
.auth-switch a{color:var(--link); font-weight:700; text-decoration:none}
.reg-row{display:flex; gap:12px}
.reg-row label{flex:1; min-width:0}
main{max-width:100%; margin:0 auto; padding:26px 32px 80px}
/* prevent grid/flex children from expanding the page via min-content (charts, long strings) */
main,.kpis,.kpi,.grid-2,.panel,.chart{min-width:0}
.view{max-width:100%}
.view-head{margin-bottom:20px}
.view-head.row,.row{display:flex; align-items:center; justify-content:space-between; gap:16px}
/* KPI cards */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:18px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow)}
.kpi .label{font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.kpi .value{font-size:26px; font-weight:800; letter-spacing:-.02em; margin-top:6px}
.kpi .meta{font-size:12px; color:var(--muted); margin-top:4px}
.kpi .meta.good{color:var(--good)} .kpi .meta.bad{color:var(--bad)}
/* Panels */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); margin-bottom:18px}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.panel-tag{font-size:12px; color:var(--muted); font-weight:600}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
/* Charts */
.chart svg{display:block; width:100%; max-width:100%; height:auto; overflow:visible}
.bar-label{font-size:12px; fill:var(--ink); font-weight:600}
.bar-val{font-size:12px; fill:var(--muted)}
.axis{font-size:11px; fill:var(--muted)}
.gridline{stroke:var(--line); stroke-width:1}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12px; color:var(--muted)}
.legend .item{display:inline-flex; align-items:center; gap:6px}
.legend .dot{width:10px; height:10px; border-radius:3px; display:inline-block}
/* Buttons */
.btn{border:1px solid var(--line); background:var(--card); padding:9px 16px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; transition:.15s}
.btn:hover{border-color:#cbd5e1}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; border-radius:0 12px}
.btn.primary:hover{filter:brightness(.97)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad); border-color:transparent}
.btn.danger:hover{background:#fef2f2}
.icon-btn{border:0; background:transparent; font-size:16px; cursor:pointer; color:var(--muted); padding:6px}
/* Filters + table */
.filters{display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.filters input,.filters select{padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; background:var(--card)}
.filters #clientSearch{min-width:200px}
.count{color:var(--muted); font-size:13px; margin-left:auto}
.table-wrap{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:14px}
#payTable{min-width:1900px}
#clientTable{min-width:680px}
thead th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:12px 14px; border-bottom:1px solid var(--line); background:#f8fafc}
tbody td{padding:11px 14px; border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#f8fafc; cursor:pointer}
th.num,td.num{text-align:right}
.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600}
.pill .dot{width:8px; height:8px; border-radius:50%}
.status-active{background:#ecfdf5; color:#059669}
.status-paused{background:#fffbeb; color:#b45309}
.status-churned{background:#fef2f2; color:#dc2626}
.status-pending{background:#eff6ff; color:#2563eb}
.status-ended{background:#f1f5f9; color:#64748b}
/* Clients: status legend (modern badge-cards) + inline status editor */
.status-legend{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px; margin:0 0 18px}
.legend-card{display:flex; flex-direction:column; gap:7px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s}
.legend-card:hover{transform:translateY(-1px); box-shadow:0 2px 4px rgba(20,17,10,.06), 0 12px 28px rgba(20,17,10,.09)}
.legend-badge{align-self:flex-start; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 11px; border-radius:999px}
.legend-desc{font-size:12.5px; color:var(--muted); line-height:1.45}
.legend-active{border-left-color:#10b981} .legend-active .legend-badge{background:#ecfdf5; color:#059669}
.legend-paused{border-left-color:#f59e0b} .legend-paused .legend-badge{background:#fffbeb; color:#b45309}
.legend-ended{border-left-color:#94a3b8} .legend-ended .legend-badge{background:#f1f5f9; color:#64748b}
.legend-churned{border-left-color:#f43f5e} .legend-churned .legend-badge{background:#fef2f2; color:#dc2626}
.status-select{font:inherit; font-size:12px; font-weight:700; padding:4px 26px 4px 10px; border-radius:999px; border:1px solid transparent; cursor:pointer; -webkit-appearance:none; appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 9px center}
.status-select.status-active{background-color:#ecfdf5; color:#059669}
.status-select.status-paused{background-color:#fffbeb; color:#b45309}
.status-select.status-ended{background-color:#f1f5f9; color:#64748b}
.status-select.status-churned{background-color:#fef2f2; color:#dc2626}
.status-select:focus{outline:2px solid var(--accent-soft)}
td .sub{font-size:12px; color:var(--muted); margin-top:2px}
.cur{font-size:11px; color:var(--muted); font-weight:600}
.tier-tag{display:inline-flex; align-items:center; gap:7px; font-weight:600}
.tier-tag .dot{width:9px; height:9px; border-radius:3px}
/* Goals */
.goal-total{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.goal-total .big{font-size:30px; font-weight:800; letter-spacing:-.02em}
.goal-total .of{color:var(--muted); font-weight:600}
.goalbar-track{flex:1; min-width:180px; height:12px; background:var(--bg); border-radius:999px; overflow:hidden}
.goalbar-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,#fdc629,#f0a91e); transition:width .5s}
.goal-row{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); margin-bottom:12px}
.goal-row .gr-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.goal-row .gr-title{display:flex; align-items:center; gap:9px; font-weight:700}
.goal-row .gr-nums{font-size:13px; color:var(--muted)}
.goal-row .gr-nums b{color:var(--ink)}
.hint{color:var(--muted); font-size:13px; margin-top:16px; line-height:1.5}
/* Modal */
.modal-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px}
.modal{background:var(--card); border-radius:16px; width:100%; max-width:560px; box-shadow:0 20px 60px rgba(0,0,0,.3); max-height:92vh; overflow:auto}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line)}
.modal-head h3{margin:0}
form{padding:18px 20px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
label{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:600; color:var(--ink)}
label.full{margin-top:12px}
input,select,textarea{font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
.modal-foot{display:flex; align-items:center; gap:10px; margin-top:18px}
.spacer{flex:1}
/* Toast */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:12px 20px; border-radius:10px; font-size:14px; z-index:60; box-shadow:0 10px 30px rgba(0,0,0,.25)}
/* Payments: bigger modal, add-option, allocation preview */
.modal-lg{max-width:860px}
.lbl-hint{font-weight:500; color:var(--muted); font-size:11px}
.with-add{display:flex; gap:6px}
.with-add select{flex:1}
.mini-add{border:1px solid var(--line); background:var(--bg); border-radius:8px; width:36px; cursor:pointer; font-size:16px; font-weight:700; color:var(--link)}
.mini-add:hover{background:var(--accent-soft)}
/* Searchable combo (Client, Company, Program, Type, Payment Method, Payment Made Via, Summit) */
.combo{position:relative}
.combo input{width:100%; padding-right:28px; background-repeat:no-repeat; background-position:right 11px center;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.combo-menu{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40; background:var(--card); border:1px solid var(--line); border-radius:9px; max-height:220px; overflow-y:auto; box-shadow:0 10px 30px rgba(15,23,42,.12)}
.combo-opt{padding:8px 12px; font-size:13px; cursor:pointer}
.combo-opt:hover, .combo-opt.active{background:var(--accent-soft)}
.combo-add{color:var(--link); font-weight:700; border-top:1px solid var(--line)}
.combo-empty{padding:8px 12px; font-size:13px; color:var(--muted)}
.checkbox-label{flex-direction:row !important; align-items:center; gap:8px !important; font-weight:600}
.checkbox-label input{width:auto}
/* Two inputs sharing one label row (e.g. Service Period: number + unit) */
.dual-field{display:flex; gap:8px}
.dual-field > *{flex:1; min-width:0}
input[readonly]{background:#f8fafc; color:var(--muted)}
input:disabled,select:disabled{background:#f1f5f9; color:#94a3b8; cursor:not-allowed}
.alloc-preview{margin-top:18px; border:1px solid var(--line); border-radius:12px; background:#f8fafc; padding:14px 16px}
.alloc-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px}
.alloc-head h4{margin:0; font-size:14px}
.alloc-sub{font-size:12px; color:var(--muted)}
.alloc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px}
.alloc-cell{background:var(--card); border:1px solid var(--line); border-radius:9px; padding:8px 10px}
.alloc-cell .m{font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em}
.alloc-cell .a{font-size:15px; font-weight:700; margin-top:2px}
.alloc-cell .g{font-size:11px; color:var(--muted); margin-top:1px}
.alloc-total{display:flex; gap:20px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); font-size:13px}
.alloc-total b{color:var(--ink)}
.alloc-empty{color:var(--muted); font-size:13px; padding:8px 0}
.alloc-memo{color:var(--ink); font-size:13.5px; padding:8px 2px; line-height:1.5}
/* Summits */
.summit-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px}
.sc-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px}
.sc-title{font-size:16px; font-weight:750; letter-spacing:-.01em}
.sc-ret{font-size:13px; color:var(--muted)}
.sc-ret b{color:var(--ink); font-size:15px}
.sc-stats{display:flex; gap:26px; margin-bottom:12px}
.sc-stat .n{font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1}
.sc-stat .l{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-top:3px}
.sc-track{display:flex; height:8px; border-radius:999px; overflow:hidden; background:var(--bg); margin-bottom:14px}
.sc-track span{display:block}
.sc-clients{display:flex; flex-wrap:wrap; gap:7px}
.sc-chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; background:#f8fafc; border:1px solid var(--line); border-radius:999px; padding:4px 11px}
.sc-chip .dot2{width:8px; height:8px; border-radius:50%}
/* Report */
.report-body{padding:18px 20px}
.report-meta{display:grid; grid-template-columns:repeat(3,1fr); gap:10px 20px; margin-bottom:18px}
.report-meta .rm{font-size:13px}
.report-meta .rm .k{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em}
.report-meta .rm .v{font-weight:600; margin-top:2px}
.report-table{width:100%; border-collapse:collapse; font-size:13px; margin-top:6px}
.report-table th{text-align:left; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:8px 10px; border-bottom:1px solid var(--line)}
.report-table td{padding:8px 10px; border-bottom:1px solid var(--line)}
.report-table td.num,.report-table th.num{text-align:right}
.report-table tfoot td{font-weight:700; border-top:2px solid var(--line); border-bottom:0}
.link-btn{border:0; background:transparent; color:var(--link); font-weight:700; cursor:pointer; font-size:13px; padding:0}
.link-btn:hover{text-decoration:underline}
.link-btn.danger-link{color:var(--bad)}
/* Settings (Xero) */
.settings-form{display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end; margin-top:12px}
.settings-form .btn{white-space:nowrap}
.settings-actions{display:flex; gap:10px; flex-wrap:wrap}
.redirect-uri{display:flex; gap:10px; align-items:center; background:#f8fafc; border:1px solid var(--line); border-radius:9px; padding:9px 12px; margin-bottom:6px}
.redirect-uri code{font-size:12.5px; color:var(--ink); word-break:break-all; flex:1}
.setup-steps{margin:4px 0 0; padding-left:20px; color:var(--muted); font-size:13.5px; line-height:1.7}
.setup-steps strong{color:var(--ink)}
.xero-badge{display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:12px}
/* Clients: Xero-sourced columns */
.xero-cell{background:#13B5EA; color:#fff; font-weight:700; white-space:nowrap}
.paid-yes{color:var(--good); font-weight:700}
.paid-no{color:var(--bad); font-weight:700}
.acct-yes{background:#ecfdf5; color:#059669; font-weight:700; padding:3px 9px; border-radius:6px; white-space:nowrap}
.acct-no{background:#fef2f2; color:#dc2626; font-weight:700; padding:3px 9px; border-radius:6px; white-space:nowrap}
.contact-form{grid-template-columns:repeat(3,1fr)}
.contact-form-actions{grid-column:1 / -1; display:flex; gap:10px}
@media(max-width:820px){ .settings-form{grid-template-columns:1fr} .contact-form{grid-template-columns:1fr} }
/* Subscription Tracker */
.kpi .meta.warn{color:var(--warn)}
.sub-badge{display:inline-block; padding:3px 10px; border-radius:999px; font-weight:700; font-size:12px; white-space:nowrap}
.sub-keep{background:#ecfdf5; color:#059669}
.sub-monitor{background:#fffbeb; color:#b45309}
.sub-delete{background:#fef2f2; color:#dc2626}
.cat-tag{display:inline-block; padding:2px 9px; border-radius:6px; background:#f1f5f9; color:#475569; font-weight:600; font-size:12.5px; white-space:nowrap}
.sub-notes{color:var(--muted); font-size:13px; max-width:260px}
#subTable{min-width:900px}
@media(max-width:820px){
main{padding:20px 14px 72px}
.kpis{grid-template-columns:1fr 1fr}
.grid-2{grid-template-columns:1fr}
.topbar{flex-wrap:wrap; gap:12px; padding:10px 14px}
.tabs{order:3; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto}
.form-grid{grid-template-columns:1fr}
.report-meta{grid-template-columns:1fr 1fr}
.sc-stats{gap:18px}
.modal{max-height:94vh}
}
@media(max-width:520px){
h1{font-size:21px}
.lead{font-size:13px}
.kpis{gap:10px}
.kpi{padding:13px 14px}
.kpi .value{font-size:22px}
.panel{padding:15px 16px}
.view-head.row{flex-wrap:wrap}
.view-head.row .btn{width:100%}
.filters{gap:8px}
.filters input,.filters select{width:100%; flex:1 1 100%}
.filters #clientSearch,.filters #paySearch{min-width:0}
.count{width:100%; margin-left:0; margin-top:2px}
.sc-stats{gap:14px}
.sc-stat .n{font-size:19px}
.sc-title{font-size:15px}
.goal-total{gap:12px}
.goal-total .big{font-size:24px}
.modal-head{padding:14px 16px}
form{padding:14px 16px}
.report-body{padding:14px 16px}
}
/* Xero Latest Invoice status pills */
.pay-pill{display:inline-block; padding:3px 11px; border-radius:999px; font-weight:700; font-size:12.5px; white-space:nowrap}
.pay-paid{background:#ecfdf5; color:#059669}
.pay-open{background:#fffbeb; color:#b45309}
.pay-delayed{background:#fef2f2; color:#dc2626}
.pay-none{background:#f1f5f9; color:#64748b; font-weight:600}
/* Unify native