:root {
  --status-success: rgba(16, 185, 129, 1);
  --status-warning: rgba(245, 158, 11, 1);
  --status-error: rgba(239, 68, 68, 1);
  --status-neutral: rgba(148, 163, 184, 1);

  --presence-active: rgba(212, 245, 222, 1);
  --presence-idle: rgba(255, 244, 221, 1);
  --presence-away: rgba(255, 231, 231, 1);
  --presence-vacation: rgba(225, 236, 255, 1);
  --presence-in-meeting: rgba(236, 229, 255, 1);
  --presence-dnd: rgba(255, 216, 216, 1);

  --notification-success-background-color: rgba(209, 250, 229, 1);
  --notification-warning-background-color: rgba(254, 243, 199, 1);
  --notification-error-background-color: rgba(254, 226, 226, 1);

  --notification-success-text-color: rgba(6, 78, 59, 1);
  --notification-success-header-color: rgba(6, 95, 70, 1);
  --notification-warning-text-color: rgba(120, 53, 15, 1);
  --notification-warning-header-color: rgba(146, 64, 14, 1);
  --notification-error-text-color: rgba(127, 29, 29, 1);
  --notification-error-header-color: rgba(153, 27, 27, 1);

  --notification-success-border-color: rgba(52, 211, 153, 1);
  --notification-warning-border-color: rgba(251, 191, 36, 1);
  --notification-error-border-color: rgba(248, 113, 113, 1);
}
.theme-light {
    --theme-id: "light";
    --theme-name: "Light";
    --area-header-background-color: rgba(241, 245, 249, 1);
    --area-sidebar-background-color: rgba(236, 242, 247, 1);
    --area-content-background-color: rgba(248, 250, 252, 1);
    --area-footer-background-color: rgba(241, 245, 249, 1);
    --area-header-text-color: rgba(15, 23, 42, 1);
    --area-sidebar-text-color: rgba(51, 65, 85, 1);
    --area-content-text-color: rgba(51, 65, 85, 1);
    --area-footer-text-color: rgba(71, 85, 105, 1);
    --sidebar-icon-background-color: rgba(204, 251, 241, 1);
    --sidebar-level1-background-color: rgba(236, 242, 247, 1);
    --sidebar-level2-background-color: rgba(248, 250, 252, 1);
    --sidebar-section-icon-fill-color: rgba(15, 118, 140, 1);
    --sidebar-section-indicator-fill-color: rgba(45, 185, 201, 1);
    --sidebar-page-indicator-fill-color: rgba(13, 148, 166, 1);
    --accent-color-intense: rgba(13, 148, 166, 1);
    --accent-color-subtle: rgba(45, 185, 201, 1);
    --sidebar-level1-text-color: rgba(15, 23, 42, 1);
    --sidebar-level2-text-color: rgba(71, 85, 105, 1);
    --surface-level1-background-color: rgba(255, 255, 255, 1);
    --surface-level2-background-color: rgba(248, 250, 252, 1);
    --surface-level3-background-color: rgba(241, 245, 249, 1);
    --surface-level4-background-color: rgba(255, 255, 255, 0.92);
    --surface-context-menu-background-color: rgba(255, 255, 255, 0.98);
    --surface-left-background-color: rgba(15, 118, 140, 1);
    --surface-right-background-color: rgba(248, 250, 252, 1);
    --surface-level1-text-color: rgba(71, 85, 105, 1);
    --surface-level2-text-color: rgba(71, 85, 105, 1);
    --surface-level3-text-color: rgba(51, 65, 85, 1);
    --surface-level4-text-color: rgba(30, 41, 59, 1);
    --surface-context-menu-text-color: rgba(51, 65, 85, 1);
    --surface-level1-header-color: rgba(15, 23, 42, 1);
    --surface-level2-header-color: rgba(15, 23, 42, 1);
    --surface-level3-header-color: rgba(15, 118, 140, 1);
    --surface-level4-header-color: rgba(13, 148, 166, 1);
    --surface-context-menu-header-color: rgba(15, 23, 42, 1);
    --surface-left-text-color: rgba(240, 253, 250, 1);
    --surface-right-text-color: rgba(51, 65, 85, 1);
    --surface-level3-shadow-color: rgba(15, 23, 42, 0.08);
    --surface-level4-shadow-color: rgba(13, 148, 166, 0.14);
    --surface-context-menu-shadow-color: rgba(15, 23, 42, 0.16);
    --surface-level1-border-color: rgba(203, 213, 225, 1);
    --surface-level2-border-color: rgba(226, 232, 240, 1);
    --surface-level3-border-color: rgba(165, 216, 224, 1);
    --surface-level4-border-color: rgba(13, 148, 166, 0.35);
    --surface-context-menu-border-color: rgba(203, 213, 225, 1);
    --buttons-primary-default-background-color: rgba(13, 148, 166, 1);
    --buttons-primary-disabled-background-color: rgba(148, 163, 184, 1);
    --buttons-secondary-default-background-color: rgba(226, 232, 240, 1);
    --buttons-secondary-disabled-background-color: rgba(241, 245, 249, 1);
    --buttons-tertiary-default-background-color: rgba(0, 0, 0, 0);
    --buttons-tertiary-disabled-background-color: rgba(0, 0, 0, 0);
    --buttons-primary-default-text-color: rgba(255, 255, 255, 1);
    --buttons-primary-disabled-text-color: rgba(241, 245, 249, 1);
    --buttons-secondary-default-text-color: rgba(15, 23, 42, 1);
    --buttons-secondary-disabled-text-color: rgba(148, 163, 184, 1);
    --buttons-tertiary-default-text-color: rgba(13, 148, 166, 1);
    --buttons-tertiary-disabled-text-color: rgba(148, 163, 184, 1);
    --buttons-primary-default-border-color: rgba(15, 118, 140, 1);
    --buttons-primary-hover-border-color: rgba(8, 145, 178, 1);
    --buttons-primary-focus-border-color: rgba(6, 182, 212, 1);
    --buttons-secondary-default-border-color: rgba(203, 213, 225, 1);
    --buttons-secondary-hover-border-color: rgba(13, 148, 166, 1);
    --buttons-tertiary-default-border-color: rgba(13, 148, 166, 0.55);
    --buttons-tertiary-hover-border-color: rgba(13, 148, 166, 1);
    --buttons-shadow-color: rgba(13, 148, 166, 0.22);
    --inputs-default-background-color: rgba(255, 255, 255, 1);
    --inputs-invalid-background-color: rgba(254, 242, 242, 1);
    --inputs-disabled-background-color: rgba(241, 245, 249, 1);
    --inputs-default-text-color: rgba(15, 23, 42, 1);
    --inputs-invalid-text-color: rgba(127, 29, 29, 1);
    --inputs-disabled-text-color: rgba(148, 163, 184, 1);
    --inputs-default-native-color-scheme: light;
    --inputs-invalid-native-color-scheme: light;
    --inputs-disabled-native-color-scheme: light;
    --inputs-default-border-color: rgba(203, 213, 225, 1);
    --inputs-hover-border-color: rgba(148, 163, 184, 1);
    --inputs-focus-border-color: rgba(13, 148, 166, 1);
    --inputs-invalid-border-color: rgba(239, 68, 68, 1);
    --inputs-disabled-border-color: rgba(226, 232, 240, 1);
    --inputs-shadow-color: rgba(13, 148, 166, 0.18);
}

