:root,
:root[data-theme="midnight"] {
    --color-background: 10 14 22;
    --color-surface: 12 17 26;
    --color-surface-dim: 8 12 19;
    --color-surface-container: 20 27 40;
    --color-surface-container-low: 16 22 34;
    --color-surface-container-lowest: 7 10 16;
    --color-surface-container-high: 28 36 52;
    --color-surface-container-highest: 36 45 63;
    --color-surface-bright: 46 56 77;
    --color-primary: 141 172 230;
    --color-primary-container: 46 82 152;
    --color-on-primary: 15 23 39;
    --color-on-primary-container: 255 255 255;
    --color-secondary: 106 186 173;
    --color-secondary-fixed: 132 208 196;
    --color-on-secondary: 12 41 38;
    --color-tertiary: 176 189 214;
    --color-tertiary-fixed: 199 210 232;
    --color-error: 233 154 147;
    --color-on-error-container: 244 203 198;
    --color-on-error: 72 24 21;
    --color-on-surface: 227 233 244;
    --color-on-surface-variant: 173 184 205;
    --color-outline-variant: 76 91 120;
    --color-control-switch-off-bg: 36 46 66;
    --color-control-switch-off-border: 94 110 141;
    --color-control-switch-off-thumb: 227 233 244;
    --color-control-switch-on-bg: 106 186 173;
    --color-control-switch-on-border: 132 208 196;
    --color-control-switch-on-thumb: 12 41 38;
    --color-control-switch-focus: 106 186 173;
    --color-control-primary-bg: 46 82 152;
    --color-control-primary-hover: 58 96 171;
    --color-control-primary-text: 255 255 255;
    --color-control-primary-disabled-bg: 53 96 178;
    --color-control-primary-disabled-text: 209 220 244;
    --color-control-primary-disabled-border: 81 113 177;
    --color-control-ghost-bg: 20 27 40;
    --color-control-ghost-hover-bg: 28 36 52;
    --color-control-ghost-text: 227 233 244;
    --color-control-ghost-border: 76 91 120;
    --color-table-head-bg: 36 45 63;
    --color-table-head-text: 227 233 244;
    --color-table-head-border: 76 91 120;
    --color-table-row-hover-bg: 28 36 52;
    --color-status-success-surface: 17 43 42;
    --color-status-success-bg: 106 186 173;
    --color-status-success-border: 132 208 196;
    --color-status-success-text: 164 229 218;
    --color-status-success-strong: 215 255 248;
    --color-status-warning-surface: 50 38 18;
    --color-status-warning-bg: 214 170 98;
    --color-status-warning-border: 230 193 132;
    --color-status-warning-text: 255 216 154;
    --color-status-warning-strong: 255 238 205;
    --color-status-error-surface: 54 28 31;
    --color-status-error-bg: 233 154 147;
    --color-status-error-border: 244 203 198;
    --color-status-error-text: 255 183 177;
    --color-status-error-strong: 255 224 220;
    --color-status-neutral-surface: 27 36 52;
    --color-status-neutral-bg: 36 45 63;
    --color-status-neutral-border: 76 91 120;
    --color-status-neutral-text: 227 233 244;
    --color-status-neutral-strong: 255 255 255;
    --color-compare-current-surface: 48 39 31;
    --color-compare-current-surface-strong: 70 55 40;
    --color-compare-current-border: 214 170 98;
    --color-compare-current-text: 255 220 166;
    --color-compare-current-strong: 255 240 210;
    --color-compare-proposed-surface: 18 48 49;
    --color-compare-proposed-surface-strong: 29 69 72;
    --color-compare-proposed-border: 106 186 173;
    --color-compare-proposed-text: 167 237 232;
    --color-compare-proposed-strong: 223 255 252;
    --color-compare-change-surface: 28 43 69;
    --color-compare-change-surface-strong: 43 67 108;
    --color-compare-change-border: 141 172 230;
    --color-compare-change-text: 190 211 250;
    --color-compare-change-strong: 235 243 255;
    --color-focus-ring: 106 186 173;
    color-scheme: dark;
}

