/* ============================================================================
 * SECTION 1: :root + universal
 * ============================================================================ */

:root { --print-text-color: #000000; --print-background-color: #ffffff; --text-inverse: #ffffff; --text-inverse-rgb: 255, 255, 255; --border-rgb: 0, 0, 0; --background-inverse-rgb: 0, 0, 0; --background-base-rgb: 250, 250, 250; --color-positive-rgb: 0, 150, 0; --color-positive: rgb(0, 150, 0); --color-negative-rgb: 255, 0, 0; --color-negative: rgb(255, 0, 0); --opacity-0: 0; --opacity-40: 0.40; --opacity-55: 0.55; --opacity-90: 0.90; --opacity-xs-light: 0.05; --opacity-sm-light: 0.10; --opacity-md-light: 0.15; --opacity-lg-light: 0.20; --opacity-xl-light: 0.50; --opacity-2xl-light: 0.90; --opacity-3xl-light: 1; --opacity-xs-dark: 0.08; --opacity-sm-dark: 0.17; --opacity-md-dark: 0.25; --opacity-lg-dark: 0.33; --opacity-xl-dark: 0.50; --opacity-2xl-dark: 0.90; --opacity-3xl-dark: 1; --opacity-sm: var(--opacity-sm-light); --opacity-md: var(--opacity-md-light); --opacity-lg: var(--opacity-lg-light); --opacity-xl: var(--opacity-xl-light); --opacity-2xl: var(--opacity-2xl-light); --opacity-3xl: var(--opacity-3xl-light); --opacity-default: var(--opacity-3xl); --opacity-low: var(--opacity-sm); --opacity-near-default: var(--opacity-2xl); --background-base: #fafafa; --background-primary-rgb: 250, 250, 250; --background-10: #e6e6e6; --background-20: #bbbbbb; --background-30: #b3b3b3; --background-overlay: rgba(0, 0, 0, var(--opacity-xl)); --border-primary: rgba(var(--border-rgb), var(--opacity-xl)); --border-width-md: 1px; --border-width-lg: 2px; --border-width: var(--border-width-md); --border-style-default: dotted; --border-style-strong: solid; --text-primary: #000000; --color-inverse: #000000; --space-2xs: 1px; --space-xs: 2px; --space-sm: 4px; --space-md: 8px; --space-lg: 16px; --space-xl: 32px; --space-2xl: 64px; /* Breakpoint tokens (min-width of each tier; mobile-first). Reference values only — CSS does not allow var() in @media conditions, so the literal numbers are repeated in @media queries below. */ --breakpoint-xs: 0; --breakpoint-sm: 480px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; --space-3xl: 128px; --space-4xl: 256px; --space-5xl: 512px; --space-6xl: 1024px; --space-7xl: 2048px; --padding-default: var(--space-md); --gap: calc(var(--padding-default) / 2); --flex-cols-wrap: wrap; --divider: 1px; --font-family-default: 'Specter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-family-primary: var(--font-family-default); --font-family-mono: 'Gear', ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace; --font-family-monetary: 'Gear', 'SF Mono', 'Monaco', 'Consolas', monospace; --font-family-legal: 'Trust', Georgia, 'Times New Roman', Times, serif; --font-size-xs: 9px; --font-size-sm: 11px; --font-size-md: 12px; --font-size-lg: 14px; --font-size-xl: 16px; --font-size-2xl: 20px; --font-size-3xl: 30px; --font-size-default: var(--font-size-sm); --font-weight-small: 400; --font-weight-default: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, var(--opacity-low)); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, var(--opacity-low)), 0 2px 4px -1px rgba(0, 0, 0, var(--opacity-low)); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, var(--opacity-low)), 0 10px 10px -5px rgba(0, 0, 0, var(--opacity-low)); --radius-default: 7px; --border-default: var(--border-width) var(--border-style-default) rgba(var(--border-rgb), var(--opacity-3xl)); --background-secondary: var(--background-10); --background-tertiary: var(--background-20); --background-inverse: var(--color-inverse); --transition-lg: 300ms ease; --transition-slow: var(--transition-lg); --letter-spacing-sm: 0.5px; --letter-spacing-lg: 0.02em; --letter-spacing-xl: 0.05em; --letter-spacing-default: var(--letter-spacing-lg); --scale-sm: 1.02; --scale-md: 1.04; --scale-low: var(--scale-sm); --scale-default: var(--scale-md); --z-sm: -9999; --z-md: -1; --z-default: 0; --z-lg: 1; --z-xl: 9999; --blur-default: blur(var(--space-sm)); --scrollbar-width: var(--radius-default); --size-sl-cursor: 12px; --offscreen-offset: -9999px; --space-thumb-sm: 28px; --space-thumb-md: 36px; --space-kbd-min: 24px; --space-tips-max: 900px; --space-error-max: 500px; --space-error-actions-max: 400px; --space-signin-max: 22rem; --space-preview-sidebar: 10px; --space-composer-repair: 140px; --font-size-error-code: 120px; --accent-color: #6432fa; }

/*
 * @font-face for Specter / Gear / Trust is omitted here: static/public/fonts has no .woff/.woff2
 * (only demo CSS). Old src URLs also used invalid filenames (specter[woff2]). When you add real
 * font files, restore @font-face rules with paths like ../public/fonts/Specter/woff2/specter.woff2
 */
* { font-family: var(--font-family-default); font-weight: var(--font-weight-default); font-width: semi-condensed; font-style: normal; font-size: var(--font-size-default); box-sizing: border-box; animation-duration: 0s; animation-delay: 0s; cursor: default; color: var(--text-primary); height: fit-content; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-user-select: none; user-select: none; scrollbar-width: thin; scrollbar-color: transparent transparent; }



/* ============================================================================
 * SECTION 2: attribute selectors ([attr], *:pseudo)
 * ============================================================================ */

[custom-context-menu] { border-radius: var(--radius-default); background: rgba(var(--background-primary-rgb), var(--opacity-55)); backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); }

[switch-thumb] { background: var(--background-20); }

[legal-section-download] { background: var(--background-base); }

[color-swatch-bg-primary] { background: var(--background-base); }

[color-swatch-text-primary] { background: var(--background-inverse); }

[color-swatch-border-primary] { background: var(--border-primary); }

[deletion-td] { background: rgba(var(--color-negative-rgb), var(--opacity-md)) !important; }

[monetary] { font-family: var(--font-family-monetary); font-feature-settings: 'zero' 1, 'tnum' 1; font-variant-numeric: slashed-zero tabular-nums; letter-spacing: var(--letter-spacing-default); color: var(--text-primary); }

/* Legal band: intro + body share the same reading column as [legal-page] */
[legal-content] { max-width: 9in; width: 100%; box-sizing: border-box; }

[field-label] { font-weight: var(--font-weight-default) !important; text-transform: none; letter-spacing: normal; text-decoration: none; font-size: var(--font-size-default); color: var(--text-primary); }

/* Layout attributes — Add flex, column, gap, etc. to ANY element. Never use display: flex in CSS.
 * Flex defaults to row; use [column] for vertical stacks.
 * [wrap] sets flex-wrap on any flex container.
 * Equal flex columns: flex-flow: var(--flex-col-basis-N-flow) + flex: var(--flex-col-basis-N-item) on items.
 * [col-2] … [col-6] — display: grid (overrides [flex]); repeat(N, 1fr) + [gap] for equal columns (avoids flex % + gap bugs).
 */
[flex] { display: flex; }

[column] { flex-direction: column; }

/* Start-alignment hook for top-anchored layout (flex/grid/inline). */
[top] { align-items: start; align-content: start; vertical-align: top; top: 0; }

/* End-alignment hook for bottom-anchored layout (flex/grid/inline). */
[bottom] { align-items: end; align-content: end; vertical-align: bottom; margin-top: auto; bottom: 0; }

[absolute] { position: absolute; }

[sticky] { position: sticky; }

[justify-center] { justify-content: center; }

[justify-end] { justify-content: flex-end; }

[left] { text-align: left; place-items: baseline; }

[right] { /* Push this box to the trailing edge (flex/block row; LTR = right) */ margin-left: auto; margin-inline-start: auto; margin-right: 0; margin-inline-end: 0; /* Inner text / inline content (end = trailing side in RTL/LTR) */ text-align: end; /* When this node is a flex container: pack children to the trailing edge */ justify-content: flex-end; /* Grid: align to end of grid area on the inline axis */ justify-self: end; place-items: end; }

[gap] { gap: var(--gap); }

[space] { gap: var(--space-lg); }

[spread] { gap: var(--space-4xl); }

[space-between] { justify-content: space-between !important; }

[space-around] { justify-content: space-around !important; }

[no-overflow] { overflow: hidden !important; }

[wrap] { flex-wrap: var(--flex-cols-wrap); }

[col-2] { grid-template-columns: repeat(2, 1fr); }

[col-3] { grid-template-columns: repeat(3, 1fr); }

[col-4] { grid-template-columns: repeat(4, 1fr); }

[col-5] { grid-template-columns: repeat(5, 1fr); }

[col-6] { grid-template-columns: repeat(6, 1fr); }

[col-7] { grid-template-columns: repeat(7, 1fr); }

/* Width hierarchy — boolean attrs that pin an element to a --space-* token.
 Mirrors the [col-N] hierarchy above; one rule per token so any element on the
 site can opt into a fixed width without page-specific selectors. */
[width-sm] { width: var(--space-sm) !important; }

[width-md] { width: var(--space-md) !important; }

[width-lg] { width: var(--space-lg) !important; }

[width-xl] { width: var(--space-xl) !important; }

[width-2xl] { width: var(--space-2xl) !important; }

[width-3xl] { width: var(--space-3xl) !important; }

[width-4xl] { width: var(--space-4xl) !important; }

[width-5xl] { width: var(--space-5xl) !important; }

[width-6xl] { width: var(--space-6xl) !important; }

[width-7xl] { width: var(--space-7xl) !important; }

/* Height hierarchy — mirrors [width-Nxl]. One rule per --space-* token, plus
 [height-full] for the 100% case. Use on app-header / app-utility (fixed bar
 heights) or any element that needs to pin its height to a token without a
 page-specific selector. */
[height-sm] { height: var(--space-sm) !important; }

[height-md] { height: var(--space-md) !important; }

[height-lg] { height: var(--space-lg) !important; }

[height-xl] { height: var(--space-xl) !important; }

[height-2xl] { height: var(--space-2xl) !important; }

[height-3xl] { height: var(--space-3xl) !important; }

[height-4xl] { height: var(--space-4xl) !important; }

[height-5xl] { height: var(--space-5xl) !important; }

[height-6xl] { height: var(--space-6xl) !important; }

[height-7xl] { height: var(--space-7xl) !important; }

[height-full] { height: 100% !important; }

/* Padding hierarchy — mirrors [width-Nxl]/[height-Nxl]. One rule per --space-* token,
 plus [padding-default] for the project default and [padding-full] is omitted (no
 sensible meaning). Use on tags whose layout previously hardcoded `padding: var(--…)`
 in their CSS rule — replace the property with the matching [padding-Nxl] attribute. */
[padding-sm]      { padding: var(--space-sm); }

[padding-md]      { padding: var(--space-md); }

[padding-lg]      { padding: var(--space-lg); }

[padding-xl]      { padding: var(--space-xl); }

[padding-2xl]     { padding: var(--space-2xl); }

[padding-3xl]     { padding: var(--space-3xl); }

[padding-4xl]     { padding: var(--space-4xl); }

[padding-5xl]     { padding: var(--space-5xl); }

[padding-6xl]     { padding: var(--space-6xl); }

[padding-7xl]     { padding: var(--space-7xl); }

[padding-default] { padding: var(--padding-default); }

/* MARGIN hierarchy — mirrors [padding-Nxl]. Use on tags that need a margin in the same scale. */
:root { --margin-default: var(--space-md); }

[margin-sm]      { margin: var(--space-sm); }

[margin-md]      { margin: var(--space-md); }

[margin-lg]      { margin: var(--space-lg); }

[margin-xl]      { margin: var(--space-xl); }

[margin-2xl]     { margin: var(--space-2xl); }

[margin-3xl]     { margin: var(--space-3xl); }

[margin-4xl]     { margin: var(--space-4xl); }

[margin-5xl]     { margin: var(--space-5xl); }

[margin-6xl]     { margin: var(--space-6xl); }

[margin-7xl]     { margin: var(--space-7xl); }

[margin-default] { margin: var(--margin-default); }

/* group-control: unified markup uses data-ui=…; [column] + [space] for vertical stacks and child gap */
[column-3] { display: grid; grid-template-columns: repeat(3, 1fr); }

[bare-group] { background: unset; border-width: unset; border-style: unset; border-color: unset; padding: unset; }

/* [fill] — layout shells only; no tag+[fill] selectors. */
[fill] { width: 100%; flex: 0 1 auto; min-width: 0; }

/* [grow] — flex sibling that consumes remaining space without forcing a width:100% (which competes with explicit-width siblings). Pair with sized siblings (e.g. [width-Nxl]) when one child should be fixed and the other fills the rest. */
[grow] { flex: 1 1 0; min-width: 0; }

/* [stretch] — claims the remaining available width. Cascade falls through to the strongest supported keyword: WebKit/Blink legacy → Gecko legacy → W3C standard. */
[stretch] {
  width: -webkit-fill-available;  /* WebKit/Blink legacy */
  width: -moz-available;          /* Gecko legacy */
  width: stretch;                 /* W3C standard */
}

[square] { aspect-ratio: 1 / 1 !important; min-height: unset !important; }

[card] { background: var(--background-10); border-width: var(--border-width); border-style: var(--border-style-default); border-color: rgba(var(--border-rgb), var(--opacity-3xl)); border-radius: var(--radius-default); padding: var(--padding-default); }

[card]:hover { border-width: var(--border-width); border-style: var(--border-style-strong); border-color: rgba(var(--border-rgb), var(--opacity-3xl)); }

/* Canonical layout shells: app-* regions use [flex] or [column] only (no [fill] — rules below); container uses [fill][space][grid]; section uses [fill][space] (display:flex from `section {}`); content uses [flex][fill][space] ([flex] overrides `content {}` grid);
   group-control uses [flex][fill][column][space]; group-item uses [fill][gap][grid]; action-group uses [flex][fill]; action-item uses [flex] or [grid] (e.g. under [column-3]). Former layout booleans live in contextual rules. */
[header-content] { gap: var(--space-lg); }

[footer-fill] { display: grid; gap: var(--gap); min-width: 0; }

[flex-fill] { gap: var(--gap); align-items: center; min-width: 0; }

[full] { width: 100%; min-width: fit-content; align-items: center; }

[grid] { display: grid; }

[data-featured] { display: grid; }

[bold] { font-weight: var(--font-weight-bold) !important; }

/* Layout boolean — centers children in flex or grid containers (not used on `<content>` — use `content {}` or `[data-*]` if needed). */
[center] { justify-content: center; align-items: center; place-items: center; text-align: center; margin-left: auto; margin-right: auto; }

[actions] { display: grid; justify-items: center; align-items: center; gap: var(--gap); width: var(--space-3xl); }

[blur] { backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); background: rgba(var(--background-primary-rgb), var(--opacity-low)) !important; }

[bare] { justify-content: unset !important; width: unset !important; background: unset !important; border-width: unset !important; border-style: unset !important; border-color: unset !important; padding: unset !important; min-height: unset !important; box-shadow: unset !important; -webkit-box-shadow: unset !important; }

[accordion-title] { font-weight: var(--font-weight-semibold); font-size: var(--font-size-default); color: var(--text-primary); text-transform: uppercase; letter-spacing: var(--letter-spacing-xl); margin-bottom: var(--space-sm); margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); }

[category-label] { font-weight: var(--font-weight-medium); flex: 1; font-size: var(--font-size-default); }

[detail-label] { font-weight: var(--font-weight-medium) !important; }

[sidebar-notation] { font-weight: var(--font-weight-medium) !important; }

*:focus { outline: none !important; }

*:focus-visible { outline: none !important; }

[loading-spinner] { animation-duration: 1s !important; width: var(--space-xl); height: var(--space-xl); border-radius: 50%; animation: spin 1s linear infinite; }

/* ============================================================================
 * LOADING SCREEN
 * 
 * A full-viewport overlay shown while the app initializes.
 * Covers the entire window, centers the spinner, and sits above everything.
 * ============================================================================ */
[loading-screen] { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--background-base); z-index: 9999; }

[loading-group] { width: 100%; height: 100%; }

/* Native hidden attribute — <elem hidden> */
[hidden] { display: none !important; }

[icon-size-sm] { font-size: var(--font-size-default); }

[icon-size-md] { font-size: var(--font-size-default); }

[icon-size-lg] { font-size: var(--font-size-default); }

[icon-size-xl] { font-size: var(--font-size-default); }

[mobile] { font-size: var(--font-size-default); }

[tm] { font-size: 0.5em; vertical-align: super; font-weight: var(--font-weight-default); margin-left: 0.1em; }

[reg] { font-size: 0.5em; vertical-align: super; font-weight: var(--font-weight-default); margin-left: 0.1em; }

/* ============================================================================
 * FULL-PAGE NOTIFICATION SYSTEM
 * 
 * A full-viewport overlay notification (toast) that covers the entire screen.
 * Click anywhere to dismiss. Uses theme color + low opacity background.
 * Visibility is toggled via the data-visible attribute.
 * ============================================================================ */
[notification-banner] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: var(--z-xl); align-items: flex-start; justify-content: flex-start; opacity: 0; visibility: hidden; pointer-events: none; background: rgba(var(--background-primary-rgb), var(--opacity-55)); backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); cursor: pointer; }

[notification-visible] { opacity: 1; visibility: visible; pointer-events: auto; }

/* TODO(js): when toggling data-visible on [notification-banner], ALSO
 toggle a single attribute `[notification-banner-visible]` / remove it.
 These replacements preserve the original behavior while keeping selectors
 to single-attribute form. */
[notification-banner-visible] { opacity: 1; visibility: visible; pointer-events: auto; }

[notification-banner-hidden-state] { opacity: 0; visibility: hidden; pointer-events: none; }

[notification-hidden] { opacity: 0; visibility: hidden; pointer-events: none; }

/* --- Notification Color Themes ---
 * Each type gets a near-opaque colored background with inverse text. */
[notification-success] { background: rgba(var(--color-positive-rgb), var(--opacity-near-default)); color: var(--text-inverse); }

[notification-error] { background: rgba(var(--color-negative-rgb), var(--opacity-near-default)); color: var(--text-inverse); }

[notification-warning] { background: rgba(var(--color-negative-rgb), var(--opacity-near-default)); color: var(--text-inverse); }

[notification-info] { background: var(--accent-color); color: var(--text-inverse); }

[notification-text] { font-weight: var(--font-weight-semibold); font-family: var(--font-family-default); max-width: 100%; }

/* ============================================================================
 * SIGN-IN LOADING SPINNER CONTAINER
 * Centers a spinner during the sign-in flow.
 * ============================================================================ */
[signin-progress-container] { align-items: center; justify-content: center; }

/* ============================================================================
 * APP HEADER
 *
 * The sticky top navigation bar. Uses flexbox to space its children
 * (logo, nav, user area). No background — frosted action items only.
 * ============================================================================ */
[header-group] { min-width: 0; }

[header-nav-section] { flex: 1; justify-content: flex-start; }

/* Match pattern: [home] / nav / avatar each wrapped in <content>; middle column grows for nav flex. */
[header-cell] { align-items: center; justify-content: center; min-width: 0; }

[header-nav-cell] { flex: 1; justify-content: flex-start; }

[nav-title] { white-space: nowrap; font-weight: var(--font-weight-bold); color: var(--text-primary); min-width: var(--space-3xl); text-align: left; font-family: var(--font-family-default); }

[nav-menu] { gap: var(--gap); list-style: none; min-width: 0; }

[nav-link] { align-items: center; padding: var(--space-sm) var(--space-md); text-decoration: none; color: var(--text-primary); font-weight: 500; min-width: 0; display: inline-block; padding-top: var(--space-md); padding-bottom: var(--space-md); padding-left: var(--space-lg); padding-right: var(--space-lg); font-size: var(--font-size-default); }

/* Header action items: frosted glass like util bar (section) */
[header-link] { min-width: 0; border-radius: var(--radius-default); background: rgba(var(--background-primary-rgb), var(--opacity-55)); backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); }

[link-text] { white-space: nowrap; min-width: 0; }

/* Nav links used in user panel / settings nav */
[option-nav] { box-sizing: border-box; }

/* ============================================================================
 * HEADER AVATAR (user avatar area, pushed to the right)
 * ============================================================================ */
[header-avatar] { align-items: center; gap: var(--gap); margin-left: auto; }

/* ============================================================================
 * HEADER HOME LINK
 * The logo / [home] icon in the top-left of the header.
 * ============================================================================ */
[home] { align-items: center; }

[home-action-frosted] { background: rgba(var(--background-primary-rgb), var(--opacity-55)); backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); }

[home-logo] { display: block; width: var(--font-size-lg); height: var(--font-size-lg); fill: currentColor; stroke: none; }

/* [panel-actions][data-state~="fixed"]: use flex attribute in HTML */
[panel-fixed-text] { font-size: var(--font-size-default); font-weight: var(--font-weight-medium); }

[panel-fixed-icon] { flex-shrink: 0; }

/* --- Base Input Styles ---
 * Shared by text, number, date inputs and textareas.
 * No padding or border by default. Tag-level `textarea` / `input` / `select`
 * rules live in the NATIVE HTML ELEMENTS block at the top of main[css]. */
[input-text]::placeholder { color: var(--text-primary); }

[input-number]::placeholder { color: var(--text-primary); }

[input-date]::placeholder { color: var(--text-primary); }

/* --- Base Option Styles ---
 * Aligned with group-item. Padding comes from group-item or contextual rules per HTML structure. */
[option-theme] { border-width: 0; border-style: none; border-color: transparent; flex: 1; align-items: center; justify-content: center; min-height: var(--space-2xl); text-align: center; border-radius: var(--radius-default); background: var(--background-20); color: var(--text-primary) !important; cursor: pointer; box-sizing: border-box; }

/* action-group is always a flex container — gap/space-between require it */
[disabled-action] { cursor: not-allowed !important; }

[active-passthrough] { pointer-events: none !important; }

/* Hue options: selected keeps the hue color, add ring instead of grey background.
 * !important so this wins over the now-!important [data-state~="selected"] background. */
[hue-selected] { background: transparent !important; box-shadow: 0 0 0 var(--space-xs) rgba(var(--border-rgb), var(--opacity-3xl)); }

/* Toggle inputs: single-element selectors. */
[toggle] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

[category-hover-label] { color: var(--text-primary) !important; }

/* ============================================================================
 * GLASSMORPHISM PANEL BASE
 *
 * Shared frosted-glass styling for dropdown panels, user menu, and modals.
 * Semi-transparent background with blur, subtle border, rounded corners.
 * All three panels use the SAME frost — unified across user, settings, signin.
 * ============================================================================ */
[user-avatar] { width: var(--space-md); height: var(--space-md); background: var(--accent-color); border-radius: var(--radius-default); }

[panel-hidden] { display: none !important; }

[panel-signin-overflow] {  }

/* Admin diagnostics HUD — fixed corner placement */
[panel-admin-diagnostics] { position: fixed; top: var(--space-lg); right: var(--space-lg); width: auto; min-width: 0; max-width: min(90vw, var(--space-signin-max)); z-index: 999999; }

[toggle-switch] { flex-shrink: 0; align-items: center; }

[toggle-checkbox] { display: none; position: absolute; opacity: 0; width: 0; height: 0; }

[switch-label] { position: relative; display: inline-block; width: var(--space-xl); height: var(--space-xl); cursor: pointer; flex-shrink: 0; }

[switch-track] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--radius-default); background: var(--background-20); }