.theme-dark {
    --theme-id: "dark";
    --theme-name: "Dark";
    --area-header-background-color: rgba(11, 18, 32, 1);
    --area-sidebar-background-color: rgba(15, 23, 42, 1);
    --area-content-background-color: rgba(17, 24, 39, 1);
    --area-footer-background-color: rgba(11, 18, 32, 1);
    --area-header-text-color: rgba(226, 232, 240, 1);
    --area-sidebar-text-color: rgba(203, 213, 225, 1);
    --area-content-text-color: rgba(226, 232, 240, 1);
    --area-footer-text-color: rgba(148, 163, 184, 1);
    --sidebar-icon-background-color: rgba(19, 78, 92, 1);
    --sidebar-level1-background-color: rgba(15, 23, 42, 1);
    --sidebar-level2-background-color: rgba(21, 31, 50, 1);
    --sidebar-section-icon-fill-color: rgba(94, 234, 212, 1);
    --sidebar-section-indicator-fill-color: rgba(45, 212, 191, 1);
    --sidebar-page-indicator-fill-color: rgba(34, 211, 238, 1);
    --accent-color-intense: rgba(45, 212, 191, 1);
    --accent-color-subtle: rgba(34, 178, 196, 1);
    --sidebar-level1-text-color: rgba(241, 245, 249, 1);
    --sidebar-level2-text-color: rgba(148, 163, 184, 1);
    --surface-level1-background-color: rgba(30, 41, 59, 1);
    --surface-level2-background-color: rgba(36, 48, 68, 1);
    --surface-level3-background-color: rgba(45, 58, 82, 1);
    --surface-level4-background-color: rgba(51, 65, 85, 0.92);
    --surface-context-menu-background-color: rgba(15, 23, 42, 0.96);
    --surface-left-background-color: rgba(8, 51, 68, 1);
    --surface-right-background-color: rgba(21, 31, 50, 1);
    --surface-level1-text-color: rgba(203, 213, 225, 1);
    --surface-level2-text-color: rgba(203, 213, 225, 1);
    --surface-level3-text-color: rgba(226, 232, 240, 1);
    --surface-level4-text-color: rgba(241, 245, 249, 1);
    --surface-context-menu-text-color: rgba(203, 213, 225, 1);
    --surface-level1-header-color: rgba(248, 250, 252, 1);
    --surface-level2-header-color: rgba(248, 250, 252, 1);
    --surface-level3-header-color: rgba(94, 234, 212, 1);
    --surface-level4-header-color: rgba(45, 212, 191, 1);
    --surface-context-menu-header-color: rgba(248, 250, 252, 1);
    --surface-left-text-color: rgba(204, 251, 241, 1);
    --surface-right-text-color: rgba(203, 213, 225, 1);
    --surface-level3-shadow-color: rgba(2, 6, 23, 0.45);
    --surface-level4-shadow-color: rgba(45, 212, 191, 0.18);
    --surface-context-menu-shadow-color: rgba(2, 6, 23, 0.55);
    --surface-level1-border-color: rgba(71, 85, 105, 1);
    --surface-level2-border-color: rgba(51, 65, 85, 1);
    --surface-level3-border-color: rgba(45, 185, 201, 0.45);
    --surface-level4-border-color: rgba(45, 212, 191, 0.4);
    --surface-context-menu-border-color: rgba(71, 85, 105, 1);
    --buttons-primary-default-background-color: rgba(13, 148, 166, 1);
    --buttons-primary-disabled-background-color: rgba(51, 65, 85, 1);
    --buttons-secondary-default-background-color: rgba(30, 41, 59, 1);
    --buttons-secondary-disabled-background-color: rgba(15, 23, 42, 1);
    --buttons-tertiary-default-background-color: rgba(0, 0, 0, 0);
    --buttons-tertiary-disabled-background-color: rgba(0, 0, 0, 0);
    --buttons-primary-default-text-color: rgba(255, 255, 255, 1);
    --buttons-primary-disabled-text-color: rgba(148, 163, 184, 1);
    --buttons-secondary-default-text-color: rgba(94, 234, 212, 1);
    --buttons-secondary-disabled-text-color: rgba(100, 116, 139, 1);
    --buttons-tertiary-default-text-color: rgba(45, 212, 191, 1);
    --buttons-tertiary-disabled-text-color: rgba(100, 116, 139, 1);
    --buttons-primary-default-border-color: rgba(34, 211, 238, 1);
    --buttons-primary-hover-border-color: rgba(103, 232, 249, 1);
    --buttons-primary-focus-border-color: rgba(165, 243, 252, 1);
    --buttons-secondary-default-border-color: rgba(45, 185, 201, 0.55);
    --buttons-secondary-hover-border-color: rgba(45, 212, 191, 1);
    --buttons-tertiary-default-border-color: rgba(45, 212, 191, 0.45);
    --buttons-tertiary-hover-border-color: rgba(94, 234, 212, 1);
    --buttons-shadow-color: rgba(45, 212, 191, 0.2);
    --inputs-default-background-color: rgba(15, 23, 42, 1);
    --inputs-invalid-background-color: rgba(69, 26, 26, 1);
    --inputs-disabled-background-color: rgba(30, 41, 59, 1);
    --inputs-default-text-color: rgba(226, 232, 240, 1);
    --inputs-invalid-text-color: rgba(254, 226, 226, 1);
    --inputs-disabled-text-color: rgba(100, 116, 139, 1);
    --inputs-default-native-color-scheme: dark;
    --inputs-invalid-native-color-scheme: dark;
    --inputs-disabled-native-color-scheme: dark;
    --inputs-default-border-color: rgba(71, 85, 105, 1);
    --inputs-hover-border-color: rgba(100, 116, 139, 1);
    --inputs-focus-border-color: rgba(45, 212, 191, 1);
    --inputs-invalid-border-color: rgba(248, 113, 113, 1);
    --inputs-disabled-border-color: rgba(51, 65, 85, 1);
    --inputs-shadow-color: rgba(45, 212, 191, 0.16);
}
:root {
  --areas-and-surfaces-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --buttons-font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --inputs-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, Arial, sans-serif;

  --area-header-font-size: 1rem;
  --area-sidebar-font-size: 0.75rem;
  --area-content-font-size: 1rem;
  --area-footer-font-size: 1rem;
  --surface-level1-font-size: 0.875rem;
  --surface-level2-font-size: 0.875rem;
  --surface-level3-font-size: 0.875rem;
  --surface-level4-font-size: 0.875rem;
  --surface-context-menu-font-size: 0.75rem;
  --notification-success-font-size: 1rem;
  --notification-warning-font-size: 1rem;
  --notification-error-font-size: 1rem;
  --buttons-font-size: 0.75rem;
  --inputs-font-size: 0.75rem;

  --area-header-font-weight: 600;
  --area-footer-font-weight: 500;
  --area-sidebar-font-weight: 500;
  --area-content-font-weight: 400;
  --surface-level1-font-weight: 400;
  --surface-level2-font-weight: 400;
  --surface-level3-font-weight: 400;
  --surface-level4-font-weight: 400;
  --surface-context-menu-font-weight: 700;
  --notification-success-font-weight: 400;
  --notification-warning-font-weight: 400;
  --notification-error-font-weight: 400;
  --buttons-font-weight: 600;
  --inputs-font-weight: 100;
}
:root {
  --buttons-padding-top: 4px;
  --buttons-padding-right: 4px;
  --buttons-padding-bottom: 4px;
  --buttons-padding-left: 4px;
  --buttons-min-width: 10rem;
  --buttons-min-height: 0rem;
  --buttons-line-height: 1.2;
  --buttons-content-justify: center;
  --buttons-text-align: center;

  --inputs-padding-top: 6px;
  --inputs-padding-right: 6px;
  --inputs-padding-bottom: 6px;
  --inputs-padding-left: 7px;
  --inputs-min-width: 14rem;
  --inputs-min-height: 0rem;
  --inputs-line-height: 1.2;
  --inputs-text-align: left;

  --surface-level1-padding-top: 15px;
  --surface-level1-padding-right: 15px;
  --surface-level1-padding-bottom: 15px;
  --surface-level1-padding-left: 15px;
  --surface-level1-min-width: 0px;
  --surface-level1-min-height: 0px;
  --surface-level2-padding-top: 0.65rem;
  --surface-level2-padding-right: 0.9rem;
  --surface-level2-padding-bottom: 0.65rem;
  --surface-level2-padding-left: 0.9rem;
  --surface-level2-min-width: 0rem;
  --surface-level2-min-height: 0rem;
  --surface-level3-padding-top: 25px;
  --surface-level3-padding-right: 41px;
  --surface-level3-padding-bottom: 24px;
  --surface-level3-padding-left: 31px;
  --surface-level3-min-width: 0rem;
  --surface-level3-min-height: 0rem;
  --surface-level4-padding-top: 0.5rem;
  --surface-context-menu-padding-top: 0.35rem;
  --surface-level4-padding-right: 0.7rem;
  --surface-context-menu-padding-right: 0.35rem;
  --surface-level4-padding-bottom: 0.5rem;
  --surface-context-menu-padding-bottom: 0.35rem;
  --surface-level4-padding-left: 0.7rem;
  --surface-context-menu-padding-left: 0.35rem;
  --surface-level4-min-width: 0rem;
  --surface-context-menu-min-width: 0rem;
  --surface-level4-min-height: 0rem;
  --surface-context-menu-min-height: 0rem;

  --notification-success-padding-top: 0.75rem;
  --notification-success-padding-right: 1rem;
  --notification-success-padding-bottom: 0.75rem;
  --notification-success-padding-left: 1rem;
  --notification-success-min-width: 0rem;
  --notification-success-min-height: 0rem;
  --notification-warning-padding-top: 0.75rem;
  --notification-warning-padding-right: 1rem;
  --notification-warning-padding-bottom: 0.75rem;
  --notification-warning-padding-left: 1rem;
  --notification-warning-min-width: 0rem;
  --notification-warning-min-height: 0rem;
  --notification-error-padding-top: 0.75rem;
  --notification-error-padding-right: 1rem;
  --notification-error-padding-bottom: 0.75rem;
  --notification-error-padding-left: 1rem;
  --notification-error-min-width: 0rem;
  --notification-error-min-height: 0rem;
}
:root {
  --buttons-border-width: 1px;
  --buttons-border-style: solid;
  --buttons-border-radius-tl: 0px;
  --buttons-border-radius-tr: 0px;
  --buttons-border-radius-br: 0px;
  --buttons-border-radius-bl: 0px;

  --inputs-border-width: 1px;
  --inputs-border-style: solid;
  --inputs-border-radius-tl: 7px;
  --inputs-border-radius-tr: 7px;
  --inputs-border-radius-br: 7px;
  --inputs-border-radius-bl: 7px;

  --surface-level1-border-width: 1px;
  --surface-level1-border-style: solid;
  --surface-level1-border-radius-tl: 8px;
  --surface-level1-border-radius-tr: 8px;
  --surface-level1-border-radius-br: 8px;
  --surface-level1-border-radius-bl: 8px;
  --surface-level2-border-width: 1px;
  --surface-level2-border-style: solid;
  --surface-level2-border-radius-tl: 6px;
  --surface-level2-border-radius-tr: 6px;
  --surface-level2-border-radius-br: 6px;
  --surface-level2-border-radius-bl: 6px;
  --surface-level3-border-width: 2px;
  --surface-level3-border-style: solid;
  --surface-level3-border-radius-tl: 8px;
  --surface-level3-border-radius-tr: 8px;
  --surface-level3-border-radius-br: 8px;
  --surface-level3-border-radius-bl: 8px;
  --surface-level4-border-width: 1px;
  --surface-context-menu-border-width: 2px;
  --surface-level4-border-style: solid;
  --surface-context-menu-border-style: solid;
  --surface-level4-border-radius-tl: 15px;
  --surface-context-menu-border-radius-tl: 8px;
  --surface-level4-border-radius-tr: 15px;
  --surface-context-menu-border-radius-tr: 8px;
  --surface-level4-border-radius-br: 15px;
  --surface-context-menu-border-radius-br: 8px;
  --surface-level4-border-radius-bl: 15px;
  --surface-context-menu-border-radius-bl: 8px;

  --notification-success-border-width: 1px;
  --notification-success-border-style: solid;
  --notification-success-border-radius-tl: 8px;
  --notification-success-border-radius-tr: 8px;
  --notification-success-border-radius-br: 8px;
  --notification-success-border-radius-bl: 8px;
  --notification-warning-border-width: 1px;
  --notification-warning-border-style: solid;
  --notification-warning-border-radius-tl: 8px;
  --notification-warning-border-radius-tr: 8px;
  --notification-warning-border-radius-br: 8px;
  --notification-warning-border-radius-bl: 8px;
  --notification-error-border-width: 1px;
  --notification-error-border-style: solid;
  --notification-error-border-radius-tl: 8px;
  --notification-error-border-radius-tr: 8px;
  --notification-error-border-radius-br: 8px;
  --notification-error-border-radius-bl: 8px;
}
:root {
  --buttons-shadow-offset-x: 0px;
  --buttons-shadow-offset-y: 0px;
  --buttons-shadow-blur: 0px;
  --buttons-shadow-spread: 0px;
  --buttons-shadow-opacity: 0;

  --inputs-shadow-offset-x: 0px;
  --inputs-shadow-offset-y: 0px;
  --inputs-shadow-blur: 0px;
  --inputs-shadow-spread: 0px;
  --inputs-shadow-opacity: 0;

  --surface-level3-shadow-offset-x: 10px;
  --surface-level3-shadow-offset-y: 10px;
  --surface-level3-shadow-blur: 25px;
  --surface-level3-shadow-spread: -14px;
  --surface-level3-shadow-opacity: 77;
  --surface-level4-shadow-offset-x: 18px;
  --surface-context-menu-shadow-offset-x: 0px;
  --surface-level4-shadow-offset-y: 21px;
  --surface-context-menu-shadow-offset-y: 10px;
  --surface-level4-shadow-blur: 32px;
  --surface-context-menu-shadow-blur: 28px;
  --surface-level4-shadow-spread: 0px;
  --surface-context-menu-shadow-spread: 0px;
  --surface-level4-shadow-opacity: 42;
  --surface-context-menu-shadow-opacity: 48;
}

