export declare const widgetStyles = "\n:host {\n  all: initial;\n  /* CSS spec: 'all: initial' intentionally does NOT reset 'direction'\n   * or 'unicode-bidi', so an RTL host page (e.g. dir=rtl on the html\n   * element for Hebrew/Arabic UIs) bleeds through the shadow boundary\n   * and flips every flex inside the widget \u2014 including the budget bar\n   * fill and the label/amount rows. Force LTR explicitly since all\n   * content here is English + dollar amounts. */\n  direction: ltr;\n  display: inline-block;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n  font-size: 13px;\n  line-height: 1.4;\n  color-scheme: dark;\n  --tk-status-bg: rgba(34,197,94,0.10);\n  --tk-status-border: rgba(34,197,94,0.35);\n  --tk-status-fg: #7ee2a8;\n  --tk-status-dot: #22c55e;\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  max-width: 100%;\n  box-sizing: border-box;\n}\n.trigger:focus-visible { outline: 2px solid var(--tk-status-dot); outline-offset: 2px; border-radius: 6px; }\n\n.dot {\n  flex: 0 0 auto;\n  background: var(--tk-status-dot);\n  border-radius: 50%;\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tk-status-dot) 22%, transparent);\n}\n\n:host([mode=\"icon\"]) .trigger { width: 24px; height: 24px; position: relative; padding: 0; }\n:host([mode=\"icon\"]) .glyph {\n  width: 22px; height: 22px;\n  object-fit: contain;\n  display: block;\n}\n:host([mode=\"icon\"]) .dot {\n  position: absolute;\n  right: -2px; bottom: -2px;\n  width: 10px; height: 10px;\n  border: 2px solid #0a0a0a;\n  border-radius: 50%;\n  box-shadow: none;\n}\n\n:host([mode=\"pill\"]) .trigger, :host(:not([mode])) .trigger {\n  height: 28px;\n  padding: 0 12px;\n  background: var(--tk-status-bg);\n  border: 1px solid var(--tk-status-border);\n  border-radius: 999px;\n  color: var(--tk-status-fg);\n  gap: 8px;\n  font-size: 12px;\n  font-weight: 600;\n}\n:host([mode=\"pill\"]) .dot, :host(:not([mode])) .dot { width: 7px; height: 7px; }\n:host([mode=\"pill\"]) .glyph, :host(:not([mode])) .glyph { width: 14px; height: 14px; object-fit: contain; display: block; }\n:host([mode=\"pill\"]) .msg, :host(:not([mode])) .msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }\n\n:host([mode=\"card\"]) .trigger {\n  width: 100%;\n  text-align: left;\n  padding: 10px 14px;\n  background: var(--tk-status-bg);\n  border: 1px solid var(--tk-status-border);\n  border-radius: 8px;\n  color: var(--tk-status-fg);\n  gap: 12px;\n  align-items: center;\n}\n:host([mode=\"card\"]) .dot { width: 8px; height: 8px; }\n:host([mode=\"card\"]) .body { display: flex; flex-direction: column; min-width: 0; flex: 1; }\n:host([mode=\"card\"]) .msg { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n:host([mode=\"card\"]) .sub { font-size: 11px; opacity: 0.75; margin-top: 1px; }\n:host([mode=\"card\"]) .cta {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 5px 11px;\n  background: var(--tk-status-fg);\n  color: #0a0a0a;\n  border: none;\n  border-radius: 6px;\n  font: inherit;\n  font-size: 12px;\n  font-weight: 700;\n  cursor: pointer;\n  flex: 0 0 auto;\n}\n:host([mode=\"card\"]) .cta:hover { filter: brightness(1.08); }\n:host([mode=\"card\"]) .cta:focus-visible { outline: 2px solid var(--tk-status-dot); outline-offset: 2px; }\n:host([mode=\"card\"]) .cta[hidden] { display: none; }\n.panel-cta[hidden] { display: none; }\n\n.panel {\n  position: fixed;\n  inset: unset;\n  margin: 0;\n  padding: 14px;\n  background: #1c1c1c;\n  color: #ededed;\n  border: 1px solid rgba(255,255,255,0.10);\n  border-radius: 10px;\n  box-shadow: 0 16px 40px rgba(0,0,0,0.45);\n  min-width: 280px;\n  max-width: 360px;\n  font-family: inherit;\n  font-size: 13px;\n  z-index: 2147483647;\n}\n.panel::backdrop { background: transparent; }\n.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }\n.panel-head .dot { width: 9px; height: 9px; }\n.panel-head .lockup { height: 14px; opacity: 0.85; }\n.panel-head .cat { font-size: 11px; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.04em; margin-left: auto; }\n.panel-msg { font-weight: 600; margin-bottom: 12px; color: var(--tk-status-fg); }\n.panel-block { padding: 10px 12px; background: rgba(255,255,255,0.04); border-radius: 6px; margin-bottom: 10px; }\n.panel-block + .panel-block { margin-top: 0; }\n.panel-block-head { display: flex; justify-content: space-between; font-size: 11px; opacity: 0.6; margin-bottom: 6px; }\n.panel-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }\n.panel-bar > span { display: block; height: 100%; background: var(--tk-status-dot); }\n.panel-amounts { display: flex; justify-content: space-between; font-size: 12px; }\n.panel-cta {\n  display: inline-flex; align-items: center; gap: 6px;\n  width: 100%;\n  justify-content: center;\n  padding: 8px 12px;\n  margin-top: 4px;\n  background: var(--tk-status-fg);\n  color: #0a0a0a;\n  border: none;\n  border-radius: 6px;\n  font: inherit;\n  font-weight: 700;\n  cursor: pointer;\n}\n.panel-cta:hover { filter: brightness(1.08); }\n.panel-manage {\n  display: block;\n  margin-top: 10px;\n  font-size: 11px;\n  text-align: center;\n  color: rgba(255,255,255,0.5);\n  text-decoration: none;\n  letter-spacing: 0.02em;\n  cursor: pointer;\n}\n/* UA's '[hidden] { display: none }' loses to our '.panel-manage\n * { display: block }' on specificity, so el.hidden = true wouldn't\n * actually hide the element. Reassert it explicitly. */\n.panel-manage[hidden] { display: none; }\n.panel-manage:hover { color: rgba(255,255,255,0.85); text-decoration: underline; }\n.panel-switch {\n  display: block;\n  width: 100%;\n  margin-top: 8px;\n  padding: 8px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  text-align: center;\n  color: rgba(255,255,255,0.85);\n  background: transparent;\n  border: 1px solid rgba(255,255,255,0.18);\n  border-radius: 8px;\n  cursor: pointer;\n  font-family: inherit;\n}\n.panel-switch[hidden] { display: none; }\n.panel-switch:hover { background: rgba(255,255,255,0.06); }\n\n@media (prefers-reduced-motion: no-preference) {\n  .panel { transition: opacity 120ms ease; }\n}\n";
//# sourceMappingURL=styles.d.ts.map