@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap");

:root {
  color-scheme: light dark;
  --palette-neutral-0: #ffffff;
  --palette-neutral-25: #f9f9fa;
  --palette-neutral-50: #f4f4f5;
  --palette-neutral-75: #edeeef;
  --palette-neutral-100: #e4e5e6;
  --palette-neutral-150: #d2d3d6;
  --palette-neutral-200: #c9cbcf;
  --palette-neutral-250: #bfc1c5;
  --palette-neutral-300: #b4b6bb;
  --palette-neutral-350: #a9acb1;
  --palette-neutral-400: #9ea2a8;
  --palette-neutral-450: #848890;
  --palette-neutral-500: #6d7178;
  --palette-neutral-550: #5c5f66;
  --palette-neutral-600: #4f5257;
  --palette-neutral-650: #44464b;
  --palette-neutral-700: #3d3f43;
  --palette-neutral-750: #333538;
  --palette-neutral-775: #292b2e;
  --palette-neutral-800: #242528;
  --palette-neutral-850: #1f2123;
  --palette-neutral-875: #1b1c1d;
  --palette-neutral-900: #161718;
  --palette-neutral-950: #0a0a0b;
  --palette-yellow-25: #f9f6ea;
  --palette-yellow-50: #f9f0db;
  --palette-yellow-75: #f7e8c4;
  --palette-yellow-100: #f7dfb1;
  --palette-yellow-200: #f5b315;
  --palette-yellow-300: #e39c04;
  --palette-yellow-350: #d58e00;
  --palette-yellow-400: #ca8200;
  --palette-yellow-500: #a96600;
  --palette-yellow-600: #8c4e02;
  --palette-yellow-700: #864906;
  --palette-red-25: #fcf2ef;
  --palette-red-50: #fff0ec;
  --palette-red-75: #ffe3dc;
  --palette-red-100: #fedad1;
  --palette-red-200: #ffb39f;
  --palette-red-300: #ff886e;
  --palette-red-350: #fc7156;
  --palette-red-400: #fa4d37;
  --palette-red-500: #e3231d;
  --palette-red-600: #bb0401;
  --palette-red-700: #af0600;
  --palette-green-25: #e8f9ef;
  --palette-green-50: #e4f5e5;
  --palette-green-75: #daefdc;
  --palette-green-100: #cfe9d1;
  --palette-green-200: #80da8d;
  --palette-green-300: #46c263;
  --palette-green-350: #22b551;
  --palette-green-400: #00ab46;
  --palette-green-500: #008a27;
  --palette-green-600: #086e08;
  --palette-green-700: #176b08;
  --palette-blue-25: #f0f8ff;
  --palette-blue-50: #ecf1ff;
  --palette-blue-75: #e1eaff;
  --palette-blue-100: #d8e2ff;
  --palette-blue-200: #b2c6ff;
  --palette-blue-300: #88abfe;
  --palette-blue-350: #709efd;
  --palette-blue-400: #5290f9;
  --palette-blue-500: #1672eb;
  --palette-blue-600: #1a57da;
  --palette-blue-700: #224ed5;
  --palette-neutral-900-80: hsl(233, 15%, 12%, 80%);
  --palette-light-Bamboo-dark: hsla(160, 58%, 23%, 1);
  --palette-light-Bamboo-base: hsla(162, 79%, 33%, 1);
  --palette-light-Bamboo-light: hsla(157, 51%, 60%, 1);
  --palette-light-Bamboo-text: #007455;
  --palette-light-Lavender-dark: hsla(265, 97%, 24%, 1);
  --palette-light-Lavender-base: hsla(266, 83%, 47%, 1);
  --palette-light-Lavender-light: hsla(268, 70%, 76%, 1);
  --palette-light-Lavender-text: #6e00f4;
  --palette-light-Coral-dark: hsla(18, 83%, 40%, 1);
  --palette-light-Coral-base: hsla(23, 95%, 60%, 1);
  --palette-light-Coral-light: hsla(26, 100%, 81%, 1);
  --palette-light-Coral-text: #c74000;
  --palette-light-Slate-dark: hsla(228, 24%, 42%, 1);
  --palette-light-Slate-base: hsla(229, 35%, 64%, 1);
  --palette-light-Slate-light: hsla(232, 35%, 82%, 1);
  --palette-light-Slate-text: #566087;
  --palette-light-Indigo-dark: hsla(221, 47%, 40%, 1);
  --palette-light-Indigo-base: hsla(222, 69%, 62%, 1);
  --palette-light-Indigo-light: hsla(226, 100%, 82%, 1);
  --palette-light-Indigo-text: #2563c1;
  --palette-light-Teal-dark: hsla(178, 49%, 31%, 1);
  --palette-light-Teal-base: hsla(178, 60%, 47%, 1);
  --palette-light-Teal-light: hsla(176, 74%, 80%, 1);
  --palette-light-Teal-text: #018181;
  --palette-light-Paprika-dark: hsla(341, 100%, 15%, 1);
  --palette-light-Paprika-base: hsla(339, 97%, 31%, 1);
  --palette-light-Paprika-light: hsla(347, 75%, 58%, 1);
  --palette-light-Paprika-text: #ba0044;
  --palette-light-Buttercup-dark: hsla(32, 77%, 43%, 1);
  --palette-light-Buttercup-base: hsla(43, 88%, 52%, 1);
  --palette-light-Buttercup-light: hsla(41, 100%, 79%, 1);
  --palette-light-Buttercup-text: #a65d00;
  --palette-light-Rose-dark: hsla(323, 70%, 28%, 1);
  --palette-light-Rose-base: hsla(331, 56%, 50%, 1);
  --palette-light-Rose-light: hsla(333, 84%, 74%, 1);
  --palette-light-Rose-text: #b6006b;
  --color-neutral-text: #1f2123;
  --color-neutral-text-muted: #3d3f43;
  --color-neutral-text-subtle: #6d7178;
  --color-neutral-text-disabled: #c9cbcf;
  --color-neutral-text-on-primary: #ffffff;
  --color-neutral-icon-on-primary: #ffffff;
  --color-neutral-background: #ffffff;
  --color-neutral-background-muted: #f9f9fa;
  --color-neutral-background-subtle: #f4f4f5;
  --color-neutral-background-white: #ffffff;
  --color-neutral-card-background: #ffffff;
  --color-neutral-card-background-hover: #ffffff;
  --color-neutral-border: #d2d3d6;
  --color-neutral-separator-subtle: #e4e5e6;
  --color-neutral-hover: #edeeef;
  --color-neutral-disabled: #f4f4f5;
  --color-neutral-overflow: #e4e5e6;
  --color-neutral-icon: #4f5257;
  --color-neutral-icon-subtle: #9ea2a8;
  --color-neutral-icon-disabled: #bfc1c5;
  --color-neutral-field-border: #c9cbcf;
  --color-neutral-action-secondary: #d2d3d6;
  --color-neutral-action-secondary-hover: #e4e5e6;
  --color-neutral-action-secondary-active: #d2d3d6;
  --color-neutral-chip-background: #e4e5e6;
  --color-neutral-chip-background-hover: #d2d3d6;
  --color-neutral-chip-background-active: #c9cbcf;
  --color-neutral-chip-background-disabled: #d2d3d6;
  --color-neutral-large-tooltip-background: #ffffff;
  --color-neutral-large-tooltip-border: #e4e5e6;
  --color-neutral-small-tooltip-text: #ffffff;
  --color-neutral-small-tooltip-background: #161718;
  --color-neutral-small-tooltip-border: #1f2123;
  --color-neutral-overlay: #191b22;
  --color-neutral-field-background: #f9f9fa;
  --color-neutral-text-placeholder: #a9acb1;
  --color-primary-text: #1672eb;
  --color-primary-text-interactive: #1672eb;
  --color-primary-icon: #1672eb;
  --color-primary-action: #1672eb;
  --color-primary-action-hover: #5290f9;
  --color-primary-action-active: #1a57da;
  --color-primary-field-border-active: #1672eb;
  --color-primary-border-subtle: #b2c6ff;
  --color-primary-background: #ecf1ff;
  --color-primary-background-subtle: #f0f8ff;
  --color-primary-background-hover: #d8e2ff;
  --color-primary-chip-background: #ecf1ff;
  --color-primary-chip-background-subtle: #f0f8ff;
  --color-primary-chip-background-hover: #d8e2ff;
  --color-primary-chip-text: #1a57da;
  --color-primary-shadow-active: #b2c6ff;
  --color-primary-black-action: #242528;
  --color-primary-black-action-hover: #292b2e;
  --color-primary-black-action-active: #0a0a0b;
  --color-primary-black-background: #1b1c1d;
  --color-primary-black-background-hover: #3d3f43;
  --color-primary-black-chip-text: #f9f9fa;
  --color-success-text: #008a27;
  --color-success-icon: #008a27;
  --color-success-background: #e4f5e5;
  --color-success-background-hover: #cfe9d1;
  --color-success-background-subtle: #e8f9ef;
  --color-success-background-subtle-hover: #cfe9d1;
  --color-success-background-subtle-active: #80da8d;
  --color-success-chip-background: #e4f5e5;
  --color-success-chip-background-hover: #cfe9d1;
  --color-success-chip-text: #086e08;
  --color-success-border: #00ab46;
  --color-success-border-subtle: #80da8d;
  --color-success-action: #008a27;
  --color-success-action-hover: #00ab46;
  --color-success-action-active: #086e08;
  --color-warning-text: #a96600;
  --color-warning-icon: #f5b315;
  --color-warning-background: #f9f0db;
  --color-warning-background-hover: #f7dfb1;
  --color-warning-background-subtle: #f9f6ea;
  --color-warning-chip-background: #f9f0db;
  --color-warning-chip-background-hover: #f7dfb1;
  --color-warning-chip-text: #8c4e02;
  --color-warning-border: #ca8200;
  --color-warning-border-subtle: #f5b315;
  --color-warning-field-border: #f5b315;
  --color-danger-text: #e3231d;
  --color-danger-icon: #e3231d;
  --color-danger-background: #fff0ec;
  --color-danger-background-hover: #fedad1;
  --color-danger-background-subtle: #fcf2ef;
  --color-danger-background-subtle-hover: #fedad1;
  --color-danger-background-subtle-active: #ffb39f;
  --color-danger-chip-background: #fff0ec;
  --color-danger-chip-background-hover: #fedad1;
  --color-danger-chip-text: #bb0401;
  --color-danger-border: #fa4d37;
  --color-danger-border-subtle: #ffb39f;
  --color-danger-field-border: #fa4d37;
  --color-danger-action: #e3231d;
  --color-danger-action-hover: #fa4d37;
  --color-danger-action-active: #bb0401;
  --color-special-free-plan-background: #ffc89f;
  --color-special-starter-plan-background: #ffdd96;
  --color-special-scale-plan-background: #a1b7ff;
  --color-special-business-plan-background: #a7f2ed;
  --color-special-enterprise-plan-background: #bf97ed;
  --color-rose-light: #f483b5;
  --color-rose-base: #c6387d;
  --color-rose-dark: #781552;
  --color-rose-text: #b6006b;
  --color-buttercup-light: #ffdd96;
  --color-buttercup-base: #f0b21b;
  --color-buttercup-dark: #c37319;
  --color-buttercup-text: #a65d00;
  --color-paprika-light: #e44467;
  --color-paprika-base: #9b0238;
  --color-paprika-dark: #4a0018;
  --color-paprika-text: #ba0044;
  --color-teal-light: #a7f2ed;
  --color-teal-base: #30c0bb;
  --color-teal-dark: #297774;
  --color-teal-text: #018181;
  --color-indigo-light: #a1b7ff;
  --color-indigo-base: #5d85e1;
  --color-indigo-dark: #365494;
  --color-indigo-text: #2563c1;
  --color-slate-light: #c1c5e1;
  --color-slate-base: #8490c4;
  --color-slate-dark: #525c85;
  --color-slate-text: #566087;
  --color-coral-light: #ffc89f;
  --color-coral-base: #fa8136;
  --color-coral-dark: #bb4511;
  --color-coral-text: #c74000;
  --color-lavender-light: #bf97ed;
  --color-lavender-base: #6a14de;
  --color-lavender-dark: #330276;
  --color-lavender-text: #6e00f4;
  --color-bamboo-light: #64cda5;
  --color-bamboo-base: #12966f;
  --color-bamboo-dark: #195d46;
  --color-bamboo-text: #007455;
  --shadow-active: 0px 0px 0px 2px hsl(224, 100%, 85%);
  --shadow-1: 1px 2px 2.5px -2.5px rgba(63, 71, 93, .13), .4px .8px 1px -1.2px rgba(63, 71, 93, .14), 0px .5px 1.5px 0px rgba(63, 71, 93, .15);
  --shadow-2: 4px 8px 10.1px -2.5px rgba(63, 71, 93, .12), 1.7px 3.3px 4.2px -1.7px rgba(63, 71, 93, .13), .7px 1.4px 1.8px -.8px rgba(63, 71, 93, .14), .3px .5px .7px 0px rgba(63, 71, 93, .15);
  --shadow-3: 4.5px 9px 12.1px -2px rgba(63, 71, 93, .12), 1.9px 3.9px 5.2px -1.3px rgba(63, 71, 93, .13), .8px 1.7px 2.3px -.7px rgba(63, 71, 93, .14), .3px .5px .7px 0px rgba(63, 71, 93, .15);
  --shadow-4: 4.7px 9.4px 14.2px -1px rgba(63, 71, 93, .12), 2.2px 4.3px 6.5px -.7px rgba(63, 71, 93, .13), 1px 2px 3px -.3px rgba(63, 71, 93, .14), .3px .5px .8px 0px rgba(63, 71, 93, .15);
  --shadow-5: 18.8px 37.5px 39.3px -3.7px rgba(63, 71, 93, .06), 12.3px 15.4px 25.8px -3.2px rgba(63, 71, 93, .07), 7.7px 15.4px 16.1px -2.7px rgba(63, 71, 93, .08), 4.6px 9.1px 9.6px -2.1px rgba(63, 71, 93, .09), 2.6px 5.1px 5.4px -1.6px rgba(63, 71, 93, .1), 1.4px 2.8px 2.9px -1.1px rgba(63, 71, 93, .11), .7px 1.5px 1.6px -.5px rgba(63, 71, 93, .12), .3px .5px .5px 0px rgba(63, 71, 93, .15);
  --flows-bg-default: #ffffff;
  --flows-bg-subtle: #fafafa;
  --flows-bg-hover: #f0f0f0;
  --flows-bg-primary: #067efd;
  --flows-bg-primary-hover: #0d67ec;
  --flows-bg-overlay: rgba(0, 0, 0, .4);
  --flows-fg-default: #1a1a1a;
  --flows-fg-onPrimary: #ffffff;
  --flows-borderWidth: 1px;
  --flows-border: var(--flows-borderWidth) solid #d6d6d6;
  --flows-border-strong: var(--flows-borderWidth) solid #ccc;
  --flows-border-strong-hover: var(--flows-borderWidth) solid #bababa;
  --flows-border-primary: var(--flows-borderWidth) solid #0d67ec;
  --flows-shadow: 0px 6px 18px rgba(0, 0, 0, .15), 0px 3px 8px rgba(0, 0, 0, .03), 0px 0px 1px rgba(0, 0, 0, .05);
  --flows-shadow-large: 0px 10px 48px rgba(0, 0, 0, .1), 0px 4px 24px rgba(0, 0, 0, .12), 0px 0px 1px rgba(0, 0, 0, .05);
  --flows-borderRadius-xSmall: 3px;
  --flows-borderRadius-small: 6px;
  --flows-borderRadius-medium: 8px;
  --flows-borderRadius-large: 12px;
  --flows-size-xSmall: 4px;
  --flows-size-small: 8px;
  --flows-size-medium: 12px;
  --flows-size-large: 20px;
  --flows-font-family: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --flows-base-font-size: 14px;
  --flows-base-line-height: 20px;
  --flows-title-font-size: 16px;
  --flows-title-line-height: 24px;
  --flows-title-font-weight: 600;
  --flows-zIndex: 1500;
  --flows-tooltip-padding: var(--flows-size-large);
  --flows-tooltip-overlayBackground: var(--flows-bg-overlay);
  --flows-tooltip-overlayBorderRadius: var(--flows-borderRadius-medium);
  --flows-tooltip-overlayPadding: 4px;
  --flows-tooltip-minWidth: 200px;
  --flows-tooltip-maxWidth: 320px;
  --flows-modal-overlayBackground: var(--flows-bg-overlay);
  --flows-modal-padding: var(--flows-size-large);
  --flows-modal-minWidth: 320px;
  --flows-modal-maxWidth: 640px;
  --flows-banner-screenEdgePadding: var(--flows-size-large);
  --flows-banner-padding: var(--flows-size-large);
  --flows-banner-minWidth: 200px;
  --flows-banner-maxWidth: 320px;
  --bg: var(--color-neutral-background);
  --surface-1: var(--color-neutral-card-background);
  --surface-2: var(--color-neutral-background-muted);
  --surface-3: var(--color-neutral-background-subtle);
  --border: var(--color-neutral-border);
  --border-strong: var(--color-neutral-field-border);
  --text-primary: var(--color-neutral-text);
  --text-secondary: var(--color-neutral-text-muted);
  --text-muted: var(--color-neutral-text-subtle);
  --accent: var(--color-primary-action);
  --accent-hover: var(--color-primary-action-hover);
  --accent-active: var(--color-primary-action-active);
  --accent-soft: var(--color-primary-background);
  --accent-border: var(--color-primary-border-subtle);
  --success: var(--color-success-action);
  --warning: var(--color-warning-icon);
  --danger: var(--color-danger-action);
  --teal: var(--color-teal-base);
  --indigo: var(--color-indigo-base);
  --radius-sm: var(--flows-borderRadius-small);
  --radius-md: var(--flows-borderRadius-medium);
  --radius-lg: var(--flows-borderRadius-large);
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2rem;
  --space-6: 2.4rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6.4rem;
  --shadow-card: var(--shadow-1);
  --shadow-soft: var(--shadow-2);
  --focus-ring: var(--shadow-active);
  --font-body: "Inter", sans-serif;
  --font-display: "Inter", sans-serif;
  --stats-accent-1: #9f72f0;
  --stats-accent-2: #4b26d9;
  --stats-accent-3: #7f5af4;
  --stats-track: rgba(75, 38, 217, 0.18);
  --stats-grid: rgba(75, 38, 217, 0.14);
  --stats-card-bg: #fafbfd;
  --stats-card-border: #e6e6f0;
  --stats-control-bg: #f5f5f7;
  --stats-control-border: #e6e6e6;
  --stats-control-text: #1c1c1c;
  --stats-control-active-bg: #141414;
  --stats-control-active-text: #ffffff;
  --stats-ring-1: #7f5af4;
  --stats-ring-2: #4b26d9;
  --stats-ring-3: #9f72f0;
  --stats-ring-4: #5b7df5;
  --stats-ring-5: #30c2e0;
  --stats-ring-6: #f5b315;
  --stats-chart-bg: var(--surface-1);
  --stats-chart-border: var(--border);
  --stats-chart-grid: color-mix(in srgb, var(--text-muted) 35%, transparent);
  --stats-chart-axis-line: color-mix(in srgb, var(--text-muted) 55%, transparent);
  --stats-chart-line: var(--accent);
  --stats-chart-fill-start: color-mix(in srgb, var(--accent) 10%, transparent);
  --stats-chart-fill-end: color-mix(in srgb, var(--accent) 0%, transparent);
  --stats-chart-axis: var(--text-muted);
  --stats-chart-tooltip-divider: #ebebec;
}