/* Fixed platform root; rem tokens resolve against browser default (~16px).
   Not Theme Editor–adjustable. */
html {
    font-size: 100%;
    --heliont-content-area-padding: 1.5rem;
}

/* Compact: scale rem-based type to ~14px.
   Fixed chrome (header 50px) stays unchanged. */
@media (max-width: 768px) {
    html {
        font-size: 87.5%;
        --heliont-content-area-padding: 0.75rem;
    }
}

/* ==================================================================== */
/* AREAS */
/* ==================================================================== */
.heliont-area-header {
    background: var(--area-header-background-color);
    color: var(--area-header-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-header-font-size);
    font-weight: var(--area-header-font-weight);
}

.heliont-area-sidebar {
    background: var(--area-sidebar-background-color);
    color: var(--area-sidebar-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-sidebar-font-size);
    font-weight: var(--area-sidebar-font-weight);
}

.heliont-area-content {
    background: var(--area-content-background-color);
    color: var(--area-content-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-content-font-size);
    font-weight: var(--area-content-font-weight);
    /* border-box keeps the gutter inside full-height application roots. */
    box-sizing: border-box;
    padding: var(--heliont-content-area-padding);
}

/* Application main slot uses the content-area tokens so theme backgrounds
   fill the viewport behind page applications (status, settings, …). */
