:root {
--toastify-color-light: #fff;
--toastify-color-dark: #121212;
--toastify-color-info: #3498db;
--toastify-color-success: #07bc0c;
--toastify-color-warning: #f1c40f;
--toastify-color-error: #e74c3c;
--toastify-color-transparent: rgba(255, 255, 255, 0.7);
--toastify-icon-color-info: var(--toastify-color-info);
--toastify-icon-color-success: var(--toastify-color-success);
--toastify-icon-color-warning: var(--toastify-color-warning);
--toastify-icon-color-error: var(--toastify-color-error);
--toastify-toast-width: 320px;
--toastify-toast-background: #fff;
--toastify-toast-min-height: 64px;
--toastify-toast-max-height: 800px;
--toastify-font-family: sans-serif;
--toastify-z-index: 9999;
--toastify-text-color-light: #757575;
--toastify-text-color-dark: #fff;
--toastify-text-color-info: #fff;
--toastify-text-color-success: #fff;
--toastify-text-color-warning: #fff;
--toastify-text-color-error: #fff;
--toastify-spinner-color: #616161;
--toastify-spinner-color-empty-area: #e0e0e0;
--toastify-color-progress-light: linear-gradient(
to right,
#4cd964,
#5ac8fa,
#007aff,
#34aadc,
#5856d6,
#ff2d55
);
--toastify-color-progress-dark: #bb86fc;
--toastify-color-progress-info: var(--toastify-color-info);
--toastify-color-progress-success: var(--toastify-color-success);
--toastify-color-progress-warning: var(--toastify-color-warning);
--toastify-color-progress-error: var(--toastify-color-error);
}
.Toastify__toast-container {
z-index: var(--toastify-z-index);
-webkit-transform: translate3d(0, 0, var(--toastify-z-index));
position: fixed;
padding: 4px;
width: var(--toastify-toast-width);
box-sizing: border-box;
color: #fff;
}
.Toastify__toast-container--top-left {
top: 1em;
left: 1em;
}
.Toastify__toast-container--top-center {
top: 1em;
left: 50%;
transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
top: 1em;
right: 1em;
}
.Toastify__toast-container--bottom-left {
bottom: 1em;
left: 1em;
}
.Toastify__toast-container--bottom-center {
bottom: 1em;
left: 50%;
transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
bottom: 1em;
right: 1em;
}
@media only screen and (max-width : 480px) {
.Toastify__toast-container {
width: 100vw;
padding: 0;
left: 0;
margin: 0;
}
.Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
top: 0;
transform: translateX(0);
}
.Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
bottom: 0;
transform: translateX(0);
}
.Toastify__toast-container--rtl {
right: 0;
left: initial;
}
}
.Toastify__toast {
position: relative;
min-height: var(--toastify-toast-min-height);
box-sizing: border-box;
margin-bottom: 1rem;
padding: 8px;
border-radius: 4px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1), 0 2px 15px 0 rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
max-height: var(--toastify-toast-max-height);
overflow: hidden;
font-family: var(--toastify-font-family);
cursor: default;
direction: ltr;
/* webkit only issue #791 */
z-index: 0;
}
.Toastify__toast--rtl {
direction: rtl;
}
.Toastify__toast--close-on-click {
cursor: pointer;
}
.Toastify__toast-body {
margin: auto 0;
flex: 1 1 auto;
padding: 6px;
display: flex;
align-items: center;
}
.Toastify__toast-body > div:last-child {
word-break: break-word;
flex: 1;
}
.Toastify__toast-icon {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
width: 20px;
flex-shrink: 0;
display: flex;
}
.Toastify--animate {
animation-fill-mode: both;
animation-duration: 0.7s;
}
.Toastify--animate-icon {
animation-fill-mode: both;
animation-duration: 0.3s;
}
@media only screen and (max-width : 480px) {
.Toastify__toast {
margin-bottom: 0;
border-radius: 0;
}
}
.Toastify__toast-theme--dark {
background: var(--toastify-color-dark);
color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
background: var(--toastify-color-light);
color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
background: var(--toastify-color-light);
color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
color: var(--toastify-text-color-info);
background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
color: var(--toastify-text-color-success);
background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
color: var(--toastify-text-color-warning);
background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
color: var(--toastify-text-color-error);
background: var(--toastify-color-error);
}
.Toastify__progress-bar-theme--light {
background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
background: var(--toastify-color-transparent);
}
.Toastify__close-button {
color: #fff;
background: transparent;
outline: none;
border: none;
padding: 0;
cursor: pointer;
opacity: 0.7;
transition: 0.3s ease;
align-self: flex-start;
}
.Toastify__close-button--light {
color: #000;
opacity: 0.3;
}
.Toastify__close-button > svg {
fill: currentColor;
height: 16px;
width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
opacity: 1;
}
@keyframes Toastify__trackProgress {
0% {
transform: scaleX(1);
}
100% {
transform: scaleX(0);
}
}
.Toastify__progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
z-index: var(--toastify-z-index);
opacity: 0.7;
transform-origin: left;
}
.Toastify__progress-bar--animated {
animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
right: 0;
left: initial;
transform-origin: right;
}
.Toastify__spinner {
width: 20px;
height: 20px;
box-sizing: border-box;
border: 2px solid;
border-radius: 100%;
border-color: var(--toastify-spinner-color-empty-area);
border-right-color: var(--toastify-spinner-color);
animation: Toastify__spin 0.65s linear infinite;
}
@keyframes Toastify__bounceInRight {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
to {
transform: none;
}
}
@keyframes Toastify__bounceOutRight {
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
@keyframes Toastify__bounceInLeft {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
to {
transform: none;
}
}
@keyframes Toastify__bounceOutLeft {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes Toastify__bounceInUp {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes Toastify__bounceOutUp {
20% {
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
@keyframes Toastify__bounceInDown {
from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
to {
transform: none;
}
}
@keyframes Toastify__bounceOutDown {
20% {
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
animation-name: Toastify__bounceInUp;
}
.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
animation-name: Toastify__bounceOutDown;
}
@keyframes Toastify__zoomIn {
from {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes Toastify__zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
.Toastify__zoom-enter {
animation-name: Toastify__zoomIn;
}
.Toastify__zoom-exit {
animation-name: Toastify__zoomOut;
}
@keyframes Toastify__flipIn {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
@keyframes Toastify__flipOut {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.Toastify__flip-enter {
animation-name: Toastify__flipIn;
}
.Toastify__flip-exit {
animation-name: Toastify__flipOut;
}
@keyframes Toastify__slideInRight {
from {
transform: translate3d(110%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes Toastify__slideInLeft {
from {
transform: translate3d(-110%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes Toastify__slideInUp {
from {
transform: translate3d(0, 110%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes Toastify__slideInDown {
from {
transform: translate3d(0, -110%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes Toastify__slideOutRight {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(110%, 0, 0);
}
}
@keyframes Toastify__slideOutLeft {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(-110%, 0, 0);
}
}
@keyframes Toastify__slideOutDown {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, 500px, 0);
}
}
@keyframes Toastify__slideOutUp {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, -500px, 0);
}
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
animation-name: Toastify__slideInUp;
}
.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
animation-name: Toastify__slideOutLeft;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
animation-name: Toastify__slideOutRight;
}
.Toastify__slide-exit--top-center {
animation-name: Toastify__slideOutUp;
}
.Toastify__slide-exit--bottom-center {
animation-name: Toastify__slideOutDown;
}
@keyframes Toastify__spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*# sourceMappingURL=ReactToastify.css.map *//* ==================== Tailwind CSS 配置 ==================== */
@layer tailwind-base, semi, tailwind-components, tailwind-utils;
@layer tailwind-base {
*, ::before, ::after{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop{
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: currentColor; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
tab-size: 4; /* 3 */
font-family: Plus Jakarta Sans, system-ui, sans-serif; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
-webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: source-code-pro, Menlo, Monaco, Consolas, monospace; /* 1 */
font-feature-settings: normal; /* 2 */
font-variation-settings: normal; /* 3 */
font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
letter-spacing: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
}
@layer tailwind-components {
.\!container{
width: 100% !important;
}
.container{
width: 100%;
}
@media (min-width: 640px){
.\!container{
max-width: 640px !important;
}
.container{
max-width: 640px;
}
}
@media (min-width: 768px){
.\!container{
max-width: 768px !important;
}
.container{
max-width: 768px;
}
}
@media (min-width: 1024px){
.\!container{
max-width: 1024px !important;
}
.container{
max-width: 1024px;
}
}
@media (min-width: 1280px){
.\!container{
max-width: 1280px !important;
}
.container{
max-width: 1280px;
}
}
@media (min-width: 1536px){
.\!container{
max-width: 1536px !important;
}
.container{
max-width: 1536px;
}
}
}
@layer tailwind-utils {
.\!visible{
visibility: visible !important;
}
.visible{
visibility: visible;
}
.invisible{
visibility: hidden;
}
.collapse{
visibility: collapse;
}
.static{
position: static;
}
.fixed{
position: fixed;
}
.\!absolute{
position: absolute !important;
}
.absolute{
position: absolute;
}
.relative{
position: relative;
}
.sticky{
position: -webkit-sticky;
position: sticky;
}
.inset-0{
inset: 0px;
}
.\!right-2{
right: 0.5rem !important;
}
.\!top-2{
top: 0.5rem !important;
}
.-bottom-8{
bottom: -2rem;
}
.-left-16{
left: -4rem;
}
.-left-8{
left: -2rem;
}
.-right-10{
right: -2.5rem;
}
.-right-24{
right: -6rem;
}
.-top-10{
top: -2.5rem;
}
.-top-24{
top: -6rem;
}
.bottom-0{
bottom: 0px;
}
.left-0{
left: 0px;
}
.right-0{
right: 0px;
}
.right-2{
right: 0.5rem;
}
.top-0{
top: 0px;
}
.top-1\/2{
top: 50%;
}
.top-2{
top: 0.5rem;
}
.z-10{
z-index: 10;
}
.z-\[1000\]{
z-index: 1000;
}
.z-\[1\]{
z-index: 1;
}
.order-1{
order: 1;
}
.order-2{
order: 2;
}
.col-span-1{
grid-column: span 1 / span 1;
}
.\!m-0{
margin: 0px !important;
}
.m-0{
margin: 0px;
}
.\!mx-2{
margin-left: 0.5rem !important;
margin-right: 0.5rem !important;
}
.mx-1{
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mx-2{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.mx-auto{
margin-left: auto;
margin-right: auto;
}
.my-1{
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-2{
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-3{
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.\!mb-0{
margin-bottom: 0px !important;
}
.-ml-px{
margin-left: -1px;
}
.mb-0{
margin-bottom: 0px;
}
.mb-0\.5{
margin-bottom: 0.125rem;
}
.mb-1{
margin-bottom: 0.25rem;
}
.mb-2{
margin-bottom: 0.5rem;
}
.mb-3{
margin-bottom: 0.75rem;
}
.mb-4{
margin-bottom: 1rem;
}
.mb-5{
margin-bottom: 1.25rem;
}
.mb-6{
margin-bottom: 1.5rem;
}
.mb-8{
margin-bottom: 2rem;
}
.ml-1{
margin-left: 0.25rem;
}
.ml-1\.5{
margin-left: 0.375rem;
}
.ml-2{
margin-left: 0.5rem;
}
.ml-3{
margin-left: 0.75rem;
}
.ml-4{
margin-left: 1rem;
}
.mr-1{
margin-right: 0.25rem;
}
.mr-2{
margin-right: 0.5rem;
}
.mr-3{
margin-right: 0.75rem;
}
.mr-4{
margin-right: 1rem;
}
.mt-0\.5{
margin-top: 0.125rem;
}
.mt-1{
margin-top: 0.25rem;
}
.mt-1\.5{
margin-top: 0.375rem;
}
.mt-10{
margin-top: 2.5rem;
}
.mt-2{
margin-top: 0.5rem;
}
.mt-2\.5{
margin-top: 0.625rem;
}
.mt-3{
margin-top: 0.75rem;
}
.mt-4{
margin-top: 1rem;
}
.mt-5{
margin-top: 1.25rem;
}
.mt-6{
margin-top: 1.5rem;
}
.mt-7{
margin-top: 1.75rem;
}
.mt-8{
margin-top: 2rem;
}
.mt-auto{
margin-top: auto;
}
.line-clamp-2{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.\!block{
display: block !important;
}
.block{
display: block;
}
.inline-block{
display: inline-block;
}
.inline{
display: inline;
}
.\!flex{
display: flex !important;
}
.flex{
display: flex;
}
.inline-flex{
display: inline-flex;
}
.table{
display: table;
}
.grid{
display: grid;
}
.contents{
display: contents;
}
.hidden{
display: none;
}
.\!h-11{
height: 2.75rem !important;
}
.\!h-4{
height: 1rem !important;
}
.\!h-6{
height: 1.5rem !important;
}
.\!h-7{
height: 1.75rem !important;
}
.\!h-9{
height: 2.25rem !important;
}
.\!h-auto{
height: auto !important;
}
.\!h-full{
height: 100% !important;
}
.h-1\.5{
height: 0.375rem;
}
.h-10{
height: 2.5rem;
}
.h-11{
height: 2.75rem;
}
.h-12{
height: 3rem;
}
.h-16{
height: 4rem;
}
.h-2{
height: 0.5rem;
}
.h-2\.5{
height: 0.625rem;
}
.h-24{
height: 6rem;
}
.h-3{
height: 0.75rem;
}
.h-4{
height: 1rem;
}
.h-40{
height: 10rem;
}
.h-5{
height: 1.25rem;
}
.h-52{
height: 13rem;
}
.h-6{
height: 1.5rem;
}
.h-64{
height: 16rem;
}
.h-7{
height: 1.75rem;
}
.h-8{
height: 2rem;
}
.h-9{
height: 2.25rem;
}
.h-auto{
height: auto;
}
.h-full{
height: 100%;
}
.h-screen{
height: 100vh;
}
.max-h-0{
max-height: 0px;
}
.max-h-32{
max-height: 8rem;
}
.max-h-40{
max-height: 10rem;
}
.max-h-80{
max-height: 20rem;
}
.max-h-96{
max-height: 24rem;
}
.max-h-\[55vh\]{
max-height: 55vh;
}
.min-h-0{
min-height: 0px;
}
.min-h-\[200px\]{
min-height: 200px;
}
.min-h-\[320px\]{
min-height: 320px;
}
.min-h-\[32px\]{
min-height: 32px;
}
.min-h-\[70vh\]{
min-height: 70vh;
}
.min-h-screen{
min-height: 100vh;
}
.\!w-4{
width: 1rem !important;
}
.\!w-5{
width: 1.25rem !important;
}
.\!w-6{
width: 1.5rem !important;
}
.\!w-7{
width: 1.75rem !important;
}
.\!w-9{
width: 2.25rem !important;
}
.\!w-full{
width: 100% !important;
}
.w-1\.5{
width: 0.375rem;
}
.w-1\/2{
width: 50%;
}
.w-10{
width: 2.5rem;
}
.w-11{
width: 2.75rem;
}
.w-12{
width: 3rem;
}
.w-16{
width: 4rem;
}
.w-2{
width: 0.5rem;
}
.w-2\.5{
width: 0.625rem;
}
.w-24{
width: 6rem;
}
.w-3{
width: 0.75rem;
}
.w-4{
width: 1rem;
}
.w-40{
width: 10rem;
}
.w-5{
width: 1.25rem;
}
.w-52{
width: 13rem;
}
.w-6{
width: 1.5rem;
}
.w-64{
width: 16rem;
}
.w-7{
width: 1.75rem;
}
.w-8{
width: 2rem;
}
.w-80{
width: 20rem;
}
.w-9{
width: 2.25rem;
}
.w-96{
width: 24rem;
}
.w-\[200px\]{
width: 200px;
}
.w-full{
width: 100%;
}
.\!min-w-0{
min-width: 0px !important;
}
.min-w-0{
min-width: 0px;
}
.min-w-\[120px\]{
min-width: 120px;
}
.max-w-2xl{
max-width: 42rem;
}
.max-w-4xl{
max-width: 56rem;
}
.max-w-60{
max-width: 15rem;
}
.max-w-\[1420px\]{
max-width: 1420px;
}
.max-w-\[360px\]{
max-width: 360px;
}
.max-w-\[520px\]{
max-width: 520px;
}
.max-w-\[680px\]{
max-width: 680px;
}
.max-w-\[720px\]{
max-width: 720px;
}
.max-w-\[760px\]{
max-width: 760px;
}
.max-w-full{
max-width: 100%;
}
.max-w-md{
max-width: 28rem;
}
.max-w-none{
max-width: none;
}
.max-w-sm{
max-width: 24rem;
}
.max-w-xs{
max-width: 20rem;
}
.flex-1{
flex: 1 1 0%;
}
.flex-shrink{
flex-shrink: 1;
}
.flex-shrink-0{
flex-shrink: 0;
}
.shrink{
flex-shrink: 1;
}
.shrink-0{
flex-shrink: 0;
}
.grow{
flex-grow: 1;
}
.border-collapse{
border-collapse: collapse;
}
.-translate-y-1\/2{
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180{
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-90{
--tw-scale-x: .9;
--tw-scale-y: .9;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse{
50%{
opacity: .5;
}
}
.animate-pulse{
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin{
to{
transform: rotate(360deg);
}
}
.animate-spin{
animation: spin 1s linear infinite;
}
.\!cursor-not-allowed{
cursor: not-allowed !important;
}
.cursor-help{
cursor: help;
}
.cursor-not-allowed{
cursor: not-allowed;
}
.cursor-pointer{
cursor: pointer;
}
.select-none{
-webkit-user-select: none;
user-select: none;
}
.resize{
resize: both;
}
.list-disc{
list-style-type: disc;
}
.grid-cols-1{
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-row{
flex-direction: row;
}
.flex-col{
flex-direction: column;
}
.flex-wrap{
flex-wrap: wrap;
}
.items-start{
align-items: flex-start;
}
.items-end{
align-items: flex-end;
}
.\!items-center{
align-items: center !important;
}
.items-center{
align-items: center;
}
.items-baseline{
align-items: baseline;
}
.items-stretch{
align-items: stretch;
}
.justify-start{
justify-content: flex-start;
}
.justify-end{
justify-content: flex-end;
}
.justify-center{
justify-content: center;
}
.justify-between{
justify-content: space-between;
}
.\!gap-2{
gap: 0.5rem !important;
}
.gap-0\.5{
gap: 0.125rem;
}
.gap-1{
gap: 0.25rem;
}
.gap-1\.5{
gap: 0.375rem;
}
.gap-2{
gap: 0.5rem;
}
.gap-2\.5{
gap: 0.625rem;
}
.gap-3{
gap: 0.75rem;
}
.gap-4{
gap: 1rem;
}
.gap-5{
gap: 1.25rem;
}
.gap-6{
gap: 1.5rem;
}
.gap-8{
gap: 2rem;
}
.gap-x-4{
column-gap: 1rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-3 > :not([hidden]) ~ :not([hidden]){
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]){
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.self-center{
align-self: center;
}
.overflow-auto{
overflow: auto;
}
.overflow-hidden{
overflow: hidden;
}
.overflow-x-auto{
overflow-x: auto;
}
.overflow-y-auto{
overflow-y: auto;
}
.overflow-x-hidden{
overflow-x: hidden;
}
.truncate{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whitespace-nowrap{
white-space: nowrap;
}
.whitespace-pre{
white-space: pre;
}
.whitespace-pre-wrap{
white-space: pre-wrap;
}
.break-all{
word-break: break-all;
}
.\!rounded-2xl{
border-radius: 1rem !important;
}
.\!rounded-\[22px\]{
border-radius: 22px !important;
}
.\!rounded-\[24px\]{
border-radius: 24px !important;
}
.\!rounded-\[26px\]{
border-radius: 26px !important;
}
.\!rounded-\[28px\]{
border-radius: 28px !important;
}
.\!rounded-full{
border-radius: 9999px !important;
}
.\!rounded-lg{
border-radius: 0.5rem !important;
}
.\!rounded-xl{
border-radius: 0.75rem !important;
}
.rounded{
border-radius: 0.25rem;
}
.rounded-2xl{
border-radius: 1rem;
}
.rounded-\[22px\]{
border-radius: 22px;
}
.rounded-\[24px\]{
border-radius: 24px;
}
.rounded-\[28px\]{
border-radius: 28px;
}
.rounded-\[32px\]{
border-radius: 32px;
}
.rounded-\[36px\]{
border-radius: 36px;
}
.rounded-full{
border-radius: 9999px;
}
.rounded-lg{
border-radius: 0.5rem;
}
.rounded-md{
border-radius: 0.375rem;
}
.rounded-xl{
border-radius: 0.75rem;
}
.\!rounded-l-full{
border-top-left-radius: 9999px !important;
border-bottom-left-radius: 9999px !important;
}
.\!rounded-l-none{
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
.\!rounded-r-full{
border-top-right-radius: 9999px !important;
border-bottom-right-radius: 9999px !important;
}
.\!rounded-r-none{
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.rounded-b-3xl{
border-bottom-right-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
}
.rounded-t-2xl{
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
.\!border{
border-width: 1px !important;
}
.\!border-0{
border-width: 0px !important;
}
.border{
border-width: 1px;
}
.border-0{
border-width: 0px;
}
.border-b{
border-bottom-width: 1px;
}
.border-r-0{
border-right-width: 0px;
}
.border-t{
border-top-width: 1px;
}
.border-dashed{
border-style: dashed;
}
.\!border-\[rgba\(70\2c 71\2c 211\2c 0\.08\)\]{
border-color: rgba(70,71,211,0.08) !important;
}
.\!border-semi-color-border{
border-color: var(--semi-color-border) !important;
}
.border-\[rgba\(70\2c 71\2c 211\2c 0\.08\)\]{
border-color: rgba(70,71,211,0.08);
}
.border-\[rgba\(70\2c 71\2c 211\2c 0\.10\)\]{
border-color: rgba(70,71,211,0.10);
}
.border-\[rgba\(70\2c 71\2c 211\2c 0\.16\)\]{
border-color: rgba(70,71,211,0.16);
}
.\!bg-\[rgba\(255\2c 247\2c 237\2c 0\.88\)\]{
background-color: rgba(255,247,237,0.88) !important;
}
.\!bg-semi-color-fill-0{
background-color: var(--semi-color-fill-0) !important;
}
.\!bg-semi-color-primary-light-default{
background-color: var(--semi-color-primary-light-default) !important;
}
.bg-\[\#0f172a\]{
--tw-bg-opacity: 1;
background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-\[rgba\(249\2c 115\2c 22\2c 0\.10\)\]{
background-color: rgba(249,115,22,0.10);
}
.bg-\[rgba\(255\2c 247\2c 237\2c 0\.62\)\]{
background-color: rgba(255,247,237,0.62);
}
.bg-\[rgba\(255\2c 247\2c 237\2c 0\.68\)\]{
background-color: rgba(255,247,237,0.68);
}
.bg-\[rgba\(255\2c 247\2c 237\2c 0\.72\)\]{
background-color: rgba(255,247,237,0.72);
}
.bg-\[rgba\(255\2c 255\2c 255\2c 0\.82\)\]{
background-color: rgba(255,255,255,0.82);
}
.bg-\[rgba\(99\2c 102\2c 241\2c 0\.12\)\]{
background-color: rgba(99,102,241,0.12);
}
.bg-ev-error{
background-color: var(--ev-error);
}
.bg-ev-on-surface-variant{
background-color: var(--ev-on-surface-variant);
}
.bg-ev-primary{
background-color: var(--ev-primary);
}
.bg-ev-secondary{
background-color: var(--ev-secondary);
}
.bg-ev-surface-bottom{
background-color: var(--ev-surface-container-lowest);
}
.bg-ev-tertiary{
background-color: var(--ev-tertiary);
}
.bg-semi-color-fill-0{
background-color: var(--semi-color-fill-0);
}
.bg-\[linear-gradient\(135deg\2c rgba\(70\2c 71\2c 211\2c 0\.08\)_0\%\2c rgba\(124\2c 58\2c 237\2c 0\.10\)_100\%\)\]{
background-image: linear-gradient(135deg,rgba(70,71,211,0.08) 0%,rgba(124,58,237,0.10) 100%);
}
.bg-\[linear-gradient\(180deg\2c \#f7f8fc_0\%\2c \#eef2f8_100\%\)\]{
background-image: linear-gradient(180deg,#f7f8fc 0%,#eef2f8 100%);
}
.bg-\[linear-gradient\(180deg\2c rgba\(255\2c 255\2c 255\2c 0\.95\)_0\%\2c rgba\(237\2c 240\2c 255\2c 0\.96\)_100\%\)\]{
background-image: linear-gradient(180deg,rgba(255,255,255,0.95) 0%,rgba(237,240,255,0.96) 100%);
}
.bg-\[linear-gradient\(180deg\2c rgba\(255\2c 255\2c 255\2c 0\.96\)_0\%\2c rgba\(252\2c 250\2c 247\2c 0\.98\)_100\%\)\]{
background-image: linear-gradient(180deg,rgba(255,255,255,0.96) 0%,rgba(252,250,247,0.98) 100%);
}
.bg-gradient-to-br{
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r{
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.\!p-0{
padding: 0px !important;
}
.\!p-1{
padding: 0.25rem !important;
}
.\!p-1\.5{
padding: 0.375rem !important;
}
.\!p-2{
padding: 0.5rem !important;
}
.p-1{
padding: 0.25rem;
}
.p-2{
padding: 0.5rem;
}
.p-2\.5{
padding: 0.625rem;
}
.p-3{
padding: 0.75rem;
}
.p-4{
padding: 1rem;
}
.p-5{
padding: 1.25rem;
}
.p-6{
padding: 1.5rem;
}
.p-8{
padding: 2rem;
}
.\!px-1\.5{
padding-left: 0.375rem !important;
padding-right: 0.375rem !important;
}
.\!px-2{
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.\!px-3{
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
.\!px-4{
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.\!px-5{
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
}
.\!px-6{
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.\!py-1\.5{
padding-top: 0.375rem !important;
padding-bottom: 0.375rem !important;
}
.\!py-2{
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
.\!py-\[10px\]{
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.px-0{
padding-left: 0px;
padding-right: 0px;
}
.px-1\.5{
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.px-2{
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-3{
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4{
padding-left: 1rem;
padding-right: 1rem;
}
.px-5{
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.px-6{
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-0\.5{
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1{
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-1\.5{
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.py-10{
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.py-12{
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-2{
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5{
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-20{
padding-top: 5rem;
padding-bottom: 5rem;
}
.py-3{
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4{
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-5{
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.py-6{
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8{
padding-top: 2rem;
padding-bottom: 2rem;
}
.pb-10{
padding-bottom: 2.5rem;
}
.pb-2{
padding-bottom: 0.5rem;
}
.pb-24{
padding-bottom: 6rem;
}
.pb-3{
padding-bottom: 0.75rem;
}
.pb-4{
padding-bottom: 1rem;
}
.pl-4{
padding-left: 1rem;
}
.pr-1{
padding-right: 0.25rem;
}
.pr-2{
padding-right: 0.5rem;
}
.pr-4{
padding-right: 1rem;
}
.pr-5{
padding-right: 1.25rem;
}
.pt-2{
padding-top: 0.5rem;
}
.pt-3{
padding-top: 0.75rem;
}
.pt-4{
padding-top: 1rem;
}
.pt-6{
padding-top: 1.5rem;
}
.pt-8{
padding-top: 2rem;
}
.pt-\[84px\]{
padding-top: 84px;
}
.text-left{
text-align: left;
}
.text-center{
text-align: center;
}
.text-right{
text-align: right;
}
.font-headline{
font-family: Plus Jakarta Sans, system-ui, sans-serif;
}
.font-mono{
font-family: source-code-pro, Menlo, Monaco, Consolas, monospace;
}
.\!text-\[11px\]{
font-size: 11px !important;
}
.\!text-base{
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.\!text-lg{
font-size: 1.125rem !important;
line-height: 1.75rem !important;
}
.\!text-sm{
font-size: 0.875rem !important;
line-height: 1.25rem !important;
}
.\!text-xs{
font-size: 0.75rem !important;
line-height: 1rem !important;
}
.text-2xl{
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl{
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-\[10px\]{
font-size: 10px;
}
.text-\[11px\]{
font-size: 11px;
}
.text-\[12px\]{
font-size: 12px;
}
.text-\[15px\]{
font-size: 15px;
}
.text-\[28px\]{
font-size: 28px;
}
.text-\[clamp\(28px\2c 4vw\2c 44px\)\]{
font-size: clamp(28px, 4vw, 44px);
}
.text-\[clamp\(30px\2c 4vw\2c 48px\)\]{
font-size: clamp(30px, 4vw, 48px);
}
.text-\[clamp\(34px\2c 6vw\2c 62px\)\]{
font-size: clamp(34px, 6vw, 62px);
}
.text-base{
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg{
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm{
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl{
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-xs{
font-size: 0.75rem;
line-height: 1rem;
}
.\!font-medium{
font-weight: 500 !important;
}
.\!font-semibold{
font-weight: 600 !important;
}
.font-\[800\]{
font-weight: 800;
}
.font-\[900\]{
font-weight: 900;
}
.font-bold{
font-weight: 700;
}
.font-extrabold{
font-weight: 800;
}
.font-medium{
font-weight: 500;
}
.font-normal{
font-weight: 400;
}
.font-semibold{
font-weight: 600;
}
.uppercase{
text-transform: uppercase;
}
.italic{
font-style: italic;
}
.tabular-nums{
--tw-numeric-spacing: tabular-nums;
font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-5{
line-height: 1.25rem;
}
.leading-6{
line-height: 1.5rem;
}
.leading-7{
line-height: 1.75rem;
}
.leading-8{
line-height: 2rem;
}
.leading-\[0\.95\]{
line-height: 0.95;
}
.leading-\[1\.02\]{
line-height: 1.02;
}
.leading-none{
line-height: 1;
}
.leading-relaxed{
line-height: 1.625;
}
.tracking-\[-0\.02em\]{
letter-spacing: -0.02em;
}
.tracking-\[-0\.03em\]{
letter-spacing: -0.03em;
}
.tracking-\[-0\.04em\]{
letter-spacing: -0.04em;
}
.tracking-\[-0\.05em\]{
letter-spacing: -0.05em;
}
.tracking-\[0\.08em\]{
letter-spacing: 0.08em;
}
.tracking-\[0\.15em\]{
letter-spacing: 0.15em;
}
.tracking-\[0\.16em\]{
letter-spacing: 0.16em;
}
.tracking-\[0\.18em\]{
letter-spacing: 0.18em;
}
.tracking-\[0\.2em\]{
letter-spacing: 0.2em;
}
.tracking-tight{
letter-spacing: -0.025em;
}
.tracking-wider{
letter-spacing: 0.05em;
}
.tracking-widest{
letter-spacing: 0.1em;
}
.\!text-\[var\(--semi-color-text-0\)\]{
color: var(--semi-color-text-0) !important;
}
.\!text-semi-color-primary{
color: var(--semi-color-primary) !important;
}
.\!text-semi-color-text-0{
color: var(--semi-color-text-0) !important;
}
.\!text-semi-color-text-1{
color: var(--semi-color-text-1) !important;
}
.\!text-semi-color-text-2{
color: var(--semi-color-text-2) !important;
}
.text-\[\#e2e8f0\]{
--tw-text-opacity: 1;
color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.text-\[var\(--ev-on-surface\)\]{
color: var(--ev-on-surface);
}
.text-\[var\(--ev-on-surface-variant\)\]{
color: var(--ev-on-surface-variant);
}
.text-\[var\(--ev-outline\)\]{
color: var(--ev-outline);
}
.text-\[var\(--ev-primary\)\]{
color: var(--ev-primary);
}
.text-\[var\(--semi-color-text-2\)\]{
color: var(--semi-color-text-2);
}
.text-ev-error{
color: var(--ev-error);
}
.text-ev-on-primary{
color: var(--ev-on-primary);
}
.text-ev-on-surface{
color: var(--ev-on-surface);
}
.text-ev-on-surface-variant{
color: var(--ev-on-surface-variant);
}
.text-ev-outline{
color: var(--ev-outline);
}
.text-ev-primary{
color: var(--ev-primary);
}
.text-ev-secondary{
color: var(--ev-secondary);
}
.text-ev-tertiary{
color: var(--ev-tertiary);
}
.text-semi-color-text-0{
color: var(--semi-color-text-0);
}
.text-semi-color-text-1{
color: var(--semi-color-text-1);
}
.text-semi-color-text-2{
color: var(--semi-color-text-2);
}
.underline{
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.overline{
-webkit-text-decoration-line: overline;
text-decoration-line: overline;
}
.opacity-0{
opacity: 0;
}
.opacity-10{
opacity: 0.1;
}
.opacity-100{
opacity: 1;
}
.opacity-5{
opacity: 0.05;
}
.opacity-50{
opacity: 0.5;
}
.opacity-60{
opacity: 0.6;
}
.opacity-70{
opacity: 0.7;
}
.opacity-80{
opacity: 0.8;
}
.opacity-90{
opacity: 0.9;
}
.\!shadow-lg{
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.\!shadow-sm{
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.shadow{
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(123\2c 208\2c 255\2c 0\.1\)\]{
--tw-shadow: 0 0 10px rgba(123,208,255,0.1);
--tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(129\2c 140\2c 248\2c 0\.1\)\]{
--tw-shadow: 0 0 10px rgba(129,140,248,0.1);
--tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(16\2c 185\2c 129\2c 0\.1\)\]{
--tw-shadow: 0 0 10px rgba(16,185,129,0.1);
--tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(221\2c 184\2c 255\2c 0\.1\)\]{
--tw-shadow: 0 0 10px rgba(221,184,255,0.1);
--tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_16px_36px_rgba\(15\2c 23\2c 42\2c 0\.06\)\]{
--tw-shadow: 0 16px 36px rgba(15,23,42,0.06);
--tw-shadow-colored: 0 16px 36px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_40px_rgba\(94\2c 52\2c 33\2c 0\.10\)\]{
--tw-shadow: 0 18px 40px rgba(94,52,33,0.10);
--tw-shadow-colored: 0 18px 40px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_48px_rgba\(15\2c 23\2c 42\2c 0\.06\)\]{
--tw-shadow: 0 18px 48px rgba(15,23,42,0.06);
--tw-shadow-colored: 0 18px 48px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_44px_rgba\(15\2c 23\2c 42\2c 0\.08\)\]{
--tw-shadow: 0 20px 44px rgba(15,23,42,0.08);
--tw-shadow-colored: 0 20px 44px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_60px_rgba\(15\2c 23\2c 42\2c 0\.10\)\]{
--tw-shadow: 0 24px 60px rgba(15,23,42,0.10);
--tw-shadow-colored: 0 24px 60px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_12px_rgba\(123\2c 208\2c 255\2c 0\.15\)\]{
--tw-shadow: inset 0 0 12px rgba(123,208,255,0.15);
--tw-shadow-colored: inset 0 0 12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_12px_rgba\(129\2c 140\2c 248\2c 0\.15\)\]{
--tw-shadow: inset 0 0 12px rgba(129,140,248,0.15);
--tw-shadow-colored: inset 0 0 12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_12px_rgba\(221\2c 184\2c 255\2c 0\.15\)\]{
--tw-shadow: inset 0 0 12px rgba(221,184,255,0.15);
--tw-shadow-colored: inset 0 0 12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-inner{
--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md{
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm{
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline{
outline-style: solid;
}
.ring{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2{
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-opacity-50{
--tw-ring-opacity: 0.5;
}
.blur{
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[72px\]{
--tw-blur: blur(72px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow{
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale{
--tw-grayscale: grayscale(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert{
--tw-invert: invert(100%);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur{
--tw-backdrop-blur: blur(8px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-\[18px\]{
--tw-backdrop-blur: blur(18px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm{
--tw-backdrop-blur: blur(4px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl{
--tw-backdrop-blur: blur(24px);
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter{
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all{
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors{
transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity{
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-shadow{
transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-transform{
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-200{
transition-duration: 200ms;
}
.duration-300{
transition-duration: 300ms;
}
.duration-500{
transition-duration: 500ms;
}
.ease-in-out{
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out{
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[ws\:cancelSteer\]{
ws: cancelSteer;
}
.\[ws\:closeWs\]{
ws: closeWs;
}
.\[ws\:loadMoreMessages\]{
ws: loadMoreMessages;
}
.\[ws\:onclose\]{
ws: onclose;
}
.\[ws\:onopen\]{
ws: onopen;
}
.\[ws\:promoteSteer\]{
ws: promoteSteer;
}
.\[ws\:resumeSession\]{
ws: resumeSession;
}
.\[ws\:sendSteer\]{
ws: sendSteer;
}
.\[ws\:session\.resumed\]{
ws: session.resumed;
}
}
/* ==================== 宫格图保持宽高比 ==================== */
.vc-grid-img {
max-width: 500px !important;
height: auto !important;
object-fit: contain !important;
}
/* ==================== 全局基础样式 ==================== */
:root {
/* Layout */
--sidebar-width: 248px;
--sidebar-width-collapsed: 76px;
--sidebar-current-width: var(--sidebar-width);
--sidebar-float-inset: 12px;
--app-header-height: 76px;
--app-shell-padding: 28px;
--app-shell-max: 1420px;
--app-shell-marketing-max: 1280px;
/* EvoChic Design Tokens — Light */
--ev-surface: #f8f9ff;
--ev-surface-container-lowest: #ffffff;
--ev-surface-container-low: #f3f5ff;
--ev-surface-container: #edf0fb;
--ev-surface-container-high: #e7ebf7;
--ev-surface-container-highest: #dfe4f0;
--ev-surface-bright: #fcfcff;
--ev-surface-dim: #ebeff8;
--ev-surface-variant: #e7ebf7;
--ev-primary: #6f5cc6;
--ev-primary-rgb: 111, 92, 198;
--semi-color-bg-1-rgb: 248, 249, 252;
--semi-color-bg-2-rgb: 240, 242, 247;
--ev-primary-container: #c2b5ff;
--ev-primary-dim: #5c48b7;
--ev-on-primary: #ffffff;
--ev-on-primary-container: #2f225d;
--ev-secondary: #d56ca6;
--ev-secondary-container: #ffb8e0;
--ev-tertiary: #1f9cc0;
--ev-tertiary-container: #a0e9ff;
--ev-error: #b41340;
--ev-error-container: #f74b6d;
--ev-on-surface: #293042;
--ev-on-surface-variant: #646c84;
--ev-on-error: #ffefef;
--ev-outline: #8992ab;
--ev-outline-variant: #c9d0e5;
--ev-gradient: linear-gradient(135deg, #a0e9ff 0%, #c2b5ff 54%, #ffb8e0 100%);
}
body.sidebar-collapsed {
--sidebar-current-width: var(--sidebar-width-collapsed);
}
body.sidebar-pinned {
--sidebar-current-width: var(--sidebar-width);
}
html,
body,
#root {
min-height: 100%;
}
html {
background-color: #f5f7fa;
}
html.dark {
background-color: #0f172a;
}
body {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
color: var(--semi-color-text-0);
background:
radial-gradient(
circle at top left,
rgba(70, 71, 211, 0.08),
transparent 28%
),
linear-gradient(180deg, #f5f7fa 0%, #eef1f4 100%);
--semi-color-primary: #4647d3;
--semi-color-primary-hover: #3939c7;
--semi-color-primary-active: #2f2fb0;
--semi-color-primary-disabled: #9396ff;
--semi-color-primary-light-default: #f0f0ff;
--semi-color-primary-light-hover: #e0e0ff;
--semi-color-primary-light-active: #c7c9ff;
--semi-color-bg-0: #f5f7fa;
--semi-color-bg-1: #eef1f4;
--semi-color-bg-2: #e5e8ec;
--semi-color-fill-0: rgba(70, 71, 211, 0.04);
--semi-color-fill-1: rgba(70, 71, 211, 0.07);
--semi-color-border: rgba(70, 71, 211, 0.12);
--semi-color-text-0: #2c2f32;
--semi-color-text-1: rgba(44, 47, 50, 0.8);
--semi-color-text-2: rgba(44, 47, 50, 0.6);
--ev-control-radius-small: 14px;
--ev-control-radius: 18px;
--ev-control-radius-large: 20px;
--ev-control-height-small: 36px;
--ev-control-height: 44px;
--ev-control-height-large: 52px;
--ev-control-surface: rgba(255, 255, 255, 0.82);
--ev-control-surface-hover: rgba(255, 255, 255, 0.96);
--ev-control-surface-active: rgba(240, 243, 252, 0.98);
--ev-control-border: rgba(100, 116, 139, 0.16);
--ev-control-border-strong: rgba(79, 70, 229, 0.28);
--ev-control-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
--ev-control-shadow-focus: 0 0 0 4px rgba(99, 102, 241, 0.12);
--ev-card-radius: 28px;
--ev-card-surface: rgba(255, 255, 255, 0.86);
--ev-card-border: rgba(148, 163, 184, 0.14);
--ev-card-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
--ev-card-shadow-hover: 0 28px 56px rgba(15, 23, 42, 0.12);
--ev-overlay-surface: rgba(255, 255, 255, 0.92);
--ev-overlay-mask: rgba(15, 23, 42, 0.52);
--ev-tab-surface: rgba(255, 255, 255, 0.74);
--ev-tab-surface-active: rgba(70, 71, 211, 0.08);
--ev-table-head-bg: rgba(70, 71, 211, 0.05);
--ev-table-row-hover: rgba(240, 240, 255, 0.76);
--ev-empty-surface: rgba(255, 255, 255, 0.72);
--ev-skeleton-base: rgba(70, 71, 211, 0.08);
--ev-skeleton-highlight: rgba(255, 255, 255, 0.58);
letter-spacing: -0.01em;
line-height: 1.5;
}
html.dark body {
background:
radial-gradient(
circle at top left,
rgba(129, 140, 248, 0.1),
transparent 25%
),
linear-gradient(180deg, #0f172a 0%, #131b2e 100%);
color-scheme: dark;
--semi-color-bg-0: #0f172a;
--semi-color-bg-1: #131b2e;
--semi-color-bg-2: #1a2236;
--semi-color-fill-0: rgba(255, 255, 255, 0.05);
--semi-color-fill-1: rgba(255, 255, 255, 0.09);
--semi-color-border: rgba(189, 194, 255, 0.1);
--semi-color-text-0: #dae2fd;
--semi-color-text-1: rgba(218, 226, 253, 0.82);
--semi-color-text-2: rgba(218, 226, 253, 0.62);
/* EvoChic Design Tokens — Dark */
--ev-surface: #0f172a;
--ev-surface-container-lowest: #060e20;
--ev-surface-container-low: #131b2e;
--ev-surface-container: #1a2236;
--ev-surface-container-high: #222a3d;
--ev-surface-container-highest: #2d3449;
--ev-surface-bright: #31394d;
--ev-surface-dim: #0f172a;
--ev-surface-variant: #2d3449;
--ev-primary: #bdc2ff;
--ev-primary-rgb: 189, 194, 255;
--semi-color-bg-1-rgb: 28, 28, 32;
--semi-color-bg-2-rgb: 36, 36, 42;
--ev-primary-container: #818cf8;
--ev-primary-dim: #a0a6f0;
--ev-on-primary: #131e8c;
--ev-on-primary-container: #101b8a;
--ev-secondary: #7bd0ff;
--ev-secondary-container: #38bdf8;
--ev-tertiary: #ddb8ff;
--ev-tertiary-container: #c084fc;
--ev-error: #ffb4ab;
--ev-error-container: #93000a;
--ev-on-surface: #dae2fd;
--ev-on-surface-variant: #c6c5d5;
--ev-on-error: #690005;
--ev-outline: #908f9e;
--ev-outline-variant: #454653;
--ev-gradient: linear-gradient(135deg, #818cf8 0%, #bdc2ff 50%, #ddb8ff 100%);
--ev-control-surface: rgba(15, 23, 42, 0.84);
--ev-control-surface-hover: rgba(19, 27, 46, 0.96);
--ev-control-surface-active: rgba(26, 34, 54, 0.98);
--ev-control-border: rgba(129, 140, 248, 0.14);
--ev-control-border-strong: rgba(129, 140, 248, 0.26);
--ev-control-shadow: 0 18px 40px rgba(2, 6, 23, 0.26);
--ev-control-shadow-focus: 0 0 0 4px rgba(129, 140, 248, 0.14);
--ev-card-surface: rgba(15, 23, 42, 0.88);
--ev-card-border: rgba(129, 140, 248, 0.14);
--ev-card-shadow: 0 28px 60px rgba(2, 6, 23, 0.34);
--ev-card-shadow-hover: 0 34px 70px rgba(2, 6, 23, 0.42);
--ev-overlay-surface: rgba(15, 23, 42, 0.94);
--ev-overlay-mask: rgba(2, 6, 23, 0.62);
--ev-tab-surface: rgba(255, 255, 255, 0.05);
--ev-tab-surface-active: rgba(129, 140, 248, 0.12);
--ev-table-head-bg: rgba(129, 140, 248, 0.08);
--ev-table-row-hover: rgba(129, 140, 248, 0.08);
--ev-empty-surface: rgba(19, 27, 46, 0.84);
--ev-skeleton-base: rgba(129, 140, 248, 0.12);
--ev-skeleton-highlight: rgba(255, 255, 255, 0.08);
}
code {
font-family:
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
/* ==================== 布局相关样式 ==================== */
.semi-layout::-webkit-scrollbar,
.semi-layout-content::-webkit-scrollbar,
.semi-sider::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.semi-layout,
.semi-layout-content,
.semi-sider {
scrollbar-width: none;
-ms-overflow-style: none;
}
.app-layout-root {
background: transparent;
}
.app-layout-root-console {
position: relative;
}
.app-body-layout {
width: 100%;
flex: 1 1 auto;
min-height: 0;
}
.app-body-layout-console {
align-items: stretch;
}
.app-main-layout {
background: transparent;
min-height: 0;
}
.app-main-layout-console {
background: transparent;
}
.app-header-region {
min-height: var(--app-header-height);
}
.app-header-region-console {
min-height: var(--app-header-height);
}
.app-sidebar-scrim {
position: fixed;
inset: 0;
z-index: 105;
border: none;
padding: 0;
background: rgba(15, 23, 42, 0.42);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.page-loading-state {
min-height: clamp(280px, 48vh, 520px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.page-loading-state--section,
.page-loading-state--modal {
min-height: 220px;
padding: 16px;
}
.page-loading-state--inline {
min-height: 120px;
padding: 12px;
}
.page-loading-host {
position: relative;
}
.page-loading-overlay {
position: absolute;
inset: 0;
z-index: 12;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
border-radius: inherit;
background: rgba(255, 255, 255, 0.68);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
html.dark .page-loading-overlay {
background: rgba(15, 23, 42, 0.58);
}
.page-loading-overlay--overlay {
background: rgba(15, 23, 42, 0.72);
}
html.dark .page-loading-overlay--overlay {
background: rgba(2, 6, 23, 0.78);
}
.page-loading-panel {
width: min(100%, 380px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 34px 28px 26px;
border-radius: calc(var(--ev-card-radius) + 4px);
border: 1px solid var(--ev-card-border);
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.94) 0%,
rgba(245, 247, 255, 0.9) 100%
),
var(--ev-card-surface);
box-shadow:
0 26px 64px rgba(79, 70, 229, 0.12),
0 10px 24px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
text-align: center;
overflow: hidden;
}
html.dark .page-loading-panel {
background:
linear-gradient(
180deg,
rgba(19, 27, 46, 0.96) 0%,
rgba(15, 23, 42, 0.92) 100%
),
var(--ev-card-surface);
box-shadow:
0 26px 70px rgba(2, 6, 23, 0.42),
0 12px 30px rgba(2, 6, 23, 0.34);
}
.page-loading-panel--section,
.page-loading-panel--modal {
width: min(100%, 320px);
padding: 28px 24px 22px;
border-radius: 24px;
}
.page-loading-panel--inline {
width: min(100%, 260px);
padding: 20px 18px 16px;
border-radius: 20px;
gap: 10px;
}
.page-loading-panel--overlay {
border-color: rgba(255, 255, 255, 0.14);
background: linear-gradient(
180deg,
rgba(22, 28, 50, 0.96) 0%,
rgba(15, 23, 42, 0.92) 100%
);
}
.page-loading-brand {
margin-bottom: 2px;
}
.page-loading-brand .brand-logo {
gap: 12px;
}
.page-loading-brand .brand-logo-mark {
width: 34px;
height: 34px;
}
.page-loading-brand .brand-logo-wordmark {
font-size: 18px;
font-weight: 900;
letter-spacing: -0.04em;
}
.page-loading-panel--inline .page-loading-brand .brand-logo-mark {
width: 28px;
height: 28px;
}
.page-loading-panel--inline .page-loading-brand .brand-logo-wordmark {
font-size: 16px;
}
.page-loading-copy {
display: flex;
flex-direction: column;
gap: 8px;
}
.page-loading-indicator {
position: relative;
display: grid;
place-items: center;
border-radius: 999px;
}
.page-loading-indicator--large {
width: 72px;
height: 72px;
}
.page-loading-indicator--medium {
width: 60px;
height: 60px;
}
.page-loading-indicator--small {
width: 48px;
height: 48px;
}
.page-loading-orbit {
position: absolute;
inset: 0;
border-radius: 999px;
border: 3px solid transparent;
animation: page-loading-spin 1.18s linear infinite;
}
.page-loading-orbit--primary {
border-top-color: var(--ev-primary);
border-right-color: rgba(111, 92, 198, 0.22);
}
.page-loading-orbit--secondary {
inset: 9px;
border-bottom-color: var(--ev-secondary);
border-left-color: rgba(213, 108, 166, 0.18);
animation-duration: 1.7s;
animation-direction: reverse;
}
.page-loading-core {
width: 34%;
height: 34%;
border-radius: 999px;
background: radial-gradient(
circle,
var(--ev-primary-container) 0%,
var(--ev-primary) 72%,
rgba(111, 92, 198, 0.08) 100%
);
box-shadow:
0 0 0 8px rgba(111, 92, 198, 0.08),
0 8px 20px rgba(111, 92, 198, 0.24);
animation: page-loading-pulse 1.45s ease-in-out infinite;
}
.page-loading-title {
font-size: 16px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ev-on-surface);
}
.page-loading-description {
font-size: 13px;
line-height: 1.6;
color: var(--ev-on-surface-variant);
}
.page-loading-panel--overlay .page-loading-title,
.page-loading-panel--overlay .page-loading-description,
.page-loading-panel--overlay .page-loading-brand .brand-logo-wordmark {
color: #eef2ff;
}
.page-loading-progress {
position: relative;
width: min(180px, 100%);
height: 4px;
overflow: hidden;
border-radius: 999px;
background: rgba(148, 163, 184, 0.22);
}
.page-loading-progress span {
display: block;
width: 42%;
height: 100%;
border-radius: inherit;
background: var(--ev-gradient);
animation: page-loading-progress 1.8s ease-in-out infinite;
}
@keyframes page-loading-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes page-loading-pulse {
0%,
100% {
transform: scale(0.92);
opacity: 0.9;
}
50% {
transform: scale(1);
opacity: 1;
}
}
@keyframes page-loading-progress {
0% {
transform: translateX(-130%);
}
50% {
transform: translateX(95%);
}
100% {
transform: translateX(210%);
}
}
body .semi-banner {
border-radius: 22px !important;
border: 1px solid var(--ev-control-border) !important;
background: var(--ev-control-surface) !important;
box-shadow: var(--ev-control-shadow) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
body .semi-tag {
border-radius: 999px !important;
}
body .semi-form-field-label,
body .semi-form-field-label-text {
color: var(--ev-on-surface) !important;
font-weight: 700;
}
body .semi-form-field-extra,
body .semi-form-field-help-text,
body .semi-form-field-error-message {
color: var(--ev-on-surface-variant) !important;
}
body .semi-button {
border-radius: var(--ev-control-radius) !important;
min-height: var(--ev-control-height);
font-weight: 700;
letter-spacing: -0.01em;
transition:
transform 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
color 0.2s ease;
}
body .semi-button:hover {
transform: translateY(-1px);
}
body .semi-button:active {
transform: translateY(0);
}
body .semi-button.semi-button-size-small {
min-height: var(--ev-control-height-small);
border-radius: var(--ev-control-radius-small) !important;
}
body .semi-button.semi-button-size-large {
min-height: var(--ev-control-height-large);
border-radius: var(--ev-control-radius-large) !important;
}
body .semi-button.semi-button-light,
body .semi-button.semi-button-outline {
border-color: var(--ev-control-border) !important;
background: var(--ev-control-surface) !important;
box-shadow: var(--ev-control-shadow) !important;
}
body .semi-button.semi-button-light:hover,
body .semi-button.semi-button-outline:hover {
border-color: var(--ev-control-border-strong) !important;
background: var(--ev-control-surface-hover) !important;
}
body .semi-button.semi-button-light:active,
body .semi-button.semi-button-outline:active {
background: var(--ev-control-surface-active) !important;
}
body .semi-button.semi-button-borderless {
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
body .semi-button.semi-button-borderless:hover {
background: var(--semi-color-fill-0) !important;
}
body .semi-button.semi-button-borderless:active {
background: var(--semi-color-fill-1) !important;
}
body
.semi-button.semi-button-primary:not(.semi-button-light):not(
.semi-button-outline
):not(.semi-button-borderless) {
color: #ffffff !important;
border-color: transparent !important;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
box-shadow: 0 18px 36px rgba(99, 102, 241, 0.24) !important;
}
body .semi-button:focus-visible {
box-shadow: var(--ev-control-shadow-focus) !important;
}
body .semi-button[disabled],
body .semi-button.semi-button-disabled {
transform: none !important;
box-shadow: none !important;
}
body
:is(
.semi-input-wrapper,
.semi-input-number,
.semi-select,
.semi-select-selection,
.semi-input-textarea-wrapper,
.semi-datepicker-range-input,
.semi-tagInput,
.semi-tree-select,
.semi-cascader
) {
border-radius: var(--ev-control-radius) !important;
border: 1px solid var(--ev-control-border) !important;
background: var(--ev-control-surface) !important;
box-shadow: var(--ev-control-shadow) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition:
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
body
:is(
.semi-input-wrapper:hover,
.semi-input-number:hover,
.semi-select:hover,
.semi-select-selection:hover,
.semi-input-textarea-wrapper:hover,
.semi-datepicker-range-input:hover,
.semi-tagInput:hover,
.semi-tree-select:hover,
.semi-cascader:hover
) {
background: var(--ev-control-surface-hover) !important;
border-color: var(--ev-control-border-strong) !important;
}
body
:is(
.semi-input-wrapper-focus,
.semi-input-wrapper:focus-within,
.semi-input-number:focus-within,
.semi-select-open,
.semi-select-focus,
.semi-select:focus-within,
.semi-input-textarea-wrapper:focus-within,
.semi-datepicker-range-input:focus-within,
.semi-tagInput:focus-within,
.semi-tree-select:focus-within,
.semi-cascader:focus-within
) {
background: var(--ev-control-surface-hover) !important;
border-color: var(--ev-control-border-strong) !important;
box-shadow: var(--ev-control-shadow-focus) !important;
}
body
:is(
.semi-input,
.semi-input-textarea,
.semi-input-number-input,
.semi-select-selection-text
) {
color: var(--ev-on-surface) !important;
font-weight: 500;
}
body .semi-input::placeholder,
body .semi-input-textarea::placeholder,
body .semi-select-selection-placeholder,
body .semi-input-prefix-text,
body .semi-input-suffix-text,
body .semi-select-prefix-text,
body .semi-select-suffix-text {
color: var(--semi-color-text-2) !important;
}
body .semi-card {
border-radius: var(--ev-card-radius) !important;
border: 1px solid var(--ev-card-border) !important;
background: var(--ev-card-surface) !important;
box-shadow: var(--ev-card-shadow) !important;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
transition:
box-shadow 0.2s ease,
border-color 0.2s ease;
}
body .semi-card:hover {
box-shadow: var(--ev-card-shadow-hover) !important;
}
body .semi-card-header {
padding: 20px 24px 16px;
background: transparent;
}
body .semi-card-body {
padding: 24px;
}
body .semi-card-footer {
padding: 18px 24px 20px;
background: transparent;
}
body .semi-card-header-wrapper-title,
body .semi-card-meta-wrapper-title {
color: var(--ev-on-surface) !important;
font-weight: 800;
}
body .semi-card-meta-wrapper-description {
color: var(--ev-on-surface-variant) !important;
}
body .semi-modal-mask {
background: var(--ev-overlay-mask) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body .semi-modal-content,
body .semi-sidesheet-content,
body .semi-sidesheet-inner {
border-radius: var(--ev-card-radius) !important;
border: 1px solid var(--ev-card-border) !important;
background: var(--ev-overlay-surface) !important;
box-shadow: var(--ev-card-shadow-hover) !important;
}
body .semi-modal-header,
body .semi-sidesheet-header {
padding: 22px 24px 18px;
border-bottom: 1px solid var(--ev-control-border) !important;
background: transparent !important;
}
body .semi-modal-title,
body .semi-sidesheet-title {
color: var(--ev-on-surface) !important;
font-weight: 800;
}
body .semi-modal-body,
body .semi-sidesheet-body {
color: var(--ev-on-surface-variant) !important;
background: transparent !important;
}
body .semi-modal-footer,
body .semi-sidesheet-footer {
padding: 18px 24px 22px;
border-top: 1px solid var(--ev-control-border) !important;
background: transparent !important;
}
body .semi-empty {
padding: 8px 0;
}
body .semi-empty-description {
color: var(--ev-on-surface-variant) !important;
}
body .semi-skeleton-avatar,
body .semi-skeleton-image,
body .semi-skeleton-title,
body .semi-skeleton-button,
body .semi-skeleton-paragraph li {
background: var(--ev-skeleton-base) !important;
}
body .semi-skeleton-active .semi-skeleton-avatar,
body .semi-skeleton-active .semi-skeleton-image,
body .semi-skeleton-active .semi-skeleton-title,
body .semi-skeleton-active .semi-skeleton-button,
body .semi-skeleton-active .semi-skeleton-paragraph li {
background: linear-gradient(
90deg,
var(--ev-skeleton-base) 20%,
var(--ev-skeleton-highlight) 50%,
var(--ev-skeleton-base) 80%
) !important;
background-size: 400% 100% !important;
}
.api-model-surface {
background: var(--ev-surface-container-low) !important;
border-color: var(--ev-outline-variant) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.api-model-hero {
background:
radial-gradient(
circle at top right,
rgba(70, 71, 211, 0.08),
transparent 24%
),
linear-gradient(
135deg,
rgba(240, 240, 255, 0.92) 0%,
rgba(245, 247, 250, 0.96) 100%
) !important;
border-color: rgba(70, 71, 211, 0.1) !important;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.api-model-stat {
background: var(--ev-surface-container-lowest) !important;
border-color: var(--ev-outline-variant) !important;
}
.api-model-toolbar .semi-input-wrapper,
.api-model-toolbar .semi-input-wrapper-focus,
.api-model-toolbar .semi-select-selection {
background: var(--ev-surface-container-lowest) !important;
border-color: var(--ev-outline-variant) !important;
}
.api-model-page .semi-banner {
border-radius: 16px;
background: var(--ev-surface-container-low) !important;
border: 1px solid var(--ev-outline-variant) !important;
}
.api-model-callout {
background:
radial-gradient(
circle at top right,
rgba(70, 71, 211, 0.12),
transparent 30%
),
linear-gradient(
180deg,
rgba(240, 240, 255, 0.96) 0%,
rgba(255, 255, 255, 0.92) 100%
) !important;
border: 1px solid rgba(70, 71, 211, 0.12) !important;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}
.api-model-callout-item {
background: rgba(255, 255, 255, 0.74) !important;
border: 1px solid var(--ev-outline-variant) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.api-model-copy-button {
min-width: 30px !important;
height: 30px !important;
border-radius: 999px !important;
border: 1px solid var(--ev-outline-variant) !important;
background: var(--ev-surface-container-lowest) !important;
}
/* Dashboard shell / card / button overrides — all using CSS variables for auto light/dark */
.dashboard-chart-shell {
background: var(--ev-surface-container-lowest) !important;
border-radius: 24px !important;
border: 1px solid var(--ev-card-border) !important;
box-shadow: var(--ev-card-shadow) !important;
}
.dashboard-action-button {
background: var(--ev-control-surface) !important;
color: var(--ev-on-surface-variant) !important;
border-radius: 999px !important;
border: 1px solid var(--ev-control-border) !important;
box-shadow: var(--ev-control-shadow) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.dashboard-action-button-primary {
background: linear-gradient(
135deg,
var(--ev-primary-dim) 0%,
var(--ev-primary) 100%
) !important;
color: var(--ev-on-primary) !important;
border-radius: 999px !important;
box-shadow: 0 12px 32px color-mix(in srgb, var(--ev-primary) 30%, transparent) !important;
border: none !important;
}
.dashboard-card {
border-radius: 24px !important;
background: var(--ev-surface-container-lowest) !important;
border: 1px solid var(--ev-card-border) !important;
box-shadow: var(--ev-card-shadow) !important;
}
html.dark .api-model-hero {
background:
radial-gradient(
circle at top right,
rgba(129, 140, 248, 0.12),
transparent 24%
),
linear-gradient(
180deg,
rgba(23, 31, 51, 0.96) 0%,
rgba(19, 27, 46, 0.98) 100%
) !important;
border-color: rgba(129, 140, 248, 0.14) !important;
}
html.dark .api-model-stat,
html.dark .api-model-page .semi-banner,
html.dark .api-model-callout-item {
background: rgba(23, 31, 51, 0.9) !important;
}
/* dashboard-chart-shell and dashboard-action-button now auto-adapt via CSS vars */
html.dark .api-model-callout {
background:
radial-gradient(
circle at top right,
rgba(129, 140, 248, 0.14),
transparent 30%
),
linear-gradient(
180deg,
rgba(23, 31, 51, 0.98) 0%,
rgba(19, 27, 46, 0.98) 100%
) !important;
border-color: rgba(129, 140, 248, 0.16) !important;
}
html.dark .api-model-copy-button {
background: rgba(23, 31, 51, 0.92) !important;
border-color: rgba(189, 194, 255, 0.1) !important;
}
/* dashboard-action-button-primary now auto-adapts via CSS vars */
.app-shell {
width: 100%;
}
.app-shell-console {
min-height: calc(100vh - var(--app-header-height));
padding: 22px var(--app-shell-padding) 40px;
}
.app-shell-console.app-shell-fullscreen {
padding: 0;
min-height: 0;
height: 100%;
}
.app-shell-showcase {
padding: 0;
}
.app-shell-auth {
min-height: calc(100vh - var(--app-header-height));
}
.app-shell-embed {
height: calc(100vh - var(--app-header-height));
min-height: calc(100vh - var(--app-header-height));
padding: 18px;
box-sizing: border-box;
overflow: hidden;
}
.workspace-page-shell,
.data-page-shell {
width: 100%;
}
.workspace-page-shell {
max-width: var(--app-shell-max);
margin: 0 auto;
}
.page-header-block {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 24px;
}
.page-kicker {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ev-primary);
}
.page-title {
font-size: clamp(28px, 3vw, 38px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 800;
color: var(--semi-color-text-0);
}
.page-description {
max-width: 720px;
color: var(--ev-on-surface-variant);
line-height: 1.65;
}
.app-shell > div[class*='mt-[60px]'] {
margin-top: 0 !important;
}
.app-shell > div[class*='px-2'] {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ═══════════════════════════════════════════════════════════════
Homepage — EvoChic Lumina v2 Design System
Palette: primary #4648d4, secondary #712ae2, tertiary #4b41e1
Surface: #f7f9fb, container-lowest: #fff, container-low: #f2f4f6
On-surface: #191c1e, on-surface-variant: #464554
Ambient shadows · No borders · Gradient CTAs · Glassmorphism
═══════════════════════════════════════════════════════════════ */
.evo-home {
position: relative;
width: 100%;
color: var(--ev-on-surface);
background: var(--ev-surface);
}
.evo-shell {
width: min(100%, 1280px);
margin: 0 auto;
padding: 0 24px;
}
.evo-hero-section,
.evo-bento-section,
.evo-code-section,
.evo-cta-section {
position: relative;
}
/* ── Hero ── */
.evo-hero-section {
overflow: hidden;
padding: 56px 0 80px;
background:
radial-gradient(
ellipse 60% 50% at 10% 20%,
rgba(70, 72, 212, 0.08),
transparent
),
radial-gradient(
ellipse 50% 40% at 80% 60%,
rgba(113, 42, 226, 0.06),
transparent
);
}
.evo-hero-glow-a,
.evo-hero-glow-b {
position: absolute;
border-radius: 999px;
filter: blur(80px);
pointer-events: none;
}
.evo-hero-glow-a {
top: -20px;
left: -60px;
width: 340px;
height: 340px;
background: rgba(70, 72, 212, 0.12);
}
.evo-hero-glow-b {
right: -40px;
top: 80px;
width: 300px;
height: 300px;
background: rgba(113, 42, 226, 0.08);
}
.evo-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
gap: 56px;
align-items: center;
}
.evo-hero-copy,
.evo-hero-visual,
.evo-bento-titles,
.evo-code-copy,
.evo-code-window {
min-width: 0;
}
.evo-eyebrow,
.evo-section-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px;
padding: 0 14px;
border-radius: 999px;
background: rgba(70, 72, 212, 0.07);
color: #4648d4;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.evo-eyebrow::before,
.evo-section-kicker::before {
content: '';
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
opacity: 0.8;
}
.evo-display-title {
margin: 24px 0 0;
font-size: clamp(52px, 7vw, 80px);
line-height: 0.92;
font-weight: 800;
letter-spacing: -0.02em;
color: #191c1e;
}
.evo-text-gradient {
background: linear-gradient(135deg, #4648d4 0%, #712ae2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.evo-display-body {
max-width: 540px;
margin: 20px 0 0;
font-size: 17px;
line-height: 1.7;
color: #464554;
}
.evo-hero-actions,
.evo-cta-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 32px;
}
.evo-btn-primary,
.evo-btn-ghost,
.evo-cta-primary,
.evo-cta-ghost,
.evo-bento-link {
min-height: 50px;
padding: 0 28px;
border-radius: 999px;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
background 0.22s ease;
}
.evo-btn-primary,
.evo-cta-primary {
color: #fff;
background: linear-gradient(135deg, #4648d4, #712ae2);
box-shadow: 0 16px 48px rgba(70, 72, 212, 0.22);
}
.evo-btn-primary:hover,
.evo-cta-primary:hover {
transform: translateY(-2px);
box-shadow: 0 20px 56px rgba(70, 72, 212, 0.3);
}
.evo-btn-ghost,
.evo-cta-ghost,
.evo-bento-link {
color: #4648d4;
background: #f2f4f6;
}
.evo-btn-ghost:hover,
.evo-cta-ghost:hover,
.evo-bento-link:hover {
transform: translateY(-1px);
background: #eceef0;
}
/* ── Hero Visual ── */
.evo-hero-visual {
position: relative;
}
.evo-hero-card {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 1.5rem;
background:
radial-gradient(
circle at 30% 20%,
rgba(255, 255, 255, 0.9),
transparent 50%
),
linear-gradient(180deg, #ffffff 0%, #f2f4f6 100%);
box-shadow: 0 24px 64px rgba(25, 28, 30, 0.05);
}
.evo-hero-art {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
opacity: 0.95;
}
.evo-hero-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent);
pointer-events: none;
}
.evo-hero-chip {
position: absolute;
left: -16px;
bottom: -14px;
width: min(220px, 56%);
padding: 16px 20px;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: 0 16px 48px rgba(25, 28, 30, 0.06);
}
.evo-hero-chip-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #767586;
}
.evo-hero-chip-icon {
color: #10b981;
}
.evo-hero-chip p {
margin: 8px 0 0;
font-size: 13px;
font-weight: 600;
color: #191c1e;
}
/* ── Bento Services ── */
.evo-bento-section {
padding: 16px 0 72px;
background: #f2f4f6;
}
.evo-bento-header,
.evo-section-title,
.evo-section-subtitle {
min-width: 0;
}
.evo-bento-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 36px;
}
.evo-section-title {
margin: 0;
font-size: clamp(32px, 3.5vw, 44px);
line-height: 1;
font-weight: 800;
letter-spacing: -0.02em;
color: #191c1e;
}
.evo-section-subtitle {
margin: 10px 0 0;
max-width: 560px;
font-size: 15px;
line-height: 1.7;
color: #464554;
}
.evo-bento-divider {
width: 72px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #4648d4, #712ae2);
flex-shrink: 0;
margin-bottom: 8px;
}
.evo-bento-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.evo-bento-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 260px;
padding: 28px;
overflow: hidden;
border-radius: 1.5rem;
background: #ffffff;
box-shadow: 0 20px 56px rgba(25, 28, 30, 0.04);
transition:
transform 0.22s ease,
box-shadow 0.22s ease;
}
.evo-bento-card:hover {
transform: translateY(-3px);
box-shadow: 0 24px 64px rgba(25, 28, 30, 0.07);
}
.evo-bento-main,
.evo-bento-wide {
grid-column: auto;
}
.evo-bento-secondary,
.evo-bento-accent {
grid-column: auto;
}
.evo-bento-card-body,
.evo-bento-wide-body {
display: flex;
flex-direction: column;
gap: 14px;
}
.evo-bento-icon,
.evo-bento-icon-accent,
.evo-bento-circle {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
flex-shrink: 0;
}
.evo-bento-icon {
background: #f2f4f6;
color: #191c1e;
}
.evo-bento-icon-primary {
color: #4648d4;
background: rgba(70, 72, 212, 0.08);
}
.evo-bento-icon-secondary {
color: #712ae2;
background: rgba(113, 42, 226, 0.08);
}
.evo-bento-icon-accent,
.evo-bento-circle {
background: rgba(70, 72, 212, 0.08);
color: #4648d4;
}
.evo-bento-card-title {
margin: 0;
font-size: 22px;
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.01em;
color: #191c1e;
}
.evo-bento-card-text {
margin: 0;
max-width: 34rem;
font-size: 14px;
line-height: 1.7;
color: #464554;
}
.evo-bento-card-text-caps {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.evo-bento-link {
margin-top: auto;
align-self: flex-start;
}
.evo-bento-secondary,
.evo-bento-accent {
justify-content: space-between;
}
.evo-bento-wide {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.evo-bento-bars {
display: flex;
align-items: flex-end;
gap: 10px;
width: min(240px, 100%);
height: 122px;
flex-shrink: 0;
}
.evo-bento-bar-track {
position: relative;
flex: 1;
height: 100%;
overflow: hidden;
border-radius: 999px;
background: #eceef0;
}
.evo-bento-bar-fill {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--bar-h);
border-radius: inherit;
background: linear-gradient(180deg, #6063ee 0%, #4648d4 100%);
animation: evoBarRise 1s ease both;
}
/* ── Code Preview ── */
.evo-code-section {
padding: 24px 0 72px;
background: #f7f9fb;
}
.evo-code-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 24px;
align-items: stretch;
}
.evo-code-window {
border-radius: 1.5rem;
overflow: hidden;
background: #2d3133;
box-shadow: 0 24px 64px rgba(25, 28, 30, 0.1);
}
.evo-code-copy {
border-radius: 1.5rem;
background: #ffffff;
box-shadow: 0 20px 56px rgba(25, 28, 30, 0.04);
}
.evo-code-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 20px;
background: rgba(255, 255, 255, 0.04);
}
.evo-code-dots {
display: flex;
align-items: center;
gap: 7px;
}
.evo-dot-red,
.evo-dot-yellow,
.evo-dot-green {
width: 10px;
height: 10px;
border-radius: 999px;
}
.evo-dot-red {
background: #f87171;
}
.evo-dot-yellow {
background: #fbbf24;
}
.evo-dot-green {
background: #34d399;
}
.evo-code-filename {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(239, 241, 243, 0.5);
}
.evo-code-body {
padding: 24px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 13px;
line-height: 1.8;
color: #eff1f3;
}
.evo-code-body p {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
.evo-syn-kw {
color: #c0c1ff;
}
.evo-syn-kw2 {
color: #5eead4;
}
.evo-syn-str {
color: #fbbf24;
}
.evo-syn-cmt {
color: rgba(239, 241, 243, 0.38);
}
.evo-code-copy {
padding: 32px;
display: flex;
flex-direction: column;
justify-content: center;
}
.evo-check-list {
margin: 24px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 16px;
}
.evo-check-list li {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
font-weight: 600;
color: #191c1e;
}
.evo-check-icon {
color: #4648d4;
flex-shrink: 0;
}
/* ── CTA ── */
.evo-cta-section {
padding: 0 0 24px;
}
.evo-cta-inner {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
gap: 32px;
align-items: center;
padding: 48px 48px;
border-radius: 1.5rem;
color: #fff;
background: linear-gradient(135deg, #4648d4 0%, #712ae2 100%);
box-shadow: 0 24px 64px rgba(70, 72, 212, 0.2);
}
.evo-cta-inner::after {
content: '';
position: absolute;
top: -20%;
right: -8%;
width: 50%;
height: 160%;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.01)
);
transform: skewX(-14deg);
pointer-events: none;
}
.evo-cta-title {
position: relative;
z-index: 1;
margin: 0;
font-size: clamp(32px, 3.5vw, 48px);
line-height: 1;
font-weight: 800;
letter-spacing: -0.02em;
}
.evo-cta-body {
position: relative;
z-index: 1;
max-width: 400px;
margin: 14px 0 0;
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
}
.evo-cta-actions {
position: relative;
z-index: 1;
}
.evo-cta-copy,
.evo-cta-terminal {
position: relative;
z-index: 1;
min-width: 0;
}
.evo-cta-terminal {
overflow: hidden;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.evo-cta-terminal-head {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.04);
}
.evo-cta-terminal-filename {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.evo-cta-terminal-body {
padding: 16px 20px 20px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12.5px;
line-height: 1.85;
color: rgba(255, 255, 255, 0.88);
}
.evo-cta-terminal-body p {
margin: 0;
}
.evo-cta-primary {
background: #ffffff;
color: #4648d4;
box-shadow: 0 16px 48px rgba(25, 28, 30, 0.12);
}
.evo-cta-ghost {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
}
/* ── Dark Mode ── */
html.dark .evo-home {
color: var(--semi-color-text-0);
background: var(--semi-color-bg-0);
}
html.dark .evo-hero-section {
background:
radial-gradient(
ellipse 60% 50% at 10% 20%,
rgba(70, 72, 212, 0.14),
transparent
),
radial-gradient(
ellipse 50% 40% at 80% 60%,
rgba(113, 42, 226, 0.1),
transparent
);
}
html.dark .evo-bento-section {
background: var(--semi-color-bg-1);
}
html.dark .evo-code-section {
background: var(--semi-color-bg-0);
}
html.dark .evo-eyebrow,
html.dark .evo-section-kicker {
background: rgba(192, 193, 255, 0.1);
color: #c0c1ff;
}
html.dark .evo-display-title,
html.dark .evo-section-title,
html.dark .evo-bento-card-title {
color: #eff1f3;
}
html.dark .evo-display-body,
html.dark .evo-section-subtitle,
html.dark .evo-bento-card-text,
html.dark .evo-hero-chip-head,
html.dark .evo-code-filename {
color: rgba(239, 241, 243, 0.62);
}
html.dark .evo-hero-card {
background: linear-gradient(
180deg,
var(--semi-color-bg-2) 0%,
var(--semi-color-bg-1) 100%
);
box-shadow: 0 24px 64px rgba(2, 6, 23, 0.22);
}
html.dark .evo-bento-card,
html.dark .evo-code-copy {
background: var(--semi-color-bg-2);
box-shadow: 0 20px 56px rgba(2, 6, 23, 0.18);
}
html.dark .evo-code-window {
background: var(--ev-surface-container-lowest);
box-shadow: 0 24px 64px rgba(2, 6, 23, 0.26);
}
html.dark .evo-hero-chip {
background: rgba(26, 34, 54, 0.88);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: 0 16px 48px rgba(2, 6, 23, 0.22);
}
html.dark .evo-hero-chip p,
html.dark .evo-check-list li {
color: #eff1f3;
}
html.dark .evo-code-body {
color: #eff1f3;
}
html.dark .evo-btn-ghost,
html.dark .evo-bento-link {
background: rgba(239, 241, 243, 0.06);
color: #c0c1ff;
}
html.dark .evo-code-head {
background: rgba(255, 255, 255, 0.03);
}
html.dark .evo-bento-icon {
background: rgba(239, 241, 243, 0.06);
}
html.dark .evo-bento-icon-primary {
color: #c0c1ff;
background: rgba(192, 193, 255, 0.1);
}
html.dark .evo-bento-icon-secondary {
color: #d2bbff;
background: rgba(210, 187, 255, 0.1);
}
html.dark .evo-bento-icon-accent,
html.dark .evo-bento-circle {
background: rgba(192, 193, 255, 0.1);
color: #c0c1ff;
}
html.dark .evo-bento-bar-track {
background: rgba(239, 241, 243, 0.06);
}
html.dark .evo-text-gradient {
background: linear-gradient(135deg, #c0c1ff 0%, #d2bbff 100%);
-webkit-background-clip: text;
background-clip: text;
}
@keyframes evoBarRise {
from {
transform: translateY(100%);
opacity: 0.4;
}
to {
transform: translateY(0%);
opacity: 1;
}
}
/* ── Responsive ── */
@media (max-width: 1180px) {
.evo-hero-grid,
.evo-code-grid,
.evo-cta-inner {
grid-template-columns: 1fr;
}
.evo-bento-main,
.evo-bento-wide,
.evo-bento-secondary,
.evo-bento-accent {
grid-column: auto;
}
.evo-bento-wide {
flex-direction: column;
align-items: flex-start;
}
.evo-cta-inner::after {
width: 60%;
}
}
@media (max-width: 767px) {
.evo-shell {
padding: 0 16px;
}
.evo-hero-section {
padding: 28px 0 48px;
}
.evo-display-title {
font-size: clamp(38px, 12vw, 56px);
}
.evo-display-body {
font-size: 15px;
}
.evo-hero-chip {
position: static;
width: 100%;
margin-top: 18px;
}
.evo-bento-header {
flex-direction: column;
align-items: flex-start;
}
.evo-bento-grid {
grid-template-columns: 1fr;
}
.evo-bento-main,
.evo-bento-wide,
.evo-bento-secondary,
.evo-bento-accent {
grid-column: auto;
}
.evo-bento-card,
.evo-code-copy,
.evo-cta-inner {
padding: 22px;
}
.evo-code-body {
padding: 18px;
font-size: 12px;
}
.evo-cta-title {
font-size: clamp(28px, 10vw, 40px);
}
.evo-btn-primary,
.evo-btn-ghost,
.evo-cta-primary,
.evo-cta-ghost {
width: 100%;
}
}
.auth-shell {
width: min(1220px, 100%);
margin: 0 auto;
min-height: calc(100vh - var(--app-header-height) - 32px);
display: grid;
grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
align-items: stretch;
justify-content: center;
gap: 32px;
position: relative;
overflow: hidden;
border-radius: 0;
border: none;
background: transparent;
box-shadow: none;
}
.auth-shell::before,
.auth-shell::after {
content: '';
position: absolute;
border-radius: 999px;
filter: blur(100px);
pointer-events: none;
z-index: 0;
}
.auth-shell::before {
top: -10%;
right: -10%;
width: 40%;
height: 40%;
background: rgba(224, 226, 255, 0.4);
}
.auth-shell::after {
bottom: -10%;
left: -10%;
width: 40%;
height: 40%;
background: rgba(237, 233, 254, 0.35);
}
.auth-form-pane {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 0;
background: transparent;
width: 100%;
max-width: none;
}
.auth-form-wrapper {
width: 100%;
max-width: 520px;
}
.auth-visual-pane {
position: relative;
z-index: 1;
display: flex;
align-items: stretch;
justify-content: center;
min-width: 0;
}
.auth-shell .semi-card {
border-radius: 32px !important;
border: 1px solid rgba(148, 163, 184, 0.14) !important;
background: rgba(255, 255, 255, 0.86) !important;
box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.auth-shell .semi-card-body {
padding: 32px 28px !important;
}
.auth-shell .semi-input-wrapper,
.auth-shell .semi-input-number,
.auth-shell .semi-select,
.auth-shell .semi-select-selection,
.auth-shell .semi-input-textarea-wrapper {
border-radius: 18px !important;
border: 1px solid rgba(148, 163, 184, 0.16) !important;
background: rgba(248, 250, 252, 0.88) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
min-height: 52px;
}
.auth-shell .semi-input-wrapper-focus,
.auth-shell .semi-input-wrapper:focus-within {
/* 2026-04-22 FOCUS-RING FIX: same inset pattern as the global rule. */
border-color: rgba(99, 102, 241, 0.5) !important;
background: rgba(255, 255, 255, 0.96) !important;
box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.3) !important;
}
.auth-shell .semi-button {
border-radius: 18px !important;
min-height: 52px;
border: 1px solid rgba(148, 163, 184, 0.14) !important;
background: rgba(255, 255, 255, 0.82) !important;
color: var(--semi-color-text-1) !important;
box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08) !important;
transition: all 0.2s ease;
}
.auth-shell .semi-button:hover {
background: rgba(255, 255, 255, 0.96) !important;
transform: translateY(-1px);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
}
.auth-shell .semi-button:active {
transform: scale(0.98);
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08) !important;
}
.auth-shell .semi-button.semi-button-primary {
color: #ffffff !important;
border-color: transparent !important;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
font-weight: 700 !important;
box-shadow: 0 20px 40px rgba(99, 102, 241, 0.24) !important;
}
.auth-shell .semi-button.semi-button-primary:hover {
box-shadow: 0 24px 44px rgba(99, 102, 241, 0.3) !important;
transform: translateY(-1px);
}
.auth-shell .semi-button.semi-button-primary:active {
box-shadow: 0 14px 28px rgba(99, 102, 241, 0.22) !important;
transform: scale(0.97);
}
.auth-shell .evochic-gradient-btn {
color: #ffffff !important;
border-color: transparent !important;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
font-weight: 700 !important;
box-shadow: 0 20px 40px rgba(99, 102, 241, 0.24) !important;
}
.auth-shell .evochic-gradient-btn:hover {
opacity: 1 !important;
transform: translateY(-1px) !important;
box-shadow: 0 24px 44px rgba(99, 102, 241, 0.3) !important;
}
.auth-shell .semi-divider {
color: var(--semi-color-text-2);
}
.auth-shell .semi-checkbox-inner-display,
.auth-shell .semi-checkbox-checked .semi-checkbox-inner-display {
border-radius: 6px;
}
.auth-shell a {
color: var(--ev-primary);
}
/* auth-visual-pane old styles removed — hidden in neomorphic layout */
.auth-visual-stage {
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
min-height: 100%;
padding: 42px;
border-radius: 36px;
border: 1px solid rgba(148, 163, 184, 0.12);
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.94) 0%,
rgba(238, 242, 255, 0.88) 100%
);
box-shadow: 0 30px 64px rgba(15, 23, 42, 0.12);
overflow: hidden;
}
.auth-visual-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
border: 1px solid rgba(70, 71, 211, 0.1);
background: rgba(255, 255, 255, 0.72);
padding: 8px 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ev-primary);
}
.auth-visual-title {
margin-top: 20px;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.05;
letter-spacing: -0.04em;
font-weight: 800;
color: var(--semi-color-text-0);
}
.auth-visual-description {
margin-top: 18px;
max-width: 420px;
line-height: 1.8;
color: var(--ev-on-surface-variant);
}
.auth-visual-grid {
margin-top: 28px;
display: grid;
gap: 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.auth-metric-card {
border-radius: 24px;
border: 1px solid rgba(70, 71, 211, 0.08);
background: rgba(255, 255, 255, 0.74);
padding: 18px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.auth-metric-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--semi-color-text-2);
}
.auth-metric-value {
margin-top: 8px;
font-size: 28px;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--semi-color-text-0);
}
.auth-metric-copy {
margin-top: 8px;
font-size: 13px;
color: var(--ev-on-surface-variant);
}
html.dark .auth-shell {
background: transparent;
border: none;
}
html.dark .auth-shell::before {
background: rgba(129, 140, 248, 0.12);
}
html.dark .auth-shell::after {
background: rgba(124, 58, 237, 0.08);
}
html.dark .auth-form-pane {
background: transparent;
}
html.dark .auth-shell .semi-card {
background: rgba(15, 23, 42, 0.88) !important;
border-color: rgba(129, 140, 248, 0.14) !important;
box-shadow: 0 34px 70px rgba(2, 6, 23, 0.34) !important;
}
html.dark .auth-metric-card {
background: var(--ev-surface-container) !important;
border-color: rgba(189, 194, 255, 0.08) !important;
}
html.dark .auth-shell .semi-input-wrapper,
html.dark .auth-shell .semi-input-number,
html.dark .auth-shell .semi-select,
html.dark .auth-shell .semi-select-selection,
html.dark .auth-shell .semi-input-textarea-wrapper {
background: rgba(15, 23, 42, 0.86) !important;
border-color: rgba(129, 140, 248, 0.12) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
html.dark .auth-shell .semi-button {
background: rgba(15, 23, 42, 0.82) !important;
border-color: rgba(129, 140, 248, 0.12) !important;
box-shadow: 0 22px 44px rgba(2, 6, 23, 0.24) !important;
}
html.dark .auth-shell .semi-button.semi-button-primary,
html.dark .auth-shell .evochic-gradient-btn {
color: #ffffff !important;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}
html.dark .auth-visual-stage {
background: linear-gradient(
145deg,
rgba(19, 27, 46, 0.94) 0%,
rgba(30, 41, 59, 0.88) 100%
);
border-color: rgba(129, 140, 248, 0.12);
box-shadow: 0 38px 80px rgba(2, 6, 23, 0.36);
}
html.dark .auth-visual-kicker {
background: rgba(15, 23, 42, 0.74);
border-color: rgba(129, 140, 248, 0.16);
}
@media (max-width: 1023px) {
.auth-shell {
width: min(560px, 100%);
min-height: calc(100vh - var(--app-header-height));
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.auth-form-pane {
padding: 12px 0;
}
.auth-visual-pane {
display: none;
}
}
/* auth-visual-pane is hidden by default in neomorphic layout */
/* ==================== 导航和侧边栏样式 ==================== */
.semi-navigation-item {
margin-bottom: 6px !important;
padding: 6px 12px !important;
}
.semi-navigation-sub-title {
padding: 0 !important;
border-radius: 14px !important;
}
.semi-navigation-item-icon {
justify-items: center;
align-items: center;
}
.semi-navigation-item-icon-info {
margin-right: 0;
}
.sidebar-nav .semi-navigation-item-text {
flex: 1;
min-width: 0;
}
.semi-navigation-item,
.semi-navigation-sub-title {
height: 100% !important;
}
.semi-navigation-item-collapsed {
height: 44px !important;
}
#root
> section
> header
> section
> div
> div
> div
> div.semi-navigation-header-list-outer
> div.semi-navigation-list-wrapper
> ul
> div
> a
> li
> span {
font-weight: 600 !important;
}
/* 自定义侧边栏样式 — 浮动玻璃面板 */
.sidebar-container {
height: 100%;
display: flex;
flex-direction: column;
padding-top: 0;
transition: width 0.3s ease;
overflow: hidden;
background: rgba(242, 244, 246, 0.88);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 24px;
border: 1px solid rgba(148, 163, 184, 0.14);
box-shadow:
0 20px 48px rgba(15, 23, 42, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
html.dark .sidebar-container {
background: rgba(19, 27, 46, 0.92);
border-color: rgba(129, 140, 248, 0.12);
box-shadow:
0 24px 56px rgba(2, 6, 23, 0.36),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.sidebar-container-brandless {
padding-top: 12px;
}
.sidebar-container-brandless .sidebar-nav {
padding-top: 6px;
}
.sidebar-container-brandless .sidebar-divider:first-child {
margin-top: 0;
}
.sidebar-container-brandless .sidebar-group-label {
padding-top: 10px;
}
/* 侧边栏品牌区 */
.sidebar-brand {
display: flex;
align-items: center;
gap: 14px;
min-height: 96px;
padding: 22px 20px 18px;
text-decoration: none;
position: relative;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.sidebar-brand-collapsed {
min-height: 84px;
justify-content: center;
padding-left: 0;
padding-right: 0;
}
.sidebar-brand:hover {
opacity: 0.92;
transform: translateY(-1px);
}
.sidebar-brand::after {
display: none;
}
.sidebar-brand-copy {
display: flex;
flex-direction: column;
gap: 3px;
}
.sidebar-brand-logo-shell {
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 10px 24px rgba(70, 71, 211, 0.16);
flex-shrink: 0;
}
.sidebar-brand-logo {
width: 100%;
height: 100%;
border-radius: 12px;
flex-shrink: 0;
padding: 6px;
background: transparent;
box-shadow: none;
}
html.dark .sidebar-brand-logo-shell {
background: rgba(23, 31, 51, 0.94);
box-shadow: 0 12px 24px rgba(129, 140, 248, 0.14);
}
.sidebar-brand-kicker {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ev-primary);
}
.sidebar-brand-name {
font-size: 22px;
font-weight: 800;
color: var(--semi-color-text-0);
white-space: nowrap;
line-height: 1;
letter-spacing: -0.04em;
}
.sidebar-brand-subtitle {
margin-top: 0;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ev-on-surface-variant);
}
.sidebar-nav {
flex: 1;
width: 100%;
background: transparent;
height: 100%;
overflow: hidden;
border-right: none;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar {
display: none;
}
/* 侧边栏导航项样式 */
.sidebar-nav-item {
min-height: 46px;
border-radius: 14px !important;
margin: 0 12px 4px !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0 14px !important;
position: relative;
color: #464554;
}
html.dark .sidebar-nav-item {
color: rgba(239, 241, 243, 0.72);
}
.sidebar-nav-item:hover:not(.sidebar-nav-item-selected) {
background-color: rgba(70, 72, 212, 0.05);
color: #4648d4;
}
.sidebar-nav-item-selected {
background: #ffffff !important;
color: #4648d4 !important;
font-weight: 700 !important;
box-shadow: 0 12px 40px rgba(25, 28, 30, 0.06);
}
html.dark .sidebar-nav-item-selected {
background: var(--semi-color-bg-2) !important;
box-shadow: 0 12px 40px rgba(2, 6, 23, 0.18);
}
.sidebar-nav-item-selected * {
color: var(--ev-primary) !important;
}
.sidebar-nav-label {
font-size: 15px;
line-height: 1.2;
font-weight: 600;
color: inherit;
}
.sidebar-nav-chevron {
opacity: 0.52;
color: var(--ev-on-surface-variant);
}
.sidebar-nav-item-selected .sidebar-nav-chevron {
opacity: 0.92;
color: var(--ev-primary);
}
/* 图标容器样式 */
.sidebar-icon-container {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
transition: all 0.2s ease;
}
.sidebar-sub-icon-container {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
margin-left: 0;
transition: all 0.2s ease;
}
/* 分割线样式 */
.sidebar-divider {
margin: 8px 16px 8px;
opacity: 1;
height: 0;
background: transparent;
}
/* 分组标签样式 */
.sidebar-group-label {
padding: 16px 20px 8px;
color: #767586;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 1;
display: flex;
align-items: center;
}
html.dark .sidebar-group-label {
color: rgba(239, 241, 243, 0.38);
}
.sidebar-group-label::before {
display: none;
}
/* 底部折叠按钮 */
.sidebar-collapse-button {
display: flex;
justify-content: center;
align-items: center;
padding: 14px 14px 18px;
margin-top: auto;
cursor: pointer;
background-color: var(--ev-card-surface);
border-top: 1px solid var(--ev-card-border);
position: -webkit-sticky;
position: sticky;
bottom: 0;
z-index: 10;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
html.dark .sidebar-collapse-button {
background-color: rgba(15, 23, 42, 0.9);
border-top-color: var(--ev-card-border);
}
.card-pro-shell {
border-radius: 28px !important;
}
.card-pro-header {
padding: 24px 24px 18px;
}
.settings-page-shell {
width: 100%;
max-width: var(--app-shell-max);
margin: 0 auto;
}
.card-pro-heading {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.card-pro-heading-copy {
max-width: 720px;
}
.card-pro-heading-eyebrow {
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--ev-primary) 12%, transparent);
color: var(--ev-primary);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.card-pro-heading-title {
margin-top: 12px;
font-size: clamp(26px, 3.4vw, 34px);
line-height: 1.04;
font-weight: 800;
letter-spacing: -0.05em;
color: var(--ev-on-surface);
}
.card-pro-heading-subtitle {
margin: 12px 0 0;
font-size: 14px;
line-height: 1.8;
color: var(--ev-on-surface-variant);
}
.card-pro-heading-extra {
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
.card-pro-badge {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 0 14px;
border-radius: 999px;
background: color-mix(in srgb, var(--ev-primary) 10%, transparent);
color: var(--ev-primary);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.card-pro-control-stack {
gap: 14px;
}
.card-pro-actions-row {
width: 100%;
}
.card-pro-search {
border-radius: 24px;
border: 1px solid var(--ev-control-border);
background: var(--ev-surface-container);
padding: 16px;
}
.card-pro-mobile-toggle {
min-height: 44px;
border: 1px solid var(--ev-control-border);
background: var(--ev-control-surface);
color: var(--ev-on-surface-variant);
box-shadow: var(--ev-control-shadow);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition:
transform 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.card-pro-mobile-toggle:hover {
transform: translateY(-1px);
border-color: var(--ev-control-border-strong);
background: var(--ev-control-surface-hover);
box-shadow: var(--ev-control-shadow-focus);
}
.card-pro-content {
padding: 0 24px;
}
.card-pro-footer {
padding: 16px 24px 18px;
border-top: 1px solid var(--ev-control-border);
background: var(--ev-surface-container-low);
}
.console-page-shell {
width: 100%;
max-width: var(--app-shell-max);
margin: 0 auto;
}
.console-page-heading {
margin-bottom: 24px;
}
.console-page-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
flex-wrap: wrap;
}
.console-page-banner {
margin-bottom: 16px;
}
.proxy-management-page-shell,
.product-management-page-shell {
max-width: var(--app-shell-max);
}
.proxy-management-overview-grid {
align-items: stretch;
}
.proxy-management-summary-card,
.proxy-management-guidance-card-shell,
.proxy-management-section-card,
.proxy-management-a2a-card {
overflow: hidden;
transition: box-shadow 0.2s ease;
}
.proxy-management-summary-card:hover,
.proxy-management-guidance-card-shell:hover {
box-shadow: 0 4px 24px rgba(70, 71, 211, 0.06);
}
.proxy-management-stat-card {
padding: 18px;
border-radius: 22px;
border: 1px solid rgba(70, 71, 211, 0.08);
background: linear-gradient(
180deg,
rgba(70, 71, 211, 0.05) 0%,
rgba(70, 71, 211, 0.02) 100%
);
transition:
transform 0.15s ease,
box-shadow 0.15s ease;
}
.proxy-management-stat-card:hover {
transform: translateY(-1px);
box-shadow: 0 2px 12px rgba(70, 71, 211, 0.08);
}
.proxy-management-guidance-list {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.proxy-management-guidance-item {
padding: 16px;
border-radius: 20px;
border: 1px solid rgba(70, 71, 211, 0.08);
background: rgba(247, 249, 252, 0.82);
transition: background 0.15s ease;
}
.proxy-management-guidance-item:hover {
background: rgba(240, 243, 248, 0.95);
}
.proxy-management-section-title-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 12px;
}
.proxy-management-section-copy {
margin-bottom: 12px;
}
/* Table density & readability improvements */
.proxy-management-section-card .semi-table-thead th {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--semi-color-text-2);
}
.proxy-management-section-card .semi-table-tbody td {
font-size: 13px;
}
.proxy-management-section-card .semi-table-row:hover td {
background: rgba(70, 71, 211, 0.02);
}
.proxy-a2a-credentials {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 8px;
}
.proxy-a2a-credential-card {
min-width: 0;
padding: 10px 12px;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.12);
background: rgba(245, 247, 250, 0.88);
font-size: 12px;
}
.proxy-a2a-expanded {
display: flex;
flex-direction: column;
gap: 12px;
}
.proxy-a2a-peer-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--semi-color-border);
}
.proxy-a2a-peer-row:last-child {
border-bottom: none;
}
.proxy-a2a-peer-copy {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.proxy-a2a-add-row {
display: flex;
align-items: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.proxy-a2a-add-name {
flex: 1 1 180px;
min-width: 0;
}
.proxy-a2a-add-url {
flex: 2 1 280px;
min-width: 0;
}
.proxy-a2a-onboarding {
margin-top: 4px;
}
.proxy-a2a-onboarding-summary {
cursor: pointer;
color: var(--semi-color-primary);
font-size: 13px;
}
.proxy-a2a-onboarding-body {
margin-top: 8px;
padding: 12px;
border-radius: 16px;
background: var(--semi-color-fill-0);
font-size: 12px;
white-space: pre-wrap;
line-height: 1.6;
}
.product-management-search-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
width: 100%;
}
.agent-dashboard-page-shell {
max-width: var(--app-shell-max);
}
.agent-dashboard-main-grid > * {
min-width: 0;
}
.agent-dashboard-stats {
display: flex;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.agent-dashboard-stat-chip {
padding: 10px 16px;
border-radius: 10px;
background: var(--semi-color-bg-1);
border: 1px solid var(--semi-color-border);
display: flex;
align-items: center;
gap: 8px;
min-width: 100px;
}
.agent-dashboard-bot-quota-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 16px;
}
.agent-dashboard-bot-quota-card {
border-radius: 16px !important;
border: 1px solid var(--semi-color-border);
transition: box-shadow 0.2s;
}
.agent-dashboard-bot-quota-card:hover {
box-shadow: 0 2px 12px rgba(99, 102, 241, 0.08);
}
html.dark .agent-dashboard-bot-quota-card:hover {
box-shadow: 0 2px 12px rgba(99, 102, 241, 0.15);
}
.agent-dashboard-main-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px 280px;
gap: 14px;
}
.agent-dashboard-stack,
.agent-dashboard-right-stack {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
.agent-dashboard-empty {
padding: 24px;
text-align: center;
}
.settings-page-heading {
margin-bottom: 24px;
}
.settings-page-layout {
background: transparent !important;
}
.settings-page-tabs-shell {
padding: 10px;
}
.settings-page-tabs .semi-tabs-bar {
padding: 12px 12px 0;
}
.settings-page-tabs .semi-tabs-content {
padding: 0 12px 12px !important;
height: auto !important;
}
.settings-page-tabs .semi-tabs-pane {
height: auto !important;
overflow: visible !important;
}
.database-page-shell {
max-width: min(1440px, calc(100vw - 32px));
}
/* Database page layout */
.db-page-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.db-hero-grid,
.db-api-grid,
.db-management-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.db-resource-card,
.db-api-card,
.db-panel {
position: relative;
overflow: hidden;
border-radius: 24px;
border: 1px solid rgba(148, 163, 184, 0.22);
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.96) 0%,
rgba(248, 250, 252, 0.9) 58%,
rgba(236, 253, 245, 0.72) 100%
);
box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}
.db-resource-card::before,
.db-api-card::before,
.db-panel::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
118deg,
rgba(79, 70, 229, 0.1),
transparent 34%,
rgba(20, 184, 166, 0.1)
);
}
.db-resource-card-header,
.db-api-card-header,
.db-panel-heading {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 14px;
}
.db-resource-card-header,
.db-panel-heading {
margin-bottom: 18px;
}
.db-resource-icon,
.db-api-card-icon,
.db-panel-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 16px;
background: rgba(79, 70, 229, 0.12);
color: var(--ev-primary);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
flex-shrink: 0;
}
.db-card-title {
margin: 0 0 6px !important;
word-break: break-word;
}
.db-kicker {
margin-bottom: 4px;
color: var(--semi-color-tertiary);
font-size: 12px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.db-status-tag {
max-width: 140px;
white-space: nowrap;
}
.db-resource-card {
padding: 22px;
}
.db-resource-metrics {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.db-resource-metrics > div,
.db-api-meta-item,
.db-storage-meta-grid > div {
min-width: 0;
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(255, 255, 255, 0.58);
}
.db-resource-metrics span,
.db-api-meta-item span,
.db-storage-meta-grid span {
display: block;
margin-bottom: 6px;
color: var(--semi-color-tertiary);
font-size: 12px;
font-weight: 600;
}
.db-resource-metrics strong,
.db-api-meta-item strong,
.db-storage-meta-grid strong {
display: block;
color: var(--semi-color-text-0);
font-size: 13px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.db-api-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
}
.db-api-card > * {
position: relative;
z-index: 1;
}
.db-api-card-header > div:nth-child(2) {
min-width: 0;
}
.db-copy-button {
border-radius: 999px !important;
box-shadow: 0 10px 24px rgba(79, 70, 229, 0.22);
}
.db-api-copy-button {
align-self: start;
white-space: nowrap;
}
.db-api-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.db-endpoint-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.db-endpoint-row {
display: grid;
grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(15, 23, 42, 0.03);
}
.db-endpoint-row .semi-tag {
max-width: 92px;
justify-content: center;
white-space: nowrap;
}
.db-endpoint-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.db-endpoint-copy strong {
font-size: 13px;
color: var(--semi-color-text-0);
}
.db-endpoint-copy span,
.db-endpoint-copy small {
color: var(--semi-color-tertiary);
font-family:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
monospace;
font-size: 12px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.db-code-block {
overflow: hidden;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(15, 23, 42, 0.92);
color: #e5e7eb;
}
.db-code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
color: #cbd5e1;
font-size: 12px;
font-weight: 700;
}
.db-code-block pre {
max-height: 260px;
margin: 0;
padding: 16px;
overflow: auto;
font-size: 12px;
line-height: 1.65;
white-space: pre;
}
.db-api-notes {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(20, 184, 166, 0.24);
background: rgba(20, 184, 166, 0.08);
color: var(--semi-color-text-0);
}
.db-api-notes svg {
margin-top: 2px;
color: #0f766e;
}
.db-api-notes ul {
margin: 0;
padding-left: 18px;
}
.db-api-notes li {
margin: 0 0 6px;
color: var(--semi-color-tertiary);
font-size: 13px;
line-height: 1.55;
}
.db-form-card {
padding: 24px;
}
.db-form-card .semi-form-field {
margin-bottom: 16px !important;
}
.db-form-actions {
display: flex;
gap: 10px;
margin-top: 8px;
flex-wrap: wrap;
}
.db-warning-banner {
border-radius: 16px !important;
border: 1px solid var(--ev-control-border) !important;
}
.db-storage-loading,
.db-storage-empty,
.db-storage-status {
position: relative;
z-index: 1;
}
.db-storage-loading {
display: flex;
min-height: 160px;
align-items: center;
justify-content: center;
}
.db-storage-empty,
.db-storage-status {
display: flex;
flex-direction: column;
gap: 16px;
}
.db-storage-progress {
padding: 16px;
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(255, 255, 255, 0.58);
}
.db-storage-usage {
display: flex;
align-items: baseline;
gap: 6px;
margin: 4px 0 12px;
}
.db-storage-usage strong {
font-size: 22px;
line-height: 1;
}
.db-storage-usage span {
color: var(--semi-color-tertiary);
}
.db-storage-meta-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.db-storage-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.db-storage-actions .semi-button {
width: 100%;
}
.db-storage-danger-note {
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(248, 113, 113, 0.22);
background: rgba(254, 226, 226, 0.48);
color: var(--semi-color-danger);
font-size: 12px;
line-height: 1.5;
}
.db-reset-confirm {
display: flex;
flex-direction: column;
gap: 10px;
color: var(--semi-color-text-1);
font-size: 13px;
line-height: 1.55;
}
.db-reset-confirm p {
margin: 0;
}
.db-reset-confirm strong {
display: block;
padding: 10px 12px;
border-radius: 12px;
background: rgba(248, 113, 113, 0.1);
color: var(--semi-color-danger);
}
html.dark .db-resource-card,
html.dark .db-api-card,
html.dark .db-panel {
border-color: rgba(148, 163, 184, 0.18);
background: linear-gradient(
145deg,
rgba(15, 23, 42, 0.96) 0%,
rgba(17, 24, 39, 0.92) 58%,
rgba(20, 83, 75, 0.46) 100%
);
box-shadow: 0 24px 52px rgba(0, 0, 0, 0.28);
}
html.dark .db-resource-metrics > div,
html.dark .db-api-meta-item,
html.dark .db-storage-meta-grid > div,
html.dark .db-storage-progress {
border-color: rgba(148, 163, 184, 0.14);
background: rgba(15, 23, 42, 0.5);
}
html.dark .db-endpoint-row {
border-color: rgba(148, 163, 184, 0.14);
background: rgba(2, 6, 23, 0.28);
}
html.dark .db-api-notes {
border-color: rgba(45, 212, 191, 0.2);
background: rgba(20, 184, 166, 0.08);
}
html.dark .db-storage-danger-note {
border-color: rgba(248, 113, 113, 0.2);
background: rgba(127, 29, 29, 0.18);
}
@media (max-width: 1180px) {
.db-hero-grid,
.db-api-grid,
.db-management-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.database-page-shell {
max-width: 100%;
}
.db-resource-card,
.db-api-card,
.db-panel {
border-radius: 20px;
}
.db-resource-card-header,
.db-panel-heading,
.db-api-card-header {
grid-template-columns: auto minmax(0, 1fr);
}
.db-status-tag,
.db-api-copy-button {
grid-column: 1 / -1;
justify-self: start;
}
.db-resource-metrics,
.db-api-meta-grid,
.db-storage-meta-grid {
grid-template-columns: 1fr;
}
.db-endpoint-row {
grid-template-columns: 1fr;
}
.db-endpoint-row .semi-tag {
max-width: -webkit-max-content;
max-width: max-content;
}
}
.showcase-personal-page {
width: 100%;
}
.showcase-personal-shell {
width: 100%;
display: flex;
flex-direction: column;
gap: 24px;
}
.showcase-personal-header {
margin-bottom: 24px;
}
.showcase-personal-title,
.showcase-personal-description {
margin: 0;
}
.showcase-personal-grid {
display: grid;
grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.showcase-personal-profile-column,
.showcase-personal-content-column {
min-width: 0;
}
.showcase-personal-content-column {
display: flex;
flex-direction: column;
gap: 24px;
}
.showcase-personal-card {
position: relative;
overflow: hidden;
border-radius: 32px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.96) 0%,
rgba(238, 242, 255, 0.9) 100%
);
box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.showcase-personal-card-glow {
position: absolute;
top: -88px;
right: -72px;
width: 220px;
height: 220px;
border-radius: 999px;
background: radial-gradient(
circle,
rgba(99, 102, 241, 0.18) 0%,
rgba(99, 102, 241, 0) 68%
);
pointer-events: none;
}
.showcase-personal-card-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 20px;
padding: 28px;
}
.showcase-personal-identity {
display: flex;
align-items: center;
gap: 18px;
min-width: 0;
}
.showcase-personal-avatar-wrap {
flex-shrink: 0;
}
.showcase-personal-avatar-ring {
display: inline-flex;
padding: 4px;
border-radius: 999px;
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.18) 0%,
rgba(139, 92, 246, 0.16) 100%
);
box-shadow: 0 18px 36px rgba(99, 102, 241, 0.16);
}
.showcase-personal-avatar {
width: 112px;
height: 112px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: #ffffff;
font-size: 30px;
font-weight: 800;
letter-spacing: -0.04em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.showcase-personal-identity-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.showcase-personal-role-pill {
display: inline-flex;
align-items: center;
width: -webkit-max-content;
width: max-content;
min-height: 28px;
padding: 0 12px;
border-radius: 999px;
background: rgba(99, 102, 241, 0.08);
color: var(--ev-primary);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.showcase-personal-name {
margin: 0;
font-size: clamp(28px, 4vw, 36px);
line-height: 1.02;
font-weight: 800;
letter-spacing: -0.06em;
color: var(--ev-on-surface);
word-break: break-word;
}
.showcase-personal-meta {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--ev-on-surface-variant);
}
.showcase-personal-stats {
display: grid;
gap: 12px;
}
.showcase-personal-stat-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 15px 16px;
border-radius: 18px;
background: rgba(248, 250, 252, 0.92);
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.1);
}
.showcase-personal-stat-label {
font-size: 13px;
font-weight: 700;
color: var(--ev-on-surface-variant);
}
.showcase-personal-stat-value {
font-size: 15px;
font-weight: 800;
color: var(--ev-on-surface);
}
.showcase-personal-stat-value-primary {
color: var(--ev-primary);
}
.showcase-personal-badge {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 32px;
padding: 0 12px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.1);
color: #059669;
font-size: 12px;
font-weight: 800;
}
.showcase-personal-badge-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: currentColor;
}
.showcase-personal-panel {
border-radius: 28px !important;
border: 1px solid rgba(148, 163, 184, 0.14) !important;
background: rgba(255, 255, 255, 0.88) !important;
box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.showcase-personal-panel .semi-card-body {
padding: 24px !important;
}
html.dark .showcase-personal-card {
background: linear-gradient(
145deg,
rgba(15, 23, 42, 0.94) 0%,
rgba(30, 41, 59, 0.9) 100%
);
border-color: rgba(129, 140, 248, 0.14);
box-shadow: 0 34px 70px rgba(2, 6, 23, 0.36);
}
html.dark .showcase-personal-card-glow {
background: radial-gradient(
circle,
rgba(129, 140, 248, 0.22) 0%,
rgba(129, 140, 248, 0) 68%
);
}
html.dark .showcase-personal-role-pill {
background: rgba(129, 140, 248, 0.16);
color: #c7d2fe;
}
html.dark .showcase-personal-name {
color: #f8fafc;
}
html.dark .showcase-personal-meta,
html.dark .showcase-personal-stat-label {
color: #94a3b8;
}
html.dark .showcase-personal-stat-row {
background: rgba(23, 31, 51, 0.92);
box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.08);
}
html.dark .showcase-personal-stat-value {
color: #e2e8f0;
}
html.dark .showcase-personal-panel {
background: rgba(15, 23, 42, 0.88) !important;
border-color: rgba(129, 140, 248, 0.14) !important;
box-shadow: 0 34px 70px rgba(2, 6, 23, 0.34) !important;
}
@media (max-width: 1279px) {
.showcase-personal-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 767px) {
.showcase-personal-shell {
gap: 20px;
}
.showcase-personal-card-inner {
padding: 20px;
}
.showcase-personal-identity {
flex-direction: column;
align-items: flex-start;
}
.showcase-personal-avatar {
width: 88px;
height: 88px;
font-size: 24px;
}
.showcase-personal-stat-row {
flex-direction: column;
align-items: flex-start;
}
}
/* card-pro eyebrow/subtitle/badge/search/footer/toggle
now all auto-adapt via CSS variables — no dark overrides needed */
html.dark .settings-page-layout {
background: transparent !important;
}
html.dark .agent-dashboard-stat-chip {
background: rgba(15, 23, 42, 0.78);
border-color: rgba(129, 140, 248, 0.14);
}
html.dark .proxy-management-stat-card {
border-color: rgba(129, 140, 248, 0.14);
background: linear-gradient(
180deg,
rgba(55, 65, 81, 0.72) 0%,
rgba(30, 41, 59, 0.68) 100%
);
}
html.dark .proxy-management-guidance-item,
html.dark .proxy-a2a-credential-card {
border-color: rgba(148, 163, 184, 0.14);
background: rgba(19, 27, 42, 0.9);
}
html.dark .proxy-management-guidance-item:hover {
background: rgba(25, 35, 55, 0.95);
}
html.dark .proxy-management-summary-card:hover,
html.dark .proxy-management-guidance-card-shell:hover {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
html.dark .proxy-management-stat-card:hover {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}
html.dark .proxy-management-section-card .semi-table-row:hover td {
background: rgba(99, 102, 241, 0.04);
}
html.dark .proxy-a2a-onboarding-body {
background: rgba(30, 41, 59, 0.8);
}
.sidebar-collapse-button-inner {
width: 28px;
height: 28px;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--semi-color-fill-0);
transition: all 0.2s ease;
}
.sidebar-collapse-trigger {
width: 100%;
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--ev-control-border);
background: var(--ev-control-surface);
color: var(--ev-on-surface-variant);
box-shadow: var(--ev-control-shadow);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition:
transform 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.sidebar-collapse-trigger:hover {
transform: translateY(-1px);
border-color: var(--ev-control-border-strong);
background: var(--ev-control-surface-hover);
}
.sidebar-collapse-trigger.is-collapsed {
width: 40px;
min-width: 40px;
padding: 0;
}
.sidebar-collapse-icon-container {
display: inline-block;
transition: transform 0.3s ease;
}
/* 侧边栏区域容器 */
.sidebar-section {
padding-top: 12px;
}
@media (max-width: 767px) {
:root {
--app-shell-padding: 16px;
}
.app-shell-console,
.app-shell-marketing,
.app-shell-embed {
padding: 16px;
}
.page-header-block {
flex-direction: column;
align-items: stretch;
}
.sidebar-container {
background: rgba(242, 244, 246, 0.94);
border-right: none;
border-radius: 24px;
}
html.dark .sidebar-container {
background: rgba(19, 27, 46, 0.96);
}
.sidebar-nav {
background: transparent;
}
.sidebar-collapse-button {
background-color: transparent;
box-shadow: none;
}
.showcase-top-nav {
display: none;
}
.showcase-header-inner {
gap: 12px;
}
.showcase-header-actions {
margin-left: auto;
}
.showcase-header-search {
width: min(180px, 42vw);
}
}
/* ==================== 聊天界面样式 ==================== */
.semi-chat {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: 100%;
max-width: 100% !important;
width: 100% !important;
overflow: hidden !important;
}
.semi-chat-chatBox {
max-width: 100% !important;
overflow: hidden !important;
}
.semi-chat-chatBox-wrap {
max-width: 100% !important;
overflow: hidden !important;
}
.semi-chat-chatBox-content {
min-width: auto;
word-break: break-word;
max-width: 100% !important;
overflow-wrap: break-word !important;
}
.semi-chat-content {
max-width: 100% !important;
overflow: hidden !important;
}
.semi-chat-list {
max-width: 100% !important;
overflow-x: hidden !important;
}
.semi-chat-container {
overflow-x: hidden !important;
}
.semi-chat-chatBox-action {
column-gap: 0 !important;
}
.semi-chat-inputBox-clearButton.semi-button .semi-icon {
font-size: 20px !important;
}
/* 隐藏所有聊天相关区域的滚动条 */
.semi-chat::-webkit-scrollbar,
.semi-chat-chatBox::-webkit-scrollbar,
.semi-chat-chatBox-wrap::-webkit-scrollbar,
.semi-chat-chatBox-content::-webkit-scrollbar,
.semi-chat-content::-webkit-scrollbar,
.semi-chat-list::-webkit-scrollbar,
.semi-chat-container::-webkit-scrollbar {
display: none;
}
.semi-chat,
.semi-chat-chatBox,
.semi-chat-chatBox-wrap,
.semi-chat-chatBox-content,
.semi-chat-content,
.semi-chat-list,
.semi-chat-container {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* ==================== 组件特定样式 ==================== */
/* SelectableButtonGroup */
.sbg-button .semi-button-content {
min-width: 0 !important;
}
.sbg-content {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
min-width: 0;
}
.sbg-ellipsis {
flex: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Tabs组件样式 */
.semi-tabs-content {
padding: 0 !important;
height: calc(100% - 40px) !important;
flex: 1 !important;
}
.semi-tabs-content .semi-tabs-pane {
height: 100% !important;
overflow: hidden !important;
}
.semi-tabs-content .semi-tabs-pane > div {
height: 100% !important;
}
.semi-tabs-bar {
margin-bottom: 0 !important;
}
.semi-tabs-tab {
padding: 0 !important;
}
.semi-tabs-tab + .semi-tabs-tab {
margin-left: 8px !important;
}
.semi-tabs-tab-button {
min-height: 40px;
padding: 0 18px !important;
border-radius: 16px;
border: 1px solid var(--ev-control-border);
background: var(--ev-tab-surface);
color: var(--semi-color-text-1);
font-weight: 700;
letter-spacing: -0.01em;
box-shadow: var(--ev-control-shadow);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.semi-tabs-tab:hover .semi-tabs-tab-button {
background: var(--ev-control-surface-hover);
border-color: var(--ev-control-border-strong);
transform: translateY(-1px);
}
.semi-tabs-tab-active .semi-tabs-tab-button {
background: var(--ev-tab-surface-active);
border-color: var(--ev-control-border-strong);
color: var(--ev-primary);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.22),
0 12px 28px rgba(79, 70, 229, 0.16);
}
html.dark .semi-tabs-tab-button {
background: var(--ev-tab-surface);
border-color: var(--ev-control-border);
}
html.dark .semi-tabs-tab:hover .semi-tabs-tab-button,
html.dark .semi-tabs-tab-active .semi-tabs-tab-button {
background: var(--ev-tab-surface-active);
border-color: var(--ev-control-border-strong);
}
/* 表格样式 */
.tableShow {
display: revert;
}
.tableHiddle {
display: none !important;
}
.semi-table-wrapper {
border-radius: 24px;
border: 1px solid var(--ev-card-border);
background: var(--ev-card-surface);
box-shadow: var(--ev-card-shadow);
}
.semi-table-container,
.semi-table-body,
.semi-table-header {
background: transparent;
}
.semi-table-thead > .semi-table-row > .semi-table-cell {
background: var(--ev-table-head-bg) !important;
border-bottom: 1px solid var(--ev-control-border) !important;
color: var(--semi-color-text-2) !important;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.semi-table-tbody
> .semi-table-row
> .semi-table-cell:not(.semi-table-cell-fixed-left):not(
.semi-table-cell-fixed-right
) {
border-bottom: 1px solid var(--ev-control-border) !important;
background: transparent !important;
}
.semi-table-tbody
> .semi-table-row
> .semi-table-cell.semi-table-cell-fixed-left,
.semi-table-tbody
> .semi-table-row
> .semi-table-cell.semi-table-cell-fixed-right {
border-bottom: 1px solid var(--ev-control-border) !important;
}
.semi-table-tbody
> .semi-table-row:hover
> .semi-table-cell:not(.semi-table-cell-fixed-left):not(
.semi-table-cell-fixed-right
) {
background: var(--ev-table-row-hover) !important;
}
.semi-table-placeholder {
padding: 40px 0 !important;
background: transparent !important;
}
html.dark .semi-table-thead > .semi-table-row > .semi-table-cell {
background: var(--ev-table-head-bg) !important;
border-bottom-color: var(--ev-control-border) !important;
}
html.dark .semi-table-tbody > .semi-table-row > .semi-table-cell {
border-bottom-color: var(--ev-control-border) !important;
}
html.dark
.semi-table-tbody
> .semi-table-row:hover
> .semi-table-cell:not(.semi-table-cell-fixed-left):not(
.semi-table-cell-fixed-right
) {
background: var(--ev-table-row-hover) !important;
}
/* 页脚样式 */
.app-footer-region {
padding: 0 0 24px;
}
.app-footer-region-workspace {
padding: 8px 0 24px;
}
.app-footer-region-marketing {
padding: 0;
}
.app-footer-region-auth {
padding: 0 0 16px;
}
/* ═══════════════════════════════════════════════════════════
Unified Footer — screenshot-accurate public-only footer
═══════════════════════════════════════════════════════════ */
.evo-footer {
width: 100%;
padding: 0;
}
.evo-footer-shell {
max-width: var(--app-shell-marketing-max, 1440px);
margin: 0 auto;
padding: 48px 56px 0;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.78) 0%,
rgba(238, 241, 244, 0.94) 100%
);
border-top: 1px solid rgba(100, 116, 139, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.evo-footer-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 48px;
}
.evo-footer-brand-column {
flex: 0 1 280px;
min-width: 0;
}
/* Brand logo: orange E mark + purple wordmark */
.evo-footer-brand-logo {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.evo-footer-brand-mark {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: linear-gradient(135deg, #f97316, #fb923c);
color: #fff;
font-size: 18px;
font-weight: 800;
flex-shrink: 0;
}
.evo-footer-brand-wordmark {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.evo-footer-tagline {
margin: 16px 0 0;
max-width: 260px;
font-size: 13px;
line-height: 1.7;
color: var(--ev-on-surface-variant, #64748b);
}
/* Social icons row */
.evo-footer-social {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.evo-footer-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
color: var(--ev-on-surface-variant, #64748b);
text-decoration: none;
transition:
color 0.2s ease,
background 0.2s ease;
}
.evo-footer-social-icon:hover {
color: var(--ev-primary, #6366f1);
background: rgba(99, 102, 241, 0.08);
}
/* Link columns */
.evo-footer-columns {
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
}
.evo-footer-column {
min-width: 0;
}
.evo-footer-column-title {
font-size: 14px;
font-weight: 700;
color: var(--ev-on-surface, #1e293b);
margin-bottom: 16px;
}
.evo-footer-link-list {
display: grid;
gap: 12px;
}
.evo-footer-link {
display: inline-flex;
align-items: center;
min-height: 22px;
color: var(--ev-on-surface-variant, #64748b);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: color 0.18s ease;
}
.evo-footer-link:hover {
color: var(--ev-primary, #6366f1);
}
/* Bottom bar */
.evo-footer-bottom {
margin-top: 40px;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
border-top: 1px solid var(--ev-outline-variant, rgba(148, 163, 184, 0.12));
}
.evo-footer-copy {
font-size: 13px;
color: var(--ev-on-surface-variant, #94a3b8);
}
.evo-footer-bottom-links {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.evo-footer-bottom-links .evo-footer-link {
font-size: 13px;
}
/* Dark mode */
html.dark .evo-footer-shell {
background: linear-gradient(
180deg,
rgba(19, 27, 46, 0.88) 0%,
rgba(15, 23, 42, 0.96) 100%
);
border-top-color: rgba(148, 163, 184, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html.dark .evo-footer-brand-wordmark {
background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%);
-webkit-background-clip: text;
background-clip: text;
}
html.dark .evo-footer-column-title {
color: rgba(226, 232, 240, 0.92);
}
html.dark .evo-footer-tagline,
html.dark .evo-footer-copy {
color: rgba(148, 163, 184, 0.7);
}
html.dark .evo-footer-link {
color: rgba(203, 213, 225, 0.8);
}
html.dark .evo-footer-link:hover {
color: #c7d2fe;
}
html.dark .evo-footer-social-icon {
color: rgba(148, 163, 184, 0.7);
}
html.dark .evo-footer-social-icon:hover {
color: #c7d2fe;
background: rgba(129, 140, 248, 0.12);
}
html.dark .evo-footer-bottom {
border-top-color: rgba(148, 163, 184, 0.08);
}
/* Responsive */
@media (max-width: 1024px) {
.evo-footer-main {
flex-direction: column;
gap: 32px;
}
.evo-footer-columns {
width: 100%;
}
}
@media (max-width: 768px) {
.evo-footer {
padding-left: 16px;
padding-right: 16px;
}
.evo-footer-shell {
padding: 32px 24px 0;
}
.evo-footer-columns {
grid-template-columns: 1fr;
}
.evo-footer-bottom {
flex-direction: column;
align-items: flex-start;
}
}
/* 卡片内容容器通用样式 */
.card-content-container {
position: relative;
}
.card-content-fade-indicator {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background: linear-gradient(transparent, var(--semi-color-bg-1));
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}
/* ==================== 调试面板特定样式 ==================== */
.debug-panel .semi-tabs {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
.debug-panel .semi-tabs-bar {
flex-shrink: 0 !important;
}
.debug-panel .semi-tabs-content {
flex: 1 !important;
overflow: hidden !important;
}
/* ==================== 滚动条样式统一管理 ==================== */
/* 通用隐藏滚动条工具类 */
.scrollbar-hide {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
/* Chrome, Safari, Opera */
}
/* 表格滚动条样式 */
.semi-table-body::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.semi-table-body::-webkit-scrollbar-thumb {
background: rgba(var(--semi-grey-2), 0.3);
border-radius: 2px;
}
.semi-table-body::-webkit-scrollbar-thumb:hover {
background: rgba(var(--semi-grey-2), 0.5);
}
.semi-table-body::-webkit-scrollbar-track {
background: transparent;
}
/* 侧边抽屉滚动条样式 */
.semi-sidesheet-body::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.semi-sidesheet-body::-webkit-scrollbar-thumb {
background: rgba(var(--semi-grey-2), 0.3);
border-radius: 2px;
}
.semi-sidesheet-body::-webkit-scrollbar-thumb:hover {
background: rgba(var(--semi-grey-2), 0.5);
}
.semi-sidesheet-body::-webkit-scrollbar-track {
background: transparent;
}
/* 隐藏内容区域滚动条 */
.pricing-scroll-hide,
.model-test-scroll,
.card-content-scroll,
.model-settings-scroll,
.thinking-content-scroll,
.custom-request-textarea .semi-input,
.custom-request-textarea textarea,
.notice-content-scroll {
-ms-overflow-style: none;
scrollbar-width: none;
}
.pricing-scroll-hide::-webkit-scrollbar,
.model-test-scroll::-webkit-scrollbar,
.card-content-scroll::-webkit-scrollbar,
.model-settings-scroll::-webkit-scrollbar,
.thinking-content-scroll::-webkit-scrollbar,
.custom-request-textarea .semi-input::-webkit-scrollbar,
.custom-request-textarea textarea::-webkit-scrollbar,
.notice-content-scroll::-webkit-scrollbar {
display: none;
}
/* 图片列表滚动条样式 */
.image-list-scroll::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.image-list-scroll::-webkit-scrollbar-thumb {
background: var(--semi-color-tertiary-light-default);
border-radius: 3px;
}
.image-list-scroll::-webkit-scrollbar-thumb:hover {
background: var(--semi-color-tertiary);
}
.image-list-scroll::-webkit-scrollbar-track {
background: transparent;
}
/* ==================== 同步倍率 - 渠道选择器 ==================== */
.components-transfer-source-item,
.components-transfer-selected-item {
display: flex;
align-items: center;
padding: 8px;
}
.semi-transfer-left-list,
.semi-transfer-right-list {
-ms-overflow-style: none;
scrollbar-width: none;
}
.semi-transfer-left-list::-webkit-scrollbar,
.semi-transfer-right-list::-webkit-scrollbar {
display: none;
}
.components-transfer-source-item .semi-checkbox,
.components-transfer-selected-item .semi-checkbox {
display: flex;
align-items: center;
width: 100%;
}
.components-transfer-source-item .semi-avatar,
.components-transfer-selected-item .semi-avatar {
margin-right: 12px;
flex-shrink: 0;
}
.components-transfer-source-item .info,
.components-transfer-selected-item .info {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.components-transfer-source-item .name,
.components-transfer-selected-item .name {
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.components-transfer-source-item .email,
.components-transfer-selected-item .email {
font-size: 12px;
color: var(--semi-color-text-2);
display: flex;
align-items: center;
}
.components-transfer-selected-item .semi-icon-close {
margin-left: 8px;
cursor: pointer;
color: var(--semi-color-text-2);
}
.components-transfer-selected-item .semi-icon-close:hover {
color: var(--semi-color-text-0);
}
/* ==================== 未读通知闪光效果 ==================== */
@keyframes sweep-shine {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.shine-text {
background: linear-gradient(
90deg,
currentColor 0%,
currentColor 40%,
rgba(255, 255, 255, 0.9) 50%,
currentColor 60%,
currentColor 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: sweep-shine 4s linear infinite;
}
.dark .shine-text {
background: linear-gradient(
90deg,
currentColor 0%,
currentColor 40%,
#facc15 50%,
currentColor 60%,
currentColor 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ==================== ScrollList 定制样式 ==================== */
.semi-scrolllist,
.semi-scrolllist * {
-ms-overflow-style: none;
/* IE, Edge */
scrollbar-width: none;
/* Firefox */
background: transparent !important;
}
.semi-scrolllist::-webkit-scrollbar,
.semi-scrolllist *::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
.semi-scrolllist-body {
padding: 1px !important;
}
.semi-scrolllist-list-outer {
padding-right: 0 !important;
}
/* ==================== Banner 背景模糊球 ==================== */
.blur-ball {
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
z-index: -1;
}
.blur-ball-indigo {
background: #93c5fd;
/* indigo-500 */
top: 40px;
left: 50%;
transform: translateX(-50%);
opacity: 0.5;
}
.blur-ball-teal {
background: #818cf8;
/* indigo */
top: 200px;
left: 30%;
opacity: 0.4;
}
/* 浅色主题下让模糊球更柔和 */
html:not(.dark) .blur-ball-indigo {
opacity: 0.25;
}
html:not(.dark) .blur-ball-teal {
opacity: 0.2;
}
/* ==================== 卡片马卡龙模糊球（类封装） ==================== */
/* 使用方式：给容器加上 with-pastel-balls 类即可，无需在 JSX 中插入额外节点 */
.with-pastel-balls {
position: relative;
overflow: hidden;
/* 默认变量（明亮模式） */
--pb1: #ffd1dc;
/* 粉 */
--pb2: #e5d4ff;
/* 薰衣草 */
--pb3: #d1fff6;
/* 薄荷 */
--pb4: #ffe5d9;
/* 桃 */
--pb-opacity: 0.55;
--pb-blur: 60px;
}
.with-pastel-balls::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at -5% -10%, var(--pb1) 0%, transparent 60%),
radial-gradient(circle at 105% -10%, var(--pb2) 0%, transparent 55%),
radial-gradient(circle at 5% 110%, var(--pb3) 0%, transparent 55%),
radial-gradient(circle at 105% 110%, var(--pb4) 0%, transparent 50%);
filter: blur(var(--pb-blur));
opacity: var(--pb-opacity);
transform: translateZ(0);
}
/* 暗黑模式下更柔和的色彩和透明度 */
html.dark .with-pastel-balls {
/* 使用与明亮模式一致的“刚才那组”马卡龙色，但整体更柔和 */
--pb1: #ffd1dc;
/* 粉 */
--pb2: #e5d4ff;
/* 薰衣草 */
--pb3: #d1fff6;
/* 薄荷 */
--pb4: #ffe5d9;
/* 桃 */
--pb-opacity: 0.36;
--pb-blur: 65px;
}
/* 暗黑模式下用更柔和的混合模式避免突兀的高亮 */
html.dark .with-pastel-balls::before {
mix-blend-mode: screen;
}
/* ==================== 表格卡片滚动设置 ==================== */
.table-scroll-card {
display: flex;
flex-direction: column;
height: calc(100vh - 110px);
max-height: calc(100vh - 110px);
}
.table-scroll-card .semi-card-body {
flex: 1 1 auto;
overflow-y: auto;
}
.table-scroll-card .semi-card-footer {
padding-top: 16px !important;
padding-bottom: 0 !important;
background: transparent !important;
}
.table-scroll-card .semi-card-body::-webkit-scrollbar {
width: 6px;
}
.table-scroll-card .semi-card-body::-webkit-scrollbar-thumb {
background: rgba(var(--semi-grey-2), 0.3);
border-radius: 2px;
}
.table-scroll-card .semi-card-body::-webkit-scrollbar-thumb:hover {
background: rgba(var(--semi-grey-2), 0.5);
}
.table-scroll-card .semi-card-body::-webkit-scrollbar-track {
background: transparent;
}
@media (max-width: 767px) {
.table-scroll-card {
height: calc(100vh - 77px);
max-height: calc(100vh - 77px);
}
}
/* ==================== 模型定价页面布局 ==================== */
.pricing-layout {
height: calc(100vh - 60px);
overflow: hidden;
margin-top: 60px;
}
.pricing-sidebar {
width: clamp(280px, 24vw, 520px) !important;
min-width: clamp(280px, 24vw, 520px) !important;
max-width: clamp(280px, 24vw, 520px) !important;
height: calc(100vh - 60px);
background-color: var(--semi-color-bg-0);
overflow: auto;
}
.pricing-content {
height: calc(100vh - 60px);
background-color: var(--semi-color-bg-0);
display: flex;
flex-direction: column;
}
.pricing-pagination-divider {
border-color: var(--semi-color-border);
}
.pricing-content-mobile {
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
}
.pricing-search-header {
padding: 0.5rem;
background-color: var(--semi-color-bg-0);
flex-shrink: 0;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 5;
}
.pricing-view-container {
flex: 1;
overflow: auto;
}
.pricing-view-container-mobile {
flex: 1;
overflow: auto;
min-height: 0;
}
.pricing-cta-button,
.pricing-plan-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
padding: 0 24px;
border-radius: 999px;
border: 1px solid var(--ev-control-border);
background: var(--ev-control-surface);
color: var(--ev-on-surface);
font-size: 14px;
font-weight: 800;
letter-spacing: -0.01em;
box-shadow: var(--ev-control-shadow);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition:
transform 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
color 0.2s ease;
}
.pricing-plan-cta-button {
min-height: 48px;
padding: 0 20px;
}
.pricing-cta-button:hover,
.pricing-plan-cta-button:hover {
transform: translateY(-1px);
border-color: var(--ev-control-border-strong);
background: var(--ev-control-surface-hover);
}
.pricing-cta-button:active,
.pricing-plan-cta-button:active {
transform: translateY(0);
}
.pricing-cta-button-primary,
.pricing-plan-cta-button-primary {
color: #ffffff;
border-color: transparent;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
box-shadow: 0 18px 36px rgba(99, 102, 241, 0.24);
}
.pricing-cta-button-primary:hover,
.pricing-plan-cta-button-primary:hover {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
box-shadow: 0 22px 40px rgba(99, 102, 241, 0.3);
}
.pricing-cta-button-secondary,
.pricing-plan-cta-button-secondary {
color: var(--ev-on-surface);
background: var(--ev-control-surface);
}
.pricing-cta-button-secondary:hover,
.pricing-plan-cta-button-secondary:hover {
color: var(--ev-primary);
}
.pricing-detail-sheet .semi-sidesheet-content {
background: linear-gradient(
180deg,
rgba(248, 244, 239, 0.98) 0%,
rgba(242, 237, 231, 0.98) 100%
);
}
.pricing-detail-sheet .semi-sidesheet-header {
padding: 20px 24px 16px !important;
border-bottom: 1px solid rgba(70, 71, 211, 0.08) !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.94) 0%,
rgba(245, 247, 250, 0.92) 100%
);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.pricing-detail-sheet .semi-sidesheet-title {
width: 100%;
}
.pricing-detail-sheet .semi-sidesheet-body {
padding: 0 !important;
background: transparent !important;
}
.pricing-detail-sheet-body {
min-height: 100%;
background: linear-gradient(
180deg,
rgba(247, 242, 237, 0.82) 0%,
rgba(243, 238, 233, 0.96) 100%
);
}
.pricing-detail-section {
overflow: hidden;
border: 1px solid rgba(70, 71, 211, 0.08) !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.94) 0%,
rgba(245, 247, 250, 0.98) 100%
) !important;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06) !important;
}
.pricing-detail-section .semi-card-body {
padding: 22px !important;
}
.pricing-detail-section-icon {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.96),
rgba(240, 240, 255, 0.72)
) !important;
border: 1px solid rgba(70, 71, 211, 0.08);
}
.pricing-channel-card {
border: 1px solid rgba(70, 71, 211, 0.08);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.86) 0%,
rgba(245, 247, 250, 0.96) 100%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.pricing-detail-pricing-table {
overflow: hidden;
border-radius: 22px;
border: 1px solid rgba(70, 71, 211, 0.08);
background: rgba(255, 255, 255, 0.78);
}
.pricing-detail-pricing-table
.semi-table-thead
> .semi-table-row
> .semi-table-cell {
background: rgba(70, 71, 211, 0.04) !important;
}
.pricing-detail-pricing-table
.semi-table-thead
> .semi-table-row
> .semi-table-cell,
.pricing-detail-pricing-table
.semi-table-tbody
> .semi-table-row
> .semi-table-cell {
padding: 14px 16px !important;
}
.pricing-model-card {
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}
.pricing-model-card .semi-card-body {
padding: 20px !important;
}
html.dark .pricing-detail-sheet .semi-sidesheet-content {
background: linear-gradient(
180deg,
rgba(34, 28, 24, 0.98) 0%,
rgba(27, 22, 19, 0.98) 100%
);
}
html.dark .pricing-detail-sheet .semi-sidesheet-header,
html.dark .pricing-detail-section,
html.dark .pricing-channel-card,
html.dark .pricing-detail-pricing-table {
border-color: rgba(189, 194, 255, 0.08) !important;
background: rgba(23, 31, 51, 0.92) !important;
}
/* ==================== Topup page tinted card overrides ==================== */
.topup-card-purple.semi-card {
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.08),
rgba(139, 92, 246, 0.12)
) !important;
border: 1px solid rgba(99, 102, 241, 0.15) !important;
}
html.dark .topup-card-purple.semi-card {
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.14),
rgba(139, 92, 246, 0.18)
) !important;
border: 1px solid rgba(99, 102, 241, 0.25) !important;
}
.topup-card-green.semi-card {
background: linear-gradient(
135deg,
rgba(16, 185, 129, 0.04),
rgba(52, 211, 153, 0.06)
) !important;
border: 1px solid rgba(16, 185, 129, 0.12) !important;
}
html.dark .topup-card-green.semi-card {
background: linear-gradient(
135deg,
rgba(16, 185, 129, 0.08),
rgba(52, 211, 153, 0.1)
) !important;
border: 1px solid rgba(16, 185, 129, 0.18) !important;
}
.topup-card-indigo.semi-card {
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.06),
rgba(129, 140, 248, 0.1)
) !important;
border: 1px solid rgba(99, 102, 241, 0.13) !important;
}
html.dark .topup-card-indigo.semi-card {
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.12),
rgba(129, 140, 248, 0.16)
) !important;
border: 1px solid rgba(99, 102, 241, 0.22) !important;
}
.topup-card-amber.semi-card {
background: linear-gradient(
135deg,
rgba(245, 158, 11, 0.04),
rgba(251, 191, 36, 0.06)
) !important;
border: 1px solid rgba(245, 158, 11, 0.12) !important;
}
html.dark .topup-card-amber.semi-card {
background: linear-gradient(
135deg,
rgba(245, 158, 11, 0.08),
rgba(251, 191, 36, 0.1)
) !important;
border: 1px solid rgba(245, 158, 11, 0.18) !important;
}
/* ==================== semi-ui 组件自定义样式 ==================== */
/* Global card tonal layering — Stitch "Extruded" design */
.semi-card {
border-radius: 20px !important;
border: none !important;
background: var(--ev-surface-container-lowest) !important;
box-shadow:
0 4px 20px rgba(70, 71, 211, 0.03),
0 8px 40px rgba(44, 47, 50, 0.04) !important;
transition:
box-shadow 0.22s ease,
transform 0.22s ease;
}
.semi-card:hover {
box-shadow:
0 6px 24px rgba(70, 71, 211, 0.05),
0 12px 48px rgba(44, 47, 50, 0.06) !important;
}
html.dark .semi-card {
background: var(--ev-surface-container) !important;
box-shadow:
0 4px 20px rgba(2, 6, 23, 0.18),
0 8px 40px rgba(2, 6, 23, 0.1) !important;
}
html.dark .semi-card:hover {
box-shadow:
0 6px 24px rgba(2, 6, 23, 0.22),
0 12px 48px rgba(2, 6, 23, 0.14) !important;
}
/* Global input tonal recessed style */
.semi-input-wrapper,
.semi-select,
.semi-select-selection {
border-radius: 12px !important;
border-color: transparent !important;
background: var(--ev-surface-container-high) !important;
transition: box-shadow 0.2s ease;
}
.semi-input-wrapper-focus,
.semi-input-wrapper:focus-within {
/* 2026-04-22 FOCUS-RING FIX: outset spread was bleeding into neighbours.
Switched to inset — same visual cue, no overflow. Keep a subtle border
color change for additional affordance. */
border-color: rgba(70, 71, 211, 0.5) !important;
box-shadow: inset 0 0 0 1px rgba(70, 71, 211, 0.35) !important;
}
/* 2026-04-22 NATIVE-OUTLINE FIX (global scope — portals/modals mount at
document.body and aren't inside .app-layout-root-console). Browsers draw
a blue focus outline on the inner but Semi UI paints the visual
rounded rectangle on the outer .semi-input-wrapper; the two aren't
aligned, producing an "offset blue rectangle" when a field is focused.
Suppress the native outline everywhere; the wrapper's focus-within style
(above + console/auth scopes) provides the accessibility cue. */
.semi-input:focus,
.semi-input:focus-visible,
.semi-input-textarea:focus,
.semi-input-textarea:focus-visible,
.semi-select-selection-text-inner:focus,
.semi-select-selection-text-inner:focus-visible {
outline: none !important;
outline-offset: 0 !important;
box-shadow: none !important;
}
html.dark .semi-input-wrapper,
html.dark .semi-select,
html.dark .semi-select-selection {
background: var(--ev-surface-container-high) !important;
border-color: transparent !important;
}
/* Fix: Semi Select内部tag浅色模式对比度不足 — 全局修复 */
.semi-select .semi-tag,
.semi-select-multiple .semi-tag {
background: var(--ev-surface-container-highest) !important;
color: var(--ev-on-surface) !important;
border: 1px solid var(--ev-control-border) !important;
}
.semi-select .semi-tag .semi-tag-close,
.semi-select-multiple .semi-tag .semi-tag-close {
color: var(--ev-on-surface-variant) !important;
}
html.dark .semi-select .semi-tag,
html.dark .semi-select-multiple .semi-tag {
background: var(--ev-surface-container-highest) !important;
color: var(--ev-on-surface) !important;
border: 1px solid var(--ev-control-border) !important;
}
/* Global button pill shape */
.semi-button {
border-radius: 12px !important;
transition:
transform 0.15s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.semi-button-primary {
border-radius: 999px !important;
}
.semi-card-header,
.semi-card-body {
padding: 14px !important;
}
.semi-empty {
padding: 8px 0;
}
.semi-empty-title {
font-weight: 600;
color: var(--semi-color-text-1);
}
.semi-empty-description {
color: var(--ev-on-surface-variant);
}
.semi-input-group .semi-input-wrapper,
.semi-input-group .semi-select,
.semi-input-group .semi-button {
color: var(--ev-primary);
}
/* ==================== EvoChic 品牌工具类 ==================== */
.evochic-gradient-text {
background: var(--ev-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.evochic-gradient-btn {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
border: none !important;
color: #fff !important;
box-shadow: 0 18px 36px rgba(99, 102, 241, 0.24) !important;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.evochic-gradient-btn:hover {
transform: translateY(-1px);
box-shadow: 0 22px 40px rgba(99, 102, 241, 0.3) !important;
}
.evochic-gradient-btn:active {
transform: translateY(0);
box-shadow: 0 12px 24px rgba(99, 102, 241, 0.2) !important;
}
/* ═══════════════════════════════════════════════════════════
Unified Header Bar — matches screenshot one-to-one
═══════════════════════════════════════════════════════════ */
.unified-header {
width: 100%;
background: rgba(255, 255, 255, 0.62);
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
backdrop-filter: blur(16px) saturate(1.6);
-webkit-backdrop-filter: blur(16px) saturate(1.6);
transition:
background 0.2s ease,
border-color 0.2s ease;
}
html.dark .unified-header {
background: rgba(15, 23, 42, 0.62);
border-bottom-color: rgba(129, 140, 248, 0.08);
}
.unified-header-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 420px) auto;
align-items: center;
gap: 18px;
max-width: var(--app-shell-marketing-max, 1440px);
margin: 0 auto;
padding: 0 32px;
min-height: 68px;
}
.unified-header-inner-no-search {
grid-template-columns: minmax(0, 1fr) auto;
}
.unified-header-left {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.unified-header-brand {
text-decoration: none;
display: flex;
align-items: center;
margin-right: 2px;
flex-shrink: 0;
}
.unified-header-brand-text {
font-size: 18px;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.unified-header-brand-wordmark-only {
gap: 0;
}
.unified-header-nav {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.unified-nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 16px;
border-radius: 999px;
font-size: 0.96rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ev-on-surface-variant);
text-decoration: none;
transition:
color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
white-space: nowrap;
}
.unified-nav-link:hover {
color: var(--ev-primary);
background: rgba(194, 181, 255, 0.12);
transform: translateY(-1px);
}
.unified-nav-link-active {
color: #fff !important;
background: var(--ev-primary, #6366f1) !important;
-webkit-text-fill-color: #fff;
box-shadow: 0 10px 24px rgba(99, 102, 241, 0.18);
}
.unified-header-search {
width: 100%;
max-width: 420px;
min-width: 0;
margin: 0 auto;
}
.unified-header-search-input .semi-input-wrapper,
.unified-header-search-input .semi-input-wrapper-focus {
height: 42px;
border-radius: 999px !important;
border: 1px solid var(--ev-outline-variant, rgba(148, 163, 184, 0.18)) !important;
background: var(--ev-surface-low, rgba(241, 245, 249, 0.8)) !important;
padding: 0 14px !important;
box-shadow: none !important;
transition:
border-color 0.2s ease,
background 0.2s ease;
}
.unified-header-search-input .semi-input-wrapper-focus {
border-color: var(--ev-primary, #6366f1) !important;
background: var(--ev-surface, #fff) !important;
}
.unified-header-search-input .semi-input {
font-size: 13px;
}
.unified-header-search-input .semi-input-prefix-text,
.unified-header-search-input .semi-input-clearbtn {
color: var(--ev-outline, #94a3b8);
}
.unified-header-right {
display: flex;
align-items: center;
gap: 12px;
justify-self: end;
}
.unified-header-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--ev-on-surface-variant, #64748b);
cursor: pointer;
transition:
background 0.18s ease,
color 0.18s ease;
}
.unified-header-icon-btn:hover {
background: rgba(99, 102, 241, 0.08);
color: var(--ev-primary, #6366f1);
}
.unified-header-user-trigger {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 10px 4px 4px;
border-radius: 999px;
border: none;
background: transparent;
cursor: pointer;
transition: background 0.18s ease;
}
.unified-header-user-trigger:hover {
background: rgba(99, 102, 241, 0.06);
}
.unified-header-avatar-img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.unified-header-avatar-fallback {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.unified-header-user-info {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.2;
min-width: 0;
}
.unified-header-user-name {
font-size: 13px;
font-weight: 700;
color: var(--ev-on-surface, #1e293b);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}
.unified-header-user-role {
font-size: 11px;
font-weight: 500;
color: var(--ev-outline, #94a3b8);
white-space: nowrap;
}
/* Dark mode overrides */
html.dark .unified-header-brand-text {
background: linear-gradient(135deg, #818cf8 0%, #a78bfa 50%, #c084fc 100%);
-webkit-background-clip: text;
background-clip: text;
}
html.dark .unified-nav-link-active {
background: rgba(99, 102, 241, 0.85) !important;
box-shadow: 0 10px 24px rgba(99, 102, 241, 0.22);
}
html.dark .unified-header-search-input .semi-input-wrapper {
border-color: rgba(148, 163, 184, 0.12) !important;
background: rgba(30, 41, 59, 0.8) !important;
}
html.dark .unified-header-search-input .semi-input-wrapper-focus {
border-color: rgba(129, 140, 248, 0.5) !important;
background: rgba(15, 23, 42, 0.95) !important;
}
html.dark .unified-header-icon-btn {
color: rgba(198, 197, 213, 0.8);
}
html.dark .unified-header-icon-btn:hover {
background: rgba(129, 140, 248, 0.12);
color: #c7d2fe;
}
html.dark .unified-header-user-name {
color: rgba(226, 232, 240, 0.95);
}
html.dark .unified-header-user-role {
color: rgba(148, 163, 184, 0.7);
}
/* Mobile: hide search, compact layout */
@media (max-width: 767px) {
.unified-header-inner {
display: flex;
padding: 0 12px;
min-height: 56px;
gap: 8px;
}
.unified-header-left {
gap: 10px;
flex: 1;
}
.unified-header-nav {
display: none;
}
.unified-header-search {
display: none;
}
.unified-header-right {
gap: 8px;
margin-left: auto;
}
}
/* Console route: full width, no max-width */
.app-layout-root-console .unified-header-inner {
max-width: var(--app-shell-marketing-max, 1440px);
}
/* ═══════════════════════════════════════════════════════════
Legacy header styles (kept for backward compat)
═══════════════════════════════════════════════════════════ */
.showcase-header-shell,
.public-header-shell {
position: relative;
}
.showcase-header-inner,
.public-header-inner {
position: relative;
}
.showcase-header-main,
.public-header-main {
gap: 24px;
}
.showcase-header-leading,
.public-header-main {
min-width: 0;
}
.showcase-header-leading {
gap: 12px;
}
.showcase-header-actions,
.public-header-actions {
flex-shrink: 0;
}
.showcase-top-nav,
.public-top-nav {
min-width: 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.showcase-top-nav::-webkit-scrollbar,
.public-top-nav::-webkit-scrollbar {
display: none;
}
.showcase-top-nav-link,
.public-top-nav-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 42px;
padding: 0 14px;
border-radius: 999px;
color: var(--ev-on-surface-variant);
font-size: 14px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition:
color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.showcase-top-nav-link:hover,
.public-top-nav-link:hover {
color: var(--ev-primary);
background: rgba(70, 71, 211, 0.06);
}
.showcase-top-nav-link-active,
.public-top-nav-link-active {
color: var(--ev-primary) !important;
background: rgba(70, 71, 211, 0.08);
box-shadow: inset 0 0 0 1px rgba(70, 71, 211, 0.08);
}
.showcase-top-nav-indicator {
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
opacity: 0;
transform: scale(0.7);
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.showcase-top-nav-link-active .showcase-top-nav-indicator {
opacity: 1;
transform: scale(1);
}
.showcase-header-search {
width: min(320px, 28vw);
min-width: 220px;
}
.showcase-header-search-public {
width: min(360px, 30vw);
}
.showcase-header-search-input .semi-input-wrapper,
.showcase-header-search-input .semi-input-wrapper-focus {
height: 48px;
border-radius: 999px !important;
border: 1px solid rgba(148, 163, 184, 0.14) !important;
background: linear-gradient(
180deg,
rgba(246, 248, 252, 0.98) 0%,
rgba(238, 241, 246, 0.98) 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
0 8px 22px rgba(15, 23, 42, 0.04);
padding: 0 16px !important;
}
.showcase-header-search-input .semi-input {
font-size: 13px;
}
.showcase-header-search-input .semi-input-prefix-text,
.showcase-header-search-input .semi-input-clearbtn {
color: var(--ev-outline);
}
html.dark .showcase-top-nav-link,
html.dark .public-top-nav-link {
color: rgba(198, 197, 213, 0.9);
}
html.dark .showcase-top-nav-link:hover,
html.dark .public-top-nav-link:hover {
color: #c7d2fe;
background: rgba(129, 140, 248, 0.12);
}
html.dark .showcase-top-nav-link-active,
html.dark .public-top-nav-link-active {
color: #c7d2fe !important;
background: rgba(129, 140, 248, 0.14);
box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.18);
}
html.dark .showcase-header-search-input .semi-input-wrapper,
html.dark .showcase-header-search-input .semi-input-wrapper-focus {
border-color: rgba(148, 163, 184, 0.14) !important;
background: linear-gradient(
180deg,
rgba(28, 38, 56, 0.96) 0%,
rgba(19, 27, 42, 0.98) 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 16px 30px rgba(2, 6, 23, 0.16);
}
.showcase-avatar-trigger {
width: 40px;
min-width: 40px;
min-height: 40px;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 999px !important;
background: transparent !important;
box-shadow: none !important;
transition:
background-color 0.2s ease,
transform 0.2s ease;
}
.showcase-avatar-trigger-console,
.showcase-avatar-trigger-public {
background: transparent !important;
box-shadow: none !important;
}
.showcase-avatar-trigger:hover {
transform: translateY(-1px);
}
.showcase-avatar-trigger-console:hover,
.showcase-avatar-trigger-public:hover {
background: rgba(79, 70, 229, 0.08) !important;
box-shadow: none !important;
}
html.dark .showcase-avatar-trigger-console,
html.dark .showcase-avatar-trigger-public {
background: transparent !important;
box-shadow: none !important;
}
html.dark .showcase-avatar-trigger-console:hover,
html.dark .showcase-avatar-trigger-public:hover {
background: rgba(129, 140, 248, 0.14) !important;
box-shadow: none !important;
}
/* Override Semi UI popover/dropdown wrapper to prevent white corners —
Target every possible wrapper Semi UI generates between the container and our menu */
.showcase-user-dropdown-popup,
.showcase-user-dropdown-popup[class*='semi-'],
.showcase-user-dropdown-wrap [class*='semi-popover'],
.showcase-user-dropdown-wrap [class*='semi-dropdown'],
.showcase-user-dropdown-wrap .semi-portal > div,
.showcase-user-dropdown-wrap .semi-popover-content {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 28px !important;
overflow: visible !important;
}
.showcase-user-menu {
display: block;
overflow: hidden;
padding: 0 !important;
border-radius: 28px !important;
border: 1px solid rgba(148, 163, 184, 0.12) !important;
background: var(--ev-overlay-surface) !important;
box-shadow: 0 28px 60px rgba(15, 23, 42, 0.12) !important;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.showcase-user-menu-compact {
width: min(392px, calc(100vw - 24px));
max-width: min(392px, calc(100vw - 24px));
padding: 0 !important;
}
.showcase-user-menu-standard {
min-width: 240px;
padding: 10px !important;
}
.showcase-user-menu-panel {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
}
.showcase-user-menu-profile-card,
.showcase-user-menu-profile {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.showcase-user-menu-profile-card {
padding: 16px;
border-radius: 24px;
background: var(--ev-surface-container-low);
box-shadow: inset 0 0 0 1px var(--ev-card-border);
}
.showcase-user-menu-avatar-shell {
position: relative;
flex-shrink: 0;
}
.showcase-user-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
overflow: hidden;
color: #ffffff;
font-size: 13px;
font-weight: 700;
line-height: 1;
flex-shrink: 0;
}
.showcase-user-avatar-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
background: transparent;
}
.showcase-user-avatar-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
}
.showcase-user-menu-profile-avatar,
.showcase-user-trigger-avatar {
box-shadow: 0 12px 24px rgba(79, 70, 229, 0.14);
}
.showcase-user-menu-status-dot {
position: absolute;
right: 2px;
bottom: 2px;
width: 10px;
height: 10px;
border-radius: 999px;
background: #10b981;
border: 2px solid var(--ev-surface-container-low);
}
.showcase-user-menu-name {
font-size: 15px;
font-weight: 800;
line-height: 1.2;
color: var(--ev-on-surface);
}
.showcase-user-menu-meta,
.showcase-user-menu-meta-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
min-width: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ev-on-surface-variant);
}
.showcase-user-menu-meta-divider {
width: 4px;
height: 4px;
border-radius: 999px;
background: currentColor;
opacity: 0.45;
}
.showcase-user-menu-section-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ev-outline);
}
.showcase-user-menu-action-list {
display: grid;
gap: 10px;
}
.showcase-user-menu-action-row,
.showcase-user-menu-notice-card,
.showcase-user-menu-logout {
width: 100%;
border: none;
cursor: pointer;
text-align: left;
}
.showcase-user-menu-action-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 20px;
background: var(--ev-surface-container-low);
box-shadow: inset 0 0 0 1px var(--ev-card-border);
color: var(--ev-on-surface);
transition:
transform 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
.showcase-user-menu-action-row:hover,
.showcase-user-menu-notice-card:hover,
.showcase-user-menu-logout:hover {
transform: translateY(-1px);
}
.showcase-user-menu-action-icon {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(79, 70, 229, 0.08);
color: var(--ev-primary);
flex-shrink: 0;
}
.showcase-user-menu-action-icon.is-blue {
background: rgba(59, 130, 246, 0.1);
color: #2563eb;
}
.showcase-user-menu-action-icon.is-green {
background: rgba(16, 185, 129, 0.12);
color: #059669;
}
.showcase-user-menu-action-icon.is-purple {
background: rgba(99, 102, 241, 0.1);
color: #4f46e5;
}
.showcase-user-menu-action-label {
flex: 1;
min-width: 0;
font-size: 13px;
font-weight: 700;
}
.showcase-user-menu-action-arrow {
color: var(--ev-outline);
flex-shrink: 0;
}
.showcase-user-menu-notice-card {
padding: 14px;
border-radius: 22px;
background: linear-gradient(
180deg,
rgba(70, 71, 211, 0.06) 0%,
rgba(70, 71, 211, 0.02) 100%
);
box-shadow: inset 0 0 0 1px rgba(70, 71, 211, 0.08);
}
.showcase-user-menu-notice-head {
display: flex;
align-items: center;
gap: 10px;
}
.showcase-user-menu-notice-icon,
.showcase-user-menu-notice-title {
color: var(--ev-primary);
}
.showcase-user-menu-notice-title {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.showcase-user-menu-pill {
margin-left: auto;
min-height: 24px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(79, 70, 229, 0.12);
color: var(--ev-primary);
font-size: 11px;
font-weight: 800;
}
.showcase-user-menu-notice-copy {
margin: 10px 0 0;
font-size: 13px;
line-height: 1.7;
color: var(--ev-on-surface-variant);
}
.showcase-user-menu-theme-switch {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.showcase-user-menu-theme-chip,
.showcase-user-menu-language-card {
border: none;
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
}
.showcase-user-menu-theme-chip {
min-height: 42px;
padding: 0 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 16px;
border: 1px solid var(--ev-control-border);
background: var(--ev-control-surface);
color: var(--ev-on-surface-variant);
font-size: 12px;
font-weight: 700;
box-shadow: var(--ev-control-shadow);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.showcase-user-menu-theme-chip.is-active,
.showcase-user-menu-language-card.is-active {
background: color-mix(in srgb, var(--ev-primary) 10%, transparent);
color: var(--ev-primary);
box-shadow: inset 0 0 0 1px
color-mix(in srgb, var(--ev-primary) 12%, transparent);
}
.showcase-user-menu-theme-chip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.showcase-user-menu-divider {
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--ev-outline-variant),
transparent
);
opacity: 0.4;
}
.showcase-user-menu-language-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.showcase-user-menu-language-card {
min-height: 56px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 18px;
border: 1px solid var(--ev-control-border);
background: var(--ev-control-surface);
color: var(--ev-on-surface-variant);
box-shadow: var(--ev-control-shadow);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.showcase-user-menu-language-card-label {
font-size: 11px;
font-weight: 700;
}
.showcase-user-menu-language-card-flag,
.showcase-user-menu-language-flag {
width: 18px;
height: auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.showcase-user-menu-logout {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: 18px;
border: 1px solid rgba(239, 68, 68, 0.14);
background: rgba(239, 68, 68, 0.08);
color: #dc2626;
font-size: 13px;
font-weight: 800;
box-shadow: 0 14px 28px rgba(239, 68, 68, 0.14);
}
html.dark .showcase-user-menu {
border-color: var(--ev-card-border) !important;
background: var(--ev-overlay-surface) !important;
box-shadow: 0 30px 64px rgba(2, 6, 23, 0.34) !important;
}
html.dark .showcase-user-menu-notice-card {
background: linear-gradient(
180deg,
rgba(79, 70, 229, 0.16) 0%,
rgba(79, 70, 229, 0.08) 100%
);
box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.16);
}
html.dark .showcase-user-menu-logout {
background: rgba(239, 68, 68, 0.12);
color: #fca5a5;
}
@media (max-width: 1024px) {
.showcase-header-main,
.public-header-main {
gap: 16px;
}
.showcase-header-search {
width: min(260px, 30vw);
min-width: 180px;
}
}
.brand-logo {
display: inline-flex;
align-items: center;
gap: 14px;
min-width: 0;
color: inherit;
text-decoration: none;
}
.brand-logo-centered {
justify-content: center;
}
/* brand-logo styles are now in brand-logo.css — old orange theme removed */
.evochic-glass {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
html:not(.dark) .evochic-glass {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(70, 71, 211, 0.08);
}
/* ==================== 仪表盘品牌卡片样式 ==================== */
.dashboard-card {
position: relative;
border-radius: 22px !important;
border: 1px solid var(--ev-card-border) !important;
overflow: hidden;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
background: var(--ev-surface-container-lowest) !important;
box-shadow: var(--ev-card-shadow);
}
.dashboard-card:hover {
transform: translateY(-2px);
box-shadow: var(--ev-card-shadow-hover);
}
.dashboard-stat-card {
position: relative;
border-radius: 22px !important;
border: 1px solid var(--ev-card-border) !important;
overflow: hidden;
background: var(--ev-surface-container-lowest) !important;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
box-shadow: var(--ev-card-shadow);
}
.dashboard-stat-card:hover {
transform: translateY(-3px);
box-shadow: var(--ev-card-shadow-hover);
}
.dashboard-stat-card::before {
content: '';
position: absolute;
top: 0;
left: 24px;
right: 24px;
height: 2px;
background: var(--ev-gradient);
border-radius: 999px;
opacity: 0.6;
}
.dashboard-stat-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.dashboard-stat-card-icon {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.dashboard-stat-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 0 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--ev-primary) 10%, transparent);
color: var(--ev-primary);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.dashboard-stat-badge.is-action {
cursor: pointer;
transition:
background 0.2s ease,
transform 0.2s ease;
}
.dashboard-stat-badge.is-action:hover {
background: color-mix(in srgb, var(--ev-primary) 16%, transparent);
transform: translateY(-1px);
}
.dashboard-stat-label {
margin: 0;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ev-on-surface-variant);
}
.dashboard-stat-value {
margin: 10px 0 0;
font-size: clamp(30px, 3vw, 40px);
line-height: 1.02;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--ev-on-surface);
}
.dashboard-stat-chart-shell {
margin-top: 18px;
height: 72px;
overflow: hidden;
}
.dashboard-stat-chart-shell :is(canvas, svg) {
width: 100% !important;
height: 100% !important;
}
.dashboard-stat-chart-placeholder {
height: 100%;
display: flex;
align-items: flex-end;
gap: 6px;
}
.dashboard-stat-chart-placeholder span {
flex: 1;
min-height: 10px;
border-radius: 999px 999px 6px 6px;
}
.dashboard-page-layout {
display: flex;
flex-direction: column;
gap: 0;
}
.dashboard-section {
margin-bottom: 24px;
}
.dashboard-section:last-child {
margin-bottom: 0;
}
/* ==================== 简约 Dashboard 组件 ==================== */
.dash-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.dash-stats-strip {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.dash-stat-chip {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 16px;
border-radius: 999px;
border: 1px solid var(--ev-control-border);
background: var(--ev-control-surface);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--ev-on-surface);
font-size: 13px;
cursor: pointer;
transition:
border-color 0.2s ease,
background 0.2s ease,
transform 0.15s ease;
}
.dash-stat-chip:hover {
border-color: var(--ev-control-border-strong);
background: var(--ev-control-surface-hover);
transform: translateY(-1px);
}
.dash-stat-chip-label {
font-weight: 600;
color: var(--ev-on-surface-variant);
font-size: 12px;
letter-spacing: 0.02em;
}
.dash-stat-chip-value {
font-weight: 800;
color: var(--ev-on-surface);
font-size: 14px;
letter-spacing: -0.02em;
}
.dash-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.dash-action-primary {
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 18px;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: #ffffff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 18px 36px rgba(99, 102, 241, 0.24);
transition:
opacity 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
.dash-action-primary:hover {
opacity: 0.9;
transform: translateY(-1px);
}
.dash-action-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
/* Chart panel — flat minimal */
.dash-chart-panel {
border-radius: 20px;
border: 1px solid var(--ev-card-border);
background: var(--ev-surface-container-low);
box-shadow: var(--ev-card-shadow);
overflow: hidden;
}
.dash-chart-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 20px 24px;
border-bottom: 1px solid var(--ev-control-border);
}
.dash-chart-title {
margin: 0;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ev-on-surface);
}
.dash-chart-tabs {
display: flex;
align-items: center;
gap: 4px;
padding: 4px;
border-radius: 14px;
background: var(--ev-surface-container-high);
}
.dash-chart-tab {
height: 32px;
padding: 0 14px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--ev-on-surface-variant);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
}
.dash-chart-tab:hover {
color: var(--ev-on-surface);
}
.dash-chart-tab.is-active {
background: var(--ev-surface-container-low);
color: var(--ev-primary);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.dash-chart-canvas {
height: 380px;
padding: 20px;
overflow: hidden;
background: transparent;
}
/* Force VChart canvas background to transparent so it inherits panel bg */
.dash-chart-canvas canvas,
.dash-chart-canvas .vchart-container,
.dash-chart-canvas [class*='vchart'] {
background: transparent !important;
}
.dash-chart-canvas :is(canvas, svg) {
width: 100% !important;
height: 100% !important;
}
body[theme-mode='dark'] .dash-chart-panel {
background: var(--ev-surface-container);
}
body[theme-mode='dark'] .dash-chart-tab.is-active {
background: var(--ev-surface-container-high);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
body[theme-mode='dark'] .dash-stat-chip,
html.dark .dash-stat-chip {
background: var(--ev-surface-container);
border-color: var(--ev-control-border);
}
body[theme-mode='dark'] .dash-stat-chip:hover,
html.dark .dash-stat-chip:hover {
background: var(--ev-surface-container-high);
border-color: var(--ev-control-border-strong);
}
body[theme-mode='dark'] .dash-action-primary,
html.dark .dash-action-primary {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: #ffffff;
box-shadow: 0 18px 36px rgba(99, 102, 241, 0.18);
}
body[theme-mode='dark'] .dash-logs-panel {
background: var(--ev-surface-container);
}
body[theme-mode='dark'] .dash-logs-footer {
background: var(--ev-surface-container-high);
}
/* Logs panel — modern polished */
.dash-logs-panel {
border-radius: 20px;
border: 1px solid var(--ev-card-border);
background: var(--ev-surface-container-low);
box-shadow: var(--ev-card-shadow);
overflow: hidden;
}
.dash-logs-toolbar {
padding: 12px 20px 0;
}
.dash-logs-filters {
padding: 10px 20px 14px;
border-bottom: 1px solid var(--ev-control-border);
}
.dash-logs-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-top: 1px solid var(--ev-control-border);
background: var(--ev-surface-container);
}
.dash-logs-panel .semi-table-thead th {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ev-on-surface-variant);
background: var(--ev-surface-container) !important;
border-bottom: 2px solid var(--ev-control-border) !important;
padding: 10px 12px !important;
white-space: nowrap;
}
.dash-logs-panel .semi-table-tbody td {
font-size: 13px;
padding: 10px 12px !important;
border-bottom: 1px solid
color-mix(in srgb, var(--ev-control-border) 50%, transparent) !important;
transition: background 0.15s ease;
vertical-align: middle;
background: var(--semi-color-bg-0, #fff) !important;
}
html.dark .dash-logs-panel .semi-table-tbody td {
background: var(--semi-color-bg-0, #1c1c1e) !important;
}
/* Zebra striping — solid opaque backgrounds to prevent content bleed-through */
.dash-logs-panel
.semi-table-row:nth-child(even)
td:not(.semi-table-cell-fixed-right):not(.semi-table-cell-fixed-right-first) {
background: var(--semi-color-bg-1, #fafafa) !important;
}
html.dark
.dash-logs-panel
.semi-table-row:nth-child(even)
td:not(.semi-table-cell-fixed-right):not(.semi-table-cell-fixed-right-first) {
background: var(--semi-color-bg-1) !important;
}
.dash-logs-panel
.semi-table-row:hover
td:not(.semi-table-cell-fixed-right):not(.semi-table-cell-fixed-right-first) {
background: color-mix(
in srgb,
var(--ev-primary) 6%,
var(--ev-surface-container-low)
) !important;
}
/* Better Tag styles inside logs table */
.dash-logs-panel .semi-tag {
font-size: 11px !important;
font-weight: 600 !important;
padding: 1px 8px !important;
border-radius: 6px !important;
line-height: 20px !important;
letter-spacing: 0.02em;
}
/* Model name tag special styling */
.dash-logs-panel .semi-tag-blue-light,
.dash-logs-panel .semi-tag-purple-light,
.dash-logs-panel .semi-tag-indigo-light {
font-weight: 600 !important;
font-family:
'SF Mono', 'Cascadia Code', 'Fira Code', ui-monospace, monospace !important;
font-size: 11px !important;
}
/* Avatar in user column */
.dash-logs-panel .semi-avatar {
font-size: 10px !important;
font-weight: 700 !important;
}
/* Detail column text */
.dash-logs-panel .semi-typography {
font-size: 12px !important;
line-height: 1.5 !important;
}
/* Expanded row styling */
.dash-logs-panel .semi-table-expand-inner td {
background: var(--ev-surface-container) !important;
border-bottom: none !important;
}
.dash-logs-panel .semi-descriptions {
padding: 8px 12px;
}
.dash-logs-panel .semi-descriptions .semi-descriptions-key {
font-weight: 600;
font-size: 12px;
color: var(--ev-on-surface-variant);
}
.dash-logs-panel .semi-descriptions .semi-descriptions-value {
font-size: 12px;
}
/* Fix: fixed列(详情/IP/重试)背景不透明，防止横滚时内容穿透
Semi UI v2.90 class names:
- tbody cells: .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right
- thead cells: .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right
- first fixed-right: .semi-table-cell-fixed-right-first (gets border-left + shadow)
*/
.dash-logs-panel
.semi-table-thead
> .semi-table-row
> .semi-table-cell-fixed-right,
.dash-logs-panel
.semi-table-thead
> .semi-table-row
> .semi-table-cell-fixed-right-first {
background: var(--ev-surface-container, var(--semi-color-bg-2)) !important;
box-shadow: -3px 0 6px -2px rgba(0, 0, 0, 0.08);
}
.dash-logs-panel
.semi-table-tbody
> .semi-table-row
> .semi-table-cell-fixed-right,
.dash-logs-panel
.semi-table-tbody
> .semi-table-row
> .semi-table-cell-fixed-right-first {
background: var(--semi-color-bg-0, #fff) !important;
box-shadow: -3px 0 6px -2px rgba(0, 0, 0, 0.06);
}
.dash-logs-panel
.semi-table-tbody
> .semi-table-row:nth-child(even)
> .semi-table-cell-fixed-right,
.dash-logs-panel
.semi-table-tbody
> .semi-table-row:nth-child(even)
> .semi-table-cell-fixed-right-first {
background: var(--semi-color-bg-1, #fafafa) !important;
}
.dash-logs-panel
.semi-table-tbody
> .semi-table-row:hover
> .semi-table-cell-fixed-right,
.dash-logs-panel
.semi-table-tbody
> .semi-table-row:hover
> .semi-table-cell-fixed-right-first {
background: color-mix(
in srgb,
var(--ev-primary) 6%,
var(--semi-color-bg-0, #fff)
) !important;
}
html.dark
.dash-logs-panel
.semi-table-tbody
> .semi-table-row
> .semi-table-cell-fixed-right,
html.dark
.dash-logs-panel
.semi-table-tbody
> .semi-table-row
> .semi-table-cell-fixed-right-first,
body[theme-mode='dark']
.dash-logs-panel
.semi-table-tbody
> .semi-table-row
> .semi-table-cell-fixed-right,
body[theme-mode='dark']
.dash-logs-panel
.semi-table-tbody
> .semi-table-row
> .semi-table-cell-fixed-right-first {
background: var(--semi-color-bg-1) !important;
box-shadow: -3px 0 6px -2px rgba(0, 0, 0, 0.15);
}
html.dark
.dash-logs-panel
.semi-table-tbody
> .semi-table-row:hover
> .semi-table-cell-fixed-right,
html.dark
.dash-logs-panel
.semi-table-tbody
> .semi-table-row:hover
> .semi-table-cell-fixed-right-first,
body[theme-mode='dark']
.dash-logs-panel
.semi-table-tbody
> .semi-table-row:hover
> .semi-table-cell-fixed-right,
body[theme-mode='dark']
.dash-logs-panel
.semi-table-tbody
> .semi-table-row:hover
> .semi-table-cell-fixed-right-first {
background: color-mix(
in srgb,
var(--ev-primary) 6%,
var(--semi-color-bg-1, #2c2c2e)
) !important;
}
/* ==================== 全局筛选组件优化 ==================== */
.dash-logs-filters .semi-form-field {
margin-bottom: 0 !important;
padding: 0 !important;
}
.dash-logs-filters .semi-form-field-label-text {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--ev-on-surface-variant) !important;
}
/* Unified sizing for all form controls inside filters */
.dash-logs-filters .semi-input-wrapper {
height: 32px !important;
font-size: 13px !important;
border-radius: 8px !important;
background: var(--ev-surface-container) !important;
border: 1px solid var(--ev-control-border) !important;
}
.dash-logs-filters .semi-input-wrapper:hover {
border-color: var(--ev-control-border-strong) !important;
}
.dash-logs-filters .semi-input-wrapper-focus {
border-color: var(--ev-primary) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ev-primary) 16%, transparent) !important;
}
.dash-logs-filters .semi-input {
font-size: 13px !important;
}
.dash-logs-filters .semi-input-prefix,
.dash-logs-filters .semi-input-suffix {
font-size: 13px !important;
color: var(--ev-on-surface-variant) !important;
}
/* DatePicker range wrapper */
.dash-logs-filters .semi-datepicker-range-input-wrapper {
height: 32px !important;
font-size: 13px !important;
border-radius: 8px !important;
background: var(--ev-surface-container) !important;
border: 1px solid var(--ev-control-border) !important;
}
.dash-logs-filters .semi-datepicker-range-input-wrapper:hover {
border-color: var(--ev-control-border-strong) !important;
}
.dash-logs-filters .semi-datepicker-range-input-wrapper-active,
.dash-logs-filters .semi-datepicker-range-input-wrapper-focus {
border-color: var(--ev-primary) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ev-primary) 16%, transparent) !important;
}
.dash-logs-filters .semi-datepicker-range-input-wrapper .semi-input-wrapper {
height: auto !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.dash-logs-filters .semi-datepicker-range-input-wrapper .semi-input {
font-size: 13px !important;
}
.dash-logs-filters .semi-datepicker-range-input-separator {
font-size: 13px !important;
color: var(--ev-on-surface-variant) !important;
}
/* Select */
.dash-logs-filters .semi-select {
height: 32px !important;
font-size: 13px !important;
border-radius: 8px !important;
background: var(--ev-surface-container) !important;
border: 1px solid var(--ev-control-border) !important;
}
.dash-logs-filters .semi-select:hover {
border-color: var(--ev-control-border-strong) !important;
}
.dash-logs-filters .semi-select-focus {
border-color: var(--ev-primary) !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ev-primary) 16%, transparent) !important;
}
.dash-logs-filters .semi-select-selection-text {
font-size: 13px !important;
}
/* Buttons */
.dash-logs-filters .semi-button {
height: 32px !important;
border-radius: 8px !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 0 14px !important;
}
@media (max-width: 767px) {
.dash-topbar {
flex-direction: column;
align-items: stretch;
}
.dash-stats-strip {
flex-direction: column;
}
.dash-stat-chip {
width: 100%;
justify-content: space-between;
}
.dash-chart-bar {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.dash-chart-canvas {
height: 280px;
padding: 12px;
}
.dash-logs-toolbar,
.dash-logs-filters {
padding-left: 12px;
padding-right: 12px;
}
.dash-logs-footer {
flex-direction: column;
gap: 8px;
padding: 12px;
}
}
.dashboard-hero-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: 8px 0 2px;
}
.dashboard-hero-kicker {
color: var(--ev-primary);
letter-spacing: 0.18em;
}
.dashboard-hero-title {
margin-top: 14px;
letter-spacing: -0.08em;
line-height: 0.92;
}
.dashboard-hero-date {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 16px;
font-size: clamp(18px, 2vw, 24px);
color: var(--ev-on-surface-variant);
}
.dashboard-header-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.dashboard-chart-shell {
padding: 28px;
}
.dashboard-chart-shell-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 26px;
}
.dashboard-chart-active-badge {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 14px;
border-radius: 999px;
background: color-mix(in srgb, var(--ev-primary) 12%, transparent);
color: var(--ev-primary);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
}
.dashboard-chart-shell-title {
margin: 0;
font-size: 32px;
line-height: 1.04;
font-weight: 800;
letter-spacing: -0.05em;
color: var(--ev-on-surface);
}
.dashboard-chart-shell-copy {
margin: 8px 0 0;
font-size: 14px;
line-height: 1.7;
color: var(--ev-on-surface-variant);
}
.dashboard-chart-tabs {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 8px;
border-radius: 18px;
background: var(--ev-surface-container-high);
}
.dashboard-chart-tab {
min-height: 42px;
padding: 0 16px;
border-radius: 14px;
background: transparent;
color: var(--ev-on-surface-variant);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.03em;
white-space: nowrap;
transition:
background 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.dashboard-chart-tab:hover {
color: var(--ev-on-surface);
}
.dashboard-chart-tab.is-active {
background: var(--ev-surface-container-lowest);
color: var(--ev-primary);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.dashboard-chart-stage {
padding: 22px;
border-radius: 28px;
background: var(--ev-surface-container-high);
}
.dashboard-chart-stage-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 18px;
}
.dashboard-chart-stage-title {
margin: 0;
font-size: 28px;
line-height: 1.06;
font-weight: 800;
letter-spacing: -0.05em;
color: var(--ev-on-surface);
}
.dashboard-chart-stage-copy {
margin: 8px 0 0;
font-size: 14px;
color: var(--ev-on-surface-variant);
}
.dashboard-chart-canvas {
height: 420px;
padding: 16px;
overflow: hidden;
border-radius: 24px;
background: var(--ev-surface-container);
}
.dashboard-chart-canvas :is(canvas, svg) {
width: 100% !important;
height: 100% !important;
}
.dashboard-overview-grid {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
gap: 24px;
align-items: stretch;
}
.dashboard-overview-side {
display: grid;
gap: 20px;
}
.dashboard-distribution-card {
display: flex;
flex-direction: column;
}
.dashboard-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.dashboard-section-title {
margin: 0;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--ev-on-surface);
}
.dashboard-section-subtitle {
margin: 6px 0 0;
font-size: 13px;
color: var(--ev-on-surface-variant);
}
.dashboard-section-badge {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--ev-primary) 10%, transparent);
color: var(--ev-primary);
font-size: 11px;
font-weight: 800;
white-space: nowrap;
}
.dashboard-distribution-list {
display: grid;
gap: 18px;
}
.dashboard-distribution-row {
display: grid;
gap: 10px;
}
.dashboard-distribution-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.dashboard-distribution-label {
max-width: 75%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
font-weight: 700;
color: var(--ev-on-surface);
}
.dashboard-distribution-percent {
font-size: 12px;
font-weight: 800;
color: var(--ev-on-surface-variant);
}
.dashboard-distribution-track {
position: relative;
height: 16px;
border-radius: 999px;
background: var(--ev-surface-container-high);
overflow: hidden;
}
.dashboard-distribution-fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: 999px;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}
.dashboard-distribution-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: auto;
padding-top: 24px;
font-size: 14px;
color: var(--ev-on-surface-variant);
}
.dashboard-distribution-footer strong {
font-size: 22px;
line-height: 1;
font-weight: 800;
color: var(--ev-on-surface);
}
.dashboard-distribution-empty,
.dashboard-activity-empty {
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 22px;
background: var(--ev-surface-container);
color: var(--ev-on-surface-variant);
}
.dashboard-insight-card {
min-height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
padding: 28px;
border-radius: 28px;
color: #fff;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
box-shadow: 0 24px 48px rgba(79, 70, 229, 0.24);
}
.dashboard-insight-icon {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: rgba(255, 255, 255, 0.18);
}
.dashboard-insight-title {
margin: 0;
font-size: 24px;
line-height: 1.12;
font-weight: 800;
}
.dashboard-insight-copy {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.84);
}
.dashboard-insight-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.dashboard-insight-metric {
padding: 12px 14px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.dashboard-insight-metric-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.74);
}
.dashboard-insight-metric-value {
display: block;
margin-top: 8px;
font-size: 18px;
font-weight: 800;
}
.dashboard-insight-action {
align-self: flex-start;
min-height: 42px;
padding: 0 18px;
border: 1px solid var(--ev-control-border);
border-radius: 999px;
background: var(--ev-control-surface);
color: var(--ev-primary);
font-size: 13px;
font-weight: 800;
box-shadow: var(--ev-control-shadow);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease;
}
.dashboard-insight-action:hover {
transform: translateY(-1px);
border-color: var(--ev-control-border-strong);
background: var(--ev-control-surface-hover);
box-shadow: var(--ev-control-shadow-focus);
}
.dashboard-status-card {
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
min-height: 132px;
}
.dashboard-status-kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ev-on-surface-variant);
}
.dashboard-status-main {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.dashboard-status-value {
font-size: 28px;
line-height: 1.1;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--ev-on-surface);
}
.dashboard-status-dot {
width: 12px;
height: 12px;
border-radius: 999px;
flex-shrink: 0;
}
.dashboard-status-dot.is-good {
background: #10b981;
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
}
.dashboard-status-dot.is-warning {
background: #f59e0b;
box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.12);
}
.dashboard-status-copy {
margin: 0;
font-size: 13px;
line-height: 1.7;
color: var(--ev-on-surface-variant);
}
.dashboard-activity-card {
display: flex;
flex-direction: column;
}
.dashboard-link-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 12px;
border: 1px solid transparent;
border-radius: 999px;
background: rgba(79, 70, 229, 0.08);
color: var(--ev-primary);
font-size: 13px;
font-weight: 800;
transition:
transform 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease;
}
.dashboard-link-button:hover {
transform: translateY(-1px);
border-color: rgba(79, 70, 229, 0.12);
background: rgba(79, 70, 229, 0.14);
}
.dashboard-icon-button {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid var(--ev-control-border);
background: var(--ev-control-surface);
color: var(--ev-primary);
box-shadow: var(--ev-control-shadow);
transition:
transform 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.dashboard-icon-button:hover {
transform: translateY(-1px);
border-color: var(--ev-control-border-strong);
background: var(--ev-control-surface-hover);
}
.dashboard-icon-button:disabled {
transform: none;
opacity: 0.55;
box-shadow: none;
}
.dashboard-activity-table {
width: 100%;
}
.dashboard-activity-header,
.dashboard-activity-row {
display: grid;
grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, 1fr));
gap: 16px;
align-items: center;
}
.dashboard-activity-header {
padding: 0 0 14px;
border-bottom: 1px solid rgba(148, 163, 184, 0.16);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ev-outline);
}
.dashboard-activity-body {
display: grid;
}
.dashboard-activity-row {
padding: 18px 0;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.dashboard-activity-row:last-child {
border-bottom: none;
}
.dashboard-activity-model {
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
}
.dashboard-activity-model-dot {
width: 10px;
height: 10px;
border-radius: 999px;
flex-shrink: 0;
box-shadow: 0 0 0 6px rgba(129, 140, 248, 0.08);
}
.dashboard-activity-model-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-weight: 700;
color: var(--ev-on-surface);
}
.dashboard-activity-cell {
font-size: 14px;
font-weight: 600;
color: var(--ev-on-surface-variant);
}
.dashboard-activity-cost {
font-weight: 800;
color: var(--ev-on-surface);
}
.dashboard-activity-time {
text-align: right;
}
/* dashboard-distribution-track/empty now use CSS vars in base rules */
html.dark .dashboard-link-button {
color: var(--ev-primary);
}
html.dark .dashboard-activity-header,
html.dark .dashboard-activity-row {
border-color: rgba(239, 241, 243, 0.06);
}
html.dark .dashboard-activity-model-dot {
box-shadow: 0 0 0 6px rgba(129, 140, 248, 0.14);
}
@media (max-width: 1280px) {
.dashboard-overview-grid {
grid-template-columns: 1fr;
}
.dashboard-overview-side {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.dashboard-hero-header,
.dashboard-chart-shell-head {
flex-direction: column;
align-items: flex-start;
}
.dashboard-header-actions {
justify-content: flex-start;
}
.dashboard-section-head {
flex-direction: column;
align-items: flex-start;
}
.dashboard-overview-side,
.dashboard-insight-metrics {
grid-template-columns: 1fr;
}
.dashboard-chart-tabs {
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
}
.dashboard-chart-canvas {
height: 340px;
}
.dashboard-activity-header {
display: none;
}
.dashboard-activity-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 16px;
padding: 16px 0;
}
.dashboard-activity-model {
grid-column: 1 / -1;
}
.dashboard-activity-time {
text-align: left;
}
}
@media (max-width: 640px) {
.dashboard-chart-shell-title {
font-size: 26px;
}
.dashboard-chart-stage-title {
font-size: 22px;
}
.dashboard-section-title {
font-size: 20px;
}
.dashboard-status-value {
font-size: 24px;
}
.dashboard-activity-row {
grid-template-columns: 1fr;
}
}
/* ==================== 自定义圆角样式 ==================== */
.semi-radio,
.semi-tagInput,
.semi-input-textarea-wrapper,
.semi-navigation-sub-title,
.semi-chat-inputBox-sendButton,
.semi-page-item,
.semi-navigation-item,
.semi-tag-closable,
.semi-input-wrapper,
.semi-tabs-tab-button,
.semi-select,
.semi-button,
.semi-datepicker-range-input {
border-radius: 10px !important;
}
.token-reference-shell {
border-radius: 32px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 24px 56px rgba(15, 23, 42, 0.08);
padding: 20px;
}
.token-reference-heading {
margin-bottom: 18px;
}
html.dark .token-reference-shell {
border-color: rgba(148, 163, 184, 0.14);
background: rgba(12, 18, 30, 0.94);
box-shadow: 0 24px 56px rgba(2, 6, 23, 0.3);
}
.token-reference-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.token-reference-search-shell {
flex: 1 1 360px;
min-width: min(100%, 320px);
}
.token-reference-search-input .semi-input-wrapper,
.token-reference-search-input .semi-input-wrapper-focus {
height: 56px;
border-radius: 999px !important;
border: 1px solid rgba(148, 163, 184, 0.14);
background: linear-gradient(
180deg,
rgba(246, 248, 252, 0.98) 0%,
rgba(239, 242, 247, 0.98) 100%
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
padding: 0 18px;
}
html.dark .token-reference-search-input .semi-input-wrapper,
html.dark .token-reference-search-input .semi-input-wrapper-focus {
background: linear-gradient(
180deg,
rgba(28, 38, 56, 0.96) 0%,
rgba(19, 27, 42, 0.96) 100%
);
border-color: rgba(148, 163, 184, 0.16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.token-reference-toolbar-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.token-reference-toolbar-button.semi-button {
height: 48px;
padding: 0 18px !important;
border-radius: 999px !important;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(246, 248, 252, 0.96);
color: #334155;
font-weight: 600;
box-shadow: none;
}
.token-reference-toolbar-button.semi-button:hover {
background: rgba(238, 242, 255, 0.98);
border-color: rgba(99, 102, 241, 0.18);
color: var(--ev-primary);
}
.token-reference-toolbar-button.semi-button.is-active {
background: rgba(79, 70, 229, 0.08);
border-color: rgba(79, 70, 229, 0.18);
color: var(--ev-primary);
}
.token-reference-toolbar-button.token-reference-toolbar-button-primary.semi-button {
border: none !important;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
color: #ffffff !important;
box-shadow: 0 18px 36px rgba(99, 102, 241, 0.24);
}
.token-reference-toolbar-button.token-reference-toolbar-button-primary.semi-button:hover {
color: #ffffff !important;
background: linear-gradient(135deg, #5b5ef0 0%, #7c4ff3 100%) !important;
box-shadow: 0 22px 40px rgba(99, 102, 241, 0.3);
}
html.dark .token-reference-toolbar-button.semi-button {
border-color: rgba(148, 163, 184, 0.16);
background: rgba(24, 33, 49, 0.96);
color: #dbe4f0;
}
html.dark .token-reference-toolbar-button.semi-button:hover,
html.dark .token-reference-toolbar-button.semi-button.is-active {
background: rgba(79, 70, 229, 0.16);
border-color: rgba(99, 102, 241, 0.22);
color: #c7d2fe;
}
.token-reference-filter-panel {
margin-top: 16px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
padding: 18px;
border-radius: 24px;
border: 1px solid rgba(148, 163, 184, 0.12);
background: rgba(247, 249, 252, 0.9);
}
html.dark .token-reference-filter-panel {
border-color: rgba(148, 163, 184, 0.14);
background: rgba(19, 27, 42, 0.92);
}
.token-reference-filter-grid {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 280px);
gap: 14px;
}
.token-reference-filter-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.token-reference-filter-label {
font-size: 11px;
font-weight: 700;
color: #94a3b8;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.token-reference-filter-panel .semi-input-wrapper,
.token-reference-filter-panel .semi-input-wrapper-focus {
height: 46px;
border-radius: 18px !important;
border: 1px solid rgba(148, 163, 184, 0.12);
background: rgba(255, 255, 255, 0.94);
}
html.dark .token-reference-filter-panel .semi-input-wrapper,
html.dark .token-reference-filter-panel .semi-input-wrapper-focus {
border-color: rgba(148, 163, 184, 0.14);
background: rgba(15, 23, 42, 0.9);
}
.token-reference-filter-actions {
display: flex;
align-items: center;
gap: 10px;
}
.token-reference-selection-bar {
margin-top: 16px;
padding: 14px 18px;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: rgba(79, 70, 229, 0.08);
border: 1px solid rgba(79, 70, 229, 0.08);
}
html.dark .token-reference-selection-bar {
background: rgba(79, 70, 229, 0.14);
border-color: rgba(129, 140, 248, 0.14);
}
.token-reference-selection-copy {
font-size: 13px;
font-weight: 600;
color: var(--ev-primary);
}
.token-reference-selection-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.token-reference-table-shell {
margin-top: 18px;
overflow: hidden;
border-radius: 28px;
border: 1px solid rgba(148, 163, 184, 0.12);
background: rgba(255, 255, 255, 0.98);
}
html.dark .token-reference-table-shell {
border-color: rgba(148, 163, 184, 0.12);
background: rgba(15, 23, 42, 0.98);
}
.token-reference-table-scroll {
overflow-x: auto;
}
.token-reference-table {
width: 100%;
min-width: 1320px;
border-collapse: separate;
border-spacing: 0;
}
.token-reference-table thead th {
padding: 18px 16px;
text-align: left;
background: rgba(246, 247, 250, 0.98);
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
color: #7b8595;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
}
html.dark .token-reference-table thead th {
background: rgba(30, 41, 59, 0.76);
border-bottom-color: rgba(148, 163, 184, 0.14);
color: rgba(203, 213, 225, 0.66);
}
.token-reference-table tbody td {
padding: 20px 16px;
border-bottom: 1px solid rgba(226, 232, 240, 0.92);
vertical-align: middle;
}
html.dark .token-reference-table tbody td {
border-bottom-color: rgba(51, 65, 85, 0.72);
}
.token-reference-table tbody tr:last-child td {
border-bottom: none;
}
.token-reference-table tbody tr:hover {
background: rgba(79, 70, 229, 0.03);
}
html.dark .token-reference-table tbody tr:hover {
background: rgba(79, 70, 229, 0.06);
}
.token-reference-table tbody tr.is-muted {
background: rgba(148, 163, 184, 0.06);
}
html.dark .token-reference-table tbody tr.is-muted {
background: rgba(148, 163, 184, 0.08);
}
.token-reference-check-column {
width: 48px;
}
.token-reference-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 6px 2px;
}
.token-reference-footer-copy {
font-size: 13px;
color: var(--semi-color-text-2);
}
.token-reference-footer .semi-page-item,
.token-reference-footer .semi-page-prev,
.token-reference-footer .semi-page-next {
border-radius: 999px !important;
}
.token-reference-footer .semi-page-item-active {
background: var(--ev-primary);
color: #ffffff;
}
.token-reference-name-cell {
display: flex;
align-items: center;
min-width: 140px;
}
.token-reference-name {
font-size: 16px;
font-weight: 700;
color: var(--semi-color-text-0);
}
.token-reference-status-pill {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
}
.token-reference-status-pill .token-reference-status-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: currentColor;
}
.token-reference-status-pill.is-active {
background: rgba(20, 184, 166, 0.14);
color: #0f9b8e;
}
.token-reference-status-pill.is-paused {
background: rgba(148, 163, 184, 0.18);
color: #64748b;
}
.token-reference-status-pill.is-expired {
background: rgba(244, 63, 94, 0.12);
color: #e11d48;
}
.token-reference-status-pill.is-exhausted {
background: rgba(249, 115, 22, 0.14);
color: #ea580c;
}
.token-reference-soft-pill,
.token-reference-model-chip {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(226, 232, 240, 0.78);
color: #475569;
font-size: 13px;
font-weight: 600;
}
html.dark .token-reference-soft-pill,
html.dark .token-reference-model-chip {
background: rgba(51, 65, 85, 0.72);
color: #e2e8f0;
}
.token-reference-model-chip.is-count {
background: rgba(79, 70, 229, 0.1);
color: var(--ev-primary);
}
.token-reference-quota-cell {
min-width: 170px;
display: flex;
flex-direction: column;
gap: 7px;
}
.token-reference-quota-top {
display: flex;
flex-direction: column;
gap: 4px;
}
.token-reference-quota-percent {
font-size: 11px;
font-weight: 700;
color: var(--ev-primary);
}
.token-reference-quota-values,
.token-reference-muted-text,
.token-reference-date-block {
font-size: 13px;
color: var(--semi-color-text-2);
}
.token-reference-progress-track {
position: relative;
overflow: hidden;
height: 6px;
border-radius: 999px;
background: rgba(99, 102, 241, 0.12);
}
.token-reference-progress-fill {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #4f46e5 0%, #6366f1 100%);
}
.token-reference-key-cell {
min-width: 220px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.token-reference-key-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
color: var(--semi-color-text-1);
}
.token-reference-inline-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.token-reference-inline-button {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 999px;
background: transparent;
color: var(--semi-color-text-2);
cursor: pointer;
transition:
background 0.2s ease,
color 0.2s ease;
}
.token-reference-inline-button:hover {
background: rgba(79, 70, 229, 0.08);
color: var(--ev-primary);
}
.token-reference-models {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
max-width: 220px;
}
.token-reference-date-block {
display: flex;
flex-direction: column;
gap: 4px;
white-space: nowrap;
}
.token-reference-more-button.semi-button {
width: 36px;
height: 36px;
padding: 0 !important;
border-radius: 999px !important;
background: rgba(241, 245, 249, 0.88);
color: var(--semi-color-text-1);
}
html.dark .token-reference-more-button.semi-button {
background: rgba(30, 41, 59, 0.88);
color: #e2e8f0;
}
.token-reference-empty-state {
padding: 48px 20px;
}
.token-reference-skeleton-row {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 0;
}
.token-reference-skeleton {
display: block;
height: 12px;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(226, 232, 240, 0.88) 0%,
rgba(241, 245, 249, 1) 50%,
rgba(226, 232, 240, 0.88) 100%
);
}
.token-reference-skeleton-short {
width: 12%;
}
.token-reference-skeleton-medium {
width: 24%;
}
.token-reference-skeleton-long {
width: 38%;
}
html.dark .token-reference-skeleton {
background: linear-gradient(
90deg,
rgba(51, 65, 85, 0.78) 0%,
rgba(71, 85, 105, 0.92) 50%,
rgba(51, 65, 85, 0.78) 100%
);
}
.token-reference-menu {
min-width: 180px;
padding: 8px;
border-radius: 18px;
}
.token-reference-menu-row {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 600;
}
.token-reference-menu-row-danger {
color: #e11d48;
}
@media (max-width: 1024px) {
.console-page-heading {
margin-bottom: 20px;
}
.console-page-actions {
justify-content: flex-start;
}
.product-management-search-row {
align-items: stretch;
}
.agent-dashboard-bot-quota-row {
grid-template-columns: 1fr;
}
.agent-dashboard-main-grid {
grid-template-columns: 1fr;
}
.proxy-management-section-title-row {
align-items: flex-start;
flex-direction: column;
}
.proxy-a2a-credentials {
grid-template-columns: 1fr;
}
.settings-page-heading {
margin-bottom: 20px;
}
.settings-page-tabs-shell {
padding: 8px;
}
.showcase-personal-grid {
grid-template-columns: 1fr;
}
.token-reference-shell {
padding: 16px;
}
.token-reference-heading {
margin-bottom: 16px;
}
.token-reference-toolbar {
align-items: stretch;
}
.token-reference-toolbar-actions {
width: 100%;
}
.token-reference-footer {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 768px) {
.console-page-actions,
.product-management-search-actions {
width: 100%;
}
.product-management-search-actions .semi-button {
flex: 1;
}
.agent-dashboard-stat-chip {
flex: 1 1 calc(50% - 10px);
}
.agent-dashboard-empty {
padding: 20px 16px;
}
.proxy-a2a-peer-row,
.proxy-a2a-add-row {
flex-direction: column;
align-items: stretch;
}
.proxy-a2a-add-row .semi-button {
width: 100%;
}
.settings-page-tabs .semi-tabs-bar {
padding: 10px 10px 0;
}
.settings-page-tabs .semi-tabs-content {
padding: 0 10px 10px !important;
}
.database-card-shell {
margin: 0 auto;
}
.sidebar-container {
background: rgba(242, 244, 246, 0.92);
border-radius: 24px;
}
html.dark .sidebar-container {
background: rgba(19, 27, 46, 0.94);
}
.sidebar-brand {
min-height: 74px;
padding: 20px 16px 12px;
}
.sidebar-nav-item {
min-height: 46px;
margin: 0 8px 4px !important;
}
.token-reference-toolbar-actions,
.token-reference-filter-actions,
.token-reference-selection-actions {
width: 100%;
}
.token-reference-toolbar-button.semi-button,
.token-reference-filter-actions .semi-button,
.token-reference-selection-actions .semi-button {
flex: 1;
}
.token-reference-filter-panel,
.token-reference-selection-bar,
.token-reference-footer {
flex-direction: column;
align-items: stretch;
}
.token-reference-footer-copy {
text-align: center;
}
}
/* ==================== API Models v2 ==================== */
.api-model-surface {
border: none !important;
background: #ffffff !important;
box-shadow: 0 12px 48px rgba(25, 28, 30, 0.05) !important;
}
.api-model-toolbar {
border-radius: 28px;
padding: 24px;
}
.api-model-toolbar-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.api-model-search-input {
width: min(100%, 420px);
}
.api-model-search-input .semi-input-wrapper,
.api-model-search-input .semi-input-wrapper-focus {
min-height: 56px;
border: none !important;
border-radius: 999px !important;
background: #f2f4f6 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
padding: 0 18px;
}
.api-model-result-strip {
border-radius: 24px;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.api-model-result-tags {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.api-model-toolbar .sbg-button.semi-button {
min-height: 42px;
border: none !important;
border-radius: 999px !important;
background: #f2f4f6 !important;
color: var(--ev-on-surface-variant) !important;
box-shadow: none !important;
}
.api-model-toolbar .sbg-button.semi-button:hover {
background: rgba(70, 72, 212, 0.08) !important;
color: var(--ev-primary) !important;
}
.api-model-toolbar .sbg-button.semi-button.semi-button-light,
.api-model-toolbar .sbg-button.semi-button.semi-button-primary {
background: rgba(70, 72, 212, 0.1) !important;
color: var(--ev-primary) !important;
box-shadow: 0 8px 20px rgba(70, 72, 212, 0.12) !important;
}
.api-model-toolbar .sbg-tag.semi-tag {
border: none !important;
background: rgba(255, 255, 255, 0.82) !important;
}
.api-model-copy-button.semi-button {
min-width: 32px !important;
height: 32px !important;
border: none !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.84) !important;
box-shadow: 0 8px 20px rgba(25, 28, 30, 0.05) !important;
}
.api-model-copy-button-large.semi-button {
min-width: 42px !important;
height: 42px !important;
}
.api-model-callout {
background: #f2f4f6 !important;
border: none !important;
box-shadow: none !important;
}
.api-model-callout-item,
.api-model-metric-card,
.api-model-endpoint-row,
.api-model-auto-chain {
background: rgba(255, 255, 255, 0.82) !important;
border: none !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.api-model-table-shell {
background: #f2f4f6;
border: none !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}
.api-model-table-shell table {
width: 100%;
}
.api-model-table-shell thead tr {
background: #eceef0 !important;
}
.api-model-table-row:nth-child(even) {
background: rgba(255, 255, 255, 0.42);
}
.api-model-table-row:nth-child(odd) {
background: transparent;
}
.api-model-detail-sheet .semi-sidesheet-inner,
.api-model-detail-sheet .semi-sidesheet-content,
.api-model-detail-sheet .semi-sidesheet-header {
background: #f7f9fb !important;
}
.api-model-detail-sheet .semi-sidesheet-header {
box-shadow: 0 16px 40px rgba(25, 28, 30, 0.04);
}
.api-model-sheet-body {
background: transparent;
}
.showcase-model-page {
width: 100%;
}
.showcase-model-shell {
width: min(100%, var(--app-shell-max));
margin: 0 auto;
display: grid;
gap: 28px;
}
.showcase-model-hero-panel {
padding: 30px;
border-radius: 32px;
background:
radial-gradient(
circle at top right,
rgba(129, 140, 248, 0.2),
transparent 28%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(242, 244, 246, 0.98)
);
box-shadow: 0 14px 52px rgba(25, 28, 30, 0.05);
}
.showcase-model-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.showcase-model-title {
margin: 0;
font-size: clamp(40px, 5vw, 64px) !important;
line-height: 0.94 !important;
letter-spacing: -0.07em !important;
color: var(--ev-on-surface) !important;
}
.showcase-model-subtitle {
display: block;
margin-top: 12px;
max-width: 760px;
font-size: 16px;
line-height: 1.75;
color: var(--ev-on-surface-variant) !important;
}
.showcase-model-header-stats {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.showcase-model-header-stats span {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 14px;
border-radius: 999px;
background: rgba(70, 72, 212, 0.08);
color: var(--ev-primary);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
}
.showcase-model-tabs {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 8px;
margin-top: 24px;
border-radius: 22px;
background: #f2f4f6;
}
.showcase-model-tab {
min-height: 42px;
padding: 0 16px;
border: 1px solid var(--ev-control-border);
border-radius: 14px;
background: var(--ev-control-surface);
color: var(--ev-on-surface-variant);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.03em;
cursor: pointer;
box-shadow: var(--ev-control-shadow);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition:
background 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.showcase-model-tab:hover {
transform: translateY(-1px);
border-color: var(--ev-control-border-strong);
background: var(--ev-control-surface-hover);
color: var(--ev-on-surface);
}
.showcase-model-tab-active {
background: var(--ev-tab-surface-active);
border-color: var(--ev-control-border-strong);
color: var(--ev-primary);
box-shadow: 0 12px 24px rgba(25, 28, 30, 0.08);
}
.showcase-model-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
gap: 22px;
}
.showcase-model-card {
position: relative;
border-radius: 32px;
background: #ffffff;
box-shadow: 0 16px 56px rgba(25, 28, 30, 0.06);
padding: 28px;
cursor: pointer;
transition:
transform 0.24s ease,
box-shadow 0.24s ease;
}
.showcase-model-card:hover,
.showcase-model-directory-card:hover {
transform: translateY(-3px);
box-shadow: 0 20px 64px rgba(25, 28, 30, 0.08);
}
.showcase-model-card-primary {
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: space-between;
background:
radial-gradient(
circle at top right,
rgba(255, 255, 255, 0.22),
transparent 34%
),
linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}
.showcase-model-card-primary .showcase-model-card-badge {
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
}
.showcase-model-card-primary .showcase-model-card-title,
.showcase-model-card-primary .showcase-model-card-description,
.showcase-model-card-primary .showcase-model-price {
color: #f8f9ff;
}
.showcase-model-card-primary .showcase-model-chip {
background: rgba(255, 255, 255, 0.14);
color: rgba(248, 249, 255, 0.82);
}
.showcase-model-card-primary .showcase-model-chip-accent {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.showcase-model-card-primary .showcase-model-primary-action.semi-button {
background: #ffffff !important;
color: #4648d4 !important;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18) !important;
}
.showcase-model-card-compact {
min-height: 170px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.showcase-model-card-wide {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(200px, 0.4fr) minmax(0, 1fr);
gap: 24px;
align-items: stretch;
}
.showcase-model-card-badge {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
background: rgba(70, 72, 212, 0.1);
color: var(--ev-primary);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.showcase-model-card-badge-secondary {
background: rgba(249, 115, 22, 0.1);
color: #c2410c;
}
.showcase-model-card-title {
margin-top: 16px;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.02;
font-weight: 800;
letter-spacing: -0.05em;
color: var(--ev-on-surface);
}
.showcase-model-card-title-compact {
font-size: 24px;
}
.showcase-model-card-description {
margin-top: 12px;
max-width: 46ch;
font-size: 15px;
line-height: 1.75;
color: var(--ev-on-surface-variant);
}
.showcase-model-card-description-compact {
font-size: 14px;
}
.showcase-model-chip-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 18px;
}
.showcase-model-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 0 12px;
border-radius: 999px;
background: rgba(25, 28, 30, 0.06);
color: var(--ev-on-surface-variant);
font-size: 12px;
font-weight: 700;
}
.showcase-model-chip-accent {
background: rgba(70, 72, 212, 0.1);
color: var(--ev-primary);
}
.showcase-model-card-footer,
.showcase-model-wide-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-top: 24px;
}
.showcase-model-price {
color: var(--ev-on-surface-variant);
font-size: 13px;
font-weight: 700;
}
.showcase-model-primary-action.semi-button,
.showcase-model-secondary-action.semi-button {
min-height: 46px;
padding: 0 18px !important;
border: none !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
color: #ffffff !important;
box-shadow: 0 14px 32px rgba(99, 102, 241, 0.22) !important;
}
.showcase-model-outline-action.semi-button {
min-height: 46px;
padding: 0 18px !important;
border: none !important;
border-radius: 999px !important;
background: #f2f4f6 !important;
color: var(--ev-on-surface) !important;
}
.showcase-model-compact-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 18px;
}
.showcase-model-compact-metric {
padding: 14px;
border-radius: 20px;
background: #f2f4f6;
}
.showcase-model-compact-metric span {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ev-on-surface-variant);
}
.showcase-model-compact-metric strong {
display: block;
margin-top: 8px;
font-size: 18px;
line-height: 1;
color: var(--ev-on-surface);
}
.showcase-model-secondary-link {
margin-top: 18px;
color: var(--ev-primary);
font-size: 13px;
font-weight: 800;
}
.showcase-model-media-placeholder {
min-height: 220px;
border-radius: 24px;
background:
radial-gradient(
circle at top left,
rgba(249, 115, 22, 0.2),
transparent 36%
),
linear-gradient(135deg, rgba(70, 72, 212, 0.22), rgba(189, 194, 255, 0.24));
}
.showcase-model-wide-copy {
display: flex;
flex-direction: column;
justify-content: center;
}
.showcase-model-toolbar-shell,
.showcase-model-summary-shell {
width: 100%;
}
.showcase-quickstart-section {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
gap: 24px;
align-items: stretch;
}
.showcase-quickstart-copy,
.showcase-code-block,
.showcase-model-empty-card,
.showcase-model-directory {
border-radius: 30px;
background: #ffffff;
box-shadow: 0 12px 48px rgba(25, 28, 30, 0.05);
}
.showcase-quickstart-copy {
padding: 28px;
}
.showcase-quickstart-title,
.showcase-model-directory-title {
margin: 0 !important;
font-size: clamp(28px, 3vw, 38px) !important;
line-height: 1.04 !important;
letter-spacing: -0.05em !important;
color: var(--ev-on-surface) !important;
}
.showcase-quickstart-description,
.showcase-model-directory-subtitle {
display: block;
margin-top: 10px;
font-size: 14px;
line-height: 1.75;
color: var(--ev-on-surface-variant) !important;
}
.showcase-quickstart-steps {
display: grid;
gap: 14px;
margin-top: 24px;
}
.showcase-quickstart-step {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px;
border-radius: 22px;
background: #f2f4f6;
}
.showcase-quickstart-step-index {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(70, 72, 212, 0.12);
color: var(--ev-primary);
font-weight: 800;
}
.showcase-quickstart-step-title {
font-size: 15px;
font-weight: 800;
color: var(--ev-on-surface);
}
.showcase-quickstart-step-text {
margin-top: 6px;
font-size: 13px;
line-height: 1.7;
color: var(--ev-on-surface-variant);
}
.showcase-code-block {
overflow: hidden;
background: linear-gradient(180deg, #1f2240 0%, #14172b 100%);
color: #eff1f3;
}
.showcase-code-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 18px 20px 0;
}
.showcase-code-dots {
display: flex;
align-items: center;
gap: 8px;
}
.showcase-code-dots span {
width: 10px;
height: 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.28);
}
.showcase-code-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(239, 241, 243, 0.68);
}
.showcase-code-content {
margin: 0;
padding: 20px;
min-height: 100%;
overflow: auto;
font-size: 13px;
line-height: 1.8;
font-family: var(--semi-font-family-code, monospace);
}
.showcase-model-directory {
padding: 26px;
}
.showcase-model-directory-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.showcase-model-directory-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.showcase-model-directory-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 18px 20px;
border-radius: 24px;
background: #f2f4f6;
color: var(--ev-on-surface);
cursor: pointer;
transition:
transform 0.24s ease,
box-shadow 0.24s ease,
background 0.24s ease;
}
.showcase-model-directory-name {
font-size: 15px;
font-weight: 800;
line-height: 1.35;
}
.showcase-model-directory-meta {
margin-top: 6px;
font-size: 12px;
color: var(--ev-on-surface-variant);
}
.showcase-model-empty-card {
padding: 28px;
}
.showcase-model-empty {
padding: 28px 0;
}
html.dark .api-model-surface,
html.dark .showcase-quickstart-copy,
html.dark .showcase-model-empty-card,
html.dark .showcase-model-directory,
html.dark .showcase-model-card {
background: var(--semi-color-bg-2) !important;
box-shadow: 0 12px 48px rgba(2, 6, 23, 0.18) !important;
}
html.dark .api-model-toolbar .sbg-button.semi-button,
html.dark .api-model-search-input .semi-input-wrapper,
html.dark .api-model-search-input .semi-input-wrapper-focus,
html.dark .showcase-model-tabs,
html.dark .showcase-model-directory-card,
html.dark .showcase-model-compact-metric,
html.dark .showcase-quickstart-step,
html.dark .api-model-table-shell,
html.dark .api-model-callout,
html.dark .api-model-callout-item,
html.dark .api-model-metric-card,
html.dark .api-model-endpoint-row,
html.dark .api-model-auto-chain {
background: var(--semi-color-bg-1) !important;
}
html.dark .api-model-detail-sheet .semi-sidesheet-inner,
html.dark .api-model-detail-sheet .semi-sidesheet-content,
html.dark .api-model-detail-sheet .semi-sidesheet-header,
html.dark .showcase-model-card-primary,
html.dark .showcase-model-hero-panel {
background: var(--semi-color-bg-0) !important;
}
html.dark .showcase-model-card-primary {
background:
radial-gradient(
circle at top right,
rgba(255, 255, 255, 0.12),
transparent 32%
),
linear-gradient(135deg, #3d42cf 0%, #585ff0 54%, #7380ff 100%) !important;
}
html.dark .showcase-model-hero-panel {
background:
radial-gradient(
circle at top right,
rgba(129, 140, 248, 0.18),
transparent 26%
),
linear-gradient(180deg, var(--semi-color-bg-2), var(--semi-color-bg-1)) !important;
}
html.dark .showcase-model-media-placeholder {
background:
radial-gradient(
circle at top left,
rgba(249, 115, 22, 0.18),
transparent 36%
),
linear-gradient(135deg, rgba(99, 102, 241, 0.24), rgba(189, 194, 255, 0.14));
}
html.dark .showcase-code-block {
background: linear-gradient(180deg, #111321 0%, #0b0d17 100%);
}
html.dark .showcase-model-tab-active,
html.dark .api-model-copy-button.semi-button {
background: var(--semi-color-bg-2) !important;
}
html.dark .showcase-model-title,
html.dark .showcase-model-card-title,
html.dark .showcase-model-directory-name,
html.dark .showcase-quickstart-title,
html.dark .showcase-quickstart-step-title {
color: #eff1f3 !important;
}
html.dark .showcase-model-subtitle,
html.dark .showcase-model-card-description,
html.dark .showcase-model-price,
html.dark .showcase-model-directory-meta,
html.dark .showcase-quickstart-description,
html.dark .showcase-quickstart-step-text,
html.dark .api-model-toolbar .sbg-button.semi-button,
html.dark .api-model-result-strip {
color: rgba(239, 241, 243, 0.72) !important;
}
html.dark .showcase-model-chip {
background: rgba(239, 241, 243, 0.08);
color: rgba(239, 241, 243, 0.72);
}
html.dark .showcase-model-chip-accent,
html.dark .showcase-model-header-stats span,
html.dark .showcase-model-card-badge,
html.dark .api-model-toolbar .sbg-button.semi-button.semi-button-light,
html.dark .api-model-toolbar .sbg-button.semi-button.semi-button-primary {
background: rgba(129, 140, 248, 0.14) !important;
color: #c7d2fe !important;
}
html.dark .showcase-model-card-badge-secondary {
background: rgba(249, 115, 22, 0.18) !important;
color: #fdba74 !important;
}
html.dark .showcase-model-outline-action.semi-button {
background: var(--semi-color-bg-2) !important;
color: var(--semi-color-text-0) !important;
}
html.dark .api-model-table-shell thead tr {
background: rgba(26, 34, 54, 0.92) !important;
}
html.dark .api-model-table-row:nth-child(even) {
background: rgba(255, 255, 255, 0.02);
}
@media (max-width: 1200px) {
.showcase-model-grid,
.showcase-quickstart-section {
grid-template-columns: 1fr;
}
.showcase-model-card-wide {
grid-template-columns: 1fr;
}
.showcase-model-directory-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.showcase-model-shell {
gap: 22px;
}
.showcase-model-tabs {
overflow-x: auto;
flex-wrap: nowrap;
}
.showcase-model-grid,
.showcase-model-directory-grid,
.showcase-model-compact-metrics {
grid-template-columns: 1fr;
}
.showcase-model-card,
.showcase-quickstart-copy,
.showcase-code-block,
.showcase-model-directory,
.showcase-model-hero-panel,
.api-model-toolbar {
border-radius: 24px;
}
.showcase-model-card,
.showcase-quickstart-copy,
.showcase-model-directory,
.showcase-model-hero-panel,
.api-model-toolbar {
padding: 22px;
}
}
@media (max-width: 640px) {
.showcase-model-title {
font-size: 38px !important;
}
.showcase-model-header-stats,
.api-model-result-tags,
.showcase-model-card-footer,
.showcase-model-wide-actions {
width: 100%;
}
.showcase-model-directory-card {
padding: 16px 18px;
}
}
/* ==================== Token Management v2 ==================== */
.token-reference-shell {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0;
}
.token-reference-hero-strip {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
gap: 18px;
align-items: stretch;
padding: 28px;
border-radius: 32px;
background:
radial-gradient(
circle at top right,
rgba(129, 140, 248, 0.2),
transparent 26%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(242, 244, 246, 0.98)
);
box-shadow: 0 16px 56px rgba(25, 28, 30, 0.05);
}
.token-reference-heading {
margin-bottom: 0;
}
.token-reference-hero-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.token-reference-hero-stat {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 8px;
padding: 18px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.76);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
.token-reference-hero-stat-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #7b8595;
}
.token-reference-hero-stat-value {
font-size: 28px;
line-height: 1;
letter-spacing: -0.05em;
color: var(--ev-on-surface);
}
.token-reference-hero-stat.is-primary .token-reference-hero-stat-value {
color: var(--ev-primary);
}
.token-reference-hero-stat.is-success .token-reference-hero-stat-value {
color: #0f9b8e;
}
.token-reference-hero-stat.is-warning .token-reference-hero-stat-value {
color: #ea580c;
}
.token-reference-hero-stat.is-violet .token-reference-hero-stat-value {
color: #7c3aed;
}
.token-reference-toolbar,
.token-reference-filter-panel,
.token-reference-selection-bar,
.token-reference-table-shell {
border: none !important;
background: rgba(255, 255, 255, 0.96) !important;
box-shadow: 0 12px 44px rgba(25, 28, 30, 0.04);
}
.token-reference-toolbar {
margin-top: 18px;
padding: 20px;
border-radius: 28px;
}
.token-reference-search-input .semi-input-wrapper,
.token-reference-search-input .semi-input-wrapper-focus,
.token-reference-filter-panel .semi-input-wrapper,
.token-reference-filter-panel .semi-input-wrapper-focus {
border: none !important;
background: #f2f4f6 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.token-reference-toolbar-button.semi-button,
.token-reference-selection-actions .semi-button,
.token-reference-filter-actions .semi-button {
border: none !important;
box-shadow: none !important;
}
.token-reference-toolbar-button.semi-button {
background: #f2f4f6 !important;
color: #475569;
}
.token-reference-toolbar-button.semi-button:hover,
.token-reference-toolbar-button.semi-button.is-active {
background: rgba(79, 70, 229, 0.1) !important;
color: var(--ev-primary) !important;
}
.token-reference-toolbar-button-primary.semi-button {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
color: #ffffff !important;
box-shadow: 0 14px 30px rgba(99, 102, 241, 0.22) !important;
}
.token-reference-filter-panel {
margin-top: 14px;
padding: 18px;
border-radius: 24px;
}
.token-reference-selection-bar {
margin-top: 16px;
padding: 16px 18px;
border-radius: 22px;
background: rgba(79, 70, 229, 0.08) !important;
}
.token-reference-table-shell {
margin-top: 18px;
padding: 0 12px 12px;
border-radius: 30px;
}
.token-reference-table {
border-spacing: 0 10px;
}
.token-reference-table thead th {
border-bottom: none !important;
background: transparent !important;
color: #7b8595;
padding: 16px 16px 8px;
}
.token-reference-table tbody td {
border-bottom: none !important;
background: #f8fafc;
padding: 18px 16px;
}
.token-reference-table tbody td:first-child {
border-radius: 20px 0 0 20px;
}
.token-reference-table tbody td:last-child {
border-radius: 0 20px 20px 0;
}
.token-reference-table tbody tr:hover td {
background: #f4f6ff;
}
.token-reference-table tbody tr.is-muted td {
background: rgba(148, 163, 184, 0.12);
}
.token-reference-soft-pill,
.token-reference-model-chip,
.token-reference-status-pill,
.token-reference-more-button.semi-button,
.token-reference-inline-button {
border: none !important;
}
.token-reference-soft-pill,
.token-reference-model-chip {
background: rgba(226, 232, 240, 0.72);
}
.token-reference-inline-button,
.token-reference-more-button.semi-button {
background: rgba(241, 245, 249, 0.9);
}
.token-reference-inline-button:hover,
.token-reference-more-button.semi-button:hover {
background: rgba(79, 70, 229, 0.1) !important;
}
.token-reference-footer {
margin-top: 6px;
padding: 16px 8px 0;
}
.token-reference-shell.is-compact .token-reference-table tbody td {
padding: 14px 14px;
}
.token-reference-shell.is-compact .token-reference-name {
font-size: 14px;
}
.token-reference-shell.is-compact .token-reference-soft-pill,
.token-reference-shell.is-compact .token-reference-model-chip,
.token-reference-shell.is-compact .token-reference-status-pill {
min-height: 28px;
padding: 4px 10px;
font-size: 12px;
}
.token-edit-sheet .semi-sidesheet-inner,
.token-edit-sheet .semi-sidesheet-content,
.token-edit-sheet .semi-sidesheet-header,
.token-edit-sheet .semi-sidesheet-footer {
background: #f7f9fb !important;
}
.token-edit-sheet .semi-sidesheet-header {
box-shadow: 0 14px 40px rgba(25, 28, 30, 0.04);
}
.token-edit-sheet-footer {
padding: 14px 18px !important;
}
.token-edit-sheet-body {
padding: 12px !important;
display: grid;
gap: 14px;
}
.token-edit-section-card.semi-card {
border: none !important;
background: #ffffff !important;
box-shadow: 0 12px 36px rgba(25, 28, 30, 0.05) !important;
}
.token-edit-sheet .semi-input-wrapper,
.token-edit-sheet .semi-input-wrapper-focus,
.token-edit-sheet .semi-select-selection,
.token-edit-sheet .semi-datepicker-range-input,
.token-edit-sheet .semi-input-textarea-wrapper,
.token-edit-sheet .semi-input-number,
.token-edit-sheet .semi-input-number-input {
border: none !important;
box-shadow: none !important;
}
.token-edit-sheet .semi-input-wrapper,
.token-edit-sheet .semi-input-wrapper-focus,
.token-edit-sheet .semi-select-selection,
.token-edit-sheet .semi-datepicker-range-input,
.token-edit-sheet .semi-input-textarea-wrapper,
.token-edit-sheet .semi-input-number {
background: #f2f4f6 !important;
border-radius: 18px !important;
}
.token-edit-submit-button.semi-button {
min-height: 46px;
padding: 0 18px !important;
border: none !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
color: #ffffff !important;
box-shadow: 0 14px 28px rgba(99, 102, 241, 0.2) !important;
}
.token-edit-cancel-button.semi-button {
min-height: 46px;
padding: 0 18px !important;
border: none !important;
border-radius: 999px !important;
background: #eef2ff !important;
color: var(--ev-primary) !important;
}
.token-batch-modal .semi-modal-content {
border-radius: 24px !important;
border: none !important;
box-shadow: 0 20px 60px rgba(25, 28, 30, 0.12) !important;
}
.token-batch-modal .semi-modal-body {
color: var(--ev-on-surface-variant);
}
.token-batch-modal .semi-modal-footer .semi-button {
border: none !important;
border-radius: 999px !important;
}
html.dark .token-reference-hero-strip,
html.dark .token-reference-toolbar,
html.dark .token-reference-filter-panel,
html.dark .token-reference-table-shell,
html.dark .token-edit-section-card.semi-card,
html.dark .token-batch-modal .semi-modal-content {
background: var(--semi-color-bg-2) !important;
box-shadow: 0 12px 48px rgba(2, 6, 23, 0.18) !important;
}
html.dark .token-reference-hero-strip {
background:
radial-gradient(
circle at top right,
rgba(129, 140, 248, 0.16),
transparent 28%
),
linear-gradient(180deg, var(--semi-color-bg-2), var(--semi-color-bg-1)) !important;
}
html.dark .token-reference-hero-stat,
html.dark .token-reference-table tbody td,
html.dark .token-reference-inline-button,
html.dark .token-reference-more-button.semi-button,
html.dark .token-edit-sheet .semi-input-wrapper,
html.dark .token-edit-sheet .semi-input-wrapper-focus,
html.dark .token-edit-sheet .semi-select-selection,
html.dark .token-edit-sheet .semi-datepicker-range-input,
html.dark .token-edit-sheet .semi-input-textarea-wrapper,
html.dark .token-edit-sheet .semi-input-number,
html.dark .token-reference-search-input .semi-input-wrapper,
html.dark .token-reference-search-input .semi-input-wrapper-focus,
html.dark .token-reference-filter-panel .semi-input-wrapper,
html.dark .token-reference-filter-panel .semi-input-wrapper-focus,
html.dark .token-reference-toolbar-button.semi-button {
background: var(--semi-color-bg-1) !important;
}
html.dark .token-reference-table tbody tr:hover td {
background: var(--ev-surface-container-high) !important;
}
html.dark .token-reference-table tbody tr.is-muted td {
background: rgba(255, 255, 255, 0.06) !important;
}
html.dark .token-reference-soft-pill,
html.dark .token-reference-model-chip,
html.dark .token-reference-selection-bar,
html.dark .token-edit-sheet .semi-sidesheet-inner,
html.dark .token-edit-sheet .semi-sidesheet-content,
html.dark .token-edit-sheet .semi-sidesheet-header,
html.dark .token-edit-sheet .semi-sidesheet-footer {
background: var(--semi-color-bg-0) !important;
}
html.dark .token-reference-hero-stat-label,
html.dark .token-reference-table thead th,
html.dark .token-reference-key-text,
html.dark .token-reference-muted-text,
html.dark .token-reference-date-block,
html.dark .token-batch-modal .semi-modal-body {
color: rgba(239, 241, 243, 0.64) !important;
}
html.dark .token-reference-hero-stat-value,
html.dark .token-reference-name,
html.dark .token-edit-sheet .semi-typography,
html.dark .token-edit-sheet .semi-form-field-label,
html.dark .token-batch-modal .semi-modal-title {
color: #eff1f3 !important;
}
html.dark .token-reference-toolbar-button.semi-button:hover,
html.dark .token-reference-toolbar-button.semi-button.is-active,
html.dark .token-edit-cancel-button.semi-button {
background: rgba(129, 140, 248, 0.16) !important;
color: #c7d2fe !important;
}
html.dark .token-edit-submit-button.semi-button {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}
/* ── Token: section desc dark mode ── */
.token-edit-section-desc {
font-size: 12px;
color: var(--semi-color-text-2);
}
/* ── Token: status pills dark mode (brighter for dark bg) ── */
html.dark .token-reference-status-pill.is-active {
background: rgba(20, 184, 166, 0.18);
color: #5eead4;
}
html.dark .token-reference-status-pill.is-paused {
background: rgba(148, 163, 184, 0.18);
color: #94a3b8;
}
html.dark .token-reference-status-pill.is-expired {
background: rgba(244, 63, 94, 0.16);
color: #fda4af;
}
html.dark .token-reference-status-pill.is-exhausted {
background: rgba(249, 115, 22, 0.16);
color: #fdba74;
}
/* ── Token: hero stat accent colors dark mode ── */
html.dark
.token-reference-hero-stat.is-success
.token-reference-hero-stat-value {
color: #5eead4;
}
html.dark
.token-reference-hero-stat.is-warning
.token-reference-hero-stat-value {
color: #fdba74;
}
html.dark
.token-reference-hero-stat.is-violet
.token-reference-hero-stat-value {
color: #c4b5fd;
}
/* ── Token: model chip count dark mode ── */
html.dark .token-reference-model-chip.is-count {
background: rgba(129, 140, 248, 0.16);
color: #c7d2fe;
}
/* ── Token: menu danger dark mode ── */
html.dark .token-reference-menu-row-danger {
color: #fda4af;
}
/* ── Token: cancel button dark mode ── */
html.dark .token-edit-cancel-button.semi-button {
background: rgba(129, 140, 248, 0.14) !important;
color: #c7d2fe !important;
}
/* ── Token: section card dark mode ── */
html.dark .token-edit-section-card.semi-card {
background: var(--semi-color-bg-1) !important;
box-shadow: 0 12px 36px rgba(2, 6, 23, 0.18) !important;
}
/* ── Token: progress bar dark mode ── */
html.dark .token-reference-progress-track {
background: rgba(129, 140, 248, 0.14);
}
html.dark .token-reference-progress-fill {
background: linear-gradient(90deg, #818cf8 0%, #a5b4fc 100%);
}
/* ── Token: filter actions button dark mode ── */
html.dark .token-reference-filter-actions .semi-button-primary {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
color: #ffffff !important;
border: none !important;
}
html.dark .token-reference-filter-actions .semi-button-tertiary {
background: rgba(129, 140, 248, 0.12) !important;
color: #c7d2fe !important;
}
/* ── Token: selection bar buttons dark mode ── */
html.dark .token-reference-selection-actions .semi-button-tertiary {
background: rgba(129, 140, 248, 0.12) !important;
color: #c7d2fe !important;
}
html.dark .token-reference-selection-actions .semi-button-danger {
background: rgba(244, 63, 94, 0.16) !important;
color: #fda4af !important;
}
/* ── Token: checkbox dark mode ── */
html.dark .token-reference-shell .semi-checkbox-inner-display {
border-color: rgba(148, 163, 184, 0.28);
background: transparent;
}
html.dark
.token-reference-shell
.semi-checkbox-checked
.semi-checkbox-inner-display {
border-color: var(--ev-primary);
background: var(--ev-primary);
}
@media (max-width: 1200px) {
.token-reference-hero-strip {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.token-reference-hero-strip,
.token-reference-toolbar,
.token-reference-filter-panel,
.token-reference-table-shell {
border-radius: 24px;
}
.token-reference-hero-strip,
.token-reference-toolbar,
.token-reference-filter-panel {
padding: 22px;
}
.token-reference-hero-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.token-reference-hero-stats {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════════════════
Personal Settings — Avatar upload overlay
═══════════════════════════════════════════════════════════ */
.showcase-personal-avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.showcase-personal-avatar-clickable {
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.showcase-personal-avatar-clickable:hover {
transform: translateY(-1px);
}
.showcase-personal-avatar-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.showcase-personal-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.showcase-personal-avatar-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
border-radius: 50%;
opacity: 0;
transition: opacity 0.2s ease;
}
.showcase-personal-avatar-clickable:hover .showcase-personal-avatar-overlay {
opacity: 1;
}
/* ==================== BotChat UX: Typing Indicator ==================== */
.botchat-typing-indicator {
display: flex;
align-items: center;
gap: 4px;
padding: 10px 16px;
max-width: 80px;
border-radius: 4px 16px 16px 16px;
background-color: var(--semi-color-fill-0);
}
.botchat-typing-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--semi-color-text-2);
animation: botchat-typing-bounce 1.2s ease-in-out infinite;
}
.botchat-typing-dot:nth-child(2) {
animation-delay: 0.15s;
}
.botchat-typing-dot:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes botchat-typing-bounce {
0%,
60%,
100% {
transform: translateY(0);
opacity: 0.4;
}
30% {
transform: translateY(-4px);
opacity: 1;
}
}
/* ==================== BotChat UX: Connection Banner ==================== */
.botchat-conn-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 16px;
font-size: 12px;
font-weight: 500;
flex-shrink: 0;
transition:
background-color 0.3s ease,
opacity 0.3s ease,
max-height 0.3s ease;
overflow: hidden;
}
.botchat-conn-banner--disconnected {
background-color: var(--semi-color-danger-light-default, #fff2f0);
color: var(--semi-color-danger, #f5222d);
border-bottom: 1px solid var(--semi-color-danger-light-active, #ffccc7);
max-height: 40px;
}
.botchat-conn-banner--reconnecting {
background-color: var(--semi-color-warning-light-default, #fffbe6);
color: var(--semi-color-warning, #faad14);
border-bottom: 1px solid var(--semi-color-warning-light-active, #ffe58f);
max-height: 40px;
}
.botchat-conn-banner--connected {
max-height: 0;
padding: 0;
opacity: 0;
}
/* F1.4-B.4: WS reconnect → session.resumed in-flight gap.
Blue accent so users can distinguish "正在重连…" (yellow, no socket)
from "已连上但还没拉到消息" (blue, socket open + replay running). */
.botchat-conn-banner--replay {
background-color: var(--semi-color-info-light-default, #e6f4ff);
color: var(--semi-color-info, #1677ff);
border-bottom: 1px solid var(--semi-color-info-light-active, #91caff);
max-height: 40px;
}
.botchat-conn-banner__dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.botchat-conn-banner__dot--red {
background-color: var(--semi-color-danger, #f5222d);
}
.botchat-conn-banner__dot--yellow {
background-color: var(--semi-color-warning, #faad14);
animation: botchat-typing-bounce 1.2s ease-in-out infinite;
}
/* F1.4-B.4: blue dot pulses gently to signal "replay in progress" */
.botchat-conn-banner__dot--blue {
background-color: var(--semi-color-info, #1677ff);
animation: botchat-typing-bounce 1.2s ease-in-out infinite;
}
/* F1.4-B.6: artifact ShellFrame + history skeleton.
Mirrors the timeline + content layout of the real iframe so the user
reads "panel is loading" without a perceived blank moment. */
.botchat-artifact-skeleton {
display: flex;
gap: 12px;
padding: 16px;
height: 100%;
box-sizing: border-box;
}
.botchat-artifact-skeleton__rail {
width: 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding-top: 6px;
flex-shrink: 0;
}
.botchat-artifact-skeleton__rail-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: linear-gradient(
90deg,
var(--semi-color-fill-0) 25%,
var(--semi-color-fill-1) 37%,
var(--semi-color-fill-0) 63%
);
background-size: 400px 100%;
animation: botchat-skeleton-shimmer 1.4s ease infinite;
}
.botchat-artifact-skeleton__main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.botchat-artifact-skeleton__title {
height: 18px;
width: 40%;
border-radius: 6px;
background: linear-gradient(
90deg,
var(--semi-color-fill-0) 25%,
var(--semi-color-fill-1) 37%,
var(--semi-color-fill-0) 63%
);
background-size: 400px 100%;
animation: botchat-skeleton-shimmer 1.4s ease infinite;
margin-bottom: 6px;
}
.botchat-artifact-skeleton__row {
height: 12px;
width: 90%;
border-radius: 4px;
background: linear-gradient(
90deg,
var(--semi-color-fill-0) 25%,
var(--semi-color-fill-1) 37%,
var(--semi-color-fill-0) 63%
);
background-size: 400px 100%;
animation: botchat-skeleton-shimmer 1.4s ease infinite;
}
.botchat-artifact-skeleton__block {
flex: 1;
min-height: 120px;
border-radius: 10px;
background: linear-gradient(
90deg,
var(--semi-color-fill-0) 25%,
var(--semi-color-fill-1) 37%,
var(--semi-color-fill-0) 63%
);
background-size: 400px 100%;
animation: botchat-skeleton-shimmer 1.4s ease infinite;
margin: 6px 0;
}
.botchat-artifact-history-skeleton {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
padding: 24px 20px;
}
.botchat-artifact-history-skeleton__title {
height: 16px;
width: 35%;
border-radius: 6px;
background: linear-gradient(
90deg,
var(--semi-color-fill-0) 25%,
var(--semi-color-fill-1) 37%,
var(--semi-color-fill-0) 63%
);
background-size: 400px 100%;
animation: botchat-skeleton-shimmer 1.4s ease infinite;
margin-bottom: 8px;
}
.botchat-artifact-history-skeleton__row {
height: 56px;
border-radius: 10px;
background: linear-gradient(
90deg,
var(--semi-color-fill-0) 25%,
var(--semi-color-fill-1) 37%,
var(--semi-color-fill-0) 63%
);
background-size: 400px 100%;
animation: botchat-skeleton-shimmer 1.4s ease infinite;
border: 1px solid var(--semi-color-border);
}
/* F1.4-B.5: tool tag dot-pulse animation when status='executing'.
Adds a tiny pulsing dot after the tag label so users can tell at a glance
that the tool is actively running vs. statically reporting "执行中". */
@keyframes botchat-tool-tag-pulse {
0%,
100% {
opacity: 0.3;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
.botchat-tool-tag--executing::after {
content: '';
display: inline-block;
width: 4px;
height: 4px;
margin-left: 6px;
vertical-align: middle;
border-radius: 50%;
background: currentColor;
animation: botchat-tool-tag-pulse 1s ease-in-out infinite;
}
/* ==================== BotChat UX: Skeleton Layout ==================== */
/* Shimmer animation for skeleton placeholders */
@keyframes botchat-skeleton-shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
/* Apply shimmer to Semi's built-in Skeleton shape elements */
.botchat-skeleton-sidebar .semi-skeleton-title,
.botchat-skeleton-sidebar .semi-skeleton-paragraph-graph-item,
.botchat-skeleton-sidebar .semi-skeleton-avatar,
.botchat-skeleton-chat .semi-skeleton-title,
.botchat-skeleton-chat .semi-skeleton-paragraph-graph-item,
.botchat-skeleton-chat .semi-skeleton-avatar {
background: linear-gradient(
90deg,
var(--semi-color-fill-0) 25%,
var(--semi-color-fill-1) 37%,
var(--semi-color-fill-0) 63%
);
background-size: 400px 100%;
animation: botchat-skeleton-shimmer 1.4s ease infinite;
}
.botchat-skeleton-sidebar {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px 16px;
}
.botchat-skeleton-sidebar__item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
}
.botchat-skeleton-chat {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
flex: 1;
}
.botchat-skeleton-chat__msg {
display: flex;
gap: 8px;
}
.botchat-skeleton-chat__msg--right {
justify-content: flex-end;
}
/* F1.4-B.2: Tool-card placeholder inside session-loading skeleton.
Mimics a ToolCallCard's rounded surface so the eye reads the layout as
"long session with at least one tool" instead of just paragraphs. */
.botchat-skeleton-chat__toolcard {
height: 64px;
border-radius: 12px;
background: linear-gradient(
90deg,
var(--semi-color-fill-0) 25%,
var(--semi-color-fill-1) 37%,
var(--semi-color-fill-0) 63%
);
background-size: 400px 100%;
animation: botchat-skeleton-shimmer 1.4s ease infinite;
border: 1px solid var(--semi-color-border);
}
/* ==================== BotChat UX: Quick chips hover ==================== */
/* (Defined in inline styles but :hover needs CSS) */
.botchat-chip:hover {
background-color: var(--semi-color-primary-light-default) !important;
border-color: var(--semi-color-primary-light-active) !important;
}
/* ==================== Accessibility: prefers-reduced-motion ==================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.botchat-typing-dot,
.botchat-conn-banner__dot--yellow,
.botchat-conn-banner__dot--blue,
.botchat-tool-tag--executing::after,
.streaming-cursor::after {
animation: none !important;
opacity: 1 !important;
}
.botchat-conn-banner {
transition: none !important;
}
/* Disable shimmer on skeleton in reduced-motion mode */
.botchat-skeleton-sidebar .semi-skeleton-title,
.botchat-skeleton-sidebar .semi-skeleton-paragraph-graph-item,
.botchat-skeleton-sidebar .semi-skeleton-avatar,
.botchat-skeleton-chat .semi-skeleton-title,
.botchat-skeleton-chat .semi-skeleton-paragraph-graph-item,
.botchat-skeleton-chat .semi-skeleton-avatar,
.botchat-skeleton-chat__toolcard,
.botchat-artifact-skeleton__rail-dot,
.botchat-artifact-skeleton__title,
.botchat-artifact-skeleton__row,
.botchat-artifact-skeleton__block,
.botchat-artifact-history-skeleton__title,
.botchat-artifact-history-skeleton__row {
animation: none !important;
background: var(--semi-color-fill-1) !important;
}
}
/* ==================== BotChat UX: Page mount fade-in ==================== */
/* 7.1: Subtle fade-in when the chat page mounts, preventing a harsh instant paint */
@keyframes botchat-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.botchat-page-enter {
animation: botchat-fade-in 0.2s ease-out;
}
/* 7.2: Session switch skeleton pulse — visual feedback during session.resume round-trip */
.botchat-session-loading {
animation: botchat-fade-in 0.15s ease-out;
}
/* VList stabilization overlay — covers blank space during session restore
while VList converges on correct item heights (typically <300ms).
Shows a centered spinner so the user sees a loading state, not empty area. */
.botchat-vlist-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--semi-color-bg-0);
z-index: 5;
}
/* ==================== EvoChic BotChat Design System ==================== */
/* Brand: primary #6f5cc6, gradient #a0e9ff→#c2b5ff→#ffb8e0 */
/* Input card — unified container with focus-within glow (ChatGPT style) */
.botchat-input-card {
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.botchat-input-card:focus-within {
border-color: var(--ev-primary, var(--semi-color-primary)) !important;
box-shadow:
0 0 0 3px rgba(111, 92, 198, 0.1),
0 2px 12px rgba(111, 92, 198, 0.06) !important;
}
/* Attach button hover inside the card */
.botchat-input-card .semi-button-borderless:hover {
color: var(--ev-primary, var(--semi-color-primary)) !important;
background: var(--semi-color-primary-light-default, #f4f1ff) !important;
}
/* Toolbar — rounded buttons with brand hover */
.botchat-page-enter [role='toolbar'] .semi-button-borderless {
border-radius: 8px !important;
transition: all 0.15s ease;
}
.botchat-page-enter [role='toolbar'] .semi-button-borderless:hover {
background: var(--semi-color-primary-light-default, #f4f1ff) !important;
color: var(--ev-primary, var(--semi-color-primary)) !important;
}
/* Quick action chips — brand accent on hover */
.botchat-chip {
transition: all 0.2s ease !important;
border-color: var(--semi-color-border) !important;
}
.botchat-chip:hover {
border-color: var(--ev-primary, var(--semi-color-primary)) !important;
background: var(--semi-color-primary-light-default, #f4f1ff) !important;
color: var(--ev-primary, var(--semi-color-primary)) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(111, 92, 198, 0.12);
}
/* Status bar — connected tag uses brand green, chips use subtle brand tint */
.botchat-page-enter .semi-tag-green-light {
background: rgba(82, 196, 26, 0.1);
border-color: rgba(82, 196, 26, 0.3);
}
/* Bot message card — subtle left border accent */
.botchat-page-enter [role='listbox'] > div > div {
border-radius: 12px;
}
/* User message bubble — brand gradient background */
.botchat-page-enter [style*='border-radius'][style*='background'] {
transition: transform 0.1s ease;
}
/* Send button — brand solid */
.botchat-page-enter .semi-button-primary {
background: var(--ev-primary, var(--semi-color-primary)) !important;
border-color: var(--ev-primary, var(--semi-color-primary)) !important;
}
.botchat-page-enter .semi-button-primary:hover {
background: var(--ev-primary-dim, var(--semi-color-primary-hover)) !important;
}
/* Stop button — danger accent */
.botchat-page-enter .semi-button-danger {
border-radius: 10px !important;
}
@media (prefers-reduced-motion: reduce) {
.botchat-page-enter,
.botchat-session-loading {
animation: none !important;
}
}
/* ==================== Agent10: BotChat Mobile & Responsive ==================== */
/* 10.2: Safe area inset for iPhone notch / bottom bar.
Applied to the chat input area so it does not sit behind the home indicator. */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.botchat-page-enter {
padding-bottom: env(safe-area-inset-bottom);
}
}
/* 10.1/10.5: Mobile-specific chat layout (<= 640px) */
@media (max-width: 640px) {
/* Reduce quick-chip padding on small screens so they fit 2-up */
.botchat-chip {
padding: 8px 10px !important;
min-width: 70px !important;
font-size: 12px !important;
}
/* Code blocks in markdown must scroll horizontally, not wrap */
.markdown-body pre {
max-width: calc(100vw - 80px);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ToolCallCard header tags: allow wrapping on small screens */
.botchat-page-enter [class*='toolCallCard'] .semi-tag {
font-size: 10px;
}
/* Connection banner: slightly smaller text */
.botchat-conn-banner {
font-size: 12px !important;
padding: 4px 10px !important;
}
/* Scroll-to-bottom FAB — mobile only. Positioned above the input area */
.botchat-scroll-bottom {
bottom: 140px !important;
right: 12px !important;
width: 40px !important;
height: 40px !important;
}
}
/* 10.1: Tablet adjustments (641-768px) */
@media (min-width: 641px) and (max-width: 768px) {
.botchat-chip {
padding: 8px 12px !important;
min-width: 75px !important;
}
}
/* 10.3: Minimum touch target sizes for interactive elements inside chat */
@media (pointer: coarse) {
/* Tool call expand/collapse toggle */
.botchat-page-enter [style*='cursor: pointer'] {
min-height: 44px;
min-width: 44px;
}
/* Session items in SideSheet */
.semi-sidesheet-body [style*='cursor: pointer'] {
min-height: 48px;
}
}
/* 10.5: Performance — GPU layer promotion for VList scroll container.
overscroll-behavior prevents pull-to-refresh from interfering with
chat scroll on mobile browsers. */
.botchat-page-enter .virtua-root {
will-change: transform;
contain: layout style;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* 10.6: Scroll-to-bottom FAB — EvoChic glassmorphism pill (2026-04-29 redesign)
Inspired by Vercel/Linear/Raycast FAB patterns: subtle glass panel,
gradient border on hover, smooth slide-up entrance. The `right` is
set inline by React when ArtifactPanel is open (panelWidth + 24)
so the FAB stays inside the chat column. */
.botchat-scroll-bottom {
position: fixed;
bottom: 168px;
right: 24px;
min-width: 38px;
height: 38px;
padding: 0 14px;
border-radius: 19px;
/* Layered translucent surface so it floats over both chat + artifact areas */
background: linear-gradient(
135deg,
rgba(var(--semi-color-bg-1-rgb, 28, 28, 32), 0.78),
rgba(var(--semi-color-bg-2-rgb, 36, 36, 42), 0.72)
);
border: 1px solid rgba(var(--ev-primary-rgb, 111, 92, 198), 0.18);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.18),
0 8px 28px rgba(var(--ev-primary-rgb, 111, 92, 198), 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
cursor: pointer;
z-index: 15;
transition:
transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.18s ease,
border-color 0.18s ease,
background 0.18s ease;
color: var(--ev-primary, var(--semi-color-primary));
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
animation: botchat-fab-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes botchat-fab-slide-up {
from {
opacity: 0;
transform: translateY(12px) scale(0.94);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.botchat-scroll-bottom:hover {
background: linear-gradient(
135deg,
rgba(var(--ev-primary-rgb, 111, 92, 198), 0.12),
rgba(var(--ev-primary-rgb, 111, 92, 198), 0.04)
);
border-color: rgba(var(--ev-primary-rgb, 111, 92, 198), 0.45);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.22),
0 14px 36px rgba(var(--ev-primary-rgb, 111, 92, 198), 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transform: translateY(-2px);
}
.botchat-scroll-bottom:active {
transform: translateY(-1px) scale(0.96);
transition-duration: 0.08s;
}
.botchat-scroll-bottom:focus-visible {
outline: none;
box-shadow:
0 0 0 2px var(--semi-color-bg-0),
0 0 0 4px var(--ev-primary, var(--semi-color-primary));
}
/* 2026-04-29: send button in input footer — pill-shaped EvoChic gradient */
.botchat-send-btn {
border-radius: 12px !important;
height: 36px !important;
min-width: 36px !important;
padding: 0 12px !important;
pointer-events: auto !important;
background: linear-gradient(
135deg,
var(--ev-primary, var(--semi-color-primary)),
color-mix(
in srgb,
var(--ev-primary, var(--semi-color-primary)) 78%,
#5a3df0
)
) !important;
border: none !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 4px 14px rgba(var(--ev-primary-rgb, 111, 92, 198), 0.32) !important;
transition:
transform 0.12s ease,
box-shadow 0.18s ease,
opacity 0.18s ease !important;
}
.botchat-send-btn:hover:not([disabled]) {
transform: translateY(-1px);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.12),
0 8px 22px rgba(var(--ev-primary-rgb, 111, 92, 198), 0.42) !important;
}
.botchat-send-btn:active:not([disabled]) {
transform: translateY(0) scale(0.97);
transition-duration: 0.06s;
}
.botchat-send-btn[disabled],
.botchat-send-btn.semi-button-disabled {
background: var(--semi-color-fill-1) !important;
box-shadow: none !important;
opacity: 0.55 !important;
}
/* 2026-04-29: attach button — flat ghost, hover hint */
.botchat-attach-btn {
border-radius: 10px !important;
height: 32px !important;
width: 32px !important;
background: transparent !important;
border: none !important;
color: var(--semi-color-text-2) !important;
transition:
background 0.15s ease,
color 0.15s ease !important;
pointer-events: auto !important;
}
.botchat-attach-btn:hover:not([disabled]) {
background: var(--semi-color-fill-1) !important;
color: var(--ev-primary, var(--semi-color-primary)) !important;
}
/* 2026-04-29: input card polish — gradient ring on focus + soft shadow */
.botchat-input-card {
border: 1.5px solid var(--semi-color-border) !important;
border-radius: 22px !important;
background: var(--semi-color-bg-0) !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 0 0 0 rgba(var(--ev-primary-rgb, 111, 92, 198), 0);
transition:
border-color 0.22s ease,
box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.botchat-input-card:focus-within,
.botchat-input-card.botchat-input-card--focused {
border-color: rgba(var(--ev-primary-rgb, 111, 92, 198), 0.55) !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 0 0 4px rgba(var(--ev-primary-rgb, 111, 92, 198), 0.1) !important;
}
/* Mobile responsive overrides — keep targets ≥44px and shrink the pill */
@media (max-width: 640px) {
.botchat-scroll-bottom {
bottom: 148px !important;
right: 12px !important;
min-width: 44px !important;
height: 44px !important;
padding: 0 12px !important;
font-size: 11px !important;
}
.botchat-send-btn {
height: 40px !important;
min-width: 40px !important;
}
.botchat-attach-btn {
height: 36px !important;
width: 36px !important;
}
.botchat-input-card {
border-radius: 18px !important;
}
}
/* ==================== Agent15: Cross-Browser Compatibility ==================== */
/* 15.4a: iOS Safari 100vh fix — use dvh with vh fallback for full-height containers.
On iOS Safari, 100vh includes the address bar area which causes content overflow.
Using dvh (dynamic viewport height) resolves this on Safari 15.4+.
The vh fallback covers older browsers that don't support dvh. */
@supports (height: 100dvh) {
.botchat-page-enter {
height: 100dvh;
height: calc(100dvh - var(--app-header-height, 0px));
}
}
/* 15.4b: iOS Safari momentum scroll on all scrollable containers */
.semi-layout-content,
.semi-sider,
.semi-chat-chatBox-wrap,
.semi-sidesheet-body {
-webkit-overflow-scrolling: touch;
}
/* 15.2a: Ensure touch-action is set for interactive areas to prevent
300ms tap delay on mobile browsers and improve scrolling perf */
.botchat-page-enter button,
.botchat-page-enter [role='button'],
.botchat-chip {
touch-action: manipulation;
}
/* 15.5: Emoji rendering — ensure consistent emoji display across platforms */
.markdown-body {
font-feature-settings: normal;
}
/* 15.2b: Firefox-specific scrollbar styling (scrollbar-color/scrollbar-width)
as a complement to ::-webkit-scrollbar for Chrome/Safari.
Firefox ignores ::-webkit-scrollbar, Chrome ignores scrollbar-color. */
.semi-table-body,
.semi-sidesheet-body,
.image-list-scroll,
.table-scroll-card .semi-card-body {
scrollbar-width: thin;
scrollbar-color: rgba(70, 71, 211, 0.15) transparent;
}
html.dark .semi-table-body,
html.dark .semi-sidesheet-body,
html.dark .image-list-scroll,
html.dark .table-scroll-card .semi-card-body {
scrollbar-color: rgba(70, 71, 211, 0.25) transparent;
}
/* ─────────────────────────────────────────────────────────────────────
* F1.9 — Mobile (≤768) overrides for BotChat surfaces.
* Goals (per backlog §F1.9 + audit BUG-A17-028/030/033/034):
* - 320/375 (compact phones): chat main area gets 100vw, Artifact &
* Sessions panels are full-screen overlays the user must summon.
* - 641-768 (tablet portrait): single-column layout, Artifact panel
* becomes a bottom sheet (≤60vh) so the chat above stays visible.
* - ChatStatusBar collapses to a single horizontally-scrolling row
* with scroll-snap to keep tappable chips on a 44px line, instead
* of wrap-spilling 4 lines tall.
* - ChatHeaderBar bot title gets ellipsis + tooltip (handled by JS).
* ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Status bar single-line h-scroll with scroll-snap. The desktop wrap
behavior (multi-line chip pile) is replaced with a swipeable strip
so the input always stays at a stable y-offset, and chips never
push the chat list down. */
.botchat-statusbar {
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* Subtle right-fade so users see the strip is scrollable. */
-webkit-mask-image: linear-gradient(
to right,
black 0,
black calc(100% - 18px),
transparent 100%
);
mask-image: linear-gradient(
to right,
black 0,
black calc(100% - 18px),
transparent 100%
);
}
.botchat-statusbar::-webkit-scrollbar {
display: none;
}
.botchat-statusbar__left,
.botchat-statusbar__right {
flex-wrap: nowrap !important;
flex-shrink: 0;
white-space: nowrap;
}
.botchat-statusbar__chip {
scroll-snap-align: start;
flex-shrink: 0;
white-space: nowrap;
}
}
/* Compact phones (≤640): tighter padding for the status bar so the
chips share the full 320/375 viewport without horizontal padding
eating chip space. */
@media (max-width: 640px) {
.botchat-statusbar {
padding-left: 10px !important;
padding-right: 10px !important;
gap: 4px !important;
}
}
.last\:mb-0:last-child{
margin-bottom: 0px;
}
.last\:border-b-0:last-child{
border-bottom-width: 0px;
}
.hover\:-translate-y-1:hover{
--tw-translate-y: -0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:\!bg-\[rgba\(70\2c 71\2c 211\2c 0\.08\)\]:hover{
background-color: rgba(70,71,211,0.08) !important;
}
.hover\:\!bg-semi-color-fill-1:hover{
background-color: var(--semi-color-fill-1) !important;
}
.hover\:bg-\[rgba\(70\2c 71\2c 211\2c 0\.08\)\]:hover{
background-color: rgba(70,71,211,0.08);
}
.hover\:bg-ev-surface-md:hover{
background-color: var(--ev-surface-container);
}
.hover\:bg-opacity-80:hover{
--tw-bg-opacity: 0.8;
}
.hover\:bg-gradient-to-r:hover{
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.hover\:text-ev-primary:hover{
color: var(--ev-primary);
}
.hover\:text-semi-color-primary:hover{
color: var(--semi-color-primary);
}
.hover\:underline:hover{
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.hover\:opacity-80:hover{
opacity: 0.8;
}
.hover\:shadow-\[0_0_15px_rgba\(129\2c 140\2c 248\2c 0\.1\)\]:hover{
--tw-shadow: 0 0 15px rgba(129,140,248,0.1);
--tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_18px_34px_rgba\(94\2c 52\2c 33\2c 0\.08\)\]:hover{
--tw-shadow: 0 18px 34px rgba(94,52,33,0.08);
--tw-shadow-colored: 0 18px 34px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-lg:hover{
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover{
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:\!bg-semi-color-fill-1:focus{
background-color: var(--semi-color-fill-1) !important;
}
.group:last-child .group-last\:border-0{
border-width: 0px;
}
@media (min-width: 640px){
.sm\:mb-4{
margin-bottom: 1rem;
}
.sm\:block{
display: block;
}
.sm\:inline{
display: inline;
}
.sm\:inline-flex{
display: inline-flex;
}
.sm\:h-5{
height: 1.25rem;
}
.sm\:h-6{
height: 1.5rem;
}
.sm\:h-8{
height: 2rem;
}
.sm\:w-48{
width: 12rem;
}
.sm\:w-5{
width: 1.25rem;
}
.sm\:w-6{
width: 1.5rem;
}
.sm\:w-64{
width: 16rem;
}
.sm\:w-8{
width: 2rem;
}
.sm\:w-auto{
width: auto;
}
.sm\:grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sm\:flex-row{
flex-direction: row;
}
.sm\:items-center{
align-items: center;
}
.sm\:justify-between{
justify-content: space-between;
}
.sm\:gap-2{
gap: 0.5rem;
}
.sm\:gap-3{
gap: 0.75rem;
}
.sm\:gap-4{
gap: 1rem;
}
.sm\:rounded-2xl{
border-radius: 1rem;
}
.sm\:rounded-xl{
border-radius: 0.75rem;
}
.sm\:p-3{
padding: 0.75rem;
}
.sm\:p-4{
padding: 1rem;
}
.sm\:p-5{
padding: 1.25rem;
}
.sm\:px-6{
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.sm\:pt-4{
padding-top: 1rem;
}
.sm\:text-3xl{
font-size: 1.875rem;
line-height: 2.25rem;
}
.sm\:text-base{
font-size: 1rem;
line-height: 1.5rem;
}
.sm\:text-sm{
font-size: 0.875rem;
line-height: 1.25rem;
}
.sm\:text-xl{
font-size: 1.25rem;
line-height: 1.75rem;
}
}
@media (min-width: 768px){
.md\:order-1{
order: 1;
}
.md\:order-2{
order: 2;
}
.md\:col-span-2{
grid-column: span 2 / span 2;
}
.md\:col-span-3{
grid-column: span 3 / span 3;
}
.md\:col-span-4{
grid-column: span 4 / span 4;
}
.md\:row-span-2{
grid-row: span 2 / span 2;
}
.md\:row-span-3{
grid-row: span 3 / span 3;
}
.md\:mx-4{
margin-left: 1rem;
margin-right: 1rem;
}
.md\:mb-0{
margin-bottom: 0px;
}
.md\:block{
display: block;
}
.md\:inline{
display: inline;
}
.md\:w-32{
width: 8rem;
}
.md\:w-48{
width: 12rem;
}
.md\:w-56{
width: 14rem;
}
.md\:w-64{
width: 16rem;
}
.md\:w-auto{
width: auto;
}
.md\:w-full{
width: 100%;
}
.md\:flex-initial{
flex: 0 1 auto;
}
.md\:grid-cols-1{
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.md\:grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:grid-cols-\[minmax\(0\2c 1\.2fr\)_minmax\(320px\2c 0\.8fr\)\]{
grid-template-columns: minmax(0,1.2fr) minmax(320px,0.8fr);
}
.md\:flex-row{
flex-direction: row;
}
.md\:flex-nowrap{
flex-wrap: nowrap;
}
.md\:items-start{
align-items: flex-start;
}
.md\:items-end{
align-items: flex-end;
}
.md\:items-center{
align-items: center;
}
.md\:justify-between{
justify-content: space-between;
}
.md\:gap-3{
gap: 0.75rem;
}
.md\:gap-6{
gap: 1.5rem;
}
.md\:p-4{
padding: 1rem;
}
.md\:p-7{
padding: 1.75rem;
}
.md\:px-10{
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.md\:px-6{
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.md\:px-7{
padding-left: 1.75rem;
padding-right: 1.75rem;
}
.md\:px-8{
padding-left: 2rem;
padding-right: 2rem;
}
.md\:py-12{
padding-top: 3rem;
padding-bottom: 3rem;
}
.md\:py-7{
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
.md\:py-8{
padding-top: 2rem;
padding-bottom: 2rem;
}
.md\:pt-12{
padding-top: 3rem;
}
.md\:text-4xl{
font-size: 2.25rem;
line-height: 2.5rem;
}
.md\:text-\[15px\]{
font-size: 15px;
}
.md\:text-\[16px\]{
font-size: 16px;
}
.md\:text-\[17px\]{
font-size: 17px;
}
}
@media (min-width: 1024px){
.lg\:col-span-1{
grid-column: span 1 / span 1;
}
.lg\:col-span-2{
grid-column: span 2 / span 2;
}
.lg\:hidden{
display: none;
}
.lg\:min-h-0{
min-height: 0px;
}
.lg\:w-auto{
width: auto;
}
.lg\:grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-4{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lg\:grid-cols-6{
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.lg\:flex-row{
flex-direction: row;
}
.lg\:items-start{
align-items: flex-start;
}
.lg\:items-center{
align-items: center;
}
.lg\:justify-between{
justify-content: space-between;
}
.lg\:gap-2{
gap: 0.5rem;
}
.lg\:px-8{
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1280px){
.xl\:grid-cols-2{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.xl\:grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1536px){
.\32xl\:grid-cols-3{
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (prefers-color-scheme: dark){
.dark\:\!border-\[rgba\(189\2c 194\2c 255\2c 0\.10\)\]{
border-color: rgba(189,194,255,0.10) !important;
}
.dark\:\!bg-semi-color-fill-1{
background-color: var(--semi-color-fill-1) !important;
}
.dark\:bg-semi-color-fill-1{
background-color: var(--semi-color-fill-1);
}
.dark\:bg-\[linear-gradient\(180deg\2c rgba\(41\2c 34\2c 29\2c 0\.96\)_0\%\2c rgba\(31\2c 26\2c 23\2c 0\.98\)_100\%\)\]{
background-image: linear-gradient(180deg,rgba(41,34,29,0.96) 0%,rgba(31,26,23,0.98) 100%);
}
.dark\:hover\:\!bg-semi-color-fill-2:hover{
background-color: var(--semi-color-fill-2) !important;
}
}
.\[\&\>p\]\:m-0>p{
margin: 0px;
}
:root {
--ev-surface: #f8f9ff;
--ev-surface-container-lowest: #ffffff;
--ev-surface-container-low: #f3f5ff;
--ev-surface-container: #edf0fb;
--ev-surface-container-high: #e7ebf7;
--ev-surface-container-highest: #dfe4f0;
--ev-surface-bright: #fcfcff;
--ev-surface-dim: #ebeff8;
--ev-surface-variant: #e7ebf7;
--ev-primary: #6f5cc6;
--ev-primary-container: #c2b5ff;
--ev-primary-dim: #5c48b7;
--ev-on-primary: #ffffff;
--ev-on-primary-container: #2f225d;
--ev-secondary: #d56ca6;
--ev-secondary-container: #ffb8e0;
--ev-tertiary: #1f9cc0;
--ev-tertiary-container: #a0e9ff;
--ev-on-surface: #293042;
--ev-on-surface-variant: #646c84;
--ev-outline: #8992ab;
--ev-outline-variant: #c9d0e5;
--ev-gradient: linear-gradient(135deg, #a0e9ff 0%, #c2b5ff 54%, #ffb8e0 100%);
}
body {
background:
radial-gradient(circle at 14% 12%, rgba(194, 181, 255, 0.22), transparent 26%),
radial-gradient(circle at 86% 14%, rgba(255, 184, 224, 0.2), transparent 24%),
radial-gradient(circle at 16% 88%, rgba(160, 233, 255, 0.18), transparent 22%),
linear-gradient(180deg, #fcfcff 0%, #f8f9ff 52%, #f6f8ff 100%);
--semi-color-primary: #6f5cc6;
--semi-color-primary-hover: #5c48b7;
--semi-color-primary-active: #4f3ba8;
--semi-color-primary-disabled: #c2b5ff;
--semi-color-primary-light-default: #f4f1ff;
--semi-color-primary-light-hover: #ede8ff;
--semi-color-primary-light-active: #e2dbff;
--semi-color-bg-0: #f8f9ff;
--semi-color-bg-1: #f3f5ff;
--semi-color-bg-2: #edf0fb;
--semi-color-fill-0: rgba(111, 92, 198, 0.05);
--semi-color-fill-1: rgba(111, 92, 198, 0.08);
--semi-color-border: rgba(111, 92, 198, 0.14);
--semi-color-text-0: #293042;
--semi-color-text-1: rgba(41, 48, 66, 0.82);
--semi-color-text-2: rgba(41, 48, 66, 0.6);
--ev-control-surface: rgba(255, 255, 255, 0.9);
--ev-control-surface-hover: rgba(255, 255, 255, 0.98);
--ev-control-surface-active: rgba(244, 242, 255, 0.98);
--ev-control-border: rgba(137, 146, 171, 0.18);
--ev-control-border-strong: rgba(111, 92, 198, 0.28);
--ev-control-shadow: 0 14px 34px rgba(66, 72, 104, 0.08);
--ev-control-shadow-focus: 0 0 0 4px rgba(194, 181, 255, 0.22);
--ev-card-surface: rgba(255, 255, 255, 0.88);
--ev-card-border: rgba(137, 146, 171, 0.14);
--ev-card-shadow: 0 22px 48px rgba(66, 72, 104, 0.08);
--ev-card-shadow-hover: 0 30px 58px rgba(66, 72, 104, 0.12);
--ev-overlay-surface: rgba(255, 255, 255, 0.94);
--ev-overlay-mask: rgba(41, 48, 66, 0.46);
--ev-tab-surface: rgba(255, 255, 255, 0.8);
--ev-tab-surface-active: rgba(194, 181, 255, 0.14);
--ev-table-head-bg: rgba(194, 181, 255, 0.12);
--ev-table-row-hover: rgba(242, 239, 255, 0.82);
--ev-empty-surface: rgba(255, 255, 255, 0.76);
--ev-skeleton-base: rgba(194, 181, 255, 0.16);
}
html.dark body {
background:
radial-gradient(circle at 16% 10%, rgba(194, 181, 255, 0.18), transparent 24%),
radial-gradient(circle at 84% 14%, rgba(255, 184, 224, 0.14), transparent 22%),
radial-gradient(circle at 18% 82%, rgba(160, 233, 255, 0.14), transparent 20%),
linear-gradient(180deg, #0f172a 0%, #131b2e 100%);
--semi-color-bg-0: #0f172a;
--semi-color-bg-1: #131b2e;
--semi-color-bg-2: #1a2236;
--semi-color-fill-0: rgba(255, 255, 255, 0.05);
--semi-color-fill-1: rgba(255, 255, 255, 0.08);
--semi-color-border: rgba(189, 194, 255, 0.1);
--semi-color-text-0: #dae2fd;
--semi-color-text-1: rgba(218, 226, 253, 0.82);
--semi-color-text-2: rgba(218, 226, 253, 0.62);
--ev-surface: #0f172a;
--ev-surface-container-lowest: #060e20;
--ev-surface-container-low: #131b2e;
--ev-surface-container: #1a2236;
--ev-surface-container-high: #222a3d;
--ev-surface-container-highest: #2d3449;
--ev-surface-bright: #31394d;
--ev-surface-dim: #0f172a;
--ev-surface-variant: #2d3449;
--ev-primary: #bdc2ff;
--ev-primary-container: #818cf8;
--ev-primary-dim: #a0a6f0;
--ev-on-primary: #131e8c;
--ev-on-primary-container: #101b8a;
--ev-secondary: #ffc7e8;
--ev-secondary-container: #b55b8f;
--ev-tertiary: #b7f2ff;
--ev-tertiary-container: #2c98b8;
--ev-on-surface: #dae2fd;
--ev-on-surface-variant: #c6c5d5;
--ev-outline: #908f9e;
--ev-outline-variant: #454653;
--ev-gradient: linear-gradient(135deg, #82dfff 0%, #bcaeff 54%, #ffb8e0 100%);
--ev-control-surface: rgba(15, 23, 42, 0.84);
--ev-control-surface-hover: rgba(19, 27, 46, 0.96);
--ev-control-surface-active: rgba(26, 34, 54, 0.98);
--ev-control-border: rgba(129, 140, 248, 0.14);
--ev-control-border-strong: rgba(129, 140, 248, 0.26);
--ev-control-shadow: 0 18px 40px rgba(2, 6, 23, 0.26);
--ev-control-shadow-focus: 0 0 0 4px rgba(129, 140, 248, 0.14);
--ev-card-surface: rgba(15, 23, 42, 0.88);
--ev-card-border: rgba(129, 140, 248, 0.14);
--ev-card-shadow: 0 28px 60px rgba(2, 6, 23, 0.34);
--ev-card-shadow-hover: 0 34px 70px rgba(2, 6, 23, 0.42);
--ev-overlay-surface: rgba(15, 23, 42, 0.94);
--ev-overlay-mask: rgba(2, 6, 23, 0.62);
--ev-tab-surface-active: rgba(129, 140, 248, 0.12);
--ev-table-head-bg: rgba(129, 140, 248, 0.08);
--ev-table-row-hover: rgba(129, 140, 248, 0.08);
--ev-empty-surface: rgba(19, 27, 46, 0.84);
--ev-skeleton-base: rgba(129, 140, 248, 0.12);
}
.evochic-gradient-text {
background: var(--ev-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-future-page {
color: var(--ev-on-surface);
}
.home-future-title,
.home-future-section-title,
.home-future-feature-title {
color: var(--ev-on-surface);
}
.home-future-description,
.home-future-feature-description,
.home-future-section-eyebrow {
color: var(--ev-on-surface-variant);
}
.home-future-primary-action,
.future-footer-primary-action {
background: var(--ev-gradient);
color: var(--ev-on-primary);
box-shadow: 0 18px 38px rgba(111, 92, 198, 0.22);
}
/* visual-core removed — logo replaces gradient blob */
.home-future-feature-card {
border-color: var(--ev-card-border);
background: var(--ev-card-surface);
box-shadow: var(--ev-card-shadow);
}
.home-future-feature-card:hover {
border-color: var(--ev-control-border-strong);
box-shadow: var(--ev-card-shadow-hover);
}
.home-future-feature-icon {
background: rgba(194, 181, 255, 0.16);
color: var(--ev-primary);
}
.future-footer-cta {
background:
radial-gradient(circle at 100% 0%, rgba(255, 184, 224, 0.18), transparent 28%),
radial-gradient(circle at 12% 100%, rgba(160, 233, 255, 0.16), transparent 26%),
var(--ev-card-surface);
border-color: var(--ev-card-border);
box-shadow: var(--ev-card-shadow);
}
.future-footer-kicker {
background: rgba(194, 181, 255, 0.16);
color: var(--ev-primary);
}
.future-footer-cta-title,
.future-footer-column-title {
color: var(--ev-on-surface);
}
.future-footer-cta-description,
.future-footer-tagline,
.future-footer-link,
.future-footer-copy {
color: var(--ev-on-surface-variant);
}
.future-footer-secondary-action,
.future-footer-social-icon {
background: rgba(194, 181, 255, 0.12);
color: var(--ev-primary);
}
.future-footer-secondary-action:hover,
.future-footer-social-icon:hover,
.future-footer-link:hover {
color: var(--ev-primary-dim);
}
html.dark .home-future-title,
html.dark .home-future-section-title,
html.dark .home-future-feature-title,
html.dark .future-footer-cta-title,
html.dark .future-footer-column-title {
color: var(--ev-on-surface);
}
html.dark .home-future-description,
html.dark .home-future-feature-description,
html.dark .home-future-section-eyebrow,
html.dark .future-footer-cta-description,
html.dark .future-footer-tagline,
html.dark .future-footer-link,
html.dark .future-footer-copy {
color: var(--ev-on-surface-variant);
}
.auth-layout-screen {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 8% 10%, rgba(194, 181, 255, 0.18), transparent 24%),
radial-gradient(circle at 92% 12%, rgba(255, 146, 195, 0.14), transparent 22%),
radial-gradient(circle at 74% 88%, rgba(160, 233, 255, 0.14), transparent 20%),
linear-gradient(180deg, var(--ev-background) 0%, var(--ev-surface-container-lowest) 100%);
}
.auth-layout-screen::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 34%);
}
.auth-layout-screen > * {
position: relative;
z-index: 1;
}
.auth-shell {
width: min(1240px, 100%);
min-height: min(820px, calc(100vh - 48px));
gap: clamp(24px, 4vw, 40px);
grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
}
.auth-form-pane {
align-items: stretch;
padding: 0;
}
.auth-form-wrapper {
max-width: 540px;
}
.auth-shell .semi-card {
border-radius: 32px !important;
border: 1px solid rgba(148, 163, 184, 0.14) !important;
background: rgba(255, 255, 255, 0.82) !important;
box-shadow: 0 28px 64px rgba(15, 23, 42, 0.1) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.auth-shell .semi-card-body {
padding: 36px 32px !important;
}
.auth-shell .semi-form-field-label,
.auth-shell .semi-typography,
.auth-shell .semi-checkbox-addon {
color: var(--ev-on-surface);
}
.auth-shell .semi-form-field-label-text {
font-weight: 700;
color: var(--ev-on-surface);
}
.auth-shell .semi-input-wrapper,
.auth-shell .semi-input-number,
.auth-shell .semi-select,
.auth-shell .semi-select-selection,
.auth-shell .semi-input-textarea-wrapper {
min-height: 54px;
border-radius: 18px !important;
border: 1px solid var(--ev-control-border) !important;
background: var(--ev-control-surface) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}
.auth-shell .semi-input-wrapper-focus,
.auth-shell .semi-input-wrapper:focus-within,
.auth-shell .semi-select:focus-within,
.auth-shell .semi-select-selection:focus-within {
/* 2026-04-22 FOCUS-RING FIX: inset instead of outset — same visual
indicator without the 4px halo bleeding into adjacent buttons/icons. */
border-color: var(--ev-control-border-strong) !important;
box-shadow: inset 0 0 0 1px rgba(194, 181, 255, 0.5) !important;
}
/* 2026-04-22 NATIVE-OUTLINE FIX — mirror of console-future-overrides.css.
Kill browser-default blue focus ring on the inner /