/* GitBook base color scales */
/* Orange */
:root,
.light,
.light-theme {
  --orange-1: #fefcfb;
  --orange-2: #fff5f1;
  --orange-3: #ffe9df;
  --orange-4: #ffd7c7;
  --orange-5: #ffc9b5;
  --orange-6: #ffb8a0;
  --orange-7: #ffa286;
  --orange-8: #f98968;
  --orange-9: #fe551b;
  --orange-10: #f04700;
  --orange-11: #dc3b00;
  --orange-12: #5b2a1c;
  --orange-a1: #c0400004;
  --orange-a2: #ff49000e;
  --orange-a3: #ff500020;
  --orange-a4: #ff490038;
  --orange-a5: #ff45014a;
  --orange-a6: #ff41005f;
  --orange-a7: #ff3c0079;
  --orange-a8: #f5380097;
  --orange-a9: #fe4100e4;
  --orange-a10: #f04700;
  --orange-a11: #dc3b00;
  --orange-a12: #471000e3;
  --orange-contrast: #fff;
  --orange-surface: #fff3eecc;
  --orange-indicator: #fe551b;
  --orange-track: #fe551b;
}

.theme-color-dark,
.dark,
.dark-theme {
  --orange-1: #160f0d;
  --orange-2: #1f1511;
  --orange-3: #38180f;
  --orange-4: #4f1604;
  --orange-5: #5f1d09;
  --orange-6: #6f2b16;
  --orange-7: #883b24;
  --orange-8: #af4c2f;
  --orange-9: #fe551b;
  --orange-10: #f04700;
  --orange-11: #ff9674;
  --orange-12: #ffd6c9;
  --orange-a1: #e6000006;
  --orange-a2: #ff55110f;
  --orange-a3: #fe3c052a;
  --orange-a4: #fd240043;
  --orange-a5: #fe360054;
  --orange-a6: #ff531e65;
  --orange-a7: #ff653780;
  --orange-a8: #fe693eaa;
  --orange-a9: #ff551bfe;
  --orange-a10: #ff4b00ef;
  --orange-a11: #ff9674;
  --orange-a12: #ffd6c9;
  --orange-contrast: #fff;
  --orange-surface: #2d191180;
  --orange-indicator: #fe551b;
  --orange-track: #fe551b;
}

/* Yellow */
:root,
.light,
.light-theme {
  --yellow-1: #fefdfb;
  --yellow-2: #fff8ed;
  --yellow-3: #ffeecf;
  --yellow-4: #ffe1b1;
  --yellow-5: #ffd596;
  --yellow-6: #ffc886;
  --yellow-7: #f1b775;
  --yellow-8: #e29f4e;
  --yellow-9: #ffa72c;
  --yellow-10: #f29d23;
  --yellow-11: #b06600;
  --yellow-12: #4d361a;
  --yellow-a1: #c0800004;
  --yellow-a2: #ff9c0012;
  --yellow-a3: #ffa50030;
  --yellow-a4: #ff9d004e;
  --yellow-a5: #ff990069;
  --yellow-a6: #ff8c0079;
  --yellow-a7: #e67a008a;
  --yellow-a8: #d57500b1;
  --yellow-a9: #ff9500d3;
  --yellow-a10: #f08d00dc;
  --yellow-a11: #b06600;
  --yellow-a12: #391f00e5;
  --yellow-contrast: #2e1e0b;
  --yellow-surface: #fff6e9cc;
  --yellow-indicator: #ffa72c;
  --yellow-track: #ffa72c;
}

.theme-color-dark,
.dark,
.dark-theme {
  --yellow-1: #1c1813;
  --yellow-2: #221b14;
  --yellow-3: #332311;
  --yellow-4: #442700;
  --yellow-5: #503001;
  --yellow-6: #5e3d12;
  --yellow-7: #734e21;
  --yellow-8: #92632a;
  --yellow-9: #ffa72c;
  --yellow-10: #f39c18;
  --yellow-11: #ffb354;
  --yellow-12: #fee2c3;
  --yellow-a1: #c4180003;
  --yellow-a2: #fd6e0009;
  --yellow-a3: #fe7d001c;
  --yellow-a4: #fe69002f;
  --yellow-a5: #fc7d003d;
  --yellow-a6: #ff95094c;
  --yellow-a7: #fda13364;
  --yellow-a8: #ffa73d86;
  --yellow-a9: #ffa72c;
  --yellow-a10: #ffa318f2;
  --yellow-a11: #ffb354;
  --yellow-a12: #ffe3c4fe;
  --yellow-contrast: #2e1e0b;
  --yellow-surface: #2a1e1380;
  --yellow-indicator: #ffa72c;
  --yellow-track: #ffa72c;
}

/* Gray */
:root,
.light,
.light-theme {
  --gray-1: #fdfcfc;
  --gray-2: #faf9f8;
  --gray-3: #f1efef;
  --gray-4: #eae8e6;
  --gray-5: #e3e0df;
  --gray-6: #dbd8d6;
  --gray-7: #d1cdcb;
  --gray-8: #bebab7;
  --gray-9: #908c89;
  --gray-10: #85817f;
  --gray-11: #666260;
  --gray-12: #231f1d;
  --gray-a1: #55000003;
  --gray-a2: #49250007;
  --gray-a3: #20000010;
  --gray-a4: #29150019;
  --gray-a5: #20080020;
  --gray-a6: #200d0029;
  --gray-a7: #1e0a0034;
  --gray-a8: #190b0048;
  --gray-a9: #10070076;
  --gray-a10: #0c040080;
  --gray-a11: #0a04009f;
  --gray-a12: #070200e2;
  --gray-contrast: #ffffff;
  --gray-surface: #ffffffcc;
  --gray-indicator: #908c89;
  --gray-track: #908c89;
}

.theme-color-dark,
.dark,
.dark-theme {
  --gray-1: #1a1816;
  --gray-2: #1f1d1b;
  --gray-3: #282624;
  --gray-4: #312e2c;
  --gray-5: #3a3734;
  --gray-6: #44403d;
  --gray-7: #4f4b48;
  --gray-8: #5d5955;
  --gray-9: #6d6965;
  --gray-10: #7a7672;
  --gray-11: #9a9692;
  --gray-12: #eae8e6;
  --gray-a1: #ffffff08;
  --gray-a2: #ffffff0f;
  --gray-a3: #ffffff1a;
  --gray-a4: #ffffff26;
  --gray-a5: #ffffff33;
  --gray-a6: #ffffff40;
  --gray-a7: #ffffff4d;
  --gray-a8: #ffffff5c;
  --gray-a9: #ffffff6e;
  --gray-a10: #ffffff7a;
  --gray-a11: #ffffff9a;
  --gray-a12: #ffffffe8;
  --gray-contrast: #ffffff;
  --gray-surface: #1f1d1bcc;
  --gray-indicator: #6d6965;
  --gray-track: #6d6965;
}

/* Red */
:root,
.light,
.light-theme {
  --red-1: #fffcfb;
  --red-2: #fff8f6;
  --red-3: #ffeae6;
  --red-4: #ffdad2;
  --red-5: #ffcac0;
  --red-6: #ffb9ad;
  --red-7: #fea496;
  --red-8: #f68778;
  --red-9: #e10202;
  --red-10: #d00000;
  --red-11: #de0000;
  --red-12: #641d16;
  --red-a1: #ff400004;
  --red-a2: #ff390009;
  --red-a3: #ff290019;
  --red-a4: #ff2e002d;
  --red-a5: #ff29003f;
  --red-a6: #ff260052;
  --red-a7: #fd220069;
  --red-a8: #ee1d0087;
  --red-a9: #e10000fd;
  --red-a10: #d00000;
  --red-a11: #de0000;
  --red-a12: #550800e9;
  --red-contrast: #fff;
  --red-surface: #fff6f4cc;
  --red-indicator: #e10202;
  --red-track: #e10202;
}

.theme-color-dark,
.dark,
.dark-theme {
  --red-1: #1f1614;
  --red-2: #251816;
  --red-3: #411510;
  --red-4: #580b07;
  --red-5: #67100a;
  --red-6: #781e16;
  --red-7: #912e25;
  --red-8: #bb3d31;
  --red-9: #e10202;
  --red-10: #d00000;
  --red-11: #ff907f;
  --red-12: #ffd0c8;
  --red-a1: #ef000006;
  --red-a2: #f219160d;
  --red-a3: #fc07002c;
  --red-a4: #fc000046;
  --red-a5: #ff010056;
  --red-a6: #ff271669;
  --red-a7: #ff433285;
  --red-a8: #fe4d3db4;
  --red-a9: #ff0000de;
  --red-a10: #ff0000cb;
  --red-a11: #ff907f;
  --red-a12: #ffd0c8;
  --red-contrast: #fff;
  --red-surface: #30181680;
  --red-indicator: #e10202;
  --red-track: #e10202;
}

/* Pink */
:root,
.light,
.light-theme {
  --pink-1: #fffcfe;
  --pink-2: #fef7fb;
  --pink-3: #fee9f4;
  --pink-4: #fbdcec;
  --pink-5: #f6cfe3;
  --pink-6: #efc0d9;
  --pink-7: #e6adcc;
  --pink-8: #dd95bd;
  --pink-9: #cf459d;
  --pink-10: #c03790;
  --pink-11: #bc338c;
  --pink-12: #631748;
  --pink-a1: #ff00aa03;
  --pink-a2: #e0008008;
  --pink-a3: #f4008016;
  --pink-a4: #e2007523;
  --pink-a5: #d0006b30;
  --pink-a6: #bf00663f;
  --pink-a7: #b2006152;
  --pink-a8: #ae01616a;
  --pink-a9: #bd0079ba;
  --pink-a10: #af0072c8;
  --pink-a11: #ab006fcc;
  --pink-a12: #540036e8;
  --pink-contrast: #fff;
  --pink-surface: #fef5facc;
  --pink-indicator: #cf459d;
  --pink-track: #cf459d;
}

.theme-color-dark,
.dark,
.dark-theme {
  --pink-1: #1e151a;
  --pink-2: #25151e;
  --pink-3: #3a1a2d;
  --pink-4: #4d1739;
  --pink-5: #591f43;
  --pink-6: #692b51;
  --pink-7: #823b66;
  --pink-8: #a64b82;
  --pink-9: #cf459d;
  --pink-10: #c03690;
  --pink-11: #ff86d4;
  --pink-12: #fcd2e8;
  --pink-a1: #e700e305;
  --pink-a2: #f200b30d;
  --pink-a3: #fd26b924;
  --pink-a4: #ff14b339;
  --pink-a5: #fd32b847;
  --pink-a6: #ff4fc158;
  --pink-a7: #ff65c674;
  --pink-a8: #ff6cc69c;
  --pink-a9: #ff51c0ca;
  --pink-a10: #ff41beb9;
  --pink-a11: #ff86d4;
  --pink-a12: #ffd5ebfc;
  --pink-contrast: #fff;
  --pink-surface: #30132680;
  --pink-indicator: #cf459d;
  --pink-track: #cf459d;
}

/* Blue */
:root,
.light,
.light-theme {
  --blue-1: #fbfdff;
  --blue-2: #f5f9ff;
  --blue-3: #eaf3ff;
  --blue-4: #dbecff;
  --blue-5: #cae2ff;
  --blue-6: #b7d5fd;
  --blue-7: #9dc4f6;
  --blue-8: #78acf0;
  --blue-9: #348df8;
  --blue-10: #2d81e5;
  --blue-11: #1471d8;
  --blue-12: #0e3460;
  --blue-a1: #0080ff04;
  --blue-a2: #0066ff0a;
  --blue-a3: #006eff15;
  --blue-a4: #0079ff24;
  --blue-a5: #0074ff35;
  --blue-a6: #006bf848;
  --blue-a7: #0066e862;
  --blue-a8: #0063e387;
  --blue-a9: #0070f6cb;
  --blue-a10: #0066e0d2;
  --blue-a11: #0065d5eb;
  --blue-a12: #002857f1;
  --blue-contrast: #fff;
  --blue-surface: #f3f8ffcc;
  --blue-indicator: #348df8;
  --blue-track: #348df8;
}

.theme-color-dark,
.dark,
.dark-theme {
  --blue-1: #111923;
  --blue-2: #131c28;
  --blue-3: #122947;
  --blue-4: #0b3261;
  --blue-5: #133e72;
  --blue-6: #1f4c83;
  --blue-7: #2b5c99;
  --blue-8: #346eb8;
  --blue-9: #348df8;
  --blue-10: #2580ea;
  --blue-11: #7db7ff;
  --blue-12: #cde3ff;
  --blue-a1: #002af30f;
  --blue-a2: #004bfc14;
  --blue-a3: #0069fe36;
  --blue-a4: #0068fd53;
  --blue-a5: #0978ff65;
  --blue-a6: #2586fd78;
  --blue-a7: #3991fe90;
  --blue-a8: #3f94feb2;
  --blue-a9: #3490fef8;
  --blue-a10: #268afee9;
  --blue-a11: #7db7ff;
  --blue-a12: #cde3ff;
  --blue-contrast: #fff;
  --blue-surface: #0d203a80;
  --blue-indicator: #348df8;
  --blue-track: #348df8;
}

/* Green */
:root,
.light,
.light-theme {
  --green-1: #fafefc;
  --green-2: #f3fbf7;
  --green-3: #e1f8ec;
  --green-4: #cef3e1;
  --green-5: #baebd3;
  --green-6: #a5dfc3;
  --green-7: #89cfaf;
  --green-8: #5fba93;
  --green-9: #1d7253;
  --green-10: #016345;
  --green-11: #247758;
  --green-12: #1f4333;
  --green-a1: #00cc6605;
  --green-a2: #00aa550c;
  --green-a3: #00c45e1e;
  --green-a4: #00c16331;
  --green-a5: #00b65d45;
  --green-a6: #01a5565a;
  --green-a7: #00985376;
  --green-a8: #009153a0;
  --green-a9: #00603de2;
  --green-a10: #006244fe;
  --green-a11: #00613ddb;
  --green-a12: #002917e0;
  --green-contrast: #fff;
  --green-surface: #f0faf5cc;
  --green-indicator: #1d7253;
  --green-track: #1d7253;
}

.theme-color-dark,
.dark,
.dark-theme {
  --green-1: #121b17;
  --green-2: #151f1a;
  --green-3: #113023;
  --green-4: #063e2b;
  --green-5: #064b34;
  --green-6: #0d593f;
  --green-7: #116a4c;
  --green-8: #0e7f5a;
  --green-9: #1d7253;
  --green-10: #016345;
  --green-11: #6ecea5;
  --green-12: #a4f4cf;
  --green-a1: #00d85604;
  --green-a2: #00f89608;
  --green-a3: #00fb911b;
  --green-a4: #00ff962a;
  --green-a5: #00fc9d39;
  --green-a6: #00ffa848;
  --green-a7: #01feae5b;
  --green-a8: #00ffaf72;
  --green-a9: #22fdb264;
  --green-a10: #00ffa753;
  --green-a11: #84ffcbc9;
  --green-a12: #abffd8f3;
  --green-contrast: #fff;
  --green-surface: #11261e80;
  --green-indicator: #1d7253;
  --green-track: #1d7253;
}

/* Violet */
:root,
.light,
.light-theme {
  --violet-1: #fdfaff;
  --violet-2: #faf4ff;
  --violet-3: #f4ebff;
  --violet-4: #ecdeff;
  --violet-5: #e3d0ff;
  --violet-6: #d7bfff;
  --violet-7: #c5a3ff;
  --violet-8: #b380ff;
  --violet-9: #893fff;
  --violet-10: #7230e6;
  --violet-11: #491d72;
  --violet-12: #2a1043;
  --violet-a1: #893fff08;
  --violet-a2: #893fff12;
  --violet-a3: #893fff20;
  --violet-a4: #893fff30;
  --violet-a5: #893fff42;
  --violet-a6: #893fff55;
  --violet-a7: #893fff70;
  --violet-a8: #893fff90;
  --violet-a9: #893fff;
  --violet-a10: #7230e6;
  --violet-a11: #491d72;
  --violet-a12: #2a1043f0;
  --violet-contrast: #fff;
  --violet-surface: #f4ebffcc;
  --violet-indicator: #893fff;
  --violet-track: #893fff;
}

.theme-color-dark,
.dark,
.dark-theme {
  --violet-1: #1a0f24;
  --violet-2: #221430;
  --violet-3: #2d1a3f;
  --violet-4: #38214e;
  --violet-5: #43285d;
  --violet-6: #4f306c;
  --violet-7: #5f3a7f;
  --violet-8: #724595;
  --violet-9: #893fff;
  --violet-10: #a366ff;
  --violet-11: #b380ff;
  --violet-12: #d7bfff;
  --violet-a1: #893fff08;
  --violet-a2: #893fff12;
  --violet-a3: #893fff20;
  --violet-a4: #893fff30;
  --violet-a5: #893fff42;
  --violet-a6: #893fff55;
  --violet-a7: #893fff70;
  --violet-a8: #893fff90;
  --violet-a9: #893fff;
  --violet-a10: #a366ff;
  --violet-a11: #b380ff;
  --violet-a12: #d7bffff0;
  --violet-contrast: #fff;
  --violet-surface: #221430cc;
  --violet-indicator: #893fff;
  --violet-track: #893fff;
}