#section-mainCenter {
    background: var(--area-content-background-color);
    color: var(--area-content-text-color);
}

.heliont-area-footer {
    background: var(--area-footer-background-color);
    color: var(--area-footer-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-footer-font-size);
    font-weight: var(--area-footer-font-weight);
}

/* ==================================================================== */
/* SURFACES */
/* ==================================================================== */
.heliont-surface-level1 {
    background: var(--surface-level1-background-color);
    color: var(--surface-level1-text-color);
    border-color: var(--surface-level1-border-color);
    border-width: var(--surface-level1-border-width);
    border-style: var(--surface-level1-border-style);
    border-radius: var(--surface-level1-border-radius-tl) var(--surface-level1-border-radius-tr) var(--surface-level1-border-radius-br) var(--surface-level1-border-radius-bl);
    padding: var(--surface-level1-padding-top) var(--surface-level1-padding-right) var(--surface-level1-padding-bottom) var(--surface-level1-padding-left);
    min-width: var(--surface-level1-min-width);
    min-height: var(--surface-level1-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--surface-level1-font-size);
    font-weight: var(--surface-level1-font-weight);
    box-shadow: none;
}

.heliont-surface-level1 h1,
.heliont-surface-level1 h2,
.heliont-surface-level1 h3,
.heliont-surface-level1 h4,
.heliont-surface-level1 h5,
.heliont-surface-level1 h6 {
    color: var(--surface-level1-header-color);
}

.heliont-surface-level2 {
    background: var(--surface-level2-background-color);
    color: var(--surface-level2-text-color);
    border-color: var(--surface-level2-border-color);
    border-width: var(--surface-level2-border-width);
    border-style: var(--surface-level2-border-style);
    border-radius: var(--surface-level2-border-radius-tl) var(--surface-level2-border-radius-tr) var(--surface-level2-border-radius-br) var(--surface-level2-border-radius-bl);
    padding: var(--surface-level2-padding-top) var(--surface-level2-padding-right) var(--surface-level2-padding-bottom) var(--surface-level2-padding-left);
    min-width: var(--surface-level2-min-width);
    min-height: var(--surface-level2-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--surface-level2-font-size);
    font-weight: var(--surface-level2-font-weight);
    box-shadow: none;
}

.heliont-surface-level2 h1,
.heliont-surface-level2 h2,
.heliont-surface-level2 h3,
.heliont-surface-level2 h4,
.heliont-surface-level2 h5,
.heliont-surface-level2 h6 {
    color: var(--surface-level2-header-color);
}

.heliont-surface-level3 {
    background: var(--surface-level3-background-color);
    color: var(--surface-level3-text-color);
    border-color: var(--surface-level3-border-color);
    border-width: var(--surface-level3-border-width);
    border-style: var(--surface-level3-border-style);
    border-radius: var(--surface-level3-border-radius-tl) var(--surface-level3-border-radius-tr) var(--surface-level3-border-radius-br) var(--surface-level3-border-radius-bl);
    padding: var(--surface-level3-padding-top) var(--surface-level3-padding-right) var(--surface-level3-padding-bottom) var(--surface-level3-padding-left);
    min-width: var(--surface-level3-min-width);
    min-height: var(--surface-level3-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--surface-level3-font-size);
    font-weight: var(--surface-level3-font-weight);
    box-shadow: var(--surface-level3-shadow-offset-x) var(--surface-level3-shadow-offset-y) var(--surface-level3-shadow-blur) var(--surface-level3-shadow-spread) color-mix(in srgb, var(--surface-level3-shadow-color) calc(var(--surface-level3-shadow-opacity) * 1%), transparent);
}

.heliont-surface-level3 h1,
.heliont-surface-level3 h2,
.heliont-surface-level3 h3,
.heliont-surface-level3 h4,
.heliont-surface-level3 h5,
.heliont-surface-level3 h6 {
    color: var(--surface-level3-header-color);
}

.heliont-surface-level4 {
    background: var(--surface-level4-background-color);
    color: var(--surface-level4-text-color);
    border-color: var(--surface-level4-border-color);
    border-width: var(--surface-level4-border-width);
    border-style: var(--surface-level4-border-style);
    border-radius: var(--surface-level4-border-radius-tl) var(--surface-level4-border-radius-tr) var(--surface-level4-border-radius-br) var(--surface-level4-border-radius-bl);
    padding: var(--surface-level4-padding-top) var(--surface-level4-padding-right) var(--surface-level4-padding-bottom) var(--surface-level4-padding-left);
    min-width: var(--surface-level4-min-width);
    min-height: var(--surface-level4-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--surface-level4-font-size);
    font-weight: var(--surface-level4-font-weight);
    box-shadow: var(--surface-level4-shadow-offset-x) var(--surface-level4-shadow-offset-y) var(--surface-level4-shadow-blur) var(--surface-level4-shadow-spread) color-mix(in srgb, var(--surface-level4-shadow-color) calc(var(--surface-level4-shadow-opacity) * 1%), transparent);
}

.heliont-surface-level4 h1,
.heliont-surface-level4 h2,
.heliont-surface-level4 h3,
.heliont-surface-level4 h4,
.heliont-surface-level4 h5,
.heliont-surface-level4 h6 {
    color: var(--surface-level4-header-color);
}

.heliont-surface-context-menu {
    background: var(--surface-context-menu-background-color);
    color: var(--surface-context-menu-text-color);
    border-color: var(--surface-context-menu-border-color);
    border-width: var(--surface-context-menu-border-width);
    border-style: var(--surface-context-menu-border-style);
    border-radius: var(--surface-context-menu-border-radius-tl) var(--surface-context-menu-border-radius-tr) var(--surface-context-menu-border-radius-br) var(--surface-context-menu-border-radius-bl);
    padding: var(--surface-context-menu-padding-top) var(--surface-context-menu-padding-right) var(--surface-context-menu-padding-bottom) var(--surface-context-menu-padding-left);
    min-width: var(--surface-context-menu-min-width);
    min-height: var(--surface-context-menu-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--surface-context-menu-font-size);
    font-weight: var(--surface-context-menu-font-weight);
    box-shadow: var(--surface-context-menu-shadow-offset-x) var(--surface-context-menu-shadow-offset-y) var(--surface-context-menu-shadow-blur) var(--surface-context-menu-shadow-spread) color-mix(in srgb, var(--surface-context-menu-shadow-color) calc(var(--surface-context-menu-shadow-opacity) * 1%), transparent);
}

.heliont-surface-context-menu h1,
.heliont-surface-context-menu h2,
.heliont-surface-context-menu h3,
.heliont-surface-context-menu h4,
.heliont-surface-context-menu h5,
.heliont-surface-context-menu h6 {
    color: var(--surface-context-menu-header-color);
}