:root[data-theme="daylight"] {
    --color-background: 246 247 250;
    --color-surface: 250 251 253;
    --color-surface-dim: 237 240 245;
    --color-surface-container: 236 239 244;
    --color-surface-container-low: 243 245 249;
    --color-surface-container-lowest: 253 254 255;
    --color-surface-container-high: 223 229 238;
    --color-surface-container-highest: 212 220 231;
    --color-surface-bright: 201 210 224;
    --color-primary: 37 66 138;
    --color-primary-container: 77 115 214;
    --color-on-primary: 255 255 255;
    --color-on-primary-container: 255 255 255;
    --color-secondary: 15 132 126;
    --color-secondary-fixed: 37 158 150;
    --color-on-secondary: 255 255 255;
    --color-tertiary: 75 95 136;
    --color-tertiary-fixed: 108 131 177;
    --color-error: 191 68 62;
    --color-on-error-container: 99 34 31;
    --color-on-error: 255 255 255;
    --color-on-surface: 24 34 52;
    --color-on-surface-variant: 56 70 95;
    --color-outline-variant: 145 158 180;
    --color-control-switch-off-bg: 213 223 239;
    --color-control-switch-off-border: 162 173 195;
    --color-control-switch-off-thumb: 40 58 95;
    --color-control-switch-on-bg: 77 115 214;
    --color-control-switch-on-border: 37 66 138;
    --color-control-switch-on-thumb: 255 255 255;
    --color-control-switch-focus: 77 115 214;
    --color-control-primary-bg: 71 108 203;
    --color-control-primary-hover: 60 96 187;
    --color-control-primary-text: 255 255 255;
    --color-control-primary-disabled-bg: 143 164 214;
    --color-control-primary-disabled-text: 236 241 249;
    --color-control-primary-disabled-border: 120 146 209;
    --color-control-ghost-bg: 234 238 244;
    --color-control-ghost-hover-bg: 223 229 238;
    --color-control-ghost-text: 25 34 52;
    --color-control-ghost-border: 145 158 180;
    --color-table-head-bg: 204 214 228;
    --color-table-head-text: 22 33 53;
    --color-table-head-border: 138 152 176;
    --color-table-row-hover-bg: 219 226 236;
    --color-status-success-surface: 225 247 244;
    --color-status-success-bg: 37 158 150;
    --color-status-success-border: 15 132 126;
    --color-status-success-text: 13 89 84;
    --color-status-success-strong: 8 65 61;
    --color-status-warning-surface: 255 241 215;
    --color-status-warning-bg: 214 170 98;
    --color-status-warning-border: 176 123 73;
    --color-status-warning-text: 113 70 25;
    --color-status-warning-strong: 84 51 16;
    --color-status-error-surface: 255 232 229;
    --color-status-error-bg: 191 68 62;
    --color-status-error-border: 99 34 31;
    --color-status-error-text: 139 43 39;
    --color-status-error-strong: 96 29 27;
    --color-status-neutral-surface: 232 237 245;
    --color-status-neutral-bg: 204 214 228;
    --color-status-neutral-border: 138 152 176;
    --color-status-neutral-text: 56 70 95;
    --color-status-neutral-strong: 24 34 52;
    --color-compare-current-surface: 237 225 207;
    --color-compare-current-surface-strong: 221 201 171;
    --color-compare-current-border: 176 123 73;
    --color-compare-current-text: 101 67 29;
    --color-compare-current-strong: 72 45 18;
    --color-compare-proposed-surface: 213 235 232;
    --color-compare-proposed-surface-strong: 184 220 216;
    --color-compare-proposed-border: 15 132 126;
    --color-compare-proposed-text: 11 92 88;
    --color-compare-proposed-strong: 7 65 62;
    --color-compare-change-surface: 218 226 244;
    --color-compare-change-surface-strong: 190 204 236;
    --color-compare-change-border: 77 115 214;
    --color-compare-change-text: 37 66 138;
    --color-compare-change-strong: 25 45 98;
    --color-focus-ring: 71 108 203;
    color-scheme: light;
}

:root[data-theme="graphite"] {
    --color-background: 20 22 26;
    --color-surface: 22 24 29;
    --color-surface-dim: 16 18 22;
    --color-surface-container: 33 36 42;
    --color-surface-container-low: 28 31 37;
    --color-surface-container-lowest: 14 16 20;
    --color-surface-container-high: 43 47 55;
    --color-surface-container-highest: 54 59 69;
    --color-surface-bright: 66 72 84;
    --color-primary: 184 198 224;
    --color-primary-container: 72 90 125;
    --color-on-primary: 16 20 28;
    --color-on-primary-container: 255 255 255;
    --color-secondary: 132 191 176;
    --color-secondary-fixed: 157 214 200;
    --color-on-secondary: 14 43 37;
    --color-tertiary: 190 180 155;
    --color-tertiary-fixed: 213 203 180;
    --color-error: 238 167 161;
    --color-on-error-container: 246 212 208;
    --color-on-error: 82 28 25;
    --color-on-surface: 231 235 242;
    --color-on-surface-variant: 182 188 200;
    --color-outline-variant: 90 98 112;
    --color-control-switch-off-bg: 56 62 74;
    --color-control-switch-off-border: 111 121 140;
    --color-control-switch-off-thumb: 231 235 242;
    --color-control-switch-on-bg: 132 191 176;
    --color-control-switch-on-border: 157 214 200;
    --color-control-switch-on-thumb: 14 43 37;
    --color-control-switch-focus: 132 191 176;
    --color-control-primary-bg: 72 90 125;
    --color-control-primary-hover: 86 105 141;
    --color-control-primary-text: 255 255 255;
    --color-control-primary-disabled-bg: 72 90 125;
    --color-control-primary-disabled-text: 221 227 238;
    --color-control-primary-disabled-border: 108 125 158;
    --color-control-ghost-bg: 33 36 42;
    --color-control-ghost-hover-bg: 43 47 55;
    --color-control-ghost-text: 231 235 242;
    --color-control-ghost-border: 90 98 112;
    --color-table-head-bg: 60 66 78;
    --color-table-head-text: 240 244 250;
    --color-table-head-border: 104 113 130;
    --color-table-row-hover-bg: 46 51 60;
    --color-status-success-surface: 24 45 42;
    --color-status-success-bg: 132 191 176;
    --color-status-success-border: 157 214 200;
    --color-status-success-text: 178 232 219;
    --color-status-success-strong: 228 255 249;
    --color-status-warning-surface: 48 42 31;
    --color-status-warning-bg: 190 180 155;
    --color-status-warning-border: 213 203 180;
    --color-status-warning-text: 232 216 184;
    --color-status-warning-strong: 255 244 218;
    --color-status-error-surface: 55 32 32;
    --color-status-error-bg: 238 167 161;
    --color-status-error-border: 246 212 208;
    --color-status-error-text: 255 194 188;
    --color-status-error-strong: 255 229 225;
    --color-status-neutral-surface: 38 42 50;
    --color-status-neutral-bg: 60 66 78;
    --color-status-neutral-border: 104 113 130;
    --color-status-neutral-text: 231 235 242;
    --color-status-neutral-strong: 255 255 255;
    --color-compare-current-surface: 47 42 33;
    --color-compare-current-surface-strong: 67 59 45;
    --color-compare-current-border: 190 180 155;
    --color-compare-current-text: 232 216 184;
    --color-compare-current-strong: 255 246 224;
    --color-compare-proposed-surface: 26 48 45;
    --color-compare-proposed-surface-strong: 38 68 63;
    --color-compare-proposed-border: 132 191 176;
    --color-compare-proposed-text: 178 232 219;
    --color-compare-proposed-strong: 231 255 249;
    --color-compare-change-surface: 35 44 61;
    --color-compare-change-surface-strong: 51 64 87;
    --color-compare-change-border: 184 198 224;
    --color-compare-change-text: 203 216 240;
    --color-compare-change-strong: 244 248 255;
    --color-focus-ring: 132 191 176;
    color-scheme: dark;
}