/* GitBook neutral + status maps */
:root,
.light,
.light-theme {
  --accent-1: var(--orange-1);
  --accent-2: var(--orange-2);
  --accent-3: var(--orange-3);
  --accent-4: var(--orange-4);
  --accent-5: var(--orange-5);
  --accent-6: var(--orange-6);
  --accent-7: var(--orange-7);
  --accent-8: var(--orange-8);
  --accent-9: var(--orange-9);
  --accent-10: var(--orange-10);
  --accent-11: var(--orange-11);
  --accent-12: var(--orange-12);
  --neutral-1: var(--gray-1);
  --neutral-2: var(--gray-2);
  --neutral-3: var(--gray-3);
  --neutral-4: var(--gray-4);
  --neutral-5: var(--gray-5);
  --neutral-6: var(--gray-6);
  --neutral-7: var(--gray-7);
  --neutral-8: var(--gray-8);
  --neutral-9: var(--gray-9);
  --neutral-10: var(--gray-10);
  --neutral-11: var(--gray-11);
  --neutral-12: var(--gray-12);
  --neutral-a1: var(--gray-a1);
  --neutral-a2: var(--gray-a2);
  --neutral-a3: var(--gray-a3);
  --neutral-a4: var(--gray-a4);
  --neutral-a5: var(--gray-a5);
  --neutral-a6: var(--gray-a6);
  --neutral-a7: var(--gray-a7);
  --neutral-a8: var(--gray-a8);
  --neutral-a9: var(--gray-a9);
  --neutral-a10: var(--gray-a10);
  --neutral-a11: var(--gray-a11);
  --neutral-a12: var(--gray-a12);
  --success-1: var(--green-1);
  --success-2: var(--green-2);
  --success-3: var(--green-3);
  --success-4: var(--green-4);
  --success-5: var(--green-5);
  --success-6: var(--green-6);
  --success-7: var(--green-7);
  --success-8: var(--green-8);
  --success-9: var(--green-9);
  --success-10: var(--green-10);
  --success-11: var(--green-11);
  --success-12: var(--green-12);
  --merge-1: var(--violet-1);
  --merge-2: var(--violet-2);
  --merge-3: var(--violet-3);
  --merge-4: var(--violet-4);
  --merge-5: var(--violet-5);
  --merge-6: var(--violet-6);
  --merge-7: var(--violet-7);
  --merge-8: var(--violet-8);
  --merge-9: var(--violet-9);
  --merge-10: var(--violet-10);
  --merge-11: var(--violet-11);
  --merge-12: var(--violet-12);
  --upgrade-1: var(--pink-1);
  --upgrade-2: var(--pink-2);
  --upgrade-3: var(--pink-3);
  --upgrade-4: var(--pink-4);
  --upgrade-5: var(--pink-5);
  --upgrade-6: var(--pink-6);
  --upgrade-7: var(--pink-7);
  --upgrade-8: var(--pink-8);
  --upgrade-9: var(--pink-9);
  --upgrade-10: var(--pink-10);
  --upgrade-11: var(--pink-11);
  --upgrade-12: var(--pink-12);
  --danger-1: var(--red-1);
  --danger-2: var(--red-2);
  --danger-3: var(--red-3);
  --danger-4: var(--red-4);
  --danger-5: var(--red-5);
  --danger-6: var(--red-6);
  --danger-7: var(--red-7);
  --danger-8: var(--red-8);
  --danger-9: var(--red-9);
  --danger-10: var(--red-10);
  --danger-11: var(--red-11);
  --danger-12: var(--red-12);
  --warning-1: var(--yellow-1);
  --warning-2: var(--yellow-2);
  --warning-3: var(--yellow-3);
  --warning-4: var(--yellow-4);
  --warning-5: var(--yellow-5);
  --warning-6: var(--yellow-6);
  --warning-7: var(--yellow-7);
  --warning-8: var(--yellow-8);
  --warning-9: var(--yellow-9);
  --warning-10: var(--yellow-10);
  --warning-11: var(--yellow-11);
  --warning-12: var(--yellow-12);
  --info-1: var(--blue-1);
  --info-2: var(--blue-2);
  --info-3: var(--blue-3);
  --info-4: var(--blue-4);
  --info-5: var(--blue-5);
  --info-6: var(--blue-6);
  --info-7: var(--blue-7);
  --info-8: var(--blue-8);
  --info-9: var(--blue-9);
  --info-10: var(--blue-10);
  --info-11: var(--blue-11);
  --info-12: var(--blue-12);
  --color-background: #fff
}

/* GitBook UI tokens */
:root,
.light,
.light-theme {
  --primary-surface: var(--orange-1);
  --primary-surface-subtle: var(--orange-2);
  --primary-ui-bg: var(--orange-3);
  --primary-ui-bg-hover: var(--orange-4);
  --primary-ui-bg-active: var(--orange-5);
  --primary-border-subtle: var(--orange-6);
  --primary-border-interactive: var(--orange-7);
  --primary-border-focus: var(--orange-8);
  --primary-solid: var(--orange-9);
  --primary-solid-hover: var(--orange-10);
  --primary-text-low: var(--orange-11);
  --primary-text-high: var(--orange-12);
  --danger-surface: var(--red-1);
  --danger-surface-subtle: var(--red-2);
  --danger-ui-bg: var(--red-3);
  --danger-ui-bg-hover: var(--red-4);
  --danger-ui-bg-active: var(--red-5);
  --danger-border-subtle: var(--red-6);
  --danger-border-interactive: var(--red-7);
  --danger-border-focus: var(--red-8);
  --danger-solid: var(--red-9);
  --danger-solid-hover: var(--red-10);
  --danger-text-low: var(--red-11);
  --danger-text-high: var(--red-12);
  --success-surface: var(--green-1);
  --success-surface-subtle: var(--green-2);
  --success-ui-bg: var(--green-3);
  --success-ui-bg-hover: var(--green-4);
  --success-ui-bg-active: var(--green-5);
  --success-border-subtle: var(--green-6);
  --success-border-interactive: var(--green-7);
  --success-border-focus: var(--green-8);
  --success-solid: var(--green-9);
  --success-solid-hover: var(--green-10);
  --success-text-low: var(--green-11);
  --success-text-high: var(--green-12);
  --warning-surface: var(--yellow-1);
  --warning-surface-subtle: var(--yellow-2);
  --warning-ui-bg: var(--yellow-3);
  --warning-ui-bg-hover: var(--yellow-4);
  --warning-ui-bg-active: var(--yellow-5);
  --warning-border-subtle: var(--yellow-6);
  --warning-border-interactive: var(--yellow-7);
  --warning-border-focus: var(--yellow-8);
  --warning-solid: var(--yellow-9);
  --warning-solid-hover: var(--yellow-10);
  --warning-text-low: var(--yellow-11);
  --warning-text-high: var(--yellow-12);
  --info-surface: var(--blue-1);
  --info-surface-subtle: var(--blue-2);
  --info-ui-bg: var(--blue-3);
  --info-ui-bg-hover: var(--blue-4);
  --info-ui-bg-active: var(--blue-5);
  --info-border-subtle: var(--blue-6);
  --info-border-interactive: var(--blue-7);
  --info-border-focus: var(--blue-8);
  --info-solid: var(--blue-9);
  --info-solid-hover: var(--blue-10);
  --info-text-low: var(--blue-11);
  --info-text-high: var(--blue-12);
  --merge-surface: var(--violet-1);
  --merge-surface-subtle: var(--violet-2);
  --merge-ui-bg: var(--violet-3);
  --merge-ui-bg-hover: var(--violet-4);
  --merge-ui-bg-active: var(--violet-5);
  --merge-border-subtle: var(--violet-6);
  --merge-border-interactive: var(--violet-7);
  --merge-border-focus: var(--violet-8);
  --merge-solid: var(--violet-9);
  --merge-solid-hover: var(--violet-10);
  --merge-text-low: var(--violet-11);
  --merge-text-high: var(--violet-12);
  --upgrade-surface: var(--pink-1);
  --upgrade-surface-subtle: var(--pink-2);
  --upgrade-ui-bg: var(--pink-3);
  --upgrade-ui-bg-hover: var(--pink-4);
  --upgrade-ui-bg-active: var(--pink-5);
  --upgrade-border-subtle: var(--pink-6);
  --upgrade-border-interactive: var(--pink-7);
  --upgrade-border-focus: var(--pink-8);
  --upgrade-solid: var(--pink-9);
  --upgrade-solid-hover: var(--pink-10);
  --upgrade-text-low: var(--pink-11);
  --upgrade-text-high: var(--pink-12);
  --neutral-surface: var(--neutral-1);
  --neutral-surface-subtle: var(--neutral-2);
  --neutral-ui-bg: var(--neutral-3);
  --neutral-ui-bg-hover: var(--neutral-3);
  --neutral-ui-bg-active: var(--neutral-4);
  --neutral-border-subtle: var(--neutral-6);
  --neutral-border-interactive: var(--neutral-7);
  --neutral-border-focus: var(--neutral-8);
  --neutral-text-low: var(--neutral-11);
  --neutral-text-high: var(--neutral-12);
  --neutral-text-inverted-low: var(--neutral-2);
  --neutral-text-inverted-high: var(--neutral-1);
  --link-text-low: var(--info-text-low);
  --link-text-high: var(--info-text-high);
  --neutral-solid: var(--neutral-12);
  --neutral-solid-hover: color-mix(in srgb, var(--neutral-12), white 10%);
  --secondary-button-bg: var(--neutral-1);
  --secondary-button-bg-hover: var(--neutral-3)
}

/* GitBook tokens (from reference exports) */

:root,
.light,
.light-theme {
  --sp-color-action-bg-blank-default: transparent;
  --sp-color-action-bg-blank-inverted-default: transparent;
  --sp-color-attention-danger: var(--red-7);
  --sp-color-attention-success: var(--green-7);
  --sp-color-attention-upgrade-default: var(--pink-9);
  --sp-color-attention-upgrade-hover: var(--pink-10);
  --sp-color-attention-warning: var(--yellow-7);
  --sp-color-badge-border-warning: var(--yellow-7);
  --sp-color-badge-text-primary: #ffffff;
  --sp-color-bg-menu-active: var(--orange-2);
  --sp-color-bg-menu-dark-active: #5f677b;
  --sp-color-bg-menu-dark-default: #2a3142;
  --sp-color-bg-menu-dark-hover: #353d53;
  --sp-color-bg-menu-default: #ffffff;
  --sp-color-bg-menu-hover: var(--gray-2);
  --sp-color-bg-site-status-published: var(--green-7);
  --sp-color-bg-site-status-unpublished: var(--gray-7);
  --sp-color-black: var(--gray-12);
  --sp-color-border-block-reference-frame-active: var(--orange-10);
  --sp-color-border-menu-dark: #353d53;
  --sp-color-border-menu-default: var(--gray-2);
  --sp-color-button-border-bottom: #ffffff33;
  --sp-color-button-border-top: rgba(0, 0, 0, .2);
  --sp-color-button-muted-bg-default: transparent;
  --sp-color-button-pill-border: var(--orange-8);
  --sp-color-button-upgrade-text: #ffffff;
  --sp-color-dark-mode-500: #2b2e39;
  --sp-color-icon-danger-default: var(--red-9);
  --sp-color-icon-diff-added: var(--green-9);
  --sp-color-icon-diff-deleted: var(--red-9);
  --sp-color-icon-diff-modified: var(--blue-9);
  --sp-color-icon-menu-active: var(--blue-9);
  --sp-color-icon-menu-default: var(--gray-7);
  --sp-color-icon-menu-disabled: var(--gray-6);
  --sp-color-icon-menu-hover: var(--gray-8);
  --sp-color-search-ai-cta-text-default: var(--gray-9);
  --sp-color-search-ai-cta-text-highlight: var(--gray-10);
  --sp-color-text-input-placeholder: var(--gray-7);
  --sp-color-text-interactive: var(--blue-10);
  --sp-color-text-light: var(--gray-11);
  --sp-color-text-menu-active: var(--blue-10);
  --sp-color-text-menu-dark-active: var(--blue-2);
  --sp-color-text-menu-dark-default: var(--gray-3);
  --sp-color-text-menu-dark-disabled: var(--gray-6);
  --sp-color-text-menu-dark-hover: #ffffff;
  --sp-color-text-menu-default: var(--gray-8);
  --sp-color-text-menu-disabled: var(--gray-6);
  --sp-color-text-menu-hover: var(--gray-10);
  --sp-color-text-realtime-bubble: var(--gray-10);
  --sp-color-text-sign-in-terms: var(--gray-7);
  --sp-color-text-stepper-dark-active: var(--blue-9);
  --sp-color-text-stepper-dark-default: var(--gray-7);
  --sp-color-text-stepper-dark-error: var(--red-9);
  --sp-color-text-stepper-light-active: var(--blue-9);
  --sp-color-text-stepper-light-default: var(--gray-7);
  --sp-color-text-stepper-light-error: var(--red-9);
  --sp-color-text-white: #ffffff;
  --sp-color-transparent: transparent;
  --sp-color-white: #ffffff;
  --sp-shadow-button-actions-default-first-layer: 0px 1px 1px 0px rgba(0, 0, 0, .12);
  --sp-shadow-button-actions-default-second-layer: 0px 1px 6px 0px rgba(31, 41, 51, .1);
  --sp-shadow-button-actions-hover-first-layer: 0px 1px 1px 0px rgba(0, 0, 0, .18);
  --sp-shadow-button-actions-hover-second-layer: 0px 1px 6px 0px rgba(31, 41, 51, .15);
  --sp-shadow-button-hidden: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  --sp-shadow-button-secondary-default-first-layer: 0px 1px 3px 0px rgba(0, 0, 0, .05);
  --sp-shadow-button-secondary-default-second-layer: 0px 1px 2px -1px rgba(0, 0, 0, .05);
  --sp-shadow-button-secondary-hover-first-layer: 0px 1px 3px 0px rgba(0, 0, 0, .08);
  --sp-shadow-button-secondary-hover-second-layer: 0px 1px 2px -1px rgba(0, 0, 0, .08);
  --sp-shadow-overlay: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 1px -.5px rgba(0, 0, 0, .06), 0 3px 3px 0 rgba(0, 0, 0, .06), 0 6px 6px 0 rgba(0, 0, 0, .02), 0 12px 12px 0 rgba(0, 0, 0, .02), 0 16px 16px 0px rgba(0, 0, 0, .03);
  --sp-insights-meters-searches: var(--sp-color-primary-400);
  --sp-insights-meters-hits: var(--violet-8);
  --sp-ref-color-grey-50: var(--gray-1);
  --sp-ref-color-teal-50: var(--blue-1);
  --sp-ref-color-teal-400: var(--blue-9);
  --sp-ref-color-green-50: var(--green-1);
  --sp-ref-color-green-200: var(--green-5);
  --sp-ref-color-green-400: var(--green-9);
  --sp-ref-color-orange-50: var(--orange-1);
  --sp-ref-color-orange-200: var(--orange-5);
  --sp-ref-color-orange-400: var(--orange-9);
  --sp-ref-color-pink-50: var(--pink-1);
  --sp-ref-color-pink-400: var(--pink-9);
  --sp-ref-color-scarlet-50: var(--red-1);
  --sp-ref-color-scarlet-200: var(--red-5);
  --sp-ref-color-scarlet-300: var(--red-7);
  --sp-ref-color-scarlet-400: var(--red-9);
  --sp-ref-color-violet-50: var(--violet-1);
  --sp-ref-color-violet-400: var(--violet-9);
  --sp-color-action-bg-active: var(--orange-2);
  --sp-color-action-bg-danger-default: var(--red-9);
  --sp-color-action-bg-danger-focus: var(--red-9);
  --sp-color-action-bg-danger-hover: var(--red-10);
  --sp-color-action-bg-merge-default: var(--violet-9);
  --sp-color-action-bg-merge-focus: var(--violet-9);
  --sp-color-action-bg-merge-hover: var(--violet-10);
  --sp-color-action-bg-nested-hover: var(--gray-3);
  --sp-color-action-bg-secondary-default: #ffffff;
  --sp-color-action-bg-secondary-focus: var(--gray-2);
  --sp-color-action-bg-secondary-hover: var(--gray-2);
  --sp-color-action-bg-success-default: var(--green-9);
  --sp-color-action-bg-success-focus: var(--green-9);
  --sp-color-action-bg-success-hover: var(--green-10);
  --sp-color-action-bg-upgrade-default: var(--pink-9);
  --sp-color-action-bg-upgrade-focus: var(--pink-9);
  --sp-color-action-bg-upgrade-hover: var(--pink-10);
  --sp-color-action-bg-warning-default: var(--orange-9);
  --sp-color-action-bg-warning-focus: var(--orange-9);
  --sp-color-action-bg-warning-hover: var(--orange-10);
  --sp-color-action-border-default: transparent;
  --sp-color-action-border-secondary-inactive: var(--gray-2);
  --sp-color-action-text-active: var(--orange-10);
  --sp-color-action-text-base: #ffffff;
  --sp-color-badge-bg-danger: var(--red-1);
  --sp-color-badge-bg-success: var(--green-1);
  --sp-color-badge-bg-info: var(--blue-1);
  --sp-color-badge-bg-merge: var(--violet-1);
  --sp-color-badge-bg-primary: var(--orange-10);
  --sp-color-badge-bg-secondary: var(--gray-1);
  --sp-color-badge-bg-ultimate: var(--violet-2);
  --sp-color-badge-bg-upgrade: var(--pink-1);
  --sp-color-badge-border-danger: var(--red-5);
  --sp-color-badge-border-success: var(--green-5);
  --sp-color-badge-border-info: var(--blue-6);
  --sp-color-badge-border-merge: var(--violet-6);
  --sp-color-badge-border-secondary: var(--gray-3);
  --sp-color-badge-border-upgrade: var(--pink-5);
  --sp-color-badge-text-danger: var(--danger-text-low);
  --sp-color-badge-text-success: var(--success-text-low);
  --sp-color-badge-text-info: var(--info-text-low);
  --sp-color-badge-text-merge: var(--merge-text-low);
  --sp-color-badge-text-secondary: var(--neutral-text-low);
  --sp-color-badge-text-upgrade: var(--upgrade-text-low);
  --sp-color-badge-text-warning: var(--warning-text-low);
  --sp-color-bg-active: var(--primary-ui-bg-active);
  --sp-color-bg-avatar: #ffffff;
  --sp-color-bg-base: var(--neutral-1);
  --sp-color-bg-card-glass-default: linear-gradient(110deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .4) 100%), rgba(240, 246, 248, .25);
  --sp-color-bg-danger-default: var(--red-1);
  --sp-color-bg-danger-standout: var(--red-2);
  --sp-color-bg-diff-added: var(--green-3);
  --sp-color-bg-diff-deleted: var(--red-3);
  --sp-color-bg-diff-modified: var(--blue-3);
  --sp-color-bg-disabled: var(--gray-2);
  --sp-color-bg-form-radio-checked-default: var(--neutral-solid);
  --sp-color-bg-form-radio-unchecked-disabled: var(--neutral-3);
  --sp-color-bg-inactive: var(--gray-3);
  --sp-color-bg-info-default: var(--gray-2);
  --sp-color-bg-info-standout: var(--gray-3);
  --sp-color-bg-inverted: var(--gray-4);
  --sp-color-bg-keyboard-shortcut-default: var(--neutral-1);
  --sp-color-bg-keyboard-shortcut-inverted: var(--neutral-12);
  --sp-color-bg-mention-default: var(--orange-2);
  --sp-color-bg-merge: var(--violet-2);
  --sp-color-bg-muted: var(--gray-2);
  --sp-color-bg-overlay: #14171c;
  --sp-color-bg-overlay-rgb: #14171c;
  --sp-color-bg-primary: var(--orange-9);
  --sp-color-bg-secondary: var(--gray-3);
  --sp-color-bg-shimmer-default-end: var(--gray-2);
  --sp-color-bg-shimmer-default-start: var(--gray-3);
  --sp-color-bg-shimmer-standout-end: var(--gray-3);
  --sp-color-bg-shimmer-standout-start: var(--gray-4);
  --sp-color-bg-side: var(--neutral-2);
  --sp-color-bg-standout-base: var(--gray-2);
  --sp-color-bg-standout-on-base: var(--gray-3);
  --sp-color-bg-standout-side-default: var(--gray-3);
  --sp-color-bg-success-default: var(--green-1);
  --sp-color-bg-success-standout: var(--green-2);
  --sp-color-bg-suggestion-default: var(--gray-2);
  --sp-color-bg-suggestion-hover: var(--gray-3);
  --sp-color-bg-table-cell-active: var(--orange-1);
  --sp-color-bg-table-drag-button-active: var(--sp-color-bg-table-dragButton-active);
  --sp-color-bg-table-drag-button-default: var(--sp-color-bg-table-dragButton-default);
  --sp-color-bg-table-dragButton-active: var(--neutral-solid);
  --sp-color-bg-table-dragButton-default: var(--gray-6);
  --sp-color-bg-tile-base: #ffffff;
  --sp-color-bg-tile-inverted-default: var(--gray-10);
  --sp-color-bg-tile-inverted-hovered: var(--gray-9);
  --sp-color-bg-tile-inverted-rgb: var(--gray-10);
  --sp-color-bg-tooltip-default: #ffffff;
  --sp-color-bg-tooltip-inverted: var(--gray-10);
  --sp-color-bg-upgrade: var(--pink-2);
  --sp-color-bg-visibility-properties: var(--gray-1);
  --sp-color-bg-warning-default: var(--yellow-1);
  --sp-color-bg-warning-standout: var(--yellow-2);
  --sp-color-border-avatar: #ffffff;
  --sp-color-border-base: var(--gray-3);
  --sp-color-border-block-reference-frame-default: var(--orange-9);
  --sp-color-border-card: transparent;
  --sp-color-border-comment-active: var(--orange-9);
  --sp-color-border-control: var(--gray-6);
  --sp-color-border-control-invalid: var(--red-9);
  --sp-color-border-danger: var(--red-5);
  --sp-color-border-form-radio-checked-default: var(--orange-10);
  --sp-color-border-form-radio-unchecked-disabled: var(--gray-6);
  --sp-color-border-hint-danger: var(--red-9);
  --sp-color-border-hint-info: var(--gray-6);
  --sp-color-border-hint-success: var(--green-9);
  --sp-color-border-hint-warning: var(--yellow-9);
  --sp-color-border-keyboard-shortcut-default: var(--neutral-8);
  --sp-color-border-keyboard-shortcut-inverted: var(--neutral-11);
  --sp-color-border-light: var(--gray-2);
  --sp-color-border-page-switch: var(--gray-5);
  --sp-color-border-placeholder: var(--neutral-8);
  --sp-color-border-primary: var(--orange-10);
  --sp-color-border-search-group: var(--gray-3);
  --sp-color-border-standout: var(--gray-3);
  --sp-color-border-success: var(--green-5);
  --sp-color-border-table-active-inner: var(--neutral-6);
  --sp-color-border-table-active-outer: var(--neutral-10);
  --sp-color-border-tile: var(--gray-2);
  --sp-color-border-trial-asset: rgba(255, 255, 255, .5);
  --sp-color-border-warning: var(--yellow-5);
  --sp-color-button-drag-bg-active: var(--neutral-solid);
  --sp-color-button-drag-bg-default: var(--neutral-solid);
  --sp-color-button-inline-text-default: var(--gray-10);
  --sp-color-button-inline-text-focus: var(--gray-8);
  --sp-color-button-inline-text-hover: var(--gray-9);
  --sp-color-button-muted-bg-focus: var(--gray-3);
  --sp-color-button-muted-bg-hover: var(--gray-3);
  --sp-color-button-upgrade-bg-default: var(--pink-9);
  --sp-color-button-upgrade-bg-focus: var(--pink-9);
  --sp-color-button-upgrade-bg-hover: var(--pink-10);
  --sp-color-code-changed: #8250df;
  --sp-color-code-comment: #6e7781;
  --sp-color-code-constant: #0550ae;
  --sp-color-code-deleted: #82071e;
  --sp-color-code-function: #8250df;
  --sp-color-code-inserted: #aff5b4;
  --sp-color-code-keyword: #cf222e;
  --sp-color-code-parameter: #953800;
  --sp-color-code-string: #0a3069;
  --sp-color-code-string-expression: #0a3069;
  --sp-color-comments-comment-bg-hover: var(--gray-1);
  --sp-color-comments-comment-bg-resolved: var(--gray-2);
  --sp-color-comments-comment-guide-default: var(--gray-4);
  --sp-color-comments-comment-guide-hover: var(--gray-5);
  --sp-color-icon-ask-gitbook: var(--neutral-9);
  --sp-color-icon-info: var(--blue-9);
  --sp-color-icon-primary: var(--orange-10);
  --sp-color-icon-upgrade: var(--pink-9);
  --sp-color-join-organizations-card-default: #ffffff;
  --sp-color-join-organizations-card-focus: var(--gray-3);
  --sp-color-join-organizations-card-hover: var(--gray-2);
  --sp-color-search-ai-cta-action-button: var(--orange-9);
  --sp-color-search-ai-cta-border: var(--orange-9);
  --sp-color-search-ai-cta-icon: var(--orange-9);
  --sp-color-search-group-heading: var(--gray-8);
  --sp-color-sidesheet-avatar-badge-border: #ffffff;
  --sp-color-sidesheet-avatar-bg: #2a3142;
  --sp-color-sidesheet-header-border: var(--gray-3);
  --sp-color-sidesheet-list-item-bg-hover: var(--gray-2);
  --sp-color-text-base: var(--neutral-text-high);
  --sp-color-text-muted: var(--neutral-text-low);
  --sp-color-text-secondary: var(--neutral-11);
  --sp-color-text-danger-default: var(--red-9);
  --sp-color-text-danger-standout: var(--red-11);
  --sp-color-text-diff-added: var(--green-8);
  --sp-color-text-diff-deleted: var(--red-9);
  --sp-color-text-diff-modified: var(--blue-9);
  --sp-color-text-info: var(--blue-11);
  --sp-color-text-inverted-default: var(--gray-3);
  --sp-color-text-inverted-standout: #ffffff;
  --sp-color-text-merge: var(--violet-9);
  --sp-color-text-placeholder: var(--neutral-12);
  --sp-color-text-primary: var(--orange-10);
  --sp-color-text-success-default: var(--green-9);
  --sp-color-text-success-standout: var(--green-11);
  --sp-color-text-upgrade: var(--pink-9);
  --sp-color-text-warning-default: var(--orange-9);
  --sp-shadow-base: 0px -1px 1px 0px rgba(0, 0, 0, .05), 0px 1px 2px 0px rgba(0, 0, 0, .15);
  --sp-shadow-elevated: 0px -1px 1px 0px rgba(0, 0, 0, .05), 0px 8px 14px 3px rgba(31, 41, 51, .08), 0px 2px 2px 0px rgba(0, 0, 0, .07);
  --sp-shadow-focus-ring: 0px 0px 0px 1px var(--sp-color-white), 0px 0px 0px 3px var(--neutral-border-focus);
  --sp-shadow-focus-ring-inset: inset 0px 0px 0px 1px var(--sp-color-white), 0px 0px 0px 2px var(--neutral-border-focus);
  --sp-shadow-focus-ring-danger-inset: inset 0px 0px 0px 1px var(--sp-color-white), 0px 0px 0px 2px var(--sp-ref-color-scarlet-200);
  --sp-shadow-focus-ring-success-inset: inset 0px 0px 0px 1px var(--sp-color-white), 0px 0px 0px 2px var(--sp-ref-color-green-200);
  --sp-shadow-focus-ring-warning-inset: inset 0px 0px 0px 1px var(--sp-color-white), 0px 0px 0px 2px var(--sp-ref-color-orange-200);
  --sp-shadow-organization-creation-logo-first-layer: 0px 1.66667px 3.33333px rgba(0, 0, 0, .15);
  --sp-shadow-organization-creation-logo-second-layer: 0px -1.66667px 1.66667px rgba(0, 0, 0, .05);
  --sp-shadow-selected-ring: 0px 0px 0px 2px var(--neutral-border-focus);
  --sp-shadow-subtle: lch(0 0 0 / .022) 0px 3px 6px -2px, lch(0 0 0 / .044) 0px 1px 1px;
  --sp-typography-content-heading-large-font-size: 1.875rem;
  --sp-typography-content-heading-large-font-weight: 600;
  --sp-typography-content-heading-large-line-height: 1.33333333333;
  --sp-typography-content-heading-medium-font-size: 1.5rem;
  --sp-typography-content-heading-medium-font-weight: 600;
  --sp-typography-content-heading-medium-line-height: 1.4;
  --sp-typography-content-heading-small-font-size: 1.25rem;
  --sp-typography-content-heading-small-font-weight: 600;
  --sp-typography-content-heading-small-line-height: 1.5;
  --sp-typography-content-mono-font: 400 .875rem/1.5 gitbook-code-font, Menlo, monospace;
  --sp-typography-content-mono-font-family: gitbook-code-font, Menlo, monospace;
  --sp-typography-content-mono-font-size: .875rem;
  --sp-typography-content-mono-font-weight: 400;
  --sp-typography-content-mono-line-height: 1.5;
  --sp-typography-content-page-title-large-font-size: 2.5rem;
  --sp-typography-content-page-title-large-font-weight: 700;
  --sp-typography-content-page-title-large-line-height: 1.2;
  --sp-typography-content-page-title-medium-font-size: 1.875rem;
  --sp-typography-content-page-title-medium-font-weight: 700;
  --sp-typography-content-page-title-medium-line-height: 1.2;
  --sp-typography-content-paragraph-font-size: 1rem;
  --sp-typography-content-paragraph-font-weight: 400;
  --sp-typography-content-paragraph-line-height: 1.5;
  --sp-typography-content-paragraph-small-font-size: .875rem;
  --sp-typography-content-paragraph-small-font-weight: 400;
  --sp-typography-content-paragraph-small-line-height: 1.4;
  --sp-typography-ui-action-font-size: .8125rem;
  --sp-typography-ui-action-font-weight: 450;
  --sp-typography-ui-action-line-height: 1.25rem;
  --sp-typography-ui-base-font-size: .8125rem;
  --sp-typography-ui-base-font-weight: 450;
  --sp-typography-ui-base-line-height: 1.25rem;
  --sp-typography-ui-emphasize-font-weight: 700;
  --sp-typography-ui-heading-group-font-size: .75rem;
  --sp-typography-ui-heading-group-font-weight: 500;
  --sp-typography-ui-heading-group-line-height: 1.2;
  --sp-typography-ui-heading-large-font-size: 1.5rem;
  --sp-typography-ui-heading-large-font-weight: 500;
  --sp-typography-ui-heading-large-line-height: 1.5;
  --sp-typography-ui-heading-medium-font-size: 1rem;
  --sp-typography-ui-heading-medium-font-weight: 500;
  --sp-typography-ui-heading-medium-line-height: 1.4;
  --sp-typography-ui-heading-small-font-size: .875rem;
  --sp-typography-ui-heading-small-font-weight: 500;
  --sp-typography-ui-heading-small-line-height: 1.4;
  --sp-typography-ui-page-title-font-size: 1.875rem;
  --sp-typography-ui-page-title-font-weight: 500;
  --sp-typography-ui-page-title-line-height: 1.5;
  --sp-typography-ui-small-font-size: .75rem;
  --sp-typography-ui-small-font-weight: 400;
  --sp-typography-ui-small-line-height: 1rem;
  --sp-typography-ui-standout-font-size: .8125rem;
  --sp-typography-ui-standout-font-weight: 500;
  --sp-typography-ui-standout-line-height: 1.25rem
}

