/* ceramic_add.css — missing utility classes
 *
 * Generated 2026-04-20 для 25 ceramic+opacity комбинаций, использованных
 * в blade но отсутствующих в _ceramic.css (pre-compiled). Quick fix пока
 * не переведём ceramic на JIT (вариант B в project_ceramic_jit_refactor.md).
 *
 * При добавлении новой комбинации: либо регенерировать через скрипт
 * (scripts/gen-ceramic-missing.sh — TODO), либо вручную дописать по
 * образцу.
 */

/* Dark-only vars fallback для light mode.
 *
 * _ceramic.css оригинально спроектирован как Raycast dark-theme. 28 vars
 * определены только в html.dark {} блоке — любое их использование
 * (backdrop-blur, card-gradient, glow-*, shadow-glass-*, mask-fade-*)
 * ломается в light mode: var(--X) → invalid → ignored.
 *
 * Дублируем все 28 в :root как fallback. html.dark всё равно переопределяет
 * через более specific selector (те же значения — pure safety).
 *
 * Audit 2026-04-21 в рамках EXFA theme migration (см. memory
 * project_ceramic_jit_refactor.md). */
/* ════════════════════════════════════════════════════════════════════
 * RGB component vars — auto-generated 2026-04-27.
 * Used by Tailwind: rgb(var(--ceramic-X-rgb) / <alpha-value>).
 * Hex/var aliases остаются для legacy var(--ceramic-X) usages. */