:root[data-theme="slate-ocean"] {
    --color-background: 26 32 40;
    --color-surface: 30 37 46;
    --color-surface-dim: 22 28 36;
    --color-surface-container: 40 48 60;
    --color-surface-container-low: 35 43 54;
    --color-surface-container-lowest: 18 24 31;
    --color-surface-container-high: 51 60 73;
    --color-surface-container-highest: 63 73 87;
    --color-surface-bright: 75 86 102;
    --color-primary: 112 160 240;
    --color-primary-container: 48 98 190;
    --color-on-primary: 8 31 62;
    --color-on-primary-container: 255 255 255;
    --color-secondary: 98 188 174;
    --color-secondary-fixed: 128 209 197;
    --color-on-secondary: 9 46 40;
    --color-tertiary: 198 166 112;
    --color-tertiary-fixed: 218 188 139;
    --color-error: 255 168 160;
    --color-on-error-container: 255 217 213;
    --color-on-error: 87 26 23;
    --color-on-surface: 227 233 241;
    --color-on-surface-variant: 174 184 198;
    --color-outline-variant: 93 105 122;
    --color-control-switch-off-bg: 62 72 86;
    --color-control-switch-off-border: 113 129 153;
    --color-control-switch-off-thumb: 227 233 241;
    --color-control-switch-on-bg: 112 160 240;
    --color-control-switch-on-border: 148 188 247;
    --color-control-switch-on-thumb: 8 31 62;
    --color-control-switch-focus: 112 160 240;
    --color-control-primary-bg: 48 98 190;
    --color-control-primary-hover: 60 113 206;
    --color-control-primary-text: 255 255 255;
    --color-control-primary-disabled-bg: 48 98 190;
    --color-control-primary-disabled-text: 214 226 248;
    --color-control-primary-disabled-border: 82 126 206;
    --color-control-ghost-bg: 40 48 60;
    --color-control-ghost-hover-bg: 51 60 73;
    --color-control-ghost-text: 227 233 241;
    --color-control-ghost-border: 93 105 122;
    --color-table-head-bg: 70 82 98;
    --color-table-head-text: 238 244 251;
    --color-table-head-border: 104 118 137;
    --color-table-row-hover-bg: 51 60 73;
    --color-status-success-surface: 18 50 47;
    --color-status-success-bg: 98 188 174;
    --color-status-success-border: 128 209 197;
    --color-status-success-text: 158 232 221;
    --color-status-success-strong: 221 255 250;
    --color-status-warning-surface: 55 43 22;
    --color-status-warning-bg: 198 166 112;
    --color-status-warning-border: 218 188 139;
    --color-status-warning-text: 242 205 145;
    --color-status-warning-strong: 255 238 205;
    --color-status-error-surface: 62 31 32;
    --color-status-error-bg: 255 168 160;
    --color-status-error-border: 255 217 213;
    --color-status-error-text: 255 194 188;
    --color-status-error-strong: 255 230 226;
    --color-status-neutral-surface: 42 51 64;
    --color-status-neutral-bg: 62 72 86;
    --color-status-neutral-border: 93 105 122;
    --color-status-neutral-text: 227 233 241;
    --color-status-neutral-strong: 255 255 255;
    --color-compare-current-surface: 55 43 25;
    --color-compare-current-surface-strong: 77 58 32;
    --color-compare-current-border: 198 166 112;
    --color-compare-current-text: 242 205 145;
    --color-compare-current-strong: 255 237 203;
    --color-compare-proposed-surface: 18 52 51;
    --color-compare-proposed-surface-strong: 28 73 72;
    --color-compare-proposed-border: 98 188 174;
    --color-compare-proposed-text: 158 232 221;
    --color-compare-proposed-strong: 222 255 250;
    --color-compare-change-surface: 25 49 84;
    --color-compare-change-surface-strong: 38 72 122;
    --color-compare-change-border: 112 160 240;
    --color-compare-change-text: 180 210 255;
    --color-compare-change-strong: 232 241 255;
    --color-focus-ring: 112 160 240;
    color-scheme: dark;
}

