/* [next]/internal/font/google/dm_sans_1c871f37.module.css [app-client] (css) */
@font-face {
font-family: DM Sans;
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url("../media/c3cb240f9c892514-s.163v2i5cux7-c.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: DM Sans;
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url("../media/5c285b27cdda1fe8-s.p.0yo6-5yoeeudq.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: DM Sans Fallback;
src: local(Arial);
ascent-override: 94.9%;
descent-override: 29.66%;
line-gap-override: 0.0%;
size-adjust: 104.53%;
}
.dm_sans_1c871f37-module__30ab_W__className {
font-family: DM Sans, DM Sans Fallback;
font-style: normal;
}
.dm_sans_1c871f37-module__30ab_W__variable {
--font-dm-sans: "DM Sans", "DM Sans Fallback";
}
/* [next]/internal/font/google/jetbrains_mono_707233f.module.css [app-client] (css) */
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("../media/13bf9871fe164e7f-s.0s19wthhh_6~m.woff2") format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("../media/cc545e633e20c56d-s.0dza.stei.9v7.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("../media/71b036adf157cdcf-s.03nf~dfjdkf~..woff2") format("woff2");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("../media/89b21bb081cb7469-s.0gfhww.tctz1o.woff2") format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("../media/3fe682a82f50d426-s.09q3q1i5159bl.woff2") format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("../media/70bc3e132a0a741e-s.p.1409xf.ylxg8g.woff2") format("woff2");
unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: JetBrains Mono Fallback;
src: local(Arial);
ascent-override: 75.79%;
descent-override: 22.29%;
line-gap-override: 0.0%;
size-adjust: 134.59%;
}
.jetbrains_mono_707233f-module__9hS9bG__className {
font-family: JetBrains Mono, JetBrains Mono Fallback;
font-style: normal;
}
.jetbrains_mono_707233f-module__9hS9bG__variable {
--font-jetbrains-mono: "JetBrains Mono", "JetBrains Mono Fallback";
}
/* [project]/HostsCheap_Dev/Mailing-Platform/multiple-project/portal-dashboard/app/globals.css [app-client] (css) */
@layer properties {
@supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
*, :before, :after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-space-y-reverse: 0;
--tw-divide-y-reverse: 0;
--tw-border-style: solid;
--tw-gradient-position: initial;
--tw-gradient-from: #0000;
--tw-gradient-via: #0000;
--tw-gradient-to: #0000;
--tw-gradient-stops: initial;
--tw-gradient-via-stops: initial;
--tw-gradient-from-position: 0%;
--tw-gradient-via-position: 50%;
--tw-gradient-to-position: 100%;
--tw-leading: initial;
--tw-font-weight: initial;
--tw-tracking: initial;
--tw-ordinal: initial;
--tw-slashed-zero: initial;
--tw-numeric-figure: initial;
--tw-numeric-spacing: initial;
--tw-numeric-fraction: initial;
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-shadow-alpha: 100%;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-inset-shadow-alpha: 100%;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-outline-style: solid;
--tw-blur: initial;
--tw-brightness: initial;
--tw-contrast: initial;
--tw-grayscale: initial;
--tw-hue-rotate: initial;
--tw-invert: initial;
--tw-opacity: initial;
--tw-saturate: initial;
--tw-sepia: initial;
--tw-drop-shadow: initial;
--tw-drop-shadow-color: initial;
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial;
--tw-backdrop-blur: initial;
--tw-backdrop-brightness: initial;
--tw-backdrop-contrast: initial;
--tw-backdrop-grayscale: initial;
--tw-backdrop-hue-rotate: initial;
--tw-backdrop-invert: initial;
--tw-backdrop-opacity: initial;
--tw-backdrop-saturate: initial;
--tw-backdrop-sepia: initial;
--tw-duration: initial;
--tw-ease: initial;
--tw-divide-x-reverse: 0;
}
}
}
@layer theme {
:root, :host {
--font-sans: "DM Sans", system-ui, sans-serif;
--font-mono: "JetBrains Mono", monospace;
--color-red-50: #fef2f2;
--color-red-100: #ffe2e2;
--color-red-200: #ffcaca;
--color-red-300: #ffa3a3;
--color-red-400: #ff6568;
--color-red-500: #fb2c36;
--color-red-600: #e40014;
--color-red-700: #bf000f;
--color-red-800: #9f0712;
--color-red-900: #82181a;
--color-orange-100: #ffedd5;
--color-orange-200: #ffd7a8;
--color-orange-400: #ff8b1a;
--color-orange-500: #fe6e00;
--color-orange-600: #f05100;
--color-orange-700: #c53c00;
--color-orange-800: #9f2d00;
--color-amber-50: #fffbeb;
--color-amber-100: #fef3c6;
--color-amber-200: #fee685;
--color-amber-300: #ffd236;
--color-amber-400: #fcbb00;
--color-amber-500: #f99c00;
--color-amber-600: #dd7400;
--color-amber-700: #b75000;
--color-amber-800: #953d00;
--color-amber-900: #7b3306;
--color-amber-950: #461901;
--color-yellow-50: #fefce8;
--color-yellow-100: #fef9c2;
--color-yellow-200: #fff085;
--color-yellow-300: #ffe02a;
--color-yellow-400: #fac800;
--color-yellow-500: #edb200;
--color-yellow-600: #cd8900;
--color-yellow-700: #a36100;
--color-yellow-800: #874b00;
--color-yellow-900: #733e0a;
--color-green-50: #f0fdf4;
--color-green-100: #dcfce7;
--color-green-200: #b9f8cf;
--color-green-300: #7bf1a8;
--color-green-400: #05df72;
--color-green-500: #00c758;
--color-green-600: #00a544;
--color-green-700: #008138;
--color-green-800: #016630;
--color-green-900: #0d542b;
--color-emerald-50: #ecfdf5;
--color-emerald-100: #d0fae5;
--color-emerald-200: #a4f4cf;
--color-emerald-400: #00d294;
--color-emerald-500: #00bb7f;
--color-emerald-600: #009767;
--color-emerald-700: #007956;
--color-emerald-800: #005f46;
--color-cyan-100: #cefafe;
--color-cyan-400: #00d2ef;
--color-cyan-500: #00b7d7;
--color-cyan-700: #007492;
--color-sky-500: #00a5ef;
--color-sky-600: #0084cc;
--color-blue-50: #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-200: #bedbff;
--color-blue-300: #90c5ff;
--color-blue-400: #54a2ff;
--color-blue-500: #3080ff;
--color-blue-600: #155dfc;
--color-blue-700: #1447e6;
--color-blue-800: #193cb8;
--color-blue-900: #1c398e;
--color-blue-950: #162456;
--color-indigo-100: #e0e7ff;
--color-indigo-200: #c7d2ff;
--color-indigo-400: #7d87ff;
--color-indigo-500: #625fff;
--color-indigo-600: #4f39f6;
--color-indigo-700: #432dd7;
--color-violet-100: #ede9fe;
--color-violet-200: #ddd6ff;
--color-violet-400: #a685ff;
--color-violet-500: #8d54ff;
--color-violet-600: #7f22fe;
--color-violet-800: #5d0ec0;
--color-purple-50: #faf5ff;
--color-purple-100: #f3e8ff;
--color-purple-200: #e9d5ff;
--color-purple-500: #ac4bff;
--color-purple-600: #9810fa;
--color-purple-700: #8200da;
--color-purple-800: #6e11b0;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5dc;
--color-gray-400: #99a1af;
--color-gray-500: #6a7282;
--color-gray-600: #4a5565;
--color-gray-700: #364153;
--color-gray-800: #1e2939;
--color-gray-900: #101828;
--color-stone-50: #fafaf9;
--color-stone-100: #f5f5f4;
--color-stone-200: #e7e5e4;
--color-stone-300: #d6d3d1;
--color-stone-400: #a6a09b;
--color-stone-500: #79716b;
--color-stone-600: #57534d;
--color-stone-700: #44403b;
--color-stone-800: #292524;
--color-stone-900: #1c1917;
--color-stone-950: #0c0a09;
--color-black: #000;
--color-white: #fff;
--spacing: .25rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--text-xs: .75rem;
--text-xs--line-height: calc(1 / .75);
--text-sm: .875rem;
--text-sm--line-height: calc(1.25 / .875);
--text-base: 1rem;
--text-base--line-height: calc(1.5 / 1);
--text-lg: 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125);
--text-xl: 1.25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-3xl: 1.875rem;
--text-3xl--line-height: calc(2.25 / 1.875);
--text-4xl: 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--tracking-tight: -.025em;
--tracking-wide: .025em;
--tracking-wider: .05em;
--leading-tight: 1.25;
--leading-relaxed: 1.625;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
--radius-2xl: 1rem;
--ease-out: cubic-bezier(0, 0, .2, 1);
--animate-spin: spin 1s linear infinite;
--animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
--blur-sm: 8px;
--aspect-video: 16 / 9;
--default-transition-duration: .15s;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
--color-surface: #fafaf9;
--color-surface-raised: #fff;
--color-surface-sunken: #f5f5f4;
--color-ink: #1c1917;
--color-ink-muted: #57534d;
--color-ink-faint: #a8a29e;
--color-border: #e7e5e4;
--color-border-subtle: #f5f5f4;
--color-accent: #2563eb;
--color-accent-hover: #1d4ed8;
--color-accent-soft: #dbeafe;
--color-success: #16a34a;
--color-success-soft: #dcfce7;
--color-warning: #d97706;
--color-warning-soft: #fef3c7;
--color-danger: #dc2626;
--color-danger-soft: #fee2e2;
--color-chart-1: #2563eb;
--color-chart-2: #7c3aed;
--color-background: #fafaf9;
--color-foreground: #1c1917;
--color-card: #fff;
--color-card-foreground: #1c1917;
--color-muted: #f5f5f4;
--color-muted-foreground: #57534d;
--color-primary: #1c1917;
--color-primary-foreground: #fafaf9;
--color-secondary: #f5f5f4;
--color-secondary-foreground: #1c1917;
--color-accent-foreground: #fafaf9;
--color-destructive: #dc2626;
--color-destructive-foreground: #fafaf9;
--color-input: #e7e5e4;
--color-ring: #2563eb;
--color-flowvaro-deep: #1e3a8a;
--color-flowvaro-bright: #3b82f6;
--color-flowvaro-link: #1e40af;
--color-flowvaro-ws-bg: #f5f5f4;
--color-flowvaro-ws-bg-hover: #e7e5e4;
--color-flowvaro-ws-border: #e7e5e4;
--color-flowvaro-ws-border-hover: #a8a29e;
--color-flowvaro-ws-name: #1c1917;
--color-flowvaro-ws-tier: #1e40af;
--color-flowvaro-ws-chevron: #a8a29e;
--flowvaro-topbar-h: 72px;
}
@supports (color: lab(0% 0 0)) {
:root, :host {
--color-red-50: lab(96.5005% 4.18508 1.52328);
--color-red-100: lab(92.243% 10.2865 3.83865);
--color-red-200: lab(86.017% 19.8815 7.75869);
--color-red-300: lab(76.5514% 36.422 15.5335);
--color-red-400: lab(63.7053% 60.745 31.3109);
--color-red-500: lab(55.4814% 75.0732 48.8528);
--color-red-600: lab(48.4493% 77.4328 61.5452);
--color-red-700: lab(40.4273% 67.2623 53.7441);
--color-red-800: lab(33.7174% 55.8993 41.0293);
--color-red-900: lab(28.5139% 44.5539 29.0463);
--color-orange-100: lab(94.7127% 3.58394 14.3151);
--color-orange-200: lab(88.4871% 9.94918 28.8378);
--color-orange-400: lab(70.0429% 42.5156 75.8207);
--color-orange-500: lab(64.272% 57.1788 90.3583);
--color-orange-600: lab(57.1026% 64.2584 89.8886);
--color-orange-700: lab(46.4615% 57.7275 70.8507);
--color-orange-800: lab(37.1566% 46.6433 50.5562);
--color-amber-50: lab(98.6252% -.635922 8.42309);
--color-amber-100: lab(95.916% -1.21653 23.111);
--color-amber-200: lab(91.7203% -.505269 49.9084);
--color-amber-300: lab(86.4156% 6.13147 78.3961);
--color-amber-400: lab(80.1641% 16.6016 99.2089);
--color-amber-500: lab(72.7183% 31.8672 97.9407);
--color-amber-600: lab(60.3514% 40.5624 87.1228);
--color-amber-700: lab(47.2709% 42.9082 69.2966);
--color-amber-800: lab(37.8822% 37.1699 52.2718);
--color-amber-900: lab(31.2288% 30.2627 40.0378);
--color-amber-950: lab(15.8111% 20.9107 23.3752);
--color-yellow-50: lab(98.6846% -1.79055 9.7766);
--color-yellow-100: lab(97.3564% -4.51407 27.344);
--color-yellow-200: lab(94.3433% -5.00429 52.9663);
--color-yellow-300: lab(89.7033% -.480294 84.4917);
--color-yellow-400: lab(83.2664% 8.65132 106.895);
--color-yellow-500: lab(76.3898% 14.5258 98.4589);
--color-yellow-600: lab(62.7799% 22.4197 86.1544);
--color-yellow-700: lab(47.8202% 25.2426 66.5015);
--color-yellow-800: lab(38.7484% 23.5833 51.4916);
--color-yellow-900: lab(32.3865% 21.1273 38.5959);
--color-green-50: lab(98.1563% -5.60117 2.75915);
--color-green-100: lab(96.1861% -13.8464 6.52365);
--color-green-200: lab(92.4222% -26.4702 12.9427);
--color-green-300: lab(86.9953% -47.2691 25.0054);
--color-green-400: lab(78.503% -64.9265 39.7492);
--color-green-500: lab(70.5521% -66.5147 45.8073);
--color-green-600: lab(59.0978% -58.6621 41.2579);
--color-green-700: lab(47.0329% -47.0239 31.4788);
--color-green-800: lab(37.4616% -36.7971 22.9692);
--color-green-900: lab(30.797% -29.6927 17.382);
--color-emerald-50: lab(97.8462% -6.94966 1.85487);
--color-emerald-100: lab(94.9004% -17.0769 5.63836);
--color-emerald-200: lab(90.2247% -31.039 9.47084);
--color-emerald-400: lab(75.0771% -60.7313 19.4147);
--color-emerald-500: lab(66.9756% -58.27 19.5419);
--color-emerald-600: lab(55.0481% -49.9246 15.93);
--color-emerald-700: lab(44.4871% -41.0396 11.0361);
--color-emerald-800: lab(35.3675% -33.1188 8.04002);
--color-cyan-100: lab(95.3146% -13.8285 -6.84732);
--color-cyan-400: lab(76.6045% -40.9406 -29.6231);
--color-cyan-500: lab(67.805% -35.3952 -30.2018);
--color-cyan-700: lab(44.7267% -21.5987 -26.118);
--color-sky-500: lab(63.3038% -18.433 -51.0407);
--color-sky-600: lab(51.7754% -11.4712 -49.8349);
--color-blue-50: lab(96.492% -1.14644 -5.11479);
--color-blue-100: lab(92.0301% -2.24757 -11.6453);
--color-blue-200: lab(86.15% -4.04379 -21.0797);
--color-blue-300: lab(77.5052% -6.4629 -36.42);
--color-blue-400: lab(65.0361% -1.42065 -56.9802);
--color-blue-500: lab(54.1736% 13.3369 -74.6839);
--color-blue-600: lab(44.0605% 29.0279 -86.0352);
--color-blue-700: lab(36.9089% 35.0961 -85.6872);
--color-blue-800: lab(30.2514% 27.7853 -70.2699);
--color-blue-900: lab(26.1542% 15.7545 -51.5504);
--color-blue-950: lab(15.6723% 8.86232 -32.2945);
--color-indigo-100: lab(91.6577% 1.04591 -12.7199);
--color-indigo-200: lab(84.4329% 3.18977 -23.9688);
--color-indigo-400: lab(59.866% 22.4834 -64.4485);
--color-indigo-500: lab(48.295% 38.3129 -81.9673);
--color-indigo-600: lab(38.4009% 52.6132 -92.3857);
--color-indigo-700: lab(32.4486% 49.2217 -84.6695);
--color-violet-100: lab(93.0838% 4.35197 -9.88284);
--color-violet-200: lab(87.0888% 8.53688 -19.4189);
--color-violet-400: lab(62.8239% 34.9159 -60.0512);
--color-violet-500: lab(49.9355% 55.1776 -81.8963);
--color-violet-600: lab(41.088% 68.9966 -91.995);
--color-violet-800: lab(29.3188% 57.7986 -76.1493);
--color-purple-50: lab(97.1627% 2.99937 -4.13398);
--color-purple-100: lab(93.3333% 6.97437 -9.83434);
--color-purple-200: lab(87.8405% 13.4282 -18.7159);
--color-purple-500: lab(52.0183% 66.11 -78.2316);
--color-purple-600: lab(43.0295% 75.21 -86.5669);
--color-purple-700: lab(36.1758% 69.8525 -80.0381);
--color-purple-800: lab(30.6017% 56.7637 -64.4751);
--color-gray-50: lab(98.2596% -.247031 -.706708);
--color-gray-100: lab(96.1596% -.0823438 -1.13575);
--color-gray-200: lab(91.6229% -.159115 -2.26791);
--color-gray-300: lab(85.1236% -.612259 -3.7138);
--color-gray-400: lab(65.9269% -.832707 -8.17473);
--color-gray-500: lab(47.7841% -.393182 -10.0268);
--color-gray-600: lab(35.6337% -1.58697 -10.8425);
--color-gray-700: lab(27.1134% -.956401 -12.3224);
--color-gray-800: lab(16.1051% -1.18239 -11.7533);
--color-gray-900: lab(8.11897% .811279 -12.254);
--color-stone-50: lab(98.2686% -.0991821 .364304);
--color-stone-100: lab(96.5286% -.0991821 .364268);
--color-stone-200: lab(91.055% .663072 .865579);
--color-stone-300: lab(84.7909% .928015 1.59738);
--color-stone-400: lab(66.2166% 1.88044 3.20326);
--color-stone-500: lab(48.1164% 2.35701 4.26852);
--color-stone-600: lab(35.5168% 1.08604 4.07829);
--color-stone-700: lab(27.3812% 1.32917 3.57789);
--color-stone-800: lab(15.0353% 1.96067 1.53427);
--color-stone-900: lab(9.03835% 1.15298 1.92955);
--color-stone-950: lab(2.86037% .455312 .568903);
}
}
}
@layer base {
*, :after, :before, ::backdrop {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0;
}
::file-selector-button {
box-sizing: border-box;
border: 0 solid;
margin: 0;
padding: 0;
}
html, :host {
-webkit-text-size-adjust: 100%;
tab-size: 4;
line-height: 1.5;
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings, normal);
font-variation-settings: var(--default-font-variation-settings, normal);
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings, normal);
font-variation-settings: var(--default-mono-font-variation-settings, normal);
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
vertical-align: baseline;
font-size: 75%;
line-height: 0;
position: relative;
}
sub {
bottom: -.25em;
}
sup {
top: -.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
vertical-align: middle;
display: block;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0;
}
::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
opacity: 1;
background-color: #0000;
border-radius: 0;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::placeholder {
opacity: 1;
}
@supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
::placeholder {
color: currentColor;
}
@supports (color: color-mix(in lab, red, red)) {
::placeholder {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit {
padding-block: 0;
}
::-webkit-datetime-edit-year-field {
padding-block: 0;
}
::-webkit-datetime-edit-month-field {
padding-block: 0;
}
::-webkit-datetime-edit-day-field {
padding-block: 0;
}
::-webkit-datetime-edit-hour-field {
padding-block: 0;
}
::-webkit-datetime-edit-minute-field {
padding-block: 0;
}
::-webkit-datetime-edit-second-field {
padding-block: 0;
}
::-webkit-datetime-edit-millisecond-field {
padding-block: 0;
}
::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]) {
appearance: button;
}
::file-selector-button {
appearance: button;
}
::-webkit-inner-spin-button {
height: auto;
}
::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
}
@layer components;
@layer utilities {
.pointer-events-none {
pointer-events: none;
}
.collapse {
visibility: collapse;
}
.invisible {
visibility: hidden;
}
.visible {
visibility: visible;
}
.sr-only {
clip-path: inset(50%);
white-space: nowrap;
border-width: 0;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.relative {
position: relative;
}
.static {
position: static;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: calc(var(--spacing) * 0);
}
.inset-x-0 {
inset-inline: calc(var(--spacing) * 0);
}
.inset-y-0 {
inset-block: calc(var(--spacing) * 0);
}
.start {
inset-inline-start: var(--spacing);
}
.end {
inset-inline-end: var(--spacing);
}
.-top-2\.5 {
top: calc(var(--spacing) * -2.5);
}
.-top-40 {
top: calc(var(--spacing) * -40);
}
.top-0 {
top: calc(var(--spacing) * 0);
}
.top-1 {
top: calc(var(--spacing) * 1);
}
.top-1\/2 {
top: 50%;
}
.top-2 {
top: calc(var(--spacing) * 2);
}
.top-2\.5 {
top: calc(var(--spacing) * 2.5);
}
.top-3 {
top: calc(var(--spacing) * 3);
}
.top-6 {
top: calc(var(--spacing) * 6);
}
.top-\[72px\] {
top: 72px;
}
.top-full {
top: 100%;
}
.-right-40 {
right: calc(var(--spacing) * -40);
}
.right-0 {
right: calc(var(--spacing) * 0);
}
.right-1 {
right: calc(var(--spacing) * 1);
}
.right-2 {
right: calc(var(--spacing) * 2);
}
.right-3 {
right: calc(var(--spacing) * 3);
}
.right-4 {
right: calc(var(--spacing) * 4);
}
.right-6 {
right: calc(var(--spacing) * 6);
}
.-bottom-40 {
bottom: calc(var(--spacing) * -40);
}
.bottom-0 {
bottom: calc(var(--spacing) * 0);
}
.bottom-4 {
bottom: calc(var(--spacing) * 4);
}
.bottom-6 {
bottom: calc(var(--spacing) * 6);
}
.bottom-full {
bottom: 100%;
}
.-left-40 {
left: calc(var(--spacing) * -40);
}
.left-0 {
left: calc(var(--spacing) * 0);
}
.left-1\/2 {
left: 50%;
}
.left-2\.5 {
left: calc(var(--spacing) * 2.5);
}
.left-3 {
left: calc(var(--spacing) * 3);
}
.left-4 {
left: calc(var(--spacing) * 4);
}
.left-5 {
left: calc(var(--spacing) * 5);
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}
.z-\[100\] {
z-index: 100;
}
.float-right {
float: right;
}
.container {
width: 100%;
}
@media (min-width: 40rem) {
.container {
max-width: 40rem;
}
}
@media (min-width: 48rem) {
.container {
max-width: 48rem;
}
}
@media (min-width: 64rem) {
.container {
max-width: 64rem;
}
}
@media (min-width: 80rem) {
.container {
max-width: 80rem;
}
}
@media (min-width: 96rem) {
.container {
max-width: 96rem;
}
}
.-m-1 {
margin: calc(var(--spacing) * -1);
}
.m-0 {
margin: calc(var(--spacing) * 0);
}
.-mx-4 {
margin-inline: calc(var(--spacing) * -4);
}
.mx-1 {
margin-inline: calc(var(--spacing) * 1);
}
.mx-2 {
margin-inline: calc(var(--spacing) * 2);
}
.mx-4 {
margin-inline: calc(var(--spacing) * 4);
}
.mx-auto {
margin-inline: auto;
}
.my-1 {
margin-block: calc(var(--spacing) * 1);
}
.my-4 {
margin-block: calc(var(--spacing) * 4);
}
.-mt-0\.5 {
margin-top: calc(var(--spacing) * -.5);
}
.mt-0\.5 {
margin-top: calc(var(--spacing) * .5);
}
.mt-1 {
margin-top: calc(var(--spacing) * 1);
}
.mt-1\.5 {
margin-top: calc(var(--spacing) * 1.5);
}
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
.mt-3 {
margin-top: calc(var(--spacing) * 3);
}
.mt-4 {
margin-top: calc(var(--spacing) * 4);
}
.mt-5 {
margin-top: calc(var(--spacing) * 5);
}
.mt-6 {
margin-top: calc(var(--spacing) * 6);
}
.mt-8 {
margin-top: calc(var(--spacing) * 8);
}
.mt-10 {
margin-top: calc(var(--spacing) * 10);
}
.mt-20 {
margin-top: calc(var(--spacing) * 20);
}
.mt-px {
margin-top: 1px;
}
.mr-0\.5 {
margin-right: calc(var(--spacing) * .5);
}
.mr-1 {
margin-right: calc(var(--spacing) * 1);
}
.mr-1\.5 {
margin-right: calc(var(--spacing) * 1.5);
}
.mr-2 {
margin-right: calc(var(--spacing) * 2);
}
.mr-auto {
margin-right: auto;
}
.-mb-px {
margin-bottom: -1px;
}
.mb-0\.5 {
margin-bottom: calc(var(--spacing) * .5);
}
.mb-1 {
margin-bottom: calc(var(--spacing) * 1);
}
.mb-1\.5 {
margin-bottom: calc(var(--spacing) * 1.5);
}
.mb-2 {
margin-bottom: calc(var(--spacing) * 2);
}
.mb-3 {
margin-bottom: calc(var(--spacing) * 3);
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.mb-5 {
margin-bottom: calc(var(--spacing) * 5);
}
.mb-6 {
margin-bottom: calc(var(--spacing) * 6);
}
.mb-8 {
margin-bottom: calc(var(--spacing) * 8);
}
.mb-10 {
margin-bottom: calc(var(--spacing) * 10);
}
.-ml-2 {
margin-left: calc(var(--spacing) * -2);
}
.ml-0\.5 {
margin-left: calc(var(--spacing) * .5);
}
.ml-1 {
margin-left: calc(var(--spacing) * 1);
}
.ml-1\.5 {
margin-left: calc(var(--spacing) * 1.5);
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
.ml-4 {
margin-left: calc(var(--spacing) * 4);
}
.ml-9 {
margin-left: calc(var(--spacing) * 9);
}
.ml-10 {
margin-left: calc(var(--spacing) * 10);
}
.ml-auto {
margin-left: auto;
}
.line-clamp-2 {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
.block {
display: block;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.table-row {
display: table-row;
}
.aspect-\[3\/4\] {
aspect-ratio: 3 / 4;
}
.aspect-square {
aspect-ratio: 1;
}
.aspect-video {
aspect-ratio: var(--aspect-video);
}
.\!h-3 {
height: calc(var(--spacing) * 3) !important;
}
.h-0\.5 {
height: calc(var(--spacing) * .5);
}
.h-1 {
height: calc(var(--spacing) * 1);
}
.h-1\.5 {
height: calc(var(--spacing) * 1.5);
}
.h-2 {
height: calc(var(--spacing) * 2);
}
.h-2\.5 {
height: calc(var(--spacing) * 2.5);
}
.h-3 {
height: calc(var(--spacing) * 3);
}
.h-3\.5 {
height: calc(var(--spacing) * 3.5);
}
.h-4 {
height: calc(var(--spacing) * 4);
}
.h-4\.5 {
height: calc(var(--spacing) * 4.5);
}
.h-5 {
height: calc(var(--spacing) * 5);
}
.h-6 {
height: calc(var(--spacing) * 6);
}
.h-7 {
height: calc(var(--spacing) * 7);
}
.h-8 {
height: calc(var(--spacing) * 8);
}
.h-9 {
height: calc(var(--spacing) * 9);
}
.h-10 {
height: calc(var(--spacing) * 10);
}
.h-12 {
height: calc(var(--spacing) * 12);
}
.h-14 {
height: calc(var(--spacing) * 14);
}
.h-16 {
height: calc(var(--spacing) * 16);
}
.h-32 {
height: calc(var(--spacing) * 32);
}
.h-40 {
height: calc(var(--spacing) * 40);
}
.h-64 {
height: calc(var(--spacing) * 64);
}
.h-\[10px\] {
height: 10px;
}
.h-\[12px\] {
height: 12px;
}
.h-\[13px\] {
height: 13px;
}
.h-\[14px\] {
height: 14px;
}
.h-\[15px\] {
height: 15px;
}
.h-\[16px\] {
height: 16px;
}
.h-\[18px\] {
height: 18px;
}
.h-\[22px\] {
height: 22px;
}
.h-\[400px\] {
height: 400px;
}
.h-\[500px\] {
height: 500px;
}
.h-\[520px\] {
height: 520px;
}
.h-\[600px\] {
height: 600px;
}
.h-\[calc\(100vh-64px\)\] {
height: calc(100vh - 64px);
}
.h-auto {
height: auto;
}
.h-fit {
height: fit-content;
}
.h-full {
height: 100%;
}
.h-px {
height: 1px;
}
.h-screen {
height: 100vh;
}
.max-h-9 {
max-height: calc(var(--spacing) * 9);
}
.max-h-24 {
max-height: calc(var(--spacing) * 24);
}
.max-h-48 {
max-height: calc(var(--spacing) * 48);
}
.max-h-72 {
max-height: calc(var(--spacing) * 72);
}
.max-h-\[50vh\] {
max-height: 50vh;
}
.max-h-\[90vh\] {
max-height: 90vh;
}
.max-h-\[360px\] {
max-height: 360px;
}
.max-h-\[min\(70vh\,520px\)\] {
max-height: min(70vh, 520px);
}
.min-h-0 {
min-height: calc(var(--spacing) * 0);
}
.min-h-\[80px\] {
min-height: 80px;
}
.min-h-\[100px\] {
min-height: 100px;
}
.min-h-\[120px\] {
min-height: 120px;
}
.min-h-\[150px\] {
min-height: 150px;
}
.min-h-\[200px\] {
min-height: 200px;
}
.min-h-\[300px\] {
min-height: 300px;
}
.min-h-\[400px\] {
min-height: 400px;
}
.min-h-\[600px\] {
min-height: 600px;
}
.min-h-screen {
min-height: 100vh;
}
.\!w-3 {
width: calc(var(--spacing) * 3) !important;
}
.w-0\.5 {
width: calc(var(--spacing) * .5);
}
.w-1\.5 {
width: calc(var(--spacing) * 1.5);
}
.w-1\/2 {
width: 50%;
}
.w-1\/3 {
width: 33.3333%;
}
.w-2 {
width: calc(var(--spacing) * 2);
}
.w-2\.5 {
width: calc(var(--spacing) * 2.5);
}
.w-2\/3 {
width: 66.6667%;
}
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-3\.5 {
width: calc(var(--spacing) * 3.5);
}
.w-3\/4 {
width: 75%;
}
.w-4 {
width: calc(var(--spacing) * 4);
}
.w-4\.5 {
width: calc(var(--spacing) * 4.5);
}
.w-5 {
width: calc(var(--spacing) * 5);
}
.w-5\/6 {
width: 83.3333%;
}
.w-6 {
width: calc(var(--spacing) * 6);
}
.w-7 {
width: calc(var(--spacing) * 7);
}
.w-8 {
width: calc(var(--spacing) * 8);
}
.w-9 {
width: calc(var(--spacing) * 9);
}
.w-10 {
width: calc(var(--spacing) * 10);
}
.w-11 {
width: calc(var(--spacing) * 11);
}
.w-12 {
width: calc(var(--spacing) * 12);
}
.w-14 {
width: calc(var(--spacing) * 14);
}
.w-16 {
width: calc(var(--spacing) * 16);
}
.w-20 {
width: calc(var(--spacing) * 20);
}
.w-24 {
width: calc(var(--spacing) * 24);
}
.w-28 {
width: calc(var(--spacing) * 28);
}
.w-32 {
width: calc(var(--spacing) * 32);
}
.w-36 {
width: calc(var(--spacing) * 36);
}
.w-40 {
width: calc(var(--spacing) * 40);
}
.w-44 {
width: calc(var(--spacing) * 44);
}
.w-48 {
width: calc(var(--spacing) * 48);
}
.w-52 {
width: calc(var(--spacing) * 52);
}
.w-56 {
width: calc(var(--spacing) * 56);
}
.w-64 {
width: calc(var(--spacing) * 64);
}
.w-72 {
width: calc(var(--spacing) * 72);
}
.w-80 {
width: calc(var(--spacing) * 80);
}
.w-96 {
width: calc(var(--spacing) * 96);
}
.w-\[10px\] {
width: 10px;
}
.w-\[12px\] {
width: 12px;
}
.w-\[13px\] {
width: 13px;
}
.w-\[14px\] {
width: 14px;
}
.w-\[15px\] {
width: 15px;
}
.w-\[16px\] {
width: 16px;
}
.w-\[18px\] {
width: 18px;
}
.w-\[22px\] {
width: 22px;
}
.w-\[200px\] {
width: 200px;
}
.w-\[280px\] {
width: 280px;
}
.w-\[380px\] {
width: 380px;
}
.w-\[400px\] {
width: 400px;
}
.w-\[420px\] {
width: 420px;
}
.w-\[480px\] {
width: 480px;
}
.w-\[500px\] {
width: 500px;
}
.w-\[640px\] {
width: 640px;
}
.w-\[720px\] {
width: 720px;
}
.w-\[960px\] {
width: 960px;
}
.w-fit {
width: fit-content;
}
.w-full {
width: 100%;
}
.w-px {
width: 1px;
}
.max-w-2xl {
max-width: var(--container-2xl);
}
.max-w-3xl {
max-width: var(--container-3xl);
}
.max-w-4xl {
max-width: var(--container-4xl);
}
.max-w-5xl {
max-width: var(--container-5xl);
}
.max-w-6xl {
max-width: var(--container-6xl);
}
.max-w-9 {
max-width: calc(var(--spacing) * 9);
}
.max-w-\[70\%\] {
max-width: 70%;
}
.max-w-\[85\%\] {
max-width: 85%;
}
.max-w-\[90px\] {
max-width: 90px;
}
.max-w-\[140px\] {
max-width: 140px;
}
.max-w-\[160px\] {
max-width: 160px;
}
.max-w-\[170px\] {
max-width: 170px;
}
.max-w-\[180px\] {
max-width: 180px;
}
.max-w-\[200px\] {
max-width: 200px;
}
.max-w-\[240px\] {
max-width: 240px;
}
.max-w-\[260px\] {
max-width: 260px;
}
.max-w-\[400px\] {
max-width: 400px;
}
.max-w-\[420px\] {
max-width: 420px;
}
.max-w-\[560px\] {
max-width: 560px;
}
.max-w-\[640px\] {
max-width: 640px;
}
.max-w-\[680px\] {
max-width: 680px;
}
.max-w-\[1200px\] {
max-width: 1200px;
}
.max-w-lg {
max-width: var(--container-lg);
}
.max-w-md {
max-width: var(--container-md);
}
.max-w-none {
max-width: none;
}
.max-w-sm {
max-width: var(--container-sm);
}
.max-w-xl {
max-width: var(--container-xl);
}
.max-w-xs {
max-width: var(--container-xs);
}
.min-w-0 {
min-width: calc(var(--spacing) * 0);
}
.min-w-\[16px\] {
min-width: 16px;
}
.min-w-\[68px\] {
min-width: 68px;
}
.min-w-\[120px\] {
min-width: 120px;
}
.min-w-\[140px\] {
min-width: 140px;
}
.min-w-\[160px\] {
min-width: 160px;
}
.min-w-\[180px\] {
min-width: 180px;
}
.min-w-\[200px\] {
min-width: 200px;
}
.min-w-\[220px\] {
min-width: 220px;
}
.flex-1 {
flex: 1;
}
.flex-shrink-0, .shrink-0 {
flex-shrink: 0;
}
.grow {
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
.-translate-x-1\/2 {
--tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-full {
--tw-translate-x: -100%;
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-0 {
--tw-translate-x: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-0\.5 {
--tw-translate-x: calc(var(--spacing) * .5);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-1 {
--tw-translate-x: calc(var(--spacing) * 1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-4 {
--tw-translate-x: calc(var(--spacing) * 4);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-x-6 {
--tw-translate-x: calc(var(--spacing) * 6);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
--tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.scale-95 {
--tw-scale-x: 95%;
--tw-scale-y: 95%;
--tw-scale-z: 95%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
.-rotate-90 {
rotate: -90deg;
}
.transform {
transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
}
.animate-pulse {
animation: var(--animate-pulse);
}
.animate-spin {
animation: var(--animate-spin);
}
.cursor-grab {
cursor: grab;
}
.cursor-not-allowed {
cursor: not-allowed;
}
.cursor-pointer {
cursor: pointer;
}
.resize {
resize: both;
}
.resize-y {
resize: vertical;
}
.list-decimal {
list-style-type: decimal;
}
.list-disc {
list-style-type: disc;
}
.list-none {
list-style-type: none;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-\[100px_1fr\] {
grid-template-columns: 100px 1fr;
}
.grid-cols-\[320px_1fr\] {
grid-template-columns: 320px 1fr;
}
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-baseline {
align-items: baseline;
}
.items-center {
align-items: center;
}
.items-end {
align-items: flex-end;
}
.items-start {
align-items: flex-start;
}
.items-stretch {
align-items: stretch;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-start {
justify-content: flex-start;
}
.gap-0\.5 {
gap: calc(var(--spacing) * .5);
}
.gap-1 {
gap: calc(var(--spacing) * 1);
}
.gap-1\.5 {
gap: calc(var(--spacing) * 1.5);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
.gap-2\.5 {
gap: calc(var(--spacing) * 2.5);
}
.gap-3 {
gap: calc(var(--spacing) * 3);
}
.gap-4 {
gap: calc(var(--spacing) * 4);
}
.gap-5 {
gap: calc(var(--spacing) * 5);
}
.gap-6 {
gap: calc(var(--spacing) * 6);
}
.gap-8 {
gap: calc(var(--spacing) * 8);
}
.gap-\[18px\] {
gap: 18px;
}
:where(.space-y-0\.5 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-1 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-1\.5 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-2 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-2\.5 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-3 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-4 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-5 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-6 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-8 > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
}
:where(.space-y-px > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(1px * var(--tw-space-y-reverse));
margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse)));
}
.gap-x-4 {
column-gap: calc(var(--spacing) * 4);
}
.gap-y-1 {
row-gap: calc(var(--spacing) * 1);
}
:where(.divide-y > :not(:last-child)) {
--tw-divide-y-reverse: 0;
border-bottom-style: var(--tw-border-style);
border-top-style: var(--tw-border-style);
border-top-width: calc(1px * var(--tw-divide-y-reverse));
border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
}
:where(.divide-border-subtle > :not(:last-child)) {
border-color: var(--color-border-subtle);
}
:where(.divide-stone-100 > :not(:last-child)) {
border-color: var(--color-stone-100);
}
.self-center {
align-self: center;
}
.self-start {
align-self: flex-start;
}
.truncate {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-auto {
overflow-y: auto;
}
.overscroll-contain {
overscroll-behavior: contain;
}
.rounded {
border-radius: .25rem;
}
.rounded-2xl {
border-radius: var(--radius-2xl);
}
.rounded-\[10px\] {
border-radius: 10px;
}
.rounded-full {
border-radius: 3.40282e38px;
}
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-md {
border-radius: var(--radius-md);
}
.rounded-none {
border-radius: 0;
}
.rounded-sm {
border-radius: var(--radius-sm);
}
.rounded-xl {
border-radius: var(--radius-xl);
}
.rounded-t {
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
}
.rounded-t-sm {
border-top-left-radius: var(--radius-sm);
border-top-right-radius: var(--radius-sm);
}
.rounded-br-md {
border-bottom-right-radius: var(--radius-md);
}
.rounded-bl-md {
border-bottom-left-radius: var(--radius-md);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-2 {
border-style: var(--tw-border-style);
border-width: 2px;
}
.border-y {
border-block-style: var(--tw-border-style);
border-block-width: 1px;
}
.border-t {
border-top-style: var(--tw-border-style);
border-top-width: 1px;
}
.border-r {
border-right-style: var(--tw-border-style);
border-right-width: 1px;
}
.border-b {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.border-b-2 {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 2px;
}
.border-l {
border-left-style: var(--tw-border-style);
border-left-width: 1px;
}
.border-l-2 {
border-left-style: var(--tw-border-style);
border-left-width: 2px;
}
.border-l-4 {
border-left-style: var(--tw-border-style);
border-left-width: 4px;
}
.border-dashed {
--tw-border-style: dashed;
border-style: dashed;
}
.border-\[var\(--color-border\)\] {
border-color: var(--color-border);
}
.border-\[var\(--color-surface-raised\)\] {
border-color: var(--color-surface-raised);
}
.border-amber-200 {
border-color: var(--color-amber-200);
}
.border-amber-300 {
border-color: var(--color-amber-300);
}
.border-amber-500\/30 {
border-color: #f99c004d;
}
@supports (color: color-mix(in lab, red, red)) {
.border-amber-500\/30 {
border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
}
}
.border-amber-500\/40 {
border-color: #f99c0066;
}
@supports (color: color-mix(in lab, red, red)) {
.border-amber-500\/40 {
border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
}
}
.border-blue-200 {
border-color: var(--color-blue-200);
}
.border-blue-300 {
border-color: var(--color-blue-300);
}
.border-blue-500 {
border-color: var(--color-blue-500);
}
.border-blue-500\/20 {
border-color: #3080ff33;
}
@supports (color: color-mix(in lab, red, red)) {
.border-blue-500\/20 {
border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
}
}
.border-blue-500\/30 {
border-color: #3080ff4d;
}
@supports (color: color-mix(in lab, red, red)) {
.border-blue-500\/30 {
border-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
}
}
.border-blue-500\/40 {
border-color: #3080ff66;
}
@supports (color: color-mix(in lab, red, red)) {
.border-blue-500\/40 {
border-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent);
}
}
.border-blue-600 {
border-color: var(--color-blue-600);
}
.border-border {
border-color: var(--color-border);
}
.border-border-subtle {
border-color: var(--color-border-subtle);
}
.border-destructive {
border-color: var(--color-destructive);
}
.border-destructive\/20 {
border-color: #dc262633;
}
@supports (color: color-mix(in lab, red, red)) {
.border-destructive\/20 {
border-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
}
}
.border-destructive\/30 {
border-color: #dc26264d;
}
@supports (color: color-mix(in lab, red, red)) {
.border-destructive\/30 {
border-color: color-mix(in oklab, var(--color-destructive) 30%, transparent);
}
}
.border-destructive\/50 {
border-color: #dc262680;
}
@supports (color: color-mix(in lab, red, red)) {
.border-destructive\/50 {
border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
}
}
.border-emerald-200 {
border-color: var(--color-emerald-200);
}
.border-emerald-500 {
border-color: var(--color-emerald-500);
}
.border-emerald-500\/20 {
border-color: #00bb7f33;
}
@supports (color: color-mix(in lab, red, red)) {
.border-emerald-500\/20 {
border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
}
}
.border-emerald-500\/30 {
border-color: #00bb7f4d;
}
@supports (color: color-mix(in lab, red, red)) {
.border-emerald-500\/30 {
border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
}
}
.border-gray-200 {
border-color: var(--color-gray-200);
}
.border-green-200 {
border-color: var(--color-green-200);
}
.border-green-300 {
border-color: var(--color-green-300);
}
.border-indigo-200 {
border-color: var(--color-indigo-200);
}
.border-input {
border-color: var(--color-input);
}
.border-muted {
border-color: var(--color-muted);
}
.border-muted-foreground {
border-color: var(--color-muted-foreground);
}
.border-muted-foreground\/25 {
border-color: #57534d40;
}
@supports (color: color-mix(in lab, red, red)) {
.border-muted-foreground\/25 {
border-color: color-mix(in oklab, var(--color-muted-foreground) 25%, transparent);
}
}
.border-orange-200 {
border-color: var(--color-orange-200);
}
.border-primary {
border-color: var(--color-primary);
}
.border-purple-200 {
border-color: var(--color-purple-200);
}
.border-purple-500\/30 {
border-color: #ac4bff4d;
}
@supports (color: color-mix(in lab, red, red)) {
.border-purple-500\/30 {
border-color: color-mix(in oklab, var(--color-purple-500) 30%, transparent);
}
}
.border-red-200 {
border-color: var(--color-red-200);
}
.border-red-300 {
border-color: var(--color-red-300);
}
.border-red-500 {
border-color: var(--color-red-500);
}
.border-red-500\/30 {
border-color: #fb2c364d;
}
@supports (color: color-mix(in lab, red, red)) {
.border-red-500\/30 {
border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
}
}
.border-sky-500\/20 {
border-color: #00a5ef33;
}
@supports (color: color-mix(in lab, red, red)) {
.border-sky-500\/20 {
border-color: color-mix(in oklab, var(--color-sky-500) 20%, transparent);
}
}
.border-sky-500\/30 {
border-color: #00a5ef4d;
}
@supports (color: color-mix(in lab, red, red)) {
.border-sky-500\/30 {
border-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
}
}
.border-stone-100 {
border-color: var(--color-stone-100);
}
.border-stone-200 {
border-color: var(--color-stone-200);
}
.border-stone-300 {
border-color: var(--color-stone-300);
}
.border-transparent {
border-color: #0000;
}
.border-violet-200 {
border-color: var(--color-violet-200);
}
.border-warning\/40 {
border-color: #d9770666;
}
@supports (color: color-mix(in lab, red, red)) {
.border-warning\/40 {
border-color: color-mix(in oklab, var(--color-warning) 40%, transparent);
}
}
.border-yellow-200 {
border-color: var(--color-yellow-200);
}
.border-yellow-300 {
border-color: var(--color-yellow-300);
}
.border-yellow-400 {
border-color: var(--color-yellow-400);
}
.border-l-primary {
border-left-color: var(--color-primary);
}
.\!bg-amber-500 {
background-color: var(--color-amber-500) !important;
}
.\!bg-blue-500 {
background-color: var(--color-blue-500) !important;
}
.\!bg-cyan-500 {
background-color: var(--color-cyan-500) !important;
}
.\!bg-emerald-500 {
background-color: var(--color-emerald-500) !important;
}
.\!bg-indigo-500 {
background-color: var(--color-indigo-500) !important;
}
.\!bg-orange-500 {
background-color: var(--color-orange-500) !important;
}
.\!bg-red-400 {
background-color: var(--color-red-400) !important;
}
.\!bg-red-500 {
background-color: var(--color-red-500) !important;
}
.\!bg-stone-500 {
background-color: var(--color-stone-500) !important;
}
.\!bg-violet-500 {
background-color: var(--color-violet-500) !important;
}
.bg-\[\#dbeafe\] {
background-color: #dbeafe;
}
.bg-\[\#fee2e2\] {
background-color: #fee2e2;
}
.bg-\[\#fef3c7\] {
background-color: #fef3c7;
}
.bg-\[var\(--color-accent\)\] {
background-color: var(--color-accent);
}
.bg-\[var\(--color-accent-soft\)\] {
background-color: var(--color-accent-soft);
}
.bg-\[var\(--color-border\)\] {
background-color: var(--color-border);
}
.bg-\[var\(--color-flowvaro-deep\)\] {
background-color: var(--color-flowvaro-deep);
}
.bg-\[var\(--color-flowvaro-link\,\#1d4ed8\)\] {
background-color: var(--color-flowvaro-link, #1d4ed8);
}
.bg-\[var\(--color-success\)\] {
background-color: var(--color-success);
}
.bg-\[var\(--color-success-soft\,\#ecfdf5\)\] {
background-color: var(--color-success-soft, #ecfdf5);
}
.bg-\[var\(--color-surface\)\] {
background-color: var(--color-surface);
}
.bg-\[var\(--color-surface-raised\)\] {
background-color: var(--color-surface-raised);
}
.bg-\[var\(--color-surface-raised\,\#f8fafc\)\] {
background-color: var(--color-surface-raised, #f8fafc);
}
.bg-\[var\(--color-surface-sunken\)\] {
background-color: var(--color-surface-sunken);
}
.bg-accent-soft {
background-color: var(--color-accent-soft);
}
.bg-amber-50 {
background-color: var(--color-amber-50);
}
.bg-amber-50\/50 {
background-color: #fffbeb80;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-amber-50\/50 {
background-color: color-mix(in oklab, var(--color-amber-50) 50%, transparent);
}
}
.bg-amber-100 {
background-color: var(--color-amber-100);
}
.bg-amber-500 {
background-color: var(--color-amber-500);
}
.bg-amber-500\/5 {
background-color: #f99c000d;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-amber-500\/5 {
background-color: color-mix(in oklab, var(--color-amber-500) 5%, transparent);
}
}
.bg-amber-500\/10 {
background-color: #f99c001a;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-amber-500\/10 {
background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
}
}
.bg-amber-600 {
background-color: var(--color-amber-600);
}
.bg-amber-900 {
background-color: var(--color-amber-900);
}
.bg-background {
background-color: var(--color-background);
}
.bg-black {
background-color: var(--color-black);
}
.bg-black\/40 {
background-color: #0006;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-black\/40 {
background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
}
}
.bg-black\/50 {
background-color: #00000080;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-black\/50 {
background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
}
}
.bg-blue-50 {
background-color: var(--color-blue-50);
}
.bg-blue-50\/40 {
background-color: #eff6ff66;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-blue-50\/40 {
background-color: color-mix(in oklab, var(--color-blue-50) 40%, transparent);
}
}
.bg-blue-50\/50 {
background-color: #eff6ff80;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-blue-50\/50 {
background-color: color-mix(in oklab, var(--color-blue-50) 50%, transparent);
}
}
.bg-blue-100 {
background-color: var(--color-blue-100);
}
.bg-blue-500 {
background-color: var(--color-blue-500);
}
.bg-blue-500\/5 {
background-color: #3080ff0d;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-blue-500\/5 {
background-color: color-mix(in oklab, var(--color-blue-500) 5%, transparent);
}
}
.bg-blue-500\/10 {
background-color: #3080ff1a;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-blue-500\/10 {
background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
}
}
.bg-blue-500\/\[0\.04\] {
background-color: #3080ff0a;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-blue-500\/\[0\.04\] {
background-color: color-mix(in oklab, var(--color-blue-500) 4%, transparent);
}
}
.bg-blue-600 {
background-color: var(--color-blue-600);
}
.bg-blue-600\/10 {
background-color: #155dfc1a;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-blue-600\/10 {
background-color: color-mix(in oklab, var(--color-blue-600) 10%, transparent);
}
}
.bg-blue-700 {
background-color: var(--color-blue-700);
}
.bg-border {
background-color: var(--color-border);
}
.bg-card {
background-color: var(--color-card);
}
.bg-card\/95 {
background-color: #fffffff2;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-card\/95 {
background-color: color-mix(in oklab, var(--color-card) 95%, transparent);
}
}
.bg-chart-1\/10 {
background-color: #2563eb1a;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-chart-1\/10 {
background-color: color-mix(in oklab, var(--color-chart-1) 10%, transparent);
}
}
.bg-chart-2\/10 {
background-color: #7c3aed1a;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-chart-2\/10 {
background-color: color-mix(in oklab, var(--color-chart-2) 10%, transparent);
}
}
.bg-current {
background-color: currentColor;
}
.bg-cyan-100 {
background-color: var(--color-cyan-100);
}
.bg-danger {
background-color: var(--color-danger);
}
.bg-destructive {
background-color: var(--color-destructive);
}
.bg-destructive\/5 {
background-color: #dc26260d;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-destructive\/5 {
background-color: color-mix(in oklab, var(--color-destructive) 5%, transparent);
}
}
.bg-destructive\/10 {
background-color: #dc26261a;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-destructive\/10 {
background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
}
}
.bg-emerald-50 {
background-color: var(--color-emerald-50);
}
.bg-emerald-100 {
background-color: var(--color-emerald-100);
}
.bg-emerald-500 {
background-color: var(--color-emerald-500);
}
.bg-emerald-500\/5 {
background-color: #00bb7f0d;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-emerald-500\/5 {
background-color: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);
}
}
.bg-emerald-500\/10 {
background-color: #00bb7f1a;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-emerald-500\/10 {
background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
}
}
.bg-emerald-600 {
background-color: var(--color-emerald-600);
}
.bg-foreground {
background-color: var(--color-foreground);
}
.bg-gray-50 {
background-color: var(--color-gray-50);
}
.bg-gray-50\/50 {
background-color: #f9fafb80;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-gray-50\/50 {
background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
}
}
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-200 {
background-color: var(--color-gray-200);
}
.bg-gray-300 {
background-color: var(--color-gray-300);
}
.bg-gray-400 {
background-color: var(--color-gray-400);
}
.bg-gray-900 {
background-color: var(--color-gray-900);
}
.bg-green-50 {
background-color: var(--color-green-50);
}
.bg-green-50\/50 {
background-color: #f0fdf480;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-green-50\/50 {
background-color: color-mix(in oklab, var(--color-green-50) 50%, transparent);
}
}
.bg-green-100 {
background-color: var(--color-green-100);
}
.bg-green-500 {
background-color: var(--color-green-500);
}
.bg-green-600 {
background-color: var(--color-green-600);
}
.bg-indigo-100 {
background-color: var(--color-indigo-100);
}
.bg-muted {
background-color: var(--color-muted);
}
.bg-muted\/20 {
background-color: #f5f5f433;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-muted\/20 {
background-color: color-mix(in oklab, var(--color-muted) 20%, transparent);
}
}
.bg-muted\/30 {
background-color: #f5f5f44d;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-muted\/30 {
background-color: color-mix(in oklab, var(--color-muted) 30%, transparent);
}
}
.bg-muted\/40 {
background-color: #f5f5f466;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-muted\/40 {
background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
}
}
.bg-muted\/50 {
background-color: #f5f5f480;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-muted\/50 {
background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
}
}
.bg-orange-100 {
background-color: var(--color-orange-100);
}
.bg-orange-500 {
background-color: var(--color-orange-500);
}
.bg-primary {
background-color: var(--color-primary);
}
.bg-primary\/5 {
background-color: #1c19170d;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-primary\/5 {
background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
}
}
.bg-primary\/20 {
background-color: #1c191733;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-primary\/20 {
background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
}
}
.bg-primary\/80 {
background-color: #1c1917cc;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-primary\/80 {
background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
}
}
.bg-purple-50 {
background-color: var(--color-purple-50);
}
.bg-purple-100 {
background-color: var(--color-purple-100);
}
.bg-purple-200 {
background-color: var(--color-purple-200);
}
.bg-purple-600 {
background-color: var(--color-purple-600);
}
.bg-red-50 {
background-color: var(--color-red-50);
}
.bg-red-100 {
background-color: var(--color-red-100);
}
.bg-red-500 {
background-color: var(--color-red-500);
}
.bg-red-500\/5 {
background-color: #fb2c360d;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-red-500\/5 {
background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent);
}
}
.bg-red-600 {
background-color: var(--color-red-600);
}
.bg-secondary {
background-color: var(--color-secondary);
}
.bg-sky-500\/5 {
background-color: #00a5ef0d;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-sky-500\/5 {
background-color: color-mix(in oklab, var(--color-sky-500) 5%, transparent);
}
}
.bg-sky-500\/10 {
background-color: #00a5ef1a;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-sky-500\/10 {
background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
}
}
.bg-stone-50 {
background-color: var(--color-stone-50);
}
.bg-stone-100 {
background-color: var(--color-stone-100);
}
.bg-stone-200 {
background-color: var(--color-stone-200);
}
.bg-stone-200\/70 {
background-color: #e7e5e4b3;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-stone-200\/70 {
background-color: color-mix(in oklab, var(--color-stone-200) 70%, transparent);
}
}
.bg-stone-900 {
background-color: var(--color-stone-900);
}
.bg-stone-950\/40 {
background-color: #0c0a0966;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-stone-950\/40 {
background-color: color-mix(in oklab, var(--color-stone-950) 40%, transparent);
}
}
.bg-stone-950\/60 {
background-color: #0c0a0999;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-stone-950\/60 {
background-color: color-mix(in oklab, var(--color-stone-950) 60%, transparent);
}
}
.bg-success {
background-color: var(--color-success);
}
.bg-success-soft {
background-color: var(--color-success-soft);
}
.bg-transparent {
background-color: #0000;
}
.bg-violet-100 {
background-color: var(--color-violet-100);
}
.bg-violet-600\/10 {
background-color: #7f22fe1a;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-violet-600\/10 {
background-color: color-mix(in oklab, var(--color-violet-600) 10%, transparent);
}
}
.bg-warning {
background-color: var(--color-warning);
}
.bg-warning-soft {
background-color: var(--color-warning-soft);
}
.bg-warning-soft\/30 {
background-color: #fef3c74d;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-warning-soft\/30 {
background-color: color-mix(in oklab, var(--color-warning-soft) 30%, transparent);
}
}
.bg-white {
background-color: var(--color-white);
}
.bg-white\/85 {
background-color: #ffffffd9;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-white\/85 {
background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
}
}
.bg-yellow-50 {
background-color: var(--color-yellow-50);
}
.bg-yellow-50\/30 {
background-color: #fefce84d;
}
@supports (color: color-mix(in lab, red, red)) {
.bg-yellow-50\/30 {
background-color: color-mix(in oklab, var(--color-yellow-50) 30%, transparent);
}
}
.bg-yellow-100 {
background-color: var(--color-yellow-100);
}
.bg-yellow-500 {
background-color: var(--color-yellow-500);
}
.bg-gradient-to-br {
--tw-gradient-position: to bottom right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-r {
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-\[var\(--color-flowvaro-deep\)\] {
--tw-gradient-from: var(--color-flowvaro-deep);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-blue-500 {
--tw-gradient-from: var(--color-blue-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-blue-500\/\[0\.06\] {
--tw-gradient-from: #3080ff0f;
}
@supports (color: color-mix(in lab, red, red)) {
.from-blue-500\/\[0\.06\] {
--tw-gradient-from: color-mix(in oklab, var(--color-blue-500) 6%, transparent);
}
}
.from-blue-500\/\[0\.06\] {
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-purple-50 {
--tw-gradient-from: var(--color-purple-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-\[var\(--color-flowvaro-bright\)\] {
--tw-gradient-to: var(--color-flowvaro-bright);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-blue-50 {
--tw-gradient-to: var(--color-blue-50);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-blue-700 {
--tw-gradient-to: var(--color-blue-700);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-emerald-500\/\[0\.04\] {
--tw-gradient-to: #00bb7f0a;
}
@supports (color: color-mix(in lab, red, red)) {
.to-emerald-500\/\[0\.04\] {
--tw-gradient-to: color-mix(in oklab, var(--color-emerald-500) 4%, transparent);
}
}
.to-emerald-500\/\[0\.04\] {
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-indigo-600 {
--tw-gradient-to: var(--color-indigo-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.fill-\[var\(--color-ink-faint\)\] {
fill: var(--color-ink-faint);
}
.fill-amber-400 {
fill: var(--color-amber-400);
}
.fill-current {
fill: currentColor;
}
.fill-muted-foreground {
fill: var(--color-muted-foreground);
}
.fill-yellow-500 {
fill: var(--color-yellow-500);
}
.object-contain {
object-fit: contain;
}
.object-cover {
object-fit: cover;
}
.p-0 {
padding: calc(var(--spacing) * 0);
}
.p-0\.5 {
padding: calc(var(--spacing) * .5);
}
.p-1 {
padding: calc(var(--spacing) * 1);
}
.p-1\.5 {
padding: calc(var(--spacing) * 1.5);
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-2\.5 {
padding: calc(var(--spacing) * 2.5);
}
.p-3 {
padding: calc(var(--spacing) * 3);
}
.p-4 {
padding: calc(var(--spacing) * 4);
}
.p-5 {
padding: calc(var(--spacing) * 5);
}
.p-6 {
padding: calc(var(--spacing) * 6);
}
.p-8 {
padding: calc(var(--spacing) * 8);
}
.p-10 {
padding: calc(var(--spacing) * 10);
}
.p-12 {
padding: calc(var(--spacing) * 12);
}
.px-0 {
padding-inline: calc(var(--spacing) * 0);
}
.px-1 {
padding-inline: calc(var(--spacing) * 1);
}
.px-1\.5 {
padding-inline: calc(var(--spacing) * 1.5);
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
.px-2\.5 {
padding-inline: calc(var(--spacing) * 2.5);
}
.px-3 {
padding-inline: calc(var(--spacing) * 3);
}
.px-3\.5 {
padding-inline: calc(var(--spacing) * 3.5);
}
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
padding-inline: calc(var(--spacing) * 5);
}
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.px-\[22px\] {
padding-inline: 22px;
}
.py-0\.5 {
padding-block: calc(var(--spacing) * .5);
}
.py-1 {
padding-block: calc(var(--spacing) * 1);
}
.py-1\.5 {
padding-block: calc(var(--spacing) * 1.5);
}
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-2\.5 {
padding-block: calc(var(--spacing) * 2.5);
}
.py-3 {
padding-block: calc(var(--spacing) * 3);
}
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.py-5 {
padding-block: calc(var(--spacing) * 5);
}
.py-6 {
padding-block: calc(var(--spacing) * 6);
}
.py-8 {
padding-block: calc(var(--spacing) * 8);
}
.py-10 {
padding-block: calc(var(--spacing) * 10);
}
.py-12 {
padding-block: calc(var(--spacing) * 12);
}
.py-16 {
padding-block: calc(var(--spacing) * 16);
}
.py-20 {
padding-block: calc(var(--spacing) * 20);
}
.py-24 {
padding-block: calc(var(--spacing) * 24);
}
.py-\[5px\] {
padding-block: 5px;
}
.py-\[7px\] {
padding-block: 7px;
}
.pt-0 {
padding-top: calc(var(--spacing) * 0);
}
.pt-1 {
padding-top: calc(var(--spacing) * 1);
}
.pt-2 {
padding-top: calc(var(--spacing) * 2);
}
.pt-3 {
padding-top: calc(var(--spacing) * 3);
}
.pt-4 {
padding-top: calc(var(--spacing) * 4);
}
.pt-5 {
padding-top: calc(var(--spacing) * 5);
}
.pt-6 {
padding-top: calc(var(--spacing) * 6);
}
.pt-\[15vh\] {
padding-top: 15vh;
}
.pr-2 {
padding-right: calc(var(--spacing) * 2);
}
.pr-4 {
padding-right: calc(var(--spacing) * 4);
}
.pr-6 {
padding-right: calc(var(--spacing) * 6);
}
.pr-9 {
padding-right: calc(var(--spacing) * 9);
}
.pr-10 {
padding-right: calc(var(--spacing) * 10);
}
.pb-1\.5 {
padding-bottom: calc(var(--spacing) * 1.5);
}
.pb-2 {
padding-bottom: calc(var(--spacing) * 2);
}
.pb-3 {
padding-bottom: calc(var(--spacing) * 3);
}
.pb-4 {
padding-bottom: calc(var(--spacing) * 4);
}
.pb-20 {
padding-bottom: calc(var(--spacing) * 20);
}
.pb-24 {
padding-bottom: calc(var(--spacing) * 24);
}
.pb-32 {
padding-bottom: calc(var(--spacing) * 32);
}
.pb-\[16px\] {
padding-bottom: 16px;
}
.pb-\[calc\(0\.75rem\+env\(safe-area-inset-bottom\)\)\] {
padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
}
.pl-2 {
padding-left: calc(var(--spacing) * 2);
}
.pl-4 {
padding-left: calc(var(--spacing) * 4);
}
.pl-5 {
padding-left: calc(var(--spacing) * 5);
}
.pl-6 {
padding-left: calc(var(--spacing) * 6);
}
.pl-7 {
padding-left: calc(var(--spacing) * 7);
}
.pl-9 {
padding-left: calc(var(--spacing) * 9);
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.align-top {
vertical-align: top;
}
.font-mono {
font-family: var(--font-mono);
}
.font-sans {
font-family: var(--font-sans);
}
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-4xl {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-base {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-sm {
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-xl {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-xs {
font-size: var(--text-xs);
line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[9px\] {
font-size: 9px;
}
.text-\[10\.5px\] {
font-size: 10.5px;
}
.text-\[10px\] {
font-size: 10px;
}
.text-\[11\.5px\] {
font-size: 11.5px;
}
.text-\[11px\] {
font-size: 11px;
}
.text-\[12\.5px\] {
font-size: 12.5px;
}
.text-\[12px\] {
font-size: 12px;
}
.text-\[13px\] {
font-size: 13px;
}
.text-\[14px\] {
font-size: 14px;
}
.text-\[15px\] {
font-size: 15px;
}
.text-\[16px\] {
font-size: 16px;
}
.text-\[18px\] {
font-size: 18px;
}
.text-\[20px\] {
font-size: 20px;
}
.text-\[22px\] {
font-size: 22px;
}
.text-\[24px\] {
font-size: 24px;
}
.text-\[26px\] {
font-size: 26px;
}
.text-\[32px\] {
font-size: 32px;
}
.text-\[64px\] {
font-size: 64px;
}
.leading-\[1\.15\] {
--tw-leading: 1.15;
line-height: 1.15;
}
.leading-none {
--tw-leading: 1;
line-height: 1;
}
.leading-relaxed {
--tw-leading: var(--leading-relaxed);
line-height: var(--leading-relaxed);
}
.leading-tight {
--tw-leading: var(--leading-tight);
line-height: var(--leading-tight);
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.font-extrabold {
--tw-font-weight: var(--font-weight-extrabold);
font-weight: var(--font-weight-extrabold);
}
.font-medium {
--tw-font-weight: var(--font-weight-medium);
font-weight: var(--font-weight-medium);
}
.font-normal {
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
}
.font-semibold {
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.tracking-\[0\.3em\] {
--tw-tracking: .3em;
letter-spacing: .3em;
}
.tracking-\[0\.08em\] {
--tw-tracking: .08em;
letter-spacing: .08em;
}
.tracking-tight {
--tw-tracking: var(--tracking-tight);
letter-spacing: var(--tracking-tight);
}
.tracking-wide {
--tw-tracking: var(--tracking-wide);
letter-spacing: var(--tracking-wide);
}
.tracking-wider {
--tw-tracking: var(--tracking-wider);
letter-spacing: var(--tracking-wider);
}
.break-words {
overflow-wrap: break-word;
}
.break-all {
word-break: break-all;
}
.whitespace-nowrap {
white-space: nowrap;
}
.whitespace-pre-wrap {
white-space: pre-wrap;
}
.text-\[\#1d4ed8\] {
color: #1d4ed8;
}
.text-\[\#92400e\] {
color: #92400e;
}
.text-\[\#b91c1c\] {
color: #b91c1c;
}
.text-\[\#d97706\] {
color: #d97706;
}
.text-\[var\(--color-accent\)\] {
color: var(--color-accent);
}
.text-\[var\(--color-border\)\] {
color: var(--color-border);
}
.text-\[var\(--color-danger\)\] {
color: var(--color-danger);
}
.text-\[var\(--color-flowvaro-deep\,\#1e3a8a\)\] {
color: var(--color-flowvaro-deep, #1e3a8a);
}
.text-\[var\(--color-flowvaro-link\)\] {
color: var(--color-flowvaro-link);
}
.text-\[var\(--color-flowvaro-link\,\#1d4ed8\)\] {
color: var(--color-flowvaro-link, #1d4ed8);
}
.text-\[var\(--color-flowvaro-link\,\#1e40af\)\] {
color: var(--color-flowvaro-link, #1e40af);
}
.text-\[var\(--color-ink\)\] {
color: var(--color-ink);
}
.text-\[var\(--color-ink-faint\)\] {
color: var(--color-ink-faint);
}
.text-\[var\(--color-ink-muted\)\] {
color: var(--color-ink-muted);
}
.text-\[var\(--color-success\)\] {
color: var(--color-success);
}
.text-\[var\(--color-success\,\#047857\)\] {
color: var(--color-success, #047857);
}
.text-\[var\(--color-warning\)\] {
color: var(--color-warning);
}
.text-accent {
color: var(--color-accent);
}
.text-amber-400 {
color: var(--color-amber-400);
}
.text-amber-500 {
color: var(--color-amber-500);
}
.text-amber-600 {
color: var(--color-amber-600);
}
.text-amber-700 {
color: var(--color-amber-700);
}
.text-amber-800 {
color: var(--color-amber-800);
}
.text-amber-800\/80 {
color: #953d00cc;
}
@supports (color: color-mix(in lab, red, red)) {
.text-amber-800\/80 {
color: color-mix(in oklab, var(--color-amber-800) 80%, transparent);
}
}
.text-amber-900 {
color: var(--color-amber-900);
}
.text-background {
color: var(--color-background);
}
.text-blue-100 {
color: var(--color-blue-100);
}
.text-blue-200 {
color: var(--color-blue-200);
}
.text-blue-400 {
color: var(--color-blue-400);
}
.text-blue-500 {
color: var(--color-blue-500);
}
.text-blue-600 {
color: var(--color-blue-600);
}
.text-blue-700 {
color: var(--color-blue-700);
}
.text-blue-800 {
color: var(--color-blue-800);
}
.text-blue-900 {
color: var(--color-blue-900);
}
.text-blue-900\/80 {
color: #1c398ecc;
}
@supports (color: color-mix(in lab, red, red)) {
.text-blue-900\/80 {
color: color-mix(in oklab, var(--color-blue-900) 80%, transparent);
}
}
.text-card-foreground {
color: var(--color-card-foreground);
}
.text-chart-1 {
color: var(--color-chart-1);
}
.text-chart-2 {
color: var(--color-chart-2);
}
.text-cyan-700 {
color: var(--color-cyan-700);
}
.text-danger {
color: var(--color-danger);
}
.text-destructive {
color: var(--color-destructive);
}
.text-destructive-foreground {
color: var(--color-destructive-foreground);
}
.text-emerald-500 {
color: var(--color-emerald-500);
}
.text-emerald-600 {
color: var(--color-emerald-600);
}
.text-emerald-700 {
color: var(--color-emerald-700);
}
.text-emerald-800 {
color: var(--color-emerald-800);
}
.text-foreground {
color: var(--color-foreground);
}
.text-foreground\/80 {
color: #1c1917cc;
}
@supports (color: color-mix(in lab, red, red)) {
.text-foreground\/80 {
color: color-mix(in oklab, var(--color-foreground) 80%, transparent);
}
}
.text-gray-100 {
color: var(--color-gray-100);
}
.text-gray-300 {
color: var(--color-gray-300);
}
.text-gray-400 {
color: var(--color-gray-400);
}
.text-gray-500 {
color: var(--color-gray-500);
}
.text-gray-600 {
color: var(--color-gray-600);
}
.text-gray-700 {
color: var(--color-gray-700);
}
.text-gray-800 {
color: var(--color-gray-800);
}
.text-gray-900 {
color: var(--color-gray-900);
}
.text-green-500 {
color: var(--color-green-500);
}
.text-green-600 {
color: var(--color-green-600);
}
.text-green-700 {
color: var(--color-green-700);
}
.text-green-800 {
color: var(--color-green-800);
}
.text-green-900 {
color: var(--color-green-900);
}
.text-indigo-600 {
color: var(--color-indigo-600);
}
.text-indigo-700 {
color: var(--color-indigo-700);
}
.text-ink {
color: var(--color-ink);
}
.text-muted-foreground {
color: var(--color-muted-foreground);
}
.text-muted-foreground\/40 {
color: #57534d66;
}
@supports (color: color-mix(in lab, red, red)) {
.text-muted-foreground\/40 {
color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
}
}
.text-muted-foreground\/50 {
color: #57534d80;
}
@supports (color: color-mix(in lab, red, red)) {
.text-muted-foreground\/50 {
color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
}
}
.text-muted-foreground\/60 {
color: #57534d99;
}
@supports (color: color-mix(in lab, red, red)) {
.text-muted-foreground\/60 {
color: color-mix(in oklab, var(--color-muted-foreground) 60%, transparent);
}
}
.text-muted-foreground\/70 {
color: #57534db3;
}
@supports (color: color-mix(in lab, red, red)) {
.text-muted-foreground\/70 {
color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
}
}
.text-muted-foreground\/80 {
color: #57534dcc;
}
@supports (color: color-mix(in lab, red, red)) {
.text-muted-foreground\/80 {
color: color-mix(in oklab, var(--color-muted-foreground) 80%, transparent);
}
}
.text-orange-600 {
color: var(--color-orange-600);
}
.text-orange-700 {
color: var(--color-orange-700);
}
.text-orange-800 {
color: var(--color-orange-800);
}
.text-primary {
color: var(--color-primary);
}
.text-primary-foreground {
color: var(--color-primary-foreground);
}
.text-purple-600 {
color: var(--color-purple-600);
}
.text-purple-700 {
color: var(--color-purple-700);
}
.text-purple-800 {
color: var(--color-purple-800);
}
.text-red-500 {
color: var(--color-red-500);
}
.text-red-600 {
color: var(--color-red-600);
}
.text-red-700 {
color: var(--color-red-700);
}
.text-red-700\/90 {
color: #bf000fe6;
}
@supports (color: color-mix(in lab, red, red)) {
.text-red-700\/90 {
color: color-mix(in oklab, var(--color-red-700) 90%, transparent);
}
}
.text-red-800 {
color: var(--color-red-800);
}
.text-red-900 {
color: var(--color-red-900);
}
.text-secondary-foreground {
color: var(--color-secondary-foreground);
}
.text-sky-500 {
color: var(--color-sky-500);
}
.text-sky-600 {
color: var(--color-sky-600);
}
.text-stone-200 {
color: var(--color-stone-200);
}
.text-stone-300 {
color: var(--color-stone-300);
}
.text-stone-400 {
color: var(--color-stone-400);
}
.text-stone-500 {
color: var(--color-stone-500);
}
.text-stone-600 {
color: var(--color-stone-600);
}
.text-stone-700 {
color: var(--color-stone-700);
}
.text-stone-800 {
color: var(--color-stone-800);
}
.text-stone-900 {
color: var(--color-stone-900);
}
.text-success {
color: var(--color-success);
}
.text-violet-800 {
color: var(--color-violet-800);
}
.text-warning {
color: var(--color-warning);
}
.text-white {
color: var(--color-white);
}
.text-yellow-500 {
color: var(--color-yellow-500);
}
.text-yellow-600 {
color: var(--color-yellow-600);
}
.text-yellow-700 {
color: var(--color-yellow-700);
}
.text-yellow-800 {
color: var(--color-yellow-800);
}
.text-yellow-900 {
color: var(--color-yellow-900);
}
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.ordinal {
--tw-ordinal: ordinal;
font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
}
.tabular-nums {
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
}
.line-through {
text-decoration-line: line-through;
}
.underline {
text-decoration-line: underline;
}
.decoration-muted-foreground\/40 {
text-decoration-color: #57534d66;
}
@supports (color: color-mix(in lab, red, red)) {
.decoration-muted-foreground\/40 {
-webkit-text-decoration-color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
text-decoration-color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
}
}
.accent-amber-500 {
accent-color: var(--color-amber-500);
}
.accent-blue-500 {
accent-color: var(--color-blue-500);
}
.accent-primary {
accent-color: var(--color-primary);
}
.opacity-0 {
opacity: 0;
}
.opacity-30 {
opacity: .3;
}
.opacity-40 {
opacity: .4;
}
.opacity-50 {
opacity: .5;
}
.opacity-60 {
opacity: .6;
}
.opacity-70 {
opacity: .7;
}
.opacity-80 {
opacity: .8;
}
.opacity-100 {
opacity: 1;
}
.shadow {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring {
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-0 {
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-1 {
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-2 {
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-blue-500\/20 {
--tw-shadow-color: #3080ff33;
}
@supports (color: color-mix(in lab, red, red)) {
.shadow-blue-500\/20 {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.shadow-blue-500\/25 {
--tw-shadow-color: #3080ff40;
}
@supports (color: color-mix(in lab, red, red)) {
.shadow-blue-500\/25 {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 25%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.shadow-stone-900\/20 {
--tw-shadow-color: #1c191733;
}
@supports (color: color-mix(in lab, red, red)) {
.shadow-stone-900\/20 {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-stone-900) 20%, transparent) var(--tw-shadow-alpha), transparent);
}
}
.ring-amber-400 {
--tw-ring-color: var(--color-amber-400);
}
.ring-blue-400 {
--tw-ring-color: var(--color-blue-400);
}
.ring-cyan-400 {
--tw-ring-color: var(--color-cyan-400);
}
.ring-emerald-400 {
--tw-ring-color: var(--color-emerald-400);
}
.ring-green-400 {
--tw-ring-color: var(--color-green-400);
}
.ring-indigo-400 {
--tw-ring-color: var(--color-indigo-400);
}
.ring-orange-400 {
--tw-ring-color: var(--color-orange-400);
}
.ring-primary {
--tw-ring-color: var(--color-primary);
}
.ring-red-400 {
--tw-ring-color: var(--color-red-400);
}
.ring-stone-400 {
--tw-ring-color: var(--color-stone-400);
}
.ring-violet-400 {
--tw-ring-color: var(--color-violet-400);
}
.ring-offset-background {
--tw-ring-offset-color: var(--color-background);
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.blur-\[100px\] {
--tw-blur: blur(100px);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.invert {
--tw-invert: invert(100%);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.filter {
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
.backdrop-blur {
--tw-backdrop-blur: blur(8px);
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}
.backdrop-blur-sm {
--tw-backdrop-blur: blur(var(--blur-sm));
-webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}
.transition {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-all {
transition-property: all;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-transform {
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.duration-150 {
--tw-duration: .15s;
transition-duration: .15s;
}
.duration-200 {
--tw-duration: .2s;
transition-duration: .2s;
}
.duration-300 {
--tw-duration: .3s;
transition-duration: .3s;
}
.ease-out {
--tw-ease: var(--ease-out);
transition-timing-function: var(--ease-out);
}
.outline-none {
--tw-outline-style: none;
outline-style: none;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
@media (hover: hover) {
.group-hover\:block:is(:where(.group):hover *) {
display: block;
}
}
@media (hover: hover) {
.group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
--tw-translate-x: calc(var(--spacing) * .5);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
@media (hover: hover) {
.group-hover\:text-foreground:is(:where(.group):hover *) {
color: var(--color-foreground);
}
}
@media (hover: hover) {
.group-hover\:text-gray-500:is(:where(.group):hover *) {
color: var(--color-gray-500);
}
}
@media (hover: hover) {
.group-hover\:opacity-100:is(:where(.group):hover *) {
opacity: 1;
}
}
@media (hover: hover) {
.group-hover\/link\:opacity-100:is(:where(.group\/link):hover *) {
opacity: 1;
}
}
.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
cursor: not-allowed;
}
.peer-disabled\:opacity-70:is(:where(.peer):disabled ~ *) {
opacity: .7;
}
.placeholder\:text-muted-foreground::placeholder {
color: var(--color-muted-foreground);
}
.placeholder\:text-muted-foreground\/60::placeholder {
color: #57534d99;
}
@supports (color: color-mix(in lab, red, red)) {
.placeholder\:text-muted-foreground\/60::placeholder {
color: color-mix(in oklab, var(--color-muted-foreground) 60%, transparent);
}
}
.placeholder\:text-stone-300::placeholder {
color: var(--color-stone-300);
}
.placeholder\:text-stone-400::placeholder {
color: var(--color-stone-400);
}
.last\:border-0:last-child {
border-style: var(--tw-border-style);
border-width: 0;
}
.last\:border-b-0:last-child {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0;
}
.focus-within\:ring-2:focus-within {
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-within\:ring-ring:focus-within {
--tw-ring-color: var(--color-ring);
}
.focus-within\:ring-offset-2:focus-within {
--tw-ring-offset-width: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus-within\:outline-none:focus-within {
--tw-outline-style: none;
outline-style: none;
}
@media (hover: hover) {
.hover\:scale-105:hover {
--tw-scale-x: 105%;
--tw-scale-y: 105%;
--tw-scale-z: 105%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}
@media (hover: hover) {
.hover\:border-\[var\(--color-ink-faint\)\]:hover {
border-color: var(--color-ink-faint);
}
}
@media (hover: hover) {
.hover\:border-accent\/40:hover {
border-color: #2563eb66;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:border-accent\/40:hover {
border-color: color-mix(in oklab, var(--color-accent) 40%, transparent);
}
}
}
@media (hover: hover) {
.hover\:border-black:hover {
border-color: var(--color-black);
}
}
@media (hover: hover) {
.hover\:border-blue-300:hover {
border-color: var(--color-blue-300);
}
}
@media (hover: hover) {
.hover\:border-blue-400:hover {
border-color: var(--color-blue-400);
}
}
@media (hover: hover) {
.hover\:border-blue-500:hover {
border-color: var(--color-blue-500);
}
}
@media (hover: hover) {
.hover\:border-blue-500\/50:hover {
border-color: #3080ff80;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:border-blue-500\/50:hover {
border-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}
}
}
@media (hover: hover) {
.hover\:border-emerald-500\/50:hover {
border-color: #00bb7f80;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:border-emerald-500\/50:hover {
border-color: color-mix(in oklab, var(--color-emerald-500) 50%, transparent);
}
}
}
@media (hover: hover) {
.hover\:border-foreground\/20:hover {
border-color: #1c191733;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:border-foreground\/20:hover {
border-color: color-mix(in oklab, var(--color-foreground) 20%, transparent);
}
}
}
@media (hover: hover) {
.hover\:border-muted-foreground\/50:hover {
border-color: #57534d80;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:border-muted-foreground\/50:hover {
border-color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
}
}
}
@media (hover: hover) {
.hover\:border-primary:hover {
border-color: var(--color-primary);
}
}
@media (hover: hover) {
.hover\:border-primary\/50:hover {
border-color: #1c191780;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:border-primary\/50:hover {
border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-\[var\(--color-border-subtle\)\]:hover {
background-color: var(--color-border-subtle);
}
}
@media (hover: hover) {
.hover\:bg-\[var\(--color-danger-soft\)\]:hover {
background-color: var(--color-danger-soft);
}
}
@media (hover: hover) {
.hover\:bg-\[var\(--color-surface-raised\)\]:hover {
background-color: var(--color-surface-raised);
}
}
@media (hover: hover) {
.hover\:bg-\[var\(--color-surface-sunken\)\]:hover {
background-color: var(--color-surface-sunken);
}
}
@media (hover: hover) {
.hover\:bg-accent:hover {
background-color: var(--color-accent);
}
}
@media (hover: hover) {
.hover\:bg-amber-700:hover {
background-color: var(--color-amber-700);
}
}
@media (hover: hover) {
.hover\:bg-amber-950:hover {
background-color: var(--color-amber-950);
}
}
@media (hover: hover) {
.hover\:bg-blue-50:hover {
background-color: var(--color-blue-50);
}
}
@media (hover: hover) {
.hover\:bg-blue-50\/40:hover {
background-color: #eff6ff66;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-blue-50\/40:hover {
background-color: color-mix(in oklab, var(--color-blue-50) 40%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-blue-100:hover {
background-color: var(--color-blue-100);
}
}
@media (hover: hover) {
.hover\:bg-blue-500\/\[0\.02\]:hover {
background-color: #3080ff05;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-blue-500\/\[0\.02\]:hover {
background-color: color-mix(in oklab, var(--color-blue-500) 2%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-blue-700:hover {
background-color: var(--color-blue-700);
}
}
@media (hover: hover) {
.hover\:bg-blue-800:hover {
background-color: var(--color-blue-800);
}
}
@media (hover: hover) {
.hover\:bg-destructive\/10:hover {
background-color: #dc26261a;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-destructive\/10:hover {
background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-destructive\/90:hover {
background-color: #dc2626e6;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-destructive\/90:hover {
background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-emerald-500\/\[0\.02\]:hover {
background-color: #00bb7f05;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-emerald-500\/\[0\.02\]:hover {
background-color: color-mix(in oklab, var(--color-emerald-500) 2%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-emerald-600:hover {
background-color: var(--color-emerald-600);
}
}
@media (hover: hover) {
.hover\:bg-emerald-700:hover {
background-color: var(--color-emerald-700);
}
}
@media (hover: hover) {
.hover\:bg-foreground\/90:hover {
background-color: #1c1917e6;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-foreground\/90:hover {
background-color: color-mix(in oklab, var(--color-foreground) 90%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-gray-50:hover {
background-color: var(--color-gray-50);
}
}
@media (hover: hover) {
.hover\:bg-gray-100:hover {
background-color: var(--color-gray-100);
}
}
@media (hover: hover) {
.hover\:bg-gray-200:hover {
background-color: var(--color-gray-200);
}
}
@media (hover: hover) {
.hover\:bg-gray-300:hover {
background-color: var(--color-gray-300);
}
}
@media (hover: hover) {
.hover\:bg-green-100:hover {
background-color: var(--color-green-100);
}
}
@media (hover: hover) {
.hover\:bg-muted:hover {
background-color: var(--color-muted);
}
}
@media (hover: hover) {
.hover\:bg-muted\/30:hover {
background-color: #f5f5f44d;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-muted\/30:hover {
background-color: color-mix(in oklab, var(--color-muted) 30%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-muted\/40:hover {
background-color: #f5f5f466;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-muted\/40:hover {
background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-muted\/50:hover {
background-color: #f5f5f480;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-muted\/50:hover {
background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-muted\/60:hover {
background-color: #f5f5f499;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-muted\/60:hover {
background-color: color-mix(in oklab, var(--color-muted) 60%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-primary\/40:hover {
background-color: #1c191766;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-primary\/40:hover {
background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-primary\/90:hover {
background-color: #1c1917e6;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-primary\/90:hover {
background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-purple-700:hover {
background-color: var(--color-purple-700);
}
}
@media (hover: hover) {
.hover\:bg-red-50:hover {
background-color: var(--color-red-50);
}
}
@media (hover: hover) {
.hover\:bg-red-100:hover {
background-color: var(--color-red-100);
}
}
@media (hover: hover) {
.hover\:bg-stone-50:hover {
background-color: var(--color-stone-50);
}
}
@media (hover: hover) {
.hover\:bg-stone-50\/50:hover {
background-color: #fafaf980;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:bg-stone-50\/50:hover {
background-color: color-mix(in oklab, var(--color-stone-50) 50%, transparent);
}
}
}
@media (hover: hover) {
.hover\:bg-stone-100:hover {
background-color: var(--color-stone-100);
}
}
@media (hover: hover) {
.hover\:bg-stone-800:hover {
background-color: var(--color-stone-800);
}
}
@media (hover: hover) {
.hover\:bg-transparent:hover {
background-color: #0000;
}
}
@media (hover: hover) {
.hover\:bg-white:hover {
background-color: var(--color-white);
}
}
@media (hover: hover) {
.hover\:bg-yellow-100:hover {
background-color: var(--color-yellow-100);
}
}
@media (hover: hover) {
.hover\:text-\[var\(--color-danger\)\]:hover {
color: var(--color-danger);
}
}
@media (hover: hover) {
.hover\:text-\[var\(--color-flowvaro-link\)\]:hover {
color: var(--color-flowvaro-link);
}
}
@media (hover: hover) {
.hover\:text-\[var\(--color-ink\)\]:hover {
color: var(--color-ink);
}
}
@media (hover: hover) {
.hover\:text-\[var\(--color-ink-muted\)\]:hover {
color: var(--color-ink-muted);
}
}
@media (hover: hover) {
.hover\:text-accent-foreground:hover {
color: var(--color-accent-foreground);
}
}
@media (hover: hover) {
.hover\:text-accent-hover:hover {
color: var(--color-accent-hover);
}
}
@media (hover: hover) {
.hover\:text-amber-500:hover {
color: var(--color-amber-500);
}
}
@media (hover: hover) {
.hover\:text-amber-900:hover {
color: var(--color-amber-900);
}
}
@media (hover: hover) {
.hover\:text-amber-950:hover {
color: var(--color-amber-950);
}
}
@media (hover: hover) {
.hover\:text-blue-600:hover {
color: var(--color-blue-600);
}
}
@media (hover: hover) {
.hover\:text-blue-700:hover {
color: var(--color-blue-700);
}
}
@media (hover: hover) {
.hover\:text-blue-800:hover {
color: var(--color-blue-800);
}
}
@media (hover: hover) {
.hover\:text-blue-900:hover {
color: var(--color-blue-900);
}
}
@media (hover: hover) {
.hover\:text-destructive:hover {
color: var(--color-destructive);
}
}
@media (hover: hover) {
.hover\:text-emerald-800:hover {
color: var(--color-emerald-800);
}
}
@media (hover: hover) {
.hover\:text-foreground:hover {
color: var(--color-foreground);
}
}
@media (hover: hover) {
.hover\:text-gray-600:hover {
color: var(--color-gray-600);
}
}
@media (hover: hover) {
.hover\:text-gray-700:hover {
color: var(--color-gray-700);
}
}
@media (hover: hover) {
.hover\:text-red-500:hover {
color: var(--color-red-500);
}
}
@media (hover: hover) {
.hover\:text-red-700:hover {
color: var(--color-red-700);
}
}
@media (hover: hover) {
.hover\:text-red-900:hover {
color: var(--color-red-900);
}
}
@media (hover: hover) {
.hover\:text-stone-600:hover {
color: var(--color-stone-600);
}
}
@media (hover: hover) {
.hover\:text-stone-700:hover {
color: var(--color-stone-700);
}
}
@media (hover: hover) {
.hover\:text-stone-800:hover {
color: var(--color-stone-800);
}
}
@media (hover: hover) {
.hover\:text-yellow-500:hover {
color: var(--color-yellow-500);
}
}
@media (hover: hover) {
.hover\:text-yellow-600:hover {
color: var(--color-yellow-600);
}
}
@media (hover: hover) {
.hover\:no-underline:hover {
text-decoration-line: none;
}
}
@media (hover: hover) {
.hover\:underline:hover {
text-decoration-line: underline;
}
}
@media (hover: hover) {
.hover\:opacity-80:hover {
opacity: .8;
}
}
@media (hover: hover) {
.hover\:opacity-90:hover {
opacity: .9;
}
}
@media (hover: hover) {
.hover\:shadow-md:hover {
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
@media (hover: hover) {
.hover\:shadow-sm:hover {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
@media (hover: hover) {
.hover\:ring-2:hover {
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
@media (hover: hover) {
.hover\:shadow-blue-500\/40:hover {
--tw-shadow-color: #3080ff66;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:shadow-blue-500\/40:hover {
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 40%, transparent) var(--tw-shadow-alpha), transparent);
}
}
}
@media (hover: hover) {
.hover\:ring-primary\/50:hover {
--tw-ring-color: #1c191780;
}
@supports (color: color-mix(in lab, red, red)) {
.hover\:ring-primary\/50:hover {
--tw-ring-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
}
}
}
.focus\:border-blue-300:focus {
border-color: var(--color-blue-300);
}
.focus\:border-blue-500:focus {
border-color: var(--color-blue-500);
}
.focus\:ring-2:focus {
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus\:ring-blue-100:focus {
--tw-ring-color: var(--color-blue-100);
}
.focus\:ring-blue-500:focus {
--tw-ring-color: var(--color-blue-500);
}
.focus\:ring-blue-500\/20:focus {
--tw-ring-color: #3080ff33;
}
@supports (color: color-mix(in lab, red, red)) {
.focus\:ring-blue-500\/20:focus {
--tw-ring-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
}
}
.focus\:ring-emerald-500:focus {
--tw-ring-color: var(--color-emerald-500);
}
.focus\:ring-ring:focus {
--tw-ring-color: var(--color-ring);
}
.focus\:ring-sky-500:focus {
--tw-ring-color: var(--color-sky-500);
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus\:outline-none:focus {
--tw-outline-style: none;
outline-style: none;
}
.focus-visible\:opacity-100:focus-visible {
opacity: 1;
}
.focus-visible\:ring-2:focus-visible {
--tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-blue-500:focus-visible {
--tw-ring-color: var(--color-blue-500);
}
.focus-visible\:ring-destructive:focus-visible {
--tw-ring-color: var(--color-destructive);
}
.focus-visible\:ring-ring:focus-visible {
--tw-ring-color: var(--color-ring);
}
.focus-visible\:ring-offset-2:focus-visible {
--tw-ring-offset-width: 2px;
--tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
}
.focus-visible\:outline-none:focus-visible {
--tw-outline-style: none;
outline-style: none;
}
.active\:cursor-grabbing:active {
cursor: grabbing;
}
.disabled\:pointer-events-none:disabled {
pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
cursor: not-allowed;
}
.disabled\:bg-stone-50:disabled {
background-color: var(--color-stone-50);
}
.disabled\:text-stone-400:disabled {
color: var(--color-stone-400);
}
.disabled\:opacity-40:disabled {
opacity: .4;
}
.disabled\:opacity-50:disabled {
opacity: .5;
}
@media (min-width: 40rem) {
.sm\:w-64 {
width: calc(var(--spacing) * 64);
}
}
@media (min-width: 40rem) {
.sm\:min-w-\[120px\] {
min-width: 120px;
}
}
@media (min-width: 40rem) {
.sm\:shrink-0 {
flex-shrink: 0;
}
}
@media (min-width: 40rem) {
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 40rem) {
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 40rem) {
.sm\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 40rem) {
.sm\:grid-cols-\[1fr_180px_auto\] {
grid-template-columns: 1fr 180px auto;
}
}
@media (min-width: 40rem) {
.sm\:flex-row {
flex-direction: row;
}
}
@media (min-width: 40rem) {
.sm\:gap-2 {
gap: calc(var(--spacing) * 2);
}
}
@media (min-width: 48rem) {
.md\:relative {
position: relative;
}
}
@media (min-width: 48rem) {
.md\:top-0 {
top: calc(var(--spacing) * 0);
}
}
@media (min-width: 48rem) {
.md\:left-auto {
left: auto;
}
}
@media (min-width: 48rem) {
.md\:col-span-2 {
grid-column: span 2 / span 2;
}
}
@media (min-width: 48rem) {
.md\:block {
display: block;
}
}
@media (min-width: 48rem) {
.md\:flex {
display: flex;
}
}
@media (min-width: 48rem) {
.md\:hidden {
display: none;
}
}
@media (min-width: 48rem) {
.md\:table-cell {
display: table-cell;
}
}
@media (min-width: 48rem) {
.md\:w-\[232px\] {
width: 232px;
}
}
@media (min-width: 48rem) {
.md\:max-w-md {
max-width: var(--container-md);
}
}
@media (min-width: 48rem) {
.md\:shrink-0 {
flex-shrink: 0;
}
}
@media (min-width: 48rem) {
.md\:translate-x-0 {
--tw-translate-x: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
}
@media (min-width: 48rem) {
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 48rem) {
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 48rem) {
.md\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 48rem) {
.md\:flex-row {
flex-direction: row;
}
}
@media (min-width: 48rem) {
:where(.md\:divide-x > :not(:last-child)) {
--tw-divide-x-reverse: 0;
border-inline-style: var(--tw-border-style);
border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
}
@media (min-width: 48rem) {
:where(.md\:divide-y-0 > :not(:last-child)) {
--tw-divide-y-reverse: 0;
border-bottom-style: var(--tw-border-style);
border-top-style: var(--tw-border-style);
border-top-width: calc(0px * var(--tw-divide-y-reverse));
border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
}
}
@media (min-width: 48rem) {
.md\:p-6 {
padding: calc(var(--spacing) * 6);
}
}
@media (min-width: 48rem) {
.md\:p-10 {
padding: calc(var(--spacing) * 10);
}
}
@media (min-width: 48rem) {
.md\:pb-0 {
padding-bottom: calc(var(--spacing) * 0);
}
}
@media (min-width: 48rem) {
.md\:pb-6 {
padding-bottom: calc(var(--spacing) * 6);
}
}
@media (min-width: 48rem) {
.md\:transition-none {
transition-property: none;
}
}
@media (min-width: 64rem) {
.lg\:col-span-1 {
grid-column: span 1 / span 1;
}
}
@media (min-width: 64rem) {
.lg\:col-span-2 {
grid-column: span 2 / span 2;
}
}
@media (min-width: 64rem) {
.lg\:flex {
display: flex;
}
}
@media (min-width: 64rem) {
.lg\:hidden {
display: none;
}
}
@media (min-width: 64rem) {
.lg\:table-cell {
display: table-cell;
}
}
@media (min-width: 64rem) {
.lg\:w-\[480px\] {
width: 480px;
}
}
@media (min-width: 64rem) {
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.lg\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.lg\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.lg\:grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (min-width: 64rem) {
.lg\:grid-cols-\[1fr_320px\] {
grid-template-columns: 1fr 320px;
}
}
@media (min-width: 64rem) {
.lg\:grid-cols-\[260px_1fr\] {
grid-template-columns: 260px 1fr;
}
}
@media (min-width: 80rem) {
.xl\:w-\[520px\] {
width: 520px;
}
}
@media (min-width: 80rem) {
.xl\:grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 80rem) {
.xl\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (prefers-color-scheme: dark) {
.dark\:border-amber-500\/20 {
border-color: #f99c0033;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:border-amber-500\/20 {
border-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:border-amber-900\/60 {
border-color: #7b330699;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:border-amber-900\/60 {
border-color: color-mix(in oklab, var(--color-amber-900) 60%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:border-blue-900\/40 {
border-color: #1c398e66;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:border-blue-900\/40 {
border-color: color-mix(in oklab, var(--color-blue-900) 40%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:border-blue-900\/60 {
border-color: #1c398e99;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:border-blue-900\/60 {
border-color: color-mix(in oklab, var(--color-blue-900) 60%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:border-red-500\/20 {
border-color: #fb2c3633;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:border-red-500\/20 {
border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-amber-500\/10 {
background-color: #f99c001a;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:bg-amber-500\/10 {
background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-amber-950\/20 {
background-color: #46190133;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:bg-amber-950\/20 {
background-color: color-mix(in oklab, var(--color-amber-950) 20%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-amber-950\/30 {
background-color: #4619014d;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:bg-amber-950\/30 {
background-color: color-mix(in oklab, var(--color-amber-950) 30%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-blue-950\/20 {
background-color: #16245633;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:bg-blue-950\/20 {
background-color: color-mix(in oklab, var(--color-blue-950) 20%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-blue-950\/30 {
background-color: #1624564d;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:bg-blue-950\/30 {
background-color: color-mix(in oklab, var(--color-blue-950) 30%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-blue-950\/40 {
background-color: #16245666;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:bg-blue-950\/40 {
background-color: color-mix(in oklab, var(--color-blue-950) 40%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-green-500\/10 {
background-color: #00c7581a;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:bg-green-500\/10 {
background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-red-500\/10 {
background-color: #fb2c361a;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:bg-red-500\/10 {
background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:bg-stone-900 {
background-color: var(--color-stone-900);
}
}
@media (prefers-color-scheme: dark) {
.dark\:text-amber-100 {
color: var(--color-amber-100);
}
}
@media (prefers-color-scheme: dark) {
.dark\:text-amber-200 {
color: var(--color-amber-200);
}
}
@media (prefers-color-scheme: dark) {
.dark\:text-amber-200\/80 {
color: #fee685cc;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:text-amber-200\/80 {
color: color-mix(in oklab, var(--color-amber-200) 80%, transparent);
}
}
}
@media (prefers-color-scheme: dark) {
.dark\:text-blue-100 {
color: var(--color-blue-100);
}
}
@media (prefers-color-scheme: dark) {
.dark\:text-blue-200 {
color: var(--color-blue-200);
}
}
@media (prefers-color-scheme: dark) {
.dark\:text-blue-300 {
color: var(--color-blue-300);
}
}
@media (prefers-color-scheme: dark) {
.dark\:text-blue-400 {
color: var(--color-blue-400);
}
}
@media (prefers-color-scheme: dark) {
.dark\:text-red-200 {
color: var(--color-red-200);
}
}
@media (prefers-color-scheme: dark) {
.dark\:brightness-\[1\.7\] {
--tw-brightness: brightness(1.7);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
}
@media (prefers-color-scheme: dark) {
.dark\:saturate-\[1\.1\] {
--tw-saturate: saturate(1.1);
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}
}
@media (prefers-color-scheme: dark) {
@media (hover: hover) {
.dark\:hover\:bg-blue-950\/50:hover {
background-color: #16245680;
}
@supports (color: color-mix(in lab, red, red)) {
.dark\:hover\:bg-blue-950\/50:hover {
background-color: color-mix(in oklab, var(--color-blue-950) 50%, transparent);
}
}
}
}
@media (pointer: coarse) {
.pointer-coarse\:-m-1 {
margin: calc(var(--spacing) * -1);
}
}
@media (pointer: coarse) {
.pointer-coarse\:-my-2 {
margin-block: calc(var(--spacing) * -2);
}
}
@media (pointer: coarse) {
.pointer-coarse\:-mr-2 {
margin-right: calc(var(--spacing) * -2);
}
}
@media (pointer: coarse) {
.pointer-coarse\:h-11 {
height: calc(var(--spacing) * 11);
}
}
@media (pointer: coarse) {
.pointer-coarse\:w-11 {
width: calc(var(--spacing) * 11);
}
}
@media (pointer: coarse) {
.pointer-coarse\:rounded-md {
border-radius: var(--radius-md);
}
}
@media (pointer: coarse) {
.pointer-coarse\:p-2 {
padding: calc(var(--spacing) * 2);
}
}
@media (pointer: coarse) {
.pointer-coarse\:p-2\.5 {
padding: calc(var(--spacing) * 2.5);
}
}
@media (pointer: coarse) {
.pointer-coarse\:px-2 {
padding-inline: calc(var(--spacing) * 2);
}
}
@media (pointer: coarse) {
.pointer-coarse\:py-2 {
padding-block: calc(var(--spacing) * 2);
}
}
@media (pointer: coarse) {
.pointer-coarse\:py-2\.5 {
padding-block: calc(var(--spacing) * 2.5);
}
}
@media (pointer: coarse) {
.pointer-coarse\:py-3 {
padding-block: calc(var(--spacing) * 3);
}
}
}
* {
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
background: var(--color-surface);
color: var(--color-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: var(--color-ink-faint);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-ink-muted);
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-in-scale {
from {
opacity: 0;
transform: scale(.97);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes pulse-ring {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(2.2);
}
}
@keyframes count-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: .4s ease-out both fade-in;
}
.animate-fade-in-scale {
animation: .35s ease-out both fade-in-scale;
}
.stagger-children > * {
animation: .4s ease-out both fade-in;
}
.stagger-children > :first-child {
animation-delay: 0s;
}
.stagger-children > :nth-child(2) {
animation-delay: 50ms;
}
.stagger-children > :nth-child(3) {
animation-delay: .1s;
}
.stagger-children > :nth-child(4) {
animation-delay: .15s;
}
.stagger-children > :nth-child(5) {
animation-delay: .2s;
}
.stagger-children > :nth-child(6) {
animation-delay: .25s;
}
.stagger-children > :nth-child(7) {
animation-delay: .3s;
}
.stagger-children > :nth-child(8) {
animation-delay: .35s;
}
.skeleton {
background: linear-gradient(90deg, var(--color-border-subtle) 25%, var(--color-border) 50%, var(--color-border-subtle) 75%);
border-radius: var(--radius-sm);
background-size: 200% 100%;
animation: 1.5s infinite shimmer;
}
.pulse-dot {
position: relative;
}
.pulse-dot:after {
content: "";
background: inherit;
border-radius: 50%;
animation: 1.5s cubic-bezier(.4, 0, .6, 1) infinite pulse-ring;
position: absolute;
inset: 0;
}
.noise-overlay {
position: relative;
}
.noise-overlay:before {
content: "";
opacity: .03;
pointer-events: none;
border-radius: inherit;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
position: absolute;
inset: 0;
}
.glass {
-webkit-backdrop-filter: blur(12px);
background: #ffffffb3;
}
[data-theme="dark"] {
--color-surface: #0b0d12;
--color-surface-raised: #111827;
--color-surface-sunken: #1f2937;
--color-ink: #f1f5f9;
--color-ink-muted: #cbd5e1;
--color-ink-faint: #94a3b8;
--color-ink-inverse: #0b0d12;
--color-border: #1f2937;
--color-border-subtle: #111827;
--color-flowvaro-deep: #3b82f6;
--color-flowvaro-bright: #60a5fa;
--color-flowvaro-glow: #93c5fd;
--color-flowvaro-link: #60a5fa;
--color-flowvaro-link-hover: #93c5fd;
}
.flowvaro-topbar {
height: var(--flowvaro-topbar-h);
background: var(--color-surface-raised);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
justify-content: space-between;
align-items: center;
padding: 0 24px;
display: flex;
}
.flowvaro-logo {
color: inherit;
align-items: center;
gap: 10px;
text-decoration: none;
display: inline-flex;
}
.flowvaro-logo-img {
width: auto;
height: 40px;
display: block;
}
.flowvaro-logo-light {
display: inline;
}
.flowvaro-logo-dark, [data-theme="dark"] .flowvaro-logo-light {
display: none;
}
[data-theme="dark"] .flowvaro-logo-dark {
display: inline;
}
.flowvaro-ws-side {
background: var(--color-flowvaro-ws-bg);
border: 1px solid var(--color-flowvaro-ws-border);
cursor: pointer;
text-align: left;
width: calc(100% - 16px);
color: inherit;
border-radius: 8px;
align-items: center;
gap: 10px;
margin: 12px 8px 8px;
padding: 8px 10px;
font-family: inherit;
transition: background .15s, border-color .15s;
display: flex;
}
.flowvaro-ws-side:hover {
background: var(--color-flowvaro-ws-bg-hover);
border-color: var(--color-flowvaro-ws-border-hover);
}
.flowvaro-ws-side:focus-visible {
outline: 2px solid var(--color-flowvaro-bright);
outline-offset: 2px;
}
.flowvaro-ws-avatar {
background: linear-gradient(135deg, var(--color-flowvaro-deep), var(--color-flowvaro-bright));
color: #fff;
border-radius: 6px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
font-size: 12px;
font-weight: 800;
display: flex;
}
.flowvaro-ws-info {
flex-direction: column;
flex: 1;
min-width: 0;
display: flex;
}
.flowvaro-ws-name {
color: var(--color-flowvaro-ws-name);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
overflow: hidden;
}
.flowvaro-ws-tier {
color: var(--color-flowvaro-ws-tier);
text-transform: uppercase;
letter-spacing: .05em;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 1px;
font-size: 9.5px;
font-weight: 800;
line-height: 1.2;
overflow: hidden;
}
.flowvaro-ws-chevron {
width: 14px;
height: 14px;
color: var(--color-flowvaro-ws-chevron);
flex-shrink: 0;
}
.flowvaro-greet {
flex-wrap: wrap;
align-items: flex-end;
gap: 14px;
margin-bottom: 22px;
display: flex;
}
.flowvaro-greet h1 {
letter-spacing: -.02em;
color: var(--color-ink);
margin: 0;
font-size: 28px;
font-weight: 800;
}
.flowvaro-greet .name {
background: linear-gradient(135deg, var(--color-flowvaro-deep), var(--color-flowvaro-bright));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.flowvaro-greet .meta {
color: var(--color-ink-muted);
flex: 1;
min-width: 240px;
padding-bottom: 5px;
font-size: 13.5px;
}
.flowvaro-greet .meta b {
color: var(--color-ink);
font-weight: 600;
}
.flowvaro-greet .actions {
gap: 8px;
padding-bottom: 5px;
display: flex;
}
.flowvaro-btn-ghost, .flowvaro-btn-primary {
cursor: pointer;
white-space: nowrap;
border-radius: 6px;
align-items: center;
gap: 6px;
padding: 8px 14px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
transition: all .12s;
display: inline-flex;
}
.flowvaro-btn-ghost {
color: var(--color-ink);
border: 1px solid var(--color-border);
background: none;
}
.flowvaro-btn-ghost:hover {
background: var(--color-surface-sunken);
border-color: var(--color-ink-faint);
}
.flowvaro-btn-primary {
background: var(--color-flowvaro-deep);
color: #fff;
border: 1px solid var(--color-flowvaro-deep);
box-shadow: 0 1px 2px #0f172a1f;
}
.flowvaro-btn-primary:hover {
background: var(--color-flowvaro-link);
box-shadow: 0 2px 6px #1e3a8a4d;
}
.flowvaro-insight-banner {
color: #fff;
background: linear-gradient(135deg, #1e1b3a 0%, #2a1a4a 60%, #4c1d95 100%);
border-radius: 14px;
align-items: center;
gap: 16px;
margin-bottom: 22px;
padding: 18px 22px;
display: flex;
position: relative;
overflow: hidden;
}
.flowvaro-insight-banner:before {
content: "✦";
opacity: .08;
color: #fff;
pointer-events: none;
font-size: 140px;
line-height: 1;
position: absolute;
top: -16px;
right: 22px;
}
.flowvaro-insight-banner__icon {
background: linear-gradient(135deg, var(--color-flowvaro-deep), #ec4899);
border-radius: 12px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
font-size: 22px;
display: flex;
}
.flowvaro-insight-banner__body {
flex: 1;
min-width: 0;
}
.flowvaro-insight-banner__body h4 {
color: #fff;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
display: flex;
}
.flowvaro-insight-banner__tag {
color: #fff;
font-size: 10px;
font-weight: 700;
font-family: var(--font-mono);
letter-spacing: .04em;
text-transform: uppercase;
background: #ffffff26;
border-radius: 10px;
padding: 2px 8px;
}
.flowvaro-insight-banner__body p {
color: #ffffffc7;
max-width: 720px;
margin: 0;
font-size: 13px;
line-height: 1.55;
}
.flowvaro-insight-banner__body p b {
color: #fff;
font-weight: 700;
}
.flowvaro-insight-banner__actions {
flex-shrink: 0;
gap: 6px;
display: flex;
}
.flowvaro-btn-w {
color: #fff;
cursor: pointer;
white-space: nowrap;
background: #ffffff1f;
border: 1px solid #ffffff2e;
border-radius: 7px;
align-items: center;
gap: 5px;
padding: 7px 13px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
transition: background .12s;
display: inline-flex;
}
.flowvaro-btn-w:hover {
background: #ffffff38;
}
.flowvaro-btn-w.is-primary {
background: var(--color-flowvaro-bright);
border-color: var(--color-flowvaro-bright);
}
.flowvaro-btn-w.is-primary:hover {
background: var(--color-flowvaro-link);
}
.flowvaro-kpi-row {
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 22px;
display: grid;
}
@media (max-width: 1100px) {
.flowvaro-kpi-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.flowvaro-kpi-row {
grid-template-columns: 1fr;
}
}
.flowvaro-kpi-card {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
cursor: pointer;
border-radius: 12px;
padding: 16px 18px;
transition: all .12s;
}
.flowvaro-kpi-card:hover {
border-color: var(--color-ink-faint);
box-shadow: 0 4px 12px #0f172a0f;
}
.flowvaro-kpi-top {
align-items: center;
gap: 10px;
margin-bottom: 8px;
display: flex;
}
.flowvaro-kpi-icon {
color: #fff;
border-radius: 8px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
display: flex;
}
.flowvaro-kpi-icon--sends {
background: linear-gradient(135deg, #5b5bd6, #3b82f6);
}
.flowvaro-kpi-icon--opens {
background: linear-gradient(135deg, var(--color-flowvaro-deep), #ec4899);
}
.flowvaro-kpi-icon--clicks {
background: linear-gradient(135deg, #16a34a, #22c55e);
}
.flowvaro-kpi-icon--revenue {
background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.flowvaro-kpi-label {
color: var(--color-ink-muted);
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
font-size: 12px;
font-weight: 600;
overflow: hidden;
}
.flowvaro-kpi-arrow {
color: var(--color-ink-faint);
flex-shrink: 0;
margin-left: auto;
}
.flowvaro-kpi-value {
font-size: 32px;
font-weight: 700;
font-family: var(--font-mono);
letter-spacing: -.02em;
color: var(--color-ink);
line-height: 1;
}
.flowvaro-kpi-value--ok {
color: var(--color-success);
}
.flowvaro-kpi-compare {
color: var(--color-ink-faint);
font-size: 12px;
font-family: var(--font-mono);
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 6px;
display: flex;
}
.flowvaro-kpi-delta {
color: var(--color-success);
background: var(--color-success-soft);
white-space: nowrap;
border-radius: 10px;
padding: 1px 7px;
font-weight: 700;
}
.flowvaro-kpi-delta--down {
color: var(--color-danger);
background: var(--color-danger-soft);
}
.flowvaro-kpi-spark {
width: 100%;
height: 30px;
margin-top: 10px;
display: block;
}
.flowvaro-dash-layout {
grid-template-columns: 1.6fr 1fr;
gap: 22px;
margin-bottom: 22px;
display: grid;
}
@media (max-width: 1100px) {
.flowvaro-dash-layout {
grid-template-columns: 1fr;
}
}
.flowvaro-dash-card {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: 12px;
overflow: hidden;
}
.flowvaro-dash-card-head {
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-sunken);
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 14px 18px;
display: flex;
}
.flowvaro-dash-card-head h3 {
color: var(--color-ink);
margin: 0;
font-size: 14px;
font-weight: 700;
}
.flowvaro-dash-card-head .sub {
color: var(--color-ink-faint);
font-size: 12px;
font-family: var(--font-mono);
}
.flowvaro-dash-card-head .spacer {
flex: 1;
}
.flowvaro-dash-card-head .live {
background: var(--color-success-soft);
color: var(--color-success);
font-size: 10.5px;
font-weight: 700;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: .04em;
border-radius: 12px;
align-items: center;
gap: 5px;
padding: 2px 8px;
display: inline-flex;
}
.flowvaro-dash-card-head .live:before {
content: "";
background: var(--color-success);
border-radius: 50%;
width: 6px;
height: 6px;
animation: 1.6s infinite flowvaro-pulse;
}
@keyframes flowvaro-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .3;
}
}
.flowvaro-dash-card-head .health-tag {
font-family: var(--font-mono);
color: var(--color-success);
font-size: 11px;
font-weight: 700;
}
.flowvaro-checklist-card {
background: linear-gradient(135deg, var(--color-accent-soft), var(--color-surface-raised));
border: 1px solid #bfdbfe;
border-radius: 14px;
margin-bottom: 22px;
overflow: hidden;
}
.flowvaro-checklist-head {
align-items: center;
gap: 12px;
padding: 16px 22px 8px;
display: flex;
}
.flowvaro-checklist-head h3 {
color: var(--color-ink);
margin: 0;
font-size: 16px;
font-weight: 700;
}
.flowvaro-checklist-head p {
color: var(--color-flowvaro-link);
margin: 4px 0 0;
font-size: 12.5px;
}
.flowvaro-checklist-pill {
background: var(--color-accent);
color: #fff;
font-size: 11px;
font-weight: 800;
font-family: var(--font-mono);
border-radius: 12px;
margin-left: auto;
padding: 3px 10px;
}
.flowvaro-checklist-bar {
background: #00000014;
border-radius: 3px;
height: 6px;
margin: 0 22px;
overflow: hidden;
}
.flowvaro-checklist-bar .fill {
background: linear-gradient(90deg, var(--color-accent), #ec4899);
border-radius: 3px;
height: 100%;
}
.flowvaro-checklist-items {
grid-template-columns: repeat(7, 1fr);
gap: 0;
padding: 14px 0 18px;
display: grid;
}
.flowvaro-checklist-item {
text-align: center;
cursor: pointer;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 8px 12px;
display: flex;
position: relative;
}
.flowvaro-checklist-pip {
background: var(--color-surface-raised);
border: 2px solid var(--color-border);
width: 38px;
height: 38px;
color: var(--color-ink-faint);
font-weight: 800;
font-family: var(--font-mono);
border-radius: 50%;
justify-content: center;
align-items: center;
font-size: 14px;
display: flex;
}
.flowvaro-checklist-item.is-done .flowvaro-checklist-pip {
background: var(--color-success);
border-color: var(--color-success);
color: #fff;
}
.flowvaro-checklist-item.is-current .flowvaro-checklist-pip {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
box-shadow: 0 0 0 4px var(--color-accent-soft);
}
.flowvaro-checklist-item strong {
color: var(--color-ink);
font-size: 11.5px;
font-weight: 700;
}
.flowvaro-checklist-item small {
color: var(--color-ink-faint);
font-size: 10.5px;
line-height: 1.3;
}
.flowvaro-checklist-item.is-done small {
color: var(--color-success);
font-weight: 600;
}
.flowvaro-checklist-item.is-current small {
color: var(--color-accent);
font-weight: 600;
}
.flowvaro-checklist-item:not(:last-child):after {
content: "";
background: var(--color-border);
z-index: 0;
width: 32px;
height: 2px;
position: absolute;
top: 27px;
right: -16px;
}
.flowvaro-checklist-item.is-done:not(:last-child):after {
background: var(--color-success);
}
.flowvaro-right-stack {
flex-direction: column;
gap: 18px;
display: flex;
}
.flowvaro-score-circle {
border-bottom: 1px dashed var(--color-border);
align-items: center;
gap: 16px;
margin-bottom: 0;
padding: 18px 22px 16px;
display: flex;
}
.flowvaro-score-ring {
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
display: flex;
position: relative;
}
.flowvaro-score-ring:before {
content: "";
background: var(--color-surface-raised);
border-radius: 50%;
position: absolute;
inset: 8px;
}
.flowvaro-score-ring .v {
font-size: 28px;
font-weight: 800;
font-family: var(--font-mono);
position: relative;
}
.flowvaro-score-info h4 {
color: var(--color-ink);
margin: 0 0 4px;
font-size: 16px;
font-weight: 700;
}
.flowvaro-score-info p {
color: var(--color-ink-muted);
margin: 0;
font-size: 12.5px;
line-height: 1.5;
}
.flowvaro-score-info b {
color: var(--color-ink);
}
.flowvaro-health-checks {
gap: 6px;
padding: 8px 22px 18px;
display: grid;
}
.flowvaro-health-row {
border-bottom: 1px dashed var(--color-border);
grid-template-columns: 22px 1fr auto;
align-items: center;
gap: 10px;
padding: 7px 0;
display: grid;
}
.flowvaro-health-row:last-child {
border-bottom: 0;
}
.flowvaro-health-row .dot {
background: var(--color-success);
border-radius: 50%;
width: 10px;
height: 10px;
}
.flowvaro-health-row .dot.warn {
background: var(--color-warning);
}
.flowvaro-health-row .dot.bad {
background: var(--color-danger);
}
.flowvaro-health-row .lbl strong {
color: var(--color-ink);
font-size: 12.5px;
font-weight: 600;
display: block;
}
.flowvaro-health-row .lbl small {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono);
}
.flowvaro-health-row .v {
font-family: var(--font-mono);
color: var(--color-ink);
font-size: 12px;
font-weight: 700;
}
.flowvaro-health-row .v.ok {
color: var(--color-success);
}
.flowvaro-health-row .v.warn {
color: var(--color-warning);
}
.flowvaro-health-row .v.bad {
color: var(--color-danger);
}
.flowvaro-qa-list {
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 8px 12px 16px;
display: grid;
}
.flowvaro-qa {
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
cursor: pointer;
color: inherit;
text-align: left;
border-radius: 10px;
align-items: center;
gap: 10px;
padding: 12px;
font-family: inherit;
text-decoration: none;
transition: all .12s;
display: flex;
}
.flowvaro-qa:hover {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.flowvaro-qa-icon {
color: #fff;
border-radius: 9px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
display: flex;
}
.flowvaro-qa--campaign .flowvaro-qa-icon {
background: linear-gradient(135deg, var(--color-flowvaro-deep), #ec4899);
}
.flowvaro-qa--journey .flowvaro-qa-icon {
background: linear-gradient(135deg, #5b5bd6, #3b82f6);
}
.flowvaro-qa--template .flowvaro-qa-icon {
background: linear-gradient(135deg, var(--color-success), #22c55e);
}
.flowvaro-qa--contact .flowvaro-qa-icon {
background: linear-gradient(135deg, #a855f7, #7c3aed);
}
.flowvaro-qa--form .flowvaro-qa-icon {
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}
.flowvaro-qa--sms .flowvaro-qa-icon {
background: linear-gradient(135deg, var(--color-warning), #1e3a8a);
}
.flowvaro-qa strong {
color: var(--color-ink);
font-size: 13px;
font-weight: 700;
display: block;
}
.flowvaro-qa small {
color: var(--color-ink-faint);
font-size: 11px;
}
.flowvaro-insights-grid {
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 22px;
display: grid;
}
@media (max-width: 1100px) {
.flowvaro-insights-grid {
grid-template-columns: 1fr;
}
}
.flowvaro-ai-card {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
cursor: pointer;
border-radius: 12px;
flex-direction: column;
padding: 16px 18px;
transition: all .12s;
display: flex;
position: relative;
}
.flowvaro-ai-card:hover {
border-color: var(--color-ink-faint);
transform: translateY(-2px);
box-shadow: 0 8px 16px -4px #0f172a1a;
}
.flowvaro-ai-card-pill {
color: #a855f7;
font-size: 10px;
font-weight: 800;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: .04em;
background: #faf5ff;
border: 1px solid #a855f74d;
border-radius: 12px;
align-self: flex-start;
align-items: center;
gap: 5px;
margin-bottom: 10px;
padding: 2px 9px;
display: inline-flex;
}
.flowvaro-ai-card.is-warn .flowvaro-ai-card-pill {
background: var(--color-warning-soft);
color: var(--color-warning);
border-color: #d977064d;
}
.flowvaro-ai-card.is-ok .flowvaro-ai-card-pill {
background: var(--color-success-soft);
color: var(--color-success);
border-color: #10b9814d;
}
.flowvaro-ai-card h4 {
color: var(--color-ink);
margin: 0 0 6px;
font-size: 14.5px;
font-weight: 700;
}
.flowvaro-ai-card p {
color: var(--color-ink-muted);
margin: 0 0 10px;
font-size: 12.5px;
line-height: 1.5;
}
.flowvaro-ai-card p b {
color: var(--color-ink);
}
.flowvaro-ai-card p code {
background: var(--color-surface-sunken);
color: var(--color-ink);
font-family: var(--font-mono);
border-radius: 3px;
padding: 1px 5px;
font-size: 11.5px;
}
.flowvaro-ai-card-arrow {
color: var(--color-accent);
font-size: 12px;
font-weight: 700;
font-family: var(--font-mono);
align-items: center;
gap: 4px;
margin-top: auto;
display: inline-flex;
}
.flowvaro-campaigns-table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
font-size: 13px;
}
.flowvaro-campaigns-table col.flowvaro-col-campaign {
width: 36%;
}
.flowvaro-campaigns-table col.flowvaro-col-status {
width: 15%;
}
.flowvaro-campaigns-table col.flowvaro-col-recipients {
width: 11%;
}
.flowvaro-campaigns-table col.flowvaro-col-open, .flowvaro-campaigns-table col.flowvaro-col-click {
width: 12%;
}
.flowvaro-campaigns-table col.flowvaro-col-sent {
width: 14%;
}
.flowvaro-campaigns-table thead {
background: var(--color-surface-sunken);
}
.flowvaro-campaigns-table th {
text-align: left;
color: var(--color-ink-faint);
border-bottom: 1px solid var(--color-border);
text-transform: uppercase;
letter-spacing: .06em;
white-space: nowrap;
padding: 10px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-campaigns-table th:first-child {
padding-left: 18px;
}
.flowvaro-campaigns-table th:last-child {
padding-right: 18px;
}
.flowvaro-campaigns-table th.is-num {
text-align: right;
}
.flowvaro-campaigns-table td {
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
color: var(--color-ink);
padding: 13px 10px;
}
.flowvaro-campaigns-table td:first-child {
padding-left: 18px;
}
.flowvaro-campaigns-table td:last-child {
padding-right: 18px;
}
.flowvaro-campaigns-table td.is-num {
text-align: right;
font-family: var(--font-mono);
}
.flowvaro-campaigns-table tbody tr {
cursor: pointer;
}
.flowvaro-campaigns-table tbody tr:hover {
background: var(--color-surface-sunken);
}
.flowvaro-campaigns-table tbody tr:last-child td {
border-bottom: 0;
}
.flowvaro-camp-cell {
align-items: center;
gap: 10px;
min-width: 0;
display: flex;
}
.flowvaro-camp-cell-text {
flex: 1;
min-width: 0;
}
.flowvaro-camp-thumb {
background: linear-gradient(135deg, var(--color-accent-soft), #bfdbfe);
border-radius: 7px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
font-size: 16px;
display: flex;
}
.flowvaro-camp-thumb.green {
background: linear-gradient(135deg, var(--color-success-soft), #a7f3d0);
}
.flowvaro-camp-thumb.indigo {
background: linear-gradient(135deg, #eef2ff, #c7d2fe);
}
.flowvaro-camp-thumb.pink {
background: linear-gradient(135deg, #fce7f3, #fbcfe8);
}
.flowvaro-camp-cell strong {
color: var(--color-ink);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13.5px;
font-weight: 700;
display: block;
overflow: hidden;
}
.flowvaro-camp-cell small {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono);
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 1px;
display: block;
overflow: hidden;
}
.flowvaro-status-pill {
text-transform: uppercase;
letter-spacing: .04em;
font-size: 10.5px;
font-weight: 700;
font-family: var(--font-mono);
border-radius: 12px;
align-items: center;
gap: 5px;
padding: 2px 9px;
display: inline-flex;
}
.flowvaro-status-pill:before {
content: "";
background: currentColor;
border-radius: 50%;
width: 6px;
height: 6px;
}
.flowvaro-status-pill.is-sent {
background: var(--color-success-soft);
color: var(--color-success);
}
.flowvaro-status-pill.is-sending {
color: #5b5bd6;
background: #eef2ff;
}
.flowvaro-status-pill.is-scheduled {
background: var(--color-accent-soft);
color: var(--color-flowvaro-link);
}
.flowvaro-status-pill.is-draft {
background: var(--color-surface-sunken);
color: var(--color-ink-faint);
}
.flowvaro-status-pill.is-review {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.flowvaro-status-pill.is-paused {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.flowvaro-rate-cell {
flex-direction: column;
gap: 3px;
display: flex;
}
.flowvaro-rate-cell .v {
color: var(--color-ink);
font-size: 13px;
font-weight: 700;
}
.flowvaro-rate-cell .v.ok {
color: var(--color-success);
}
.flowvaro-rate-cell .v.muted {
color: var(--color-ink-faint);
}
.flowvaro-rate-bar {
background: var(--color-surface-sunken);
border-radius: 2px;
height: 4px;
overflow: hidden;
}
.flowvaro-rate-bar .fill {
background: var(--color-success);
border-radius: 2px;
height: 100%;
}
.flowvaro-cell-time {
font-family: var(--font-mono);
color: var(--color-ink-faint);
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 100%;
font-size: 11.5px;
display: inline-block;
overflow: hidden;
}
.flowvaro-feed-list {
padding: 6px 0;
}
.flowvaro-feed-row {
border-bottom: 1px solid var(--color-border);
cursor: pointer;
grid-template-columns: 32px 1fr;
gap: 12px;
padding: 12px 18px;
display: grid;
}
.flowvaro-feed-row:last-child {
border-bottom: 0;
}
.flowvaro-feed-row:hover {
background: var(--color-surface-sunken);
}
.flowvaro-feed-icon {
color: #fff;
border-radius: 8px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
display: flex;
}
.flowvaro-feed-row.is-send .flowvaro-feed-icon {
background: linear-gradient(135deg, #5b5bd6, #3b82f6);
}
.flowvaro-feed-row.is-open .flowvaro-feed-icon {
background: linear-gradient(135deg, var(--color-success), #22c55e);
}
.flowvaro-feed-row.is-click .flowvaro-feed-icon {
background: linear-gradient(135deg, var(--color-success), #16a34a);
}
.flowvaro-feed-row.is-signup .flowvaro-feed-icon {
background: linear-gradient(135deg, var(--color-flowvaro-deep), #ec4899);
}
.flowvaro-feed-row.is-bounce .flowvaro-feed-icon {
background: linear-gradient(135deg, var(--color-danger), #ec4899);
}
.flowvaro-feed-row.is-team .flowvaro-feed-icon {
background: linear-gradient(135deg, #a855f7, #7c3aed);
}
.flowvaro-feed-row.is-system .flowvaro-feed-icon {
background: linear-gradient(135deg, #94a3b8, #475569);
}
.flowvaro-feed-body {
color: var(--color-ink-muted);
font-size: 12.5px;
line-height: 1.5;
}
.flowvaro-feed-body strong {
color: var(--color-ink);
font-weight: 700;
}
.flowvaro-feed-body code {
background: var(--color-surface-sunken);
font-family: var(--font-mono);
color: var(--color-ink);
border-radius: 3px;
padding: 1px 5px;
font-size: 11.5px;
}
.flowvaro-feed-ts {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono);
margin-top: 3px;
}
.flowvaro-bottom-grid {
grid-template-columns: 1.4fr 1fr;
gap: 22px;
margin-bottom: 22px;
display: grid;
}
@media (max-width: 1100px) {
.flowvaro-bottom-grid {
grid-template-columns: 1fr;
}
}
.flowvaro-schedule-row {
border-bottom: 1px solid var(--color-border);
cursor: pointer;
grid-template-columns: 60px 1fr auto;
align-items: center;
gap: 14px;
padding: 12px 18px;
display: grid;
}
.flowvaro-schedule-row:last-child {
border-bottom: 0;
}
.flowvaro-schedule-row:hover {
background: var(--color-surface-sunken);
}
.flowvaro-schedule-day {
text-align: center;
font-family: var(--font-mono);
}
.flowvaro-schedule-day .d {
color: var(--color-ink);
font-size: 24px;
font-weight: 800;
line-height: 1;
}
.flowvaro-schedule-day .m {
color: var(--color-ink-faint);
text-transform: uppercase;
letter-spacing: .04em;
margin-top: 4px;
font-size: 11px;
}
.flowvaro-schedule-day.is-today .d {
color: var(--color-accent);
}
.flowvaro-schedule-day.is-today .m {
color: var(--color-flowvaro-link);
font-weight: 700;
}
.flowvaro-schedule-meta strong {
color: var(--color-ink);
margin-bottom: 3px;
font-size: 13.5px;
font-weight: 700;
display: block;
}
.flowvaro-schedule-meta small {
color: var(--color-ink-muted);
font-size: 12px;
font-family: var(--font-mono);
}
.flowvaro-schedule-meta small b {
color: var(--color-ink);
}
.flowvaro-schedule-badges {
flex-wrap: wrap;
gap: 4px;
margin-top: 5px;
display: flex;
}
.flowvaro-channel-badge {
background: var(--color-surface-sunken);
color: var(--color-ink-muted);
text-transform: uppercase;
letter-spacing: .04em;
font-size: 9.5px;
font-weight: 700;
font-family: var(--font-mono);
border: 1px solid var(--color-border);
border-radius: 3px;
padding: 1px 6px;
}
.flowvaro-channel-badge.email {
color: #5b5bd6;
background: #eef2ff;
border-color: #5b5bd64d;
}
.flowvaro-channel-badge.sms {
background: var(--color-success-soft);
color: var(--color-success);
border-color: #10b9814d;
}
.flowvaro-channel-badge.push {
color: #a855f7;
background: #faf5ff;
border-color: #a855f74d;
}
.flowvaro-channel-badge.amp {
background: var(--color-accent-soft);
color: var(--color-flowvaro-link);
border-color: #bfdbfe;
}
.flowvaro-team-body {
padding: 14px 18px;
}
.flowvaro-presence-row {
border-bottom: 1px dashed var(--color-border);
grid-template-columns: 32px 1fr auto;
align-items: center;
gap: 10px;
padding: 8px 0;
display: grid;
}
.flowvaro-presence-row:last-child {
border-bottom: 0;
}
.flowvaro-presence-av {
color: #fff;
border-radius: 50%;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
font-size: 11px;
font-weight: 700;
display: flex;
position: relative;
}
.flowvaro-presence-av:after {
content: "";
border: 2px solid var(--color-surface-raised);
border-radius: 50%;
width: 9px;
height: 9px;
position: absolute;
bottom: -1px;
right: -1px;
}
.flowvaro-presence-row.is-online .flowvaro-presence-av:after {
background: var(--color-success);
}
.flowvaro-presence-row.is-away .flowvaro-presence-av:after {
background: var(--color-warning);
}
.flowvaro-presence-row.is-offline .flowvaro-presence-av:after {
background: var(--color-ink-faint);
}
.flowvaro-presence-av.av-purple {
background: linear-gradient(135deg, #a78bfa, #7c3aed);
}
.flowvaro-presence-av.av-green {
background: linear-gradient(135deg, #4ade80, #22c55e);
}
.flowvaro-presence-av.av-blue {
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}
.flowvaro-presence-av.av-pink {
background: linear-gradient(135deg, #fb7185, #ec4899);
}
.flowvaro-presence-meta strong {
color: var(--color-ink);
font-size: 12.5px;
font-weight: 600;
display: block;
}
.flowvaro-presence-meta small {
color: var(--color-ink-faint);
font-size: 10.5px;
font-family: var(--font-mono);
}
.flowvaro-presence-meta small b {
color: var(--color-ink);
font-weight: 700;
}
.flowvaro-role-pill {
background: var(--color-surface-sunken);
color: var(--color-ink-muted);
text-transform: uppercase;
letter-spacing: .04em;
font-size: 9.5px;
font-weight: 700;
font-family: var(--font-mono);
border: 1px solid var(--color-border);
border-radius: 3px;
padding: 1px 6px;
}
.flowvaro-team-more {
text-align: center;
font-family: var(--font-mono);
color: var(--color-ink-faint);
padding: 14px 0 0;
font-size: 11px;
}
.flowvaro-team-more a {
color: var(--color-accent);
font-weight: 600;
text-decoration: none;
}
.flowvaro-team-more a:hover {
text-decoration: underline;
}
.flowvaro-cal-toolbar {
border-bottom: 1px solid var(--color-border);
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding: 0 0 12px;
display: flex;
}
.flowvaro-cal-toolbar .month {
letter-spacing: -.02em;
color: var(--color-ink);
font-size: 22px;
font-weight: 800;
}
.flowvaro-cal-toolbar .year {
color: var(--color-ink-faint);
margin-left: 6px;
font-size: 14px;
font-weight: 700;
}
.flowvaro-cal-nav-group, .flowvaro-cal-view-group {
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
border-radius: 7px;
align-items: center;
display: inline-flex;
overflow: hidden;
}
.flowvaro-cal-nav-group button, .flowvaro-cal-view-group button {
color: var(--color-ink-muted);
cursor: pointer;
background: none;
border: 0;
padding: 6px 11px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
transition: background .1s, color .1s;
}
.flowvaro-cal-nav-group button + button, .flowvaro-cal-view-group button + button {
border-left: 1px solid var(--color-border);
}
.flowvaro-cal-nav-group button:hover, .flowvaro-cal-view-group button:hover {
background: var(--color-surface-raised);
color: var(--color-ink);
}
.flowvaro-cal-nav-group button.is-today {
background: var(--color-accent-soft);
color: var(--color-flowvaro-link);
}
.flowvaro-cal-view-group button.is-active {
background: var(--color-surface-raised);
color: var(--color-ink);
box-shadow: inset 0 -2px 0 var(--color-accent);
}
.flowvaro-cal-toolbar-spacer {
flex: 1;
}
.flowvaro-cal-filter-row {
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding-bottom: 12px;
font-size: 11.5px;
display: flex;
}
.flowvaro-cal-filter-row .lbl {
color: var(--color-ink-faint);
text-transform: uppercase;
letter-spacing: .08em;
margin-right: 4px;
font-size: 10px;
font-weight: 800;
}
.flowvaro-cal-filter-row .lbl.ml-8 {
margin-left: 16px;
}
.flowvaro-cal-chip {
color: var(--color-ink-muted);
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
cursor: pointer;
border-radius: 12px;
align-items: center;
gap: 5px;
padding: 3px 9px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
transition: all .1s;
display: inline-flex;
}
.flowvaro-cal-chip.is-on {
background: var(--color-surface-raised);
border-color: var(--color-ink-faint);
color: var(--color-ink);
}
.flowvaro-cal-chip b {
font-family: var(--font-mono);
color: var(--color-ink-faint);
font-weight: 700;
}
.flowvaro-cal-chip .dot {
border-radius: 50%;
width: 8px;
height: 8px;
display: inline-block;
}
.flowvaro-cal-chip .dot.email {
background: #5b5bd6;
}
.flowvaro-cal-chip .dot.sms {
background: var(--color-success);
}
.flowvaro-cal-chip .dot.push {
background: #a855f7;
}
.flowvaro-cal-chip .dot.amp {
background: var(--color-flowvaro-bright);
}
.flowvaro-cal-chip .dot.blog {
background: var(--color-warning);
}
.flowvaro-cal-chip .dot.social {
background: #ec4899;
}
.flowvaro-cal-chip .dot.journey {
background: var(--color-flowvaro-deep);
}
.flowvaro-cal-head {
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
border-bottom: 0;
border-radius: 8px 8px 0 0;
grid-template-columns: repeat(7, 1fr);
display: grid;
}
.flowvaro-cal-head .dow {
text-transform: uppercase;
letter-spacing: .06em;
color: var(--color-ink-muted);
border-right: 1px solid var(--color-border);
padding: 8px 10px;
font-size: 10.5px;
font-weight: 800;
}
.flowvaro-cal-head .dow:last-child {
border-right: 0;
}
.flowvaro-cal-head .dow.weekend {
color: var(--color-flowvaro-link);
}
.flowvaro-cal-grid {
border: 1px solid var(--color-border);
background: var(--color-surface-raised);
border-radius: 0 0 8px 8px;
grid-template-columns: repeat(7, 1fr);
display: grid;
overflow: hidden;
}
.flowvaro-cal-day {
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
flex-direction: column;
gap: 4px;
min-height: 110px;
padding: 6px 8px;
display: flex;
position: relative;
}
.flowvaro-cal-day:nth-child(7n) {
border-right: 0;
}
.flowvaro-cal-day.is-other-month {
background: var(--color-surface-sunken);
color: var(--color-ink-faint);
}
.flowvaro-cal-day.is-today {
background: var(--color-accent-soft);
}
.flowvaro-cal-day.is-weekend {
background-image: linear-gradient(#0000 0 calc(100% - 1px));
}
.flowvaro-cal-day-num {
color: var(--color-ink);
font-size: 12px;
font-weight: 700;
}
.flowvaro-cal-day.is-other-month .flowvaro-cal-day-num {
color: var(--color-ink-faint);
}
.flowvaro-cal-day.is-today .flowvaro-cal-day-num {
color: var(--color-flowvaro-link);
}
.flowvaro-cal-day-holiday {
color: var(--color-warning);
text-transform: uppercase;
letter-spacing: .04em;
font-size: 9.5px;
font-weight: 700;
font-family: var(--font-mono);
position: absolute;
top: 6px;
right: 8px;
}
.flowvaro-cal-day-events {
flex-direction: column;
gap: 3px;
margin-top: 2px;
display: flex;
overflow: hidden;
}
.flowvaro-cal-event {
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
border-radius: 4px;
align-items: center;
gap: 4px;
padding: 2px 6px;
font-size: 10.5px;
font-weight: 600;
display: flex;
overflow: hidden;
}
.flowvaro-cal-event .time {
font-family: var(--font-mono);
opacity: .85;
flex-shrink: 0;
font-size: 9.5px;
font-weight: 700;
}
.flowvaro-cal-event.is-email {
color: #5b5bd6;
background: #eef2ff;
border-left: 2px solid #5b5bd6;
}
.flowvaro-cal-event.is-sms {
background: var(--color-success-soft);
color: var(--color-success);
border-left: 2px solid var(--color-success);
}
.flowvaro-cal-event.is-push {
color: #a855f7;
background: #faf5ff;
border-left: 2px solid #a855f7;
}
.flowvaro-cal-event.is-amp {
background: var(--color-accent-soft);
color: var(--color-flowvaro-link);
border-left: 2px solid var(--color-flowvaro-bright);
}
.flowvaro-cal-event.is-blog {
background: var(--color-warning-soft);
color: var(--color-warning);
border-left: 2px solid var(--color-warning);
}
.flowvaro-cal-event.is-social {
color: #ec4899;
background: #fce7f3;
border-left: 2px solid #ec4899;
}
.flowvaro-cal-event.is-journey {
color: var(--color-flowvaro-deep);
border-left: 2px solid var(--color-flowvaro-deep);
background: #dbeafe;
}
.flowvaro-cal-event-overflow {
color: var(--color-ink-faint);
padding: 1px 4px;
font-size: 10px;
font-weight: 700;
}
.flowvaro-cf-tabs {
border-bottom: 1px solid var(--color-border);
gap: 2px;
margin-bottom: 18px;
display: flex;
}
.flowvaro-cf-tab {
color: var(--color-ink-muted);
cursor: pointer;
background: none;
border: 0;
border-bottom: 2px solid #0000;
align-items: center;
gap: 6px;
margin-bottom: -1px;
padding: 8px 14px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
display: inline-flex;
}
.flowvaro-cf-tab:hover {
color: var(--color-ink);
background: var(--color-surface-sunken);
}
.flowvaro-cf-tab.is-active {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
background: var(--color-accent-soft);
}
.flowvaro-cf-tab .ct {
background: var(--color-surface-sunken);
color: var(--color-ink-faint);
font-size: 10px;
font-family: var(--font-mono);
border-radius: 10px;
padding: 1px 6px;
font-weight: 700;
}
.flowvaro-cf-kpis {
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 18px;
display: grid;
}
@media (max-width: 1100px) {
.flowvaro-cf-kpis {
grid-template-columns: repeat(2, 1fr);
}
}
.flowvaro-cf-kpi {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 12px 14px;
}
.flowvaro-cf-kpi .lbl {
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-ink-faint);
margin-bottom: 4px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-cf-kpi .val {
font-size: 24px;
font-weight: 800;
font-family: var(--font-mono);
color: var(--color-ink);
line-height: 1;
}
.flowvaro-cf-kpi .val.is-warn {
color: var(--color-warning);
}
.flowvaro-cf-kpi .sub {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono);
margin-top: 4px;
}
.flowvaro-cf-panel {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: 10px;
overflow: hidden;
}
.flowvaro-cf-panel-head {
background: var(--color-surface-sunken);
border-bottom: 1px solid var(--color-border);
color: var(--color-ink);
align-items: center;
gap: 8px;
padding: 10px 14px;
font-size: 13px;
font-weight: 700;
display: flex;
}
.flowvaro-cf-panel-head .ct {
color: var(--color-ink-faint);
font-size: 11px;
font-weight: 500;
font-family: var(--font-mono);
}
.flowvaro-cf-section-bar {
text-transform: uppercase;
letter-spacing: .05em;
padding: 7px 14px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-cf-section-bar.is-system {
color: var(--color-flowvaro-link);
background: #eff6ff;
}
.flowvaro-cf-section-bar.is-custom {
background: var(--color-accent-soft);
color: var(--color-flowvaro-link);
}
.flowvaro-cf-row {
border-bottom: 1px solid var(--color-border);
color: var(--color-ink);
grid-template-columns: 18px 1.2fr 1fr 1.5fr 60px 80px 60px 32px;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 12.5px;
display: grid;
}
.flowvaro-cf-row:last-child {
border-bottom: 0;
}
.flowvaro-cf-row.is-header {
background: var(--color-surface-sunken);
color: var(--color-ink-faint);
text-transform: uppercase;
letter-spacing: .05em;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-cf-row.is-selected {
background: var(--color-accent-soft);
}
.flowvaro-cf-row:not(.is-header):hover {
background: var(--color-surface-sunken);
}
.flowvaro-cf-drag {
color: var(--color-ink-faint);
cursor: grab;
-webkit-user-select: none;
user-select: none;
font-family: var(--font-mono);
}
.flowvaro-cf-row .nm {
font-weight: 700;
font-family: var(--font-mono);
color: var(--color-ink);
font-size: 12.5px;
}
.flowvaro-cf-row .key {
color: var(--color-ink-faint);
font-size: 10.5px;
font-family: var(--font-mono);
}
.flowvaro-cf-type-tag {
font-size: 10px;
font-weight: 700;
font-family: var(--font-mono);
letter-spacing: .04em;
border-radius: 4px;
padding: 2px 7px;
display: inline-block;
}
.flowvaro-cf-type-tag.string {
color: var(--color-flowvaro-link);
background: #eff6ff;
}
.flowvaro-cf-type-tag.number {
background: var(--color-success-soft);
color: var(--color-success);
}
.flowvaro-cf-type-tag.date {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.flowvaro-cf-type-tag.bool {
color: #ec4899;
background: #fce7f3;
}
.flowvaro-cf-type-tag.enum {
color: #a855f7;
background: #faf5ff;
}
.flowvaro-cf-row .desc {
color: var(--color-ink-muted);
font-size: 12px;
}
.flowvaro-cf-row .num {
font-family: var(--font-mono);
color: var(--color-ink);
text-align: right;
font-weight: 700;
}
.flowvaro-cf-pill {
font-size: 10px;
font-weight: 700;
font-family: var(--font-mono);
border-radius: 10px;
padding: 2px 7px;
display: inline-block;
}
.flowvaro-cf-pill.is-required, .flowvaro-cf-pill.is-system {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.flowvaro-cf-pill.is-yes {
background: var(--color-success-soft);
color: var(--color-success);
}
.flowvaro-cf-pill.is-no {
background: var(--color-surface-sunken);
color: var(--color-ink-faint);
}
.flowvaro-cf-lock {
text-align: center;
color: var(--color-ink-faint);
font-family: var(--font-mono);
}
.flowvaro-sub-kpis {
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 14px;
display: grid;
}
@media (max-width: 1100px) {
.flowvaro-sub-kpis {
grid-template-columns: repeat(2, 1fr);
}
}
.flowvaro-sub-kpi {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 11px 14px;
}
.flowvaro-sub-kpi .lbl {
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-ink-faint);
margin-bottom: 4px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-sub-kpi .val {
font-size: 22px;
font-weight: 800;
font-family: var(--font-mono);
color: var(--color-ink);
line-height: 1;
}
.flowvaro-sub-kpi .val.is-ok {
color: var(--color-success);
}
.flowvaro-sub-kpi .val.is-acc {
color: var(--color-flowvaro-link);
}
.flowvaro-sub-kpi .val.is-warn {
color: var(--color-warning);
}
.flowvaro-sub-kpi .val.is-err {
color: var(--color-danger);
}
.flowvaro-sub-kpi .sub {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono);
margin-top: 4px;
}
.flowvaro-sub-form-pills {
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
display: flex;
}
.flowvaro-sub-form-pill {
color: var(--color-ink-muted);
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
cursor: pointer;
border-radius: 7px;
align-items: center;
gap: 6px;
padding: 5px 10px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
display: inline-flex;
}
.flowvaro-sub-form-pill:hover {
background: var(--color-surface-raised);
}
.flowvaro-sub-form-pill.is-active {
background: var(--color-accent-soft);
border-color: var(--color-flowvaro-bright);
color: var(--color-flowvaro-link);
}
.flowvaro-sub-form-pill .ct {
background: var(--color-surface-raised);
color: var(--color-ink-faint);
font-size: 10px;
font-family: var(--font-mono);
border-radius: 10px;
padding: 1px 6px;
font-weight: 700;
}
.flowvaro-sub-toolbar {
background: var(--color-surface-sunken);
border-bottom: 1px solid var(--color-border);
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 10px 14px;
display: flex;
}
.flowvaro-sub-toolbar input {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
min-width: 200px;
color: var(--color-ink);
border-radius: 6px;
flex: 1;
padding: 6px 10px;
font-family: inherit;
font-size: 12.5px;
}
.flowvaro-sub-toolbar input::placeholder {
color: var(--color-ink-faint);
}
.flowvaro-sub-filter {
color: var(--color-ink-muted);
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
cursor: pointer;
border-radius: 6px;
align-items: center;
gap: 4px;
padding: 5px 10px;
font-family: inherit;
font-size: 11.5px;
font-weight: 600;
display: inline-flex;
}
.flowvaro-sub-filter.is-active {
background: var(--color-accent-soft);
color: var(--color-flowvaro-link);
border-color: var(--color-flowvaro-bright);
}
.flowvaro-sub-table {
border-collapse: collapse;
width: 100%;
font-size: 12.5px;
}
.flowvaro-sub-table th {
text-align: left;
color: var(--color-ink-faint);
border-bottom: 1px solid var(--color-border);
text-transform: uppercase;
letter-spacing: .06em;
background: var(--color-surface-sunken);
white-space: nowrap;
padding: 9px 14px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-sub-table td {
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
padding: 10px 14px;
}
.flowvaro-sub-table tbody tr {
cursor: pointer;
}
.flowvaro-sub-table tbody tr:hover {
background: var(--color-surface-sunken);
}
.flowvaro-sub-table tbody tr:last-child td {
border-bottom: 0;
}
.flowvaro-sub-time {
font-family: var(--font-mono);
color: var(--color-ink-muted);
white-space: nowrap;
font-size: 11px;
}
.flowvaro-sub-email {
font-family: var(--font-mono);
color: var(--color-ink);
font-size: 11.5px;
}
.flowvaro-sub-score {
font-family: var(--font-mono);
font-weight: 800;
}
.flowvaro-sub-score.is-strong {
color: var(--color-flowvaro-link);
}
.flowvaro-sub-score.is-elite {
color: var(--color-success);
}
.flowvaro-sub-name {
align-items: center;
gap: 9px;
display: flex;
}
.flowvaro-sub-name .av {
color: #fff;
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
font-size: 10.5px;
font-weight: 700;
display: flex;
}
.flowvaro-sub-name .av-purple {
background: #a855f7;
}
.flowvaro-sub-name .av-purple-deep {
background: #7c3aed;
}
.flowvaro-sub-name .av-warn-amber {
background: #f59e0b;
}
.flowvaro-sub-name .av-danger {
background: var(--color-danger);
}
.flowvaro-sub-name .av-flowvaro {
background: linear-gradient(135deg, var(--color-flowvaro-deep), var(--color-flowvaro-bright));
}
.flowvaro-sub-name .av-pink {
background: #ec4899;
}
.flowvaro-sub-name .av-green {
background: var(--color-success);
}
.flowvaro-sub-name strong {
color: var(--color-ink);
font-size: 12.5px;
font-weight: 700;
display: block;
}
.flowvaro-sub-name small {
color: var(--color-ink-faint);
font-size: 10.5px;
font-family: var(--font-mono);
}
.flowvaro-sub-pill {
font-size: 10.5px;
font-weight: 700;
font-family: var(--font-mono);
text-transform: lowercase;
letter-spacing: .02em;
background: var(--color-surface-sunken);
color: var(--color-ink-muted);
border-radius: 12px;
align-items: center;
gap: 4px;
padding: 2px 8px;
display: inline-flex;
}
.flowvaro-sub-pill:before {
content: "";
background: currentColor;
border-radius: 50%;
width: 5px;
height: 5px;
}
.flowvaro-sub-pill.is-ok {
background: var(--color-success-soft);
color: var(--color-success);
}
.flowvaro-sub-pill.is-warn {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.flowvaro-sub-pill.is-purple {
color: #a855f7;
background: #faf5ff;
}
.flowvaro-sub-pill.is-neutral:before {
display: none;
}
.flowvaro-sub-show-all {
text-align: center;
color: var(--color-accent);
cursor: pointer;
border-top: 1px solid var(--color-border);
background: var(--color-surface-raised);
padding: 11px 14px;
font-size: 12.5px;
font-weight: 600;
}
.flowvaro-sub-show-all:hover {
background: var(--color-surface-sunken);
}
.flowvaro-push-header h1 {
letter-spacing: -.02em;
color: var(--color-ink);
margin: 0 0 4px;
font-size: 22px;
font-weight: 800;
}
.flowvaro-push-header .sub {
color: var(--color-ink-muted);
margin: 0 0 14px;
font-size: 13px;
}
.flowvaro-push-header b {
color: var(--color-ink);
font-weight: 700;
}
.flowvaro-push-actions {
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 16px;
display: flex;
}
.flowvaro-push-actions .spacer {
flex: 1;
min-width: 12px;
}
.flowvaro-push-channels {
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 16px;
display: grid;
}
@media (max-width: 1100px) {
.flowvaro-push-channels {
grid-template-columns: repeat(2, 1fr);
}
}
.flowvaro-push-channel {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
cursor: pointer;
text-align: left;
border-radius: 10px;
align-items: center;
gap: 10px;
padding: 10px 12px;
font-family: inherit;
transition: all .12s;
display: flex;
}
.flowvaro-push-channel:hover {
border-color: var(--color-ink-faint);
}
.flowvaro-push-channel.is-on {
border-color: var(--color-flowvaro-bright);
background: var(--color-accent-soft);
}
.flowvaro-push-channel.is-disabled {
opacity: .55;
cursor: not-allowed;
}
.flowvaro-push-channel .ico {
background: linear-gradient(135deg, var(--color-flowvaro-deep), var(--color-flowvaro-bright));
color: #fff;
border-radius: 9px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
font-size: 18px;
font-weight: 800;
display: flex;
}
.flowvaro-push-channel.ch-ios .ico {
background: linear-gradient(135deg, #1f2937, #4b5563);
}
.flowvaro-push-channel.ch-android .ico {
background: linear-gradient(135deg, #16a34a, #22c55e);
}
.flowvaro-push-channel.ch-huawei .ico {
background: linear-gradient(135deg, #dc2626, #ef4444);
}
.flowvaro-push-channel strong {
color: var(--color-ink);
font-size: 13px;
font-weight: 700;
display: block;
}
.flowvaro-push-channel small {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono);
}
.flowvaro-push-section {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: 12px;
margin-bottom: 14px;
overflow: hidden;
}
.flowvaro-push-section-head {
background: var(--color-surface-sunken);
border-bottom: 1px solid var(--color-border);
align-items: center;
gap: 10px;
padding: 11px 16px;
display: flex;
}
.flowvaro-push-section-head h4 {
color: var(--color-ink);
margin: 0;
font-size: 13.5px;
font-weight: 700;
}
.flowvaro-push-section-head .meta {
color: var(--color-ink-faint);
font-size: 11.5px;
font-family: var(--font-mono);
margin-left: auto;
}
.flowvaro-push-section-head .meta b {
color: var(--color-ink);
font-weight: 700;
}
.flowvaro-push-section-body {
padding: 14px 16px;
}
.flowvaro-push-row {
flex-direction: column;
gap: 5px;
margin-bottom: 12px;
display: flex;
}
.flowvaro-push-row:last-child {
margin-bottom: 0;
}
.flowvaro-push-row label {
color: var(--color-ink-muted);
align-items: center;
font-size: 11.5px;
font-weight: 700;
display: flex;
}
.flowvaro-push-row label .count {
font-family: var(--font-mono);
color: var(--color-ink-faint);
margin-left: auto;
font-size: 11px;
font-weight: 500;
}
.flowvaro-push-row label .count.is-over {
color: var(--color-danger);
}
.flowvaro-push-row label .count b {
color: var(--color-ink);
font-weight: 700;
}
.flowvaro-push-row input[type="text"], .flowvaro-push-row textarea {
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
width: 100%;
color: var(--color-ink);
resize: vertical;
border-radius: 7px;
padding: 8px 11px;
font-family: inherit;
font-size: 13px;
}
.flowvaro-push-row input:focus, .flowvaro-push-row textarea:focus {
border-color: var(--color-flowvaro-bright);
background: var(--color-surface-raised);
outline: none;
}
.flowvaro-push-merge-tags {
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
display: flex;
}
.flowvaro-push-mtag {
background: var(--color-accent-soft);
color: var(--color-flowvaro-link);
font-family: var(--font-mono);
cursor: pointer;
border: 1px solid #bfdbfe;
border-radius: 4px;
padding: 2px 7px;
font-size: 11px;
font-weight: 600;
}
.flowvaro-push-mtag:hover {
background: #bfdbfe;
}
.flowvaro-push-preview {
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 18px;
position: sticky;
top: 16px;
}
.flowvaro-push-preview h5 {
text-transform: uppercase;
letter-spacing: .08em;
color: var(--color-ink-faint);
margin: 0 0 12px;
font-size: 11px;
font-weight: 800;
}
.flowvaro-push-preview-card {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: 10px;
grid-template-columns: 36px 1fr auto;
align-items: start;
gap: 10px;
padding: 12px 14px;
display: grid;
box-shadow: 0 6px 14px -6px #0f172a2e;
}
.flowvaro-push-preview-icon {
background: linear-gradient(135deg, var(--color-flowvaro-deep), var(--color-flowvaro-bright));
color: #fff;
border-radius: 8px;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
font-size: 14px;
font-weight: 800;
display: flex;
}
.flowvaro-push-preview-body {
color: var(--color-ink);
min-width: 0;
font-size: 12.5px;
}
.flowvaro-push-preview-body .src {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono);
margin-bottom: 2px;
}
.flowvaro-push-preview-body .ttl {
margin-bottom: 2px;
font-weight: 700;
}
.flowvaro-push-preview-body .bod {
color: var(--color-ink-muted);
line-height: 1.4;
}
.flowvaro-push-preview-card .ts {
color: var(--color-ink-faint);
font-size: 10px;
font-family: var(--font-mono);
}
.flowvaro-tpl-filter-row {
border-bottom: 1px solid var(--color-border);
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 18px;
padding: 0 0 14px;
display: flex;
}
.flowvaro-tpl-sort {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
color: var(--color-ink);
font-size: 12px;
font-family: var(--font-mono);
appearance: none;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-position: right 8px center;
background-repeat: no-repeat;
border-radius: 7px;
padding: 6px 26px 6px 10px;
}
.flowvaro-tpl-results {
color: var(--color-ink-faint);
font-size: 11.5px;
font-family: var(--font-mono);
margin-left: auto;
}
.flowvaro-tpl-results b {
color: var(--color-ink);
font-weight: 700;
}
.flowvaro-tpl-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 14px;
display: grid;
}
.flowvaro-tpl-card {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
cursor: pointer;
border-radius: 12px;
flex-direction: column;
transition: all .12s;
display: flex;
overflow: hidden;
}
.flowvaro-tpl-card:hover {
border-color: var(--color-ink-faint);
transform: translateY(-2px);
box-shadow: 0 8px 16px -4px #0f172a1a;
}
.flowvaro-tpl-card.is-featured {
border-color: var(--color-flowvaro-bright);
}
.flowvaro-tpl-preview {
background: linear-gradient(135deg, var(--color-accent-soft), #bfdbfe);
border-bottom: 1px solid var(--color-border);
justify-content: center;
align-items: center;
height: 110px;
font-size: 42px;
display: flex;
position: relative;
}
.flowvaro-tpl-card.cat-welcome .flowvaro-tpl-preview {
background: linear-gradient(135deg, var(--color-accent-soft), #bfdbfe);
}
.flowvaro-tpl-card.cat-cart .flowvaro-tpl-preview {
background: linear-gradient(135deg, #fce7f3, #fbcfe8);
}
.flowvaro-tpl-card.cat-winback .flowvaro-tpl-preview {
background: linear-gradient(135deg, var(--color-warning-soft), #fde68a);
}
.flowvaro-tpl-card.cat-birthday .flowvaro-tpl-preview {
background: linear-gradient(135deg, #faf5ff, #e9d5ff);
}
.flowvaro-tpl-card.cat-postpurchase .flowvaro-tpl-preview {
background: linear-gradient(135deg, var(--color-success-soft), #a7f3d0);
}
.flowvaro-tpl-card.cat-vip .flowvaro-tpl-preview {
color: #fff;
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}
.flowvaro-tpl-card.cat-launch .flowvaro-tpl-preview {
color: #fff;
background: linear-gradient(135deg, #dc2626, #f59e0b);
}
.flowvaro-tpl-featured-badge {
border: 1px solid var(--color-border);
font-size: 9.5px;
font-weight: 800;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-warning);
background: #ffffffeb;
border-radius: 6px;
align-items: center;
gap: 3px;
padding: 2px 7px;
display: inline-flex;
position: absolute;
top: 8px;
right: 8px;
}
.flowvaro-tpl-featured-badge.is-popular {
color: var(--color-flowvaro-link);
}
.flowvaro-tpl-featured-badge.is-high-roi {
color: var(--color-success);
}
.flowvaro-tpl-body {
flex-direction: column;
flex: 1;
gap: 8px;
padding: 14px 16px;
display: flex;
}
.flowvaro-tpl-row-head {
align-items: center;
gap: 8px;
display: flex;
}
.flowvaro-tpl-cat-pill {
font-size: 9.5px;
font-weight: 800;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: .05em;
background: var(--color-surface-sunken);
color: var(--color-ink-muted);
border-radius: 10px;
padding: 2px 8px;
display: inline-block;
}
.flowvaro-tpl-cat-pill.cat-welcome {
background: var(--color-accent-soft);
color: var(--color-flowvaro-link);
}
.flowvaro-tpl-cat-pill.cat-cart {
color: #ec4899;
background: #fce7f3;
}
.flowvaro-tpl-cat-pill.cat-winback {
background: var(--color-warning-soft);
color: var(--color-warning);
}
.flowvaro-tpl-cat-pill.cat-birthday {
color: #a855f7;
background: #faf5ff;
}
.flowvaro-tpl-cat-pill.cat-postpurchase {
background: var(--color-success-soft);
color: var(--color-success);
}
.flowvaro-tpl-cat-pill.cat-vip {
color: #fff;
background: #1e3a8a;
}
.flowvaro-tpl-cat-pill.cat-launch {
color: var(--color-danger);
background: #fef2f2;
}
.flowvaro-tpl-channels {
gap: 3px;
margin-left: auto;
display: inline-flex;
}
.flowvaro-tpl-ch-mini {
width: 18px;
height: 18px;
font-size: 10px;
font-weight: 800;
font-family: var(--font-mono);
color: #fff;
border-radius: 4px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.flowvaro-tpl-ch-mini.email {
background: #5b5bd6;
}
.flowvaro-tpl-ch-mini.sms {
background: var(--color-success);
}
.flowvaro-tpl-ch-mini.push {
background: #a855f7;
}
.flowvaro-tpl-ch-mini.wa {
background: #25d366;
}
.flowvaro-tpl-body h3 {
color: var(--color-ink);
margin: 0;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
}
.flowvaro-tpl-body p {
color: var(--color-ink-muted);
margin: 0;
font-size: 12.5px;
line-height: 1.45;
}
.flowvaro-tpl-meta {
color: var(--color-ink-faint);
font-size: 11.5px;
font-family: var(--font-mono);
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin-top: 2px;
display: flex;
}
.flowvaro-tpl-meta b {
color: var(--color-ink);
font-weight: 700;
}
.flowvaro-tpl-meta .sep {
color: var(--color-ink-faint);
margin: 0 1px;
}
.flowvaro-tpl-footer {
border-top: 1px dashed var(--color-border);
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono);
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 10px;
display: flex;
}
.flowvaro-tpl-footer b {
color: var(--color-ink);
font-weight: 700;
}
.flowvaro-tpl-footer-actions {
margin-left: auto;
}
.flowvaro-tpl-install {
background: var(--color-flowvaro-deep);
color: #fff;
border: 1px solid var(--color-flowvaro-deep);
cursor: pointer;
border-radius: 6px;
align-items: center;
gap: 4px;
padding: 5px 11px;
font-family: inherit;
font-size: 11.5px;
font-weight: 700;
transition: background .12s;
display: inline-flex;
}
.flowvaro-tpl-install:hover {
background: var(--color-flowvaro-link);
}
.flowvaro-tpl-install:disabled {
background: var(--color-surface-sunken);
color: var(--color-ink-faint);
border-color: var(--color-border);
cursor: not-allowed;
}
.flowvaro-ca-hero {
background: linear-gradient(135deg, var(--color-flowvaro-deep) 0%, #4c1d95 100%);
color: #fff;
border-radius: 14px;
margin-bottom: 18px;
padding: 18px 22px;
position: relative;
overflow: hidden;
}
.flowvaro-ca-hero:before {
content: "🔄";
opacity: .08;
pointer-events: none;
font-size: 130px;
line-height: 1;
position: absolute;
top: -14px;
right: 28px;
}
.flowvaro-ca-hero h1 {
letter-spacing: -.02em;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 4px;
font-size: 22px;
font-weight: 800;
display: flex;
}
.flowvaro-ca-hero h1 .pill {
color: #fff;
font-size: 11px;
font-weight: 700;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: .05em;
background: #ffffff2e;
border: 1px solid #ffffff3d;
border-radius: 12px;
align-items: center;
gap: 5px;
padding: 2px 9px;
display: inline-flex;
}
.flowvaro-ca-hero h1 .pill:before {
content: "";
background: #10b981;
border-radius: 50%;
width: 6px;
height: 6px;
animation: 1.5s infinite flowvaro-ca-pulse;
box-shadow: 0 0 #10b981b3;
}
@keyframes flowvaro-ca-pulse {
0% {
box-shadow: 0 0 #10b98199;
}
70% {
box-shadow: 0 0 0 6px #10b98100;
}
100% {
box-shadow: 0 0 #10b98100;
}
}
.flowvaro-ca-hero .sub {
color: #ffffffc7;
font-size: 12.5px;
font-family: var(--font-mono);
margin-bottom: 12px;
}
.flowvaro-ca-hero .meta {
font-size: 12.5px;
font-family: var(--font-mono);
color: #ffffffeb;
flex-wrap: wrap;
gap: 16px;
display: flex;
}
.flowvaro-ca-hero .meta span b {
font-weight: 700;
}
.flowvaro-ca-kpis {
grid-template-columns: repeat(6, 1fr);
gap: 12px;
margin-bottom: 18px;
display: grid;
}
@media (max-width: 1100px) {
.flowvaro-ca-kpis {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 640px) {
.flowvaro-ca-kpis {
grid-template-columns: repeat(2, 1fr);
}
}
.flowvaro-ca-kpi {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 11px 13px;
}
.flowvaro-ca-kpi .lbl {
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-ink-faint);
margin-bottom: 4px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-ca-kpi .val {
font-size: 22px;
font-weight: 800;
font-family: var(--font-mono);
color: var(--color-ink);
line-height: 1;
}
.flowvaro-ca-kpi .val.is-ok {
color: var(--color-success);
}
.flowvaro-ca-kpi .val.is-err {
color: var(--color-danger);
}
.flowvaro-ca-kpi .val.is-acc {
color: var(--color-flowvaro-link);
}
.flowvaro-ca-kpi .sub {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono);
margin-top: 4px;
}
.flowvaro-ca-panel {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: 12px;
margin-bottom: 18px;
overflow: hidden;
}
.flowvaro-ca-panel-head {
background: var(--color-surface-sunken);
border-bottom: 1px solid var(--color-border);
color: var(--color-ink);
align-items: center;
gap: 10px;
padding: 11px 16px;
font-size: 13.5px;
font-weight: 700;
display: flex;
}
.flowvaro-ca-panel-head .ct {
color: var(--color-ink-faint);
font-size: 11.5px;
font-family: var(--font-mono);
font-weight: 500;
}
.flowvaro-ca-panel-body {
padding: 16px;
}
.flowvaro-ca-two-col {
grid-template-columns: 1.4fr 1fr;
gap: 18px;
margin-bottom: 18px;
display: grid;
}
@media (max-width: 1100px) {
.flowvaro-ca-two-col {
grid-template-columns: 1fr;
}
}
.flowvaro-ca-flow {
align-items: center;
gap: 6px;
padding: 4px 0 10px;
display: flex;
overflow-x: auto;
}
.flowvaro-ca-node {
background: var(--color-surface-raised);
border: 2px solid var(--color-border);
text-align: center;
cursor: pointer;
border-radius: 9px;
flex-shrink: 0;
min-width: 120px;
padding: 10px 12px;
transition: all .12s;
}
.flowvaro-ca-node:hover {
border-color: var(--color-flowvaro-bright);
transform: translateY(-2px);
}
.flowvaro-ca-node.is-start {
background: linear-gradient(135deg, var(--color-success-soft), #a7f3d0);
border-color: var(--color-success);
}
.flowvaro-ca-node.is-end {
background: linear-gradient(135deg, var(--color-accent-soft), #bfdbfe);
border-color: var(--color-flowvaro-bright);
}
.flowvaro-ca-node.is-active {
border-color: var(--color-flowvaro-bright);
background: var(--color-accent-soft);
}
.flowvaro-ca-node .ico {
margin-bottom: 4px;
font-size: 18px;
line-height: 1;
}
.flowvaro-ca-node .nm {
color: var(--color-ink);
margin-bottom: 3px;
font-size: 12px;
font-weight: 700;
}
.flowvaro-ca-node .v {
color: var(--color-ink-muted);
font-size: 10.5px;
font-family: var(--font-mono);
line-height: 1.3;
}
.flowvaro-ca-node .v b {
color: var(--color-ink);
font-weight: 700;
}
.flowvaro-ca-node .pct-conv {
font-size: 9.5px;
font-family: var(--font-mono);
color: var(--color-success);
margin-top: 3px;
font-weight: 700;
}
.flowvaro-ca-node .pct-exit {
font-size: 9.5px;
font-family: var(--font-mono);
color: var(--color-danger);
margin-top: 3px;
font-weight: 700;
}
.flowvaro-ca-arrow {
color: var(--color-ink-faint);
flex-shrink: 0;
font-size: 18px;
}
.flowvaro-ca-rev-row {
border-bottom: 1px dashed var(--color-border);
color: var(--color-ink-muted);
justify-content: space-between;
padding: 8px 0;
font-size: 13px;
display: flex;
}
.flowvaro-ca-rev-row:last-of-type {
border-bottom: 0;
}
.flowvaro-ca-rev-row .v {
font-family: var(--font-mono);
color: var(--color-ink);
font-weight: 600;
}
.flowvaro-ca-rev-row .v.is-big {
color: var(--color-success);
font-size: 18px;
font-weight: 800;
}
.flowvaro-ca-rev-row .v.is-ok {
color: var(--color-success);
}
.flowvaro-ca-ai-tip {
background: linear-gradient(135deg, #faf5ff, var(--color-surface-raised));
color: var(--color-ink-muted);
border: 1px solid #a855f74d;
border-radius: 8px;
margin-top: 12px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
}
.flowvaro-ca-ai-tip b {
color: #a855f7;
}
.flowvaro-ca-exit-grid {
grid-template-columns: 1fr auto;
gap: 8px 14px;
font-size: 13px;
display: grid;
}
.flowvaro-ca-exit-grid .v {
font-family: var(--font-mono);
text-align: right;
font-weight: 600;
}
.flowvaro-ca-exit-grid .v.is-warn {
color: var(--color-warning);
}
.flowvaro-ca-exit-grid .v.is-err {
color: var(--color-danger);
}
.flowvaro-pl-toolbar {
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 16px;
display: flex;
}
.flowvaro-pl-views {
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
border-radius: 7px;
display: inline-flex;
overflow: hidden;
}
.flowvaro-pl-views button {
color: var(--color-ink-muted);
cursor: pointer;
background: none;
border: 0;
padding: 6px 12px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
transition: background .1s;
}
.flowvaro-pl-views button + button {
border-left: 1px solid var(--color-border);
}
.flowvaro-pl-views button:hover {
background: var(--color-surface-raised);
color: var(--color-ink);
}
.flowvaro-pl-views button.is-active {
background: var(--color-surface-raised);
color: var(--color-ink);
box-shadow: inset 0 -2px 0 var(--color-accent);
}
.flowvaro-pl-stuck-banner {
background: linear-gradient(135deg, var(--color-warning-soft), #fde68a);
color: #92400e;
border: 1px solid #f59e0b;
border-radius: 10px;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding: 11px 16px;
font-size: 13px;
display: flex;
}
.flowvaro-pl-stuck-banner .ic {
font-size: 24px;
}
.flowvaro-pl-stuck-banner b {
color: #78350f;
font-weight: 800;
}
.flowvaro-pl-kpis {
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 14px;
display: grid;
}
@media (max-width: 1100px) {
.flowvaro-pl-kpis {
grid-template-columns: repeat(2, 1fr);
}
}
.flowvaro-pl-kpi {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 11px 13px;
}
.flowvaro-pl-kpi .lbl {
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-ink-faint);
margin-bottom: 4px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-pl-kpi .val {
font-size: 22px;
font-weight: 800;
font-family: var(--font-mono);
color: var(--color-ink);
line-height: 1;
}
.flowvaro-pl-kpi .val.is-ok {
color: var(--color-success);
}
.flowvaro-pl-kpi .sub {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono);
margin-top: 4px;
}
.flowvaro-pl-kpi .sub .up {
color: var(--color-success);
font-weight: 700;
}
.flowvaro-pl-kpi .sub .down {
color: var(--color-danger);
font-weight: 700;
}
.flowvaro-pl-filters {
border-bottom: 1px solid var(--color-border);
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-bottom: 16px;
padding-bottom: 12px;
display: flex;
}
.flowvaro-pl-chip {
color: var(--color-ink-muted);
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
cursor: pointer;
border-radius: 12px;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
transition: background .1s;
display: inline-flex;
}
.flowvaro-pl-chip:hover {
background: var(--color-surface-raised);
}
.flowvaro-pl-chip.is-active {
background: var(--color-accent-soft);
border-color: var(--color-flowvaro-bright);
color: var(--color-flowvaro-link);
}
.flowvaro-pl-chip .ct {
background: var(--color-surface-raised);
color: var(--color-ink-faint);
font-size: 10px;
font-family: var(--font-mono);
border-radius: 8px;
padding: 1px 6px;
font-weight: 700;
}
.flowvaro-pl-chip .ct.is-err {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.flowvaro-pl-kanban {
grid-template-columns: repeat(5, minmax(220px, 1fr));
gap: 12px;
display: grid;
overflow-x: auto;
}
@media (max-width: 1100px) {
.flowvaro-pl-kanban {
grid-template-columns: repeat(2, minmax(220px, 1fr));
}
}
.flowvaro-pl-col {
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
border-radius: 10px;
flex-direction: column;
min-height: 400px;
display: flex;
overflow: hidden;
}
.flowvaro-pl-col-head {
background: var(--color-surface-raised);
border-bottom: 1px solid var(--color-border);
align-items: center;
gap: 8px;
padding: 10px 12px;
display: flex;
}
.flowvaro-pl-col-head .dot {
border-radius: 50%;
flex-shrink: 0;
width: 9px;
height: 9px;
}
.flowvaro-pl-col-head .nm {
color: var(--color-ink);
flex: 1;
font-size: 12.5px;
font-weight: 700;
}
.flowvaro-pl-col-head .ct {
background: var(--color-surface-sunken);
color: var(--color-ink-muted);
font-family: var(--font-mono);
border-radius: 9px;
padding: 1px 7px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-pl-col-head .val {
font-family: var(--font-mono);
color: var(--color-ink);
font-size: 11.5px;
font-weight: 700;
}
.flowvaro-pl-col-head .val.is-ok {
color: var(--color-success);
}
.flowvaro-pl-col-body {
flex-direction: column;
flex: 1;
gap: 8px;
padding: 10px;
display: flex;
overflow-y: auto;
}
.flowvaro-pl-deal {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
cursor: pointer;
border-radius: 8px;
padding: 9px 11px;
transition: all .12s;
}
.flowvaro-pl-deal:hover {
border-color: var(--color-flowvaro-bright);
transform: translateY(-1px);
box-shadow: 0 4px 8px -2px #0f172a14;
}
.flowvaro-pl-deal.is-stuck {
border-color: var(--color-warning);
background: linear-gradient(135deg, var(--color-warning-soft) 0%, var(--color-surface-raised) 35%);
}
.flowvaro-pl-deal-row1 {
align-items: center;
gap: 7px;
margin-bottom: 4px;
display: flex;
}
.flowvaro-pl-deal .av {
color: #fff;
border-radius: 50%;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
font-size: 9.5px;
font-weight: 800;
display: flex;
}
.flowvaro-pl-deal .av.bg-danger {
background: var(--color-danger);
}
.flowvaro-pl-deal .av.bg-purple-deep {
background: #7c3aed;
}
.flowvaro-pl-deal .av.bg-flowvaro {
background: linear-gradient(135deg, var(--color-flowvaro-deep), var(--color-flowvaro-bright));
}
.flowvaro-pl-deal .av.bg-warn-amber {
background: #f59e0b;
}
.flowvaro-pl-deal .av.bg-green {
background: var(--color-success);
}
.flowvaro-pl-deal .co {
color: var(--color-ink);
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
font-size: 12.5px;
font-weight: 700;
overflow: hidden;
}
.flowvaro-pl-deal-meta {
color: var(--color-ink-muted);
font-size: 11px;
font-family: var(--font-mono);
margin-bottom: 5px;
}
.flowvaro-pl-deal-meta .v {
color: var(--color-ink);
font-weight: 800;
}
.flowvaro-pl-deal-tags {
flex-wrap: wrap;
gap: 3px;
margin-bottom: 5px;
display: flex;
}
.flowvaro-pl-tag {
background: var(--color-surface-sunken);
color: var(--color-ink-muted);
text-transform: uppercase;
letter-spacing: .03em;
font-size: 9.5px;
font-weight: 700;
font-family: var(--font-mono);
border-radius: 4px;
padding: 1px 6px;
}
.flowvaro-pl-tag.is-accent {
background: var(--color-accent-soft);
color: var(--color-flowvaro-link);
}
.flowvaro-pl-tag.is-won {
background: var(--color-success-soft);
color: var(--color-success);
}
.flowvaro-pl-deal-foot {
color: var(--color-ink-faint);
font-size: 10px;
font-family: var(--font-mono);
align-items: center;
gap: 6px;
display: flex;
}
.flowvaro-pl-deal-foot .ml-auto {
margin-left: auto;
}
.flowvaro-pl-deal-foot .stuck {
color: var(--color-warning);
font-weight: 700;
}
.flowvaro-pl-deal-foot .hot {
color: var(--color-danger);
font-weight: 700;
}
.flowvaro-pl-deal-foot .warm {
color: var(--color-warning);
font-weight: 700;
}
.flowvaro-pl-deal-foot .ok {
color: var(--color-success);
font-weight: 700;
}
.flowvaro-pl-add {
border: 2px dashed var(--color-border);
text-align: center;
color: var(--color-ink-faint);
cursor: pointer;
background: none;
border-radius: 8px;
width: 100%;
padding: 9px;
font-family: inherit;
font-size: 11.5px;
font-weight: 600;
}
.flowvaro-pl-add:hover {
border-color: var(--color-flowvaro-bright);
color: var(--color-flowvaro-link);
}
.flowvaro-dd-hero {
color: #fff;
background: linear-gradient(135deg, #1e1b3a 0%, #4c1d95 100%);
border-radius: 14px;
margin-bottom: 18px;
padding: 20px 24px;
position: relative;
overflow: hidden;
}
.flowvaro-dd-hero-row {
flex-wrap: wrap;
align-items: flex-start;
gap: 18px;
display: flex;
}
.flowvaro-dd-hero-av {
background: linear-gradient(135deg, var(--color-flowvaro-bright), #ec4899);
border-radius: 14px;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 64px;
height: 64px;
font-size: 22px;
font-weight: 800;
display: flex;
}
.flowvaro-dd-hero-info {
flex: 1;
min-width: 240px;
}
.flowvaro-dd-hero-info h1 {
letter-spacing: -.02em;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 4px;
font-size: 24px;
font-weight: 800;
display: flex;
}
.flowvaro-dd-hero-info h1 .pill {
color: #fff;
font-size: 11px;
font-weight: 700;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: .05em;
background: #ffffff2e;
border: 1px solid #ffffff3d;
border-radius: 12px;
align-items: center;
gap: 5px;
padding: 2px 9px;
display: inline-flex;
}
.flowvaro-dd-hero-info h1 .pill:before {
content: "";
background: #f87171;
border-radius: 50%;
width: 6px;
height: 6px;
animation: 1.4s infinite flowvaro-ca-pulse;
}
.flowvaro-dd-hero-info .sub {
color: #ffffffbf;
font-size: 12px;
font-family: var(--font-mono);
margin-bottom: 10px;
}
.flowvaro-dd-hero-info .meta {
font-size: 12.5px;
font-family: var(--font-mono);
color: #ffffffeb;
flex-wrap: wrap;
gap: 16px;
display: flex;
}
.flowvaro-dd-hero-info .meta span b {
color: #fff;
font-weight: 700;
}
.flowvaro-dd-hero-actions {
flex-wrap: wrap;
gap: 6px;
display: flex;
}
.flowvaro-dd-hero-actions button {
color: #fff;
cursor: pointer;
background: #ffffff1f;
border: 1px solid #ffffff2e;
border-radius: 7px;
align-items: center;
gap: 5px;
padding: 7px 12px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
display: inline-flex;
}
.flowvaro-dd-hero-actions button:hover {
background: #ffffff38;
}
.flowvaro-dd-hero-actions button.is-win {
background: var(--color-success);
border-color: var(--color-success);
}
.flowvaro-dd-hero-actions button.is-lose {
background: var(--color-danger);
border-color: var(--color-danger);
}
.flowvaro-dd-stages {
flex-wrap: wrap;
gap: 4px;
margin-top: 18px;
display: flex;
}
.flowvaro-dd-stage-pip {
background: #ffffff14;
border: 1px solid #ffffff29;
border-radius: 7px;
flex: 1;
justify-content: space-between;
align-items: center;
gap: 8px;
min-width: 110px;
padding: 8px 12px;
font-size: 11px;
font-weight: 700;
display: flex;
}
.flowvaro-dd-stage-pip .pct {
font-family: var(--font-mono);
opacity: .78;
font-size: 9.5px;
font-weight: 700;
}
.flowvaro-dd-stage-pip.is-done {
background: #10b98147;
border-color: #10b98180;
}
.flowvaro-dd-stage-pip.is-current {
background: #3b82f652;
border-color: #3b82f6b3;
}
.flowvaro-dd-grid {
grid-template-columns: 1.5fr 320px;
gap: 18px;
display: grid;
}
@media (max-width: 1100px) {
.flowvaro-dd-grid {
grid-template-columns: 1fr;
}
}
.flowvaro-dd-tabs {
border-bottom: 1px solid var(--color-border);
gap: 2px;
margin-bottom: 14px;
display: flex;
}
.flowvaro-dd-tab {
color: var(--color-ink-muted);
cursor: pointer;
background: none;
border: 0;
border-bottom: 2px solid #0000;
align-items: center;
gap: 6px;
margin-bottom: -1px;
padding: 8px 13px;
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
display: inline-flex;
}
.flowvaro-dd-tab:hover {
color: var(--color-ink);
}
.flowvaro-dd-tab.is-active {
color: var(--color-accent);
border-bottom-color: var(--color-accent);
}
.flowvaro-dd-tab .ct {
background: var(--color-surface-sunken);
color: var(--color-ink-faint);
font-size: 10px;
font-family: var(--font-mono);
border-radius: 9px;
padding: 1px 6px;
font-weight: 700;
}
.flowvaro-dd-note-editor {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: 10px;
margin-bottom: 14px;
padding: 12px;
}
.flowvaro-dd-note-editor textarea {
resize: vertical;
width: 100%;
min-height: 56px;
color: var(--color-ink);
background: none;
border: 0;
outline: none;
font-family: inherit;
font-size: 13px;
}
.flowvaro-dd-note-editor textarea::placeholder {
color: var(--color-ink-faint);
}
.flowvaro-dd-note-editor .row {
align-items: center;
gap: 6px;
margin-top: 9px;
display: flex;
}
.flowvaro-dd-timeline {
flex-direction: column;
gap: 14px;
padding-left: 22px;
display: flex;
position: relative;
}
.flowvaro-dd-timeline:before {
content: "";
background: var(--color-border);
width: 2px;
position: absolute;
top: 8px;
bottom: 8px;
left: 5px;
}
.flowvaro-dd-tl-item {
padding-left: 8px;
position: relative;
}
.flowvaro-dd-tl-item:before {
content: "";
background: var(--color-surface-raised);
border: 2px solid var(--color-ink-faint);
border-radius: 50%;
width: 12px;
height: 12px;
position: absolute;
top: 4px;
left: -22px;
}
.flowvaro-dd-tl-item.is-now:before {
background: var(--color-flowvaro-bright);
border-color: var(--color-flowvaro-bright);
box-shadow: 0 0 0 4px var(--color-accent-soft);
}
.flowvaro-dd-tl-item.is-email:before {
background: #5b5bd6;
border-color: #5b5bd6;
}
.flowvaro-dd-tl-item.is-note:before {
background: #f59e0b;
border-color: #f59e0b;
}
.flowvaro-dd-tl-item.is-stage:before {
background: var(--color-success);
border-color: var(--color-success);
}
.flowvaro-dd-tl-item.is-call:before {
background: #a855f7;
border-color: #a855f7;
}
.flowvaro-dd-tl-item .t {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono);
margin-bottom: 2px;
}
.flowvaro-dd-tl-item .what {
color: var(--color-ink);
margin-bottom: 3px;
font-size: 13px;
font-weight: 700;
}
.flowvaro-dd-tl-item .body {
color: var(--color-ink-muted);
font-size: 12.5px;
line-height: 1.5;
}
.flowvaro-dd-side-card {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: 10px;
margin-bottom: 14px;
overflow: hidden;
}
.flowvaro-dd-side-card-head {
background: var(--color-surface-sunken);
border-bottom: 1px solid var(--color-border);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-ink-muted);
padding: 9px 12px;
font-size: 11px;
font-weight: 800;
}
.flowvaro-dd-side-card-body {
padding: 12px;
font-size: 12.5px;
line-height: 1.5;
}
.flowvaro-dd-side-row {
border-bottom: 1px dashed var(--color-border);
color: var(--color-ink-muted);
justify-content: space-between;
padding: 5px 0;
display: flex;
}
.flowvaro-dd-side-row:last-child {
border-bottom: 0;
}
.flowvaro-dd-side-row .v {
color: var(--color-ink);
font-weight: 600;
font-family: var(--font-mono);
font-size: 12px;
}
.flowvaro-mjml-shell {
background: var(--color-surface);
height: calc(100vh - 72px);
color: var(--color-ink);
border-top: 1px solid var(--color-border-subtle);
grid-template-rows: 56px 1fr;
gap: 0;
margin: -16px -24px;
display: grid;
}
.flowvaro-mjml-topbar {
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-raised);
align-items: center;
gap: 10px;
padding: 0 16px;
display: flex;
}
.flowvaro-mjml-back {
width: 28px;
height: 28px;
color: var(--color-ink-muted);
border-radius: 6px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.flowvaro-mjml-back:hover {
background: var(--color-surface);
}
.flowvaro-mjml-crumbs {
color: var(--color-ink-muted);
align-items: center;
gap: 6px;
font-size: 12px;
display: inline-flex;
}
.flowvaro-mjml-crumbs .sep {
color: var(--color-ink-faint);
}
.flowvaro-mjml-name {
min-width: 200px;
color: var(--color-ink);
background: none;
border: 1px solid #0000;
border-radius: 6px;
flex: auto;
padding: 4px 8px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
}
.flowvaro-mjml-name:hover, .flowvaro-mjml-name:focus {
border-color: var(--color-border);
background: var(--color-surface);
outline: none;
}
.flowvaro-mjml-pill {
letter-spacing: .04em;
border: 1px solid var(--color-border-subtle);
background: var(--color-surface);
height: 22px;
color: var(--color-ink-muted);
font-size: 10.5px;
font-weight: 700;
font-family: var(--font-mono, ui-monospace, monospace);
white-space: nowrap;
border-radius: 4px;
align-items: center;
padding: 0 8px;
display: inline-flex;
}
.flowvaro-mjml-pill.is-saved {
background: var(--color-success-soft, #ecfdf5);
color: var(--color-success, #047857);
border-color: var(--color-success-border, #a7f3d0);
}
.flowvaro-mjml-pill.is-dirty {
background: var(--color-warning-soft, #fef3c7);
color: var(--color-warning, #92400e);
border-color: var(--color-warning-border, #fcd34d);
}
.flowvaro-mjml-spacer {
flex: auto;
}
.flowvaro-mjml-device-toggle {
border: 1px solid var(--color-border);
border-radius: 6px;
display: inline-flex;
overflow: hidden;
}
.flowvaro-mjml-device-toggle button {
color: var(--color-ink-muted);
cursor: pointer;
background: none;
border: none;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
}
.flowvaro-mjml-device-toggle button + button {
border-left: 1px solid var(--color-border);
}
.flowvaro-mjml-device-toggle button.on {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
}
.flowvaro-mjml-secondary, .flowvaro-mjml-primary {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink);
cursor: pointer;
border-radius: 6px;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
}
.flowvaro-mjml-secondary:hover {
background: var(--color-surface-raised);
}
.flowvaro-mjml-primary {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
border-color: #0000;
}
.flowvaro-mjml-primary:hover {
filter: brightness(1.08);
}
.flowvaro-mjml-primary:disabled {
opacity: .55;
cursor: not-allowed;
}
.flowvaro-mjml-body {
background: var(--color-surface);
grid-template-columns: 1fr 1fr;
min-height: 0;
display: grid;
}
.flowvaro-mjml-code-pane, .flowvaro-mjml-preview-pane {
grid-template-rows: 36px 1fr;
min-width: 0;
min-height: 0;
display: grid;
}
.flowvaro-mjml-code-pane {
border-right: 1px solid var(--color-border);
color: #e2e8f0;
background: #0f172a;
}
.flowvaro-mjml-pane-head {
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-raised);
color: var(--color-ink);
align-items: center;
gap: 8px;
padding: 0 12px;
font-size: 12px;
font-weight: 600;
display: flex;
}
.flowvaro-mjml-code-pane .flowvaro-mjml-pane-head {
color: #cbd5e1;
background: #1e293b;
border-bottom-color: #334155;
}
.flowvaro-mjml-file-tab {
color: #94a3b8;
background: none;
border-radius: 4px 4px 0 0;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 11.5px;
font-weight: 600;
display: inline-flex;
}
.flowvaro-mjml-file-tab.on {
color: #fff;
background: #0f172a;
}
.flowvaro-mjml-file-tab .ico {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
border-radius: 3px;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
font-size: 9.5px;
font-weight: 800;
display: inline-flex;
}
.flowvaro-mjml-file-tab .ico.mjml {
background: #f59e0b;
}
.flowvaro-mjml-hint {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono, ui-monospace, monospace);
}
.flowvaro-mjml-code-pane .flowvaro-mjml-hint {
color: #94a3b8;
}
.flowvaro-mjml-pane-title {
font-weight: 700;
}
.flowvaro-mjml-loading {
color: #94a3b8;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 13px;
display: flex;
}
.flowvaro-mjml-code {
resize: none;
color: #e2e8f0;
tab-size: 2;
white-space: pre;
background: none;
border: 0;
outline: 0;
width: 100%;
height: 100%;
padding: 16px 18px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
line-height: 1.55;
}
.flowvaro-mjml-code::placeholder {
color: #475569;
}
.flowvaro-mjml-preview-pane {
background: #f1f5f9;
}
.flowvaro-mjml-preview-canvas {
justify-content: center;
align-items: flex-start;
padding: 24px;
display: flex;
overflow: auto;
}
.flowvaro-mjml-preview-canvas iframe {
border: 1px solid var(--color-border);
background: #fff;
border-radius: 8px;
height: calc(100vh - 200px);
min-height: 480px;
transition: width .18s;
box-shadow: 0 6px 24px #0f172a14;
}
[data-theme="dark"] .flowvaro-mjml-preview-pane {
background: #1e293b;
}
.flowvaro-eb-shell {
background: var(--color-surface);
height: calc(100vh - 72px);
color: var(--color-ink);
border-top: 1px solid var(--color-border-subtle);
grid-template-rows: 56px 1fr;
margin: -16px -24px;
display: grid;
}
.flowvaro-eb-topbar {
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-raised);
align-items: center;
gap: 10px;
padding: 0 16px;
display: flex;
}
.flowvaro-eb-back {
width: 28px;
height: 28px;
color: var(--color-ink-muted);
border-radius: 6px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.flowvaro-eb-back:hover {
background: var(--color-surface);
}
.flowvaro-eb-crumbs {
color: var(--color-ink-muted);
align-items: center;
gap: 6px;
font-size: 12px;
display: inline-flex;
}
.flowvaro-eb-crumbs .sep {
color: var(--color-ink-faint);
}
.flowvaro-eb-name {
min-width: 200px;
color: var(--color-ink);
background: none;
border: 1px solid #0000;
border-radius: 6px;
flex: auto;
padding: 4px 8px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
}
.flowvaro-eb-name:hover, .flowvaro-eb-name:focus {
border-color: var(--color-border);
background: var(--color-surface);
outline: none;
}
.flowvaro-eb-pill {
letter-spacing: .04em;
border: 1px solid var(--color-border-subtle);
background: var(--color-surface);
height: 22px;
color: var(--color-ink-muted);
font-size: 10.5px;
font-weight: 700;
font-family: var(--font-mono, ui-monospace, monospace);
white-space: nowrap;
border-radius: 4px;
align-items: center;
padding: 0 8px;
display: inline-flex;
}
.flowvaro-eb-pill.is-saved {
background: var(--color-success-soft, #ecfdf5);
color: var(--color-success, #047857);
border-color: var(--color-success-border, #a7f3d0);
}
.flowvaro-eb-spacer {
flex: auto;
}
.flowvaro-eb-device-toggle {
border: 1px solid var(--color-border);
border-radius: 6px;
display: inline-flex;
overflow: hidden;
}
.flowvaro-eb-device-toggle button {
color: var(--color-ink-muted);
cursor: pointer;
background: none;
border: none;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
}
.flowvaro-eb-device-toggle button + button {
border-left: 1px solid var(--color-border);
}
.flowvaro-eb-device-toggle button.on {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
}
.flowvaro-eb-secondary, .flowvaro-eb-primary {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink);
cursor: pointer;
border-radius: 6px;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
}
.flowvaro-eb-secondary:hover {
background: var(--color-surface-raised);
}
.flowvaro-eb-primary {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
border-color: #0000;
}
.flowvaro-eb-primary:disabled {
opacity: .45;
cursor: not-allowed;
}
.flowvaro-eb-body {
grid-template-columns: 260px 1fr 320px;
min-height: 0;
display: grid;
}
.flowvaro-eb-left {
border-right: 1px solid var(--color-border);
background: var(--color-surface-raised);
grid-template-rows: auto auto 1fr;
min-height: 0;
display: grid;
}
.flowvaro-eb-left-tabs {
border-bottom: 1px solid var(--color-border-subtle);
gap: 4px;
padding: 8px 8px 0;
display: flex;
}
.flowvaro-eb-left-tabs button {
color: var(--color-ink-muted);
cursor: pointer;
background: none;
border: none;
border-bottom: 2px solid #0000;
flex: 1;
padding: 6px 8px;
font-size: 12px;
font-weight: 600;
}
.flowvaro-eb-left-tabs button.on {
color: var(--color-ink);
border-bottom-color: var(--color-flowvaro-deep, #1e3a8a);
}
.flowvaro-eb-search {
border-bottom: 1px solid var(--color-border-subtle);
color: var(--color-ink-faint);
align-items: center;
gap: 6px;
padding: 8px 12px;
display: flex;
}
.flowvaro-eb-search input {
border: 1px solid var(--color-border);
color: var(--color-ink);
background: none;
border-radius: 6px;
flex: 1;
padding: 5px 8px;
font-size: 12px;
}
.flowvaro-eb-search input:focus {
border-color: var(--color-flowvaro-deep, #1e3a8a);
outline: none;
}
.flowvaro-eb-left-scroll {
min-height: 0;
padding: 8px 10px 16px;
overflow-y: auto;
}
.flowvaro-eb-category {
margin-top: 12px;
}
.flowvaro-eb-category h4 {
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-ink-faint);
margin: 0 0 6px;
padding: 0 4px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-eb-category h4 .ct {
color: var(--color-ink-faint);
letter-spacing: 0;
text-transform: none;
font-weight: 500;
}
.flowvaro-eb-grid {
grid-template-columns: 1fr 1fr;
gap: 6px;
display: grid;
}
.flowvaro-eb-card {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink);
cursor: grab;
border-radius: 8px;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 6px;
font-size: 11px;
font-weight: 600;
transition: transform .12s, border-color .12s;
display: flex;
}
.flowvaro-eb-card:hover {
border-color: var(--color-flowvaro-deep, #1e3a8a);
transform: translateY(-1px);
}
.flowvaro-eb-card .ico {
background: var(--color-surface-raised);
width: 26px;
height: 26px;
color: var(--color-flowvaro-deep, #1e3a8a);
border-radius: 6px;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 800;
display: inline-flex;
}
.flowvaro-eb-saved {
border: 1px solid var(--color-border);
background: var(--color-surface);
cursor: grab;
text-align: left;
border-radius: 8px;
grid-template-columns: 40px 1fr;
align-items: center;
gap: 10px;
width: 100%;
margin-top: 6px;
padding: 8px;
display: grid;
}
.flowvaro-eb-saved:hover {
border-color: var(--color-flowvaro-deep, #1e3a8a);
}
.flowvaro-eb-saved .thumb {
border-radius: 6px;
width: 40px;
height: 40px;
}
.flowvaro-eb-saved .meta strong {
color: var(--color-ink);
font-size: 12px;
display: block;
}
.flowvaro-eb-saved .meta small {
color: var(--color-ink-faint);
font-size: 10.5px;
display: block;
}
.flowvaro-eb-layer-root {
color: var(--color-ink);
align-items: center;
gap: 6px;
padding: 6px 4px;
font-size: 12px;
font-weight: 700;
display: flex;
}
.flowvaro-eb-layer-root .chev, .flowvaro-eb-layer .chev {
width: 12px;
color: var(--color-ink-faint);
}
.flowvaro-eb-layer {
width: 100%;
color: var(--color-ink-muted);
cursor: pointer;
text-align: left;
background: none;
border: none;
align-items: center;
gap: 6px;
padding: 6px 4px 6px 18px;
font-size: 12px;
display: flex;
}
.flowvaro-eb-layer:hover {
background: var(--color-surface);
}
.flowvaro-eb-layer.is-selected {
background: var(--color-flowvaro-soft, #eef2ff);
color: var(--color-flowvaro-deep, #1e3a8a);
font-weight: 600;
}
.flowvaro-eb-canvas {
background: #f1f5f9;
justify-content: center;
align-items: flex-start;
padding: 24px;
display: flex;
overflow: auto;
}
[data-theme="dark"] .flowvaro-eb-canvas {
background: #1e293b;
}
.flowvaro-eb-frame {
border: 1px solid var(--color-border);
background: #fff;
border-radius: 10px;
flex-direction: column;
gap: 0;
max-width: 100%;
transition: width .18s;
display: flex;
overflow: hidden;
box-shadow: 0 6px 24px #0f172a14;
}
.flowvaro-eb-block {
text-align: left;
cursor: pointer;
width: 100%;
font: inherit;
color: inherit;
background: none;
border: none;
border-bottom: 1px solid #f1f5f9;
padding: 18px 22px;
display: block;
position: relative;
}
.flowvaro-eb-block:hover {
background: #fafbff;
}
.flowvaro-eb-block.is-selected {
box-shadow: inset 0 0 0 2px var(--color-flowvaro-deep, #1e3a8a);
background: #fff;
}
.flowvaro-eb-block-tag {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
letter-spacing: .04em;
text-transform: uppercase;
border-radius: 4px;
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
position: absolute;
top: -10px;
left: 8px;
}
.flowvaro-eb-drop {
text-align: center;
color: var(--color-ink-faint);
border-top: 1px dashed var(--color-border);
background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 8px, #f1f5f9 8px 16px);
margin: 0;
padding: 18px;
font-size: 12px;
font-weight: 600;
}
.flowvaro-eb-blk-header {
justify-content: space-between;
align-items: center;
display: flex;
}
.flowvaro-eb-blk-header .logo {
color: #0f172a;
font-size: 15px;
font-weight: 800;
}
.flowvaro-eb-blk-header .link {
color: #64748b;
font-size: 11px;
}
.flowvaro-eb-blk-hero {
text-align: center;
padding: 16px 8px 8px;
}
.flowvaro-eb-blk-hero h1 {
color: #0f172a;
letter-spacing: -.01em;
margin: 0 0 6px;
font-size: 28px;
font-weight: 800;
}
.flowvaro-eb-blk-hero p {
color: #475569;
margin: 0 0 14px;
font-size: 14px;
}
.flowvaro-eb-cta {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
cursor: pointer;
border: none;
border-radius: 6px;
padding: 10px 18px;
font-size: 13px;
font-weight: 700;
display: inline-block;
}
.flowvaro-eb-blk-products {
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
display: grid;
}
.flowvaro-eb-product .img {
aspect-ratio: 1;
border-radius: 6px;
}
.flowvaro-eb-product .name {
color: #0f172a;
margin-top: 6px;
font-size: 12px;
font-weight: 600;
}
.flowvaro-eb-product .price {
color: #64748b;
font-size: 12px;
}
.flowvaro-eb-blk-conditional {
border: 1px dashed #fde68a;
border-radius: 6px;
}
.flowvaro-eb-blk-conditional .cond-head {
color: #854d0e;
letter-spacing: .04em;
text-transform: uppercase;
background: #fef9c3;
padding: 6px 10px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-eb-blk-conditional .cond-body {
color: #334155;
padding: 10px;
font-size: 13px;
}
.flowvaro-eb-blk-footer {
text-align: center;
}
.flowvaro-eb-blk-footer .row {
color: #64748b;
margin: 4px 0;
font-size: 11px;
}
.flowvaro-eb-blk-footer a {
color: #475569;
text-decoration: underline;
}
.flowvaro-eb-right {
border-left: 1px solid var(--color-border);
background: var(--color-surface-raised);
grid-template-rows: auto 1fr;
min-height: 0;
display: grid;
}
.flowvaro-eb-right-head {
border-bottom: 1px solid var(--color-border);
align-items: center;
gap: 8px;
padding: 12px 14px;
display: flex;
}
.flowvaro-eb-right-title {
color: var(--color-ink);
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
display: inline-flex;
}
.flowvaro-eb-right-title .dot {
background: var(--color-flowvaro-deep, #1e3a8a);
border-radius: 50%;
width: 8px;
height: 8px;
}
.flowvaro-eb-right-id {
color: var(--color-ink-faint);
font-size: 11px;
font-family: var(--font-mono, ui-monospace, monospace);
margin-left: auto;
}
.flowvaro-eb-right-scroll {
min-height: 0;
padding: 6px 0;
overflow-y: auto;
}
.flowvaro-eb-accordion {
border-bottom: 1px solid var(--color-border-subtle);
}
.flowvaro-eb-accordion-head {
width: 100%;
color: var(--color-ink);
text-align: left;
cursor: pointer;
background: none;
border: none;
align-items: center;
gap: 6px;
padding: 9px 12px;
font-size: 12px;
font-weight: 600;
display: flex;
}
.flowvaro-eb-accordion-head:hover {
background: var(--color-surface);
}
.flowvaro-eb-accordion-body {
gap: 8px;
padding: 4px 12px 12px;
display: grid;
}
.flowvaro-eb-field {
gap: 4px;
display: grid;
}
.flowvaro-eb-field label {
color: var(--color-ink-faint);
letter-spacing: .02em;
font-size: 10.5px;
font-weight: 600;
}
.flowvaro-eb-field input {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink);
border-radius: 6px;
padding: 5px 8px;
font-size: 12px;
}
.flowvaro-eb-field input:focus {
border-color: var(--color-flowvaro-deep, #1e3a8a);
outline: none;
}
.flowvaro-cb-shell {
background: var(--color-surface);
height: calc(100vh - 72px);
color: var(--color-ink);
border-top: 1px solid var(--color-border-subtle);
grid-template-rows: 56px 1fr;
margin: -16px -24px;
display: grid;
position: relative;
}
.flowvaro-cb-topbar {
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-raised);
align-items: center;
gap: 10px;
padding: 0 16px;
display: flex;
}
.flowvaro-cb-back {
width: 28px;
height: 28px;
color: var(--color-ink-muted);
border-radius: 6px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.flowvaro-cb-back:hover {
background: var(--color-surface);
}
.flowvaro-cb-crumbs {
color: var(--color-ink-muted);
align-items: center;
gap: 6px;
font-size: 12px;
display: inline-flex;
}
.flowvaro-cb-crumbs .sep {
color: var(--color-ink-faint);
}
.flowvaro-cb-name {
min-width: 200px;
color: var(--color-ink);
background: none;
border: 1px solid #0000;
border-radius: 6px;
flex: auto;
padding: 4px 8px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
}
.flowvaro-cb-name:hover, .flowvaro-cb-name:focus {
border-color: var(--color-border);
background: var(--color-surface);
outline: none;
}
.flowvaro-cb-pill {
letter-spacing: .04em;
border: 1px solid var(--color-border-subtle);
background: var(--color-surface);
height: 22px;
color: var(--color-ink-muted);
font-size: 10.5px;
font-weight: 700;
font-family: var(--font-mono, ui-monospace, monospace);
white-space: nowrap;
border-radius: 4px;
align-items: center;
padding: 0 8px;
display: inline-flex;
}
.flowvaro-cb-pill.is-saved {
background: var(--color-success-soft, #ecfdf5);
color: var(--color-success, #047857);
border-color: var(--color-success-border, #a7f3d0);
}
.flowvaro-cb-spacer {
flex: auto;
}
.flowvaro-cb-secondary, .flowvaro-cb-primary {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink);
cursor: pointer;
border-radius: 6px;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
}
.flowvaro-cb-secondary:hover {
background: var(--color-surface-raised);
}
.flowvaro-cb-primary {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
border-color: #0000;
}
.flowvaro-cb-primary:disabled {
opacity: .45;
cursor: not-allowed;
}
.flowvaro-cb-body {
grid-template-columns: 260px 1fr 340px;
min-height: 0;
display: grid;
}
.flowvaro-cb-left {
border-right: 1px solid var(--color-border);
background: var(--color-surface-raised);
grid-template-rows: auto auto 1fr;
min-height: 0;
display: grid;
}
.flowvaro-cb-left-head {
padding: 12px 14px 4px;
}
.flowvaro-cb-left-head h3 {
color: var(--color-ink);
margin: 0;
font-size: 12.5px;
font-weight: 700;
}
.flowvaro-cb-search {
border-bottom: 1px solid var(--color-border-subtle);
color: var(--color-ink-faint);
align-items: center;
gap: 6px;
padding: 6px 12px 10px;
display: flex;
}
.flowvaro-cb-search input {
border: 1px solid var(--color-border);
color: var(--color-ink);
background: none;
border-radius: 6px;
flex: 1;
padding: 5px 8px;
font-size: 12px;
}
.flowvaro-cb-search input:focus {
border-color: var(--color-flowvaro-deep, #1e3a8a);
outline: none;
}
.flowvaro-cb-left-scroll {
min-height: 0;
padding: 8px 10px 16px;
overflow-y: auto;
}
.flowvaro-cb-category {
margin-top: 10px;
}
.flowvaro-cb-category h4 {
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-ink-faint);
margin: 0 0 6px;
padding: 0 4px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-cb-step-item {
border: 1px solid var(--color-border-subtle);
background: var(--color-surface);
cursor: grab;
text-align: left;
border-radius: 8px;
grid-template-columns: 32px 1fr;
align-items: center;
gap: 10px;
width: 100%;
margin-bottom: 4px;
padding: 7px 8px;
display: grid;
}
.flowvaro-cb-step-item:hover {
border-color: var(--color-flowvaro-deep, #1e3a8a);
}
.flowvaro-cb-step-item .ico-circle {
border-radius: 50%;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
font-size: 14px;
font-weight: 700;
display: inline-flex;
}
.flowvaro-cb-step-item.is-trigger .ico-circle {
color: #166534;
background: #dcfce7;
}
.flowvaro-cb-step-item.is-action .ico-circle {
color: #1e40af;
background: #dbeafe;
}
.flowvaro-cb-step-item.is-wait .ico-circle {
color: #b45309;
background: #fef3c7;
}
.flowvaro-cb-step-item.is-condition .ico-circle {
color: #6d28d9;
background: #ede9fe;
}
.flowvaro-cb-step-item.is-end .ico-circle {
color: #4b5563;
background: #f3f4f6;
}
.flowvaro-cb-step-item .meta strong {
color: var(--color-ink);
font-size: 12px;
font-weight: 600;
display: block;
}
.flowvaro-cb-step-item .meta small {
color: var(--color-ink-faint);
font-size: 10.5px;
display: block;
}
.flowvaro-cb-canvas {
background: #f1f5f9 radial-gradient(circle, #e2e8f0 1px, #0000 1px) 0 0 / 16px 16px;
grid-template-rows: 1fr auto;
display: grid;
overflow: auto;
}
[data-theme="dark"] .flowvaro-cb-canvas {
background: #1e293b radial-gradient(circle, #334155 1px, #0000 1px);
}
.flowvaro-cb-canvas-inner {
flex-direction: column;
align-items: center;
gap: 0;
width: 100%;
padding: 32px 16px;
display: flex;
}
.flowvaro-cb-node-wrap {
flex-direction: column;
align-items: center;
display: flex;
}
.flowvaro-cb-node {
background: var(--color-surface, #fff);
border: 1px solid var(--color-border);
text-align: left;
cursor: pointer;
border-radius: 10px;
width: 320px;
padding: 0;
transition: transform .12s, box-shadow .12s, border-color .12s;
overflow: hidden;
box-shadow: 0 4px 10px #0f172a0f;
}
.flowvaro-cb-node:hover {
box-shadow: 0 8px 20px #0f172a1a;
}
.flowvaro-cb-node.is-selected {
border-color: var(--color-flowvaro-deep, #1e3a8a);
box-shadow: 0 0 0 2px #1e3a8a2e, 0 8px 22px #0f172a1f;
}
.flowvaro-cb-node-header {
align-items: center;
gap: 8px;
padding: 10px 12px;
display: flex;
}
.flowvaro-cb-node-header .title {
color: var(--color-ink);
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
font-size: 13px;
font-weight: 600;
overflow: hidden;
}
.flowvaro-cb-node-header .err-badge {
color: #fff;
letter-spacing: .04em;
text-transform: uppercase;
background: #b91c1c;
border-radius: 4px;
padding: 1px 6px;
font-size: 10px;
font-weight: 700;
}
.flowvaro-cb-node-header .more {
color: var(--color-ink-faint);
}
.flowvaro-cb-ico-tag {
border-radius: 6px;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
display: inline-flex;
}
.flowvaro-cb-ico-tag.is-trigger {
color: #166534;
background: #dcfce7;
}
.flowvaro-cb-ico-tag.is-action {
color: #1e40af;
background: #dbeafe;
}
.flowvaro-cb-ico-tag.is-wait {
color: #b45309;
background: #fef3c7;
}
.flowvaro-cb-ico-tag.is-condition {
color: #6d28d9;
background: #ede9fe;
}
.flowvaro-cb-ico-tag.is-end {
color: #4b5563;
background: #f3f4f6;
}
.flowvaro-cb-node-body {
color: var(--color-ink-muted);
padding: 0 12px 10px;
font-size: 12px;
}
.flowvaro-cb-node-stats {
border-top: 1px solid var(--color-border-subtle);
background: var(--color-surface-raised);
display: flex;
}
.flowvaro-cb-node-stats div {
border-right: 1px solid var(--color-border-subtle);
flex: 1;
padding: 8px 10px;
font-size: 11px;
}
.flowvaro-cb-node-stats div:last-child {
border-right: 0;
}
.flowvaro-cb-node-stats strong {
color: var(--color-ink);
font-size: 14px;
font-weight: 700;
font-family: var(--font-mono, ui-monospace, monospace);
display: block;
}
.flowvaro-cb-node-stats strong.ok {
color: var(--color-success, #047857);
}
.flowvaro-cb-node-stats small {
color: var(--color-ink-faint);
font-size: 10px;
}
.flowvaro-cb-arrow {
background: linear-gradient(to bottom, var(--color-border), var(--color-flowvaro-deep, #1e3a8a));
width: 2px;
height: 28px;
position: relative;
}
.flowvaro-cb-arrow:after {
content: "";
border-left: 5px solid #0000;
border-right: 5px solid #0000;
border-top: 6px solid var(--color-flowvaro-deep, #1e3a8a);
width: 0;
height: 0;
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
}
.flowvaro-cb-hotkeys {
border-top: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink-muted);
text-align: center;
font-size: 11.5px;
font-family: var(--font-mono, ui-monospace, monospace);
padding: 10px 16px;
}
.flowvaro-cb-hotkeys b {
background: var(--color-surface-raised);
color: var(--color-ink);
border-radius: 4px;
margin: 0 2px;
padding: 1px 6px;
}
.flowvaro-cb-right {
border-left: 1px solid var(--color-border);
background: var(--color-surface-raised);
grid-template-rows: auto 1fr;
min-height: 0;
display: grid;
}
.flowvaro-cb-right-head {
border-bottom: 1px solid var(--color-border);
grid-template-columns: 24px 1fr;
align-items: start;
gap: 10px;
padding: 12px 14px;
display: grid;
}
.flowvaro-cb-right-head strong {
color: var(--color-ink);
font-size: 13px;
font-weight: 700;
}
.flowvaro-cb-right-head small.block {
color: var(--color-ink-faint);
margin-top: 2px;
font-size: 11px;
display: block;
}
.flowvaro-cb-right-scroll {
min-height: 0;
padding: 6px 0 14px;
overflow-y: auto;
}
.flowvaro-cb-accordion {
border-bottom: 1px solid var(--color-border-subtle);
}
.flowvaro-cb-accordion-head {
width: 100%;
color: var(--color-ink);
text-align: left;
cursor: pointer;
background: none;
border: none;
align-items: center;
gap: 6px;
padding: 9px 12px;
font-size: 12px;
font-weight: 600;
display: flex;
}
.flowvaro-cb-accordion-head:hover {
background: var(--color-surface);
}
.flowvaro-cb-accordion-body {
gap: 8px;
padding: 4px 12px 12px;
display: grid;
}
.flowvaro-cb-field {
gap: 4px;
display: grid;
}
.flowvaro-cb-field label {
color: var(--color-ink-faint);
letter-spacing: .02em;
font-size: 10.5px;
font-weight: 600;
}
.flowvaro-cb-field input {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink);
border-radius: 6px;
padding: 5px 8px;
font-size: 12px;
}
.flowvaro-cb-field input:focus {
border-color: var(--color-flowvaro-deep, #1e3a8a);
outline: none;
}
.flowvaro-cb-ai-stats {
border: 1px solid var(--color-flowvaro-soft, #c7d2fe);
background: var(--color-flowvaro-faint, #eef2ff);
border-radius: 8px;
margin: 12px;
padding: 10px 12px;
}
.flowvaro-cb-ai-stats header {
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-flowvaro-deep, #1e3a8a);
align-items: center;
gap: 6px;
margin-bottom: 8px;
font-size: 10.5px;
font-weight: 700;
display: inline-flex;
}
.flowvaro-cb-ai-stats .grid {
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
display: grid;
}
.flowvaro-cb-ai-stats .grid > div {
text-align: center;
}
.flowvaro-cb-ai-stats .grid strong {
color: var(--color-flowvaro-deep, #1e3a8a);
font-size: 16px;
font-weight: 800;
font-family: var(--font-mono, ui-monospace, monospace);
display: block;
}
.flowvaro-cb-ai-stats .grid small {
color: var(--color-ink-muted);
font-size: 10.5px;
display: block;
}
.flowvaro-cb-ai-stats .grid .delta {
color: var(--color-ink-faint);
margin-top: 2px;
font-size: 10px;
display: block;
}
.flowvaro-cb-loading-overlay {
color: var(--color-ink-faint);
pointer-events: none;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 13px;
display: flex;
position: absolute;
inset: 56px 0 0;
}
.flowvaro-fb-shell {
background: var(--color-surface);
height: calc(100vh - 72px);
color: var(--color-ink);
border-top: 1px solid var(--color-border-subtle);
grid-template-rows: 56px auto 1fr;
margin: -16px -24px;
display: grid;
}
.flowvaro-fb-topbar {
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-raised);
align-items: center;
gap: 10px;
padding: 0 16px;
display: flex;
}
.flowvaro-fb-back {
width: 28px;
height: 28px;
color: var(--color-ink-muted);
border-radius: 6px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.flowvaro-fb-back:hover {
background: var(--color-surface);
}
.flowvaro-fb-crumbs {
color: var(--color-ink-muted);
align-items: center;
gap: 6px;
font-size: 12px;
display: inline-flex;
}
.flowvaro-fb-crumbs .sep {
color: var(--color-ink-faint);
}
.flowvaro-fb-name {
min-width: 200px;
color: var(--color-ink);
background: none;
border: 1px solid #0000;
border-radius: 6px;
flex: auto;
padding: 4px 8px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
}
.flowvaro-fb-name:hover, .flowvaro-fb-name:focus {
border-color: var(--color-border);
background: var(--color-surface);
outline: none;
}
.flowvaro-fb-pill {
letter-spacing: .04em;
border: 1px solid var(--color-border-subtle);
background: var(--color-surface);
height: 22px;
color: var(--color-ink-muted);
font-size: 10.5px;
font-weight: 700;
font-family: var(--font-mono, ui-monospace, monospace);
white-space: nowrap;
border-radius: 4px;
align-items: center;
padding: 0 8px;
display: inline-flex;
}
.flowvaro-fb-pill.is-saved {
background: var(--color-success-soft, #ecfdf5);
color: var(--color-success, #047857);
border-color: var(--color-success-border, #a7f3d0);
}
.flowvaro-fb-spacer {
flex: auto;
}
.flowvaro-fb-secondary, .flowvaro-fb-primary {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink);
cursor: pointer;
border-radius: 6px;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
}
.flowvaro-fb-secondary:hover {
background: var(--color-surface-raised);
}
.flowvaro-fb-primary {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
border-color: #0000;
}
.flowvaro-fb-primary:disabled {
opacity: .45;
cursor: not-allowed;
}
.flowvaro-fb-error-bar {
color: #b91c1c;
background: #fef2f2;
border-bottom: 1px solid #fecaca;
padding: 8px 16px;
font-size: 12.5px;
font-weight: 600;
}
.flowvaro-fb-body {
grid-template-columns: 280px 1fr 320px;
min-height: 0;
display: grid;
}
.flowvaro-fb-left {
border-right: 1px solid var(--color-border);
background: var(--color-surface-raised);
grid-template-rows: auto 1fr;
min-height: 0;
display: grid;
}
.flowvaro-fb-left-head {
padding: 12px 14px 6px;
}
.flowvaro-fb-left-head h3 {
color: var(--color-ink);
margin: 0 0 2px;
font-size: 12.5px;
font-weight: 700;
}
.flowvaro-fb-left-head small {
color: var(--color-ink-faint);
font-size: 11px;
}
.flowvaro-fb-left-scroll {
min-height: 0;
padding: 4px 10px 16px;
overflow-y: auto;
}
.flowvaro-fb-category {
margin-top: 10px;
}
.flowvaro-fb-category h4 {
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-ink-faint);
margin: 0 0 6px;
padding: 0 4px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-fb-grid {
grid-template-columns: 1fr;
gap: 6px;
display: grid;
}
.flowvaro-fb-tile {
border: 1px solid var(--color-border-subtle);
background: var(--color-surface);
text-align: left;
cursor: pointer;
border-radius: 8px;
grid-template-columns: 32px 1fr;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
transition: border-color .12s, transform .12s;
display: grid;
}
.flowvaro-fb-tile:hover {
border-color: var(--color-flowvaro-deep, #1e3a8a);
transform: translateY(-1px);
}
.flowvaro-fb-tile.is-disabled {
opacity: .55;
cursor: not-allowed;
background: var(--color-surface-raised);
}
.flowvaro-fb-tile.is-disabled:hover {
border-color: var(--color-border-subtle);
transform: none;
}
.flowvaro-fb-tile .ico {
background: var(--color-flowvaro-soft, #eef2ff);
width: 28px;
height: 28px;
color: var(--color-flowvaro-deep, #1e3a8a);
border-radius: 6px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.flowvaro-fb-tile .meta strong {
color: var(--color-ink);
font-size: 12px;
font-weight: 600;
display: block;
}
.flowvaro-fb-tile .meta small {
color: var(--color-ink-faint);
font-size: 10.5px;
display: block;
}
.flowvaro-fb-canvas {
background: #f1f5f9;
justify-content: center;
align-items: flex-start;
padding: 32px 24px;
display: flex;
overflow: auto;
}
[data-theme="dark"] .flowvaro-fb-canvas {
background: #1e293b;
}
.flowvaro-fb-frame {
border: 1px solid var(--color-border);
background: #fff;
border-radius: 12px;
width: 560px;
max-width: 100%;
overflow: hidden;
box-shadow: 0 8px 32px #0f172a14;
}
.flowvaro-fb-form-head {
text-align: left;
cursor: pointer;
background: none;
border: 0;
border-bottom: 1px solid #f1f5f9;
width: 100%;
padding: 22px 28px 18px;
display: block;
position: relative;
}
.flowvaro-fb-form-head:hover {
background: #fafbff;
}
.flowvaro-fb-form-head.is-selected {
box-shadow: inset 4px 0 0 var(--color-flowvaro-deep, #1e3a8a);
background: #fafbff;
}
.flowvaro-fb-form-head .kind {
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-flowvaro-deep, #1e3a8a);
background: var(--color-flowvaro-soft, #eef2ff);
border-radius: 4px;
padding: 2px 8px;
font-size: 10.5px;
font-weight: 700;
display: inline-block;
}
.flowvaro-fb-form-head h1 {
color: #0f172a;
letter-spacing: -.01em;
margin: 8px 0 4px;
font-size: 22px;
font-weight: 800;
}
.flowvaro-fb-form-head p {
color: #64748b;
margin: 0;
font-size: 13px;
}
.flowvaro-fb-empty {
text-align: center;
color: var(--color-ink-faint);
padding: 22px;
font-size: 13px;
}
.flowvaro-fb-field {
cursor: pointer;
border-bottom: 1px solid #f1f5f9;
gap: 6px;
padding: 14px 28px;
display: grid;
position: relative;
}
.flowvaro-fb-field:hover {
background: #fafbff;
}
.flowvaro-fb-field.is-selected {
box-shadow: inset 4px 0 0 var(--color-flowvaro-deep, #1e3a8a);
background: #fff;
}
.flowvaro-fb-field-label {
color: #0f172a;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 600;
display: flex;
}
.flowvaro-fb-field-label .req {
letter-spacing: .04em;
text-transform: uppercase;
color: #b91c1c;
font-size: 10px;
font-weight: 700;
}
.flowvaro-fb-field-label .type {
color: var(--color-ink-faint);
font-size: 10.5px;
font-family: var(--font-mono, ui-monospace, monospace);
margin-left: auto;
}
.flowvaro-fb-field-input {
color: #475569;
font-size: 13px;
font-family: var(--font-mono, ui-monospace, monospace);
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 9px 12px;
}
.flowvaro-fb-field-input .ta-stub {
min-height: 38px;
padding-top: 4px;
display: block;
}
.flowvaro-fb-field-input .cb-stub {
font-family: inherit;
}
.flowvaro-fb-field-actions {
border: 1px solid var(--color-border);
background: #fff;
border-radius: 6px;
gap: 2px;
padding: 2px;
display: flex;
position: absolute;
top: 12px;
right: 12px;
}
.flowvaro-fb-field-actions button {
width: 24px;
height: 24px;
color: var(--color-ink-muted);
cursor: pointer;
background: none;
border: none;
border-radius: 4px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.flowvaro-fb-field-actions button:hover {
background: var(--color-surface-raised);
color: var(--color-ink);
}
.flowvaro-fb-field-actions button:disabled {
opacity: .35;
cursor: not-allowed;
}
.flowvaro-fb-submit-preview {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
cursor: not-allowed;
border: 0;
border-radius: 8px;
width: calc(100% - 56px);
margin: 18px 28px 24px;
padding: 12px;
font-size: 14px;
font-weight: 700;
display: block;
}
.flowvaro-fb-right {
border-left: 1px solid var(--color-border);
background: var(--color-surface-raised);
grid-template-rows: auto 1fr;
min-height: 0;
display: grid;
}
.flowvaro-fb-right-head {
border-bottom: 1px solid var(--color-border);
padding: 12px 14px;
}
.flowvaro-fb-right-head strong {
color: var(--color-ink);
font-size: 13px;
font-weight: 700;
display: block;
}
.flowvaro-fb-right-head small {
color: var(--color-ink-faint);
margin-top: 2px;
font-size: 11px;
display: block;
}
.flowvaro-fb-right-scroll {
min-height: 0;
padding: 6px 0 16px;
overflow-y: auto;
}
.flowvaro-fb-accordion {
border-bottom: 1px solid var(--color-border-subtle);
}
.flowvaro-fb-accordion-head {
width: 100%;
color: var(--color-ink);
text-align: left;
cursor: pointer;
background: none;
border: none;
align-items: center;
gap: 6px;
padding: 9px 12px;
font-size: 12px;
font-weight: 600;
display: flex;
}
.flowvaro-fb-accordion-head:hover {
background: var(--color-surface);
}
.flowvaro-fb-accordion-body {
gap: 10px;
padding: 4px 12px 14px;
display: grid;
}
.flowvaro-fb-row {
gap: 4px;
display: grid;
}
.flowvaro-fb-row label {
color: var(--color-ink-faint);
letter-spacing: .02em;
font-size: 10.5px;
font-weight: 600;
}
.flowvaro-fb-row input, .flowvaro-fb-row select {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink);
border-radius: 6px;
padding: 6px 8px;
font-family: inherit;
font-size: 12px;
}
.flowvaro-fb-row input:focus, .flowvaro-fb-row select:focus {
border-color: var(--color-flowvaro-deep, #1e3a8a);
outline: none;
}
.flowvaro-fb-color {
grid-template-columns: 36px 1fr;
align-items: center;
gap: 6px;
display: grid;
}
.flowvaro-fb-color input[type="color"] {
border: 1px solid var(--color-border);
cursor: pointer;
background: none;
border-radius: 6px;
width: 36px;
height: 28px;
padding: 0;
}
.flowvaro-fb-toggle {
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 4px 0;
display: flex;
}
.flowvaro-fb-toggle strong {
color: var(--color-ink);
font-size: 12px;
display: block;
}
.flowvaro-fb-toggle small {
color: var(--color-ink-faint);
font-size: 10.5px;
display: block;
}
.flowvaro-fb-switch {
border: 1px solid var(--color-border);
background: var(--color-surface);
cursor: pointer;
border-radius: 999px;
width: 32px;
height: 18px;
padding: 2px;
position: relative;
}
.flowvaro-fb-switch span {
background: var(--color-ink-faint);
border-radius: 50%;
width: 12px;
height: 12px;
transition: transform .12s, background .12s;
display: block;
}
.flowvaro-fb-switch.is-on {
background: var(--color-flowvaro-deep, #1e3a8a);
border-color: var(--color-flowvaro-deep, #1e3a8a);
}
.flowvaro-fb-switch.is-on span {
background: #fff;
transform: translateX(14px);
}
.flowvaro-ak-kpis {
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
display: grid;
}
.flowvaro-ak-kpi {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 14px 16px;
}
.flowvaro-ak-kpi .lbl {
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-ink-faint);
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-ak-kpi .val {
color: var(--color-ink);
font-size: 26px;
font-weight: 800;
font-family: var(--font-mono, ui-monospace, monospace);
margin-top: 4px;
line-height: 1;
}
.flowvaro-ak-kpi .val.is-ok {
color: var(--color-success, #047857);
}
.flowvaro-ak-kpi .val.is-warn {
color: #d97706;
}
.flowvaro-ak-kpi .val.is-err {
color: #b91c1c;
}
.flowvaro-ak-kpi .sub {
color: var(--color-ink-faint);
margin-top: 6px;
font-size: 11.5px;
}
.flowvaro-ak-secondary, .flowvaro-ak-primary, .flowvaro-ak-danger, .flowvaro-ak-danger-ghost {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink);
cursor: pointer;
border-radius: 6px;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
}
.flowvaro-ak-secondary:hover {
background: var(--color-surface-raised);
}
.flowvaro-ak-primary {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
border-color: #0000;
}
.flowvaro-ak-primary:hover {
filter: brightness(1.08);
}
.flowvaro-ak-danger {
color: #fff;
background: #b91c1c;
border-color: #0000;
}
.flowvaro-ak-danger:disabled {
opacity: .45;
cursor: not-allowed;
}
.flowvaro-ak-danger-ghost {
color: #b91c1c;
background: none;
border-color: #fecaca;
}
.flowvaro-ak-danger-ghost:hover {
background: #fef2f2;
}
.flowvaro-ak-confirm {
color: #b91c1c;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 8px;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 13px;
font-weight: 600;
display: flex;
}
.flowvaro-ak-empty {
border: 1px dashed var(--color-border);
text-align: center;
color: var(--color-ink-faint);
background: var(--color-surface);
border-radius: 10px;
padding: 36px;
font-size: 13px;
}
.flowvaro-ak-cards {
gap: 10px;
display: grid;
}
.flowvaro-ak-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
gap: 10px;
padding: 16px 18px;
display: grid;
}
.flowvaro-ak-card:hover {
border-color: var(--color-flowvaro-deep, #1e3a8a);
}
.flowvaro-ak-top {
align-items: center;
gap: 10px;
display: flex;
}
.flowvaro-ak-top .nm {
color: var(--color-ink);
align-items: center;
gap: 8px;
font-size: 14.5px;
font-weight: 700;
display: inline-flex;
}
.flowvaro-ak-badge {
letter-spacing: .06em;
border-radius: 4px;
align-items: center;
height: 18px;
padding: 0 6px;
font-size: 10px;
font-weight: 800;
display: inline-flex;
}
.flowvaro-ak-badge.is-live {
color: #166534;
background: #dcfce7;
}
.flowvaro-ak-badge.is-test {
color: #92400e;
background: #fef3c7;
}
.flowvaro-ak-badge.is-restricted {
color: #6d28d9;
background: #ede9fe;
}
.flowvaro-ak-pill {
height: 22px;
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono, ui-monospace, monospace);
border-radius: 4px;
align-items: center;
gap: 6px;
margin-left: auto;
padding: 0 8px;
display: inline-flex;
}
.flowvaro-ak-pill.is-ok {
background: var(--color-success-soft, #ecfdf5);
color: var(--color-success, #047857);
border: 1px solid var(--color-success-border, #a7f3d0);
}
.flowvaro-ak-pill .dot {
background: currentColor;
border-radius: 50%;
width: 6px;
height: 6px;
}
.flowvaro-ak-key-display {
background: var(--color-surface-raised);
border: 1px solid var(--color-border-subtle);
border-radius: 8px;
align-items: center;
gap: 10px;
padding: 8px 12px;
display: flex;
}
.flowvaro-ak-key-display .k {
font-family: var(--font-mono, ui-monospace, monospace);
color: var(--color-ink);
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
font-size: 12.5px;
overflow: hidden;
}
.flowvaro-ak-key-display button {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink-muted);
cursor: pointer;
border-radius: 5px;
align-items: center;
gap: 4px;
padding: 3px 8px;
font-size: 11px;
font-weight: 600;
display: inline-flex;
}
.flowvaro-ak-key-display button:hover {
background: var(--color-surface-raised);
color: var(--color-ink);
}
.flowvaro-ak-usage {
color: var(--color-ink-muted);
gap: 4px;
font-size: 12px;
display: grid;
}
.flowvaro-ak-usage .meta {
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: flex;
}
.flowvaro-ak-usage b {
font-family: var(--font-mono, ui-monospace, monospace);
color: var(--color-ink);
font-weight: 700;
}
.flowvaro-ak-scopes {
border-top: 1px solid var(--color-border-subtle);
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding-top: 8px;
display: flex;
}
.flowvaro-ak-scope-tag {
background: var(--color-surface-raised);
height: 20px;
color: var(--color-ink-muted);
border: 1px solid var(--color-border);
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono, ui-monospace, monospace);
border-radius: 4px;
align-items: center;
padding: 0 8px;
display: inline-flex;
}
.flowvaro-ak-scope-tag.mode-r {
color: #1e40af;
background: #dbeafe;
border-color: #bfdbfe;
}
.flowvaro-ak-scope-tag.mode-w {
color: #92400e;
background: #fef3c7;
border-color: #fde68a;
}
.flowvaro-ak-scope-tag.mode-x {
color: #b91c1c;
background: #fee2e2;
border-color: #fecaca;
}
.flowvaro-bl-secondary, .flowvaro-bl-primary {
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-ink);
cursor: pointer;
border-radius: 6px;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
}
.flowvaro-bl-secondary:hover {
background: var(--color-surface-raised);
}
.flowvaro-bl-primary {
background: var(--color-flowvaro-deep, #1e3a8a);
color: #fff;
border-color: #0000;
}
.flowvaro-bl-primary:hover {
filter: brightness(1.08);
}
.flowvaro-bl-alert {
color: #b91c1c;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 10px;
align-items: center;
gap: 12px;
padding: 12px 16px;
display: flex;
}
.flowvaro-bl-trial {
background: var(--color-flowvaro-faint, #eef2ff);
border: 1px solid var(--color-flowvaro-soft, #c7d2fe);
border-radius: 10px;
align-items: center;
gap: 12px;
padding: 12px 16px;
display: flex;
}
.flowvaro-bl-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
display: grid;
}
.flowvaro-bl-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
overflow: hidden;
}
.flowvaro-bl-card-head {
border-bottom: 1px solid var(--color-border-subtle);
background: var(--color-surface-raised);
justify-content: space-between;
align-items: center;
padding: 12px 16px;
display: flex;
}
.flowvaro-bl-card-head > div {
color: var(--color-ink);
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 700;
display: inline-flex;
}
.flowvaro-bl-card-head a {
color: var(--color-flowvaro-link, #1e40af);
font-size: 11.5px;
font-weight: 600;
text-decoration: none;
}
.flowvaro-bl-card-head a:hover {
text-decoration: underline;
}
.flowvaro-bl-card-body {
padding: 16px;
}
.flowvaro-bl-big {
color: var(--color-ink);
font-size: 28px;
font-weight: 800;
font-family: var(--font-mono, ui-monospace, monospace);
line-height: 1;
}
.flowvaro-bl-big small {
color: var(--color-ink-faint);
margin-left: 4px;
font-size: 13px;
font-weight: 600;
}
.flowvaro-bl-sub {
color: var(--color-ink-faint);
margin-top: 6px;
font-size: 11.5px;
}
.flowvaro-bl-empty-note {
background: var(--color-surface-raised);
color: var(--color-ink-faint);
border-radius: 6px;
margin: 10px 0 0;
padding: 8px 10px;
font-size: 11px;
line-height: 1.4;
}
.flowvaro-bl-bar {
background: var(--color-surface-raised);
border-radius: 4px;
height: 8px;
margin: 10px 0 4px;
overflow: hidden;
}
.flowvaro-bl-bar .fill {
background: var(--color-flowvaro-deep, #1e3a8a);
height: 100%;
transition: width .24s;
}
.flowvaro-bl-bar .fill.is-warn {
background: #d97706;
}
.flowvaro-bl-bar .fill.is-err {
background: #b91c1c;
}
.flowvaro-bl-usage-tiles {
border-top: 1px solid var(--color-border-subtle);
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 16px;
padding-top: 14px;
display: grid;
}
.flowvaro-bl-usage-tiles .lbl {
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-ink-faint);
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-bl-usage-tiles .val {
color: var(--color-ink);
font-size: 16px;
font-weight: 800;
font-family: var(--font-mono, ui-monospace, monospace);
margin-top: 2px;
}
.flowvaro-bl-usage-tiles .val small {
color: var(--color-ink-faint);
font-size: 11px;
font-weight: 600;
}
.flowvaro-bl-usage-tiles .bar-mini {
background: var(--color-surface-raised);
border-radius: 2px;
height: 4px;
margin-top: 6px;
overflow: hidden;
}
.flowvaro-bl-usage-tiles .bar-mini .fill {
background: var(--color-flowvaro-deep, #1e3a8a);
height: 100%;
}
.flowvaro-bl-card-on-file {
color: #fff;
font-family: var(--font-mono, ui-monospace, monospace);
background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
border-radius: 10px;
padding: 18px;
}
.flowvaro-bl-card-on-file .brand {
letter-spacing: .1em;
text-transform: uppercase;
opacity: .85;
margin-bottom: 14px;
font-size: 11px;
}
.flowvaro-bl-card-on-file .number {
letter-spacing: .1em;
margin-bottom: 14px;
font-size: 16px;
}
.flowvaro-bl-card-on-file .expiry {
opacity: .85;
font-size: 11px;
}
.flowvaro-bl-addons {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
padding: 16px;
display: grid;
}
.flowvaro-bl-addons > div {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 12px 14px;
}
.flowvaro-bl-addons .nm {
color: var(--color-ink);
font-size: 13px;
font-weight: 700;
}
.flowvaro-bl-addons .price {
color: var(--color-ink-faint);
font-size: 11.5px;
font-family: var(--font-mono, ui-monospace, monospace);
margin-top: 2px;
}
.flowvaro-bl-addons a {
color: var(--color-flowvaro-link, #1e40af);
margin-top: 8px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
display: inline-block;
}
.flowvaro-bl-addons a:hover {
text-decoration: underline;
}
.flowvaro-bl-invoices {
padding: 0;
}
.flowvaro-bl-invoices table {
border-collapse: collapse;
width: 100%;
font-size: 12.5px;
}
.flowvaro-bl-invoices th {
text-align: left;
background: var(--color-surface-raised);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--color-ink-faint);
border-bottom: 1px solid var(--color-border-subtle);
padding: 10px 16px;
font-size: 10.5px;
font-weight: 700;
}
.flowvaro-bl-invoices td {
border-bottom: 1px solid var(--color-border-subtle);
color: var(--color-ink);
padding: 10px 16px;
}
.flowvaro-bl-invoices tbody tr:last-child td {
border-bottom: 0;
}
.flowvaro-bl-invoices tbody tr:hover {
background: var(--color-surface-raised);
}
.flowvaro-bl-invoices .num, .flowvaro-bl-invoices .amt, .flowvaro-bl-invoices .date {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 12px;
}
.flowvaro-bl-invoices .amt {
font-weight: 700;
}
.flowvaro-bl-invoices .date {
color: var(--color-ink-faint);
}
.flowvaro-bl-status {
letter-spacing: .04em;
text-transform: uppercase;
border-radius: 4px;
align-items: center;
height: 20px;
padding: 0 8px;
font-size: 10.5px;
font-weight: 700;
display: inline-flex;
}
.flowvaro-bl-status.is-ok {
background: var(--color-success-soft, #ecfdf5);
color: var(--color-success, #047857);
border: 1px solid var(--color-success-border, #a7f3d0);
}
.flowvaro-bl-status.is-warn {
color: #92400e;
background: #fef3c7;
border: 1px solid #fde68a;
}
.flowvaro-bl-status.is-err {
color: #b91c1c;
background: #fee2e2;
border: 1px solid #fecaca;
}
.flowvaro-bl-pdf {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
color: var(--color-ink-muted);
border-radius: 4px;
align-items: center;
gap: 4px;
padding: 3px 8px;
font-size: 11px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
}
.flowvaro-bl-pdf:hover {
background: var(--color-flowvaro-faint, #eef2ff);
color: var(--color-flowvaro-deep, #1e3a8a);
border-color: var(--color-flowvaro-soft, #c7d2fe);
}
.flowvaro-bl-empty {
text-align: center;
color: var(--color-ink-faint);
padding: 32px;
font-size: 13px;
}
.flowvaro-in-addr {
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
font-family: var(--font-mono, ui-monospace, monospace);
color: var(--color-flowvaro-deep, #1e3a8a);
border-radius: 8px;
align-items: center;
gap: 8px;
padding: 8px 12px;
font-size: 13px;
font-weight: 600;
display: inline-flex;
}
.flowvaro-in-addr code {
background: none;
padding: 0;
font-family: inherit;
}
.flowvaro-in-copy {
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-ink-muted);
cursor: pointer;
border-radius: 5px;
align-items: center;
gap: 4px;
padding: 3px 8px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
display: inline-flex;
}
.flowvaro-in-copy:hover {
background: var(--color-flowvaro-faint, #eef2ff);
color: var(--color-flowvaro-deep, #1e3a8a);
}
.flowvaro-in-rules {
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
.flowvaro-in-rules li {
background: var(--color-surface-raised);
border: 1px solid var(--color-border-subtle);
border-radius: 8px;
grid-template-columns: minmax(120px, 1fr) auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
display: grid;
}
.flowvaro-in-rules .nm {
color: var(--color-ink);
grid-column: 1 / 2;
font-size: 13px;
font-weight: 700;
}
.flowvaro-in-rules .meta {
color: var(--color-ink-muted);
flex-wrap: wrap;
grid-column: 1 / 2;
align-items: center;
gap: 6px;
font-size: 11.5px;
display: flex;
}
.flowvaro-in-rules .meta code {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: 3px;
padding: 1px 6px;
font-size: 11px;
}
.flowvaro-in-rules .trigger {
color: var(--color-flowvaro-deep, #1e3a8a);
font-weight: 600;
}
.flowvaro-in-rules li > .flowvaro-bl-status {
grid-area: 1 / 2 / 3 / 3;
align-self: center;
}
.flowvaro-in-nav-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
align-items: center;
gap: 12px;
padding: 14px 16px;
text-decoration: none;
transition: border-color .12s, transform .12s;
display: flex;
}
.flowvaro-in-nav-card:hover {
border-color: var(--color-flowvaro-deep, #1e3a8a);
transform: translateY(-1px);
}
.flowvaro-in-nav-card .nm {
color: var(--color-ink);
font-size: 13.5px;
font-weight: 700;
}
.flowvaro-in-nav-card .sub {
color: var(--color-ink-faint);
margin-top: 2px;
font-size: 11.5px;
}
.flowvaro-dl-checks {
margin: 0;
padding: 0;
list-style: none;
}
.flowvaro-dl-checks li {
border-bottom: 1px solid var(--color-border-subtle);
color: var(--color-ink);
justify-content: space-between;
align-items: center;
padding: 10px 0;
font-size: 12.5px;
display: flex;
}
.flowvaro-dl-checks li:last-child {
border-bottom: 0;
}
.flowvaro-dl-checks .lbl {
font-weight: 500;
}
.flowvaro-theme-toggle {
width: 34px;
height: 34px;
color: var(--color-ink-muted);
cursor: pointer;
background: none;
border: 1px solid #0000;
border-radius: 8px;
justify-content: center;
align-items: center;
transition: background .15s, color .15s;
display: inline-flex;
}
.flowvaro-theme-toggle:hover {
background: var(--color-surface-sunken);
color: var(--color-ink);
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-y {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-translate-z {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-rotate-x {
syntax: "*";
inherits: false
}
@property --tw-rotate-y {
syntax: "*";
inherits: false
}
@property --tw-rotate-z {
syntax: "*";
inherits: false
}
@property --tw-skew-x {
syntax: "*";
inherits: false
}
@property --tw-skew-y {
syntax: "*";
inherits: false
}
@property --tw-space-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-divide-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-gradient-position {
syntax: "*";
inherits: false
}
@property --tw-gradient-from {
syntax: "";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-via {
syntax: "";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-to {
syntax: "";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-stops {
syntax: "*";
inherits: false
}
@property --tw-gradient-via-stops {
syntax: "*";
inherits: false
}
@property --tw-gradient-from-position {
syntax: "";
inherits: false;
initial-value: 0%;
}
@property --tw-gradient-via-position {
syntax: "";
inherits: false;
initial-value: 50%;
}
@property --tw-gradient-to-position {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --tw-leading {
syntax: "*";
inherits: false
}
@property --tw-font-weight {
syntax: "*";
inherits: false
}
@property --tw-tracking {
syntax: "*";
inherits: false
}
@property --tw-ordinal {
syntax: "*";
inherits: false
}
@property --tw-slashed-zero {
syntax: "*";
inherits: false
}
@property --tw-numeric-figure {
syntax: "*";
inherits: false
}
@property --tw-numeric-spacing {
syntax: "*";
inherits: false
}
@property --tw-numeric-fraction {
syntax: "*";
inherits: false
}
@property --tw-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
syntax: "*";
inherits: false
}
@property --tw-shadow-alpha {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --tw-inset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
syntax: "*";
inherits: false
}
@property --tw-inset-shadow-alpha {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --tw-ring-color {
syntax: "*";
inherits: false
}
@property --tw-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
syntax: "*";
inherits: false
}
@property --tw-inset-ring-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
syntax: "*";
inherits: false
}
@property --tw-ring-offset-width {
syntax: "";
inherits: false;
initial-value: 0;
}
@property --tw-ring-offset-color {
syntax: "*";
inherits: false;
initial-value: #fff;
}
@property --tw-ring-offset-shadow {
syntax: "*";
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-blur {
syntax: "*";
inherits: false
}
@property --tw-brightness {
syntax: "*";
inherits: false
}
@property --tw-contrast {
syntax: "*";
inherits: false
}
@property --tw-grayscale {
syntax: "*";
inherits: false
}
@property --tw-hue-rotate {
syntax: "*";
inherits: false
}
@property --tw-invert {
syntax: "*";
inherits: false
}
@property --tw-opacity {
syntax: "*";
inherits: false
}
@property --tw-saturate {
syntax: "*";
inherits: false
}
@property --tw-sepia {
syntax: "*";
inherits: false
}
@property --tw-drop-shadow {
syntax: "*";
inherits: false
}
@property --tw-drop-shadow-color {
syntax: "*";
inherits: false
}
@property --tw-drop-shadow-alpha {
syntax: "";
inherits: false;
initial-value: 100%;
}
@property --tw-drop-shadow-size {
syntax: "*";
inherits: false
}
@property --tw-backdrop-blur {
syntax: "*";
inherits: false
}
@property --tw-backdrop-brightness {
syntax: "*";
inherits: false
}
@property --tw-backdrop-contrast {
syntax: "*";
inherits: false
}
@property --tw-backdrop-grayscale {
syntax: "*";
inherits: false
}
@property --tw-backdrop-hue-rotate {
syntax: "*";
inherits: false
}
@property --tw-backdrop-invert {
syntax: "*";
inherits: false
}
@property --tw-backdrop-opacity {
syntax: "*";
inherits: false
}
@property --tw-backdrop-saturate {
syntax: "*";
inherits: false
}
@property --tw-backdrop-sepia {
syntax: "*";
inherits: false
}
@property --tw-duration {
syntax: "*";
inherits: false
}
@property --tw-ease {
syntax: "*";
inherits: false
}
@property --tw-divide-x-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
50% {
opacity: .5;
}
}
/*# sourceMappingURL=%5Broot-of-the-server%5D__0qdlowa._.css.map*/