.layout{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-6);align-items:start}
.inputPanel{padding:var(--space-5)}
.inputPanel,.resultPanel{--r:var(--space-3)}

.panelHeader-result{align-items:center}
.inputPanel .sectionTitle,.inputPanel .panelHeader h2,.resultPanel .panelHeader h2{margin-block:0;line-height:var(--line-height-tight)}
.inputPanel .sectionTitle{margin-bottom:var(--r)}
.inputPanel .divider,.resultPanel .divider{margin-block:var(--r)}
.inputPanel .row{margin:0;gap:var(--r)}
.inputPanel .row + .row{margin-top:var(--r)}

.row > *{flex:1 1 240px;min-width:0}
.row > .full,.row > button{flex:1 1 100%}
.full{flex-basis:100%;width:100%}
.row > * input[type="range"],.row > * select{min-height:42px}
#lockedCardsPanel{margin-top:0}

.checkboxLabel{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--color-text);font-size:var(--font-size-base);cursor:pointer}
.checkboxLabel input[type="checkbox"]{width:var(--space-7);height:var(--space-7);accent-color:var(--color-accent);transition:transform .12s ease,box-shadow .18s ease}
.checkboxLabel input[type="checkbox"]:is(:hover,:focus-visible){transform:scale(1.06);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 24%,transparent)}
.checkboxLabel input[type="checkbox"]:checked{box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 68%,var(--color-border) 32%)}
.value-pill{display:inline-flex;align-items:center;justify-content:center;min-width:1.9em;margin-left:var(--space-2);padding:var(--space-1) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--color-accent) 22%,transparent);font-size:var(--font-size-sm);font-weight:700}

.loadingState{display:inline-flex;align-items:center;gap:var(--space-4);color:var(--color-muted)}
.loadingSpinner{width:var(--space-6);height:var(--space-6);border:2px solid color-mix(in srgb,var(--color-accent) 20%,transparent);border-top-color:var(--color-accent);border-radius:50%;animation:spin .75s linear infinite}
.resultPanel #result.is-loading{min-height:120px;display:flex;align-items:center;justify-content:center}
.resultPanel #result.resultEmpty{display:flex;align-items:center;justify-content:center;min-height:150px;padding:var(--space-5);border:1px dashed color-mix(in srgb,var(--color-border) 72%,var(--color-muted) 28%);border-radius:var(--radius-lg);background:color-mix(in srgb,var(--color-panel) 72%,transparent);text-align:center;color:color-mix(in srgb,var(--color-muted) 82%,var(--color-text) 18%);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}
.resultPanel #result.resultEmpty :is(.badge,h2,table,.divider,.tileGrid,.earnRateCallout){display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes resultEnter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.resultPanel #result .resultContent--enter{animation:resultEnter .18s ease-out both}

#clearSpendBtn{border-color:var(--color-border);color:var(--color-muted)}
#clearSpendBtn:hover{color:var(--color-text);border-color:color-mix(in srgb,var(--color-border) 75%,var(--color-text) 25%)}
.spendActions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-3)}
.spendActions button{width:auto;padding:var(--space-3) var(--space-5);font-size:var(--font-size-sm)}
.spendTotal{margin:0;font-size:var(--font-size-sm)}

.spendGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.spendRow{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;gap:var(--space-3);margin:0;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-panel) 75%,transparent)}
.spendRowTop{display:contents}
.spendMeta{min-width:0;overflow:hidden;color:var(--color-muted)}
.spendCat{display:block;font-size:var(--font-size-sm);line-height:var(--line-height-compact);color:inherit;}
.spendMetaControls{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-1);line-height:var(--line-height-compact);flex-wrap:nowrap;white-space:nowrap}
.spendControl summary{list-style:none;cursor:pointer;color:var(--color-muted);font-size:var(--font-size-xs);line-height:var(--line-height-compact);display:inline-flex;align-items:center;gap:var(--space-1);white-space:nowrap}
.spendControl summary::-webkit-details-marker{display:none}
.spendControlLabel{text-decoration:underline}
.spendControlCaret{display:inline-block;font-size:var(--font-size-2xl);line-height:1;transition:transform .2s ease}
.spendControl[open] .spendControlCaret{transform:rotate(180deg)}
.spendRow input[type="number"].spend-input{width:100%;min-width:0;max-width:none;padding:var(--space-2) var(--space-3)}
.spendRow input[type="number"].spend-input::placeholder{color:color-mix(in srgb,var(--color-muted) 72%,var(--color-bg) 28%);opacity:1}
.spendControlPanel{display:none;grid-column:1/-1;padding:0;margin-top:var(--space-1);font-size:var(--font-size-xs);line-height:1.25}
.spendRow.is-more-details-open{grid-column:1/-1}
.spendRow.is-more-details-open .spendMoreDetailsPanel{display:block}
.spendDetailsPanel{margin-bottom:var(--space-2)}
.spendMoreDetailsPanel .spendDetailsPanel:last-child{margin-bottom:0}
.subcategoryPanel{display:grid;gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));padding:0}
.subcategoryItem{display:grid;grid-template-columns:minmax(0,1fr) 92px;grid-template-areas:"label input" "hint input";align-items:start;column-gap:var(--space-2);row-gap:var(--space-1);padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-panel) 75%,transparent);box-sizing:border-box}
.subcategoryItem>label{grid-area:label;margin:0}
.subcategoryItem .spendCat{color:var(--color-muted)}
.subcategoryItem .spend-input{grid-area:input;align-self:start}
.subcategoryHint{grid-area:hint;margin:0}

.divider-tight{margin-block:var(--space-5) var(--space-3)}
.earnRateCallout{margin:var(--space-4) 0 0;font-size:clamp(var(--font-size-lg),1.5vw,var(--font-size-2xl));font-weight:700;line-height:1.2;color:var(--color-brand-highlight)}
.chexyWorthIt{margin:var(--space-2) 0 0;font-size:var(--font-size-sm)}
.resultPanel #result table :is(th,td){padding:var(--space-3)}
.resultPanel #result table th{font-weight:600;color:var(--color-muted);width:62%}
.useHeading{margin-bottom:var(--space-3)}
.tileGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.tile{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-panel) 75%,transparent);text-align:center}
.tileTitle{font-size:var(--font-size-sm);line-height:var(--line-height-compact)}
.tileMedia{--tile-thumb-landscape-width:clamp(58px,11vw,88px);width:100%;display:flex;justify-content:center}
.tileMedia-single .tileThumb{width:var(--tile-thumb-landscape-width);aspect-ratio:var(--card-aspect-ratio)}
.tileMedia-single .tileThumb.tileThumb-portrait{width:calc(var(--tile-thumb-landscape-width) / (var(--card-aspect-ratio)));aspect-ratio:var(--card-aspect-ratio-portrait)}
.tileMedia-stack{position:relative;width:var(--tile-thumb-landscape-width);height:calc((var(--tile-thumb-landscape-width) / (var(--card-aspect-ratio))) + (var(--stack-count,1) - 1) * clamp(6px,1.1vw,10px))}
.tileMedia-stack .tileThumb{position:absolute;inset-inline:0;top:calc(var(--stack-index,0) * clamp(6px,1.1vw,10px));width:100%;aspect-ratio:var(--card-aspect-ratio);z-index:calc(1 + var(--stack-index,0))}
.tileThumb{position:relative;display:flex;align-items:center;justify-content:center;line-height:0}
.tileThumb:is(:focus-visible,:hover){z-index:31}
.tileThumb[data-card]:is(:focus-visible,:hover)::after{content:attr(data-card);position:absolute;left:50%;bottom:calc(100% + var(--space-2));transform:translateX(-50%);padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-accent-contrast);color:var(--color-text);font-size:11px;line-height:var(--line-height-compact);white-space:nowrap;z-index:30;pointer-events:none}
.tileThumb .thumb{width:100%;height:100%}
.tileMedia-stack .tileThumb .thumb.is-portrait{position:absolute;left:50%;top:50%;width:calc(100% / (var(--card-aspect-ratio)));height:calc(100% * var(--card-aspect-ratio));transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center}