:root[data-theme="sand-stone"] {
    --color-background: 244 241 234;
    --color-surface: 249 246 239;
    --color-surface-dim: 232 226 215;
    --color-surface-container: 236 230 219;
    --color-surface-container-low: 243 238 229;
    --color-surface-container-lowest: 252 250 244;
    --color-surface-container-high: 224 217 205;
    --color-surface-container-highest: 210 202 189;
    --color-surface-bright: 199 190 176;
    --color-primary: 112 93 66;
    --color-primary-container: 137 114 81;
    --color-on-primary: 255 255 255;
    --color-on-primary-container: 255 255 255;
    --color-secondary: 94 122 88;
    --color-secondary-fixed: 122 151 114;
    --color-on-secondary: 255 255 255;
    --color-tertiary: 156 111 68;
    --color-tertiary-fixed: 186 137 92;
    --color-error: 181 74 67;
    --color-on-error-container: 107 42 38;
    --color-on-error: 255 255 255;
    --color-on-surface: 43 48 56;
    --color-on-surface-variant: 83 89 99;
    --color-outline-variant: 157 151 142;
    --color-control-switch-off-bg: 208 201 188;
    --color-control-switch-off-border: 169 162 151;
    --color-control-switch-off-thumb: 74 73 76;
    --color-control-switch-on-bg: 156 111 68;
    --color-control-switch-on-border: 186 137 92;
    --color-control-switch-on-thumb: 255 255 255;
    --color-control-switch-focus: 156 111 68;
    --color-control-primary-bg: 137 114 81;
    --color-control-primary-hover: 124 102 72;
    --color-control-primary-text: 255 255 255;
    --color-control-primary-disabled-bg: 173 156 132;
    --color-control-primary-disabled-text: 252 249 243;
    --color-control-primary-disabled-border: 148 128 99;
    --color-control-ghost-bg: 236 230 219;
    --color-control-ghost-hover-bg: 224 217 205;
    --color-control-ghost-text: 43 48 56;
    --color-control-ghost-border: 157 151 142;
    --color-table-head-bg: 198 188 172;
    --color-table-head-text: 33 39 49;
    --color-table-head-border: 149 142 132;
    --color-table-row-hover-bg: 224 217 205;
    --color-status-success-surface: 231 240 226;
    --color-status-success-bg: 122 151 114;
    --color-status-success-border: 94 122 88;
    --color-status-success-text: 55 86 50;
    --color-status-success-strong: 37 63 34;
    --color-status-warning-surface: 249 232 211;
    --color-status-warning-bg: 156 111 68;
    --color-status-warning-border: 186 137 92;
    --color-status-warning-text: 108 66 27;
    --color-status-warning-strong: 76 45 17;
    --color-status-error-surface: 253 226 222;
    --color-status-error-bg: 181 74 67;
    --color-status-error-border: 107 42 38;
    --color-status-error-text: 128 43 38;
    --color-status-error-strong: 91 29 26;
    --color-status-neutral-surface: 235 229 219;
    --color-status-neutral-bg: 198 188 172;
    --color-status-neutral-border: 149 142 132;
    --color-status-neutral-text: 73 79 89;
    --color-status-neutral-strong: 43 48 56;
    --color-compare-current-surface: 244 232 214;
    --color-compare-current-surface-strong: 226 205 176;
    --color-compare-current-border: 156 111 68;
    --color-compare-current-text: 100 62 28;
    --color-compare-current-strong: 67 40 16;
    --color-compare-proposed-surface: 228 240 224;
    --color-compare-proposed-surface-strong: 204 224 198;
    --color-compare-proposed-border: 94 122 88;
    --color-compare-proposed-text: 55 86 50;
    --color-compare-proposed-strong: 37 63 34;
    --color-compare-change-surface: 238 228 216;
    --color-compare-change-surface-strong: 216 198 176;
    --color-compare-change-border: 137 114 81;
    --color-compare-change-text: 79 63 42;
    --color-compare-change-strong: 53 41 26;
    --color-focus-ring: 137 114 81;
    color-scheme: light;
}

html,
body {
    min-height: 100%;
}

body {
    font-family: "Inter", sans-serif;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-on-surface));
    transition: background-color 220ms ease, color 220ms ease;
}