.theme-color-dark,
.dark,
.dark-theme {
  --sp-ref-color-grey-50: var(--gray-1);
  --sp-ref-color-teal-50: var(--blue-1);
  --sp-ref-color-teal-400: var(--blue-9);
  --sp-ref-color-green-50: var(--green-1);
  --sp-ref-color-green-200: var(--green-5);
  --sp-ref-color-green-400: var(--green-9);
  --sp-ref-color-orange-50: var(--orange-1);
  --sp-ref-color-orange-200: var(--orange-5);
  --sp-ref-color-orange-400: var(--orange-9);
  --sp-ref-color-pink-50: var(--pink-1);
  --sp-ref-color-pink-400: var(--pink-9);
  --sp-ref-color-scarlet-50: var(--red-1);
  --sp-ref-color-scarlet-200: var(--red-5);
  --sp-ref-color-scarlet-300: var(--red-7);
  --sp-ref-color-scarlet-400: var(--red-9);
  --sp-ref-color-violet-50: var(--violet-1);
  --sp-ref-color-violet-400: var(--violet-9);
  --sp-color-action-bg-active: #11262d;
  --sp-color-action-bg-blank-inverted-hover: #eaebee;
  --sp-color-action-bg-danger-default: var(--red-9);
  --sp-color-action-bg-danger-focus: var(--red-10);
  --sp-color-action-bg-danger-hover: var(--red-10);
  --sp-color-action-bg-merge-default: var(--violet-9);
  --sp-color-action-bg-merge-focus: var(--violet-10);
  --sp-color-action-bg-merge-hover: var(--violet-10);
  --sp-color-action-bg-nested-hover: #2d323a;
  --sp-color-action-bg-primary-default: #4eaac8;
  --sp-color-action-bg-primary-focus: var(--blue-10);
  --sp-color-action-bg-primary-hover: var(--blue-9);
  --sp-color-action-bg-secondary-default: var(--gray-9);
  --sp-color-action-bg-secondary-focus: var(--gray-9);
  --sp-color-action-bg-secondary-hover: var(--gray-10);
  --sp-color-action-bg-success-default: var(--green-9);
  --sp-color-action-bg-success-focus: var(--green-10);
  --sp-color-action-bg-success-hover: var(--green-10);
  --sp-color-action-bg-upgrade-default: var(--pink-9);
  --sp-color-action-bg-upgrade-focus: var(--pink-10);
  --sp-color-action-bg-upgrade-hover: var(--pink-10);
  --sp-color-action-bg-warning-default: var(--orange-9);
  --sp-color-action-bg-warning-focus: var(--orange-10);
  --sp-color-action-bg-warning-hover: var(--orange-10);
  --sp-color-action-border-secondary-inactive: #2d323a;
  --sp-color-action-text-active: var(--blue-10);
  --sp-color-action-text-base: var(--gray-2);
  --sp-color-bg-alert-danger: #392020;
  --sp-color-bg-alert-info: #11262d;
  --sp-color-bg-alert-merge: #201a47;
  --sp-color-bg-alert-success: #0d2519;
  --sp-color-bg-alert-upgrade: #301e25;
  --sp-color-bg-alpha: var(--orange-10);
  --sp-color-bg-avatar: var(--gray-2);
  --sp-color-bg-base: var(--neutral-1);
  --sp-color-bg-card-glass-default: linear-gradient(110deg, rgba(20, 23, 28, .2) 0%, rgba(20, 23, 28, .4) 100%), rgba(20, 23, 28, .25);
  --sp-color-bg-danger-default: #392020;
  --sp-color-bg-danger-standout: #9a1616;
  --sp-color-bg-disabled: var(--gray-9);
  --sp-color-bg-form-radio-unchecked-disabled: var(--gray-indicator);
  --sp-color-bg-inactive: var(--gray-9);
  --sp-color-bg-info-default: var(--gray-9);
  --sp-color-bg-info-standout: var(--gray-10);
  --sp-color-bg-inverted: #46474c;
  --sp-color-bg-mention-default: #11262d;
  --sp-color-bg-merge: #5846ce;
  --sp-color-bg-muted: var(--gray-2);
  --sp-color-bg-overlay: #000000;
  --sp-color-bg-overlay-rgb: #000000;
  --sp-color-bg-primary: #275564;
  --sp-color-bg-secondary: var(--gray-3);
  --sp-color-bg-side: var(--neutral-2);
  --sp-color-bg-standout-side-default: var(--gray-7);
  --sp-color-bg-success-default: #0d2519;
  --sp-color-bg-success-standout: #0b4f2f;
  --sp-color-bg-suggestion-default: #262930;
  --sp-color-bg-suggestion-hover: #46474c;
  --sp-color-bg-table-cell-active: #11262d;
  --sp-color-bg-table-dragButton-default: var(--gray-indicator);
  --sp-color-bg-tile-base: #262930;
  --sp-color-bg-tile-inverted-default: #ffffff;
  --sp-color-bg-tile-inverted-hovered: #f7f7f7;
  --sp-color-bg-tile-inverted-rgb: #ffffff;
  --sp-color-bg-tooltip-default: #262930;
  --sp-color-bg-tooltip-inverted: #ffffff;
  --sp-color-bg-upgrade: #301e25;
  --sp-color-bg-visibility-properties: var(--gray-1);
  --sp-color-bg-warning-default: #5b330d;
  --sp-color-bg-warning-standout: #8e521a;
  --sp-color-border-avatar: var(--gray-2);
  --sp-color-border-base: #2d323a;
  --sp-color-border-block-reference-frame-default: var(--orange-9);
  --sp-color-border-block-reference-frame-active: var(--orange-10);
  --sp-color-border-card: #46474c;
  --sp-color-border-comment-active: var(--blue-9);
  --sp-color-border-control: var(--gray-6);
  --sp-color-border-control-invalid: #d33d3d;
  --sp-color-border-danger: #9a1616;
  --sp-color-border-form-radio-checked-default: #4eaac8;
  --sp-color-border-form-radio-unchecked-disabled: var(--gray-indicator);
  --sp-color-border-hint-danger: #cc3131;
  --sp-color-border-hint-info: var(--gray-10);
  --sp-color-border-hint-success: #238254;
  --sp-color-border-hint-warning: #cc7231;
  --sp-color-border-light: #7a808b;
  --sp-color-border-page-switch: #46474c;
  --sp-color-border-placeholder: var(--neutral-10);
  --sp-color-border-primary: var(--blue-9);
  --sp-color-border-search-group: #262930;
  --sp-color-border-standout: #46474c;
  --sp-color-border-success: #0b4f2f;
  --sp-color-border-tile: #262930;
  --sp-color-border-trial-asset: rgba(20, 23, 28, .5);
  --sp-color-border-warning: #8e521a;
  --sp-color-button-inline-text-default: #ffffff;
  --sp-color-button-inline-text-focus: #eaebee;
  --sp-color-button-inline-text-hover: #f7f7f7;
  --sp-color-button-muted-bg-focus: #262930;
  --sp-color-button-muted-bg-hover: #262930;
  --sp-color-button-upgrade-bg-default: #db3b79;
  --sp-color-button-upgrade-bg-focus: #db3b79;
  --sp-color-button-upgrade-bg-hover: #c62c68;
  --sp-color-code-changed: #d2a8ff;
  --sp-color-code-comment: #8b949e;
  --sp-color-code-constant: #79c0ff;
  --sp-color-code-deleted: #ffdcd7;
  --sp-color-code-function: #d2a8ff;
  --sp-color-code-inserted: #d2a8ff;
  --sp-color-code-keyword: #ff7b72;
  --sp-color-code-parameter: #ffa657;
  --sp-color-code-string: #a5d6ff;
  --sp-color-code-string-expression: #a5d6ff;
  --sp-color-comments-comment-bg-hover: var(--gray-9);
  --sp-color-comments-comment-bg-resolved: var(--gray-2);
  --sp-color-icon-info: var(--blue-9);
  --sp-color-icon-primary: var(--blue-9);
  --sp-color-icon-upgrade: var(--pink-10);
  --sp-color-join-organizations-card-default: var(--gray-9);
  --sp-color-join-organizations-card-focus: #2d323a;
  --sp-color-join-organizations-card-hover: var(--gray-10);
  --sp-color-search-ai-cta-action-button: var(--blue-9);
  --sp-color-search-ai-cta-border: var(--blue-9);
  --sp-color-search-ai-cta-icon: var(--blue-9);
  --sp-color-search-group-heading: var(--gray-11);
  --sp-color-sidesheet-avatar-badge-border: var(--gray-9);
  --sp-color-sidesheet-avatar-bg: #262930;
  --sp-color-sidesheet-header-border: var(--gray-7);
  --sp-color-sidesheet-list-item-bg-hover: var(--gray-9);
  --sp-color-text-secondary: var(--neutral-11);
  --sp-color-text-danger-default: var(--red-10);
  --sp-color-text-danger-standout: var(--red-10);
  --sp-color-text-diff-added: var(--green-11);
  --sp-color-text-diff-deleted: var(--red-11);
  --sp-color-text-diff-modified: var(--blue-9);
  --sp-color-text-info: #11262d;
  --sp-color-text-inverted-default: #262930;
  --sp-color-text-inverted-standout: #262930;
  --sp-color-text-merge: var(--violet-12);
  --sp-color-text-placeholder: var(--neutral-12);
  --sp-color-text-primary: var(--orange-9);
  --sp-color-text-success-default: var(--green-10);
  --sp-color-text-success-standout: var(--green-10);
  --sp-color-text-upgrade: var(--pink-10);
  --sp-shadow-base: 0px 1px 2px 0px rgba(0, 0, 0, .62);
  --sp-shadow-elevated: 0px 1px 2px 0px rgba(0, 0, 0, .62), 0px 8px 14px 3px rgba(16, 17, 17, .32), 0px 2px 2px 0px rgba(0, 0, 0, .37);
  --sp-shadow-focus-ring: 0 0 0 1px var(--sp-color-dark-mode-500), 0px 0px 0px 3px var(--neutral-border-focus);
  --sp-shadow-focus-ring-danger-inset: inset 0 0 0 1px var(--sp-color-dark-mode-500), 0px 0px 0px 2px var(--sp-ref-color-scarlet-200);
  --sp-shadow-focus-ring-inset: inset 0 0 0 1px var(--sp-color-dark-mode-500), 0px 0px 0px 2px var(--neutral-border-focus);
  --sp-shadow-focus-ring-success-inset: inset 0 0 0 1px var(--sp-color-dark-mode-500), 0px 0px 0px 2px var(--sp-ref-color-green-200);
  --sp-shadow-focus-ring-warning-inset: inset 0 0 0 1px var(--sp-color-dark-mode-500), 0px 0px 0px 2px var(--sp-ref-color-orange-200);
  --sp-shadow-selected-ring: 0px 0px 0px 2px var(--neutral-border-focus);
  --sp-shadow-subtle: lch(0 0 0 / .022) 0px 3px 6px -2px, lch(0 0 0 / .044) 0px 1px 1px;
  --sp-typography-content-paragraph-font: 400 1rem/1.5 gitbook-content-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
}