[switch-thumb] { position: absolute; top: var(--space-xs); left: var(--space-xs); width: var(--space-xl); height: var(--space-xl); border-radius: 50%; background: var(--background-base); box-shadow: var(--shadow-md); }

[switch-track-on] { background: var(--accent-color); }

[switch-thumb-on] { transform: translateX(var(--space-xl)); box-shadow: var(--shadow-md); }

[info-text] { font-size: var(--font-size-default); color: var(--text-primary); }

[info-status] { font-size: var(--font-size-default); color: var(--text-primary); }

[form-field] { align-items: stretch; justify-content: flex-start; padding: var(--space-xs); border-radius: var(--radius-default); }

/* ============================================================================
 * GROUP-ITEM OPACITY & BACKGROUND PATTERN
 *
 * Items start at 70% opacity; on hover: full opacity + subtle background.
 * When checked/focused: always full opacity.
 * ============================================================================ */
[item-title] { font-size: var(--font-size-default); font-weight: var(--font-weight-medium); color: var(--text-primary); }

[item-description] { font-size: var(--font-size-default); color: var(--text-primary); }

/* ============================================================================
 * USER NOTIFICATIONS
 * Positioned in the header, next to the user avatar.
 * Circular like profile pic when it contains an icon button.
 * ============================================================================ */
[user-notifications] { align-items: center; margin-left: var(--space-md); }

[notification-button] { align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); border-radius: var(--radius-default); }

/* Width is set per <app-main> via the [width-Nxl] hierarchy — most pages use
 * [width-6xl], welcome uses [width-5xl]. The old `app-main { width: 6xl }` and
 * `[data-page="welcome"] { width: 5xl }` rules were removed in favor of the
 * markup-level attribute (set 2026-04-26 per "MAKE APP-MAIN USE THE WIDTH ATTR
 * WE MADE INSTEAD"). */
[form] { width: var(--space-5xl); }

[sidebar-float] { float: left; margin-right: var(--gap); }

[sidebar-sibling] { min-width: 0; }

[pro-container] { width: var(--space-7xl); }

/* ============================================================================
 * TRANSACTION DETAIL — Expandable Category Details
 * 
 * Hidden by default; shown when a category checkbox is checked.
 * Lists individual transactions with date, description, and amount.
 * ============================================================================ */
[detail-item]:hover { background: var(--background-30); border-radius: var(--radius-default); }

[detail-summary] { margin-top: var(--space-sm); padding-top: var(--space-md); font-weight: var(--font-weight-semibold); }

/* Table view: accordion categories do not open — hide [data-id="category-details"] for all */
[table-view-hide-details] { display: none !important; }

/* ============================================================================
 * SIDEBAR FINANCIAL — category row ([option-category] only; no [financial-accordion] prefix)
 * ============================================================================ */
[option-category] { width: 100%; margin: var(--space-sm) 0; background: var(--background-20); }

[category-no-data] { cursor: default; pointer-events: none; opacity: var(--opacity-xl); }

/* ============================================================================
 * WIDGET SUMMARY
 * A summary card with rounded corners, border, and hover lift effect.
 * ============================================================================ */
[widget-summary] { background: var(--background-20); border-radius: var(--radius-default); padding: var(--space-lg); }

[summary-title] { font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-lg); }

[summary-item] { justify-content: space-between; align-items: center; padding: var(--space-md) 0; }

[item-label] { font-size: var(--font-size-default); color: var(--text-primary); }

[item-value] { font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-primary); }

/* ============================================================================
 * MAIN CONTENT AREA
 * The flexible content region next to the sidebar.
 * ============================================================================ */
[content-header] { justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); padding-bottom: var(--space-xl); min-width: 0; }

[page-title] { font-size: var(--font-size-default); font-weight: var(--font-weight-bold); color: var(--text-primary); white-space: nowrap; min-width: 0; }

[page-actions] { gap: var(--gap); align-items: center; }

[pointer] { cursor: pointer; }

/* Accent CTA — [primary] only */
[primary] { background: var(--background-inverse); color: var(--text-inverse) !important; }

[primary-icon] { color: var(--text-inverse) !important; }

[delete-confirm] { background: var(--color-negative); color: var(--color-negative); }

[delete-confirm-icon] { color: white; fill: white; stroke: white; }

[primary-text] { color: var(--text-inverse) !important; }

[accent-primary-icon] { color: var(--text-inverse) !important; fill: currentColor !important; stroke: currentColor !important; }

[danger-text] { color: white; }

/* Error page content */
[page-error-title] { font-size: var(--font-size-default); margin-bottom: var(--space-lg); }

[page-error-message] { color: var(--text-primary); margin-bottom: var(--space-xl); }

[footer-summary] { justify-content: center; }

[summary-stats] { gap: var(--gap); background: transparent; padding: 0; border-radius: var(--radius-default); display: grid; }

[stat-item] { align-items: flex-start; text-align: left; padding: var(--space-xl); border-radius: var(--radius-default); }

[stat-label] { font-size: var(--font-size-default); color: var(--text-primary); margin-bottom: var(--space-md); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-xl); }

[stat-value] { font-weight: var(--font-weight-bold); color: var(--text-primary); font-size: var(--font-size-default); font-family: var(--font-family-default); }

/* ============================================================================
 * VERSION UPDATE BANNER
 * 
 * A fixed top banner that slides down when a new version is available.
 * Uses accent color background with smart text contrast.
 * Hidden by default; shown via data-visible="true".
 * ============================================================================ */
[update-banner] { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; display: none; justify-content: center; align-items: center; gap: var(--gap); max-width: 100%; width: 100%; padding: var(--space-lg); background: var(--accent-color); box-shadow: var(--shadow-md); animation: slideDown 0.3s ease-out; }

/* [update-banner]: use flex attribute in HTML (version-control[js]) */
[banner-icon] { flex-shrink: 0; }

[banner-icon-light] { color: var(--text-primary); }

[banner-icon-dark] { color: var(--text-inverse); }

[banner-message] { gap: var(--gap); flex: 1; }

[banner-title] { font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); font-family: var(--font-family-default); }

[banner-text-light] { color: var(--text-primary); }

[banner-text-dark] { color: var(--text-inverse); }

[banner-text] { font-size: var(--font-size-default); opacity: var(--opacity-near-default); font-family: var(--font-family-default); }

[banner-actions] { align-items: center; gap: var(--gap); flex-shrink: 0; }

[banner-close] { align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); cursor: pointer; }

[banner-close-light] { color: var(--text-primary); }

[banner-close-dark] { color: var(--text-inverse); }

/* ============================================================================
 * UTILITY CLASSES
 * ============================================================================ */
[sr-only] { position: absolute; width: var(--space-2xs); height: var(--space-2xs); padding: 0; margin: calc(-1 * var(--space-2xs)); clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; border-style: none; border-color: transparent; }

[summary-label] { color: var(--text-primary); font-weight: var(--font-weight-semibold); }

[summary-value] { font-weight: var(--font-weight-bold); }

/* [unsupported-viewport]: use flex column center gap in HTML; hidden by default, shown via main[js] */
[unsupported-viewport] { position: fixed; inset: 0; z-index: 999999; background: var(--background-inverse); padding: var(--space-xl); box-sizing: border-box; }

[unsupported-message] { font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-inverse); text-align: center; }

[unsupported-hint] { font-size: var(--font-size-default); color: var(--text-inverse); text-align: center; max-width: 100%; }

/* ============================================================================
 * TIPS PAGE (non-account/index[html])
 * Single-attribute selectors only (no [tips-page] [child] chains).
 * ============================================================================ */
[tips-page] { padding: var(--space-2xl); max-width: var(--space-tips-max); margin: 0 auto; font-size: var(--font-size-default); color: var(--text-primary); }

[tips-page-intro] { text-align: center; padding: var(--space-2xl); }

[tips-intro-title] { font-size: var(--font-size-default); font-weight: var(--font-weight-bold); color: var(--text-primary); }

[tips-intro-lead] { font-size: var(--font-size-default); color: var(--text-primary); }

[tips-section-title] { align-items: center; font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-primary); }

[tips-section-icon] { font-size: var(--font-size-default); color: var(--accent-color); }

[tips-section-heading] { color: var(--text-primary); }

[tips-grid] { display: grid; gap: var(--gap); }

[tip-card] { padding: var(--space-xl); background: var(--background-secondary); border-radius: var(--radius-default); border-width: var(--border-width-md); border-style: solid; border-color: var(--border-primary); }

[tip-title] { font-size: var(--font-size-default); font-weight: var(--font-weight-medium); color: var(--text-primary); }

[tip-description] { font-size: var(--font-size-default); color: var(--text-primary); }

[shortcut-item] { align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-xl); background: var(--background-secondary); border-radius: var(--radius-default); border-width: var(--border-width-md); border-style: solid; border-color: var(--border-primary); }

[shortcut-action] { font-size: var(--font-size-default); color: var(--text-primary); }

[tips-community-post] { padding: var(--space-xl); background: var(--background-secondary); border-radius: var(--radius-default); border-width: var(--border-width-md); border-style: solid; border-color: var(--border-primary); }

[tips-post-header] { align-items: center; }

[tips-post-avatar] { align-items: center; justify-content: center; width: var(--space-thumb-md); height: var(--space-thumb-md); background: var(--accent-color); color: var(--text-inverse); border-radius: var(--radius-default); font-size: var(--font-size-default); font-weight: var(--font-weight-medium); }

[tips-post-meta] { flex: 1 1 auto; min-width: 0; }

[tips-post-author] { font-size: var(--font-size-default); font-weight: var(--font-weight-medium); color: var(--text-primary); }

[tips-post-time] { font-size: var(--font-size-default); color: var(--text-primary); }

[tips-post-actions] { padding-top: var(--space-lg); border-top-width: var(--border-width-md); border-top-style: solid; border-top-color: var(--border-primary); }

[tips-post-action] { align-items: center; padding: var(--space-md) var(--space-lg); font-size: var(--font-size-default); color: var(--text-primary); background: transparent; border-radius: var(--radius-default); cursor: pointer; }

[tips-post-action]:hover { color: var(--text-primary); background: var(--background-tertiary); }

/* ============================================================================
 * ERROR PAGE (404.html)
 * ============================================================================ */
[error-page] { padding: var(--space-2xl); text-align: center; }

[error-code] { font-size: var(--font-size-error-code); font-weight: var(--font-weight-bold); color: var(--accent-color); font-family: var(--font-family-default); }

[error-title] { font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-primary); font-family: var(--font-family-default); }

[error-message] { font-size: var(--font-size-default); color: var(--text-primary); max-width: var(--space-error-max); font-family: var(--font-family-default); }

[error-actions] { margin-top: var(--space-2xl); width: 100%; max-width: var(--space-error-actions-max); }

/* ============================================================================
 * RESET PASSWORD PAGE
 * ============================================================================ */
[reset-page] { min-height: 100vh; padding: var(--space-2xl); }

[reset-title] { font-size: var(--font-size-default); margin-bottom: var(--space-xl); }

[reset-description] { color: var(--text-primary); margin-bottom: var(--space-2xl); }

[reset-button] { display: inline-block; padding: var(--space-lg) var(--space-2xl); background: var(--accent-color); color: var(--text-inverse); border-radius: var(--radius-default); text-decoration: none; font-weight: var(--font-weight-medium); }

[reset-button]:hover { opacity: var(--opacity-near-default); }

[reset-button-secondary] { background: var(--background-tertiary); color: var(--text-primary); }

[reset-title-icon] { font-size: var(--font-size-3xl); margin-right: var(--space-md); vertical-align: middle; }

[options-list] { text-align: left; margin: var(--space-2xl) 0; }

/* ============================================================================
 UNIFIED THEME SELECTOR
 Allows users to choose between Light, Dark, and Auto themes.
 Each option shows a miniature preview of the app in that theme.
 Can render in "full" (settings page) or "compact" (popup panel) layouts.
 ============================================================================ */
[unified-theme-selector] { /* Tell the browser these elements' internals don't affect outside layout. "layout" = internal layout changes won't trigger parent reflow. "style" = internal CSS counters/properties don't leak out. */ contain: layout style; /* Default value: let browser decide what to GPU-accelerate. Avoids unnecessary layer promotion (which wastes memory). */ will-change: auto; display: block; width: 100%; background: var(--background-20) !important; border-radius: var(--radius-default) !important; padding: var(--space-sm) !important; }

[theme-options] { width: 100%; align-items: stretch; }

[theme-option] { flex: 1; min-width: 0; min-height: 0; border-radius: var(--radius-default); background: var(--background-base); }

/* ---- Hidden Radio Inputs ----
 Native radio buttons are visually hidden but remain accessible.
 The visible UI is the adjacent [option-theme] label. */
[unified-theme-radio] { position: absolute; opacity: 0; width: 0; height: 0; }

[option-theme-compact] { min-height: var(--space-xl); }

[option-theme-active] { border-width: 0 !important; border-style: none !important; border-color: transparent !important; background: var(--background-20) !important; }

/* ============================================================================
 THEME PREVIEW — Calendar grid ([preview-cal-cell]) same as SETTINGS_POPUP
 ============================================================================ */
[unified-theme-preview] { height: var(--space-2xl); min-height: var(--space-2xl); max-height: var(--space-2xl); width: 100%; max-width: 100%; min-width: 0; border-radius: var(--radius-default); margin-bottom: var(--space-sm); border-width: 0; border-style: none; border-color: transparent; }

/* ============================================================================
 UNIFIED COLOR PICKER
 Accent color selection component with a clickable preview swatch
 and optional inline editing of the hex/RGB value.
 ============================================================================ */
[unified-color-picker] { /* Tell the browser these elements' internals don't affect outside layout. "layout" = internal layout changes won't trigger parent reflow. "style" = internal CSS counters/properties don't leak out. */ contain: layout style; /* Default value: let browser decide what to GPU-accelerate. Avoids unnecessary layer promotion (which wastes memory). */ will-change: auto; display: block; width: 100%; background: var(--background-20) !important; border-radius: var(--radius-default) !important; padding: var(--space-sm) !important; }

/* ---- Compact Color Preview ----
 Horizontal row showing a color swatch + hex value text.
 Clickable to open the full color picker. */
[color-preview-compact] { align-items: center; padding: var(--space-md); border-radius: var(--radius-default); background: var(--background-20); }

[color-preview-compact]:hover { cursor: pointer; }

[color-value] { font-size: var(--font-size-default); font-family: var(--font-mono); color: var(--text-primary); }

[color-picker-trigger] { display: inline-flex; align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); border-radius: var(--radius-default); background: var(--background-20); }

[color-picker-trigger]:hover { cursor: pointer; color: var(--text-primary); }

/* ============================================================================
 UNIFIED FONT SIZE SELECTOR
 Lets users choose between Small, Medium, and Large text sizes.
 Can display as a dropdown (select) or visual cards (radio buttons).
 ============================================================================ */
[unified-font-size-selector] { /* Tell the browser these elements' internals don't affect outside layout. "layout" = internal layout changes won't trigger parent reflow. "style" = internal CSS counters/properties don't leak out. */ contain: layout style; /* Default value: let browser decide what to GPU-accelerate. Avoids unnecessary layer promotion (which wastes memory). */ will-change: auto; display: block; width: 100%; background: var(--background-20) !important; border-radius: var(--radius-default) !important; padding: var(--space-sm) !important; }

/* ---- Dropdown Select Mode ----
 Markup: unified-select on native <select> (no [unified-*-selector] select). */
[unified-select] { width: 100%; padding: var(--space-md); border-width: 0; border-style: none; border-color: transparent; border-radius: var(--radius-default); background: var(--background-20); color: var(--text-primary); font-size: var(--font-size-default); cursor: pointer; }

/* ---- Visual Card Mode ----
 Horizontal row of font size option cards */
[font-size-options] { width: 100%; }

[font-size-option] { display: block; flex: 1; padding: var(--space-lg); }

[unified-radio-hidden] { position: absolute; opacity: 0; width: 0; height: 0; }

/* ---- Size Option Card ----
 Visual card showing a text preview and size name.
 Interactive border changes on hover/selection. */
[size-option] { align-items: center; border-radius: var(--radius-default); background: var(--background-20); cursor: pointer; text-align: center; }

[size-option-active] { background: var(--accent-color); }

/* ---- Size Preview Text ----
 Shows "Aa" or similar text at the actual font size for visual reference */
[size-preview] { display: block; font-weight: var(--font-weight-bold); margin-bottom: var(--space-sm); color: var(--text-primary); font-size: var(--font-size-default); }

[size-name] { font-size: var(--font-size-default); color: var(--text-primary); }

[size-name-active] { color: var(--accent-color); }

/* ============================================================================
 UNIFIED NOTATION SELECTOR
 Full layout: [option-select] cards; compact: [unified-select].
 Leaf hooks: [unified-notation-example], [unified-notation-title] (see unified-setting-components.js).
 ============================================================================ */
[unified-notation-selector] { /* Tell the browser these elements' internals don't affect outside layout. "layout" = internal layout changes won't trigger parent reflow. "style" = internal CSS counters/properties don't leak out. */ contain: layout style; /* Default value: let browser decide what to GPU-accelerate. Avoids unnecessary layer promotion (which wastes memory). */ will-change: auto; display: block; width: 100%; background: var(--background-20) !important; border-radius: var(--radius-default) !important; padding: var(--space-sm) !important; }

/* Card shell — shared with settings/footer notation rows */
[option-select] { align-items: center; border-radius: var(--radius-default); background: var(--background-20); cursor: pointer; text-align: center; }

/* Checked row — unified uses [unified-radio-hidden]; settings/footer use plain radio */
[option-select-active] { background: var(--accent-color); }

[notation-label-active] { color: var(--accent-color); }

/* Monospace format line (unified injects [unified-notation-example]) */
[unified-notation-example] { display: block; font-family: var(--font-mono); font-weight: var(--font-weight-bold); font-size: var(--font-size-default); margin-bottom: var(--space-sm); color: var(--text-primary); }

[unified-notation-title] { font-size: var(--font-size-default); color: var(--text-primary); }

/* ============================================================================
 UNIFIED DAILY BALANCE TOGGLE
 Binary toggle for showing or hiding daily balance amounts on calendar days.
 Displays as two side-by-side "Show" / "Hide" buttons.
 ============================================================================ */
[unified-daily-balance-toggle] { /* Tell the browser these elements' internals don't affect outside layout. "layout" = internal layout changes won't trigger parent reflow. "style" = internal CSS counters/properties don't leak out. */ contain: layout style; /* Default value: let browser decide what to GPU-accelerate. Avoids unnecessary layer promotion (which wastes memory). */ will-change: auto; display: block; width: 100%; background: var(--background-20) !important; border-radius: var(--radius-default) !important; padding: var(--space-sm) !important; }

/* ============================================================================
 UNIFIED LANGUAGE SELECTOR
 Dropdown menu for choosing the application language.
 Standard HTML select styled to match the design system.
 ============================================================================ */
[unified-language-selector] { /* Tell the browser these elements' internals don't affect outside layout. "layout" = internal layout changes won't trigger parent reflow. "style" = internal CSS counters/properties don't leak out. */ contain: layout style; /* Default value: let browser decide what to GPU-accelerate. Avoids unnecessary layer promotion (which wastes memory). */ will-change: auto; display: block; width: 100%; background: var(--background-20) !important; border-radius: var(--radius-default) !important; padding: var(--space-sm) !important; }

/* ============================================================================
 UNIFIED TIMEZONE SELECTOR
 Dropdown menu for choosing the user's timezone.
 Identical styling to the language selector.
 ============================================================================ */
[unified-timezone-selector] { /* Tell the browser these elements' internals don't affect outside layout. "layout" = internal layout changes won't trigger parent reflow. "style" = internal CSS counters/properties don't leak out. */ contain: layout style; /* Default value: let browser decide what to GPU-accelerate. Avoids unnecessary layer promotion (which wastes memory). */ will-change: auto; display: block; width: 100%; background: var(--background-20) !important; border-radius: var(--radius-default) !important; padding: var(--space-sm) !important; }

/* ============================================================================
 UNIFIED TOGGLE SWITCH
 On/off toggle (settings popup / unified settings). Leaf attrs only in CSS:
 [unified-toggle-switch], [unified-toggle-row], [unified-toggle-track], [unified-toggle-thumb], [unified-toggle-input]
 ============================================================================ */
[unified-toggle-switch] { /* Tell the browser these elements' internals don't affect outside layout. "layout" = internal layout changes won't trigger parent reflow. "style" = internal CSS counters/properties don't leak out. */ contain: layout style; /* Default value: let browser decide what to GPU-accelerate. Avoids unnecessary layer promotion (which wastes memory). */ will-change: auto; display: block; width: 100%; background: var(--background-20) !important; border-radius: var(--radius-default) !important; padding: var(--space-sm) !important; }

[unified-toggle-row] { align-items: center; justify-content: center; }

[unified-toggle-input] { position: absolute; opacity: 0; width: 0; height: 0; }

/* Track (label) — pill rail */
[unified-toggle-track] { display: block; position: relative; width: var(--space-2xl); height: var(--space-xl); border-radius: var(--radius-default); background: rgba(var(--background-base-rgb), var(--opacity-low)); }

[unified-toggle-track]:hover { cursor: pointer; }

/* Thumb — slides inside track */
[unified-toggle-thumb] { display: block; position: absolute; top: var(--space-sm); left: var(--space-sm); width: var(--space-lg); height: var(--space-lg); border-radius: var(--radius-default); background: var(--background-base); }

/* ============================================================================
 UNIFIED NUMBER INPUT
 Numeric input field for settings like "items per page" or "refresh interval".
 ============================================================================ */
[unified-number-input] { /* Tell the browser these elements' internals don't affect outside layout. "layout" = internal layout changes won't trigger parent reflow. "style" = internal CSS counters/properties don't leak out. */ contain: layout style; /* Default value: let browser decide what to GPU-accelerate. Avoids unnecessary layer promotion (which wastes memory). */ will-change: auto; display: block; width: 100%; background: var(--background-20) !important; border-radius: var(--radius-default) !important; padding: var(--space-sm) !important; }

[unified-number] { width: 100%; padding: var(--space-md); border-width: 0; border-style: none; border-color: transparent; border-radius: var(--radius-default); background: var(--background-20); color: var(--text-primary); font-size: var(--font-size-default); }

/* ============================================================================
 UNIFIED FALLBACK COMPONENT
 Generic text input used as a fallback when no specific component exists
 for a particular setting. Provides basic text entry functionality.
 ============================================================================ */
[unified-fallback-component] { /* Tell the browser these elements' internals don't affect outside layout. "layout" = internal layout changes won't trigger parent reflow. "style" = internal CSS counters/properties don't leak out. */ contain: layout style; /* Default value: let browser decide what to GPU-accelerate. Avoids unnecessary layer promotion (which wastes memory). */ will-change: auto; display: block; width: 100%; background: var(--background-20) !important; border-radius: var(--radius-default) !important; padding: var(--space-sm) !important; }

[fallback-control] { display: block; }

[unified-text-input] { width: 100%; padding: var(--space-md); border-width: 0; border-style: none; border-color: transparent; border-radius: var(--radius-default); background: var(--background-20); color: var(--text-primary); font-size: var(--font-size-default); }

/* ============================================================================
 * HERO SECTION
 *
 * The primary above-the-fold section with logo, headline, description,
 * and call-to-action buttons. Centered with generous padding.
 * ============================================================================ */
[hero-logo] { align-items: center; justify-content: center; width: 100%; max-width: 100%; }

[hero-logo-img] { width: 100%; height: auto; display: block; }

[hero-logo-dark] { filter: invert(1); }

[hero-highlight] { color: var(--accent-color); display: block; }

[hero-description] { display: block; font-weight: var(--font-weight-default); color: var(--text-primary); max-width: 100%; text-align: center; }

/* ============================================================================
 * ACTION LABEL BUTTONS
 *
 * The "Get Started" / "Learn More" type buttons on the landing page.
 * Styled similarly to option-toggle — small, bordered.
 * ============================================================================ */