* {
    border-color: rgb(var(--color-outline-variant) / 0.35);
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.row-selectable {
    cursor: pointer;
}

.providers-table .row-selectable > td {
    transition: background-color 180ms ease, color 180ms ease;
}

.providers-table .row-selectable:hover > td,
.providers-table .row-selectable:focus-within > td {
    background-color: rgb(var(--color-surface-container-high) / 0.4);
}

.hidden-by-filter {
    display: none;
}

.table-number-header,
.table-number-cell {
    text-align: right !important;
}

.table-number-cell {
    font-variant-numeric: tabular-nums;
}

.app-table-head-row,
thead tr[class*="bg-surface-container-lowest"] {
    background-color: rgb(var(--color-table-head-bg)) !important;
}

.app-table-head-cell,
.app-table-head-row th,
thead tr[class*="bg-surface-container-lowest"] th {
    color: rgb(var(--color-table-head-text)) !important;
    border-bottom-color: rgb(var(--color-table-head-border) / 0.42) !important;
}

.app-table-row:hover > td,
.app-table-row:focus-within > td {
    background-color: rgb(var(--color-table-row-hover-bg) / 0.4);
}

.errors-table-sticky thead th {
    position: sticky;
    top: 4rem;
    z-index: 30;
    background-color: rgb(var(--color-table-head-bg));
}

.errors-table-sticky [data-sticky-col-index] {
    position: sticky;
}

.errors-table-sticky tbody td[data-sticky-col-index] {
    z-index: 20;
    background-color: rgb(var(--color-surface-container-low));
    background-clip: padding-box;
}

.errors-table-sticky thead th[data-sticky-col-index] {
    z-index: 35;
}

.errors-table-sticky tbody tr:hover td[data-sticky-col-index],
.errors-table-sticky tbody tr:focus-within td[data-sticky-col-index] {
    background-color: rgb(var(--color-surface-container-high));
}

.errors-table-sticky [data-sticky-col-index="0"] {
    left: 0;
}

.errors-table-sticky [data-sticky-col-index="1"] {
    left: 90px;
}

.errors-table-sticky [data-sticky-col-index="2"] {
    left: 260px;
}

.errors-table-sticky [data-sticky-col-index="3"] {
    left: 440px;
}

.errors-table-sticky [data-sticky-col-index="3"] {
    box-shadow: 1px 0 0 rgb(var(--color-outline-variant) / 0.25);
}

.font-manrope {
    font-family: "Manrope", sans-serif;
}

.invoice-kpi-card {
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.invoice-kpi-card .invoice-kpi-title,
.invoice-kpi-card .invoice-kpi-hint {
    color: rgb(var(--color-on-surface-variant));
}

.invoice-kpi-card .invoice-kpi-value {
    color: rgb(var(--color-on-surface));
}

.invoice-kpi-subtotal {
    background-color: rgb(var(--color-surface-container-high) / 0.72);
    border-color: rgb(var(--color-outline-variant) / 0.26);
}

.invoice-kpi-discount {
    background-color: rgb(var(--color-tertiary-container) / 0.32);
    border-color: rgb(var(--color-tertiary) / 0.42);
    box-shadow: inset 0 2px 0 rgb(var(--color-tertiary) / 0.45);
}

.invoice-kpi-discount .invoice-kpi-title,
.invoice-kpi-discount .invoice-kpi-hint,
.invoice-kpi-discount .invoice-kpi-value {
    color: rgb(var(--color-tertiary));
}

.invoice-kpi-tax {
    background-color: rgb(var(--color-secondary-container) / 0.32);
    border-color: rgb(var(--color-secondary) / 0.42);
    box-shadow: inset 0 2px 0 rgb(var(--color-secondary) / 0.45);
}

.invoice-kpi-tax .invoice-kpi-title,
.invoice-kpi-tax .invoice-kpi-hint,
.invoice-kpi-tax .invoice-kpi-value {
    color: rgb(var(--color-secondary));
}

.invoice-kpi-total {
    background-color: rgb(var(--color-primary-container) / 0.45);
    border-color: rgb(var(--color-primary) / 0.5);
    box-shadow: inset 0 2px 0 rgb(var(--color-primary) / 0.5);
}

.invoice-kpi-total .invoice-kpi-title,
.invoice-kpi-total .invoice-kpi-hint {
    color: rgb(var(--color-on-primary-container));
}

.invoice-kpi-total .invoice-kpi-value {
    color: rgb(var(--color-on-primary-container));
}

/* Compatibilidad: si Tailwind CDN no genera utilidades de color, estas clases mantienen el look. */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
}

.from-primary,
.from-primary-container,
.from-surface {
    --tw-gradient-to-position: ;
    --tw-gradient-from-position: ;
}

.from-primary {
    --tw-gradient-from: rgb(var(--color-primary)) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-primary) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-container {
    --tw-gradient-from: rgb(var(--color-primary-container)) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-primary-container) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-surface {
    --tw-gradient-from: rgb(var(--color-surface)) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-surface) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary {
    --tw-gradient-to: rgb(var(--color-primary)) var(--tw-gradient-to-position);
}

.to-primary-container {
    --tw-gradient-to: rgb(var(--color-primary-container)) var(--tw-gradient-to-position);
}

.to-secondary {
    --tw-gradient-to: rgb(var(--color-secondary)) var(--tw-gradient-to-position);
}

.bg-background { background-color: rgb(var(--color-background)) !important; }
.bg-background\/70 { background-color: rgb(var(--color-background) / 0.7) !important; }
.bg-surface { background-color: rgb(var(--color-surface)) !important; }
.bg-surface\/85 { background-color: rgb(var(--color-surface) / 0.85) !important; }
.bg-surface\/95 { background-color: rgb(var(--color-surface) / 0.95) !important; }
.bg-surface-bright { background-color: rgb(var(--color-surface-bright)) !important; }
.bg-surface-container { background-color: rgb(var(--color-surface-container)) !important; }
.bg-surface-container\/30 { background-color: rgb(var(--color-surface-container) / 0.3) !important; }
.bg-surface-container\/50 { background-color: rgb(var(--color-surface-container) / 0.5) !important; }
.bg-surface-container-low { background-color: rgb(var(--color-surface-container-low)) !important; }
.bg-surface-container-high { background-color: rgb(var(--color-surface-container-high)) !important; }
.bg-surface-container-highest { background-color: rgb(var(--color-surface-container-highest)) !important; }
.bg-surface-container-high\/25 { background-color: rgb(var(--color-surface-container-high) / 0.25) !important; }
.bg-surface-container-high\/30 { background-color: rgb(var(--color-surface-container-high) / 0.3) !important; }
.bg-surface-container-high\/40 { background-color: rgb(var(--color-surface-container-high) / 0.4) !important; }
.bg-surface-container-high\/50 { background-color: rgb(var(--color-surface-container-high) / 0.5) !important; }
.bg-surface-container-high\/70 { background-color: rgb(var(--color-surface-container-high) / 0.7) !important; }
.bg-primary { background-color: rgb(var(--color-primary)) !important; }
.bg-primary-container { background-color: rgb(var(--color-primary-container)) !important; }
.bg-primary\/5 { background-color: rgb(var(--color-primary) / 0.05) !important; }
.bg-primary\/10 { background-color: rgb(var(--color-primary) / 0.1) !important; }
.bg-primary\/15 { background-color: rgb(var(--color-primary) / 0.15) !important; }
.bg-primary\/20 { background-color: rgb(var(--color-primary) / 0.2) !important; }
.bg-secondary { background-color: rgb(var(--color-secondary)) !important; }
.bg-secondary\/5 { background-color: rgb(var(--color-secondary) / 0.05) !important; }
.bg-secondary\/10 { background-color: rgb(var(--color-secondary) / 0.1) !important; }
.bg-secondary\/15 { background-color: rgb(var(--color-secondary) / 0.15) !important; }
.bg-secondary\/20 { background-color: rgb(var(--color-secondary) / 0.2) !important; }
.bg-secondary\/30 { background-color: rgb(var(--color-secondary) / 0.3) !important; }
.bg-secondary\/40 { background-color: rgb(var(--color-secondary) / 0.4) !important; }
.bg-secondary\/50 { background-color: rgb(var(--color-secondary) / 0.5) !important; }
.bg-tertiary { background-color: rgb(var(--color-tertiary)) !important; }
.bg-tertiary\/5 { background-color: rgb(var(--color-tertiary) / 0.05) !important; }
.bg-tertiary\/10 { background-color: rgb(var(--color-tertiary) / 0.1) !important; }
.bg-error { background-color: rgb(var(--color-error)) !important; }
.bg-error\/10 { background-color: rgb(var(--color-error) / 0.1) !important; }
.bg-error\/15 { background-color: rgb(var(--color-error) / 0.15) !important; }
.bg-error\/20 { background-color: rgb(var(--color-error) / 0.2) !important; }
.bg-error\/25 { background-color: rgb(var(--color-error) / 0.25) !important; }
.bg-outline-variant\/10 { background-color: rgb(var(--color-outline-variant) / 0.1) !important; }
.bg-outline-variant\/30 { background-color: rgb(var(--color-outline-variant) / 0.3) !important; }
.bg-outline-variant\/60 { background-color: rgb(var(--color-outline-variant) / 0.6) !important; }

.hover\:bg-primary\/90:hover { background-color: rgb(var(--color-primary) / 0.9) !important; }
.hover\:bg-secondary\/30:hover { background-color: rgb(var(--color-secondary) / 0.3) !important; }
.hover\:bg-error\/25:hover { background-color: rgb(var(--color-error) / 0.25) !important; }
.hover\:bg-surface-bright:hover { background-color: rgb(var(--color-surface-bright)) !important; }
.hover\:bg-surface-container:hover { background-color: rgb(var(--color-surface-container)) !important; }
.hover\:bg-surface-container-high:hover { background-color: rgb(var(--color-surface-container-high)) !important; }
.hover\:bg-surface-container-highest:hover { background-color: rgb(var(--color-surface-container-highest)) !important; }

.text-on-surface { color: rgb(var(--color-on-surface)) !important; }
.text-on-surface-variant { color: rgb(var(--color-on-surface-variant)) !important; }
.text-on-surface-variant\/60 { color: rgb(var(--color-on-surface-variant) / 0.6) !important; }
.text-slate-300,
.text-slate-400,
.text-slate-500 { color: rgb(var(--color-on-surface-variant)) !important; }
.text-primary { color: rgb(var(--color-primary)) !important; }
.text-primary\/60 { color: rgb(var(--color-primary) / 0.6) !important; }
.text-secondary { color: rgb(var(--color-secondary)) !important; }
.text-tertiary { color: rgb(var(--color-tertiary)) !important; }
.text-error { color: rgb(var(--color-error)) !important; }
.text-surface { color: rgb(var(--color-surface)) !important; }

.hover\:text-primary:hover { color: rgb(var(--color-primary)) !important; }
.hover\:text-secondary:hover { color: rgb(var(--color-secondary)) !important; }
.hover\:text-on-surface:hover { color: rgb(var(--color-on-surface)) !important; }

.app-switch {
    position: relative;
    display: inline-flex;
    width: 2.75rem;
    height: 1.5rem;
    align-items: center;
    cursor: pointer;
}

.app-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    border: 1px solid rgb(var(--color-control-switch-off-border) / 0.75);
    background-color: rgb(var(--color-control-switch-off-bg));
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.app-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    background-color: rgb(var(--color-control-switch-off-thumb));
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
    transition: transform 180ms ease, background-color 180ms ease;
}