.theme-color-light,
.light,
.light-theme {
  --sp-color-border-base: #f1efef;
  --sp-color-border-control: #dbd8d6;
  --sp-color-border-light: #faf9f8;
}

.theme-color-dark,
.dark,
.dark-theme {
  --sp-color-border-base: #2d323a;
  --sp-color-border-control: #44403d;
  --sp-color-border-light: #7a808b;
}

:root {
  color-scheme: light dark;
  --font-body: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --font-display: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --font-mono: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --sp-typography-content-mono-font: 400 .875rem/1.5 "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --sp-typography-content-mono-font-family: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;

  --bg: var(--sp-color-bg-side);
  --surface-1: var(--sp-color-bg-base);
  --surface-2: var(--sp-color-bg-muted);
  --surface-3: var(--sp-color-bg-active);
  --border: var(--sp-color-border-control);
  --border-strong: var(--sp-color-border-control);
  --text-primary: var(--sp-color-text-base);
  --text-secondary: var(--sp-color-text-muted);
  --text-muted: var(--sp-color-text-light);
  --accent: var(--sp-color-text-interactive);
  --accent-hover: var(--sp-color-text-menu-hover);
  --accent-active: var(--sp-color-text-menu-active);
  --accent-soft: var(--sp-color-bg-menu-active);
  --accent-border: var(--sp-color-border-base);
  --success: var(--sp-color-attention-success);
  --warning: var(--sp-color-attention-warning);
  --danger: var(--sp-color-attention-danger);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-active: var(--sp-shadow-focus-ring);
  --shadow-1: var(--sp-shadow-base);
  --shadow-2: var(--sp-shadow-elevated);
  --shadow-3: var(--sp-shadow-elevated);
  --shadow-4: var(--sp-shadow-elevated);
  --shadow-5: var(--sp-shadow-elevated);
  --shadow-card: var(--sp-shadow-base);
  --shadow-soft: var(--sp-shadow-elevated);
  --focus-ring: var(--sp-shadow-focus-ring);

  --color-neutral-text: var(--sp-color-text-base);
  --color-neutral-text-muted: var(--sp-color-text-muted);
  --color-neutral-text-subtle: var(--sp-color-text-light);
  --color-neutral-text-disabled: var(--sp-color-text-light);
  --color-neutral-text-on-primary: var(--sp-color-text-inverted-standout);
  --color-neutral-icon-on-primary: var(--sp-color-text-inverted-standout);
  --color-neutral-background: var(--sp-color-bg-base);
  --color-neutral-background-muted: var(--sp-color-bg-side);
  --color-neutral-background-subtle: var(--sp-color-bg-muted);
  --color-neutral-background-white: var(--sp-color-bg-base);
  --color-neutral-card-background: var(--sp-color-bg-base);
  --color-neutral-card-background-hover: var(--sp-color-bg-muted);
  --color-neutral-border: var(--sp-color-border-base);
  --color-neutral-separator-subtle: var(--sp-color-border-light);
  --color-neutral-hover: var(--sp-color-bg-menu-hover);
  --color-neutral-disabled: var(--sp-color-bg-inactive);
  --color-neutral-overflow: var(--sp-color-bg-muted);
  --color-neutral-icon: var(--sp-color-text-menu-default);
  --color-neutral-icon-subtle: var(--sp-color-text-menu-disabled);
  --color-neutral-icon-disabled: var(--sp-color-text-menu-disabled);
  --color-neutral-field-border: var(--sp-color-border-control);
  --color-neutral-action-secondary: var(--sp-color-action-bg-secondary-default);
  --color-neutral-action-secondary-hover: var(--sp-color-action-bg-secondary-hover);
  --color-neutral-action-secondary-active: var(--sp-color-bg-active);
  --color-neutral-chip-background: var(--sp-color-bg-muted);
  --color-neutral-chip-background-hover: var(--sp-color-bg-menu-hover);
  --color-neutral-chip-background-active: var(--sp-color-bg-active);
  --color-neutral-chip-background-disabled: var(--sp-color-bg-inactive);
  --color-neutral-large-tooltip-background: var(--sp-color-bg-base);
  --color-neutral-large-tooltip-border: var(--sp-color-border-base);
  --color-neutral-small-tooltip-text: var(--sp-color-text-inverted-standout);
  --color-neutral-small-tooltip-background: var(--sp-color-bg-inverted);
  --color-neutral-small-tooltip-border: var(--sp-color-border-base);
  --color-neutral-overlay: var(--sp-color-bg-overlay);
  --color-neutral-field-background: var(--sp-color-bg-base);
  --color-neutral-text-placeholder: var(--sp-color-text-input-placeholder);

  --color-primary-text: var(--sp-color-text-interactive);
  --color-primary-text-interactive: var(--sp-color-text-interactive);
  --color-primary-icon: var(--sp-color-text-interactive);
  --color-primary-action: var(--sp-color-action-bg-primary-default, var(--sp-color-text-interactive));
  --color-primary-action-hover: var(--sp-color-action-bg-primary-hover, var(--sp-color-text-menu-active));
  --color-primary-action-active: var(--sp-color-action-bg-primary-focus, var(--sp-color-text-interactive));
  --color-primary-field-border-active: var(--sp-color-border-control);
  --color-primary-border-subtle: var(--sp-color-border-base);
  --color-primary-background: var(--sp-color-bg-menu-active);
  --color-primary-background-subtle: var(--sp-color-bg-menu-active);
  --color-primary-background-hover: var(--sp-color-bg-menu-hover);
  --color-primary-chip-background: var(--sp-color-bg-menu-active);
  --color-primary-chip-background-subtle: var(--sp-color-bg-menu-active);
  --color-primary-chip-background-hover: var(--sp-color-bg-menu-hover);
  --color-primary-chip-text: var(--sp-color-text-menu-active);
  --color-primary-shadow-active: var(--sp-shadow-selected-ring);

  --color-primary-black-action: var(--sp-color-bg-inverted);
  --color-primary-black-action-hover: var(--sp-color-bg-active);
  --color-primary-black-action-active: var(--sp-color-bg-inverted);
  --color-primary-black-background: var(--sp-color-bg-inverted);
  --color-primary-black-background-hover: var(--sp-color-bg-active);
  --color-primary-black-chip-text: var(--sp-color-text-inverted-standout);

  --color-success-text: var(--sp-color-text-success-default);
  --color-success-icon: var(--sp-color-text-success-default);
  --color-success-background: var(--sp-color-bg-success-default);
  --color-success-background-hover: var(--sp-color-bg-success-standout);
  --color-success-background-subtle: var(--sp-color-bg-success-default);
  --color-success-background-subtle-hover: var(--sp-color-bg-success-standout);
  --color-success-background-subtle-active: var(--sp-color-bg-success-standout);
  --color-success-chip-background: var(--sp-color-bg-success-default);
  --color-success-chip-background-hover: var(--sp-color-bg-success-standout);
  --color-success-chip-text: var(--sp-color-text-success-default);
  --color-success-border: var(--sp-color-border-success);
  --color-success-border-subtle: var(--sp-color-border-success);
  --color-success-action: var(--sp-color-text-success-default);
  --color-success-action-hover: var(--sp-color-text-success-standout);
  --color-success-action-active: var(--sp-color-text-success-standout);

  --color-warning-text: var(--sp-color-text-warning-default);
  --color-warning-icon: var(--sp-color-text-warning-default);
  --color-warning-background: var(--sp-color-bg-warning-default);
  --color-warning-background-hover: var(--sp-color-bg-warning-standout);
  --color-warning-background-subtle: var(--sp-color-bg-warning-default);
  --color-warning-chip-background: var(--sp-color-bg-warning-default);
  --color-warning-chip-background-hover: var(--sp-color-bg-warning-standout);
  --color-warning-chip-text: var(--sp-color-text-warning-default);
  --color-warning-border: var(--sp-color-border-warning);
  --color-warning-border-subtle: var(--sp-color-border-warning);
  --color-warning-field-border: var(--sp-color-border-warning);

  --color-danger-text: var(--sp-color-text-danger-default);
  --color-danger-icon: var(--sp-color-text-danger-default);
  --color-danger-background: var(--sp-color-bg-danger-default);
  --color-danger-background-hover: var(--sp-color-bg-danger-standout);
  --color-danger-background-subtle: var(--sp-color-bg-danger-default);
  --color-danger-background-subtle-hover: var(--sp-color-bg-danger-standout);
  --color-danger-background-subtle-active: var(--sp-color-bg-danger-standout);
  --color-danger-chip-background: var(--sp-color-bg-danger-default);
  --color-danger-chip-background-hover: var(--sp-color-bg-danger-standout);
  --color-danger-chip-text: var(--sp-color-text-danger-default);
  --color-danger-border: var(--sp-color-border-danger);
  --color-danger-border-subtle: var(--sp-color-border-danger);
  --color-danger-field-border: var(--sp-color-border-danger);
  --color-danger-action: var(--sp-color-text-danger-default);
  --color-danger-action-hover: var(--sp-color-text-danger-standout);
  --color-danger-action-active: var(--sp-color-text-danger-standout);
}

.theme-color-dark {
  color-scheme: dark;
  --sp-color-bg-menu-default: var(--sp-color-bg-menu-dark-default);
  --sp-color-border-menu-default: var(--sp-color-border-menu-dark);
  --sp-color-bg-menu-hover: var(--sp-color-bg-menu-dark-hover);
  --sp-color-bg-menu-active: var(--sp-color-bg-menu-dark-active);
  --sp-color-text-menu-default: var(--sp-color-text-menu-dark-default);
  --sp-color-text-menu-hover: var(--sp-color-text-menu-dark-hover);
  --sp-color-text-menu-active: var(--sp-color-text-menu-dark-active);
}


html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.54;
  color: var(--text-primary);
  background: var(--sp-color-bg-side);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  min-height: 100vh;
  height: 100%;
  overflow: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 2.4rem;
  line-height: 2.8rem;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
  line-height: 2.4rem;
}

h3 {
  font-size: 1.6rem;
  line-height: 2.4rem;
}

p {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

.muted {
  color: var(--neutral-text-low);
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
      transparent 0%,
      rgba(255, 255, 255, 0.55) 40%,
      transparent 70%);
  transform: translateX(-100%);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-line {
  height: 12px;
  border-radius: 999px;
}

.skeleton-block {
  border-radius: var(--radius-sm);
}

.skeleton-circle {
  border-radius: 999px;
}

.app {
  min-height: 100vh;
  position: relative;
  background: var(--bg);
}

.app-shell {
  display: flex;
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  transition: filter 240ms ease, transform 240ms ease;
  padding: 0;
  background: var(--sp-color-bg-side);
  align-items: stretch;
  overflow: hidden;
}

.app.modal-open .app-shell {
  filter: blur(12px);
  transform: scale(0.992);
}

.application {
  flex: 1;
  display: flex;
  min-height: calc(100vh - 1.2rem);
  height: calc(100vh - 1.2rem);
  height: -webkit-fill-available;
  width: 100%;
  max-width: none;
  margin: 0.6rem;
  background: transparent;
  border: none;
  box-shadow: none;
  align-items: flex-start;
  justify-content: flex-start;
}


.sidebar {
  position: relative;
  width: var(--sidebar-width, 256px);
  max-width: var(--sidebar-max-width, 320px);
  background: var(--sp-color-bg-side);
  padding: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  box-shadow: none;
  height: 100%;
  margin: auto 0;
  flex-shrink: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-6);
  width: 100%;
}

.sidebar-profile {
  position: relative;
  flex: 1;
}

.sidebar-profile-button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  background: var(--neutral-surface-subtle);
  color: var(--neutral-text-high);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  font-size: 1.3rem;
  font-weight: 500;
  cursor: pointer;
  flex: 1;
  min-height: 3rem;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.sidebar-profile-button:hover {
  background: var(--neutral-ui-bg-hover);
  color: var(--neutral-text-high);
}

.sidebar-profile-button.is-open {
  background: var(--neutral-ui-bg-active);
  color: var(--neutral-text-high);
}

.sidebar-profile-button:focus-visible {
  outline: none;
  box-shadow: var(--sp-shadow-focus-ring);
}

.sidebar-profile-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: var(--neutral-3);
  color: var(--neutral-text-low);
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid var(--neutral-border-subtle);
}

.sidebar-profile-icon.sidebar-profile-avatar {
  padding: 0;
  overflow: hidden;
  background: var(--surface-2);
}

.sidebar-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.sidebar-profile-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  gap: 0.2rem;
}

.sidebar-profile-name {
  font-size: 1.3rem;
  font-weight: 500;
}

.sidebar-profile-sub {
  font-size: 1.1rem;
  color: var(--neutral-text-low);
  font-weight: 500;
}

.sidebar-profile-caret {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--neutral-text-low);
  transition: transform 150ms ease;
}

.sidebar-profile-button.is-open .sidebar-profile-caret {
  transform: rotate(180deg);
}

.sidebar-profile-caret svg {
  width: 14px;
  height: 14px;
}

.profile-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 207px;
  max-width: 32rem;
  background: var(--sp-color-bg-base);
  border: 1px solid var(--neutral-border-subtle);
  border-radius: 6px;
  box-shadow: var(--sp-shadow-overlay);
  display: flex;
  flex-direction: column;
  overflow: visible;
  z-index: 100;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 170ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 220ms;
  will-change: transform, opacity;
}

.profile-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

.profile-menu-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 27rem;
  overflow: visible;
  padding: 4px 0;
}

.profile-menu-group {
  position: relative;
  display: flex;
  flex-direction: column;
}

.profile-menu-group::after {
  content: "";
  position: absolute;
  top: 0;
  right: -9px;
  width: 18px;
  height: 100%;
  background: transparent;
  pointer-events: auto;
}

.profile-menu-group:hover .profile-submenu,
.profile-menu-group:focus-within .profile-submenu,
.profile-menu-group.is-open .profile-submenu {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

.profile-menu-group:hover>.profile-menu-item::before,
.profile-menu-group:focus-within>.profile-menu-item::before,
.profile-menu-group.is-open>.profile-menu-item::before {
  background: var(--neutral-ui-bg);
}

.profile-submenu {
  position: absolute;
  top: 0;
  left: calc(100% + 6px);
  min-width: 192px;
  max-width: 32rem;
  background: var(--sp-color-bg-base);
  border: 1px solid var(--neutral-border-subtle);
  border-radius: 6px;
  box-shadow: var(--sp-shadow-overlay);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 110;
  opacity: 0;
  transform: translateX(-8px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 170ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 220ms;
  will-change: transform, opacity;
}

.profile-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 192px;
  max-width: 32rem;
  padding: 6px 12px 6px 14px;
  border: none;
  background: none;
  color: var(--sp-color-text-base);
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 450;
  text-align: left;
  white-space: nowrap;
  user-select: none;
}

.profile-menu-item::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 4px;
  right: 4px;
  border-radius: 4px;
  background: transparent;
  z-index: 0;
}

.profile-menu-item>* {
  position: relative;
  z-index: 1;
}

.profile-menu-item:hover::before,
.profile-menu-item:focus-visible::before {
  background: var(--neutral-ui-bg);
}

.profile-menu-item:active::before {
  background: var(--neutral-ui-bg-active);
}

.profile-menu-item:hover .profile-menu-icon,
.profile-menu-item:focus-visible .profile-menu-icon,
.profile-menu-item:hover .profile-menu-arrow,
.profile-menu-item:focus-visible .profile-menu-arrow {
  color: var(--sp-color-text-base);
}

.profile-menu-item:focus-visible {
  outline: none;
}

.profile-menu-item[aria-disabled="true"] {
  cursor: default;
  opacity: 0.38;
}

.profile-menu-item.is-selected::before {
  background: var(--neutral-ui-bg);
}

.profile-menu-item.is-selected .profile-menu-icon,
.profile-menu-item.is-selected .profile-menu-arrow {
  color: var(--sp-color-text-base);
}

.profile-menu-icon {
  display: inline-flex;
  align-items: center;
  color: var(--neutral-text-low);
}

.profile-menu-icon svg {
  width: 16px;
  height: 16px;
  margin-top: -1px;
}

.profile-menu-label {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.profile-menu-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu-arrow {
  width: 16px;
  text-align: right;
  font-size: 8px;
  color: var(--neutral-text-low);
}

.profile-menu-checkmark {
  width: 16px;
  text-align: right;
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 500;
  color: var(--sp-color-text-base);
  opacity: 0;
}

.profile-menu-checkmark.is-visible {
  opacity: 1;
}

.profile-menu-separator {
  width: 100%;
  border: none;
  border-top: 1px solid var(--neutral-border-subtle);
  margin: 4px 0;
}

.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sidebar-icon-button {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--neutral-surface-subtle);
  color: var(--neutral-text-low);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.sidebar-icon-button svg {
  width: 16px;
  height: 16px;
}

.sidebar-icon-button:hover {
  background: var(--neutral-ui-bg-hover);
  color: var(--neutral-text-high);
}

.sidebar-icon-button.active {
  background: var(--neutral-ui-bg-active);
  color: var(--neutral-text-high);
}

.sidebar-icon-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.profile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--sp-color-border-control);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--accent);
}

.profile-avatar-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
}

.profile-avatar-preview {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-weight: 600;
  overflow: hidden;
}