[action-label] { align-items: center; justify-content: center; gap: var(--gap); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-default); font-weight: var(--font-weight-small); border-radius: var(--radius-default); cursor: pointer; white-space: nowrap; border-width: var(--border-width); border-style: var(--border-style-default); border-color: rgba(var(--border-rgb), var(--opacity-3xl)); background: var(--background-base); color: var(--text-primary); }

[action-label]:hover { border-width: var(--border-width); border-style: var(--border-style-strong); border-color: rgba(var(--border-rgb), var(--opacity-3xl)); }

[dashboard-preview] { width: 100%; max-width: 100%; background: var(--background-20); border-radius: var(--radius-default); box-shadow: var(--shadow-xl), 0 0 0 var(--space-2xs) var(--border-primary); }

[preview-header] { gap: var(--gap); padding: var(--space-lg); background: var(--background-base); }

[preview-dot] { width: var(--font-size-sm); height: var(--font-size-sm); border-radius: 50%; background: var(--border-primary); }

[preview-dot]:first-child { background: var(--accent-color); }

[preview-dot]:nth-child(2) { background: var(--accent-color); }

[preview-dot]:nth-child(3) { background: var(--accent-color); }

[preview-content] { display: grid; }

[preview-sidebar] { gap: var(--gap); padding: var(--space-lg); width: var(--space-preview-sidebar); min-width: var(--space-preview-sidebar); flex-shrink: 0; }

[preview-item] { width: 100%; height: var(--space-md); border-radius: var(--radius-default); background: var(--background-20); }

[preview-item-active] { background: var(--accent-color); }

[preview-main] { gap: var(--gap); padding: var(--space-xs); justify-content: center; align-items: center; flex: 1; min-width: 0; }

[preview-card] { gap: var(--gap); padding: var(--space-lg); background: var(--background-base); border-radius: var(--radius-default); }

[preview-card-large] { flex: 1; }

[card-header] { width: 60%; height: var(--space-md); border-radius: var(--radius-default); background: var(--background-20); }

[card-value] { width: 40%; height: var(--space-lg); border-radius: var(--radius-default); background: var(--accent-color); }

[card-chart] { align-items: flex-end; gap: var(--gap); flex: 1; padding-top: var(--space-lg); }

[chart-bar] { flex: 1; background: var(--accent-color); border-radius: var(--radius-default) var(--radius-default) 0 0; min-height: var(--space-xl); }

[preview-grid] { display: grid; gap: var(--gap); }

[action-icon] { align-items: center; justify-content: center; }

/* ============================================================================
 * FEATURES & SOLUTIONS SECTIONS
 *
 * Centered sections with a header ([eyebrow], title, description) and a
 * grid of feature/solution cards below.
 * ============================================================================ */
[section-content] { gap: var(--gap); min-width: 0; }

[section-centered] { text-align: center; }

[eyebrow] { display: block; font-size: var(--font-size-default); font-weight: var(--font-weight-medium, 500); text-transform: uppercase; letter-spacing: var(--letter-spacing-xl); color: var(--accent-color); }

[feature-icon] { align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); color: var(--accent-color); }

[feature-icon-svg] { width: var(--space-xl); height: var(--space-lg); }

/* ============================================================================
 * SOLUTIONS GRID
 *
 * 3-column grid of solution cards with features lists.
 * ============================================================================ */
[solutions-grid] { display: grid; gap: var(--gap); }

[solution-card] { gap: var(--gap); padding: var(--space-xl); background: var(--background-base); border-radius: var(--radius-default); }

[solution-featured] { position: relative; }

[solution-header] { gap: var(--gap); }

[solution-badge] { display: inline-block; width: fit-content; padding-top: var(--space-sm); padding-bottom: var(--space-sm); padding-left: var(--space-lg); padding-right: var(--space-lg); font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-xl); background: var(--accent-color); color: var(--text-inverse); border-radius: var(--radius-default); }

[solution-title] { display: block; font-size: var(--font-size-default); font-weight: var(--font-weight-bold); color: var(--text-primary); }

[solution-description] { display: block; color: var(--text-primary); }

[solution-features] { gap: var(--gap); }

[solution-feature] { align-items: center; gap: var(--gap); font-size: var(--font-size-default); color: var(--text-primary); padding-left: var(--space-lg); }

[badge-student] { background: var(--background-inverse); color: var(--text-inverse); }

[feature-check] { color: var(--accent-color); }

[cta-content] { align-items: center; gap: var(--gap); text-align: center; max-width: 100%; }

[cta-title] { display: block; font-size: var(--font-size-default); font-weight: var(--font-weight-bold); color: var(--text-primary); }

[cta-description] { display: block; font-size: var(--font-size-default); color: var(--text-primary); }

[cta-actions] { padding-top: var(--space-lg); }

/* ============================================================================
 * POST COMPOSER
 *
 * The "What's on your mind?" input area at the top of the feed.
 * Uses glassmorphism panel styling.
 * ============================================================================ */
[post-composer] { gap: var(--gap); padding: var(--space-md); background: rgba(var(--background-primary-rgb), var(--opacity-55)); backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); border-radius: var(--radius-default); box-shadow: var(--shadow-xl); min-height: var(--space-3xl); position: relative; }

[composer-header] { gap: var(--gap); align-items: flex-start; padding: var(--space-md); border-radius: var(--radius-default); background: var(--background-20); }

[composer-avatar] { flex-shrink: 0; cursor: default; }

[composer-input] { flex: 1; gap: var(--gap); padding: var(--space-xs); border-radius: var(--radius-default); background: var(--background-20); }

[composer-textarea] { width: 100%; min-height: var(--space-3xl); padding: 0; font-size: var(--font-size-default); font-family: var(--font-family-default); color: var(--text-primary); background: transparent; border-width: 0; border-style: none; border-color: transparent; border-radius: var(--radius-default); resize: vertical; outline: none; }

[composer-textarea]::placeholder { color: var(--text-primary); }

/* ============================================================================
 * ATTACHED IMAGES IN COMPOSER
 *
 * Image thumbnails shown before posting, with remove buttons.
 * ============================================================================ */
[attached-images] { flex-wrap: wrap; gap: var(--gap); }

[composer-images] { order: -1; }

[composer-thumb] { position: relative; width: var(--space-xl); height: var(--space-xl); border-radius: var(--radius-default); cursor: pointer; background: transparent; }

[composer-thumb-img] { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-default); }

[composer-remove-btn] { position: absolute; top: calc(-1 * var(--space-sm)); right: calc(-1 * var(--space-sm)); width: var(--space-lg); height: var(--space-lg); background: var(--color-negative); color: var(--text-inverse); border-radius: 50%; font-size: var(--font-size-default); align-items: center; justify-content: center; cursor: pointer; font-weight: bold; opacity: 0; z-index: 100; box-shadow: var(--shadow-md); pointer-events: auto; }

[composer-actions] { justify-content: flex-end; align-items: center; gap: var(--gap); }

[composer-attachments] { flex-wrap: wrap; gap: var(--gap); padding: var(--space-xs); border-radius: var(--radius-default); background: var(--background-20); }

/* ============================================================================
 * ATTACHMENT BUTTON
 *
 * Button for attaching images/files to a post.
 * ============================================================================ */
[attachment-button] { align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); color: var(--text-primary); background: transparent; border-radius: var(--radius-default); cursor: pointer; }

[attachment-icon] { font-size: var(--font-size-default); }

/* ============================================================================
 * FEED POSTS
 *
 * Individual posts in the feed. Each has a header (avatar, author, time),
 * content body, and action buttons (like, comment, share).
 * ============================================================================ */
[feed-posts] { gap: var(--gap); }

[feed-post] { gap: var(--gap); padding: var(--space-md); background: rgba(var(--background-primary-rgb), var(--opacity-55)); backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); border-radius: var(--radius-default); box-shadow: var(--shadow-xl); }

[post-header] { align-items: center; gap: var(--gap); padding: var(--space-md); border-radius: var(--radius-default); background: var(--background-20); }

[post-avatar] { align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); border-radius: 50%; background: transparent; color: var(--text-primary); font-size: var(--font-size-default); font-weight: var(--font-weight-medium); flex-shrink: 0; }

[post-avatar-small] { width: var(--space-xl); height: var(--space-xl); font-size: var(--font-size-default); cursor: pointer; }

[post-meta] { flex: 1; }

[post-author] { font-size: var(--font-size-default); font-weight: var(--font-weight-medium); color: var(--text-primary); }

[post-time] { font-size: var(--font-size-default); color: var(--text-primary); }

[post-options] { align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); color: var(--text-primary); border-radius: var(--radius-default); cursor: pointer; }

/* ============================================================================
 * POST CONTENT
 *
 * The text body of a post.
 * ============================================================================ */
[post-content] { display: block; padding: var(--space-md); border-radius: var(--radius-default); background: var(--background-20); }

/* ============================================================================
 * POST ACTIONS (Like, Comment, Share)
 *
 * Horizontal row of interactive action buttons with container hover pattern.
 * ============================================================================ */
[post-actions] { gap: var(--gap); padding: var(--space-md); border-radius: var(--radius-default); background: var(--background-20); }

[post-action] { align-items: center; gap: var(--gap); color: var(--text-primary); font-size: var(--font-size-default); cursor: pointer; padding: var(--space-sm); border-radius: var(--radius-default); }

[post-action-icon] { font-size: var(--font-size-default); }

[post-action-active] { color: var(--accent-color); }

[post-action-active-svg] { fill: currentColor; }

[action-count] { font-size: var(--font-size-default); font-weight: var(--font-weight-medium); }

/* ============================================================================
 * COMMENT SECTION
 *
 * Comments under posts with input field and send button.
 * ============================================================================ */
[comment-textarea] { flex: 1; padding: 0; font-size: var(--font-size-default); font-family: var(--font-family-default); color: var(--text-primary); background: transparent; border-width: 0; border-style: none; border-color: transparent; border-radius: var(--radius-default); resize: none; outline: none; height: var(--space-xl); min-height: var(--space-xl); max-height: var(--space-xl); }

[comment-textarea]::placeholder { color: var(--text-primary); }

[comment-display] { align-items: center; gap: var(--gap); padding: 0 var(--space-md); font-size: var(--font-size-default); color: var(--text-primary); border-radius: var(--radius-default); background: var(--background-20); height: var(--space-xl); min-height: var(--space-xl); white-space: nowrap; }

/* ============================================================================
 * FEED USER AVATAR SIZES
 *
 * Size variants for user avatars used in different feed contexts.
 * ============================================================================ */
[composer-user-avatar] { width: var(--space-2xl); height: var(--space-2xl); }

[feed-user-avatar] { width: var(--space-xl); height: var(--space-xl); font-size: var(--font-size-default); background: transparent; color: var(--text-primary); border-radius: var(--radius-default); align-items: center; justify-content: center; font-weight: var(--font-weight-medium); }

/* ============================================================================
 * LINK MODAL
 *
 * A modal dialog for inserting/editing links (e[g]., in post composer).
 * Contains form fields for URL and display text.
 * [hidden] toggles visibility; default is flex when visible.
 * ============================================================================ */
[modal-overlay] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--background-overlay); backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); align-items: center; justify-content: center; z-index: 10000; }

[link-modal] { max-width: var(--space-5xl); background: var(--background-base); border-radius: var(--radius-default); box-shadow: var(--shadow-xl); max-width: 100%; width: 90%; max-height: 90vh; overflow-y: auto; }

[modal-header] { justify-content: space-between; align-items: center; padding: var(--space-xl); }

[modal-title] { margin: 0; font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-primary); font-family: var(--font-family-default); }

[close-button] { align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); border-radius: var(--radius-default); background: transparent; color: var(--text-primary); cursor: pointer; }

[modal-body] { padding: var(--space-xl); gap: var(--gap); }

[form-group] { gap: var(--gap); }

[form-label] { font-size: var(--font-size-default); font-weight: var(--font-weight-medium); color: var(--text-primary); font-family: var(--font-family-default); }

[modal-input] { width: 100%; padding: 0; font-size: var(--font-size-default); font-family: var(--font-family-default); color: var(--text-primary); background: var(--background-20); border-width: 0; border-style: none; border-color: transparent; border-radius: var(--radius-default); outline: none; }

[modal-input]::placeholder { color: var(--text-primary); }

[modal-actions] { gap: var(--gap); justify-content: flex-end; }

/* Calendar header: contains navigation (prev/next arrows, month title)
 and controls (view selector, today button) */
[calendar-header] { justify-content: space-between; align-items: center; padding: var(--space-xl) var(--space-xl); background: none; }

/* ---- Calendar Navigation ----
 Contains the prev/next arrows and the month/year title between them */
[calendar-nav] { align-items: center; gap: var(--gap); }

/* ---- Calendar Controls ----
 Container for the view selector toggle and the "Today" button */
[calendar-controls] { align-items: center; gap: var(--gap); }

/* ---- View Selector ----
 A pill-shaped toggle group for switching between Month/Week/etc. views.
 The secondary background creates a recessed track look */
[view-selector] { background: var(--background-20); border-radius: var(--radius-default); padding: var(--space-xs); }

[selector-option] { padding: var(--space-md) var(--space-lg); font-size: var(--font-size-default); font-weight: var(--font-weight-small); border-radius: var(--radius-default); cursor: pointer; color: var(--text-primary); }

/* Selected/active view option: filled with accent color,
 white text, and a subtle shadow for depth */
[selector-checked] { background: var(--accent-color); color: var(--text-inverse); box-shadow: var(--shadow-sm); }

/* ---- Today Button ----
 Quick-action button that jumps the calendar to the current date.
 Styled as a prominent accent-colored pill button */
[today-button] { padding: var(--space-md) var(--space-lg); background: var(--accent-color); color: var(--text-inverse); border-radius: var(--radius-default); }

[today-button]:hover { border-radius: var(--radius-default); font-size: var(--font-size-default); font-weight: var(--font-weight-small); cursor: pointer; }

/* ============================================================================
 CALENDAR GRID
 7-column CSS Grid representing the days of the week.
 Row 1 (auto) is the header row (Mon-Sun labels).
 Rows 2-7 (1fr each) are the 6 possible weeks in a month view.
 ============================================================================ */
[calendar-action-group] { cursor: default !important; }

[calendar-week-row] { width: 100%; min-width: 0; flex-wrap: nowrap; align-items: stretch; }

[calendar-day-cell] { flex: 1 1 0; min-width: 0; }

/* Day number leaf (p[day-number]) */
[day-number] { position: static; font-size: var(--font-size-default); font-weight: var(--font-weight-small); color: var(--text-primary); margin-bottom: var(--space-sm); }

/* ---- Hover States for Calendar Days ----
 Dashed border appears on hover to indicate interactivity.
 Only applies to non-selected days. */
[other-month-events-hide] { display: none; }

[other-month-bare-day] { background: unset; }

[other-month-day] { background: var(--background-base); }

[drag-no-interact] { pointer-events: none; }

[drag-full-opacity] { opacity: var(--opacity-default); }

/* ---- Category Dot Base ----
 Small circular indicator dot (4x4px) for each financial category */
[category-dot] { width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-default); display: block; flex-shrink: 0; background: var(--background-inverse) !important; }

/* Default dot color: matches the primary text color (same as accordion items).
 Income and expenses override this below with their own colors. */
[dot-income] { background: var(--color-positive) !important; }

[dot-expenses] { background: var(--color-negative) !important; }

[dot-liabilities] { background: var(--color-negative) !important; }

[selected-day-events] { top: var(--space-sm); bottom: auto; }

/* ---- 3. ACTIVE/FOCUS STATE ----
 When a [day] has focus (keyboard navigation or active state),
 it gets a prominent accent-colored box-shadow ring.
 Only applies when the [day] is NOT disabled and NOT selected. */
[day-active-ring] { color: var(--text-primary); box-shadow: 0 0 0 var(--space-xs) var(--accent-color); z-index: 3; opacity: var(--opacity-default); }

[today-highlight] { color: var(--text-primary); font-weight: var(--font-weight-semibold); }

[day-weekend] { color: var(--color-negative); }

[day-holiday] { color: var(--color-positive); font-weight: var(--font-weight-small); }

/* Event indicator dots are rendered as inline <span event-dot> by calendar[js] */
[event-dot] { position: absolute; bottom: var(--space-xs); right: var(--space-xs); width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-default); background: var(--background-inverse); }

[event-dot-selected] { top: var(--space-xs); bottom: auto; right: var(--space-xs); width: var(--space-sm); height: var(--space-sm); border-radius: var(--radius-default); background: var(--background-inverse); z-index: 2; }

/* ============================================================================
 GRID OVERLAY FOR DRAG SELECTION
 An invisible overlay that sits on top of the calendar grid.
 When active (data-dragging="true"), it captures pointer events
 to track the drag rectangle without interfering with the grid.
 ============================================================================ */
[grid-overlay] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; }

[grid-overlay-active] { pointer-events: all; }

/* ---- Selection Rectangle ----
 The visual drag-selection box that appears during a drag operation.
 Semi-transparent accent color fill with a dashed accent border. */
[overlay-selection] { position: absolute; background: var(--accent-color); border-radius: var(--radius-default); opacity: 0; }

[overlay-selection-visible] { opacity: 1; }

/* ============================================================================
 CALENDAR SIDEBAR
 Optional sidebar panel (hidden by default) that can show a mini-calendar,
 events list, or additional info alongside the main calendar.
 ============================================================================ */
[calendar-sidebar] { display: none; position: absolute; right: 0; top: 0; width: var(--space-4xl); height: 100%; background: var(--background-base); padding: var(--space-lg); }

[sidebar-mini-calendar] { display: block; margin-bottom: var(--space-xl); }

[mini-calendar-title] { font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-md); }

[sidebar-events] { display: block; }

[events-title] { font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-md); }

[events-list] { gap: var(--gap); }

/* ============================================================================
 FOOTER ACTIONS
 Action buttons at the bottom of the calendar.
 ============================================================================ */
[footer-actions] { gap: var(--gap); align-items: center; }

/* ---- Footer Status ----
 Right-aligned status display showing selection count and date range */
[footer-status] { align-items: flex-end; gap: var(--gap); }

[status-text] { font-size: var(--font-size-default); font-weight: var(--font-weight-small); color: var(--text-primary); }

[status-text-empty] { color: var(--text-primary); }

[status-range] { font-size: var(--font-size-default); color: var(--text-primary); font-weight: var(--font-weight-small); }

/* ---- Selection Summary Item ----
 Appears in the sidebar when days are selected.
 Highlighted with accent-tinted background and a slide-in animation. */
[summary-selection] { background: var(--accent-color); border-radius: var(--radius-default); padding: var(--space-sm) var(--space-md); margin-top: var(--space-sm); animation: slideIn var(--transition-slow) ease-out; }

[summary-selection-label] { color: var(--accent-color); font-weight: var(--font-weight-semibold); }

[summary-selection-value] { color: var(--accent-color); font-weight: 700; }

/* ============================================================================
 FINANCIAL ACCORDION
 Sidebar component showing financial categories (Income, Expenses, etc.)
 as togglable accordion items. Design pattern copied from [settings-navigation].
 ============================================================================ */
[financial-accordion] { height: 100%; padding: var(--space-sm); position: relative; z-index: 1; gap: var(--gap); opacity: var(--opacity-low); }

[accordion-visible] { opacity: 1; max-height: var(--space-6xl); }

/* Accordion header: contains title and optional subtitle.
 Matches the global [nav-header]/ pattern. */
[accordion-header] { gap: var(--gap); margin-bottom: var(--space-xl); }

[accordion-subtitle] { font-size: var(--font-size-default); color: var(--text-primary); padding: 0 var(--space-md); }

/* ---- Category Toggle Button ----
 The clickable header for each accordion category.
 Design matches [settings-navigation] [nav-link] pattern. */
[category-toggle] { align-items: center; gap: var(--gap); padding: var(--space-sm) var(--space-md); text-decoration: none; color: var(--text-primary); font-weight: var(--font-weight-medium); border-radius: var(--radius-default); cursor: pointer; background: var(--background-20); user-select: none; display: none !important; }

[category-toggle-active] { color: var(--text-primary); position: relative; z-index: 10; font-weight: var(--font-weight-semibold); transform: none !important; background: rgba(var(--background-inverse-rgb), var(--opacity-lg)); }

[notation-hide-icon] { display: none !important; flex-shrink: 0; }

/* ---- Category Text Label ----
 Fills remaining space in the toggle, inherits font properties from parent */
[category-text] { flex: 1; font-size: var(--font-size-default); font-weight: var(--font-weight-medium); color: var(--text-primary); }

/* ============================================================================
 STARTING BALANCE SECTION
 Input area where users set their initial account balance and date.
 Styled as a bordered card below the calendar.
 ============================================================================ */
[starting-balance-section] { gap: var(--gap); margin-top: var(--space-xl); padding: var(--space-xl); background: var(--background-20); border-radius: var(--radius-default); }

/* ---- Balance Inputs Container ----
 Horizontal row of input groups (date picker + amount input).
 Wrapped in a tertiary background card with rounded corners. */
[balance-inputs] { gap: var(--gap); align-items: end; background: var(--background-20); border-radius: var(--radius-default); padding: var(--space-sm); }

[input-group] { gap: var(--gap); }

[input-label] { font-size: var(--font-size-default); font-weight: var(--font-weight-medium); color: var(--text-primary); }

[input-date] { padding: 0; border-width: 0; border-style: none; border-color: transparent; border-radius: 0; background: var(--background-20); color: var(--text-primary); font-size: var(--font-size-default); font-family: var(--font-family-default); }

[input-number] { padding: 0; border-width: 0; border-style: none; border-color: transparent; border-radius: 0; background: var(--background-20); color: var(--text-primary); font-size: var(--font-size-default); font-family: var(--font-family-default); }

/* Today button: solid primary when viewing current month — use  on the control (calendar.js) */
[goto-today-active] { pointer-events: none; cursor: default !important; }

[month-nav-icon] { display: inline-flex !important; flex-shrink: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

[nav-header] { width: 100%; flex-shrink: 0; }

[pro] { flex-wrap: wrap; align-items: flex-start; }

[pro-calendar-view] { flex: 1; min-width: 0; }

/* ---- Accounting Table ----
 Each financial category (Income, Expenses, etc.) gets its own table.
 Styled as a rounded card with consistent padding. */
[accounting-table] { border-radius: var(--radius-default); padding: var(--space-xs); width: 100%; min-width: 100%; max-width: 100%; background: rgba(var(--background-inverse-rgb), var(--opacity-low)); }

[table-title] { font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-primary); font-family: var(--font-family-default); }

/* ---- Table Row ----
 Each row is a CSS Grid with 5 columns:
 Date (100px) | Description (flexible) | Category (150px) | Amount (150px) | Actions (100px) */
[table-row] { display: grid; gap: var(--gap); padding: var(--space-sm) var(--space-md); height: var(--space-xl); width: 100%; min-width: 100%; background: rgba(var(--background-inverse-rgb), var(--opacity-low)); }

/* ---- Table Header Row ----
 Column titles (Date, Description, etc.) with uppercase styling */
[table-header-row] { font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: var(--font-size-default); text-transform: uppercase; white-space: nowrap; }

[table-header-cell] { color: var(--text-primary) !important; white-space: nowrap; }

/* ---- Table Cell ----
 Base cell styling with text truncation for overflow content */
[table-cell] { align-items: center; font-size: var(--font-size-default); color: var(--text-primary); white-space: nowrap; }

[cell-date] { font-family: var(--font-family-default); color: var(--text-primary); }

[cell-description] { font-weight: var(--font-weight-medium); }

[cell-category] { color: var(--text-primary); font-size: var(--font-size-default); }

[cell-actions] { gap: var(--gap); justify-content: flex-end; }

/* ---- Row in Edit Mode ---- */
[row-editing] { background: var(--accent-color) !important; }