:root {
    --ceramic-slate-50-rgb: 248 250 252;
    --ceramic-slate-100-rgb: 241 245 249;
    --ceramic-slate-200-rgb: 226 232 240;
    --ceramic-slate-300-rgb: 203 213 225;
    --ceramic-slate-400-rgb: 148 163 184;
    --ceramic-slate-500-rgb: 100 116 139;
    --ceramic-slate-600-rgb: 71 85 105;
    --ceramic-slate-700-rgb: 51 65 85;
    --ceramic-slate-800-rgb: 30 41 59;
    --ceramic-slate-900-rgb: 15 23 42;
    --ceramic-slate-950-rgb: 2 6 23;
    --ceramic-gray-50-rgb: 250 250 251;
    --ceramic-gray-100-rgb: 246 246 247;
    --ceramic-gray-150-rgb: 240 240 241;
    --ceramic-gray-200-rgb: 236 236 238;
    --ceramic-gray-300-rgb: 219 219 224;
    --ceramic-gray-400-rgb: 199 199 207;
    --ceramic-gray-500-rgb: 173 173 183;
    --ceramic-gray-600-rgb: 144 144 157;
    --ceramic-gray-700-rgb: 118 118 132;
    --ceramic-gray-800-rgb: 95 95 111;
    --ceramic-gray-900-rgb: 76 76 92;
    --ceramic-gray-1000-rgb: 61 61 74;
    --ceramic-gray-1100-rgb: 51 51 62;
    --ceramic-gray-1200-rgb: 43 43 52;
    --ceramic-gray-1300-rgb: 35 35 40;
    --ceramic-gray-1400-rgb: 27 27 31;
    --ceramic-gray-1500-rgb: 17 17 19;
    --ceramic-zinc-50-rgb: 250 250 250;
    --ceramic-zinc-100-rgb: 244 244 245;
    --ceramic-zinc-200-rgb: 228 228 231;
    --ceramic-zinc-300-rgb: 212 212 216;
    --ceramic-zinc-400-rgb: 161 161 170;
    --ceramic-zinc-500-rgb: 113 113 122;
    --ceramic-zinc-600-rgb: 82 82 91;
    --ceramic-zinc-700-rgb: 63 63 70;
    --ceramic-zinc-800-rgb: 39 39 42;
    --ceramic-zinc-900-rgb: 28 28 32;
    --ceramic-zinc-950-rgb: 9 9 11;
    --ceramic-zinc-975-rgb: 12 12 14;
    --ceramic-zinc-1000-rgb: 9 9 11;
    --ceramic-neutral-50-rgb: 250 250 250;
    --ceramic-neutral-100-rgb: 245 245 245;
    --ceramic-neutral-200-rgb: 229 229 229;
    --ceramic-neutral-300-rgb: 212 212 212;
    --ceramic-neutral-400-rgb: 163 163 163;
    --ceramic-neutral-500-rgb: 115 115 115;
    --ceramic-neutral-600-rgb: 82 82 82;
    --ceramic-neutral-700-rgb: 64 64 64;
    --ceramic-neutral-800-rgb: 38 38 38;
    --ceramic-neutral-900-rgb: 23 23 23;
    --ceramic-neutral-1000-rgb: 20 20 20;
    --ceramic-neutral-1100-rgb: 16 16 16;
    --ceramic-neutral-1200-rgb: 13 13 13;
    --ceramic-neutral-1300-rgb: 10 10 10;
    --ceramic-stone-50-rgb: 250 250 249;
    --ceramic-stone-100-rgb: 245 245 244;
    --ceramic-stone-200-rgb: 231 229 228;
    --ceramic-stone-300-rgb: 214 211 209;
    --ceramic-stone-400-rgb: 168 162 158;
    --ceramic-stone-500-rgb: 120 113 108;
    --ceramic-stone-600-rgb: 87 83 78;
    --ceramic-stone-700-rgb: 68 64 60;
    --ceramic-stone-800-rgb: 41 37 36;
    --ceramic-stone-900-rgb: 28 25 23;
    --ceramic-stone-1000-rgb: 23 21 15;
    --ceramic-stone-1100-rgb: 19 18 14;
    --ceramic-stone-1200-rgb: 15 14 13;
    --ceramic-stone-1300-rgb: 12 10 9;
    --ceramic-purple-50-rgb: 245 243 255;
    --ceramic-purple-100-rgb: 227 224 255;
    --ceramic-purple-200-rgb: 204 200 255;
    --ceramic-purple-300-rgb: 186 176 255;
    --ceramic-purple-400-rgb: 166 152 255;
    --ceramic-purple-500-rgb: 146 128 255;
    --ceramic-purple-600-rgb: 132 107 255;
    --ceramic-purple-700-rgb: 108 71 255;
    --ceramic-purple-800-rgb: 95 21 254;
    --ceramic-purple-900-rgb: 77 6 209;
    --ceramic-purple-1000-rgb: 55 7 166;
    --ceramic-purple-1100-rgb: 39 5 124;
    --ceramic-purple-1200-rgb: 28 4 95;
    --ceramic-purple-1300-rgb: 22 3 75;
    --ceramic-violet-50-rgb: 245 243 255;
    --ceramic-violet-100-rgb: 237 233 254;
    --ceramic-violet-200-rgb: 221 214 254;
    --ceramic-violet-300-rgb: 196 181 253;
    --ceramic-violet-400-rgb: 167 139 250;
    --ceramic-violet-500-rgb: 139 92 246;
    --ceramic-violet-600-rgb: 124 58 237;
    --ceramic-violet-700-rgb: 109 40 217;
    --ceramic-violet-800-rgb: 91 33 182;
    --ceramic-violet-900-rgb: 76 29 149;
    --ceramic-violet-1000-rgb: 61 24 120;
    --ceramic-violet-1100-rgb: 48 20 101;
    --ceramic-violet-1200-rgb: 37 15 82;
    --ceramic-violet-1300-rgb: 30 13 66;
    --ceramic-indigo-50-rgb: 238 242 255;
    --ceramic-indigo-100-rgb: 224 231 255;
    --ceramic-indigo-200-rgb: 199 210 254;
    --ceramic-indigo-300-rgb: 165 180 252;
    --ceramic-indigo-400-rgb: 129 140 248;
    --ceramic-indigo-500-rgb: 99 102 241;
    --ceramic-indigo-600-rgb: 79 70 229;
    --ceramic-indigo-700-rgb: 67 56 202;
    --ceramic-indigo-800-rgb: 55 48 163;
    --ceramic-indigo-900-rgb: 49 46 129;
    --ceramic-indigo-1000-rgb: 40 37 105;
    --ceramic-indigo-1100-rgb: 32 29 85;
    --ceramic-indigo-1200-rgb: 25 22 67;
    --ceramic-indigo-1300-rgb: 20 18 53;
    --ceramic-fuchsia-50-rgb: 253 244 255;
    --ceramic-fuchsia-100-rgb: 250 232 255;
    --ceramic-fuchsia-200-rgb: 245 208 254;
    --ceramic-fuchsia-300-rgb: 240 171 252;
    --ceramic-fuchsia-400-rgb: 232 121 249;
    --ceramic-fuchsia-500-rgb: 217 70 239;
    --ceramic-fuchsia-600-rgb: 192 38 211;
    --ceramic-fuchsia-700-rgb: 162 28 175;
    --ceramic-fuchsia-800-rgb: 134 25 143;
    --ceramic-fuchsia-900-rgb: 112 26 117;
    --ceramic-fuchsia-1000-rgb: 92 21 96;
    --ceramic-fuchsia-1100-rgb: 73 17 77;
    --ceramic-fuchsia-1200-rgb: 58 13 62;
    --ceramic-fuchsia-1300-rgb: 46 10 49;
    --ceramic-pink-50-rgb: 253 242 248;
    --ceramic-pink-100-rgb: 252 231 243;
    --ceramic-pink-200-rgb: 251 207 232;
    --ceramic-pink-300-rgb: 249 168 212;
    --ceramic-pink-400-rgb: 244 114 182;
    --ceramic-pink-500-rgb: 236 72 153;
    --ceramic-pink-600-rgb: 219 39 119;
    --ceramic-pink-700-rgb: 190 24 93;
    --ceramic-pink-800-rgb: 157 23 77;
    --ceramic-pink-900-rgb: 131 24 67;
    --ceramic-pink-1000-rgb: 109 20 55;
    --ceramic-pink-1100-rgb: 88 16 44;
    --ceramic-pink-1200-rgb: 70 13 35;
    --ceramic-pink-1300-rgb: 55 9 28;
    --ceramic-rose-50-rgb: 255 241 242;
    --ceramic-rose-100-rgb: 255 228 230;
    --ceramic-rose-200-rgb: 254 205 211;
    --ceramic-rose-300-rgb: 253 164 175;
    --ceramic-rose-400-rgb: 251 113 133;
    --ceramic-rose-500-rgb: 244 63 94;
    --ceramic-rose-600-rgb: 225 29 72;
    --ceramic-rose-700-rgb: 190 18 60;
    --ceramic-rose-800-rgb: 159 18 57;
    --ceramic-rose-900-rgb: 136 19 55;
    --ceramic-rose-1000-rgb: 113 16 46;
    --ceramic-rose-1100-rgb: 91 13 37;
    --ceramic-rose-1200-rgb: 72 9 30;
    --ceramic-rose-1300-rgb: 56 7 24;
    --ceramic-green-50-rgb: 238 251 243;
    --ceramic-green-100-rgb: 196 243 217;
    --ceramic-green-200-rgb: 138 232 180;
    --ceramic-green-300-rgb: 92 221 150;
    --ceramic-green-400-rgb: 60 204 126;
    --ceramic-green-500-rgb: 42 179 104;
    --ceramic-green-600-rgb: 35 155 90;
    --ceramic-green-700-rgb: 28 132 76;
    --ceramic-green-800-rgb: 22 109 63;
    --ceramic-green-900-rgb: 17 89 51;
    --ceramic-green-1000-rgb: 13 72 41;
    --ceramic-green-1100-rgb: 10 57 32;
    --ceramic-green-1200-rgb: 7 44 24;
    --ceramic-green-1300-rgb: 4 32 17;
    --ceramic-red-50-rgb: 254 245 245;
    --ceramic-red-100-rgb: 253 225 225;
    --ceramic-red-200-rgb: 249 196 196;
    --ceramic-red-300-rgb: 244 163 163;
    --ceramic-red-400-rgb: 236 125 125;
    --ceramic-red-500-rgb: 229 99 99;
    --ceramic-red-600-rgb: 209 77 77;
    --ceramic-red-700-rgb: 184 60 60;
    --ceramic-red-800-rgb: 156 48 48;
    --ceramic-red-900-rgb: 131 38 38;
    --ceramic-red-1000-rgb: 109 30 30;
    --ceramic-red-1100-rgb: 89 23 23;
    --ceramic-red-1200-rgb: 72 19 19;
    --ceramic-red-1300-rgb: 58 14 14;
    --ceramic-red-1400-rgb: 42 6 6;
    --ceramic-red-1500-rgb: 30 3 3;
    --ceramic-orange-rgb: 212 106 34;
    --ceramic-orange-50-rgb: 255 247 240;
    --ceramic-orange-100-rgb: 255 227 198;
    --ceramic-orange-200-rgb: 253 204 158;
    --ceramic-orange-300-rgb: 249 178 114;
    --ceramic-orange-400-rgb: 245 152 82;
    --ceramic-orange-500-rgb: 238 126 52;
    --ceramic-orange-600-rgb: 212 106 34;
    --ceramic-orange-700-rgb: 183 88 26;
    --ceramic-orange-800-rgb: 154 72 20;
    --ceramic-orange-900-rgb: 128 56 14;
    --ceramic-orange-1000-rgb: 107 44 9;
    --ceramic-orange-1100-rgb: 88 35 8;
    --ceramic-orange-1200-rgb: 71 28 7;
    --ceramic-orange-1300-rgb: 56 21 5;
    --ceramic-amber-50-rgb: 255 248 235;
    --ceramic-amber-100-rgb: 255 237 209;
    --ceramic-amber-200-rgb: 253 216 160;
    --ceramic-amber-300-rgb: 252 192 107;
    --ceramic-amber-400-rgb: 251 169 62;
    --ceramic-amber-500-rgb: 224 125 0;
    --ceramic-amber-600-rgb: 219 116 8;
    --ceramic-amber-700-rgb: 182 88 11;
    --ceramic-amber-800-rgb: 147 67 16;
    --ceramic-amber-900-rgb: 121 55 16;
    --ceramic-amber-1000-rgb: 95 41 4;
    --ceramic-amber-1100-rgb: 82 40 7;
    --ceramic-amber-1200-rgb: 65 32 5;
    --ceramic-amber-1300-rgb: 51 26 4;
    --ceramic-yellow-50-rgb: 254 252 232;
    --ceramic-yellow-100-rgb: 254 244 140;
    --ceramic-yellow-200-rgb: 245 224 70;
    --ceramic-yellow-300-rgb: 229 202 46;
    --ceramic-yellow-400-rgb: 207 181 24;
    --ceramic-yellow-500-rgb: 191 160 8;
    --ceramic-yellow-600-rgb: 166 138 7;
    --ceramic-yellow-700-rgb: 142 117 6;
    --ceramic-yellow-800-rgb: 119 98 5;
    --ceramic-yellow-900-rgb: 100 80 4;
    --ceramic-yellow-1000-rgb: 82 63 3;
    --ceramic-yellow-1100-rgb: 64 48 3;
    --ceramic-yellow-1200-rgb: 48 35 4;
    --ceramic-yellow-1300-rgb: 36 25 2;
    --ceramic-lime-50-rgb: 247 254 231;
    --ceramic-lime-100-rgb: 236 252 203;
    --ceramic-lime-200-rgb: 217 249 157;
    --ceramic-lime-300-rgb: 190 242 100;
    --ceramic-lime-400-rgb: 163 230 53;
    --ceramic-lime-500-rgb: 132 204 22;
    --ceramic-lime-600-rgb: 101 163 13;
    --ceramic-lime-700-rgb: 77 124 15;
    --ceramic-lime-800-rgb: 63 98 18;
    --ceramic-lime-900-rgb: 54 83 20;
    --ceramic-lime-1000-rgb: 45 68 16;
    --ceramic-lime-1100-rgb: 36 54 12;
    --ceramic-lime-1200-rgb: 28 41 9;
    --ceramic-lime-1300-rgb: 22 31 7;
    --ceramic-emerald-50-rgb: 236 253 245;
    --ceramic-emerald-100-rgb: 209 250 229;
    --ceramic-emerald-200-rgb: 167 243 208;
    --ceramic-emerald-300-rgb: 110 231 183;
    --ceramic-emerald-400-rgb: 52 211 153;
    --ceramic-emerald-500-rgb: 16 185 129;
    --ceramic-emerald-600-rgb: 5 150 105;
    --ceramic-emerald-700-rgb: 4 120 87;
    --ceramic-emerald-800-rgb: 6 95 70;
    --ceramic-emerald-900-rgb: 6 78 59;
    --ceramic-emerald-1000-rgb: 5 64 50;
    --ceramic-emerald-1100-rgb: 4 51 40;
    --ceramic-emerald-1200-rgb: 3 40 32;
    --ceramic-emerald-1300-rgb: 2 31 24;
    --ceramic-teal-50-rgb: 240 253 250;
    --ceramic-teal-100-rgb: 204 251 241;
    --ceramic-teal-200-rgb: 153 246 228;
    --ceramic-teal-300-rgb: 94 234 212;
    --ceramic-teal-400-rgb: 45 212 191;
    --ceramic-teal-500-rgb: 20 184 166;
    --ceramic-teal-600-rgb: 13 148 136;
    --ceramic-teal-700-rgb: 15 118 110;
    --ceramic-teal-800-rgb: 17 94 89;
    --ceramic-teal-900-rgb: 19 78 74;
    --ceramic-teal-1000-rgb: 16 64 61;
    --ceramic-teal-1100-rgb: 13 51 49;
    --ceramic-teal-1200-rgb: 10 40 39;
    --ceramic-teal-1300-rgb: 8 31 30;
    --ceramic-cyan-50-rgb: 236 254 255;
    --ceramic-cyan-100-rgb: 207 250 254;
    --ceramic-cyan-200-rgb: 165 243 252;
    --ceramic-cyan-300-rgb: 103 232 249;
    --ceramic-cyan-400-rgb: 34 211 238;
    --ceramic-cyan-500-rgb: 6 182 212;
    --ceramic-cyan-600-rgb: 8 145 178;
    --ceramic-cyan-700-rgb: 14 116 144;
    --ceramic-cyan-800-rgb: 21 94 117;
    --ceramic-cyan-900-rgb: 22 78 99;
    --ceramic-cyan-1000-rgb: 19 64 82;
    --ceramic-cyan-1100-rgb: 16 51 66;
    --ceramic-cyan-1200-rgb: 13 40 52;
    --ceramic-cyan-1300-rgb: 10 31 40;
    --ceramic-sky-50-rgb: 240 249 255;
    --ceramic-sky-100-rgb: 224 242 254;
    --ceramic-sky-200-rgb: 186 230 253;
    --ceramic-sky-300-rgb: 125 211 252;
    --ceramic-sky-400-rgb: 56 189 248;
    --ceramic-sky-500-rgb: 14 165 233;
    --ceramic-sky-600-rgb: 2 132 199;
    --ceramic-sky-700-rgb: 3 105 161;
    --ceramic-sky-800-rgb: 7 89 133;
    --ceramic-sky-900-rgb: 12 74 110;
    --ceramic-sky-1000-rgb: 10 61 91;
    --ceramic-sky-1100-rgb: 8 49 73;
    --ceramic-sky-1200-rgb: 6 38 58;
    --ceramic-sky-1300-rgb: 5 29 45;
    --ceramic-blue-50-rgb: 246 250 255;
    --ceramic-blue-100-rgb: 218 234 254;
    --ceramic-blue-200-rgb: 180 213 254;
    --ceramic-blue-300-rgb: 141 194 253;
    --ceramic-blue-400-rgb: 115 172 250;
    --ceramic-blue-500-rgb: 102 148 248;
    --ceramic-blue-600-rgb: 48 127 246;
    --ceramic-blue-700-rgb: 35 109 215;
    --ceramic-blue-800-rgb: 28 91 182;
    --ceramic-blue-900-rgb: 23 68 166;
    --ceramic-blue-1000-rgb: 15 49 142;
    --ceramic-blue-1100-rgb: 14 35 105;
    --ceramic-blue-1200-rgb: 11 28 73;
    --ceramic-blue-1300-rgb: 12 22 55;
    --ceramic-white-rgb: 255 255 255;
    --ceramic-black-rgb: 0 0 0;
}

