:root {
  --body-bg: transparent;
  --ff-sans: 'Google Sans Flex', 'Google Sans Text', 'Google Sans', sans-serif;
  --ff-mono: 'Google Sans Code', 'Google Sans Mono', monospace;
  --lumi-sys-spacing--xxs: 2px; --lumi-sys-spacing--xs: 4px; --lumi-sys-spacing--s: 8px;
  --lumi-sys-spacing--m: 12px; --lumi-sys-spacing--l: 16px; --lumi-sys-spacing--xl: 20px;
  --lumi-sys-spacing--xxl: 24px; --lumi-sys-spacing--3xl: 28px;
  --lumi-sys-shape--small: 8px; --lumi-sys-shape--medium: 12px; --lumi-sys-shape--large: 16px;
  --lumi-sys-shape--full: 999px;
  --lumi-sys-elevation--level1: 0 0 20px 0 rgba(0, 0, 0, 0.04);
  --lumi-sys-color--surface: #fdfcfc;
  --lumi-sys-color--surface-dim: #f2f0f0;
  --lumi-sys-color--surface-bright: #ffffff;
  --lumi-sys-color--surface-container: #f2f0f0;
  --lumi-sys-color--surface-container-high: #e6e6e6;
  --lumi-sys-color--on-surface: #000000;
  --lumi-sys-color--on-surface-default: #000000;
  --lumi-sys-color--on-surface-variant: rgba(0, 0, 0, 0.55);
  --lumi-sys-color--on-surface-low: rgba(0, 0, 0, 0.08);
  --lumi-sys-color--positive: #008052;
  --lumi-sys-color--positive-container: #daf9d4;
  --lumi-sys-color--error: #de2d29;
  --lumi-sys-color--error-container: #ffdeec;
  --lumi-sys-color--accent: #9dd2ff;
  --lumi-sys-color--accent-container: #dcf1ff;
  --lumi-sys-color--accent-fixed: #3186ff;
  --lumi-sys-color--primary: #3186ff;
  --lumi-sys-color--stroke-default: #e3e3e3;
}

:root[data-theme="dark"], body.dark-mode {
  --body-bg: #0f0f0f;
  --lumi-sys-color--surface: #0f0f0f;
  --lumi-sys-color--surface-dim: #141414;
  --lumi-sys-color--surface-bright: #1c1c1c;
  --lumi-sys-color--surface-container: #141414;
  --lumi-sys-color--surface-container-high: #1c1c1c;
  --lumi-sys-color--on-surface: #e0e0e0;
  --lumi-sys-color--on-surface-default: #e0e0e0;
  --lumi-sys-color--on-surface-variant: rgba(255, 255, 255, 0.55);
  --lumi-sys-color--on-surface-low: rgba(255, 255, 255, 0.12);
  --lumi-sys-color--positive: #0ebc5f;
  --lumi-sys-color--positive-container: #002220;
  --lumi-sys-color--error: #ff4c45;
  --lumi-sys-color--error-container: #3c0202;
  --lumi-sys-color--accent: #1f3b9b;
  --lumi-sys-color--accent-container: #192967;
  --lumi-sys-color--accent-fixed: #3186ff;
  --lumi-sys-color--primary: #9dd2ff;
  --lumi-sys-color--stroke-default: #2d2f38;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --body-bg: #0f0f0f;
    --lumi-sys-color--surface: #0f0f0f;
    --lumi-sys-color--surface-dim: #141414;
    --lumi-sys-color--surface-bright: #1c1c1c;
    --lumi-sys-color--surface-container: #141414;
    --lumi-sys-color--surface-container-high: #1c1c1c;
    --lumi-sys-color--on-surface: #e0e0e0;
    --lumi-sys-color--on-surface-variant: rgba(255, 255, 255, 0.55);
    --lumi-sys-color--positive: #0ebc5f;
    --lumi-sys-color--positive-container: #002220;
    --lumi-sys-color--error: #ff4c45;
    --lumi-sys-color--error-container: #3c0202;
    --lumi-sys-color--stroke-default: #2d2f38;
  }
}