[row-deleting] { background: rgba(var(--color-negative-rgb), var(--opacity-low)) !important; position: relative; }

[row-state-icon] { color: var(--text-primary); fill: currentColor; stroke: currentColor; }

/* ---- Table Cell Input Base ----
 Inline edit input fields within table cells */
[table-cell-input] { width: 100%; background: transparent; border-width: 0; border-style: none; border-color: transparent; border-radius: 0; padding: 0; font-size: var(--font-size-default); font-family: var(--font-family-default); color: var(--text-primary); outline: none; }

[cell-date-input] { font-family: var(--font-family-default); }

/* ============================================================================
 ADD/EDIT ROW INPUT STYLING
 Multi-state border design for editing row inputs:
 - Default: solid standard border
 - Row hover: dashed theme-colored border on non-hovered inputs
 - Input hover: dashed accent border
 - Input active/click: solid accent border
 - Input focus: solid accent border
 ============================================================================ */
[editing-input] { border-width: 0 !important; border-style: none !important; border-color: transparent !important; box-sizing: border-box; }

[editing-input]:focus { background: var(--background-inverse); color: var(--text-inverse); }

[row-new] { animation: rowFadeIn 0.2s ease; }

[row-empty] { padding: var(--space-xl); text-align: center; color: var(--text-primary); font-style: italic; }

/* Footer responsive widths */

[breadcrumb-brand] {
 font-weight: var(--font-weight-medium);
 color: var(--text-primary);
}

[breadcrumb-brand-link] {
 color: var(--text-primary);
 text-decoration: none;
}

[breadcrumb-separator] {
 margin: 0 var(--space-md);
 color: var(--text-primary);}

[breadcrumb-page-link] {
 color: var(--text-primary);
 text-decoration: none;
}

[breadcrumb-accent] {
 color: var(--accent-color);
 font-weight: var(--font-weight-medium);
}

[accent] {
 color: var(--accent-color);
}

[data-state~="current"] {
 color: var(--accent-color);
}

/* ============================================================================
 * DIRECTORY SECTION
 *
 * A responsive grid of link groups (e[g]., Product, Company, Legal, etc.).
 * Each section has a heading and a list of links.
 * ============================================================================ */
[footer-directory] { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); min-width: 0; }

[directory-link] { color: var(--text-primary); text-decoration: none; }

[directory-link]:hover { text-decoration: underline; }

[legal-link] { font-family: var(--font-family-legal); }

[footer-utility-group] { flex: 1; }

[location-text] { display: block; }

/* ============================================================================
 * UTIL BUTTONS — Search & Settings (shared base)
 * ============================================================================ */
[search-expanded] { display: block; opacity: 1; width: var(--space-4xl); }

[search-expanded]::placeholder { color: var(--text-primary); }

[expanded]:not(panel) { position: relative; z-index: var(--z-lg) !important; }

[expanded]::before { content: ""; position: absolute; inset: calc(var(--space-4xl) * -1); backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); mask-image: linear-gradient(to right, transparent 0, black var(--space-3xl), black calc(100% - var(--space-3xl)), transparent 100%), linear-gradient(to bottom, transparent 0, black var(--space-3xl), black calc(100% - var(--space-3xl)), transparent 100%); mask-composite: intersect; -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--space-3xl), black calc(100% - var(--space-3xl)), transparent 100%), linear-gradient(to bottom, transparent 0, black var(--space-3xl), black calc(100% - var(--space-3xl)), transparent 100%); -webkit-mask-composite: source-in; pointer-events: none; z-index: var(--z-sm); }

[search-icon] { position: relative; z-index: 1; flex-shrink: 0; pointer-events: none; }

[search-svg] { width: var(--font-size-lg); height: var(--font-size-lg); }

/* ============================================================================
 * SEARCH & SETTINGS BUTTON ICON — ACTIVE (Mousedown)
 * Same inverted icon colors as hover state.
 * ============================================================================ */
[settings-active-icon] { color: var(--text-primary); opacity: 1; }

[settings-active-svg] { fill: currentColor; stroke: currentColor; }

/* ============================================================================
 * SEARCH ICON — EXPANDED STATES
 *
 * When the search bar is open (expanded), icon colors change based on
 * whether the user has typed text or not.
 * ============================================================================ */
[settings-open-icon] { color: var(--text-primary); }

[settings-open-svg] { fill: currentColor; stroke: currentColor; }

/* Icon centering: parent action-item has flex center */
[settings-icon] { position: relative; z-index: 1; pointer-events: none; font-size: var(--font-size-lg); color: var(--text-primary); }

[settings-svg] { position: relative; z-index: 1; pointer-events: none; width: var(--font-size-lg); height: var(--font-size-lg); }

[settings-panel-open] { visibility: visible; pointer-events: all; }

/* ============================================================================
 * UTILITY SETTINGS GROUP
 *
 * Contains the sync status indicator and settings button.
 * ============================================================================ */
[utility-settings] { position: relative; flex-shrink: 0; }

[sync-status-indicator] { position: absolute; right: var(--space-2xl); top: 50%; transform: translateY(-50%); align-items: center; font-size: var(--font-size-default); color: var(--text-primary); white-space: nowrap; background: var(--background-20); border-radius: var(--radius-default); padding: var(--space-sm) var(--space-md); cursor: pointer; margin: 0 !important; user-select: none; margin-left: var(--space-md); }

[sync-indicator-svg] { width: var(--size-sl-cursor); height: var(--size-sl-cursor); color: var(--text-primary); }

[sync-indicator-icon] { display: block; font-size: var(--font-size-default); color: var(--text-primary); }

[sync-text] { font-size: var(--font-size-default); font-weight: var(--font-weight-default); color: var(--text-primary); }

/* ============================================================================
 * SIGN IN PANEL
 * ============================================================================ */
[signin-panel] { align-items: center; }

[signin-panel-group] { align-items: center; width: 100%; }

[signin-button] { background: var(--background-inverse) !important; color: var(--text-inverse) !important; }

[signin-button]:hover { background: var(--background-inverse) !important; color: var(--text-inverse) !important; }

[signin-message] { padding: var(--space-md); border-radius: var(--radius-default); font-size: var(--font-size-default); text-align: center; margin-top: var(--space-md); font-family: var(--font-family-default); min-height: var(--space-xl); align-items: center; justify-content: center; }

[signin-message-empty] { min-height: 0; padding: 0; margin: 0; display: none; }

[signin-message-error] { background: rgba(var(--color-negative-rgb), var(--opacity-low)); color: var(--color-negative); border-width: 0; border-style: none; border-color: transparent; }

/* [auth-modal] [modal-overlay]: add flex center in HTML */
[auth-overlay] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--background-overlay); backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); z-index: 10000; animation: fadeInOverlay 0.3s ease-out forwards; }

[auth-content] { background: var(--background-base); border-radius: var(--radius-default); padding: var(--space-xl); min-width: 100%; max-width: 100%; box-shadow: var(--shadow-xl); animation: fadeInContent 0.3s ease-out 0.1s forwards; opacity: 0; }

[auth-header] { justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); }

[auth-title] { margin: 0; color: var(--text-primary); font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); }

[auth-close] { background: none; font-size: var(--font-size-default); cursor: pointer; color: var(--text-primary); padding: var(--space-sm); border-radius: var(--radius-default); }

[auth-form-hidden] { display: none !important; }

/* [form-group]: add flex column in HTML */
[auth-label] { font-size: var(--font-size-default); font-weight: var(--font-weight-medium); color: var(--text-primary); }

[auth-input] { padding: var(--space-md); border-width: 0; border-style: none; border-color: transparent; border-radius: var(--radius-default); background: var(--background-20); color: var(--text-primary); font-size: var(--font-size-default); }

[auth-input]:focus { outline: none; }

[action-item-legacy] { padding: var(--space-md) var(--space-lg); background: var(--accent-color); color: white; border-width: var(--border-width); border-style: var(--border-style-default); border-color: rgba(var(--border-rgb), var(--opacity-3xl)); border-radius: var(--radius-default); font-size: var(--font-size-default); font-weight: var(--font-weight-medium); cursor: pointer; }

[action-item-legacy]:disabled { opacity: var(--opacity-xl); cursor: not-allowed; transform: none; }

[auth-message] { padding: var(--space-md); border-radius: var(--radius-default); font-size: var(--font-size-default); text-align: center; margin-top: var(--space-md); }

[auth-message-success] { background: rgba(var(--color-positive-rgb), var(--opacity-low)); color: var(--color-positive); border-width: 0; border-style: none; border-color: transparent; }

[auth-message-error] { background: rgba(var(--color-negative-rgb), var(--opacity-low)); color: var(--color-negative); border-width: 0; border-style: none; border-color: transparent; }

/* [auth-footer]: add flex column in HTML */
[auth-footer] { text-align: center; }

[auth-footer-text] { margin: 0; font-size: var(--font-size-default); color: var(--text-primary); }

/* Parent [sync-status-indicator] has flex */
[sync-status-svg] { color: var(--text-primary); color: var(--text-primary); }

[sync-label] { font-weight: var(--font-weight-medium); }

[sync-details] { font-size: var(--font-size-default); margin-left: var(--space-sm); }

/* ============================================================================
 * SCREENSHOT ACTION BUTTON
 *
 * A button in the settings panel for capturing screenshots.
 * Uses accent background with inverse text.
 * ============================================================================ */
[screenshot-action] { align-items: center; justify-content: center; padding: var(--space-sm) var(--space-md); background: var(--accent-color); border-radius: var(--radius-default); cursor: pointer; font-family: var(--font-family-default); font-size: var(--font-size-default); font-weight: var(--font-weight-medium); position: relative; z-index: 1; pointer-events: auto; }

/* Parent [screenshot-action] has flex center */
[screenshot-icon] { color: var(--text-inverse); pointer-events: none; font-size: var(--font-size-default); }

[screenshot-text] { font-size: var(--font-size-default); color: var(--text-inverse); font-family: var(--font-family-default); pointer-events: none; }

[screenshot-setting] { margin-top: auto; position: sticky; bottom: 0; padding: var(--space-xs); border-radius: var(--radius-default); z-index: 10; background: var(--background-20); }

[screenshot-drag-hide] { display: none !important; }

/* [sync-details-modal] [modal-overlay]: add flex center in HTML */
[sync-modal-content] { background: var(--background-base); border-radius: var(--radius-default); padding: var(--space-xl); min-width: 100%; max-width: 100%; box-shadow: var(--shadow-xl); }

[sync-modal-header] { justify-content: space-between; align-items: center; margin-bottom: var(--space-xl); }

[sync-modal-heading] { margin: 0; color: var(--text-primary); }

[modal-close] { background: none; font-size: var(--font-size-default); cursor: pointer; color: var(--text-primary); padding: 0; width: var(--space-xl); height: var(--space-xl); align-items: center; justify-content: center; border-radius: var(--radius-default); }

[sync-stat-label] { font-weight: var(--font-weight-medium); color: var(--text-primary); }

[sync-stat-value] { color: var(--text-primary); font-family: var(--font-family-mono); font-size: var(--font-size-default); }

[status-badge] { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-default); font-size: var(--font-size-default); font-weight: var(--font-weight-medium); text-transform: uppercase; }

[status-synced] { background: var(--color-positive); color: white; }

[status-pending] { background: var(--background-inverse); color: white; }

[status-syncing] { background: var(--accent-color); color: white; }

[status-error] { background: var(--color-negative); color: white; }

[sync-action-btn] { flex: 1; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-default); background: var(--background-20); color: var(--text-primary); font-weight: var(--font-weight-medium); cursor: pointer; }

[force-sync-btn] { background: var(--accent-color) !important; color: white !important; }

/* ============================================================================
 * CONFLICT SETTINGS MODAL
 * Options for resolving sync conflicts.
 * ============================================================================ */
[conflict-options] { margin-bottom: var(--space-xl); }

[conflict-option-label] { padding: var(--space-lg); border-radius: var(--radius-default); cursor: pointer; }

[conflict-option-radio] { margin-bottom: var(--space-sm); }

[conflict-option-title] { font-weight: var(--font-weight-medium); color: var(--text-primary); margin-bottom: var(--space-sm); }

[conflict-option-desc] { color: var(--text-primary); font-size: var(--font-size-default); }

[toggle-disabled] { cursor: not-allowed; pointer-events: none; }

/* [color-picker-group]: add flex wrap in HTML */
[color-picker-group] { background: var(--background-20); border-radius: var(--radius-default); padding: var(--space-sm); flex-wrap: wrap; }

[option-color] { width: var(--space-xl); height: var(--space-xl); border-radius: var(--radius-default); cursor: pointer; position: relative; display: inline-block; }

[option-color-checked] { background: none !important; box-shadow: 0 0 0 var(--space-xs) rgba(var(--border-rgb), var(--opacity-3xl)) !important; transform: none !important; }

[color-preview-container] { flex: 0; }

[color-preview-swatch] { width: var(--space-xl); align-self: stretch; }

/* Native <select> wraps <option saturation-lightness-picker>; reset chrome so the SL canvas works */
[color-picker-select] { appearance: none; -webkit-appearance: none; border-width: 0; border-style: none; border-color: transparent; background: transparent; padding: 0; margin: 0; width: 100%; height: 100%; color: var(--text-primary); font-family: var(--font-family-default); font-size: var(--font-size-default); font-weight: var(--font-weight-default); cursor: default; }

[color-select]:focus { outline: none; }

[color-picker-stack] { flex: 1; min-width: 0; min-height: 0; }

[color-stack-main] { flex: 1; min-height: 0; }

[color-hue-row] { flex: 0 0 auto; }

[preview-color] { display: block; width: 100%; height: 100%; border-radius: var(--radius-default); background: var(--accent-color) !important; box-sizing: border-box; }

/* ============================================================================
 * DRAG & DROP — Settings Group Reordering
 *
 * Allows users to reorder settings groups in the dropdown by dragging.
 * Uses dividers as drop zones.
 * ============================================================================ */
[draggable-setting] { position: relative; }

[drop-hover] { background: var(--accent-color) !important; padding: 0 !important; border-radius: var(--radius-default) !important; margin: var(--space-md) 0 !important; opacity: 1 !important; visibility: visible !important; }

[settings-drag-duplicate] { opacity: var(--opacity-xl); pointer-events: none; cursor: not-allowed; }

[group-label-draggable] { cursor: grab; position: relative; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

[group-label-no-pointer] { pointer-events: none; }

[drop-indicator-sibling] { margin-top: var(--space-md); }

[reorder-toast] { background: rgba(var(--background-primary-rgb), var(--opacity-55)); backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); }

[dragging-no-transform] { transform: none !important; }

[drag-inactive-setting] { opacity: var(--opacity-xl); }

[sl-cursor-loaded] { opacity: 1; }

[sl-picker-dragging] { cursor: crosshair; }

/* [hue-options-container]: add flex in HTML */
[hue-options-container] { align-items: stretch; border-radius: var(--radius-default); padding: 0; flex: 1; width: 100%; min-height: var(--space-lg); }

/* Notation selector: vertical column layout */
[notation-selector-group] { width: 100%; }

/* ============================================================================
 * NOTATION INFO / CONTENT
 *
 * Layout for number notation options (e[g]., 1,000 vs 1.000).
 * ============================================================================ */
[notation-info] { align-items: center; flex: 1; min-width: 0; text-align: center; }

[notation-content] { flex: 1; font-weight: var(--font-weight-small); }

[notation-label] { font-size: var(--font-size-default); font-weight: var(--font-weight-small); color: var(--text-primary); white-space: nowrap; min-width: 0; }

[notation-description] { display: none; }

/* Footer / action-item theme cards (not [unified-theme-selector]) */
[action-theme-preview] { justify-content: center; align-items: center; height: var(--space-xl); max-width: 100%; min-width: 0; width: 100%; color: var(--text-primary) !important; }

[theme-info] { color: var(--text-primary) !important; }

[preview-bar] { display: block; height: var(--space-sm); min-height: var(--space-sm); flex-shrink: 0; background: var(--background-20); }

[preview-fill] { display: block; flex: 1; min-height: 0; background: var(--background-base); }

[theme-preview-light] {  }

[theme-preview-dark] {  }

[preview-topbar] { display: block; height: var(--space-sm); min-height: var(--space-sm); background: var(--background-secondary); }

[preview-footer] { display: block; height: var(--space-sm); min-height: var(--space-sm); background: var(--background-secondary); }

/* [preview-sidebar]: add flex in HTML */
[preview-nav-line] { width: 100%; height: var(--space-xs); border-radius: var(--radius-default); background: var(--background-inverse); }

/* [preview-cal-row]: space-evenly so 5 columns spread evenly */
[preview-cal-row] { flex-wrap: nowrap; justify-content: space-evenly; flex: 1; align-items: center; min-height: 0; }

[preview-cal-cell] { border-radius: var(--radius-default); width: var(--space-sm); height: var(--space-sm); flex-shrink: 0; flex-grow: 0; background: var(--background-20); }

[preview-cal-cell-data] { background: var(--background-inverse); }

[preview-half] { flex: 1; min-width: 0; }

[theme-name] { display: block; font-size: var(--font-size-default); font-weight: var(--font-weight-medium); color: var(--text-primary) !important; text-align: center; margin-top: var(--space-sm); }

/* [select-option]: add flex in HTML */
[select-option] { padding: var(--space-md); font-size: var(--font-size-default); cursor: pointer; }

[select-option]:hover { justify-content: space-between; align-items: center; color: var(--text-primary); }

[select-option-checked] { background: var(--accent-color); color: var(--text-inverse); font-weight: var(--font-weight-medium); }

[option-indicator] { font-size: var(--font-size-default); font-style: italic; color: var(--text-primary); }

[context-action-item] { justify-content: flex-start; min-height: auto; padding: var(--space-sm) var(--space-md); user-select: none; }

/* Parent action-item has flex */
[context-menu-icon] { align-items: center; justify-content: center; width: var(--space-lg); height: var(--space-lg); flex-shrink: 0; }

[context-item-text] { flex: 1; font-weight: var(--font-weight-medium); }

[menu-divider] { height: var(--space-2xs); background: var(--border-primary); margin: var(--space-sm) 0; }

[restore-content] { max-width: 100%; }

/* Parent has flex center */
[restore-icon] { align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); border-radius: 50%; background: var(--background-20); color: var(--text-primary); }

[restore-text] { text-align: center; }

[restore-title] { font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-primary); }

[restore-description] { font-size: var(--font-size-default); color: var(--text-primary); }

/* [remove-all-button]: add flex center in HTML */
[remove-all-button] { justify-content: center; padding: var(--space-lg) var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-xl); }

/* [remove-all-content]: add flex center in HTML */
[remove-all-content] { justify-content: center; width: 100%; }

/* Parent has flex center */
[remove-all-icon] { align-items: center; justify-content: center; width: var(--font-size-lg); height: var(--font-size-lg); }

[remove-all-text] { font-weight: var(--font-weight-small); }

/* ============================================================================
 NAVIGATION HEADER - GLOBAL STANDARD
 Title and subtitle pattern used across the app (settings, dashboard, etc.)
 Provides consistent heading typography.
 ============================================================================ */
[nav-subtitle] { font-size: var(--font-size-default); color: var(--text-primary); font-family: var(--font-family-default); text-align: left; }

[navigation-links-item] { width: 100%; }

/* ============================================================================
 SAVE INDICATOR
 Small inline "Save" button that appears next to a nav link when
 a setting in that section has been modified. Allows per-section saving.
 ============================================================================ */
[save-indicator] { display: none; font-size: var(--font-size-default); font-weight: var(--font-weight-medium); color: var(--accent-color); cursor: pointer; pointer-events: auto; white-space: nowrap; flex-shrink: 0; padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-default); opacity: 0; }

[save-indicator-visible] { display: inline-flex; opacity: 1; }

/* ---- "Saved" Confirmation State ----
 After clicking Save, briefly shows "Saved" in secondary text color.
 Non-interactive during this brief confirmation period. */
[save-indicator-saved] { color: var(--text-primary); pointer-events: none; cursor: default; }

/* Fading state: indicator fades out and becomes non-interactive
 after the "Saved" message has been shown briefly */
[save-indicator-fading] { opacity: 0; pointer-events: none; }

/* ============================================================================
 SECTION HEADERS - GLOBAL STANDARD
 Consistent heading pattern used across all settings sections.
 Contains a title and optional description.
 ============================================================================ */
[title-icon] { font-size: var(--font-size-2xl); margin-right: var(--space-md); }

/* ---- Textarea Styling ----
 Multi-line text input used for bio, notes, etc.
 Form inputs use [input-text] class from main[css] for single-line. */
[form-textarea] { padding: 0; border-radius: 0; border-width: 0; border-style: none; border-color: transparent; box-sizing: border-box; color: var(--text-primary); font-size: var(--font-size-default); font-weight: var(--font-weight-small); font-family: var(--font-family-primary); outline: none; resize: vertical; }

[form-textarea-size] { resize: vertical; min-height: var(--space-3xl); }

[avatar-upload-item] { align-items: center; }

/* ---- Avatar Preview ----
 Circular container showing the current avatar or initials. */
[avatar-preview] { align-items: center; justify-content: center; }

/* ---- Current Avatar Circle ----
 The actual circular avatar element showing either an image or initials */
[current-avatar] { align-items: center; justify-content: center; width: var(--space-3xl); height: var(--space-3xl); border-radius: var(--radius-default); background: transparent; color: var(--text-primary); font-weight: var(--font-weight-bold); font-family: var(--font-family-primary); background-image: none !important; background-size: auto !important; background-position: center !important; }

/* ---- Info Text and Status ----
 Descriptive text and current status below the toggle */
[info-status-enabled] { color: var(--text-primary); }

[info-status-disabled] { color: var(--text-primary); }

[session-badge] { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-default); font-size: var(--font-size-default); font-weight: var(--font-weight-medium); background: var(--accent-color); color: white; }

[danger-item-title] { font-weight: var(--font-weight-semibold); color: var(--color-negative); }

/* ---- Custom Checkbox Styling ----
 Replaces native checkbox with a styled 16x16 square */
[group-checkbox] { appearance: none; -webkit-appearance: none; width: var(--space-lg); height: var(--space-lg); border-width: 0; border-style: none; border-color: transparent; border-radius: var(--radius-default); cursor: pointer; }

/* ---- Checked Checkbox State ----
 Filled with accent color, solid accent border, full opacity */
[group-checkbox]:checked { background: var(--accent-color); border-width: 0; border-style: none; border-color: transparent; opacity: 1; }

[group-item-label-active] { cursor: default; opacity: 1; }

/* ============================================================================
 SETTING DESCRIPTIONS
 Small descriptive text below individual settings controls.
 Dimmed by default; brightens when the parent group is hovered.
 ============================================================================ */
[setting-description] { font-size: var(--font-size-default); color: var(--text-primary); margin-top: var(--space-sm); }

/* ---- Keyboard Layout Container ----
 Wraps the entire miniature keyboard visualization */
[keyboard-layout] { padding: var(--space-lg); background: var(--background-20); border-radius: var(--radius-default); max-width: 100%; }

/* ---- Keyboard Row ----
 Each horizontal row of keys on the keyboard */
[keyboard-row] { justify-content: center; }

/* ---- Individual Keyboard Key ----
 Each key is a small bordered button with monospace font */
[keyboard-key] { align-items: center; justify-content: center; min-width: var(--space-xl); height: var(--space-xl); padding: var(--space-sm) var(--space-md); background: var(--background-20); border-radius: var(--radius-default); font-size: var(--font-size-default); font-family: monospace; color: var(--text-primary); cursor: pointer; user-select: none; }

[keyboard-active] { background: var(--accent-color); color: var(--text-inverse); }

[keyboard-bound] { background: var(--accent-color); color: var(--accent-color); }

/* ============================================================================
 SHORTCUT BINDINGS LIST
 Displays configured keyboard shortcuts with their bound actions.
 ============================================================================ */
[shortcut-bindings] { max-width: 100%; }