html {
    --ceramic-primary-rgb: var(--ceramic-slate-900-rgb);
    --ceramic-secondary-rgb: var(--ceramic-slate-700-rgb);
    --ceramic-dimmed-rgb: var(--ceramic-slate-400-rgb);
    --ceramic-positive-rgb: var(--ceramic-green-700-rgb);
    --ceramic-negative-rgb: var(--ceramic-red-700-rgb);
    --ceramic-warning-rgb: var(--ceramic-orange-500-rgb);
    --ceramic-brand-rgb: var(--color-brand-rgb);
    --ceramic-info-rgb: var(--ceramic-blue-700-rgb);
    --ceramic-bg-main-rgb: var(--ceramic-white-rgb);
    --ceramic-bg-menu-rgb: var(--ceramic-white-rgb);
    --ceramic-bg-separator-rgb: var(--ceramic-gray-200-rgb);
    --ceramic-cream-0-rgb: 255 255 255;
    --ceramic-cream-100-rgb: 250 249 245;
    --ceramic-cream-200-rgb: 244 242 234;
    --ceramic-cream-300-rgb: 237 235 226;
    --ceramic-cream-400-rgb: 229 226 212;
}

html.dark {
    --ceramic-primary-rgb: var(--ceramic-gray-100-rgb);
    --ceramic-secondary-rgb: var(--ceramic-gray-500-rgb);
    --ceramic-dimmed-rgb: var(--ceramic-gray-800-rgb);
    --ceramic-positive-rgb: var(--ceramic-green-400-rgb);
    --ceramic-negative-rgb: var(--ceramic-red-600-rgb);
    --ceramic-warning-rgb: var(--ceramic-orange-500-rgb);
    --ceramic-brand-rgb: var(--color-brand-rgb);
    --ceramic-orange-rgb: var(--ceramic-orange-500-rgb);
    --ceramic-info-rgb: var(--ceramic-blue-600-rgb);
    --ceramic-bg-main-rgb: var(--ceramic-gray-1400-rgb);
    --ceramic-bg-menu-rgb: var(--ceramic-gray-1200-rgb);
    --ceramic-bg-separator-rgb: var(--ceramic-gray-1400-rgb);
}