.app-switch-input:checked + .app-switch-track {
    background-color: rgb(var(--color-control-switch-on-bg));
    border-color: rgb(var(--color-control-switch-on-border) / 0.95);
    box-shadow: 0 0 0 1px rgb(var(--color-control-switch-on-bg) / 0.36);
}

.app-switch-input:checked + .app-switch-track .app-switch-thumb {
    transform: translateX(1.25rem);
    background-color: rgb(var(--color-control-switch-on-thumb));
}

.app-switch-input:focus-visible + .app-switch-track {
    box-shadow: 0 0 0 2px rgb(var(--color-background)), 0 0 0 4px rgb(var(--color-control-switch-focus) / 0.52);
}

.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid rgb(var(--color-outline-variant) / 0.35);
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, opacity 120ms ease;
}

.app-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgb(var(--color-background)), 0 0 0 4px rgb(var(--color-focus-ring) / 0.5);
}

.app-btn-primary {
    background-color: rgb(var(--color-control-primary-bg));
    color: rgb(var(--color-control-primary-text));
    border-color: rgb(var(--color-control-primary-bg) / 0.72);
}

.app-btn-primary:hover {
    background-color: rgb(var(--color-control-primary-hover));
}

.app-btn-secondary {
    background-color: rgb(var(--color-secondary) / 0.14);
    color: rgb(var(--color-secondary));
    border-color: rgb(var(--color-secondary) / 0.3);
}

.app-btn-secondary:hover {
    background-color: rgb(var(--color-secondary) / 0.2);
}

.app-btn-ghost {
    background-color: rgb(var(--color-control-ghost-bg));
    color: rgb(var(--color-control-ghost-text));
    border-color: rgb(var(--color-control-ghost-border) / 0.58);
}

.app-btn-ghost:hover {
    background-color: rgb(var(--color-control-ghost-hover-bg));
}

.app-btn-danger {
    background-color: rgb(var(--color-status-error-surface) / 0.92);
    color: rgb(var(--color-status-error-text));
    border-color: rgb(var(--color-status-error-border) / 0.48);
}

.app-btn-danger:hover {
    background-color: rgb(var(--color-status-error-surface));
}

.app-btn:disabled,
.app-btn[aria-disabled="true"] {
    background-color: rgb(var(--color-control-primary-disabled-bg) / 0.68);
    color: rgb(var(--color-control-primary-disabled-text) / 0.95);
    border-color: rgb(var(--color-control-primary-disabled-border) / 0.55);
    cursor: not-allowed;
}

.app-input {
    border: 1px solid rgb(var(--color-outline-variant) / 0.35);
    border-radius: 0.5rem;
    background-color: rgb(var(--color-surface-container-lowest));
    color: rgb(var(--color-on-surface));
}

.app-input::placeholder {
    color: rgb(var(--color-on-surface-variant) / 0.72);
}

.app-input:focus-visible {
    outline: none;
    border-color: rgb(var(--color-focus-ring) / 0.72);
    box-shadow: 0 0 0 2px rgb(var(--color-background)), 0 0 0 4px rgb(var(--color-focus-ring) / 0.35);
}

.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-weight: 600;
    line-height: 1;
}

.app-badge-success {
    background-color: rgb(var(--color-status-success-surface) / 0.9);
    border-color: rgb(var(--color-status-success-border) / 0.42);
    color: rgb(var(--color-status-success-text));
}

.app-badge-warning {
    background-color: rgb(var(--color-status-warning-surface) / 0.92);
    border-color: rgb(var(--color-status-warning-border) / 0.46);
    color: rgb(var(--color-status-warning-text));
}

.app-badge-error {
    background-color: rgb(var(--color-status-error-surface) / 0.92);
    border-color: rgb(var(--color-status-error-border) / 0.46);
    color: rgb(var(--color-status-error-text));
}

.app-badge-neutral {
    background-color: rgb(var(--color-status-neutral-surface) / 0.9);
    border-color: rgb(var(--color-status-neutral-border) / 0.42);
    color: rgb(var(--color-status-neutral-text));
}

.app-alert {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    box-shadow: 0 14px 34px rgb(var(--color-surface-container-lowest) / 0.22);
}