.heliont-surface-left {
    background: var(--surface-left-background-color);
    color: var(--surface-left-text-color);
    font-family: var(--areas-and-surfaces-font-family);
}

.heliont-surface-right {
    background: var(--surface-right-background-color);
    color: var(--surface-right-text-color);
    font-family: var(--areas-and-surfaces-font-family);
}

.heliont-notification-success {
    background: var(--notification-success-background-color);
    color: var(--notification-success-text-color);
    border-color: var(--notification-success-border-color);
    border-width: var(--notification-success-border-width);
    border-style: var(--notification-success-border-style);
    border-radius: var(--notification-success-border-radius-tl) var(--notification-success-border-radius-tr) var(--notification-success-border-radius-br) var(--notification-success-border-radius-bl);
    padding: var(--notification-success-padding-top) var(--notification-success-padding-right) var(--notification-success-padding-bottom) var(--notification-success-padding-left);
    min-width: var(--notification-success-min-width);
    min-height: var(--notification-success-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--notification-success-font-size);
    font-weight: var(--notification-success-font-weight);
    box-shadow: none;
}

.heliont-notification-success h1,
.heliont-notification-success h2,
.heliont-notification-success h3,
.heliont-notification-success h4,
.heliont-notification-success h5,
.heliont-notification-success h6 {
    color: var(--notification-success-header-color);
}

.heliont-notification-warning {
    background: var(--notification-warning-background-color);
    color: var(--notification-warning-text-color);
    border-color: var(--notification-warning-border-color);
    border-width: var(--notification-warning-border-width);
    border-style: var(--notification-warning-border-style);
    border-radius: var(--notification-warning-border-radius-tl) var(--notification-warning-border-radius-tr) var(--notification-warning-border-radius-br) var(--notification-warning-border-radius-bl);
    padding: var(--notification-warning-padding-top) var(--notification-warning-padding-right) var(--notification-warning-padding-bottom) var(--notification-warning-padding-left);
    min-width: var(--notification-warning-min-width);
    min-height: var(--notification-warning-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--notification-warning-font-size);
    font-weight: var(--notification-warning-font-weight);
    box-shadow: none;
}

.heliont-notification-warning h1,
.heliont-notification-warning h2,
.heliont-notification-warning h3,
.heliont-notification-warning h4,
.heliont-notification-warning h5,
.heliont-notification-warning h6 {
    color: var(--notification-warning-header-color);
}

.heliont-notification-error {
    background: var(--notification-error-background-color);
    color: var(--notification-error-text-color);
    border-color: var(--notification-error-border-color);
    border-width: var(--notification-error-border-width);
    border-style: var(--notification-error-border-style);
    border-radius: var(--notification-error-border-radius-tl) var(--notification-error-border-radius-tr) var(--notification-error-border-radius-br) var(--notification-error-border-radius-bl);
    padding: var(--notification-error-padding-top) var(--notification-error-padding-right) var(--notification-error-padding-bottom) var(--notification-error-padding-left);
    min-width: var(--notification-error-min-width);
    min-height: var(--notification-error-min-height);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--notification-error-font-size);
    font-weight: var(--notification-error-font-weight);
    box-shadow: none;
}

.heliont-notification-error h1,
.heliont-notification-error h2,
.heliont-notification-error h3,
.heliont-notification-error h4,
.heliont-notification-error h5,
.heliont-notification-error h6 {
    color: var(--notification-error-header-color);
}

/* ==================================================================== */
/* TYPE SCALE (em → inherits container rem base)
   Surfaces / areas / notifications set font-size in rem; headings and
   paragraphs scale from that local base via em. */
/* ==================================================================== */
.heliont-area-header h1,
.heliont-area-sidebar h1,
.heliont-area-content h1,
.heliont-area-footer h1,
.heliont-surface-level1 h1,
.heliont-surface-level2 h1,
.heliont-surface-level3 h1,
.heliont-surface-level4 h1,
.heliont-surface-context-menu h1,
.heliont-notification-success h1,
.heliont-notification-warning h1,
.heliont-notification-error h1 {
    font-size: 1.75em;
}

.heliont-area-header h2,
.heliont-area-sidebar h2,
.heliont-area-content h2,
.heliont-area-footer h2,
.heliont-surface-level1 h2,
.heliont-surface-level2 h2,
.heliont-surface-level3 h2,
.heliont-surface-level4 h2,
.heliont-surface-context-menu h2,
.heliont-notification-success h2,
.heliont-notification-warning h2,
.heliont-notification-error h2 {
    font-size: 1.5em;
}

.heliont-area-header h3,
.heliont-area-sidebar h3,
.heliont-area-content h3,
.heliont-area-footer h3,
.heliont-surface-level1 h3,
.heliont-surface-level2 h3,
.heliont-surface-level3 h3,
.heliont-surface-level4 h3,
.heliont-surface-context-menu h3,
.heliont-notification-success h3,
.heliont-notification-warning h3,
.heliont-notification-error h3 {
    font-size: 1.25em;
}

.heliont-area-header h4,
.heliont-area-sidebar h4,
.heliont-area-content h4,
.heliont-area-footer h4,
.heliont-surface-level1 h4,
.heliont-surface-level2 h4,
.heliont-surface-level3 h4,
.heliont-surface-level4 h4,
.heliont-surface-context-menu h4,
.heliont-notification-success h4,
.heliont-notification-warning h4,
.heliont-notification-error h4 {
    font-size: 1.125em;
}

.heliont-area-header h5,
.heliont-area-sidebar h5,
.heliont-area-content h5,
.heliont-area-footer h5,
.heliont-surface-level1 h5,
.heliont-surface-level2 h5,
.heliont-surface-level3 h5,
.heliont-surface-level4 h5,
.heliont-surface-context-menu h5,
.heliont-notification-success h5,
.heliont-notification-warning h5,
.heliont-notification-error h5 {
    font-size: 1em;
}

.heliont-area-header h6,
.heliont-area-sidebar h6,
.heliont-area-content h6,
.heliont-area-footer h6,
.heliont-surface-level1 h6,
.heliont-surface-level2 h6,
.heliont-surface-level3 h6,
.heliont-surface-level4 h6,
.heliont-surface-context-menu h6,
.heliont-notification-success h6,
.heliont-notification-warning h6,
.heliont-notification-error h6 {
    font-size: 0.875em;
}

.heliont-area-header p,
.heliont-area-sidebar p,
.heliont-area-content p,
.heliont-area-footer p,
.heliont-surface-level1 p,
.heliont-surface-level2 p,
.heliont-surface-level3 p,
.heliont-surface-level4 p,
.heliont-surface-context-menu p,
.heliont-notification-success p,
.heliont-notification-warning p,
.heliont-notification-error p {
    font-size: 1em;
}

/* ==================================================================== */
/* STATUS INDICATORS & PILLS */
/* ==================================================================== */
.heliont-status-indicator {
    display: inline-block;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--status-neutral);
    vertical-align: middle;
}

.heliont-status-indicator--success {
    background: var(--status-success);
}

.heliont-status-indicator--warning {
    background: var(--status-warning);
}

.heliont-status-indicator--error {
    background: var(--status-error);
}

.heliont-status-indicator--neutral {
    background: var(--status-neutral);
}

.heliont-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-family: var(--areas-and-surfaces-font-family);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.3;
    color: var(--surface-level1-text-color);
    background: var(--status-neutral);
}

.heliont-status-pill--success {
    background: var(--status-success);
}