html[data-accent="blue"] {
    --ceramic-brand-rgb: var(--ceramic-blue-600-rgb);
}

html[data-accent="purple"] {
    --ceramic-brand-rgb: var(--ceramic-purple-600-rgb);
}

html[data-accent="green"] {
    --ceramic-brand-rgb: var(--ceramic-green-600-rgb);
}

html.dark[data-accent="blue"] {
    --ceramic-brand-rgb: var(--ceramic-blue-500-rgb);
}

html.dark[data-accent="purple"] {
    --ceramic-brand-rgb: var(--ceramic-purple-500-rgb);
}

html.dark[data-accent="green"] {
    --ceramic-brand-rgb: var(--ceramic-green-500-rgb);
}

/* Stats: generated 346 -rgb vars */

:root {
    /* Card gradients */
    --bg-card-gradient: linear-gradient(137deg, rgba(17, 18, 20, 0.75) 4.87%, rgba(12, 13, 15, 0.9) 75.88%);
    --bg-card-gradient-solid: linear-gradient(137deg, #111214 4.87%, #0c0d0f 75.88%);
    --bg-footer-gradient: linear-gradient(180deg, rgba(7, 8, 10, 0.8) 0.1%, #07080a 32.45%);

    /* Blur levels (Raycast 6 tiers) */
    --blur-xs: blur(2px);
    --blur-sm: blur(10px);
    --blur-md: blur(16px);
    --blur-lg: blur(24px);
    --blur-xl: blur(36px);
    --blur-2xl: blur(48px);

    /* Button secondary (glass) */
    --button-secondary-bg: rgba(255, 255, 255, 0.08);

    /* Glow halos */
    --glow-brand: 0 0 20px 5px rgba(224, 125, 0, 0.08);
    --glow-error: 0 0 20px 0 rgba(229, 99, 99, 0.10);
    --glow-info: 0 0 16px -7px rgba(125, 211, 252, 0.10);
    --glow-success: 0 0 20px 0 rgba(60, 204, 126, 0.10);
    --glow-warm: 0 0 20px 5px rgba(215, 201, 175, 0.05);

    /* Decorative gradients */
    --gradient-depth: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 4.5%, rgba(255, 255, 255, 0.03) 99.51%);
    --gradient-rainbow: conic-gradient(from 137deg at 50% 50%, #0294fe -55.68deg, #ff2136 113.23deg, #9b4dff 195deg, #0294fe 304.32deg, #ff2136 473.23deg);
    --gradient-shine: linear-gradient(92.74deg, rgba(255, 255, 255, 0) 4.57%, rgba(255, 255, 255, 0.06) 65.86%, rgba(255, 255, 255, 0) 95.43%);
    --gradient-subtle-color: radial-gradient(85.77% 49.97% at 51% 5.12%, rgba(255, 150, 150, 0.11) 0, rgba(222, 226, 255, 0.08) 45.83%, rgba(241, 242, 255, 0.02) 100%);

    /* Mask fades */
    --mask-fade-bottom: linear-gradient(180deg, #d9d9d9 60%, rgba(217, 217, 217, 0) 90%);
    --mask-fade-radial: radial-gradient(circle at top left, #fff 29.33%, rgba(255, 255, 255, 0) 60%);
    --mask-fade-right: linear-gradient(90deg, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0.1));

    /* Glass shadows */
    --shadow-glass-halo: 0 0 40px 20px rgba(255, 255, 255, 0.03);
    --shadow-glass-inset: inset 0 0.5px 0 0 hsla(0, 0%, 100%, 0.3);
    --shadow-glass-shine: inset 0 0.5px 0 0 hsla(0, 0%, 100%, 0.3), 0 4px 12px -2px rgba(0, 0, 0, 0.3);
    --shadow-glass-subtle: 0 0 2px 0 rgba(255, 255, 255, 0.19);

    /* Stripe blocks */
    --stripe-block-background: var(--ceramic-gray-1400);
    --stripe-block-border: var(--ceramic-gray-700);

    /* Autofill — без этих vars правило input:-webkit-autofill в _ceramic.css
     * фолбэчит на ничего, и Chrome рисует свой жёлтый/белый default поверх
     * bg-white/dark:bg-ceramic-gray-1500. Видно на /login /register.
     * autofill-ring компенсирует то что webkit-box-shadow перекрывает Tailwind ring-1. */
    --autofill-bg: 250 250 251;    /* = ceramic-gray-50 (#fafafb), синхронно с input bg-ceramic-gray-50 */
    --autofill-ring: 236 236 238;  /* = ceramic-gray-200 (#ececee) */
    --autofill-text: 0 0 0;
}

html.dark {
    --autofill-bg: 17 17 19;        /* = ceramic-gray-1500 (#111113) */
    --autofill-ring: 51 51 56;      /* = ceramic-gray-1200 */
    --autofill-text: 255 255 255;
}

/* Override _ceramic.css правила: добавляем ring layer и text-fill, делаем
 * transition коротким на box-shadow чтобы Chrome переотрисовывал autofill
 * background мгновенно при переключении темы (без перезагрузки). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow:
        0 0 0 1000px rgb(var(--autofill-bg)) inset,
        0 0 0 1px rgb(var(--autofill-ring)) inset;
    -webkit-text-fill-color: rgb(var(--autofill-text));
    caret-color: rgb(var(--autofill-text));
    transition:
        background-color 5000s ease-in-out 0s,
        -webkit-box-shadow 0.2s ease 0s;
}

/* Repaint trigger — body-класс ставится на 1 кадр после theme-changed
 * (см. darkMode.js). Box-shadow меняется → webkit перерисовывает autofill
 * paint layer → после снятия класса видим новый --autofill-bg. */
body.autofill-repaint input:-webkit-autofill,
body.autofill-repaint textarea:-webkit-autofill,
body.autofill-repaint select:-webkit-autofill {
    -webkit-box-shadow:
        0 0 0 1000px transparent inset,
        0 0 0 1px rgb(var(--autofill-ring)) inset !important;
    transition: none !important;
}

.dark\:hover\:bg-ceramic-white\/\[0\.02\]:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-white) calc(0.02 * 100%), transparent);
}