.app-alert-success {
    background-color: rgb(var(--color-status-success-surface) / 0.95);
    border-color: rgb(var(--color-status-success-border) / 0.5);
    color: rgb(var(--color-status-success-text));
}

.app-alert-warning {
    background-color: rgb(var(--color-status-warning-surface) / 0.96);
    border-color: rgb(var(--color-status-warning-border) / 0.54);
    color: rgb(var(--color-status-warning-text));
}

.app-alert-error {
    background-color: rgb(var(--color-status-error-surface) / 0.96);
    border-color: rgb(var(--color-status-error-border) / 0.54);
    color: rgb(var(--color-status-error-text));
}

.app-alert-neutral {
    background-color: rgb(var(--color-status-neutral-surface) / 0.94);
    border-color: rgb(var(--color-status-neutral-border) / 0.46);
    color: rgb(var(--color-status-neutral-text));
}

.status-card-success {
    background-color: rgb(var(--color-status-success-surface) / 0.94) !important;
    border-color: rgb(var(--color-status-success-border) / 0.48) !important;
    color: rgb(var(--color-status-success-text)) !important;
    box-shadow: inset 3px 0 0 rgb(var(--color-status-success-bg) / 0.95);
}

.status-card-success p:first-child {
    color: rgb(var(--color-status-success-strong));
}

.status-card-warning {
    background-color: rgb(var(--color-status-warning-surface) / 0.94) !important;
    border-color: rgb(var(--color-status-warning-border) / 0.5) !important;
    color: rgb(var(--color-status-warning-text)) !important;
    box-shadow: inset 3px 0 0 rgb(var(--color-status-warning-bg) / 0.95);
}

.status-card-warning p:first-child {
    color: rgb(var(--color-status-warning-strong));
}

.status-card-error {
    background-color: rgb(var(--color-status-error-surface) / 0.94) !important;
    border-color: rgb(var(--color-status-error-border) / 0.5) !important;
    color: rgb(var(--color-status-error-text)) !important;
    box-shadow: inset 3px 0 0 rgb(var(--color-status-error-bg) / 0.95);
}

.status-card-error p:first-child {
    color: rgb(var(--color-status-error-strong));
}

.status-card-neutral {
    background-color: rgb(var(--color-status-neutral-surface) / 0.92) !important;
    border-color: rgb(var(--color-status-neutral-border) / 0.44) !important;
    color: rgb(var(--color-status-neutral-text)) !important;
    box-shadow: inset 3px 0 0 rgb(var(--color-status-neutral-bg) / 0.8);
}

.status-card-neutral p:first-child {
    color: rgb(var(--color-status-neutral-strong));
}

.status-dot-success {
    background-color: rgb(var(--color-status-success-bg)) !important;
}

.status-dot-warning {
    background-color: rgb(var(--color-status-warning-bg)) !important;
}

.status-dot-error {
    background-color: rgb(var(--color-status-error-bg)) !important;
}

.status-dot-neutral {
    background-color: rgb(var(--color-status-neutral-bg)) !important;
}

.ai-compare-card {
    border: 1px solid transparent;
    border-radius: 0.75rem;
    box-shadow: 0 18px 36px rgb(var(--color-surface-container-lowest) / 0.16);
}

.ai-compare-current {
    background-color: rgb(var(--color-compare-current-surface)) !important;
    border-color: rgb(var(--color-compare-current-border) / 0.42) !important;
    color: rgb(var(--color-compare-current-text)) !important;
}

.ai-compare-proposed {
    background-color: rgb(var(--color-compare-proposed-surface)) !important;
    border-color: rgb(var(--color-compare-proposed-border) / 0.42) !important;
    color: rgb(var(--color-compare-proposed-text)) !important;
}

.ai-compare-change {
    background-color: rgb(var(--color-compare-change-surface)) !important;
    border-color: rgb(var(--color-compare-change-border) / 0.42) !important;
    color: rgb(var(--color-compare-change-text)) !important;
}

.ai-compare-current-strong {
    color: rgb(var(--color-compare-current-strong)) !important;
}

.ai-compare-proposed-strong {
    color: rgb(var(--color-compare-proposed-strong)) !important;
}

.ai-compare-change-strong {
    color: rgb(var(--color-compare-change-strong)) !important;
}

.ai-compare-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-weight: 700;
}

.ai-compare-row-changed {
    background-color: rgb(var(--color-compare-change-surface) / 0.32) !important;
}

.ai-compare-cell-current {
    background-color: rgb(var(--color-compare-current-surface)) !important;
    color: rgb(var(--color-compare-current-text)) !important;
}

.ai-compare-cell-current.ai-compare-cell-changed {
    background-color: rgb(var(--color-compare-current-surface-strong)) !important;
    color: rgb(var(--color-compare-current-strong)) !important;
}

.ai-compare-cell-proposed {
    background-color: rgb(var(--color-compare-proposed-surface)) !important;
    color: rgb(var(--color-compare-proposed-text)) !important;
}

.ai-compare-cell-proposed.ai-compare-cell-changed {
    background-color: rgb(var(--color-compare-proposed-surface-strong)) !important;
    color: rgb(var(--color-compare-proposed-strong)) !important;
    box-shadow: inset 0 0 0 1px rgb(var(--color-compare-proposed-border) / 0.24) !important;
}

@media (prefers-reduced-motion: reduce) {
    .app-switch-track,
    .app-switch-thumb {
        transition: none;
    }
}

button.bg-primary,
a.bg-primary,
button[class*=" bg-primary "],
a[class*=" bg-primary "],
button[class^="bg-primary "],
a[class^="bg-primary "] {
    color: rgb(var(--color-on-primary)) !important;
}

button.bg-primary-container,
a.bg-primary-container,
button[class*=" bg-primary-container "],
a[class*=" bg-primary-container "],
button[class^="bg-primary-container "],
a[class^="bg-primary-container "] {
    background-color: rgb(var(--color-control-primary-bg)) !important;
    color: rgb(var(--color-control-primary-text)) !important;
}