.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-initials {
  font-size: 1.4rem;
}

.profile-avatar-fields {
  display: grid;
  gap: var(--space-2);
}


.profile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 1.3rem;
}

.profile-meta span {
  color: var(--text-muted);
  font-size: 1.2rem;
}

.profile-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.profile-gear,
.profile-alert {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.12s ease-out, color 0.12s ease-out, border-color 0.12s ease-out;
}


.profile-gear svg,
.profile-alert svg {
  width: 14px;
  height: 14px;
}


.profile-gear:hover,
.profile-alert:hover {
  background: var(--sp-color-bg-menu-hover);
  color: var(--sp-color-text-menu-hover);
}


.profile-gear:focus-visible,
.profile-alert:focus-visible {
  outline: none;
  box-shadow: var(--sp-shadow-focus-ring);
}

.profile-alert.active {
  background: var(--sp-color-bg-menu-active);
  border-color: var(--sp-color-border-base);
  color: var(--sp-color-text-menu-active);
}


.sidebar-search input {
  width: 100%;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0 var(--space-3) var(--space-3);
  min-height: 0;
  flex: 1;
  overflow: auto;
  width: 100%;
}

.sidebar-label {
  font-size: 1.2rem;
  color: var(--neutral-text-low) !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.2rem 0.5rem 0.3rem;
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sidebar-group-label {
  font-size: 1.2rem;
  color: var(--neutral-text-low) !important;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.2rem 0.5rem 0.3rem;
}

.sidebar-group-items {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}


.menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.6rem;
  justify-content: flex-start;
  padding: 0.5rem 0.6rem;
  border-radius: 0.4rem;
  color: #eae8e6;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  font-size: 1.3rem;
  font-weight: 450;
  position: relative;
  appearance: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.menu-item span {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.menu-item svg {
  color: var(--neutral-text-low) !important;
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.menu-item:hover {
  background: var(--neutral-3);
  color: var(--sp-color-text-base);
}


.menu-item.active {
  color: var(--sp-color-text-base);
  background: var(--neutral-4);
  border-color: transparent;
}


.sidebar-footer {
  margin-top: auto;
  font-size: 1.2rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--sp-color-border-control);
  padding: 1rem 0.75rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}

.sidebar-footer-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--sp-color-border-control);
  background: var(--sp-color-bg-base);
}

.sidebar-footer-label {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.sidebar-footer-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.15rem;
  color: var(--text-secondary);
}

.sidebar-footer-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--success);
}

.sidebar-footer-count {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
}

.mode-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--sp-color-border-control);
  background: var(--sp-color-bg-base);
  margin-bottom: 0;
}

.mode-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-muted);
}

.mode-label svg {
  width: 12px;
  height: 12px;
}

.mode-label.active {
  color: var(--text-primary);
}

.mode-switch-toggle {
  --thumb-height: 16px;
  --thumb-width: 16px;
  --track-width: 36px;
  --track-height: 20px;
  --color-track-background: var(--neutral-ui-bg);
  width: var(--track-width);
  height: var(--track-height);
  border-radius: 999px;
  border: none;
  background-color: var(--color-track-background);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background-color 0.3s cubic-bezier(.19, 1, .22, 1);
}

.mode-switch-toggle .mode-knob {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mode-switch-toggle .mode-knob::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--thumb-width);
  height: var(--thumb-height);
  border-radius: 999px;
  background-color: #fff;
  border: 3px solid transparent;
  box-shadow: #00000042 0 .824357px 1.1541px -.625px, #00000040 0 2.10766px 2.95072px -1.25px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(.19, 1, .22, 1);
}

.mode-switch-toggle.on {
  --color-track-background: var(--primary-solid);
}

.mode-switch-toggle.on .mode-knob::after {
  transform: translateX(calc(var(--track-width) - var(--thumb-width) - 4px));
}

.mode-switch-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--neutral-solid), 0 0 0 calc(2px + 1px) var(--neutral-border-focus);
}

.mode-segmented {
  background: var(--neutral-ui-bg);
  border-radius: 5px;
  width: fit-content;
  padding: 2px;
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.mode-segmented-workspace {
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.mode-segment {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 450;
  color: var(--neutral-text-low);
  white-space: nowrap;
}

.mode-segment:focus-visible {
  outline: none;
  box-shadow: var(--sp-shadow-focus-ring);
}

.mode-segment-thumb {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 4px;
  background-color: var(--secondary-button-bg);
  box-shadow: var(--sp-shadow-subtle);
}

.mode-segment-label {
  position: relative;
  z-index: 2;
  transition: color 0.2s ease;
}

.mode-segment:hover .mode-segment-label {
  color: var(--neutral-text-high);
}

.mode-segment.is-active .mode-segment-label {
  color: var(--neutral-text-high);
}

.mode-segment.is-disabled {
  cursor: default;
  opacity: 0.38;
}

.mode-segment.is-disabled:focus-visible {
  box-shadow: none;
}

.mode-segment:disabled {
  pointer-events: none;
}

.main {
  flex: 1;
  min-width: 0;
  background: var(--sp-color-bg-base);
  border: 0.5px solid var(--sp-color-border-control);
  border-radius: 0 12px 12px 0;
  box-shadow: #00000006 0 3px 6px -2px, #0000000b 0 1px 1px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.main-inner {
  max-width: 1280px;
  padding: 2.4rem 2.4rem 6.4rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.main-inner.wide {
  max-width: 1600px;
}

.main.main-ticket-lock {
  overflow: hidden;
}

.main.main-ticket-lock .main-inner {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.main.main-ticket-lock .main-inner>.workspace.ticket-layout[data-ticket-view="detail"] {
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.main.main-ticket-lock .ticket-layout[data-ticket-view="detail"] {
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

.main.main-ticket-lock .ticket-layout[data-ticket-view="detail"]>.stack:first-child {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.main.main-ticket-lock .ticket-layout[data-ticket-view="detail"]>.stack:first-child .ticket-thread-card {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.main.main-ticket-lock .ticket-layout[data-ticket-view="detail"]>.stack:first-child .ticket-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.main.main-ticket-lock .ticket-user-pane {
  align-self: stretch;
  min-height: 0;
  overflow: auto;
}


.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
  border: 1px solid var(--sp-color-border-control);
  padding: var(--space-6);
  border-radius: 12px;
  background: var(--sp-color-bg-base);
  box-shadow: var(--sp-shadow-subtle);
  position: relative;
  overflow: hidden;
  animation: fade-in 0.35s ease;
}

.topbar.hero {
  background: none;
}

.theme-color-dark .topbar.hero {
  background: none;
}

@media (max-width: 900px) {
  .topbar.hero {
    background-image: none;
  }
}

.hero-main {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  color: var(--text-muted);
  font-weight: 500;
}

.breadcrumb-divider {
  color: var(--sp-color-border-base);
}

.topbar h1 {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1.2;
}

.topbar p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.4rem;
  line-height: 2rem;
}

.hero-controls {
  margin-top: var(--space-3);
}

.search-field {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0 1.2rem;
  height: 3rem;
  border-radius: 6px;
  border: 1px solid var(--sp-color-border-control);
  background: var(--sp-color-bg-base);
  max-width: 420px;
  transition: box-shadow 120ms ease-in, border-color 120ms ease-out, background-color 120ms ease-out;
}

.search-field:focus-within {
  border-color: var(--neutral-border-focus);
  box-shadow: var(--sp-shadow-focus-ring);
}

.search-field input {
  border: none;
  background: transparent;
  padding: 0;
  min-height: auto;
  font-size: 1.3rem;
  font-weight: 450;
  color: var(--sp-color-text-base);
}

.search-field input:focus {
  box-shadow: none;
}

.search-icon {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

.search-icon svg {
  width: 14px;
  height: 14px;
}

.topbar-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}


.sync-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.sync-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 1.1rem;
  font-weight: 500;
}

.sync-progress-track {
  position: relative;
  width: 72px;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.sync-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  transition: width 0.3s ease;
}

.sync-progress-label {
  min-width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


.subbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.subbar-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--secondary-button-bg);
  border: 1px solid var(--sp-color-border-control);
  color: var(--neutral-text-low);
  font-size: 1.3rem;
  padding: 0 1.2rem;
  height: 3rem;
  cursor: pointer;
  position: relative;
  font-weight: 450;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.tabs button:hover {
  background: var(--secondary-button-bg-hover);
  color: var(--sp-color-text-base);
}

.tabs button.active {
  background: var(--neutral-4);
  color: var(--neutral-text-high);
  font-weight: 500;
}

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--sp-color-border-control);
  padding: 0.2rem;
  background: transparent;
}

.segmented button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--neutral-text-low);
  font-size: 1.3rem;
  padding: 0 1.2rem;
  height: 3rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 450;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.segmented button:hover {
  background: var(--secondary-button-bg-hover);
  color: var(--neutral-text-high);
}

.segmented button.active {
  background: var(--neutral-4);
  color: var(--neutral-text-high);
  font-weight: 500;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--sp-color-border-control);
  padding-inline: 1.2rem;
  height: var(--button-size, 3.2rem);
  font-size: 1.2rem;
  font-weight: 450;
  font-family: var(--font-body);
  background: var(--secondary-button-bg);
  color: var(--neutral-text-low);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  appearance: none;
  user-select: none;
  transition: color 0.15s cubic-bezier(.4, 0, .2, 1), background-color 0.15s cubic-bezier(.4, 0, .2, 1), border-color 0.15s cubic-bezier(.4, 0, .2, 1), box-shadow 0.15s cubic-bezier(.4, 0, .2, 1), transform 0.15s cubic-bezier(.4, 0, .2, 1);
  box-shadow: var(--sp-shadow-button-secondary-default-first-layer), var(--sp-shadow-button-secondary-default-second-layer);
}


.button:hover {
  background: var(--secondary-button-bg-hover);
  color: var(--sp-color-text-base);
  border-color: var(--sp-color-border-control);
  box-shadow: var(--sp-shadow-button-secondary-hover-first-layer), var(--sp-shadow-button-secondary-hover-second-layer);
}


.button:active {
  background: var(--neutral-a3);
  color: var(--sp-color-text-base);
}


.button.primary {
  background: var(--neutral-solid);
  border-color: transparent;
  color: var(--neutral-text-inverted-low);
  box-shadow: var(--sp-shadow-button-actions-default-first-layer), var(--sp-shadow-button-actions-default-second-layer), inset 0 -1px 0.4px 0 var(--sp-color-button-border-top), inset 0 1px 0.4px 0 var(--sp-color-button-border-bottom);
}


.button.primary:hover {
  background: var(--neutral-solid-hover);
  color: var(--neutral-text-inverted-high);
  box-shadow: var(--sp-shadow-button-actions-hover-first-layer), var(--sp-shadow-button-actions-hover-second-layer), inset 0 -1px 0.4px 0 var(--sp-color-button-border-top), inset 0 1px 0.4px 0 var(--sp-color-button-border-bottom);
}


.button.primary:active {
  box-shadow: var(--sp-shadow-button-hidden), var(--sp-shadow-button-hidden), inset 0 -1px 0.4px 0 rgba(0, 0, 0, 0), inset 0 1px 0.4px 0 rgba(255, 255, 255, 0);
}


.button.destructive {
  background: var(--danger-solid);
  border-color: transparent;
  color: var(--sp-color-text-white);
  box-shadow: var(--sp-shadow-button-actions-default-first-layer), var(--sp-shadow-button-actions-default-second-layer), inset 0 -1px 0.4px 0 var(--sp-color-button-border-top), inset 0 1px 0.4px 0 var(--sp-color-button-border-bottom);
}

.button.destructive:hover {
  background: var(--danger-solid-hover);
  box-shadow: var(--sp-shadow-button-actions-hover-first-layer), var(--sp-shadow-button-actions-hover-second-layer), inset 0 -1px 0.4px 0 var(--sp-color-button-border-top), inset 0 1px 0.4px 0 var(--sp-color-button-border-bottom);
}

.button.destructive:active {
  box-shadow: var(--sp-shadow-button-hidden), var(--sp-shadow-button-hidden), inset 0 -1px 0.4px 0 rgba(0, 0, 0, 0), inset 0 1px 0.4px 0 rgba(255, 255, 255, 0);
}

.button.secondary {
  background: var(--secondary-button-bg);
  border: 1px solid var(--sp-color-border-control);
  color: var(--neutral-text-low);
}


.button.secondary:hover {
  background: var(--secondary-button-bg-hover);
}


.button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--neutral-text-low);
  box-shadow: none;
}


.button.ghost:hover {
  background: var(--neutral-a3);
  color: var(--sp-color-text-base);
}


.button.ghost:active {
  background: var(--neutral-a4);
  color: var(--sp-color-text-base);
}


.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.icon-button {
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: grid;
  place-items: center;
}

.icon-button svg {
  width: 16px;
  height: 16px;
}

.icon-button.danger {
  color: var(--color-danger-text);
}

.icon-button.danger:hover {
  background: var(--color-danger-background);
  border-color: var(--color-danger-border-subtle);
  color: var(--color-danger-text);
}

.menu-item:disabled,
.tabs button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.kpi-card {
  background: var(--surface-1);
  border-radius: 12px;
  border: 1px solid var(--sp-color-border-control);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}


.kpi-line {
  height: 3px;
  border-radius: 999px;
  margin-bottom: var(--space-3);
}

.kpi-label {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kpi-value {
  font-size: 2.2rem;
  font-weight: 600;
  margin-top: var(--space-2);
}

.kpi-meta {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.delta.up {
  color: var(--success);
}

.delta.down {
  color: var(--danger);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.25fr);
  gap: var(--space-5);
}

.workspace.workspace-wide {
  grid-template-columns: minmax(0, 4fr) minmax(0, 1.6fr);
}

.workspace.servers-workspace {
  grid-template-columns: minmax(0, 5fr) minmax(0, 1.35fr);
}


.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.card {
  background: var(--sp-color-bg-base);
  border: 1px solid var(--sp-color-border-control);
  border-radius: 12px;
  box-shadow: var(--sp-shadow-subtle);
}


.card-header {
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  text-align: left;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.card-title {
  font-size: 1.6rem;
  font-weight: 600;
}

.card-subtitle {
  color: var(--text-muted);
  font-size: 1.2rem;
}

.table-card {
  overflow: hidden;
}

.table-toolbar {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sp-color-border-control);
  background: var(--sp-color-bg-base);
}


.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.table-toolbar input,
.table-toolbar select {
  min-width: 150px;
  text-align: left;
}

.table-toolbar .multi-select {
  min-width: 150px;
}

.table-toolbar .multi-select.days-select {
  min-width: 120px;
}

.table-toolbar .multi-select.status-select {
  min-width: 240px;
}

.table-toolbar .multi-select.purpose-select {
  min-width: 220px;
}

.table-toolbar input {
  width: 220px;
}

.table-wrapper {
  max-height: 70vh;
  min-height: 360px;
  overflow: auto;
}

.table-wrapper.table-wrapper-no-x {
  overflow-x: hidden;
  overflow-y: auto;
}

.users-view-tabs {
  margin-bottom: var(--space-3);
}

.users-info-workspace {
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  align-items: start;
}

.users-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.users-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.users-info-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
}

.users-info-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.users-info-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.users-info-toolbar input {
  flex: 1;
  min-width: 0;
  width: auto;
}

.users-info-scroll {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 70vh;
  overflow: auto;
  padding-right: 0.2rem;
}

.users-info-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.users-info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 12px;
  border: 1px solid var(--sp-color-border-control);
  background: var(--sp-color-bg-base);
  text-align: left;
  cursor: pointer;
  width: 100%;
  appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background-color 150ms ease;
}

.users-info-item:hover {
  border-color: var(--sp-color-border-control);
  box-shadow: var(--sp-shadow-subtle);
  transform: translateY(-1px);
}

.users-info-item.active {
  background: var(--surface-2);
  border-color: var(--border);
}

.users-info-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.users-info-item-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
}

.users-info-item-sub {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.users-info-item-meta {
  font-size: 1.05rem;
  color: var(--text-muted);
}

.users-info-item-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  text-align: right;
  min-width: 140px;
}

.users-info-item-time {
  font-size: 1.05rem;
  color: var(--text-muted);
}

.users-info-empty {
  padding: var(--space-4);
  border-radius: 12px;
  border: 1px solid var(--sp-color-border-control);
  background: var(--sp-color-bg-base);
  text-align: center;
  color: var(--text-muted);
  font-size: 1.2rem;
}

.users-info-empty strong {
  display: block;
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.users-info-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: flex-start;
  min-width: 0;
}

.users-info-card .form-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.users-info-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.users-info-identity-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
}

.users-info-identity-sub {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.users-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.users-info-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.users-info-divider {
  height: 1px;
  background: var(--sp-color-border-control);
}

.users-info-chart {
  margin-top: 0;
}

.users-info-chart-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.users-info-chart-controls .tabs,
.users-info-chart-controls .segmented {
  margin: 0;
}

.users-info-chart-controls .tabs button,
.users-info-chart-controls .segmented button {
  height: 2.6rem;
  font-size: 1.05rem;
  padding: 0 1rem;
}

.users-info-alert {
  margin-top: var(--space-2);
}

.session-table {
  max-height: 320px;
  min-height: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}

.users-table,
.transactions-table {
  table-layout: auto;
  min-width: 100%;
  width: max-content;
}

.servers-table {
  table-layout: auto;
  min-width: 100%;
  width: max-content;
}

.transactions-table {
  width: 100%;
}

.oneoff-table {
  table-layout: auto;
  min-width: 100%;
  width: max-content;
}

.oneoff-table th,
.oneoff-table td {
  white-space: nowrap;
}

.oneoff-ip {
  font-family: var(--sp-typography-content-mono-font-family);
}

.oneoff-mode.sold {
  color: var(--danger-text-low);
  font-weight: 600;
}

.oneoff-button {
  cursor: default;
}

.oneoff-button:disabled {
  opacity: 1;
}

.oneoff-button.sold {
  background: var(--color-danger-background);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border-subtle);
}

.oneoff-ping.muted {
  color: var(--text-muted);
}

.users-table col.col-user {
  width: 18%;
}

.users-table col.col-plan {
  width: 10%;
}

.users-table col.col-status {
  width: 10%;
}

.users-table col.col-subscription {
  width: 18%;
}

.users-table col.col-traffic {
  width: 12%;
}

.users-table col.col-activity {
  width: 22%;
}

.users-table col.col-actions {
  width: 10%;
}

.users-table td {
  overflow-wrap: normal;
}

.users-table th,
.users-table td,
.transactions-table th,
.transactions-table td {
  white-space: nowrap;
}

.servers-table th,
.servers-table td {
  white-space: nowrap;
}

.transactions-table th,
.transactions-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--surface-1);
  text-align: left;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 1.2rem;
}


.sort-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.sort-button .sort-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--text-muted);
  opacity: 0.6;
  transform: translateY(1px);
  transition: transform 0.15s ease, border-top-color 0.15s ease, opacity 0.15s ease;
}

.sort-button.active {
  color: var(--text-primary);
}

.sort-button.active .sort-caret {
  border-top-color: var(--text-primary);
  opacity: 1;
}

.sort-button.asc .sort-caret {
  transform: translateY(-1px) rotate(180deg);
}

tbody td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-strong);
}


tbody tr:hover {
  background: var(--sp-color-bg-menu-hover);
}


tbody tr.selected {
  background: var(--sp-color-bg-menu-active);
}