.heliont-status-pill--warning {
    background: var(--status-warning);
}

.heliont-status-pill--error {
    background: var(--status-error);
}

.heliont-status-pill--neutral {
    background: var(--status-neutral);
}

.heliont-separator {
    width: 100%;
    height: 0;
    border: 0;
    border-top: 1px solid var(--accent-color-subtle);
    margin: 6px 0;
    display: block;
    opacity: 1;
}

.heliont-surface-level1 .heliont-separator {
    border-top-color: var(--accent-color-intense);
}

.heliont-surface-level2 .heliont-separator,
.heliont-surface-level3 .heliont-separator,
.heliont-surface-level4 .heliont-separator,
.heliont-surface-context-menu .heliont-separator,
.heliont-surface-left .heliont-separator,
.heliont-surface-right .heliont-separator {
    border-top-color: var(--accent-color-subtle);
}

/* ==================================================================== */
/* BUTTONS */
/* ==================================================================== */
.heliont-button {
    background: var(--buttons-primary-default-background-color);
    color: var(--buttons-primary-default-text-color);
    border-color: var(--buttons-primary-default-border-color);
    border-width: var(--buttons-border-width);
    border-style: var(--buttons-border-style);
    border-radius: var(--buttons-border-radius-tl) var(--buttons-border-radius-tr) var(--buttons-border-radius-br) var(--buttons-border-radius-bl);
    padding: var(--buttons-padding-top) var(--buttons-padding-right) var(--buttons-padding-bottom) var(--buttons-padding-left);
    min-width: var(--buttons-min-width);
    min-height: var(--buttons-min-height);
    box-sizing: border-box;
    display: inline-flex;
    justify-content: var(--buttons-content-justify);
    align-items: center;
    text-align: var(--buttons-text-align);
    line-height: var(--buttons-line-height);
    font-family: var(--buttons-font-family);
    font-size: var(--buttons-font-size);
    font-weight: var(--buttons-font-weight);
    box-shadow: var(--buttons-shadow-offset-x) var(--buttons-shadow-offset-y) var(--buttons-shadow-blur) var(--buttons-shadow-spread) color-mix(in srgb, var(--buttons-shadow-color) calc(var(--buttons-shadow-opacity) * 1%), transparent);
}

.heliont-button--primary,
.heliont-button--primary:hover,
.heliont-button--primary:focus,
.heliont-button--primary:focus-visible,
.heliont-button--primary:active {
    background: var(--buttons-primary-default-background-color);
    color: var(--buttons-primary-default-text-color);
}

.heliont-button--primary,
.heliont-button--primary:active {
    border-color: var(--buttons-primary-default-border-color);
}

.heliont-button--primary:hover {
    border-color: var(--buttons-primary-hover-border-color);
}

.heliont-button--primary:focus,
.heliont-button--primary:focus-visible {
    border-color: var(--buttons-primary-focus-border-color);
}

.heliont-button--primary:disabled {
    background: var(--buttons-primary-disabled-background-color);
    color: var(--buttons-primary-disabled-text-color);
    border-color: var(--buttons-primary-default-border-color);
}

.heliont-button--secondary,
.heliont-button--secondary:hover,
.heliont-button--secondary:focus,
.heliont-button--secondary:focus-visible,
.heliont-button--secondary:active {
    background: var(--buttons-secondary-default-background-color);
    color: var(--buttons-secondary-default-text-color);
}

.heliont-button--secondary,
.heliont-button--secondary:focus,
.heliont-button--secondary:focus-visible,
.heliont-button--secondary:active {
    border-color: var(--buttons-secondary-default-border-color);
}

.heliont-button--secondary:hover {
    border-color: var(--buttons-secondary-hover-border-color);
}

.heliont-button--secondary:disabled {
    background: var(--buttons-secondary-disabled-background-color);
    color: var(--buttons-secondary-disabled-text-color);
    border-color: var(--buttons-secondary-default-border-color);
}

.heliont-button--tertiary,
.heliont-button--tertiary:hover,
.heliont-button--tertiary:focus,
.heliont-button--tertiary:focus-visible,
.heliont-button--tertiary:active {
    background: var(--buttons-tertiary-default-background-color);
    color: var(--buttons-tertiary-default-text-color);
}

.heliont-button--tertiary,
.heliont-button--tertiary:focus,
.heliont-button--tertiary:focus-visible,
.heliont-button--tertiary:active {
    border-color: var(--buttons-tertiary-default-border-color);
}

.heliont-button--tertiary:hover {
    border-color: var(--buttons-tertiary-hover-border-color);
}

.heliont-button--tertiary:disabled {
    background: var(--buttons-tertiary-disabled-background-color);
    color: var(--buttons-tertiary-disabled-text-color);
    border-color: var(--buttons-tertiary-default-border-color);
}

/* ==================================================================== */
/* BUTTON ACTIONS */
/* ==================================================================== */
.heliont-button--action {
    --heliont-action-button-size: calc((var(--buttons-line-height) * var(--buttons-font-size)) + var(--buttons-padding-top) + var(--buttons-padding-bottom) + (var(--buttons-border-width) * 2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--heliont-action-button-size);
    min-width: var(--heliont-action-button-size);
    height: var(--heliont-action-button-size);
    min-height: var(--heliont-action-button-size);
    padding: 0;
    border-width: var(--buttons-border-width);
    border-style: var(--buttons-border-style);
    border-color: var(--surface-level3-border-color);
    border-radius: 999px;
    background: var(--surface-level2-background-color);
    color: inherit;
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
}

.heliont-button--action:hover {
    border-color: var(--surface-level4-border-color);
}

.heliont-button--action:focus,
.heliont-button--action:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-color-intense) 45%, transparent);
    outline-offset: 1px;
    border-color: var(--accent-color-intense);
}

.heliont-button--action-close {
    background: transparent;
    border-color: transparent;
}

.heliont-button--action-close:hover,
.heliont-button--action-close:focus,
.heliont-button--action-close:focus-visible,
.heliont-button--action-close:active {
    background: transparent;
    border-color: transparent;
    outline: none;
}

.heliont-button--action-add {
    border-color: color-mix(in srgb, var(--accent-color-intense) 45%, var(--surface-level3-border-color));
    color: var(--accent-color-intense);
}

.heliont-button--action-remove {
    border-color: var(--inputs-invalid-border-color);
    color: var(--inputs-invalid-border-color);
}

/* ==================================================================== */
/* INPUTS */
/* ==================================================================== */
.heliont-inputs,
.heliont-input,
.heliont-textbox,
.heliont-select,
.heliont-textarea,
.heliont-fileinput,
.heliont-numberbox {
    background: var(--inputs-default-background-color);
    color: var(--inputs-default-text-color);
    border-color: var(--inputs-default-border-color);
    border-width: var(--inputs-border-width);
    border-style: var(--inputs-border-style);
    border-radius: var(--inputs-border-radius-tl) var(--inputs-border-radius-tr) var(--inputs-border-radius-br) var(--inputs-border-radius-bl);
    padding: var(--inputs-padding-top) var(--inputs-padding-right) var(--inputs-padding-bottom) var(--inputs-padding-left);
    min-width: var(--inputs-min-width);
    min-height: var(--inputs-min-height);
    box-sizing: border-box;
    text-align: var(--inputs-text-align);
    line-height: var(--inputs-line-height);
    font-family: var(--inputs-font-family);
    font-size: var(--inputs-font-size);
    font-weight: var(--inputs-font-weight);
    box-shadow: var(--inputs-shadow-offset-x) var(--inputs-shadow-offset-y) var(--inputs-shadow-blur) var(--inputs-shadow-spread) color-mix(in srgb, var(--inputs-shadow-color) calc(var(--inputs-shadow-opacity) * 1%), transparent);
    color-scheme: var(--inputs-default-native-color-scheme);
}