/* ---- Individual Shortcut Binding ----
 Shows action name on the left and key combination on the right */
[shortcut-binding] { align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); background: var(--background-20); border-radius: var(--radius-default); }

[binding-action] { font-size: var(--font-size-default); color: var(--text-primary); }

[binding-keys] { align-items: center; }

/* ---- Individual Key in Binding ----
 Small pill-shaped label showing a single key (e[g]., "Ctrl", "S") */
[binding-key] { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-md); font-family: monospace; font-size: var(--font-size-default); background: var(--background-20); border-radius: var(--radius-default); color: var(--text-primary); min-width: var(--space-xl); }

[binding-edit] { align-items: center; justify-content: center; width: var(--space-xl); height: var(--space-xl); background: transparent; border-radius: var(--radius-default); color: var(--text-primary); cursor: pointer; }

/* ---- Success Toast ----
 Theme color + low opacity, frosted. */
[move-success-toast] { background: rgba(var(--background-primary-rgb), var(--opacity-55)); backdrop-filter: var(--blur-default); -webkit-backdrop-filter: var(--blur-default); }

/* ============================================================================
 FORM VIEW — wizard host: content (1–3), content[data-id="mode"] (import|manual)
 * Visibility: <form hidden> + group-control[data-ui=bank-options|file-upload] toggled in welcome.js
 * (no display:flex in CSS; use [flex] / [column] on elements.)
 ============================================================================ */
[hide-back-welcome] { display: none; }

[hero-welcome] { align-items: center; text-align: center; }

/* ============================================================================
 PRIVACY ASSURANCE — welcome form view 1
 ============================================================================ */
[form-view-1] { align-items: center; justify-content: center; padding: var(--space-lg); }

[privacy-text] { color: var(--accent-color); text-decoration: none; font-weight: var(--font-weight-medium); cursor: default; }

/* ============================================================================
 WELCOME STEP UI — numbered [badge] + label (any parent)
 ============================================================================ */
[interest-link] { color: var(--text-inverse); text-decoration: underline; }

/* ============================================================================
 * SIDEBAR COUNT HINTS (item counts displayed in navigation links)
 * ============================================================================
 * A small number [badge] shown at the right edge of sidebar nav items.
 * Indicates how many posts, screenshots, etc. exist in each section.
 * margin-left: auto pushes the count to the far right of the flex row. */
[nav-count-hint] { font-size: var(--font-size-default); color: var(--text-primary); font-weight: var(--font-weight-default); margin-left: auto; }

/* ============================================================================
 * PROFILE CARD (group-control)
 * ============================================================================
 * Displays the user's avatar, name, and email in a horizontal card.
 * group-item provides: padding, border, radius, transitions (from base styles).
 * [profile-header] is layout-only (flex row with avatar + info columns).
 * ============================================================================ */
[profile-card-item] { padding: var(--space-xl); }

[profile-header] { align-items: center; gap: var(--gap); }

[profile-avatar] { align-items: center; justify-content: center; width: var(--space-3xl); height: var(--space-3xl); background: transparent; color: var(--text-primary); border-radius: var(--radius-default); font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); flex-shrink: 0; /* Ensure no background images are shown — only text/initials */ }

[profile-info] { gap: var(--gap); }

[profile-name] { font-weight: var(--font-weight-semibold); color: var(--text-primary); }

[profile-email] { font-size: var(--font-size-default); color: var(--text-primary); }

/* ============================================================================
 * SECTION HEADER WITH BULK ACTIONS
 * ============================================================================
 * The left portion of a section header bar. Contains the section title
 * and optional [bulk-action] buttons that appear when items are selected. */
[header-left] { align-items: center; gap: var(--gap); }

/* [bulk-actions]: add flex gap in HTML; use [hidden] for visibility */
[bulk-actions] { align-items: center; gap: var(--gap); }

[bulk-actions-hidden] { display: none !important; }

[bulk-action] { align-items: center; gap: var(--gap); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-default); color: var(--text-primary); background: transparent; border-radius: var(--radius-default); cursor: pointer; }

/* ============================================================================
 * CONTENT LIST (group-control)
 * ============================================================================
 * Replaces old section-container. Inherits base group-control styles
 * (flex column, theme-aware background, border-radius).
 * Overrides gap/padding for tighter content density suitable for lists. */
[content-list-section] { padding: var(--space-lg); max-width: none; }

/* ============================================================================
 * CONTENT GRID — render target for dynamically-inserted items
 * ============================================================================
 * A flex-column container where JavaScript appends group-item elements.
 * Acts as the direct parent of content items within a content-list. */
[content-grid] { gap: var(--gap); }

/* ============================================================================
 * CONTENT ITEM (group-item)
 * ============================================================================
 * Rich list items for posts, screenshots, and activity entries.
 * Inherits base group-item styles: grid, padding, border, radius, transitions.
 * Adds: horizontal layout, capped height, overflow clipping, cursor, selection.
 * Each item has [row-content] (left) and optionally [row-preview] (right). */
[content-list-item] { align-items: stretch; justify-content: flex-start; max-height: var(--space-3xl); padding: 0 !important; cursor: pointer; }

/* ============================================================================
 * ROW CONTENT (Left side of a content item: info + actions)
 * ============================================================================
 * Takes up all remaining horizontal space (flex: 1).
 * Contains [row-info] (title, meta, description) and [row-actions] (buttons). */
[row-content] { justify-content: center; flex: 1; padding: var(--space-md) var(--space-lg); gap: var(--gap); min-width: 0; }

[row-info] { gap: var(--gap); }

[row-title] { align-items: center; gap: var(--gap); font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-primary); }

[row-code] { font-size: var(--font-size-default); font-family: monospace; color: var(--accent-color); font-weight: var(--font-weight-semibold); }

[row-meta] { gap: var(--gap); font-size: var(--font-size-default); color: var(--text-primary); white-space: nowrap; }

[row-description] { font-size: var(--font-size-default); color: var(--text-primary); }

/* ============================================================================
 * ROW ACTIONS (Buttons within content items)
 * ============================================================================
 * Horizontal row of small action buttons (view, edit, delete, etc.).
 * Uses the same multi-layer border-state pattern as the parent item. */
[row-actions] { gap: var(--gap); flex-wrap: nowrap; }

[row-action] { align-items: center; justify-content: center; gap: var(--gap); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-default); color: var(--text-primary); background: transparent; border-radius: var(--radius-default); cursor: pointer; }

/* ============================================================================
 * ROW PREVIEW (Right side of a content item: image thumbnail)
 * ============================================================================
 * Used for screenshot items — shows a small image preview on the right.
 * Fixed 120px width with a left border separating it from [row-content]. */
[row-preview] { align-items: center; justify-content: center; width: var(--space-3xl); min-width: var(--space-3xl); background: var(--background-base); }

[row-preview-img] { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================================
 * POST ICON — visual indicator for post content items
 * ============================================================================
 * A small square icon container showing a post-type icon (document, link, etc.).
 * Uses the accent color for the icon. */
[group-item-icon] { align-items: center; justify-content: center; width: var(--space-2xl); min-width: var(--space-2xl); height: var(--space-2xl); background: var(--background-base); border-radius: var(--radius-default); color: var(--accent-color); }

/* ============================================================================
 * ACTIVITY DOT — colored indicator for activity items
 * ============================================================================
 * A small circular dot shown next to activity entries.
 * Uses the accent color to draw attention. */
[activity-dot] { width: var(--space-md); height: var(--space-md); border-radius: var(--radius-default); background: var(--accent-color); flex-shrink: 0; }

/* ============================================================================
 * EMPTY STATE — placeholder when no content items exist
 * ============================================================================
 * Centered vertical layout with icon, title, and description.
 * Shown when a content section (posts, screenshots, etc.) has no data. */
[empty-state] { align-items: center; justify-content: center; gap: var(--gap); padding: var(--space-xl); text-align: center; }

[empty-state-icon] { align-items: center; justify-content: center; width: var(--space-2xl); height: var(--space-2xl); color: var(--text-primary); }

[empty-title] { font-weight: var(--font-weight-medium); color: var(--text-primary); }

[empty-description] { font-size: var(--font-size-default); color: var(--text-primary); max-width: 100%; }

/* ============================================================================
 * SHOW MORE BUTTON — pagination / load-more control
 * ============================================================================
 * A subtle text button at the bottom of a content list.
 * Loads additional items when clicked. Minimal styling — no border. */
[show-more-btn] { align-items: center; justify-content: center; gap: var(--gap); padding: var(--space-md) 0; font-size: var(--font-size-default); color: var(--text-primary); background: transparent; cursor: pointer; margin-top: var(--space-md); }

/* ---- html[mobile] (width < 768px, set by main[js]) ----
 Small screens: content items stack vertically instead of side-by-side.
 The image preview moves above the text content (column-reverse).
 The left border on [row-preview] becomes a bottom border. */
[mobile-content-item] { max-height: none; }

[mobile-row-preview] { width: 100%; min-width: 100%; height: var(--space-3xl); }

/* ============================================================================
 LEGAL PAGES — Terms of Service, Privacy Policy, etc.
 ============================================================================
 Matches the site design system. Styles the legal page layout,
 individual document sections (styled to look like US Letter pages),
 section hover effects with fade overlay and download button,
 heading and paragraph typography, and print-optimized output.
 
 This stylesheet covers:
 - Page-level layout and max-width (9 inches for readability)
 - Page intro (title + effective date)
 - Document sections styled as "pages" (8.5 x 11 inch min-height)
 - Hover effect: semi-transparent overlay + download button reveal
 - Dark theme overrides for sections and download button
 - Content typography (h2 headings, paragraphs)
 - 

/* ============================================================================
 PAGE INTRO — title and effective date
 ============================================================================
 The introductory block at the top of the legal page.
 Supports both custom <[page-intro]> element and [page-intro] class. */
[legal-page-intro] { margin-bottom: var(--space-md); }

[legal-intro-heading] { font-size: var(--font-size-default); font-weight: var(--font-weight-bold); color: var(--text-primary); margin-bottom: var(--space-sm); }

[legal-intro-text] { font-size: var(--font-size-default); color: var(--text-primary); }

[legal-section-download] { position: absolute; bottom: var(--space-xl); right: var(--space-xl); padding: var(--space-md) var(--space-lg); font-size: var(--font-size-default); font-weight: var(--font-weight-medium); color: var(--text-primary); background: var(--background-base); border-radius: var(--radius-default); cursor: pointer; align-items: center; gap: var(--gap); opacity: 0; visibility: hidden; pointer-events: none; z-index: 2; }

[stacked-paragraph] { margin-top: var(--space-sm); }

/* ============================================================================
 BASE TABLE
 ============================================================================
 Universal table — base `table {}` rule lives in NATIVE HTML ELEMENTS at the
 top of main[css]. Below: cell hooks and table UI only.
 */
[tbody-td] { background: var(--background-20); }

[tbody-th] { background: var(--background-20); }

[td-top-left] { border-top-left-radius: var(--radius-default); }

[th-top-left] { border-top-left-radius: var(--radius-default); }

[td-top-right] { border-top-right-radius: var(--radius-default); }

[th-top-right] { border-top-right-radius: var(--radius-default); }

[td-left] { border-bottom-left-radius: var(--radius-default); border-top-left-radius: var(--radius-default); }

[th-bottom-left] { border-bottom-left-radius: var(--radius-default); border-top-left-radius: var(--radius-default); }

[td-right] { border-bottom-right-radius: var(--radius-default); border-top-right-radius: var(--radius-default); }

[th-bottom-right] { border-bottom-right-radius: var(--radius-default); border-top-right-radius: var(--radius-default); }

[fixed-filter-hide-4] { display: none; }

[resize-active-table] { overscroll-behavior: none !important; overflow-anchor: none !important; }

[resize-active-category] { overscroll-behavior: none !important; overflow-anchor: none !important; }

[table-filter-fixed] { overflow-x: hidden; }

[table-filter-fixed-category] { overflow-x: hidden; max-width: 100%; }

[table-filter-fixed-inner] { min-width: 100%; max-width: 100%; }

/* ============================================================================
 CELL CONTENT WRAPPER
 ============================================================================
 A <span cell-content> wraps the visible text inside each <td>.
 This allows ellipsis truncation to work independently of the
 absolutely-positioned copy button. */
[cell-content] { white-space: nowrap; display: inline-block; max-width: 100%; min-width: 0; vertical-align: middle; }

/* ============================================================================
 COPY-TO-CLIPBOARD BUTTON (floats inside each body cell)
 ============================================================================
 Absolutely positioned on the right side of the cell.
 Hidden by default (opacity 0, pointer-events none); revealed on cell hover.
 Has a solid background so it visually "covers" the text beneath it. */
[cell-copy-btn] { position: absolute; right: var(--space-sm); top: 50%; transform: translateY(-50%); padding: var(--space-sm) var(--space-md); background: var(--background-base); border-width: 0; border-style: none; border-color: transparent; border-radius: var(--radius-default); cursor: pointer; opacity: 0; pointer-events: none; font-size: var(--font-size-default); color: var(--text-primary); align-items: center; justify-content: center; z-index: 60; min-width: var(--space-xl); height: var(--space-xl); box-shadow: var(--shadow-sm); }

[cell-copy-copied] { color: var(--color-positive); }

[cell-copy-btn]:hover { border-width: 0; border-style: none; border-color: transparent; }

[cell-copy-btn]:focus { border-width: 0; border-style: none; border-color: transparent; }

/* ============================================================================
 TABLE STRUCTURE — one section + per view
 ============================================================================
 Inner section: grid col-2 + gap — two siblings (data + actions).
 Each view (expenses, assets, liabilities) has its own section wrapping its .
 Data + actions are side-by-side; data must not overflow into actions column. */
[th-resizing] { user-select: none; }

[resizing] { transform: translateZ(0); }

/* ============================================================================
 TABLE BACKGROUND + light-theme design-token swatches
 ============================================================================
 Table / th backgrounds and light-theme [color-swatch-*-primary] previews
 live in the main [data-theme="light"] block at the top of this file. */
[tbody-last-td] { border-bottom-width: 0; border-bottom-style: none; border-bottom-color: transparent; }

[th-last] { border-right-width: 0; border-right-style: none; border-right-color: transparent; }

/* ============================================================================
 VARIABLE NAME & VALUE — monospace display for token/data cells
 ============================================================================
 Used in design-token tables and data browsers. Monospace font
 ensures aligned, code-like rendering. */
[variable-name] { font-family: var(--font-family-mono); color: var(--accent-color); font-size: var(--font-size-default); }

[variable-value] { font-family: var(--font-family-mono); color: var(--text-primary); font-size: var(--font-size-default); }

/* ============================================================================
 DESIGN TOKEN PREVIEW ELEMENTS
 ============================================================================
 Small visual previews shown alongside design-token values in admin tables.
 Each type (color swatch, radius, spacing) renders a different visual. */
[color-swatch] { display: inline-block; width: var(--space-xl); height: var(--space-xl); border-radius: var(--radius-default); vertical-align: middle; margin-right: var(--space-md); }

[color-swatch-accent] { background: var(--accent-color); }

[radius-preview] { display: inline-block; width: var(--space-xl); height: var(--space-xl); background: var(--accent-color); border-radius: var(--radius-default); opacity: var(--opacity-md); vertical-align: middle; margin-right: var(--space-md); }

[spacing-preview] { display: inline-block; height: var(--space-lg); background: var(--accent-color); opacity: var(--opacity-md); vertical-align: middle; margin-right: var(--space-md); }

[spacing-preview-sm] { width: var(--space-sm); }

[spacing-preview-md] { width: var(--space-md); }

[spacing-preview-lg] { width: var(--space-lg); }

[spacing-preview-24] { width: calc(var(--space-lg) + var(--space-md)); }

[spacing-preview-xl] { width: var(--space-xl); }

[spacing-preview-2xl] { width: var(--space-2xl); }

[font-sample-sm] { font-size: var(--font-size-sm); }

[font-sample-md] { font-size: var(--font-size-md); }

[font-sample-default] { font-size: var(--font-size-default); }

[font-sample-lg] { font-size: var(--font-size-lg); }

[font-sample-xl] { font-size: var(--font-size-xl); }

[font-sample-2xl] { font-size: var(--font-size-2xl); }

[code-user-id] { font-size: var(--font-size-xs); color: var(--text-primary); }

[empty-state-padded] { padding: var(--space-xl); }

[panel-heading] { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-md); }

[lockout-actions] { margin-top: var(--space-xl); }

[variable-table-spaced] { margin-bottom: var(--space-2xl); }

[variable-table-auto] { width: auto !important; max-width: none !important; }

[table-empty-cell] { text-align: center; padding: var(--space-xl); color: var(--text-primary); font-style: italic; }

[panel-spaced] { margin-bottom: var(--space-xl); }

[panel-text] { color: var(--text-primary); font-size: var(--font-size-default); }

[input-spaced] { margin-bottom: var(--space-lg); }

/* ============================================================================
 SUMMARY STATISTICS — dashboard stat cards
 ============================================================================
 Uses custom elements: <[summary-stats]>, <[stat-item]>, <[stat-label]>, <[stat-value]>.
 Displayed as a responsive grid of cards inside a <section>. */
[themed-stat-item] { background: var(--background-20); }

/* ============================================================================
 STORAGE ITEMS — browser/manager for localStorage/sessionStorage data
 ============================================================================
 Cards displaying stored data with key, size, and JSON preview. */
[storage-grid] { display: grid; gap: var(--gap); }

[storage-item] { background: var(--background-20); padding: var(--space-xl); border-radius: var(--radius-default); }

[storage-heading] { font-size: var(--font-size-default); margin-bottom: var(--space-md); color: var(--text-primary); align-items: center; gap: var(--gap); flex-wrap: wrap; }

[storage-key] { font-family: var(--font-family-mono); font-size: var(--font-size-default); color: var(--text-primary); background: var(--background-20); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-default); }

[storage-size] { color: var(--text-primary); font-size: var(--font-size-default); margin-bottom: var(--space-lg); }

[storage-preview] { background: var(--background-20); padding: var(--space-lg); border-radius: var(--radius-default); overflow-x: auto; font-family: var(--font-family-mono); font-size: var(--font-size-default); color: var(--text-primary); max-height: var(--space-5xl); overflow-y: auto; }

[empty] { color: var(--text-primary); font-style: italic; padding: var(--space-xl); text-align: center; }

[item-actions] { gap: var(--gap); margin-top: var(--space-lg); flex-wrap: wrap; }

[no-accounts] { text-align: center; padding: var(--space-xl); color: var(--text-primary); }

/* ============================================================================
 ADMIN BADGE — inline indicator for admin status
 ============================================================================
 A small pill-shaped [badge] using the accent color to highlight
 admin or special-role users. */
[admin-badge] { display: inline-flex; align-items: center; gap: var(--gap); padding: var(--space-sm) var(--space-md); background: var(--accent-color); color: var(--accent-color); border-radius: var(--radius-default); font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); }

/* ============================================================================
 COMPONENT PREVIEW — inline preview area for UI components
 ============================================================================
 A contained area below a table row or section for rendering
 live previews of design-system components. */
[component-preview] { padding: var(--space-lg); background: var(--background-20); border-radius: var(--radius-default); margin-top: var(--space-md); }

/* ============================================================================
 DASHBOARD TABLE GROUPS — group-item containers for category tables
 ============================================================================
 Each financial category (income, expenses, assets) in its own group-item. */
[table-label] { justify-content: space-between; align-items: center; }

/* ============================================================================
 TABLE ROW STATES — visual feedback for editing, deleting, new rows
 ============================================================================
 Each state has a fixed height matching space-xl to prevent
 layout shifts when switching between view and edit modes. */
[editing-td] { background: var(--accent-color) !important; vertical-align: middle; }

[new-row-td] { background: var(--accent-color) !important; }

[highlight-transaction-td] { background: var(--accent-color) !important; }

/* Row highlight — all data cells (Actions column is outside tbody) */
[checked-row-td] { background: var(--accent-color) !important; }

/* ============================================================================
 INLINE INPUT EDITING — text/number inputs inside table cells
 ============================================================================
 Shown when a row enters edit mode. Inputs fill the cell width
 and match the fixed row height for seamless inline editing. */
[edit-transaction-icon] { color: var(--text-primary); fill: currentColor; stroke: currentColor; }

/* All edit inputs: fill full column width; min-width: 0 lets inputs shrink with column (browsers default min-width).
 * Date, description, category, amount use their own cell wrappers (*-cell) for layout stability. */
[editing-text-input] { display: block; width: 100%; min-width: 0; }

[editing-td-visible] {  }

[date-input-overlay] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; pointer-events: auto; margin: 0; padding: 0; }

[amount-symbol] { flex-shrink: 0; min-width: 2ch; color: var(--text-primary); visibility: visible !important; opacity: 1 !important; }

[amount-value] { text-align: right; }

[amount-input] { -moz-appearance: textfield; }

[date-value] { align-items: center; }

/* ============================================================================
 CATEGORY-SPECIFIC COLUMN WIDTHS
 ============================================================================
 Fixed layout keeps column widths stable when adding/editing rows.
 Column widths are set by calendar's applyEditBasedColumnWidthsToCalendarTable
 or by user resize; inputs then fill the existing column width. */
[category-col-4] { min-width: var(--space-3xl); text-align: left; }

/* Liabilities: Description | Transaction Date | Start Date | End Date | Payment | Recurring | Balance | Next Due | Actions */
[liabilities-col-right] { text-align: right; }

/* admin-diagnostics-hud.js — fixed panel pinned top-right; --panel-left set dynamically */
[admin-diag-panel] { position: fixed; top: var(--space-md); left: var(--panel-left); z-index: 9999; }

/* calendar.js — accordion-recurring context menu positioned at pointer */
[recurring-context-menu] { position: fixed; left: var(--menu-left); top: var(--menu-top); z-index: 10000; }

/* footer.js — quick-panel context menu positioned at pointer */
[footer-context-menu] { position: fixed; left: var(--menu-left); top: var(--menu-top); z-index: 10000; }

/* footer.js / settings-page.js — drag preview card (off-screen floating label) */
[drag-preview] { position: fixed; top: calc(-1 * var(--space-7xl)); left: calc(-1 * var(--space-7xl)); padding-top: var(--space-md); padding-right: var(--space-lg); padding-bottom: var(--space-md); padding-left: var(--space-lg); background: var(--background-20); border-width: var(--border-width-md); border-style: solid; border-color: var(--border-primary); border-radius: var(--radius-default); box-shadow: var(--shadow-md); font-size: var(--font-size-default); font-weight: var(--font-weight-medium); font-family: var(--font-family-primary); color: var(--text-primary); white-space: nowrap; pointer-events: none; z-index: 10000; }

/* footer.js / settings-page.js — drop indicator container */
[drop-indicator] { margin-top: var(--space-sm); margin-bottom: var(--space-sm); opacity: var(--opacity-near-default); }

/* footer.js / settings-page.js — drop indicator horizontal line */
[drop-indicator-line] { display: block; position: relative; height: var(--border-width-lg); background: var(--accent-color); border-radius: var(--border-width-md); animation-name: dropIndicatorPulse; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }

/* footer.js / settings-page.js — drop indicator end caps (left/right circles) */
[drop-indicator-dot] { position: absolute; top: calc(-1 * var(--space-xs)); width: var(--space-md); height: var(--space-md); background: var(--accent-color); border-radius: 50%; animation-name: dropIndicatorPulse; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }

/* TODO(js): footer.js / settings-page.js currently set data-position="left|right"
 on [drop-indicator-dot]. Replace with a single attribute
 `[drop-indicator-dot-left]` / `[drop-indicator-dot-right]` so this CSS
 hits with a single-selector rule. */
[drop-indicator-dot-left] { left: calc(-1 * var(--space-sm)); }

[drop-indicator-dot-right] { right: calc(-1 * var(--space-sm)); }