.session-current {
  background: var(--sp-color-bg-menu-active);
}


.server-row {
  cursor: pointer;
}

.row-title {
  font-weight: 600;
}

.row-link {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
}

.row-link:hover {
  color: var(--accent);
}

.row-link-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}

.cell-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.table-footer {
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.pagination {
  display: flex;
  gap: var(--space-1);
}

.pagination button {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0 0.8rem;
  min-height: 2.8rem;
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.pagination button:hover {
  background: var(--color-neutral-hover);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 600;
  border: 1px solid var(--color-neutral-chip-background-hover);
  background: var(--color-neutral-chip-background);
  color: var(--color-neutral-text-subtle);
}

.status-badge.active {
  padding: 3px 10px;
  font-size: 1rem;
  background: var(--color-success-background);
  color: color-mix(in srgb, var(--color-success-text) 55%, white);
  border-color: var(--color-success-border-subtle);
}

.status-badge.default {
  background: var(--color-neutral-chip-background);
  color: var(--color-neutral-text-subtle);
  border-color: var(--color-neutral-border);
}

.status-badge.warning {
  background: var(--color-warning-background);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border-subtle);
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-right: var(--space-4);
}

.side-panel .form-grid,
.side-panel .monitoring-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flag-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.flag-label-text {
  white-space: nowrap;
}

.flag-icon {
  width: 1.6rem;
  height: 1.2rem;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--color-neutral-border);
  background-color: var(--color-neutral-background-muted);
  flex-shrink: 0;
}

.badge .flag-icon {
  margin-right: 0.4rem;
}

.inline-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.label-sep {
  color: var(--text-muted);
}

.label-part {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.country-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.country-item {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  color: var(--text-secondary);
  transition: border-color 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}

.country-item:hover {
  background: var(--color-neutral-hover);
  border-color: var(--color-neutral-border);
}

.country-item.active {
  background: var(--color-primary-background);
  border-color: var(--color-primary-border-subtle);
  color: var(--color-primary-text);
}

.country-item:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.country-code {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.country-code-text {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.country-item.active .country-code {
  color: var(--color-primary-text);
}

.country-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.country-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.country-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  font-size: 1.2rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}

.country-option input {
  margin: 0;
}

.country-option:hover {
  background: var(--color-neutral-hover);
  border-color: var(--color-neutral-border);
}

.country-option.active {
  background: var(--color-primary-background);
  border-color: var(--color-primary-border-subtle);
  color: var(--color-primary-text);
}

.whitelist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.whitelist-button {
  border: 1px solid var(--color-neutral-border);
  background: var(--color-neutral-background-muted);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0 0.8rem;
  height: 2.6rem;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}

.whitelist-button:hover {
  background: var(--color-neutral-hover);
  border-color: var(--color-neutral-border);
}

.whitelist-button.active {
  background: var(--color-success-background);
  color: var(--color-success-text);
  border-color: var(--color-success-border-subtle);
}

.whitelist-button.context-hit {
  background: var(--color-danger-background-subtle);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border-subtle);
}

.whitelist-presets {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-3);
}

.whitelist-preset {
  display: grid;
  gap: var(--space-2);
}

.whitelist-preset-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.whitelist-preset-title {
  font-weight: 600;
  color: var(--neutral-text-high);
}

.whitelist-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.whitelist-chip {
  border: 1px solid var(--color-neutral-border);
  background: var(--color-neutral-background-muted);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 0 0.9rem;
  height: 2.6rem;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}

.whitelist-chip:hover {
  background: var(--color-neutral-hover);
  border-color: var(--color-neutral-border);
}

.whitelist-chip.active {
  background: var(--color-primary-background);
  color: #ffffff;
  border-color: var(--color-primary-border-subtle);
}

.whitelist-chip:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 16, 22, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  z-index: 50;
  opacity: 0;
  animation: modal-fade 220ms ease forwards;
}

.modal-card {
  width: min(1800px, 98vw);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 920px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  animation: modal-rise 260ms ease forwards;
  will-change: transform, opacity;
}

.modal-card-wide {
  width: min(760px, 100%);
}

.modal-card-admin-settings {
  width: min(1800px, 98vw);
}

.modal-card .form-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

.mode-toggle {
  margin-bottom: var(--space-4);
}

.create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-actions {
  justify-content: flex-end;
}

.form-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.stats-form-body {
  background: #1f1d1b;
  --stats-card-bg: #1f1d1b;
  --stats-card-border: #2b2927;
  --stats-chart-bg: #171513;
  --stats-chart-border: #2b2927;
  --stats-chart-grid: rgba(255, 255, 255, 0.08);
  --stats-chart-axis-line: rgba(255, 255, 255, 0.18);
  --stats-chart-line: #cfc9c2;
  --stats-chart-fill-start: rgba(207, 201, 194, 0.1);
  --stats-chart-fill-end: rgba(207, 201, 194, 0);
  --stats-chart-axis: rgba(255, 255, 255, 0.55);
  --stats-chart-tooltip-divider: rgba(255, 255, 255, 0.2);
  --surface-1: #1f1d1b;
  --surface-2: #262320;
  --border: #2b2927;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.span-2 {
  grid-column: 1 / -1;
}

.form-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

label {
  display: block;
  font-size: 1.2rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-bottom: var(--space-2);
}

input,
select,
textarea {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--sp-color-border-control);
  padding: 0.4rem 1.2rem;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 450;
  font-family: var(--font-body);
  background: var(--secondary-button-bg);
  color: var(--neutral-text-low);
  min-height: 3.2rem;
  transition: box-shadow 120ms ease-in, border-color 120ms ease-out, background-color 120ms ease-out;
}


.multi-select {
  position: relative;
}

.multi-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  border-radius: 6px;
  border: 1px solid var(--sp-color-border-control);
  padding: 0.4rem 1.2rem;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 450;
  font-family: var(--font-body);
  background: var(--secondary-button-bg);
  color: var(--neutral-text-low);
  min-height: 3.2rem;
  cursor: pointer;
  transition: box-shadow 120ms ease-in, border-color 120ms ease-out, background-color 120ms ease-out;
  text-align: left;
}


.multi-select-trigger::after {
  content: "";
  margin-left: auto;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid var(--neutral-text-low);
}

.multi-select-trigger.open,
.multi-select-trigger:focus {
  border-color: var(--neutral-border-focus);
  background: var(--secondary-button-bg);
  box-shadow: var(--sp-shadow-focus-ring);
  color: var(--sp-color-text-base);
}

.multi-select-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.6rem), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 1.6rem), transparent 100%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.multi-select-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--sp-color-bg-base);
  border: 1px solid var(--neutral-border-subtle);
  border-radius: 6px;
  box-shadow: var(--sp-shadow-overlay);
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 170ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 220ms;
  will-change: transform, opacity;
}

.multi-select.is-open .multi-select-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

.proxy-sales-select .multi-select-menu {
  width: 200%;
  right: auto;
}

.multi-select-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 12px 6px 14px;
  min-height: 3.2rem;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  color: var(--sp-color-text-base);
  font-size: 1.3rem;
  font-weight: 450;
  transition: background-color 150ms ease, color 150ms ease;
  text-align: left;
  white-space: nowrap;
}

.multi-select-option::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 4px;
  right: 4px;
  border-radius: 4px;
  background: transparent;
  z-index: 0;
}

.multi-select-option>* {
  position: relative;
  z-index: 1;
}

.multi-select-option:hover::before,
.multi-select-option:focus-within::before {
  background: var(--neutral-ui-bg);
}

.multi-select-option:active::before {
  background: var(--neutral-ui-bg-active);
}

.multi-select-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.multi-select-label {
  flex: 1;
}

.multi-select-check {
  width: 16px;
  text-align: right;
  font-size: 1.6rem;
  line-height: 2rem;
  font-weight: 500;
  color: var(--sp-color-text-base);
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.multi-select-check::after {
  content: "\2713";
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.multi-select-option input:checked~.multi-select-label {
  color: var(--sp-color-text-base);
  font-weight: 500;
}

.multi-select-option input:checked~.multi-select-check::after {
  opacity: 1;
}

.multi-select-option input:checked~.multi-select-check,
.multi-select-option.is-selected .multi-select-check,
.multi-select-option.selected .multi-select-check {
  opacity: 1;
}

.multi-select-option.is-selected::before,
.multi-select-option.selected::before {
  background: var(--neutral-ui-bg);
}

.copy-input {
  font-family: var(--font-mono);
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--color-primary-action);
}

input::placeholder,
textarea::placeholder {
  color: var(--sp-color-text-input-placeholder);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--neutral-border-focus);
  background: var(--sp-color-bg-base);
  box-shadow: var(--sp-shadow-focus-ring);
}


input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.menu-item:focus-visible,
.tabs button:focus-visible,
.segmented button:focus-visible,
.row-link:focus-visible,
.pagination button:focus-visible {
  outline: none;
  box-shadow: var(--sp-shadow-focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.checkbox.span-2 {
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.checkbox.span-2>div {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 0;
}

.checkbox.span-2 .muted {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.checkbox.span-2 input[type="checkbox"] {
  margin-top: 0.2rem;
}

.checkbox input[type="checkbox"] {
  appearance: none;
  --thumb-height: 16px;
  --thumb-width: 16px;
  --track-width: 36px;
  --track-height: 20px;
  --color-track-background: var(--neutral-ui-bg);
  width: var(--track-width);
  height: var(--track-height);
  border-radius: 999px;
  background-color: var(--color-track-background);
  cursor: pointer;
  position: relative;
  border: none;
  display: inline-flex;
  transition: background-color 0.3s cubic-bezier(.19, 1, .22, 1), box-shadow 0.3s cubic-bezier(.19, 1, .22, 1);
}

.checkbox input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: var(--thumb-width);
  height: var(--thumb-height);
  border-radius: 999px;
  background: #fff;
  border: 3px solid transparent;
  box-shadow: #00000042 0 .824357px 1.1541px -.625px, #00000040 0 2.10766px 2.95072px -1.25px;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(.19, 1, .22, 1);
}

.checkbox input[type="checkbox"]:focus {
  background-color: var(--color-track-background);
  box-shadow: none;
}

.checkbox input[type="checkbox"]:checked {
  --color-track-background: var(--primary-solid);
}

.checkbox input[type="checkbox"]:checked::after {
  transform: translateX(calc(var(--track-width) - var(--thumb-width) - 4px));
}

.checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--neutral-solid), 0 0 0 calc(2px + 1px) var(--neutral-border-focus);
}

.checkbox input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.gitbook-switch-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.gitbook-switch-row.span-2 {
  align-items: flex-start;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.gitbook-switch-row.span-2 .gitbook-switch-label {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 0;
}

.gitbook-switch-row.span-2 .muted {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.gitbook-switch-row.span-2 .gitbook-switch {
  margin-top: 0.2rem;
}

.gitbook-switch {
  --thumb-height: 16px;
  --thumb-width: 16px;
  --track-width: 36px;
  --track-height: 20px;
  --color-track-background: var(--neutral-ui-bg);
  background-color: var(--color-track-background);
  border-radius: 9999px;
  cursor: pointer;
  height: var(--track-height);
  position: relative;
  width: var(--track-width);
  display: flex;
}

.gitbook-switch[data-state="disabled"] {
  cursor: not-allowed;
}

.gitbook-switch[data-state="checked"] {
  --color-track-background: var(--primary-solid);
}

.gitbook-switch[data-state="checked-disabled"] {
  cursor: not-allowed;
  opacity: 0.38;
}

.gitbook-switch__input {
  opacity: 0;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: inherit;
  margin: 0;
  padding: 0;
}

.gitbook-switch__thumb {
  width: 2rem;
  height: 2rem;
}

.gitbook-switch__thumb::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: #00000042 0 .824357px 1.1541px -.625px, #00000040 0 2.10766px 2.95072px -1.25px;
  background-color: #fff;
  border: 3px solid transparent;
  border-radius: 9999px;
  height: var(--thumb-height);
  width: var(--thumb-width);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(.19, 1, .22, 1);
}

[data-state="loading"] .gitbook-switch__thumb::after {
  border-top-color: var(--sp-color-text-light);
  animation: gitbook-switch-rotate 0.8s cubic-bezier(.5, 0, .5, 1) infinite;
  animation-delay: 0.1s;
  box-shadow: none;
}

.gitbook-switch__input:checked+.gitbook-switch__thumb::after {
  translate: calc(var(--track-width) - var(--thumb-width) - 4px) 0;
}

.gitbook-switch__input:focus-visible+.gitbook-switch__thumb::before {
  border-radius: 9999px;
  content: "";
  height: var(--track-height);
  left: 0;
  outline: transparent solid 2px;
  position: absolute;
  top: 0;
  width: var(--track-width);
  box-shadow: 0 0 0 1px var(--neutral-solid), 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  --tw-ring-offset-width: 1px;
  --tw-ring-color: var(--neutral-border-focus);
}

@keyframes gitbook-switch-rotate {
  to {
    transform: rotate(360deg);
  }
}

.alert {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  background: var(--color-neutral-background-muted);
  color: var(--color-neutral-text-subtle);
  border: 1px solid var(--color-neutral-border);
}

.alert.error {
  background: var(--color-danger-background);
  color: var(--color-danger-text);
  border-color: var(--color-danger-border);
  white-space: pre-wrap;
  word-break: break-word;
}

.report {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: 1.2rem;
  line-height: 1.5;
  white-space: pre-wrap;
  border: 1px solid var(--border);
  max-height: 200px;
  overflow: auto;
  font-family: var(--font-mono);
}

.row-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.servers-table .row-actions {
  flex-wrap: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 500;
  border: 1px solid var(--sp-color-badge-border-secondary);
  background: var(--sp-color-badge-bg-secondary);
  color: var(--sp-color-badge-text-secondary);
}

.badge.success {
  background: var(--sp-color-badge-bg-success);
  color: var(--sp-color-badge-text-success);
  border-color: var(--sp-color-badge-border-success);
}

.badge.warning {
  background: var(--sp-color-bg-warning-default);
  color: var(--sp-color-badge-text-warning);
  border-color: var(--sp-color-badge-border-warning);
}

.badge.neutral {
  background: var(--sp-color-badge-bg-secondary);
  color: var(--sp-color-badge-text-secondary);
  border-color: var(--sp-color-badge-border-secondary);
}

.asn-badge {
  gap: 0;
}

.asn-shimmer-text {
  display: inline-block;
  color: transparent;
  background-image: repeating-linear-gradient(to right,
      var(--sp-color-badge-text-secondary) 0px,
      var(--sp-color-badge-text-secondary) 60px,
      color-mix(in srgb, var(--sp-color-badge-text-secondary) 30%, white) 82px,
      color-mix(in srgb, var(--sp-color-badge-text-secondary) 5%, white) 100px,
      color-mix(in srgb, var(--sp-color-badge-text-secondary) 30%, white) 118px,
      var(--sp-color-badge-text-secondary) 140px,
      var(--sp-color-badge-text-secondary) 200px);
  background-size: 200px 100%;
  background-position: 0 50%;
  background-repeat: repeat;
  will-change: background-position;
  -webkit-background-clip: text;
  background-clip: text;
  animation: asn-shimmer 3.2s linear infinite;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-secondary);
  font-size: 1.2rem;
}

.activity-item strong {
  color: var(--text-primary);
  font-size: 1.2rem;
}

.monitoring-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0;
}

.monitor-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--surface-2);
}


