:root{--ink:#202035;--paper:#fffdf7;--cream:#fff6dc;--pink:#ff6b8a;--coral:#ff7d66;--yellow:#ffd84d;--blue:#4f7cff;--purple:#8c5cff;--mint:#46d7ae;--sky:#7bdff2;--muted:#706e7d;--line:#e8e2d6;--shadow:0 16px 0 rgba(32,32,53,.08);--soft-shadow:0 14px 40px rgba(50,43,72,.10)}
*{box-sizing:border-box}[hidden]{display:none!important}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(circle at 10% 5%,#fff0f4 0 14%,transparent 30%),radial-gradient(circle at 92% 18%,#edf9ff 0 15%,transparent 32%),#faf7f0;font:15px/1.5 ui-rounded,"Nunito Sans",Inter,system-ui,-apple-system,"Segoe UI",sans-serif}button,select,input,textarea{font:inherit}button,a{transition:.18s ease}.app{min-height:100vh}.site-header{height:82px;max-width:1320px;margin:auto;padding:0 28px;display:flex;align-items:center;gap:34px;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;min-width:220px}.brand-badge{width:44px;height:44px;border:2px solid var(--ink);border-radius:14px;display:grid;place-items:center;background:var(--yellow);font-weight:1000;font-size:22px;transform:rotate(-4deg);box-shadow:4px 4px 0 var(--ink)}.brand b,.brand small{display:block}.brand b{font-size:17px}.brand small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}nav{display:flex;gap:8px}nav a{color:var(--muted);text-decoration:none;font-weight:800;padding:9px 12px;border-radius:999px}nav a:hover{color:var(--ink);background:#fff}.header-actions{margin-left:auto;display:flex;align-items:center;gap:9px}.hello{font-size:13px;color:var(--muted);margin-right:3px}.button,.round-button,.close-button,.menu-button{border:0;cursor:pointer}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:14px;font-weight:900;text-decoration:none}.button:hover{transform:translateY(-2px)}.button-ink{background:var(--ink);color:#fff;box-shadow:4px 4px 0 rgba(140,92,255,.45)}.button-pop{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}.button-ghost{background:transparent;color:var(--muted)}.button.full{width:100%}.round-button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);text-decoration:none;border:1px solid var(--line);box-shadow:0 7px 18px rgba(50,43,72,.08)}.logout{font-size:18px}.menu-button{display:none;background:var(--ink);color:#fff;border-radius:12px;width:42px;height:42px;font-size:20px}main{max-width:1264px;margin:auto;padding:18px 28px 48px}.hero{min-height:420px;border:2px solid var(--ink);border-radius:32px;padding:48px 52px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;overflow:hidden;position:relative;background:linear-gradient(135deg,#fff4c7 0%,#ffe7cf 45%,#ffdce7 100%);box-shadow:8px 9px 0 var(--ink)}.hero:after{content:"";position:absolute;width:170px;height:170px;border-radius:50%;border:22px solid rgba(79,124,255,.13);left:-82px;bottom:-84px}.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:1000;color:#755800}.hero h1{font-size:clamp(40px,5vw,66px);line-height:.98;letter-spacing:-.05em;margin:0;max-width:720px}.hero h1 span{font-family:Georgia,serif;font-weight:500;font-style:italic;color:var(--pink)}.hero-intro{font-size:18px;max-width:610px;color:#545161;margin:22px 0}.hero-chips{display:flex;gap:9px;flex-wrap:wrap}.hero-chips span{background:rgba(255,255,255,.72);border:1.5px solid var(--ink);border-radius:999px;padding:8px 12px;font-weight:800;font-size:12px}.hero-art{height:320px;position:relative}.big-total{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%) rotate(-2deg);width:255px;height:180px;border:2px solid var(--ink);border-radius:28px;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:4;box-shadow:8px 8px 0 var(--purple)}.big-total small{font-weight:900;color:var(--muted)}.big-total strong{font-size:45px;line-height:1.15}.big-total span{font-size:12px;color:var(--muted)}.receipt{position:absolute;width:120px;background:#fff;border:2px solid var(--ink);padding:16px 14px 23px;text-align:center;z-index:2;box-shadow:5px 5px 0 var(--ink)}.receipt:after{content:"";position:absolute;bottom:-8px;left:-2px;width:120px;height:14px;background:linear-gradient(135deg,transparent 6px,#fff 0) 0 0/14px 14px repeat-x}.receipt span,.receipt b{display:block}.receipt span{font-size:10px;letter-spacing:.15em;font-weight:1000;color:var(--muted)}.receipt b{font-size:24px}.receipt-one{left:7%;top:32px;transform:rotate(-10deg)}.receipt-two{right:3%;bottom:29px;transform:rotate(9deg)}.sun{position:absolute;right:2%;top:0;width:78px;height:78px;border:2px solid var(--ink);background:var(--yellow);border-radius:50%;display:grid;place-items:center;font-size:35px;animation:float 4s ease-in-out infinite}.kid{position:absolute;bottom:8px;width:70px;height:92px;border:2px solid var(--ink);border-radius:35px 35px 18px 18px;display:grid;place-items:center;font-size:26px;font-weight:1000;z-index:5}.kid i{position:absolute;width:43px;height:43px;border-radius:50%;border:2px solid var(--ink);top:-28px;background:#ffd3b6}.kid-one{left:24%;background:var(--blue);color:#fff;transform:rotate(-4deg)}.kid-two{right:20%;background:var(--mint);transform:rotate(5deg)}@keyframes float{50%{transform:translateY(-8px) rotate(8deg)}}.ticker{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}.ticker>div{min-height:116px;padding:21px;border:2px solid var(--ink);border-radius:22px;background:#fff;position:relative;overflow:hidden}.ticker>div:nth-child(1){box-shadow:5px 5px 0 var(--blue)}.ticker>div:nth-child(2){box-shadow:5px 5px 0 var(--purple)}.ticker>div:nth-child(3){box-shadow:5px 5px 0 var(--coral)}.ticker span,.ticker strong,.ticker small{display:block}.ticker span{font-size:12px;color:var(--muted);font-weight:800}.ticker strong{font-size:27px;line-height:1.25}.ticker small{color:var(--muted)}.sync-pill{background:var(--ink)!important;color:#fff}.sync-pill span,.sync-pill small{color:#fff}.sync-pill i{display:block;width:12px;height:12px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 6px rgba(70,215,174,.15);margin-bottom:12px}.story-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:20px;margin:25px 0}.panel{background:var(--paper);border:2px solid var(--ink);border-radius:28px;padding:27px;box-shadow:var(--soft-shadow)}.panel-title,.expense-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.panel h2,.expense-panel h2{font-size:29px;letter-spacing:-.03em;margin:0}.scribble{font-weight:1000;background:var(--yellow);padding:6px 11px;border:2px solid var(--ink);border-radius:50%;transform:rotate(7deg)}.doodle{font-size:38px;color:var(--pink);font-weight:1000}.split-content{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;padding-top:25px}.donut-wrap{position:relative;display:grid;place-items:center}.donut{width:200px;height:200px;border-radius:50%;padding:18px;display:grid;place-items:center;filter:drop-shadow(6px 7px 0 rgba(32,32,53,.13))}.donut-hole{width:100%;height:100%;border-radius:50%;background:var(--paper);display:grid;place-content:center;text-align:center}.donut-hole span{font-size:12px;color:var(--muted)}.donut-hole strong{font-size:26px}.donut-note{position:absolute;bottom:-12px;right:2px;background:var(--mint);border:2px solid var(--ink);padding:7px 9px;border-radius:10px;font-size:10px;font-weight:900;transform:rotate(-5deg)}.payer-cards{display:grid;gap:12px}.payer{display:flex;align-items:center;gap:12px;padding:16px;border:2px solid var(--ink);border-radius:18px}.payer>span{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;font-weight:1000;font-size:19px}.payer.james{background:#edf2ff}.payer.james>span{background:var(--blue);color:#fff}.payer.donal{background:#f2ecff}.payer.donal>span{background:var(--purple);color:#fff}.payer small,.payer strong{display:block}.payer strong{font-size:20px}.category-chart{display:grid;gap:15px;padding-top:25px}.bar-row{display:grid;grid-template-columns:105px 1fr 85px;gap:12px;align-items:center}.bar-label{font-weight:900}.bar-track{height:18px;background:#eeeae0;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}.bar-fill{height:100%;border-right:1.5px solid var(--ink);border-radius:999px}.bar-value{text-align:right;font-weight:900}.expense-panel{padding:0;overflow:hidden}.expense-top{padding:29px 29px 24px;background:linear-gradient(90deg,#fff 60%,#f2f8ff)}.expense-top>div>p:last-child{margin:7px 0 0;color:var(--muted)}.filters{display:flex;align-items:end;gap:8px}.filters label{display:grid;gap:4px}.filters label span{font-size:10px;font-weight:1000;text-transform:uppercase;letter-spacing:.1em}.filters select{min-width:145px;border:2px solid var(--ink);background:#fff;border-radius:12px;padding:10px}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:780px}th,td{text-align:left;padding:15px 18px;border-top:1px solid var(--line)}th{background:#fffaf0;font-size:10px;text-transform:uppercase;letter-spacing:.1em}td:nth-child(n+4),th:nth-child(n+4){text-align:right}.expense-title{font-weight:900}.pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:1000;border:1px solid rgba(32,32,53,.12)}.pill-child{background:#e9edff;color:#3b4dd8}.pill-category{background:#dff8f7;color:#047986}.table-footer{display:flex;justify-content:space-between;padding:15px 18px;background:#fffaf0;color:var(--muted);font-size:12px}footer{display:flex;justify-content:center;gap:8px;color:var(--muted);padding:28px}.auth-screen{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;overflow:hidden;background:#fff7df}.auth-card{position:relative;z-index:2;width:min(560px,100%);padding:48px;text-align:center;background:#fff;border:2px solid var(--ink);border-radius:32px;box-shadow:10px 10px 0 var(--ink)}.auth-card h1{font-size:clamp(34px,6vw,55px);line-height:1;letter-spacing:-.04em;margin:10px 0 17px}.auth-card h1 em{font-family:Georgia,serif;color:var(--pink);font-weight:500}.auth-card>p:not(.eyebrow){font-size:17px;color:var(--muted)}.auth-card small{display:block;margin-top:15px;color:var(--muted)}.auth-mascot{width:82px;height:82px;margin:0 auto 18px;border:2px solid var(--ink);border-radius:26px;background:var(--yellow);display:grid;place-items:center;font-weight:1000;font-size:38px;transform:rotate(-5deg);box-shadow:6px 6px 0 var(--purple);position:relative}.auth-mascot b{position:absolute;right:-15px;top:-17px;color:var(--pink)}.login-button{margin-top:14px}.loading-dots{display:flex;justify-content:center;gap:8px;margin-top:23px}.loading-dots i{width:11px;height:11px;background:var(--blue);border-radius:50%;animation:bounce 1s infinite}.loading-dots i:nth-child(2){animation-delay:.15s;background:var(--pink)}.loading-dots i:nth-child(3){animation-delay:.3s;background:var(--mint)}@keyframes bounce{50%{transform:translateY(-8px)}}.login-splodge{position:absolute;border:2px solid var(--ink)}.splodge-a{width:300px;height:300px;border-radius:45% 55% 60% 40%;background:var(--sky);left:-90px;top:-70px;transform:rotate(20deg)}.splodge-b{width:330px;height:330px;border-radius:55% 45% 40% 60%;background:var(--pink);right:-120px;bottom:-130px;transform:rotate(-12deg)}.drawer-backdrop{position:fixed;inset:0;background:rgba(32,32,53,.5);z-index:90}.drawer{position:fixed;z-index:100;top:0;right:0;width:min(650px,100%);height:100vh;background:#fffaf0;border-left:2px solid var(--ink);transform:translateX(105%);transition:.25s ease;display:flex;flex-direction:column}.drawer.open{transform:none}.drawer-head,.drawer-foot{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.drawer-head h2{margin:0;font-size:29px}.drawer-foot{border:0;border-top:1px solid var(--line)}.close-button{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;font-size:27px}.drawer-tabs{display:flex;padding:0 24px;border-bottom:1px solid var(--line)}.tab{border:0;background:none;padding:14px 16px;font-weight:900;color:var(--muted);cursor:pointer}.tab.active{color:var(--ink);border-bottom:4px solid var(--pink)}.drawer-body{padding:22px 24px;overflow:auto;flex:1}.expense-editor-list{display:grid;gap:14px;margin-bottom:14px}.edit-row{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:17px;box-shadow:4px 4px 0 #ddd5c6}.edit-row-head{display:flex;justify-content:space-between;margin-bottom:12px}.remove-expense{border:0;background:#ffe4e8;color:#a11438;border-radius:9px;padding:6px 9px;font-weight:900;cursor:pointer}.edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.edit-grid label{display:grid;gap:4px}.edit-grid span{font-size:10px;text-transform:uppercase;font-weight:1000}.edit-grid input,textarea{width:100%;border:2px solid var(--ink);border-radius:10px;padding:10px;background:#fff}textarea{min-height:520px;font:13px/1.5 ui-monospace,SFMono-Regular,monospace}.money-grid{margin-top:10px}.status{font-weight:800;color:#087f5b}.status.error{color:#b42318}.no-scroll{overflow:hidden}.empty{padding:30px;text-align:center;color:var(--muted)}
@media(max-width:980px){.site-header{flex-wrap:wrap;height:auto;padding-top:17px}.site-header nav{order:4;width:100%;display:none}.site-header nav.open{display:flex}.hello{display:none}.menu-button{display:block}.header-actions{margin-left:auto}.hero{grid-template-columns:1fr;padding:38px}.hero-art{margin-top:20px}.ticker{grid-template-columns:1fr 1fr}.story-grid{grid-template-columns:1fr}.expense-top{display:grid}.filters{flex-wrap:wrap}.brand{min-width:auto}}
@media(max-width:640px){main{padding:8px 14px 30px}.site-header{padding:14px}.brand span:last-child{display:none}.header-actions .round-button,.header-actions .button{display:none}.hero{padding:29px 22px;min-height:0;border-radius:25px;box-shadow:5px 6px 0 var(--ink)}.hero h1{font-size:42px}.hero-art{height:270px}.receipt-one{left:0}.receipt-two{right:0}.ticker{grid-template-columns:1fr}.panel{padding:21px;border-radius:22px}.split-content{grid-template-columns:1fr}.filters{display:grid;width:100%}.filters label,.filters select,.filters button{width:100%}.expense-top{padding:22px}.table-footer{display:grid;gap:4px}.auth-card{padding:34px 23px}.edit-grid{grid-template-columns:1fr}.drawer-foot{align-items:flex-start;gap:12px;flex-direction:column}.drawer-foot>div:last-child{width:100%;display:flex;justify-content:flex-end}}
@media print{.site-header,.filters,.drawer,.drawer-backdrop,.auth-screen,.button{display:none!important}body{background:#fff}.hero,.panel,.ticker>div{box-shadow:none}.hero{min-height:auto}.hero-art{display:none}.hero{grid-template-columns:1fr}.story-grid{grid-template-columns:1fr 1fr}main{max-width:none;padding:0}}

/* Refined layout: playful accents without an oversized hero */
.site-header{height:68px;padding-top:0;padding-bottom:0}
.brand-badge{width:38px;height:38px;border-radius:12px;font-size:19px;box-shadow:3px 3px 0 var(--ink)}
.brand b{font-size:16px}
main{padding-top:8px}
.hero{min-height:360px;padding:40px 46px;grid-template-columns:1.05fr .95fr;border-radius:30px}
.hero h1{font-size:clamp(44px,6vw,76px);line-height:.95;margin:8px 0 14px}
.hero h1 span{font-size:.58em;display:block;margin-top:9px}
.hero-intro{max-width:520px;font-size:17px}
.hero-art{min-height:270px}
.big-total{padding:22px 24px}
.big-total strong{font-size:42px}
.ticker{margin:18px 0}
.ticker>div{min-height:104px;padding:18px}
.story-grid{margin:20px 0}
.panel{border-radius:24px}
.auth-card{width:min(500px,100%);padding:38px}
.auth-card h1{font-size:clamp(32px,5vw,46px);line-height:1.05}
.login-options{display:grid;gap:12px;margin-top:18px}
.login-options .login-button{margin-top:0}
.button-microsoft{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--yellow)}
.auth-denied{background:#fff3f3}
@media(max-width:980px){.site-header{height:auto}.hero{min-height:0;padding:34px}.hero h1{font-size:56px}}
@media(max-width:640px){.hero{padding:26px 20px}.hero h1{font-size:44px}.hero-art{height:230px;min-height:230px}.auth-card{padding:30px 22px}}

/* Subtle expandable entry log */
.expense-last-cell{position:relative;padding-right:58px!important}.entry-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:31px;height:31px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:17px;line-height:1}.entry-toggle:hover,.entry-toggle[aria-expanded="true"]{color:var(--ink);border-color:var(--ink);background:#fffaf0}.entry-toggle small{position:absolute;right:-5px;top:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:10px;background:var(--ink);color:#fff;font-size:9px;display:grid;place-items:center}.entry-detail-row>td{padding:0!important;background:#fffaf0}.entry-panel{padding:7px 18px 14px 42px;border-top:1px dashed var(--line);position:relative}.entry-row{display:grid;grid-template-columns:110px minmax(150px,1fr) 90px 24px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.entry-row time{color:var(--muted)}.entry-row strong{text-align:right}.entry-delete{border:0;background:transparent;color:#aaa;cursor:pointer;font-size:18px}.entry-delete:hover{color:#b42318}.entry-empty{padding:14px 0;color:var(--muted);font-size:13px}.entry-add{width:29px;height:29px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;margin-top:10px}.entry-add:hover{color:var(--ink);border-color:var(--ink)}
.entry-dialog{width:min(470px,calc(100% - 28px));border:2px solid var(--ink);border-radius:24px;padding:0;background:#fffaf0;box-shadow:8px 8px 0 var(--ink)}.entry-dialog::backdrop{background:rgba(32,32,53,.55)}.entry-dialog form{padding:23px}.entry-dialog-head,.entry-dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:16px}.entry-dialog-head h2{margin:0;font-size:25px}.entry-dialog-fields{display:grid;gap:14px;margin:22px 0}.entry-dialog-fields label{display:grid;gap:5px}.entry-dialog-fields label>span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:1000}.entry-dialog-fields input{width:100%;border:2px solid var(--ink);border-radius:11px;padding:11px;background:#fff}.money-input{display:grid;grid-template-columns:42px 1fr}.money-input b{display:grid;place-items:center;border:2px solid var(--ink);border-right:0;border-radius:11px 0 0 11px;background:var(--yellow)}.money-input input{border-radius:0 11px 11px 0}.entry-dialog-foot span{color:#b42318;font-size:12px}
@media(max-width:640px){.table-wrap{overflow:visible}table{min-width:0}thead{display:none}.expense-main-row{display:grid;grid-template-columns:1fr 1fr;margin:12px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}.expense-main-row td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-top:1px solid var(--line);text-align:right!important}.expense-main-row td:first-child{grid-column:1/-1;border-top:0;padding:14px 12px}.expense-main-row td::before{content:attr(data-label);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:1000;text-align:left}.expense-main-row td:first-child::before{display:none}.expense-main-row td:nth-child(2),.expense-main-row td:nth-child(3){border-top:0}.expense-last-cell{padding-right:48px!important}.entry-toggle{right:10px}.entry-detail-row{display:block;margin:0 12px 14px}.entry-detail-row td{display:block;border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px}.entry-panel{padding:6px 12px 12px}.entry-row{grid-template-columns:1fr auto 23px;gap:8px}.entry-row time{grid-column:1/-1;font-size:11px}.entry-row strong{text-align:right}.table-footer{margin-top:8px}}

/* Contribution chart refresh -------------------------------------------------
   app.js draws the split with var(--blue) and var(--violet).
   Keep --violet as an alias so both sections of the ring always render. */
:root{
  --violet:var(--purple);
}

.split-panel{
  position:relative;
  overflow:hidden;
}

.split-content{
  grid-template-columns:minmax(220px,.9fr) minmax(250px,1.1fr);
  gap:34px;
  align-items:center;
  padding-top:28px;
}

.donut-wrap{
  min-height:260px;
}

.donut{
  width:230px;
  height:230px;
  padding:25px;
  border:2px solid var(--ink);
  filter:drop-shadow(7px 8px 0 rgba(32,32,53,.12));
  transition:background .35s ease;
}

.donut-hole{
  border:2px solid var(--ink);
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.55);
}

.donut-hole span{
  margin-bottom:2px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.donut-hole strong{
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.035em;
}

/* The label was visually competing with the chart. */
.donut-note{
  display:none;
}

.payer-cards{
  gap:14px;
}

.payer{
  min-height:84px;
  padding:16px 18px;
  border-radius:20px;
  box-shadow:4px 4px 0 rgba(32,32,53,.10);
}

.payer>span{
  width:48px;
  height:48px;
  border-radius:15px;
  font-size:20px;
}

.payer small{
  margin-bottom:1px;
  color:var(--muted);
  font-weight:800;
}

.payer strong{
  font-size:23px;
  line-height:1.1;
  letter-spacing:-.025em;
}

/* Category chart: stronger, easier-to-read bars. */
.category-chart{
  gap:17px;
  padding-top:28px;
}

.bar-row{
  grid-template-columns:105px minmax(120px,1fr) 86px;
  gap:14px;
}

.bar-track{
  height:20px;
  background:#eeeae0;
  border:1.5px solid var(--ink);
  box-shadow:inset 0 2px 0 rgba(32,32,53,.05);
}

.bar-fill{
  min-width:7px;
  border-right:1.5px solid var(--ink);
  transition:width .4s ease;
}

@media(max-width:640px){
  .split-content{
    grid-template-columns:1fr;
    gap:22px;
  }

  .donut-wrap{
    min-height:225px;
  }

  .donut{
    width:205px;
    height:205px;
    padding:22px;
  }

  .donut-hole strong{
    font-size:27px;
  }

  .payer-cards{
    grid-template-columns:1fr 1fr;
  }

  .payer{
    min-height:0;
    display:grid;
    justify-items:start;
    gap:9px;
    padding:14px;
  }

  .payer>span{
    width:40px;
    height:40px;
  }

  .payer strong{
    font-size:19px;
  }

  .bar-row{
    grid-template-columns:74px minmax(90px,1fr) 72px;
    gap:9px;
  }

  .bar-value{
    font-size:12px;
  }
}