.heliont-inputs-default,
.heliont-inputs-hover,
.heliont-inputs-focus {
    background: var(--inputs-default-background-color);
    color: var(--inputs-default-text-color);
}

.heliont-inputs-default {
    border-color: var(--inputs-default-border-color);
}

.heliont-inputs-hover {
    border-color: var(--inputs-hover-border-color);
}

.heliont-inputs-focus {
    border-color: var(--inputs-focus-border-color);
}

.heliont-inputs-invalid {
    background: var(--inputs-invalid-background-color);
    color: var(--inputs-invalid-text-color);
    border-color: var(--inputs-invalid-border-color);
    color-scheme: var(--inputs-invalid-native-color-scheme);
}

.heliont-inputs-disabled {
    background: var(--inputs-disabled-background-color);
    color: var(--inputs-disabled-text-color);
    border-color: var(--inputs-disabled-border-color);
    color-scheme: var(--inputs-disabled-native-color-scheme);
}

.heliont-input:hover,
.heliont-textbox:hover,
.heliont-select:hover,
.heliont-textarea:hover,
.heliont-fileinput:hover,
.heliont-numberbox:hover,
.heliont-inputs-default:hover,
.heliont-inputs-hover {
    background: var(--inputs-default-background-color);
    color: var(--inputs-default-text-color);
    border-color: var(--inputs-hover-border-color);
}

.heliont-input:focus,
.heliont-textbox:focus,
.heliont-select:focus,
.heliont-textarea:focus,
.heliont-fileinput:focus,
.heliont-numberbox:focus,
.heliont-input:focus-visible,
.heliont-textbox:focus-visible,
.heliont-select:focus-visible,
.heliont-textarea:focus-visible,
.heliont-fileinput:focus-visible,
.heliont-numberbox:focus-visible,
.heliont-inputs-default:focus,
.heliont-inputs-default:focus-visible,
.heliont-inputs-focus {
    background: var(--inputs-default-background-color);
    color: var(--inputs-default-text-color);
    border-color: var(--inputs-focus-border-color);
}

.heliont-input:invalid,
.heliont-textbox:invalid,
.heliont-select:invalid,
.heliont-textarea:invalid,
.heliont-fileinput:invalid,
.heliont-numberbox:invalid,
.heliont-input[aria-invalid="true"],
.heliont-textbox[aria-invalid="true"],
.heliont-select[aria-invalid="true"],
.heliont-textarea[aria-invalid="true"],
.heliont-fileinput[aria-invalid="true"],
.heliont-numberbox[aria-invalid="true"],
.heliont-input.is-invalid,
.heliont-textbox.is-invalid,
.heliont-select.is-invalid,
.heliont-textarea.is-invalid,
.heliont-fileinput.is-invalid,
.heliont-numberbox.is-invalid,
.heliont-inputs-invalid {
    background: var(--inputs-invalid-background-color);
    color: var(--inputs-invalid-text-color);
    border-color: var(--inputs-invalid-border-color);
    color-scheme: var(--inputs-invalid-native-color-scheme);
}

.heliont-input:disabled,
.heliont-textbox:disabled,
.heliont-select:disabled,
.heliont-textarea:disabled,
.heliont-fileinput:disabled,
.heliont-numberbox:disabled,
.heliont-inputs-default:disabled,
.heliont-inputs-disabled {
    background: var(--inputs-disabled-background-color);
    color: var(--inputs-disabled-text-color);
    border-color: var(--inputs-disabled-border-color);
    color-scheme: var(--inputs-disabled-native-color-scheme);
}

.heliont-select {
    appearance: none;
    -webkit-appearance: none;
}

.heliont-textarea {
    resize: vertical;
}

.heliont-range {
    accent-color: var(--buttons-primary-default-background-color);
}

.heliont-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.heliont-radio__input {
    margin: 0;
    accent-color: var(--buttons-primary-default-background-color);
}

.heliont-radio__label {
    color: var(--inputs-default-text-color);
    font-family: var(--inputs-font-family);
    font-size: var(--inputs-font-size);
    font-weight: var(--inputs-font-weight);
    line-height: var(--inputs-line-height);
}

.heliont-toggle {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.4rem;
}

.heliont-toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.heliont-toggle__slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    border-width: var(--inputs-border-width);
    border-style: var(--inputs-border-style);
    border-color: var(--inputs-default-border-color);
    border-radius: 999px;
    background: var(--inputs-default-background-color);
    transition: background-color 0.2s, border-color 0.2s;
}

.heliont-toggle__slider::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    left: 0.15rem;
    top: 50%;
    border-radius: 50%;
    background: var(--inputs-default-text-color);
    transform: translateY(-50%);
    transition: transform 0.2s, background-color 0.2s;
}

.heliont-toggle__input:checked+.heliont-toggle__slider {
    background: var(--accent-color-intense);
    border-color: var(--accent-color-intense);
}

.heliont-toggle__input:checked+.heliont-toggle__slider::before {
    transform: translateY(-50%) translateX(1.05rem);
    background: var(--buttons-primary-default-text-color);
}

.heliont-toggle__input:focus+.heliont-toggle__slider,
.heliont-toggle__input:focus-visible+.heliont-toggle__slider {
    border-color: var(--inputs-focus-border-color);
}

.heliont-toggle__input:disabled+.heliont-toggle__slider {
    background: var(--inputs-disabled-background-color);
    border-color: var(--inputs-disabled-border-color);
}

.heliont-toggle__input:disabled+.heliont-toggle__slider::before {
    background: var(--inputs-disabled-text-color);
}

.heliont-color-swatch {
    appearance: none;
    -webkit-appearance: none;
    --heliont-swatch-input-height: calc((var(--inputs-line-height) * var(--inputs-font-size)) + var(--inputs-padding-top) + var(--inputs-padding-bottom) + (var(--inputs-border-width) * 2));
    width: calc(var(--heliont-swatch-input-height) * 1.5);
    min-width: calc(var(--heliont-swatch-input-height) * 1.5);
    max-width: calc(var(--heliont-swatch-input-height) * 1.5);
    height: var(--heliont-swatch-input-height);
    min-height: var(--heliont-swatch-input-height);
    max-height: var(--heliont-swatch-input-height);
    padding: 0;
    display: inline-flex;
    align-items: stretch;
    justify-content: stretch;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
}

.heliont-color-swatch__preview {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border-top-left-radius: max(0px, calc(var(--inputs-border-radius-tl) - var(--inputs-border-width)));
    border-top-right-radius: max(0px, calc(var(--inputs-border-radius-tr) - var(--inputs-border-width)));
    border-bottom-right-radius: max(0px, calc(var(--inputs-border-radius-br) - var(--inputs-border-width)));
    border-bottom-left-radius: max(0px, calc(var(--inputs-border-radius-bl) - var(--inputs-border-width)));
    padding: 0;
}

.heliont-gradient-preview,
.heliont-background-preview {
    padding: 0;
    min-width: 0;
    min-height: 0;
}

.heliont-gradient-preview {
    border-color: var(--surface-level2-border-color);
}

.heliont-background-preview {
    border-color: var(--surface-level2-border-color);
}