.monitor-label {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.monitor-value {
  font-size: 1.4rem;
  font-weight: 400;
}

.monitor-meta {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.empty-state {
  padding: var(--space-6);
  display: grid;
  gap: var(--space-2);
  text-align: center;
  color: var(--text-secondary);
}

.empty-state strong {
  color: var(--text-primary);
  font-size: 1.4rem;
}

.empty-icon {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: var(--accent);
  margin: 0 auto;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.help-card {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.help-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1.2rem;
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: var(--bg);
  position: relative;
}

.theme-toggle {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1rem;
  height: 2.8rem;
  border-radius: 999px;
  border: 1px solid var(--sp-color-border-control);
  background: var(--sp-color-bg-muted);
  color: var(--text-secondary);
  font-size: 1.1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
  background: var(--sp-color-bg-standout-side-default);
  color: var(--sp-color-text-menu-hover);
}

.theme-toggle-icon {
  display: inline-flex;
  align-items: center;
}

.theme-toggle-icon svg {
  width: 14px;
  height: 14px;
}

.login-card {
  width: min(420px, 100%);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  border: 1px solid var(--sp-color-border-control);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
}

.login-card h1 {
  margin: 0 0 var(--space-2);
  font-size: 2rem;
}

.login-card p {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
  font-size: 1.2rem;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
  border: 1px solid var(--sp-color-border-control);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
  background: var(--sp-color-border-control);
  border: 1px solid var(--sp-color-border-control);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .app {
    animation: fade-in 320ms ease both;
  }

  .login-card {
    animation: rise-in 360ms ease both;
  }

  .main-inner>* {
    animation: rise-in 360ms ease both;
  }

  .main-inner>*:nth-child(1) {
    animation-delay: 40ms;
  }

  .main-inner>*:nth-child(2) {
    animation-delay: 80ms;
  }

  .main-inner>*:nth-child(3) {
    animation-delay: 120ms;
  }

  .main-inner>*:nth-child(4) {
    animation-delay: 160ms;
  }

  .main-inner>*:nth-child(5) {
    animation-delay: 200ms;
  }

  .main-inner>*:nth-child(6) {
    animation-delay: 240ms;
  }
}

@media (prefers-reduced-motion: reduce) {

  .app,
  .login-card,
  .main-inner>*,
  .modal-backdrop,
  .modal-card,
  .ticket-user-section.ticket-user-section-reveal,
  .ticket-message.is-entering,
  .ticket-message.is-entering .ticket-message-avatar,
  .ticket-message.is-entering .ticket-message-bubble,
  .ticket-composer.is-sending .button.primary {
    animation: none !important;
  }

  .skeleton::after {
    animation: none !important;
  }

  .modal-backdrop,
  .modal-card {
    opacity: 1;
    transform: none;
  }

  .ticket-user-section.ticket-user-section-reveal,
  .ticket-message.is-entering {
    opacity: 1 !important;
    transform: none !important;
  }

  .app-shell {
    transition: none;
  }

  .ticket-item:hover::after,
  .ticket-item:focus-visible::after {
    animation: none !important;
    background-position: 0 0;
  }
}

@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@keyframes asn-shimmer {
  0% {
    background-position: 0px 50%;
  }

  /* pause before sweep */
  18% {
    background-position: 0px 50%;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  /* sweep left → right */
  82% {
    background-position: 200px 50%;
    animation-timing-function: linear;
  }

  /* brief hold, then loop resets seamlessly */
  100% {
    background-position: 200px 50%;
  }
}


@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

@keyframes modal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-rise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }

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

.chart-wrap {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: var(--space-4);
  position: relative;
}

.sales-chart {
  width: 100%;
  height: auto;
  display: block;
  cursor: crosshair;
  shape-rendering: geometricPrecision;
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: 1.1rem;
  color: var(--text-muted);
}

.chart-box {
  border: 1px solid var(--sp-color-border-control);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  position: relative;
}

.stats-chart-box {
  margin-top: var(--space-2);
  --stats-plot-pad-left: 52px;
  --stats-plot-pad-right: 20px;
  --stats-plot-pad-top: 20px;
  --stats-plot-pad-bottom: 20px;
  --stats-chart-grid: color-mix(in srgb, var(--text-muted) 45%, transparent);
  --stats-chart-axis-line: color-mix(in srgb, var(--text-muted) 65%, transparent);
  --stats-chart-fill-start: color-mix(in srgb,
      var(--stats-chart-line) 10%,
      transparent);
  --stats-chart-fill-end: color-mix(in srgb,
      var(--stats-chart-line) 0%,
      transparent);
  --stats-chart-axis: color-mix(in srgb, var(--text-muted) 90%, transparent);
  --stats-chart-tooltip-divider: color-mix(in srgb,
      var(--text-muted) 40%,
      transparent);
}

.stats-chart-box-revenue {
  --stats-plot-pad-left: 80px;
}

.chart-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.stats-chart-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.stats-chart-controls .segmented {
  margin: 0;
}

.stats-chart-controls .segmented button {
  height: 2.6rem;
  font-size: 1.05rem;
  padding: 0 1rem;
}

.chart-title {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.chart-title-sub {
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.change-chart {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--stats-control-bg);
  border: 1px solid var(--stats-control-border);
  border-radius: 999px;
  padding: 2px;
}

.chart-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: none;
  background: transparent;
  color: var(--stats-control-text);
  font-size: 1.05rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.chart-mode.is-active {
  background: var(--stats-control-active-bg);
  color: var(--stats-control-active-text);
}

.chart-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stats-echart {
  position: relative;
  width: 100%;
  height: 274px;
  margin-bottom: var(--space-4);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

.stats-plot {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: default;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  font-stretch: normal;
  font-family: var(--font-body);
}

.stats-canvas,
.stats-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stats-overlay {
  pointer-events: none;
}


.stats-echart .stats-hover-line {
  display: block;
  stroke: var(--stats-chart-line);
  stroke-width: 1;
  opacity: 0.6;
}

.radius-chart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.radius-div {
  flex: 1;
  min-width: 240px;
}

.radius-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.radius-chart-box {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.radius-echart {
  width: 180px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.radius-echart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.radius-chart .chart-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0;
}

.radius-chart .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.4rem;
  border-radius: var(--radius-sm);
  transition: transform 150ms ease, background 150ms ease;
}

.radius-chart .legend-item:hover {
  background: var(--surface-2);
  transform: translateX(4px);
}

.radius-chart .legend-color {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.radius-chart .legend-text {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-empty {
  font-size: 1rem;
  color: var(--text-muted);
  padding: 0.4rem;
}

.donut-empty {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 1;
}

.chart-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.sales-summary-compare {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}

.sales-summary-compare-label {
  font-size: 1.1rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sales-summary-compare-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
}

.sales-summary-compare-delta {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.sales-summary-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-3);
  align-items: start;
}

.sales-summary-head {
  font-size: 1.1rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sales-summary-row {
  display: contents;
}

.sales-summary-period {
  font-size: 1.2rem;
  font-weight: 600;
}

.sales-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sales-summary-value {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
}

.sales-summary-delta {
  font-size: 1rem;
  color: var(--text-secondary);
}

.sales-summary-delta.positive,
.sales-summary-compare-delta.positive {
  color: var(--success-text-low);
}

.sales-summary-delta.negative,
.sales-summary-compare-delta.negative {
  color: var(--danger-text-low);
}

.sales-summary-note {
  margin-top: var(--space-3);
}

.sales-advanced {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: var(--space-4);
  align-items: center;
}

.sales-pie-wrap {
  position: relative;
  min-height: 220px;
  display: grid;
  place-items: center;
}

.sales-pie {
  width: 200px;
  height: 200px;
}

.sales-pie-center {
  position: absolute;
  text-align: center;
}

.sales-pie-total {
  font-size: 1.4rem;
  font-weight: 600;
}

.sales-pie-sub {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.sales-pie-legend {
  display: grid;
  gap: var(--space-2);
}

.sales-pie-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-2);
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.sales-pie-label {
  font-weight: 600;
}

.sales-pie-value {
  font-weight: 600;
}

.sales-pie-percent {
  font-size: 1rem;
  color: var(--text-secondary);
}

.sales-hover-line {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  opacity: 0.7;
}

.sales-hover-point {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

.sales-tooltip {
  position: absolute;
  min-width: 180px;
  max-width: 240px;
  background: var(--sp-color-bg-base);
  border: 1px solid var(--neutral-border-subtle);
  border-radius: 8px;
  box-shadow: var(--sp-shadow-overlay);
  padding: 0.8rem 1rem;
  font-size: 1.1rem;
  color: var(--sp-color-text-base);
  pointer-events: none;
  z-index: 5;
  transform: translateX(12px);
}

.stats-tooltip {
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  min-width: 160px;
  max-width: 220px;
  font-size: 13px;
}

.stats-tooltip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1;
}

.stats-tooltip-label {
  color: var(--sp-color-text-base);
  font-size: 13px;
  font-weight: 400;
}

.stats-tooltip-date {
  margin-left: auto;
  color: var(--sp-color-text-base);
  font-size: 13px;
  font-weight: 500;
}

.stats-tooltip-divider {
  width: 100%;
  height: 0;
  border-top: 1px dashed var(--stats-chart-tooltip-divider, #ebebec);
  margin: 8px 0;
}

.stats-tooltip-value {
  margin-top: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--sp-color-text-base);
}

.sales-tooltip.is-left {
  transform: translateX(calc(-100% - 12px));
}

.sales-tooltip-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.6rem;
}

.sales-tooltip-title {
  font-size: 1.2rem;
  font-weight: 600;
}

.sales-tooltip-sub {
  font-size: 1rem;
  color: var(--text-secondary);
}

.sales-tooltip-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sales-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sales-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.sales-tooltip-label {
  flex: 1;
  color: var(--text-secondary);
}

.sales-tooltip-value {
  font-weight: 600;
}

.availability-legend {
  margin-top: 0;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.legend-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.legend-label {
  font-size: 1.2rem;
  font-weight: 600;
}

.legend-sub {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.legend-value {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-muted);
}

.proxy-sales-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.proxy-sales-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.proxy-sales-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.proxy-sales-label {
  font-size: 1.2rem;
  font-weight: 600;
}

.proxy-sales-sub {
  font-size: 1.1rem;
  color: var(--text-secondary);
}

.proxy-sales-value {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .main.main-ticket-lock {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .main.main-ticket-lock .main-inner {
    height: auto;
    min-height: auto;
  }

  .main.main-ticket-lock .main-inner>.workspace.ticket-layout[data-ticket-view="detail"] {
    flex: 0 0 auto;
    overflow: visible;
  }

  .main.main-ticket-lock .ticket-layout[data-ticket-view="detail"]>.stack:first-child,
  .main.main-ticket-lock .ticket-layout[data-ticket-view="detail"]>.stack:first-child .ticket-thread-card,
  .main.main-ticket-lock .ticket-user-pane {
    height: auto;
    overflow: visible;
  }

  .main.main-ticket-lock .ticket-user-pane {
    align-self: flex-start;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .side-panel {
    margin-right: 0;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .side-panel .form-grid,
  .side-panel .monitoring-grid {
    grid-template-columns: 1fr;
  }

  .create-grid {
    grid-template-columns: 1fr;
  }

  .country-picker {
    grid-template-columns: 1fr;
  }

  .sales-advanced {
    grid-template-columns: 1fr;
  }

  .sales-summary-grid {
    grid-template-columns: 1fr;
  }

  .sales-summary-head {
    display: none;
  }

  .sales-summary-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
  }

  .users-info-workspace {
    grid-template-columns: 1fr;
  }

  .users-info-panel {
    align-self: stretch;
  }
}

@media (max-width: 720px) {
  .main-inner {
    padding: 1.8rem 1.4rem 4.8rem;
  }

  .topbar {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .tabs {
    gap: 0.8rem;
  }

  .users-info-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .users-info-chart-controls {
    justify-content: flex-start;
  }

  .users-info-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .users-info-item-aside {
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    width: 100%;
  }

  .users-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 900px) {
  .sidebar {
    padding: var(--space-2) 0 0;
    gap: 0;
  }

  .sidebar-header {
    padding: 0 var(--space-2);
    margin-bottom: var(--space-4);
  }

  .sidebar-section {
    padding: 0 var(--space-2) var(--space-2);
    gap: 0.6rem;
  }

  .sidebar-label,
  .sidebar-group-label {
    font-size: 1rem;
    padding: 0.1rem 0.4rem 0.2rem;
  }

  .sidebar-group,
  .sidebar-group-items {
    gap: 0.2rem;
  }

  .menu-item {
    min-height: 2.4rem;
    padding: 0.4rem 0.5rem;
    font-size: 1.2rem;
  }

  .sidebar-footer {
    padding: 0.8rem 0.6rem 1rem;
    gap: 0.6rem;
  }
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

@media (max-width: 960px) {
  .app-shell {
    padding: 0;
  }

  .application {
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
    height: 100vh;
  }

  .main {
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .main-inner {
    padding: 2.2rem 1.8rem 5.6rem;
  }
}

.inventory-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.inventory-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: 1.2rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out;
}

.inventory-picker-item:hover {
  background: var(--color-neutral-hover);
  border-color: var(--color-neutral-border);
}

.inventory-picker-item:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.inventory-picker-title {
  font-weight: 600;
  color: var(--text-primary);
}

.inventory-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.inventory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--border);
}

.inventory-item:last-child {
  border-bottom: none;
}

.inventory-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asn-testing-textarea {
  min-height: 220px;
  resize: vertical;
  font-family: var(--font-mono);
}


.stats-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.6rem;
  background: var(--stats-control-bg);
  border: 1px solid var(--stats-control-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.stats-range-label {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stats-control-text);
  opacity: 0.7;
}

.stats-range input[type="range"] {
  width: 140px;
  --range-progress: 0%;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,
      var(--stats-accent-1) 0%,
      var(--stats-accent-2) var(--range-progress),
      var(--stats-track) var(--range-progress),
      var(--stats-track) 100%);
  outline: none;
  cursor: pointer;
}

.stats-range input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

.stats-range input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--stats-accent-3);
  border: 2px solid var(--stats-accent-1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  margin-top: -5px;
}

.stats-range input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--stats-track);
}

.stats-range input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--stats-accent-1), var(--stats-accent-2));
}

.stats-range input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--stats-accent-3);
  border: 2px solid var(--stats-accent-1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.stats-range input[type="range"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(127, 90, 244, 0.35);
}

.stats-range-value {
  min-width: 70px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

.theme-color-dark {
  --stats-card-bg: #14171f;
  --stats-card-border: #2a3040;
  --stats-control-bg: #1f2430;
  --stats-control-border: #2c3344;
  --stats-control-text: #d5d7e0;
  --stats-control-active-bg: #4b26d9;
  --stats-control-active-text: #ffffff;
  --stats-track: rgba(127, 90, 244, 0.3);
  --stats-grid: rgba(127, 90, 244, 0.18);
  --stats-ring-1: #8b6bff;
  --stats-ring-2: #6a4bff;
  --stats-ring-3: #a58bff;
  --stats-ring-4: #4fb6ff;
  --stats-ring-5: #24d0e6;
  --stats-ring-6: #f8c14c;
  --stats-chart-bg: #0f1218;
  --stats-chart-border: #1c2230;
  --stats-chart-grid: rgba(255, 255, 255, 0.22);
  --stats-chart-axis-line: rgba(255, 255, 255, 0.35);
  --stats-chart-line: var(--accent);
  --stats-chart-fill-start: color-mix(in srgb, var(--accent) 10%, transparent);
  --stats-chart-fill-end: color-mix(in srgb, var(--accent) 0%, transparent);
  --stats-chart-axis: rgba(255, 255, 255, 0.78);
  --stats-chart-tooltip-divider: rgba(255, 255, 255, 0.25);
}

.stats-chart-wrap {
  padding: var(--space-4);
  background: linear-gradient(180deg, #ffffff 0%, #f6f4ff 100%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(75, 38, 217, 0.18);
  box-shadow: 0 16px 30px rgba(75, 38, 217, 0.14);
  overflow: hidden;
}

.stats-chart {
  height: 240px;
}

.stats-area {
  opacity: 1;
}

.stats-hover-line {
  stroke: rgba(75, 38, 217, 0.25);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.stats-chart-wrap .sales-tooltip {
  background: #ffffff;
  border: 1px solid rgba(75, 38, 217, 0.2);
  box-shadow: 0 16px 30px rgba(75, 38, 217, 0.2);
}

.stats-chart-wrap+.chart-axis {
  color: rgba(44, 40, 92, 0.7);
}

.stats-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.stats-summary-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.stats-summary-label {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.stats-summary-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
}

.stats-top-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stats-top-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--border);
}

.stats-top-item:last-child {
  border-bottom: none;
}

.stats-top-rank {
  font-weight: 600;
  color: var(--text-muted);
  min-width: 36px;
}

.stats-top-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stats-top-name {
  font-weight: 600;
  color: var(--text);
}

.stats-top-meta {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.stats-top-remaining {
  text-align: right;
  min-width: 110px;
}

.stats-top-remaining-label {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.stats-top-remaining-value {
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 720px) {
  .stats-range {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .stats-range input[type="range"] {
    flex: 1 1 100%;
    width: 100%;
  }

  .stats-top-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-top-remaining {
    text-align: left;
    width: 100%;
  }
}

.support-body {
  overflow: auto;
}

.ticket-layout {
  grid-template-columns: minmax(0, 1fr);
}

.ticket-layout[data-ticket-view="detail"] {
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
}

.ticket-thread-card {
  display: flex;
  flex-direction: column;
  min-height: 72vh;
}

.ticket-user-pane {
  align-self: flex-start;
}

.ticket-user-card .form-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ticket-user-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  --ticket-section-delay: 0ms;
}

.ticket-user-section.ticket-user-section-reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: ticket-section-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--ticket-section-delay);
}

.ticket-user-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.ticket-user-section-title:focus-visible {
  outline: none;
  box-shadow: var(--sp-shadow-focus-ring);
  border-radius: 6px;
}

.ticket-user-section-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--text-muted);
  transition: transform 160ms ease, color 160ms ease;
  flex: 0 0 auto;
}

.ticket-user-section-title:hover .ticket-user-section-caret {
  color: var(--text-secondary);
}

.ticket-user-section.is-collapsed .ticket-user-section-caret {
  transform: rotate(-90deg);
}

.ticket-user-section.is-collapsed .ticket-user-grid {
  display: none;
}

.ticket-user-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.ticket-user-proxy-select {
  font-family: var(--font-mono);
}

.ticket-user-proxy-value {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ticket-user-status {
  display: flex;
  align-items: center;
  min-height: 2.4rem;
}

.ticket-user-divider {
  height: 1px;
  background: var(--sp-color-border-control);
}

.ticket-user-note {
  padding: var(--space-3);
  border-radius: 10px;
  border: 1px solid var(--sp-color-border-control);
  background: var(--color-neutral-background-muted);
}

.ticket-user-note-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.ticket-user-note-value {
  font-size: 1.2rem;
  color: var(--text-secondary);
}

.ticket-user-action {
  display: flex;
  align-items: center;
}

.ticket-user-action .button {
  width: 100%;
  justify-content: center;
}

.ticket-user-empty {
  font-size: 1.2rem;
  color: var(--text-muted);
}

.ticket-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
  max-height: 60vh;
  overflow: auto;
}

.ticket-list-alerts,
.ticket-thread-alerts {
  padding: 0 var(--space-5) var(--space-3);
}

.ticket-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--space-3) var(--space-4);
  min-height: 7.2rem;
  border-radius: 12px;
  border: 1px solid var(--sp-color-border-control);
  background: var(--sp-color-bg-base);
  text-align: left;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

button.ticket-item {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 7.2rem;
  align-items: flex-start;
  justify-content: center;
  font: inherit;
  line-height: 1.5;
}

.ticket-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.02) 22%,
      rgba(255, 255, 255, 0.08) 42%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.08) 58%,
      rgba(255, 255, 255, 0.02) 78%,
      rgba(255, 255, 255, 0) 100%);
  background-size: 300% 100%;
  background-position: 260% 0;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 220ms linear;
  will-change: background-position, opacity;
}

.ticket-item:hover {
  border-color: var(--sp-color-border-control);
  box-shadow: var(--sp-shadow-subtle);
}

.ticket-item:hover::after,
.ticket-item:focus-visible::after {
  opacity: 1;
  animation: ticket-item-shimmer-loop 3600ms linear infinite;
}

.ticket-item.active {
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.ticket-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.ticket-item-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.badge-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #272727;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  animation: badge-pop-in 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes badge-pop-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


.ticket-item-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ticket-item-meta {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.ticket-item-preview {
  font-size: 1.2rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-empty {
  padding: var(--space-4) var(--space-5);
  color: var(--text-muted);
  font-size: 1.2rem;
}

.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  flex: 1;
  min-height: 48vh;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--sp-color-border-control);
  border-bottom: 1px solid var(--sp-color-border-control);
  background: var(--sp-color-bg-base);
}

.ticket-message {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  width: 100%;
}

.ticket-message.is-entering {
  opacity: 0;
  transform: translateY(12px);
  animation: ticket-message-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ticket-message.is-admin {
  align-self: stretch;
}

.ticket-message.is-user {
  align-self: stretch;
}

.ticket-message-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 3.2rem;
  min-height: 3.2rem;
  box-sizing: border-box;
  overflow: hidden;
}

.ticket-message.is-entering .ticket-message-avatar {
  animation: ticket-message-avatar-enter 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ticket-message-avatar-icon {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
}

.ticket-message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.ticket-message-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.ticket-message-header {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
}

.ticket-message-name {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ticket-message-role {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 1.1rem;
  font-weight: 500;
}

.ticket-message-role-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

.ticket-message-bubble {
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  background: var(--color-neutral-background-muted);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.ticket-message.is-entering .ticket-message-bubble {
  animation: ticket-message-bubble-enter 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ticket-message.is-user .ticket-message-bubble {
  background: var(--surface-2);
}

.ticket-message-meta-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding-top: 0.2rem;
}

.ticket-message-time {
  font-size: 1.05rem;
  color: var(--text-muted);
}

.ticket-composer {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  padding: var(--space-4) var(--space-5);
  background: var(--sp-color-bg-base);
}

.ticket-composer.is-sending .button.primary {
  animation: ticket-send-pulse 900ms ease-in-out infinite;
}

.ticket-composer-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ticket-composer textarea {
  min-height: 4.2rem;
  resize: vertical;
}

@keyframes ticket-section-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@keyframes ticket-message-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

@keyframes ticket-item-shimmer-loop {
  from {
    background-position: 260% 0;
  }

  to {
    background-position: -260% 0;
  }
}

@keyframes ticket-message-avatar-enter {
  from {
    transform: scale(0.9);
  }

  to {
    transform: scale(1);
  }
}

@keyframes ticket-message-bubble-enter {
  from {
    opacity: 0.7;
    transform: translateY(8px);
  }

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

@keyframes ticket-send-pulse {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 1100px) {
  .ticket-layout {
    grid-template-columns: 1fr;
  }

  .ticket-thread-card {
    min-height: 0;
  }

  .ticket-list,
  .ticket-thread {
    max-height: none;
  }

  .ticket-thread-card .ticket-thread {
    min-height: 36rem;
  }

  .ticket-user-grid {
    grid-template-columns: 1fr;
  }
}