:root {
  --surface: var(--lumi-sys-color--surface, #fdfcfc);
  --surface-dim: var(--lumi-sys-color--surface-dim, #f2f0f0);
  --surface-bright: var(--lumi-sys-color--surface-bright, #ffffff);
  --surface-container: var(--lumi-sys-color--surface-container, #f2f0f0);
  --surface-container-high: var(--lumi-sys-color--surface-container-high, #e6e6e6);
  --on-surface: var(--lumi-sys-color--on-surface, #000000);
  --on-surface-variant: var(--lumi-sys-color--on-surface-variant, rgba(0, 0, 0, 0.55));
  --primary: var(--lumi-sys-color--primary, #3186ff);
  --primary-container: var(--lumi-sys-color--accent-container, #dcf1ff);
  --accent-container: var(--lumi-sys-color--accent-container, #dcf1ff);
  --accent-fixed: var(--lumi-sys-color--accent-fixed, #3186ff);
  --positive: var(--lumi-sys-color--positive, #008052);
  --positive-container: var(--lumi-sys-color--positive-container, #daf9d4);
  --error: var(--lumi-sys-color--error, #de2d29);
  --error-container: var(--lumi-sys-color--error-container, #ffdeec);
  --stroke-default: var(--lumi-sys-color--stroke-default, #e3e3e3);
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-full: 999px;
  --spacing-s: 8px; --spacing-m: 12px; --spacing-l: 16px;
}

html, body {
  background: var(--body-bg, transparent) !important;
  color: var(--on-surface) !important;
  overflow-y: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.widget-container {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
  box-sizing: border-box;
}

:root { --lumi-scrollbar-thumb: rgba(0, 0, 0, 0.20); }
:root[data-theme="dark"], body.dark-mode { --lumi-scrollbar-thumb: rgba(255, 255, 255, 0.20); }
* { scrollbar-width: thin; scrollbar-color: var(--lumi-scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background-color: var(--lumi-scrollbar-thumb); border-radius: var(--lumi-sys-shape--full, 999px); }

button {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; min-height: 36px; padding: 6px 16px;
  font-family: var(--ff-sans, sans-serif);
  font-size: 13px; font-weight: 500; line-height: 18px;
  color: var(--on-surface, #000000);
  background-color: var(--surface-bright, #ffffff);
  border: 1px solid var(--stroke-default, #e3e3e3);
  border-radius: var(--lumi-sys-shape--full, 999px);
  cursor: pointer; user-select: none; box-sizing: border-box;
}
button:hover { background-color: var(--surface-container-high, #e6e6e6); }

.lumi-segmented-group {
  display: flex; background-color: var(--surface-container, #f2f0f0);
  padding: 4px; border-radius: var(--lumi-sys-shape--full, 999px); gap: 4px;
}
.lumi-segmented-btn {
  flex: 1 1 0%; padding: 8px 16px; border: none;
  border-radius: var(--lumi-sys-shape--full, 999px);
  background-color: transparent;
  font-family: var(--ff-sans, sans-serif);
  font-size: 14px; font-weight: 510; cursor: pointer;
  color: var(--on-surface-variant);
  transition: 0.2s;
}
.lumi-segmented-btn.is-selected {
  background-color: var(--surface-bright, #ffffff);
  color: var(--on-surface, #000000);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

select.lumi-select {
  appearance: none; -webkit-appearance: none; width: 100%;
  padding: 8px 40px 8px 12px;
  border: 1px solid var(--stroke-default, #e3e3e3);
  border-radius: var(--r-full, 999px);
  background-color: var(--surface, #fdfcfc);
  color: var(--on-surface);
  font-family: var(--ff-sans, sans-serif);
  font-size: 15px; line-height: 20px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2380868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}

.lumi-headline-m { font-family: var(--ff-sans, sans-serif); font-size: 24px; line-height: 28px; font-weight: 500; }
.lumi-body-s { font-family: var(--ff-sans, sans-serif); font-size: 13px; line-height: 17px; font-weight: 400; }