.bg-ceramic-gray-1300\/95 {
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) 95%, transparent);
}

.bg-ceramic-gray-400\/30 {
    background-color: color-mix(in srgb, var(--ceramic-gray-400) 30%, transparent);
}

.bg-ceramic-gray-50\/50 {
    background-color: color-mix(in srgb, var(--ceramic-gray-50) 50%, transparent);
}

.bg-ceramic-green-500\/5 {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 5%, transparent);
}

.bg-ceramic-green-500\/8 {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 8%, transparent);
}

.bg-ceramic-red-500\/5 {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 5%, transparent);
}

.bg-ceramic-red-500\/8 {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 8%, transparent);
}

.border-ceramic-gray-700\/12 {
    border-color: color-mix(in srgb, var(--ceramic-gray-700) 12%, transparent);
}

.checked\:ring-ceramic-green-600\/30:checked {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-600) 30%, transparent);
}

.dark\:bg-ceramic-gray-1300\/30:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) 30%, transparent);
}

.dark\:bg-ceramic-gray-1500\/60:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1500) 60%, transparent);
}

.dark\:bg-ceramic-gray-1500\/80:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-gray-1500) 80%, transparent);
}

.dark\:bg-ceramic-green-900\/30:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green-900) 30%, transparent);
}

.dark\:bg-ceramic-orange-1500\/10:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange-1500) 10%, transparent);
}

.dark\:bg-ceramic-red-1500\/20:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red-1500) 20%, transparent);
}

.dark\:hover\:bg-ceramic-gray-1500\/50:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-gray-1500) 50%, transparent);
}

.dark\:ring-ceramic-gray-800\/50:is(.dark *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-800) 50%, transparent);
}

.focus\:ring-ceramic-blue-500\/40:focus {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-blue-500) 40%, transparent);
}

.hover\:bg-ceramic-gray-700\/4:hover {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 4%, transparent);
}

.hover\:bg-ceramic-red-500\/5:hover {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 5%, transparent);
}

.ring-ceramic-gray-400\/30 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-400) 30%, transparent);
}

