/* Credit Card Tracker: approved design scoped to this workspace. */
#appShell.ui-workspace #paneCreditCards { display:block; min-width:0; container-type:inline-size; --table-stripe-odd:transparent; --table-stripe-even:transparent; --table-row-hover:var(--ui-surface-muted); --table-header-bg:var(--ui-surface-muted); }
#appShell.ui-workspace #paneCreditCards:is(.u-hidden,[hidden]) { display:none; }
#appShell #paneCreditCards * { box-sizing:border-box }
#appShell #paneCreditCards button, #appShell #paneCreditCards input, #appShell #paneCreditCards select, #appShell #paneCreditCards textarea { font:inherit;color:inherit }
#appShell #paneCreditCards button { cursor:pointer;background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:7px;padding:9px 13px;font-size:11px;font-weight:550 }
#appShell #paneCreditCards button:hover { border-color:var(--ui-blue) }
#appShell #paneCreditCards button:disabled { opacity:.45;cursor:default }
#appShell #paneCreditCards button:focus-visible, #appShell #paneCreditCards input:focus-visible, #appShell #paneCreditCards select:focus-visible, #appShell #paneCreditCards textarea:focus-visible { outline:3px solid #87b8f5;outline-offset:3px }
#appShell #paneCreditCards [hidden] { display:none!important }
#appShell #paneCreditCards h1, #appShell #paneCreditCards h2, #appShell #paneCreditCards h3, #appShell #paneCreditCards p { margin:0 }
#appShell #paneCreditCards h2 { font-size:14px;font-weight:650;letter-spacing:-.2px }
#appShell #paneCreditCards h3 { font-size:13px }
#appShell #paneCreditCards small { font-size:10px;color:var(--ui-ink-secondary);line-height:1.7 }
#appShell #paneCreditCards button.cards-primary { background:#1671ec;border-color:#1671ec;color:white }
#appShell #paneCreditCards .cards-link { border:0;padding:3px 0;background:none;color:var(--ui-blue);text-align:left;box-shadow:none }
#appShell #paneCreditCards .cards-danger { color:var(--ui-red) }
#appShell #paneCreditCards .cards-row { display:flex;align-items:center;gap:10px }
#appShell #paneCreditCards .cards-between { justify-content:space-between }
#appShell #paneCreditCards .cards-muted { color:var(--ui-ink-secondary) }
#appShell #paneCreditCards .cards-eyebrow { display:block;font-size:9px;text-transform:uppercase;letter-spacing:1.7px;color:var(--ui-ink-secondary);font-weight:650;margin-bottom:11px }
#appShell #paneCreditCards .cards-icon { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none }
#appShell #paneCreditCards .cards-pagehead { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px }
#appShell #paneCreditCards h1 { font-size:31px;font-weight:650;letter-spacing:-1.2px;line-height:1.2 }
#appShell #paneCreditCards .cards-pagehead p { font-size:13px;color:var(--ui-ink-secondary);margin-top:12px;line-height:1.6 }
#appShell #paneCreditCards .cards-actions { display:flex;gap:9px;flex-wrap:wrap }
#appShell #paneCreditCards .cards-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:11px;margin-bottom:24px;overflow:hidden }
#appShell #paneCreditCards .cards-metric { display:block;text-align:left;padding:23px;border:0;border-right:1px solid var(--ui-line);border-radius:0;background:none;min-width:0 }
#appShell #paneCreditCards .cards-metric:last-child { border-right:0 }
#appShell #paneCreditCards .cards-metric-label { color:var(--ui-ink-secondary);font-size:11px;margin-bottom:12px;display:flex;justify-content:space-between }
#appShell #paneCreditCards .cards-metric strong { display:block;font-size:27px;letter-spacing:-.85px;margin-bottom:7px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums }
#appShell #paneCreditCards .cards-metric small { font-weight:400 }
#appShell #paneCreditCards .cards-notice { display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid color-mix(in srgb,var(--ui-amber) 26%,var(--ui-line));border-radius:9px;background:var(--ui-amber-soft);color:var(--ui-amber);padding:14px 17px;margin-bottom:24px;font-size:11px;line-height:1.7 }
#appShell #paneCreditCards .cards-notice .cards-link { color:inherit;white-space:nowrap }
#appShell #paneCreditCards .cards-viewbar { display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:15px;border-bottom:1px solid var(--ui-line) }
#appShell #paneCreditCards .cards-tabs { display:flex;gap:6px;flex-wrap:wrap }
#appShell #paneCreditCards .cards-tabs button { background:none;border-color:transparent;color:var(--ui-ink-secondary);padding:9px 11px }
#appShell #paneCreditCards .cards-tabs button[aria-pressed=true] { background:var(--ui-blue-soft);border-color:color-mix(in srgb,var(--ui-blue) 25%,var(--ui-line));color:var(--ui-blue) }
#appShell #paneCreditCards .cards-count { font-size:9px;padding:3px 5px;background:var(--ui-surface-muted);border:1px solid var(--ui-line);border-radius:4px;margin-left:6px;color:var(--ui-ink-secondary) }
#appShell #paneCreditCards .cards-search { display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--ui-line);border-radius:7px;background:var(--ui-surface);color:var(--ui-ink-secondary);width:235px }
#appShell #paneCreditCards .cards-search input { border:0;background:none;min-width:0;width:100%;font-size:11px }
#appShell #paneCreditCards .cards-search:focus-within { outline:2px solid var(--ui-blue) }
#appShell #paneCreditCards .cards-search input:focus { outline:0 }
#appShell #paneCreditCards .cards-layout { display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:23px;align-items:start }
#appShell #paneCreditCards .cards-maincol, #appShell #paneCreditCards .cards-sidecol { min-width:0;display:grid;gap:19px }
#appShell #paneCreditCards .cards-sectionhead { display:flex;justify-content:space-between;align-items:center;gap:12px }
#appShell #paneCreditCards .cards-sectionhead small { display:block;margin-top:7px }
#appShell #paneCreditCards .cards-filters { display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:10px;color:var(--ui-ink-secondary) }
#appShell #paneCreditCards .cards-filters label { display:flex;align-items:center;gap:6px }
#appShell #paneCreditCards .cards-filters select { background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:6px;padding:7px;max-width:175px;font-size:10px }
#appShell #paneCreditCards .cards-cardgrid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px }
#appShell #paneCreditCards .cards-credit-card { background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:11px;overflow:hidden;min-width:0 }
#appShell #paneCreditCards .cards-cardtop { padding:19px 19px 16px;display:flex;align-items:flex-start;gap:12px }
#appShell #paneCreditCards .cards-card-mark { width:43px;height:32px;display:grid;place-items:center;flex:none;border-radius:7px;background:linear-gradient(135deg,#22394d,#3f6586);border:1px solid #728ba535;color:#e4f0fb;font-size:10px;letter-spacing:1px;font-weight:650;position:relative }
#appShell #paneCreditCards .cards-card-mark::after { content:"";position:absolute;right:5px;bottom:5px;width:7px;height:5px;border:1px solid #b3c8db80;border-radius:1px }
#appShell #paneCreditCards .cards-card-mark.cards-gold { background:linear-gradient(135deg,#7b6341,#b29a73);color:#fff7df }
#appShell #paneCreditCards .cards-card-mark.cards-red { background:linear-gradient(135deg,#8c4b51,#b7787a);color:#fff0ef }
#appShell #paneCreditCards .cards-card-mark.cards-green { background:linear-gradient(135deg,#305f53,#4d8977);color:#e3f8ef }
#appShell #paneCreditCards .cards-card-mark.cards-violet { background:linear-gradient(135deg,#514a75,#8477a3);color:#f7efff }
#appShell #paneCreditCards .cards-card-mark.cards-slate { background:linear-gradient(135deg,#485666,#768496) }
#appShell #paneCreditCards .cards-card-name { border:0;padding:0;text-align:left;background:none;font-size:12px;font-weight:650;line-height:1.6;overflow-wrap:anywhere }
#appShell #paneCreditCards .cards-card-name:hover { color:var(--ui-blue) }
#appShell #paneCreditCards .cards-cardtop small { display:block;font-size:9px;margin-top:4px }
#appShell #paneCreditCards .cards-cardtop .cards-view { margin-left:auto;padding:2px 4px;border:0;background:none;color:var(--ui-ink-secondary);font-size:16px }
#appShell #paneCreditCards .cards-cardbody { padding:0 19px 18px }
#appShell #paneCreditCards .cards-badge { display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border-radius:5px;font-size:9px;font-weight:550;background:var(--ui-blue-soft);color:var(--ui-blue);white-space:nowrap }
#appShell #paneCreditCards .cards-badge.cards-warn { background:var(--ui-amber-soft);color:var(--ui-amber) }
#appShell #paneCreditCards .cards-badge.cards-danger { background:var(--ui-red-soft);color:var(--ui-red) }
#appShell #paneCreditCards .cards-badge.cards-paid { background:var(--ui-green-soft);color:var(--ui-green) }
#appShell #paneCreditCards .cards-card-amounts { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 }
#appShell #paneCreditCards .cards-card-amounts small { font-size:9px }
#appShell #paneCreditCards .cards-card-amounts strong { display:block;font-size:20px;letter-spacing:-.55px;margin-top:6px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums }
#appShell #paneCreditCards .cards-card-amounts div:last-child strong { font-size:17px;font-weight:550;color:var(--ui-ink) }
#appShell #paneCreditCards .cards-capacity-label { display:flex;justify-content:space-between;gap:8px;font-size:9px;color:var(--ui-ink-secondary) }
#appShell #paneCreditCards progress { display:block;width:100%;height:5px;border:0;border-radius:4px;overflow:hidden;background:var(--ui-line);accent-color:var(--ui-blue);margin:9px 0 }
#appShell #paneCreditCards progress::-webkit-progress-bar { background:var(--ui-line) }
#appShell #paneCreditCards progress::-webkit-progress-value { background:var(--ui-blue);border-radius:4px }
#appShell #paneCreditCards progress::-moz-progress-bar { background:var(--ui-blue) }
#appShell #paneCreditCards .cards-capacity-label strong { color:var(--ui-ink);font-weight:550 }
#appShell #paneCreditCards .cards-cardfoot { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 19px;border-top:1px solid var(--ui-line);background:var(--ui-surface-muted);font-size:9px }
#appShell #paneCreditCards .cards-status-dot { display:inline-flex;align-items:center;gap:5px;color:var(--ui-ink-secondary) }
#appShell #paneCreditCards .cards-status-dot::before { content:"";width:5px;height:5px;border-radius:50%;background:currentColor }
#appShell #paneCreditCards .cards-status-dot.cards-done { color:var(--ui-green) }
#appShell #paneCreditCards .cards-cardfoot .cards-link { font-size:10px }
#appShell #paneCreditCards .cards-panel { background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:11px;min-width:0;overflow:hidden }
#appShell #paneCreditCards .cards-sidepanel { padding:21px }
#appShell #paneCreditCards .cards-sidehead { display:flex;align-items:center;justify-content:space-between;margin-bottom:7px }
#appShell #paneCreditCards .cards-sidepanel>.cards-link { margin-top:18px }
#appShell #paneCreditCards .cards-schedule-item { display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--ui-line) }
#appShell #paneCreditCards .cards-schedule-item:last-child { border:0;padding-bottom:0 }
#appShell #paneCreditCards .cards-date-chip { border:1px solid var(--ui-line);background:var(--ui-surface-muted);border-radius:7px;text-align:center;padding:6px 2px }
#appShell #paneCreditCards .cards-date-chip small { font-size:8px;text-transform:uppercase;display:block;line-height:1.3 }
#appShell #paneCreditCards .cards-date-chip b { font-size:15px;display:block;margin-top:3px }
#appShell #paneCreditCards .cards-schedule-copy button { font-size:11px;padding:0;border:0;background:none;text-align:left;line-height:1.5 }
#appShell #paneCreditCards .cards-schedule-copy small { display:block;font-size:9px;margin-top:5px }
#appShell #paneCreditCards .cards-schedule-copy .cards-amount { color:var(--ui-ink);font-weight:600 }
#appShell #paneCreditCards .cards-utilization { display:flex;align-items:center;gap:17px;margin:24px 0 19px }
#appShell #paneCreditCards .cards-ring { position:relative;width:78px;height:78px;flex:none }
#appShell #paneCreditCards .cards-ring svg { width:78px;height:78px;transform:rotate(-90deg) }
#appShell #paneCreditCards .cards-ring circle { fill:none;stroke-width:6;stroke:var(--ui-line) }
#appShell #paneCreditCards .cards-ring .cards-value { stroke:var(--ui-blue);stroke-linecap:round }
#appShell #paneCreditCards .cards-ring strong { position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:600;letter-spacing:-.6px }
#appShell #paneCreditCards .cards-fact { display:flex;justify-content:space-between;gap:12px;font-size:10px;padding:12px 0;border-top:1px solid var(--ui-line);color:var(--ui-ink-secondary) }
#appShell #paneCreditCards .cards-fact b { color:var(--ui-ink);font-weight:550 }
#appShell #paneCreditCards .cards-channel { display:flex;gap:10px;align-items:center;padding:15px 0;border-bottom:1px solid var(--ui-line) }
#appShell #paneCreditCards .cards-channel:last-child { border:0 }
#appShell #paneCreditCards .cards-channel-mark { width:26px;height:26px;border:1px solid var(--ui-line);border-radius:6px;display:grid;place-items:center;color:var(--ui-ink-secondary);background:var(--ui-surface-muted);font-size:12px }
#appShell #paneCreditCards .cards-channel b { font-size:11px }
#appShell #paneCreditCards .cards-channel small { display:block;font-size:9px }
#appShell #paneCreditCards .cards-channel .cards-link { margin-left:auto;font-size:10px }
#appShell #paneCreditCards .cards-footnote { font-size:10px;line-height:1.8;color:var(--ui-ink-secondary) }
#appShell #paneCreditCards .cards-footer { border-top:1px solid var(--ui-line);margin-top:30px;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px;color:var(--ui-ink-secondary) }
#appShell #paneCreditCards .cards-tablewrap { width:100%;overflow:auto }
#appShell #paneCreditCards table { width:100%;border-collapse:collapse;text-align:left;min-width:880px }
#appShell #paneCreditCards th { font-size:8px;text-transform:uppercase;letter-spacing:.7px;font-weight:600;padding:13px 16px;color:var(--ui-ink-secondary);background:var(--ui-surface-muted);white-space:nowrap }
#appShell #paneCreditCards td { padding:18px 16px;border-top:1px solid var(--ui-line);font-size:11px;white-space:nowrap }
#appShell #paneCreditCards td small { display:block;margin-top:5px }
#appShell #paneCreditCards .cards-right { text-align:right }
#appShell #paneCreditCards .cards-tablefoot { padding:15px 19px;border-top:1px solid var(--ui-line);font-size:10px;color:var(--ui-ink-secondary) }
#appShell #paneCreditCards .cards-calendar-head { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px }
#appShell #paneCreditCards .cards-calendar-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:0 12px 12px;gap:4px }
#appShell #paneCreditCards .cards-weekday { text-align:center;font-size:9px;color:var(--ui-ink-secondary);padding:9px 0 }
#appShell #paneCreditCards .cards-day { border:1px solid transparent;border-radius:7px;padding:9px 5px;background:var(--ui-surface-muted);min-height:83px;text-align:left;display:flex;flex-direction:column;gap:9px;font-size:11px;min-width:0 }
#appShell #paneCreditCards .cards-day.cards-today { border-color:var(--ui-blue);color:var(--ui-blue) }
#appShell #paneCreditCards .cards-day.cards-selected { background:var(--ui-blue-soft);border-color:var(--ui-blue) }
#appShell #paneCreditCards .cards-day .cards-day-total { font-size:8px;overflow-wrap:anywhere;color:var(--ui-ink) }
#appShell #paneCreditCards .cards-day .cards-pips { display:flex;gap:3px }
#appShell #paneCreditCards .cards-pip { width:5px;height:5px;background:var(--ui-blue);border-radius:50% }
#appShell #paneCreditCards .cards-pip.cards-paid { background:var(--ui-green) }
#appShell #paneCreditCards .cards-pip.cards-danger { background:var(--ui-red) }
#appShell #paneCreditCards .cards-calendar-list { padding:0 20px 20px }
#appShell #paneCreditCards .cards-calendar-event { display:flex;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--ui-line) }
#appShell #paneCreditCards .cards-calendar-event>.cards-amount { margin-left:auto;font-size:12px;font-weight:600 }
#appShell #paneCreditCards .cards-calendar-event small { display:block;margin-top:4px }
#appShell #paneCreditCards .cards-empty { padding:30px;text-align:center;color:var(--ui-ink-secondary);font-size:12px;line-height:1.8 }
#appShell #paneCreditCards dialog { background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);padding:0;box-shadow:0 20px 80px #14203626 }
#appShell #paneCreditCards dialog::backdrop { background:#14203660 }
#appShell #paneCreditCards .cards-drawer { margin:0 0 0 auto;width:min(485px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border-width:0 0 0 1px;overflow:auto }
#appShell #paneCreditCards .cards-dialoghead { padding:26px;border-bottom:1px solid var(--ui-line);display:flex;align-items:flex-start;justify-content:space-between;gap:15px }
#appShell #paneCreditCards .cards-dialoghead h2 { font-size:22px;line-height:1.5;overflow-wrap:anywhere }
#appShell #paneCreditCards .cards-dialoghead small { display:block;margin-top:7px }
#appShell #paneCreditCards .cards-dialogbody { padding:25px }
#appShell #paneCreditCards .cards-hero { background:var(--ui-surface-muted);border:1px solid var(--ui-line);border-radius:10px;padding:21px }
#appShell #paneCreditCards .cards-hero strong { display:block;font-size:31px;letter-spacing:-1px;margin:12px 0 8px }
#appShell #paneCreditCards .cards-facts { display:grid;grid-template-columns:1fr 1fr;gap:21px 17px;margin:24px 0 }
#appShell #paneCreditCards .cards-facts dt { font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--ui-ink-secondary);margin-bottom:7px }
#appShell #paneCreditCards .cards-facts dd { font-size:12px;margin:0;overflow-wrap:anywhere;line-height:1.6 }
#appShell #paneCreditCards .cards-note { padding:14px;background:var(--ui-surface-muted);border:1px solid var(--ui-line);border-radius:8px;font-size:11px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:10px }
#appShell #paneCreditCards .cards-note-heading { margin-top:23px }
#appShell #paneCreditCards .cards-drawer-actions { display:grid;gap:10px;margin-top:24px }
#appShell #paneCreditCards .cards-drawer-actions small { text-align:center }
#appShell #paneCreditCards .cards-modal { border-radius:14px;width:min(680px,calc(100vw - 32px));max-height:92dvh }
#appShell #paneCreditCards .cards-formgrid { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 23px }
#appShell #paneCreditCards .cards-formgrid label { font-size:11px;display:grid;gap:7px;min-width:0;color:var(--ui-ink-secondary) }
#appShell #paneCreditCards .cards-formgrid input, #appShell #paneCreditCards .cards-formgrid textarea { padding:10px 11px;background:var(--ui-surface);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:7px;width:100%;min-width:0;font-size:12px }
#appShell #paneCreditCards .cards-full { grid-column:1/-1 }
#appShell #paneCreditCards .cards-modal-actions { display:flex;justify-content:flex-end;gap:10px;margin-top:20px }
#appShell #paneCreditCards .cards-checks { display:flex;gap:18px;font-size:11px;flex-wrap:wrap }
#appShell #paneCreditCards .cards-checks label { display:flex;gap:7px;align-items:center }
#appShell #paneCreditCards .cards-snapshot { white-space:pre-wrap;font-size:12px;line-height:1.9;background:var(--ui-surface-muted);border:1px solid var(--ui-line);padding:18px;border-radius:9px;margin-top:18px }
@container(min-width:1450px) {
#appShell #paneCreditCards .cards-cardgrid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@container(max-width:1100px) {
#appShell #paneCreditCards .cards-layout { grid-template-columns:minmax(0,1fr) }
#appShell #paneCreditCards .cards-sidecol { grid-template-columns:repeat(3,minmax(0,1fr)) }
#appShell #paneCreditCards .cards-sidecol>.cards-footnote { grid-column:1/-1 }
}
@container(max-width:750px) {
#appShell #paneCreditCards .cards-pagehead { align-items:flex-start;flex-direction:column }
#appShell #paneCreditCards .cards-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) }
#appShell #paneCreditCards .cards-metric:nth-child(2) { border-right:0 }
#appShell #paneCreditCards .cards-metric:nth-child(-n+2) { border-bottom:1px solid var(--ui-line) }
#appShell #paneCreditCards .cards-sidecol { grid-template-columns:1fr 1fr }
#appShell #paneCreditCards .cards-sidecol>.cards-panel:last-of-type { grid-column:1/-1 }
}
@container(max-width:600px) {
#appShell #paneCreditCards .cards-cardgrid { grid-template-columns:minmax(0,1fr) }
#appShell #paneCreditCards .cards-sidecol { grid-template-columns:minmax(0,1fr) }
#appShell #paneCreditCards .cards-metric { padding:18px }
#appShell #paneCreditCards .cards-metric strong { font-size:24px }
#appShell #paneCreditCards .cards-notice { align-items:flex-start;flex-direction:column;gap:8px }
#appShell #paneCreditCards .cards-viewbar { gap:15px }
#appShell #paneCreditCards .cards-search { width:100% }
#appShell #paneCreditCards .cards-formgrid { grid-template-columns:minmax(0,1fr) }
#appShell #paneCreditCards .cards-footer { align-items:flex-start;flex-direction:column }
#appShell #paneCreditCards .cards-calendar-grid { gap:3px;padding:0 8px 8px }
#appShell #paneCreditCards .cards-day { min-height:68px;padding:6px 3px }
#appShell #paneCreditCards .cards-day .cards-day-total { font-size:7px }
#appShell #paneCreditCards .cards-calendar-event { flex-wrap:wrap }
#appShell #paneCreditCards .cards-calendar-event .cards-amount { margin-left:0 }
#appShell #paneCreditCards .cards-dialogbody, #appShell #paneCreditCards .cards-dialoghead { padding:20px }
#appShell #paneCreditCards h1 { font-size:29px }
#appShell #paneCreditCards .cards-filters select { max-width:150px }
#appShell #paneCreditCards .cards-sectionhead { align-items:flex-start }
#appShell #paneCreditCards .cards-card-amounts strong { font-size:23px }
}
@media(pointer:coarse) {
#appShell #paneCreditCards button { min-height:44px }
#appShell #paneCreditCards .cards-day { min-height:70px }
}