.heliont-background-anchor-grid,
.heliont-background-quality {
    color: var(--area-content-text-color);
    border-color: var(--surface-level2-border-color);
}




/* ==================================================================== */
/* SEARCH */
/* ==================================================================== */
.heliont-search {
    position: relative;
    width: 100%;
}

.heliont-search__field {
    position: relative;
    width: 100%;
}

.heliont-search__input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 2.1rem;
    /* Host owns width; don't inherit the generic inputs min-width floor. */
    min-width: 0;
}

.heliont-search__input:focus,
.heliont-search__input:focus-visible {
    outline: none;
}

.heliont-search__input::-webkit-search-cancel-button,
.heliont-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.heliont-search__clear {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--status-error, #ef4444);
    cursor: pointer;
}

.heliont-search__clear:hover {
    background: color-mix(in srgb, var(--status-error, #ef4444) 12%, transparent);
}

.heliont-search__clear:focus,
.heliont-search__clear:focus-visible {
    outline: none;
}

.heliont-search__clear[hidden] {
    display: none;
}

.heliont-search__clear-icon {
    display: block;
}


/* ==================================================================== */
/* SIDEBAR */
/* ==================================================================== */
.heliont-sidebar-section {
    background: var(--sidebar-level1-background-color);
    color: var(--sidebar-level1-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-sidebar-font-size);
    font-weight: var(--area-sidebar-font-weight);
}

.heliont-sidebar-page {
    background: var(--sidebar-level2-background-color);
    color: var(--sidebar-level2-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-sidebar-font-size);
    font-weight: var(--area-sidebar-font-weight);
}

.heliont-sidebar-page[aria-current="true"],
.heliont-sidebar-page[aria-current="page"],
.heliont-sidebar-page--active {
    background: var(--sidebar-level2-background-color);
    color: var(--sidebar-level2-text-color);
}

.heliont-sidebar-indicator {
    background: var(--sidebar-page-indicator-fill-color);
}

.heliont-area-sidebar .page>.heliont-sidebar-indicator {
    background: var(--sidebar-page-indicator-fill-color);
}

.heliont-sidebar-section-icon {
    color: var(--sidebar-section-icon-fill-color);
}

.heliont-sidebar-section-chevron {
    color: var(--accent-color-intense);
}

/* ==================================================================== */
/* Signal Sidebar (Signal-specific variants) */
/* ==================================================================== */
.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-group {
    background: var(--sidebar-level1-background-color);
    color: var(--sidebar-level1-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-sidebar-font-size);
    font-weight: var(--area-sidebar-font-weight);
}

.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-chat,
.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-channel {
    background: var(--sidebar-level2-background-color);
    color: var(--sidebar-level2-text-color);
    font-family: var(--areas-and-surfaces-font-family);
    font-size: var(--area-sidebar-font-size);
    font-weight: var(--area-sidebar-font-weight);
}

.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-chat[aria-current="true"],
.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-channel[aria-current="true"],
.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-chat--active,
.heliont-area-sidebar.heliont-sidebar-signal .heliont-sidebar-channel--active {
    background: var(--sidebar-level2-background-color);
    color: var(--sidebar-level2-text-color);
}

.heliont-area-sidebar.heliont-sidebar-signal .heliont-signal-sidebar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--sidebar-level2-text-color);
    cursor: pointer;
    border-radius: 6px;
}

.heliont-area-sidebar.heliont-sidebar-signal .heliont-signal-sidebar-action:hover {
    background: rgba(0, 0, 0, 0.06);
}

.heliont-area-sidebar.heliont-sidebar-signal.is-collapsed .heliont-signal-sidebar-action {
    display: none;
}

/* ==================================================================== */
/* Signal Context Menu (theme-driven) */
/* ==================================================================== */
#heliont-signal-contextmenu_root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    background: transparent;
    pointer-events: none; /* allow outside clicks */
}

#heliont-signal-contextmenu_root ul.heliont-contextmenu {
    position: absolute;
    min-width: 180px;
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: var(--heliont-overlay-shadow);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    font-size: var(--heliont-font-size-sm);
    backdrop-filter: blur(4px);
    animation: heliontFadeInMenu 80ms ease-out;
    pointer-events: auto;
    opacity: 0;
}

#heliont-signal-contextmenu_root ul.heliont-contextmenu li {
    padding: 6px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}

#heliont-signal-contextmenu_root ul.heliont-contextmenu li:hover {
    background: transparent;
}

#heliont-signal-contextmenu_root ul.heliont-contextmenu li:active {
    background: transparent;
}

#heliont-signal-contextmenu_root ul.heliont-contextmenu hr {
    margin: 4px 0;
    border: none;
    border-top: 1px solid currentColor;
}

@keyframes heliontFadeInMenu {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==================================================================== */
/* RESPONSIVE / COMPACT (<=768px)                                       */
/* On narrow viewports the branded minimum widths for buttons and       */
/* inputs are the main cause of horizontal overflow: a single control   */
/* wider than the viewport forces the whole layout wider. Release the   */
/* floor so controls shrink to their container; apps opt into           */
/* full-width controls where appropriate.                               */
/* ==================================================================== */
@media (max-width: 768px) {
    .heliont-button {
        min-width: 0;
    }

    .heliont-inputs,
    .heliont-input,
    .heliont-textbox,
    .heliont-select,
    .heliont-textarea,
    .heliont-fileinput,
    .heliont-numberbox {
        min-width: 0;
        max-width: 100%;
        /* Absolute 16px floor — independent of Theme Editor --inputs-font-size
           and of compact html rem scaling — so mobile browsers do not auto-zoom. */
        font-size: max(16px, var(--inputs-font-size, 1rem));
    }

    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="color"]),
    textarea,
    select {
        font-size: max(16px, var(--inputs-font-size, 1em));
    }

    /* Halve content-area and surface paddings on compact viewports. */
    .heliont-area-content {
        padding: var(--heliont-content-area-padding);
    }

    .heliont-surface-level1 {
        padding:
            calc(var(--surface-level1-padding-top) * 0.5)
            calc(var(--surface-level1-padding-right) * 0.5)
            calc(var(--surface-level1-padding-bottom) * 0.5)
            calc(var(--surface-level1-padding-left) * 0.5);
    }

    .heliont-surface-level2 {
        padding:
            calc(var(--surface-level2-padding-top) * 0.5)
            calc(var(--surface-level2-padding-right) * 0.5)
            calc(var(--surface-level2-padding-bottom) * 0.5)
            calc(var(--surface-level2-padding-left) * 0.5);
    }

    .heliont-surface-level3 {
        padding:
            calc(var(--surface-level3-padding-top) * 0.5)
            calc(var(--surface-level3-padding-right) * 0.5)
            calc(var(--surface-level3-padding-bottom) * 0.5)
            calc(var(--surface-level3-padding-left) * 0.5);
    }

    .heliont-surface-level4 {
        padding:
            calc(var(--surface-level4-padding-top) * 0.5)
            calc(var(--surface-level4-padding-right) * 0.5)
            calc(var(--surface-level4-padding-bottom) * 0.5)
            calc(var(--surface-level4-padding-left) * 0.5);
    }

    .heliont-surface-context-menu {
        padding:
            calc(var(--surface-context-menu-padding-top) * 0.5)
            calc(var(--surface-context-menu-padding-right) * 0.5)
            calc(var(--surface-context-menu-padding-bottom) * 0.5)
            calc(var(--surface-context-menu-padding-left) * 0.5);
    }
}