button.bg-primary-container:hover,
a.bg-primary-container:hover,
button[class*=" bg-primary-container "]:hover,
a[class*=" bg-primary-container "]:hover,
button[class^="bg-primary-container "]:hover,
a[class^="bg-primary-container "]:hover {
    background-color: rgb(var(--color-control-primary-hover)) !important;
}

button.bg-secondary,
a.bg-secondary,
button[class*=" bg-secondary "],
a[class*=" bg-secondary "],
button[class^="bg-secondary "],
a[class^="bg-secondary "] {
    color: rgb(var(--color-on-secondary)) !important;
}

button.bg-error,
a.bg-error,
button[class*=" bg-error "],
a[class*=" bg-error "],
button[class^="bg-error "],
a[class^="bg-error "] {
    color: rgb(var(--color-on-error)) !important;
}

button.bg-gradient-to-r,
a.bg-gradient-to-r,
button.bg-gradient-to-br,
a.bg-gradient-to-br,
button[class*=" bg-gradient-to-r "],
a[class*=" bg-gradient-to-r "],
button[class*=" bg-gradient-to-br "],
a[class*=" bg-gradient-to-br "],
button[class^="bg-gradient-to-r "],
a[class^="bg-gradient-to-r "],
button[class^="bg-gradient-to-br "],
a[class^="bg-gradient-to-br "] {
    color: rgb(var(--color-on-primary-container)) !important;
    border-color: rgb(var(--color-primary) / 0.22) !important;
}

button.bg-surface-container,
a.bg-surface-container,
button.bg-surface-container-high,
a.bg-surface-container-high,
button.bg-surface-container-highest,
a.bg-surface-container-highest,
button[class*=" bg-surface-container"],
a[class*=" bg-surface-container"],
button[class^="bg-surface-container"],
a[class^="bg-surface-container"] {
    color: rgb(var(--color-on-surface)) !important;
}

button.text-secondary.bg-surface-container-high,
a.text-secondary.bg-surface-container-high,
button.text-secondary[class*=" bg-surface-container"],
a.text-secondary[class*=" bg-surface-container"] {
    color: rgb(var(--color-secondary)) !important;
}

button:disabled,
button[aria-disabled="true"],
a[aria-disabled="true"] {
    color: rgb(var(--color-on-surface-variant) / 0.68) !important;
}

button.bg-primary:disabled,
button.bg-primary[aria-disabled="true"] {
    background-color: rgb(var(--color-primary) / 0.55) !important;
    color: rgb(var(--color-on-primary) / 0.92) !important;
}

button.bg-primary-container:disabled,
button.bg-primary-container[aria-disabled="true"],
button.bg-gradient-to-r:disabled,
button.bg-gradient-to-r[aria-disabled="true"],
button.bg-gradient-to-br:disabled,
button.bg-gradient-to-br[aria-disabled="true"] {
    background-image: none !important;
    background-color: rgb(var(--color-control-primary-disabled-bg) / 0.68) !important;
    color: rgb(var(--color-control-primary-disabled-text) / 0.95) !important;
    border-color: rgb(var(--color-control-primary-disabled-border) / 0.55) !important;
}

.border-primary { border-color: rgb(var(--color-primary)) !important; }
.border-primary\/20 { border-color: rgb(var(--color-primary) / 0.2) !important; }
.border-primary\/30 { border-color: rgb(var(--color-primary) / 0.3) !important; }
.border-primary\/40 { border-color: rgb(var(--color-primary) / 0.4) !important; }
.border-secondary\/30 { border-color: rgb(var(--color-secondary) / 0.3) !important; }
.border-surface { border-color: rgb(var(--color-surface)) !important; }
.border-outline-variant\/5 { border-color: rgb(var(--color-outline-variant) / 0.05) !important; }
.border-outline-variant\/10 { border-color: rgb(var(--color-outline-variant) / 0.1) !important; }
.border-outline-variant\/15 { border-color: rgb(var(--color-outline-variant) / 0.15) !important; }
.border-outline-variant\/20 { border-color: rgb(var(--color-outline-variant) / 0.2) !important; }
.border-outline-variant\/30 { border-color: rgb(var(--color-outline-variant) / 0.3) !important; }
.border-outline-variant\/40 { border-color: rgb(var(--color-outline-variant) / 0.4) !important; }

.app-is-busy {
    cursor: progress;
}

.app-interaction-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5rem 1rem 1rem;
    pointer-events: none;
    opacity: 0;
    background: rgb(var(--color-background) / 0);
    transition: opacity 160ms ease, background-color 160ms ease;
}

.app-interaction-mask.is-visible {
    pointer-events: auto;
    opacity: 1;
    background: rgb(var(--color-background) / 0.38);
    backdrop-filter: blur(2px);
}

.app-interaction-panel {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    max-width: min(92vw, 24rem);
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(var(--color-outline-variant) / 0.35);
    border-radius: 0.5rem;
    background: rgb(var(--color-surface-container-high) / 0.96);
    color: rgb(var(--color-on-surface));
    box-shadow: 0 20px 45px rgb(0 0 0 / 0.28);
    font-size: 0.875rem;
    font-weight: 700;
    transform: translateY(-0.35rem);
    transition: transform 160ms ease;
}

.app-interaction-mask.is-visible .app-interaction-panel {
    transform: translateY(0);
}

.app-interaction-spinner,
.app-inline-spinner {
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 9999px;
    border: 2px solid rgb(var(--color-primary) / 0.28);
    border-top-color: rgb(var(--color-primary));
    animation: app-spin 760ms linear infinite;
}

.app-interaction-spinner {
    width: 1.35rem;
    height: 1.35rem;
}

.app-inline-spinner {
    width: 1rem;
    height: 1rem;
}

.is-processing {
    cursor: wait !important;
    opacity: 0.72;
}

button.is-processing,
a.is-processing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

button.is-processing::after,
a.is-processing::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border-radius: 9999px;
    border: 2px solid rgb(var(--color-primary) / 0.28);
    border-top-color: rgb(var(--color-primary));
    animation: app-spin 760ms linear infinite;
}

@keyframes app-spin {
    to {
        transform: rotate(360deg);
    }
}