:root { color-scheme: dark; font-family: Inter, Segoe UI, system-ui, sans-serif; background: #071117; color: #ecf7f2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: radial-gradient(circle at 15% 0%, #123629 0, #071117 36rem); }
main { width: min(1180px, calc(100% - 32px)); min-width: 0; margin: 0 auto; padding: 24px 0 72px; }
.app-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 34px; padding: 10px 14px 10px 10px; border: 1px solid #2d493f; border-radius: 22px; background: linear-gradient(110deg, rgba(16, 39, 37, .97), rgba(9, 24, 29, .97)); box-shadow: 0 18px 48px rgba(0, 0, 0, .2); }
.brand { display: inline-flex; min-width: 0; align-items: center; gap: 12px; color: #ecf7f2; text-decoration: none; }
.brand:focus-visible { outline: 3px solid #67e8b5; outline-offset: 4px; border-radius: 14px; }
.brand-mark { width: 64px; height: 64px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .36)); }
.brand-copy { display: grid; min-width: 0; gap: 2px; line-height: 1; }
.brand-copy strong { color: #f0bd7a; font-size: 1.12rem; letter-spacing: .13em; text-transform: uppercase; }
.brand-copy span { color: #79e8b9; font-size: .73rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.page-nav { display: flex; max-width: 100%; gap: 8px; margin: 0; overflow-x: auto; scrollbar-width: thin; }
.page-nav a { padding: 9px 14px; border: 1px solid #28443a; border-radius: 999px; color: #b7cbc3; text-decoration: none; background: #0b1a20; }
.page-nav a.active { border-color: #67e8b5; color: #062016; background: #62e6ad; font-weight: 800; }
header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
h1 { margin: 2px 0 6px; font-size: clamp(2rem, 7vw, 4.6rem); letter-spacing: -.06em; }
h2 { margin: 2px 0; font-size: 1.25rem; }
p { margin: 0; }
.eyebrow, .provider { color: #67e8b5; font-size: .74rem; font-weight: 800; letter-spacing: .15em; }
button { border: 0; border-radius: 999px; padding: 12px 18px; background: #62e6ad; color: #062016; font-weight: 800; cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
.summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 24px; }
.summary span { padding: 8px 12px; border: 1px solid #28443a; border-radius: 999px; color: #b7cbc3; background: #0b1a20; }
.provider-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 24px; }
.provider-summary span { padding: 8px 12px; border: 1px solid #28443a; border-radius: 999px; color: #b7cbc3; background: #0b1a20; }
.add-provider-panel { display: grid; grid-template-columns: 1fr minmax(260px, 380px); gap: 20px; padding: 18px; margin-bottom: 20px; border: 1px solid #365247; border-radius: 18px; background: rgba(10, 23, 28, .94); }
.settings-panel { display: grid; gap: 18px; padding: 18px; margin-bottom: 20px; border: 1px solid #365247; border-radius: 18px; background: rgba(10, 23, 28, .94); }
.settings-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-panel h2 { margin-bottom: 7px; }
.settings-panel p:not(.eyebrow) { color: #9ab0a7; line-height: 1.45; }
.provider-setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.provider-setup-card { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px; border: 1px solid #29443a; border-radius: 14px; background: #0b1a20; }
.provider-setup-card h3 { margin: 0; font-size: 1rem; }
.provider-setup-card .setup-summary { min-height: 3.8em; font-size: .82rem; }
.provider-setup-card button { align-self: end; }
.recovery-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: end; gap: 10px; }
.recovery-form label { grid-column: 1 / -1; color: #b7cbc3; font-size: .8rem; }
.recovery-form select { min-width: 0; border: 1px solid #38534a; border-radius: 10px; background: #071418; color: white; padding: 12px; font: inherit; }
.recovery-form[hidden] { display: none; }
.discovery-results { display: grid; gap: 10px; }
.discovery-provider { padding-top: 12px; border-top: 1px solid #20352f; }
.discovery-provider:first-child { padding-top: 0; border-top: 0; }
.discovery-provider h3 { margin: 0 0 8px; font-size: .95rem; }
.discovery-path { display: grid; grid-template-columns: minmax(100px, .45fr) 1.55fr; gap: 10px; padding: 7px 0; border-top: 1px solid #183029; }
.discovery-path span { color: #9ab0a7; font-size: .76rem; }
.discovery-path code { color: #d8e7e1; overflow-wrap: anywhere; white-space: pre-wrap; font-size: .76rem; }
.danger-zone { display: grid; grid-template-columns: 1fr minmax(300px, 440px); gap: 20px; padding: 18px; margin-bottom: 20px; border: 1px solid #6a3d43; border-radius: 18px; background: rgba(31, 18, 23, .94); }
.danger-zone h2 { margin-bottom: 7px; }
.danger-zone p:not(.eyebrow) { color: #d3a8ae; }
.reset-dashboard-actions { display: grid; align-content: center; gap: 10px; }
.reset-dashboard-actions > .remove-card { width: 100%; padding: 12px 18px; font-size: .85rem; }
.reset-dashboard-actions [hidden] { display: none; }
.add-provider-panel h2 { margin-bottom: 7px; }
.add-provider-panel p:not(.eyebrow) { color: #9ab0a7; }
#add-provider-form { display: grid; gap: 8px; }
#add-provider-form label { color: #b7cbc3; font-size: .8rem; }
#add-provider-form select { min-width: 0; border: 1px solid #38534a; border-radius: 10px; background: #071418; color: white; padding: 12px; font: inherit; }
.provider-readiness { min-height: 3.2em; font-size: .78rem; line-height: 1.35; }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); gap: 14px; }
.provider-login-card { min-width: 0; overflow: hidden; border: 1px solid #263d37; border-radius: 18px; padding: 18px; background: rgba(10, 23, 28, .94); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.provider-login-card.newly-added { border-color: #5ee3b5; box-shadow: 0 0 0 3px rgba(94, 227, 181, .22), 0 18px 50px rgba(0,0,0,.22); }
.provider-login-card.error { border-color: #723d42; }
.provider-login-card.unavailable { border-color: #655d31; }
.provider-login-card .card-top { align-items: flex-start; flex-direction: column; }
.provider-card-actions { display: flex; width: 100%; max-width: none; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 7px; }
.account-identity { margin-top: 5px; color: #b7cbc3; font-size: .82rem; overflow-wrap: anywhere; }
.graph-link { display: inline-block; padding: 7px 10px; border: 1px solid #38534a; border-radius: 10px; color: #9cf5d5; background: #10282a; font-size: .72rem; font-weight: 700; text-decoration: none; }
.graph-link:hover { border-color: #5ee3b5; }
.remove-card { padding: 7px 10px; border: 1px solid #6a3d43; color: #ffb2bb; background: #2b1b20; font-size: .72rem; }
.removal-confirmation { display: grid; gap: 10px; margin: 14px 0; padding: 14px; border: 2px solid #a95761; border-radius: 14px; background: #29191e; }
.removal-confirmation strong { color: #ffd8dc; font-size: 1rem; }
.removal-confirmation p { color: #e9b8be; font-size: .82rem; }
.removal-confirmation .button-row { grid-template-columns: 1fr 1fr; }
.cancel-removal { padding: 7px 10px; color: #d8e7e1; background: #233a42; font-size: .72rem; }
.removal-note { max-width: 190px; color: #9ab0a7; text-align: right; line-height: 1.3; }
.provider-details { display: grid; gap: 7px; margin: 16px 0 0; }
.provider-detail { display: grid; grid-template-columns: minmax(110px, .7fr) 1.3fr; gap: 12px; padding-top: 7px; border-top: 1px solid #20352f; }
.provider-detail dt { color: #789087; font-size: .78rem; }
.provider-detail dd { margin: 0; color: #d8e7e1; font-size: .82rem; overflow-wrap: anywhere; }
.source-state { font-weight: 750; }
.source-state.working { color: #79e8b9; }
.source-state.unavailable { color: #f6d970; }
.source-state.missing { color: #91a9a0; }
.provider-message { margin-top: 14px; padding: 10px 12px; border-radius: 10px; color: #d8e7e1; background: #132229; font-size: .84rem; line-height: 1.4; }
.provider-message.warning { color: #ffd78c; background: #322719; }
.provider-actions { display: grid; gap: 10px; margin-top: 16px; }
.login-preflight { display: grid; gap: 7px; margin-top: 16px; padding: 12px; border: 1px solid #29443a; border-radius: 12px; background: #0b1a20; }
.login-preflight strong { color: #d8e7e1; font-size: .84rem; }
.login-preflight small { color: #9ab0a7; line-height: 1.4; }
.login-preflight button { width: fit-content; padding: 8px 11px; font-size: .72rem; }
.provider-actions a { color: #69e7b1; overflow-wrap: anywhere; }
.provider-actions input { min-width: 0; border: 1px solid #38534a; border-radius: 10px; background: #071418; color: white; padding: 12px; font: inherit; }
.login-state { color: #9ab0a7; font-size: .84rem; }
.device-code { width: fit-content; max-width: 100%; overflow-x: auto; padding: 10px 14px; border: 1px solid #67e8b5; border-radius: 10px; color: #ecf7f2; font-size: 1.1rem; font-weight: 800; letter-spacing: .08em; }
.secondary-action { background: #233a42; color: #d8e7e1; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.button-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.button-row button { flex: 1 1 120px; }
.card { min-width: 0; overflow: hidden; border: 1px solid #263d37; border-radius: 18px; padding: 18px; background: rgba(10, 23, 28, .94); box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.card:focus-visible { outline: 3px solid #67e8b5; outline-offset: 3px; }
.card.targeted-card { border-color: #67e8b5; box-shadow: 0 0 0 3px rgba(103, 232, 181, .2), 0 18px 50px rgba(0,0,0,.22); }
.card.error { border-color: #723d42; }
.card.unavailable { border-color: #655d31; }
.card.stale { border-color: #9a6b27; }
.card-top, .quota-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; }
.card-top > div, .quota-heading > * { min-width: 0; overflow-wrap: anywhere; }
.status { text-transform: uppercase; font-size: .7rem; font-weight: 800; padding: 5px 8px; border-radius: 999px; background: #17352a; color: #79e8b9; }
.error .status { background: #442228; color: #ff9ca7; }
.unavailable .status { background: #39351e; color: #f6d970; }
.stale .status { background: #4b351c; color: #ffcf78; }
.error-detail { color: #91a9a0; font-size: .82rem; margin-top: 7px; overflow-wrap: anywhere; }
.graph-account-details { display: grid; gap: 5px; margin: 12px 0 0; }
.graph-account-details > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.graph-account-details dt { color: #789087; font-size: .78rem; }
.graph-account-details dd { margin: 0; color: #d8e7e1; font-size: .82rem; overflow-wrap: anywhere; }
.quota { margin-top: 16px; }
.quota-heading { color: #d8e7e1; font-size: .82rem; }
.quota-heading span { color: #8aa197; }
.track { height: 13px; display: flex; overflow: hidden; border-radius: 999px; margin-top: 8px; background: #17262a; }
.used { background: linear-gradient(90deg, #fb606e, #d73548); }
.remaining { background: linear-gradient(90deg, #1cb978, #68e6ad); }
.values { display: flex; justify-content: space-between; margin-top: 6px; color: #b7cbc3; font-size: .8rem; }
.billing-warning { color: #ffb66f; font-weight: 700; }
.target-status, .empty-state { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #655d31; border-radius: 12px; color: #f6d970; background: #242417; overflow-wrap: anywhere; }
.empty-state { grid-column: 1 / -1; }
.target-status[hidden] { display: none; }
.target-status:focus-visible { outline: 3px solid #f6d970; outline-offset: 3px; }
@media (max-width: 850px) { header { align-items: stretch; flex-direction: column; } button { width: 100%; } main { width: min(100% - 20px, 1180px); padding-top: 12px; } .add-provider-panel, .danger-zone { grid-template-columns: 1fr; } .settings-panel-heading, .recovery-form { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; } .provider-detail, .discovery-path { grid-template-columns: 1fr; gap: 3px; } .card-top, .quota-heading { align-items: flex-start; flex-wrap: wrap; } .provider-card-actions { width: 100%; max-width: none; justify-content: flex-start; } }
@media (max-width: 560px) { .app-bar { align-items: stretch; flex-direction: column; gap: 10px; padding: 10px; } .page-nav { width: 100%; } .page-nav a { flex: 1 1 0; text-align: center; } }
@media (max-width: 430px) { .brand-mark { width: 54px; height: 54px; } .brand-copy strong { font-size: 1rem; } .brand-copy span { font-size: .66rem; } .card, .provider-login-card, .add-provider-panel, .settings-panel, .danger-zone { padding: 14px; } .button-row, .removal-confirmation .button-row { grid-template-columns: 1fr; } .values { overflow-wrap: anywhere; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Visual-theme token layer. Presentation can change without changing data semantics. */
:root {
  --app-background: #071117;
  --app-glow: #123629;
  --app-text: #ecf7f2;
  --app-muted: #b7cbc3;
  --app-dim: #789087;
  --app-surface: #0b1a20;
  --app-surface-alt: #10282a;
  --app-card: rgba(10, 23, 28, .94);
  --app-toolbar: rgba(16, 39, 37, .97);
  --app-input: #071418;
  --app-border: #365247;
  --app-border-strong: #67e8b5;
  --app-accent: #62e6ad;
  --app-accent-text: #062016;
  --app-accent-soft: #17352a;
  --app-orange: #f0bd7a;
  --app-used: #fb606e;
  --app-used-end: #d73548;
  --app-remaining: #1cb978;
  --app-remaining-end: #68e6ad;
  --app-track: #17262a;
  --app-warning: #f6d970;
  --app-danger: #ff9ca7;
  --app-danger-surface: #2b1b20;
  --app-ok: #68e6ad;
  --app-stale: #ffcf78;
  --app-shadow: 0 18px 50px rgba(0, 0, 0, .22);
  --app-font: Inter, Segoe UI, system-ui, sans-serif;
  --app-radius: 18px;
  --app-control-radius: 999px;
  --app-bar-radius: 999px;
  --app-border-width: 1px;
  --app-card-padding: 18px;
  --app-panel-padding: 18px;
  --app-grid-gap: 14px;
  --app-panel-gap: 20px;
  --app-bar-height: 13px;
  --app-focus-bar-height: 44px;
  --app-normal-owl-half: 13px;
  --app-focus-owl-half: 28px;
  --app-bar-margin: 8px;
  --app-values-margin: 6px;
  --app-values-justify: space-between;
  --app-heading-tracking: -.06em;
  --app-motion: 180ms;
  --app-main-width: 1180px;
  --app-main-padding: 24px 0 72px;
  --app-card-min: 320px;
  --app-title-scale: 1;
  --app-brand-size: 64px;
  --app-card-title-size: 1.25rem;
  --app-card-accent-width: 0px;
  --app-focus-label-color: #fff;
  --app-focus-label-shadow: 0 1px 3px rgba(0,0,0,.98), 0 0 7px rgba(0,0,0,.94), 0 0 12px rgba(0,0,0,.72);
}

:root[data-theme-mode="light"] { color-scheme: light; }
:root[data-theme-mode="dark"] { color-scheme: dark; }

:root, body, button, input, select, textarea { font-family: var(--app-font); }
:root { background: var(--app-background); color: var(--app-text); }
body { color: var(--app-text); background: radial-gradient(circle at 15% 0%, var(--app-glow) 0, var(--app-background) 36rem); transition: background var(--app-motion) ease, color var(--app-motion) ease; }
.app-bar { border: var(--app-border-width) solid var(--app-border); border-radius: calc(var(--app-radius) + 4px); background: linear-gradient(110deg, var(--app-toolbar), var(--app-surface)); box-shadow: var(--app-shadow); }
.brand { color: var(--app-text); }
.brand:focus-visible, .card:focus-visible, .target-status:focus-visible { outline-color: var(--app-accent); }
.brand-copy strong { color: var(--app-orange); }
.brand-copy span, .eyebrow, .provider { color: var(--app-accent); }
.page-nav a { border: var(--app-border-width) solid var(--app-border); color: var(--app-muted); background: var(--app-surface); border-radius: var(--app-control-radius); }
.page-nav a.active { border-color: var(--app-accent); color: var(--app-accent-text); background: var(--app-accent); }
h1 { letter-spacing: var(--app-heading-tracking); }
button { border-radius: var(--app-control-radius); background: var(--app-accent); color: var(--app-accent-text); transition: background var(--app-motion) ease, color var(--app-motion) ease, border-color var(--app-motion) ease, transform var(--app-motion) ease; }
button:not(:disabled):hover { transform: translateY(-1px); }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--app-accent); outline-offset: 3px; }
.summary span, .provider-summary span { border: var(--app-border-width) solid var(--app-border); color: var(--app-muted); background: var(--app-surface); border-radius: var(--app-control-radius); }
.add-provider-panel, .settings-panel, .danger-zone { border: var(--app-border-width) solid var(--app-border); border-radius: var(--app-radius); padding: var(--app-panel-padding); gap: var(--app-panel-gap); background: var(--app-card); box-shadow: var(--app-shadow); }
.add-provider-panel p:not(.eyebrow), .settings-panel p:not(.eyebrow), .provider-message, .login-state, .removal-note { color: var(--app-muted); }
.provider-setup-card { border-color: var(--app-border); border-radius: calc(var(--app-radius) * .72); background: var(--app-surface); }
.danger-zone { border-color: var(--app-danger); background: color-mix(in srgb, var(--app-danger-surface) 88%, var(--app-card)); }
.danger-zone p:not(.eyebrow), .removal-confirmation p { color: var(--app-danger); }
#add-provider-form label, .recovery-form label { color: var(--app-muted); }
#add-provider-form select, .recovery-form select, .provider-actions input { border: var(--app-border-width) solid var(--app-border); border-radius: calc(var(--app-radius) * .58); background: var(--app-input); color: var(--app-text); }
.discovery-provider, .discovery-path, .provider-detail { border-top-color: var(--app-border); }
.discovery-path span, .provider-detail dt, .graph-account-details dt { color: var(--app-dim); }
.discovery-path code, .provider-detail dd, .graph-account-details dd, .quota-heading { color: var(--app-text); }
.provider-grid, .grid { gap: var(--app-grid-gap); }
.provider-login-card, .card { border: var(--app-border-width) solid var(--app-border); border-radius: var(--app-radius); padding: var(--app-card-padding); background: var(--app-card); box-shadow: var(--app-shadow); transition: background var(--app-motion) ease, border-color var(--app-motion) ease, box-shadow var(--app-motion) ease, border-radius var(--app-motion) ease; }
.provider-login-card.newly-added, .card.targeted-card { border-color: var(--app-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 24%, transparent), var(--app-shadow); }
.provider-login-card.error, .card.error { border-color: var(--app-danger); }
.provider-login-card.unavailable, .card.unavailable { border-color: var(--app-warning); }
.card.stale { border-color: var(--app-stale); }
.graph-link { border: var(--app-border-width) solid var(--app-border); border-radius: calc(var(--app-radius) * .58); color: var(--app-accent); background: var(--app-surface-alt); }
.graph-link:hover { border-color: var(--app-accent); }
.remove-card { border: var(--app-border-width) solid var(--app-danger); color: var(--app-danger); background: var(--app-danger-surface); }
.secondary-action, .cancel-removal { color: var(--app-text); background: var(--app-surface-alt); }
.removal-confirmation { border-color: var(--app-danger); border-radius: calc(var(--app-radius) * .78); background: var(--app-danger-surface); }
.removal-confirmation strong { color: var(--app-text); }
.provider-message { border-radius: calc(var(--app-radius) * .58); background: var(--app-surface-alt); }
.login-preflight { border-color: var(--app-border); border-radius: calc(var(--app-radius) * .62); background: var(--app-surface); }
.login-preflight strong { color: var(--app-text); }
.login-preflight small { color: var(--app-muted); }
.provider-message.warning { color: var(--app-warning); background: color-mix(in srgb, var(--app-warning) 14%, var(--app-surface)); }
.provider-actions a { color: var(--app-accent); }
.device-code { border-color: var(--app-accent); border-radius: calc(var(--app-radius) * .58); color: var(--app-text); background: var(--app-surface); }
.status { background: var(--app-accent-soft); color: var(--app-ok); }
.error .status { background: var(--app-danger-surface); color: var(--app-danger); }
.unavailable .status { background: color-mix(in srgb, var(--app-warning) 16%, var(--app-surface)); color: var(--app-warning); }
.stale .status { background: color-mix(in srgb, var(--app-stale) 16%, var(--app-surface)); color: var(--app-stale); }
.error-detail, .quota-heading span { color: var(--app-dim); }
.track { height: var(--app-bar-height); margin-top: var(--app-bar-margin); border: var(--app-border-width) solid color-mix(in srgb, var(--app-border) 70%, transparent); border-radius: var(--app-bar-radius); background: var(--app-track); }
.used { background: linear-gradient(90deg, var(--app-used), var(--app-used-end)); }
.remaining { background: linear-gradient(90deg, var(--app-remaining), var(--app-remaining-end)); }
.values { justify-content: var(--app-values-justify); margin-top: var(--app-values-margin); color: var(--app-muted); }
.billing-warning { color: var(--app-warning); }
.target-status, .empty-state { border-color: var(--app-warning); border-radius: calc(var(--app-radius) * .67); color: var(--app-warning); background: color-mix(in srgb, var(--app-warning) 12%, var(--app-surface)); }

html[data-theme-card-style="glass"] .provider-login-card,
html[data-theme-card-style="glass"] .card,
html[data-theme-card-style="glass"] .add-provider-panel,
html[data-theme-card-style="glass"] .settings-panel { backdrop-filter: blur(18px) saturate(132%); }
html[data-theme-card-style="paper"] .provider-login-card,
html[data-theme-card-style="paper"] .card { background-image: linear-gradient(135deg, color-mix(in srgb, var(--app-card) 96%, var(--app-orange)), var(--app-card)); }
html[data-theme-pattern="scanlines"] .used, html[data-theme-pattern="scanlines"] .remaining { background-size: auto, 100% 3px; background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.22) 2px 3px), linear-gradient(90deg, var(--app-used), var(--app-used-end)); }
html[data-theme-pattern="scanlines"] .remaining { background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.22) 2px 3px), linear-gradient(90deg, var(--app-remaining), var(--app-remaining-end)); }
html[data-theme-pattern="colorblind"] .used { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 3px, transparent 3px 7px), linear-gradient(90deg, var(--app-used), var(--app-used-end)); }
html[data-theme-pattern="colorblind"] .remaining { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 3px, transparent 3px 7px), linear-gradient(90deg, var(--app-remaining), var(--app-remaining-end)); }
html[data-theme-pattern="contrast"] .used { background-image: repeating-linear-gradient(45deg, #000 0 4px, transparent 4px 8px), linear-gradient(90deg, var(--app-used), var(--app-used-end)); }
html[data-theme-pattern="contrast"] .remaining { background-image: repeating-linear-gradient(-45deg, #fff 0 4px, transparent 4px 8px), linear-gradient(90deg, var(--app-remaining), var(--app-remaining-end)); }
html[data-theme-pattern="grid"] .track { background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 6px 6px; }
html[data-theme-pattern="sprinkles"] .track { background-image: radial-gradient(var(--app-orange) 1px, transparent 1.5px), radial-gradient(var(--app-accent) 1px, transparent 1.5px); background-position: 0 0, 4px 3px; background-size: 8px 8px; }
html[data-theme-pattern="diagonal"] .track { background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--app-track) 74%, var(--app-text)) 0 2px, transparent 2px 7px); }
html[data-theme-pattern="aurora"] .remaining { background-image: linear-gradient(105deg, var(--app-remaining), var(--app-accent), var(--app-remaining-end)); }
html[data-theme-pattern="petals"] .track { background-image: radial-gradient(ellipse at 20% 50%, color-mix(in srgb, var(--app-orange) 45%, transparent) 0 2px, transparent 3px), radial-gradient(ellipse at 70% 50%, color-mix(in srgb, var(--app-accent) 45%, transparent) 0 2px, transparent 3px); background-size: 12px 8px; }
html[data-theme-label-position="compact"] .values { margin-top: 3px; font-size: .72rem; }

/* Composition, depth, meter geometry, navigation, and density are all theme tokens. */
main { width: min(var(--app-main-width), calc(100% - 32px)); padding: var(--app-main-padding); }
main > .app-bar, main > header, main > #cards, main > #provider-cards { width: 100%; }
.brand-mark { width: var(--app-brand-size); height: var(--app-brand-size); }
.card h2, .provider-login-card h2 { font-size: var(--app-card-title-size); }
.grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--app-card-min)), 1fr)); }
.card, .provider-login-card { position: relative; }
.card::before, .provider-login-card::before { position: absolute; inset: 0 auto 0 0; width: var(--app-card-accent-width); background: var(--app-accent); content: ""; pointer-events: none; }
html[data-theme-density="dense"] { --app-card-padding: 12px; --app-panel-padding: 13px; --app-grid-gap: 8px; --app-panel-gap: 12px; --app-bar-margin: 5px; --app-values-margin: 3px; }
html[data-theme-density="relaxed"] { --app-card-padding: 24px; --app-panel-padding: 24px; --app-grid-gap: 20px; --app-panel-gap: 26px; --app-bar-margin: 11px; --app-values-margin: 9px; }
html[data-theme-density="airy"] { --app-card-padding: 20px; --app-panel-padding: 22px; --app-grid-gap: 18px; --app-panel-gap: 22px; --app-bar-margin: 10px; --app-values-margin: 8px; }
html[data-theme-brand-style="mono"] .brand-mark { filter: grayscale(1) contrast(1.6); border-radius: 0; }
html[data-theme-brand-style="outlined"] .brand-mark { padding: 4px; border: var(--app-border-width) solid var(--app-border-strong); border-radius: 4px; }
html[data-theme-brand-style="shield"] .brand-mark { padding: 5px; border: var(--app-border-width) solid var(--app-accent); border-radius: 42% 42% 56% 56%; background: var(--app-surface-alt); }
html[data-theme-brand-style="stamp"] .brand-mark { padding: 4px; border: 2px dashed var(--app-border); border-radius: 50%; background: var(--app-surface); }
html[data-theme-brand-style="glow"] .brand-mark { filter: drop-shadow(0 0 12px var(--app-accent)); }
html[data-theme-brand-style="round"] .brand-mark { border-radius: 50%; background: var(--app-surface-alt); }
html[data-theme-navigation-style="underlined"] .page-nav { gap: 0; }
html[data-theme-navigation-style="underlined"] .page-nav a { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; }
html[data-theme-navigation-style="underlined"] .page-nav a.active { border-bottom-color: var(--app-accent); color: var(--app-accent); background: transparent; }
html[data-theme-navigation-style="square"] .page-nav a { border-radius: 0; }
html[data-theme-navigation-style="tabs"] .page-nav { gap: 0; padding: 4px; border: var(--app-border-width) solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); }
html[data-theme-navigation-style="tabs"] .page-nav a { border: 0; border-radius: calc(var(--app-radius) * .55); background: transparent; }
html[data-theme-navigation-style="soft"] .page-nav a { border: 0; box-shadow: inset 0 0 0 1px var(--app-border); }

html[data-theme-meter-style="outlined"] .track { padding: 2px; background: transparent; }
html[data-theme-meter-style="outlined"] .used, html[data-theme-meter-style="outlined"] .remaining { border-radius: calc(var(--app-bar-radius) * .8); }
html[data-theme-meter-style="segmented"] .track { gap: 3px; padding: 2px; }
html[data-theme-meter-style="segmented"] .used, html[data-theme-meter-style="segmented"] .remaining { border-radius: 2px; }
html[data-theme-meter-style="pixel"] .track { image-rendering: pixelated; box-shadow: inset 0 0 0 2px var(--app-background); }
html[data-theme-meter-style="pixel"] .used, html[data-theme-meter-style="pixel"] .remaining { border-radius: 0; }
html[data-theme-meter-style="ruler"] .track { height: max(5px, var(--app-bar-height)); border-width: 0 0 var(--app-border-width); border-radius: 0; background-image: repeating-linear-gradient(90deg, transparent 0 11px, color-mix(in srgb, var(--app-border) 62%, transparent) 11px 12px); }
html[data-theme-meter-style="ruler"] .used, html[data-theme-meter-style="ruler"] .remaining { border-radius: 0; }
html[data-theme-meter-style="glass"] .track { padding: 2px; background: color-mix(in srgb, var(--app-track) 55%, transparent); box-shadow: inset 0 1px 4px rgba(0,0,0,.26), 0 6px 16px color-mix(in srgb, var(--app-accent) 16%, transparent); }
html[data-theme-meter-style="halo"] .track { box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 62%, transparent), 0 0 22px color-mix(in srgb, var(--app-accent) 36%, transparent); }
html[data-theme-meter-style="slab"] .track { border-radius: 0; border-width: 2px; }
html[data-theme-meter-style="slab"] .used, html[data-theme-meter-style="slab"] .remaining { border-radius: 0; }
html[data-theme-meter-style="notched"] .track { border-radius: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
html[data-theme-meter-style="notched"] .used { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); }
html[data-theme-meter-style="stack"] .track { height: calc(var(--app-bar-height) + 6px); padding: 3px; border-radius: 4px; box-shadow: inset 0 2px 0 rgba(0,0,0,.22); }
html[data-theme-meter-style="grid"] .track { border-radius: 0; background-image: linear-gradient(90deg, color-mix(in srgb, var(--app-border) 42%, transparent) 1px, transparent 1px); background-size: 10% 100%; }
html[data-theme-meter-style="sprinkle"] .track { border-radius: 999px; background-image: radial-gradient(var(--app-accent) 1px, transparent 1.5px); background-size: 7px 7px; }
html[data-theme-meter-style="petal"] .track { height: calc(var(--app-bar-height) + 4px); border-radius: 50% 16px 50% 16px; }
html[data-theme-meter-style="inset"] .track { padding: 2px; box-shadow: inset 0 3px 8px rgba(0,0,0,.3); }
.track { position: relative; display: block; overflow: visible; }
.meter-fills { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: inherit; }
.meter-owl { --meter-owl-size: calc(var(--app-bar-height) + 12px); position: absolute; z-index: 5; top: 50%; left: clamp(var(--app-normal-owl-half), var(--meter-boundary, 50%), calc(100% - var(--app-normal-owl-half))); width: var(--meter-owl-size); height: var(--meter-owl-size); object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.72)); pointer-events: none; }
:root[data-theme-mascot="none"] .meter-owl { display: none; }
:root[data-theme-mascot="owl"] #cards .card { overflow: visible; }
.meter-row { display: flex; min-width: 0; align-items: center; gap: 12px; padding-block: 7px; }
.meter-row .track { flex: 1 1 auto; min-width: 0; }
.remaining-side { flex: 0 0 auto; min-width: 102px; color: var(--app-muted); font-size: .76rem; text-align: right; white-space: nowrap; }

html[data-theme-layout="bento"] #cards, html[data-theme-layout="mosaic"] #cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-theme-layout="bento"] #cards .card:nth-child(5n + 1), html[data-theme-layout="mosaic"] #cards .card:nth-child(4n + 1) { grid-column: span 2; }
html[data-theme-layout="wide"] #cards, html[data-theme-layout="poster"] #cards, html[data-theme-layout="report"] #cards, html[data-theme-layout="catalog"] #cards { grid-template-columns: 1fr; }
html[data-theme-layout="wide"] .card { display: grid; grid-template-columns: minmax(230px, .43fr) minmax(0, 1fr); column-gap: var(--app-panel-gap); }
html[data-theme-layout="wide"] .card > :not(.quota) { grid-column: 1; }
html[data-theme-layout="wide"] .card .quota { grid-column: 2; }
html[data-theme-layout="ledger"] #cards, html[data-theme-layout="timeline"] #cards, html[data-theme-layout="signal"] #cards { grid-template-columns: 1fr; }
html[data-theme-layout="ledger"] .card { display: grid; grid-template-columns: minmax(210px, .38fr) minmax(0, 1fr); column-gap: var(--app-panel-gap); border-radius: 0; }
html[data-theme-layout="ledger"] .card > :not(.quota) { grid-column: 1; }
html[data-theme-layout="ledger"] .card .quota { grid-column: 2; }
html[data-theme-layout="timeline"] .card { border-left-width: max(6px, var(--app-card-accent-width)); border-radius: 0 var(--app-radius) var(--app-radius) 0; }
html[data-theme-layout="timeline"] .card + .card { margin-top: 10px; }
html[data-theme-layout="columnar"] #cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
html[data-theme-layout="columnar"] .card-top { align-items: flex-start; flex-direction: column; }
html[data-theme-layout="rail"] #cards { grid-auto-columns: minmax(310px, 42%); grid-auto-flow: column; grid-template-columns: unset; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; }
html[data-theme-layout="rail"] #cards .card { scroll-snap-align: start; }
html[data-theme-layout="paper"] .app-bar, html[data-theme-layout="paper"] .card { transform: rotate(-.12deg); }
html[data-theme-layout="arcade"] .card { border-width: max(3px, var(--app-border-width)); }
html[data-theme-layout="arcade"] #cards { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
html[data-theme-layout="signal"] .card { border-left-width: 8px; border-radius: 3px; }
html[data-theme-layout="signal"] .quota { padding-left: 12px; border-left: 2px solid var(--app-border); }
html[data-theme-layout="poster"] .card { padding: calc(var(--app-card-padding) * 1.35); }
html[data-theme-layout="poster"] .card h2 { font-size: calc(var(--app-card-title-size) * 1.25); }

.focus-toggle { display: inline-flex; min-width: 0; align-items: center; gap: 9px; padding: 6px 10px 6px 8px; border: var(--app-border-width) solid var(--app-border); border-radius: var(--app-control-radius); color: var(--app-text); background: var(--app-surface); cursor: pointer; }
.focus-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--app-accent); cursor: pointer; }
.focus-toggle-copy { display: grid; min-width: 0; gap: 1px; line-height: 1.15; }
.focus-toggle-copy strong { font-size: .76rem; }
.focus-toggle-copy small { max-width: 210px; color: var(--app-muted); font-size: .64rem; }
.focus-theme-controls { display: inline-flex; align-items: center; gap: 8px; padding: 4px; border: var(--app-border-width) solid var(--app-border); border-radius: var(--app-control-radius); background: var(--app-surface); }
.focus-theme-arrow { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; border: var(--app-border-width) solid var(--app-border); border-radius: 50%; color: var(--app-text); background: var(--app-surface-alt); font-size: 1.28rem; line-height: 1; }
.focus-theme-name { min-width: 104px; max-width: 180px; overflow: hidden; color: var(--app-text); font-size: .72rem; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.focus-longest-toggle, .focus-source-filter { display: none; align-items: center; gap: 7px; min-height: 40px; padding: 6px 10px; border: var(--app-border-width) solid var(--app-border); border-radius: var(--app-control-radius); color: var(--app-text); background: var(--app-surface); font-size: .7rem; font-weight: 800; cursor: pointer; }
.focus-longest-toggle input { width: 17px; height: 17px; margin: 0; accent-color: var(--app-accent); cursor: pointer; }
.focus-source-filter { cursor: default; }
.focus-source-filter select { min-width: 64px; border: 0; outline: 0; color: var(--app-text); background: var(--app-surface-alt); font: inherit; font-weight: 800; cursor: pointer; }
.focus-meter-caption { display: none; }
.focus-reset-side { display: none; }
:root[data-graph-focus="true"] .brand,
:root[data-graph-focus="true"] .page-nav,
:root[data-graph-focus="true"] main > header,
:root[data-graph-focus="true"] .summary,
:root[data-graph-focus="true"] .target-status { display: none; }
:root[data-graph-focus="true"] .app-bar { position: sticky; top: 8px; z-index: 5; justify-content: flex-end; min-height: 0; margin-bottom: 14px; padding: 5px; backdrop-filter: blur(12px); }
:root[data-graph-focus="true"] .focus-toggle { border-color: var(--app-accent); }
:root[data-graph-focus="true"] .focus-longest-toggle, :root[data-graph-focus="true"] .focus-source-filter { display: inline-flex; }
:root[data-graph-focus="true"] #cards { display: block; }
:root[data-graph-focus="true"] #cards .card { display: block; overflow: visible; margin: 0 0 18px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root[data-graph-focus="true"] #cards .card::before { display: none; }
:root[data-graph-focus="true"] #cards .card:not(.has-meter) { display: none; }
:root[data-graph-focus="true"] #cards .card > :not(.quota) { display: none; }
:root[data-graph-focus="true"] #cards .quota { margin: 0 0 14px; padding: 0; }
:root[data-graph-focus="true"] #cards .quota.focus-no-meter { display: none; }
:root[data-graph-focus="true"] #cards .quota > :not(.meter-row, .focus-meter-caption) { display: none; }
:root[data-graph-focus="true"] #cards .meter-row { display: block; }
:root[data-graph-focus="true"] #cards .meter-row { padding-block: 10px; }
:root[data-graph-focus="true"] #cards .remaining-side { display: none; }
:root[data-graph-focus="true"] #cards .track { position: relative; height: var(--app-focus-bar-height); margin-top: 0; }
:root[data-graph-focus="true"] #cards .meter-owl { --meter-owl-size: calc(var(--app-focus-bar-height) + 12px); left: clamp(var(--app-focus-owl-half), var(--meter-boundary, 50%), calc(100% - var(--app-focus-owl-half))); width: var(--meter-owl-size); height: var(--meter-owl-size); filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
:root[data-graph-focus="true"] #cards .focus-meter-caption { position: absolute; z-index: 4; inset: 0 auto 0 42px; display: flex; max-width: calc(100% - 53px); align-items: center; overflow: hidden; color: var(--app-focus-label-color); font-size: .7rem; font-weight: 700; letter-spacing: .025em; line-height: 1; text-overflow: ellipsis; text-shadow: var(--app-focus-label-shadow); white-space: nowrap; pointer-events: none; }
:root[data-graph-focus="true"][data-theme-mascot="none"] #cards .focus-meter-caption { inset-inline-start: 0; max-width: calc(100% - 12px); }
:root[data-graph-focus="true"][data-theme-focus-reset-layout="outside"] #cards .meter-row { display: flex; align-items: center; gap: 14px; }
:root[data-graph-focus="true"][data-theme-focus-reset-layout="outside"] #cards .meter-row .track { flex: 1 1 auto; min-width: 0; }
:root[data-graph-focus="true"][data-theme-focus-reset-layout="outside"] #cards .focus-reset-inline { display: none; }
:root[data-graph-focus="true"][data-theme-focus-reset-layout="outside"] #cards .focus-reset-side { display: block; flex: 0 0 126px; color: var(--app-muted); font-size: .7rem; font-weight: 700; text-align: right; white-space: nowrap; }
@media (max-width: 560px) { :root[data-graph-focus="true"][data-theme-focus-reset-layout="outside"] #cards .meter-row { gap: 8px; } :root[data-graph-focus="true"][data-theme-focus-reset-layout="outside"] #cards .focus-reset-side { flex-basis: 94px; font-size: .62rem; } }
@media (max-width: 850px) { main { width: min(var(--app-main-width), calc(100% - 20px)); } html[data-theme-layout="bento"] #cards, html[data-theme-layout="mosaic"] #cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-theme-layout="wide"] .card, html[data-theme-layout="ledger"] .card { display: block; } html[data-theme-layout="wide"] .card > *, html[data-theme-layout="ledger"] .card > * { grid-column: auto; } .focus-toggle { width: auto; } .focus-toggle-copy small { max-width: 210px; } :root[data-graph-focus="true"] .app-bar { align-items: center; flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 560px) { html[data-theme-layout="bento"] #cards, html[data-theme-layout="mosaic"] #cards { grid-template-columns: 1fr; } html[data-theme-layout="bento"] #cards .card:nth-child(5n + 1), html[data-theme-layout="mosaic"] #cards .card:nth-child(4n + 1) { grid-column: span 1; } }

.cloud-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--app-grid-gap); }
.cloud-card, .cloud-source { border: var(--app-border-width) solid var(--app-border); border-radius: var(--app-radius); background: var(--app-card); box-shadow: var(--app-shadow); }
.cloud-card { padding: var(--app-card-padding); }
.cloud-card h2 { margin-block: 4px; }
.cloud-identity { overflow-wrap: anywhere; color: var(--app-muted); }
.cloud-source { margin-top: 16px; padding: 16px; border-radius: calc(var(--app-radius) * .72); background: var(--app-surface); box-shadow: none; }
.cloud-source-error { border-color: var(--app-danger); }
.cloud-source-partial, .cloud-source-unavailable { border-color: var(--app-warning); }
.cloud-source-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cloud-details { display: grid; grid-template-columns: minmax(110px, .34fr) minmax(0, 1fr); gap: 7px 12px; margin-block: 14px; }
.cloud-details dt, .cloud-hourly-table th { color: var(--app-dim); }
.cloud-details dd { margin: 0; overflow-wrap: anywhere; color: var(--app-text); }
.cloud-money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.cloud-money { display: grid; gap: 4px; padding: 12px; border: var(--app-border-width) solid var(--app-border); border-radius: var(--app-control-radius); background: var(--app-surface-alt); }
.cloud-money span { color: var(--app-muted); font-size: .75rem; }
.cloud-money strong { color: var(--app-accent); font-size: 1.2rem; }
.cloud-hourly-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.cloud-hourly-table th, .cloud-hourly-table td { padding: 7px 5px; border-top: var(--app-border-width) solid var(--app-border); text-align: left; }
.cloud-hourly-table th:last-child, .cloud-hourly-table td:last-child { text-align: right; }
.cloud-account-form { display: grid; grid-template-columns: minmax(140px, .3fr) minmax(0, 1fr); gap: 12px; align-items: center; }
.cloud-account-form input, .cloud-account-form select { min-width: 0; padding: 10px 12px; border: var(--app-border-width) solid var(--app-border); border-radius: var(--app-control-radius); color: var(--app-text); background: var(--app-input); }
.cloud-account-form button, .cloud-account-form p { grid-column: 2; }
.cloud-discovery-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 14px; border: var(--app-border-width) solid var(--app-border); border-radius: var(--app-control-radius); background: var(--app-surface); }
.cloud-discovery-panel > p, .cloud-discovery-results { grid-column: 1 / -1; }
.cloud-discovery-results { display: grid; gap: 10px; }
.cloud-discovery-group { display: grid; gap: 7px; padding-top: 9px; border-top: var(--app-border-width) solid var(--app-border); overflow-wrap: anywhere; }
.cloud-discovery-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cloud-discovery-row span { color: var(--app-muted); font-size: .82rem; }
.cloud-discovery-row button { flex: 0 0 auto; padding: 8px 12px; }
@media (max-width: 700px) { .cloud-account-form { grid-template-columns: 1fr; } .cloud-account-form button, .cloud-account-form p { grid-column: 1; } .cloud-details { grid-template-columns: 1fr; } }