/* legal-download.js — hidden print iframe (off-screen, invisible) */
[legal-print-iframe] { position: fixed; top: 0; left: 0; width: var(--space-2xs); height: var(--space-2xs); border-width: 0; border-style: none; border-color: transparent; opacity: var(--opacity-0); pointer-events: none; }

/* main.js — sign-in panel positioned below user avatar */
[signin-panel-positioned] { position: fixed; top: var(--signin-panel-top); left: var(--signin-panel-left); z-index: 10001; }

/* menu-utils.js — generic dropdown panel positioned relative to trigger */
[menu-positioned] { position: fixed; top: var(--menu-top); left: var(--menu-left); z-index: 9999; }

/* screenshot-capture.js — dimmed overlay covering viewport during capture */
[capture-overlay] { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--background-overlay); cursor: crosshair; z-index: 99998; }

/* screenshot-capture.js — highlight box outlining the hovered element */
[capture-highlight] { position: fixed; left: var(--box-left); top: var(--box-top); width: var(--box-width); height: var(--box-height); border-width: var(--border-width-md); border-style: solid; border-color: var(--accent-color); background: var(--accent-color); pointer-events: none; z-index: 99999; }

/* screenshot-capture.js — banner instructing the user during capture mode */
[capture-instructions] { position: fixed; top: var(--space-lg); left: 50%; transform: translateX(-50%); padding-top: var(--space-lg); padding-right: var(--space-xl); padding-bottom: var(--space-lg); padding-left: var(--space-xl); background: var(--background-20); color: var(--text-primary); border-width: var(--border-width-md); border-style: solid; border-color: var(--border-primary); border-radius: var(--radius-default); box-shadow: var(--shadow-md); font-size: var(--font-size-default); z-index: 100000; }

/* screenshot-capture.js — small thumbnail in the attached-images tray (28px default) */
[image-thumb] { position: relative; width: var(--space-thumb-sm); height: var(--space-thumb-sm); border-width: var(--border-width-md); border-style: solid; border-color: transparent; border-radius: var(--radius-default); background: var(--background-20); cursor: pointer; }

/* screenshot-capture.js — composer-orphan thumbs are slightly bigger (36px).
 TODO(js): screenshot-capture.js currently sets data-context="post-composer" on
 [image-thumb] / [remove-btn]. Set a single attribute `[image-thumb-composer]` /
 `[remove-btn-composer]` alongside that so this rule hits via a single-selector. */
[image-thumb-composer] { width: var(--space-thumb-md); height: var(--space-thumb-md); }

/* screenshot-capture.js — thumb image fills its wrapper */
[image-thumb-img] { width: 100%; height: 100%; object-fit: cover; }

/* screenshot-capture.js — thumb hover border highlight */
[image-thumb]:hover { border-color: var(--accent-color); }

/* screenshot-capture.js — remove (X) button on thumbnail, hidden by default */
[remove-btn] { position: absolute; top: calc(-1 * var(--space-sm)); right: calc(-1 * var(--space-sm)); width: var(--space-lg); height: var(--space-lg); background: var(--color-negative); color: var(--text-inverse); border-width: 0; border-style: none; border-color: transparent; border-radius: 50%; font-size: var(--font-size-default); font-weight: var(--font-weight-bold); cursor: pointer; box-shadow: var(--shadow-md); opacity: var(--opacity-0); pointer-events: auto; z-index: 100; }

/* screenshot-capture.js — composer-orphan remove buttons are slightly larger */
[remove-btn-composer] { width: var(--space-lg); height: var(--space-lg); }

/* screenshot-capture.js — show/scale remove button when thumb is hovered.
 TODO(js): currently `[image-thumb] [remove-btn]` (compound + descendant).
 When data-hovered is set on [image-thumb], also toggle a single attribute
 `[remove-btn-revealed]` on the nested [remove-btn]; then this rule becomes a
 single-selector rule. */
[remove-btn-revealed] { opacity: var(--opacity-3xl); transform: scale(1.1); }

/* screenshot-capture.js — image preview modal (simple full-viewport backdrop) */
[image-preview-modal] { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; padding-top: var(--space-lg); padding-right: var(--space-lg); padding-bottom: var(--space-lg); padding-left: var(--space-lg); background: var(--background-overlay); z-index: 100000; }

/* screenshot-capture.js — preview image inside the simple modal */
[image-preview-img] { max-width: var(--space-5xl); max-height: var(--space-5xl); object-fit: contain; border-radius: var(--radius-default); box-shadow: var(--shadow-xl); }

/* screenshot-capture.js — screenshot preview modal backdrop */
[screenshot-preview-modal] { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; padding-top: var(--space-lg); padding-right: var(--space-lg); padding-bottom: var(--space-lg); padding-left: var(--space-lg); background: var(--background-overlay); z-index: 100000; }

/* screenshot-capture.js — inner content card of the screenshot preview modal */
[screenshot-preview-content] { gap: var(--space-lg); max-width: var(--space-5xl); max-height: var(--space-5xl); padding-top: var(--space-lg); padding-right: var(--space-lg); padding-bottom: var(--space-lg); padding-left: var(--space-lg); background: var(--background-20); border-width: var(--border-width-md); border-style: solid; border-color: var(--border-primary); border-radius: var(--radius-default); box-shadow: var(--shadow-xl); }

/* screenshot-capture.js — preview image in the screenshot preview card */
[screenshot-preview-img] { max-width: 100%; max-height: var(--space-4xl); object-fit: contain; border-radius: var(--radius-default); }

/* screenshot-capture.js — auth-code / timestamp info bar */
[screenshot-preview-info] { color: var(--text-primary); font-size: var(--font-size-default); }

/* screenshot-capture.js — primary/secondary action buttons in preview modal */
[screenshot-preview-action] { padding-top: var(--space-md); padding-right: var(--space-lg); padding-bottom: var(--space-md); padding-left: var(--space-lg); border-width: var(--border-width-md); border-style: solid; border-color: transparent; border-radius: var(--radius-default); font-size: var(--font-size-default); cursor: pointer; }

/* TODO(js): screenshot-capture.js currently sets data-variant="primary|secondary" on
 [screenshot-preview-action]. Also set a single attribute
 `[screenshot-preview-action-primary]` / `[screenshot-preview-action-secondary]`
 so these rules hit via single-selector form. */
[screenshot-preview-action-primary] { background: var(--accent-color); color: var(--text-inverse); }

[screenshot-preview-action-secondary] { background: var(--background-20); color: var(--text-primary); border-color: var(--border-primary); }

/* screenshot-capture.js — diagnostic repair path when composer has zero height */
[composer-repair] { min-height: var(--space-composer-repair); }

/* TODO(js): settings-manager.js sets `[user-dragging]` on <body>. Since the
 attribute is already a single attribute, this rule targets it directly
 (<body> is just the element it happens to live on; specificity is equivalent). */
[user-dragging] { user-select: none; -webkit-user-select: none; }

/* settings-manager.js — temp element used to resolve --hue-color-* var to RGB, off-screen */
[hue-color-resolver] { position: absolute; left: calc(-1 * var(--space-7xl)); width: var(--space-2xs); height: var(--space-2xs); }

/* settings-page.js — settings-group label used as a drag handle */
[drag-grab-cursor] { cursor: grab; }

[drag-available] { visibility: visible; }

/* settings-page.js — toast notification slide-in/out */
[toast-notification] { position: fixed; bottom: var(--space-lg); right: var(--space-lg); padding-top: var(--space-lg); padding-right: var(--space-lg); padding-bottom: var(--space-lg); padding-left: var(--space-lg); background: var(--background-20); border-width: var(--border-width-md); border-style: solid; border-color: var(--border-primary); border-radius: var(--radius-default); font-size: var(--font-size-default); z-index: 10000; animation-name: slideIn; animation-duration: 0.3s; animation-timing-function: ease; }

/* TODO(js): settings-page.js currently sets notification-type="success|error"
 on [toast-notification]. Also set a single attribute
 `[toast-notification-success]` / `[toast-notification-error]` so these
 rules hit via a single-selector. */
[toast-notification-success] { background: var(--accent-color); border-color: transparent; }

[toast-notification-error] { border-color: var(--color-negative); }

/* settings-panel-manager.js — panel is hidden during rendering to avoid flash */
[rendering] { visibility: hidden; }

/* TODO(js): sync-status-indicator.js currently sets data-status="syncing" /
 data-faded / data-flash="success|error" on [sync-status-indicator]. Replace
 with single attributes on the relevant SVG / indicator element so these
 selectors stay single-selector. The `[sync-spinning]` attribute below replaces
 the former descendant rule `[sync-status-indicator][data-state~="status"] svg`;
 JS should set `[sync-spinning]` directly on the child <svg> when status is
 "syncing". */
[sync-spinning] { animation-name: spin; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; }

/* sync-status-indicator.js / shared-components.js — modal wrappers for sync details & conflict settings */
[sync-details-modal] { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--background-overlay); z-index: 100000; }

[conflict-settings-modal] { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--background-overlay); z-index: 100000; }



/* ============================================================================
 * SECTION 3: @keyframes
 * ============================================================================ */

/* ============================================================================
 * LOADING SPINNER
 * 
 * A simple CSS-only spinning circle.
 * The top border is accent-colored; the rest is a muted border.
 * ============================================================================ */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@keyframes slideIn { from { opacity: 0; transform: translateY(calc(-1 * var(--space-lg))); } to { opacity: 1; transform: translateY(0); } }

/* ---- New Row Animation ----
 Simple fade-in when a new transaction row is added */
@keyframes rowFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ============================================================================
 * DUPLICATE SETTING ANIMATION
 *
 * Visual feedback when trying to add a setting that already exists in the panel.
 * Briefly flashes red and scales up, then returns to normal.
 * ============================================================================ */
@keyframes settingAlreadyExists { 0%, 100% { background: var(--background-20); transform: scale(1); } 25% { background: rgba(var(--color-negative-rgb), var(--opacity-low)); transform: scale(var(--scale-low)); } 50% { background: rgba(var(--color-negative-rgb), var(--opacity-md)); transform: scale(var(--scale-default)); } 75% { background: rgba(var(--color-negative-rgb), var(--opacity-low)); transform: scale(var(--scale-low)); } }

@keyframes dropIndicatorPulse { 0% { opacity: var(--opacity-xl); } 100% { opacity: 1; } }

/* ============================================================================
 SLIDE-IN ANIMATION — used for newly-added table rows
 ============================================================================
 Row slides down from slightly above (10px) while fading in. */