#appShell #paneCreditCards .workspace-page-head { margin-bottom:28px; align-items:flex-end; }
#appShell #paneCreditCards .workspace-page-copy { margin-top:12px; font-size:13px; line-height:1.6; }
#appShell #paneCreditCards .cards-actions { margin-left:auto; }
#appShell #paneCreditCards dialog { background:var(--ui-surface-solid); }
#appShell #paneCreditCards .cards-calendar-subhead { padding:12px 0; }
#appShell #paneCreditCards .cards-calendar-event .cards-date-chip { width:36px; flex:none; }
#appShell #paneCreditCards .cards-empty-upcoming { margin-top:16px; }
#appShell #paneCreditCards .cards-feedback { padding:14px 18px; margin-top:20px; border:1px solid var(--ui-line); border-radius:9px; background:var(--ui-surface); font-size:12px; line-height:1.6; }
#appShell #paneCreditCards .cards-feedback button { margin-left:12px; }
#appShell #paneCreditCards .cards-snapshot-send { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:20px; padding-top:20px; border-top:1px solid var(--ui-line); }
#appShell #paneCreditCards .cards-snapshot-send label { font-size:12px; display:flex; align-items:center; gap:10px; }
#appShell #paneCreditCards .cards-snapshot-send select { padding:8px; border:1px solid var(--ui-line); border-radius:7px; background:var(--ui-surface-solid); color:var(--ui-ink); }
#appShell #paneCreditCards .cards-snapshot { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.9; }
#appShell #paneCreditCards .cards-tablewrap { min-width:0; }
#appShell #paneCreditCards .cards-tablewrap th { background:var(--ui-surface-muted); }
#appShell #paneCreditCards .cards-tablewrap td { background:transparent; }
#appShell #paneCreditCards button.cards-primary { background:var(--ui-blue); color:#fff; border-color:var(--ui-blue); }
#appShell #paneCreditCards .cards-day .cards-day-total { white-space:normal; }
#appShell #paneCreditCards .cards-facts { padding:0; }
#appShell #paneCreditCards .cards-footnote { margin:0; }
#appShell #paneCreditCards .cards-formgrid input { box-shadow:none; }
#appShell #paneCreditCards .cards-metric-label { white-space:normal; }
#appShell #paneCreditCards .cards-tablefoot { line-height:1.8; }
#appShell #paneCreditCards .cards-filtered-note { color:var(--ui-ink-secondary); }
#appShell #paneCreditCards .cards-search input { min-height:18px; padding:0; box-shadow:none; }
@container(max-width:750px) { #appShell #paneCreditCards .workspace-page-head { flex-direction:column; align-items:flex-start; } #appShell #paneCreditCards .cards-actions { margin-left:0; } }