.ring-ceramic-green-500\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-500) 12%, transparent);
}

.ring-ceramic-red-500\/12 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-red-500) 12%, transparent);
}

.text-ceramic-green-500\/30 {
    color: color-mix(in srgb, var(--ceramic-green-500) 30%, transparent);
}

.text-ceramic-green-500\/40 {
    color: color-mix(in srgb, var(--ceramic-green-500) 40%, transparent);
}

/* Missing hover/dark:hover utilities — найдены 2026-04-27 на t1.exfa.ru/dashboard.
 * Tailwind JIT не генерирует для ceramic палитры (colors.ceramic убрана из tailwind.config),
 * pre-compiled _ceramic.css не покрывает эти комбинации. */
.hover\:bg-ceramic-gray\/4:hover {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 4%, transparent);
}

.hover\:ring-ceramic-gray-200:hover {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-200) calc(var(--tw-ring-opacity, 1) * 100%), transparent);
}

.dark\:hover\:bg-ceramic-gray-1000:is(.dark *):hover {
    --tw-bg-opacity: 1;
    background-color: color-mix(in srgb, var(--ceramic-gray-1000) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.dark\:hover\:ring-ceramic-gray-1000:is(.dark *):hover {
    --tw-ring-opacity: 1;
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-1000) calc(var(--tw-ring-opacity, 1) * 100%), transparent);
}

/* ════════════════════════════════════════════════════════════════════
 * Auto-generated batch 2026-04-27 — 112 missing ceramic utilities
 * найдены аудитом blade vs _ceramic.css/ceramic_add.css.
 * Ещё ~30 классов skipped как реальные баги в blade (используют
 * неопределённые vars типа --ceramic-blue без shade) — выдан список.
 * ════════════════════════════════════════════════════════════════════ */

.after\:border-ceramic-gray-300::after {
    border-color: var(--ceramic-gray-300);
}

.before\:bg-ceramic-gray-200::before {
    background-color: var(--ceramic-gray-200);
}

.before\:bg-ceramic-primary::before {
    background-color: var(--ceramic-primary);
}

.before\:from-ceramic-white\/4::before {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-white) 4%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.before\:to-ceramic-black\/10::before {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 10%, transparent) var(--tw-gradient-to-position);
}

.before\:to-ceramic-black\/5::before {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 5%, transparent) var(--tw-gradient-to-position);
}

.bg-ceramic-black\/25 {
    background-color: color-mix(in srgb, var(--ceramic-black) 25%, transparent);
}

.bg-ceramic-black\/50 {
    background-color: color-mix(in srgb, var(--ceramic-black) 50%, transparent);
}

.bg-ceramic-brand\/6 {
    background-color: color-mix(in srgb, var(--ceramic-brand) 6%, transparent);
}

.bg-ceramic-brand\/8 {
    background-color: color-mix(in srgb, var(--ceramic-brand) 8%, transparent);
}

.bg-ceramic-gray-500 {
    background-color: var(--ceramic-gray-500);
}

.bg-ceramic-orange\/12 {
    background-color: color-mix(in srgb, var(--ceramic-orange) 12%, transparent);
}

.bg-ceramic-orange\/30 {
    background-color: color-mix(in srgb, var(--ceramic-orange) 30%, transparent);
}

.bg-ceramic-orange\/80 {
    background-color: color-mix(in srgb, var(--ceramic-orange) 80%, transparent);
}

.bg-ceramic-positive\/12 {
    background-color: color-mix(in srgb, var(--ceramic-positive) 12%, transparent);
}

.bg-ceramic-warning\/8 {
    background-color: color-mix(in srgb, var(--ceramic-warning) 8%, transparent);
}

.bg-ceramic-white\/36 {
    background-color: color-mix(in srgb, var(--ceramic-white) 36%, transparent);
}

.bg-ceramic-white\/50 {
    background-color: color-mix(in srgb, var(--ceramic-white) 50%, transparent);
}

.bg-ceramic-white\/8 {
    background-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent);
}

.border-ceramic-gray-100 {
    border-color: var(--ceramic-gray-100);
}

.border-ceramic-gray-1000 {
    border-color: var(--ceramic-gray-1000);
}

.dark\:before\:bg-ceramic-gray-1300:is(.dark *)::before {
    background-color: var(--ceramic-gray-1300);
}

.dark\:before\:ring-ceramic-gray-1500:is(.dark *)::before {
    --tw-ring-color: var(--ceramic-gray-1500);
}

.dark\:before\:text-ceramic-gray-1500:is(.dark *)::before {
    color: var(--ceramic-gray-1500);
}

.dark\:before\:to-ceramic-black\/10:is(.dark *)::before {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 10%, transparent) var(--tw-gradient-to-position);
}

.dark\:bg-ceramic-black\/20:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-black) 20%, transparent);
}

.dark\:bg-ceramic-brand\/12:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-brand) 12%, transparent);
}

.dark\:bg-ceramic-gray-700:is(.dark *) {
    background-color: var(--ceramic-gray-700);
}

.dark\:bg-ceramic-orange\/20:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange) 20%, transparent);
}

.dark\:bg-ceramic-orange\/8:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-orange) 8%, transparent);
}

.dark\:bg-ceramic-white:is(.dark *) {
    background-color: var(--ceramic-white);
}

.dark\:border-ceramic-gray-1000:is(.dark *) {
    border-color: var(--ceramic-gray-1000);
}

.dark\:border-ceramic-gray-700:is(.dark *) {
    border-color: var(--ceramic-gray-700);
}

.dark\:divide-ceramic-gray-1200:is(.dark *) {
    border-color: var(--ceramic-gray-1200);
}

.dark\:focus\:ring-ceramic-black\/88:is(.dark *):focus {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 88%, transparent);
}

.dark\:hover\:bg-ceramic-brand:is(.dark *):hover {
    background-color: var(--ceramic-brand);
}

.dark\:hover\:bg-ceramic-brand\/4:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 4%, transparent);
}

.dark\:hover\:bg-ceramic-gray-1300:is(.dark *):hover {
    background-color: var(--ceramic-gray-1300);
}

.dark\:hover\:bg-ceramic-gray-1300\/50:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-gray-1300) 50%, transparent);
}