@keyframes slideIn { from { opacity: 0; transform: translateY(calc(-1 * var(--space-lg))); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================================
 * Supporting keyframes used by the above rules
 * ============================================================================ */
@keyframes dropIndicatorPulse { from { opacity: var(--opacity-xl); } to { opacity: var(--opacity-3xl); } }

@keyframes slideIn { from { transform: translateX(100%); opacity: var(--opacity-0); } to { transform: translateX(0); opacity: var(--opacity-3xl); } }

@keyframes slideOut { from { transform: translateX(0); opacity: var(--opacity-3xl); } to { transform: translateX(100%); opacity: var(--opacity-0); } }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }



/* ============================================================================
 * SECTION 4: @media
 * ============================================================================ */

/* ============================================================================
 * PRINT STYLES
 * Hide non-essential UI elements when printing.
 * ============================================================================ */
@media print { [print-hide] { display: none; } }

@media print { section { padding: 0; } }

@media print { container { padding: 0; } }

@media print { content-body { padding: 0; } }

@media (max-width: 767px) { [tips-page] { padding: var(--space-xl); } }

/* ============================================================================
 DARK MODE SUPPORT (Media Query)
 Applies when the user's OS is set to dark mode.
 These provide fallback dark styling for systems that don't
 use the data-theme attribute approach.
 ============================================================================ */
@media (prefers-color-scheme: dark) { [calendar-header] { background: none; } }

@media (prefers-color-scheme: dark) { [nav-title] { color: var(--text-primary); } }

@media (prefers-color-scheme: dark) { nav-button { background: var(--background-base); color: var(--text-primary); } }

@media (prefers-color-scheme: dark) { [accordion-title] { color: var(--text-primary); } }

@media (prefers-color-scheme: dark) { [accordion-subtitle] { color: var(--text-primary); } }

@media (prefers-color-scheme: dark) { [category-label] { color: var(--text-primary); } }

@media (prefers-color-scheme: dark) { [category-value] { color: var(--text-primary); } }

@media (prefers-color-scheme: dark) { [detail-label] { color: var(--text-primary); } }

@media (prefers-color-scheme: dark) { [detail-value] { color: var(--text-primary); } }

@media (prefers-color-scheme: dark) { [mini-calendar-title] { color: var(--text-primary); } }

@media (prefers-color-scheme: dark) { [events-title] { color: var(--text-primary); } }

@media (prefers-color-scheme: dark) { [status-text] { color: var(--text-primary); } }

@media (prefers-color-scheme: dark) { [status-range] { color: var(--text-primary); } }

/* ============================================================================
 PRINT STYLES
 Optimizations for printed output: removes decorative elements,
 uses black borders, and hides interactive components.
 ============================================================================ */
@media print { { box-shadow: none; } }

@media print { [calendar-sidebar] { display: none; } }

@media print { [starting-balance-section] { display: none; } }

/* ============================================================================
 MOBILE + TABLET (xs / sm / md tiers, ≤ 1023px) — Responsive calendar.
 Allow calendar to resize down until [unsupported-viewport] overlay shows.
 Accordion stacks below calendar via main[css].
 ============================================================================ */
@media (max-width: 1023px) { { min-width: 0; max-width: 100%; width: 100%; } }

@media (max-width: 1023px) { [calendar-header] { flex-wrap: wrap; gap: var(--gap); padding: var(--space-md) var(--space-md); } }

@media (max-width: 1023px) { [nav-title] { min-width: 0; } }

@media (max-width: 1023px) { [calendar-grid] { min-width: 0; width: 100%; } }

@media (max-width: 1023px) { [data-id="day"] { min-height: 0; } }

/* ============================================================================
 * DARK THEME — prefers-color-scheme Overrides
 *
 * Adjusts dropdown and footer colors when OS dark mode is active.
 * ============================================================================ */
@media (prefers-color-scheme: dark) { [panel-header] { background: var(--background-20); } }

@media (prefers-color-scheme: dark) { [breadcrumb-company] { color: var(--text-primary); } }

/* ============================================================================
 * PRINT STYLES
 *
 * Hides non-essential elements and prevents page breaks inside content.
 * ============================================================================ */
@media print { [footer-utility] { display: none; } }

@media print { container { display: none; } }

@media print { content { page-break-inside: avoid; } }

@media print { group-control { break-inside: avoid; } }

/* ============================================================================
 PRINT STYLES — optimized for PDF export and paper printing
 ============================================================================
 Strips all decorative styling, removes margins/padding on containers,
 forces black text on white background for readability,
 and enables exact color reproduction for browsers that support it. */
@media print { @page { size: auto; margin: 0; } }

@media print { html { margin: 0 !important; padding: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; } }

@media print { body { margin: 0 !important; padding: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; } }

@media print { body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

@media print { * { box-sizing: border-box; } }

@media print { container { margin: 0 !important; padding: 0 !important; max-width: none !important; gap: 0 !important; } }

@media print { content { margin: 0 !important; padding: 0 !important; max-width: none !important; gap: 0 !important; } }

@media print { section { margin: 0 !important; padding: 0 !important; max-width: none !important; gap: 0 !important; } }

@media print { [container] { margin: 0 !important; padding: 0 !important; max-width: none !important; gap: 0 !important; } }

@media print { [wrapper] { margin: 0 !important; padding: 0 !important; max-width: none !important; gap: 0 !important; } }

@media print { [page] { margin: 0 !important; padding: 0 !important; max-width: none !important; gap: 0 !important; } }

@media print { [content] { margin: 0 !important; padding: 0 !important; max-width: none !important; gap: 0 !important; } }

@media print { [legal-section] { margin: 0 !important; padding: 0 !important; max-width: none !important; gap: 0 !important; } }

@media print { [legal-page] { margin: 0 !important; padding: 0 !important; max-width: none !important; gap: 0 !important; } }

@media print { section { margin: var(--space-lg) !important; margin-left: var(--space-lg) !important; margin-right: var(--space-lg) !important; padding: var(--space-lg) !important; min-height: auto !important; } }

@media print { [legal-section] { margin: var(--space-lg) !important; margin-left: var(--space-lg) !important; margin-right: var(--space-lg) !important; padding: var(--space-lg) !important; min-height: auto !important; } }

@media print { h2 { color: var(--print-text-color) !important; } }

@media print { [section-body-text] { color: var(--print-text-color) !important; } }

@media print { section { background: var(--print-background-color) !important; } }



/* ============================================================================
 * SECTION 5: native HTML tags
 * ============================================================================ */

input:invalid { box-shadow: none; outline: none; }

textarea::placeholder { color: var(--text-primary); }

select:focus { outline: none; }

p:last-child { margin-bottom: 0; }

/* ============================================================================
 * SETTINGS PANEL DIVIDERS (universal — matches admin tables)
 * Native <hr> styled directly; no boolean attribute hook.
 * ============================================================================ */
hr { display: block; height: var(--divider); background: var(--border-primary); flex-shrink: 0; width: 100%; padding: 0; }

hr:last-child { display: none; }

html { min-height: var(--space-lg) !important; height: 100%; overflow-x: auto; max-width: 100vw; }

head { min-height: var(--space-lg) !important; }

title { min-height: var(--space-lg) !important; }

base { min-height: var(--space-lg) !important; }

link { min-height: var(--space-lg) !important; }

meta { min-height: var(--space-lg) !important; }

style { min-height: var(--space-lg) !important; }

body { min-height: var(--space-lg) !important; background: var(--background-base); height: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; margin: 0; }

article { min-height: var(--space-lg) !important; }

nav { min-height: var(--space-lg) !important; flex: 1; justify-content: flex-start; margin-left: var(--space-xl); min-width: 0; }

aside { min-height: var(--space-lg) !important; }

h1 { min-height: var(--space-lg) !important; }

h2 { min-height: var(--space-lg) !important; font-size: var(--font-size-default); font-weight: var(--font-weight-semibold); color: var(--text-primary); margin-bottom: var(--space-sm); }

h3 { min-height: var(--space-lg) !important; }

h4 { min-height: var(--space-lg) !important; }

h5 { min-height: var(--space-lg) !important; }

h6 { min-height: var(--space-lg) !important; }

hgroup { min-height: var(--space-lg) !important; }

header { min-height: var(--space-lg) !important; }

footer { min-height: var(--space-lg) !important; }

address { min-height: var(--space-lg) !important; }

main { min-height: var(--space-lg) !important; }

search { min-height: var(--space-lg) !important; }

p { white-space: normal; font-size: var(--font-size-default); margin: 0; margin-bottom: var(--space-sm); }

pre { min-height: var(--space-lg) !important; }

blockquote { min-height: var(--space-lg) !important; }

ol { min-height: var(--space-lg) !important; }

ul { min-height: var(--space-lg) !important; }

menu { min-height: var(--space-lg) !important; }

li { min-height: var(--space-lg) !important; }

dl { min-height: var(--space-lg) !important; }

dt { min-height: var(--space-lg) !important; }

dd { min-height: var(--space-lg) !important; }

figure { min-height: var(--space-lg) !important; }

figcaption { min-height: var(--space-lg) !important; }

div { min-height: var(--space-lg) !important; }

a { min-height: var(--space-lg) !important; color: var(--text-primary); text-decoration: none; text-wrap: nowrap; white-space: normal; cursor: pointer; }

a[broken-link], [broken-link] { text-decoration: line-through !important; text-decoration-thickness: var(--border-width) !important; text-decoration-color: rgba(var(--border-rgb), var(--opacity-3xl)) !important; opacity: var(--opacity-2xl); cursor: not-allowed !important; pointer-events: none !important; }

[zindex-sm] { z-index: var(--z-sm); }
[zindex-md] { z-index: var(--z-md); }
[zindex-default] { z-index: var(--z-default); }
[zindex-lg] { z-index: var(--z-lg); }
[zindex-xl] { z-index: var(--z-xl); }

[v2] { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; max-width: 0 !important; max-height: 0 !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden !important; pointer-events: none !important; user-select: none !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; position: absolute !important; }

em { min-height: var(--space-lg) !important; }

strong { min-height: var(--space-lg) !important; }

small { min-height: var(--space-lg) !important; }

s { min-height: var(--space-lg) !important; }

cite { min-height: var(--space-lg) !important; }

q { min-height: var(--space-lg) !important; }

dfn { min-height: var(--space-lg) !important; }

abbr { min-height: var(--space-lg) !important; }

ruby { min-height: var(--space-lg) !important; }

rt { min-height: var(--space-lg) !important; }

rp { min-height: var(--space-lg) !important; }

data { min-height: var(--space-lg) !important; }

time { min-height: var(--space-lg) !important; }

code { min-height: var(--space-lg) !important; }

var { min-height: var(--space-lg) !important; }

samp { min-height: var(--space-lg) !important; }

kbd { min-height: var(--space-lg) !important; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-md) var(--space-lg); font-family: monospace; font-size: var(--font-size-default); background: var(--background-tertiary); border-radius: var(--radius-default); border-width: var(--border-width-md); border-style: solid; border-color: var(--border-primary); color: var(--text-primary); min-width: var(--space-kbd-min); }

sub { min-height: var(--space-lg) !important; }

sup { min-height: var(--space-lg) !important; }

i { min-height: var(--space-lg) !important; display: none !important; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: middle; }

b { min-height: var(--space-lg) !important; }

u { min-height: var(--space-lg) !important; }

mark { min-height: var(--space-lg) !important; }

bdi { min-height: var(--space-lg) !important; }

bdo { min-height: var(--space-lg) !important; }

/* span { min-height: var(--space-lg) !important; } */

br { min-height: var(--space-lg) !important; }

wbr { min-height: var(--space-lg) !important; }

ins { min-height: var(--space-lg) !important; }

del { min-height: var(--space-lg) !important; }

picture { min-height: var(--space-lg) !important; }

source { min-height: var(--space-lg) !important; }

img { min-height: var(--space-lg) !important; }

iframe { min-height: var(--space-lg) !important; }

embed { min-height: var(--space-lg) !important; }

object { min-height: var(--space-lg) !important; }

video { min-height: var(--space-lg) !important; }

audio { min-height: var(--space-lg) !important; }

track { min-height: var(--space-lg) !important; }

map { min-height: var(--space-lg) !important; }

area { min-height: var(--space-lg) !important; }

math { min-height: var(--space-lg) !important; }

svg { min-height: var(--space-lg) !important; vertical-align: middle; }

table { min-height: var(--space-lg) !important; border-collapse: separate; border-spacing: 0 var(--space-xs); box-sizing: border-box; border-radius: var(--radius-default); background: var(--background-30); }

caption { min-height: var(--space-lg) !important; }

colgroup { min-height: var(--space-lg) !important; }

col { min-height: var(--space-lg) !important; }

tbody { min-height: var(--space-lg) !important; }

thead { min-height: var(--space-lg) !important; }

tfoot { min-height: var(--space-lg) !important; }

tr { min-height: var(--space-lg) !important; }

td { min-height: var(--space-lg) !important; }

th { min-height: var(--space-lg) !important; background: transparent; font-weight: var(--font-weight-semibold); color: var(--text-primary); font-size: var(--font-size-default); letter-spacing: var(--letter-spacing-xl); text-transform: uppercase; white-space: nowrap; z-index: 10; }

form { min-height: var(--space-lg) !important; gap: var(--space-lg); }

label { text-wrap: nowrap; white-space: normal; font-weight: var(--font-weight-medium) !important; color: var(--text-primary); margin-bottom: 0; text-align: left; text-transform: uppercase; letter-spacing: var(--letter-spacing-sm); text-decoration: underline; }

input { min-height: var(--space-lg) !important; max-height: var(--space-lg) !important; flex-shrink: 1; min-width: 3ch; background-color: var(--background-base) !important; color: var(--text-primary) !important; box-shadow: 0 0 0 1000px var(--background-base) inset !important; -webkit-box-shadow: 0 0 0 1000px var(--background-base) inset !important; -webkit-text-fill-color: var(--text-primary) !important; text-decoration-line: underline !important; text-decoration-style: var(--border-style-default) !important; text-decoration-color: rgba(var(--border-rgb), var(--opacity-3xl)) !important; text-decoration-thickness: var(--border-width) !important; font-weight: var(--font-weight-bold) !important; }

[has-text]:focus-within::after, action-item[data-state~="has-edit-control"] [has-text]::after, action-item[data-state~="dblclick-edit-active"] > span::after, action-item:has(input:focus, textarea:focus) > span::after { content: "\21A9"; pointer-events: none; font-size: var(--font-size-default); color: var(--text-primary); }

button { min-height: var(--space-lg) !important; }

select { min-height: var(--space-lg) !important; width: 100%; font-size: var(--font-size-default); background: none; border-radius: 0; appearance: none; color: var(--text-primary); }

datalist { min-height: var(--space-lg) !important; }

optgroup { min-height: var(--space-lg) !important; }

option { min-height: var(--space-lg) !important; }

textarea { min-height: var(--space-lg) !important; align-items: flex-start; height: auto; }

output { min-height: var(--space-lg) !important; }

progress { min-height: var(--space-lg) !important; }

meter { min-height: var(--space-lg) !important; }

fieldset { min-height: var(--space-lg) !important; }

legend { min-height: var(--space-lg) !important; }

details { min-height: var(--space-lg) !important; }

summary { min-height: var(--space-lg) !important; }

dialog { min-height: var(--space-lg) !important; }

script { min-height: var(--space-lg) !important; }

noscript { min-height: var(--space-lg) !important; }

template { min-height: var(--space-lg) !important; }

slot { min-height: var(--space-lg) !important; }

canvas { min-height: var(--space-lg) !important; display: block; width: 100%; height: 100%; border-radius: var(--radius-default); }

g { min-height: var(--space-lg) !important; }

path { min-height: var(--space-lg) !important; }

rect { min-height: var(--space-lg) !important; }

circle { min-height: var(--space-lg) !important; }

ellipse { min-height: var(--space-lg) !important; }

line { min-height: var(--space-lg) !important; }

polyline { min-height: var(--space-lg) !important; }

polygon { min-height: var(--space-lg) !important; }

text { min-height: var(--space-lg) !important; }

tspan { min-height: var(--space-lg) !important; }

defs { min-height: var(--space-lg) !important; }

use { min-height: var(--space-lg) !important; }

symbol { min-height: var(--space-lg) !important; }

linearGradient { min-height: var(--space-lg) !important; }

radialGradient { min-height: var(--space-lg) !important; }

stop { min-height: var(--space-lg) !important; }

clipPath { min-height: var(--space-lg) !important; }

mask { min-height: var(--space-lg) !important; }

pattern { min-height: var(--space-lg) !important; }

filter { min-height: var(--space-lg) !important; }

foreignObject { min-height: var(--space-lg) !important; }



/* ============================================================================
 * SECTION 6: custom tags (canonical chain)
 * ============================================================================ */

/* ============================================================================
 * APP LAYOUT
 *
 * app-* tags do not use [fill]; display and width come from here and [flex]/[column]/[spread] on app-layout.
 * app-main width: see MAIN COLUMN below.
 * ============================================================================ */
app-layout { margin-bottom: var(--space-2xl); }

app-utility { min-width: 0; flex: 0 1 auto; box-sizing: border-box; align-items: center; }

panel { width: var(--space-4xl); position: relative; }
/* Edge-snapping: data-edge is set by menu-utils.positionMenu() based on the trigger's nearest viewport corner. */
panel[data-edge="top-left"]     { position: fixed; top: 0; left: 0; right: auto; bottom: auto; z-index: 10000; }
panel[data-edge="top-right"]    { position: fixed; top: 0; right: 0; left: auto; bottom: auto; z-index: 10000; }
panel[data-edge="bottom-left"]  { position: fixed; bottom: 0; left: 0; top: auto; right: auto; z-index: 10000; }
panel[data-edge="bottom-right"] { position: fixed; bottom: 0; right: 0; top: auto; left: auto; z-index: 10000; }

/* ============================================================================
/* ============================================================================
 * ACTION BUTTON — Universal Base (tag only)
 * ============================================================================ */
action-item { border-radius: var(--radius-default); border-width: var(--border-width); border-style: var(--border-style-default); border-color: var(--background-base); padding: var(--space-sm) var(--padding-default); background: var(--background-20); cursor: pointer !important; min-height: var(--space-xl); place-items: center; justify-content: center; }

/* ============================================================================
 * (end universal-descendant rules)
 * ============================================================================ */
action-item:disabled { opacity: var(--opacity-md); background: var(--background-20); border-width: var(--border-width); border-style: var(--border-style-default); border-color: rgba(var(--border-rgb), var(--opacity-3xl)); color: var(--text-primary); }



/* ============================================================================
 * SECTION 7: everything else
 * ============================================================================ */

/* ============================================================================
 EXPLICIT DARK THEME (overrides auto)
 ============================================================================
 Applied when the HTML element has data-theme="dark" set (manual toggle).
 This block overrides BOTH the :root defaults AND the auto dark media query,
 ensuring user-chosen theme takes priority over OS preference. */
[data-theme="dark"] { /* Opacity — dark theme series (mid=0.25, proportional) */ --opacity-sm: var(--opacity-sm-dark); --opacity-md: var(--opacity-md-dark); --opacity-lg: var(--opacity-lg-dark); --opacity-xl: var(--opacity-xl-dark); --opacity-2xl: var(--opacity-2xl-dark); --opacity-3xl: var(--opacity-3xl-dark); /* Primary text RGB set to white for dark backgrounds */ --border-rgb: 255, 255, 255; --background-inverse-rgb: 255, 255, 255; --background-base-rgb: 0, 0, 0; /* Backgrounds — identical to auto-dark */ --background-base: #000000; --background-primary-rgb: 0, 0, 0; --background-10: #1a1a1a; --background-20: #333333; --background-30: #4d4d4d; /* Borders — root :root (50% opacity of --text-primary-rgb) */ /* Text colors — white hierarchy on dark backgrounds */ --text-primary: #ffffff; /* Primary text — pure white */ --text-inverse: #000000; /* Inverse text — black for light surfaces */ --text-inverse-rgb: 0, 0, 0; /* RGB triplet for inverse text */ /* Inverse element colors — black in explicit dark (for element styling, NOT text) */ --color-inverse: #000000; /* Inverse element color */ /* Background inverse — white in dark theme (opposite of page background) */ --background-inverse: #ffffff; }

/* ============================================================================
 EXPLICIT LIGHT THEME (overrides auto)
 ============================================================================
 Applied when the HTML element has data-theme="light" set (manual toggle).
 Forces light-theme values regardless of OS dark-mode preference.
 Mirrors :root defaults but is stated explicitly so it wins in specificity. */
[data-theme="light"] { /* Opacity — light theme series (mid=0.50) */ --opacity-sm: var(--opacity-sm-light); --opacity-md: var(--opacity-md-light); --opacity-lg: var(--opacity-lg-light); --opacity-xl: var(--opacity-xl-light); --opacity-2xl: var(--opacity-2xl-light); --opacity-3xl: var(--opacity-3xl-light); /* Primary text RGB set to black for light backgrounds */ --border-rgb: 0, 0, 0; --background-inverse-rgb: 0, 0, 0; --background-base-rgb: 250, 250, 250; /* Backgrounds — off-white base (#fafafa) so the lightest surface is slightly darker than pure white */ --background-base: #fafafa; --background-primary-rgb: 250, 250, 250; --background-10: #e6e6e6; --background-20: #bbbbbb; --background-30: #b3b3b3; /* Borders — root :root (50% opacity of --text-primary-rgb) */ /* Text — black hierarchy on light backgrounds */ --text-primary: #000000; /* Primary text — black */ --text-inverse: #ffffff; /* Inverse text — white for dark surfaces */ --text-inverse-rgb: 255, 255, 255; /* RGB triplet for inverse text */ /* Inverse element colors — black for light-theme elements */ --color-inverse: #000000; /* Inverse element color */ /* Background inverse — black in light theme (opposite of white page background) */ --background-inverse: #000000; --background-overlay: rgba(250, 250, 250, var(--opacity-xl)); }

/* Legal text styling with Trust font */
[data-id="legal"] { font-family: var(--font-family-legal); }

/* ============================================================================
 * NATIVE HTML ELEMENTS (tags) — single reference block
 *
 * Standard tag selectors (`html`, `body`, `p`, `a`, `table`, `form`, …).
 * Edit native typography and shell tags here.
 * ============================================================================ */

[underline] { text-decoration-line: underline; }

[nowrap] { text-wrap: nowrap !important; white-space: nowrap !important; flex-wrap: nowrap !important; overflow: auto; }

/* Form / option labels — not section headings.
 TODO(js): set [data-id="form-label"] on <label for=…>, [option-toggle], [option-select]
 elements at render time (shared-components.js / unified-setting-components.js)
 to replace the former compound `label[for]` / `label[option-*]` selectors. */
[data-id="form-label"] { font-weight: var(--font-weight-default) !important; text-transform: none; letter-spacing: normal; text-decoration: none; }

/* TODO(js): set [data-id="fill-input"] on <input> children of any [fill] container
 at render / state-sync time to replace the former `[fill] > input` child-combinator
 selector. */
[data-id="fill-input"] { width: 100%; flex: 1 1 auto; }

input:-moz-ui-invalid { box-shadow: none; outline: none; }

input:-webkit-autofill { background-color: var(--background-base) !important; color: var(--text-primary) !important; box-shadow: 0 0 0 1000px var(--background-base) inset !important; -webkit-box-shadow: 0 0 0 1000px var(--background-base) inset !important; -webkit-text-fill-color: var(--text-primary) !important; text-decoration-line: underline !important; text-decoration-style: var(--border-style-default) !important; text-decoration-color: rgba(var(--border-rgb), var(--opacity-3xl)) !important; text-decoration-thickness: var(--border-width) !important; }

input:-webkit-autofill:hover { background-color: var(--background-base) !important; color: var(--text-primary) !important; box-shadow: 0 0 0 1000px var(--background-base) inset !important; -webkit-box-shadow: 0 0 0 1000px var(--background-base) inset !important; -webkit-text-fill-color: var(--text-primary) !important; text-decoration-line: underline !important; text-decoration-style: var(--border-style-default) !important; text-decoration-color: rgba(var(--border-rgb), var(--opacity-3xl)) !important; text-decoration-thickness: var(--border-width) !important; }

input:-webkit-autofill:focus { background-color: var(--background-base) !important; color: var(--text-primary) !important; box-shadow: 0 0 0 1000px var(--background-base) inset !important; -webkit-box-shadow: 0 0 0 1000px var(--background-base) inset !important; -webkit-text-fill-color: var(--text-primary) !important; text-decoration-line: underline !important; text-decoration-style: var(--border-style-default) !important; text-decoration-color: rgba(var(--border-rgb), var(--opacity-3xl)) !important; text-decoration-thickness: var(--border-width) !important; }

{ display: grid; grid-template-columns: repeat(4, 1fr); }

/* Full-width rule between header and feature rows inside a pricing card (action-item row). */
[data-id="divider"] { min-height: 0; margin-top: var(--space-sm); margin-bottom: var(--space-sm); border-top-width: var(--border-width-md); border-top-style: solid; border-top-color: var(--border-default); }

/* Inline dash between language links in the directory's international row. Short, vertically centered, no row break. */
hr[data-id="lang-divider"] { width: 1em; margin: 0; padding: 0; border: none; border-top: var(--border-width-md) solid var(--border-default); align-self: center; flex-shrink: 0; }

{ flex-direction: column; background: unset; border-width: unset; border-style: unset; border-color: unset; padding: unset; }

[bare]:hover { border-width: unset !important; border-style: unset !important; border-color: unset !important; padding: unset !important; min-height: unset !important; box-shadow: unset !important; -webkit-box-shadow: unset !important; }

[data-state~="today"] { cursor: default !important; font-weight: var(--font-weight-semibold); }

/* All action-items when selected show solid border + background (matches radio/checkbox selected).
 * !important defeats [bare] *'s `background: unset !important` reset so accordion transaction
 * rows (bare action-items inside a bare action-group) actually paint when selected. */
[data-state~="selected"] { background: var(--accent-color) !important; }

/* ============================================================================
 * TOGGLE MODULE (group-control + group-item pattern)
 * 
 * Toggle switches with info text, used for on/off settings.
 * ============================================================================ */
{ max-width: 100%; padding: var(--space-xs); }

[data-state~="status"] { color: var(--text-primary); }

[data-state~="status"] { color: var(--text-primary); }

/* ============================================================================
 * UNIVERSAL GROUP-ITEM SYSTEM
 * 
 * Similar to group-control, but for individual items INSIDE groups.
 * Used for notifications, sessions, form fields, checkboxes, etc.
 *
 * Components:
 * <group-item> — base item
 * <group-item data-ui="form"> — vertical layout (label above input)
 * <group-item data-ui="danger"> — danger zone styling
 * <[item-info]> — content area (title + description)
 * <[item-title]> — primary text
 * <[item-description]> — secondary text
 *
 * Replaces: notification-item, session-item, danger-item,
 * checkbox-item, [form-field]
 * ============================================================================ */
[data-id="provider"]:hover { border-width: var(--border-width); border-style: var(--border-style-strong); border-color: rgba(var(--border-rgb), var(--opacity-3xl)); }

/* --- Base Group Item ---
 * Horizontal layout: content on left, action on right. Use [grid] + [gap] on each group-item in markup. */
{ align-items: stretch; justify-content: flex-start; }

action-item * { cursor: pointer !important; }

/* ============================================================================
 * UNIVERSAL-DESCENDANT RULES — single selector + trailing ` *`
 * ============================================================================ */
[crosshair], [crosshair] * { cursor: crosshair; }

[pointer], [pointer] * { cursor: pointer; }

[data-auth="secret"]:hover { z-index: var(--z-xl) !important; }

[primary] * { color: var(--text-inverse) !important; }

/* Inverse primary —  only */
{ color: var(--text-inverse) !important; background: var(--background-inverse); }

/* Accent fill primary (Save / Today solid) */
{ background: var(--background-inverse) !important; color: var(--text-inverse) !important; }

{ background: var(--color-negative); border-width: var(--border-width); border-style: var(--border-style-default); border-color: rgba(var(--border-rgb), var(--opacity-3xl)); color: var(--text-inverse); }

content-body { flex: 1; padding: var(--space-xl); }

content-footer { margin-top: var(--space-xl); padding-top: var(--space-xl); }

/* ============================================================================
 * TEXT ON INVERSE (ELEMENT) BACKGROUNDS
 * When an element uses inverse theme color as background (e[g]. gray buttons),
 * Elements with inverse backgrounds use standard text-primary.
 * ============================================================================ */
{ color: var(--text-primary); }

/* Checked — attributes toggled in JS; one attribute name per rule (beats nested theme specificity) */
{ background: var(--accent-color) !important; cursor: default; }

{ left: calc(100% - var(--space-lg) - var(--space-sm)) !important; background: var(--background-base) !important; box-shadow: var(--shadow-sm); }

/* ============================================================================
 * HERO VISUAL — Dashboard Preview Mockup
 *
 * A miniature representation of the app dashboard shown below the hero text.
 * Contains header dots, sidebar with items, and content cards with chart bars.
 * ============================================================================ */
hero-visual { justify-content: center; align-items: center; }

[data-id="footer-settings"] { align-items: center; }

/* section: same layout as (pricing) — gap between controls and cards */
[data-id="badge"] { padding: 0 var(--space-md); text-transform: uppercase; letter-spacing: var(--letter-spacing-xl); background: var(--accent-color); color: var(--text-inverse); border-radius: var(--radius-default); }

comment-send-btn { align-items: center; justify-content: center; gap: var(--gap); padding: var(--space-md) var(--space-lg); background: var(--background-20); border-radius: var(--radius-default); cursor: pointer; font-size: var(--font-size-default); color: var(--text-primary); font-family: var(--font-family-default); height: var(--space-lg); }

[data-state~="hidden"] { display: none !important; }

/* [data-state~="invisible"] is the opacity-only sibling of "hidden". Use it
   when an element must visually disappear but keep its layout box (so anchors
   for positioning, sibling spacing, and tab order stay stable). Click/tap is
   blocked so the invisible element doesn't intercept input. Pair: when the
   panel opens we hide its trigger with "invisible" so panel edge-snap can
   still measure the trigger's bounding rect. */
[data-state~="invisible"] { opacity: 0 !important; pointer-events: none !important; }

/* Notification-style "No transactions found" action-item that lives inside
   <action-group data-id="category-summary"> as a sibling of the category
   action-item. When the user clicks a category with no calendar days selected,
   calendar.js adds [notify] briefly — the action-item fades in over the
   category summary, holds, then fades back out when the timer clears [notify].
   No [hidden] toggling: that would set display:none and skip the fade-out. */
action-group[data-id="category-summary"] { position: relative; }
action-item[data-id="transaction-empty"] { position: absolute; opacity: 0; pointer-events: none; transition: opacity 250ms ease-in-out; z-index: var(--z-xl); }
action-item[data-id="transaction-empty"][data-state~="notify"] { opacity: 1; }

/* Day activity marker leaf (p[data-id="events"]) */
[data-id="events"] { position: static; display: block; text-align: center; margin-top: var(--space-xs); min-height: var(--space-md); font-size: var(--font-size-default); letter-spacing: var(--letter-spacing-sm); color: var(--text-primary); }

/* ============================================================================
 DRAG STATE STYLING
 When the user is drag-selecting a range of days, the body gets
 a [data-state~="calendar-dragging"] class to modify cursor and transition behaviors.
 ============================================================================ */
[data-state~="calendar-dragging"] { user-select: none; cursor: crosshair; }

[data-state~="other-month"] { opacity: var(--opacity-xl); }

/* ---- 1. DISABLED STATE (Highest Priority) ----
 Completely overrides all other states with !important.
 Gray background, muted text, strikethrough, and not-allowed cursor. */
[data-state~="disabled"] { background: var(--background-20) !important; color: var(--text-primary) !important; cursor: not-allowed !important; text-decoration: line-through; }

/* ---- Table Content ----
 Container for all data rows, allows horizontal scrolling if needed */
table-content { width: 100%; min-width: 100%; overflow-x: auto; }

[[sync-stats]] { margin-bottom: var(--space-xl); }

[[stat-item]] { justify-content: space-between; align-items: center; padding: var(--space-md); background: var(--background-20); border-radius: var(--radius-default); }

/* ============================================================================
 * SETTINGS DROPDOWN
 *
 * Shared panel structure lives in main[css] (same as user menu).
 * Layout uses [flex] / [column] on markup.
 * ============================================================================ */
::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: transparent; border-radius: var(--radius-default); transition: background 200ms ease; }

html.is-scrolling ::-webkit-scrollbar-track, :hover::-webkit-scrollbar-track { background: var(--background-20); }

html.is-scrolling ::-webkit-scrollbar-thumb, :hover::-webkit-scrollbar-thumb { background: var(--background-inverse); }

html.is-scrolling * { scrollbar-color: var(--background-inverse) var(--background-20); }

/* ============================================================================
 * ADVANCED COLOR PALETTE — Preview + Saturation/Lightness Picker
 * ============================================================================ */
{ height: auto; }

[data-id="setting-dragging"] { z-index: 1000; transform: none !important; background: rgba(var(--background-base-rgb), var(--opacity-xl)); border-radius: var(--radius-default); }

[data-id="boundary-hidden"] { visibility: hidden; }

[[drop-indicator]] { height: var(--space-xs) !important; background: var(--accent-color) !important; margin: var(--space-sm) 0 !important; border-radius: var(--radius-default) !important; opacity: var(--opacity-near-default) !important; box-shadow: 0 0 var(--space-sm) var(--accent-color); }

/* ============================================================================
 * THEME & LANGUAGE SELECTOR GROUPS
 * ============================================================================ */
{ background: var(--background-20); border-radius: var(--radius-default); }

[[theme-label]] { min-width: 0; white-space: nowrap; color: var(--text-primary) !important; }

/* [data-id="preview-body"]: add flex in HTML ([theme-preview]) */
[data-id="preview-body"] { flex: 1; min-height: 0; }

[data-id="preview-split"] { flex-direction: row; width: 100%; height: 100%; min-width: 0; }

/* Context menu uses group-control > group-item > action-group > action-item (action group setup).
 action-item needs row layout for icon + text. */
[data-id="context-menu"] { padding: 0; }

/* ============================================================================
 * RESTORE DEFAULTS BUTTON — Empty Panel State
 *
 * Shown when all settings have been removed from the dropdown.
 * Provides a button to restore default settings.
 * ============================================================================ */
[[restore-defaults-button]] { padding: var(--space-xl); text-align: center; min-height: var(--space-3xl); }

/* ============================================================================
 FORM FIELDS
 Input fields for text, email, etc. within settings sections.
 Base layout comes from main[css] as universal group-item.
 ============================================================================ */
{ max-width: 100%; }

/* ============================================================================
 AVATAR UPLOAD
 User profile picture controls with preview, upload, and remove buttons.
 ============================================================================ */
{ max-width: 100%; }

/* ============================================================================
 SESSION LIST
 Shows active login sessions with device info and "End Session" buttons.
 ============================================================================ */
{ max-width: 100%; }

/* ============================================================================
 DANGER ZONE
 Section for destructive actions like "Delete Account" or "Reset Data".
 Uses red-tinted styling to signal caution.
 ============================================================================ */
{ max-width: 100%; }

/* ============================================================================
 NOTIFICATION LIST
 Settings for managing notification preferences.
 Uses the same group design structure as other settings components.
 ============================================================================ */
{ padding: var(--space-xs); }

/* ============================================================================
 CHECKBOX LISTS
 Multi-select checkboxes for feature toggles, preferences, etc.
 Base layout comes from main[css] as universal group-item.
 ============================================================================ */
{ max-width: 100%; }

/* File input (visually hidden) and drop zone */
{ position: absolute !important; width: var(--space-2xs) !important; height: var(--space-2xs) !important; padding: 0 !important; margin: calc(-1 * var(--space-2xs)) !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }

{ gap: var(--gap); width: 100%; }

[[table-row-dragging]] { user-select: none; }

[data-state~="marked-for-deletion"] { height: var(--space-xl); min-height: var(--space-xl); }

[data-state~="pending-delete"] { background: rgba(var(--color-negative-rgb), var(--opacity-xl)) !important; }

[data-state~="marked-empty"] { opacity: var(--opacity-xl); }

[data-state~="new"] { animation: slideIn 0.3s ease-out; height: var(--space-xl); min-height: var(--space-xl); }

[amount-input]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

[amount-input]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

[editing-date-input]::-webkit-datetime-edit { padding: 0; margin: 0; }

[editing-date-input]::-webkit-datetime-edit-fields-wrapper { padding: 0; margin: 0; }

[editing-date-input]::-webkit-datetime-edit-text { padding: 0; margin: 0; }

[editing-date-input]::-webkit-datetime-edit-month-field { padding: 0; margin: 0; }

[editing-date-input]::-webkit-datetime-edit-day-field { padding: 0; margin: 0; }

[editing-date-input]::-webkit-datetime-edit-year-field { padding: 0; margin: 0; }

[editing-date-input]::-webkit-calendar-picker-indicator { height: 1em; width: 1em; margin: 0; padding: 0; }

/* screenshot-capture.js — overlay is click-through while sampling elementFromPoint */
{ pointer-events: none; }

/* settings-page.js — settings-group label during active grab */
[data-state~="grabbing"] { cursor: grabbing; }

/* settings-page.js — settings group is dimmed while being dragged */
[data-state~="dragging"] { opacity: var(--opacity-xl); }

/* settings-page.js — boundary dividers hidden until drag activates them.
 [data-id="boundary"] is already used only on <hr> divider elements,
 so a single-attribute selector is equivalent. Same for [drag-available]. */
[data-id="boundary"] { visibility: hidden; }

/* [data-state~="exit"] used only on [toast-notification]; single-attribute form. */
[data-state~="exit"] { animation-name: slideOut; animation-duration: 0.3s; animation-timing-function: ease; }

/* sync-status-indicator.js — subtle fade once sync settles to 'synced'.
 [data-state~="faded"] is unique to the indicator; single-attribute form. */
[data-state~="faded"] { opacity: var(--opacity-xl); }

/* sync-status-indicator.js — success / error color flash.
 TODO(js): set [data-state~="flash-success"] / [data-state~="flash-error"] on the indicator. */
[data-state~="flash-success"] {  }

[data-state~="flash-error"] {  }



/* ============================================================================
 * UNCATEGORIZED (preserved verbatim)
 * ============================================================================ */

/* :root applies variables globally to every element in the document.
 These are the default (light theme) values used when no explicit theme is set
 and the user's OS is NOT in dark mode. */
/* ---------- fonts[css] ---------- */
/**
 * Custom Font Definitions
 * Specter - Main text font
 * Gear - Monetary values with slashed zero
 * Trust - Legal text font
 */
/* Balance monetary values - colored based on value */
/* All monetary values: $ and numbers use text-primary; only + and - signs get green/red */
/* Delta monetary values - with colored + or - indicators */
/* Legacy: full elements use text-primary; symbol-only coloring above handles +/-, $ */
/* ---------- main[css] ---------- */
/* ============================================================================
 * MAIN[CSS] — Global Design System & Base Styles
 *
 * All CSS variables live in tokens[css] (vars-only). This file contains
 * resets, typography, layout primitives, interactive component patterns,
 * and responsive breakpoints used site-wide.
 * ============================================================================ */
/* Light-theme `table` / `th` tint: nested under `[data-theme="light"]` above (selector policy). */
/* ---------- end native HTML elements ---------- */
/* Shell / heading centering: single-tag or single-hook rules only (site-css-selector-policy). */
/* Width and height on app-* tags are set in markup via the [width-Nxl] / [width-full]
 and [height-Nxl] / [height-full] hierarchies (see above). app-header uses [width-full];
 app-utility uses [stretch] (width-full CSS rule deleted 2026-05-04); app-footer + app-main
 use [width-6xl] (welcome → [width-5xl]). app-header carries [height-lg]. */
/* ============================================================================
 * SCREENSHOT / PANEL ACTIONS
 * Actions group with a fixed position, used in the settings dropdown.
 * ============================================================================ */
/* ============================================================================
 * INPUT COMPONENT SYSTEM
 * 
 * Styling for all form input types:
 * [input-text] — text/email/password fields
 * [input-number] — number input fields
 * [input-date] — date input fields
 * select — native <select> dropdowns
 * [option-color-picker] — color palette container
 * [option-toggle] — individual hue color options
 *
 * Uses a thick transparent border by default so that hover/focus border
 * changes don't cause layout shift.
 * ============================================================================ */
/* ============================================================================
 * OPTION COMPONENT SYSTEM
 * 
 * A unified styling system for all option/choice UI elements:
 * [option-select] — horizontal selection (number notation, etc.)
 * [option-theme] — theme cards with preview
 * [option-toggle] — toggle/switch labels (show/hide, etc.)
 * [option-color] — color picker circles
 * [option-category] — sidebar financial categories
 * [option-menu] — user menu dropdown items
 * [option-nav] — settings navigation links
 * [hue-option] — color from data-hue, fills action-item (no borders or other styling)
 *
 * All options start with a transparent border (prevents layout shift on hover)
 * and share common padding, font, and gap settings.
 * ============================================================================ */
/* ============================================================================
 * INTERACTIVE HOVER BACKGROUNDS
 * 
 * A comprehensive list of all hoverable elements, split by theme.
 * On hover, a semi-transparent tint is applied as a background.
 * Light theme uses black tint; dark theme uses white tint.
 * ============================================================================ */
/* ============================================================================
 * CONTAINER HOVER — OPTION DASHED BORDERS
 * 
 * When hovering a group-control container, all non-selected (unchecked)
 * options inside get a subtle dashed border. This signals interactivity
 * without requiring direct hover on each option.
 * ============================================================================ */
/* ============================================================================
 * DIRECT OPTION HOVER — DASHED THEME BORDER
 * 
 * When hovering a single unchecked option directly, the dashed border
 * becomes full-opacity (stronger than the container hover above).
 * ============================================================================ */
/* ============================================================================
 * SELECTED OPTION HOVER PREVENTION
 * 
 * Already-selected (checked) options should NOT change appearance on hover.
 * They retain their active/selected visual state and use a default cursor.
 * ============================================================================ */
/* ============================================================================
 * GROUP-CONTROL — Universal Container
 * 
 * Layout via [flex] + [gap] (group-control wraps by default) or [col-2]…[col-6] (grid); column stacks use [column].
 * Box styling (padding, radius, background) lives in contextual rules or on children where needed.
 * ============================================================================ */
/* ============================================================================
 * FORM FIELDS & LABELS — Sleep/Wake Pattern
 * 
 * Form fields and their labels start at 50% opacity ("sleeping").
 * They brighten to 100% only when the specific input inside is
 * hovered or focused — not when the whole section is hovered.
 * ============================================================================ */
/* Page-specific sidebar targeting examples:
 section[data-id="role"][data-name="sidebar"] [data-id="sidebar"] { ... }
 section[data-id="role"][data-name="sidebar"] [data-id="sidebar"] { ... }
 */
/* ============================================================================
 * SIDEBAR FINANCIAL COMPONENT
 * 
 * The financial categories accordion in the sidebar.
 * Lists income/expense categories with expandable transaction details.
 * ============================================================================ */
/* ============================================================================
 * SCREENSHOT SECTION
 * Visually separated from settings with a top border.
 * ============================================================================ */
/* ============================================================================
 * USAGE CREDIT HINT
 * 
 * A tiny monetary display that's normally invisible (opacity: 0).
 * Only becomes partially visible (0.4 opacity) on right-click of
 * the user-usage label — a hidden feature / easter egg.
 * ============================================================================ */
/* ============================================================================
 * SIDEBAR CATEGORY DETAILS — Expanded Transaction List
 * ============================================================================ */
/* ============================================================================
 * MONETARY SYMBOL-ONLY COLORING
 * Only the $ and +/- get color; numbers use --text-primary.
 * [monetary-symbol] and [amount-symbol] are colored by fonts[css].
 * ============================================================================ */
/* ============================================================================
 * MONETARY DELTA SIGN COLORS
 * 
 * Delta values (changes) in expense categories use:
 * + sign = green (positive change)
 * - sign = red (negative change)
 * The number itself stays primary text color.
 * ============================================================================ */
/* Delta signs rendered by JS */
/* Delta styling: single-element selectors (covered by [monetary-delta] above). */
/* ============================================================================
 * UNSUPPORTED VIEWPORT OVERLAY
 * 
 * Shown when the browser window is below the minimum supported size
 * (430×616px). Covers the entire screen with a grey overlay and message.
 * ============================================================================ */
/* Prevent hover styling when select is already focused
 (keeps the focus ring stable during mouse movement) */
/* [unified-daily-balance-toggle] now contains standard group-control structure;
 styling inherited from main[css] and footer[css] radio-toggle rules */
/* ============================================================================
 ACCESSIBILITY: REDUCED MOTION
 Removes all CSS transitions for users who have enabled
 "reduce motion" in their OS accessibility settings.
 Applied to all children (*) of every unified component.
 ============================================================================ */
/* ---------- landing[css] ---------- */
/* ============================================================================
 * LANDING[CSS] — Landing Page, Pricing, Social Feed, and Link Modal Styles
 *
 * This file contains the complete implementation for:
 * 1. Landing page layout (hero, features, solutions, pricing, CTA)
 * 2. Dashboard preview mockup
 * 3. Secondary button variant
 * 4. Section layout utilities
 * 5. Social feed (composer, posts, comments)
 * 6. Link modal
 * 7. Responsive breakpoints and dark mode overrides
 * ============================================================================ */
/* ============================================================================
 * HERO ACTIONS — Capture/Send Style Buttons
 *
 * A row of action labels that follow the container hover pattern:
 * on container hover, non-hovered buttons get dashed borders.
 * ============================================================================ */
/* ============================================================================
 * PRICING CARD — Secondary Button Hover on Card Hover
 *
 * When hovering a pricing card, its secondary buttons get dashed borders
 * (container hover pattern).
 * ============================================================================ */
/* ============================================================================
 * PRICING SECTION
 *
 * 4-column grid of pricing cards with features, badges, and action buttons.
 * ============================================================================ */
/* ============================================================================
 * LANDING PAGE CONTENT SPACING
 * ============================================================================ */
/* ============================================================================
 * CTA (CALL TO ACTION) SECTION
 *
 * A centered section with a large title, description, and action button.
 * Uses secondary background for visual distinction.
 * ============================================================================ */
/* ============================================================================
 * NAVIGATION LINKS (Landing Page Variant)
 *
 * Inline navigation links used on the landing page.
 * ============================================================================ */
/* ============================================================================
 * DARK MODE OVERRIDES — [data-id="color-scheme"][data-value="dark"]
 *
 * Ensures cards use correct dark theme variables.
 * ============================================================================ */
/* ============================================================================
 * SOCIAL FEED STYLES
 *
 * A social media feed with a post composer, feed posts, comments, and
 * interactive post actions (like, comment, share).
 * ============================================================================ */
/* ============================================================================
 * FEED SECTION — Container
 * ============================================================================ */
/* ============================================================================
 * FEED PAGE CONTENT
 * ============================================================================ */
/* ---------- calendar[css] ---------- */
/* ============================================================================
 Finance Calendar Component Styles - Complete Implementation
 
 This stylesheet controls the entire finance calendar UI, including:
 - Calendar grid layout (month view with 7-column [day] grid)
 - Day cell rendering, selection, and drag interactions
 - Financial accordion sidebar (category toggles for income/expenses/etc.)
 - Table view for transaction lists
 - Starting balance input section
 - Transaction modal dialog
 - Responsive breakpoints for mobile/tablet/desktop
 - Accessibility: high contrast, reduced motion, print styles
 - Dark/light theme support via data-theme attributes and media queries
 ============================================================================ */
/* ============================================================================
 1. COMPONENT BASE STYLES
 The root group-control acts as the outermost
 container for the calendar and table views. Clean base without border or shadow.
 ============================================================================ */
/* ============================================================================
 2. SECTION STYLES - Calendar Header & Body
 Uses the Settings Design System patterns for consistent look.
 ============================================================================ */
/* ============================================================================
 3. ELEMENT STYLES - Navigation, Controls, Grid
 ============================================================================ */
/* ---- Navigation Title ----
 Displays the current month and year (e[g]., "February 2026").
 Inherits global [nav-title] standard but adds min-width to
 prevent layout shift when month names vary in length */
/* ---- Table Button Hover Popup ----
 Same structure as user/settings: injected at body level, positioned via MenuSystem (top/left by JS).
 No CSS positioning — uses default panel flow. */
/* ============================================================================
 STATE PRECEDENCE HIERARCHY (Highest to Lowest Priority)
 
 This section defines overlapping visual states with clear priority:
 1. Disabled (highest) - grayed out, cursor: not-allowed
 2. Selected (stick bar) - accent color indicator bar
 3. Active/Focus - box-shadow ring
 4. Today indicator - orange/warning border
 ============================================================================ */
/* ---- 2. STICK SELECTION STATES ----
 Stick bar disabled per user preference. */
/* ---- Range Selection Visual Feedback ----
 Days within a drag-selection range (but not yet confirmed as selected)
 get a faint accent-colored border to preview the selection */
/* ---- Hover Effects ----
 Non-selected, non-disabled days lift slightly upward on hover */
/* Selected days on hover: blend accent color with background
 for a subtle highlight, plus the same upward lift */
/* Other-month days on hover: tertiary background (slightly darker than default),
 with a visible border and upward lift */
/* ---- Accordion Title ----
 Small uppercase label above accordion groups (e[g]., "CATEGORIES") */
/* ---- Category Label ----
 Text label inside accordion option cards */
/* ---- Category Value ----
 Table category text in transaction rows. Sidebar totals use [notation-example] + monetary attrs, not [category-value]. */
/* ---- Accordion Toggle Icons: Removed ----
 Toggle chevron/arrow icons have been removed from the design */
/* ============================================================================
 RESPONSIVE DESIGN
 ============================================================================ */
/* ============================================================================
 ACCESSIBILITY: HIGH CONTRAST MODE
 For users who prefer high contrast, use solid black/white colors
 instead of semi-transparent accent colors.
 ============================================================================ */
/* ============================================================================
 EXPLICIT DARK THEME OVERRIDE (data-theme attribute)
 These override styles when the app explicitly sets [data-theme="dark"]
 on a parent element, regardless of the OS color scheme preference.
 ============================================================================ */
/* Dark/light theme calendar overrides moved to theme section at bottom of file */
/* ============================================================================
 TABLE VIEW STYLES
 Alternative view that shows transactions in a tabular format.
 Hidden by default; shown when user switches from calendar to table view.
 ============================================================================ */
/* Save buttons:  on the action-item (see calendar.js) */
/* ============================================================================
 INLINE EDITING STYLES
 When a table row enters edit mode, inputs replace static text.
 ============================================================================ */
/* ---------- footer[css] ---------- */
/* ============================================================================
 * FOOTER[CSS] — Page Footer, Utility Bar, Search, Settings Dropdown,
 * Auth Modal, Sync Status, Drag & Drop, and Context Menu
 *
 * This file contains the complete implementation for:
 * 1. Page footer (breadcrumb, directory links, fixed utility bar)
 * 2. Search button (expanding search bar)
 * 3. Settings button (circular with frosted glass)
 * 4. Settings dropdown panel (glassmorphism, theme/color pickers)
 * 5. Auth/Login modal
 * 6. Sync status indicator
 * 7. Drag-and-drop reordering for settings group controls
 * 8. Custom context menu
 * 9. Responsive, print, high-contrast, and reduced-motion overrides
 * ============================================================================ */
/* ============================================================================
 * PAGE FOOTER BASE
 *
 * app-footer has no CSS; width/centering live on container.
 * ============================================================================ */
/* ============================================================================
 * GLOBAL ICON STYLING (SVG & icon fonts)
 *
 * Base styles for icons inside icon elements.
 * Icons inherit color from their parent container (footer, header, etc.).
 * Icon fonts use color; SVG icons use fill + stroke.
 * ============================================================================ */
/* Light/dark SVG icon fills — moved to theme section at bottom of file */
/* ============================================================================
 * SETTINGS BUTTON — Opens the settings dropdown.
 * Uses <action-item data-settings> or action-item.
 * ============================================================================ */
/* ============================================================================
 * LEGACY AUTH MODAL ([auth-modal] class-based)
 *
 * Older class-based auth modal styling. Kept for backward compatibility.
 * ============================================================================ */
/* ============================================================================
 * SYNC STATUS INDICATOR (Global / Non-Utility)
 *
 * A small [badge] showing sync state (synced, pending, syncing, error, offline).
 * Used in various contexts outside the utility bar.
 * ============================================================================ */
/* ============================================================================
 * SYNC DETAILS MODAL
 *
 * A modal showing detailed sync information (last sync, pending changes, etc.).
 * ============================================================================ */
/* ============================================================================
 * COLOR PALETTE / PICKER
 * ============================================================================ */
/* [hue-options-container] kept for any legacy usage; primary layout uses action-group + action-item */
/* ============================================================================
 * THEME PREVIEW — Mini dashboard
 * ============================================================================ */
/* ============================================================================
 * SELECT OPTIONS (Custom Dropdown Items)
 * ============================================================================ */
/* ============================================================================
 * CUSTOM CONTEXT MENU
 *
 * A right-click context menu with frosted glassmorphism styling.
 * Contains clickable menu items and dividers.
 * ============================================================================ */
/* ============================================================================
 * REMOVE ALL BUTTON — Bottom of Panel
 *
 * A button to remove all settings groups from the dropdown.
 * ============================================================================ */
/* ---------- settings[css] ---------- */
/**
 * Settings Page Styles
 * 
 * This stylesheet controls the entire settings page UI, including:
 * - Settings sidebar navigation (section links, group labels, save indicators)
 * - Settings content area (sections, groups, form fields)
 * - Theme selector grid with live theme previews
 * - Color picker (advanced HSL picker with preview swatch)
 * - Radio toggle groups and checkbox lists
 * - Avatar upload controls
 * - Toggle switches with info text
 * - Keyboard shortcut visualizer and binding editor
 * - Danger zone styling for destructive actions
 * - Session management list
 * - Cross-panel drag-and-drop for reordering settings controls
 * - Responsive layout for mobile
 * 
 * Uses same layout structure as [home] page but with settings navigation and content.
 */
/* ---- Link Icon ----
 Icon element (emoji or SVG) displayed before the link text.
 Fixed 24px width to keep all link texts aligned. */
/* ---- Link Text ----
 The text label for each navigation link.
 Fills remaining space after the icon. Standard span per default-standard-html-tags. */
/* ============================================================================
 SETTINGS SECTION LAYOUT
 Section header on top, content below. Prevents row layout that causes
 overlapping text and broken admin Design System appearance.
 ============================================================================ */
/* ============================================================================
 THEME SELECTOR
 Grid layout showing theme options (Light, Dark, Auto) as visual cards.
 Each card contains a miniature preview of the app in that theme.
 ============================================================================ */
/* ============================================================================
 RADIO TOGGLE GROUPS
 Compact toggle buttons for binary or multi-option settings.
 Uses the same pattern as theme-selector (pill-shaped container).
 ============================================================================ */
/* ============================================================================
 ACTION BUTTONS
 Buttons for performing actions like "Export Data", "Clear Cache", etc.
 Inherit the default PRIMARY accent-colored style from main[css].
 ============================================================================ */
/* Danger hover: transparent background with dashed red border.
 This creates a "ghost" effect indicating the action is reversible. */
/* ============================================================================
 TOGGLE WITH INFO
 Toggle switch control accompanied by descriptive info text.
 Uses the same group design structure as other settings components.
 ============================================================================ */
/* Toggle switch: the actual on/off switch element.
 Matches the site-wide option toggle style. */
/* Override interactive hover effects in settings sections:
 removes border highlight and shadow that may conflict with the settings design */
/* ============================================================================
 KEYBOARD SHORTCUTS SECTION
 Visual keyboard layout and shortcut binding editor.
 Shows a miniature keyboard where keys can be assigned to actions.
 ============================================================================ */
/* ---- Key Width Variants ----
 Different keys have different widths based on standard keyboard layout.
 data-width multiplier scales the min-width accordingly. */
/* ============================================================================
 CROSS-PANEL DRAGGING
 Allows users to drag settings groups between panels to reorder them.
 Extends section heading labels (`group-control > label`) with drag-specific behaviors.
 ============================================================================ */
/* ---- Drop Target Divider ----
 When dragging over a panel, dividers highlight with accent color.
 Full rule lives in footer[css]; this ensures settings context gets accent color. */
/* ---------- welcome[css] ---------- */
/**
 * NEXTCENT onboarding / first-time sign-in experience
 * No loading overlay - show content directly on load
 *
 * This stylesheet covers:
 * - Onboarding page layout (full-width centered column)
 * - Hero section (title, subtitle, tagline)
 * - Multi-step form views inside content
 * - Illustration / icon stack
 * - Privacy assurance copy on step 1
 * - Step-by-step wizard (numbered steps with headers and content)
 * - Action buttons (next, back, skip)
 * - Reassurance items (trust signals below the card)
 * - Visually-hidden file input (for CSV/bank import)
 * - File drop zone (drag-and-drop upload area)
 * - Manual template download link
 * - Bank connection interface (option cards, selection states)
 * - Trustly interest form (waitlist / interest signup)
 * - File upload area toggle
 */
/* ============================================================================
 CARD DESCRIPTION — centered explanatory text inside the card
 ============================================================================ */
/* ---------- profile[css] ---------- */
/* ============================================================================
 * PROFILE & CONTENT STYLES
 * ============================================================================
 * Used on the Account page for Overview, Posts, Screenshots, Activity sections.
 * 
 * Follows the universal settings pattern:
 * group-control[data-id="setting"] > group-item
 * 
 * Content sections use group-control with
 * group-item for rich list items (posts, screenshots, etc.)
 * 
 * All values use design tokens from main[css]. No hardcoded colors or spacing.
 *
 * This stylesheet covers:
 * - Sidebar navigation count hints
 * - Profile card (avatar, name, email)
 * - Section headers with bulk actions
 * - Content list grid (posts, screenshots, activity)
 * - Content item hover/selection border states
 * - Row content layout (info, meta, actions)
 * - Two-step delete confirmation pattern
 * - Image preview pane for screenshots
 * - Post icon and activity dot indicators
 * - Empty state placeholder
 * - Show-more pagination button
 * - Responsive breakpoints for small screens
 * ============================================================================ */
/* ============================================================================
 * BULK ACTIONS — multi-select toolbar
 * ============================================================================
 * Hidden by default (display: none). Shown via data-visible="true" when
 * one or more content items are selected. Contains action buttons like
 * "Delete selected", "Export", etc. */
/* ============================================================================
 * CONTENT ITEM BORDER STATES — container-aware hover and selection
 * ============================================================================
 * The design system uses border-style transitions to signal interaction:
 * - Default: transparent/subtle border
 * - Container hover: all non-selected items show dashed borders
 * - Item hover: individual item gets accent-colored dashed border
 * - Selected: solid accent border
 * This multi-layer approach gives visual feedback at both list and item level. */
/* ============================================================================
 * DELETE BUTTON (Two-step delete confirmation pattern)
 * ============================================================================
 * Step 1: Hover turns the delete button red to warn.
 * Step 2: First click sets data-confirm="true" — button shows solid red border.
 * Step 2 hover: Button fills entirely red with white text — second click confirms. */
/* ============================================================================
 * RESPONSIVE — small screen adaptations
 * ============================================================================ */
/* ---------- legal[css] ---------- */
/* ---------- admin-tables[css] ---------- */
/**
 * Standardized Table Styles for the Application
 * Universal table styles — applies to all data tables across the site
 *
 * This stylesheet covers:
 * - Base table layout and sizing
 * - Cell content clipping and ellipsis overflow
 * - Copy-to-clipboard button that floats over cell content
 * - Light and dark theme backgrounds and hover states
 * - Design-token preview swatches (color, radius, spacing)
 * - Summary statistics grid (stat cards)
 * - Storage browser items
 * - Admin [badge]
 * - Dashboard table groups and category-specific column widths
 * - Action buttons within table cells (edit, delete with two-step confirm)
 * - Inline input editing inside table rows
 * - Row state animations (new row slide-in, editing, marked-for-deletion)
 */
/* ============================================================================
 TABLE CELLS (th & td) — shared base styles
 ============================================================================
 Applies consistent padding, alignment, height, and overflow behavior
 to both header and body cells. Ellipsis truncation prevents long
 values from breaking the fixed-width layout. */
/* ============================================================================
 TABLE HEADER CELLS — typography and stacking
 ============================================================================
 Column headers use smaller, uppercase, semibold text for a label feel.
 z-index keeps headers above scrolling body rows. */
/* ============================================================================
 * EX-INLINE-STYLE MIGRATION (moved from JS)
 * ============================================================================ */
/* settings-manager.js — suppress user text selection while SL picker is being dragged */
/* sync-status-indicator.js — sync icon spins while status is 'syncing' */
/* user-menu.js — has no static rules; visibility already driven by `hidden` attribute */