.issues{margin-top:var(--space-5);padding:var(--space-4) var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-xl)}
.inputPanel .issues{margin-top:var(--r)}
.issues summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);font-weight:700;color:var(--color-text);list-style:none;cursor:pointer}
.issues summary::-webkit-details-marker{display:none}
.issues summary::after{content:"▾";display:inline-block;line-height:1;transition:transform .2s ease}
.issues[open] summary::after{transform:rotate(180deg)}
.issuesBody{max-height:0;overflow:hidden;opacity:0;transform:translateY(calc(-1 * var(--space-2)));transition:max-height .3s ease,opacity .22s ease,transform .22s ease}
.issues[open] .issuesBody{max-height:420px;opacity:1;transform:translateY(0)}
.issues ul{margin:var(--space-4) 0 0;padding-left:18px}
.issues li{margin:var(--space-2) 0;color:var(--color-muted)}

.advancedPrefs{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4)}
.advancedPrefs summary{font-weight:700;cursor:pointer;list-style:none}
.advancedPrefs summary::-webkit-details-marker{display:none}
.advancedPrefs summary::after{content:"▾";float:right;transition:transform .2s ease}
.advancedPrefs[open] summary::after{transform:rotate(180deg)}
.advancedPrefsBody{display:grid;gap:var(--space-3);margin-top:var(--space-3)}
.advancedField{display:grid;gap:var(--space-2)}

#excludedProgramPicks .chip{border:1px solid color-mix(in srgb,#dc2626 35%,var(--color-border));border-radius:var(--radius-sm);background:color-mix(in srgb,#dc2626 14%,transparent)}
.advancedProgramPrefs{display:grid;gap:var(--space-3)}
.advancedProgramPrefs h4{margin:0}

@media (prefers-reduced-motion:reduce){.spendControlCaret,.issues summary::after,.issuesBody{transition:none}.issuesBody{transform:none}.resultPanel #result .resultContent--enter{animation:none;transform:none}}

@media (max-width:900px){.layout{grid-template-columns:1fr}.spendRow{grid-template-columns:1fr;align-items:start}.spendInputWrap{grid-column:1/-1}.spendRowTop,.subcategoryItem{grid-template-columns:1fr;align-items:start;gap:var(--space-2)}.subcategoryPanel{grid-template-columns:1fr}.spendMeta{overflow:visible}.spendMetaControls{white-space:normal}.spendCat{white-space:normal;overflow:visible;text-overflow:clip}.tileGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:380px){.tileGrid{grid-template-columns:1fr}}

.shareLaunch{width:auto;padding:var(--space-2) var(--space-3);border:1px solid color-mix(in srgb,var(--color-accent) 70%,var(--color-border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-accent) 20%,transparent);color:var(--color-text);font-size:var(--font-size-sm);font-weight:700;box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 34%,transparent),0 0 14px color-mix(in srgb,var(--color-accent) 28%,transparent),0 0 24px color-mix(in srgb,var(--color-accent) 20%,transparent);animation:contactBtnGlowPulse 1.9s ease-in-out infinite alternate}
.shareLaunch:hover:not(:disabled){background:color-mix(in srgb,var(--color-accent) 30%,transparent);border-color:color-mix(in srgb,var(--color-accent) 82%,var(--color-text) 18%);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 46%,transparent),0 0 18px color-mix(in srgb,var(--color-accent) 36%,transparent),0 0 30px color-mix(in srgb,var(--color-accent) 26%,transparent)}
.shareLaunch:active:not(:disabled){background:color-mix(in srgb,var(--color-accent) 40%,transparent);transform:translateY(1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-accent) 28%,transparent),0 0 8px color-mix(in srgb,var(--color-accent) 22%,transparent)}

.shareOverlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--space-6)}
.shareOverlay.hidden{display:none}
.shareOverlay__backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--color-bg) 86%,transparent);backdrop-filter:blur(2px)}
.shareOverlay__dialog{position:relative;z-index:1;width:fit-content;min-width:min(100%,540px);max-height:calc(100vh - var(--space-8));display:grid;gap:var(--space-4);padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-panel);box-shadow:0 24px 64px color-mix(in srgb,#000 45%,transparent);overflow:auto}
.shareOverlay__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.shareOverlay__close{min-width:auto}
.shareOverlay__body{display:flex;justify-content:center}
.shareOverlay__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}

.shareCard{width:100%;max-width:560px;min-width:min(100%,500px);aspect-ratio:1/1;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--space-2);padding:var(--space-6);border-radius:var(--radius-xl);border:1px solid color-mix(in srgb,var(--color-accent) 22%,var(--color-border));background:linear-gradient(150deg,color-mix(in srgb,var(--color-panel) 80%,var(--color-accent) 20%) 0%,color-mix(in srgb,var(--color-panel) 92%,var(--color-bg) 8%) 55%,color-mix(in srgb,var(--color-brand-highlight) 16%,var(--color-panel) 84%) 100%)}
:root[data-theme="light"] .shareCard{background:linear-gradient(150deg,#fff 0%,#f7f9ff 58%,#e8efff 100%)}
:root[data-theme="dark"] .shareCard{background:linear-gradient(150deg,#1d2437 0%,#151b2b 58%,#111624 100%)}
.shareCard__summary{display:grid;align-content:start;gap:2px}
.shareCard__kicker{margin:0;padding:0;color:var(--color-muted);font-size:var(--font-size-sm);font-weight:600;line-height:1.15;letter-spacing:.04em;text-transform:uppercase}
.shareCard__headline{margin:var(--space-1) 0 0;padding:0;font-size:clamp(var(--font-size-xl),2.8vw,var(--font-size-3xl));line-height:1.12}
.shareCard__heroValue{margin:0;padding:0;font-size:clamp(40px,7vw,64px);line-height:.92;font-weight:800;color:var(--color-brand-highlight)}
.shareCard__heroLabel{margin:var(--space-1) 0 0;padding:0;color:var(--color-muted);font-size:var(--font-size-sm);line-height:1.2}
.shareCard__thumbs{--share-thumb-landscape:84px;--share-thumb-portrait:84px;height:100%;display:grid;align-content:center;justify-items:center;gap:var(--space-2);margin-top:0}
.shareCard__thumbRow{display:flex;gap:var(--space-3);justify-content:center;align-items:flex-end;width:fit-content;margin-inline:auto}
.shareCard__thumb{width:calc(var(--share-thumb-landscape) * (var(--card-aspect-ratio)));display:flex;align-items:center;justify-content:center;flex:0 0 auto;border:none;border-radius:0;background:transparent;box-shadow:none}
.shareCard__thumb--portrait{width:var(--share-thumb-portrait)}
.shareCard__thumb .thumb{display:block;height:var(--share-thumb-landscape);width:auto;max-width:100%;border:none;border-radius:0;background:transparent;box-shadow:none}
.shareCard__thumb .thumb.is-portrait{width:var(--share-thumb-portrait);height:auto}
.shareCard__footer{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-1);align-self:end}
.shareCard__cta{margin:0;font-size:var(--font-size-base);font-weight:700}
.shareCard__urlRow{margin:0;color:var(--color-muted);font-size:var(--font-size-base)}
.shareCard__qr{width:88px;height:88px;padding:var(--space-1);border-radius:var(--radius-sm);background:#fff;object-fit:contain}

@media (prefers-reduced-motion:reduce){.shareOverlay__dialog{scroll-behavior:auto}}
@media (max-width:720px){.shareOverlay{padding:var(--space-3)}.shareOverlay__dialog{width:100%;min-width:0;max-width:100%;padding:var(--space-4);max-height:calc(100vh - var(--space-3));border-radius:var(--radius-lg)}.shareCard{min-width:0;padding:var(--space-4)}.shareOverlay__actions{grid-template-columns:1fr}}