.dark\:hover\:bg-ceramic-gray-1400:is(.dark *):hover {
    background-color: var(--ceramic-gray-1400);
}

.dark\:hover\:bg-ceramic-purple-700:is(.dark *):hover {
    background-color: var(--ceramic-purple-700);
}

.dark\:hover\:bg-ceramic-red-1500:is(.dark *):hover {
    background-color: var(--ceramic-red-1500);
}

.dark\:hover\:bg-ceramic-white\/4:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-white) 4%, transparent);
}

.dark\:hover\:bg-ceramic-white\/5:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-white) 5%, transparent);
}

.dark\:hover\:bg-ceramic-white\/8:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent);
}

.dark\:hover\:dark\:bg-ceramic-gray-1300:is(.dark *):hover:is(.dark *) {
    background-color: var(--ceramic-gray-1300);
}

.dark\:hover\:ring-ceramic-white\/16:is(.dark *):hover {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 16%, transparent);
}

.dark\:hover\:text-ceramic-brand:is(.dark *):hover {
    color: var(--ceramic-brand);
}

.dark\:hover\:text-ceramic-gray-100:is(.dark *):hover {
    color: var(--ceramic-gray-100);
}

.dark\:hover\:text-ceramic-purple-700:is(.dark *):hover {
    color: var(--ceramic-purple-700);
}

.dark\:ring-ceramic-gray-700:is(.dark *) {
    --tw-ring-color: var(--ceramic-gray-700);
}

.dark\:ring-ceramic-green-600:is(.dark *) {
    --tw-ring-color: var(--ceramic-green-600);
}

.dark\:ring-offset-ceramic-gray-1500:is(.dark *) {
    --tw-ring-offset-color: var(--ceramic-gray-1500);
}

.dark\:text-ceramic-dimmed\/40:is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-dimmed) 40%, transparent);
}

.dark\:text-ceramic-dimmed\/50:is(.dark *) {
    color: color-mix(in srgb, var(--ceramic-dimmed) 50%, transparent);
}

.dark\:text-ceramic-gray-1100:is(.dark *) {
    color: var(--ceramic-gray-1100);
}

.dark\:text-ceramic-purple-400:is(.dark *) {
    color: var(--ceramic-purple-400);
}

.dark\:to-ceramic-black\/5:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 5%, transparent) var(--tw-gradient-to-position);
}

.focus\:text-ceramic-primary:focus {
    color: var(--ceramic-primary);
}

.from-ceramic-black\/5 {
    --tw-gradient-from: color-mix(in srgb, var(--ceramic-black) 5%, transparent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.group-hover\:text-ceramic-primary:is(:where(.group):hover *) {
    color: var(--ceramic-primary);
}

.hover\:bg-ceramic-brand\/12:hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 12%, transparent);
}

.hover\:bg-ceramic-brand\/15:hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 15%, transparent);
}

.hover\:bg-ceramic-brand\/2:hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 2%, transparent);
}

.hover\:bg-ceramic-brand\/5:hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 5%, transparent);
}

.hover\:bg-ceramic-brand\/8:hover {
    background-color: color-mix(in srgb, var(--ceramic-brand) 8%, transparent);
}

.hover\:bg-ceramic-gray-1000:hover {
    background-color: var(--ceramic-gray-1000);
}

.hover\:bg-ceramic-gray-50:hover {
    background-color: var(--ceramic-gray-50);
}

.hover\:bg-ceramic-gray-800:hover {
    background-color: var(--ceramic-gray-800);
}

.hover\:bg-ceramic-green-700:hover {
    background-color: var(--ceramic-green-700);
}

.hover\:bg-ceramic-negative\/8:hover {
    background-color: color-mix(in srgb, var(--ceramic-negative) 8%, transparent);
}

.hover\:bg-ceramic-orange:hover {
    background-color: var(--ceramic-orange);
}

.hover\:bg-ceramic-orange-600:hover {
    background-color: var(--ceramic-orange-600);
}

.hover\:bg-ceramic-orange\/8:hover {
    background-color: color-mix(in srgb, var(--ceramic-orange) 8%, transparent);
}

.hover\:bg-ceramic-purple-800:hover {
    background-color: var(--ceramic-purple-800);
}

.hover\:bg-ceramic-white:hover {
    background-color: var(--ceramic-white);
}

.hover\:dark\:bg-ceramic-gray-1100:hover:is(.dark *) {
    background-color: var(--ceramic-gray-1100);
}

.hover\:ring-ceramic-black\/16:hover {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 16%, transparent);
}

.hover\:ring-ceramic-brand\/20:hover {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 20%, transparent);
}

.hover\:ring-ceramic-brand\/30:hover {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 30%, transparent);
}

.hover\:text-ceramic-brand:hover {
    color: var(--ceramic-brand);
}

.hover\:text-ceramic-gray-900:hover {
    color: var(--ceramic-gray-900);
}

.hover\:text-ceramic-negative:hover {
    color: var(--ceramic-negative);
}

.hover\:text-ceramic-primary:hover {
    color: var(--ceramic-primary);
}

.hover\:text-ceramic-primary\/90:hover {
    color: color-mix(in srgb, var(--ceramic-primary) 90%, transparent);
}

.hover\:text-ceramic-purple-800:hover {
    color: var(--ceramic-purple-800);
}

.peer-checked\:bg-ceramic-brand:is(:where(.peer):checked ~ *) {
    background-color: var(--ceramic-brand);
}

.peer-checked\:bg-ceramic-green-500:is(:where(.peer):checked ~ *) {
    background-color: var(--ceramic-green-500);
}

.peer-checked\:ring-ceramic-green-600\/30:is(:where(.peer):checked ~ *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-600) 30%, transparent);
}

.peer-focus\:ring-ceramic-brand\/30:is(:where(.peer):focus ~ *) {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-brand) 30%, transparent);
}

.ring-ceramic-black\/4 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 4%, transparent);
}

.ring-ceramic-black\/40 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 40%, transparent);
}

.ring-ceramic-black\/88 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-black) 88%, transparent);
}

.ring-ceramic-orange\/30 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange) 30%, transparent);
}

.ring-ceramic-orange\/40 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-orange) 40%, transparent);
}

.ring-ceramic-positive\/30 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-positive) 30%, transparent);
}

.ring-ceramic-white\/8 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-white) 8%, transparent);
}

.text-ceramic-dimmed\/40 {
    color: color-mix(in srgb, var(--ceramic-dimmed) 40%, transparent);
}

.text-ceramic-dimmed\/60 {
    color: color-mix(in srgb, var(--ceramic-dimmed) 60%, transparent);
}

.text-ceramic-dimmed\/70 {
    color: color-mix(in srgb, var(--ceramic-dimmed) 70%, transparent);
}

.text-ceramic-dimmed\/90 {
    color: color-mix(in srgb, var(--ceramic-dimmed) 90%, transparent);
}

.text-ceramic-gray-200 {
    color: var(--ceramic-gray-200);
}

.text-ceramic-negative\/90 {
    color: color-mix(in srgb, var(--ceramic-negative) 90%, transparent);
}

.text-ceramic-orange {
    color: var(--ceramic-orange);
}

.text-ceramic-positive\/40 {
    color: color-mix(in srgb, var(--ceramic-positive) 40%, transparent);
}

.text-ceramic-positive\/80 {
    color: color-mix(in srgb, var(--ceramic-positive) 80%, transparent);
}

.text-ceramic-positive\/90 {
    color: color-mix(in srgb, var(--ceramic-positive) 90%, transparent);
}

.text-ceramic-primary\/70 {
    color: color-mix(in srgb, var(--ceramic-primary) 70%, transparent);
}

.text-ceramic-secondary\/30 {
    color: color-mix(in srgb, var(--ceramic-secondary) 30%, transparent);
}

.text-ceramic-secondary\/40 {
    color: color-mix(in srgb, var(--ceramic-secondary) 40%, transparent);
}

.text-ceramic-secondary\/60 {
    color: color-mix(in srgb, var(--ceramic-secondary) 60%, transparent);
}

.to-ceramic-black\/5 {
    --tw-gradient-to: color-mix(in srgb, var(--ceramic-black) 5%, transparent) var(--tw-gradient-to-position);
}
/* Auto-generated 2026-04-28 — 'blade-bug' classes без shade.
 * Color без shade интерпретируем как mid-shade (-500 для blue/green/red/etc, -700 для gray).
 * Семантические `-ceramic-bg` алиасим к --ceramic-bg-main. */

.after\:border-ceramic-bg::after {
    border-color: var(--ceramic-bg-main);
}

.before\:border-ceramic-bg::before {
    border-color: var(--ceramic-bg-main);
}

.bg-ceramic-blue\/10 {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 10%, transparent);
}

.bg-ceramic-blue\/30 {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 30%, transparent);
}

.bg-ceramic-blue\/8 {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 8%, transparent);
}

.bg-ceramic-gray\/8 {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 8%, transparent);
}

.bg-ceramic-green\/10 {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 10%, transparent);
}

.bg-ceramic-green\/12 {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 12%, transparent);
}

.bg-ceramic-green\/8 {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 8%, transparent);
}

.bg-ceramic-red\/10 {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 10%, transparent);
}

.bg-ceramic-red\/12 {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 12%, transparent);
}

.bg-ceramic-red\/30 {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 30%, transparent);
}

.bg-ceramic-red\/8 {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 8%, transparent);
}

.bg-ceramic-yellow\/12 {
    background-color: color-mix(in srgb, var(--ceramic-yellow-500) 12%, transparent);
}

.border-ceramic-bg {
    border-color: var(--ceramic-bg-main);
}

.border-ceramic-gray\/10 {
    border-color: color-mix(in srgb, var(--ceramic-gray-700) 10%, transparent);
}

.border-ceramic-gray\/6 {
    border-color: color-mix(in srgb, var(--ceramic-gray-700) 6%, transparent);
}

.dark\:bg-ceramic-blue\/16:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 16%, transparent);
}

.dark\:bg-ceramic-green\/07:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 7%, transparent);
}

.dark\:bg-ceramic-green\/12:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 12%, transparent);
}

.dark\:bg-ceramic-green\/24:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 24%, transparent);
}

.dark\:bg-ceramic-green\/8:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 8%, transparent);
}

.dark\:bg-ceramic-purple\/12:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-purple-500) 12%, transparent);
}

.dark\:bg-ceramic-red\/12:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 12%, transparent);
}

.dark\:bg-ceramic-red\/8:is(.dark *) {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 8%, transparent);
}

.dark\:from-ceramic-bg:is(.dark *) {
    --tw-gradient-from: var(--ceramic-bg-main) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark\:hover\:bg-ceramic-red\/12:is(.dark *):hover {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 12%, transparent);
}

.divide-ceramic-bg {
    border-color: var(--ceramic-bg-main);
}

.from-ceramic-bg {
    --tw-gradient-from: var(--ceramic-bg-main) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:bg-ceramic-blue\/20:hover {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 20%, transparent);
}

.hover\:bg-ceramic-blue\/8:hover {
    background-color: color-mix(in srgb, var(--ceramic-blue-500) 8%, transparent);
}

.hover\:bg-ceramic-gray\/10:hover {
    background-color: color-mix(in srgb, var(--ceramic-gray-700) 10%, transparent);
}

.hover\:bg-ceramic-green\/20:hover {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 20%, transparent);
}

.hover\:bg-ceramic-green\/8:hover {
    background-color: color-mix(in srgb, var(--ceramic-green-500) 8%, transparent);
}

.hover\:bg-ceramic-red\/20:hover {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 20%, transparent);
}

.hover\:bg-ceramic-red\/4:hover {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 4%, transparent);
}

.hover\:bg-ceramic-red\/8:hover {
    background-color: color-mix(in srgb, var(--ceramic-red-500) 8%, transparent);
}

.hover\:ring-ceramic-gray\/20:hover {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 20%, transparent);
}

.ring-ceramic-bg {
    --tw-ring-color: var(--ceramic-bg-main);
}

.ring-ceramic-gray\/48 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-gray-700) 48%, transparent);
}

.ring-ceramic-green\/32 {
    --tw-ring-color: color-mix(in srgb, var(--ceramic-green-500) 32%, transparent);
}