/**
* =====================================
* 滚动条美化
**/

:root {
  --wk-app-min-width: 960px;
  --wk-app-min-height: 600px;
}

html {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
}

body {
  width: 100%;
  min-width: 960px;
  min-width: var(--wk-app-min-width);
  min-height: 600px;
  min-height: var(--wk-app-min-height);
  overflow: visible;
}

#root {
  width: 100%;
  min-width: 960px;
  min-width: var(--wk-app-min-width);
  min-height: 600px;
  min-height: var(--wk-app-min-height);
  container-name: wk-app-canvas;
  container-type: inline-size;
}

/* 亮色 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 轨道不给底色，否则暗色下 Chromium 会画出一条浅灰的默认轨道 */
::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #b8b8b8;
  background-clip: padding-box;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #878787;
}

/* Firefox 只认 scrollbar-color，写在 body 上由后代继承 */
body {
  scrollbar-color: #b8b8b8 transparent;
}

/* 暗色 */
body[theme-mode=dark] {
  scrollbar-color: #565656 transparent;
}

body[theme-mode=dark] ::-webkit-scrollbar-thumb {
  background: #565656;
}

body[theme-mode=dark] ::-webkit-scrollbar-thumb:hover {
  background: #424242; /* 更深的灰色 */
}

/* 设计 807:5256：时间分割线是一行居中的 12px 灰字，两侧没有渐变横线。 */

.wk-message-time-box {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: center;
}

.wk-message-time {
    color: #666666;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
}

/* 夜间 949:19050：时间分割线同样是 #DFE2E6 的 12px 灰字。 */
body[theme-mode=dark] .wk-message-time {
    color: var(--wk-night-ink);
}



.wk-message-split-box {
    width: 85%;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    display: table;
}

.wk-message-split-content {
    color: rgba(9,30,66,.74);
    padding: 5px 8px 0;
    white-space: nowrap;
    width: auto;
    font-size: 12px;
    font-weight: 600;
}

.wk-message-split-line1 {
    background-image: linear-gradient(360deg,transparent,rgba(9,30,66,.12));
    background-position: 0 0,0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    top: 13px;
    width: 50%;
    display: table-cell;
    position: relative;
}

.wk-message-split-line2 {
    background-image: linear-gradient(360deg,rgba(9,30,66,.12),transparent);
    background-position: 0 0,0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    top: 13px;
    width: 50%;
    display: table-cell;
    position: relative;
}
/* shadow */
/* sizing */
/* spacing */
body, :host {
  --semi-transition_duration-slowest:0ms;
  --semi-transition_duration-slower:0ms;
  --semi-transition_duration-slow:0ms;
  --semi-transition_duration-normal:0ms;
  --semi-transition_duration-fast:0ms;
  --semi-transition_duration-faster:0ms;
  --semi-transition_duration-fastest:0ms;
  --semi-transition_duration-none:0ms;
  --semi-transition_function-linear:linear;
  --semi-transition_function-ease:ease;
  --semi-transition_function-easeIn:ease-in;
  --semi-transition_function-easeOut:ease-out;
  --semi-transition_function-easeInIOut:ease-in-out;
  --semi-transition_delay-none: 0ms;
  --semi-transition_delay-slowest:0ms;
  --semi-transition_delay-slower:0ms;
  --semi-transition_delay-slow:0ms;
  --semi-transition_delay-normal:0ms;
  --semi-transition_delay-fast:0ms;
  --semi-transition_delay-faster:0ms;
  --semi-transition_delay-fastest:0ms;
  --semi-transform_scale-none:scale(1,1);
  --semi-transform_scale-small:scale(1,1);
  --semi-transform_scale-medium:scale(1,1);
  --semi-transform_scale-large:scale(1,1);
  --semi-transform-rotate-none:rotate(0deg);
  --semi-transform_rotate-clockwise90deg:rotate(90deg);
  --semi-transform_rotate-clockwise180deg:rotate(180deg);
  --semi-transform_rotate-clockwise270deg:rotate(270deg);
  --semi-transform_rotate-clockwise360deg:rotate(360deg);
  --semi-transform_rotate-anticlockwise90deg:rotate(-90deg);
  --semi-transform_rotate-anticlockwise180deg:rotate(-180deg);
  --semi-transform_rotate-anticlockwise270deg:rotate(-270deg);
  --semi-transform_rotate-anticlockwise360deg:rotate(-360deg);
}

body, body .semi-always-light, :host, :host .semi-always-light {
  --semi-amber-0: 254,251,235;
  --semi-amber-1: 252,245,206;
  --semi-amber-2: 249,232,158;
  --semi-amber-3: 246,216,111;
  --semi-amber-4: 243,198,65;
  --semi-amber-5: 240,177,20;
  --semi-amber-6: 200,138,15;
  --semi-amber-7: 160,102,10;
  --semi-amber-8: 120,70,6;
  --semi-amber-9: 80,43,3;
  --semi-black: 0,0,0;
  --semi-blue-0: 234,245,255;
  --semi-blue-1: 203,231,254;
  --semi-blue-2: 152,205,253;
  --semi-blue-3: 101,178,252;
  --semi-blue-4: 50,149,251;
  --semi-blue-5: 0,100,250;
  --semi-blue-6: 0,98,214;
  --semi-blue-7: 0,79,179;
  --semi-blue-8: 0,61,143;
  --semi-blue-9: 0,44,107;
  --semi-cyan-0: 229,247,248;
  --semi-cyan-1: 194,239,240;
  --semi-cyan-2: 138,221,226;
  --semi-cyan-3: 88,203,211;
  --semi-cyan-4: 44,184,197;
  --semi-cyan-5: 5,164,182;
  --semi-cyan-6: 3,134,152;
  --semi-cyan-7: 1,105,121;
  --semi-cyan-8: 0,77,91;
  --semi-cyan-9: 0,50,61;
  --semi-green-0: 236,247,236;
  --semi-green-1: 208,240,209;
  --semi-green-2: 164,224,167;
  --semi-green-3: 125,209,130;
  --semi-green-4: 90,194,98;
  --semi-green-5: 59,179,70;
  --semi-green-6: 48,149,59;
  --semi-green-7: 37,119,47;
  --semi-green-8: 27,89,36;
  --semi-green-9: 17,60,24;
  --semi-grey-0: 249,249,249;
  --semi-grey-1: 230,232,234;
  --semi-grey-2: 198,202,205;
  --semi-grey-3: 167,171,176;
  --semi-grey-4: 136,141,146;
  --semi-grey-5: 107,112,117;
  --semi-grey-6: 85,91,97;
  --semi-grey-7: 65,70,76;
  --semi-grey-8: 46,50,56;
  --semi-grey-9: 28,31,35;
  --semi-indigo-0: 236,239,248;
  --semi-indigo-1: 209,216,240;
  --semi-indigo-2: 167,179,225;
  --semi-indigo-3: 128,144,211;
  --semi-indigo-4: 94,111,196;
  --semi-indigo-5: 63,81,181;
  --semi-indigo-6: 51,66,161;
  --semi-indigo-7: 40,52,140;
  --semi-indigo-8: 31,40,120;
  --semi-indigo-9: 23,29,99;
  --semi-light-blue-0: 233,247,253;
  --semi-light-blue-1: 201,236,252;
  --semi-light-blue-2: 149,216,248;
  --semi-light-blue-3: 98,195,245;
  --semi-light-blue-4: 48,172,241;
  --semi-light-blue-5: 0,149,238;
  --semi-light-blue-6: 0,123,202;
  --semi-light-blue-7: 0,99,167;
  --semi-light-blue-8: 0,75,131;
  --semi-light-blue-9: 0,53,95;
  --semi-light-green-0: 243,248,236;
  --semi-light-green-1: 227,240,208;
  --semi-light-green-2: 200,226,165;
  --semi-light-green-3: 173,211,126;
  --semi-light-green-4: 147,197,91;
  --semi-light-green-5: 123,182,60;
  --semi-light-green-6: 100,152,48;
  --semi-light-green-7: 78,121,38;
  --semi-light-green-8: 57,91,27;
  --semi-light-green-9: 37,61,18;
  --semi-lime-0: 242,250,230;
  --semi-lime-1: 227,246,197;
  --semi-lime-2: 203,237,142;
  --semi-lime-3: 183,227,91;
  --semi-lime-4: 167,218,44;
  --semi-lime-5: 155,209,0;
  --semi-lime-6: 126,174,0;
  --semi-lime-7: 99,139,0;
  --semi-lime-8: 72,104,0;
  --semi-lime-9: 47,70,0;
  --semi-orange-0: 255,248,234;
  --semi-orange-1: 254,238,204;
  --semi-orange-2: 254,217,152;
  --semi-orange-3: 253,193,101;
  --semi-orange-4: 253,166,51;
  --semi-orange-5: 252,136,0;
  --semi-orange-6: 210,103,0;
  --semi-orange-7: 168,74,0;
  --semi-orange-8: 126,49,0;
  --semi-orange-9: 84,29,0;
  --semi-pink-0: 253,236,239;
  --semi-pink-1: 251,207,216;
  --semi-pink-2: 246,160,181;
  --semi-pink-3: 242,115,150;
  --semi-pink-4: 237,72,123;
  --semi-pink-5: 233,30,99;
  --semi-pink-6: 197,19,86;
  --semi-pink-7: 162,11,72;
  --semi-pink-8: 126,5,58;
  --semi-pink-9: 90,1,43;
  --semi-purple-0: 247,233,247;
  --semi-purple-1: 239,202,240;
  --semi-purple-2: 221,155,224;
  --semi-purple-3: 201,111,209;
  --semi-purple-4: 180,73,194;
  --semi-purple-5: 158,40,179;
  --semi-purple-6: 135,30,158;
  --semi-purple-7: 113,22,138;
  --semi-purple-8: 92,15,117;
  --semi-purple-9: 73,10,97;
  --semi-red-0: 254,242,237;
  --semi-red-1: 254,221,210;
  --semi-red-2: 253,183,165;
  --semi-red-3: 251,144,120;
  --semi-red-4: 250,102,76;
  --semi-red-5: 249,57,32;
  --semi-red-6: 213,37,21;
  --semi-red-7: 178,20,12;
  --semi-red-8: 142,8,5;
  --semi-red-9: 106,1,3;
  --semi-teal-0: 228,247,244;
  --semi-teal-1: 192,240,232;
  --semi-teal-2: 135,224,211;
  --semi-teal-3: 84,209,193;
  --semi-teal-4: 39,194,176;
  --semi-teal-5: 0,179,161;
  --semi-teal-6: 0,149,137;
  --semi-teal-7: 0,119,111;
  --semi-teal-8: 0,89,85;
  --semi-teal-9: 0,60,58;
  --semi-violet-0: 243,237,249;
  --semi-violet-1: 226,209,244;
  --semi-violet-2: 196,167,233;
  --semi-violet-3: 166,127,221;
  --semi-violet-4: 136,91,210;
  --semi-violet-5: 106,58,199;
  --semi-violet-6: 87,47,179;
  --semi-violet-7: 70,37,158;
  --semi-violet-8: 54,28,138;
  --semi-violet-9: 40,20,117;
  --semi-white: 255,255,255;
  --semi-yellow-0: 255,253,234;
  --semi-yellow-1: 254,251,203;
  --semi-yellow-2: 253,243,152;
  --semi-yellow-3: 252,232,101;
  --semi-yellow-4: 251,218,50;
  --semi-yellow-5: 250,200,0;
  --semi-yellow-6: 208,170,0;
  --semi-yellow-7: 167,139,0;
  --semi-yellow-8: 125,106,0;
  --semi-yellow-9: 83,72,0;
}

body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
  --semi-red-0: 108,9,11;
  --semi-red-1: 144,17,16;
  --semi-red-2: 180,32,25;
  --semi-red-3: 215,51,36;
  --semi-red-4: 251,73,50;
  --semi-red-5: 252,114,90;
  --semi-red-6: 253,153,131;
  --semi-red-7: 253,190,172;
  --semi-red-8: 254,224,213;
  --semi-red-9: 255,243,239;
  --semi-pink-0: 92,7,48;
  --semi-pink-1: 128,14,65;
  --semi-pink-2: 164,23,81;
  --semi-pink-3: 199,34,97;
  --semi-pink-4: 235,47,113;
  --semi-pink-5: 239,86,134;
  --semi-pink-6: 243,126,159;
  --semi-pink-7: 247,168,188;
  --semi-pink-8: 251,211,220;
  --semi-pink-9: 253,238,241;
  --semi-purple-0: 74,16,97;
  --semi-purple-1: 94,23,118;
  --semi-purple-2: 115,31,138;
  --semi-purple-3: 137,40,159;
  --semi-purple-4: 160,51,179;
  --semi-purple-5: 181,83,194;
  --semi-purple-6: 202,120,209;
  --semi-purple-7: 221,160,225;
  --semi-purple-8: 239,206,240;
  --semi-purple-9: 247,235,247;
  --semi-violet-0: 64,27,119;
  --semi-violet-1: 76,36,140;
  --semi-violet-2: 88,46,160;
  --semi-violet-3: 100,57,181;
  --semi-violet-4: 114,70,201;
  --semi-violet-5: 136,101,212;
  --semi-violet-6: 162,136,223;
  --semi-violet-7: 190,173,233;
  --semi-violet-8: 221,212,244;
  --semi-violet-9: 241,238,250;
  --semi-indigo-0: 23,30,101;
  --semi-indigo-1: 32,41,122;
  --semi-indigo-2: 41,54,142;
  --semi-indigo-3: 52,68,163;
  --semi-indigo-4: 64,83,183;
  --semi-indigo-5: 95,113,197;
  --semi-indigo-6: 129,145,212;
  --semi-indigo-7: 167,180,226;
  --semi-indigo-8: 209,216,241;
  --semi-indigo-9: 237,239,248;
  --semi-blue-0: 5,49,112;
  --semi-blue-1: 10,70,148;
  --semi-blue-2: 19,92,184;
  --semi-blue-3: 29,117,219;
  --semi-blue-4: 41,144,255;
  --semi-blue-5: 84,169,255;
  --semi-blue-6: 127,193,255;
  --semi-blue-7: 169,215,255;
  --semi-blue-8: 212,236,255;
  --semi-blue-9: 239,248,255;
  --semi-light-blue-0: 0,55,97;
  --semi-light-blue-1: 0,77,133;
  --semi-light-blue-2: 3,102,169;
  --semi-light-blue-3: 10,129,204;
  --semi-light-blue-4: 19,159,240;
  --semi-light-blue-5: 64,180,243;
  --semi-light-blue-6: 110,200,246;
  --semi-light-blue-7: 157,220,249;
  --semi-light-blue-8: 206,238,252;
  --semi-light-blue-9: 235,248,254;
  --semi-cyan-0: 4,52,61;
  --semi-cyan-1: 7,79,92;
  --semi-cyan-2: 10,108,123;
  --semi-cyan-3: 14,137,153;
  --semi-cyan-4: 19,168,184;
  --semi-cyan-5: 56,187,198;
  --semi-cyan-6: 98,205,212;
  --semi-cyan-7: 145,223,227;
  --semi-cyan-8: 198,239,241;
  --semi-cyan-9: 231,247,248;
  --semi-teal-0: 2,60,57;
  --semi-teal-1: 4,90,85;
  --semi-teal-2: 7,119,111;
  --semi-teal-3: 10,149,136;
  --semi-teal-4: 14,179,161;
  --semi-teal-5: 51,194,176;
  --semi-teal-6: 94,209,193;
  --semi-teal-7: 142,225,211;
  --semi-teal-8: 196,240,232;
  --semi-teal-9: 230,247,244;
  --semi-green-0: 18,60,25;
  --semi-green-1: 28,90,37;
  --semi-green-2: 39,119,49;
  --semi-green-3: 50,149,61;
  --semi-green-4: 62,179,73;
  --semi-green-5: 93,194,100;
  --semi-green-6: 127,209,132;
  --semi-green-7: 166,225,168;
  --semi-green-8: 208,240,209;
  --semi-green-9: 236,247,236;
  --semi-light-green-0: 38,61,19;
  --semi-light-green-1: 59,92,29;
  --semi-light-green-2: 81,123,40;
  --semi-light-green-3: 103,153,52;
  --semi-light-green-4: 127,184,64;
  --semi-light-green-5: 151,198,95;
  --semi-light-green-6: 176,212,129;
  --semi-light-green-7: 201,227,167;
  --semi-light-green-8: 228,241,209;
  --semi-light-green-9: 243,248,237;
  --semi-lime-0: 49,70,3;
  --semi-lime-1: 75,105,5;
  --semi-lime-2: 103,141,9;
  --semi-lime-3: 132,176,12;
  --semi-lime-4: 162,211,17;
  --semi-lime-5: 174,220,58;
  --semi-lime-6: 189,229,102;
  --semi-lime-7: 207,237,150;
  --semi-lime-8: 229,246,201;
  --semi-lime-9: 243,251,233;
  --semi-yellow-0: 84,73,3;
  --semi-yellow-1: 126,108,6;
  --semi-yellow-2: 168,142,10;
  --semi-yellow-3: 210,175,15;
  --semi-yellow-4: 252,206,20;
  --semi-yellow-5: 253,222,67;
  --semi-yellow-6: 253,235,113;
  --semi-yellow-7: 254,245,160;
  --semi-yellow-8: 254,251,208;
  --semi-yellow-9: 255,254,236;
  --semi-amber-0: 81,46,9;
  --semi-amber-1: 121,75,15;
  --semi-amber-2: 161,107,22;
  --semi-amber-3: 202,143,30;
  --semi-amber-4: 242,183,38;
  --semi-amber-5: 245,202,80;
  --semi-amber-6: 247,219,122;
  --semi-amber-7: 250,234,166;
  --semi-amber-8: 252,246,210;
  --semi-amber-9: 254,251,237;
  --semi-orange-0: 85,31,3;
  --semi-orange-1: 128,53,6;
  --semi-orange-2: 170,80,10;
  --semi-orange-3: 213,111,15;
  --semi-orange-4: 255,146,20;
  --semi-orange-5: 255,174,67;
  --semi-orange-6: 255,199,114;
  --semi-orange-7: 255,221,161;
  --semi-orange-8: 255,239,208;
  --semi-orange-9: 255,249,237;
  --semi-grey-0: 28,31,35;
  --semi-grey-1: 46,50,56;
  --semi-grey-2: 65,70,76;
  --semi-grey-3: 85,91,97;
  --semi-grey-4: 107,112,117;
  --semi-grey-5: 136,141,146;
  --semi-grey-6: 167,171,176;
  --semi-grey-7: 198,202,205;
  --semi-grey-8: 230,232,234;
  --semi-grey-9: 249,249,249;
  --semi-white: 255, 255, 255;
  --semi-black: 0, 0, 0;
}

body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  --semi-color-white: rgba(var(--semi-white), 1);
  --semi-color-black: rgba(var(--semi-black), 1);
  --semi-color-primary: rgba(var(--semi-blue-5), 1);
  --semi-color-primary-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-primary-active: rgba(var(--semi-blue-7), 1);
  --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1);
  --semi-color-primary-light-default: rgba(var(--semi-blue-0), 1);
  --semi-color-primary-light-hover: rgba(var(--semi-blue-1), 1);
  --semi-color-primary-light-active: rgba(var(--semi-blue-2), 1);
  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
  --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-0), 1);
  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-1), 1);
  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-2), 1);
  --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
  --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
  --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
  --semi-color-tertiary-light-default: rgba(var(--semi-grey-0), 1);
  --semi-color-tertiary-light-hover: rgba(var(--semi-grey-1), 1);
  --semi-color-tertiary-light-active: rgba(var(--semi-grey-2), 1);
  --semi-color-default: rgba(var(--semi-grey-0), 1);
  --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
  --semi-color-default-active: rgba(var(--semi-grey-2), 1);
  --semi-color-info: rgba(var(--semi-blue-5), 1);
  --semi-color-info-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-info-active: rgba(var(--semi-blue-7), 1);
  --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
  --semi-color-info-light-default: rgba(var(--semi-blue-0), 1);
  --semi-color-info-light-hover: rgba(var(--semi-blue-1), 1);
  --semi-color-info-light-active: rgba(var(--semi-blue-2), 1);
  --semi-color-success: rgba(var(--semi-green-5), 1);
  --semi-color-success-hover: rgba(var(--semi-green-6), 1);
  --semi-color-success-active: rgba(var(--semi-green-7), 1);
  --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
  --semi-color-success-light-default: rgba(var(--semi-green-0), 1);
  --semi-color-success-light-hover: rgba(var(--semi-green-1), 1);
  --semi-color-success-light-active: rgba(var(--semi-green-2), 1);
  --semi-color-danger: rgba(var(--semi-red-5), 1);
  --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
  --semi-color-danger-active: rgba(var(--semi-red-7), 1);
  --semi-color-danger-light-default: rgba(var(--semi-red-0), 1);
  --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1);
  --semi-color-danger-light-active: rgba(var(--semi-red-2), 1);
  --semi-color-warning: rgba(var(--semi-orange-5), 1);
  --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
  --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
  --semi-color-warning-light-default: rgba(var(--semi-orange-0), 1);
  --semi-color-warning-light-hover: rgba(var(--semi-orange-1), 1);
  --semi-color-warning-light-active: rgba(var(--semi-orange-2), 1);
  --semi-color-focus-border: rgba(var(--semi-blue-5), 1);
  --semi-color-disabled-text: rgba(var(--semi-grey-9), .35);
  --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
  --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
  --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04);
  --semi-color-shadow: rgba(var(--semi-black), .04);
  --semi-color-link: rgba(var(--semi-blue-5), 1);
  --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-link-active: rgba(var(--semi-blue-7), 1);
  --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
  --semi-color-border: rgba(var(--semi-grey-9), .08);
  --semi-color-nav-bg: rgba(var(--semi-white), 1);
  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
  --semi-color-fill-0: rgba(var(--semi-grey-8), .05);
  --semi-color-fill-1: rgba(var(--semi-grey-8), .09);
  --semi-color-fill-2: rgba(var(--semi-grey-8), .13);
  --semi-color-bg-0: rgba(var(--semi-white), 1);
  --semi-color-bg-1: rgba(var(--semi-white), 1);
  --semi-color-bg-2: rgba(var(--semi-white), 1);
  --semi-color-bg-3: rgba(var(--semi-white), 1);
  --semi-color-bg-4: rgba(var(--semi-white), 1);
  --semi-color-text-0: rgba(var(--semi-grey-9), 1);
  --semi-color-text-1: rgba(var(--semi-grey-9), .8);
  --semi-color-text-2: rgba(var(--semi-grey-9), .62);
  --semi-color-text-3: rgba(var(--semi-grey-9), .35);
  --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1);
  --semi-border-radius-extra-small: 3px;
  --semi-border-radius-small: 3px;
  --semi-border-radius-medium: 6px;
  --semi-border-radius-large: 12px;
  --semi-border-radius-circle: 50%;
  --semi-border-radius-full: 9999px;
  --semi-color-highlight-bg: rgba(var(--semi-yellow-4), 1);
  --semi-color-highlight: rgba(var(--semi-black), 1);
  --semi-color-data-0: rgba(87, 105, 255, 1);
  --semi-color-data-1: rgba(142, 212, 231, 1);
  --semi-color-data-2: rgba(245, 135, 0, 1);
  --semi-color-data-3: rgba(220, 183, 252, 1);
  --semi-color-data-4: rgba(74, 156, 247, 1);
  --semi-color-data-5: rgba(243, 204, 53, 1);
  --semi-color-data-6: rgba(254, 128, 144, 1);
  --semi-color-data-7: rgba(139, 215, 210, 1);
  --semi-color-data-8: rgba(131, 176, 35, 1);
  --semi-color-data-9: rgba(233, 165, 229, 1);
  --semi-color-data-10: rgba(48, 167, 206, 1);
  --semi-color-data-11: rgba(249, 192, 100, 1);
  --semi-color-data-12: rgba(177, 113, 249, 1);
  --semi-color-data-13: rgba(119, 182, 249, 1);
  --semi-color-data-14: rgba(200, 143, 2, 1);
  --semi-color-data-15: rgba(255, 170, 178, 1);
  --semi-color-data-16: rgba(51, 176, 171, 1);
  --semi-color-data-17: rgba(182, 215, 129, 1);
  --semi-color-data-18: rgba(212, 88, 212, 1);
  --semi-color-data-19: rgba(188, 198, 255, 1);
}

body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .semi-always-dark {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  --semi-color-white: rgba(228, 231, 245, 1);
  --semi-color-black: rgba(var(--semi-black), 1);
  --semi-color-primary: rgba(var(--semi-blue-5), 1);
  --semi-color-primary-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-primary-active: rgba(var(--semi-blue-7), 1);
  --semi-color-primary-disabled: rgba(var(--semi-blue-2), 1);
  --semi-color-primary-light-default: rgba(var(--semi-blue-5), .2);
  --semi-color-primary-light-hover: rgba(var(--semi-blue-5), .3);
  --semi-color-primary-light-active: rgba(var(--semi-blue-5), .4);
  --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
  --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
  --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
  --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
  --semi-color-secondary-light-default: rgba(var(--semi-light-blue-5), .2);
  --semi-color-secondary-light-hover: rgba(var(--semi-light-blue-5), .3);
  --semi-color-secondary-light-active: rgba(var(--semi-light-blue-5), .4);
  --semi-color-tertiary: rgba(var(--semi-grey-5), 1);
  --semi-color-tertiary-hover: rgba(var(--semi-grey-6), 1);
  --semi-color-tertiary-active: rgba(var(--semi-grey-7), 1);
  --semi-color-tertiary-light-default: rgba(var(--semi-grey-5), .2);
  --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), .3);
  --semi-color-tertiary-light-active: rgba(var(--semi-grey-5), .4);
  --semi-color-default: rgba(var(--semi-grey-0), 1);
  --semi-color-default-hover: rgba(var(--semi-grey-1), 1);
  --semi-color-default-active: rgba(var(--semi-grey-2), 1);
  --semi-color-info: rgba(var(--semi-blue-5), 1);
  --semi-color-info-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-info-active: rgba(var(--semi-blue-7), 1);
  --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
  --semi-color-info-light-default: rgba(var(--semi-blue-5), .2);
  --semi-color-info-light-hover: rgba(var(--semi-blue-5), .3);
  --semi-color-info-light-active: rgba(var(--semi-blue-5), .4);
  --semi-color-success: rgba(var(--semi-green-5), 1);
  --semi-color-success-hover: rgba(var(--semi-green-6), 1);
  --semi-color-success-active: rgba(var(--semi-green-7), 1);
  --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
  --semi-color-success-light-default: rgba(var(--semi-green-5), .2);
  --semi-color-success-light-hover: rgba(var(--semi-green-5), .3);
  --semi-color-success-light-active: rgba(var(--semi-green-5), .4);
  --semi-color-danger: rgba(var(--semi-red-5), 1);
  --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
  --semi-color-danger-active: rgba(var(--semi-red-7), 1);
  --semi-color-danger-light-default: rgba(var(--semi-red-5), .2);
  --semi-color-danger-light-hover: rgba(var(--semi-red-5), .3);
  --semi-color-danger-light-active: rgba(var(--semi-red-5), .4);
  --semi-color-warning: rgba(var(--semi-orange-5), 1);
  --semi-color-warning-hover: rgba(var(--semi-orange-6), 1);
  --semi-color-warning-active: rgba(var(--semi-orange-7), 1);
  --semi-color-warning-light-default: rgba(var(--semi-orange-5), .2);
  --semi-color-warning-light-hover: rgba(var(--semi-orange-5), .3);
  --semi-color-warning-light-active: rgba(var(--semi-orange-5), .4);
  --semi-color-focus-border: rgba(var(--semi-blue-5), 1);
  --semi-color-disabled-text: rgba(var(--semi-grey-9), .35);
  --semi-color-disabled-border: rgba(var(--semi-grey-1), 1);
  --semi-color-disabled-bg: rgba(var(--semi-grey-1), 1);
  --semi-color-disabled-fill: rgba(var(--semi-grey-8), .04);
  --semi-color-link: rgba(var(--semi-blue-5), 1);
  --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
  --semi-color-link-active: rgba(var(--semi-blue-7), 1);
  --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
  --semi-color-nav-bg: rgba(35, 36, 41, 1);
  --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
  --semi-color-fill-0: rgba(var(--semi-white), .12);
  --semi-color-fill-1: rgba(var(--semi-white), .16);
  --semi-color-fill-2: rgba(var(--semi-white), .20);
  --semi-color-border: rgba(var(--semi-white), .08);
  --semi-color-shadow: rgba(var(--semi-black), .04);
  --semi-color-bg-0: rgba(22, 22, 26, 1);
  --semi-color-bg-1: rgba(35, 36, 41, 1);
  --semi-color-bg-2: rgba(53, 54, 60, 1);
  --semi-color-bg-3: rgba(67, 68, 74, 1);
  --semi-color-bg-4: rgba(79, 81, 89, 1);
  --semi-color-text-0: rgba(var(--semi-grey-9), 1);
  --semi-color-text-1: rgba(var(--semi-grey-9), .8);
  --semi-color-text-2: rgba(var(--semi-grey-9), .6);
  --semi-color-text-3: rgba(var(--semi-grey-9), .35);
  --semi-border-radius-extra-small: 3px;
  --semi-border-radius-small: 3px;
  --semi-border-radius-medium: 6px;
  --semi-border-radius-large: 12px;
  --semi-border-radius-circle: 50%;
  --semi-border-radius-full: 9999px;
  --semi-color-highlight-bg: rgba(var(--semi-yellow-2), 1);
  --semi-color-highlight: rgba(var(--semi-white), 1);
  --semi-color-data-0: rgba(94, 109, 194, 1);
  --semi-color-data-1: rgba(8, 104, 120, 1);
  --semi-color-data-2: rgba(250, 173, 63, 1);
  --semi-color-data-3: rgba(76, 43, 156, 1);
  --semi-color-data-4: rgba(16, 125, 248, 1);
  --semi-color-data-5: rgba(248, 202, 16, 1);
  --semi-color-data-6: rgba(195, 30, 87, 1);
  --semi-color-data-7: rgba(5, 119, 115, 1);
  --semi-color-data-8: rgba(154, 207, 13, 1);
  --semi-color-data-9: rgba(117, 29, 138, 1);
  --semi-color-data-10: rgba(16, 162, 180, 1);
  --semi-color-data-11: rgba(208, 110, 11, 1);
  --semi-color-data-12: rgba(113, 66, 197, 1);
  --semi-color-data-13: rgba(7, 100, 212, 1);
  --semi-color-data-14: rgba(251, 232, 110, 1);
  --semi-color-data-15: rgba(160, 19, 73, 1);
  --semi-color-data-16: rgba(11, 179, 167, 1);
  --semi-color-data-17: rgba(98, 138, 6, 1);
  --semi-color-data-18: rgba(162, 48, 179, 1);
  --semi-color-data-19: rgba(40, 51, 138, 1);
}

.semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.semi-light-scrollbar::-webkit-scrollbar-track, .semi-light-scrollbar *::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}
.semi-light-scrollbar::-webkit-scrollbar-corner, .semi-light-scrollbar *::-webkit-scrollbar-corner {
  background-color: rgba(0, 0, 0, 0);
}
.semi-light-scrollbar::-webkit-scrollbar-thumb, .semi-light-scrollbar *::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: transparent;
  -webkit-transition: all 1s;
  transition: all 1s;
}
.semi-light-scrollbar:hover::-webkit-scrollbar-thumb, .semi-light-scrollbar *:hover::-webkit-scrollbar-thumb {
  background: var(--semi-color-fill-2);
}
.semi-light-scrollbar::-webkit-scrollbar-thumb:hover, .semi-light-scrollbar *::-webkit-scrollbar-thumb:hover {
  background: var(--semi-color-fill-1);
}
/* shadow */
/* sizing */
/* spacing */
.semi-badge {
  position: relative;
  display: inline-block;
}
.semi-badge-dot {
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border-radius: var(--semi-border-radius-circle);
  background-color: var(--semi-color-bg-1);
  border: 1px var(--semi-color-bg-1) solid;
  z-index: 1;
}
.semi-badge-count {
  box-sizing: border-box;
  height: 18px;
  min-width: 18px;
  border-radius: 9px;
  padding: 0px 4px;
  background-color: var(--semi-color-bg-1);
  border: 1px var(--semi-color-bg-1) solid;
  z-index: 1;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 14px;
  color: var(--semi-color-bg-2);
}
.semi-badge-rightTop {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  transform-origin: 100% 0%;
}
.semi-badge-rightBottom {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(50%, 50%);
  transform-origin: 100% 0%;
}
.semi-badge-leftTop {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  transform-origin: 100% 0%;
}
.semi-badge-leftBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
  transform-origin: 100% 0%;
}
.semi-badge-custom {
  display: flex;
}
.semi-badge-block {
  position: static;
  display: inline-block;
}
.semi-badge-light::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--semi-color-bg-2);
  z-index: -1;
}
.semi-badge-light::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  background-color: inherit;
  z-index: -1;
}
.semi-badge-primary.semi-badge-solid {
  background-color: var(--semi-color-primary);
}
.semi-badge-primary.semi-badge-light {
  background-color: var(--semi-color-primary-light-default);
  color: var(--semi-color-primary);
}
.semi-badge-primary.semi-badge-inverted {
  color: var(--semi-color-primary);
}
.semi-badge-secondary.semi-badge-solid {
  background-color: var(--semi-color-secondary);
}
.semi-badge-secondary.semi-badge-light {
  background-color: var(--semi-color-secondary-light-default);
  color: var(--semi-color-secondary);
}
.semi-badge-secondary.semi-badge-inverted {
  color: var(--semi-color-secondary);
}
.semi-badge-tertiary.semi-badge-solid {
  background-color: var(--semi-color-tertiary);
}
.semi-badge-tertiary.semi-badge-light {
  background-color: var(--semi-color-tertiary-light-default);
  color: var(--semi-color-tertiary);
}
.semi-badge-tertiary.semi-badge-inverted {
  color: var(--semi-color-tertiary);
}
.semi-badge-danger.semi-badge-solid {
  background-color: var(--semi-color-danger);
}
.semi-badge-danger.semi-badge-light {
  background-color: var(--semi-color-danger-light-default);
  color: var(--semi-color-danger);
}
.semi-badge-danger.semi-badge-inverted {
  color: var(--semi-color-danger);
}
.semi-badge-warning.semi-badge-solid {
  background-color: var(--semi-color-warning);
}
.semi-badge-warning.semi-badge-light {
  background-color: var(--semi-color-warning-light-default);
  color: var(--semi-color-warning);
}
.semi-badge-warning.semi-badge-inverted {
  color: var(--semi-color-warning);
}
.semi-badge-success.semi-badge-solid {
  background-color: var(--semi-color-success);
}
.semi-badge-success.semi-badge-light {
  background-color: var(--semi-color-success-light-default);
  color: var(--semi-color-success);
}
.semi-badge-success.semi-badge-inverted {
  color: var(--semi-color-success);
}

.semi-rtl .semi-badge,
.semi-portal-rtl .semi-badge {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-button-split {
  display: inline-block;
}
.semi-button-split .semi-button {
  border-radius: 0;
  margin-right: 1px;
}
.semi-button-split .semi-button-first {
  border-top-left-radius: var(--semi-border-radius-small);
  border-bottom-left-radius: var(--semi-border-radius-small);
}
.semi-button-split .semi-button-last {
  border-top-right-radius: var(--semi-border-radius-small);
  border-bottom-right-radius: var(--semi-border-radius-small);
  margin-right: 0;
  margin-right: initial;
}
.semi-button-split:hover .semi-button-borderless:active {
  background-color: var(--semi-color-fill-1);
}

.semi-button {
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 0 transparent solid;
  border-radius: var(--semi-border-radius-small);
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-weight: 600;
  outline: none;
  vertical-align: middle;
  white-space: nowrap;
}
.semi-button.semi-button-primary:focus-visible, .semi-button.semi-button-secondary:focus-visible, .semi-button.semi-button-tertiary:focus-visible, .semi-button.semi-button-warning:focus-visible, .semi-button.semi-button-danger:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-button-content {
  display: flex;
  align-items: center;
}
.semi-button-danger {
  background-color: var(--semi-color-danger);
  color: rgba(var(--semi-white), 1);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-danger-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-danger-disabled.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-danger-disabled.semi-button-light {
  background-color: var(--semi-color-fill-0);
}
.semi-button-danger:hover {
  background-color: var(--semi-color-danger-hover);
}
.semi-button-danger:active {
  background-color: var(--semi-color-danger-active);
}
.semi-button-danger.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-danger);
}
.semi-button-danger.semi-button-light, .semi-button-danger.semi-button-outline, .semi-button-danger.semi-button-borderless {
  color: var(--semi-color-danger);
}
.semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
  outline: 2px solid var(--semi-color-danger-light-active);
}
.semi-button-warning {
  background-color: var(--semi-color-warning);
  color: rgba(var(--semi-white), 1);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-warning-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-warning-disabled.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-warning-disabled.semi-button-light {
  background-color: var(--semi-color-fill-0);
}
.semi-button-warning:hover {
  background-color: var(--semi-color-warning-hover);
}
.semi-button-warning:active {
  background-color: var(--semi-color-warning-active);
}
.semi-button-warning.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-warning);
}
.semi-button-warning.semi-button-light, .semi-button-warning.semi-button-outline, .semi-button-warning.semi-button-borderless {
  color: var(--semi-color-warning);
}
.semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
  outline: 2px solid var(--semi-color-warning-light-active);
}
.semi-button-tertiary {
  background-color: var(--semi-color-tertiary);
  color: rgba(var(--semi-white), 1);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-tertiary-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-tertiary-disabled.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-tertiary-disabled.semi-button-light {
  background-color: var(--semi-color-fill-0);
}
.semi-button-tertiary:hover {
  background-color: var(--semi-color-tertiary-hover);
}
.semi-button-tertiary:active {
  background-color: var(--semi-color-tertiary-active);
}
.semi-button-tertiary.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-outline, .semi-button-tertiary.semi-button-borderless {
  color: var(--semi-color-text-1);
}
.semi-button-primary {
  background-color: var(--semi-color-primary);
  color: rgba(var(--semi-white), 1);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-primary-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-primary-disabled.semi-button-light {
  background: var(--semi-color-fill-0);
}
.semi-button-primary-disabled.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
  background-color: var(--semi-color-primary-hover);
}
.semi-button-primary.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active {
  background-color: var(--semi-color-primary-active);
}
.semi-button-primary.semi-button-light, .semi-button-primary.semi-button-outline, .semi-button-primary.semi-button-borderless {
  color: var(--semi-color-primary);
}
.semi-button-secondary {
  background-color: var(--semi-color-secondary);
  outline-color: var(--semi-color-secondary);
  color: rgba(var(--semi-white), 1);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-secondary-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-secondary-disabled.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-secondary-disabled.semi-button-light {
  background-color: var(--semi-color-fill-0);
}
.semi-button-secondary.semi-button-outline {
  background-color: transparent;
  border: 1px solid var(--semi-color-border);
}
.semi-button-secondary:hover {
  background-color: var(--semi-color-secondary-hover);
}
.semi-button-secondary:active {
  background-color: var(--semi-color-secondary-active);
}
.semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-outline, .semi-button-secondary.semi-button-borderless {
  color: var(--semi-color-secondary);
}
.semi-button-disabled {
  color: var(--semi-color-disabled-text);
  cursor: not-allowed;
}
.semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):hover {
  color: var(--semi-color-disabled-text);
}
.semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless {
  color: var(--semi-color-disabled-text);
}
.semi-button-borderless {
  background-color: transparent;
  border: 0 transparent solid;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-borderless:not(.semi-button-disabled):hover {
  background-color: var(--semi-color-fill-0);
  border: 0 transparent solid;
}
.semi-button-borderless:not(.semi-button-disabled):active {
  background-color: var(--semi-color-fill-1);
  border: 0 transparent solid;
}
.semi-button-outline {
  background-color: transparent;
}
.semi-button-outline:not(.semi-button-disabled):hover {
  background-color: var(--semi-color-fill-0);
}
.semi-button-outline:not(.semi-button-disabled):active {
  background-color: var(--semi-color-fill-1);
}
.semi-button-light {
  background-color: var(--semi-color-fill-0);
  border: 0 transparent solid;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-button-light:not(.semi-button-disabled):hover {
  background-color: var(--semi-color-fill-1);
  border: 0 transparent solid;
}
.semi-button-light:not(.semi-button-disabled):active {
  background-color: var(--semi-color-fill-2);
  border: 0 transparent solid;
}
.semi-button-size-small {
  height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 12px;
  padding-right: 12px;
}
.semi-button-size-large {
  height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 16px;
  padding-right: 16px;
}
.semi-button-block {
  width: 100%;
}
.semi-button-group {
  display: flex;
  flex-wrap: wrap;
}
.semi-button-group > .semi-button {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}
.semi-button-group > .semi-button .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-button-group > .semi-button-size-large .semi-button-content {
  padding-left: 16px;
  padding-right: 16px;
}
.semi-button-group > .semi-button-size-small .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-button-group > .semi-button.semi-button-with-icon-only {
  padding-left: 0;
  padding-right: 0;
}
.semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content {
  padding-left: 8px;
  padding-right: 8px;
}
.semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content {
  padding-left: 4px;
  padding-right: 4px;
}
.semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-button-group > .semi-button:first-child {
  border-top-left-radius: var(--semi-border-radius-small);
  border-bottom-left-radius: var(--semi-border-radius-small);
}
.semi-button-group > .semi-button:last-child {
  border-top-right-radius: var(--semi-border-radius-small);
  border-bottom-right-radius: var(--semi-border-radius-small);
}
.semi-button-group > .semi-button-outline:not(:last-child) {
  border-right-color: transparent;
  margin-right: -1px;
}
.semi-button-group-line {
  display: inline-flex;
  align-items: center;
  background-color: var(--semi-color-border);
}
.semi-button-group-line-primary {
  background-color: var(--semi-color-primary);
}
.semi-button-group-line-secondary {
  background-color: var(--semi-color-secondary);
}
.semi-button-group-line-tertiary {
  background-color: var(--semi-color-tertiary);
}
.semi-button-group-line-warning {
  background-color: var(--semi-color-warning);
}
.semi-button-group-line-danger {
  background-color: var(--semi-color-danger);
}
.semi-button-group-line-disabled {
  background-color: var(--semi-color-disabled-bg);
}
.semi-button-group-line-light {
  background-color: var(--semi-color-fill-0);
}
.semi-button-group-line-borderless {
  background-color: transparent;
}
.semi-button-group-line::before {
  display: block;
  content: "";
  width: 1px;
  height: 20px;
  background-color: var(--semi-color-border);
}

.semi-rtl .semi-button,
.semi-portal-rtl .semi-button {
  direction: rtl;
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-size-small,
.semi-portal-rtl .semi-button-size-small {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-size-large,
.semi-portal-rtl .semi-button-size-large {
  padding-left: 16px;
  padding-right: 16px;
}
.semi-rtl .semi-button-group,
.semi-portal-rtl .semi-button-group {
  direction: rtl;
}
.semi-rtl .semi-button-group > .semi-button,
.semi-portal-rtl .semi-button-group > .semi-button {
  padding-left: 0;
  padding-right: 0;
}
.semi-rtl .semi-button-group > .semi-button .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content {
  padding-left: 16px;
  padding-right: 16px;
}
.semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only {
  padding-left: 0;
  padding-right: 0;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content {
  padding-left: 8px;
  padding-right: 8px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content {
  padding-left: 4px;
  padding-right: 4px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button:first-child,
.semi-portal-rtl .semi-button-group > .semi-button:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--semi-border-radius-small);
  border-bottom-right-radius: var(--semi-border-radius-small);
}
.semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content {
  border-left: 1px var(--semi-color-border) solid;
  border-right: 0;
}
.semi-rtl .semi-button-group > .semi-button:last-child,
.semi-portal-rtl .semi-button-group > .semi-button:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--semi-border-radius-small);
  border-bottom-left-radius: var(--semi-border-radius-small);
}
.semi-rtl .semi-button.semi-button-with-icon-only,
.semi-portal-rtl .semi-button.semi-button-with-icon-only {
  padding-left: 8px;
  padding-right: 8px;
}
.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small,
.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small {
  padding-left: 4px;
  padding-right: 4px;
}
.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large,
.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-content-left,
.semi-portal-rtl .semi-button-content-left {
  margin-left: 8px;
  margin-right: 0;
}
.semi-rtl .semi-button-content-right,
.semi-portal-rtl .semi-button-content-right {
  margin-right: 8px;
  margin-left: 0;
}
/* shadow */
/* sizing */
/* spacing */
.semi-button.semi-button-with-icon {
  display: inline-flex;
  align-items: center;
}
.semi-button.semi-button-with-icon .semi-button-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.semi-button.semi-button-loading {
  pointer-events: none;
  cursor: not-allowed;
}
.semi-button.semi-button-loading .semi-button-content > svg {
  width: 16px;
  height: 16px;
  animation: 0.6s linear infinite semi-animation-rotate;
  animation-fill-mode: forwards;
}
.semi-button.semi-button-with-icon-only {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  justify-content: center;
  align-items: center;
}
.semi-button.semi-button-with-icon-only.semi-button-size-small {
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.semi-button.semi-button-with-icon-only.semi-button-size-large {
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.semi-button-content-left {
  margin-right: 8px;
  display: flex;
  align-items: center;
}
.semi-button-content-right {
  margin-left: 8px;
  display: flex;
  align-items: center;
}

.semi-rtl .semi-button,
.semi-portal-rtl .semi-button {
  direction: rtl;
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-size-small,
.semi-portal-rtl .semi-button-size-small {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-size-large,
.semi-portal-rtl .semi-button-size-large {
  padding-left: 16px;
  padding-right: 16px;
}
.semi-rtl .semi-button-group,
.semi-portal-rtl .semi-button-group {
  direction: rtl;
}
.semi-rtl .semi-button-group > .semi-button,
.semi-portal-rtl .semi-button-group > .semi-button {
  padding-left: 0;
  padding-right: 0;
}
.semi-rtl .semi-button-group > .semi-button .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content {
  padding-left: 16px;
  padding-right: 16px;
}
.semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only {
  padding-left: 0;
  padding-right: 0;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content {
  padding-left: 8px;
  padding-right: 8px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content {
  padding-left: 4px;
  padding-right: 4px;
}
.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-group > .semi-button:first-child,
.semi-portal-rtl .semi-button-group > .semi-button:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--semi-border-radius-small);
  border-bottom-right-radius: var(--semi-border-radius-small);
}
.semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content,
.semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content {
  border-left: 1px var(--semi-color-border) solid;
  border-right: 0;
}
.semi-rtl .semi-button-group > .semi-button:last-child,
.semi-portal-rtl .semi-button-group > .semi-button:last-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--semi-border-radius-small);
  border-bottom-left-radius: var(--semi-border-radius-small);
}
.semi-rtl .semi-button.semi-button-with-icon-only,
.semi-portal-rtl .semi-button.semi-button-with-icon-only {
  padding-left: 8px;
  padding-right: 8px;
}
.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small,
.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small {
  padding-left: 4px;
  padding-right: 4px;
}
.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large,
.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-button-content-left,
.semi-portal-rtl .semi-button-content-left {
  margin-left: 8px;
  margin-right: 0;
}
.semi-rtl .semi-button-content-right,
.semi-portal-rtl .semi-button-content-right {
  margin-right: 8px;
  margin-left: 0;
}
/* shadow */
/* sizing */
/* spacing */
.semi-icon {
  display: inline-block;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  text-rendering: optimizeLegibility;
  fill: currentColor;
}

.semi-icon-extra-small {
  font-size: 8px;
}

.semi-icon-small {
  font-size: 12px;
}

.semi-icon-default {
  font-size: 16px;
}

.semi-icon-large {
  font-size: 20px;
}

.semi-icon-extra-large {
  font-size: 24px;
}

.semi-icon-spinning {
  animation: 0.6s linear infinite semi-icon-animation-rotate;
  animation-fill-mode: forwards;
}

@keyframes semi-icon-animation-rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
/* shadow */
/* sizing */
/* spacing */
.semi-checkbox {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.semi-checkbox input[type=checkbox] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}
.semi-checkbox-content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.semi-checkbox-addon {
  display: flex;
  flex: 1 1;
  align-items: center;
  color: var(--semi-color-text-0);
  line-height: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-checkbox:hover .semi-checkbox-inner-display {
  background: var(--semi-color-fill-0);
  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
}
.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary-hover);
  box-shadow: none;
}
.semi-checkbox:active .semi-checkbox-inner-display {
  background: var(--semi-color-fill-1);
}
.semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary-active);
  box-shadow: none;
}
.semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display {
  background: var(--semi-color-disabled-fill);
  box-shadow: inset 0 0 0 1px var(--semi-color-border);
}
.semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary-disabled);
  box-shadow: none;
}
.semi-checkbox-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 16px;
  height: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.semi-checkbox-inner-display {
  box-sizing: border-box;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 0;
  background: transparent;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  box-shadow: inset 0 0 0 1px var(--semi-color-text-3);
  border-radius: var(--semi-border-radius-extra-small);
}
.semi-checkbox-inner-display .semi-icon {
  font-size: 16px;
}
.semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary);
  color: var(--semi-color-white);
  box-shadow: inset 0 0 0 1px var(--semi-color-primary);
  border-radius: var(--semi-border-radius-extra-small);
}
.semi-checkbox-inner-checked > .semi-checkbox-addon {
  color: var(--semi-color-text-0);
}
.semi-checkbox:hover .semi-checkbox-inner-display {
  background: var(--semi-color-fill-0);
}
.semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display {
  background: var(--semi-color-primary-hover);
  box-shadow: none;
  color: var(--semi-color-white);
}
.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary-hover);
  border-color: var(--semi-color-primary-hover);
  color: var(--semi-color-white);
}
.semi-checkbox:hover.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_enable .semi-checkbox-inner-display {
  background: var(--semi-color-white);
}
.semi-checkbox:active .semi-checkbox-inner-display {
  background: var(--semi-color-fill-1);
}
.semi-checkbox:active.semi-checkbox-indeterminate .semi-checkbox-inner-display {
  background: var(--semi-color-primary-active);
  border-color: var(--semi-color-primary-active);
  color: var(--semi-color-white);
  box-shadow: none;
}
.semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary-active);
  border-color: var(--semi-color-primary-active);
  color: var(--semi-color-white);
}
.semi-checkbox:active.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_enable .semi-checkbox-inner-display {
  background: var(--semi-color-white);
}
.semi-checkbox-cardType {
  flex-wrap: nowrap;
  align-items: flex-start;
  border-radius: 3px;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid transparent;
}
.semi-checkbox-cardType .semi-checkbox-inner {
  position: relative;
  flex-shrink: 0;
}
.semi-checkbox-cardType .semi-checkbox-inner-display {
  background: var(--semi-color-white);
}
.semi-checkbox-cardType .semi-checkbox-inner-pureCardType {
  opacity: 0;
  width: 0;
}
.semi-checkbox-cardType .semi-checkbox-addon {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--semi-color-text-0);
}
.semi-checkbox-cardType .semi-checkbox-extra {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: var(--semi-color-text-2);
}
.semi-checkbox-cardType .semi-checkbox-extra.semi-checkbox-cardType_extra_noChildren {
  margin-top: 0;
}
.semi-checkbox-cardType:hover {
  background: var(--semi-color-fill-0);
}
.semi-checkbox-cardType:active {
  background: var(--semi-color-fill-1);
}
.semi-checkbox-cardType_checked {
  background: var(--semi-color-primary-light-default);
  border: 1px solid var(--semi-color-primary);
}
.semi-checkbox-cardType_checked:hover {
  background: var(--semi-color-primary-light-default);
  border-color: var(--semi-color-primary-hover);
}
.semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  box-shadow: none;
}
.semi-checkbox-cardType_checked:active {
  background: var(--semi-color-primary-light-default);
  border-color: var(--semi-color-primary-active);
}
.semi-checkbox-cardType_disabled:active {
  background: transparent;
}
.semi-checkbox-cardType_disabled:hover {
  background: transparent;
}
.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType {
  background: var(--semi-color-primary-light-default);
  border: 1px solid var(--semi-color-primary-disabled);
}
.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  box-shadow: none;
}
.semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display {
  background: var(--semi-color-primary);
  color: var(--semi-color-white);
  box-shadow: inset 0 0 0 1px var(--semi-color-primary);
  border-radius: var(--semi-border-radius-extra-small);
}
.semi-checkbox-indeterminate .semi-checkbox-inner-display:hover, .semi-checkbox-checked .semi-checkbox-inner-display:hover {
  background: var(--semi-color-primary-hover);
  border-color: var(--semi-color-primary-hover);
  color: var(--semi-color-white);
}
.semi-checkbox-indeterminate .semi-checkbox-inner-display:active, .semi-checkbox-checked .semi-checkbox-inner-display:active {
  background: var(--semi-color-primary-active);
  border-color: var(--semi-color-primary-active);
  color: var(--semi-color-white);
}
.semi-checkbox-indeterminate .semi-checkbox-inner-addon, .semi-checkbox-checked .semi-checkbox-inner-addon {
  color: var(--semi-color-text-0);
}
.semi-checkbox-disabled {
  cursor: not-allowed;
}
.semi-checkbox-disabled .semi-checkbox-inner {
  cursor: not-allowed;
}
.semi-checkbox-disabled .semi-checkbox-inner-display {
  color: var(--semi-color-white);
  background: var(--semi-color-disabled-fill);
  box-shadow: inset 0 0 0 1px var(--semi-color-border);
}
.semi-checkbox-disabled .semi-checkbox-inner-display:hover {
  color: var(--semi-color-white);
  background: transparent;
}
.semi-checkbox-disabled .semi-checkbox-inner-checked {
  color: var(--semi-color-white);
}
.semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  opacity: 0.75;
  background: var(--semi-color-primary-disabled);
  box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled);
}
.semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display:hover {
  color: var(--semi-color-white);
  background: var(--semi-color-primary-disabled);
}
.semi-checkbox-disabled .semi-checkbox-addon {
  color: var(--semi-color-disabled-text);
}
.semi-checkbox-disabled .semi-checkbox-extra {
  color: var(--semi-color-disabled-text);
}
.semi-checkbox.semi-checkbox-disabled.semi-checkbox-indeterminate .semi-checkbox-inner-display {
  opacity: 0.75;
  background: var(--semi-color-primary-disabled);
  box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled);
  color: var(--semi-color-white);
}
.semi-checkbox-extra {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 100%;
  box-sizing: border-box;
  color: var(--semi-color-text-2);
}
.semi-checkbox-focus {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-checkbox-focus-border {
  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
}

.semi-checkboxGroup {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 14px;
}
.semi-checkboxGroup .semi-checkbox.semi-checkbox-vertical {
  margin-bottom: 16px;
}
.semi-checkboxGroup-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.semi-checkboxGroup-horizontal .semi-checkbox {
  display: inline-flex;
}
.semi-checkboxGroup-vertical {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.semi-checkboxGroup-vertical-cardType {
  row-gap: 16px;
}
.semi-checkboxGroup-vertical-pureCardType .semi-checkbox {
  -moz-column-gap: 0;
       column-gap: 0;
}

.semi-rtl .semi-checkbox,
.semi-portal-rtl .semi-checkbox {
  direction: rtl;
}
.semi-rtl .semi-checkbox input[type=checkbox],
.semi-portal-rtl .semi-checkbox input[type=checkbox] {
  left: auto;
  right: 0;
}
.semi-rtl .semi-checkboxGroup,
.semi-portal-rtl .semi-checkboxGroup {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
@keyframes semi-tooltip-zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  50% {
    opacity: 1;
  }
}
@keyframes semi-tooltip-bounceIn {
  from {
    opacity: 0;
    transform: scale(0.6, 0.6);
  }
  70% {
    opacity: 1;
    transform: scale(1.01, 1.01);
  }
  to {
    opacity: 1;
    transform: scale(1, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
}
@keyframes semi-tooltip-zoomOut {
  from {
    opacity: 1;
  }
  60% {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  to {
    opacity: 0;
  }
}
.semi-tooltip-wrapper {
  position: relative;
  background-color: rgba(var(--semi-grey-7), 1);
  color: var(--semi-color-bg-0);
  border-radius: var(--semi-border-radius-medium);
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  padding-left: 12px;
  font-size: 14px;
  left: 0;
  top: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  opacity: 0;
  max-width: 240px;
}
.semi-tooltip-wrapper-show {
  opacity: 1;
}
.semi-tooltip-content {
  min-width: 0;
}
.semi-tooltip-trigger {
  display: inline-block;
  width: auto;
  height: auto;
}
.semi-tooltip-with-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.semi-tooltip-animation-show {
  animation: semi-tooltip-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: forwards;
}
.semi-tooltip-animation-hide {
  animation: semi-tooltip-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: forwards;
}

.semi-tooltip-wrapper .semi-tooltip-icon-arrow {
  height: 7px;
  width: 24px;
  position: absolute;
  color: rgba(var(--semi-grey-7), 1);
}
.semi-tooltip-wrapper[x-placement=top] .semi-tooltip-icon-arrow {
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
}
.semi-tooltip-wrapper[x-placement=top].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=top] .semi-tooltip-with-arrow {
  min-width: 36px;
}
.semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-icon-arrow {
  bottom: -6px;
  left: 6px;
}
.semi-tooltip-wrapper[x-placement=topLeft].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-with-arrow {
  min-width: 36px;
}
.semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-icon-arrow {
  bottom: -6px;
  right: 6px;
}
.semi-tooltip-wrapper[x-placement=topRight].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-with-arrow {
  min-width: 36px;
}
.semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  right: -6px;
  top: 5px;
}
.semi-tooltip-wrapper[x-placement=leftTop].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=left] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
}
.semi-tooltip-wrapper[x-placement=left].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=left] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  right: -6px;
  bottom: 5px;
}
.semi-tooltip-wrapper[x-placement=leftBottom].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  left: -6px;
  top: 5px;
  transform: rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=rightTop].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=right] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  left: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=right].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=right] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-icon-arrow {
  width: 7px;
  height: 24px;
  left: -6px;
  bottom: 5px;
  transform: rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=rightBottom].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-with-arrow {
  min-height: 34px;
}
.semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-icon-arrow {
  top: -6px;
  left: 6px;
  transform: rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=bottomLeft].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-with-arrow {
  min-width: 36px;
}
.semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-icon-arrow {
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=bottom].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-with-arrow {
  min-width: 36px;
}
.semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-icon-arrow {
  right: 6px;
  top: -6px;
  transform: rotate(180deg);
}
.semi-tooltip-wrapper[x-placement=bottomRight].semi-tooltip-with-arrow,
.semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-with-arrow {
  min-width: 36px;
}

.semi-rtl .semi-tooltip-wrapper,
.semi-portal-rtl .semi-tooltip-wrapper {
  direction: rtl;
  padding-right: 12px;
  padding-left: 12px;
  left: auto;
  right: 0;
}
/* shadow */
/* sizing */
/* spacing */
.semi-portal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.semi-portal-inner {
  position: absolute;
  background-color: transparent;
  min-width: -moz-max-content;
  min-width: max-content;
}
/* shadow */
/* sizing */
/* spacing */
@keyframes semi-popover-zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  50% {
    opacity: 1;
  }
}
@keyframes semi-popover-zoomOut {
  from {
    opacity: 1;
  }
  60% {
    opacity: 0;
    transform: scale(0.8, 0.8);
  }
  to {
    opacity: 0;
  }
}
.semi-popover-wrapper {
  position: relative;
  background-color: var(--semi-color-bg-3);
  box-shadow: var(--semi-shadow-elevated);
  z-index: 1030;
  border-radius: var(--semi-border-radius-medium);
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  opacity: 0;
}
.semi-popover-wrapper-show {
  opacity: 1;
}
.semi-popover-trigger {
  display: inline-block;
  width: auto;
  height: auto;
}
.semi-popover-title {
  padding: 8px;
  border-bottom: 1px solid var(--semi-color-border);
}
.semi-popover-confirm {
  position: absolute;
}
.semi-popover-with-arrow {
  padding: 12px;
  box-sizing: border-box;
}
.semi-popover-animation-show {
  animation: semi-popover-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: forwards;
}
.semi-popover-animation-hide {
  animation: semi-popover-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-fill-mode: forwards;
}

.semi-popover-wrapper .semi-popover-icon-arrow {
  height: 8px;
  width: 24px;
  position: absolute;
  color: inherit;
}
.semi-popover-wrapper[x-placement=top] .semi-popover-icon-arrow {
  left: 50%;
  transform: translateX(-50%);
  bottom: -7px;
}
.semi-popover-wrapper[x-placement=top].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=top] .semi-popover-with-arrow {
  min-width: 36px;
}
.semi-popover-wrapper[x-placement=topLeft] .semi-popover-icon-arrow {
  bottom: -7px;
  left: 6px;
}
.semi-popover-wrapper[x-placement=topLeft].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=topLeft] .semi-popover-with-arrow {
  min-width: 36px;
}
.semi-popover-wrapper[x-placement=topRight] .semi-popover-icon-arrow {
  bottom: -7px;
  right: 6px;
}
.semi-popover-wrapper[x-placement=topRight].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=topRight] .semi-popover-with-arrow {
  min-width: 36px;
}
.semi-popover-wrapper[x-placement=leftTop] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  right: -7px;
  top: 6px;
}
.semi-popover-wrapper[x-placement=leftTop].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=leftTop] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=left] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
}
.semi-popover-wrapper[x-placement=left].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=left] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=leftBottom] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  right: -7px;
  bottom: 6px;
}
.semi-popover-wrapper[x-placement=leftBottom].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=leftBottom] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=rightTop] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  left: -7px;
  top: 6px;
  transform: rotate(180deg);
}
.semi-popover-wrapper[x-placement=rightTop].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=rightTop] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=right] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  left: -7px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}
.semi-popover-wrapper[x-placement=right].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=right] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=rightBottom] .semi-popover-icon-arrow {
  width: 8px;
  height: 24px;
  left: -7px;
  bottom: 6px;
  transform: rotate(180deg);
}
.semi-popover-wrapper[x-placement=rightBottom].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=rightBottom] .semi-popover-with-arrow {
  min-height: 36px;
}
.semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-icon-arrow {
  top: -7px;
  left: 6px;
  transform: rotate(180deg);
}
.semi-popover-wrapper[x-placement=bottomLeft].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-with-arrow {
  min-width: 36px;
}
.semi-popover-wrapper[x-placement=bottom] .semi-popover-icon-arrow {
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}
.semi-popover-wrapper[x-placement=bottom].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=bottom] .semi-popover-with-arrow {
  min-width: 36px;
}
.semi-popover-wrapper[x-placement=bottomRight] .semi-popover-icon-arrow {
  right: 6px;
  top: -7px;
  transform: rotate(180deg);
}
.semi-popover-wrapper[x-placement=bottomRight].semi-popover-with-arrow,
.semi-popover-wrapper[x-placement=bottomRight] .semi-popover-with-arrow {
  min-width: 36px;
}

.semi-popover.semi-popover-rtl {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
@keyframes semi-input-active {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.97);
  }
}
@keyframes semi-input-inactive {
  from {
    transform: scale(0.97);
  }
  to {
    transform: scale(1);
  }
}
.semi-input {
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}

.semi-input-wrapper {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--semi-color-fill-0);
  border: 1px transparent solid;
  border-radius: var(--semi-border-radius-small);
  width: 100%;
  outline: none;
  cursor: text;
  box-sizing: border-box;
  color: var(--semi-color-text-0);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-input-wrapper-default {
  height: 32px;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 30px;
}
.semi-input-wrapper-small {
  height: 24px;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 22px;
}
.semi-input-wrapper-large {
  height: 40px;
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 38px;
}
.semi-input-wrapper:hover {
  background-color: var(--semi-color-fill-1);
  border-color: transparent;
}
.semi-input-wrapper-focus {
  background-color: var(--semi-color-fill-0);
  border: var(--semi-color-focus-border) solid 1px;
}
.semi-input-wrapper-focus:hover {
  background-color: var(--semi-color-fill-0);
  border-color: var(--semi-color-focus-border);
}
.semi-input-wrapper-focus:active {
  background-color: var(--semi-color-fill-2);
  border-color: var(--semi-color-focus-border);
}
.semi-input-wrapper.semi-input-readonly {
  cursor: default;
}
.semi-input-wrapper-error {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger-light-default);
}
.semi-input-wrapper-error:hover {
  background-color: var(--semi-color-danger-light-hover);
  border-color: var(--semi-color-danger-light-hover);
}
.semi-input-wrapper-error.semi-input-wrapper-focus {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger);
}
.semi-input-wrapper-error:active {
  background-color: var(--semi-color-danger-light-active);
  border-color: var(--semi-color-danger);
}
.semi-input-wrapper-warning {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning-light-default);
}
.semi-input-wrapper-warning:hover {
  background-color: var(--semi-color-warning-light-hover);
  border-color: var(--semi-color-warning-light-hover);
}
.semi-input-wrapper-warning.semi-input-wrapper-focus {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning);
}
.semi-input-wrapper-warning:active {
  background-color: var(--semi-color-warning-light-active);
  border-color: var(--semi-color-warning);
}
.semi-input-wrapper__with-prefix {
  display: inline-flex;
  align-items: center;
}
.semi-input-wrapper__with-prefix .semi-input {
  padding-left: 0;
}
.semi-input-wrapper__with-suffix {
  display: inline-flex;
  align-items: center;
}
.semi-input-wrapper__with-suffix .semi-input {
  padding-right: 0;
}
.semi-input-wrapper-clearable, .semi-input-wrapper-modebtn {
  display: inline-flex;
  align-items: center;
}
.semi-input-wrapper-hidden {
  border: none;
}
.semi-input-wrapper .semi-icon {
  color: var(--semi-color-text-2);
}
.semi-input-wrapper .semi-input-clearbtn,
.semi-input-wrapper .semi-input-modebtn {
  color: var(--semi-color-primary-hover);
}
.semi-input-wrapper .semi-input-clearbtn > svg,
.semi-input-wrapper .semi-input-modebtn > svg {
  pointer-events: none;
}
.semi-input-wrapper .semi-input-clearbtn:hover,
.semi-input-wrapper .semi-input-modebtn:hover {
  cursor: pointer;
}
.semi-input-wrapper .semi-input-clearbtn:hover .semi-icon,
.semi-input-wrapper .semi-input-modebtn:hover .semi-icon {
  color: var(--semi-color-primary-hover);
}
.semi-input-wrapper .semi-input-clearbtn:focus-visible,
.semi-input-wrapper .semi-input-modebtn:focus-visible {
  border-radius: var(--semi-border-radius-small);
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -1px;
}
.semi-input-wrapper__with-suffix-icon.semi-input-wrapper-clearable:not(.semi-input-wrapper__with-suffix-hidden) .semi-input-clearbtn {
  min-width: 24px;
  justify-content: flex-end;
}
.semi-input-wrapper-modebtn.semi-input-wrapper-clearable .semi-input-clearbtn {
  min-width: 16px;
  justify-content: center;
}
.semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input:not(:last-child) {
  border-right-style: none;
  border-radius: 0;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input {
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input:not(:last-child) {
  border-right-style: none;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend, .semi-input-wrapper.semi-input-wrapper__with-append {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend:hover, .semi-input-wrapper.semi-input-wrapper__with-append:hover {
  background-color: transparent;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-focus {
  border: 1px transparent solid;
  background-color: transparent;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input {
  background-color: var(--semi-color-fill-0);
  border: 1px transparent solid;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover {
  background-color: var(--semi-color-fill-1);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover ~ .semi-input-modebtn {
  background-color: var(--semi-color-fill-1);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus {
  border: 1px var(--semi-color-focus-border) solid;
  background-color: var(--semi-color-fill-0);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn {
  border-right-style: none;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn {
  border-right-style: none;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn {
  box-sizing: border-box;
  background-color: var(--semi-color-fill-0);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn {
  border: 1px var(--semi-color-focus-border) solid;
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
  border-left-style: none;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn:not(:last-child) {
  border-radius: 0;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn {
  border: 1px var(--semi-color-focus-border) solid;
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
  border-left-style: none;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) {
  border-radius: 0;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active {
  background-color: var(--semi-color-fill-2);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn {
  background-color: var(--semi-color-fill-2);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
  background-color: var(--semi-color-fill-0);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover:last-child {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error {
  border-color: transparent;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger-light-default);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover {
  background-color: var(--semi-color-danger-light-hover);
  border-color: var(--semi-color-danger-light-hover);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn {
  background-color: var(--semi-color-danger-light-hover);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active {
  background-color: var(--semi-color-danger-light-active);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn {
  background-color: var(--semi-color-danger-light-active);
  border-color: var(--semi-color-danger);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover {
  background-color: var(--semi-color-danger-light-default);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover:last-child {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning {
  border-color: transparent;
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning-light-default);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover {
  background-color: var(--semi-color-warning-light-hover);
  border-color: var(--semi-color-warning-light-hover);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn {
  background-color: var(--semi-color-warning-light-hover);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active {
  background-color: var(--semi-color-warning-light-active);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn {
  background-color: var(--semi-color-warning-light-active);
  border-color: var(--semi-color-warning);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover {
  background-color: var(--semi-color-warning-light-default);
}
.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-wrapper-disabled {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
  background-color: var(--semi-color-disabled-fill);
  -webkit-text-fill-color: var(--semi-color-disabled-text);
}
.semi-input-wrapper-disabled:hover {
  background-color: var(--semi-color-disabled-fill);
}
.semi-input-wrapper-disabled .semi-input-append,
.semi-input-wrapper-disabled .semi-input-prepend,
.semi-input-wrapper-disabled .semi-input-suffix,
.semi-input-wrapper-disabled .semi-input-prefix,
.semi-input-wrapper-disabled .semi-icon {
  color: var(--semi-color-disabled-text);
}

.semi-input {
  border: none;
  outline: none;
  width: 100%;
  color: inherit;
  padding-left: 12px;
  padding-right: 12px;
  background-color: transparent;
  box-sizing: border-box;
}
.semi-input[type=password]::-ms-reveal, .semi-input[type=password]::-ms-clear {
  display: none;
}
.semi-input[type=search]::-webkit-search-cancel-button {
  display: none;
}
.semi-input::-moz-placeholder {
  color: var(--semi-color-text-2);
}
.semi-input::placeholder {
  color: var(--semi-color-text-2);
}
.semi-input-large {
  height: 38px;
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 38px;
}
.semi-input-small {
  height: 22px;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 22px;
}
.semi-input-default {
  height: 30px;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 30px;
}
.semi-input-disabled {
  cursor: not-allowed;
  color: inherit;
}
.semi-input-inset-label {
  margin-right: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--semi-color-text-2);
  flex-shrink: 0;
  white-space: nowrap;
}
.semi-input-prefix, .semi-input-suffix {
  display: flex;
  justify-content: center;
  align-items: center;
}
.semi-input-prefix-text, .semi-input-suffix-text {
  margin: 0 12px;
  color: var(--semi-color-text-2);
  font-weight: 600;
  white-space: nowrap;
}
.semi-input-prefix-icon, .semi-input-suffix-icon {
  color: var(--semi-color-text-2);
  margin: 0 8px;
}
.semi-input-suffix {
  display: flex;
  justify-content: center;
  align-items: center;
}
.semi-input-clearbtn, .semi-input-modebtn {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
  min-width: 32px;
}
.semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-text {
  margin-left: 0;
}
.semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-icon {
  margin-left: 0;
}
.semi-input-suffix-hidden {
  display: none;
}
.semi-input-prepend, .semi-input-append {
  height: 100%;
  display: flex;
  align-items: center;
  background-color: var(--semi-color-fill-0);
  color: var(--semi-color-text-2);
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  flex-shrink: 0;
}
.semi-input-prepend-icon, .semi-input-prepend-text, .semi-input-append-icon, .semi-input-append-text {
  padding: 0 12px;
}
.semi-input-append {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
  border-left: 1px transparent solid;
}
.semi-input-prepend {
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
  border-right: 1px transparent solid;
}
.semi-input-disabled::-moz-placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-disabled::placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-group {
  display: inline-flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}
.semi-input-group .semi-select,
.semi-input-group .semi-tagInput,
.semi-input-group .semi-cascader,
.semi-input-group .semi-tree-select, .semi-input-group > .semi-input-wrapper {
  border-radius: 0;
}
.semi-input-group .semi-select:first-child,
.semi-input-group .semi-tagInput:first-child,
.semi-input-group .semi-cascader:first-child,
.semi-input-group .semi-tree-select:first-child, .semi-input-group > .semi-input-wrapper:first-child {
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-input-group .semi-select:last-child,
.semi-input-group .semi-tagInput:last-child,
.semi-input-group .semi-cascader:last-child,
.semi-input-group .semi-tree-select:last-child, .semi-input-group > .semi-input-wrapper:last-child {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-group .semi-select:not(:last-child),
.semi-input-group .semi-tagInput:not(:last-child),
.semi-input-group .semi-cascader:not(:last-child),
.semi-input-group .semi-tree-select:not(:last-child), .semi-input-group > .semi-input-wrapper:not(:last-child) {
  position: relative;
}
.semi-input-group .semi-select:not(:last-child)::after,
.semi-input-group .semi-tagInput:not(:last-child)::after,
.semi-input-group .semi-cascader:not(:last-child)::after,
.semi-input-group .semi-tree-select:not(:last-child)::after, .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
  content: "";
  background-color: var(--semi-color-border);
  width: 1px;
  position: absolute;
  right: -1px;
  top: 1px;
  bottom: 1px;
}
.semi-input-group .semi-select {
  overflow-y: visible;
}
.semi-input-group .semi-input-number .semi-input-wrapper,
.semi-input-group .semi-input-number .semi-datepicker-range-input,
.semi-input-group .semi-datepicker .semi-input-wrapper,
.semi-input-group .semi-datepicker .semi-datepicker-range-input,
.semi-input-group .semi-timepicker .semi-input-wrapper,
.semi-input-group .semi-timepicker .semi-datepicker-range-input,
.semi-input-group .semi-autocomplete .semi-input-wrapper,
.semi-input-group .semi-autocomplete .semi-datepicker-range-input {
  border-radius: 0;
}
.semi-input-group .semi-input-number:first-child .semi-input-wrapper,
.semi-input-group .semi-input-number:first-child .semi-datepicker-range-input,
.semi-input-group .semi-datepicker:first-child .semi-input-wrapper,
.semi-input-group .semi-datepicker:first-child .semi-datepicker-range-input,
.semi-input-group .semi-timepicker:first-child .semi-input-wrapper,
.semi-input-group .semi-timepicker:first-child .semi-datepicker-range-input,
.semi-input-group .semi-autocomplete:first-child .semi-input-wrapper,
.semi-input-group .semi-autocomplete:first-child .semi-datepicker-range-input {
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-input-group .semi-input-number:last-child .semi-input-wrapper,
.semi-input-group .semi-input-number:last-child .semi-datepicker-range-input,
.semi-input-group .semi-datepicker:last-child .semi-input-wrapper,
.semi-input-group .semi-datepicker:last-child .semi-datepicker-range-input,
.semi-input-group .semi-timepicker:last-child .semi-input-wrapper,
.semi-input-group .semi-timepicker:last-child .semi-datepicker-range-input,
.semi-input-group .semi-autocomplete:last-child .semi-input-wrapper,
.semi-input-group .semi-autocomplete:last-child .semi-datepicker-range-input {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-input-group .semi-input-number:not(:last-child),
.semi-input-group .semi-datepicker:not(:last-child),
.semi-input-group .semi-timepicker:not(:last-child),
.semi-input-group .semi-autocomplete:not(:last-child) {
  position: relative;
}
.semi-input-group .semi-input-number:not(:last-child)::after,
.semi-input-group .semi-datepicker:not(:last-child)::after,
.semi-input-group .semi-timepicker:not(:last-child)::after,
.semi-input-group .semi-autocomplete:not(:last-child)::after {
  content: "";
  background-color: var(--semi-color-border);
  width: 1px;
  position: absolute;
  right: -1px;
  top: 1px;
  bottom: 1px;
}
.semi-input-group-wrapper-with-top-label {
  margin-top: 16px;
  margin-bottom: 16px;
}
.semi-input-group-wrapper-with-top-label .semi-input-group {
  display: flex;
}
.semi-input-group-wrapper-with-top-label .semi-input-group .semi-form-field {
  margin-top: 0;
  margin-bottom: 0;
}

.semi-input-only_border {
  background: transparent;
  border-color: var(--semi-color-border);
}
.semi-input-only_border:hover {
  background: transparent;
  border-color: var(--semi-color-border);
}
.semi-input-only_border:focus-within {
  background: transparent;
}

.semi-input-borderless:not(:focus-within):not(:hover) {
  background-color: transparent;
  border-color: transparent;
}
.semi-input-borderless:focus-within:not(:active) {
  background-color: transparent;
}
.semi-input-borderless.semi-input-wrapper-error:not(:focus-within) {
  border-color: var(--semi-color-danger);
}
.semi-input-borderless.semi-input-wrapper-warning:not(:focus-within) {
  border-color: var(--semi-color-warning);
}

.semi-rtl .semi-input-wrapper,
.semi-portal-rtl .semi-input-wrapper {
  direction: rtl;
}
.semi-rtl .semi-input-wrapper__with-prefix .semi-input,
.semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input {
  padding-left: auto;
  padding-right: 0;
}
.semi-rtl .semi-input-wrapper__with-suffix .semi-input,
.semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input {
  padding-right: auto;
  padding-left: 0;
}
.semi-rtl .semi-input,
.semi-portal-rtl .semi-input {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-input-inset-label,
.semi-portal-rtl .semi-input-inset-label {
  margin-right: auto;
  margin-left: 12px;
}
.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text {
  margin-left: auto;
  margin-right: 0;
}
.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon {
  margin-left: auto;
  margin-right: 0;
}
.semi-rtl .semi-input-append,
.semi-portal-rtl .semi-input-append {
  border-left: 0;
  border-right: 1px transparent solid;
}
.semi-rtl .semi-input-prepend,
.semi-portal-rtl .semi-input-prepend {
  border-right: 0;
  border-left: 1px transparent solid;
}
.semi-rtl .semi-input-group .semi-select:not(:last-child)::after,
.semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
.semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after,
.semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
  right: auto;
  left: -1px;
}
.semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after {
  right: auto;
  left: -1px;
}
.semi-rtl .semi-input-textarea-wrapper,
.semi-portal-rtl .semi-input-textarea-wrapper {
  direction: rtl;
}
.semi-rtl .semi-input-textarea-counter,
.semi-portal-rtl .semi-input-textarea-counter {
  text-align: left;
}
.semi-rtl .semi-input-textarea-showClear,
.semi-portal-rtl .semi-input-textarea-showClear {
  padding-right: 0;
  padding-left: 36px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-scrolllist {
  width: 100%;
  height: 100%;
  background: var(--semi-color-bg-3);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1);
  border-radius: var(--semi-border-radius-medium);
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  flex-direction: column;
}
.semi-scrolllist-header {
  text-align: center;
  padding: 0 16px;
}
.semi-scrolllist-header-title {
  padding: 16px 0;
  font-weight: 600;
  color: var(--semi-color-text-0);
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.semi-scrolllist-body {
  display: flex;
  height: 300px;
  padding: 0 16px;
  overflow: hidden;
}
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer-nocycle > ul:before,
.semi-scrolllist-body .semi-scrolllist-item > ul:before {
  content: "";
  display: block;
  width: 100%;
  height: 132px;
}
.semi-scrolllist-body .semi-scrolllist-item {
  position: relative;
  flex: 1 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.semi-scrolllist-body .semi-scrolllist-item:not(:last-child) {
  border-right: 1px solid var(--semi-color-border);
}
.semi-scrolllist-body .semi-scrolllist-item > ul,
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-bottom: 132px;
  list-style: none;
}
.semi-scrolllist-body .semi-scrolllist-item > ul > li,
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li {
  list-style: none;
  height: 36px;
  box-sizing: border-box;
  color: var(--semi-color-text-0);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms;
}
.semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel,
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel {
  background: var(--semi-color-primary-light-default);
  color: var(--semi-color-text-0);
}
.semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg,
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg {
  color: var(--semi-color-text-2);
  width: 16px;
  height: 16px;
  margin-right: 12px;
}
.semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected),
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected) {
  cursor: pointer;
}
.semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):hover,
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):hover {
  background-color: var(--semi-color-fill-1);
}
.semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):active,
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):active {
  background-color: var(--semi-color-fill-2);
}
.semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-disabled,
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-disabled {
  color: var(--semi-color-disabled-text);
  cursor: not-allowed;
}
.semi-scrolllist-body .semi-scrolllist-item-wheel {
  position: relative;
  flex: 1 1;
  overflow: hidden;
}
.semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child) {
  border-right: 1px solid var(--semi-color-border);
}
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-item-selected {
  font-weight: 600;
  color: var(--semi-color-primary) !important;
}
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  width: 100%;
  padding-right: 18px;
}
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade {
  width: 100%;
  height: 50%;
  pointer-events: none;
  position: absolute;
}
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade-pre {
  top: 0;
  margin-top: -19px;
  background: var(--semi-color-bg-3);
  opacity: 0.5;
}
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade-post {
  top: 50%;
  margin-top: 19px;
  background: var(--semi-color-bg-3);
  opacity: 0.5;
}
.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-selector {
  pointer-events: none;
  position: absolute;
  top: 50%;
  border-top: 1px solid var(--semi-color-border);
  border-bottom: 1px solid var(--semi-color-border);
  height: 36px;
  width: 100%;
  transform: translateY(-50%);
}
.semi-scrolllist .semi-scrolllist-footer {
  border-top: 1px solid var(--semi-color-border);
  padding: 10px;
}
.semi-scrolllist .semi-scrolllist-line {
  background: var(--semi-color-border);
  height: 1px;
}

.semi-rtl .semi-scrolllist,
.semi-portal-rtl .semi-scrolllist {
  direction: rtl;
}
.semi-rtl .semi-scrolllist-body .semi-scrolllist-item:not(:last-child),
.semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item:not(:last-child) {
  border-right: 0;
  border-left: 1px solid var(--semi-color-border);
}
.semi-rtl .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg,
.semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg,
.semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg,
.semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg {
  margin-right: 0;
  margin-left: 12px;
}
.semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child),
.semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child) {
  border-right: 0;
  border-left: 1px solid var(--semi-color-border);
}
.semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer,
.semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer {
  padding-right: 0;
  padding-left: 18px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-typography {
  color: var(--semi-color-text-0);
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.semi-typography.semi-typography-secondary {
  color: var(--semi-color-text-1);
}
.semi-typography.semi-typography-tertiary {
  color: var(--semi-color-text-2);
}
.semi-typography.semi-typography-quaternary {
  color: var(--semi-color-text-3);
}
.semi-typography.semi-typography-warning {
  color: var(--semi-color-warning);
}
.semi-typography.semi-typography-success {
  color: var(--semi-color-success);
}
.semi-typography.semi-typography-danger {
  color: var(--semi-color-danger);
}
.semi-typography.semi-typography-link {
  color: var(--semi-color-link);
  font-weight: 600;
}
.semi-typography.semi-typography-disabled {
  color: var(--semi-color-disabled-text);
  cursor: not-allowed;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-typography.semi-typography-disabled.semi-typography-link {
  color: var(--semi-color-link);
}
.semi-typography-icon {
  margin-right: 4px;
  vertical-align: middle;
  color: inherit;
}
.semi-typography-small {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}
.semi-typography-small.semi-typography-paragraph {
  font-weight: 400;
}
.semi-typography code {
  border: 1px solid var(--semi-color-border);
  border-radius: 2px;
  color: var(--semi-color-text-2);
  background-color: var(--semi-color-fill-1);
  padding: 2px 4px;
}
.semi-typography mark {
  background-color: var(--semi-color-primary-light-default);
}
.semi-typography u {
  text-decoration: underline;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
.semi-typography del {
  text-decoration: line-through;
}
.semi-typography strong {
  font-weight: 600;
}
.semi-typography a {
  display: inline;
  color: var(--semi-color-link);
  cursor: pointer;
  text-decoration: none;
}
.semi-typography a:visited {
  color: var(--semi-color-link-visited);
}
.semi-typography a:hover {
  color: var(--semi-color-link-hover);
}
.semi-typography a:active {
  color: var(--semi-color-link-active);
}
.semi-typography a .semi-typography-link-underline:hover {
  border-bottom: 1px solid var(--semi-color-link-hover);
  margin-bottom: -1px;
}
.semi-typography a .semi-typography-link-underline:active {
  border-bottom: 1px solid var(--semi-color-link-active);
  margin-bottom: -1px;
}
.semi-typography-ellipsis-single-line {
  overflow: hidden;
}
.semi-typography-ellipsis-multiple-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.semi-typography-ellipsis-multiple-line.semi-typography-ellipsis-multiple-line-text {
  display: -webkit-inline-box;
}
.semi-typography-ellipsis-overflow-ellipsis {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.semi-typography-ellipsis-overflow-ellipsis.semi-typography-ellipsis-overflow-ellipsis-text {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}
.semi-typography-ellipsis-expand {
  display: inline;
  margin-left: 8px;
}
.semi-typography-action-copy {
  display: inline-flex;
  vertical-align: middle;
  padding: 0;
  margin-left: 4px;
}
.semi-typography a.semi-typography-action-copy-icon {
  display: inline-flex;
}
.semi-typography-action-copied {
  display: inline-flex;
  padding: 0;
  margin-left: 4px;
  color: var(--semi-color-text-2);
}
.semi-typography-action-copied .semi-icon {
  vertical-align: middle;
  color: var(--semi-color-success);
}
.semi-typography-paragraph {
  margin: 0;
}

h1.semi-typography,
.semi-typography-h1.semi-typography {
  font-size: 32px;
  line-height: 44px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h1.semi-typography.semi-typography-h1-weight-light,
.semi-typography-h1.semi-typography.semi-typography-h1-weight-light {
  font-weight: 200;
}
h1.semi-typography.semi-typography-h1-weight-regular,
.semi-typography-h1.semi-typography.semi-typography-h1-weight-regular {
  font-weight: 400;
}
h1.semi-typography.semi-typography-h1-weight-medium,
.semi-typography-h1.semi-typography.semi-typography-h1-weight-medium {
  font-weight: 500;
}
h1.semi-typography.semi-typography-h1-weight-semibold,
.semi-typography-h1.semi-typography.semi-typography-h1-weight-semibold {
  font-weight: 600;
}
h1.semi-typography.semi-typography-h1-weight-bold,
.semi-typography-h1.semi-typography.semi-typography-h1-weight-bold {
  font-weight: 700;
}

h2.semi-typography,
.semi-typography-h2.semi-typography {
  font-size: 28px;
  line-height: 40px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h2.semi-typography.semi-typography-h2-weight-light,
.semi-typography-h2.semi-typography.semi-typography-h2-weight-light {
  font-weight: 200;
}
h2.semi-typography.semi-typography-h2-weight-regular,
.semi-typography-h2.semi-typography.semi-typography-h2-weight-regular {
  font-weight: 400;
}
h2.semi-typography.semi-typography-h2-weight-medium,
.semi-typography-h2.semi-typography.semi-typography-h2-weight-medium {
  font-weight: 500;
}
h2.semi-typography.semi-typography-h2-weight-semibold,
.semi-typography-h2.semi-typography.semi-typography-h2-weight-semibold {
  font-weight: 600;
}
h2.semi-typography.semi-typography-h2-weight-bold,
.semi-typography-h2.semi-typography.semi-typography-h2-weight-bold {
  font-weight: 700;
}

h3.semi-typography,
.semi-typography-h3.semi-typography {
  font-size: 24px;
  line-height: 32px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h3.semi-typography.semi-typography-h3-weight-light,
.semi-typography-h3.semi-typography.semi-typography-h3-weight-light {
  font-weight: 200;
}
h3.semi-typography.semi-typography-h3-weight-regular,
.semi-typography-h3.semi-typography.semi-typography-h3-weight-regular {
  font-weight: 400;
}
h3.semi-typography.semi-typography-h3-weight-medium,
.semi-typography-h3.semi-typography.semi-typography-h3-weight-medium {
  font-weight: 500;
}
h3.semi-typography.semi-typography-h3-weight-semibold,
.semi-typography-h3.semi-typography.semi-typography-h3-weight-semibold {
  font-weight: 600;
}
h3.semi-typography.semi-typography-h3-weight-bold,
.semi-typography-h3.semi-typography.semi-typography-h3-weight-bold {
  font-weight: 700;
}

h4.semi-typography,
.semi-typography-h4.semi-typography {
  font-size: 20px;
  line-height: 28px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h4.semi-typography.semi-typography-h4-weight-light,
.semi-typography-h4.semi-typography.semi-typography-h4-weight-light {
  font-weight: 200;
}
h4.semi-typography.semi-typography-h4-weight-regular,
.semi-typography-h4.semi-typography.semi-typography-h4-weight-regular {
  font-weight: 400;
}
h4.semi-typography.semi-typography-h4-weight-medium,
.semi-typography-h4.semi-typography.semi-typography-h4-weight-medium {
  font-weight: 500;
}
h4.semi-typography.semi-typography-h4-weight-semibold,
.semi-typography-h4.semi-typography.semi-typography-h4-weight-semibold {
  font-weight: 600;
}
h4.semi-typography.semi-typography-h4-weight-bold,
.semi-typography-h4.semi-typography.semi-typography-h4-weight-bold {
  font-weight: 700;
}

h5.semi-typography,
.semi-typography-h5.semi-typography {
  font-size: 18px;
  line-height: 24px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h5.semi-typography.semi-typography-h5-weight-light,
.semi-typography-h5.semi-typography.semi-typography-h5-weight-light {
  font-weight: 200;
}
h5.semi-typography.semi-typography-h5-weight-regular,
.semi-typography-h5.semi-typography.semi-typography-h5-weight-regular {
  font-weight: 400;
}
h5.semi-typography.semi-typography-h5-weight-medium,
.semi-typography-h5.semi-typography.semi-typography-h5-weight-medium {
  font-weight: 500;
}
h5.semi-typography.semi-typography-h5-weight-semibold,
.semi-typography-h5.semi-typography.semi-typography-h5-weight-semibold {
  font-weight: 600;
}
h5.semi-typography.semi-typography-h5-weight-bold,
.semi-typography-h5.semi-typography.semi-typography-h5-weight-bold {
  font-weight: 700;
}

h6.semi-typography,
.semi-typography-h6.semi-typography {
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0;
}
h6.semi-typography.semi-typography-h6-weight-light,
.semi-typography-h6.semi-typography.semi-typography-h6-weight-light {
  font-weight: 200;
}
h6.semi-typography.semi-typography-h6-weight-regular,
.semi-typography-h6.semi-typography.semi-typography-h6-weight-regular {
  font-weight: 400;
}
h6.semi-typography.semi-typography-h6-weight-medium,
.semi-typography-h6.semi-typography.semi-typography-h6-weight-medium {
  font-weight: 500;
}
h6.semi-typography.semi-typography-h6-weight-semibold,
.semi-typography-h6.semi-typography.semi-typography-h6-weight-semibold {
  font-weight: 600;
}
h6.semi-typography.semi-typography-h6-weight-bold,
.semi-typography-h6.semi-typography.semi-typography-h6-weight-bold {
  font-weight: 700;
}

p.semi-typography-extended,
.semi-typography-paragraph.semi-typography-extended {
  line-height: 24px;
  font-weight: 400;
}

.semi-rtl .semi-typography,
.semi-portal-rtl .semi-typography {
  direction: rtl;
}
.semi-rtl .semi-typography-link a,
.semi-rtl .semi-typography a,
.semi-portal-rtl .semi-typography-link a,
.semi-portal-rtl .semi-typography a {
  display: inline-block;
}
.semi-rtl .semi-typography-icon,
.semi-portal-rtl .semi-typography-icon {
  margin-right: auto;
  margin-left: 4px;
}
.semi-rtl .semi-typography-ellipsis-expand,
.semi-portal-rtl .semi-typography-ellipsis-expand {
  margin-left: auto;
}
.semi-rtl .semi-typography-action-copy,
.semi-portal-rtl .semi-typography-action-copy {
  margin-left: auto;
  margin-right: 4px;
}
.semi-rtl .semi-typography-action-copied,
.semi-portal-rtl .semi-typography-action-copied {
  margin-left: auto;
  margin-right: 4px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-datepicker {
  box-sizing: border-box;
  display: inline-block;
}
.semi-datepicker-container {
  display: flex;
}
.semi-datepicker .semi-scrolllist-body .semi-scrolllist-item {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.semi-datepicker .semi-scrolllist-body .semi-scrolllist-item::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.semi-datepicker .semi-scrolllist-body .semi-scrolllist-list-outer {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.semi-datepicker .semi-scrolllist-body .semi-scrolllist-list-outer::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.semi-datepicker-month-grid {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
}
.semi-datepicker-month-grid-left, .semi-datepicker-month-grid-right {
  position: relative;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
}
.semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam, .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-yam {
  height: 100%;
}
.semi-datepicker-month-grid[x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-yam {
  height: calc(100% - 54px);
}
.semi-datepicker-month-grid .semi-datepicker-yam-showing {
  min-height: 378px;
  min-width: 284px;
}
.semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing {
  min-height: 325px;
}
.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year],
.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
  min-height: 317px;
}
.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time],
.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
  min-height: 317px;
}
.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-navigation {
  padding-top: 8px;
  padding-bottom: 8px;
}
.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk {
  min-height: 100%;
}
.semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam {
  height: 100%;
}
.semi-datepicker-month-grid[x-preset-position=left][x-insetinput=false] .semi-datepicker-month, .semi-datepicker-month-grid[x-preset-position=right][x-insetinput=false] .semi-datepicker-month {
  height: 253px;
}
.semi-datepicker-month-grid .semi-datepicker-yearmonth-header {
  background: var(--semi-color-bg-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--semi-color-border);
  border-radius: var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0 0;
  display: flex;
  align-items: center;
}
.semi-datepicker-month-grid .semi-scrolllist {
  background: var(--semi-color-bg-3);
  position: relative;
  box-shadow: none;
  height: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  flex: 1 1;
}
.semi-datepicker-month-grid .semi-scrolllist-header, .semi-datepicker-month-grid .semi-scrolllist-body {
  box-sizing: border-box;
  width: 100%;
}
.semi-datepicker-month-grid .semi-scrolllist-header {
  border-bottom: 1px solid var(--semi-color-border);
  padding: 16px;
}
.semi-datepicker-month-grid .semi-scrolllist-body {
  height: 100%;
  overflow: hidden;
  padding: 0;
  flex: 1 1;
}
.semi-datepicker-month-grid .semi-scrolllist-line {
  display: none;
}
.semi-datepicker-month-grid .semi-scrolllist-header-title {
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  min-height: 24px;
  line-height: 24px;
}
.semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
  min-height: 216px;
}
.semi-datepicker-panel-yam {
  max-width: 484px;
}
.semi-datepicker-panel-yam[x-type=monthRange] {
  max-width: 584px;
}
.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body {
  display: flex;
}
.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) {
  border-left: 1px solid var(--semi-color-border);
}
.semi-datepicker-panel-yam .semi-scrolllist {
  box-shadow: none;
  height: 266px;
}
.semi-datepicker-panel-yam .semi-scrolllist-list-outer > ul > li {
  min-width: 64px;
}
.semi-datepicker-panel-yam .semi-scrolllist-item > ul > li {
  min-width: 82px;
}
.semi-datepicker-panel-yam .semi-scrolllist-body {
  padding: 0;
  overflow: hidden;
}
.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel:not(#neverExistElement) {
  border: none;
}
.semi-datepicker-footer {
  padding-top: 10px;
  padding-right: 8px;
  padding-bottom: 10px;
  text-align: right;
  background-color: var(--semi-color-fill-0);
}
.semi-datepicker-footer .semi-button:first-of-type {
  margin-right: 12px;
}
.semi-datepicker-footer .semi-button:nth-of-type(2) {
  margin-right: 8px;
}
.semi-datepicker-yam {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.semi-datepicker-tpk {
  position: absolute;
  top: 0;
  height: calc(100% - 54px);
  width: 100%;
  display: flex;
  flex-direction: column;
}
.semi-datepicker-tpk .semi-datepicker-time {
  height: 100%;
}
.semi-datepicker-navigation {
  display: flex;
  align-items: center;
  box-sizing: content-box;
  height: 32px;
  padding: 12px 16px;
}
.semi-datepicker-navigation-left, .semi-datepicker-navigation-right {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.semi-datepicker-navigation .semi-button {
  color: var(--semi-color-text-2);
  min-width: 32px;
}
.semi-datepicker-navigation-month {
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  flex-grow: 1;
  text-align: center;
  font-weight: 600;
  color: var(--semi-color-text-0);
}
.semi-datepicker-navigation-month .semi-button {
  color: var(--semi-color-text-0);
}
.semi-datepicker-month {
  width: 252px;
  box-sizing: content-box;
  padding: 16px;
  padding-top: 0;
}
.semi-datepicker-weekday {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--semi-color-text-2);
  border-bottom: 1px solid var(--semi-color-border);
}
.semi-datepicker-weekday-item {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  display: inline-block;
}
.semi-datepicker-weeks {
  color: var(--semi-color-text-0);
}
.semi-datepicker-week {
  display: flex;
  align-items: center;
}
.semi-datepicker-day {
  box-sizing: border-box;
  display: inline-block;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.semi-datepicker-day-main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: var(--semi-border-radius-small);
}
.semi-datepicker-day-main:hover {
  background-color: var(--semi-color-fill-0);
}
.semi-datepicker-day-main:active {
  background-color: var(--semi-color-fill-1);
}
.semi-datepicker-day-today .semi-datepicker-day-main {
  color: var(--semi-color-primary);
  background-color: var(--semi-color-fill-0);
  font-weight: 600;
}
.semi-datepicker-day-today.semi-datepicker-day-disabled .semi-datepicker-day-main {
  color: var(--semi-color-primary-disabled);
}
.semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main, .semi-datepicker-day-hoverday-around-singleselected .semi-datepicker-day-main {
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
  width: 36px;
}
.semi-datepicker-day-selected .semi-datepicker-day-main {
  border-radius: var(--semi-border-radius-small);
}
.semi-datepicker-day-selected-start.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main {
  border-radius: var(--semi-border-radius-small);
}
.semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main {
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
  width: 34px;
  margin-left: 2px;
  margin-right: 0;
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main {
  width: 34px;
  margin-right: 2px;
  margin-left: 0;
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-datepicker-day-hoverday-inrange .semi-datepicker-day-main {
  border-radius: 0;
}
.semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main {
  background-color: var(--semi-color-fill-0);
}
.semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-hoverday-offset .semi-datepicker-day-main {
  background-color: var(--semi-color-fill-1);
}
.semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-inhover .semi-datepicker-day-main {
  background-color: var(--semi-color-primary-light-default);
}
.semi-datepicker-day-hoverday-inrange .semi-datepicker-day-main, .semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main, .semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main {
  background-color: var(--semi-color-primary-light-active);
}
.semi-datepicker-day-hoverday-around-singleselected .semi-datepicker-day-main {
  background-color: var(--semi-color-primary-light-active);
}
.semi-datepicker-day-selected .semi-datepicker-day-main, .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-selected-end .semi-datepicker-day-main {
  background-color: var(--semi-color-primary);
  color: var(--semi-color-white);
}
.semi-datepicker-day-selected .semi-datepicker-day-main:hover, .semi-datepicker-day-selected-start .semi-datepicker-day-main:hover, .semi-datepicker-day-selected-end .semi-datepicker-day-main:hover {
  background-color: var(--semi-color-primary);
}
.semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main {
  background-color: var(--semi-color-primary-light-hover);
}
.semi-datepicker-day-selected-start-afterhover .semi-datepicker-day-main, .semi-datepicker-day-selected-end-beforehover .semi-datepicker-day-main {
  border: 1px solid var(--semi-color-primary-active);
}
.semi-datepicker-day-disabled {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
}
.semi-datepicker-day-disabled .semi-datepicker-day-main:hover {
  background-color: transparent;
}
.semi-datepicker-day-disabled .semi-datepicker-day-main:active {
  background-color: transparent;
}
.semi-datepicker-day-disabled.semi-datepicker-day-selected .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-hoverday-offset .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main {
  background-color: var(--semi-color-disabled-fill);
  color: var(--semi-color-disabled-text);
}
.semi-datepicker-switch {
  text-align: center;
  display: flex;
  border-top: 1px solid var(--semi-color-border);
  margin-top: auto;
}
.semi-datepicker-switch-date, .semi-datepicker-switch-time {
  width: 50%;
  cursor: pointer;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--semi-color-text-2);
}
.semi-datepicker-switch-date:not(.semi-datepicker-switch-time-disabled):hover, .semi-datepicker-switch-time:not(.semi-datepicker-switch-time-disabled):hover {
  background-color: var(--semi-color-fill-0);
}
.semi-datepicker-switch-date-active, .semi-datepicker-switch-time-active {
  color: var(--semi-color-text-0);
  font-weight: 600;
  cursor: auto;
}
.semi-datepicker-switch-date-active:hover, .semi-datepicker-switch-time-active:hover {
  background-color: inherit;
}
.semi-datepicker-switch-date-disabled, .semi-datepicker-switch-time-disabled {
  cursor: not-allowed;
}
.semi-datepicker-switch-text {
  padding-left: 8px;
}
.semi-datepicker-time .semi-jumperlist {
  box-shadow: none;
  border-radius: 0;
}
.semi-datepicker-quick-control {
  box-sizing: border-box;
  background-color: transparent;
}
.semi-datepicker-quick-control-header {
  padding: 18px 12px 0;
  font-weight: 600;
}
.semi-datepicker-quick-control-left {
  border-right: 1px solid var(--semi-color-border);
}
.semi-datepicker-quick-control-right {
  border-left: 1px solid var(--semi-color-border);
}
.semi-datepicker-quick-control-top {
  border-bottom: 1px solid var(--semi-color-border);
}
.semi-datepicker-quick-control-bottom {
  border-top: 1px solid var(--semi-color-border);
}
.semi-datepicker-quick-control-left-content-wrapper, .semi-datepicker-quick-control-right-content-wrapper {
  max-width: 200px;
  margin-top: 14px;
  overflow-y: auto;
}
.semi-datepicker-quick-control-top-content-wrapper, .semi-datepicker-quick-control-bottom-content-wrapper {
  overflow-y: auto;
  max-height: 100px;
}
.semi-datepicker-quick-control-left-content, .semi-datepicker-quick-control-right-content {
  box-sizing: border-box;
  display: grid;
  align-content: flex-start;
  grid-gap: 8px;
  grid-template-columns: repeat(2, minmax(76.5px, 84px));
  padding: 0 12px 12px;
}
.semi-datepicker-quick-control-left-content-item, .semi-datepicker-quick-control-right-content-item {
  max-width: 84px;
}
.semi-datepicker-quick-control-left-content-item-ellipsis, .semi-datepicker-quick-control-right-content-item-ellipsis {
  width: 68px;
  color: var(--semi-color-primary);
}
.semi-datepicker-quick-control-top-content, .semi-datepicker-quick-control-bottom-content {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(3, minmax(70.924px, 75.924px));
  align-content: flex-start;
  padding: 8px 20px;
}
.semi-datepicker-quick-control-top-content-item, .semi-datepicker-quick-control-bottom-content-item {
  max-width: 75.924px;
}
.semi-datepicker-quick-control-top-content-item-ellipsis, .semi-datepicker-quick-control-bottom-content-item-ellipsis {
  width: 59.924px;
  color: var(--semi-color-primary);
}
.semi-datepicker-quick-control-top-range-content, .semi-datepicker-quick-control-bottom-range-content {
  box-sizing: border-box;
  display: grid;
  align-content: flex-start;
  grid-template-columns: repeat(5, minmax(96.2px, 99.2px));
  grid-gap: 8px;
  padding: 8px 20px;
}
.semi-datepicker-quick-control-top-range-content-item, .semi-datepicker-quick-control-bottom-range-content-item {
  max-width: 99.2px;
}
.semi-datepicker-quick-control-top-range-content-item-ellipsis, .semi-datepicker-quick-control-bottom-range-content-item-ellipsis {
  width: 83.2px;
  color: var(--semi-color-primary);
}
.semi-datepicker-quick-control-top-month-content, .semi-datepicker-quick-control-bottom-month-content {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(51px, 58.5px));
  grid-gap: 8px;
  align-content: flex-start;
  padding: 8px 20px;
}
.semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-quick-control-bottom-month-content-item {
  max-width: 58.5px;
}
.semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
  max-width: 42.5px;
  color: var(--semi-color-primary);
}
.semi-datepicker-quick-control-month {
  max-width: 284px;
}
.semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 258px;
}
.semi-datepicker-quick-control-month .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-quick-control-month .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 214px;
}
.semi-datepicker-quick-control-date {
  max-width: 284px;
}
.semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 309px;
}
.semi-datepicker-quick-control-date .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-quick-control-date .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 273px;
}
.semi-datepicker-quick-control-dateTime {
  max-width: 284px;
}
.semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 309px;
}
.semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 326px;
}
.semi-datepicker-quick-control-dateRange {
  max-width: 568px;
}
.semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 309px;
}
.semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 273px;
}
.semi-datepicker-quick-control-dateTimeRange {
  max-width: 568px;
}
.semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 309px;
}
.semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 326px;
}
.semi-datepicker-topSlot {
  border-bottom: 1px solid var(--semi-color-border);
}
.semi-datepicker-leftSlot {
  border-right: 1px solid var(--semi-color-border);
}
.semi-datepicker-rightSlot {
  border-left: 1px solid var(--semi-color-border);
}
.semi-datepicker-bottomSlot {
  border-top: 1px solid var(--semi-color-border);
}
.semi-datepicker .semi-popover-trigger {
  width: 100%;
}
.semi-datepicker .semi-popover-trigger .semi-input-wrapper {
  font-size: 13px;
}
.semi-datepicker .semi-popover-trigger .semi-input-suffix {
  color: var(--semi-color-primary);
}
.semi-datepicker .semi-datepicker-input-readonly {
  cursor: pointer;
}
.semi-datepicker-inset-input-wrapper {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  box-sizing: border-box;
  -moz-column-gap: 8px;
       column-gap: 8px;
  padding: 12px 16px;
  padding-bottom: 0;
  width: 284px;
}
.semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] {
  width: 568px;
}
.semi-datepicker-inset-input-wrapper[x-type=month] {
  width: 165px;
}
.semi-datepicker-inset-input-wrapper[x-type=monthRange] {
  width: 331px;
}
.semi-datepicker-inset-input-wrapper .semi-input-wrapper {
  flex: 1 1;
  flex-shrink: 0;
}
.semi-datepicker-inset-input-separator {
  flex-grow: 0;
  flex-shrink: 0;
  height: 32px;
  line-height: 32px;
  padding: 0 4px;
  color: var(--semi-color-text-3);
}
.semi-datepicker-range-input {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: var(--semi-border-radius-small);
  height: 32px;
  color: var(--semi-color-text-2);
  background-color: var(--semi-color-fill-0);
  border: 0px solid transparent;
}
.semi-datepicker-range-input:hover {
  border-color: transparent;
}
.semi-datepicker-range-input:active {
  border-color: transparent;
}
.semi-datepicker-range-input:focus-within {
  border-color: transparent;
}
.semi-datepicker-range-input .semi-datepicker-monthRange-input {
  background-color: transparent;
}
.semi-datepicker-range-input-wrapper {
  box-sizing: border-box;
  background-color: transparent;
  padding: 0 8px;
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--semi-border-radius-small);
  display: flex;
  align-items: center;
}
.semi-datepicker-range-input-wrapper .semi-input-wrapper {
  background-color: transparent;
  border: none;
}
.semi-datepicker-range-input-wrapper-focus {
  border-color: transparent;
  background-color: var(--semi-color-fill-1);
  border-radius: var(--semi-border-radius-small);
  transition: background-color 0.16s ease-in-out;
}
.semi-datepicker-range-input-wrapper-focus ~ .semi-datepicker-range-input-clearbtn {
  display: flex;
}
.semi-datepicker-range-input-wrapper-focus ~ .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix {
  display: none;
}
.semi-datepicker-range-input-wrapper .semi-input {
  padding: 2px 4px;
}
.semi-datepicker-range-input-wrapper-icon {
  flex-shrink: 0;
}
.semi-datepicker-range-input-wrapper:hover {
  background-color: var(--semi-color-fill-1);
}
.semi-datepicker-range-input-wrapper-start {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.semi-datepicker-range-input-wrapper-start-with-prefix {
  border-radius: 0;
}
.semi-datepicker-range-input-wrapper-end {
  border-radius: 0;
}
.semi-datepicker-range-input-wrapper-active {
  border-color: var(--semi-color-focus-border);
  background-color: var(--semi-color-fill-1);
}
.semi-datepicker-range-input-separator {
  display: flex;
  align-items: center;
}
.semi-datepicker-range-input-separator-active {
  color: var(--semi-color-text-0);
}
.semi-datepicker-range-input-small {
  height: 24px;
}
.semi-datepicker-range-input-large {
  height: 40px;
}
.semi-datepicker-range-input-large .semi-input-default {
  font-size: 16px;
}
.semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn {
  display: flex;
  cursor: pointer;
}
.semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix {
  display: none;
}
.semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn:hover {
  color: var(--semi-color-primary-hover);
}
.semi-datepicker-range-input-disabled {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
  background-color: var(--semi-color-disabled-fill);
}
.semi-datepicker-range-input-disabled .semi-datepicker-range-input-wrapper:hover {
  background-color: transparent;
}
.semi-datepicker-range-input-disabled:hover {
  background-color: var(--semi-color-disabled-fill);
}
.semi-datepicker-range-input-disabled .semi-datepicker-range-input-prefix,
.semi-datepicker-range-input-disabled .semi-datepicker-range-input-suffix,
.semi-datepicker-range-input-disabled .semi-datepicker-range-input-clearbtn {
  color: var(--semi-color-disabled-text);
}
.semi-datepicker-range-input-warning {
  background-color: var(--semi-color-warning-light-default);
}
.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper:hover {
  background-color: var(--semi-color-warning-light-hover);
}
.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active {
  border-color: var(--semi-color-warning);
  background-color: var(--semi-color-warning-light-hover);
}
.semi-datepicker-range-input-error {
  background-color: var(--semi-color-danger-light-default);
}
.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper:hover {
  background-color: var(--semi-color-danger-light-hover);
}
.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active {
  border-color: var(--semi-color-danger);
  background-color: var(--semi-color-danger-light-hover);
}
.semi-datepicker-range-input .semi-datepicker-range-input-clearbtn {
  display: none;
}
.semi-datepicker-range-input-prefix, .semi-datepicker-range-input-suffix, .semi-datepicker-range-input-clearbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  white-space: nowrap;
  color: var(--semi-color-text-2);
}
.semi-datepicker-range-input-prefix {
  padding-left: 12px;
  padding-right: 8px;
}
.semi-datepicker-range-input-suffix {
  padding-left: 8px;
  padding-right: 12px;
}
.semi-datepicker-range-input-suffix-hidden {
  display: none;
}
.semi-datepicker-range-input-clearbtn {
  padding-left: 8px;
  padding-right: 12px;
}

/*
* 小尺寸 DatePicker
*/
.semi-datepicker-compact {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 20px;
}
.semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-yam {
  height: calc(100% - 32px);
}
.semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left {
  border-right: 1px solid var(--semi-color-border);
}
.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yam-showing {
  min-height: 288px;
  min-width: 216px;
}
.semi-datepicker-compact .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing {
  min-height: 256px;
}
.semi-datepicker-compact .semi-datepicker-month-grid[x-preset-position=left][x-insetinput=false] .semi-datepicker-month, .semi-datepicker-compact .semi-datepicker-month-grid[x-preset-position=right][x-insetinput=false] .semi-datepicker-month {
  height: 220px;
}
.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-header {
  box-sizing: border-box;
  height: 48px;
  padding: 12px;
}
.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body {
  display: flex;
}
.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) {
  border: 1px solid var(--semi-color-border);
}
.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 20px;
}
.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-header {
  display: none;
}
.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-list-outer > ul > li {
  height: 32px;
}
.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel {
  border-right: 0;
}
.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-selector {
  height: 32px;
}
.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-pre {
  margin-top: -17px;
}
.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-post {
  margin-top: 17px;
}
.semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks {
  min-height: 168px;
}
.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year],
.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] {
  min-height: 256px;
}
.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time],
.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] {
  min-height: 256px;
}
.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-yam-showing {
  min-height: 256px;
}
.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk {
  min-height: 100%;
}
.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam {
  height: 100%;
}
.semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 20px;
}
.semi-datepicker-compact .semi-datepicker-tpk {
  height: calc(100% - 32px);
}
.semi-datepicker-compact .semi-datepicker-navigation {
  height: 24px;
  padding: 12px;
  padding-bottom: 0;
}
.semi-datepicker-compact .semi-datepicker-navigation-left, .semi-datepicker-compact .semi-datepicker-navigation-right {
  width: 24px;
  height: 24px;
}
.semi-datepicker-compact .semi-datepicker-navigation .semi-button {
  min-width: 24px;
  min-height: 24px;
}
.semi-datepicker-compact .semi-datepicker-navigation-month .semi-button {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 20px;
}
.semi-datepicker-compact .semi-datepicker-month {
  width: 216px;
  padding: 0;
}
.semi-datepicker-compact .semi-datepicker-weeks {
  padding: 10px;
  padding-top: 6px;
}
.semi-datepicker-compact .semi-datepicker-weekday {
  box-sizing: border-box;
  height: 36px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--semi-color-border);
}
.semi-datepicker-compact .semi-datepicker-weekday-item {
  width: 28px;
  height: 28px;
  line-height: 28px;
}
.semi-datepicker-compact .semi-datepicker-day {
  width: 28px;
  height: 28px;
}
.semi-datepicker-compact .semi-datepicker-day-main {
  width: 24px;
  height: 24px;
}
.semi-datepicker-compact .semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main {
  width: 28px;
}
.semi-datepicker-compact .semi-datepicker-day-selected-start.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-start.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main {
  border-radius: 4px;
}
.semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
  border-radius: 4px 0 0 4px;
}
.semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main {
  border-radius: 0 4px 4px 0;
}
.semi-datepicker-compact .semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main {
  border-radius: 4px 0 0 4px;
}
.semi-datepicker-compact .semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main {
  border-radius: 0 4px 4px 0;
}
.semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
  width: 34px;
  margin-left: 2px;
  margin-right: 0;
  border-radius: 4px 0 0 4px;
}
.semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main {
  width: 34px;
  margin-right: 2px;
  margin-left: 0;
  border-radius: 0 4px 4px 0;
}
.semi-datepicker-compact .semi-datepicker-switch {
  box-sizing: border-box;
  height: 32px;
}
.semi-datepicker-compact .semi-datepicker-switch-date, .semi-datepicker-compact .semi-datepicker-switch-time {
  padding-top: 6px;
  padding-bottom: 6px;
}
.semi-datepicker-compact .semi-datepicker-switch-date {
  border-right: 1px solid var(--semi-color-border);
}
.semi-datepicker-compact .semi-datepicker-switch-text {
  padding-left: 0;
}
.semi-datepicker-compact .semi-datepicker-quick-control-header {
  padding: 16px 12px 0;
  font-weight: 600;
}
.semi-datepicker-compact .semi-datepicker-quick-control-left-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-wrapper {
  margin-top: 12px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-left-content, .semi-datepicker-compact .semi-datepicker-quick-control-right-content {
  box-sizing: border-box;
  display: grid;
  align-content: flex-start;
  grid-gap: 8px;
  grid-template-columns: repeat(2, minmax(76.5px, 84px));
  padding: 0 12px 12px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-left-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-item {
  max-width: 84px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-left-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-item-ellipsis {
  width: 68px;
  font-size: 12px;
  color: var(--semi-color-primary);
}
.semi-datepicker-compact .semi-datepicker-quick-control-top-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content {
  box-sizing: border-box;
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(3, minmax(54.94px, 59.94px));
  align-content: flex-start;
  padding: 8px 10px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-top-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content-item {
  max-width: 59.94px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-top-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content-item-ellipsis {
  width: 43.94px;
  font-size: 12px;
  color: var(--semi-color-primary);
}
.semi-datepicker-compact .semi-datepicker-quick-control-top-range-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content {
  display: grid;
  grid-template-columns: repeat(5, minmax(73px, 76px));
  grid-gap: 8px;
  align-content: flex-start;
  padding: 8px 10px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-top-range-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content-item {
  max-width: 76px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-top-range-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content-item-ellipsis {
  width: 60px;
  font-size: 12px;
  color: var(--semi-color-primary);
}
.semi-datepicker-compact .semi-datepicker-quick-control-top-month-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(61px, 68.5px));
  grid-gap: 8px;
  align-content: flex-start;
  padding: 8px 10px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item {
  max-width: 68.5px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item-ellipsis {
  max-width: 52.5px;
  font-size: 12px;
  color: var(--semi-color-primary);
}
.semi-datepicker-compact .semi-datepicker-quick-control-month {
  max-width: 216px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 254px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-month .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-compact .semi-datepicker-quick-control-month .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 218px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-date {
  max-width: 216px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 248px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-date .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-compact .semi-datepicker-quick-control-date .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 208px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-dateTime {
  max-width: 216px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 248px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-compact .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 240px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-dateRange {
  max-width: 432px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 248px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-compact .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 208px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange {
  max-width: 432px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 248px;
}
.semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-right-content-wrapper,
.semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-left-content-wrapper {
  max-height: 240px;
}
.semi-datepicker-compact .semi-datepicker-footer {
  padding-top: 10px;
  padding-right: 8px;
  padding-bottom: 10px;
}
.semi-datepicker-compact .semi-datepicker-inset-input-wrapper {
  -moz-column-gap: 4px;
       column-gap: 4px;
  padding: 8px 8px;
  padding-bottom: 0;
  width: 216px;
}
.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] {
  width: 432px;
  padding-top: 0;
}
.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange] .semi-input-wrapper, .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] .semi-input-wrapper {
  margin-top: 8px;
}
.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=month] {
  width: 195px;
}
.semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper {
  height: 28px;
  box-sizing: border-box;
}
.semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper .semi-input {
  font-size: 12px;
  line-height: 26px;
  height: 26px;
  vertical-align: top;
}
.semi-datepicker-compact .semi-datepicker-inset-input-separator {
  border-left: 1px solid var(--semi-color-border);
  transform: translateX(50%);
  height: auto;
}

.semi-popover-wrapper[x-placement^=top] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker .semi-datepicker-weeks {
  min-height: 216px;
}
.semi-popover-wrapper[x-placement^=top] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker-compact .semi-datepicker-weeks {
  min-height: 168px;
}

.semi-datepicker-borderless:not(:focus-within):not(:hover) {
  background-color: transparent;
  border-color: transparent;
}
.semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-input-suffix, .semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-datepicker-range-input-suffix {
  opacity: 0;
}
.semi-datepicker-borderless:focus-within:not(:active) {
  background-color: transparent;
}
.semi-datepicker-borderless.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active {
  border-color: transparent;
}
.semi-datepicker-borderless.semi-datepicker-range-input-error:hover {
  background-color: var(--semi-color-danger-light-default);
}
.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
  background-color: var(--semi-color-danger-light-default);
}
.semi-datepicker-borderless.semi-datepicker-range-input-error:not(:focus-within) {
  border-width: 1px;
  border-color: var(--semi-color-danger);
}
.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
  border-width: 1px;
  border-color: var(--semi-color-danger);
}
.semi-datepicker-borderless.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active {
  border-color: transparent;
}
.semi-datepicker-borderless.semi-datepicker-range-input-warning:hover {
  background-color: var(--semi-color-warning-light-default);
}
.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
  background-color: var(--semi-color-warning-light-default);
}
.semi-datepicker-borderless.semi-datepicker-range-input-warning:not(:focus-within) {
  border-width: 1px;
  border-color: var(--semi-color-warning);
}
.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
  border-width: 1px;
  border-color: var(--semi-color-warning);
}

.semi-rtl,
.semi-portal-rtl {
  /*
  * 小尺寸 DatePicker
  */
}
.semi-rtl .semi-datepicker,
.semi-portal-rtl .semi-datepicker {
  direction: rtl;
}
.semi-rtl .semi-datepicker-footer,
.semi-portal-rtl .semi-datepicker-footer {
  padding-right: 0;
  padding-left: 8px;
  text-align: left;
}
.semi-rtl .semi-datepicker-footer .semi-button:first-of-type,
.semi-portal-rtl .semi-datepicker-footer .semi-button:first-of-type {
  margin-left: 0;
  margin-right: 0;
}
.semi-rtl .semi-datepicker-footer .semi-button:nth-of-type(2),
.semi-portal-rtl .semi-datepicker-footer .semi-button:nth-of-type(2) {
  margin-right: 12px;
  margin-left: 0;
}
.semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main {
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-rtl .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-hoverday-before-selectedrange .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-day-selected-start .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-day-hoverday-before-selectedrange .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
  margin-right: 2px;
  margin-left: auto;
  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
}
.semi-rtl .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-hoverday-after-selectedrange .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-day-selected-end .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-day-hoverday-after-selectedrange .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main {
  margin-left: 2px;
  margin-right: auto;
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-rtl .semi-datepicker-switch-text,
.semi-portal-rtl .semi-datepicker-switch-text {
  padding-left: 0;
  padding-right: 8px;
}
.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
.semi-rtl .semi-datepicker-yam .semi-icon-chevron_right,
.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_right,
.semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
.semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right,
.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_left,
.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right,
.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_right {
  transform: scaleX(-1);
}
.semi-rtl .semi-datepicker-range-input-prefix,
.semi-portal-rtl .semi-datepicker-range-input-prefix {
  padding-left: 8px;
  padding-right: 12px;
}
.semi-rtl .semi-datepicker-range-input-suffix,
.semi-portal-rtl .semi-datepicker-range-input-suffix {
  padding-left: 12px;
  padding-right: 8px;
}
.semi-rtl .semi-datepicker-range-input-suffix-hidden,
.semi-portal-rtl .semi-datepicker-range-input-suffix-hidden {
  display: none;
}
.semi-rtl .semi-datepicker-range-input-clearbtn,
.semi-portal-rtl .semi-datepicker-range-input-clearbtn {
  padding-left: 12px;
  padding-right: 8px;
}
.semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left,
.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left,
.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left {
  border-left: 1px solid var(--semi-color-border);
  border-right: 0;
}
.semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel,
.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel {
  border-left: 0;
  border-right: 0;
}
.semi-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
  border-radius: 0 4px 4px 0;
}
.semi-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main {
  border-radius: 4px 0 0 4px;
}
.semi-rtl .semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main {
  margin-left: 0;
  margin-right: 2px;
  border-radius: 0 4px 4px 0;
}
.semi-rtl .semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main,
.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main {
  margin-right: 0;
  margin-left: 2px;
  border-radius: 4px 0 0 4px;
}
.semi-rtl .semi-datepicker-compact .semi-datepicker-switch-date,
.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-switch-date {
  border-left: 1px solid var(--semi-color-border);
  border-right: 0;
}
.semi-rtl .semi-datepicker-compact .semi-datepicker-switch-text,
.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-switch-text {
  padding-left: auto;
  padding-right: 0;
}
.semi-rtl .semi-datepicker-compact .semi-datepicker-footer,
.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-footer {
  padding-left: 8px;
  padding-right: auto;
}
.semi-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator,
.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator {
  border-right: 1px solid var(--semi-color-border);
  border-left: 0;
  transform: translateX(-50%);
}
/* shadow */
/* sizing */
/* spacing */
.semi-modal {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  margin: 80px auto;
  color: var(--semi-color-text-0);
}
.semi-modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: var(--semi-color-overlay-bg);
  height: 100%;
  z-index: 1000;
}
.semi-modal-mask-hidden {
  display: none;
}
.semi-modal-icon-wrapper {
  display: inline-flex;
  margin-right: 12px;
  width: 24px;
}
.semi-modal-wrap {
  position: fixed;
  overflow: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.semi-modal-wrap-center {
  display: flex;
  align-items: center;
}
.semi-modal-title {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
}
.semi-modal-content {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  background-color: var(--semi-color-bg-2);
  border: 1px solid var(--semi-color-border);
  border-radius: var(--semi-border-radius-large);
  padding: 0 24px;
  background-clip: padding-box;
  overflow: hidden;
  box-shadow: var(--semi-shadow-elevated);
}
.semi-modal-footerfill {
  display: flex;
}
.semi-modal-content-fullScreen {
  border-radius: 0;
  border: none;
  top: 0px;
}
.semi-modal-header {
  display: flex;
  align-items: flex-start;
  margin: 24px 0;
  padding: 0 0;
  font-size: 14px;
  font-weight: 600;
  background-color: transparent;
  color: var(--semi-color-text-0);
  border-bottom: 0 solid transparent;
}
.semi-modal-body-wrapper {
  display: flex;
  align-items: flex-start;
  margin: 24px 0;
}
.semi-modal-body {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
}
.semi-modal-withIcon {
  margin-left: 36px;
}
.semi-modal-footer {
  margin: 24px 0;
  padding: 0 0;
  text-align: right;
  border-radius: 0 0 5px 5px;
  border-top: 0 solid transparent;
  background-color: transparent;
}
.semi-modal-footer .semi-button {
  margin-left: 12px;
  margin-right: 0;
}
.semi-modal-confirm .semi-modal-header {
  margin-bottom: 8px;
}
.semi-modal-confirm-icon-wrapper {
  display: inline-flex;
  margin-right: 12px;
  width: 24px;
}
.semi-modal-confirm-icon {
  display: inline-flex;
  color: var(--semi-color-primary);
}
.semi-modal-info-icon {
  color: var(--semi-color-info);
}
.semi-modal-success-icon {
  color: var(--semi-color-success);
}
.semi-modal-error-icon {
  color: var(--semi-color-danger);
}
.semi-modal-warning-icon {
  color: var(--semi-color-warning);
}
.semi-modal-small {
  width: 448px;
}
.semi-modal-medium {
  width: 684px;
}
.semi-modal-large {
  width: 920px;
}
.semi-modal-full-width {
  width: calc(100vw - 64px);
}

.semi-modal-centered {
  margin: 0 auto;
}

.semi-modal-popup .semi-modal-mask,
.semi-modal-popup .semi-modal-wrap {
  position: absolute;
  overflow: hidden;
}

.semi-modal-fixed .semi-modal-mask,
.semi-modal-fixed .semi-modal-wrap {
  position: fixed;
  overflow: hidden;
}

.semi-modal-displayNone {
  display: none;
}

.semi-modal-content-animate-show {
  animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
  animation-fill-mode: forwards;
}

.semi-modal-content-animate-hide {
  animation: 120ms semi-modal-content-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
  animation-fill-mode: forwards;
}

.semi-modal-mask-animate-show {
  animation: 90ms semi-modal-mask-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
  animation-fill-mode: forwards;
}

.semi-modal-mask-animate-hide {
  animation: 90ms semi-modal-mask-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
  animation-fill-mode: forwards;
}

@keyframes semi-modal-content-keyframe-show {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes semi-modal-content-keyframe-hide {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
}
@keyframes semi-modal-mask-keyframe-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes semi-modal-mask-keyframe-hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.semi-modal-rtl {
  direction: rtl;
}
.semi-modal-rtl .semi-modal-icon-wrapper, .semi-modal-confirm-rtl .semi-modal-icon-wrapper {
  margin-right: 0;
  margin-left: 12px;
}
.semi-modal-rtl .semi-modal-withIcon, .semi-modal-confirm-rtl .semi-modal-withIcon {
  margin-left: 0;
  margin-right: 36px;
}
.semi-modal-rtl .semi-modal-footer, .semi-modal-confirm-rtl .semi-modal-footer {
  text-align: left;
}
.semi-modal-rtl .semi-modal-footer .semi-button, .semi-modal-confirm-rtl .semi-modal-footer .semi-button {
  margin-left: 0;
  margin-right: 12px;
}
.semi-modal-confirm-rtl {
  direction: rtl;
}
.semi-modal-confirm .semi-modal-confirm-rtl .semi-button {
  margin-left: 0;
  margin-right: 12px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-dropdown {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.semi-dropdown-wrapper {
  overflow-y: auto;
  box-shadow: var(--semi-shadow-elevated);
  position: relative;
  z-index: 1050;
  border-radius: var(--semi-border-radius-medium);
  background: var(--semi-color-bg-3);
  opacity: 0;
}
.semi-dropdown-wrapper-show {
  opacity: 1;
}
.semi-dropdown-trigger {
  display: inline-block;
}
.semi-dropdown-menu {
  list-style: none;
  padding: 4px 0;
  margin: 0;
}
.semi-dropdown-title {
  color: var(--semi-color-text-2);
  padding-top: 8px;
  padding-bottom: 4px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: default;
}
.semi-dropdown-title-withTick {
  padding-left: 31px;
}
.semi-dropdown-item {
  padding: 8px 16px;
  color: var(--semi-color-text-0);
  max-width: 280px;
  display: flex;
  align-items: center;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms;
}
.semi-dropdown-item-hover {
  background-color: var(--semi-color-fill-0);
}
.semi-dropdown-item:not(.semi-dropdown-item-active):hover {
  background-color: var(--semi-color-fill-0);
  cursor: pointer;
}
.semi-dropdown-item:not(.semi-dropdown-item-active):active {
  background-color: var(--semi-color-fill-1);
}
.semi-dropdown-item:focus-visible {
  background-color: var(--semi-color-fill-0);
  outline: 0;
}
.semi-dropdown-item-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
.semi-dropdown-item-danger {
  color: var(--semi-color-danger);
}
.semi-dropdown-item-secondary {
  color: var(--semi-color-secondary);
}
.semi-dropdown-item-warning {
  color: var(--semi-color-warning);
}
.semi-dropdown-item-tertiary {
  color: var(--semi-color-tertiary);
}
.semi-dropdown-item-primary {
  color: var(--semi-color-primary);
}
.semi-dropdown-item-withTick {
  padding-left: 12px;
}
.semi-dropdown-item > .semi-icon {
  flex-shrink: 0;
  margin-right: 9px;
  font-size: 12px;
}
.semi-dropdown-item-active {
  font-weight: 600;
}
.semi-dropdown-item.semi-dropdown-item-disabled {
  color: var(--semi-color-disabled-text);
  cursor: not-allowed;
}
.semi-dropdown-item.semi-dropdown-item-disabled:hover, .semi-dropdown-item.semi-dropdown-item-disabled:active {
  cursor: not-allowed;
  background-color: transparent;
}
.semi-dropdown-divider {
  display: block;
  height: 1px;
  width: 100%;
  min-width: 100%;
  clear: both;
  background: var(--semi-color-border);
  margin: 4px 0;
}

.semi-rtl .semi-dropdown-wrapper,
.semi-portal-rtl .semi-dropdown-wrapper {
  direction: rtl;
}
.semi-rtl .semi-dropdown-title-withTick,
.semi-portal-rtl .semi-dropdown-title-withTick {
  padding-left: 0;
  padding-right: 31px;
}
.semi-rtl .semi-dropdown-item-withTick,
.semi-portal-rtl .semi-dropdown-item-withTick {
  padding-left: auto;
  padding-right: 12px;
}
.semi-rtl .semi-dropdown-item > .semi-icon,
.semi-portal-rtl .semi-dropdown-item > .semi-icon {
  margin-right: 0;
  margin-left: 9px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-input-textarea-wrapper {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 100%;
  border: 1px transparent solid;
  border-radius: var(--semi-border-radius-small);
  vertical-align: bottom;
  background-color: var(--semi-color-fill-0);
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-input-textarea-wrapper:hover {
  background-color: var(--semi-color-fill-1);
}
.semi-input-textarea-wrapper-focus {
  background-color: var(--semi-color-fill-0);
  border: 1px var(--semi-color-focus-border) solid;
}
.semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active {
  background-color: var(--semi-color-fill-0);
}
.semi-input-textarea-wrapper:active {
  background-color: var(--semi-color-fill-2);
}
.semi-input-textarea-wrapper .semi-input-clearbtn {
  position: absolute;
  top: 0;
  min-width: 24px;
  color: var(--semi-color-text-2);
  right: 4px;
  height: 32px;
}
.semi-input-textarea-wrapper .semi-input-clearbtn > svg {
  pointer-events: none;
}
.semi-input-textarea-wrapper .semi-input-clearbtn:hover {
  cursor: pointer;
}
.semi-input-textarea-wrapper .semi-input-clearbtn:hover .semi-icon {
  color: var(--semi-color-primary-hover);
}
.semi-input-textarea-wrapper .semi-input-clearbtn-hidden {
  visibility: hidden;
}
.semi-input-textarea-wrapper-disabled, .semi-input-textarea-wrapper-readonly {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
  background-color: var(--semi-color-disabled-fill);
}
.semi-input-textarea-wrapper-disabled:hover, .semi-input-textarea-wrapper-readonly:hover {
  background-color: var(--semi-color-disabled-fill);
}
.semi-input-textarea-wrapper-disabled::-moz-placeholder, .semi-input-textarea-wrapper-readonly::-moz-placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-textarea-wrapper-disabled::placeholder, .semi-input-textarea-wrapper-readonly::placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-textarea-wrapper-readonly {
  cursor: text;
}
.semi-input-textarea-wrapper-error {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger-light-default);
}
.semi-input-textarea-wrapper-error:hover {
  background-color: var(--semi-color-danger-light-hover);
  border-color: var(--semi-color-danger-light-hover);
}
.semi-input-textarea-wrapper-error.semi-input-textarea-wrapper-focus {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger);
}
.semi-input-textarea-wrapper-error:active {
  background-color: var(--semi-color-danger-light-active);
  border-color: var(--semi-color-danger);
}
.semi-input-textarea-wrapper-warning {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning-light-default);
}
.semi-input-textarea-wrapper-warning:hover {
  background-color: var(--semi-color-warning-light-hover);
  border-color: var(--semi-color-warning-light-hover);
}
.semi-input-textarea-wrapper-warning.semi-input-textarea-wrapper-focus {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning);
}
.semi-input-textarea-wrapper-warning:active {
  background-color: var(--semi-color-warning-light-active);
  border-color: var(--semi-color-warning);
}

.semi-input-textarea {
  position: relative;
  resize: none;
  padding: 5px 12px;
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: transparent;
  border: 0 solid transparent;
  vertical-align: bottom;
  width: 100%;
  outline: none;
  cursor: text;
  box-sizing: border-box;
  color: var(--semi-color-text-0);
}
.semi-input-textarea:hover {
  border-color: transparent;
}
.semi-input-textarea::-moz-placeholder {
  color: var(--semi-color-text-2);
}
.semi-input-textarea::placeholder {
  color: var(--semi-color-text-2);
}
.semi-input-textarea-showClear {
  padding-right: 36px;
}
.semi-input-textarea-disabled, .semi-input-textarea-readonly {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
  background-color: transparent;
}
.semi-input-textarea-disabled:hover, .semi-input-textarea-readonly:hover {
  background-color: transparent;
}
.semi-input-textarea-disabled::-moz-placeholder, .semi-input-textarea-readonly::-moz-placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-textarea-disabled::placeholder, .semi-input-textarea-readonly::placeholder {
  color: var(--semi-color-disabled-text);
}
.semi-input-textarea-readonly {
  cursor: text;
}
.semi-input-textarea-autosize {
  overflow: hidden;
}
.semi-input-textarea-counter {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3px 12px 5px 12px;
  min-height: 24px;
  text-align: right;
  color: var(--semi-color-text-2);
}
.semi-input-textarea-counter-exceed {
  color: var(--semi-color-danger);
}

.semi-input-textarea-borderless:not(:focus-within):not(:hover) {
  background-color: transparent;
  border-color: transparent;
}
.semi-input-textarea-borderless:focus-within:not(:active) {
  background-color: transparent;
}
.semi-input-textarea-borderless.semi-input-textarea-wrapper-error:not(:focus-within) {
  border-color: var(--semi-color-danger);
}
.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning:not(:focus-within) {
  border-color: var(--semi-color-warning);
}
.semi-input-textarea-borderless.semi-input-textarea-wrapper-error .semi-input-textarea-counter {
  color: var(--semi-color-danger);
}
.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning .semi-input-textarea-counter {
  color: var(--semi-color-warning);
}

.semi-rtl .semi-input-wrapper,
.semi-portal-rtl .semi-input-wrapper {
  direction: rtl;
}
.semi-rtl .semi-input-wrapper__with-prefix .semi-input,
.semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input {
  padding-left: auto;
  padding-right: 0;
}
.semi-rtl .semi-input-wrapper__with-suffix .semi-input,
.semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input {
  padding-right: auto;
  padding-left: 0;
}
.semi-rtl .semi-input,
.semi-portal-rtl .semi-input {
  padding-left: 12px;
  padding-right: 12px;
}
.semi-rtl .semi-input-inset-label,
.semi-portal-rtl .semi-input-inset-label {
  margin-right: auto;
  margin-left: 12px;
}
.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text,
.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text {
  margin-left: auto;
  margin-right: 0;
}
.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon,
.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon {
  margin-left: auto;
  margin-right: 0;
}
.semi-rtl .semi-input-append,
.semi-portal-rtl .semi-input-append {
  border-left: 0;
  border-right: 1px transparent solid;
}
.semi-rtl .semi-input-prepend,
.semi-portal-rtl .semi-input-prepend {
  border-right: 0;
  border-left: 1px transparent solid;
}
.semi-rtl .semi-input-group .semi-select:not(:last-child)::after,
.semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
.semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after,
.semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
  right: auto;
  left: -1px;
}
.semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after,
.semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after {
  right: auto;
  left: -1px;
}
.semi-rtl .semi-input-textarea-wrapper,
.semi-portal-rtl .semi-input-textarea-wrapper {
  direction: rtl;
}
.semi-rtl .semi-input-textarea-counter,
.semi-portal-rtl .semi-input-textarea-counter {
  text-align: left;
}
.semi-rtl .semi-input-textarea-showClear,
.semi-portal-rtl .semi-input-textarea-showClear {
  padding-right: 0;
  padding-left: 36px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-input-number {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-input-number-suffix-btns {
  display: inline-flex;
  flex-direction: column;
  margin-left: 4px;
  border: 1px solid var(--semi-color-border);
  border-radius: var(--semi-border-radius-small);
  background-color: var(--semi-color-bg-2);
  box-sizing: border-box;
}
.semi-input-number-suffix-btns > .semi-input-number-button {
  height: 50%;
  width: 14px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 0;
  color: var(--semi-color-text-2);
}
.semi-input-number-suffix-btns > .semi-input-number-button-up:not(.semi-input-number-button-up-not-allowed):hover, .semi-input-number-suffix-btns > .semi-input-number-button-down:not(.semi-input-number-button-down-not-allowed):hover {
  cursor: pointer;
  background-color: var(--semi-color-fill-0);
}
.semi-input-number-suffix-btns > .semi-input-number-button-up:not(.semi-input-number-button-up-not-allowed):active, .semi-input-number-suffix-btns > .semi-input-number-button-down:not(.semi-input-number-button-down-not-allowed):active {
  cursor: pointer;
  background-color: var(--semi-color-fill-1);
}
.semi-input-number-suffix-btns > .semi-input-number-button-up.semi-input-number-button-up-disabled, .semi-input-number-suffix-btns > .semi-input-number-button-down.semi-input-number-button-down-disabled {
  background-color: var(--semi-color-disabled-fill);
  color: var(--semi-color-disabled-text);
}
.semi-input-number-suffix-btns > .semi-input-number-button-up.semi-input-number-button-up-not-allowed, .semi-input-number-suffix-btns > .semi-input-number-button-down.semi-input-number-button-down-not-allowed {
  cursor: not-allowed;
}
.semi-input-number-suffix-btns-inner-hover {
  border-color: var(--semi-color-fill-2);
}
.semi-input-number-suffix-btns-inner {
  margin-left: 8px;
}
.semi-input-number .semi-input-clearbtn + .semi-input-suffix {
  margin-left: -4px;
}
.semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner {
  margin-left: 0;
}
.semi-input-number-size-default .semi-input-number-suffix-btns {
  height: 32px;
}
.semi-input-number-size-default .semi-input-number-suffix-btns-inner {
  height: 30px;
}
.semi-input-number-size-large .semi-input-number-suffix-btns {
  height: 40px;
}
.semi-input-number-size-large .semi-input-number-suffix-btns-inner {
  height: 38px;
}
.semi-input-number-size-small .semi-input-number-suffix-btns {
  height: 24px;
}
.semi-input-number-size-small .semi-input-number-suffix-btns-inner {
  height: 22px;
}

.semi-input-number:not(:focus-within):not(:hover) .semi-input-borderless + .semi-input-number-suffix-btns {
  opacity: 0;
}

.semi-rtl .semi-input-number,
.semi-portal-rtl .semi-input-number {
  direction: rtl;
}
.semi-rtl .semi-input-number-suffix-btns,
.semi-portal-rtl .semi-input-number-suffix-btns {
  margin-left: auto;
  margin-right: 4px;
}
.semi-rtl .semi-input-number-suffix-btns-inner,
.semi-portal-rtl .semi-input-number-suffix-btns-inner {
  margin-left: auto;
  margin-right: 8px;
}
.semi-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix,
.semi-portal-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix {
  margin-left: auto;
  margin-right: -4px;
}
.semi-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner,
.semi-portal-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner {
  margin-left: auto;
  margin-right: 0;
}
/* shadow */
/* sizing */
/* spacing */
.semi-notification-wrapper {
  position: fixed;
}

.semi-notification-list {
  position: fixed;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  z-index: 1010;
  pointer-events: none;
}
.semi-notification-list[placement=topRight] {
  right: 0;
  top: 0;
}
.semi-notification-list[placement=top] {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.semi-notification-list[placement=topLeft] {
  left: 0;
  top: 0;
}
.semi-notification-list[placement=bottom] {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.semi-notification-list[placement=bottomRight] {
  bottom: 0;
  right: 0;
}
.semi-notification-list[placement=bottomLeft] {
  bottom: 0;
  left: 0;
}

.semi-notification-notice {
  box-shadow: var(--semi-shadow-elevated);
  border-radius: var(--semi-border-radius-medium);
  padding-top: 16px;
  padding-right: 12px;
  padding-bottom: 16px;
  padding-left: 20px;
  margin: 20px;
  width: auto;
  min-width: 320px;
  background-color: var(--semi-color-bg-3);
  position: relative;
  display: flex;
  pointer-events: auto;
}
.semi-notification-notice-icon {
  width: 24px;
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  margin-right: 12px;
}
.semi-notification-notice-info {
  color: var(--semi-color-info);
}
.semi-notification-notice-warning {
  color: var(--semi-color-warning);
}
.semi-notification-notice-error {
  color: var(--semi-color-danger);
}
.semi-notification-notice-success {
  color: var(--semi-color-success);
}
.semi-notification-notice-light.semi-notification-notice-warning {
  background-image: linear-gradient(0deg, var(--semi-color-warning-light-default), var(--semi-color-warning-light-default));
  background-color: var(--semi-color-bg-0);
  border: 1px solid var(--semi-color-warning);
}
.semi-notification-notice-light.semi-notification-notice-success {
  background-image: linear-gradient(0deg, var(--semi-color-success-light-default), var(--semi-color-success-light-default));
  background-color: var(--semi-color-bg-0);
  border: 1px solid var(--semi-color-success);
}
.semi-notification-notice-light.semi-notification-notice-info, .semi-notification-notice-light.semi-notification-notice-default {
  background-image: linear-gradient(0deg, var(--semi-color-info-light-default), var(--semi-color-info-light-default));
  background-color: var(--semi-color-bg-0);
  border: 1px solid var(--semi-color-info);
}
.semi-notification-notice-light.semi-notification-notice-error {
  background-image: linear-gradient(0deg, var(--semi-color-danger-light-default), var(--semi-color-danger-light-default));
  background-color: var(--semi-color-bg-0);
  border: 1px solid var(--semi-color-danger);
}
.semi-notification-notice-title {
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--semi-color-text-0);
  margin-bottom: 4px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.semi-notification-notice-inner {
  display: flex;
  width: 100%;
  min-width: 0;
}
.semi-notification-notice-content-wrapper {
  flex: 1 1 auto;
  margin-right: 8px;
  min-width: 0;
}
.semi-notification-notice-content {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--semi-color-text-1);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.semi-notification-notice-icon-close {
  height: 24px;
}
.semi-notification-notice-icon-close .semi-icon-close {
  color: var(--semi-color-text-2);
}
.semi-notification-notice-controls {
  display: flex;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.semi-notification-notice-detail {
  text-align: center;
  flex-grow: 1;
}
.semi-notification-notice-later {
  text-align: center;
  flex-grow: 1;
}
@keyframes semi-notification-slideShow_top {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes semi-notification-slideHide_top {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes semi-notification-slideShow_topLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes semi-notification-slideHide_topLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes semi-notification-slideShow_topRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes semi-notification-slideHide_topRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes semi-notification-slideShow_bottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes semi-notification-slideHide_bottom {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
@keyframes semi-notification-slideShow_bottomLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes semi-notification-slideHide_bottomLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes semi-notification-slideShow_bottomRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes semi-notification-slideHide_bottomRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
.semi-notification-notice-animation-show_top {
  animation: semi-notification-slideShow_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_top {
  animation: semi-notification-slideHide_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-show_topLeft {
  animation: semi-notification-slideShow_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_topLeft {
  animation: semi-notification-slideHide_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-show_topRight {
  animation: semi-notification-slideShow_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_topRight {
  animation: semi-notification-slideHide_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-show_bottom {
  animation: semi-notification-slideShow_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_bottom {
  animation: semi-notification-slideHide_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-show_bottomLeft {
  animation: semi-notification-slideShow_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_bottomLeft {
  animation: semi-notification-slideHide_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-show_bottomRight {
  animation: semi-notification-slideShow_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}
.semi-notification-notice-animation-hide_bottomRight {
  animation: semi-notification-slideHide_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
  animation-fill-mode: forwards;
}

.semi-notification-notice.semi-notification-notice-rtl {
  padding-right: 20px;
  padding-left: 12px;
}
.semi-notification-notice-rtl {
  direction: rtl;
}
.semi-notification-notice-rtl .semi-notification-notice-icon {
  margin-right: 12px;
}
.semi-notification-notice-rtl .semi-notification-notice-content-wrapper {
  margin-right: 8px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-popconfirm {
  box-sizing: border-box;
  max-width: 400px;
}
.semi-popconfirm-inner {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 24px 20px;
  position: relative;
}
.semi-popconfirm-header {
  display: flex;
  justify-content: flex-start;
}
.semi-popconfirm-header-title {
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--semi-color-text-0);
}
.semi-popconfirm-header-icon {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}
.semi-popconfirm-header .semi-icon-alert_triangle {
  color: var(--semi-color-warning);
}
.semi-popconfirm-header-body {
  display: inline-flex;
  flex-grow: 1;
  flex-direction: column;
}
.semi-popconfirm-body {
  color: var(--semi-color-text-2);
}
.semi-popconfirm-body-withIcon {
  margin-left: 36px;
}
.semi-popconfirm-body > p {
  margin: 0;
  padding: 0;
}
.semi-popconfirm-footer {
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
}
.semi-popconfirm-footer > .semi-button:first-child:not(:last-child) {
  margin-right: 8px;
}
.semi-popconfirm-popover {
  border-radius: var(--semi-border-radius-medium);
}

.semi-popover-with-arrow .semi-popconfirm-inner {
  padding: 12px 12px 12px 8px;
}

.semi-popconfirm-rtl {
  direction: rtl;
}
.semi-popconfirm-rtl .semi-popconfirm-inner {
  padding: 24px 20px 24px 24px;
}
.semi-popconfirm-rtl .semi-popconfirm-header {
  margin-right: 0;
}
.semi-popconfirm-rtl .semi-popconfirm-header-icon {
  margin-right: 0;
  margin-left: 12px;
}
.semi-popconfirm-rtl .semi-popconfirm-footer {
  justify-content: flex-end;
}
.semi-popconfirm-rtl .semi-popconfirm-footer > .semi-button:first-child:not(:last-child) {
  margin-right: 0;
  margin-left: 8px;
}

.semi-popover-with-arrow.semi-popconfirm-rtl {
  direction: rtl;
}
.semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner {
  padding: 12px 8px 12px 12px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-progress {
  display: flex;
  align-items: center;
}
.semi-progress-track {
  background-color: var(--semi-color-fill-0);
  border-radius: var(--semi-border-radius-small);
}
.semi-progress-horizontal {
  height: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.semi-progress-horizontal.semi-progress-large {
  height: 6px;
}
.semi-progress-horizontal .semi-progress-track {
  height: 100%;
  width: 100%;
}
.semi-progress-horizontal .semi-progress-track-inner {
  height: 100%;
  background-color: var(--semi-color-success);
  border-radius: var(--semi-border-radius-small);
  transition: width 0.3s;
  transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
}
.semi-progress-horizontal .semi-progress-line-text {
  min-width: 45px;
  font-weight: 600;
  margin-left: 16px;
  color: var(--semi-color-text-0);
}
.semi-progress-vertical {
  width: 4px;
  display: inline-flex;
  height: 100%;
  margin-left: 4px;
  margin-right: 4px;
  flex-direction: column;
}
.semi-progress-vertical.semi-progress-large {
  width: 6px;
}
.semi-progress-vertical .semi-progress-track {
  height: 100%;
  width: 100%;
}
.semi-progress-vertical .semi-progress-track-inner {
  background-color: var(--semi-color-success);
  border-radius: var(--semi-border-radius-small);
  width: 100%;
  transition: height 0.3s;
  transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
}
.semi-progress-vertical .semi-progress-line-text {
  font-weight: 600;
  margin-top: 8px;
}
.semi-progress-circle {
  position: relative;
  display: inline-block;
}
.semi-progress-circle-ring {
  display: block;
}
.semi-progress-circle-ring-inner {
  transition: stroke-dashoffset 0.3s;
  transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.semi-progress-circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%, -50%);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--semi-color-mode-minor-text);
}

.semi-rtl .semi-progress,
.semi-portal-rtl .semi-progress {
  direction: rtl;
}
.semi-rtl .semi-progress-horizontal .semi-progress-line-text,
.semi-portal-rtl .semi-progress-horizontal .semi-progress-line-text {
  margin-left: 0;
  margin-right: 16px;
}
.semi-rtl .semi-progress-circle-ring-inner,
.semi-portal-rtl .semi-progress-circle-ring-inner {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.semi-rtl .semi-progress-circle-text,
.semi-portal-rtl .semi-progress-circle-text {
  left: auto;
  right: 50%;
  transform: translate(50%, -50%);
}
/* shadow */
/* sizing */
/* spacing */
.semi-avatar {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
.semi-avatar:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-avatar-focus {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-avatar-no-focus-visible:focus-visible {
  outline: none;
}
.semi-avatar .semi-avatar-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}
.semi-avatar-content {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-avatar-extra-extra-small {
  width: 20px;
  height: 20px;
  border-radius: 3px;
}
.semi-avatar-extra-extra-small .semi-avatar-content {
  transform-origin: center;
  transform: scale(0.8);
}
.semi-avatar-extra-extra-small .semi-avatar-label {
  font-size: 10px;
  line-height: 15px;
}
.semi-avatar-extra-small {
  width: 24px;
  height: 24px;
  border-radius: 3px;
}
.semi-avatar-extra-small .semi-avatar-content {
  transform-origin: center;
  transform: scale(0.8);
}
.semi-avatar-extra-small .semi-avatar-label {
  font-size: 10px;
  line-height: 15px;
}
.semi-avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 3px;
}
.semi-avatar-small .semi-avatar-label {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.semi-avatar-default {
  width: 40px;
  height: 40px;
  border-radius: 3px;
}
.semi-avatar-default .semi-avatar-label {
  font-size: 18px;
  line-height: 24px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.semi-avatar-medium {
  width: 48px;
  height: 48px;
  border-radius: 3px;
}
.semi-avatar-medium .semi-avatar-label {
  font-size: 20px;
  line-height: 28px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.semi-avatar-large {
  width: 72px;
  height: 72px;
  border-radius: 6px;
}
.semi-avatar-large .semi-avatar-label {
  font-size: 32px;
  line-height: 44px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.semi-avatar-extra-large {
  width: 128px;
  height: 128px;
  border-radius: 12px;
}
.semi-avatar-extra-large .semi-avatar-label {
  font-size: 64px;
  line-height: 77px;
}
.semi-avatar-circle {
  border-radius: var(--semi-border-radius-circle);
}
.semi-avatar-image {
  background-color: transparent;
}
.semi-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.semi-avatar-hover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.semi-avatar:hover {
  cursor: pointer;
}

.semi-avatar-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg {
  position: absolute;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg-small {
  width: 32px;
  height: 32px;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg-default {
  width: 40px;
  height: 40px;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg-medium {
  width: 48px;
  height: 48px;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg-large {
  width: 72px;
  height: 72px;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg-extra-large {
  width: 128px;
  height: 128px;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg {
  position: absolute;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-small {
  top: -28px;
  scale: 0.4;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-default {
  top: -32px;
  scale: 0.7;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-medium {
  top: -30px;
  scale: 0.8;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-large {
  top: -30px;
  scale: 1.1;
}
.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-extra-large {
  top: -32px;
  scale: 1.4;
}
.semi-avatar-wrapper .semi-avatar-top_slot-wrapper {
  position: absolute;
  display: flex;
  justify-content: center;
}
.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot {
  color: var(--semi-color-bg-0);
  font-weight: 600;
}
.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  line-height: normal;
}
.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-small {
  font-size: 5px;
  margin-top: 0px;
}
.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-default {
  font-size: 6px;
  margin-top: -2px;
}
.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-medium {
  font-size: 8px;
  margin-top: 0px;
}
.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-large {
  font-size: 14px;
  margin-top: 0px;
}
.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-extra-large {
  font-size: 16px;
  margin-top: 0px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot {
  color: var(--semi-color-bg-0);
  position: absolute;
  cursor: pointer;
  bottom: 3.5px;
  transform: translateY(50%);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--semi-color-primary);
  border-radius: var(--semi-border-radius-circle);
  line-height: normal;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-extra-small {
  width: 12px;
  height: 12px;
  font-size: 5px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-small {
  width: 12px;
  height: 12px;
  font-size: 5px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-default {
  width: 16px;
  height: 16px;
  font-size: 12px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-medium {
  width: 18px;
  height: 18px;
  font-size: 12px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-large {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-extra-large {
  width: 28px;
  height: 28px;
  font-size: 14px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--semi-color-primary);
  border-radius: 4px;
  padding: 1px 4px;
  font-weight: 600;
  border-style: solid;
  border-color: var(--semi-color-bg-0);
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-extra_small {
  font-size: 5px;
  border-width: 2px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-small {
  font-size: 5px;
  border-width: 2px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-default {
  font-size: 12px;
  border-width: 2px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-medium {
  font-size: 12px;
  border-width: 2px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-large {
  font-size: 12px;
  border-width: 2px;
}
.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-extra-large {
  font-size: 14px;
  border-width: 2px;
}

.semi-avatar-group {
  display: inline-block;
}
.semi-avatar-group .semi-avatar {
  box-sizing: border-box;
}
.semi-avatar-group .semi-avatar:first-child {
  margin-left: 0;
}
.semi-avatar-group .semi-avatar-extra-large {
  border: 3px var(--semi-color-bg-1) solid;
  margin-left: -32px;
}
.semi-avatar-group .semi-avatar-large {
  border: 3px var(--semi-color-bg-1) solid;
  margin-left: -18px;
}
.semi-avatar-group .semi-avatar-medium {
  border: 2px var(--semi-color-bg-1) solid;
  margin-left: -12px;
}
.semi-avatar-group .semi-avatar-default {
  border: 2px var(--semi-color-bg-1) solid;
  margin-left: -12px;
}
.semi-avatar-group .semi-avatar-small {
  border: 2px var(--semi-color-bg-1) solid;
  margin-left: -12px;
}
.semi-avatar-group .semi-avatar-extra-small {
  border: 1px var(--semi-color-bg-1) solid;
  margin-left: -10px;
}
.semi-avatar-group .semi-avatar-extra-extra-small {
  border: 1px var(--semi-color-bg-1) solid;
  margin-left: -4px;
}
.semi-avatar-group .semi-avatar-item-start-0 {
  z-index: 100;
}
.semi-avatar-group .semi-avatar-item-end-0 {
  z-index: 80;
}
.semi-avatar-group .semi-avatar-item-start-1 {
  z-index: 99;
}
.semi-avatar-group .semi-avatar-item-end-1 {
  z-index: 81;
}
.semi-avatar-group .semi-avatar-item-start-2 {
  z-index: 98;
}
.semi-avatar-group .semi-avatar-item-end-2 {
  z-index: 82;
}
.semi-avatar-group .semi-avatar-item-start-3 {
  z-index: 97;
}
.semi-avatar-group .semi-avatar-item-end-3 {
  z-index: 83;
}
.semi-avatar-group .semi-avatar-item-start-4 {
  z-index: 96;
}
.semi-avatar-group .semi-avatar-item-end-4 {
  z-index: 84;
}
.semi-avatar-group .semi-avatar-item-start-5 {
  z-index: 95;
}
.semi-avatar-group .semi-avatar-item-end-5 {
  z-index: 85;
}
.semi-avatar-group .semi-avatar-item-start-6 {
  z-index: 94;
}
.semi-avatar-group .semi-avatar-item-end-6 {
  z-index: 86;
}
.semi-avatar-group .semi-avatar-item-start-7 {
  z-index: 93;
}
.semi-avatar-group .semi-avatar-item-end-7 {
  z-index: 87;
}
.semi-avatar-group .semi-avatar-item-start-8 {
  z-index: 92;
}
.semi-avatar-group .semi-avatar-item-end-8 {
  z-index: 88;
}
.semi-avatar-group .semi-avatar-item-start-9 {
  z-index: 91;
}
.semi-avatar-group .semi-avatar-item-end-9 {
  z-index: 89;
}
.semi-avatar-group .semi-avatar-item-start-10 {
  z-index: 90;
}
.semi-avatar-group .semi-avatar-item-end-10 {
  z-index: 90;
}
.semi-avatar-group .semi-avatar-item-start-11 {
  z-index: 89;
}
.semi-avatar-group .semi-avatar-item-end-11 {
  z-index: 91;
}
.semi-avatar-group .semi-avatar-item-start-12 {
  z-index: 88;
}
.semi-avatar-group .semi-avatar-item-end-12 {
  z-index: 92;
}
.semi-avatar-group .semi-avatar-item-start-13 {
  z-index: 87;
}
.semi-avatar-group .semi-avatar-item-end-13 {
  z-index: 93;
}
.semi-avatar-group .semi-avatar-item-start-14 {
  z-index: 86;
}
.semi-avatar-group .semi-avatar-item-end-14 {
  z-index: 94;
}
.semi-avatar-group .semi-avatar-item-start-15 {
  z-index: 85;
}
.semi-avatar-group .semi-avatar-item-end-15 {
  z-index: 95;
}
.semi-avatar-group .semi-avatar-item-start-16 {
  z-index: 84;
}
.semi-avatar-group .semi-avatar-item-end-16 {
  z-index: 96;
}
.semi-avatar-group .semi-avatar-item-start-17 {
  z-index: 83;
}
.semi-avatar-group .semi-avatar-item-end-17 {
  z-index: 97;
}
.semi-avatar-group .semi-avatar-item-start-18 {
  z-index: 82;
}
.semi-avatar-group .semi-avatar-item-end-18 {
  z-index: 98;
}
.semi-avatar-group .semi-avatar-item-start-19 {
  z-index: 81;
}
.semi-avatar-group .semi-avatar-item-end-19 {
  z-index: 99;
}
.semi-avatar-group .semi-avatar-item-start-20 {
  z-index: 80;
}
.semi-avatar-group .semi-avatar-item-end-20 {
  z-index: 100;
}
.semi-avatar-group .semi-avatar-item-more {
  background-color: rgba(var(--semi-grey-5), 1);
}

.semi-avatar-amber {
  background-color: rgba(var(--semi-amber-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-blue {
  background-color: rgba(var(--semi-blue-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-cyan {
  background-color: rgba(var(--semi-cyan-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-green {
  background-color: rgba(var(--semi-green-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-grey {
  background-color: rgba(var(--semi-grey-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-indigo {
  background-color: rgba(var(--semi-indigo-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-light-blue {
  background-color: rgba(var(--semi-light-blue-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-light-green {
  background-color: rgba(var(--semi-light-green-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-lime {
  background-color: rgba(var(--semi-lime-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-orange {
  background-color: rgba(var(--semi-orange-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-pink {
  background-color: rgba(var(--semi-pink-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-purple {
  background-color: rgba(var(--semi-purple-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-red {
  background-color: rgba(var(--semi-red-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-teal {
  background-color: rgba(var(--semi-teal-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-violet {
  background-color: rgba(var(--semi-violet-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-yellow {
  background-color: rgba(var(--semi-yellow-3), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-avatar-additionalBorder {
  border-style: solid;
  border-color: var(--semi-color-primary);
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  border-width: 1.5px;
  top: -3.5px;
  left: -3.5px;
}
.semi-avatar-additionalBorder-extra-extra-small {
  width: 27px;
  height: 27px;
}
.semi-avatar-additionalBorder-extra-small {
  width: 31px;
  height: 31px;
}
.semi-avatar-additionalBorder-small {
  width: 39px;
  height: 39px;
}
.semi-avatar-additionalBorder-default {
  width: 47px;
  height: 47px;
}
.semi-avatar-additionalBorder-medium {
  width: 55px;
  height: 55px;
}
.semi-avatar-additionalBorder-large {
  width: 79px;
  height: 79px;
}
.semi-avatar-additionalBorder-extra-large {
  width: 135px;
  height: 135px;
}

.semi-avatar-square.semi-avatar-additionalBorder-extra_extra_small {
  border-radius: 3px;
}

.semi-avatar-square.semi-avatar-additionalBorder-extra_small {
  border-radius: 3px;
}

.semi-avatar-square.semi-avatar-additionalBorder-small {
  border-radius: 3px;
}

.semi-avatar-square.semi-avatar-additionalBorder-default {
  border-radius: 3px;
}

.semi-avatar-square.semi-avatar-additionalBorder-medium {
  border-radius: 3px;
}

.semi-avatar-square.semi-avatar-additionalBorder-large {
  border-radius: 6px;
}

.semi-avatar-additionalBorder-circle {
  border-radius: var(--semi-border-radius-circle);
}

.semi-avatar-additionalBorder-animated {
  animation: 800ms linear infinite semi-avatar-additionalBorder;
}

.semi-avatar-animated {
  animation: 1000ms linear infinite semi-avatar-content;
}

@keyframes semi-avatar-additionalBorder {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  to {
    border-width: 0;
    opacity: 0;
    transform: scale(1.15);
  }
}
@keyframes semi-avatar-content {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}
.semi-rtl .semi-avatar,
.semi-portal-rtl .semi-avatar {
  direction: rtl;
}
.semi-rtl .semi-avatar-extra-extra-small .semi-avatar-content,
.semi-portal-rtl .semi-avatar-extra-extra-small .semi-avatar-content {
  transform: scale(0.8);
}
.semi-rtl .semi-avatar-extra-small .semi-avatar-content,
.semi-portal-rtl .semi-avatar-extra-small .semi-avatar-content {
  transform: scale(0.8);
}
.semi-rtl .semi-avatar-hover,
.semi-portal-rtl .semi-avatar-hover {
  left: auto;
  right: 0;
}
.semi-rtl .semi-avatar-group,
.semi-portal-rtl .semi-avatar-group {
  direction: rtl;
}
.semi-rtl .semi-avatar-group .semi-avatar:first-child,
.semi-portal-rtl .semi-avatar-group .semi-avatar:first-child {
  margin-left: auto;
  margin-right: 0;
}
.semi-rtl .semi-avatar-group .semi-avatar-extra-large,
.semi-portal-rtl .semi-avatar-group .semi-avatar-extra-large {
  margin-left: auto;
  margin-right: -32px;
}
.semi-rtl .semi-avatar-group .semi-avatar-large,
.semi-portal-rtl .semi-avatar-group .semi-avatar-large {
  margin-left: auto;
  margin-right: -18px;
}
.semi-rtl .semi-avatar-group .semi-avatar-medium,
.semi-rtl .semi-avatar-group .semi-avatar-small,
.semi-portal-rtl .semi-avatar-group .semi-avatar-medium,
.semi-portal-rtl .semi-avatar-group .semi-avatar-small {
  margin-left: auto;
  margin-right: -12px;
}
.semi-rtl .semi-avatar-group .semi-avatar-extra-small,
.semi-portal-rtl .semi-avatar-group .semi-avatar-extra-small {
  margin-left: auto;
  margin-right: -10px;
}
.semi-rtl .semi-avatar-group .semi-avatar-extra-extra-small,
.semi-portal-rtl .semi-avatar-group .semi-avatar-extra-extra-small {
  margin-left: auto;
  margin-right: -4px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-tag {
  box-sizing: border-box;
  border-radius: var(--semi-border-radius-small);
  background-color: transparent;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  display: flex;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.semi-tag-default, .semi-tag-small {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 20px;
  padding: 2px 8px;
}
.semi-tag-default:focus-visible, .semi-tag-small:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-tag-square {
  border-radius: var(--semi-border-radius-small);
}
.semi-tag-circle {
  border-radius: var(--semi-border-radius-full);
}
.semi-tag-large {
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 4px 8px;
  height: 24px;
}
.semi-tag-large:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-tag-invisible {
  display: none;
}
.semi-tag-prefix-icon {
  display: flex;
  padding-right: 4px;
}
.semi-tag-suffix-icon {
  display: flex;
  padding-left: 4px;
}
.semi-tag-content {
  flex: 1 1;
}
.semi-tag-content-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.semi-tag-content-center {
  display: flex;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-width: 0;
}
.semi-tag-close {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--semi-color-text-2);
  padding-left: 4px;
  cursor: pointer;
}
.semi-tag-close:hover {
  color: var(--semi-color-text-1);
}
.semi-tag-close:active {
  color: var(--semi-color-text-0);
}
.semi-tag-closable {
  padding: 4px 4px 4px 8px;
}
.semi-tag-avatar-square .semi-avatar, .semi-tag-avatar-circle .semi-avatar {
  margin-right: 4px;
}
.semi-tag-avatar-square {
  padding: 0 4px 0 0;
}
.semi-tag-avatar-square .semi-avatar > img {
  background-color: var(--semi-color-default);
}
.semi-tag-avatar-circle {
  padding: 2px 4px 2px 2px;
}
.semi-tag-avatar-square.semi-tag-default .semi-avatar, .semi-tag-avatar-square.semi-tag-small .semi-avatar {
  width: 20px;
  height: 20px;
}
.semi-tag-avatar-square.semi-tag-large .semi-avatar {
  width: 24px;
  height: 24px;
}
.semi-tag-avatar-circle.semi-tag-small, .semi-tag-avatar-circle.semi-tag-default {
  border-radius: 11px;
}
.semi-tag-avatar-circle.semi-tag-small .semi-avatar, .semi-tag-avatar-circle.semi-tag-default .semi-avatar {
  width: 16px;
  height: 16px;
}
.semi-tag-avatar-circle.semi-tag-large {
  border-radius: 13px;
}
.semi-tag-avatar-circle.semi-tag-large .semi-avatar {
  width: 20px;
  height: 20px;
}

.semi-tag-group {
  display: block;
  height: auto;
}
.semi-tag-group .semi-tag {
  margin-bottom: 0;
  margin-right: 8px;
}
.semi-tag-group-max.semi-tag-group-small {
  height: 22px;
}
.semi-tag-group-max.semi-tag-group-large {
  height: 26px;
}

.semi-tag-rest-group-popover .semi-tag {
  margin-right: 8px;
  margin-bottom: 0;
}
.semi-tag-rest-group-popover .semi-tag:last-of-type {
  margin-right: 0;
}

.semi-tag-amber-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-amber-4), 1);
  color: rgba(var(--semi-amber-5), 1);
}

.semi-tag-amber-solid {
  background-color: rgba(var(--semi-amber-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-amber-light {
  background-color: rgba(var(--semi-amber-5), 0.15);
  color: rgba(var(--semi-amber-8), 1);
}

.semi-tag-blue-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-blue-4), 1);
  color: rgba(var(--semi-blue-5), 1);
}

.semi-tag-blue-solid {
  background-color: rgba(var(--semi-blue-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-blue-light {
  background-color: rgba(var(--semi-blue-5), 0.15);
  color: rgba(var(--semi-blue-8), 1);
}

.semi-tag-cyan-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-cyan-4), 1);
  color: rgba(var(--semi-cyan-5), 1);
}

.semi-tag-cyan-solid {
  background-color: rgba(var(--semi-cyan-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-cyan-light {
  background-color: rgba(var(--semi-cyan-5), 0.15);
  color: rgba(var(--semi-cyan-8), 1);
}

.semi-tag-green-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-green-4), 1);
  color: rgba(var(--semi-green-5), 1);
}

.semi-tag-green-solid {
  background-color: rgba(var(--semi-green-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-green-light {
  background-color: rgba(var(--semi-green-5), 0.15);
  color: rgba(var(--semi-green-8), 1);
}

.semi-tag-grey-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-grey-4), 1);
  color: rgba(var(--semi-grey-5), 1);
}

.semi-tag-grey-solid {
  background-color: rgba(var(--semi-grey-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-grey-light {
  background-color: rgba(var(--semi-grey-5), 0.15);
  color: rgba(var(--semi-grey-8), 1);
}

.semi-tag-indigo-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-indigo-4), 1);
  color: rgba(var(--semi-indigo-5), 1);
}

.semi-tag-indigo-solid {
  background-color: rgba(var(--semi-indigo-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-indigo-light {
  background-color: rgba(var(--semi-indigo-5), 0.15);
  color: rgba(var(--semi-indigo-8), 1);
}

.semi-tag-light-blue-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-light-blue-4), 1);
  color: rgba(var(--semi-light-blue-5), 1);
}

.semi-tag-light-blue-solid {
  background-color: rgba(var(--semi-light-blue-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-light-blue-light {
  background-color: rgba(var(--semi-light-blue-5), 0.15);
  color: rgba(var(--semi-light-blue-8), 1);
}

.semi-tag-light-green-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-light-green-4), 1);
  color: rgba(var(--semi-light-green-5), 1);
}

.semi-tag-light-green-solid {
  background-color: rgba(var(--semi-light-green-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-light-green-light {
  background-color: rgba(var(--semi-light-green-5), 0.15);
  color: rgba(var(--semi-light-green-8), 1);
}

.semi-tag-lime-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-lime-4), 1);
  color: rgba(var(--semi-lime-5), 1);
}

.semi-tag-lime-solid {
  background-color: rgba(var(--semi-lime-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-lime-light {
  background-color: rgba(var(--semi-lime-5), 0.15);
  color: rgba(var(--semi-lime-8), 1);
}

.semi-tag-orange-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-orange-4), 1);
  color: rgba(var(--semi-orange-5), 1);
}

.semi-tag-orange-solid {
  background-color: rgba(var(--semi-orange-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-orange-light {
  background-color: rgba(var(--semi-orange-5), 0.15);
  color: rgba(var(--semi-orange-8), 1);
}

.semi-tag-pink-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-pink-4), 1);
  color: rgba(var(--semi-pink-5), 1);
}

.semi-tag-pink-solid {
  background-color: rgba(var(--semi-pink-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-pink-light {
  background-color: rgba(var(--semi-pink-5), 0.15);
  color: rgba(var(--semi-pink-8), 1);
}

.semi-tag-purple-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-purple-4), 1);
  color: rgba(var(--semi-purple-5), 1);
}

.semi-tag-purple-solid {
  background-color: rgba(var(--semi-purple-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-purple-light {
  background-color: rgba(var(--semi-purple-5), 0.15);
  color: rgba(var(--semi-purple-8), 1);
}

.semi-tag-red-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-red-4), 1);
  color: rgba(var(--semi-red-5), 1);
}

.semi-tag-red-solid {
  background-color: rgba(var(--semi-red-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-red-light {
  background-color: rgba(var(--semi-red-5), 0.15);
  color: rgba(var(--semi-red-8), 1);
}

.semi-tag-teal-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-teal-4), 1);
  color: rgba(var(--semi-teal-5), 1);
}

.semi-tag-teal-solid {
  background-color: rgba(var(--semi-teal-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-teal-light {
  background-color: rgba(var(--semi-teal-5), 0.15);
  color: rgba(var(--semi-teal-8), 1);
}

.semi-tag-violet-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-violet-4), 1);
  color: rgba(var(--semi-violet-5), 1);
}

.semi-tag-violet-solid {
  background-color: rgba(var(--semi-violet-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-violet-light {
  background-color: rgba(var(--semi-violet-5), 0.15);
  color: rgba(var(--semi-violet-8), 1);
}

.semi-tag-yellow-ghost {
  background-color: transparent;
  border: 1px solid rgba(var(--semi-yellow-4), 1);
  color: rgba(var(--semi-yellow-5), 1);
}

.semi-tag-yellow-solid {
  background-color: rgba(var(--semi-yellow-5), 1);
  color: rgba(var(--semi-white), 1);
}

.semi-tag-yellow-light {
  background-color: rgba(var(--semi-yellow-5), 0.15);
  color: rgba(var(--semi-yellow-8), 1);
}

.semi-tag-white-ghost {
  background-color: var(--semi-color-bg-4);
  border: 1px solid rgba(var(--semi-grey-2), 0.7);
  color: var(--semi-color-text-0);
}

.semi-tag-white-solid {
  background-color: var(--semi-color-bg-4);
  border: 1px solid rgba(var(--semi-grey-2), 0.7);
  color: var(--semi-color-text-0);
}

.semi-tag-white-light {
  background-color: var(--semi-color-bg-4);
  border: 1px solid rgba(var(--semi-grey-2), 0.7);
  color: var(--semi-color-text-0);
}

.semi-tag-white-ghost .semi-tag-close,
.semi-tag-white-light .semi-tag-close,
.semi-tag-white-solid .semi-tag-close {
  color: var(--semi-color-text-2);
}

.semi-tag-avatar-square,
.semi-tag-avatar-circle {
  background-color: var(--semi-color-bg-4);
  border: 1px solid var(--semi-color-border);
  color: var(--semi-color-text-0);
}

.semi-tag-solid .semi-tag-close {
  color: var(--semi-color-white);
  opacity: 0.8;
}
.semi-tag-solid .semi-tag-close:hover {
  opacity: 1;
}
.semi-tag-solid .semi-tag-close:active {
  opacity: 0.9;
}

.semi-rtl .semi-tag,
.semi-portal-rtl .semi-tag {
  direction: rtl;
}
.semi-rtl .semi-tag-close,
.semi-portal-rtl .semi-tag-close {
  padding-left: auto;
  padding-right: 4px;
}
.semi-rtl .semi-tag-closable,
.semi-portal-rtl .semi-tag-closable {
  padding: 4px 8px 4px 4px;
}
.semi-rtl .semi-tag-avatar-square .semi-avatar, .semi-rtl .semi-tag-avatar-circle .semi-avatar,
.semi-portal-rtl .semi-tag-avatar-square .semi-avatar,
.semi-portal-rtl .semi-tag-avatar-circle .semi-avatar {
  margin-right: auto;
  margin-left: 4px;
}
.semi-rtl .semi-tag-avatar-square,
.semi-portal-rtl .semi-tag-avatar-square {
  padding-right: auto;
  padding-left: 4px;
}
.semi-rtl .semi-tag-avatar-circle,
.semi-portal-rtl .semi-tag-avatar-circle {
  padding: 2px 2px 2px 4px;
}
.semi-rtl .semi-tag-group,
.semi-portal-rtl .semi-tag-group {
  direction: rtl;
}
.semi-rtl .semi-tag-group .semi-tag,
.semi-portal-rtl .semi-tag-group .semi-tag {
  margin-right: auto;
  margin-left: 8px;
}
.semi-rtl .semi-tag-rest-group-popover,
.semi-portal-rtl .semi-tag-rest-group-popover {
  direction: rtl;
}
.semi-rtl .semi-tag-rest-group-popover .semi-tag,
.semi-portal-rtl .semi-tag-rest-group-popover .semi-tag {
  margin-right: 0;
  margin-left: 8px;
}
.semi-rtl .semi-tag-rest-group-popover .semi-tag:last-of-type,
.semi-portal-rtl .semi-tag-rest-group-popover .semi-tag:last-of-type {
  margin-right: auto;
  margin-left: 0;
}
/* shadow */
/* sizing */
/* spacing */
.semi-overflow-list {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
}
.semi-overflow-list-spacer {
  flex-shrink: 1;
  width: 1px;
}
.semi-overflow-list-scroll-wrapper {
  display: flex;
  flex: 1 1;
  flex-wrap: nowrap;
  overflow-x: scroll;
}

.semi-rtl .semi-overflow-list,
.semi-portal-rtl .semi-overflow-list {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-space {
  display: inline-flex;
}
.semi-space-vertical {
  flex-direction: column;
}
.semi-space-horizontal {
  flex-direction: row;
}
.semi-space-align-center {
  align-items: center;
}
.semi-space-align-end {
  align-items: flex-end;
}
.semi-space-align-start {
  align-items: flex-start;
}
.semi-space-align-baseline {
  align-items: baseline;
}
.semi-space-wrap {
  flex-wrap: wrap;
}
.semi-space-tight-horizontal {
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.semi-space-tight-vertical {
  row-gap: 8px;
}
.semi-space-medium-horizontal {
  -moz-column-gap: 16px;
       column-gap: 16px;
}
.semi-space-medium-vertical {
  row-gap: 16px;
}
.semi-space-loose-horizontal {
  -moz-column-gap: 24px;
       column-gap: 24px;
}
.semi-space-loose-vertical {
  row-gap: 24px;
}

.semi-rtl .semi-space,
.semi-portal-rtl .semi-space {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-spin {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
}
@keyframes semi-animation-rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.semi-spin-wrapper {
  text-align: center;
  position: absolute;
  width: 100%;
  transform: translateY(-50%);
  top: 50%;
  color: var(--semi-color-primary);
}
.semi-spin-wrapper > svg {
  display: inline;
  animation: 600ms linear infinite semi-animation-rotate;
  animation-fill-mode: forwards;
  vertical-align: top;
  width: 20px;
  height: 20px;
}
.semi-spin-animate {
  display: inline-flex;
  animation: 1600ms linear infinite semi-animation-rotate;
  animation-fill-mode: forwards;
}
.semi-spin-children {
  opacity: 0.5;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-spin-block {
  display: block;
}
.semi-spin-block::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.semi-spin-block .semi-spin-wrapper {
  display: block;
}
.semi-spin-block.semi-spin {
  height: auto;
  width: auto;
}
.semi-spin-hidden::after {
  content: none;
}
.semi-spin-hidden > .semi-spin-children {
  opacity: 1;
  -webkit-user-select: auto;
     -moz-user-select: auto;
          user-select: auto;
}

.semi-spin-small {
  width: 14px;
  height: 14px;
}
.semi-spin-small > .semi-spin-wrapper svg {
  width: 14px;
  height: 14px;
}

.semi-spin-middle {
  width: 20px;
  height: 20px;
}
.semi-spin-middle > .semi-spin-wrapper svg {
  width: 20px;
  height: 20px;
}

.semi-spin-large {
  width: 32px;
  height: 32px;
}
.semi-spin-large > .semi-spin-wrapper svg {
  width: 32px;
  height: 32px;
}

.semi-spin-container {
  overflow: hidden;
}

.semi-rtl .semi-spin,
.semi-portal-rtl .semi-spin {
  direction: rtl;
}
.semi-rtl .semi-spin-container,
.semi-portal-rtl .semi-spin-container {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-select-option {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  word-break: break-all;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: var(--semi-color-text-0);
  border-radius: 0px;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-select-option-icon {
  width: 12px;
  color: transparent;
  margin-right: 8px;
  display: flex;
  justify-content: center;
  align-content: center;
}
.semi-select-option-text {
  display: flex;
  flex-wrap: wrap;
  white-space: pre;
}
.semi-select-option-keyword {
  color: var(--semi-color-primary);
  background-color: inherit;
  font-weight: 600;
}
.semi-select-option:active {
  background-color: var(--semi-color-fill-1);
}
.semi-select-option-empty {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
  justify-content: center;
}
.semi-select-option-empty:hover {
  background-color: inherit;
}
.semi-select-option-empty:active {
  background-color: inherit;
}
.semi-select-option-disabled {
  color: var(--semi-color-disabled-text);
  cursor: not-allowed;
}
.semi-select-option-disabled:hover {
  background-color: var(--semi-color-fill-0);
}
.semi-select-option-selected {
  font-weight: 600;
  background: transparent;
}
.semi-select-option-selected .semi-select-option-icon {
  color: var(--semi-color-text-2);
}
.semi-select-option-focused {
  background-color: var(--semi-color-fill-0);
}

.semi-select {
  box-sizing: border-box;
  border-radius: var(--semi-border-radius-small);
  border: 1px solid transparent;
  height: 32px;
  font-weight: 400;
  background-color: var(--semi-color-fill-0);
  display: inline-flex;
  vertical-align: middle;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
  max-height: 300px;
  overflow-y: auto;
}
.semi-select:hover {
  background-color: var(--semi-color-fill-1);
  border: 1px solid transparent;
}
.semi-select:focus {
  border: 1px solid var(--semi-color-focus-border);
  background-color: var(--semi-color-fill-0);
  outline: 0;
}
.semi-select:active {
  background-color: var(--semi-color-fill-2);
}
.semi-select-small {
  height: 24px;
  line-height: 24px;
}
.semi-select-large {
  min-height: 40px;
  line-height: 40px;
}
.semi-select-large .semi-select-selection {
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.semi-select-open, .semi-select-focus {
  border: 1px solid var(--semi-color-focus-border);
  outline: 0;
}
.semi-select-open:hover, .semi-select-focus:hover {
  background-color: var(--semi-color-fill-0);
  border: 1px solid var(--semi-color-focus-border);
}
.semi-select-open:active, .semi-select-focus:active {
  background-color: var(--semi-color-fill-2);
  border: 1px solid var(--semi-color-focus-border);
}
.semi-select-warning {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning-light-default);
}
.semi-select-warning:hover {
  background-color: var(--semi-color-warning-light-hover);
  border-color: var(--semi-color-warning-light-hover);
}
.semi-select-warning:focus {
  background-color: var(--semi-color-warning-light-default);
  border-color: var(--semi-color-warning);
}
.semi-select-warning:active {
  background-color: var(--semi-color-warning-light-active);
  border-color: var(--semi-color-warning-light-active);
}
.semi-select-error {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger-light-default);
}
.semi-select-error:hover {
  background-color: var(--semi-color-danger-light-hover);
  border-color: var(--semi-color-danger-light-hover);
}
.semi-select-error:focus {
  background-color: var(--semi-color-danger-light-default);
  border-color: var(--semi-color-danger);
}
.semi-select-error:active {
  background-color: var(--semi-color-danger-light-active);
  border-color: var(--semi-color-danger-light-active);
}
.semi-select-disabled {
  cursor: not-allowed;
  background-color: var(--semi-color-disabled-fill);
}
.semi-select-disabled:hover {
  background-color: var(--semi-color-disabled-fill);
}
.semi-select-disabled:focus {
  border: 1px solid transparent;
  background-color: var(--semi-color-disabled-fill);
}
.semi-select-disabled .semi-select-selection,
.semi-select-disabled .semi-select-selection-placeholder {
  color: var(--semi-color-disabled-text);
  cursor: not-allowed;
}
.semi-select-disabled .semi-select-arrow,
.semi-select-disabled .semi-select-prefix,
.semi-select-disabled .semi-select-suffix {
  color: var(--semi-color-disabled-text);
}
.semi-select-disabled .semi-tag {
  color: var(--semi-color-disabled-text);
  background-color: transparent;
}
.semi-select-selection {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 100%;
  display: flex;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;
  margin-left: 12px;
  cursor: pointer;
  color: var(--semi-color-text-0);
}
.semi-select-selection-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.semi-select-selection-text-inactive {
  display: flex;
  opacity: 0.4;
}
.semi-select-selection-text-hide {
  display: none;
}
.semi-select-selection-placeholder {
  color: var(--semi-color-text-2);
}
.semi-select-selection .semi-tag {
  margin-top: 1px;
  margin-right: 4px;
  margin-bottom: 1px;
}
.semi-select-selection .semi-tag:nth-of-type(1) {
  margin-left: 0;
}
.semi-select-selection .semi-tag-group {
  height: inherit;
}
.semi-select-selection .semi-tag-group .semi-tag {
  margin-top: 1px;
  margin-right: 4px;
  margin-bottom: 1px;
}
.semi-select-content-wrapper {
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 100%;
}
.semi-select-content-wrapper-collapse {
  display: inline-flex;
  flex-shrink: 0;
  width: 100%;
}
.semi-select-content-wrapper-collapse .semi-overflow-list-overflow {
  max-width: 100%;
  min-width: 50px;
}
.semi-select-content-wrapper-collapse > .semi-select-content-wrapper-collapse-tag {
  background-color: transparent;
}
.semi-select-content-wrapper-collapse > .semi-select-content-wrapper-collapse-N {
  background-color: transparent;
  padding: 4px;
  color: var(--semi-color-text-0);
  font-size: 12px;
}
.semi-select-multiple {
  height: auto;
}
.semi-select-multiple .semi-select-selection {
  margin-left: 4px;
}
.semi-select-multiple .semi-select-content-wrapper {
  width: 100%;
  min-height: 30px;
  flex-wrap: wrap;
}
.semi-select-multiple .semi-select-content-wrapper-empty {
  margin-left: 8px;
}
.semi-select-multiple .semi-select-content-wrapper .semi-tag-group {
  display: flex;
  align-items: center;
}
.semi-select-multiple .semi-select-content-wrapper-one-line {
  flex-wrap: nowrap;
}
.semi-select-multiple .semi-select-content-wrapper-one-line .semi-tag-group {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow: hidden;
  flex-shrink: 0;
}
.semi-select-multiple .semi-select-inline-label-wrapper {
  flex-shrink: 0;
}
.semi-select-multiple.semi-select-large .semi-select-content-wrapper {
  min-height: 38px;
}
.semi-select-multiple.semi-select-small .semi-select-content-wrapper {
  min-height: 22px;
}
.semi-select-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  color: var(--semi-color-text-2);
  flex-shrink: 0;
  transform: rotate(var(--semi-transform-rotate-none));
}
.semi-select-arrow-empty {
  display: flex;
  width: 12px;
}
.semi-select-prefix, .semi-select-suffix {
  display: flex;
  justify-content: center;
  align-items: center;
}
.semi-select-prefix-text, .semi-select-suffix-text {
  margin: 0px 12px;
}
.semi-select-prefix-icon, .semi-select-suffix-icon {
  color: var(--semi-color-text-2);
  margin: 0px 8px;
}
.semi-select-suffix {
  display: flex;
  justify-content: center;
  align-items: center;
}
.semi-select-clear {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  color: var(--semi-color-text-2);
  flex-shrink: 0;
}
.semi-select-clear:hover {
  color: var(--semi-color-primary);
}
.semi-select-inset-label-wrapper {
  display: inline;
}
.semi-select-inset-label {
  margin-right: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--semi-color-text-2);
  flex-shrink: 0;
  white-space: nowrap;
}
.semi-select-create-tips {
  color: var(--semi-color-text-2);
  margin-right: 4px;
}

.semi-select-with-prefix .semi-select-selection {
  margin-left: 0;
}

.semi-select-single.semi-select-filterable .semi-select-content-wrapper {
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.semi-select-single.semi-select-filterable .semi-input-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: none;
  background-color: transparent;
}
.semi-select-single.semi-select-filterable .semi-input-wrapper-focus {
  border: none;
}
.semi-select-single.semi-select-filterable .semi-input {
  padding-left: 0;
  padding-right: 0;
  height: 100%;
}

.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper {
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper {
  height: 24px;
  line-height: 24px;
}
.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper .semi-input-default {
  height: 24px;
}
.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper .semi-input-default {
  height: 100%;
}
.semi-select-multiple.semi-select-filterable .semi-input-wrapper {
  height: 100%;
  width: 100%;
  border: none;
  background-color: transparent;
}
.semi-select-multiple.semi-select-filterable .semi-input-wrapper-focus {
  border: none;
}
.semi-select-multiple.semi-select-filterable .semi-input {
  padding-left: 0;
  padding-right: 0;
}

.semi-select-multiple.semi-select-filterable.semi-select-large .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper-large {
  height: 24px;
  line-height: 24px;
}
.semi-select-multiple.semi-select-filterable.semi-select-large .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper-large .semi-input-large {
  height: 24px;
}

.semi-select-multiple.semi-select-filterable.semi-select-small .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper {
  height: 20px;
  line-height: 20px;
}
.semi-select-multiple.semi-select-filterable.semi-select-small .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper .semi-input-small {
  height: 20px;
}

.semi-select-option-list-wrapper {
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 0px;
  padding-right: 0px;
}

.semi-select-option-list {
  overflow-x: hidden;
  overflow-y: auto;
}
.semi-select-option-list-chosen .semi-select-option-icon {
  display: flex;
}

.semi-select-group {
  color: var(--semi-color-text-2);
  padding-top: 12px;
  margin-top: 4px;
  padding-bottom: 4px;
  padding-left: 32px;
  padding-right: 16px;
  font-size: 12px;
  line-height: 16px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: default;
}
.semi-select-group:not(:nth-of-type(1)) {
  border-top: 1px solid var(--semi-color-border);
}

.semi-select-loading-wrapper {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  cursor: not-allowed;
  height: 20px;
  box-sizing: content-box;
}

.semi-select-borderless:not(:focus-within):not(:hover) {
  background-color: transparent;
  border-color: transparent;
}
.semi-select-borderless:not(:focus-within):not(:hover) .semi-select-arrow {
  opacity: 0;
}
.semi-select-borderless:focus-within:not(:active) {
  background-color: transparent;
}
.semi-select-borderless.semi-select-error:not(:focus-within) {
  border-color: var(--semi-color-danger);
}
.semi-select-borderless.semi-select-warning:not(:focus-within) {
  border-color: var(--semi-color-warning);
}
.semi-select-borderless.semi-select-error:focus-within {
  border-color: var(--semi-color-danger);
}
.semi-select-borderless.semi-select-warning:focus-within {
  border-color: var(--semi-color-warning);
}

.semi-select-dropdown-search-wrapper {
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  padding-top: 8px;
  padding-left: 12px;
  border-bottom: 1px solid transparent;
}

.semi-rtl .semi-select,
.semi-portal-rtl .semi-select {
  direction: rtl;
}
.semi-rtl .semi-select-selection,
.semi-portal-rtl .semi-select-selection {
  margin-left: 0;
  margin-right: 12px;
}
.semi-rtl .semi-select-selection .semi-tag:nth-of-type(1),
.semi-portal-rtl .semi-select-selection .semi-tag:nth-of-type(1) {
  margin-right: 0;
}
.semi-rtl .semi-select-selection .semi-tag-group .semi-tag,
.semi-portal-rtl .semi-select-selection .semi-tag-group .semi-tag {
  margin-left: 4px;
  margin-right: 0;
}
.semi-rtl .semi-select-multiple .semi-select-selection,
.semi-portal-rtl .semi-select-multiple .semi-select-selection {
  margin-left: 0;
  margin-right: 4px;
}
.semi-rtl .semi-select-multiple .semi-select-content-wrapper-empty,
.semi-portal-rtl .semi-select-multiple .semi-select-content-wrapper-empty {
  margin-left: 0;
  margin-right: 8px;
}
.semi-rtl .semi-select-inset-label,
.semi-portal-rtl .semi-select-inset-label {
  margin-left: 12px;
}
.semi-rtl .semi-select-create-tips,
.semi-portal-rtl .semi-select-create-tips {
  margin-right: 0;
  margin-left: 4px;
}
.semi-rtl .semi-select-with-prefix .semi-select-selection,
.semi-portal-rtl .semi-select-with-prefix .semi-select-selection {
  margin-left: auto;
  margin-right: 0;
}
.semi-rtl .semi-select-single.semi-select-filterable .semi-input-wrapper,
.semi-portal-rtl .semi-select-single.semi-select-filterable .semi-input-wrapper {
  left: auto;
  right: 0;
}
.semi-rtl .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper,
.semi-portal-rtl .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper {
  left: auto;
  right: 0;
}
.semi-rtl .semi-select-group,
.semi-portal-rtl .semi-select-group {
  padding-left: 32px;
  padding-right: 16px;
}
.semi-rtl .semi-select-option-icon,
.semi-portal-rtl .semi-select-option-icon {
  margin-right: 0;
  margin-left: 8px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-switch {
  box-sizing: border-box;
  display: inline-block;
  border-radius: 12px;
  border: 1px transparent solid;
  position: relative;
  cursor: pointer;
  background-color: var(--semi-color-fill-0);
  transition: background-color 200ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  width: 40px;
  height: 24px;
}
.semi-switch:hover {
  background-color: var(--semi-color-fill-1);
}
.semi-switch:active {
  border: 1px var(--semi-color-fill-2) solid;
}
.semi-switch:active .semi-switch-knob {
  width: 24px;
}
.semi-switch-focus {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-switch-checked {
  background-color: var(--semi-color-success);
}
.semi-switch-checked:hover {
  background-color: var(--semi-color-success-hover);
}
.semi-switch-checked .semi-switch-knob {
  transform: translateX(18px);
}
.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(12px);
}
.semi-switch-active {
  background-color: var(--semi-color-success-active);
}
.semi-switch-disabled {
  cursor: not-allowed;
  background-color: transparent;
  border: 1px var(--semi-color-border) solid;
}
.semi-switch-disabled:hover {
  background-color: transparent;
}
.semi-switch-disabled:active {
  background-color: transparent;
}
.semi-switch-disabled:active .semi-switch-knob {
  width: 18px;
}
.semi-switch-disabled .semi-switch-knob {
  cursor: not-allowed;
  box-shadow: none;
  border: 1px var(--semi-color-border) solid;
}
.semi-switch-disabled .semi-switch-native-control {
  pointer-events: none;
  cursor: not-allowed;
}
.semi-switch-disabled.semi-switch-checked {
  border-color: transparent;
  background-color: var(--semi-color-success-disabled);
}
.semi-switch-disabled.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(18px);
}
.semi-switch-disabled.semi-switch-checked .semi-switch-knob {
  box-shadow: none;
  border: none;
}
.semi-switch-knob {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  border-radius: 9px;
  background-color: rgba(var(--semi-white), 1);
  box-sizing: border-box;
  position: absolute;
  left: 0px;
  right: auto;
  transition: transform 200ms ease-in-out, width 200ms ease-in-out;
  width: 18px;
  height: 18px;
  top: 2px;
  transform: translateX(2px);
}
.semi-switch-native-control {
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: inherit;
  pointer-events: auto;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.semi-switch-native-control[type=checkbox] {
  width: inherit;
  height: inherit;
}
.semi-switch-checked-text, .semi-switch-unchecked-text {
  position: absolute;
  font-size: 12px;
  height: 100%;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.semi-switch-checked-text {
  color: var(--semi-color-white);
}
.semi-switch-unchecked-text {
  color: var(--semi-color-text-2);
  right: 0;
}
.semi-switch-loading {
  display: inline-flex;
  align-items: center;
  background-color: var(--semi-color-fill-1);
}
.semi-switch-loading-spin .semi-spin-wrapper {
  display: inline-flex;
  align-items: center;
  color: var(--semi-color-white);
}

.semi-switch-loading .semi-switch-loading-spin {
  transform: translateX(2px);
}
.semi-switch-loading .semi-switch-loading-spin > .semi-spin-wrapper > svg {
  width: 18px;
  height: 18px;
}
.semi-switch-loading.semi-switch-checked {
  background-color: var(--semi-color-success-hover);
}
.semi-switch-loading.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(16px);
}

.semi-switch-loading.semi-switch-small .semi-switch-loading-spin {
  transform: translateX(2px);
}
.semi-switch-loading.semi-switch-small .semi-switch-loading-spin > .semi-spin-wrapper > svg {
  width: 10px;
  height: 10px;
}
.semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(10px);
}

.semi-switch-loading.semi-switch-large .semi-switch-loading-spin {
  transform: translateX(2px);
}
.semi-switch-loading.semi-switch-large .semi-switch-loading-spin > .semi-spin-wrapper > svg {
  width: 28px;
  height: 28px;
}
.semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(22px);
}

.semi-switch-disabled.semi-switch-checked {
  background-color: var(--semi-color-success-disabled);
}

.semi-switch-large {
  width: 54px;
  height: 32px;
  border-radius: 16px;
}
.semi-switch-large .semi-switch-knob {
  width: 24px;
  height: 24px;
  top: 3px;
  border-radius: 12px;
  transform: translateX(3px);
}
.semi-switch-large.semi-switch-checked .semi-switch-knob {
  transform: translateX(26px);
}
.semi-switch-large.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(16px);
}
.semi-switch-large:active .semi-switch-knob {
  width: 34px;
}
.semi-switch-large .semi-switch-checked-text,
.semi-switch-large .semi-switch-unchecked-text {
  width: 26px;
  font-size: 14px;
}

.semi-switch-small {
  width: 26px;
  height: 16px;
  border-radius: 8px;
}
.semi-switch-small .semi-switch-knob {
  width: 12px;
  height: 12px;
  top: 1px;
  border-radius: 6px;
  transform: translateX(1px);
}
.semi-switch-small.semi-switch-checked .semi-switch-knob {
  transform: translateX(11px);
}
.semi-switch-small.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(9px);
}
.semi-switch-small:active .semi-switch-knob {
  width: 14px;
}

.semi-form .semi-switch-native-control {
  width: 100%;
  height: 100%;
}

.semi-rtl .semi-switch,
.semi-portal-rtl .semi-switch {
  direction: rtl;
}
.semi-rtl .semi-switch-checked .semi-switch-knob,
.semi-portal-rtl .semi-switch-checked .semi-switch-knob {
  transform: translateX(-18px);
}
.semi-rtl .semi-switch-checked:active .semi-switch-knob,
.semi-portal-rtl .semi-switch-checked:active .semi-switch-knob {
  transform: translateX(-12px);
}
.semi-rtl .semi-switch-knob,
.semi-portal-rtl .semi-switch-knob {
  right: 0;
  left: auto;
  transform: translateX(-2px);
}
.semi-rtl .semi-switch-native-control,
.semi-portal-rtl .semi-switch-native-control {
  right: 0;
}
.semi-rtl .semi-switch-unchecked-text,
.semi-portal-rtl .semi-switch-unchecked-text {
  left: 0;
}
.semi-rtl .semi-switch-loading .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading .semi-switch-loading-spin {
  transform: translateX(-2px);
}
.semi-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(-16px);
}
.semi-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin {
  transform: translateX(-2px);
}
.semi-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(-10px);
}
.semi-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin {
  transform: translateX(-2px);
}
.semi-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin,
.semi-portal-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin {
  transform: translateX(-22px);
}
.semi-rtl .semi-switch-large .semi-switch-knob,
.semi-portal-rtl .semi-switch-large .semi-switch-knob {
  transform: translateX(-3px);
}
.semi-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob,
.semi-portal-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob {
  transform: translateX(-26px);
}
.semi-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob,
.semi-portal-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(-16px);
}
.semi-rtl .semi-switch-small .semi-switch-knob,
.semi-portal-rtl .semi-switch-small .semi-switch-knob {
  transform: translateX(-1px);
}
.semi-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob,
.semi-portal-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob {
  transform: translateX(-11px);
}
.semi-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob,
.semi-portal-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob {
  transform: translateX(-9px);
}
/* shadow */
/* sizing */
/* spacing */
.semi-table-panel-operation {
  background-color: var(--semi-color-primary);
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
  justify-content: space-between;
  color: var(--semi-color-text-2);
}
.semi-table-panel-operation-right, .semi-table-panel-operation-left {
  display: flex;
  justify-content: space-between;
}
.semi-table-panel-operation-selected {
  color: var(--semi-color-primary-light-active);
}

.semi-table-pagination-info {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}
.semi-table-pagination-outer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.semi-table {
  width: 100%;
  text-align: left;
  border-collapse: separate;
  border-spacing: 0;
  font-size: inherit;
  display: table;
}
.semi-table-wrapper {
  zoom: 1;
  position: relative;
  clear: both;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--semi-color-text-0);
  width: 100%;
}
.semi-table-wrapper[data-column-fixed=true] {
  z-index: 1;
}
.semi-table-wrapper-ltr {
  direction: ltr;
}
.semi-table-wrapper-ltr .semi-spin {
  direction: ltr;
}
.semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
  padding-top: 12px;
  padding-bottom: 12px;
}
.semi-table-small .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
  padding-top: 8px;
  padding-bottom: 8px;
}
.semi-table-title {
  position: relative;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 0;
  padding-right: 0;
}
.semi-table-container {
  position: relative;
}
.semi-table-header {
  overflow: hidden;
  scrollbar-base-color: transparent;
}
.semi-table-header::-webkit-scrollbar {
  background-color: transparent;
  border-bottom: 2px solid var(--semi-color-border);
}
.semi-table-header-sticky {
  position: sticky;
  z-index: 102;
}
.semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head {
  background-color: var(--semi-color-bg-1);
}
.semi-table-header-hidden {
  height: 0;
}
.semi-table-align-center .semi-table-operate-wrapper {
  justify-content: center;
}
.semi-table-align-right .semi-table-operate-wrapper {
  justify-content: flex-end;
}
.semi-table-operate-wrapper {
  display: flex;
  justify-content: flex-start;
}
.semi-table-body {
  overflow: auto;
  width: 100%;
  box-sizing: border-box;
}
.semi-table-colgroup {
  display: table-column-group;
}
.semi-table-colgroup .semi-table-col {
  display: table-column;
}
.semi-table-colgroup .semi-table-column-expand, .semi-table-colgroup .semi-table-column-selection {
  width: 48px;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head {
  background-color: var(--semi-color-bg-1);
  color: var(--semi-color-text-2);
  font-weight: 600;
  text-align: left;
  border-bottom: 2px solid var(--semi-color-border);
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle;
  overflow-wrap: break-word;
  position: relative;
  transition: background-color 0.1s linear;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort {
  cursor: pointer;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover {
  background: var(--semi-color-fill-0);
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover.semi-table-cell-fixed-left::before, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover.semi-table-cell-fixed-right::before {
  background-color: transparent;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
  z-index: 101;
  position: sticky;
  background-color: var(--semi-color-bg-1);
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left::before, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right::before {
  background-color: var(--semi-color-bg-1);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: -1;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last {
  border-right: 1px solid var(--semi-color-border);
  box-shadow: 3px 0 0 0 var(--semi-color-shadow);
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing {
  border-right: 2px solid var(--semi-color-primary);
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing .react-resizable-handle:hover {
  background-color: transparent;
  background-color: initial;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first {
  border-left: 1px solid var(--semi-color-border);
  box-shadow: -3px 0 0 0 var(--semi-color-shadow);
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing {
  border-right: 2px solid var(--semi-color-primary);
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing .react-resizable-handle:hover {
  background-color: transparent;
  background-color: initial;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] {
  box-shadow: none;
  border-left: transparent;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-column-selection {
  text-align: center;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head[colspan]:not([colspan="1"]) {
  text-align: center;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head .semi-table-header-column {
  display: inline-flex;
  align-items: center;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head-ellipsis .semi-table-row-head-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.semi-table-thead > .semi-table-row .react-resizable {
  position: relative;
  background-clip: padding-box;
}
.semi-table-thead > .semi-table-row .resizing {
  border-right: 2px solid var(--semi-color-primary);
}
.semi-table-thead > .semi-table-row .resizing .react-resizable-handle:hover {
  background-color: transparent;
  background-color: initial;
}
.semi-table-thead > .semi-table-row .react-resizable-handle {
  position: absolute;
  width: 9px;
  height: calc(100% - 4px * 2);
  background-color: var(--semi-color-border);
  bottom: 4px;
  right: -1px;
  cursor: col-resize;
  z-index: 0;
}
.semi-table-thead > .semi-table-row .react-resizable-handle:hover {
  background-color: var(--semi-color-primary);
}
.semi-table-tbody {
  display: table-row-group;
}
.semi-table-tbody > .semi-table-row {
  display: table-row;
  background-color: var(--semi-color-bg-1);
}
.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
  background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0));
  background-color: var(--semi-color-bg-0);
}
.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right {
  background-image: linear-gradient(0deg, var(--semi-color-bg-1), var(--semi-color-bg-1));
}
.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left::before, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right::before {
  background-color: var(--semi-color-fill-0);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  z-index: -1;
}
.semi-table-tbody > .semi-table-row > .semi-table-row-cell {
  display: table-cell;
  overflow-wrap: break-word;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--semi-color-border);
  padding: 16px;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
}
.semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
  border-right: 2px solid var(--semi-color-primary);
}
.semi-table-tbody > .semi-table-row > .semi-table-row-cell-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.semi-table-tbody > .semi-table-row.semi-table-row-expand > .semi-table-row-cell {
  background-color: var(--semi-color-fill-0);
}
.semi-table-tbody > .semi-table-row.semi-table-row-hidden {
  display: none;
}
.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right {
  z-index: 101;
  position: sticky;
  background-color: var(--semi-color-bg-1);
}
.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last {
  border-right: 1px solid var(--semi-color-border);
  box-shadow: 3px 0 0 0 var(--semi-color-shadow);
}
.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first {
  border-left: 1px solid var(--semi-color-border);
  box-shadow: -3px 0 0 0 var(--semi-color-shadow);
}
.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed > * {
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms;
}
.semi-table-tbody > .semi-table-row > * {
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms;
}
.semi-table-tbody > .semi-table-row-section {
  display: table-row;
}
.semi-table-tbody > .semi-table-row-section > .semi-table-row-cell {
  background-color: rgba(var(--semi-grey-0), 1);
  border-bottom: 1px solid var(--semi-color-border);
}
.semi-table-tbody > .semi-table-row-section > .semi-table-row-cell:not(.semi-table-column-selection) {
  padding: 10px 16px;
}
.semi-table-tbody > .semi-table-row-section .semi-table-section-inner {
  display: inline-flex;
  align-items: center;
}
.semi-table-virtualized .semi-table-tbody {
  display: block;
}
.semi-table-virtualized .semi-table-tbody > .semi-table-row {
  display: flex;
}
.semi-table-virtualized .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
  word-wrap: inherit;
  word-break: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
.semi-table-virtualized .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
}
.semi-table-virtualized .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell {
  padding: 0;
  overflow: visible;
  overflow: initial;
}
.semi-table-footer {
  background-color: var(--semi-color-fill-0);
  padding: 16px;
  margin: 0;
  position: relative;
}
.semi-table .semi-table-selection-wrap {
  display: inline-flex;
  vertical-align: bottom;
}
.semi-table .semi-table-selection-disabled {
  cursor: not-allowed;
}
.semi-table .semi-table-selection-disabled > .semi-checkbox {
  pointer-events: none;
}
.semi-table .semi-table-column-hidden {
  display: none;
}
.semi-table .semi-table-column-selection {
  text-align: center;
}
.semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon {
  left: 0;
  top: 0;
}
.semi-table .semi-table-column-expand .semi-table-expand-icon {
  transform: translateY(2px);
}
.semi-table .semi-table-column-expand .semi-table-expand-icon:last-child {
  margin-right: 0;
}
.semi-table .semi-table-column-sorter {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  text-align: center;
}
.semi-table .semi-table-column-sorter-wrapper {
  display: flex;
  gap: 4px;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
}
.semi-table .semi-table-column-sorter-up, .semi-table .semi-table-column-sorter-down {
  height: 0;
  display: block;
  color: var(--semi-color-text-2);
}
.semi-table .semi-table-column-sorter-up:hover .anticon, .semi-table .semi-table-column-sorter-down:hover .anticon {
  color: var(--semi-color-text-2);
}
.semi-table .semi-table-column-sorter-up svg, .semi-table .semi-table-column-sorter-down svg {
  width: 16px;
  height: 16px;
}
.semi-table .semi-table-column-sorter-up.on .semi-icon-caretup,
.semi-table .semi-table-column-sorter-up.on .semi-icon-caretdown, .semi-table .semi-table-column-sorter-down.on .semi-icon-caretup,
.semi-table .semi-table-column-sorter-down.on .semi-icon-caretdown {
  color: var(--semi-color-primary);
}
.semi-table .semi-table-column-filter {
  margin-left: 4px;
  display: inline-flex;
  cursor: pointer;
  color: var(--semi-color-text-2);
  align-items: center;
}
.semi-table .semi-table-column-filter svg {
  width: 16px;
  height: 16px;
}
.semi-table .semi-table-column-filter.on {
  color: var(--semi-color-primary);
}
.semi-table-bordered .semi-table-title {
  padding-left: 16px;
  padding-right: 16px;
  border-top: 1px solid var(--semi-color-border);
  border-right: 1px solid var(--semi-color-border);
  border-left: 1px solid var(--semi-color-border);
}
.semi-table-bordered .semi-table-container {
  border: 1px solid var(--semi-color-border);
  border-right: 0;
  border-bottom: 0;
}
.semi-table-bordered .semi-table-header::-webkit-scrollbar {
  border-right: 1px solid var(--semi-color-border);
}
.semi-table-bordered .semi-table-footer {
  border-left: 1px solid var(--semi-color-border);
  border-right: 1px solid var(--semi-color-border);
  border-bottom: 1px solid var(--semi-color-border);
}
.semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle {
  background-color: transparent;
}
.semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
.semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
  border-right: 1px solid var(--semi-color-border);
}
.semi-table-bordered .semi-table-placeholder {
  border-right: 1px solid var(--semi-color-border);
}
.semi-table-placeholder {
  position: sticky;
  left: 0px;
  z-index: 1;
  padding: 16px 12px;
  color: var(--semi-color-text-2);
  font-size: 14px;
  text-align: center;
  background: transparent;
  border-bottom: 1px solid var(--semi-color-border);
}
.semi-table-fixed {
  table-layout: fixed;
  min-width: 100%;
}
.semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner {
  position: sticky;
  overflow: auto;
  left: 0;
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
  height: 100%;
  display: flex;
  align-items: center;
}
.semi-table-fixed-header table {
  table-layout: fixed;
}
.semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last,
.semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last {
  box-shadow: none;
}
.semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first,
.semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first {
  box-shadow: none;
}
.semi-table-pagination-outer {
  color: var(--semi-color-text-2);
  min-height: 60px;
}

.semi-table-expand-icon {
  color: var(--semi-color-text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: transparent;
  position: relative;
  margin-right: 8px;
}
.semi-table-expand-icon-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.semi-table-expand-icon .semi-table-expandedIcon-show {
  transition: transform 150ms cubic-bezier(0.62, 0.05, 0.36, 0.95);
  transform: rotate(90deg);
}
.semi-table-expand-icon .semi-table-expandedIcon-hide {
  transition: transform 150ms cubic-bezier(0.62, 0.05, 0.36, 0.95);
  transform: rotate(0deg);
}

.semi-table-column-filter-dropdown .semi-dropdown-menu {
  max-height: 290px;
  overflow-y: auto;
}

.semi-table-wrapper-rtl .semi-table {
  direction: rtl;
  text-align: right;
}
.semi-table-wrapper-rtl .semi-table-align-left .semi-table-operate-wrapper {
  justify-content: flex-end;
}
.semi-table-wrapper-rtl .semi-table-align-right .semi-table-operate-wrapper {
  justify-content: flex-start;
}
.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head {
  text-align: right;
}
.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last {
  border-right: 0;
  border-left: 1px solid var(--semi-color-border);
}
.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing {
  border-left: 2px solid var(--semi-color-primary);
}
.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first {
  border-left: 0;
  border-right: 1px solid var(--semi-color-border);
}
.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing {
  border-left: 2px solid var(--semi-color-primary);
}
.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] {
  box-shadow: none;
  border-right: transparent;
}
.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row .resizing {
  border-left: 2px solid var(--semi-color-primary);
}
.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row .react-resizable-handle {
  right: auto;
  left: -1px;
}
.semi-table-wrapper-rtl .semi-table-tbody {
  display: table-row-group;
}
.semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
  border-right: 0;
  border-left: 2px solid var(--semi-color-primary);
}
.semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last {
  border-right: 0;
  border-left: 1px solid var(--semi-color-border);
}
.semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first {
  border-left: 0;
  border-right: 1px solid var(--semi-color-border);
}
.semi-table-wrapper-rtl .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon {
  left: auto;
  right: 0;
}
.semi-table-wrapper-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon {
  transform: scaleX(-1) translateY(2px);
}
.semi-table-wrapper-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child {
  margin-right: auto;
  margin-left: 0;
}
.semi-table-wrapper-rtl .semi-table .semi-table-column-sorter {
  margin-left: 0;
  margin-right: 4px;
}
.semi-table-wrapper-rtl .semi-table .semi-table-column-filter {
  margin-left: 0;
  margin-right: 4px;
}
.semi-table-wrapper-rtl .semi-table-bordered .semi-table-container {
  border-left: 0;
  border-right: 1px solid var(--semi-color-border);
}
.semi-table-wrapper-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head,
.semi-table-wrapper-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
  border-right: 0;
  border-left: 1px solid var(--semi-color-border);
}
.semi-table-wrapper-rtl .semi-table-bordered .semi-table-placeholder {
  border-left: 1px solid var(--semi-color-border);
  border-right: 0;
}
.semi-table-wrapper-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar {
  border-right: 0;
  border-left: 1px solid var(--semi-color-border);
}
.semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner {
  left: auto;
  right: 0;
  margin-right: -16px;
  margin-left: -16px;
  padding-right: 16px;
  padding-left: 16px;
}
.semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last,
.semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last {
  box-shadow: 3px 0 0 0 var(--semi-color-shadow);
}
.semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first,
.semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first {
  box-shadow: none;
}
.semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last,
.semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last {
  box-shadow: none;
}
.semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first,
.semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first {
  box-shadow: -3px 0 0 0 var(--semi-color-shadow);
}
.semi-table-wrapper-rtl .semi-table-expand-icon {
  margin-right: auto;
  margin-left: 8px;
  transform: scaleX(-1) translateY(2px);
}
.semi-table-wrapper-rtl .semi-spin {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-page {
  display: flex;
  list-style: none;
  padding: 0;
  align-items: center;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-block-start: 0;
  margin-block-end: 0;
}
.semi-page-small {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: var(--semi-color-text-2);
  padding: 0 0;
}
.semi-page-disabled {
  cursor: not-allowed;
}
.semi-page-disabled .semi-page-total {
  color: var(--semi-color-disabled-text);
}
.semi-page-item {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  min-width: 32px;
  border: 0px solid transparent;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  height: 32px;
  margin-left: 4px;
  margin-right: 4px;
  font-weight: 400;
  color: var(--semi-color-text-0);
  border-radius: var(--semi-border-radius-small);
  text-align: center;
  line-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-page-item:hover {
  border-color: transparent;
  background-color: var(--semi-color-fill-0);
  color: var(--semi-color-text-0);
}
.semi-page-item-rest-opening {
  background-color: var(--semi-color-fill-0);
  color: var(--semi-color-text-0);
}
.semi-page-item:active {
  border-color: transparent;
  background-color: var(--semi-color-fill-1);
  color: var(--semi-color-text-0);
}
.semi-page-item-active {
  border-color: transparent;
  color: var(--semi-color-primary);
  font-weight: 600;
  background-color: var(--semi-color-primary-light-default);
}
.semi-page-item-active:hover {
  border-color: transparent;
  color: var(--semi-color-primary);
  background-color: var(--semi-color-primary-light-default);
}
.semi-page-item-disabled {
  border-color: transparent;
  color: var(--semi-color-disabled-text);
  background-color: transparent;
  cursor: not-allowed;
}
.semi-page-item-disabled:hover {
  background-color: transparent;
}
.semi-page-item-small {
  min-width: 44px;
  margin: 0;
}
.semi-page-item-all-disabled {
  border-color: transparent;
  color: var(--semi-color-disabled-text);
  background-color: transparent;
  cursor: not-allowed;
}
.semi-page-item-all-disabled:hover {
  background-color: transparent;
  color: var(--semi-color-disabled-text);
}
.semi-page-item-all-disabled-active {
  background-color: var(--semi-color-disabled-fill);
  font-weight: 600;
}
.semi-page-item-all-disabled-active:hover {
  background-color: var(--semi-color-disabled-fill);
}
.semi-page-total {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--semi-color-text-2);
}
.semi-page-prev, .semi-page-next {
  color: var(--semi-color-tertiary);
  cursor: pointer;
}
.semi-page-prev.semi-page-item-disabled, .semi-page-next.semi-page-item-disabled {
  color: var(--semi-color-disabled-text);
  cursor: not-allowed;
}
.semi-page-quickjump {
  margin-left: 24px;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: var(--semi-color-text-0);
}
.semi-page-quickjump-input-number {
  max-width: 50px;
  margin-left: 4px;
  margin-right: 4px;
}
.semi-page-quickjump-disabled {
  color: var(--semi-color-disabled-text);
}
.semi-page .semi-select {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.semi-select-dropdown {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.semi-page-rest-list {
  padding-top: 4px;
  padding-bottom: 4px;
}
.semi-page-rest-list > div {
  position: relative;
}
.semi-page-rest-item {
  height: 32px;
  line-height: 32px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
}
.semi-page-rest-item:hover {
  background-color: var(--semi-color-fill-0);
}
.semi-page-rest-item:active {
  background-color: var(--semi-color-fill-1);
}

.semi-rtl .semi-page,
.semi-portal-rtl .semi-page {
  direction: rtl;
}
.semi-rtl .semi-page-item,
.semi-portal-rtl .semi-page-item {
  margin-right: 4px;
  margin-left: 4px;
}
.semi-rtl .semi-page-prev, .semi-rtl .semi-page-next,
.semi-portal-rtl .semi-page-prev,
.semi-portal-rtl .semi-page-next {
  transform: scaleX(-1);
}
/* shadow */
/* sizing */
/* spacing */
.semi-radio {
  box-sizing: border-box;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  display: inline-flex;
  -moz-column-gap: 8px;
       column-gap: 8px;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  min-height: 20px;
  min-width: 16px;
  cursor: pointer;
  vertical-align: bottom;
  text-align: left;
}
.semi-radio.semi-radio-vertical {
  display: block;
}
.semi-radio input[type=checkbox],
.semi-radio input[type=radio] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.semi-radio:hover .semi-radio-inner-display {
  background: var(--semi-color-fill-0);
  border: solid 1px var(--semi-color-focus-border);
}
.semi-radio:hover.semi-radio-cardRadioGroup .semi-radio-inner-display {
  background: var(--semi-color-white);
}
.semi-radio:hover .semi-radio-inner-checked .semi-radio-inner-display {
  background: var(--semi-color-primary-hover);
  border-color: var(--semi-color-primary-hover);
}
.semi-radio:active .semi-radio-inner-display {
  background: var(--semi-color-fill-1);
}
.semi-radio:active.semi-radio-cardRadioGroup .semi-radio-inner-display {
  background: var(--semi-color-white);
}
.semi-radio:active .semi-radio-inner-checked .semi-radio-inner-display {
  background: var(--semi-color-primary-active);
  border-color: var(--semi-color-primary-active);
}
.semi-radio-buttonRadioComponent {
  padding: 4px;
  background: var(--semi-color-fill-0);
  border-radius: var(--semi-border-radius-small);
}
.semi-radio-buttonRadioGroup {
  position: relative;
  padding: 4px;
  border-radius: var(--semi-border-radius-small);
  line-height: 16px;
}
.semi-radio-buttonRadioGroup:not(:last-child) {
  padding-right: 0;
}
.semi-radio-buttonRadioGroup-small {
  padding: 2px 4px;
  line-height: 16px;
}
.semi-radio-buttonRadioGroup-large {
  padding: 4px;
  line-height: 20px;
}
.semi-radio-cardRadioGroup {
  flex-wrap: nowrap;
  border-radius: var(--semi-border-radius-small);
  padding: 12px 16px;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-radio-cardRadioGroup .semi-radio-inner {
  flex-shrink: 0;
}
.semi-radio-cardRadioGroup .semi-radio-inner-display {
  background: var(--semi-color-white);
}
.semi-radio-cardRadioGroup .semi-radio-addon {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--semi-color-text-0);
}
.semi-radio-cardRadioGroup .semi-radio-extra {
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  color: var(--semi-color-text-2);
  padding-left: 0;
}
.semi-radio-cardRadioGroup:active {
  background: var(--semi-color-fill-1);
}
.semi-radio-cardRadioGroup_checked {
  background: var(--semi-color-primary-light-default);
  border: 1px solid var(--semi-color-primary);
}
.semi-radio-cardRadioGroup_checked:hover {
  border: 1px solid var(--semi-color-primary-hover);
}
.semi-radio-cardRadioGroup_checked:hover .semi-radio-inner-checked .semi-radio-inner-display {
  border-color: var(--semi-color-primary-hover);
}
.semi-radio-cardRadioGroup_checked:active {
  background: var(--semi-color-primary-light-default);
  border: 1px solid var(--semi-color-primary-active);
}
.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked .semi-radio-inner-display {
  border-color: var(--semi-color-primary-active);
}
.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked:hover .semi-radio-inner-display {
  background: var(--semi-color-primary-active);
}
.semi-radio-cardRadioGroup_hover {
  background: var(--semi-color-fill-0);
}
.semi-radio-cardRadioGroup_disabled:active {
  background: transparent;
}
.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup {
  background: var(--semi-color-primary-light-default);
  border: 1px solid var(--semi-color-primary-disabled);
}
.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup .semi-radio-inner-checked .semi-radio-inner-display {
  border-color: var(--semi-color-primary-disabled);
}
.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup:hover .semi-radio-inner-checked .semi-radio-inner-display {
  border-color: var(--semi-color-primary-disabled);
}
.semi-radio.semi-radio-disabled:hover .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-display {
  background: var(--semi-color-disabled-fill);
  border: solid 1px var(--semi-color-border);
}
.semi-radio.semi-radio-disabled:hover .semi-radio-inner-checked .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-checked .semi-radio-inner-display {
  background: var(--semi-color-primary-disabled);
  border-color: var(--semi-color-primary-disabled);
}
.semi-radio-inner {
  display: inline-flex;
  margin-top: 2px;
  position: relative;
  width: 16px;
  height: 16px;
  vertical-align: sub;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-radio-inner-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: solid 1px var(--semi-color-text-3);
  border-radius: 16px;
  background: transparent;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-radio-inner-display .semi-icon {
  width: 100%;
  height: 100%;
  font-size: 14px;
}
.semi-radio-content {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.semi-radio:hover .semi-radio-inner-display {
  background: var(--semi-color-fill-0);
}
.semi-radio:active .semi-radio-inner-display {
  background: var(--semi-color-fill-1);
}
.semi-radio-addon {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--semi-color-text-0);
  display: inline-flex;
  align-items: center;
}
.semi-radio-addon-buttonRadio {
  text-align: center;
  border-radius: var(--semi-border-radius-small);
  font-weight: 600;
  color: var(--semi-color-text-1);
  font-size: 12px;
  padding: 4px 16px;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-radio-addon-buttonRadio-hover {
  font-weight: 600;
  background: var(--semi-color-fill-1);
}
.semi-radio-addon-buttonRadio-checked {
  font-weight: 600;
  background: var(--semi-color-bg-3);
  color: var(--semi-color-primary);
}
.semi-radio-addon-buttonRadio-disabled {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
}
.semi-radio-addon-buttonRadio-small {
  font-size: 12px;
  padding: 2px 16px;
}
.semi-radio-addon-buttonRadio-large {
  font-size: 14px;
  padding: 6px 24px;
}
.semi-radio .semi-radio-inner-checked:hover .semi-radio-inner-display {
  background: var(--semi-color-primary-hover);
}
.semi-radio .semi-radio-inner-checked:active .semi-radio-inner-display {
  background: var(--semi-color-primary-active);
}
.semi-radio .semi-radio-inner-checked .semi-radio-inner-display {
  border: solid 1px var(--semi-color-primary);
  background: var(--semi-color-primary);
  color: rgba(var(--semi-white), 1);
  border-radius: 16px;
}
.semi-radio .semi-radio-inner-checked > .semi-radio-addon {
  color: var(--semi-color-text-0);
}
.semi-radio .semi-radio-inner-buttonRadio,
.semi-radio .semi-radio-inner-pureCardRadio {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  z-index: -1;
  opacity: 0;
}
.semi-radio-disabled, .semi-radio-disabled:hover {
  cursor: not-allowed;
}
.semi-radio-disabled .semi-radio-inner {
  cursor: not-allowed;
}
.semi-radio-disabled .semi-radio-inner-display {
  opacity: 0.75;
  background: var(--semi-color-disabled-fill);
  border-color: var(--semi-color-border);
}
.semi-radio-disabled .semi-radio-inner-display:hover {
  background: transparent;
}
.semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display {
  background: var(--semi-color-primary-disabled);
  border-color: var(--semi-color-primary-disabled);
}
.semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display:hover {
  background: var(--semi-color-primary-disabled);
  border-color: var(--semi-color-primary-disabled);
}
.semi-radio-disabled .semi-radio-addon {
  color: var(--semi-color-disabled-text);
}
.semi-radio-disabled .semi-radio-extra {
  color: var(--semi-color-disabled-text);
}
.semi-radio-extra {
  color: var(--semi-color-text-2);
  box-sizing: border-box;
}
.semi-radio-focus {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-radio-focus-border {
  border: solid 1px var(--semi-color-focus-border);
}

.semi-radioGroup {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.semi-radioGroup-vertical {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.semi-radioGroup-vertical-default .semi-radio {
  display: flex;
}
.semi-radioGroup-vertical-card .semi-radio {
  display: flex;
}
.semi-radioGroup-horizontal {
  display: inline-flex;
  flex-wrap: wrap;
  vertical-align: bottom;
  gap: 16px;
}
.semi-radioGroup-buttonRadio {
  display: inline-block;
  background: var(--semi-color-fill-0);
  border-radius: var(--semi-border-radius-small);
  vertical-align: middle;
}

.semi-rtl .semi-radio,
.semi-portal-rtl .semi-radio {
  direction: rtl;
}
.semi-rtl .semi-radio input[type=checkbox],
.semi-rtl .semi-radio input[type=radio],
.semi-portal-rtl .semi-radio input[type=checkbox],
.semi-portal-rtl .semi-radio input[type=radio] {
  left: auto;
  right: 0;
}
.semi-rtl .semi-radio-buttonRadioGroup:not(:last-child),
.semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
  padding-left: 0;
}
.semi-rtl .semi-radioGroup,
.semi-portal-rtl .semi-radioGroup {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-tabs {
  box-sizing: border-box;
  position: relative;
}
.semi-tabs-left {
  display: flex;
  flex-direction: row;
}
.semi-tabs-bar {
  position: relative;
  white-space: nowrap;
  outline: none;
}
.semi-tabs-bar-left {
  display: flex;
  flex-direction: column;
}
.semi-tabs-bar-extra {
  padding: 0px 5px;
}
.semi-tabs-bar-more-trigger {
  display: inline-block;
  cursor: pointer;
  color: var(--semi-color-text-2);
}
.semi-tabs-bar-more-trigger-content {
  display: flex;
  align-content: center;
}
.semi-tabs-bar-more-trigger-content-icon:not(:not(.semi-tabs-bar-more-trigger-content-icon)) {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 8px;
  margin-right: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.semi-tabs-bar-more-trigger-line {
  padding: 16px 4px 14px 4px;
}
.semi-tabs-bar-more-trigger-card {
  padding: 8px 12px;
}
.semi-tabs-bar-more-trigger-button {
  padding: 8px 12px;
}
.semi-tabs-bar .semi-tabs-tab {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  display: block;
  float: left;
  font-weight: 400;
  color: var(--semi-color-text-2);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-tabs-bar .semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  position: relative;
  margin-right: 8px;
  top: 3px;
  color: var(--semi-color-text-2);
  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-tabs-bar .semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close {
  margin-right: 0;
  font-size: 14px;
  color: var(--semi-color-text-2);
  margin-left: 10px;
  cursor: pointer;
}
.semi-tabs-bar .semi-tabs-tab:hover {
  color: var(--semi-color-text-0);
}
.semi-tabs-bar .semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-text-0);
}
.semi-tabs-bar .semi-tabs-tab:active {
  color: var(--semi-color-text-0);
}
.semi-tabs-bar .semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-text-0);
}
.semi-tabs-bar .semi-tabs-tab-active, .semi-tabs-bar .semi-tabs-tab-active:hover {
  cursor: default;
  font-weight: 600;
  color: var(--semi-color-text-0);
}
.semi-tabs-bar .semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-primary);
}
.semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close {
  color: var(--semi-color-text-2);
}
.semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover {
  color: var(--semi-color-text-1);
}
.semi-tabs-bar .semi-tabs-tab-disabled {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
}
.semi-tabs-bar .semi-tabs-tab-disabled:hover {
  color: var(--semi-color-disabled-text);
  border-bottom: none;
}
.semi-tabs-tab-single.semi-tabs-tab {
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  font-weight: 400;
  color: var(--semi-color-text-2);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-tabs-tab-single.semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  position: relative;
  margin-right: 8px;
  top: 3px;
  color: var(--semi-color-text-2);
  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close {
  margin-right: 0;
  font-size: 14px;
  color: var(--semi-color-text-2);
  margin-left: 10px;
  cursor: pointer;
}
.semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close.semi-icon-close:hover {
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab:hover {
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon.semi-tabs-tab-icon-close {
  color: var(--semi-color-text-2);
}
.semi-tabs-tab-single.semi-tabs-tab:active {
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon.semi-tabs-tab-icon-close {
  color: var(--semi-color-text-2);
}
.semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover {
  cursor: default;
  font-weight: 600;
  color: var(--semi-color-text-0);
}
.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) {
  color: var(--semi-color-primary);
}
.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close {
  color: var(--semi-color-text-2);
}
.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover {
  color: var(--semi-color-text-1);
}
.semi-tabs-tab-single.semi-tabs-tab-disabled {
  cursor: not-allowed;
  color: var(--semi-color-disabled-text);
}
.semi-tabs-tab-single.semi-tabs-tab-disabled:hover {
  color: var(--semi-color-disabled-text);
  border-bottom: none;
}
.semi-tabs-bar-collapse,
.semi-tabs-bar-collapse .semi-tabs-bar-overflow-list {
  display: flex;
  align-items: center;
}
.semi-tabs-bar-collapse .semi-overflow-list {
  flex: 1 1;
}
.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
  width: 0;
  height: 0;
}
.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled {
  color: var(--semi-color-disabled-text);
  background-color: transparent;
}
.semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled:hover {
  color: var(--semi-color-disabled-text);
  background-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
  margin-right: 4px;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false] {
  color: var(--semi-color-primary);
  padding: 8px;
  border: 0px solid transparent;
  background-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:hover {
  background-color: var(--semi-color-fill-0);
  color: var(--semi-color-primary);
  border-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:active {
  background-color: var(--semi-color-fill-1);
  color: var(--semi-color-primary);
  border-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
  margin-left: 4px;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false] {
  color: var(--semi-color-primary);
  padding: 8px;
  border: 0px solid transparent;
  background-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:hover {
  background-color: var(--semi-color-fill-0);
  color: var(--semi-color-primary);
  border-color: transparent;
}
.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:active {
  background-color: var(--semi-color-fill-1);
  color: var(--semi-color-primary);
  border-color: transparent;
}
.semi-tabs-bar-dropdown {
  max-height: 300px;
  overflow-y: auto;
}
.semi-tabs-bar:after {
  content: "";
  height: 0;
  display: block;
  clear: both;
}
.semi-tabs-bar-line.semi-tabs-bar-top {
  border-bottom: 1px solid var(--semi-color-border);
  transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab {
  padding: 16px 4px 14px 4px;
  transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  border-bottom: 2px solid transparent;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:nth-of-type(1) {
  padding-left: 0;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:hover {
  border-bottom: 2px solid var(--semi-color-fill-0);
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -1px;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:active {
  border-bottom: 2px solid var(--semi-color-fill-1);
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-right: 24px;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-small {
  padding: 8px 4px 6px 4px;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-medium {
  padding: 12px 4px 10px 4px;
}
.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active:hover {
  border-bottom: 2px solid var(--semi-color-primary);
}
.semi-tabs-bar-line.semi-tabs-bar-left {
  border-right: 1px solid var(--semi-color-border);
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab {
  padding: 12px;
  border-left: 2px solid transparent;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover {
  border-left: 2px solid var(--semi-color-fill-0);
  background-color: var(--semi-color-fill-0);
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active {
  border-left: 2px solid var(--semi-color-fill-1);
  background-color: var(--semi-color-fill-1);
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-small {
  padding: 6px;
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-medium {
  padding: 10px;
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover {
  border-left: 2px solid var(--semi-color-primary);
  background-color: var(--semi-color-primary-light-default);
}
.semi-tabs-bar-line .semi-tabs-bar-extra {
  height: 50px;
  line-height: 50px;
}
.semi-tabs-bar-line .semi-tabs-bar-line-extra-small {
  height: 36px;
  line-height: 36px;
}
.semi-tabs-bar-card.semi-tabs-bar-top::before {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  border-bottom: 1px solid var(--semi-color-border);
  content: "";
}
.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab {
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
}
.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:hover {
  border-bottom: none;
}
.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-right: 8px;
}
.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active:hover {
  padding: 8px 12px 7px 12px;
  border: 1px solid var(--semi-color-border);
  border-bottom: 1px solid var(--semi-color-bg-1);
  background: transparent;
}
.semi-tabs-bar-card.semi-tabs-bar-left {
  border-right: 1px solid var(--semi-color-border);
}
.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab {
  border: 1px solid transparent;
  border-right: none;
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover {
  border-right: none;
}
.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) {
  margin-bottom: 8px;
}
.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after {
  content: " ";
  width: 1px;
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  background: var(--semi-color-bg-1);
}
.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:hover {
  padding: 8px 12px;
  border: 1px solid var(--semi-color-border);
  border-right: none;
  background: transparent;
}
.semi-tabs-bar-card .semi-tabs-tab {
  padding: 8px 12px;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-tabs-bar-card .semi-tabs-tab:hover {
  background: var(--semi-color-fill-0);
}
.semi-tabs-bar-card .semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-bar-card .semi-tabs-tab:active {
  background: var(--semi-color-fill-1);
}
.semi-tabs-bar-button {
  border: none;
}
.semi-tabs-bar-button.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) {
  margin-bottom: 8px;
}
.semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-right: 8px;
}
.semi-tabs-bar-button .semi-tabs-tab {
  padding: 8px 12px;
  border-radius: var(--semi-border-radius-small);
  color: var(--semi-color-text-2);
  border: none;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-tabs-bar-button .semi-tabs-tab:hover {
  border: none;
  background-color: var(--semi-color-fill-0);
}
.semi-tabs-bar-button .semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-bar-button .semi-tabs-tab:active {
  background-color: var(--semi-color-fill-1);
}
.semi-tabs-bar-button .semi-tabs-tab-active, .semi-tabs-bar-button .semi-tabs-tab-active:hover {
  color: var(--semi-color-primary);
  border: none;
  background-color: var(--semi-color-primary-light-default);
}
.semi-tabs-bar-slash .semi-tabs-tab {
  padding: 12px 0px;
}
.semi-tabs-bar-slash .semi-tabs-tab:nth-of-type(1) {
  padding-left: 0;
}
.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type) {
  margin-right: 16px;
}
.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type):after {
  content: "";
  margin-left: 16px;
  display: inline-block;
  height: 14px;
  width: 8px;
  margin-top: 3px;
  margin-bottom: 3px;
  vertical-align: bottom;
  background: linear-gradient(to bottom right, transparent 0%, transparent calc(50% - 1px), var(--semi-color-text-2) 50%, transparent calc(50% + 1px), transparent 100%);
}
.semi-tabs-content {
  width: 100%;
  padding: 5px 0;
}
.semi-tabs-content-left {
  height: 100%;
  padding: 0 5px;
}
.semi-tabs-pane {
  width: 100%;
  overflow: hidden;
  color: var(--semi-color-text-0);
}
.semi-tabs-pane:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-tabs-pane-inactive, .semi-tabs-content-no-animated .semi-tabs-pane-inactive {
  display: none;
}
@keyframes semi-tabs-panel-keyframe-leftShow {
  0% {
    transform: translateX(60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes semi-tabs-panel-keyframe-rightShow {
  0% {
    transform: translateX(-60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes semi-tabs-panel-keyframe-topShow {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes semi-tabs-panel-keyframe-bottomShow {
  0% {
    transform: translateY(-60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.semi-tabs-pane-animate-leftShow {
  animation: 200ms semi-tabs-panel-keyframe-leftShow ease-in-out 0s;
  animation-fill-mode: forwards;
}
.semi-tabs-pane-animate-rightShow {
  animation: 200ms semi-tabs-panel-keyframe-rightShow ease-in-out 0s;
  animation-fill-mode: forwards;
}
.semi-tabs-pane-animate-topShow {
  animation: 200ms semi-tabs-panel-keyframe-topShow ease-in-out 0s;
  animation-fill-mode: forwards;
}
.semi-tabs-pane-animate-bottomShow {
  animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
  animation-fill-mode: forwards;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab {
  font-size: 14px;
  padding: 16px 4px 14px 4px;
  transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  border-bottom: 2px solid transparent;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:nth-of-type(1) {
  padding-left: 0;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:hover {
  border-bottom: 2px solid var(--semi-color-fill-0);
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -1px;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:active {
  border-bottom: 2px solid var(--semi-color-fill-1);
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small {
  font-size: 14px;
  padding: 8px 4px 6px 4px;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium {
  font-size: 14px;
  padding: 12px 4px 10px 4px;
}
.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active:hover {
  border-bottom: 2px solid var(--semi-color-primary);
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab {
  padding: 12px;
  border-left: 2px solid transparent;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:hover {
  border-left: 2px solid var(--semi-color-fill-0);
  background-color: var(--semi-color-fill-0);
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:active {
  border-left: 2px solid var(--semi-color-fill-1);
  background-color: var(--semi-color-fill-1);
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-small {
  padding: 6px;
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-medium {
  padding: 10px;
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active:hover {
  border-left: 2px solid var(--semi-color-primary);
  background-color: var(--semi-color-primary-light-default);
}
.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab {
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0;
}
.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab:hover {
  border-bottom: none;
}
.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active:hover {
  padding: 8px 12px 7px 12px;
  border: 1px solid var(--semi-color-border);
  border-bottom: 1px solid var(--semi-color-bg-1);
  background: transparent;
}
.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab {
  border: 1px solid transparent;
  border-right: none;
  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
}
.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab:hover {
  border-right: none;
}
.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:after {
  content: " ";
  width: 1px;
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  background: var(--semi-color-bg-1);
}
.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:hover {
  padding: 8px 12px;
  border: 1px solid var(--semi-color-border);
  border-right: none;
  background: transparent;
}
.semi-tabs-tab-card.semi-tabs-tab {
  padding: 8px 12px;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-tabs-tab-card.semi-tabs-tab:hover {
  background: var(--semi-color-fill-0);
}
.semi-tabs-tab-card.semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-tab-card.semi-tabs-tab:active {
  background: var(--semi-color-fill-1);
}
.semi-tabs-tab-button {
  border: none;
}
.semi-tabs-tab-button.semi-tabs-tab {
  padding: 8px 12px;
  border-radius: var(--semi-border-radius-small);
  color: var(--semi-color-text-2);
  border: none;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
}
.semi-tabs-tab-button.semi-tabs-tab:hover {
  border: none;
  background-color: var(--semi-color-fill-0);
}
.semi-tabs-tab-button.semi-tabs-tab:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
  outline-offset: -2px;
}
.semi-tabs-tab-button.semi-tabs-tab:active {
  background-color: var(--semi-color-fill-1);
}
.semi-tabs-tab-button.semi-tabs-tab-active, .semi-tabs-tab-button.semi-tabs-tab-active:hover {
  color: var(--semi-color-primary);
  border: none;
  background-color: var(--semi-color-primary-light-default);
}

.semi-rtl .semi-tabs,
.semi-portal-rtl .semi-tabs {
  direction: rtl;
}
.semi-rtl .semi-tabs-bar .semi-tabs-tab,
.semi-portal-rtl .semi-tabs-bar .semi-tabs-tab {
  float: right;
}
.semi-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon,
.semi-portal-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon {
  margin-right: 0;
  margin-left: 8px;
}
.semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start,
.semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start {
  margin-right: 0;
  margin-left: 4px;
}
.semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end,
.semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end {
  margin-left: 0;
  margin-right: 4px;
}
.semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right,
.semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left,
.semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right,
.semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left {
  transform: scaleX(-1);
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type),
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-right: 0;
  margin-left: 24px;
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left {
  border-right: 0;
  border-left: 1px solid var(--semi-color-border);
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab {
  border-left: 0;
  border-right: 2px solid transparent;
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover {
  border-left: 0;
  border-right: 2px solid var(--semi-color-fill-0);
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active {
  border-left: 0;
  border-right: 2px solid var(--semi-color-fill-1);
}
.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active,
.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover {
  border-left: 0;
  border-right: 2px solid var(--semi-color-primary);
}
.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type),
.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-left: 0;
  margin-right: 8px;
}
.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left,
.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left {
  border-right: 0;
  border-left: 1px solid var(--semi-color-border);
}
.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab,
.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab {
  border: 1px solid transparent;
  border-left: none;
}
.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover,
.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover {
  border-left: none;
}
.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after,
.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after {
  right: auto;
  left: -1px;
}
.semi-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type),
.semi-portal-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) {
  margin-right: auto;
  margin-left: 8px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-toast {
  pointer-events: none;
}
.semi-toast-wrapper {
  position: fixed;
  height: 0;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1010;
}
.semi-toast-wrapper .semi-toast-innerWrapper {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  text-align: center;
}
.semi-toast-wrapper .semi-toast-innerWrapper-hover .semi-toast-zero-height-wrapper {
  perspective: none;
  perspective: initial;
  perspective-origin: center center;
}
.semi-toast-zero-height-wrapper {
  transition: all 300ms cubic-bezier(0.22, 0.57, 0.02, 1.2);
  perspective-origin: center 280px;
  perspective: 280px;
  height: 0;
  overflow: visible;
}
.semi-toast-content {
  pointer-events: all;
  box-shadow: var(--semi-shadow-elevated);
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--semi-color-bg-3);
  border-radius: var(--semi-border-radius-medium);
  padding: 12px 8px 12px 8px;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  margin: 12px;
  font-weight: 600;
  color: var(--semi-color-text-0);
}
.semi-toast-content .semi-toast-close-button {
  margin-top: -2px;
  height: 20px;
}
.semi-toast-content .semi-toast-content-text {
  margin-left: 12px;
  margin-right: 12px;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.semi-toast-light.semi-toast-warning .semi-toast-content {
  background-color: var(--semi-color-warning-light-default);
  border: 1px solid var(--semi-color-warning);
}
.semi-toast-light.semi-toast-warning .semi-toast-icon-warning {
  color: var(--semi-color-warning);
}
.semi-toast-light.semi-toast-success .semi-toast-content {
  background-color: var(--semi-color-success-light-default);
  border: 1px solid var(--semi-color-success);
}
.semi-toast-light.semi-toast-success .semi-toast-icon-success {
  color: var(--semi-color-success);
}
.semi-toast-light.semi-toast-info .semi-toast-content {
  background-color: var(--semi-color-info-light-default);
  border: 1px solid var(--semi-color-info);
}
.semi-toast-light.semi-toast-info .semi-toast-icon-info {
  color: var(--semi-color-info);
}
.semi-toast-light.semi-toast-error .semi-toast-content {
  background-color: var(--semi-color-danger-light-default);
  border: 1px solid var(--semi-color-danger);
}
.semi-toast-light.semi-toast-error .semi-toast-icon-error {
  color: var(--semi-color-danger);
}
.semi-toast .semi-toast-icon-warning {
  color: var(--semi-color-warning);
}
.semi-toast .semi-toast-icon-success {
  color: var(--semi-color-success);
}
.semi-toast .semi-toast-icon-info {
  color: var(--semi-color-info);
}
.semi-toast .semi-toast-icon-error {
  color: var(--semi-color-danger);
}
.semi-toast-animation-show {
  animation: 300ms semi-toast-keyframe-toast-show cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
  animation-fill-mode: forwards;
}
.semi-toast-animation-hide {
  animation: 300ms semi-toast-keyframe-toast-hide cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
  animation-fill-mode: forwards;
}
@keyframes semi-toast-keyframe-toast-show {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
  }
}
@keyframes semi-toast-keyframe-toast-hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

.semi-toast-rtl {
  direction: rtl;
}
.semi-toast-rtl .semi-toast-content .semi-toast-content-text {
  text-align: right;
  margin-left: 12px;
  margin-right: 12px;
}
/* shadow */
/* sizing */
/* spacing */
.semi-collapsible-transition {
  transition: height 250ms cubic-bezier(0.25, 0.1, 0.25, 1) var(--semi-transition_delay-none), opacity 250ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
}
/* shadow */
/* sizing */
/* spacing */
.semi-tree-search-wrapper {
  padding: 8px 12px;
}

.semi-tree-wrapper {
  display: flex;
  flex-direction: column;
}

.semi-tree-option-list {
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  flex: 1 1;
  padding: 8px 0;
}
.semi-tree-option-list ul,
.semi-tree-option-list li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.semi-tree-option-list li.semi-tree-option {
  box-sizing: border-box;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
}
.semi-tree-option-list li > .semi-tree-option-label {
  list-style-type: none;
  padding: 0;
}
.semi-tree-option-list .semi-tree-option-expand-icon,
.semi-tree-option-list .semi-tree-option-empty-icon {
  box-sizing: border-box;
  width: 12px;
  color: var(--semi-color-text-2);
  margin-right: 8px;
  display: flex;
  flex-shrink: 0;
}
.semi-tree-option-list .semi-tree-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: scale(var(--semi-transform_scale-none));
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  word-break: break-word;
  color: var(--semi-color-text-0);
  position: relative;
}
.semi-tree-option-list .semi-tree-option-label {
  display: flex;
  align-items: center;
}
.semi-tree-option-list .semi-tree-option-label > .semi-icon {
  margin-right: 8px;
}
.semi-tree-option-list .semi-tree-option-label .semi-checkbox {
  margin-right: 8px;
}
.semi-tree-option-list .semi-tree-option-label-text {
  display: block;
  flex: 1 1;
}
.semi-tree-option-list .semi-tree-option-ellipsis .semi-tree-option-label-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.semi-tree-option-list .semi-tree-option-label-text,
.semi-tree-option-list .semi-tree-option .semi-checkbox-addon {
  border-radius: var(--semi-border-radius-small);
}
.semi-tree-option-list .semi-tree-option-label-text:hover,
.semi-tree-option-list .semi-tree-option .semi-checkbox-addon:hover {
  background-color: var(--semi-color-fill-0);
}
.semi-tree-option-list .semi-tree-option-label-text:active,
.semi-tree-option-list .semi-tree-option .semi-checkbox-addon:active {
  background-color: var(--semi-color-fill-1);
}
.semi-tree-option-list .semi-tree-option-item-icon {
  color: var(--semi-color-text-2);
}
.semi-tree-option-list .semi-tree-option-active .semi-tree-option-label-text {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list .semi-tree-option-active:hover, .semi-tree-option-list .semi-tree-option-active:active {
  background-color: transparent;
}
.semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label:hover, .semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label:active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon {
  transform: rotate(270deg);
}
.semi-tree-option-list .semi-tree-option-highlight {
  font-weight: 600;
  color: var(--semi-color-primary);
}
.semi-tree-option-list .semi-tree-option-hidden {
  display: none;
}
.semi-tree-option-list .semi-tree-option-disabled .semi-tree-option-label {
  color: var(--semi-color-disabled-text);
}
.semi-tree-option-list .semi-tree-option-fullLabel-draggable, .semi-tree-option-list .semi-tree-option-draggable {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}
.semi-tree-option-list .semi-tree-option-draggable {
  box-sizing: border-box;
  border-left: 2px solid transparent;
}
.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-label {
  border-top: 2px transparent solid;
  border-bottom: 2px transparent solid;
}
.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-drag-over-gap-top {
  border-top: 2px var(--semi-color-primary) solid;
}
.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-drag-over-gap-bottom {
  border-bottom: 2px var(--semi-color-primary) solid;
}
.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-indent .semi-tree-option-indent-unit:before {
  top: 0px;
  bottom: 0px;
}
.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-switcher-leaf-line::before {
  top: 0px;
  bottom: 0px;
}
.semi-tree-option-list .semi-tree-option-draggable.semi-tree-option-tree-node-last-leaf .semi-tree-option-switcher-leaf-line::before {
  height: 50%;
}
.semi-tree-option-list .semi-tree-option-fullLabel-draggable.semi-tree-option-fullLabel-drag-over-gap-top {
  border-top: 2px var(--semi-color-primary) solid;
}
.semi-tree-option-list .semi-tree-option-fullLabel-draggable.semi-tree-option-fullLabel-drag-over-gap-bottom {
  border-bottom: 2px var(--semi-color-primary) solid;
}
.semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable {
  border: 2px solid var(--semi-color-primary);
}
.semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable .semi-tree-option-label, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable .semi-tree-option-label {
  border-top: 0;
  border-bottom: 0;
}
.semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable + .semi-tree-option-selected::after, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable + .semi-tree-option-selected::after {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  bottom: 0;
  right: -1px;
  border-top: 2px solid var(--semi-color-primary);
}
.semi-tree-option-list .semi-tree-option-indent {
  align-self: stretch;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-tree-option-list .semi-tree-option-indent-unit {
  display: inline-block;
  width: 20px;
}
.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit {
  position: relative;
  height: 100%;
}
.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit::before {
  position: absolute;
  top: -4px;
  inset-inline-start: 6px;
  bottom: -4px;
  border-inline-end: 1px solid var(--semi-color-text-3);
  content: "";
}
.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit-end::before {
  display: none;
}
.semi-tree-option-list .semi-tree-option-switcher {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 12px;
  margin: 0;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-right: 8px;
}
.semi-tree-option-list .semi-tree-option-switcher-leaf-line {
  z-index: 1;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.semi-tree-option-list .semi-tree-option-switcher-leaf-line::before {
  position: absolute;
  top: -4px;
  inset-inline-start: 6px;
  bottom: -4px;
  border-inline-end: 1px solid var(--semi-color-text-3);
  content: "";
}
.semi-tree-option-list .semi-tree-option-switcher-leaf-line::after {
  box-sizing: border-box;
  position: absolute;
  width: 8px;
  height: 50%;
  border-bottom: 1px solid var(--semi-color-text-3);
  content: "";
  margin-inline-start: 1px;
}
.semi-tree-option-list .semi-tree-option-tree-node-last-leaf .semi-tree-option-switcher-leaf-line::before {
  height: calc(50% + 4px);
}
.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option {
  padding-top: 0px;
  padding-bottom: 0px;
}
.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-label {
  padding: 2px 0;
}
.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected {
  background-color: transparent;
}
.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:hover, .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:active {
  background-color: transparent;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-1 {
  padding-left: 8px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-2 {
  padding-left: 28px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-3 {
  padding-left: 48px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-4 {
  padding-left: 68px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-5 {
  padding-left: 88px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-6 {
  padding-left: 108px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-7 {
  padding-left: 128px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-8 {
  padding-left: 148px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-9 {
  padding-left: 168px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-10 {
  padding-left: 188px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-11 {
  padding-left: 208px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-12 {
  padding-left: 228px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-13 {
  padding-left: 248px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-14 {
  padding-left: 268px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-15 {
  padding-left: 288px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-16 {
  padding-left: 308px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-17 {
  padding-left: 328px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-18 {
  padding-left: 348px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-19 {
  padding-left: 368px;
}
.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-20 {
  padding-left: 388px;
}
.semi-tree-option-list .semi-tree-option-empty:hover, .semi-tree-option-list .semi-tree-option-empty:active {
  background-color: transparent;
}
.semi-tree-option-list .semi-tree-option-label-empty {
  padding-left: 0;
  justify-content: center;
  color: var(--semi-color-disabled-text);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: not-allowed;
}
.semi-tree-option-list .semi-checkboxGroup-vertical {
  row-gap: 0;
}

.semi-tree-option-list-block .semi-tree-option:hover {
  background-color: var(--semi-color-fill-0);
}
.semi-tree-option-list-block .semi-tree-option:active {
  background-color: var(--semi-color-fill-1);
}
.semi-tree-option-list-block .semi-tree-option-label {
  flex: 1 1;
}
.semi-tree-option-list-block .semi-tree-option-active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list-block .semi-tree-option-active:hover, .semi-tree-option-list-block .semi-tree-option-active:active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list-block .semi-tree-option-active .semi-tree-option-label-text {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-expand-icon {
  flex-shrink: 0;
  box-sizing: content-box;
}
.semi-tree-option-list-block .semi-tree-option-expand-icon:hover {
  color: var(--semi-color-text-0);
}
.semi-tree-option-list-block .semi-tree-option-expand-icon:active {
  color: var(--semi-color-black);
}
.semi-tree-option-list-block .semi-tree-option-spin-icon {
  display: flex;
  line-height: 0;
  color: var(--semi-color-primary);
}
.semi-tree-option-list-block .semi-tree-option-spin-icon svg {
  width: 12px;
  height: 12px;
}
.semi-tree-option-list-block .semi-tree-option-selected {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label:hover, .semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label:active {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-selected .semi-checkbox-addon {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-selected:hover, .semi-tree-option-list-block .semi-tree-option-selected:active {
  background-color: var(--semi-color-primary-light-default);
}
.semi-tree-option-list-block .semi-tree-option-label-text,
.semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon {
  padding: 0;
  border-radius: var(--semi-border-radius-small);
}
.semi-tree-option-list-block .semi-tree-option-label-text:hover,
.semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon:hover {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-label-text:active,
.semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon:active {
  background-color: transparent;
}
.semi-tree-option-list-block .semi-tree-option-label-text {
  width: 0;
}
.semi-tree-option-list-block .semi-tree-option-empty:hover, .semi-tree-option-list-block .semi-tree-option-empty:active {
  background-color: transparent;
}

.semi-rtl .semi-tree,
.semi-popover-rtl .semi-tree {
  direction: rtl;
}
.semi-rtl .semi-tree-wrapper,
.semi-popover-rtl .semi-tree-wrapper {
  direction: rtl;
}
.semi-rtl .semi-tree-option-list,
.semi-popover-rtl .semi-tree-option-list {
  direction: rtl;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-expand-icon,
.semi-rtl .semi-tree-option-list .semi-tree-option-empty-icon,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-expand-icon,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-empty-icon {
  margin-right: 0;
  margin-left: 8px;
}
.semi-rtl .semi-tree-option-list .semi-tree-option,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option {
  padding-left: 0;
  padding-right: 8px;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon {
  margin-right: 0;
  margin-left: 8px;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-label .semi-checkbox,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-label .semi-checkbox {
  margin-right: 0;
  margin-left: 8px;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon {
  transform: rotate(90deg);
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-1,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-1 {
  padding-left: 0;
  padding-right: 8px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-2,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-2 {
  padding-left: 0;
  padding-right: 28px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-3,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-3 {
  padding-left: 0;
  padding-right: 48px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-4,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-4 {
  padding-left: 0;
  padding-right: 68px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-5,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-5 {
  padding-left: 0;
  padding-right: 88px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-6,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-6 {
  padding-left: 0;
  padding-right: 108px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-7,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-7 {
  padding-left: 0;
  padding-right: 128px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-8,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-8 {
  padding-left: 0;
  padding-right: 148px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-9,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-9 {
  padding-left: 0;
  padding-right: 168px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-10,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-10 {
  padding-left: 0;
  padding-right: 188px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-11,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-11 {
  padding-left: 0;
  padding-right: 208px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-12,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-12 {
  padding-left: 0;
  padding-right: 228px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-13,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-13 {
  padding-left: 0;
  padding-right: 248px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-14,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-14 {
  padding-left: 0;
  padding-right: 268px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-15,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-15 {
  padding-left: 0;
  padding-right: 288px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-16,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-16 {
  padding-left: 0;
  padding-right: 308px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-17,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-17 {
  padding-left: 0;
  padding-right: 328px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-18,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-18 {
  padding-left: 0;
  padding-right: 348px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-19,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-19 {
  padding-left: 0;
  padding-right: 368px;
}
.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-20,
.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-20 {
  padding-left: 0;
  padding-right: 388px;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-label-empty,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-label-empty {
  padding-left: auto;
  padding-right: 0;
}
.semi-rtl .semi-tree-option-list .semi-tree-option-switcher,
.semi-popover-rtl .semi-tree-option-list .semi-tree-option-switcher {
  margin-right: 0;
  margin-left: 8px;
}
.semi-rtl .semi-tree-option-list-block,
.semi-popover-rtl .semi-tree-option-list-block {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-divider {
  margin: 1px 0px 1px 0px;
  border-bottom: 1px solid var(--semi-color-border);
  color: var(--semi-color-text-0);
  box-sizing: border-box;
}
.semi-divider-dashed {
  border-bottom-style: dashed;
}
.semi-divider-horizontal {
  width: 100%;
  display: flex;
}
.semi-divider-vertical {
  border-bottom: 0;
  display: inline-block;
  margin: 0px 1px 0px 1px;
  border-left: 1px solid var(--semi-color-border);
  height: 20px;
  vertical-align: middle;
}
.semi-divider-with-text {
  display: flex;
  border-bottom: 0;
  white-space: nowrap;
  align-items: center;
}
.semi-divider-with-text .semi-divider_inner-text {
  font-weight: 600;
  padding: 0px 8px 0px 8px;
  display: inline-block;
}
.semi-divider-with-text::before, .semi-divider-with-text::after {
  content: "";
  width: 50%;
  border-bottom: 1px solid var(--semi-color-border);
}
.semi-divider-with-text-left::before {
  width: 40px;
}
.semi-divider-with-text-left::after {
  flex: 1 1;
}
.semi-divider-with-text-right::before {
  flex: 1 1;
}
.semi-divider-with-text-right::after {
  width: 40px;
}

.semi-divider-dashed::before, .semi-divider-dashed::after {
  border-bottom: 1px dashed var(--semi-color-border);
}

.semi-divider-vertical.semi-divider-dashed {
  border-left: 1px dashed var(--semi-color-border);
}
/* shadow */
/* sizing */
/* spacing */
.semi-slider {
  padding: 0px 13px;
  margin: 0px;
}
.semi-slider-wrapper {
  box-sizing: border-box;
  position: relative;
  height: 32px;
  width: 100%;
  display: inline-block;
  vertical-align: bottom;
}
.semi-slider-rail {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: absolute;
  height: 4px;
  cursor: pointer;
  touch-action: none;
  background-color: var(--semi-color-fill-0);
  width: 100%;
  border-radius: var(--semi-border-radius-small);
  top: 14px;
}
.semi-slider-handle {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  touch-action: none;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-top: 4px;
  background-color: var(--semi-color-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
  transform: var(--semi-transform_scale-small) translateX(-50%) translateY(0px);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.semi-slider-handle:focus-visible {
  outline: 2px solid var(--semi-color-primary-light-active);
}
.semi-slider-handle-dot {
  background: var(--semi-color-primary);
  width: 4px;
  height: 4px;
  border-radius: var(--semi-border-radius-circle);
}
.semi-slider-handle:hover {
  background-color: var(--semi-color-white);
}
.semi-slider-handle-clicked {
  border: solid 1px var(--semi-color-focus-border);
  cursor: grabbing;
}
.semi-slider-track {
  height: 4px;
  background: var(--semi-color-primary);
  border-radius: var(--semi-border-radius-small);
  position: absolute;
  cursor: pointer;
  top: 14px;
}
.semi-slider-tooltip {
  position: absolute;
  top: -40px;
}
.semi-slider-dots {
  width: 100%;
  background: transparent;
}
.semi-slider-dot {
  position: absolute;
  top: 14px;
  width: 4px;
  height: 4px;
  background-color: var(--semi-color-white);
  border-radius: 50%;
  cursor: pointer;
  transform: translateX(0px);
}
.semi-slider-dot-active {
  background-color: var(--semi-color-white);
}
.semi-slider-marks {
  position: absolute;
  top: 23px;
  left: 0px;
  width: 100%;
  font-size: 14px;
}
.semi-slider-mark {
  position: absolute;
  display: inline-block;
  color: var(--semi-color-text-2);
  text-align: center;
  cursor: pointer;
  transform: translate(-50%, 0);
}
.semi-slider-marks-reverse {
  position: absolute;
  top: 23px;
  left: 0px;
  width: 100%;
  font-size: 14px;
}
.semi-slider-mark-reverse {
  position: absolute;
  display: inline-block;
  color: var(--semi-color-text-2);
  text-align: center;
  cursor: pointer;
  transform: translate(-50%, 0) rotate(-180deg);
}
.semi-slider-boundary {
  position: relative;
  font-size: 12px;
  color: var(--semi-color-text-0);
  visibility: hidden;
  top: 30px;
}
.semi-slider-boundary span {
  position: absolute;
  display: inline-block;
}
.semi-slider-boundary-min {
  left: 0px;
}
.semi-slider-boundary-max {
  right: 0px;
}
.semi-slider-boundary-show {
  visibility: visible;
}

.semi-slider-vertical-wrapper {
  width: 4px;
  height: 100%;
}
.semi-slider-vertical-wrapper .semi-slider-track {
  width: 4px;
}
.semi-slider-vertical-wrapper .semi-slider-marks {
  height: 100%;
  margin-top: -30px;
  margin-left: 29px;
}
.semi-slider-vertical-wrapper .semi-slider-marks-reverse {
  height: 100%;
  margin-top: -30px;
  margin-left: -26px;
}
.semi-slider-vertical-wrapper .semi-slider-rail {
  width: 4px;
  height: 100%;
  top: 0px;
}
.semi-slider-vertical-wrapper .semi-slider-handle {
  margin-top: 0px;
  margin-left: -10px;
  transform: var(--semi-transform_scale-small) translateY(-50%) translateX(0px);
}
.semi-slider-vertical-wrapper .semi-slider-dot {
  transform: translateY(0px);
}

.semi-slider-disabled {
  cursor: not-allowed;
}
.semi-slider-disabled .semi-slider-handle {
  cursor: not-allowed;
  box-shadow: none;
  border: 1px var(--semi-color-border) solid;
}
.semi-slider-disabled .semi-slider-handle:hover {
  background-color: var(--semi-color-white);
}
.semi-slider-disabled .semi-slider-rail {
  cursor: not-allowed;
}
.semi-slider-disabled .semi-slider-track {
  cursor: not-allowed;
  background-color: var(--semi-color-primary-disabled);
}
.semi-slider-disabled .semi-slider-dot {
  cursor: not-allowed;
  background-color: var(--semi-color-white);
  border-color: var(--semi-color-white);
  box-shadow: none;
}

.semi-slider-handle-tooltip {
  text-align: center;
}

.semi-slider-reverse {
  transform: rotate(180deg);
}
/* shadow */
/* sizing */
/* spacing */
.semi-skeleton-avatar, .semi-skeleton-image, .semi-skeleton-title, .semi-skeleton-button {
  background: var(--semi-color-fill-0);
  border-radius: var(--semi-border-radius-small);
}
.semi-skeleton-avatar-circle {
  border-radius: 50%;
}
.semi-skeleton-avatar-extra-extra-small {
  width: 20px;
  height: 20px;
}
.semi-skeleton-avatar-extra-small {
  width: 24px;
  height: 24px;
}
.semi-skeleton-avatar-medium {
  width: 48px;
  height: 48px;
}
.semi-skeleton-avatar-small {
  width: 32px;
  height: 32px;
}
.semi-skeleton-avatar-large {
  width: 72px;
  height: 72px;
}
.semi-skeleton-avatar-extra-large {
  width: 128px;
  height: 128px;
}
.semi-skeleton-paragraph {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.semi-skeleton-paragraph li {
  background: var(--semi-color-fill-0);
  border-radius: var(--semi-border-radius-small);
  width: 100%;
  height: 16px;
  margin-bottom: 10px;
}
.semi-skeleton-paragraph li:last-child {
  width: 60%;
  margin-bottom: 0;
}
.semi-skeleton-paragraph li:first-child {
  width: 100%;
}
.semi-skeleton-title {
  width: 100%;
  height: 24px;
}
.semi-skeleton-button {
  width: 115px;
  height: 32px;
}
.semi-skeleton-image {
  width: 100%;
  height: 100%;
}
.semi-skeleton-active .semi-skeleton-avatar,
.semi-skeleton-active .semi-skeleton-image,
.semi-skeleton-active .semi-skeleton-title,
.semi-skeleton-active .semi-skeleton-button,
.semi-skeleton-active .semi-skeleton-paragraph li {
  background: linear-gradient(90deg, var(--semi-color-fill-0) 25%, var(--semi-color-fill-1) 44%, var(--semi-color-fill-0) 88%);
  background-size: 400% 100%;
  animation: 1400ms skeleton-loading ease infinite;
  animation-fill-mode: forwards;
}
@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.semi-rtl .semi-skeleton,
.semi-portal-rtl .semi-skeleton {
  direction: rtl;
}
/* shadow */
/* sizing */
/* spacing */
.semi-image {
  border-radius: var(--semi-border-radius-small);
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.semi-image-img {
  vertical-align: top;
  border-radius: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-image-img-preview {
  cursor: zoom-in;
}
.semi-image-img-error {
  opacity: 0;
}
.semi-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.semi-image-status {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--semi-border-radius-small);
  background-color: var(--semi-color-fill-0);
  color: var(--semi-color-disabled-text);
}

.semi-image-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1070;
  background-color: var(--semi-color-overlay-bg);
  transition: opacity 500ms;
  overflow: hidden;
}
.semi-image-preview-popup {
  position: absolute;
}
.semi-image-preview .semi-image-preview-hide {
  opacity: 0;
}
.semi-image-preview-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
  color: var(--semi-color-white);
}
.semi-image-preview-prev {
  left: 24px;
}
.semi-image-preview-next {
  right: 24px;
}
.semi-image-preview-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--semi-color-white);
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  z-index: 1;
  pointer-events: none;
}
.semi-image-preview-header-title {
  flex: 1 1;
}
.semi-image-preview-header-close {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  pointer-events: auto;
}
.semi-image-preview-header-close:hover {
  background-color: rgba(0, 0, 0, 0.75);
}
.semi-image-preview-footer {
  display: flex;
  align-items: center;
}
.semi-image-preview-footer-content {
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: var(--semi-border-radius-medium);
  height: 48px;
}
.semi-image-preview-footer-wrapper {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
}
.semi-image-preview-footer-page {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: var(--semi-color-white);
  font-size: 16px;
  line-height: 22px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 12px;
}
.semi-image-preview-footer .semi-icon {
  color: var(--semi-color-white);
  cursor: pointer;
}
.semi-image-preview-footer-gap {
  margin-left: 16px;
}
.semi-image-preview-footer .semi-slider {
  width: 132px;
  padding: 0 16px;
}
.semi-image-preview-footer .semi-slider .semi-slider-rail {
  color: var(--semi-color-white);
  height: 2px;
}
.semi-image-preview-footer .semi-slider .semi-slider-track {
  height: 2px;
}
.semi-image-preview-footer .semi-slider .semi-slider-handle {
  width: 16px;
  height: 16px;
  margin-top: 8px;
  box-sizing: border-box;
}
.semi-image-preview-footer .semi-divider {
  background: rgba(255, 255, 255, 0.5);
  margin: 0 16px;
}
.semi-image-preview-footer .semi-image-preview-footer-disabled {
  color: rgba(249, 249, 249, 0.35);
  cursor: default;
  pointer-events: none;
}
.semi-image-preview-image {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.semi-image-preview-image-img {
  position: absolute;
  transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none);
  z-index: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.semi-image-preview-image-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.semi-image-preview-image-spin .semi-spin-wrapper {
  color: #ccc;
}
@keyframes spinner {
  to {
    transform: var(--semi-transform_rotate-clockwise360deg);
  }
}

img[src=""], img:not([src]) {
  opacity: 0;
}

.semi-rtl .semi-image-preview,
.semi-portal-rtl .semi-image-preview {
  direction: rtl;
}
.semi-rtl .semi-image-preview-group,
.semi-portal-rtl .semi-image-preview-group {
  direction: rtl;
}
.semi-rtl .semi-image-preview-prev,
.semi-portal-rtl .semi-image-preview-prev {
  right: 24px;
  left: auto;
  transform: var(--semi-transform_rotate-clockwise180deg);
}
.semi-rtl .semi-image-preview-next,
.semi-portal-rtl .semi-image-preview-next {
  left: 24px;
  right: auto;
  transform: var(--semi-transform_rotate-clockwise180deg);
}
.semi-rtl .semi-image-preview-footer-page,
.semi-portal-rtl .semi-image-preview-footer-page {
  display: flex;
  direction: rtl;
}
.semi-rtl .semi-image-preview-footer-gap,
.semi-portal-rtl .semi-image-preview-footer-gap {
  margin-right: 16px;
  margin-left: 0;
}
.semi-rtl .semi-image-preview-footer .semi-icon-chevron_left,
.semi-portal-rtl .semi-image-preview-footer .semi-icon-chevron_left {
  transform: var(--semi-transform_rotate-clockwise180deg);
}
.semi-rtl .semi-image-preview-footer .semi-icon-chevron_right,
.semi-portal-rtl .semi-image-preview-footer .semi-icon-chevron_right {
  transform: var(--semi-transform_rotate-clockwise180deg);
}
.wk-avatar {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    -o-object-fit: cover;
       object-fit: cover;
}



:root {
    --wk-height-viewqueueheader: 50px;
}

.wk-viewqueueheader {
    background-color: var(--wk-bkcolor);
    height: 50px;
    height: var(--wk-height-viewqueueheader);
    width: 100%;
    position: relative;
    color: var(--wk-textcolor);
}

.wk-viewqueueheader-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-viewqueueheader-content-title {
    font-size: 17px;
    font-weight: 500;
    max-width: 200px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

body[theme-mode=dark] .wk-viewqueueheader-content-title {
    color: white;
}

.wk-viewqueueheader-back {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0px 15px;
}

.wk-viewqueueheader-back img {
    width: 10px;
    height: 15px;
}

.wk-viewqueueheader-content-action {
    position: absolute;
    right: 15px;
}

.wk-mergeforwardmessagelist {
    width: 100%;
    height: 100%;
}

.wk-mergeforwardmessagelist-content {
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
}

.wk-mergeforwardmessagelist-content-timeline {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-mergeforwardmessagelist-content-msgs {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.wk-mergeforwardmessagelist-content-msg {
    display: flex;
    width: 100%;
    padding: 15px;
    background-color: var(--wk-color-item);
}

.wk-mergeforwardmessagelist-content-msg-info {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.wk-mergeforwardmessagelist-content-msg-info-first {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0px 15px;

}

.wk-mergeforwardmessagelist-content-msg-info-first-name {
    font-size: 14px;
    color: #999;
}

.wk-mergeforwardmessagelist-content-msg-info-first-time {
    font-size: 12px;
    color: #999;
}

.wk-mergeforwardmessagelist-content-msg-info-second-msgcontent {
    padding: 0px 15px;
    margin-top: 5px;
}
:root {
    --wk-width-max-message: 540px;
}

.wk-message-base {
    width: 100%;
    height: 100%;
    display: flex;
}

.wk-message-base-check-open {

}

.wk-message-base-send, .wk-message-base-recv {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* 设计 807:4960：消息列左右各留 20px（发送侧 10px + 消息行 10px）。 */
.wk-message-base-send {
    align-items: flex-end;
    margin-right: 10px;
}

.wk-message-base-recv {
    margin-left: 20px;
    transform: translate3d(0, 0, 0);
    transition: transform var(--wk-layer-transition);
}

.wk-message-base-check-open .wk-message-base-recv {
    transform: translate3d(30px, 0, 0);
}

.senderName {
    color: #666666;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    max-width: 540px;
    max-width: var(--wk-width-max-message);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 夜间 949:19004：气泡上方的昵称行与正文同为 #DFE2E6。 */
body[theme-mode=dark] .senderName {
    color: var(--wk-night-ink);
}

/* 设计 807:4960：双侧 49×49 圆形头像，与消息块顶对齐。 */
.senderAvatar {
    width: 49px;
    height: 49px;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 0;
}

.senderAvatar img {
    width: 49px;
    height: 49px;
    border-radius: 50%;
}

/* 群聊带昵称行时头像与昵称行顶对齐（昵称行 20px + 间距 6px）。 */
.messageNameBox + .wk-message-base-box .senderAvatar {
    top: -26px;
}

.wk-message-base-box {
    display: flex;
    align-items: center;
    position: relative;
}

.wk-message-base-send .wk-message-base-box {
    flex-direction: row-reverse;
    justify-content: center;
    margin-left: 0px;
    margin-right: 10px;
}

.wk-message-base-send .senderAvatar {
    left: auto;
    right: 0;
}

.wk-message-base-bubble-box {
    display: flex;
    position: relative;
}

/* 头像 49px + 间距 12px，内容列固定缩进 61px（807:4960）。 */
.wk-message-base-bubble-box.recv {
    margin-left: 61px;
}

.wk-message-base-bubble-box.send {
    margin-right: 61px;
}

.wk-message-base-bubble {
    color: #333333;
    display: flex;
    /* margin-bottom: 4px; */
    padding: 12px;
    position: relative;
    word-wrap: break-word;
    max-width: 540px;
    max-width: var(--wk-width-max-message);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 设计 807:4960 的气泡没有任何 effects，白气泡靠 #f4f5f7 聊天底色区分。 */
    box-shadow: none;
    font-size: 14px;
}

.wk-message-base-bubble-box.hide .wk-message-base-bubble {
    padding: 0px;
}

@container wk-app-canvas (max-width: 640px) {
    .wk-message-base-bubble {
        max-width: calc(100vw - 80px);
    }
}

/* 设计 807:5253：发送气泡使用紫色渐变、白字，右上角为 2px 小切角。 */
.wk-message-base-bubble-box.send .wk-message-base-bubble {
    background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
    border-radius: 10px 2px 10px 10px;
    color: #ffffff;
}

/* 设计 807:4960：接收气泡左上 2px 小切角，不挂尾角。 */
.wk-message-base-bubble-box.recv .wk-message-base-bubble {
    border-radius: 2px 10px 10px 10px;
    background-color: var(--wk-chat-other-bkcolor) ;
    color: var(--wk-textcolor);
}

body:not([theme-mode="dark"]) .wk-message-base-bubble-box.recv .wk-message-base-bubble {
    background: #ffffff;
    color: #333333;
}

/*
 * 夜间 949:19041 / 949:19014：发送与接收气泡在暗色下都是 #2F2F30，
 * 只靠 2px 切角的方向区分收发，文字统一 #DFE2E6，不再套用紫色渐变。
 */
body[theme-mode=dark] .wk-message-base-bubble-box.send .wk-message-base-bubble {
    background: var(--wk-chat-self-bkcolor);
    color: var(--wk-night-ink);
}

body[theme-mode=dark] .wk-message-base-bubble-box.recv .wk-message-base-bubble  {
    background-color: var(--wk-chat-other-bkcolor);
    color: var(--wk-night-ink);
}

/* 连续消息的相邻角收窄，保留设计里的右上角小切角作为整组的起点。 */
.wk-message-base-bubble-box.send.first .wk-message-base-bubble {
    border-radius: 10px 2px 4px 10px;
}

.wk-message-base-bubble-box.send.middle .wk-message-base-bubble {
    border-radius: 10px 4px 4px 10px;
}

.wk-message-base-bubble-box.send.last .wk-message-base-bubble {
    border-radius: 10px 4px 10px 10px;
}

/* 接收侧与发送侧对称：左上 2px 切角作为整组起点，相邻角收窄为 4px。 */
.wk-message-base-bubble-box.recv.first .wk-message-base-bubble {
    border-radius: 2px 10px 10px 4px;
}

.wk-message-base-bubble-box.recv.middle .wk-message-base-bubble {
    border-radius: 4px 10px 10px 4px;
}

.wk-message-base-bubble-box.recv.last .wk-message-base-bubble {
    border-radius: 4px 10px 10px 10px;
}

/* 图片、视频、贴图等无气泡消息必须连渐变一起清掉，否则会透出发送侧紫底。 */
.wk-message-base-bubble-box.hide .wk-message-base-bubble {
    background: transparent !important;
    box-shadow: none;
}


/* .wk-message-base-recv .wk-message-base-bubble {
    margin-left: 5px;
    background-color: #bedbf5;
}

.wk-message-base-send .wk-message-base-bubble {
    margin-right: 5px;
    background-color: #fff;
    box-shadow: -1px 1px 1px rgba(0,0,0,.12);
    color: rgba(9,30,66,.87) !important;
    border-radius: 20px 4px 8px 20px;
}*/



/* 设计 807:5249 / 807:5225：昵称行在气泡外，与气泡间距 6px。 */
.messageNameBox {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    margin-bottom: 6px;
}

.senderAccessory {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

/* 发送侧镜像成「徽标 + 昵称」，并与气泡右边缘对齐（61px 头像列 + 10px 消息行外边距）。 */
.wk-message-base-send .messageNameBox {
    flex-direction: row-reverse;
    justify-content: flex-start;
    padding-right: 71px;
}

/* 接收侧是「昵称 + 徽标」，左侧留出与气泡一致的 61px 头像列。 */
.wk-message-base-recv .messageNameBox {
    flex-direction: row;
    padding-left: 61px;
}

/*.messageTime {
    color: rgba(9,30,66,.74);
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;
    display: none;
}

.wk-message-base-send:hover .messageTime {
    display: block;
}

.wk-message-base-recv:hover .messageTime {
    display: block;
}

.wk-message-base-recv .messageTime {
    margin-left: 8px;
}

.wk-message-base-send .messageTime {
    margin-right: 8px;
}*/



.wk-message-base-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.popupMenusContaner {
    display: none;
}

.wk-message-base-box:hover .popupMenusContaner {
    display: block;
}


.wk-message-base-checkBox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: translate3d(-10px, 0, 0);
    transition: transform var(--wk-layer-transition);
}

.wk-message-base-check-open {
    cursor: pointer;
}

.wk-message-base-check-open .wk-message-base-checkBox{
    transform: translate3d(25px, 0, 0);
   
}

.wk-message-base-checkBox .wk-check {
    position: absolute;
    bottom: 10px;
}

.wk-message-base-send .checkBox {
    left: auto;
    right: -30px;
}


.wk-message-base-send .wk-message-base-box.checked {
    margin-left: 0;
    margin-right: 30px;
}

.wk-message-base-recv .wk-message-base-box.checked .senderAvatar {
    left: -30px;
}

.replyBox {
    width: 100%;
}

.reply {
    position: relative;
    color: #666;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 12px;
    margin-bottom: 4px;
    max-width: 100%;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.reply::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    border-radius: 50px;
    background-color: var(--wk-color-theme);
}

.messageMeta {
    position: relative;
    top: 0.375rem;
    bottom: auto !important;
    float: right;
    line-height: 1;
    height: 19px;
    margin-left: 0.4375rem;
    margin-right: -0.2rem;
}

.wk-message-base-bubble-box.send .messageMeta {
    top: 0rem;
}

.messageTime {
    margin-inline-end: 0.1875rem;
    font-size: .75rem;
    white-space: nowrap;
}

.wk-message-base-bubble-box.recv .messageTime {
    color: rgb(104, 108, 114,0.75);
}

.wk-message-base-bubble-box.send .messageTime {
    color: rgb(255, 255, 255,0.75);
}

/* 夜间收发气泡同底，时间戳统一压到 #DFE2E6 的 70%。 */
body[theme-mode=dark] .wk-message-base-bubble-box.recv .messageTime,
body[theme-mode=dark] .wk-message-base-bubble-box.send .messageTime {
    color: rgba(223, 226, 230, 0.7);
}

.textTitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: calc(1rem - .125rem);
    font-size: calc(var(--message-text-size, 1rem) - .125rem);
    font-weight: 500;
    color: var(--wk-textcolor);
    unicode-bidi: plaintext;
    display: flex;
}

.icon-message-read::before {
    content: "";
    position: absolute;
    bottom: -4px;
    color: rgb(255,255,255,0.7);
}

.icon-message-succeeded::before {
    content: "";
    position: absolute;
    bottom: -4px;
    color: rgb(255,255,255,0.7);
}

.icon-message-pending::before {
    content: "";
    position: absolute;
    bottom: -4px;
}

.messageStatus {
    width: 1.19rem;
    height: 1.19rem;
    overflow: hidden;
    display: inline-block;
    line-height: 1;
    margin-left: -0.1875rem;
    font-size: 1.1875rem;
    border-radius: 0.625rem;
}

.messageFail {
    cursor: pointer;
}

/* 失败图标位于发送气泡左侧（发送行 row-reverse，右侧头像列已被占用）。 */
.messageFail img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.wk-message-error-reason {
    font-size: 13px;
    margin-right: 10px;
    margin-top: 5px;
    color: var(--wk-color-font-tip);
}


.wk-check {
    cursor: pointer;
}


.wk-mergeforwards {
    width: 300px;
    background-color: var(--wk-message-item);
    border-radius: 8px;
    cursor: pointer;
}



.wk-mergeforwards-content {
    padding: 10px 10px 0px 10px;
    color: black;

}

.wk-mergeforwards-content-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--wk-message-color);
}

.wk-mergeforwards-content-items {
    padding-bottom: 5px;
}

.wk-mergeforwards-content-items .wk-mergeforwards-content-item {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #999 !important;
}

.wk-mergeforwards-content-tip {
    display: flex;
    justify-content: space-between;
    color: #999 !important;
    font-size: 13px;
    padding: 2px 0px;
}

.wk-mergeforwards-content-tip p {
    margin-bottom: 0px;
}

.wk-mergeforwards-content-tip p:last-child {
    margin-top: -4px;
}

.wk-mergeforwards-content-line {
    width: 100%;
    background-color: var(--wk-line-color);
    height: 1px;
}

:root {
    --wk-conversation-footer: 159px;
    --wk-height-conversation-replyview: 50px;
}

.wk-conversation {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
}

.wk-conversation-floating-layers {
    position: absolute;
    inset: 0;
    /* 子浮层自行参与聊天区层叠，避免父级把 Hall 菜单锁在面板下方。 */
    z-index: auto;
    pointer-events: none;
}

.wk-conversation-floating-layers > * {
    pointer-events: auto;
}


.wk-conversation-hasreply {

}


.wk-conversation-content {
    width: 100%;
    height: calc(100% - 159px);
    height: calc(100% - var(--wk-conversation-footer));
    position: relative;
    z-index: 0;
    min-height: 0;
    overflow: hidden;
    transition: height 150ms ease-out,opacity 150ms ease-out;
}

/* 夜间 949:18850：消息滚动区与聊天主区共用 #1E1E1F，气泡靠 #2F2F30 区分。 */
body[theme-mode=dark] .wk-conversation-content {
    background-color: var(--wk-night-canvas);
}

body[theme-mode=dark] .wk-conversation-content-fileupload-mask-content {
    border-color: var(--wk-night-line-strong);
    background-color: rgba(30, 30, 31, 0.8);
    color: var(--wk-night-ink);
}

.wk-conversation-hasreply .wk-conversation-content {
    height: calc(100% - 159px - 50px);
    height: calc(100% - var(--wk-conversation-footer) - var(--wk-height-conversation-replyview));
}


.wk-conversation-messages {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.wk-message-item {
    width: 100%;
    display: flex;
    position: relative;
    
}


/* 设计 807:4960：消息组间距 20px，最后一条同样保留 20px 收尾。 */
.wk-message-item-last {
    margin-bottom: 20px;
}

.wk-conversation-dragover .wk-message-item {
    pointer-events:none;
}

.wk-conversation-footer {
    width: 100%;
    height: 159px;
    height: var(--wk-conversation-footer);
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    z-index: 12;
    bottom: 0px;
    background-color: var(--wk-chat-send-bkcolor);
}



.wk-conversation-footer-content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.wk-conversation-chattoolbars {
    width: 348px;
    max-width: 100%;
    height: 24px;
    min-width: 0;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}

.wk-conversation-chattoolbars-item {
    width: 24px;
    height: 24px;
    flex: none;
    position: relative;
    cursor: pointer;
}

.wk-conversation-chattoolbars-item.is-disabled {
    cursor: default;
}

.wk-figma-composer-tool-icon {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wk-figma-composer-tool-icon img {
    width: 24px;
    height: 24px;
    position: absolute;
    inset: 0;
    display: block;
    transition: opacity 120ms ease;
}

.wk-figma-composer-tool-icon .is-hover {
    opacity: 0;
}

.wk-figma-composer-tool-control {
    width: 24px;
    height: 24px;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

.wk-figma-composer-tool-control .wk-iconclick,
.wk-figma-composer-tool-control .wk-emojitoolbar,
.wk-figma-composer-tool-control .wk-emojitoolbar-content,
.wk-figma-composer-tool-control .wk-imagetoolbar,
.wk-figma-composer-tool-control .wk-imagetoolbar-content,
.wk-figma-composer-tool-control .wk-filetoolbar,
.wk-figma-composer-tool-control .wk-filetoolbar-content,
.wk-figma-composer-tool-control .wk-favorite-send-toolbar,
.wk-figma-composer-tool-control .wk-voice-toolbar-trigger,
.wk-figma-composer-tool-control .wk-screenshot-toolbar,
.wk-figma-composer-tool-control .wk-screenshot-toolbar-trigger,
.wk-figma-composer-tool-control .wk-contact-card-send-toolbar {
    width: 24px;
    height: 24px;
    padding: 0;
}

.wk-figma-composer-tool-control .wk-iconclick > img,
.wk-figma-composer-tool-control .wk-emojitoolbar-content > img,
.wk-figma-composer-tool-control .wk-imagetoolbar-content-icon > img,
.wk-figma-composer-tool-control .wk-filetoolbar-content-icon > img,
.wk-figma-composer-tool-control .wk-favorite-send-toolbar > svg,
.wk-figma-composer-tool-control .wk-voice-toolbar-trigger > img {
    opacity: 0;
}

.wk-conversation-chattoolbars-item:not(.is-disabled):hover
    .wk-figma-composer-tool-icon .is-default {
    opacity: 0;
}

.wk-conversation-chattoolbars-item:not(.is-disabled):hover
    .wk-figma-composer-tool-icon .is-hover {
    opacity: 1;
}



.wk-conversation-content-fileupload-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    padding: 15px;

}

.wk-conversation-content-fileupload-mask-content {
    width: 100%;
    height: 100%;
    border: 1px dashed #999;
    border-radius: 4px;
    background-color: rgb(255, 255, 255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    padding: 20px;

}

.wk-replyview {
    width: 100%;
    height: 100%;
    display: flex;
}

.wk-replyview-content {
    width: calc(100% - 80px);
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    color: var(--wk-color-font-tip);
}

.wk-replyview-content-msg {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wk-replyview-content-first {
    width: 100%;
    margin-top: 2px;
}

.wk-replyview-content-second {
    margin-top: 2px;
}

.wk-replyview-content-userinfo {
    display: flex;
}

.wk-replyview-content-userinfo-name {
    display: flex;
    align-items: center;
    margin-left: 5px;
}

.wk-conversation-topview {
    transform: translate3d(0, 100%, 0);
    transition: transform var(--wk-layer-transition);
    background-color: white;
}

body[theme-mode=dark] .wk-conversation-topview {
    background-color: var(--wk-color-secondary);
}

.wk-conversation-hasreply .wk-conversation-topview {
    transform: translate3d(0,  0, 0);
    height: 50px;
    height: var(--wk-height-conversation-replyview);
    box-shadow: 0.3rem -0.2rem 0.8rem 0.05rem rgb(114 114 114 / 5%);
    border-left: none;
}

.wk-conversation-hasreply .wk-messageinput-box {
    box-shadow:none;
}

.wk-replyview-close {
    height: 100%;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: var(--wk-line);
    cursor: pointer;
}



.wk-conversation-multiplepanel {
    height: 159px;
    height: var(--wk-conversation-footer);
    background-color: var(--wk-color-secondary);
    width: 100%;
    z-index: 999;
    position: absolute;
    bottom: 0px;
    transform: translate3d(0, 159px, 0);
    transform: translate3d(0, var(--wk-conversation-footer), 0);
    transition: transform var(--wk-layer-transition);
}

.wk-conversation-multiplepanel-show {
    transform: translate3d(0, 0, 0);

}

.wk-multiplepanel {
    width: 100%;
    height: 100%;
}

.wk-multiplepanel-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-multiplepanel-content-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 60px;
    cursor: pointer;
    
}

.wk-multiplepanel-content-item:first-child {
    margin-left: 0px;
}

.wk-multiplepanel-content-item-icon {
    background-color: var(--wk-color-item);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-multiplepanel-content-item-icon-svg {
    width: 24px;
    height: 24px;
    fill: var(--wk-text-item);
}
.wk-multiplepanel-content-item-title {
    color: var(--wk-text-item);
    font-size: 14px;
    margin-top: 4px;
}

.wk-multiplepanel-close {
    position: absolute;
    top: 20px;
    left: 40px;
    padding: 10px;
    cursor: pointer;
}


.wk-conversationpositionview {
    position: absolute;
    bottom: 1.0rem;
    right: 1.5rem;
}

.wk-conversationpositionview ul {
    margin-bottom: 0px;
}

.wk-conversationpositionview-item {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #d9d9d9;
   
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: scale(0.5,0.5);
    transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1),opacity .2s ease;
    opacity: 0;
}

.wk-conversationpositionview-item img {
    width: 20px;
    height: 20px;
}

body[theme-mode=dark] .wk-conversationpositionview-item  {
    background-color: var(--wk-color-secondary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}


.wk-conversationpositionview-item.wk-reveale {
    transform: scale(1,1);
    opacity: 1;
    pointer-events: all;
}

.wk-conversationpositionview-item i {
    font-size: 1.75rem;
}

.icon-arrow-down::before {
    content: "";
}

.wk-conversationpositionview-item .wk-conversation-unread-count {
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 0.75rem;
    font-size: .875rem;
    line-height: 1.5rem;
    font-weight: 500;
    text-align: center;
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    background: red;
    color: #fff;
    pointer-events: none;
}

.wk-conversationpositionview ul li {
    margin-top: 20px;
}

.wk-message-item-reminder {
    animation:wk-message-item-reminder-move 2s;
	-webkit-animation:wk-message-item-reminder-move 2s;
}

@keyframes wk-message-item-reminder-move
	{
	to {background-color:var(--wk-color-theme);}
}

/*Safari 和 Chrome:*/



.mentions {
    margin: 1em 0;
  }
  
  .mentions--singleLine .mentions__control {
    display: inline-block;
    width: 130px;
  }
  .mentions--singleLine .mentions__highlighter {
    padding: 1px;
    border: 2px inset transparent;
  }
  .mentions--singleLine .mentions__input {
    padding: 1px;
    border: 2px inset;
  }
  
  .mentions--multiLine .mentions__control {
    font-family: var(--wk-font-family);
    font-size: 14pt;
  }
  .mentions--multiLine .mentions__highlighter {
    border: 1px solid transparent;
    padding: 9px;
    min-height: 63px;
  }
  .mentions--multiLine .mentions__input {
    border: 1px solid silver;
    padding: 9px;
    outline: 0;
  }
  
  .mentions__suggestions__list {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-size: 10pt;
    /* box-shadow: 15px 0px 15px -15px #eee, -15px 0px 15px -15px #eee; */
  }
  
  .mentions__suggestions__item {
    padding: 5px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }
  
  .mentions__suggestions__item--focused {
    background-color: #cee4e5;
  }
  
  .mentions__mention {
    position: relative;
    z-index: 1;
    color: var(--wk-color-theme);
    text-shadow: none;
    /* text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white,
      -1px -1px 1px white; */
    /* text-decoration: underline; */
    pointer-events: none;
  }


.wk-messageinput-box {
    background: var(--wk-chat-send-bkcolor);
    width: 100%;
    height: 100%;
    position: relative;

    box-shadow: none;
    border-left: none;
}

body:not([theme-mode="dark"]) .wk-messageinput-box { background: #ffffff; }

/* 夜间 949:19051：编辑区与聊天主区同底 #1E1E1F，顶部只留 #DFE2E6 10% 的内阴影分隔。 */
body[theme-mode=dark] .wk-messageinput-box {
    background-color: var(--wk-night-canvas);
}

body[theme-mode=dark] .wk-messageinput-bar {
    border-top-color: var(--wk-night-line);
}

/* .wk-messageinput-box:hover {
     box-shadow: 0 0 10px rgb(0 0 0 / 15%)
} */

.wk-messageinput-inputbox {
    height: 111px;
    width: 100%;
    min-height: 0;
    padding: 4px 20px 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.wk-messageinput-input {
    height: 100%;
    width: 100%;
    border: none;
    color: #333;
    font-family: var(--wk-font-family);
    font-size: 14px;
    overflow-y: scroll;
    display: inline-block;
    -webkit-user-modify: read-write-plaintext-only;
    outline: none;
}

body[theme-mode=dark] .wk-messageinput-input {
    color: var(--wk-night-ink);
}

.wk-messageinput-input textarea {
    outline: none;
    border: none;
}

.wk-messageinput-input:empty:before {
        content: attr(data-placeholder);
        position: absolute;
        color: #999999;
}

.wk-messageinput-bar {
    height: 48px;
    width: 100%;
    flex: none;
    display: flex;
    position: relative;
    z-index: 2;
    top: 0px;
    border-top: 1px solid rgba(137, 128, 146, 0.08);
}

.wk-messageinput-tabs {
    height: 100%;
    width: 50%;
}

.wk-messageinput-toolbar {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.wk-messageinput-actionbox {
    height: 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    margin-left: 0;
    padding: 0 20px;
    box-sizing: border-box;
    overflow: visible;
}

.wk-messageinput-actionitem {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wk-messageinput-sendbtn {
    height: 28px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: linear-gradient(180deg,#92a2b1 4.39%,#7b8e9f 94.46%);
    border-radius: 2px;
    cursor: pointer;
}

.wk-messageinput-hasValue {
    background-color: var(--wk-color-theme);
}


.wk-messageinput-member {
    height: 100%;
    width: 100%;
    padding: 0 16px;
    align-items: center;
    box-sizing: border-box;
    display: flex;
    color: var(--wk-textcolor);
}

.wk-messageinput-iconbox {
    margin-right: 8px;
}

.wk-messageinput-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

.wk-messageinput-selected {
    color: #fff;
    /* background-color: #1264a3; */
    background-color: var(--wk-select-bkcolor);
}

.quickReplyPanel {
    position: absolute;
    box-shadow: 1px -1px 12px -2px rgb(0 0 0 / 28%);
    max-height: 400px;
    overflow-x: hidden;
    bottom: 0;
    background-color: white;
    width: 100%;
    border-radius: 4px;
}

    .quickReplyPanel ul {
        margin: 0;
        padding: 0;
    }

        .quickReplyPanel ul li {
            list-style-type: none;
            height: 60px;
            border-bottom: 1px solid rgba(9,30,66,.12);
            cursor: pointer;
        }

.quickReplyItem {
}

    .quickReplyItem :hover {
        background-color: #f4f5f7;
    }


.quickReplySelect {
    background-color: #5d657a !important;
    color: #fff !important;
}

.wk-messageinput-header {
}

.wk-messageinput-reply {
    margin: 10px 10px 0px 10px;
    background-color: #f5f6f7;
    display: flex;
    color: #8f959e;
    align-items: center;
}

.wk-messageinput-closeicon {
    margin: 0px 6px;
    cursor: pointer;
}

.wk-messageinput-replycontent {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 22px;
}

.wk-messageinput-input__control {
    background-color: var(--wk-chat-send-bkcolor);  
}

.wk-messageinput-input__control textarea {
    color: var(--wk-textcolor);
}

body[theme-mode=dark]  .wk-messageinput-input__control {
    background-color: var(--wk-night-canvas);
}

.wk-messageinput-input__suggestions {
    background-color: var(--wk-chat-list-bkcolor);
}

body[theme-mode=dark] .wk-messageinput-input__input {
    color: var(--wk-night-ink);
}

/* 引用回复条与快捷回复面板在亮色里是浅灰底，夜间需要落到面板层 #2F2F30。 */
body[theme-mode=dark] .wk-messageinput-reply,
body[theme-mode=dark] .quickReplyPanel {
    background-color: var(--wk-night-surface);
    color: var(--wk-night-ink-muted);
}

body[theme-mode=dark] .quickReplyPanel ul li {
    border-bottom-color: var(--wk-night-line);
}

body[theme-mode=dark] .quickReplyItem :hover {
    background-color: var(--wk-night-raise);
}



.wk-contextmenus {
    position: fixed;
    top: 100px;
    left: 0px;
    background-color: var(--wk-chat-other-bkcolor);
    z-index: 99;

    box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(114,114,114,0.25098);
    border-radius: 0.75rem;
    transform: scale(0.5);
    transition: opacity .2s cubic-bezier(0.2, 0, 0.2, 1),transform .2s cubic-bezier(0.2, 0, 0.2, 1) !important;

    visibility: hidden;
    padding: 10px 0px;

    min-width: 80px;
}

body[theme-mode=dark]  .wk-contextmenus {
    background-color: var(--wk-color-secondary);
    box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(0,0,0,0.6);
}

.wk-contextmenus-open {
    transform: scale(1);
    visibility: visible;
}

.wk-contextmenus ul {
    margin-top: 0;
    margin-bottom: 0;
}

.wk-contextmenus li {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

body[theme-mode=dark]  .wk-contextmenus li {
    color: white;
}

.wk-contextmenus li:hover {
    background-color: var(--wk-chat-list-bkcolor);
}

body[theme-mode=dark] .wk-contextmenus li:hover {
    background-color: var(--wk-color-secondary-2);
}

.wk-contextmenus-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    visibility: hidden;
    z-index: 98;
}
/*
 * Figma 807:4960 的会话列表没有滚动槽：这里只隐藏滚动条的视觉，
 * 滚轮、触控板和 scrollTop（vm.keepPosition 依赖）都保持可用。
 * 规则与主题无关，亮色和夜间共用同一份隐藏声明。
 */
.wk-conversationlist {
    height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* padding: 0px 5px; */
    border-right: var(--wk-line);
}

.wk-conversationlist::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Figma 807:4960 会话行：94px 行高、4px 外侧留白，选中块自身再内缩 8px 到设计的 12px 头像边距。 */
.wk-conversationlist-item {
    min-height: 94px;
    width: 100%;
    cursor: pointer;
    padding: 0 4px;
    background-color: var(--wk-chat-list-bkcolor);
    box-sizing: border-box;
}

/*
 * 夜间 949:18871：会话行底 #2F2F30，悬停/选中统一到 #444444，
 * 选中块保留 10px 圆角（949:18902），文案与时间统一 #DFE2E6。
 */
body[theme-mode=dark] .wk-conversationlist-item  {
    background-color: var(--wk-night-surface);
}

body[theme-mode=dark] .wk-conversationlist-item:hover {
    background-color: var(--wk-night-raise);
}

.wk-conversationlist-item-top {
    background-color: var(--wk-color-secondary) !important;
}

/* 亮色下置顶行与列表同为白底；夜间同样跟随列表面 #2F2F30，避免出现第三层灰。 */
body[theme-mode=dark] .wk-conversationlist-item-top {
    background-color: var(--wk-night-surface) !important;
}

.wk-conversationlist-item-content {
    display: flex;
    min-height: 94px;
    align-items: center;
    padding: 12px 8px;
    box-sizing: border-box;
    color: var(--wk-textcolor);
}

.wk-conversationlist-item-metadata {
    min-height: 22px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.wk-conversationlist-item-left {
    width: 70px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-conversationlist-item-right {
    height: 100%;
    width: calc(100% - 70px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 4px;
    padding-left: 12px;

    flex-grow: 1;
    overflow: hidden;
    box-sizing: border-box;
}

.wk-conversationlist-item-avatar-box {
    position: relative;
    width: 70px;
    height: 70px;
}

/*
 * 会话列表头像是设计里唯一的 70px 圆形 + 1px 白描边规格，
 * 只在列表作用域覆盖，避免影响其它页面沿用的 54px 圆角矩形 WKAvatar。
 */
.wk-conversationlist-item-avatar-box .wk-avatar {
    width: 70px;
    height: 70px;
    border: 1px solid #ffffff;
    border-radius: 50%;
    box-sizing: border-box;
}

.wk-conversationlist-item-right-first-line {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wk-conversationlist-item-right-second-line {
    display: flex;
}

.wk-conversationlist-item-name {
    display: flex;
    width: 100%; 
    flex: 1 1;
    align-items: center;

   
}

.wk-conversationlist-item-name h3 {
    font-size: 1rem;
    line-height: 1.6875rem;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: auto;
    max-width: 80%;
}

body[theme-mode=dark] .wk-conversationlist-item-name h3 {
    color: var(--wk-night-ink);
}

.wk-conversationlist-item-selected .wk-conversationlist-item-name h3,.wk-conversationlist-item-selected .wk-conversationlist-item-name  {
    color: white;
}

.wk-conversationlist-item-time {
    color: #9b9b9b;
    padding-left: 10px;
    flex-shrink: 0;
    font-size: .75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    margin-left: auto;
}

.wk-conversationlist-item-selected .wk-conversationlist-item-time {
    color: white;
   
}


.wk-conversationlist-item-lastmsg {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--wk-color-font-tip);
    overflow: hidden;
    font-size: 14px;
    min-height: 22px;
}

.wk-conversationlist-item-selected .wk-conversationlist-item-lastmsg {
    color: white;
}

.wk-conversationlist-item-selected {
    background: #f4f4f4;
    border-radius: 10px;
}

/*
 * 夜间 949:18902：选中块 #444444 + 10px 圆角，亮色的 #f4f4f4 在暗色下会整块反光。
 * 选中类挂在 .wk-conversationlist-item-content 上（见 ConversationList/index.tsx），
 * 因此这里必须单独写该类，不能和 .wk-conversationlist-item 复合。
 */
body[theme-mode=dark] .wk-conversationlist-item-selected {
    background: var(--wk-night-raise);
}

body[theme-mode=dark] .wk-conversationlist-item-selected .wk-conversationlist-item-name h3,
body[theme-mode=dark] .wk-conversationlist-item-selected .wk-conversationlist-item-name,
body[theme-mode=dark] .wk-conversationlist-item-selected .wk-conversationlist-item-time,
body[theme-mode=dark] .wk-conversationlist-item-selected .wk-conversationlist-item-lastmsg {
    color: var(--wk-night-ink);
}

body[theme-mode=dark] .wk-conversationlist-item-time,
body[theme-mode=dark] .wk-conversationlist-item-lastmsg {
    color: var(--wk-night-ink);
}

body:not([theme-mode="dark"]) .wk-conversationlist-item-name h3 { color: #252525; }
body:not([theme-mode="dark"]) .wk-conversationlist-item-selected .wk-conversationlist-item-name h3,
body:not([theme-mode="dark"]) .wk-conversationlist-item-selected .wk-conversationlist-item-name,
body:not([theme-mode="dark"]) .wk-conversationlist-item-selected .wk-conversationlist-item-time,
body:not([theme-mode="dark"]) .wk-conversationlist-item-selected .wk-conversationlist-item-lastmsg { color: inherit; }

.wk-mention {
    color: red;
}

.wk-reminder {
    color: red;
}

.wk-onlinestatusbadge {
    background-color: var(--wk-color-item);
    position: absolute;
    padding: 1.5px;
    transform: scale(0.6);
    right: -10px;
    bottom: -5px;
    border-radius: 10px;

}
.wk-onlinestatusbadge-empty.wk-onlinestatusbadge {
    border-radius: 50%;
    right: -1px;
    bottom: -1px;
} 

.wk-onlinestatusbadge-content {
    background-color: rgb(238, 249, 233);
    padding: 0px 5px;
    border-radius: 10px;
}
.wk-onlinestatusbadge-content-tip {
    padding: 0px;
    font-size: 14px;
    color: rgb(124, 208, 83);
    
}

.wk-onlinestatusbadge-empty  .wk-onlinestatusbadge-content {
    background-color: rgb(124, 208, 83);
    border-radius: 50%;
    padding: 0px;
}

.wk-onlinestatusbadge-empty .wk-onlinestatusbadge-content-tip{
    padding: 8px;
}

.wk-chat {
  width: 100%;
  height: 100%;
}

.wk-chat-content {
  display: flex;
  width: 100%;
  height: 100%;
}

.wk-chat-content-left {
  width: var(--wk-wdith-conversation-list);
  height: 100%;

  display: flex;
  flex-direction: column;
  background-color: var(--wk-chat-list-bkcolor);
  border-right: 1px solid #eeeeee;
}

.wk-chat-search {
  height: var(--wk-height-chat-search);
  width: 100%;
  flex: none;
  box-sizing: border-box;
  padding: 20px 12px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-between;
  -moz-column-gap: 12px;
       column-gap: 12px;
  row-gap: 18px;
  background-color: var(--wk-top-bkcolor);
  color: var(--wk-textcolor);
}

.wk-chat-search-input {
  height: 46px;
  min-width: 0;
  flex: 1 1;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: #f5f7ff;
  color: #999999;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
}
.wk-chat-search-input:hover {
  background: #eceffc;
}
.wk-chat-search-input span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-chat-search-add {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: #f5f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: black;
}
.wk-chat-search-add:hover {
  background: #eceffc;
}
/* 807:5015 的 18px 图标帧，亮/暗各取设计包原始描色，不做滤镜近似。 */
.wk-chat-search-add-icon {
  width: 18px;
  height: 18px;
  display: block;
}
.wk-chat-search-add-icon.is-dark {
  display: none;
}

.wk-chat-filters {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.wk-chat-filters::-webkit-scrollbar {
  display: none;
}
/* Figma 807:5018 筛选胶囊：未选中 #efefef 描边 + #999999 文字，选中/悬停统一到 #9d26ff。 */
.wk-chat-filters button {
  min-height: 30px;
  padding: 0 12px;
  flex: none;
  border: 1px solid #efefef;
  border-radius: 15px;
  background: #ffffff;
  color: #999999;
  cursor: pointer;
}
.wk-chat-filters button:hover,
.wk-chat-filters button.selected {
  border-color: #9d26ff;
  background: #ffffff;
  color: #9d26ff;
}

/*
 * 夜间 949:18803：会话栏底 #2F2F30，搜索框与「+」按钮同为 #444444 圆角块，
 * 占位文案保持 #999999，图标反色到 #DFE2E6；筛选胶囊只靠描边透明度区分选中。
 */
body[theme-mode="dark"] .wk-chat-content-left {
  border-right-color: var(--wk-night-line);
}

body[theme-mode="dark"] .wk-chat-search-input,
body[theme-mode="dark"] .wk-chat-search-add {
  background: var(--wk-night-raise);
}

body[theme-mode="dark"] .wk-chat-search-input:hover,
body[theme-mode="dark"] .wk-chat-search-add:hover {
  background: #4f4f4f;
}

body[theme-mode="dark"] .wk-chat-search-input {
  color: var(--wk-night-ink-muted);
}

body[theme-mode="dark"] .wk-chat-search-add {
  color: var(--wk-night-ink);
}

/* 949:18860：夜间「+」直接换成 #DFE2E6 的原始导出。 */
body[theme-mode="dark"] .wk-chat-search-add-icon.is-light {
  display: none;
}
body[theme-mode="dark"] .wk-chat-search-add-icon.is-dark {
  display: block;
}

body[theme-mode="dark"] .wk-chat-filters button {
  border-color: var(--wk-night-line-strong);
  background: transparent;
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-chat-filters button:hover,
body[theme-mode="dark"] .wk-chat-filters button.selected {
  border-color: var(--wk-night-ink);
  background: transparent;
  color: var(--wk-night-ink);
}

.wk-chat-title {
  width: 250px;
  font-size: 24px;
  font-weight: 500;
}

body[theme-mode="dark"] .wk-chat-title {
  color: var(--wk-night-ink);
}

/*
 * 会话列表既挂在 .wk-chat-content-left 下，也会在搜索态下挂到
 * .wk-global-search-compact-results 里，所以高度改用弹性占位而不是
 * 减去搜索条高度的 calc，两处父级都是列向 flex 容器。
 */
.wk-chat-conversation-list {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
}

.wk-chat-hall-quick-actions {
  min-height: 46px;
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 26px;
  z-index: 5;
  border-radius: 8px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  box-shadow: 0 6px 10px rgba(151, 71, 255, 0.4);
  display: none;
  align-items: center;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.wk-chat-hall-quick-actions.visible {
  display: flex;
}
.wk-chat-hall-quick-actions button {
  height: 46px;
  min-width: 0;
  flex: 1 1;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.wk-chat-hall-quick-actions button:first-child {
  border-radius: 8px 0 0 8px;
}
.wk-chat-hall-quick-actions button:last-child {
  border-radius: 0 8px 8px 0;
}
.wk-chat-hall-quick-actions button:hover {
  background: rgba(255, 255, 255, 0.14);
}
.wk-chat-hall-quick-actions button:active {
  background: rgba(255, 255, 255, 0.2);
}
.wk-chat-hall-quick-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.wk-chat-hall-quick-actions button:disabled:hover {
  background: transparent;
}
.wk-chat-hall-quick-actions button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: -4px;
}

.wk-chat-hall-favorites-state {
  min-height: 180px;
  padding: 28px 20px 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--wk-color-font-tip);
  text-align: center;
}

.wk-chat-hall-favorites-state small {
  color: #a3a3a3;
  font-size: 12px;
}

.wk-chat-hall-favorites-state button {
  min-width: 88px;
  height: 32px;
  margin-top: 6px;
  border: 0;
  border-radius: 16px;
  background: var(--wk-color-theme);
  color: #ffffff;
  cursor: pointer;
}

.wk-chat-content-right {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

@container wk-app-canvas (max-width: 640px) {
  .wk-chat-content-right {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    transform: translate3d(0, 0, 0);
    transition: transform var(--wk-layer-transition);
  }

  .wk-chat-content:not(.wk-conversation-open) .wk-chat-content-right {
    transform: translate3d(100%, 0, 0);
  }

  .wk-chat-content-left {
    width: 100%;
  }

  .wk-chat-conversation-header-back {
    display: flex !important;
  }
}

.wk-chat-content-chat {
  container-name: wk-chat-content;
  container-type: inline-size;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: clip;
  transition: width 150ms ease-in-out 0s;
  background: #f4f5f7;
}

.wk-chat-content-right.wk-chat-channelsetting-open .wk-chat-content-chat {
  width: calc(100% - var(--wk-wdith-chat-channelsetting));
}

.wk-chat-conversation {
  width: 100%;
  flex: 1 1;
  min-height: calc(
    var(--wk-conversation-footer) + var(--wk-height-conversation-replyview) +
      96px
  );
  overflow: visible;
}

.wk-chat-conversation-header-below {
  flex: 0 1 auto;
  min-height: 0;
  max-height: max(
    88px,
    calc(
      100% - var(--wk-height-chat-conversation-header) -
        var(--wk-conversation-footer) - var(--wk-height-conversation-replyview) -
        96px
    )
  );
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  z-index: 10;
}

/* Figma 807:4960 / 807:6357 / 807:7260：排麦摘要、右侧面板和隐藏把手。
   面板宽度随聊天区收敛：原型的 416px 优先，聊天区放不下时收窄，
   但不低于 300px——再窄排麦操作会被裁掉。1024 宽画布下聊天区只有
   489~632px，固定 416px 会吞掉 73%~85% 的聊天与编辑区。 */
@container wk-app-canvas (min-width: 641px) {
  .wk-chat-content-chat {
    --wk-hall-chat-panel-max: 416px;
    --wk-hall-chat-panel-min: 300px;
    --wk-hall-chat-conversation-min: 300px;
    --wk-hall-chat-panel-width: min(
      100%,
      max(
        var(--wk-hall-chat-panel-min),
        min(
          var(--wk-hall-chat-panel-max),
          100% - var(--wk-hall-chat-conversation-min)
        )
      )
    );
  }

  .wk-chat-conversation-header-below:has(> .wk-hall-chat-header) {
    position: absolute;
    right: 0;
    z-index: 24;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  /* 聊天区容不下「面板 + 会话」时面板退化成抽屉，但必须停在输入区上沿：
     编辑区任何分辨率下都保持整宽可用。 */
  .wk-chat-conversation-header-below:has(> .wk-hall-chat-header.is-expanded) {
    top: calc(var(--wk-height-chat-conversation-header) - 1px);
    right: 5px;
    bottom: var(--wk-conversation-footer);
    width: var(--wk-hall-chat-panel-width);
  }

  .wk-chat-content-chat:has(
      > .wk-chat-conversation-header-below > .wk-hall-chat-header.is-expanded
    )
    > .wk-chat-conversation {
    width: 100%;
    margin-right: 0;
  }

  .wk-chat-conversation-header-below:has(> .wk-hall-chat-header.is-compact) {
    top: calc(var(--wk-height-chat-conversation-header) + 10px);
    right: 20px;
    width: min(376px, calc(100% - 40px));
    height: 88px;
  }

  .wk-chat-conversation-header-below:has(> .wk-hall-chat-header.is-hidden) {
    top: var(--wk-height-chat-conversation-header);
    bottom: var(--wk-conversation-footer);
    width: 16px;
    height: auto;
    display: flex;
    align-items: center;
    pointer-events: none;
  }

  .wk-chat-conversation-header-below:has(> .wk-hall-chat-header.is-hidden)
    > .wk-hall-chat-header {
    pointer-events: auto;
    transform: translateY(-4px);
  }

  /* 300px 面板 + 300px 会话：聊天区够宽就让会话让位，面板不再覆盖任何内容，
     并恢复原型的整列高度。 */
  @container wk-chat-content (min-width: 600px) {
    .wk-chat-content-chat:has(
        > .wk-chat-conversation-header-below > .wk-hall-chat-header.is-expanded
      )
      > .wk-chat-conversation {
      width: calc(100% - var(--wk-hall-chat-panel-width));
      margin-right: var(--wk-hall-chat-panel-width);
    }

    .wk-chat-conversation-header-below:has(> .wk-hall-chat-header.is-expanded) {
      bottom: 1px;
    }
  }
}

.wk-chat-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f4f5f7;
}

body[theme-mode="dark"] .wk-chat-empty {
  background-color: var(--wk-night-canvas);
}

/* 设计 807:11974：空态水印居中，亮/暗各用一份平涂灰阶，保证两种主题都可辨认。 */
.wk-chat-empty-mark {
  width: 187px;
  height: 187px;
  display: block;
  flex: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

.wk-chat-empty-mark.is-dark,
body[theme-mode="dark"] .wk-chat-empty-mark.is-light {
  display: none;
}

body[theme-mode="dark"] .wk-chat-empty-mark.is-dark {
  display: block;
}

/* 夜间 949:18803：聊天主区底色 #1E1E1F，收藏空态说明文字跟随 #999999。 */
body[theme-mode="dark"] .wk-chat-content-chat {
  background: var(--wk-night-canvas);
}

body[theme-mode="dark"] .wk-chat-hall-favorites-state small {
  color: var(--wk-night-ink-muted);
}

.wk-chat-conversation-header {
  flex: none;
  height: var(--wk-height-chat-conversation-header);
  width: 100%;
  background-color: var(--wk-bkcolor);
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  box-shadow: none;
  z-index: 11;
  padding: 13px 20px;
  position: relative;
  cursor: default;
  box-sizing: border-box;
}

/* 夜间 949:19000：会话头部与主区同底 #1E1E1F，分隔改用 #DFE2E6 10% 内阴影。 */
body[theme-mode="dark"] .wk-chat-conversation-header {
  background-color: var(--wk-night-canvas);
  border-bottom-color: transparent;
  box-shadow: inset 0 -1px 0 var(--wk-night-line);
}

.wk-chat-conversation-header-left {
  display: flex;
  align-items: center;
}

.wk-chat-conversation-header-back {
  width: 40px;
  height: 40px;
  display: none;
  position: relative;
  justify-content: center;
  align-items: center;
}

.wk-chat-conversation-header-back-icon {
  position: absolute;
  /* transform: rotate(-45deg); */
  transform: rotate(180deg);
}

.wk-chat-conversation-header-back-icon::before,
.wk-chat-conversation-header-back-icon::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
}

.wk-chat-conversation-header-back-icon::after {
  transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}

.wk-chat-conversation-header-back-icon::before {
  transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}

.wk-chat-conversation-header-back-icon,
.wk-chat-conversation-header-back-icon::before,
.wk-chat-conversation-header-back-icon::after {
  width: 1.125rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background-color: rgb(112, 117, 121);
  transition: transform var(--wk-slide-transition);
}

.wk-chat-conversation-header-channel {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wk-chat-conversation-header-channel-avatar img {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-chat-conversation-header-channel-info {
  display: flex;
  align-items: center;
}

.wk-chat-conversation-header-channel-info-name {
  margin-left: 0;
  font-family: var(--wk-font-family);
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
}

body:not([theme-mode="dark"]) .wk-chat-conversation,
body:not([theme-mode="dark"]) .wk-conversation-content {
  background: #f4f5f7;
}
body:not([theme-mode="dark"]) .wk-messageinput-box {
  background: #ffffff;
}

body[theme-mode="dark"] .wk-chat-conversation-header-channel-info-name {
  color: var(--wk-night-ink);
}

.wk-chat-conversation-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--wk-textcolor);
}

.wk-chat-conversation-header-right {
  width: auto;
  height: 22px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 30px;
}

.wk-chat-conversation-header-right > .wk-chat-conversation-header-right-item {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  padding: 0;
  position: relative;
  border: 0;
  background: transparent;
  color: inherit;
}

.wk-chat-conversation-header-right
  > .wk-chat-conversation-header-right-item::before {
  position: absolute;
  inset: -5px;
  z-index: 0;
  border-radius: 8px;
  background: transparent;
  content: "";
  transition: background-color 120ms ease;
}

.wk-chat-conversation-header-right
  > .wk-chat-conversation-header-right-item:hover::before {
  background: rgba(51, 51, 51, 0.08);
}

.wk-chat-conversation-header-right button:disabled {
  opacity: 1;
  cursor: default;
}

.wk-chat-conversation-header-right button:not(:disabled) {
  cursor: pointer;
}

.wk-chat-conversation-header-right
  > button.wk-chat-conversation-header-right-item-unavailable {
  opacity: 0.58;
  cursor: not-allowed;
}

.wk-chat-conversation-header-right
  > button.wk-chat-conversation-header-right-item-unavailable:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.58);
  outline-offset: 5px;
}

.wk-figma-header-tool-icon {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url(../../static/media/toolbar-icons.064e9d638108e571fea1.svg);
  background-position: var(--wk-figma-header-icon-offset) 0;
  background-repeat: no-repeat;
  background-size: 334px 22px;
  pointer-events: none;
}

/*
 * 949:19000：夜间头部七个动作换成 #DFE2E6 的原始导出，不用 filter 近似。
 * 精灵图几何与亮色 807:9659 完全一致，只换描边/填充色。
 */
body[theme-mode="dark"] .wk-figma-header-tool-icon {
  background-image: url(../../static/media/toolbar-icons-dark.a33a90bde8923afae57c.svg);
}

.wk-figma-header-tool-control {
  width: 22px;
  height: 22px;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

.wk-figma-header-tool-control > div {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-figma-header-tool-control svg,
.wk-figma-header-tool-control img {
  width: 22px !important;
  height: 22px !important;
  opacity: 0;
}

.wk-figma-header-tool-control .wk-conversation-header-mask,
.wk-figma-header-tool-control .wk-conversation-header-mask:hover {
  background: transparent !important;
  pointer-events: none;
}

body[theme-mode="dark"]
  .wk-chat-conversation-header-right
  > .wk-chat-conversation-header-right-item:hover::before {
  background: rgba(255, 255, 255, 0.1);
}

.wk-chat-channelsetting {
  pointer-events: auto;
  width: var(--wk-wdith-chat-channelsetting);
  height: 100%;
  transition: margin-right 150ms ease-in-out 0s;
  position: absolute;
  z-index: 99;
  top: 0;
  right: 0;
  border-left: var(--wk-line);
  margin-right: calc(0px - var(--wk-wdith-chat-channelsetting));
  background: var(--wk-bkcolor);

  box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(114, 114, 114, 0.25098);
  border-left: none;
}

body[theme-mode="dark"] .wk-chat-channelsetting {
  box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(0, 0, 0, 0.25098);
}

.wk-chat-content-right.wk-chat-channelsetting-open .wk-chat-content-chat {
  width: 100%;
}

.wk-chat-content-right.wk-chat-channelsetting-open .wk-chat-channelsetting {
  margin-right: 0px;
}

.wk-chat-conversation-list-loading {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.wk-chatmenuspopover {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.wk-chatmenuspopover ul {
  margin-bottom: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--wk-chat-other-bkcolor);
}

body[theme-mode="dark"] .wk-chat-popover {
  background-color: var(--wk-color-secondary);
  color: white;
  --color-popover-bg-default: red;
}

.wk-chatmenuspopover li {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px;
}

.wk-chatmenuspopover li:first-child {
  margin-top: 0px;
}

.wk-chatmenuspopover li img {
  width: 20px;
  height: 20px;
  color: white;
}

.wk-chatmenuspopover-title {
  margin-left: 10px;
  font-size: 14px;
}

.wk-conversation-header-mask {
  background-color: rgb(0, 0, 0, 0);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  border-radius: 100%;
}

.wk-conversation-header-mask:hover {
  background-color: rgb(0, 0, 0, 0.1);
}

.wk-sections {
    
}

.wk-section {
  margin-top: 10px;
  background-color: var(--wk-chat-list-bkcolor);
}

.wk-section:first-child {
  margin-top: 0px;
}

.wk-section-rows {

}

.wk-section-title {
  padding: 5px 15px;
  color: var( --wk-color-font-tip);
  font-size: 13px;
}

.wk-section-row {

}

.wk-section-subtitle {
  padding: 5px 15px;
  color: var( --wk-color-font-tip);
  font-size: 13px;
}


:root {
    --wk-channelsetting-header: 56px;
}

.wk-channelsetting {
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
}

.wk-channelsetting-header {
    width: 100%;
    height: 56px;
    height: var(--wk-channelsetting-header);
    padding: 0.5rem 0.8125rem;
    display: flex;
    align-items: center;
}

.wk-channelsetting-close {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}

.wk-channelsetting-close:hover {
    background-color: rgb(112,117,121,0.08);
}

.wk-channelsetting-close-icon {
    position: absolute;
    transform: rotate(-45deg);
}

.wk-channelsetting-close-icon,.wk-channelsetting-close-icon::before,.wk-channelsetting-close-icon::after {
    width: 1.125rem;
    height: 0.125rem;
    border-radius: 0.125rem;
    background-color: rgb(112,117,121);
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.wk-channelsetting-close-icon::before {
    transform: rotate(90deg);
}

.wk-channelsetting-close-icon::before ,.wk-channelsetting-close-icon::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
}

.wk-state-back {
    transform: rotate(180deg);
}

.wk-state-back::before {
    transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}

.wk-state-back::after {
    transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}




.wk-channelsetting-box {
    width: 100%;
    height: calc(100% - 56px);
    height: calc(100% - var(--wk-channelsetting-header));
    overflow: hidden;
    position: relative;
}

.wk-channelsetting-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-bottom: 40px;
}

.wk-channelsetting-channel-info {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: white;

}

/*
 * 夜间「群聊设置」949:12552：设置面板整体落到 #1E1E1F，分组卡由 .wk-section 提供
 * #2F2F30，两者之间的 10px 间隙必须露出面板底色，否则暗色下会连成一整块。
 */
body[theme-mode=dark] .wk-channelsetting-content {
    background-color: var(--wk-night-canvas);
}

.wk-channelsetting-avatar {
    /* 高宽比率 */
    width: 64px;
    height: 64px; 
    position: relative;
}

.wk-channelsetting-avatar img {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 50%;
}

.wk-channelsetting-name {
    color: var(--wk-color-theme);
    font-size: 16px;
    font-weight: 600;
    margin-left: 10px;
    font-weight: 500px;
}


.wk-channelsetting-header-title-box {
    color: #999;
   display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    flex: 1 1;
}

.wk-channelsetting-header-title-box-open {

}

.wk-channelsetting-header-title {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
    color: black;
}

.wk-channelsetting-header-title-box-open .wk-channelsetting-header-title{
    display: none;
}

.wk-channelsetting-header-title-route {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
    color: black;
    position: absolute;

    transform: translate3d(100%, 0, 0);
    transition: transform var(--wk-layer-transition);
    width: 240px;

}

.wk-channelsetting-header-title-box-open .wk-channelsetting-header-title-route {
    transform: translate3d(0, 0, 0);
}



.wk-channelsetting-route {
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
    position: absolute;
    top: 0px;
    overflow: hidden;
    transform: translate3d(100%, 0, 0);
    transition: transform var(--wk-layer-transition);
}

.wk-channelsetting-route-open {
    transform: translate3d(0, 0, 0);
}

.wk-channelsetting-route-content {
    width: 100%;
    height: 100%;
}

.wk-channelsetting-header-right-view {
    opacity: 0;
    transition: opacity 500ms ease-out;
}

.wk-channelsetting-header-right-view-open {
    opacity: 1;
}

.wk-channelsetting-content-loading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.wk-channelmanage {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}


.wk-route {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    --wk-height-route-header: 56px;
}

.wk-route-header {
    width: 100%;
    height: var(--wk-height-route-header);
    padding: 0.5rem 0.8125rem;
    display: flex;
    align-items: center;
    background: var(--wk-chat-list-bkcolor);
    color: var(--wk-textcolor);
}

.wk-route-box {
    width: 100%;
    height: calc(100% - var(--wk-height-route-header));
    position: relative;
}

.wk-route-content {
    width: 100%;
    height: 100%;
    background-color: var(--wk-color-secondary);
    position: relative;
    /* opacity: 1; */
    /* transition: opacity 150ms ease-in 0s; */
}

.wk-route-content-route {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: translate3d(100%, 0, 0);
    transition: transform var(--wk-layer-transition);
}

.wk-route-content-next {
   width: 100%;
   height: 100%;
   background-color: var(--wk-color-secondary);
   overflow: auto;
   /* transition: opacity 350ms ease-in 0s; */
}

.wk-route-header-close {
    width: 44px;
    height: 44px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}

.wk-route-header-close:hover {
    background-color: rgb(112,117,121,0.08);
}

.wk-route-header-close-icon {
    position: absolute;
    transform: rotate(-45deg);
}

.wk-route-header-close-icon,.wk-route-header-close-icon::before,.wk-route-header-close-icon::after {
    width: 1.125rem;
    height: 0.125rem;
    border-radius: 0.125rem;
    background-color: rgb(112,117,121);
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.wk-route-header-close-icon::before {
    transform: rotate(90deg);
}

.wk-route-header-close-icon::before ,.wk-route-header-close-icon::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
}


.wk-state-back {
    transform: rotate(180deg);
}

.wk-state-back::before {
    transform: rotate(45deg) scaleX(0.75) translate(0, -0.375rem);
}

.wk-state-back::after {
    transform: rotate(-45deg) scaleX(0.75) translate(0, 0.375rem);
}




.wk-route-header-title-box {
   display: flex;
    overflow: hidden;
    align-items: center;
    height: 100%;
    position: relative;
    flex: 1 1;
}

.wk-route-header-title-box-open {

}

.wk-route-header-title {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
}

body[theme-mode=dark]  .wk-route-header-title {
    color: white;
}


.wk-route-header-title-box-open .wk-route-header-title{
    display: none;
}

.wk-route-header-title-next {
    font-size: 18px;
    font-weight: 500;
    margin-left: 1.375rem;
    color: black;
    position: absolute;
    opacity: 0;
    transform: translate3d(100%, 0, 0);
    transition: transform var(--wk-layer-transition),opacity 500ms ease-in 0s;
    width: 180px;

}

body[theme-mode=dark] .wk-route-header-title-next {
    color: white;
}

.wk-route-header-title-box-open .wk-route-header-title-next {
    transform: translate3d(0, 0, 0);
    opacity:1;
}

.wk-route-content-route-open .wk-route-content {
    /* opacity: 0; */
}

.wk-route-content-route-open .wk-route-content-route {
    transform: translate3d(0, 0, 0);
}

.wk-route-content-route-open .wk-route-content-next {
    /* opacity: 1; */
}


.wk-route-header-right-view {
    opacity: 0;
    transition: opacity 500ms ease-out;
}

.wk-route-header-right-view-open {
    opacity: 1;
}

.wk-route .wk-viewqueue-view-in {
    animation-name: wk-route-panel-in;
    -webkit-animation-name: wk-route-panel-in;
}

.wk-route .wk-viewqueue-view-out {
    animation-name: wk-route-panel-out;
    -webkit-animation-name: wk-route-panel-out;
}

@keyframes wk-route-panel-in {
    from {
        transform: translate3d(100%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes wk-route-panel-out {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(100%, 0, 0);
    }
}




.wk-viewqueue {
    width: 100%;
    height: 100%;
    position: relative;
}

.wk-viewqueue-route {
    width: 100%;
    height: 100%;
    position: relative;
}

.wk-viewqueue-view{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--wk-bkcolor);
    transition: transform var(--wk-layer-transition);
    overflow: hidden;
}

.wk-viewqueue-view-in {

    animation: routeAnimationIn 0.25s;
    -webkit-animation: routeAnimationIn 0.25s; /* Safari 与 Chrome */
}

.wk-viewqueue-view-out {
    animation: routeAnimationOut 0.5s;
    -webkit-animation: routeAnimationOut 0.5s; /* Safari 与 Chrome */
}

@keyframes routeAnimationOut {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes routeAnimationIn {
    from {
        transform: translate3d(100%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}


.wk-item-contacts {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;

}

.wk-item-contacts:hover {
    background-color: #f0f0f0; /* Change this color to your desired hover color */
}

body[theme-mode=dark] .wk-item-contacts:hover {
    background-color: #333333; /* Change this color to your desired hover color */
}

.wk-item-contacts-name {
    margin-left: 15px;
    color: var(--wk-text-item);
    font-size: 14px;
    font-weight: 500;
}

body[theme-mode=dark] .wk-item-contacts-name {
    color: white;
}


mark {
    background-color: transparent; /* 移除默认背景色 */
    color: var(--wk-color-theme); /* 设置文本颜色为红色，可以根据需要更改 */
}

.wk-item-group {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
}


body[theme-mode=dark] .wk-item-group:hover {
    background-color: #333333; /* Change this color to your desired hover color */
}

.wk-item-group:hover {
    background-color: #f0f0f0; /* Change this color to your desired hover color */
}

.wk-item-group-name {
    margin-left: 15px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

body[theme-mode=dark] .wk-item-group-name {
    color: white;
}






.wk-item-message {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;

}

.wk-item-message:hover {
    background-color: #f0f0f0; /* Change this color to your desired hover color */
}
body[theme-mode=dark] .wk-item-message:hover {
    background-color: #333333; /* Change this color to your desired hover color */
}

.wk-item-message-content {
    display: grid;
    grid-template-columns: 1fr; /* 两列，左边自适应，右边自动宽度 */
    grid-template-rows: auto auto; /* 两行 */
    grid-gap: 0px;
    gap: 0px; 
    min-width: 200px;
    max-width: 420px;

}

.wk-item-message-name {
    margin-left: 15px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    grid-column: 1 / 2; /* 第一列 */
    grid-row: 1 / 2; /* 第一行 */
}

body[theme-mode=dark] .wk-item-message-name {
    color: white;
}


.wk-item-message-digest {
    margin-left: 15px;
    color: #999;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分以省略号显示 */
}

mark {
    background-color: transparent; /* 移除默认背景色 */
    color: var(--wk-color-theme); /* 设置文本颜色为红色，可以根据需要更改 */
}
.wk-item-favorite {
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--wk-text-item);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.wk-item-favorite:hover {
  background: #f0f0f0;
}

.wk-item-favorite-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 10px;
  background: #f4edff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-item-favorite-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wk-item-favorite-content strong,
.wk-item-favorite-content small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-item-favorite-content strong {
  color: var(--wk-text-item);
  font-size: 14px;
  font-weight: 500;
}

.wk-item-favorite-content small {
  color: #999999;
  font-size: 12px;
}

body[theme-mode="dark"] .wk-item-favorite:hover {
  background: #333333;
}

body[theme-mode="dark"] .wk-item-favorite-icon {
  background: rgba(139, 92, 246, 0.18);
}

body[theme-mode="dark"] .wk-item-favorite-content strong {
  color: #ffffff;
}



.wk-tab-all {
    width: 100%;
    height: 50vh;
    display: flex;
    overflow: auto;
    flex-direction: column;
    color: var(--wk-textcolor);
}

.wk-global-search-more-favorites {
    margin: 2px 10px 8px 62px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--wk-color-theme);
    font-size: 13px;
    cursor: pointer;
}


.wk-tab-contacts {
    width: 100%;
    height: 50vh;
    display: flex;
    overflow: auto;
    flex-direction: column;
}


.wk-tab-group {
    width: 100%;
    height: 50vh;
    display: flex;
    overflow: auto;
    flex-direction: column;
}


.wk-item-file-icon {
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wk-item-file {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto; /* 两行 */
    grid-gap: 0px;
    gap: 0px;
    padding: 10px;
    border-radius: 4px;
}

.wk-item-file:hover {
    background-color: #f0f0f0; /* Change this color to your desired hover color */
}

body[theme-mode=dark] .wk-item-file:hover {
    background-color: #333333; /* Change this color to your desired hover color */
}


.wk-item-file-icon {
    grid-column: 1 / 2; /* 第一列 */
    grid-row: 1 / 3; /* 第一行 */
}

.wk-item-file-name {
    grid-column: 2 / 3; /* 第二列 */
    grid-row: 1 / 2; /* 第一行 */
    margin-left: 15px;
    color: var(--wk-text-item);
    font-size: 14px;
    font-weight: 500;
}

.wk-item-file-desc {
    grid-row: 2 / 3; /* 第二行 */
    grid-column: 2 / 3; /* 第二列 */
    display: flex;
    margin-left: 15px;
    color: #666;
    font-size: 12px;
    align-items: center;
}

.wk-item-file-line {
    width: 1px;
    height: 8px;
    background-color: #666;
    margin-top: 10px;
    margin-bottom: 10px;
    margin: 4px;
}
.wk-tab-file {
    width: 100%;
    height: 50vh;
    display: flex;
    overflow: auto;
    flex-direction: column;
    cursor: pointer;
}

/* 设计 807:11430 频道内文件按月份分组标题 */
.wk-tab-file-group-title {
    padding: 9px 0;
    font-size: 13px;
    color: #333333;
}

body[theme-mode=dark] .wk-tab-file-group-title {
    color: var(--wk-text-item);
}
/* 设计 807:11351 查看群聊内容-图片/视频 */

.wk-tab-media {
    width: 100%;
    height: 500px;
    overflow-y: auto;
}

.wk-tab-media-group-title {
    padding: 9px 0;
    font-size: 13px;
    color: #333333;
}

body[theme-mode=dark] .wk-tab-media-group-title {
    color: var(--wk-text-item);
}

.wk-tab-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    grid-gap: 3px;
    gap: 3px;
}

.wk-tab-media-item {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

body[theme-mode=dark] .wk-tab-media-item {
    background-color: #2a2a2a;
}

.wk-tab-media-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

.wk-tab-media-item-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: #999999;
}

/* 设计 807:11385 视频角标：底部渐变条 + 播放图标 + 时长 */
.wk-tab-media-item-duration {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 21px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 5px;
    font-size: 10px;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.wk-global-search--compact {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--wk-chat-list-bkcolor);
}

/*
 * 搜索态只把 .wk-chat-search 里的占位按钮换成真实输入框，
 * 其余尺寸（128px 搜索区、46px 控件、筛选胶囊换行）必须和会话栏一致，
 * 否则点一下搜索整列就会跳动。
 */
.wk-global-search-toolbar {
    height: var(--wk-height-chat-search);
    width: 100%;
    flex: none;
    box-sizing: border-box;
    padding: 20px 12px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
    -moz-column-gap: 12px;
         column-gap: 12px;
    row-gap: 18px;
    background: var(--wk-top-bkcolor);
}

.wk-global-search-toolbar .wk-global-search-input {
    min-width: 0;
    flex: 1 1;
}

.wk-global-search--compact .semi-input-wrapper {
    border: 0;
    border-radius: 11px;
    background: #f5f7ff;
    box-shadow: none;
}

.wk-global-search--compact .semi-input-wrapper-focus {
    background: #f1eefb;
    box-shadow: 0 0 0 1px rgba(151, 71, 255, 0.22);
}

.wk-global-search-compact-results {
    min-height: 0;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 结果区既可能是搜索结果、最近搜索，也可能是回落的会话列表，统一撑满剩余高度。 */
.wk-global-search-compact-results > * {
    min-height: 0;
    flex: 1 1 auto;
}

.wk-global-search--compact .wk-tab-all {
    height: 100%;
    padding: 0 10px 18px;
}

.wk-global-search--compact .wk-tab-all > div > div:first-child {
    margin: 12px 8px 4px !important;
    color: #8d9098 !important;
    font-size: 12px;
}

.wk-global-search--compact .wk-item-contacts,
.wk-global-search--compact .wk-item-group,
.wk-global-search--compact .wk-item-message {
    min-height: 58px;
    padding: 8px;
    border-radius: 10px;
}

.wk-global-search--compact .wk-item-message-content {
    min-width: 0;
    max-width: calc(100% - 40px);
}

.wk-global-search-empty {
    padding: 28px 20px;
    color: #a2a5ad;
    text-align: center;
    font-size: 13px;
}

.wk-global-search-recents {
    height: 100%;
    padding: 10px 14px 18px;
    overflow: auto;
}

.wk-global-search-recents-header {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #8d9098;
    font-size: 12px;
}

.wk-global-search-recents-header button {
    border: 0;
    background: transparent;
    color: var(--wk-color-theme);
    font-size: 12px;
    cursor: pointer;
}

.wk-global-search-recent-item {
    width: 100%;
    min-height: 56px;
    padding: 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    cursor: pointer;
}

.wk-global-search-recent-item:hover {
    background: #f0f0f0;
}

.wk-global-search-recent-item > img {
    flex: 0 0 36px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-global-search-recent-item > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wk-global-search-recent-item strong,
.wk-global-search-recent-item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-global-search-recent-item strong {
    color: var(--wk-text-item);
    font-size: 14px;
    font-weight: 500;
}

.wk-global-search-recent-item small {
    color: #999999;
    font-size: 12px;
}

/* 夜间 949:18803：搜索框与「+」同为 #444444 圆角块，和占位按钮保持同一底色。 */
body[theme-mode="dark"] .wk-global-search--compact .semi-input-wrapper {
    background: var(--wk-night-raise);
}

body[theme-mode="dark"] .wk-global-search-recent-item:hover {
    background: #333333;
}

body[theme-mode="dark"] .wk-global-search-recent-item strong {
    color: #ffffff;
}

/* 会话解锁层：占满聊天内容区，未解锁前遮住消息，沿用聊天密码弹窗的卡片规范 */

.wk-chatpwd-unlock {
    display: flex;
    width: 100%;
    height: 100%;
    flex: 1 1;
    align-items: center;
    justify-content: center;
    background: #f5f5f7;
    background: var(--wk-bg, #f5f5f7);
}

.wk-chatpwd-unlock-panel {
    display: flex;
    width: 336px;
    flex-direction: column;
    padding: 26px 30px 24px 30px;
    border-radius: 20px;
    background: #ffffff;
}

.wk-chatpwd-unlock-title {
    margin: 0;
    color: #000000;
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
    text-align: center;
}

.wk-chatpwd-unlock-description {
    margin: 10px 0 0 0;
    color: #999999;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.wk-chatpwd-unlock-panel input {
    height: 36px;
    margin-top: 16px;
    padding: 0 12px;
    border: 1px solid #efefef;
    border-radius: 6px;
    background: #f7f7f9;
    box-sizing: border-box;
    color: #333333;
    font-size: 14px;
    letter-spacing: 4px;
    outline: none;
    text-align: center;
}

.wk-chatpwd-unlock-panel input:focus {
    border-color: #9d26ff;
}

.wk-chatpwd-unlock-error-slot {
    min-height: 20px;
    padding-top: 6px;
    text-align: center;
}

.wk-chatpwd-unlock-error {
    color: #ff4d4f;
    font-size: 12px;
    line-height: 14px;
}

.wk-chatpwd-unlock-confirm {
    height: 32px;
    margin-top: 10px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

body[theme-mode=dark] .wk-chatpwd-unlock-panel {
    background: var(--wk-bg-item);
}

body[theme-mode=dark] .wk-chatpwd-unlock-title {
    color: var(--wk-text-item);
}

body[theme-mode=dark] .wk-chatpwd-unlock-panel input {
    border-color: #444444;
    background: transparent;
    color: var(--wk-text-item);
}

@charset "UTF-8";/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: calc(1 * 2);
  animation-iteration-count: calc(1 * 2);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: calc(1 * 3);
  animation-iteration-count: calc(1 * 3);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
  -webkit-animation-delay: calc(1s * 2);
  animation-delay: calc(1s * 2);
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
  -webkit-animation-delay: calc(1s * 3);
  animation-delay: calc(1s * 3);
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
  -webkit-animation-delay: calc(1s * 4);
  animation-delay: calc(1s * 4);
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
  -webkit-animation-delay: calc(1s * 5);
  animation-delay: calc(1s * 5);
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
  -webkit-animation-duration: calc(1s / 2);
  animation-duration: calc(1s / 2);
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
  -webkit-animation-duration: calc(1s * 0.8);
  animation-duration: calc(1s * 0.8);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
  -webkit-animation-duration: calc(1s * 3);
  animation-duration: calc(1s * 3);
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}
@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}
/* Attention seekers  */
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}
@-webkit-keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: calc(1s * 1.3);
  animation-duration: calc(1s * 1.3);
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* Back entrances */
@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}
@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}
@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}
/* Back exits */
@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}
@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}
@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}
@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}
/* Bouncing entrances  */
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
/* Bouncing exits  */
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
/* Fading entrances  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}
@-webkit-keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}
@-webkit-keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}
@-webkit-keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}
/* Fading exits */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}
@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}
@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}
@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}
/* Flippers */
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}
/* Lightspeed */
@-webkit-keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
/* Rotating entrances */
@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Rotating exits */
@-webkit-keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Specials */
@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
/* Zooming entrances */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
/* Zooming exits */
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
/* Sliding entrances */
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
/* Sliding exits */
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}



 :root {
    /* macOS: PingFang SC; Windows: WK UI Sans (Noto/Source Han Sans 思源黑体同族), then YaHei */
    --wk-font-family: "PingFang SC", "WK UI Sans", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    --wk-font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --wk-color-theme: #8B5CF6;
    --wk-color-secondary: #FFFFFF;
    --wk-color-secondary-2: #F5F6F8;
    --wk-color-hover: #F2EDFF;
    /* 提示类型的字体颜色 */
    --wk-color-font-tip: rgb(170,170,170);
    --wk-width-layout-content-left: 340px;
    --wk-wdith-conversation-list: var(--wk-width-layout-content-left);
    --wk-height-chat-search: 128px;
    --wk-height-chat-conversation-header: 80px;
    --wk-wdith-chat-channelsetting: 375px;
    --wk-layer-transition: 300ms cubic-bezier(0.33,1,0.68,1);
    --wk-slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);

    --wk-line: 1px solid rgba(217, 217, 217, 0.1);
    --wk-line-color:  #eee;

    --wk-color-item: #F3F4F6;
    --wk-text-item: rgba(9,30,66,.87);

    --wk-message-item: pink;
    --wk-message-color: #0F0F0F;
    /* 主页主色背景 */
    --wk-bkcolor: #FFFFFF;
    /* 主色字体颜色 */
    --wk-textcolor: #252525;

    /* 置顶聊天颜色 */
    --wk-top-bkcolor: #FFFFFF;

    /* 聊天list背景颜色 */
    --wk-chat-list-bkcolor: #FFFFFF;
    
    /* 选中颜色 */
    --wk-select-bkcolor: #F1F2F6;

    /* 聊天对方背景色 */
    --wk-chat-other-bkcolor: #FFFFFF;

    /* 聊天自己背景 */
    --wk-chat-self-bkcolor: #FFFFFF;

    /* 特殊字体颜色 */
    --wk-active-textcolor: #9228D9;

    /* 聊天发送背景色 */
    --wk-chat-send-bkcolor: #FFFFFF;

    /* switch颜色 */
    --wk-color-theme-switch: linear-gradient( 225deg, #5F20B2 0%, #9228D9 100%);;

    /* 各种边框颜色 */
    --wk-border-color: 1px solid rgb(76, 66, 166) !important;

    /* 确认按钮渐变（设计 807:4770 / 949:18384 的品牌渐变） */
    --wk-confirm-btn-gradient: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);

    /* 取消按钮渐变 */
    --wk-cancel-btn-gradient: #201D3C;
  }

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

  /*
   * 夜间模式色板取自设计包「微聚声原型设计-PC端夜间模式」：
   * 消息-排麦 949:18803、群聊设置-PC端 949:12551、群聊-排挡 949:10232 共用同一套灰阶——
   * #1E1E1F 页面/面板底、#2F2F30 卡片与气泡、#444444 输入与选中、#DFE2E6 正文、#999999 占位。
   */
  body[theme-mode=dark] {
    --wk-night-canvas: #1E1E1F;
    --wk-night-surface: #2F2F30;
    --wk-night-raise: #444444;
    --wk-night-ink: #DFE2E6;
    --wk-night-ink-muted: #999999;
    --wk-night-line: rgba(223, 226, 230, 0.1);
    --wk-night-line-strong: rgba(223, 226, 230, 0.2);

    --wk-color-theme: #15132A;
    --wk-color-font-tip: var(--wk-night-ink-muted);
    --wk-color-secondary: var(--wk-night-canvas);
    --wk-color-secondary-2: var(--wk-night-surface);
    --wk-color-hover: var(--wk-night-raise);
    --wk-color-item: var(--wk-night-surface);
    --wk-text-item: rgba(255,255,255,.87);
    --wk-bkcolor: var(--wk-night-canvas);
    --wk-textcolor: var(--wk-night-ink);
    --wk-top-bkcolor: var(--wk-night-surface);
    --wk-chat-list-bkcolor: var(--wk-night-surface);
    --wk-select-bkcolor: var(--wk-night-raise);
    --wk-chat-other-bkcolor: var(--wk-night-surface);
    --wk-chat-self-bkcolor: var(--wk-night-surface);
    --wk-chat-send-bkcolor: var(--wk-night-canvas);
    --wk-line: 1px solid var(--wk-night-line);
    --wk-line-color: var(--wk-night-line);
    --wk-color-item: var(--wk-night-surface);
    --wk-text-item: white;
    color: var(--wk-night-ink) !important;

    --wk-message-item: var(--wk-night-canvas);
    --wk-message-color: var(--wk-night-ink);

    --semi-color-primary: #9D26FF;
    --semi-color-primary-hover: #B45CFF;

  }

  /* ::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,0,0,0.4);
  } */

html {
    height: 100%;
    box-sizing: border-box;
}
  
  body {
    height: 100%;
    margin: 0;
    margin: 0;
    /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Cantarell,sans-serif; */
    font-family: "PingFang SC", "WK UI Sans", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    font-family: var(--wk-font-family);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var( --background-color);
    color: #252525;
    color: var(--wk-textcolor) ;
    --semi-color-text-2: white;
    --semi-color-primary: #9228D9;
    --semi-color-text-0: white;
  }

  div {
    outline:none; /** 让div没有焦点边框 不加这个 第一次打开Modal会聚焦**/
  }
  
  #root {
    height: 100%;
  }
  
  code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-family: var(--wk-font-monospace, source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace);
  }
  
  
  .page {
    width: 100%;
    height: 100%;
    background-color: red;
  }
  
  .pageContent {
    padding: 0px 40px;
    overflow-y: auto;
  }
  
    .pageContent.space {
        padding-top: 40px;
        width: 100%;
        height: 100%;
    }
  
  @font-face {
    font-family: "icomoon";
    src: url(../../static/media/icomoon.536087723585cc76b849.woff2);
  }
  
  [class^=icon-], [class*=" icon-"] {
    font-family: "icomoon" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  
  
  ul {
      list-style-type: none;
      margin-block-start: 0px;
      margin-block-end: 0px;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 0px;
  }
  


  .wk-loading {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px 0px;
  }

  .wk-text-oneline {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body[theme-mode=dark] .semi-badge-count {
    color: white;
  }

  .semi-modal-content{
    background-color: #FFFFFF;
    background-color: var(--wk-bkcolor);
    color: #252525;
    color: var(--wk-textcolor);
  }

  .semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover{
    color: #9228D9;
    color: var(--wk-active-textcolor);
  }

  /* .semi-tabs-tab.semi-tabs-tab-line.semi-tabs-tab-top .semi-tabs-tab-single .semi-tabs-tab:hover{
    color: var(--wk-textcolor);
  } */

  .semi-button-tertiary.semi-button-borderless{
    color: #252525;
    color: var(--wk-textcolor);
  }


.wk-channelqrcode {
    width: 100%;
    height: 100%;
    padding: 15px;
}

.wk-channelqrcode-box {
    width: 100%;
    background-color: var(--wk-color-item);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-direction: column;
}

.wk-channelqrcode-info-avatar {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-channelqrcode-info-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.wk-channelqrcode-qrcode {
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
}

.wk-channelqrcode-expire {
    font-size: 12px;
    color: #666;
    text-align: center;
    padding: 20px 0px;
}

.wk-channelqrcode-info-name {
    text-align: center;
    color: var(--wk-text-item);;
}

.wk-channelqrcode-qrcode-box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    margin-top: 20px;
}

.wk-channelqrcode-qrcode-mask {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255,0.98);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

body[theme-mode=dark] .wk-channelqrcode-qrcode-mask {
    background-color: rgb(0, 0, 0,0.98);
}

.wk-channelqrcode-qrcode-mask p {
    font-size: 18px;
    margin-bottom: 0px;
    color: #666;
}

.wk-channelqrcode-qrcode-loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 设计 807:11259 二维码下方操作区 */
.wk-channelqrcode-actions {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 88px;
    width: 100%;
    padding: 23px 0 23px 0;
}

.wk-channelqrcode-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    color: #333333;
}

body[theme-mode=dark] .wk-channelqrcode-action {
    color: var(--wk-text-item);
}

.wk-channelqrcode-action img {
    width: 22px;
    height: 22px;
}



.wk-list-item {
    width: 100%;
    padding: 1rem;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    background-color: var(--wk-bkcolor);
    justify-content: space-between;
    box-sizing: border-box;
    color: var(--wk-textcolor);
}

/* 夜间 949:12562：设置行卡面 #2F2F30，悬停抬到 #444444。 */
body[theme-mode=dark] .wk-list-item {
    background-color: var(--wk-night-surface);
}

body[theme-mode=dark] .wk-list-item:hover {
    background: var(--wk-night-raise);
}

.wk-list-item:hover {
    background: var(--wk-select-bkcolor);
}

/* 服务端尚未提供契约的开关行：保留在设计位置，但不可点。 */
.wk-list-item-disabled {
    cursor: default;
}

/* 权重要压过 body[theme-mode=dark] .wk-list-item-title 的正文色。 */
body .wk-list-item-disabled .wk-list-item-title {
    color: var(--wk-color-font-tip);
}


.wk-list-item-ripple {
    position: relative;
    overflow: hidden;
}


.wk-list-item-ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .7s, opacity .5s;
}

.wk-list-item-ripple:active:after {
    transform: scale(0, 0);
    opacity: .7;
    transition: 0s;
}

.wk-list-item-title {
    font-size: 15px;
    font-weight: 400;
}


body[theme-mode=dark] .wk-list-item-title{
    color: var(--wk-night-ink);
}

body[theme-mode=dark] .wk-list-item-subtitle-muliteline {
    color: var(--wk-night-ink-muted);
}


.wk-list-item-action {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin: 0;
    margin-left: auto;
}
.wk-list-item-action .semi-switch-checked {
    background: var(--wk-color-theme-switch);
}

.wk-list-item-subtitle {
    flex: 1 1;
    margin-left: 20px;
    font-size: 14px;
    color: var(--wk-color-font-tip);
    text-align: end;
    word-wrap: break-word;
    word-break: normal;
   
}

.wk-list-item-subtitle-oneline {
    display: inline-block;
    white-space: nowrap; 
    width: 100%; 
    overflow: hidden;
    text-overflow:ellipsis;

   
}

.wk-list-item-subtitle-muliteline {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
    white-space:  pre-line;
    word-wrap:break-word;
}

.wk-list-item-arrow {
    margin-right: -10px;
}

.wk-list-item-arrow img{
    width: 9px;
    height: 14px;
}

.wk-list-item-tip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wk-color-font-tip);
    font-size: 13px;

}
.wk-channelnotify {
  height: 100%;
  overflow-y: auto;
  background-color: var(--wk-bkcolor);
}

body[theme-mode="dark"] .wk-channelnotify {
  background-color: var(--wk-night-canvas);
}

.wk-channelnotify-section {
  margin-top: 10px;
}

.wk-channelnotify-section:first-child {
  margin-top: 0;
}

.wk-channelnotify-rows {
  background-color: var(--wk-chat-list-bkcolor);
}

.wk-channelnotify-subtitle {
  padding: 5px 15px;
  color: var(--wk-color-font-tip);
  font-size: 13px;
}


.wk-inputedit {
    width: 100%;
    height: 50px;
   
}

.wk-inputedit .semi-input-textarea-wrapper {
    background-color: var(--wk-bkcolor);
    color: var(--wk-textcolor);
}
.wk-inputedit .semi-input-textarea-wrapper textarea {
    border: var(--wk-border-color);
    color: var(--wk-textcolor);
}
.wk-inputedit .semi-input-textarea-wrapper textarea::-moz-placeholder {
    color: var(--wk-textcolor);
}
.wk-inputedit .semi-input-textarea-wrapper textarea::placeholder {
    color: var(--wk-textcolor);
}

.wk-inputedit-placeholder {
    font-size: 13px;
    color: #999;
    margin: 5px 0px 0px 5px;
}


.wk-subscribers {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.wk-subscribers-content {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
}

.wk-subscribers-item {
    width: 60px;
    height: 80px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
   
}

.wk-subscribers-item img {
    width: 50px;
    height: 50px;
    border-radius: 40%;
}

.wk-subscribers-item-name {
    font-size: 12px;
    color: rgba(9,30,66,.87);
    text-overflow: ellipsis;
    width: 100%;
    height: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    margin-top: 5px;
    line-height: 12px;
}

body[theme-mode=dark] .wk-subscribers-item-name {
    color: var(--wk-night-ink);
}

.wk-subscribers-more {
    font-size: 14px;
    margin-top: 10px;
    color: var(--wk-color-theme);
    cursor: pointer;
    text-align: center;
}

/* 夜间 --wk-color-theme 与面板同为深色，「查看更多」需要落到正文色才可见。 */
body[theme-mode=dark] .wk-subscribers-more {
    color: var(--wk-night-ink);
}




.wk-conversationselect {
    max-height: 600px;
    overflow: hidden;
}

.wk-conversationselect-content {
    display: flex;
    padding: 10px 10px 10px 0px;
    cursor: pointer;
    align-items: center;
}

.wk-conversationselect-content-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    width: 100%;
    background: var(--wk-color-secondary);
    font-weight: bold;
    font-size: 17px;
}

.wk-conversationselect-content-searchBox {
    display: flex;
    align-items: center;
    width: 100%;
    height: 57px;
    padding-left: 20px;
    flex-wrap: wrap;
    overflow: auto;
    max-height: 400px;
}

.wk-conversationselect-content-selectedChannel {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
}

.wk-conversationselect-content-selectedAvatar {
    padding: 2px;
    cursor: pointer;
}


.wk-conversationselect-content-searchContent {
    display: flex;
    min-width: 200px;
    height: 50px;
}

.wk-conversationselect-content-searchContent input {
    flex: 1 1;
    height: 32px;
    font-size: 12px;
    line-height: 18px;
    background-color: transparent;
    color: #1f2329;
    padding: 0;
    outline: none;
    border: none;
    height: 100%;
}

.wk-conversationselect-content-searchIcon {
    display: flex;
    align-items: center;
}

.wk-conversationselect-content-searchInput {
    margin-left: 10px;
    max-width: 100px;
}

.wk-conversationselect-content-box {
    padding: 0px 20px;
    max-height: 400px;
    overflow: auto;
}


.wk-conversationselect-content-header {
    background: var(--wk-color-secondary);
    font-weight: 400;
    font-size: 13px;
    padding: 0 18px;
    line-height: 25px;
}

.wk-conversationselect-content-list {

}

.wk-conversationselect-content-box-data {
    display: flex;
    margin-left: 10px;
}

.wk-conversationselect-content-box-name {
    margin-left: 10px;
    display: flex;
    align-items: center;
}


.wk-conversationselect-footer {
    background: var(--wk-color-secondary);
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wk-conversationselect-okBtn {
    cursor: pointer;
    width: 160px;
    border-radius: 8px;
    height: 40px;
    background-color: var(--wk-color-theme);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}



.wk-userinfo {
    background-color: var(--wk-bkcolor);
    position: relative;
    --wk-height-userInfo-footer: 60px;
    --wk-height-userInfo-nav: 44px;
    width: 100%;
    height: 100%;
}


.wk-userInfo-footer {
    width: 100%;
    height: var(--wk-height-userInfo-footer);
    background-color: var(--wk-bkcolor);
    position: absolute;
    bottom: 0px;
}

body[theme-mode=dark]  .wk-userInfo-footer {
    background-color: var(--wk-bkcolor);
}

.wk-userinfo-user {
    display: flex;
}

.wk-userinfo-content {
    width: 100%;
    height: calc(100% - var(--wk-height-userInfo-footer));
    overflow: auto;
    
}

.wk-userinfo-user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 15px;
}

.wk-userinfo-user-avatar {
    margin-left: 20px;
    border-radius: 40%;
    background-color: var(--wk-bkcolor);
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-userinfo-user-avatar  img{
    width: 50px;
    height: 50px;
    border-radius: 40%;
}

.wk-userinfo-user-info-name {
    font-size: 16px;
    color: var(--wk-textcolor);
}

.wk-userinfo-user-info-others  ul {
    margin-bottom: 0px;
    margin-top: 2px;
}

.wk-userinfo-user-info-others li {
    color: var(--wk-color-font-tip);
}

.wk-userinfo-footer-sendbutton {
    width: 100%;
    height: 100%;
    padding: 10px 15px 15px 15px;
    
}

.wk-userinfo-footer-sendbutton button {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    background: var(--wk-confirm-btn-gradient);
}


.wk-userinfo-sections{
    margin-top: 20px;
}

.wk-userinfo-loading {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

/* 设计 807:11688：资料卡右上角「···」操作菜单 */
.wk-userinfo-user-more {
    margin-left: auto;
    margin-right: 16px;
    display: flex;
    align-items: flex-start;
}

.wk-userinfo-more-button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: var(--wk-textcolor);
    padding: 0 4px;
}

/* 设计 807:11735：好友资料卡底部「发消息 / 语音通话 / 视频通话」动作区 */
.wk-userinfo-actions {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 45px;
}

.wk-userinfo-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.wk-userinfo-action:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.wk-userinfo-action img {
    width: 22px;
    height: 22px;
}

.wk-userinfo-action span {
    font-size: 12px;
    color: #384D7B;
}

/*
 * 群聊会话头像「查看用户信息」卡片（807:10951，336 × 436）。
 * 只在 conversation-member 变体生效，不改变通讯录等其它资料入口。
 */
.wk-userinfo-member {
    width: 336px;
    height: 436px;
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.wk-userinfo-member .wk-userinfo-content {
    width: 280px;
    height: 315px;
    margin: 26px 30px 0 26px;
    overflow: visible;
}

.wk-userinfo-member .wk-userinfo-content > br {
    display: none;
}

.wk-userinfo-member .wk-userinfo-header,
.wk-userinfo-member .wk-userinfo-user {
    width: 280px;
    height: 74px;
}

.wk-userinfo-member .wk-userinfo-user {
    align-items: flex-start;
}

.wk-userinfo-member .wk-userinfo-user-avatar {
    width: 74px;
    height: 74px;
    margin-left: 0;
    flex: 0 0 74px;
    overflow: hidden;
    border-radius: 37px;
    background: transparent;
}

.wk-userinfo-member .wk-userinfo-user-avatar .semi-image,
.wk-userinfo-member .wk-userinfo-user-avatar img {
    display: block;
    width: 74px;
    height: 74px;
    border-radius: 37px;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-userinfo-member .wk-userinfo-user-info {
    width: 110px;
    height: 39px;
    min-width: 0;
    margin-top: 17.5px;
    margin-left: 12px;
    justify-content: flex-start;
    gap: 11px;
}

.wk-userinfo-member .wk-userinfo-user-info-name {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 16px;
    gap: 8px;
    color: #000000;
    font-size: 15px;
    font-weight: 600;
    line-height: 15px;
}

.wk-userinfo-member .wk-userinfo-user-info-name > span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-userinfo-member .wk-userinfo-gender {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.wk-userinfo-member .wk-userinfo-user-info-others ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wk-userinfo-member .wk-userinfo-user-info-others li {
    width: 110px;
    overflow: hidden;
    color: #999999;
    font-size: 13px;
    font-weight: 400;
    line-height: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-userinfo-member .wk-userinfo-user-more {
    width: 22px;
    height: 22px;
    margin-right: 0;
}

.wk-userinfo-member .wk-userinfo-more-button {
    width: 22px;
    height: 22px;
    padding: 0;
}

.wk-userinfo-member .wk-userinfo-more-button img {
    display: block;
    width: 22px;
    height: 22px;
}

.wk-userinfo-member .wk-userinfo-sections {
    margin-top: 36px;
}

.wk-userinfo-member .wk-sections,
.wk-userinfo-member .wk-channelsetting-section-rows {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.wk-userinfo-member .wk-sections {
    width: 280px;
}

.wk-userinfo-member .wk-section,
.wk-userinfo-member .wk-section-row {
    margin: 0;
    background: transparent;
}

.wk-userinfo-member .wk-list-item {
    width: 280px;
    min-height: 15px;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
    background: transparent;
}

.wk-userinfo-member .wk-list-item:hover {
    background: transparent;
}

.wk-userinfo-member .wk-list-item-title {
    width: 60px;
    flex: 0 0 60px;
    color: #333333;
    font-size: 15px;
    font-weight: 400;
    line-height: 15px;
}

.wk-userinfo-member .wk-list-item-subtitle {
    min-width: 0;
    margin-left: 29px;
    overflow: hidden;
    color: #333333;
    font-size: 15px;
    font-weight: 400;
    line-height: 15px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-userinfo-member .wk-user-moments-entry-card {
    box-sizing: border-box;
    width: 286px;
    height: 52px;
    padding: 0;
    justify-content: flex-start;
    gap: 44px;
    overflow: visible;
    background: transparent;
}

.wk-userinfo-member .wk-user-moments-entry-label {
    width: 45px;
    flex: 0 0 45px;
    color: #333333;
    font-size: 15px;
    font-weight: 400;
    line-height: 15px;
}

.wk-userinfo-member .wk-section[data-section-id="userinfo.moments"] {
    width: 286px;
    height: 52px;
}

.wk-userinfo-member .wk-user-moments-thumbnails {
    box-sizing: border-box;
    width: 197px;
    height: 52px;
    margin-left: 0;
    padding: 6px;
    gap: 6px;
    overflow: hidden;
    border-radius: 6px;
}

.wk-userinfo-member .wk-user-moments-thumbnails > img {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 6px;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-userinfo-member .wk-user-moments-thumbnails > img:nth-child(n + 5) {
    display: none;
}

.wk-userinfo-member .wk-userInfo-footer {
    top: 369px;
    bottom: auto;
    left: 49px;
    width: 234px;
    height: 43px;
    background: transparent;
}

.wk-userinfo-member .wk-userinfo-actions {
    justify-content: flex-start;
    gap: 45px;
}

.wk-userinfo-member .wk-userinfo-action {
    width: 48px;
    height: 43px;
    flex: 0 0 48px;
    gap: 6px;
}

.wk-userinfo-member .wk-userinfo-action img {
    width: 22px;
    height: 22px;
}

.wk-userinfo-member .wk-userinfo-action span {
    color: #384d7b;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    white-space: nowrap;
}

/* 夜间模式（设计 949:12269 / 949:13168 个人信息弹层）：卡片面 #2F2F30、
   名称 #DFE2E6、辅助信息 #999999、底部操作文案 #808EA6。 */
body[theme-mode=dark] .wk-userinfo,
body[theme-mode=dark] .wk-userInfo-footer {
    background-color: #2f2f30;
}

body[theme-mode=dark] .wk-userinfo-user-avatar {
    background-color: transparent;
}

body[theme-mode=dark] .wk-userinfo-user-info-name,
body[theme-mode=dark] .wk-userinfo-more-button {
    color: #dfe2e6;
}

body[theme-mode=dark] .wk-userinfo-user-info-others li {
    color: #999999;
}

body[theme-mode=dark] .wk-userinfo-action span {
    color: #808ea6;
}

body[theme-mode=dark] .wk-userinfo-member {
    background: #2f2f30;
}

body[theme-mode=dark] .wk-userinfo-member .wk-userinfo-user-info-name,
body[theme-mode=dark] .wk-userinfo-member .wk-user-moments-entry-label,
body[theme-mode=dark] .wk-userinfo-member .wk-list-item-title,
body[theme-mode=dark] .wk-userinfo-member .wk-list-item-subtitle {
    color: #dfe2e6;
}

body[theme-mode=dark] .wk-userinfo-member .wk-userinfo-user-info-others li {
    color: #999999;
}


.wk-friendapply {
    width: 100%;
    height: 100%;
    background-color:white;
}

body[theme-mode=dark] .wk-friendapply {
    background-color:var(--wk-color-secondary);
}

.wk-friendapply-content {
    padding: 15px;
}

.wk-friendapply-content-tip {
    color: gray;
}

.wk-friendapply-content-message {
    margin-top: 5px;
}
.wk-base {
  width: 100%;
  height: 100%;
}

.wk-base-modal .semi-modal-content {
  border: none !important;
  padding: 0px !important;
}

.wk-base-modal .semi-modal-close {
  display: none;
}

.wk-base-modal .semi-modal-body-wrapper {
  margin: 0px;
}

.wk-base-modal-userinfo .semi-modal-body {
  height: 500px;
}

/* 群聊会话头像「查看用户信息」对齐 807:10951：336 × 436。 */
.wk-base-modal-userinfo-conversation .semi-modal-content {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.wk-base-modal-userinfo-conversation .semi-modal-body,
.wk-base-modal-userinfo-conversation .semi-modal-body-wrapper {
  height: 436px;
  overflow: hidden;
}

.wk-base-modal-userinfo-conversation .wk-route-header {
  display: none;
}

.wk-base-modal-userinfo-conversation .wk-route-box {
  height: 100%;
}

.wk-base-modal-userinfo-conversation .wk-route-content {
  background: transparent;
}

/* 设置备注等二级页面仍需保留返回标题栏。 */
.wk-base-modal-userinfo-conversation .wk-route:has(.wk-route-header-title-box-open) .wk-route-header {
  display: flex;
}

.wk-base-modal-userinfo-conversation .wk-route:has(.wk-route-header-title-box-open) .wk-route-box {
  height: calc(100% - var(--wk-height-route-header));
}

/* 加入组织 */
.wk-base-modal-join-org .semi-modal-content {
  border: none !important;
  padding: 12px !important;
}
.wk-base-modal-join-org .semi-modal-header {
  margin: 12px !important;
}
.wk-base-modal-join-org .semi-modal-body-wrapper {
  margin: 0px;
}
.wk-base-modal-join-org .semi-modal-body {
  height: 420px;
}

.semi-button.semi-button-primary:focus-visible, .semi-button.semi-button-secondary:focus-visible, .semi-button.semi-button-tertiary:focus-visible, .semi-button.semi-button-warning:focus-visible, .semi-button.semi-button-danger:focus-visible {
  outline: none;
}



.wk-subscrierlist {
    background-color: white;
    width: 100%;
    height: 100%;
    overflow: scroll;
}

/* 夜间「群成员与权限」949:21353：成员列表整块 #1E1E1F，行与面板同底，只靠头像和昵称分隔。 */
body[theme-mode=dark] .wk-subscrierlist {
    background-color: var(--wk-night-canvas);
    color: var(--wk-night-ink);
}

body[theme-mode=dark] .wk-subscrierlist-list-item:hover {
    background-color: var(--wk-night-surface);
}

body[theme-mode=dark] .wk-subscrierlist-item-desc {
    color: var(--wk-night-ink-muted);
}

.wk-subscrierlist-list-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
}

.wk-subscrierlist-item-name {
    margin-left: 1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 10rem;
}

.wk-subscrierlist-item-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.wk-subscrierlist-item-desc {
    font-size: 14px;
    color: #666;
}

.wk-indextable {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.wk-indextable-section-title {
    background-color: var(--wk-color-secondary);
    margin-left: 15px;
}

.wk-indextable-item {
    display: flex;
    align-items: center;
    padding: 15px 15px 15px 0px;
    cursor: pointer;
    color: var(--wk-textcolor);
}

body[theme-mode=dark] .wk-indextable-item {
    background-color: var(--wk-color-secondary);
}

.wk-indextable-item:hover {
    background: var(--wk-select-bkcolor);
}

.wk-indextable-item-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.wk-indextable-item-name {
    margin-left: 15px;
}

body[theme-mode=dark]  .wk-indextable-item-name {
    color: white;
}

.wk-indextable-search {
    padding: 10px 0px;
    display: flex;
    overflow: hidden;
    width: 100%;
    background-color: var(--wk-bkcolor);
    z-index: 10;
}

body[theme-mode=dark] .wk-indextable-search  {
    background-color: var(--wk-color-secondary-2);
}

.wk-indextable-item-index {
    width: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

body[theme-mode=dark] .wk-indextable-item-index {
    color: white;
}

.wk-indextable-checkbox {
    margin-right: 10px;
}

.wk-indextable-search-box {
    display: flex;
    min-width: 100px;
    height: 50px;
    background-color: var(--wk-bkcolor);
    color: var(--wk-textcolor);
}

body[theme-mode=dark] .wk-indextable-search-box  {
    background-color: var(--wk-color-secondary-2);
}

.wk-indextable-selected-box {
    display: flex;
    overflow-x: scroll;
}

.wk-indextable-search-icon {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.wk-indextable-search-input {
    margin-left: -20px;
    max-width: 100px;
}

.wk-indextable-search-input input {
    flex: 1 1;
    height: 32px;
    font-size: 12px;
    line-height: 18px;
    background-color: transparent;
    color: var(--wk-textcolor);
    outline: none;
    border: none;
    height: 100%;
    padding-left: 25px;
}

body[theme-mode=dark] .wk-indextable-search-input input {
    color: white;
}

.wk-indextable-select-user {
    padding: 0px 5px;
    cursor: pointer;
}

.wk-indextable-search .wk-indextable-select-user img{
    border-radius: 50%;
}

.wk-indextable-contacts {
    width: 100%;
    height: calc(100% - 70px);
    overflow-y: auto;
}

.wk-userselect {
    width: 100%;
    height: 100%;
}

.wk-contactsselect {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wk-contactsselect-content {
    width: 100%;
    height: calc(100% - var(--wk-height-viewqueueheader));

}
.wk-message-card {
    background-color: white;
    width: 300px;
    cursor: pointer;
    border-radius: 8px;
}

body[theme-mode=dark] .wk-message-card {
    background-color: var(--wk-color-secondary);
}


.wk-message-card-content {
    display: flex;
    padding: 10px;
    align-items: center;
}

.wk-message-card-content-name {
    margin-left: 20px;
    color: var(--wk-text-item);

}

.wk-message-card-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 10px 5px 10px;
} 

.wk-message-card-bottom-flag {
    font-size: 12px;
    color: #999;
}

.wk-message-card-bottom-time {
    position: absolute;
    right: 10px;
    top: -5px;
    color: #999 !important;
}
.wk-join-oraganization {
  background-color: white;
  cursor: pointer;
  border-radius: 8px;
  width: 100%;
}

body[theme-mode=dark] .wk-join-oraganization {
  background-color: var(--wk-color-secondary);
}


.wk-join-oraganization-content {
  display: flex;
  padding: 10px;
  align-items: center;
}

.wk-join-oraganization-content-name {
  margin-left: 20px;
  color: var(--wk-text-item);
}

.wk-join-oraganization-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px 5px 10px;
}

.wk-join-oraganization-bottom-flag {
  font-size: 12px;
  color: #999;
}

.wk-join-oraganization-bottom-time {
  position: absolute;
  right: 10px;
  top: -5px;
  color: #999 !important;
}

.wk-message-system {
    padding: 10px 20px;
    width: 85%;
    margin: 0 auto;
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
    color: rgba(9,30,66,.87);
    white-space:  pre-line;
}
body[theme-mode=dark] .wk-message-system  {
    color: #999;
}
.wk-message-text {
    word-wrap: break-word;
    word-break: break-all;
    width: 100%;
}

.wk-message-text  pre {
    margin-bottom: 0;
    white-space: pre-wrap; /*css-3*/
    white-space: -moz-pre-wrap; /*Mozilla,since1999*/
    white-space: -pre-wrap; /*Opera4-6*/
    white-space: -o-pre-wrap; /*Opera7*/
    word-wrap: break-word; /*InternetExplorer5.5+*/
    font-family: var(--wk-font-family);
}

.wk-message-text-richtext {
    
}

.wk-message-text-richmention {
    cursor: pointer;
    text-decoration: underline;
}

.wk-message-text-send {
    color: white;
}

/* 设计 807:5221：接收气泡正文 #333333，不是纯黑。 */
.wk-message-text-recv {
    color: #333333;
}

/* 夜间 949:19014 / 949:19047：两侧气泡都是 #2F2F30 底 + #DFE2E6 正文。 */
body[theme-mode=dark] .wk-message-text-recv,
body[theme-mode=dark] .wk-message-text-send {
    color: var(--wk-night-ink);
}

body[theme-mode=dark] .wk-message-text-reply.wk-message-text-reply-recv {
    color: rgba(223, 226, 230, 0.5);
}

.wk-message-text-richemoji {

}

.wk-message-text-richemoji img {
    width: 22px;
    height: 22px;
}

.wk-message-text-reply {
    display: flex;
    color: rgb(255, 255, 255,0.5);
    font-size: 14px;
    flex-direction: column;
    cursor: pointer;
}

.wk-message-text-reply.wk-message-text-reply-recv {
    color: rgb(0, 0, 0,0.5);
}


.wk-message-text-reply-author {
    display: flex;
    align-items: center;
}

.wk-message-text-reply-authoravatar {
    margin-right: 4px;
}

.wk-message-text-reply-content { 
    width:100%;
	word-break:break-all;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.wk-message-text-content {
    margin: 0;
    word-break: break-word;
    line-height: 1.3125;
    text-align: left;
    text-align: initial;
    display: flow-root;
    unicode-bidi: plaintext;
}

.icon-play::before {
    content: "";
    color: var(--wk-color-theme);
    font-size: 20px;
}

.icon-pause::before {
    content: "";
    font-size: 20px;
    color: var(--wk-color-theme);
}

.voicePlay {
    width: 48px;
    height: 48px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: flex;
}

.wk-message-base-bubble-box.recv .voicePlay {
    background-color: var(--wk-color-secondary-2);
}

.voicePlay .icon-play {
    opacity: 1;
    transform: scale(1);
    transition: opacity .4s,transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voicePlay .icon-pause {
    opacity: 0;
    transform: scale(0.5);
}

.voicePlay i {
    position: absolute;
}

.voicePlaying .icon-pause {
    opacity: 1;
    transform: scale(1);
    transition: opacity .4s,transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.voicePlaying .icon-play {
    opacity: 0;
    transform: scale(0.5);
}

.mediaLoading {
    position: absolute;
    cursor: pointer;
}

.voiceDownloading .icon-pause {
    opacity: 0;
    transform: scale(0.5);
}

.voiceDownloading .icon-play {
    opacity: 0;
    transform: scale(0.5);
}


.progressSpinner {
    width: auto;
    height: auto;
    background: transparent url(data:image/svg+xml;base64,PHN2ZyAgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIzMTkiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PHBhdGggZD0iTTU2Mi4yODExNzMgNTEwLjgwMDY4NWwyOTQuOTk2NjY0LTI5My40NjY4MjFjMTMuOTQ5NzEtMTMuODc4MDc5IDE0LjAyMDMxOC0zNi4zNjcyNzkgMC4xNDIyNC01MC4zMTY5ODktMTMuOTEzODk0LTEzLjk4NDUwMy0zNi4zNjcyNzktMTQuMDIwMzE4LTUwLjMxNjk4OS0wLjE0MjI0TDUxMi4wMzQ3OTIgNDYwLjM3NzI3MiAyMTkuNTI4ODU1IDE2Ni45ODIwODJjLTEzLjg0MjI2My0xMy44NzgwNzktMzYuMzY3Mjc5LTEzLjk0OTcxLTUwLjMxNjk4OS0wLjA3MTYzMS0xMy45MTM4OTQgMTMuODc4MDc5LTEzLjk0ODY4NyAzNi40MDMwOTUtMC4wNzE2MzEgNTAuMzUyODA1TDQ2MS41NzY1ODcgNTEwLjU4NzgzNyAxNjYuNzIxMTM5IDgwMy44NzY2MDRjLTEzLjk0OTcxIDEzLjg3ODA3OS0xNC4wMjAzMTggMzYuMzY3Mjc5LTAuMTQyMjQgNTAuMzE2OTg5IDYuOTM5MDM5IDYuOTc0ODU1IDE2LjA4NDMyNyAxMC40OTcwNzUgMjUuMjI5NjE0IDEwLjQ5NzA3NSA5LjA3MzY1NiAwIDE4LjE0ODMzNS0zLjQ1MTYxMiAyNS4wODczNzUtMTAuMzU0ODM1bDI5NC45MjYwNTYtMjkzLjM2MDM5OCAyOTUuMTc0NzIgMjk2LjA2NDk5NmM2LjkzOTAzOSA2Ljk3NDg1NSAxNi4wNDg1MTEgMTAuNDYyMjgzIDI1LjE5Mzc5OSAxMC40NjIyODMgOS4xMDk0NzIgMCAxOC4xODQxNTEtMy40ODc0MjggMjUuMTIzMTktMTAuMzkwNjUxIDEzLjkxMzg5NC0xMy44NzgwNzkgMTMuOTQ5NzEtMzYuMzY3Mjc5IDAuMDcxNjMxLTUwLjMxNjk4OUw1NjIuMjgxMTczIDUxMC44MDA2ODV6IiAgZmlsbD0iIzJmNzBmNSI+PC9wYXRoPjwvc3ZnPg==) no-repeat 49% 49%;
}

.progressSpinner svg {
    display: block;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    animation: 4s linear 0s infinite ProgressSpinnerAnimation;
}

.progressSpinner svg circle {
    transition: stroke-dashoffset .5s;
}

@keyframes ProgressSpinnerAnimation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
} 


.wk-message-voice {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.wk-message-voice-info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.wk-message-voice-info-status {
    display: flex;
}

.wk-message-voice-info-time {
    display: flex;
    font-size: 14px;
}

.wk-message-voice-info-tail {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.wk-message-voice-waveform {
    position: relative;
    width: 100%;
    height: 100%;
}


.wk-message-voice-lightWavform {
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    transition: width 100ms ease-in-out;
    width: 0%;
}

.wk-message-video-content {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.wk-message-video-content-time {
    align-items: center;
    background-color: rgba(0,0,0,.35);
    border-radius: 12px;
    color: #fff;
    display: flex;
    font-size: 12px;
    height: 1.125rem;
    left: 6px;
    line-height: 1;
    padding: 0 6px;
    position: absolute;
    top: 6px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    z-index: 2;
}

.wk-message-video-content-video img {
    border-radius: 4px;
    cursor: pointer;
}

.flexible-modal {
    position: absolute;
    z-index: 1;
    border: 1px solid #ccc;
    background: white;
  }
  .flexible-modal-mask {
    position: fixed;
    height: 100%;
    background: rgba(55, 55, 55, 0.6);
    top:0;
    left:0;
    right:0;
    bottom:0;
  }
  .flexible-modal-resizer {
    position:absolute;
    right:0;
    bottom:0;
    cursor:se-resize;
    margin:5px;
    border-bottom: solid 2px #333;
    border-right: solid 2px #333;
  }
  .flexible-modal-drag-area{
    background: rgba(22, 22, 333, 0.2);
    height: 50px;
    position:absolute;
    right:0;
    top:0;
    cursor:move;
  }

.wk-message-location {
    cursor: pointer;
}

.wk-message-location-content {
    width: 250px;
    background-color: white;
    border-radius: 4px;
}

body[theme-mode=dark] .wk-message-location-content{
    background-color: var(--wk-color-secondary);
}


.wk-message-location-content-title {
    color: var(--wk-text-item);
    font-size: 16px;
    padding: 5px 5px 0px 5px;
}

.wk-message-location-content-address {
    color: #666;
    font-size: 12px;
    padding: 0px 5px 5px 5px;
}

.wk-message-location-content-locationimg {
    width: 250px;
    height: 100px;
    overflow: hidden;
    background-size: cover;
}


.wk-iconclick {
   padding: 10px;
}

.wk-iconclick  img {
    width: 20px;
    height: 20px;
}

.wk-emojitoolbar {
    padding: 10px;
}


.wk-emojitoolbar img {
    width: 20px;
    height: 20px;
}

.wk-emojitoolbar-emojipanel {
    width: min(460px, calc(100vw - 40px));
    max-width: 460px;
    height: 372px;
    background-color: var(--wk-color-item);
    position: absolute;
    left: 20px;
    top: calc(-372px - 15px);
    box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(114,114,114,0.25098);
    border-radius: 0.75rem;
   
    transition: opacity .2s cubic-bezier(0.2, 0, 0.2, 1),transform .2s cubic-bezier(0.2, 0, 0.2, 1) !important;
    transform-origin: left bottom;
    visibility: hidden;
    z-index: 999;
}

body[theme-mode=dark] .wk-emojitoolbar-emojipanel {
    box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(0,0,0,0.85098);
}

.wk-emojitoolbar-emojipanel-show {
    animation: emojiPanelAnimationShow 0.25s;
    -webkit-animation: emojiPanelAnimationShow 0.25s; /* Safari 与 Chrome */
    visibility: visible;
}

.wk-emojitoolbar-emojipanel-hide {
    animation: emojiPanelAnimationHide 0.25s;
    -webkit-animation: emojiPanelAnimationHide 0.25s; /* Safari 与 Chrome */
    visibility: visible;
}

@keyframes emojiPanelAnimationShow {
    from {
        transform: scale(0.5);
    }
    to {
        transform: scale(1);
    }
}

@keyframes emojiPanelAnimationHide {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0);
    }
}

.wk-emojipanel {
    width: 100%;
    height: 100%;
    background-color: var(--wk-bkcolor);
}

.wk-emojipanel-tab {
    width: 100%;
    height: 40px;
    background-color: var(--wk-bkcolor);
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;

    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
}

.wk-emojipanel-content {
    width: 100%;
    height: calc(100% - 40px);
    overflow: hidden;
    overflow-y: auto;

}

.wk-emojipanel-content ul {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding: 13px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    margin-left: 8px;
}

.wk-emojipanel-content ul li {
    cursor: pointer;
    padding: 6px 4px;
}

.wk-emojipanel-content ul li img {
    height: 26px;
    width: 26px;
    margin: auto;
    display: block;

    transition:transform .3s;
	-moz-transition:transform .3s;
	-webkit-transition:transform .3s;
	-o-transition:transform .3s;
}

.wk-emojipanel-tab-item {
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wk-emojipanel-tab-item-selected {
    background-color: var(--wk-select-bkcolor);
}

.wk-sticker-store-tab {
    color: var(--wk-textcolor);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.wk-sticker-store {
    box-sizing: border-box;
    min-height: 100%;
    padding: 14px 16px;
}

.wk-sticker-store-title {
    color: var(--wk-textcolor);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.wk-sticker-store-state {
    color: var(--wk-color-font-tip);
    padding: 60px 0;
    text-align: center;
}

.wk-sticker-store-error {
    color: #e55c5c;
}

.wk-sticker-store-item {
    align-items: center;
    border-bottom: 1px solid var(--wk-line-color);
    display: flex;
    gap: 12px;
    min-height: 70px;
    padding: 8px 0;
}

.wk-emojitoolbar .wk-sticker-store-cover {
    border-radius: 8px;
    flex-shrink: 0;
    height: 54px;
    -o-object-fit: cover;
       object-fit: cover;
    width: 54px;
}

.wk-sticker-store-info {
    min-width: 0;
    flex: 1 1;
}

.wk-sticker-store-name {
    color: var(--wk-textcolor);
    font-size: 14px;
    font-weight: 500;
}

.wk-sticker-store-desc {
    color: var(--wk-color-font-tip);
    font-size: 12px;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-sticker-store-item button {
    background: var(--wk-confirm-btn-gradient);
    border: 0;
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12px;
    min-width: 58px;
    padding: 6px 10px;
}

.wk-sticker-store-item button:disabled {
    background: var(--wk-color-secondary-2);
    color: var(--wk-color-font-tip);
    cursor: default;
}

body[theme-mode=dark] .wk-emojipanel-tab-item-selected {
    background-color: var(--wk-color-secondary-2);
}

.wk-emojitoolbar-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top:0px;
    left: 0px;
    z-index: 998;
    cursor: default;
}

.wk-channelavatar {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin-top: 40px;
    flex-direction: column;
}

.wk-channelavatar-avatar {
    width: 200px;
    height: 200px;
    
}

.wk-channelavatar-upload {
    margin-top: 20px;
}



.wk-imagetoolbar {
   
}

.wk-imagetoolbar-content {
    padding: 10px;
}

.wk-imagetoolbar-content-icon  img{
    width: 20px;
    height: 20px;
}

.wk-imagetoolbar-content-icon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.wk-imagedialog {
    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-app-region: no-drag;
    z-index: 100;
}

.wk-imagedialog-mask {
    position: absolute;
    background-color: rgba(0,0,0,.3);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.wk-imagedialog-content {
    width: 420px;
    position: relative;
    padding: 28px;
    background: var(--wk-color-item);
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
    max-height: 580px;
}

.wk-imagedialog-content-close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 28px;
    right: 28px;
    font-size: 18px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    line-height: 18px;
}

.wk-imagedialog-content-close svg {
    fill: var(--wk-text-item);
}

.wk-imagedialog-content-title {
    font-size: 16px;
    font-weight: 600;
}

.wk-imagedialog-content-body {
    width: 100%;
    font-size: 14px;
    text-align: center;
    margin-top: 28px;
}

.wk-imagedialog-content-preview {
    box-sizing: border-box;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    border-radius: 4px 4px 4px 4px;
}

.wk-imagedialog-content-previewImg {
    width: auto;
    height: auto;
    max-width: 240px;
    max-height: 240px;
    background-size: auto 100%;
    background-position: 50%;
    margin: 0 auto 16px;
}

.wk-imagedialog-content-preview-file {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.wk-imagedialog-content-preview--filecontent {
    flex: 1 1;
    width: 100%;
    height: 78px;
    padding: 12px 0px 12px 20px;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    background-color: rgb(247, 247, 247);
}

body[theme-mode=dark] .wk-imagedialog-content-preview--filecontent {
    background-color: var(--wk-color-secondary);
}

.wk-imagedialog-content-preview-file-icon {
    height: 78px;
    width: 78px;
    display: flex;
    align-items: center;
    border-radius: 0px 0px 0px 10px;
}

.wk-imagedialog-content-preview-file-thumbnail {
    width: 48px;
    height: 48px;
    margin: auto 16px auto auto;
}

.wk-imagedialog-content-preview--filecontent-name {
    color: var(--wk-text-item);
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

.wk-imagedialog-content-preview--filecontent-size {
    font-size: 12px;
    color: var(--wk-color-font-tip);
}

.wk-imagedialog-footer {
    margin-top: 28px;
    justify-content: flex-end;
    display: flex;
}

.wk-imagedialog-footer button{
    background-color: #fff;
    border: 1px solid #dee0e3;
    color: #1f2329;
    border-radius: 4px;
    height: 32px;
    min-width: 100px;
    padding: 0 16px;
    cursor: pointer;
}

.wk-imagedialog-footer-okbtn {
    margin-left: 16px;
    color: white !important;
    border: none !important;
}


.wk-screenshot-toolbar,
.wk-screenshot-toolbar-trigger {
    width: 24px;
    height: 24px;
    position: relative;
}

.wk-screenshot-toolbar-trigger .wk-iconclick {
    width: 24px;
    height: 24px;
    padding: 0;
}

.wk-screenshot-toolbar-trigger .wk-iconclick img {
    width: 24px;
    height: 24px;
}

.wk-screenshot-toolbar-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 4px;
    pointer-events: none;
}

body[theme-mode="dark"] .wk-screenshot-toolbar-loading {
    background: rgba(31, 35, 41, 0.78);
}

.wk-screenshot-preview-modal .semi-modal-body {
    padding-top: 8px;
}

.wk-screenshot-preview {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.wk-screenshot-preview img {
    display: block;
    max-width: 100%;
    max-height: min(60vh, 520px);
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.wk-screenshot-preview-size {
    color: var(--wk-color-font-tip);
    font-size: 12px;
    line-height: 18px;
}

.wk-screenshot-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.wk-voice-toolbar-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  width: 24px;
}

.wk-voice-toolbar-trigger > img {
  display: block;
  height: 24px;
  width: 24px;
}

.wk-voice-toolbar-modal .semi-modal {
  border-radius: 14px;
  width: min(420px, calc(100vw - 32px));
}

.wk-voice-recorder {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 22px 16px 8px;
}

.wk-voice-recorder-indicator {
  align-items: center;
  background: #f2e9fb;
  border-radius: 50%;
  display: flex;
  height: 72px;
  justify-content: center;
  margin-bottom: 16px;
  width: 72px;
}

.wk-voice-recorder-indicator span {
  background: #8037c7;
  border-radius: 50%;
  height: 18px;
  width: 18px;
}

.wk-voice-recorder[data-phase="recording"] .wk-voice-recorder-indicator span {
  animation: wk-voice-recording-pulse 1.2s ease-in-out infinite;
}

.wk-voice-recorder > strong {
  color: #27232b;
  font-size: 24px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 32px;
}

.wk-voice-recorder > p {
  color: #8b8690;
  font-size: 13px;
  margin: 8px 0 24px;
  min-height: 20px;
}

.wk-voice-recorder-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.wk-voice-recorder-actions button {
  background: #ffffff;
  border: 1px solid #ded9e4;
  border-radius: 7px;
  color: #4a4550;
  cursor: pointer;
  font-size: 14px;
  height: 36px;
  min-width: 88px;
  padding: 0 16px;
}

.wk-voice-recorder-actions button.primary {
  background: #8037c7;
  border-color: #8037c7;
  color: #ffffff;
}

.wk-voice-recorder-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@keyframes wk-voice-recording-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(128, 55, 199, 0.24);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(128, 55, 199, 0);
  }
}

body[theme-mode="dark"] .wk-voice-toolbar-modal .semi-modal,
body[theme-mode="dark"] .wk-voice-recorder-actions button {
  background: #29252f;
}

body[theme-mode="dark"] .wk-voice-recorder > strong,
body[theme-mode="dark"] .wk-voice-recorder-actions button {
  color: #f3eff7;
}

body[theme-mode="dark"] .wk-voice-recorder-actions button.primary {
  background: #9f63d7;
  border-color: #9f63d7;
  color: #ffffff;
}

/* 设计 807:11394 设置当前聊天背景 */

.wk-chatbg-selector {
    width: 100%;
    height: 100%;
    padding: 12px 20px 20px 20px;
    overflow-y: auto;
    background-color: #f5f5f5;
}

body[theme-mode=dark] .wk-chatbg-selector {
    background-color: transparent;
}

/* 807:11399 从电脑中选一张 */
.wk-chatbg-selector-upload {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border: none;
    border-radius: 11px;
    background-color: #ffffff;
    font-size: 15px;
    color: #333333;
    cursor: pointer;
}

body[theme-mode=dark] .wk-chatbg-selector-upload {
    background-color: var(--wk-color-item);
    color: var(--wk-text-item);
}

.wk-chatbg-selector-upload i {
    width: 8px;
    height: 8px;
    border-top: 1.5px solid #999999;
    border-right: 1.5px solid #999999;
    transform: rotate(45deg);
}

/* 807:11402 预置背景网格：4 列、间距 4、圆角 2 */
.wk-chatbg-selector-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 4px;
    gap: 4px;
}

.wk-chatbg-selector-item {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    border-radius: 2px;
    overflow: hidden;
    background-color: #ffffff;
    cursor: pointer;
}

.wk-chatbg-selector-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

.wk-chatbg-selector-item.selected {
    outline: 2px solid #9d26ff;
    outline-offset: -2px;
}

.wk-chatbg-selector-default {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #666666;
}

.wk-chatbg-selector-check {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
    color: #ffffff;
    font-size: 12px;
}

.wk-chatbg-selector-empty {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: #999999;
}

/* 设计 807:11834 解除好友关系确认弹窗 */

.wk-deletefriend-confirm-modal .semi-modal-content {
    width: 336px;
    border-radius: 20px;
    padding: 0;
}

.wk-deletefriend-confirm-modal .semi-modal-body {
    margin: 0;
}

.wk-deletefriend-confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 39px 29px 39px;
}

.wk-deletefriend-confirm-title {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    line-height: 16px;
}

.wk-deletefriend-confirm-user {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 16px;
}

.wk-deletefriend-confirm-user img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-deletefriend-confirm-user span {
    margin-top: 8px;
    font-size: 14px;
    color: #333333;
    line-height: 14px;
}

.wk-deletefriend-confirm-clear {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 16px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.wk-deletefriend-confirm-clear input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* 设计 807:11841 为 18×18 圆形勾选控件 */
.wk-deletefriend-confirm-clear i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #cccccc;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wk-deletefriend-confirm-clear input:checked + i {
    border-color: #9d26ff;
}

.wk-deletefriend-confirm-clear input:checked + i::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
}

.wk-deletefriend-confirm-clear span {
    font-size: 14px;
    color: #333333;
}

.wk-deletefriend-confirm-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.wk-deletefriend-confirm-actions button {
    width: 108px;
    height: 32px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.wk-deletefriend-confirm-actions .cancel {
    background: #ffffff;
    border: 1px solid #efefef;
    color: #333333;
}

.wk-deletefriend-confirm-actions .delete {
    background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
    border: none;
    color: #ffffff;
}

/* 夜间模式（设计 949:13315「解除好友关系」夜间稿）：弹窗面 #2F2F30、
   两个按钮同为 #444444 无描边，删除用品牌紫文字区分。 */
body[theme-mode=dark] .wk-deletefriend-confirm-modal .semi-modal-content {
    background-color: #2f2f30;
}

body[theme-mode=dark] .wk-deletefriend-confirm-title {
    color: #dfe2e6;
}

body[theme-mode=dark] .wk-deletefriend-confirm-user span,
body[theme-mode=dark] .wk-deletefriend-confirm-clear span {
    color: #dfe2e6;
}

body[theme-mode=dark] .wk-deletefriend-confirm-clear i {
    border-color: #999999;
}

body[theme-mode=dark] .wk-deletefriend-confirm-actions .cancel {
    background: #444444;
    border-color: #444444;
    color: #dfe2e6;
}

body[theme-mode=dark] .wk-deletefriend-confirm-actions .delete {
    background: #444444;
    color: #bc6cff;
}


.wk-message-system {
    padding: 10px 20px;
    width: 85%;
    margin: 0 auto;
    text-align: center;
    margin-top: 15px;
    font-size: 12px;
    color: var(--wk-textcolor);
    white-space:  pre-line;
}
.wk-message-approve {
    margin-left: 10px;
    color: #f65835;
}
body[theme-mode=dark] .wk-message-system  {
    color: #999;
}
/* 全局聊天密码设置/修改弹窗，沿用删除好友确认弹窗的卡片与按钮规范 */

.wk-chatpwd-dialog-mask {
    position: fixed;
    z-index: 1100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

.wk-chatpwd-dialog {
    display: flex;
    width: 336px;
    flex-direction: column;
    padding: 26px 30px 24px 30px;
    border-radius: 20px;
    background: #ffffff;
}

.wk-chatpwd-dialog-title {
    margin: 0;
    color: #000000;
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
    text-align: center;
}

.wk-chatpwd-dialog-description {
    margin: 10px 0 0 0;
    color: #999999;
    font-size: 12px;
    line-height: 18px;
}

.wk-chatpwd-dialog-field {
    display: flex;
    margin-top: 16px;
    flex-direction: column;
    gap: 6px;
}

.wk-chatpwd-dialog-field span {
    color: #333333;
    font-size: 13px;
    line-height: 18px;
}

.wk-chatpwd-dialog-field input {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #efefef;
    border-radius: 6px;
    background: #f7f7f9;
    box-sizing: border-box;
    color: #333333;
    font-size: 14px;
    outline: none;
}

.wk-chatpwd-dialog-field input:focus {
    border-color: #9d26ff;
}

.wk-chatpwd-dialog-error-slot {
    min-height: 20px;
    padding-top: 6px;
}

.wk-chatpwd-dialog-error {
    color: #ff4d4f;
    font-size: 12px;
    line-height: 14px;
}

.wk-chatpwd-dialog-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.wk-chatpwd-dialog-actions button {
    width: 108px;
    height: 32px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.wk-chatpwd-dialog-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.wk-chatpwd-dialog-actions .cancel {
    border: 1px solid #efefef;
    background: #ffffff;
    color: #333333;
}

.wk-chatpwd-dialog-actions .confirm {
    border: none;
    background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
    color: #ffffff;
}

body[theme-mode=dark] .wk-chatpwd-dialog {
    background: var(--wk-bg-item);
}

body[theme-mode=dark] .wk-chatpwd-dialog-title,
body[theme-mode=dark] .wk-chatpwd-dialog-field span {
    color: var(--wk-text-item);
}

body[theme-mode=dark] .wk-chatpwd-dialog-field input {
    border-color: #444444;
    background: transparent;
    color: var(--wk-text-item);
}

body[theme-mode=dark] .wk-chatpwd-dialog-actions .cancel {
    border-color: #444444;
    background: transparent;
    color: var(--wk-text-item);
}


.wk-iconlistitem {
    background-color: var(--wk-bkcolor);
    height: 70px;
    width: 100%;
    cursor: pointer;
    position: relative;
}

.wk-iconlistitem-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0px 20px;
}

.wk-iconlistitem-content-icon img {
    width: 32px;
    height: 32px;
}

.wk-iconlistitem-content-title {
    font-size: 14px;
    font-weight: 500;
    margin-left: 15px;
}

body[theme-mode=dark] .wk-iconlistitem-content-title {
    color: white;
}

.wk-iconlistitem-content-badge {
    position: absolute;
    right: 15px;
}

.wk-sex-select {
    width: 100%;
    height: 100%;
}

.wk-sex-select-item {
    background-color: white;
    height: 50px;
    width: 100%;
    background-color: var(--wk-color-item);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wk-sex-select-item .checked {
    color: var(--wk-color-theme);
    margin-left: 40px;
}

.wk-sex-select-item .sex {
    margin-left: 20px;
}
/* 「我的」资料卡（设计 807:9847），骨架与通讯录好友资料卡一致 */

.wk-meinfo {
    display: flex;
    width: 100%;
    justify-content: center;
}

.wk-meinfo-card {
    width: 343px;
    height: -moz-fit-content;
    height: fit-content;
    padding: 20px;
    position: relative;
    border-radius: 10px;
    background-color: #fff;
    background-color: var(--wk-color-secondary, #fff);
    display: flex;
    flex-direction: column;
}

.wk-meinfo-close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.wk-meinfo-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

.wk-meinfo-close img {
    width: 10px;
    height: 10px;
}

.wk-meinfo-header {
    display: flex;
    align-items: flex-start;
}

.wk-meinfo-avatar {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    padding: 0;
    position: relative;
    border: none;
    border-radius: 50%;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

.wk-meinfo-avatar img {
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-meinfo-avatar-mask {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.45);
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    opacity: 0;
    transition: opacity 150ms ease;
}

.wk-meinfo-avatar:hover .wk-meinfo-avatar-mask,
.wk-meinfo-avatar:focus-visible .wk-meinfo-avatar-mask {
    opacity: 1;
}

.wk-meinfo-avatar-input {
    display: none;
}

/* 设计 807:9850：昵称行与聚声号之间 13px */
.wk-meinfo-header-info {
    margin-left: 12px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 13px;
}

.wk-meinfo-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wk-textcolor);
    font-size: 15px;
    font-weight: 600;
}

.wk-meinfo-gender {
    width: 16px;
    height: 16px;
}

.wk-meinfo-subtitle {
    color: #999;
    color: var(--wk-color-font-tip, #999);
    font-size: 13px;
}

/* 业务模块注入的信息行（设计 807:9855，垂直间距 20） */
.wk-meinfo-rows {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 底部「发消息」（设计 807:9862，与上方区块间距 20） */
.wk-meinfo-actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 45px;
}

.wk-meinfo-action {
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.wk-meinfo-action img {
    width: 22px;
    height: 22px;
}

.wk-meinfo-action span {
    color: #384d7b;
    font-size: 12px;
}

.wk-meinfo-avatar-editor {
    display: flex;
    justify-content: center;
}

/*
 * 夜间模式资料卡对照设计「发起群聊、添加好友、个人信息」949:12307：
 * 卡片 #2F2F30、昵称 #DFE2E6、聚声号 #DFE2E6 50%、发消息 #808EA6。
 */
body[theme-mode="dark"] .wk-meinfo-card {
    background-color: #2f2f30;
}

body[theme-mode="dark"] .wk-meinfo-name {
    color: #dfe2e6;
}

body[theme-mode="dark"] .wk-meinfo-subtitle {
    color: rgba(223, 226, 230, 0.5);
}

body[theme-mode="dark"] .wk-meinfo-action span {
    color: #808ea6;
}

body[theme-mode="dark"] .wk-meinfo-action img {
    filter: brightness(0) invert(0.6);
}

body[theme-mode="dark"] .wk-meinfo-close img {
    filter: brightness(0) invert(0.9);
    opacity: 0.9;
}

body[theme-mode="dark"] .wk-meinfo-close:hover {
    background: rgba(223, 226, 230, 0.08);
}



.style_wk-popupmenus__kNwqe {
    background-color: white;
    border-radius: 4px;
    box-shadow: -5px 5px 20px 0px #eee, 
    0px 20px 20px -15px #eee;
    display: flex;
    height: 30px;
    align-items: center;
    padding: 0px 0px;
}
.style_wk-popupmenus-item__oFRfI {
    align-items: center;
    display: flex;
    margin: 10px 10px 10px 0px;
    cursor: pointer;
    width: 20px;
    height: 20px;
}
.style_wk-popupmenus-item__oFRfI:first-child {
    margin-left: 10px;
}



.style_wk-popupmenus-comment__txyI9 {
      /* webpackIgnore: true */
    background-image: url(./icons/comment.png);
    background-size: cover;

}

.style_wk-popupmenus-comment__txyI9:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAASKADAAQAAAABAAAASAAAAACQMUbvAAAE4klEQVR4Ae2bTWwbRRSA39u1Exriv5iGqi2Nk0pIpRdUkBoQEmc4cEDZ/ABCCNQWOPRAKoTEBQ4cWolDhQQICcSB0iYO4sqBQ4UQVK0qQLSqKqCx2wpEkzqx07jQ2Pt4s83GZnfjsZEdjHkjJTPvb2fel7djZ7wGkCYEhIAQEAJCQAgIASEgBIRA4wSwVshlK/6EDfajADhUy+8/ayPIAdDZSHfok+SxXCEoj0BA16zNvUX6c5oAHgsK6jgd4uUQkHVPunDam5vhVSh5GW69/b+BoxIm2lEinJ57/q6IEqtbqFpQ4ytWtK9EtL+ix8Ng4KmK3Dkjg6ifgN4kgi1MaaC4tDLB2X1QnaEPkI24h4k6Pgh4MjWTf606oNPGs1bMZDjvqrxsgAe8+flvMRsSVU5zVeOOHBoE825iSH/L3VH7Abne0gugempAKkhDSQAJIA0BjVkqSABpCGjMUkECSENAY5YKEkAaAhqzVJAA0hDQmKWCNIB850Ea/0Dz1We3JUvFGz97jXwYNTc4U7jXq/fKGSv6DRDu8urDGB7elp6/6NVXyxkrdgQI9lXrnDHCoVQ6/6FP36CiKYDMm2VjBSgeMPetAJ1fRRBlmL74Eth8mKVphD0Eti+Wz3a6NZF1meUW02ASQAJIQ0BjlgrSAGrKJr1l+rf5hdE+30ZZjpj8QYG+9WD3cAhKvg05sfvgEqTfqHkB6o0fii3nX/c6JWDrTYDzXnXDclMAIfJrBkC+4dlXA/rTczcCYzVwVMzgx5k/uFM/nrbgkf+ZKLeYhpsAEkAaAhqzVJAA0hDQmKWCBJCGgMYsFSSANAQ0ZqkgAaQhoDFLBTUMCPmE1238kKI77NjeqOTIiVdyX03YV0Fk4i9rMAj2zD6XumNN7sCBTfSwm5aBcMkdu73vuGMguvNcNvfTdUaZ5IP0IVxeuDA7Ev1h9UjDjaunL/EhyPTATD5djzMRYXYsPsl/Q7Xgjalc9Rjw7fmcJfKpzUnvWgMXwkDG2fG417lRmS/OacPjg+nCF7rY7EjsVRvosM6vVXYugM/5Y6Invdf33WLKgT/LOmEijiNWHpH1BtYjcxXyJfDYr0/FB2r5XxlP7uVqfauWT6tsvECb6/WoCZGng+YIrCDXkSzLvApf3kcGDZWp/rLnSQ0o01FOertzLcQzKdj+CKbP+z4ny1mJWAHs7/kWSylfjv2W0DjixLX4F5/x5jb1hr7b/NH80npT1QS0XlA9+tmxvmGwS1/xnhJW/vxi8T7vRy95YzMjMf7SDFlKz9W22NWF92/9dDHr9fu35MBbrBmLGZzKneKn2Cfda/H+8mJ2NPGMK6s+a8X2u3AcvYkvtBMctaaWVZCTMP/KjMaOk01q01cVUjRMY++OqYVz2Ym+3VQqn+Fba5NjQ3yPN8mX1bidWssqyE2yh7r28b5yQclcLT1lu/zZ7xP9d9NKacqFwxvPj3Rn4hU3pp36lleQSjYzltzF+9FpBtKrZJ7UeZ91e4xFMEMPpqauOxCVrp1ayytIJauSZzhrj6ioN6FrEBAOtisctcYNAaQmUu+t0DDeUWO3oYEnmvEMj3u9VvQbBkgtfiC+c5L3o6+dRBAuRsLmgVYk1cxrbsgeVL1g9c8vFhcfioSNs+t907jaX8ZCQAgIASEgBISAEGgRgb8A57BPQY2qtgcAAAAASUVORK5CYII=);
}

.style_wk-popupmenus-like__qTcMl {
    background-image: url(data:image/png;base64,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);
    background-size: cover;
}

.style_wk-popupmenus-like__qTcMl:hover {
    background-image: url(data:image/png;base64,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);
}

.style_wk-popupmenus-forward__WW6Ez {
    background-image: url(data:image/png;base64,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);
    background-size: cover;
}

.style_wk-popupmenus-forward__WW6Ez:hover {
    background-image: url(data:image/png;base64,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);
    background-size: cover;
}

.style_wk-popupmenus-delete__2OsZD {
    background-image: url(data:image/png;base64,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);
    background-size: cover;
}

.style_wk-popupmenus-delete__2OsZD:hover {
    background-image: url(data:image/png;base64,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);
    background-size: cover;
}

.style_wk-popupmenus-mulselect__MhgEq {
    background-image: url(data:image/png;base64,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);
    background-size: cover;
}

.style_wk-popupmenus-mulselect__MhgEq:hover {
    background-image: url(data:image/png;base64,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);
    background-size: cover;
}

.style_wk-popupmenus-revoke__S8LvT {
    background-image: url(data:image/png;base64,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);
    background-size: cover;
}

.style_wk-popupmenus-revoke__S8LvT:hover {
    background-image: url(data:image/png;base64,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);
    background-size: cover;
}

.style_wk-popupmenus-favorites__6MBwY {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAAB/lJREFUeF7tnAesrEUVgD96UaoIwYj0ohBpggZQkF4NGFCBBOkIKE2pwUACBJDelWpEBaRjoSMGla5BSigqYlQgaCRKDRDI93LmZt7/7t6/zL27e9+7J9ncfbsz85/5dv45Z845/5uNKRmTwGxTfMYmMEyAPgX8FXhrmH60YQF0NfBV4P/AicD3hgXSMAA6FTiiAmQX4KphgDRoQGsBjwDq8TKwREDxs3WmAMGFwP4B4gRg3wzS3sBlg4Y0yBX0aeBRYM7Ye9ykBfTdgPIg8LlZGdB5wDcDwJnAt4GPA38EFovP9wB+OEhIg1pBq8bqmQd4F1gNeCZAnAQcE+9/D6w/KwI6Gzg4Jv79bB/yo6VjFS0S3+8GXDkoSINYQavE6pk/Jq0l87bK5RTgyPjgPuALsxKgM4DDYsI/Ar4+yuSXC2gLxne7Aj8dBKR+r6AVY/UsEJP9PPDbHhM/DfhOfPdrYONZAZBHiMNjotcCXxlj0isBfwA+FG2+BlzTb0j9XEHeNnrIafPdArijZsKa/0OjzV3AZjMzoJOBo2KCvwC2azDZT8Yqmjfa7ghc36DfuDXp1wrSdLt6kgP4ZeDGhrM4Bzgo2t4ObNmw37g06xcgz1nHhsZ3A5u20F4n0r1oruizA3BTi/5FTfsByOODqyed1LuEMs4HDoyZ/grYpmjWLTr3A9DxwHGhU9ejwxrhHswe43wJ+HmLeXZuOtGANgJuAzxzKXsBl3fU1iPJftH3yXARnuo4VuNuEwnIjVhnT/Ou1Pk9dUqvGU5lOqIIySPJj+s6lnw/HoA+ASxbeXneyiOCbwJpYiX6uiL1qnPRP3oe+Fv89f1fgFdKLpT6NgE0R0zelVAF4b+T6e6lj0ExA/IqPR6imTfS+LGawV7MgAnvz9nrpaaKVAFtm0HIgaSzU9NxbecmqkN4cZtODdsuGdHHnQBjS23l1VhxQvOHS/DurQ6UAG0ffsraLa9ksMtQhfvBc8Cz2V9vq37IooCH4NFeC7VUQP0PAPTVpomAjA17Jkp+ymhjej8LwtcTGYj/tlRgEM2Ndets+lo5A/nhHsoIyXYjgPKNz1UgBD1X//4JaHy/DmL2hdf04Jzg6Yim23Vk6/GNTpiWYeG4mKbz6MILT6burrCfZXBMEpgsGFlBvjkEOCub1blZzHgyTbatrsK5DjBqoLiXaqi0etMB8h9mEswoJLkU2KftFSdRe+H8ElgmdHY70R15Op9D1cwb4tT7TWIc2HjwzCbCcVtZPCbmnisczf10Mpqj+C3AWyyJoQVDDDOLCOcBIPl2DwccPfAZpJcnbQr4B1lr3QBDpJNdhPNYpLudi6BcOX/vNbGxjhq7A1dkHc0+mIWYrCIcN+Ekzkc4/xprQnVnsZ0r+Sjv1bbe9jAArcL5TcCx5GZMqQNkZ8MWVoClkKe7fDKLdeMPw/dVOPcEnH83Ua4JIMcxxCmk5J57zxqIH3apwnEvNb/W+IjUFJAgzEkJycOh4i/w0SEm5Akhz/nfmtVBNla7DSAHtYhASIYblDeyzGfji/ah4XrA77LrGHZxQ1bfVtIWkIN/NiAlD9TPuozTStEWjatRx5sDztstxhhp2nVixoetQk1hgdJ4cxfdR+vjyrZ0b6n40iysK+e9rhfoCsjrWddjGidlLEwlu5QHKXmK6X7AW61ISgB54TzfbnLPY8og5aEsWWDliCu7SEoBfQbwLKOY/9qqSJvyzq9lRqN0btO0KR3E2h2VUgx4f7F8jkUjvJ/1Lp3buADSkqVTcF9z5j0w+qxHcmZNSY0EvrpiL6W8dQSdvL61h6lkrqs+pf0s+NwgBtH790crklJAltOlJ3NK8u5Fk8g651UgPiCTB/86XaMUkOEQwyKKJlXTOkjx+Y5LQoHpgu9dlSoFlJtVUyhmLAcp1gOok6J1XbdUmVJAyay6UacqjlKdSvobRv1fDPB6tmF3HrMEUG7Bhikka+Y3JQCLLVkJoNyCDYMXnVbJTwDL/JRiS1YCKLdgpm19OG4YJNer2JKVAMotmI8JVAubmsDywOtpe8MoKrCP9QGmmu6MusQm4+RtPDTfMl6WrARQsmC694YZagPg2SwsVXHV+UCdBVqjieNeBFib+HgLSo5thca4WLISQMmCTVcuUjMRS2yE4isVS9TN3UCXoHylidf1+WdUoBVbsq6AcgvW5LEC6xNdMVbMWzedxOD5BVGNZtrXMl+DcHvGKwfhOUtI7nUv1BDyiJEiC0WWrCug3IKl50176fyNqBSxsDPJOwFGODPkw6OR+5JQLbPL5T8Byr69apdOj2dg7VdkyboCyi2Fj3W7T1TFogcfu6w+/24BppOrPmXYC7DlKIKqPqNhkaYrShejmsbJjxxFlqwroNyCbQKYjEtiFbz1RtXYkM96CcYTdxcxnyWodFpPY3i7edsJKmUtbJOuU3Qm6wooWTA30BWAfwQQwQgoF/cDwRSHHmJQa5YEtXrlOroHXkdQngtNbs5XeibrCihZMN16N1TBJO816e0vqMIT8ZTg3AFJUMtXQFmgICTDL4aEiyxZV0AptHlD5O5zHd1bBNOP/1biIxmoVAyVdLHQQkdU6TrPzh3zA2FSSGskGF9aqX6KdQL6Vq4ob6tcDLtq6jtJV7KbR7TOGmuXtOlowTQuCuikbX0nS3qFZB2T4Rdvb1M/nfe/roCSqlZPTPgjSfVcJq5FKaCJ02xIRp4CVPNDTAGqAfQB5mVuWFT3ffkAAAAASUVORK5CYII=);
    background-size: cover;
}

.style_wk-popupmenus-favorites__6MBwY:hover {
    background-image: url(data:image/png;base64,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);
    background-size: cover;
}

.style_wk-popupmenus-copy__L3h6W {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAAXNSR0IArs4c6QAABA5JREFUeF7tnFuITVEYx3/zxJMiL0LuNZOQ3EVRLjMjD+SaEokpGUUeyAMeREkKKXdKuRWl3KIINeTygCJ34sEL5U0p+tfeWmedc+acOXutM/vsWavOy9l7f9+3fvvb397rW2t9dRRu3YGB0W8o0LvIeZ3x9xfgA/Ap+nm1oa6A9NXAVmCAV81uhN8DNgJP3YjLl2IDOgms8KXMo9wW4IgP+SagXcBmH0qqJHMi8Mi1rhjQGOCJJfwUcDB63n+6VpxAXh9gMLAHmGTI+Q70A/4kkJ13aQzoFjDDODofuOxSkSdZ24Fthuy9wCaXugRoAvDQELoDkOJaaVeAuZGxX4H+Lg0XoFZgvyF0JPDCpRLPstYAhw0do4DnrnQK0BlgWSRQ3xaDXAmvkhx9p701dOkz5Zgr3QJ0B5gWCbwLTHclvIpy/voKEQFQibuYFUAvgeFRXxcBF115b1YA6a2r2KMhx1pAbzMnLSuAnMAoJCQA6iIxKHiQNwLBg5KhDTEoRR7UEA2MlcpNS9PQSjmkV8UM8u1B3YB9QFOU304LGNsOgboObAB+mwd9AlocpUF7pJVKAbt+AcoOnI+P+QI0G7hRQ2BsUxuBm/rTByClSzQtY7bHwCFA2QK5c1qa4qEyGRqejLOMUlr3ow9AV4FmQ1mtZCjt9O01YI5rQKL+3oBzDliaFncpw46zwBLjvCGuASnxrwmAuE0FHpRhWFpOmQLcN4yZ6RqQnR/WNMy3tPS+DDv6WqmSFteA7Oe40NR2GXZ26ik56dsAKP9eBEAl/DMACoCShbDgQcGDggclIxA8KBm/EIOCBwUPSkYgeFAyfiEGBQ8KHpSMQEc9yFxdr3Sp1vxV2jKZD1plLXrUDOjrCgllEtBo4JkB5AQgaJW0TAISCC0k14LyuM2yku/lwsosoHnAJYvC7mg7wjvgR5mEMgtI/T8NLC8DxHFA8ATObpkGpM5qO5S2RZVq64EDGQV0AVgY9a2x0LSM4o+2QQ1rh9JkoC2jgDQTvCB6QnYWm7fSnlVNI8e/XgYMLTjSWppCLQuPWE6/XE/sBUAlglMAFACVen+1fzx4UBfwIK1I0WZhbYhpC0E6/46be2CbA6B8QHkp12RRJ/fqLMSgAKiERwRAnQlonTWI1RAlTWUtSoWTnlZqp9V1kNYKdXOcNtZn6ZpSva3guF3DpMk1oHpr54wKpKyswNDOusQuD9TgGpCyAEr4m8WZaqVQip1V/QzUuwakO6/t2XaxI73+ldJNY02QEYBuol3QRWu+j/oAJEjFKllVpe5YB57PuE6bfcn/0OALkBTWakUr5du3xMR8ApIOvRWk0Cze1IEbXNVTb0c5+ZyCcb4BxT3UnNv4aO5N+yHS0t5EnyGCUrCS3j9tpBamGTRC8QAAAABJRU5ErkJggg==);
    background-size: cover;
    width: 16px;
    height: 16px;
}

.style_wk-popupmenus-copy__L3h6W:hover {
    background-image: url(data:image/png;base64,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);
    background-size: cover;
}




.wk-qrcodemy {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wk-qrcodemy-content-qrcodebox {

    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.wk-qrcodemy-content-qrcodeinfo {
    background-color: var(--wk-bkcolor);
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body[theme-mode=dark] .wk-qrcodemy-content-qrcodeinfo {
    background-color: var(--wk-color-secondary-2);
}

.wk-qrcodemy-content-userinfo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 15px;
}

.wk-qrcodemy-content-userinfo-avatar img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.wk-qrcodemy-content-qrcode {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    width: 250px;
    height: 250px;
}

.wk-qrcodemy-content-tip {
    font-size: 13px;
    text-align: center;
    color: #999;
    margin: 15px 0px;
}

.wk-qrcodemy-content-userinfo-name {
    font-size: 15px;
    font-weight: 500;
}

body[theme-mode=dark]  .wk-qrcodemy-content-userinfo-name {
    color: white;
}


.wk-search-box {
    display: flex;
    min-width: 200px;
    height: 45px;
    background-color: var(--wk-bkcolor);
    border-radius: 25px;
}

body[theme-mode=dark] .wk-search-box {
    background-color: var(--wk-color-secondary-2);
}

.wk-search-icon {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.wk-search-input {
    margin-left: 10px;
    max-width: 100px;
}

.wk-search-input input {
    flex: 1 1;
    height: 32px;
    font-size: 12px;
    line-height: 18px;
    background-color: transparent;
    color: #1f2329;
    padding: 0;
    outline: none;
    border: none;
    height: 100%;
}

body[theme-mode=dark] .wk-search-input input {
    color: white;
}


.wk-search-input .semi-input-wrapper{
    height: 100%;
    background-color: white;
}

body[theme-mode=dark] .wk-search-input .semi-input-wrapper {
    background-color: var(--wk-color-secondary-2);
}

.wk-search-input .semi-input-wrapper-focus {
    border: none !important;
}

.wk-search-input .semi-input-wrapper-focus:active {
    border-color: none !important;
}

.wk-smalltableedit {
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.wk-smalltableedit-content-item{
    display: flex;
    padding: 5px 15px;
    background-color: var(--wk-color-item);
}

.wk-smalltableedit-content-item-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.wk-smalltableedit-content-item-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.wk-smalltableedit-content-item-name {
    margin-left: 15px;
    max-width: 200px;
    line-height: 40px;
    color: var(--wk-text-item);
   
}

.wk-smalltableedit-content-item-action {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
}

.wk-layout {
  --wk-width-layout-tab: var(--wk-app-sider-width, 195px);
    --wk-height-layout-tab-min: 60px;
    --wk-layer-transition: 300ms cubic-bezier(0.33,1,0.68,1);
    --wk-slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);

    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.wk-layout-tab {
    width: var(--wk-width-layout-tab);
    flex: none;
    transition: width 180ms ease;
    height: 100%;
}

.wk-layout-content {
    width: auto;
    min-width: 0;
    flex: 1 1;
    height: 100%;
    display: flex;
}

.wk-layout-content-left {
    width: var( --wk-width-layout-content-left);
    height: 100%;
}

.wk-layout-content-right {
    width: calc(100% - var(--wk-width-layout-content-left));
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
}

/* 340px 会话栏来自 1440 宽画布。1024 宽时导航 + 会话栏已占掉一半以上画布，
   右侧只剩 489px，排麦面板和聊天区都没有余量，所以在窄画布收到 280px。 */
@container wk-app-canvas (max-width: 1180px) {
    .wk-layout {
        --wk-width-layout-content-left: 280px;
        --wk-wdith-conversation-list: 280px;
    }
}

@container wk-app-canvas (max-width: 640px) {

    /* .wk-layout {
        flex-direction: column-reverse;
    }

    .wk-layout-tab {
        height: var(--wk-height-layout-tab-min);
        width: 100%;
    } */
    .wk-layout-content-right {
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        transform: translate3d(0, 0, 0);
        transition: transform var(--wk-layer-transition);
    }

   .wk-layout-content:not(.wk-layout-open) .wk-layout-content-right {
        transform: translate3d(100%, 0, 0);
    }

    .wk-layout-content-left {
        width: 100%;
    }
}


:root {
    --wk-height-navheader: 64px;
}

.wk-navheader {
   
    height: 64px;
   
    height: var(--wk-height-navheader);
    width: 100%;
    background-color: var(--wk-bkcolor);
}

.wk-navheader-content {
    padding: 0px 20px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wk-navheader-content-left-title {
    font-size: 24px;
    font-weight: 500;
}

body[theme-mode=dark] .wk-navheader-content-left-title {
    color: white;
} 
.wk-secondary-navigation {
  --wk-secondary-navigation-background: #ffffff;
  --wk-secondary-navigation-search-background: #f5f7ff;
  --wk-secondary-navigation-text: #333333;
  --wk-secondary-navigation-muted: #999999;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--wk-secondary-navigation-background);
  box-shadow: inset -0.6px 0 0 rgba(0, 0, 0, 0.05);
  color: var(--wk-secondary-navigation-text);
  display: flex;
  flex-direction: column;
  font-family: var(--wk-font-family);
}

.wk-secondary-navigation-header {
  height: 86px;
  padding: 20px 12px;
  box-sizing: border-box;
  flex: none;
}

.wk-secondary-navigation-search {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--wk-secondary-navigation-search-background);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color 150ms ease, background 150ms ease;
}

.wk-secondary-navigation-search:focus-within {
  border-color: rgba(137, 110, 255, 0.45);
  background: var(--wk-secondary-navigation-background);
}

.wk-secondary-navigation-search-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-secondary-navigation-search-input {
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--wk-secondary-navigation-text);
  flex: 1 1;
  font: 400 14px/20px var(--wk-font-family);
}

.wk-secondary-navigation-search-input::-moz-placeholder {
  color: var(--wk-secondary-navigation-muted);
  opacity: 1;
}

.wk-secondary-navigation-search-input::placeholder {
  color: var(--wk-secondary-navigation-muted);
  opacity: 1;
}

.wk-secondary-navigation-list {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1;
  scrollbar-color: rgba(137, 110, 255, 0.34) transparent;
  scrollbar-width: thin;
}

.wk-secondary-navigation-item {
  width: 100%;
  height: 64px;
  padding: 16px 20px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--wk-secondary-navigation-text);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font: 500 14px/32px var(--wk-font-family);
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
}

.wk-secondary-navigation-item:hover:not(.is-selected) {
  background: #f8f8fb;
}

.wk-secondary-navigation-item:focus-visible {
  outline: 2px solid rgba(137, 110, 255, 0.72);
  outline-offset: -2px;
}

.wk-secondary-navigation-item.is-selected {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-secondary-navigation-item-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
}

.wk-secondary-navigation-item-icon img {
  display: block;
  opacity: 0.82;
  transition: filter 140ms ease, opacity 140ms ease;
}

.wk-secondary-navigation-item:hover .wk-secondary-navigation-item-icon img,
.wk-secondary-navigation-item.is-selected
  .wk-secondary-navigation-item-icon
  img {
  opacity: 1;
}

.wk-secondary-navigation-item.is-selected
  .wk-secondary-navigation-item-icon
  img {
  filter: brightness(0) invert(1);
}

.wk-secondary-navigation-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.wk-secondary-navigation-list::-webkit-scrollbar-track {
  background: transparent;
}

.wk-secondary-navigation-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(137, 110, 255, 0.34);
}

.wk-secondary-navigation-list::-webkit-scrollbar-thumb:hover {
  background: rgba(137, 110, 255, 0.5);
}

/* 夜间模式（设计 949:18006「收藏」夜间稿）：次级导航面 #2F2F30、
   搜索框 #444444、正文 #DFE2E6、次要 #999999。 */
body[theme-mode="dark"] .wk-secondary-navigation {
  --wk-secondary-navigation-background: #2f2f30;
  --wk-secondary-navigation-search-background: #444444;
  --wk-secondary-navigation-text: #dfe2e6;
  --wk-secondary-navigation-muted: #999999;
  box-shadow: inset -0.6px 0 0 #333333;
}

body[theme-mode="dark"] .wk-secondary-navigation-search:focus-within {
  border-color: rgba(157, 38, 255, 0.55);
  background: #444444;
}

body[theme-mode="dark"] .wk-secondary-navigation-item:hover:not(.is-selected) {
  background: #3a3a3b;
}

body[theme-mode="dark"]
  .wk-secondary-navigation-item:not(.is-selected)
  .wk-secondary-navigation-item-icon
  img {
  filter: brightness(0) invert(0.75);
}

body[theme-mode="dark"] .wk-secondary-navigation-list {
  scrollbar-color: rgba(191, 77, 255, 0.46) transparent;
}

body[theme-mode="dark"] .wk-secondary-navigation-list::-webkit-scrollbar-thumb {
  background: rgba(191, 77, 255, 0.46);
}






.wk-blacklist {

}

.wk-blacklist-content ul li {
    height: 80px;
    width: 100%;
    background-color: var(--wk-color-item);
    display: flex;
    align-items: center;
    cursor: pointer;
}


.wk-blacklist-content-avatar {
    margin-left: 15px;
}

.wk-blacklist-content-avatar img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.wk-blacklist-content-title {
    margin-left: 15px;
    font-size: 15px;
    font-weight: 500;
    color: var(--wk-text-item);
}

/* 夜间模式（设计 949:13325「通讯录」夜间稿）：列表面 #2F2F30、正文 #DFE2E6。 */
body[theme-mode=dark] .wk-blacklist,
body[theme-mode=dark] .wk-blacklist-content ul li {
    background-color: #2f2f30;
}

body[theme-mode=dark] .wk-blacklist-content-title {
    color: #dfe2e6;
}
.wk-friendadd .wk-search-box {
  border-radius: 0px;
  background-color: white;
}

.wk-friendadd .wk-search-input {
  max-width: 100%;
}

.wk-friendadd .wk-search-input input {
  width: 250px;
}

.wk-friendadd-search {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wk-friendadd-search .wk-search-box {
  flex: 1 1;
  min-width: 0;
}

.wk-friendadd-search-button {
  flex: none;
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
}

.wk-friendadd-search-button:disabled {
  cursor: default;
  opacity: 0.4;
}

.wk-friendadd-content-qrcode {
  margin-top: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[theme-mode="dark"] .wk-friendadd-content-qrcode {
  color: white;
}

/* 夜间模式（设计 949:12269「添加好友」夜间稿）：面板底 #1E1E1F、
   搜索框 #2F2F30 配品牌紫描边。 */
body[theme-mode="dark"] .wk-friendadd {
  background-color: #1e1e1f;
}

body[theme-mode="dark"] .wk-friendadd .wk-search-box {
  background-color: #2f2f30;
  border: 1px solid #9d26ff;
}

body[theme-mode="dark"] .wk-friendadd .wk-search-input .semi-input-wrapper,
body[theme-mode="dark"] .wk-friendadd .wk-search-input input {
  background-color: transparent;
  color: #dfe2e6;
}

.wk-friendadd-content-qrcode img {
  margin-left: 4px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}



.wk-groupsave {
    width: 100%;
    height: 100%;
    border-right: var(--wk-line);
}

.wk-groupsave-content {
    height: calc(100% - var( --wk-height-viewqueueheader));
    width: 100%;
}

.wk-groupsave-content li {
    height: 80px;
    background-color: var(--wk-color-item);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wk-groupsave-content-avatar {
    margin-left: 15px;
}

.wk-groupsave-content-avatar img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.wk-groupsave-content-title {
    margin-left: 15px;
    font-size: 15px;
    font-weight: 500;
    color: var(--wk-text-item);
}

/* 夜间模式（设计 949:13325「通讯录」夜间稿）：群聊列表与通讯录列表同一套灰阶，
   列面 #2F2F30、列间描边 #333333、群名 #DFE2E6。 */
body[theme-mode=dark] .wk-groupsave {
    border-right: 1px solid #333333;
}

body[theme-mode=dark] .wk-groupsave-content li {
    background-color: #2f2f30;
}

body[theme-mode=dark] .wk-groupsave-content-title {
    color: #dfe2e6;
}


.wk-newfriend {
    width: 100%;
    height: 100%;
    border-right: var(--wk-line);
}

.wk-newfriend-content {
    height: calc(100% - var( --wk-height-viewqueueheader));
    width: 100%;
    overflow-y: auto;
}

.wk-newfriend-content  li {
    display: flex;
    width: 100%;
    height: 80px;
    background-color: var(--wk-color-item);
    align-items: center;
}


.wk-newfriend-content-avatar {
   margin-left: 15px;
}

.wk-newfriend-content-avatar img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.wk-newfriend-content-title {
    margin-left: 15px;
    font-size: 15px;
    font-weight: 500;
    color: var(--wk-text-item);
}

.wk-newfriend-content-title-remark {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.wk-newfriend-content-action {
    margin-right: 10px;
    margin-left: auto;
}

/* 夜间模式（设计 949:13325「通讯录」夜间稿）：列表面 #2F2F30、正文 #DFE2E6、备注 #999999。 */
body[theme-mode=dark] .wk-newfriend,
body[theme-mode=dark] .wk-newfriend-content li {
    background-color: #2f2f30;
}

body[theme-mode=dark] .wk-newfriend-content-title {
    color: #dfe2e6;
}

body[theme-mode=dark] .wk-newfriend-content-title-remark {
    color: #999999;
}
.wk-main-modal-organizational-group-new .semi-modal-body-wrapper {
  margin: 0;
}
.wk-main-modal-organizational-group-new .semi-modal-close {
  display: none;
}
/* 设计 807:9724：弹窗 744×646，候选列 307、已选列 437，
   与排档侧的 HallDualPaneMemberSelector 共用 307 候选列宽。 */
.wk-main-modal-organizational-group-new .semi-modal-body {
  height: 646px;
  max-height: none;
  display: flex;
}
.wk-main-modal-organizational-group-new .semi-modal-content {
  border: none !important;
  padding: 0px !important;
}

.wk-organizational-group-new-left {
  width: 307px;
  flex: 0 0 307px;
  box-sizing: border-box;
  height: 100%;
  background-color: var(--wk-bkcolor);
  padding: 12px;
  display: flex;
  flex-direction: column;
  color: var(--wk-textcolor)
}

.wk-organizational-group-new-left .group-new-left-main {
  flex: 1 1 auto;
  overflow-y: auto;
}

.wk-organizational-group-new-left .group-new-left-search {
  margin-bottom: 12px;
}


.wk-organizational-group-new-left .group-new-left-search .semi-input-wrapper{
  border: var(--wk-border-color);
  background-color: var(--wk-bkcolor);
  color: var(--wk-textcolor);
}
.wk-organizational-group-new-left .group-new-left-search .semi-input-wrapper input::-moz-placeholder{
  color: var(--wk-textcolor);
}
.wk-organizational-group-new-left .group-new-left-search .semi-input-wrapper input::placeholder{
  color: var(--wk-textcolor);
}



.wk-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input.semi-input-wrapper-focus {
  border: var(--wk-color-theme) solid 1px;
}
.wk-organizational-group-new-left
  .group-new-left-search
  .group-new-left-search-input.semi-input-wrapper-focus:active {
  border: var(--wk-color-theme) solid 1px;
}
/* 好友选择 */
.group-new-left-main .friend-opt .organization-name {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  color: var(--wk-textcolor);
  cursor: pointer;
}
.group-new-left-main .friend-opt .organization-name:hover {
  background-color: var(--semi-color-fill-0);
}
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--wk-textcolor);
  row-gap: 0;
}
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item .semi-checkbox-addon {
  color: var(--wk-textcolor);
}
.group-new-left-main .friend-opt .friend-opt-main .friend-opt-item:hover {
  background-color: var(--semi-color-fill-0);
}

/* 组织架构选择 */
.group-new-left-main .organizational-opt {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.group-new-left-main .organizational-opt-header {
  height: 44px;
  margin-bottom: 12px;
  border-radius: 4px;
}
.group-new-left-main .organizational-opt-header .wk-viewqueueheader {
  background-color: var(--semi-color-fill-0);
  height: 100%;
}
.group-new-left-main .organizational-opt-main {
  flex: 1 1 auto;
  overflow-y: auto;
}
.organizational-tree {
  width: 100%;
  height: 100%;
}
.organizational-tree .semi-input-wrapper-focus {
  border: var(--wk-color-theme) solid 1px;
}
.organizational-tree .semi-input-wrapper-focus:active {
  border: var(--wk-color-theme) solid 1px;
}
.organizational-tree .semi-tree-option-list {
  padding-top: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}
.organizational-tree .semi-tree-option-list li.semi-tree-option {
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 12px;
}

.semi-checkbox-inner-display {
  border: var(--wk-border-color);
}

.semi-checkbox:hover .semi-checkbox-inner-display {
  background: var(--semi-color-fill-0);
  box-shadow: inset 0 0 0 1px var(--wk-color-theme);
}

.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background: var(--wk-color-theme);
  border-color: var(--wk-color-theme);
  color: var(--semi-color-white);
}

.organizational-tree .semi-tree-option-list-block .department-icon {
  color: var(--wk-color-theme);
}
.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected
  .department-icon {
  color: #fff;
}

.organizational-tree .semi-tree-option-list-block .semi-tree-option-selected {
  background-color: var(--wk-color-theme);
  color: #fff;
}

.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected:hover {
  background-color: var(--wk-color-theme);
  color: #fff;
}

.organizational-tree
  .semi-tree-option-list-block
  .semi-tree-option-selected
  .semi-tree-option-expand-icon {
  color: #fff;
}

.wk-organizational-group-new-right {
  width: 437px;
  flex: 0 0 437px;
  box-sizing: border-box;
  height: 100%;
  background-color: var(--wk-bkcolor);
  padding: 12px;
  display: flex;
  flex-direction: column;
  color: var(--wk-textcolor);
}
.wk-organizational-group-new-right .organizational-group-new-right-title {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 设计 807:9783：右上角「已选N位」计数 */
.wk-organizational-group-new-right .organizational-group-new-right-count {
  font-size: 12px;
  font-weight: normal;
  color: #999;
}
.wk-organizational-group-new-right .organizational-group-new-right-body {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 12px 0;
}
.wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 20px;
  word-break: break-word;
  color: var(--semi-color-text-0);
}

.wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .user-info {
  display: flex;
  align-items: center;
  color: var(--wk-textcolor);
}

.wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .close-icon {
  display: flex;
  align-items: center;
}

.wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .close-icon
  .semi-icon {
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .close-icon
  .semi-icon:hover {
  background-color: rgb(112, 117, 121, 0.08);
}

.wk-organizational-group-new-right .organizational-group-new-right-footer {
  display: flex;
  justify-content: flex-end;
}

.wk-but-ok:hover {
  background-color: var(--wk-color-theme) !important;
}

/* 夜间模式（设计 949:12269「发起群聊」夜间稿）：左侧候选列 #2F2F30、
   右侧已选列 #1E1E1F、搜索框 #2F2F30 配品牌紫描边、正文 #DFE2E6。 */
body[theme-mode="dark"] .wk-organizational-group-new-left {
  background-color: #2f2f30;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-organizational-group-new-right {
  background-color: #1e1e1f;
  color: #dfe2e6;
}

body[theme-mode="dark"]
  .wk-organizational-group-new-left
  .group-new-left-search
  .semi-input-wrapper {
  border: 1px solid #9d26ff;
  background-color: #2f2f30;
  color: #dfe2e6;
}

body[theme-mode="dark"]
  .wk-organizational-group-new-left
  .group-new-left-search
  .semi-input-wrapper
  input::-moz-placeholder {
  color: #999999;
}

body[theme-mode="dark"]
  .wk-organizational-group-new-left
  .group-new-left-search
  .semi-input-wrapper
  input::placeholder {
  color: #999999;
}

body[theme-mode="dark"]
  .group-new-left-main
  .friend-opt
  .friend-opt-main
  .friend-opt-item,
body[theme-mode="dark"]
  .group-new-left-main
  .friend-opt
  .friend-opt-main
  .friend-opt-item
  .semi-checkbox-addon,
body[theme-mode="dark"] .group-new-left-main .friend-opt .organization-name,
body[theme-mode="dark"]
  .wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item,
body[theme-mode="dark"]
  .wk-organizational-group-new-right
  .organizational-group-new-right-body
  .opt-personnel-item
  .user-info {
  color: #dfe2e6;
}

body[theme-mode="dark"]
  .group-new-left-main
  .friend-opt
  .friend-opt-main
  .friend-opt-item:hover,
body[theme-mode="dark"] .group-new-left-main .friend-opt .organization-name:hover {
  background-color: #3a3a3b;
}

body[theme-mode="dark"]
  .wk-organizational-group-new-right
  .organizational-group-new-right-count {
  color: #999999;
}
.wk-contact-card-send-toolbar {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}

.wk-contact-card-send-modal .semi-modal {
  width: min(520px, calc(100vw - 32px));
}

.wk-contact-card-send-modal .semi-modal-body {
  padding: 0;
}

.wk-contact-card-send-content {
  min-height: 380px;
  display: flex;
  flex-direction: column;
}

.wk-contact-card-send-selector {
  min-height: 0;
  height: 340px;
}

.wk-contact-card-send-state {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--wk-textcolor);
}

.wk-contact-card-send-selected,
.wk-contact-card-send-hint {
  min-height: 48px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--wk-textcolor);
}

.wk-contact-card-send-selected img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-contact-card-send-hint {
  color: #999999;
}

.wk-contact-card-send-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body[theme-mode="dark"] .wk-contact-card-send-selected,
body[theme-mode="dark"] .wk-contact-card-send-hint {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.wk-user-labels-mask {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

/* 设计 807:11689「选择标签」浮层宽 287 */
.wk-user-labels-picker {
  width: 287px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #ffffff;
  background: var(--wk-chat-list-bkcolor, #ffffff);
  color: #333333;
  color: var(--wk-textcolor, #333333);
}

.wk-user-labels-search {
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 17px;
  background: #f4f5f7;
  background: var(--wk-color-secondary, #f4f5f7);
  color: inherit;
  font-size: 13px;
  outline: none;
}

.wk-user-labels-list {
  flex: 1 1;
  min-height: 60px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.wk-user-labels-option {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  font-size: 14px;
  cursor: pointer;
}

.wk-user-labels-create {
  height: 36px;
  border: 0;
  background: transparent;
  color: #6426ff;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.wk-user-labels-empty {
  padding: 12px 0;
  color: #999999;
  font-size: 13px;
}

.wk-user-labels-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.wk-user-labels-actions > button {
  min-width: 72px;
  height: 32px;
  border: 0;
  border-radius: 16px;
  background: #f4f5f7;
  background: var(--wk-color-secondary, #f4f5f7);
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}

.wk-user-labels-actions > button:disabled {
  opacity: 0.6;
  cursor: default;
}

.wk-user-labels-confirm {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%) !important;
  color: #ffffff !important;
}

/* 夜间模式（设计 949:13168「通讯录弹窗」夜间稿）：浮层面 #2F2F30、
   输入与按钮 #444444、遮罩 rgba(24,26,30,0.8)。 */
body[theme-mode="dark"] .wk-user-labels-mask {
  background: rgba(24, 26, 30, 0.8);
}

body[theme-mode="dark"] .wk-user-labels-picker {
  background: #2f2f30;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-user-labels-search,
body[theme-mode="dark"] .wk-user-labels-actions > button {
  background: #444444;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-user-labels-create {
  color: #bc6cff;
}


.wk-contacts {
    width: 100%;
    height: 100%;
    --wk-height-contacts-content-header:50px;
    color: var(--wk-textcolor);
}

.wk-contacts-content-header {
    width: 100%;
    padding: 0px 10px;
    background-color: var(--wk-bkcolor);
    border: var(--wk-border-color);
}

.wk-contacts-content {
    width: 100%;
    height: calc( 100% - var(--wk-height-navheader));
    overflow: auto;
    border-right: var(--wk-line);
    background-color: var(--wk-chat-list-bkcolor);
}

.wk-contacts-content-contacts {
    width: 100%;
}

.wk-contacts-section {

}

.wk-contacts-section-list {
    padding: 0px 5px;
    background-color: var(--wk-chat-list-bkcolor);
}


/* 设计 807:11891：字母分组头单独占一行（35px 高、上留白 10px），
   文案 13px #999999 并带该组人数，左侧与下方头像列对齐。 */
.wk-contacts-section-header {
    height: 35px;
    padding: 10px 15px 0px;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 400;
    line-height: 15px;
    color: #999999;
}

.wk-contacts-section-item {
    display: flex;
    align-items: center;
    padding: 15px;
    cursor: pointer;
}

body[theme-mode=dark] .wk-contacts-section-item  {
    background-color: var(--wk-color-secondary-2);
}

/* .wk-contacts-section-item:hover {
    background-color: var(--wk-color-hover);
    border-radius: 10px;
} */

.wk-contacts-section-item-selected {
    background: var(--wk-color-theme-switch);
    color: white;
    border-radius: 10px;
}

.wk-contacts-section-item-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}


.wk-contacts-section-item-name {
    margin-left: 15px;
}

body[theme-mode=dark] .wk-contacts-section-item-name {
    color: white;
}

.wk-contacts-content-fnc {
    width: 100%;
}

.wk-contacts-content-header .wk-search-box{

    background-color: var(--wk-bkcolor);
    width: 100%;
    border-radius: 4px;
}

.wk-contacts-content-header .wk-search-input .semi-input-wrapper{
    background-color: var(--wk-bkcolor);
    
}
.wk-contacts-content-header .wk-search-input .semi-input-wrapper input{
    color: var(--wk-textcolor);
}

/* 夜间模式（设计 949:13325「通讯录」夜间稿）：列表列面 #2F2F30、搜索框 #444444、
   正文 #DFE2E6、索引与次要 #999999、列间描边 #333333。 */
body[theme-mode=dark] .wk-contacts-content-header,
body[theme-mode=dark] .wk-contacts-content,
body[theme-mode=dark] .wk-contacts-section-list {
    background-color: #2f2f30;
}

body[theme-mode=dark] .wk-contacts-content {
    border-right: 1px solid #333333;
}

body[theme-mode=dark] .wk-contacts-content-header {
    border: none;
}

body[theme-mode=dark] .wk-contacts-content-header .wk-search-box,
body[theme-mode=dark] .wk-contacts-content-header .wk-search-input .semi-input-wrapper {
    background-color: #444444;
}

body[theme-mode=dark] .wk-contacts-section-item:not(.wk-contacts-section-item-selected) {
    background-color: transparent;
}

body[theme-mode=dark] .wk-contacts-section-header {
    color: #999999;
}

body[theme-mode=dark] .wk-contacts-section-item-name,
body[theme-mode=dark] .wk-contacts-content-header .wk-search-input .semi-input-wrapper input {
    color: #dfe2e6;
}
/* 通讯录右栏好友资料页（设计 807:11849 / 807:12113） */

.wk-contact-profile {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--wk-bkcolor);
    display: flex;
    justify-content: center;
}

/* 设计 807:12113：414px 卡片，内边距 24/20/34 */
.wk-contact-profile-card {
    width: 414px;
    margin-top: 124px;
    padding: 24px 20px 34px;
    height: -moz-fit-content;
    height: fit-content;
    background-color: #fff;
    background-color: var(--wk-color-secondary, #fff);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.wk-contact-profile-header {
    display: flex;
    align-items: flex-start;
}

.wk-contact-profile-avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    flex-shrink: 0;
}

/* 设计 807:12118：名称、昵称、聚声号三行间距 11px */
.wk-contact-profile-header-info {
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 11px;
    min-height: 74px;
}

.wk-contact-profile-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--wk-textcolor);
}

.wk-contact-profile-gender {
    width: 16px;
    height: 16px;
}

.wk-contact-profile-subtitle {
    font-size: 13px;
    color: #666;
    color: var(--wk-color-font-tip, #666);
}

.wk-contact-profile-more {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    color: var(--wk-textcolor);
    padding: 0 4px;
}

/* 设计 807:12114：信息行之间以及与头部之间统一 36px */
.wk-contact-profile-rows {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.wk-contact-profile-row {
    display: flex;
    align-items: center;
}

.wk-contact-profile-row-label {
    width: 88px;
    flex-shrink: 0;
    font-size: 15px;
    color: var(--wk-textcolor);
}

.wk-contact-profile-row-value {
    font-size: 15px;
    color: var(--wk-textcolor);
    border: none;
    background: transparent;
    padding: 0;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-contact-profile-remark-input {
    flex: 1 1;
}

/* 复用资料卡 section 行（朋友圈 / 添加标签）时向设计布局对齐 */
.wk-contact-profile-rows .wk-list-item {
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wk-contact-profile-rows .wk-list-item-title {
    width: 88px;
    flex-shrink: 0;
    font-size: 15px;
    color: var(--wk-textcolor);
}

/* 设计 807:12140：标签值紧接 88px 标签列左对齐，不是列表默认的右靠齐 */
.wk-contact-profile-rows .wk-list-item-subtitle {
    margin-left: 0;
    font-size: 15px;
    color: var(--wk-textcolor);
    text-align: left;
}

/* 设计 807:12131：朋友圈行整体 52px 高（40px 缩略图 + 上下 6px 留白） */
.wk-contact-profile-rows .wk-user-moments-entry {
    min-height: 52px;
}

/* 缩略图接在 88px 标签列之后左对齐，不跟随列表默认的右靠齐 */
.wk-contact-profile-rows .wk-user-moments-thumbnails {
    margin-left: 0;
    gap: 6px;
}

.wk-contact-profile-rows .wk-user-moments-thumbnails img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-contact-profile-actions {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 45px;
}

.wk-contact-profile-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.wk-contact-profile-action:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.wk-contact-profile-action img {
    width: 22px;
    height: 22px;
}

.wk-contact-profile-action span {
    font-size: 12px;
    color: #384D7B;
}

/* 夜间模式（设计 949:13325「通讯录」夜间稿）：资料页直接落在 #1E1E1F 底上，
   不再叠一层卡片；标签 #999999、取值 #DFE2E6、底部三个操作文案 #808EA6。 */
body[theme-mode=dark] .wk-contact-profile {
    background-color: #1e1e1f;
}

body[theme-mode=dark] .wk-contact-profile-card {
    background-color: transparent;
}

body[theme-mode=dark] .wk-contact-profile-name,
body[theme-mode=dark] .wk-contact-profile-more,
body[theme-mode=dark] .wk-contact-profile-row-value,
body[theme-mode=dark] .wk-contact-profile-rows .wk-list-item-subtitle {
    color: #dfe2e6;
}

body[theme-mode=dark] .wk-contact-profile-subtitle,
body[theme-mode=dark] .wk-contact-profile-row-label,
body[theme-mode=dark] .wk-contact-profile-rows .wk-list-item-title {
    color: #999999;
}

body[theme-mode=dark] .wk-contact-profile-action span {
    color: #808ea6;
}


#root {
  width: 100%;
  height: 100%;
}

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.wk-pending-feature-list {
  width: 100%;
  height: 100%;
  background: #ffffff;
  color: #333333;
}

.wk-pending-feature-list > header {
  height: 80px;
  padding: 0 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}

.wk-pending-feature-list > div {
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #a0a4ad;
}

.wk-pending-feature-list > div span {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #f4efff;
  color: #9557f4;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
}

.wk-pending-feature-list > div p {
  margin: 12px 0 0;
  font-size: 14px;
}

.wk-feature-coming-soon {
  width: 100%;
  height: 100%;
  background: #f4f5f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #3f4450;
}

.wk-feature-coming-soon-mark {
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, #f0e6ff 0%, #e9e3ff 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding-bottom: 20px;
}

.wk-feature-coming-soon-mark span {
  width: 6px;
  border: 3px solid #9257f5;
  border-radius: 3px;
}

.wk-feature-coming-soon-mark span:nth-child(1) { height: 18px; }
.wk-feature-coming-soon-mark span:nth-child(2) { height: 28px; }
.wk-feature-coming-soon-mark span:nth-child(3) { height: 22px; }

.wk-feature-coming-soon strong {
  font-size: 20px;
  line-height: 30px;
}

.wk-feature-coming-soon p {
  margin: 8px 0 0;
  color: #969baa;
  font-size: 14px;
  line-height: 22px;
}

:root {
  --sider-width: var(--wk-app-sider-width, 112px);
}

.wk-main-page {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.wk-main-page.is-data-center .wk-layout-content-left {
  width: 0;
  overflow: hidden;
}

.wk-main-page.is-data-center .wk-layout-content-right {
  width: 100%;
}

.wk-main {
  width: 100%;
  height: 100%;
  display: flex;
}

.wk-main-content {
  width: calc(100% - 112px);
  width: calc(100% - var(--sider-width));
  height: 100%;
  background-color: white;
}

.wk-main-sider {
  width: 112px;
  width: var(--wk-app-sider-width, 112px);
  height: 100%;
  background: #f8fbff;
  color: #999999;
  position: relative;
  transition: width 180ms ease;
  /* 底部「个人资料 + 账号菜单」是绝对定位块，导航列表必须按当前档位预留它的
     高度并允许滚动，否则窗口一矮就会被压住（1024×768 收起态曾重叠 67px）。 */
  --wk-main-sider-bottom-reserve: 174px;
}

.wk-main-sider.is-collapsed {
  --wk-main-sider-bottom-reserve: 234px;
}

.wk-main-sider-content {
  height: calc(100% - var(--wk-main-sider-bottom-reserve));
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.wk-main-sider-content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.wk-main-sider-brand {
  height: 91px;
  margin-bottom: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
}

/* 807:4962：70px 标记与 48px 字标直接相接，总宽 118px，中间没有间距。 */
.wk-main-sider-brand-lockup {
  width: 118px;
  height: 70px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.wk-main-sider-brand-mark {
  width: 70px;
  height: 70px;
  flex: none;
  display: block;
}
/* 1374:28307：Mic / Queue 两行 12px 粗体 #000000，行高与字号同为 12px。 */
.wk-main-sider-brand-wordmark {
  display: flex;
  flex-direction: column;
  color: #000000;
  font-family: "Alimama FangYuanTi VF", inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 0.4px;
}

.wk-main-sider-collapse {
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
}

.wk-main-sider-collapse-icon {
  width: 26px;
  height: 11px;
  display: block;
}
.wk-main-sider-collapse:hover {
  background: #eef2f8;
}

.wk-main-sider-item,
.wk-main-sider-setting-box {
  width: 100%;
  min-height: 76px;
  margin-bottom: 0;
  padding: 0 36px;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  cursor: pointer;
  flex: none;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

/* 807:4972：156×56 的选中胶囊在 195px 栏体内左 20、右 19。 */
.wk-main-sider-item::before,
.wk-main-sider-setting-box::before {
  position: absolute;
  top: 10px;
  right: 19px;
  bottom: 10px;
  left: 20px;
  z-index: 0;
  border-radius: 10px;
  background: transparent;
  content: "";
  transition: background 150ms ease;
}
.wk-main-sider-item:hover,
.wk-main-sider-setting-box:hover {
  color: #666666;
}
.wk-main-sider-item:hover::before,
.wk-main-sider-setting-box:hover::before {
  background: #eef2f8;
}
.wk-main-sider-item.selected,
.wk-main-sider-setting-box.selected {
  color: #ffffff;
}
.wk-main-sider-item.selected::before,
.wk-main-sider-setting-box.selected::before {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
}
.wk-main-sider-item > *,
.wk-main-sider-setting-box > * {
  position: relative;
  z-index: 1;
}
.wk-main-sider-item-icon {
  width: 30px;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: currentColor;
}
.wk-main-sider-item-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.68);
}
.wk-main-sider-item.selected .wk-main-sider-item-icon img {
  filter: grayscale(1) brightness(0) invert(1);
}
.wk-main-sider-item-icon img.wk-figma-sidebar-icon {
  filter: none;
}
/* 807:4975：展开态导航文案 18px，收起态在下面的 is-collapsed 分支降到 14px。 */
.wk-main-sider-item-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
}
.wk-main-sider-item-badge {
  position: absolute;
  top: 4px;
  right: 0;
  left: auto;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
  transform: translate(50%, -50%);
}

.wk-figma-sidebar-icon {
  width: 30px;
  height: 30px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
}
.wk-main-sider-setting-box {
  margin-top: 0;
  margin-bottom: 0;
}
.wk-main-sider-setting-badge {
  position: absolute;
  top: 7px;
  left: 39px;
  z-index: 1;
}
.wk-main-sider-setting {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wk-main-sider-setting span {
  font-size: 16px;
}
.wk-main-sider-setting .wk-figma-sidebar-icon {
  flex: none;
}
.wk-main-sider-setting img.wk-figma-sidebar-icon {
  filter: none;
}

/*
 * 807:5004 + 807:4997：资料行（58px）与账号菜单行（76px）之间只有 4px，
 * 菜单行本身是贴住栏体左右两边的整行，所以定位块不再左右内缩。
 */
.wk-main-sider-profile {
  height: 138px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.wk-main-sider-profile-identity {
  min-width: 0;
  height: 58px;
  flex: none;
  padding: 0 0 0 31px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wk-main-sider-profile-identity:focus-visible,
.wk-main-sider-account-trigger:focus-visible {
  border-radius: 10px;
  outline: 2px solid rgba(137, 110, 255, 0.72);
  outline-offset: 2px;
}
.wk-main-sider-profile-avatar {
  position: relative;
  display: block;
  flex: none;
  line-height: 0;
}
.wk-main-sider-profile-avatar > img {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.wk-main-sider-profile-identity > span:last-child {
  min-width: 0;
  color: #262626;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-main-sider-profile-badge {
  width: 9px;
  height: 9px;
  position: absolute;
  top: -3px;
  right: -3px;
  border: 2px solid #f8fbff;
  border-radius: 50%;
  background: #f93920;
}
/* 807:4997：账号菜单是与导航项同规格的整行，196×76，左内边距 36。 */
.wk-main-sider-account-trigger {
  width: 100%;
  min-height: 76px;
  margin-left: 0;
  flex: none;
  padding: 0 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #777777;
  cursor: pointer;
}
.wk-main-sider-account-trigger:hover,
.wk-main-sider-account-trigger[aria-expanded="true"] {
  background: #eeeafd;
  color: #6b10ff;
}
.wk-main-sider-account-trigger-icon {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}
/* 807:5000：「菜单」与导航项同为 18px #333333。 */
.wk-main-sider-account-trigger-label {
  color: #333333;
  font-size: 18px;
  line-height: 30px;
  white-space: nowrap;
}

.wk-main-account-popover.semi-popover {
  padding: 0;
  border: 1px solid rgba(38, 38, 38, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(32, 24, 56, 0.18);
  overflow: hidden;
}
.wk-main-account-popover .semi-popover-content {
  padding: 0;
}
/* 949:18379：154 宽的四项菜单，内边距 10/12/8，每行 47 高、15px 文案。 */
.wk-main-account-menu {
  width: 154px;
  padding: 10px 12px 8px;
  background: #ffffff;
  color: #262626;
}
.wk-main-account-menu-actions > button {
  width: 100%;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.wk-main-account-menu-actions {
  padding: 0;
}
/* 949:18384：高亮行比文字列宽 16px，左右各溢出容器内边距 8px。 */
.wk-main-account-menu-actions > button {
  min-height: 47px;
  margin: 0 -8px;
  width: calc(100% + 16px);
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 15px;
  line-height: 15px;
}
.wk-main-account-menu-actions > button:hover {
  background: #f5f3ff;
}
.wk-main-account-menu-actions > button:focus-visible {
  outline: 2px solid rgba(137, 110, 255, 0.72);
  outline-offset: -2px;
}
.wk-main-account-menu-actions > button.is-danger {
  color: #e5484d;
}
.wk-main-account-menu-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font-size: inherit;
}
.wk-main-account-version-badge {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f93920;
}

.wk-main-sider.is-collapsed .wk-main-sider-brand {
  height: 91px;
  margin-bottom: 0;
  padding: 0;
  justify-content: center;
}
.wk-main-sider.is-collapsed .wk-main-sider-item,
.wk-main-sider.is-collapsed .wk-main-sider-setting-box {
  width: 112px;
  min-height: 76px;
  padding: 0;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.wk-main-sider.is-collapsed .wk-main-sider-item-icon {
  width: 30px;
  height: 30px;
}
.wk-main-sider.is-collapsed .wk-main-sider-item-icon img {
  width: 30px;
  height: 30px;
}
/*
 * I807:7264;807:6362：选中项的图标+文案整体比未选中低 2px（胶囊内 10/6，
 * 未选中项则是 8/8 的居中）。这 2px 只属于选中态，不能加在整列上。
 */
.wk-main-sider.is-collapsed
  .wk-main-sider-item.selected
  .wk-main-sider-item-icon,
.wk-main-sider.is-collapsed
  .wk-main-sider-item.selected
  .wk-main-sider-item-title,
.wk-main-sider.is-collapsed
  .wk-main-sider-setting-box.selected
  .wk-main-sider-setting {
  transform: translateY(2px);
}
.wk-main-sider.is-collapsed .wk-main-sider-item-title {
  width: 109px;
  max-width: 109px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}
/*
 * I807:7264;807:6361：收起态选中胶囊是 101×64、圆角 10 的渐变块，
 * 在 112px 栏体里上下各留 6px，左右靠 auto 外边距居中（设计上是 5/6）。
 */
.wk-main-sider.is-collapsed .wk-main-sider-item::before,
.wk-main-sider.is-collapsed .wk-main-sider-setting-box::before {
  inset: 6px 0;
  width: 101px;
  margin: 0 auto;
  border-radius: 10px;
}
.wk-main-sider.is-collapsed .wk-main-sider-setting-box {
  margin-bottom: 0;
}
.wk-main-sider.is-collapsed .wk-main-sider-setting {
  width: 109px;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.wk-main-sider.is-collapsed .wk-main-sider-setting > span:last-child {
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}
.wk-main-sider.is-collapsed .wk-main-sider-setting-badge {
  top: 8px;
  left: 68px;
}
.wk-main-sider.is-collapsed .wk-main-sider-profile {
  height: 152px;
  left: 24px;
  right: 24px;
  bottom: 30px;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
.wk-main-sider.is-collapsed .wk-main-sider-profile-identity {
  width: 64px;
  height: 98px;
  flex: none;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}
/* 807:6785：收起态资料块 64×98 = 58 头像 + 4 间距 + 36 名称。 */
.wk-main-sider.is-collapsed .wk-main-sider-profile-avatar > img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
}
.wk-main-sider.is-collapsed
  .wk-main-sider-profile-identity
  > span:last-child {
  width: 64px;
  max-width: 64px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #262626;
  font-size: 16px;
  line-height: 36px;
  text-align: center;
}
.wk-main-sider.is-collapsed .wk-main-sider-account-trigger {
  width: 24px;
  height: 24px;
  min-height: 24px;
  position: static;
  margin-left: 4px;
  padding: 0;
  justify-content: center;
}
.wk-main-sider.is-collapsed .wk-main-sider-account-trigger-label {
  display: none;
}

@media screen and (max-height: 900px) {
  .wk-main-sider {
    --wk-main-sider-bottom-reserve: 154px;
  }

  .wk-main-sider.is-collapsed {
    --wk-main-sider-bottom-reserve: 180px;
  }

  .wk-main-sider.is-collapsed .wk-main-sider-brand {
    height: 67px;
  }

  .wk-main-sider.is-collapsed .wk-main-sider-item,
  .wk-main-sider.is-collapsed .wk-main-sider-setting-box {
    min-height: 64px;
  }

  .wk-main-sider.is-collapsed .wk-main-sider-item::before,
  .wk-main-sider.is-collapsed .wk-main-sider-setting-box::before {
    inset: 5px 0;
    width: 101px;
  }

  /* 1024×768：收起态的 152px 个人区会压到「我的钱包」，按同比例收到 116px。 */
  .wk-main-sider.is-collapsed .wk-main-sider-profile {
    height: 116px;
    bottom: 14px;
    gap: 10px;
  }

  .wk-main-sider.is-collapsed .wk-main-sider-profile-identity {
    height: 82px;
  }

  .wk-main-sider.is-collapsed .wk-main-sider-profile-avatar > img {
    width: 48px;
    height: 48px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-brand {
    height: 79px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-item,
  .wk-main-sider.is-expanded .wk-main-sider-setting-box {
    min-height: 64px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-item::before,
  .wk-main-sider.is-expanded .wk-main-sider-setting-box::before {
    top: 6px;
    bottom: 6px;
  }

  /* 48 头像行 + 4 间距 + 56 菜单行 = 108，仍在 154px 预留区之内。 */
  .wk-main-sider.is-expanded .wk-main-sider-profile {
    height: 108px;
    bottom: 10px;
    gap: 4px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-profile-identity {
    height: 48px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-profile-avatar > img {
    width: 48px;
    height: 48px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-account-trigger {
    min-height: 56px;
  }
}

@media screen and (max-height: 760px) {
  .wk-main-sider {
    --wk-main-sider-bottom-reserve: 110px;
  }

  .wk-main-sider.is-collapsed {
    --wk-main-sider-bottom-reserve: 146px;
  }

  .wk-main-sider.is-collapsed .wk-main-sider-brand {
    height: 56px;
  }

  .wk-main-sider.is-collapsed .wk-main-sider-item,
  .wk-main-sider.is-collapsed .wk-main-sider-setting-box {
    min-height: 56px;
  }

  .wk-main-sider.is-collapsed .wk-main-sider-item-title,
  .wk-main-sider.is-collapsed .wk-main-sider-setting > span:last-child {
    height: 20px;
    font-size: 12px;
    line-height: 20px;
  }

  .wk-main-sider.is-collapsed .wk-main-sider-profile {
    height: 84px;
    bottom: 10px;
    gap: 24px;
  }

  .wk-main-sider.is-collapsed .wk-main-sider-profile-identity {
    height: 36px;
    flex-direction: column;
    justify-content: center;
  }

  .wk-main-sider.is-collapsed .wk-main-sider-profile-avatar > img {
    width: 36px;
    height: 36px;
  }

  .wk-main-sider.is-collapsed
    .wk-main-sider-profile-identity
    > span:last-child {
    display: none;
  }

  .wk-main-sider.is-expanded .wk-main-sider-brand {
    height: 64px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-item,
  .wk-main-sider.is-expanded .wk-main-sider-setting-box {
    min-height: 56px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-item::before,
  .wk-main-sider.is-expanded .wk-main-sider-setting-box::before {
    top: 4px;
    bottom: 4px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-profile {
    height: 50px;
    bottom: 10px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-profile-identity {
    height: 50px;
    flex: 1 1;
    padding-left: 20px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-profile-avatar > img {
    width: 46px;
    height: 46px;
  }

  .wk-main-sider.is-expanded .wk-main-sider-account-trigger {
    width: 28px;
    height: 28px;
    min-height: 28px;
    margin-left: 0;
    padding: 0;
    justify-content: center;
  }

  .wk-main-sider.is-expanded .wk-main-sider-account-trigger-label {
    display: none;
  }
}

.wk-versioncheckview-updateinfo {
  font-weight: 500;
}
.wk-versioncheckview-updateinfo li {
  margin-bottom: 10px;
}
.wk-versioncheckview-tip {
  border-top: var(--wk-line);
}
.wk-versioncheckview-tip-title {
  margin: 15px 0;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}
.wk-versioncheckview-tip-content {
  margin-bottom: 40px;
}
.wk-versioncheckview-tip-content li {
  margin-bottom: 10px;
}
.wk-main-sider-modal .semi-modal-content {
  border: none !important;
  padding: 0 !important;
}
.wk-main-sider-modal .semi-modal-close {
  display: none;
}
.wk-main-sider-modal .semi-modal-body-wrapper {
  margin: 0;
}
/* 个人信息弹层按设计 807:9847 只呈现 343px 资料卡，不再是整页表单 */
.wk-main-sider-meinfo .semi-modal-content {
  padding: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}
.wk-main-sider-meinfo .semi-modal-body {
  padding: 0;
  max-height: none;
}

/*
 * 夜间模式导航栏对照设计「深色系Icon 图标、SideBar 导航栏组件-PC端」949:18342 与
 * 「设置入口」949:18192：栏体 #181A1E，未选中图标/文案 #DFE2E6 80%，
 * 选中态沿用与亮色一致的 #9D26FF → #6426FF 渐变胶囊。
 * 设计里栏体是 80% + 背景模糊的玻璃层，但 body 在暗色下没有铺底色，
 * 半透明会透出白底，因此这里取同色不透明值。
 */
body[theme-mode="dark"] .wk-main-sider {
  background: #181a1e;
  color: #dfe2e6;
}
body[theme-mode="dark"] .wk-main-sider-brand-wordmark {
  color: #ffffff;
}
body[theme-mode="dark"]
  .wk-main-sider-profile-identity
  > span:last-child,
body[theme-mode="dark"]
  .wk-main-sider.is-collapsed
  .wk-main-sider-profile-identity
  > span:last-child {
  color: #dfe2e6;
}
body[theme-mode="dark"] .wk-main-sider-profile-badge {
  border-color: #181a1e;
}
body[theme-mode="dark"] .wk-main-account-popover.semi-popover {
  border-color: rgba(223, 226, 230, 0.05);
  border-radius: 11px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
body[theme-mode="dark"] .wk-main-account-menu {
  background: #262628;
  color: #dfe2e6;
}
body[theme-mode="dark"] .wk-main-account-menu-meta {
  color: inherit;
}
body[theme-mode="dark"] .wk-main-account-menu-actions {
  border-top-color: rgba(223, 226, 230, 0.05);
}
/* 949:18384：账号菜单的当前项/悬停项是 6px 圆角的渐变行，文字转白 */
body[theme-mode="dark"] .wk-main-account-menu-actions > button:hover,
body[theme-mode="dark"] .wk-main-account-menu-actions > button:focus-visible {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}
body[theme-mode="dark"]
  .wk-main-account-menu-actions
  > button:hover
  .wk-main-account-menu-meta {
  color: inherit;
}
/* 949:18387：深色稿的「退出登录」与其它菜单项同色，不再走亮色的告警红 */
body[theme-mode="dark"] .wk-main-account-menu-actions > button.is-danger {
  color: #dfe2e6;
}
body[theme-mode="dark"]
  .wk-main-account-menu-actions
  > button.is-danger:hover {
  color: #ffffff;
}
body[theme-mode="dark"] .wk-main-sider-account-trigger {
  color: #dfe2e6;
}
body[theme-mode="dark"] .wk-main-sider-account-trigger-label {
  color: #dfe2e6;
}
body[theme-mode="dark"] .wk-main-sider-account-trigger-icon {
  filter: brightness(0) invert(0.9);
  opacity: 0.8;
}
body[theme-mode="dark"] .wk-main-sider-account-trigger:hover,
body[theme-mode="dark"]
  .wk-main-sider-account-trigger[aria-expanded="true"] {
  background: rgba(223, 226, 230, 0.08);
  color: #c98cff;
}
body[theme-mode="dark"] .wk-main-sider-account-trigger:hover
  .wk-main-sider-account-trigger-icon,
body[theme-mode="dark"]
  .wk-main-sider-account-trigger[aria-expanded="true"]
  .wk-main-sider-account-trigger-icon {
  opacity: 1;
}
/* 949:18344：收缩/展开是两条 #DFE2E6 的 2px 横线 */
body[theme-mode="dark"] .wk-main-sider-collapse-icon {
  filter: brightness(0) invert(0.9);
  opacity: 0.9;
}
body[theme-mode="dark"] .wk-main-sider-collapse:hover {
  background: rgba(223, 226, 230, 0.08);
}
/*
 * 亮色把未选中图标压成灰度深色；深色稿要求 #DFE2E6 80%，
 * 所以整体反相后按设计的 80% 不透明度收一档。
 */
body[theme-mode="dark"] .wk-main-sider-item-icon img,
body[theme-mode="dark"] .wk-main-sider-item-icon img.wk-figma-sidebar-icon,
body[theme-mode="dark"] .wk-main-sider-setting img.wk-figma-sidebar-icon {
  filter: brightness(0) invert(0.9);
  opacity: 0.8;
}
body[theme-mode="dark"]
  .wk-main-sider-item.selected
  .wk-main-sider-item-icon
  img,
body[theme-mode="dark"]
  .wk-main-sider-setting-box.selected
  .wk-main-sider-setting
  img {
  filter: brightness(0) invert(1);
  opacity: 1;
}
/*
 * 949:19337 / 949:18821：未选中导航文案与图标一样是 #DFE2E6 的 80%，
 * 选中项才是实心白，所以这里只压未选中项的标题。
 */
body[theme-mode="dark"]
  .wk-main-sider-item:not(.selected)
  .wk-main-sider-item-title,
body[theme-mode="dark"]
  .wk-main-sider-setting-box:not(.selected)
  .wk-main-sider-setting
  > span:last-child {
  color: rgba(223, 226, 230, 0.8);
}
body[theme-mode="dark"] .wk-main-sider-item:hover,
body[theme-mode="dark"] .wk-main-sider-setting-box:hover {
  background: transparent;
  color: #dfe2e6;
}
body[theme-mode="dark"] .wk-main-sider-item:hover::before,
body[theme-mode="dark"] .wk-main-sider-setting-box:hover::before {
  background: rgba(223, 226, 230, 0.08);
}
body[theme-mode="dark"] .wk-main-sider-item.selected,
body[theme-mode="dark"] .wk-main-sider-setting-box.selected {
  color: #ffffff;
}
body[theme-mode="dark"] .wk-main-sider-item.selected:hover::before,
body[theme-mode="dark"] .wk-main-sider-setting-box.selected:hover::before {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
}

.wk-hall-data-center-menu-icon {
  width: 30px;
  height: 30px;
  color: currentColor;
}

.wk-hall-data-center-sidebar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eceef3;
  background: #fff;
  color: #282a30;
}

.wk-hall-data-center-sidebar > header {
  min-height: 80px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #eef0f4;
}

.wk-hall-data-center-sidebar > header > svg {
  width: 34px;
  height: 34px;
  color: #9747ff;
}

.wk-hall-data-center-sidebar > header > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wk-hall-data-center-sidebar > header strong {
  font-size: 18px;
}

.wk-hall-data-center-sidebar > header span {
  color: #979ba4;
  font-size: 12px;
}

.wk-hall-data-center-scope {
  margin: 14px 16px 8px;
  padding: 3px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 8px;
  background: #f3f4f8;
}

.wk-hall-data-center-scope button {
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8d919a;
  cursor: pointer;
  font-size: 14px;
}

.wk-hall-data-center-scope button.selected {
  background: #fff;
  color: #9747ff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(40, 43, 55, 0.08);
}

.wk-hall-data-center-search {
  height: 40px;
  margin: 4px 16px 12px;
  padding: 0 6px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ebecef;
  border-radius: 4px;
  background: #fff;
}

.wk-hall-data-center-search > svg,
.wk-hall-data-center-search > img {
  width: 16px;
  height: 16px;
  flex: none;
  color: #9da1aa;
}

.wk-hall-data-center-search input {
  min-width: 0;
  flex: 1 1;
  border: 0;
  outline: none;
  background: transparent;
  color: #33363d;
}

.wk-hall-data-center-search button {
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: #9747ff;
  color: #fff;
  cursor: pointer;
}

.wk-hall-data-center-groups {
  min-height: 0;
  flex: 1 1;
  overflow-y: auto;
}

.wk-hall-data-center-group {
  width: 100%;
  min-height: 72px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-bottom: 1px solid #f1f2f5;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.wk-hall-data-center-group:hover,
.wk-hall-data-center-group.selected {
  background: #f8f3ff;
}

.wk-hall-data-center-group img {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  background: #ececf0;
}

.wk-hall-data-center-group > span {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wk-hall-data-center-group strong,
.wk-hall-data-center-group small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-data-center-group strong {
  font-size: 14px;
}

.wk-hall-data-center-group small {
  color: #9b9fa7;
}

.wk-hall-data-center-group em {
  padding: 3px 7px;
  border-radius: 4px;
  background: #f1ebff;
  color: #8242d8;
  font-size: 11px;
  font-style: normal;
}

.wk-hall-data-center-state {
  min-height: 180px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #979ba4;
  text-align: center;
}

.wk-hall-data-center-state.error {
  color: #d94b4b;
}

.wk-hall-data-center-state button,
.wk-hall-data-center-more {
  padding: 7px 14px;
  border: 1px solid #dedfe5;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
}

.wk-hall-data-center-more {
  display: block;
  margin: 14px auto;
  color: #7e44cf;
}

.wk-hall-data-center-main {
  width: 100%;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f6f7fa;
  color: #272a31;
  font-family: var(--wk-font-family);
}

.wk-hall-data-center-main.is-empty {
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #9a9ea7;
}

.wk-hall-data-center-main.is-empty strong {
  color: #575b64;
  font-size: 18px;
}

.wk-hall-data-center-empty-mark {
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: #eee8fb;
  color: #9349f2;
}

.wk-hall-data-center-empty-mark svg {
  width: 40px;
  height: 40px;
}

.wk-hall-data-center-main-header {
  height: 80px;
  min-height: 80px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 0;
  background: #fff;
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.05);
}

.wk-hall-data-center-header-title {
  grid-column: 1;
  justify-self: start;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  line-height: 15px;
}

.wk-hall-data-center-header-scope {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wk-hall-data-center-header-scope button {
  width: 101px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #333;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-data-center-header-scope button.selected {
  background: rgba(157, 38, 255, 0.1);
  color: #9d26ff;
}

.wk-hall-data-center-header-scope button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.wk-hall-data-center-main-header > .wk-hall-data-center-icon-button {
  grid-column: 3;
  justify-self: end;
  border-color: rgba(126, 134, 142, 0.2);
}

.wk-hall-data-center-main-header > .wk-hall-data-center-icon-button img {
  width: 16px;
  height: 16px;
}

.wk-hall-data-center-scroll {
  min-height: 0;
  flex: 1 1;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

.wk-hall-data-center-hall-row {
  height: 60px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 26px;
  border: 0;
  border-radius: 10px;
  background: #fff;
}

.wk-hall-data-center-hall-field {
  width: 348px;
  height: 40px;
  flex: none;
  display: grid;
  grid-template-columns: 42px 296px;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  color: #171a1d;
  font-size: 14px;
  line-height: 22px;
}

.wk-hall-data-center-hall-picker {
  width: 296px;
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(126, 134, 142, 0.2);
  border-radius: 4px;
  background: #fff;
  color: #292c32;
  text-align: left;
  cursor: pointer;
}

.wk-hall-data-center-hall-picker strong {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.wk-hall-data-center-hall-picker > img {
  width: 10px;
  height: 10px;
  margin-left: auto;
}

.wk-hall-data-center-global-search {
  width: 366px;
  height: 40px;
  padding: 0 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(126, 134, 142, 0.2);
  border-radius: 4px;
  background: #fff;
  color: #a1a4ab;
}

.wk-hall-data-center-global-search input {
  min-width: 0;
  flex: 1 1;
  border: 0;
  outline: none;
  background: transparent;
  color: #33363c;
  font-size: 14px;
  line-height: 22px;
}

.wk-hall-data-center-global-search input::-moz-placeholder {
  color: rgba(153, 153, 153, 0.8);
  opacity: 1;
}

.wk-hall-data-center-global-search input::placeholder {
  color: rgba(153, 153, 153, 0.8);
  opacity: 1;
}

.wk-hall-data-center-global-search button {
  width: 40px;
  height: 40px;
  margin: -1px -1px -1px 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f2f3f4;
  border-radius: 0 4px 4px 0;
  background: #f9f9f9;
  color: #333;
  cursor: pointer;
}

.wk-hall-data-center-global-search button img {
  width: 16px;
  height: 16px;
}

.wk-hall-data-center-overview {
  position: relative;
  height: 182px;
  margin-top: 14px;
  padding: 16px 20px;
  box-sizing: border-box;
  border: 0;
  border-radius: 10px;
  background: #fff;
}

.wk-hall-data-center-overview > header {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wk-hall-data-center-overview > header > strong {
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
}

.wk-hall-data-center-presets {
  width: 252px;
  height: 32px;
  padding: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  border: 1px solid #e1e4ed;
  border-radius: 6px;
  background: #fff;
}

.wk-hall-data-center-main[data-scope="all"] .wk-hall-data-center-presets {
  background: #f1f3f7;
}

.wk-hall-data-center-presets button {
  width: 44px;
  min-width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #191f3c;
  cursor: pointer;
  font-family: var(--wk-font-data-latin);
  font-size: 14px;
  line-height: 20px;
}

.wk-hall-data-center-presets button.selected {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #fff;
  box-shadow: 0 1px 4px rgba(78, 159, 255, 0.2);
}

.wk-hall-data-center-cards {
  margin-top: 10px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wk-hall-data-center-cards::-webkit-scrollbar {
  display: none;
}

.wk-hall-data-center-cards article {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc((100% - 42px) / 4);
  min-width: 301px;
  height: 108px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 20px 32px;
  grid-row-gap: 8px;
  row-gap: 8px;
  align-items: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  background: #e6f1fd;
  scroll-snap-align: start;
}

.wk-hall-data-center-overview-arrow {
  position: absolute;
  top: 93px;
  z-index: 2;
  width: 28px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgba(51, 51, 51, 0.4);
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 160ms ease, background-color 160ms ease;
}

.wk-hall-data-center-overview-arrow.left {
  left: 0;
  border-radius: 0 20px 20px 0;
}

.wk-hall-data-center-overview-arrow.right {
  right: 0;
  border-radius: 20px 0 0 20px;
}

.wk-hall-data-center-overview-arrow img {
  width: 12px;
  height: 12px;
  filter: brightness(0) invert(1);
}

.wk-hall-data-center-overview-arrow.left img {
  transform: rotate(180deg);
}

.wk-hall-data-center-overview-arrow:hover:not(:disabled) {
  background: rgba(51, 51, 51, 0.56);
}

.wk-hall-data-center-overview-arrow:focus-visible {
  outline: 2px solid #6b10ff;
  outline-offset: 2px;
}

.wk-hall-data-center-overview-arrow:disabled {
  cursor: default;
}

.wk-hall-data-center-cards article[data-tone="1"] {
  background: #edeefc;
}

.wk-hall-data-center-cards article[data-tone="2"] {
  background: #e6f1fd;
}

.wk-hall-data-center-cards article[data-tone="3"] {
  background: #edeefc;
}

.wk-hall-data-center-cards article > span {
  grid-column: 1 / -1;
  color: #000;
  font-size: 14px;
  line-height: 20px;
}

.wk-hall-data-center-cards article > strong {
  align-self: end;
  color: #000;
  font-family: var(--wk-font-data-latin);
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

/* 807:12666「较昨日 +11.01% ↗」：文案 + 8px 间距 + 16px 趋势箭头。 */
.wk-hall-data-center-cards article > small {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000;
  font-size: 12px;
  line-height: 16px;
}

.wk-hall-data-center-trend-arrow {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
}

.wk-hall-data-center-cards article > small.up {
  color: #000;
}

.wk-hall-data-center-cards article > small.down {
  color: #000;
}

.wk-hall-data-center-cards article > small.unavailable {
  color: #8f949c;
}

.wk-hall-data-center-panel {
  margin-top: 11px;
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.wk-hall-data-center-main[data-scope="all"] .wk-hall-data-center-panel {
  margin-top: 12px;
}

.wk-hall-data-center-view-tabs {
  height: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 50px;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #fff;
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.05);
}

.wk-hall-data-center-view-tabs button {
  width: 120px;
  min-width: 120px;
  height: 32px;
  padding: 0;
  position: relative;
  border: 0;
  background: transparent;
  color: rgba(23, 26, 29, 0.6);
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  line-height: 12px;
}

.wk-hall-data-center-view-tabs button.selected {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.wk-hall-data-center-view-tabs button.selected::after {
  width: 13px;
  height: 2px;
  position: absolute;
  right: auto;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  content: "";
}

.wk-hall-data-center-toolbar {
  height: 60px;
  min-height: 60px;
  padding: 10px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 0;
  border-radius: 0 0 10px 10px;
  background: #fff;
}

.wk-hall-data-center-filter-field {
  height: 40px;
  flex: none;
  display: grid;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  color: #171a1d;
  font-size: 14px;
  line-height: 22px;
}

.wk-hall-data-center-filter-field.time-filter {
  width: 678px;
  margin-right: 26px;
  grid-template-columns: 56px 612px;
}

.wk-hall-data-center-filter-field.host-filter {
  width: auto;
  min-width: 284px;
  flex: 1 1 284px;
  grid-template-columns: 70px minmax(204px, 1fr);
}

.wk-hall-data-center-range {
  width: 612px;
  height: 40px;
  min-width: 612px;
  padding: 0 10px 0 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15px minmax(0, 1fr) 16px;
  align-items: center;
  grid-column-gap: 10px;
  -moz-column-gap: 10px;
       column-gap: 10px;
  border: 1px solid rgba(126, 134, 142, 0.2);
  border-radius: 4px;
  background: #fff;
  color: #333;
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.wk-hall-data-center-range > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-data-center-range > img {
  width: 16px;
  height: 16px;
  flex: none;
}

.wk-hall-data-center-range em {
  color: #a2a5ac;
  font-style: normal;
}

.wk-hall-data-center-toolbar .host-picker {
  width: 100%;
  min-width: 0;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  border: 1px solid #e3e5e9;
  border-radius: 4px;
  background: #fff;
  color: #333;
  cursor: pointer;
  text-align: left;
}

.wk-hall-data-center-toolbar .host-picker span {
  flex: none;
  color: #333;
  font-size: 14px;
}

.wk-hall-data-center-toolbar .host-picker em {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  color: #999;
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-data-center-toolbar .host-picker img {
  width: 10px;
  height: 10px;
  flex: none;
}

.wk-hall-data-center-toolbar .query,
.wk-hall-data-center-toolbar .reset {
  width: 65px;
  height: 40px;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  line-height: 22px;
}

.wk-hall-data-center-toolbar-actions {
  width: auto;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wk-hall-data-center-toolbar-actions .wk-hall-data-center-icon-button img {
  width: 20px;
  height: 20px;
}

.wk-hall-data-center-toolbar-actions
  .wk-hall-data-center-icon-button[aria-label="新增数据统计"]
  img {
  width: 16px;
  height: 16px;
}

.wk-hall-data-center-toolbar .query {
  border: 0;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #fff;
  line-height: 12px;
}

.wk-hall-data-center-toolbar .reset {
  border: 1px solid rgba(126, 134, 142, 0.2);
  background: #fff;
  color: #333;
}

.wk-hall-data-center-icon-button {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(126, 134, 142, 0.2);
  border-radius: 4px;
  background: #fff;
  color: #5d6169;
  cursor: pointer;
}

.wk-hall-data-center-icon-button:hover {
  border-color: #c9a7f8;
  color: #6b10ff;
}

.wk-hall-data-center-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.2;
}

.wk-hall-data-center-icon-button i {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  position: absolute;
  top: -6px;
  right: -6px;
  border-radius: 8px;
  background: #6b10ff;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  line-height: 16px;
}

.wk-hall-data-center-selected-metrics {
  min-height: 42px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #f0f1f3;
  color: #8c9098;
  font-size: 12px;
}

.wk-hall-data-center-selected-metrics button {
  height: 26px;
  padding: 0 8px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 3px;
  background: #f3ebff;
  color: #7c35d7;
  cursor: pointer;
  font-size: 12px;
}

.wk-hall-data-center-selected-metrics button svg {
  width: 12px;
  height: 12px;
}

.wk-hall-data-center-error {
  margin: 12px 20px 0;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  background: #fff0f0;
  color: #c33f3f;
}

.wk-hall-data-center-error button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.wk-hall-data-center-content {
  min-height: 0;
  padding-top: 15px;
  overflow: visible;
}

.wk-hall-data-center-main[data-scope="all"] .wk-hall-data-center-content {
  padding-top: 14px;
}

.wk-hall-data-center-loading {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fff;
  color: #999da6;
}

.wk-hall-data-center-table-wrap {
  min-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 10px 10px 0 0;
  background: #fff;
}

.wk-hall-data-center-table-wrap table {
  width: 100%;
  min-width: 1288px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.wk-hall-data-center-table-wrap col.member-column {
  width: 174px;
}

.wk-hall-data-center-table-wrap col.period-column {
  width: 94px;
}

.wk-hall-data-center-table-wrap col.detail-metric-column {
  width: 147.5px;
}

.wk-hall-data-center-table-wrap col.summary-metric-column {
  width: 185.5px;
}

.wk-hall-data-center-table-wrap col.operation-column {
  width: 135px;
}

.wk-hall-data-center-table-wrap th,
.wk-hall-data-center-table-wrap td {
  border-bottom: 1px solid #f0f1f3;
  text-align: left;
  white-space: nowrap;
}

.wk-hall-data-center-table-wrap th {
  height: 51px;
  padding: 8px 20px;
}

.wk-hall-data-center-table-wrap td {
  height: 56px;
  padding: 15px 20px 16px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.wk-hall-data-center-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fafbfc;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  line-height: 16px;
}

.wk-hall-data-center-table-wrap tbody tr:hover {
  background: #f5f5f5;
}

.wk-hall-data-center-table-wrap th:first-child,
.wk-hall-data-center-table-wrap td:first-child {
  text-align: left;
}

.wk-hall-data-center-table-wrap .member {
  width: 174px;
}

.wk-hall-data-center-table-wrap td.wk-hall-data-center-row-actions {
  padding: 15px 20px 16px;
}

.wk-hall-data-center-table-wrap td.wk-hall-data-center-row-actions > div {
  display: flex;
  align-items: center;
  gap: 25px;
  text-align: left;
}

.wk-hall-data-center-row-actions button {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #6b10ff;
  cursor: pointer;
  vertical-align: middle;
}

.wk-hall-data-center-row-actions button + button {
  margin-left: 0;
}

.wk-hall-data-center-row-actions button.manual-mutation {
  width: 16px;
  height: 16px;
}

.wk-hall-data-center-row-actions button:disabled {
  cursor: not-allowed;
}

.wk-hall-data-center-row-actions img {
  display: block;
}

.wk-hall-data-center-row-actions img.edit-icon {
  width: 16px;
  height: 16px;
}

.wk-hall-data-center-row-actions img.delete-icon {
  width: 16px;
  height: 16px;
  opacity: 0.55;
}

.wk-hall-data-center-table-wrap tfoot th,
.wk-hall-data-center-table-wrap tfoot td {
  height: 52px;
  border-top: 1px solid #e4d5fb;
  background: #faf7ff;
  color: #4b286f;
  font-weight: 600;
}

.wk-hall-data-center-member-content {
  display: flex;
  align-items: center;
  gap: 9px;
}

.wk-hall-data-center-member-content > img {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: #ececf0;
}

.wk-hall-data-center-member-content > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.wk-hall-data-center-member-content strong {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.wk-hall-data-center-member-content small {
  color: #a0a3aa;
}

.wk-hall-data-center-period {
  min-width: 46px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 2px;
  background: rgba(157, 38, 255, 0.06);
  color: #9d26ff;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 12px;
}

.wk-hall-data-center-pagination {
  min-height: 80px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 0;
  background: #fff;
  color: #171a1d;
  font-size: 14px;
  line-height: 22px;
  border-radius: 0 0 10px 10px;
}

.wk-hall-data-center-pagination > div {
  display: flex;
  gap: 14px;
}

.wk-hall-data-center-pagination button {
  min-width: 40px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(126, 134, 142, 0.2);
  border-radius: 4px;
  background: #fff;
  color: #333;
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
}

.wk-hall-data-center-pagination
  > div
  button:not(:first-child):not(:last-child) {
  line-height: 12px;
}

.wk-hall-data-center-pagination button.selected {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #fff;
}

.wk-hall-data-center-pagination button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.wk-hall-data-center-dialog-mask {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(25, 27, 33, 0.38);
}

.wk-hall-data-center-dialog {
  width: min(433px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  color: #282b31;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.wk-hall-data-center-dialog.size-hall {
  height: min(557px, calc(100vh - 48px));
}

.wk-hall-data-center-dialog.size-manual-statistic {
  height: min(620px, calc(100vh - 48px));
}

.wk-hall-data-center-dialog.size-time {
  width: min(845px, calc(100vw - 48px));
  height: min(497px, calc(100vh - 48px));
}

.wk-hall-data-center-dialog.size-host {
  width: min(744px, calc(100vw - 48px));
  height: min(646px, calc(100vh - 48px));
}

.wk-hall-data-center-dialog.size-records {
  width: min(760px, calc(100vw - 48px));
  height: min(620px, calc(100vh - 48px));
}

.wk-hall-data-center-dialog.size-benefit-rule {
  width: min(676px, calc(100vw - 48px));
  height: min(539px, calc(100vh - 48px));
}

.wk-hall-data-center-dialog.size-benefit-template {
  width: min(676px, calc(100vw - 48px));
  height: min(492px, calc(100vh - 48px));
}

.wk-hall-data-center-dialog.size-benefit-delete {
  width: min(260px, calc(100vw - 48px));
  height: min(206px, calc(100vh - 48px));
}

.wk-hall-data-center-dialog.size-host > .wk-hall-data-center-dialog-body {
  padding: 0;
  overflow: hidden;
}

.wk-hall-data-center-host-selector .wk-hall-dual-member-available {
  padding-top: 20px;
}

.wk-hall-data-center-host-selector .wk-hall-dual-member-selection {
  padding-top: 16px;
}

.wk-hall-data-center-host-selector .wk-hall-dual-member-actions {
  min-height: 72px;
  padding: 16px 43px;
  gap: 28px;
}

.wk-hall-data-center-dialog.size-host .wk-hall-dual-member-action {
  width: 129px;
  min-height: 40px;
  border: 1px solid #9d26ff;
  border-radius: 8px;
  background: #fff;
  color: #9d26ff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

.wk-hall-data-center-dialog.size-host
  .wk-hall-dual-member-action-secondary:hover:not(:disabled) {
  background: rgba(157, 38, 255, 0.1);
}

.wk-hall-data-center-dialog.size-host .wk-hall-dual-member-action-primary {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #fff;
}

.wk-hall-data-center-dialog.size-host
  .wk-hall-dual-member-action-primary:hover:not(:disabled) {
  background: #4800bc;
}

.wk-hall-data-center-dialog.size-host .wk-hall-dual-member-action:disabled {
  cursor: not-allowed;
  opacity: 0.2;
}

.wk-hall-data-center-host-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wk-hall-data-center-host-mode button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b10ff;
  cursor: pointer;
  font-size: 13px;
}

.wk-hall-data-center-host-mode button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.wk-hall-data-center-dialog > header {
  height: 52px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid #edeef1;
}

.wk-hall-data-center-dialog > header strong {
  font-size: 15px;
}

.wk-hall-data-center-dialog > header button {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: #8d9199;
  cursor: pointer;
}

.wk-hall-data-center-dialog-body {
  min-height: 0;
  padding: 18px 20px;
  flex: 1 1;
  overflow: auto;
}

.wk-hall-data-center-dialog > footer {
  padding: 12px 20px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.wk-hall-data-center-dialog > footer button {
  height: 40px;
  border: 1px solid #9d26ff;
  border-radius: 8px;
  background: #fff;
  color: #9d26ff;
  cursor: pointer;
  font-size: 16px;
}

.wk-hall-data-center-dialog > footer button:hover:not(:disabled) {
  background: rgba(157, 38, 255, 0.1);
}

.wk-hall-data-center-dialog > footer button.primary {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #fff;
}

.wk-hall-data-center-dialog > footer button.primary:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
}

.wk-hall-data-center-dialog > footer button.primary:hover:not(:disabled) {
  background: #4800bc;
}

.wk-hall-data-center-dialog > footer button:disabled {
  cursor: not-allowed;
  opacity: 0.2;
}

.wk-hall-data-center-dialog.size-manual-statistic > header {
  height: 54px;
  min-height: 54px;
  border-bottom: 0;
}

.wk-hall-data-center-dialog.size-manual-statistic
  > .wk-hall-data-center-dialog-body {
  min-height: 0;
  padding: 0 20px;
  position: relative;
  flex: 1 1;
  overflow: auto;
  box-sizing: border-box;
}

.wk-hall-data-center-dialog.size-manual-statistic > footer {
  height: 86px;
  min-height: 86px;
  padding: 20px 20px 26px;
  box-sizing: border-box;
}

.wk-hall-data-center-manual-statistic-fields {
  display: grid;
  grid-auto-rows: minmax(55px, auto);
  grid-gap: 10px;
  gap: 10px;
}

.wk-hall-data-center-manual-statistic-field {
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 10px;
  background: #f6f6f6;
  color: #333;
  font-size: 14px;
}

.wk-hall-data-center-manual-statistic-field > span:first-child {
  flex: none;
}

.wk-hall-data-center-manual-statistic-field > input,
.wk-hall-data-center-manual-statistic-field > select,
.wk-hall-data-center-manual-statistic-field > textarea {
  width: 240px;
  max-width: 75%;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
}

.wk-hall-data-center-manual-statistic-field > textarea {
  min-height: 48px;
  max-height: 120px;
  resize: vertical;
}

.wk-hall-record-manager button {
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6b10ff;
  cursor: pointer;
  font: inherit;
}

.wk-hall-record-manager button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wk-hall-record-manager .wk-hall-record-confirm {
  justify-self: end;
  min-width: 120px;
  align-self: center;
  padding: 10px 18px;
  background: linear-gradient(90deg, #9d26ff, #6426ff);
  color: #fff;
}

.wk-hall-record-manager .wk-hall-data-center-record-table-wrap table {
  min-width: 660px;
}

.wk-hall-record-manager .wk-hall-data-center-record-table-wrap th:nth-child(2) {
  width: 120px;
}

.wk-hall-record-manager pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wk-hall-data-center-manual-statistic-control {
  width: 152px;
  height: 30px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

/* Keep the native picker hit area over the original design icon, without
   rendering a second browser icon or clipping the HH:mm value. */
.wk-hall-data-center-manual-statistic-control input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0 0 0 auto;
  width: 20px;
  height: 100%;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.wk-hall-data-center-manual-statistic-control.member {
  width: 176px;
}

.wk-hall-data-center-manual-statistic-control.time {
  width: 100px;
  padding: 0 8px;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #f5f5f5;
}

.wk-hall-data-center-manual-statistic-control input,
.wk-hall-data-center-manual-statistic-control select {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333;
  font: inherit;
  text-align: right;
}

.wk-hall-data-center-manual-statistic-control select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
}

.wk-hall-data-center-manual-statistic-control select:disabled {
  cursor: wait;
  color: #999;
}

.wk-hall-data-center-manual-statistic-control input[type="date"] {
  color: #666;
}

.wk-hall-data-center-manual-statistic-control input[type="time"] {
  text-align: center;
}

.wk-hall-data-center-manual-statistic-control img {
  width: 16px;
  height: 16px;
  flex: none;
}

.wk-hall-data-center-manual-statistic-control.member img {
  width: 12px;
  height: 12px;
}

.wk-hall-data-center-manual-statistic-error {
  margin: 0;
  position: absolute;
  right: 24px;
  bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c94444;
  font-size: 12px;
}

.wk-hall-data-center-manual-statistic-error button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.wk-hall-data-center-dialog-search {
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d9bffb;
  border-radius: 4px;
}

.wk-hall-data-center-dialog-search svg,
.wk-hall-data-center-dialog-search img {
  width: 16px;
  height: 16px;
  color: #a0a3aa;
}

.wk-hall-data-center-dialog-search input {
  min-width: 0;
  flex: 1 1;
  border: 0;
  outline: none;
  background: transparent;
}

.wk-hall-data-center-hall-options {
  max-height: 360px;
  margin-top: 10px;
  overflow: auto;
}

.wk-hall-data-center-hall-options > button {
  width: 100%;
  height: 62px;
  margin-top: 8px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f7f7f7;
  color: #30333a;
  text-align: left;
  cursor: pointer;
}

.wk-hall-data-center-hall-options > button.selected {
  border-color: rgba(107, 16, 255, 0.35);
  background: rgba(107, 16, 255, 0.05);
}

.wk-hall-data-center-hall-options img {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  background: #e6e6e8;
}

.wk-hall-data-center-hall-options span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wk-hall-data-center-hall-options strong,
.wk-hall-data-center-hall-options small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-data-center-hall-options small {
  color: #999da5;
}

.wk-hall-data-center-dialog-state {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999da5;
}

.wk-hall-data-center-dialog-state.compact {
  min-height: 84px;
}

.wk-hall-data-center-dialog-state.error {
  flex-direction: column;
  gap: 10px;
  color: #c94444;
}

.wk-hall-data-center-dialog-state button,
.wk-hall-data-center-dialog-load-more {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #dec9f7;
  border-radius: 4px;
  background: #fff;
  color: #7c35d7;
  cursor: pointer;
}

.wk-hall-data-center-dialog-state.inline {
  min-height: 54px;
}

.wk-hall-data-center-hall-options
  > button.wk-hall-data-center-dialog-load-more {
  height: 38px;
  justify-content: center;
  border-color: #dec9f7;
  background: #fff;
  color: #7c35d7;
}

.wk-hall-data-center-dialog-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 6px;
  gap: 6px;
}

.wk-hall-data-center-dialog-presets button {
  height: 32px;
  border: 1px solid #e2e3e7;
  border-radius: 4px;
  background: #fff;
  color: #676b73;
  cursor: pointer;
}

.wk-hall-data-center-dialog-presets button:hover {
  border-color: #b881f8;
  color: #7c35d7;
}

.wk-hall-data-center-dialog-presets button.selected {
  border-color: #6b10ff;
  background: #6b10ff;
  color: #fff;
}

.wk-hall-data-center-dialog.size-time > .wk-hall-data-center-dialog-body {
  padding: 3px 17px 10px;
  position: relative;
  overflow: hidden;
}

/* 807:12639 起预设为 6 项（含昨日）：6 × 70px + 5 × 8px 间距。 */
.wk-hall-data-center-dialog.size-time .wk-hall-data-center-dialog-presets {
  width: 460px;
  margin-left: 11px;
  display: flex;
  grid-template-columns: none;
  gap: 8px;
}

.wk-hall-data-center-dialog.size-time
  .wk-hall-data-center-dialog-presets
  button {
  width: 70px;
  flex: none;
}

.wk-hall-data-center-dialog-range-summary {
  width: calc(100% - 22px);
  height: 40px;
  margin: 20px 11px 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 100px;
  box-sizing: border-box;
  border: 1px solid rgba(126, 134, 142, 0.2);
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 14px;
}

.wk-hall-data-center-dialog-range-summary.invalid {
  border-color: #d14343;
}

.wk-hall-data-center-dialog-range-summary span {
  white-space: nowrap;
}

.wk-hall-data-center-dialog-range-summary em {
  color: #999;
  font-style: normal;
}

.wk-hall-data-center-dialog-range-summary img {
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: none;
}

.wk-hall-data-center-calendar-panels {
  width: 811px;
  height: 252px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 393px 1px 393px;
  grid-gap: 12px;
  gap: 12px;
}

.wk-hall-data-center-calendar-panels > i {
  width: 1px;
  height: 252px;
  background: rgba(0, 0, 0, 0.08);
}

.wk-hall-data-center-calendar-panel {
  width: 393px;
  height: 252px;
  padding: 12px 24px 13px 14px;
  display: grid;
  grid-template-columns: 237px 100px;
  grid-gap: 18px;
  gap: 18px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #fff;
}

.wk-hall-data-center-calendar {
  width: 237px;
  height: 225px;
}

.wk-hall-data-center-calendar > header {
  width: 177px;
  height: 35px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wk-hall-data-center-calendar > header strong {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.wk-hall-data-center-calendar > header button {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.wk-hall-data-center-calendar > header button:hover {
  background: #f1f1f1;
}

.wk-hall-data-center-calendar > header img {
  width: 12px;
  height: 12px;
}

.wk-hall-data-center-calendar-week,
.wk-hall-data-center-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 26px);
  grid-column-gap: 8px;
  -moz-column-gap: 8px;
       column-gap: 8px;
}

.wk-hall-data-center-calendar-week {
  height: 30px;
  align-items: center;
}

.wk-hall-data-center-calendar-week span {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.wk-hall-data-center-calendar-days {
  grid-auto-rows: 26px;
  row-gap: 1px;
}

.wk-hall-data-center-calendar-days button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(0, 0, 0, 0.88);
  cursor: pointer;
  font-size: 14px;
  line-height: 26px;
}

.wk-hall-data-center-calendar-days button.outside {
  color: rgba(0, 0, 0, 0.25);
}

.wk-hall-data-center-calendar-days button:hover:not(.selected) {
  background: rgba(107, 16, 255, 0.08);
}

.wk-hall-data-center-calendar-days button.selected {
  background: #6b10ff;
  color: #fff;
}

.wk-hall-data-center-clock {
  width: 100px;
  height: 227px;
  padding-left: 12px;
  box-sizing: border-box;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.wk-hall-data-center-clock > strong {
  height: 35px;
  display: block;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  font-weight: 400;
  line-height: 35px;
  text-align: center;
}

.wk-hall-data-center-clock-columns {
  height: 192px;
  display: grid;
  grid-template-columns: 44px 44px;
}

.wk-hall-data-center-clock-columns > div {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.wk-hall-data-center-clock-columns > div::-webkit-scrollbar {
  display: none;
}

.wk-hall-data-center-clock-columns button {
  width: 40px;
  height: 32px;
  margin: 0 2px;
  padding: 0;
  display: block;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: rgba(0, 0, 0, 0.88);
  cursor: pointer;
  font-size: 14px;
}

.wk-hall-data-center-clock-columns button:hover,
.wk-hall-data-center-clock-columns button[aria-selected="true"] {
  background: #ededed;
}

.wk-hall-data-center-calendar-error {
  margin: 0;
  position: absolute;
  top: 64px;
  right: 40px;
  color: #d14343;
  font-size: 12px;
}

.wk-hall-data-center-dialog.size-time > footer {
  min-height: 72px;
  padding: 16px 20px;
  grid-template-columns: 130px 130px;
  justify-content: end;
  gap: 12px;
  box-sizing: border-box;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05);
}

.wk-hall-data-center-date-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 14px 12px;
  gap: 14px 12px;
}

.wk-hall-data-center-date-grid label,
.wk-hall-data-center-criteria-fields label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.wk-hall-data-center-date-grid label > span,
.wk-hall-data-center-criteria-fields label > span {
  color: #72767e;
  font-size: 12px;
}

.wk-hall-data-center-date-grid input,
.wk-hall-data-center-criteria-fields input,
.wk-hall-data-center-criteria-fields select {
  height: 40px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #e1e3e7;
  border-radius: 4px;
  outline: none;
  background: #fff;
  color: #373a41;
}

.wk-hall-data-center-date-grid input:focus,
.wk-hall-data-center-criteria-fields input:focus,
.wk-hall-data-center-criteria-fields select:focus {
  border-color: #ad70f5;
  box-shadow: 0 0 0 2px rgba(151, 71, 255, 0.1);
}

.wk-hall-data-center-criteria-fields select:disabled {
  background: #f5f5f7;
  color: #a0a3aa;
}

.wk-hall-data-center-dialog-tip {
  margin: 14px 0 0;
  color: #969aa2;
  font-size: 12px;
  line-height: 20px;
}

.wk-hall-data-center-dialog-tip.error {
  color: #ca4545;
}

.wk-hall-data-center-metric-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.wk-hall-data-center-metric-options label {
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #e9eaed;
  border-radius: 4px;
  cursor: pointer;
}

.wk-hall-data-center-metric-options input {
  accent-color: #9747ff;
}

.wk-hall-data-center-clear-metrics {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8741df;
  cursor: pointer;
}

.wk-hall-data-center-criteria-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wk-hall-data-center-criteria-fields > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.wk-hall-data-center-criteria-fields > div > span {
  color: #72767e;
  font-size: 12px;
}

.wk-hall-data-center-criteria-fields > div > em {
  color: #999da5;
  text-align: center;
  font-style: normal;
}

.wk-hall-data-center-criteria-fields
  > .wk-hall-data-center-filter-options-actions {
  grid-template-columns: 72px max-content max-content;
}

.wk-hall-data-center-filter-options-actions button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dec9f7;
  border-radius: 4px;
  background: #fff;
  color: #7c35d7;
  cursor: pointer;
}

.wk-hall-data-center-filter-options-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.wk-hall-data-center-record-context {
  min-height: 56px;
  padding: 0 4px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #edeef1;
  color: #747881;
  font-size: 12px;
}

.wk-hall-data-center-record-audit-toolbar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #747881;
  font-size: 12px;
}

.wk-hall-data-center-record-audit-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4f535b;
  cursor: pointer;
}

.wk-hall-data-center-record-audit-toolbar input {
  width: 14px;
  height: 14px;
  accent-color: #7c35d7;
}

.wk-hall-data-center-record-audit-toolbar label:has(input:disabled) {
  cursor: wait;
  opacity: 0.55;
}

.wk-hall-data-center-record-table-wrap {
  margin-top: 12px;
  overflow: auto;
  border: 1px solid #edeef1;
  border-radius: 6px;
}

.wk-hall-data-center-record-table-wrap table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  table-layout: fixed;
}

.wk-hall-data-center-record-table-wrap th,
.wk-hall-data-center-record-table-wrap td {
  height: 44px;
  padding: 7px 12px;
  border-bottom: 1px solid #f0f1f3;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-data-center-record-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fafbfc;
  color: #555961;
  font-size: 12px;
  font-weight: 500;
}

.wk-hall-data-center-record-table-wrap th:first-child {
  width: 160px;
}

.wk-hall-data-center-record-table-wrap th:nth-child(2) {
  width: 150px;
}

.wk-hall-data-center-record-table-wrap th:nth-child(3) {
  width: 100px;
}

.wk-hall-data-center-record-table-wrap th:nth-child(4) {
  width: 84px;
}

.wk-hall-data-center-record-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.wk-hall-data-center-record-table-wrap tr.is-revoked td {
  color: #8a8e96;
}

.wk-hall-data-center-record-status {
  display: inline-flex;
  min-width: 52px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
}

.wk-hall-data-center-record-status.is-active {
  background: #edf8f1;
  color: #25894b;
}

.wk-hall-data-center-record-status.is-revoked {
  background: #f2f2f3;
  color: #777b82;
}

.wk-hall-data-center-record-table-wrap
  .wk-hall-data-center-record-audit-row
  td {
  height: auto;
  padding: 0 12px 8px;
  overflow: visible;
  white-space: normal;
}

.wk-hall-data-center-record-audit-row details {
  padding: 7px 10px;
  border-radius: 5px;
  background: #fafbfc;
  color: #666b73;
}

.wk-hall-data-center-record-audit-row summary {
  width: -moz-max-content;
  width: max-content;
  color: #7c35d7;
  font-size: 12px;
  cursor: pointer;
}

.wk-hall-data-center-record-audit-row dl {
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px 18px;
  gap: 8px 18px;
}

.wk-hall-data-center-record-audit-row dl > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.wk-hall-data-center-record-audit-row dl > div.is-correction {
  grid-column: 1 / -1;
}

.wk-hall-data-center-record-audit-row dt,
.wk-hall-data-center-record-audit-row dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.wk-hall-data-center-record-audit-row dt {
  color: #8a8e96;
}

.wk-hall-data-center-record-audit-row dd {
  color: #4f535b;
}

.wk-hall-data-center-record-more {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.wk-hall-data-center-record-more.error {
  color: #c94444;
}

.wk-hall-data-center-record-more button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #dec9f7;
  border-radius: 4px;
  background: #fff;
  color: #7c35d7;
  cursor: pointer;
}

.wk-hall-data-center-record-more button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

body[theme-mode="dark"] .wk-hall-data-center-sidebar,
body[theme-mode="dark"] .wk-hall-data-center-main-header,
body[theme-mode="dark"] .wk-hall-data-center-hall-row,
body[theme-mode="dark"] .wk-hall-data-center-overview,
body[theme-mode="dark"] .wk-hall-data-center-view-tabs,
body[theme-mode="dark"] .wk-hall-data-center-toolbar,
body[theme-mode="dark"] .wk-hall-data-center-group,
body[theme-mode="dark"] .wk-hall-data-center-loading,
body[theme-mode="dark"] .wk-hall-data-center-table-wrap,
body[theme-mode="dark"] .wk-hall-data-center-pagination,
body[theme-mode="dark"] .wk-hall-data-center-dialog {
  border-color: #333333;
  background: #2f2f30;
  color: rgba(255, 255, 255, 0.88);
}

body[theme-mode="dark"] .wk-hall-data-center-main {
  background: #1e1e1f;
  color: rgba(255, 255, 255, 0.88);
}

body[theme-mode="dark"] .wk-hall-data-center-cards article,
body[theme-mode="dark"] .wk-hall-data-center-table-wrap th {
  border-color: #333333;
  background: #262628;
}

body[theme-mode="dark"] .wk-hall-data-center-cards article > strong {
  color: rgba(255, 255, 255, 0.92);
}

body[theme-mode="dark"] .wk-hall-data-center-overview > header > strong,
body[theme-mode="dark"] .wk-hall-data-center-cards article > span,
body[theme-mode="dark"] .wk-hall-data-center-cards article > small,
body[theme-mode="dark"] .wk-hall-data-center-view-tabs button.selected,
body[theme-mode="dark"] .wk-hall-data-center-table-wrap td,
body[theme-mode="dark"] .wk-hall-data-center-member-content strong,
body[theme-mode="dark"] .wk-hall-data-center-pagination button {
  color: rgba(255, 255, 255, 0.88);
}

body[theme-mode="dark"] .wk-hall-data-center-range,
body[theme-mode="dark"] .wk-hall-data-center-toolbar .host-picker,
body[theme-mode="dark"] .wk-hall-data-center-dialog-range-summary,
body[theme-mode="dark"] .wk-hall-data-center-calendar-panel,
body[theme-mode="dark"] .wk-hall-data-center-clock-columns button {
  border-color: #333333;
  background: #2f2f30;
  color: rgba(255, 255, 255, 0.88);
}

body[theme-mode="dark"] .wk-hall-data-center-calendar > header strong,
body[theme-mode="dark"] .wk-hall-data-center-calendar-days button,
body[theme-mode="dark"] .wk-hall-data-center-clock > strong {
  color: rgba(255, 255, 255, 0.88);
}

body[theme-mode="dark"] .wk-hall-data-center-calendar-week span,
body[theme-mode="dark"] .wk-hall-data-center-calendar-days button.outside,
body[theme-mode="dark"] .wk-hall-data-center-toolbar .host-picker em {
  color: rgba(255, 255, 255, 0.45);
}

body[theme-mode="dark"]
  .wk-hall-data-center-clock-columns
  button[aria-selected="true"],
body[theme-mode="dark"] .wk-hall-data-center-clock-columns button:hover,
body[theme-mode="dark"] .wk-hall-data-center-calendar > header button:hover {
  background: #444444;
}

body[theme-mode="dark"] .wk-hall-data-center-table-wrap th,
body[theme-mode="dark"] .wk-hall-data-center-table-wrap td {
  border-color: #333333;
}

body[theme-mode="dark"] .wk-hall-data-center-table-wrap tfoot th,
body[theme-mode="dark"] .wk-hall-data-center-table-wrap tfoot td {
  border-color: #4b3c63;
  background: #30283b;
  color: #c7a0ff;
}

body[theme-mode="dark"] .wk-hall-data-center-record-context,
body[theme-mode="dark"] .wk-hall-data-center-record-table-wrap,
body[theme-mode="dark"] .wk-hall-data-center-record-table-wrap th,
body[theme-mode="dark"] .wk-hall-data-center-record-table-wrap td {
  border-color: #333333;
}

body[theme-mode="dark"] .wk-hall-data-center-record-table-wrap th {
  background: #262628;
  color: rgba(255, 255, 255, 0.72);
}

body[theme-mode="dark"] .wk-hall-data-center-record-audit-toolbar,
body[theme-mode="dark"] .wk-hall-data-center-record-audit-toolbar label {
  color: rgba(255, 255, 255, 0.62);
}

body[theme-mode="dark"] .wk-hall-data-center-record-audit-row details {
  background: #2f2f30;
  color: rgba(255, 255, 255, 0.62);
}

body[theme-mode="dark"] .wk-hall-data-center-record-audit-row dt {
  color: rgba(255, 255, 255, 0.45);
}

body[theme-mode="dark"] .wk-hall-data-center-record-audit-row dd {
  color: rgba(255, 255, 255, 0.75);
}

body[theme-mode="dark"] .wk-hall-data-center-record-status.is-active {
  background: #21382a;
  color: #78d39b;
}

body[theme-mode="dark"] .wk-hall-data-center-record-status.is-revoked {
  background: #34363b;
  color: rgba(255, 255, 255, 0.58);
}

body[theme-mode="dark"] .wk-hall-data-center-manual-statistic-field {
  background: #262628;
  color: rgba(255, 255, 255, 0.88);
}

body[theme-mode="dark"] .wk-hall-data-center-manual-statistic-control.time {
  border-color: #4a4d55;
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-hall-data-center-manual-statistic-control input,
body[theme-mode="dark"] .wk-hall-data-center-manual-statistic-control select {
  color: rgba(255, 255, 255, 0.72);
  color-scheme: dark;
}

body[theme-mode="dark"] .wk-hall-data-center-criteria-fields select,
body[theme-mode="dark"] .wk-hall-data-center-metric-options label,
body[theme-mode="dark"] .wk-hall-data-center-filter-options-actions button,
body[theme-mode="dark"] .wk-hall-data-center-record-more button,
body[theme-mode="dark"] .wk-hall-data-center-dialog-state button,
body[theme-mode="dark"] .wk-hall-data-center-dialog-load-more {
  border-color: #4a4d55;
  background: #2f2f30;
  color: #c7a0ff;
}

@media (max-width: 1100px) {
  .wk-hall-data-center-toolbar {
    height: auto;
    flex-wrap: wrap;
    gap: 10px 0;
  }

  .wk-hall-data-center-filter-field.time-filter {
    width: 100%;
    margin-right: 0;
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .wk-hall-data-center-range {
    width: 100%;
    min-width: 0;
  }

  .wk-hall-data-center-content {
    padding-top: 10px;
  }
}

@media (max-width: 900px) {
  .wk-hall-data-center-dialog.size-time {
    height: min(720px, calc(100vh - 32px));
  }

  .wk-hall-data-center-dialog.size-time > .wk-hall-data-center-dialog-body {
    overflow-y: auto;
  }

  .wk-hall-data-center-dialog.size-time .wk-hall-data-center-dialog-presets {
    width: calc(100% - 22px);
    overflow-x: auto;
  }

  .wk-hall-data-center-dialog-range-summary {
    gap: 12px;
  }

  .wk-hall-data-center-calendar-panels {
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
  }

  .wk-hall-data-center-calendar-panels > i {
    display: none;
  }

  .wk-hall-data-center-calendar-panel {
    width: 100%;
    max-width: 393px;
    margin: 0 auto;
  }
}

@container wk-app-canvas (max-width: 760px) {
  .wk-hall-data-center-main-header {
    height: 64px;
    min-height: 64px;
  }

  .wk-hall-data-center-scroll {
    padding: 12px;
  }

  .wk-hall-data-center-hall-row {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .wk-hall-data-center-hall-picker,
  .wk-hall-data-center-global-search {
    width: 100%;
  }

  .wk-hall-data-center-hall-field {
    width: 100%;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .wk-hall-data-center-presets {
    overflow-x: auto;
  }

  .wk-hall-data-center-range {
    width: 100%;
    min-width: 100%;
    overflow: hidden;
  }

  .wk-hall-data-center-range span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wk-hall-data-center-filter-field.host-filter {
    width: 100%;
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .wk-hall-data-center-toolbar .host-picker {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .wk-hall-data-center-dialog-presets {
    grid-template-columns: repeat(3, 1fr);
  }

  .wk-hall-data-center-dialog.size-host > .wk-hall-data-center-dialog-body {
    overflow-y: auto;
  }

  .wk-hall-data-center-date-grid,
  .wk-hall-data-center-metric-options {
    grid-template-columns: 1fr;
  }
}

@media (hover: none) {
  .wk-hall-data-center-overview-arrow {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 480px) {
  .wk-hall-data-center-calendar-panel {
    height: auto;
    max-width: 265px;
    padding: 12px 14px 14px;
    grid-template-columns: 237px;
    gap: 8px;
  }

  .wk-hall-data-center-clock {
    width: 237px;
    height: 108px;
    padding: 8px 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 0;
  }

  .wk-hall-data-center-clock > strong {
    height: 32px;
    line-height: 32px;
  }

  .wk-hall-data-center-clock-columns {
    height: 64px;
    grid-template-columns: 1fr 1fr;
  }

  .wk-hall-data-center-clock-columns button {
    width: calc(100% - 4px);
  }
}

.wk-hall-finance-main {
  width: 100%;
  height: 100%;
  min-width: 940px;
  overflow: hidden;
  color: #333;
  background: #f6f7fa;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.wk-hall-finance-main button,
.wk-hall-finance-main input {
  font: inherit;
}

.wk-hall-finance-main button:focus {
  outline: none;
}

.wk-hall-finance-main button:focus-visible {
  box-shadow: 0 0 0 2px rgba(157, 38, 255, 0.18);
}

.wk-hall-finance-route-anchor {
  display: none;
}

.wk-hall-finance-header {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 20px;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #f0f1f5;
}

.wk-hall-finance-header h1 {
  flex: 1 1;
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
}

.wk-hall-finance-header nav {
  position: absolute;
  left: 50%;
  top: 26px;
  display: flex;
  gap: 8px;
  height: 36px;
  transform: translateX(-50%);
}

.wk-hall-finance-header nav button {
  width: 101px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #999;
  background: transparent;
  font-size: 15px;
  cursor: pointer;
}

.wk-hall-finance-header nav button.selected {
  color: #8d1fe2;
  background: #f3e5ff;
  font-weight: 500;
}

.wk-hall-finance-header-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e8e9ee;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}

.wk-hall-finance-header-refresh img {
  width: 18px;
  height: 18px;
}

.wk-hall-finance-scroll {
  height: calc(100% - 80px);
  overflow: auto;
  scrollbar-color: #d8d9df transparent;
}

.wk-hall-finance-content {
  width: calc(100% - 40px);
  max-width: 1288px;
  min-width: 900px;
  margin: 20px auto 40px;
}

.wk-hall-finance-card {
  box-sizing: border-box;
  border-radius: 10px;
  background: #fff;
}

.wk-hall-finance-card h2 {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
}

.wk-hall-finance-card p {
  margin: 5px 0 0;
  color: #999;
  font-size: 12px;
  line-height: 18px;
}

.wk-hall-finance-overview-card {
  height: 417px;
  padding: 16px 20px 20px;
}

.wk-hall-finance-overview-card > header,
.wk-hall-finance-trend-card > header {
  display: grid;
  grid-template-columns: 122px minmax(0, 926px) 200px;
  align-items: center;
  height: 40px;
}

.wk-hall-finance-chart-controls {
  display: grid;
  grid-template-columns: minmax(260px, 610px) 173px 103px;
  grid-gap: 20px;
  gap: 20px;
  height: 40px;
}

.wk-hall-finance-control {
  display: grid;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  color: #555;
  font-size: 14px;
}

.wk-hall-finance-control.date-control {
  grid-template-columns: 56px minmax(0, 1fr);
}

.wk-hall-finance-control.granularity-control {
  grid-template-columns: 56px 107px;
}

.wk-hall-finance-chart-controls button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #e7e8ed;
  border-radius: 5px;
  color: #555;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
}

.wk-hall-finance-chart-controls button > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-finance-chart-controls button img {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: 8px;
}

.wk-hall-finance-chart-controls .granularity-control button img {
  width: 10px;
  height: 10px;
}

.wk-hall-finance-chart-controls .comparison-control > button {
  justify-content: center;
}

.wk-hall-finance-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 50px;
  box-sizing: border-box;
  color: #777;
  font-size: 12px;
}

.wk-hall-finance-chart-legend span {
  white-space: nowrap;
}

.wk-hall-finance-chart-legend span::before {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px -1px 0;
  border-radius: 2px;
  content: "";
}

.wk-hall-finance-chart-legend .benefit::before {
  background: #9d26ff;
}

.wk-hall-finance-chart-legend .roster::before {
  background: #ff955f;
}

.wk-hall-finance-chart-legend.overview .roster::before {
  background: #ebd4ff;
}

.wk-hall-finance-total {
  display: flex;
  align-items: center;
  height: 32px;
  margin-top: 10px;
}

.wk-hall-finance-total > span {
  margin-right: 10px;
  color: #555;
  font-size: 14px;
}

.wk-hall-finance-total > strong {
  color: #19213d;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.wk-hall-finance-bars {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 279px;
  margin-top: 20px;
  padding-bottom: 26px;
  box-sizing: border-box;
}

.wk-hall-finance-bars::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 26px;
  left: 111px;
  background-image: linear-gradient(to right, #edeef3 1px, transparent 1px);
  background-size: 16.6667% 100%;
  pointer-events: none;
  content: "";
}

.wk-hall-finance-bar-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 95px minmax(500px, 1fr);
  grid-column-gap: 16px;
  -moz-column-gap: 16px;
       column-gap: 16px;
  align-items: center;
  height: 26px;
}

.wk-hall-finance-bar-row .hall-name {
  overflow: hidden;
  color: #19213d;
  font-size: 13px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-finance-bar-row .bar-stack {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  height: 26px;
}

.wk-hall-finance-bar-row .bar-line {
  position: relative;
  height: 11px;
  border-radius: 2px;
  background: transparent;
}

.wk-hall-finance-bar-row .bar {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 2px;
}

.wk-hall-finance-bar-row .bar.benefit {
  background: linear-gradient(90deg, #9d26ff, #6b10ff);
}

.wk-hall-finance-bar-row .bar.roster {
  background: #ebd4ff;
}

.wk-hall-finance-bar-row em {
  display: none;
}

.wk-hall-finance-hall-filter {
  display: flex;
  align-items: center;
  height: 60px;
  margin: 20px 0 15px;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #fff;
}

.wk-hall-finance-main[data-scope="mine"] .wk-hall-finance-hall-filter {
  margin-top: 0;
}

.wk-hall-finance-hall-filter > span {
  width: 52px;
  color: #666;
  font-size: 14px;
}

.wk-hall-finance-popover-anchor {
  position: relative;
}

.wk-hall-finance-hall-trigger {
  display: flex;
  align-items: center;
  width: 296px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e9eaf0;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.wk-hall-finance-hall-trigger strong {
  max-width: 150px;
  overflow: hidden;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-finance-hall-trigger > img:last-child {
  margin-left: auto;
  width: 12px;
  height: 12px;
}

.wk-hall-finance-hall-popover {
  position: absolute;
  top: 47px;
  left: 0;
  z-index: 30;
  width: 433px;
  height: 557px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #f0f1f5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.wk-hall-finance-hall-popover > h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  margin: 0;
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.wk-hall-finance-popover-search {
  display: flex;
  align-items: center;
  height: 46px;
  margin: 0 20px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid #9d26ff;
  border-radius: 6px;
}

.wk-hall-finance-popover-search img {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.wk-hall-finance-popover-search input {
  flex: 1 1;
  height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #333;
  background: transparent;
  font-size: 14px;
}

.wk-hall-finance-hall-options {
  height: 360px;
  overflow: auto;
  padding: 10px 20px 0;
  box-sizing: border-box;
}

.wk-hall-finance-hall-options > p {
  margin: 120px 0 0;
  color: #999;
  text-align: center;
}

.wk-hall-finance-hall-options > button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 62px;
  margin-bottom: 10px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.wk-hall-finance-hall-options > button:hover,
.wk-hall-finance-hall-options > button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(90deg, #b94dff, #7b18f2);
}

.wk-hall-finance-hall-options .avatar,
.wk-hall-finance-member .avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #c985ff, #6b10ff);
}

.wk-hall-finance-hall-options .avatar img,
.wk-hall-finance-member .avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-finance-hall-options .avatar {
  background: #fff;
}

.wk-hall-finance-hall-options > button > span:nth-child(2) {
  display: grid;
  flex: 1 1;
  grid-gap: 3px;
  gap: 3px;
  margin-left: 12px;
}

.wk-hall-finance-hall-options strong {
  font-size: 14px;
  font-weight: 400;
}

.wk-hall-finance-hall-options small {
  color: #aaa;
  font-size: 11px;
}

.wk-hall-finance-hall-options button[aria-selected="true"] small {
  color: rgba(255, 255, 255, 0.75);
}

.wk-hall-finance-hall-options i {
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid #d7d8de;
  border-radius: 50%;
}

.wk-hall-finance-hall-options button[aria-selected="true"] i {
  border: 5px solid #9d26ff;
}

.wk-hall-finance-hall-popover > footer {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  margin: 20px 21px 0;
}

.wk-hall-finance-hall-popover > footer button {
  width: 191px;
  height: 40px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: #9d26ff;
  cursor: pointer;
}

.wk-hall-finance-hall-popover > footer button.cancel {
  border: 1px solid #9d26ff;
  color: #9d26ff;
  background: #fff;
}

.wk-hall-finance-trend-card {
  height: 450px;
  padding: 16px 20px 20px;
}

.wk-hall-finance-trend-card .wk-hall-finance-total {
  margin-top: 20px;
}

.wk-hall-finance-trend-chart {
  height: 302px;
  margin-top: 20px;
}

.wk-hall-finance-trend-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wk-hall-finance-trend-chart .grid {
  stroke: #edeef3;
  stroke-width: 1;
}

.wk-hall-finance-trend-chart .axis-x,
.wk-hall-finance-trend-chart .axis-y {
  fill: #999;
  font-size: 11px;
}

.wk-hall-finance-trend-chart .benefit-line,
.wk-hall-finance-trend-chart .roster-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.wk-hall-finance-trend-chart .benefit-line {
  stroke: #9d26ff;
  stroke-width: 2.5;
}

.wk-hall-finance-trend-chart .roster-line {
  stroke: #ff955f;
  stroke-width: 2;
}

.wk-hall-finance-trend-chart .benefit-area {
  fill: url(#financeBenefitArea);
}

.wk-hall-finance-trend-chart .roster-area {
  fill: url(#financeRosterArea);
}

.wk-hall-finance-trend-chart .benefit-point,
.wk-hall-finance-trend-chart .roster-point {
  fill: #fff;
  stroke-width: 2;
  opacity: 0;
  vector-effect: non-scaling-stroke;
}

.wk-hall-finance-trend-chart svg:hover .benefit-point,
.wk-hall-finance-trend-chart svg:hover .roster-point {
  opacity: 1;
}

.wk-hall-finance-trend-chart .benefit-point {
  stroke: #9d26ff;
}

.wk-hall-finance-trend-chart .roster-point {
  stroke: #ff955f;
}

.wk-hall-finance-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  color: #999;
  font-size: 14px;
}

.wk-hall-finance-table-section {
  margin-top: 20px;
  overflow: visible;
  border-radius: 10px;
  background: #fff;
}

.wk-hall-finance-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid #f2f3f6;
}

.wk-hall-finance-toolbar-filters,
.wk-hall-finance-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wk-hall-finance-toolbar-filters {
  flex: 1 1;
  color: #555;
  font-size: 14px;
}

.wk-hall-finance-toolbar-filters > span {
  flex: 0 0 56px;
}

.wk-hall-finance-toolbar .wk-hall-finance-table-date {
  flex: 1 1;
  justify-content: space-between;
  min-width: 260px;
}

.wk-hall-finance-toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e6e7ed;
  border-radius: 5px;
  color: #555;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}

.wk-hall-finance-toolbar button:hover:not(:disabled) {
  border-color: #d8b4ff;
  color: #8b1ddd;
}

.wk-hall-finance-toolbar button > img {
  width: 14px;
  height: 14px;
}

.wk-hall-finance-toolbar-actions {
  flex: 0 0 186px;
  justify-content: flex-end;
  gap: 8px;
  margin-left: 26px;
}

.wk-hall-finance-toolbar-actions > button {
  width: 65px;
}

.wk-hall-finance-toolbar-actions > button.query {
  border-color: #9d26ff;
  color: #fff;
  background: #9d26ff;
}

.wk-hall-finance-toolbar-actions button.export {
  width: 40px;
  padding: 0;
  border-color: #e6e7ed;
  color: #555;
}

.wk-hall-finance-toolbar button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.wk-hall-finance-menu-popover {
  position: absolute;
  top: 47px;
  left: 0;
  z-index: 40;
  padding: 5px 0;
  box-sizing: border-box;
  border: 1px solid #f0f1f5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.wk-hall-finance-menu-popover::before {
  position: absolute;
  top: -7px;
  left: 41px;
  width: 12px;
  height: 12px;
  border-top: 1px solid #f0f1f5;
  border-left: 1px solid #f0f1f5;
  background: #fff;
  transform: rotate(45deg);
  content: "";
}

.wk-hall-finance-menu-popover.is-granularity {
  width: 100px;
  min-height: 149px;
}

.wk-hall-finance-menu-popover.is-comparison {
  width: 154px;
  min-height: 114px;
}

.wk-hall-finance-chart-controls .wk-hall-finance-menu-popover button {
  position: relative;
  justify-content: flex-start;
  width: 100%;
  height: 35px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  color: #555;
  white-space: nowrap;
}

.wk-hall-finance-chart-controls .wk-hall-finance-menu-popover button:hover {
  color: #9d26ff;
  background: #faf7ff;
}

.wk-hall-finance-chart-controls .wk-hall-finance-menu-popover button[aria-checked="true"] {
  margin: 0 2px;
  width: calc(100% - 4px);
  height: 31px;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(90deg, #b94dff, #7b18f2);
}

.wk-hall-finance-table-wrap {
  min-height: 108px;
  overflow-x: auto;
}

.wk-hall-finance-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  table-layout: auto;
}

.wk-hall-finance-table th,
.wk-hall-finance-table td {
  height: 54px;
  padding: 0 14px;
  border-bottom: 1px solid #f1f2f5;
  color: #555;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
}

.wk-hall-finance-table th {
  height: 46px;
  color: #888;
  background: #fbfbfd;
  font-weight: 400;
}

.wk-hall-finance-table th:first-child,
.wk-hall-finance-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 180px;
  background: #fff;
  text-align: left;
}

.wk-hall-finance-table th:first-child {
  z-index: 3;
  background: #fbfbfd;
}

.wk-hall-finance-table td.total {
  color: #9d26ff;
  font-weight: 500;
}

.wk-hall-finance-member {
  display: flex;
  align-items: center;
}

.wk-hall-finance-member .avatar {
  width: 34px;
  height: 34px;
  margin-right: 10px;
}

.wk-hall-finance-member > span:last-child {
  display: block;
  max-width: 132px;
  overflow: hidden;
}

.wk-hall-finance-member strong {
  overflow: hidden;
  color: #333;
  font-size: 13px;
  font-weight: 400;
  text-overflow: ellipsis;
}

.wk-hall-finance-row-actions {
  display: inline-flex;
  gap: 8px;
}

.wk-hall-finance-row-actions button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.wk-hall-finance-row-actions button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.wk-hall-finance-row-actions img {
  width: 16px;
  height: 16px;
}

/* 807:14197 分页条：与数据汇总共用「共 X 条数据，当前第 N 页」+ 文字翻页按钮。 */
.wk-hall-finance-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 80px;
  padding: 20px;
  box-sizing: border-box;
  color: #171a1d;
  font-size: 14px;
  line-height: 22px;
}

.wk-hall-finance-pagination nav {
  display: flex;
  gap: 14px;
}

.wk-hall-finance-pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(126, 134, 142, 0.2);
  border-radius: 4px;
  color: #333;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
}

.wk-hall-finance-pagination nav button:not(:first-child):not(:last-child) {
  line-height: 12px;
}

.wk-hall-finance-pagination button.selected {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
}

.wk-hall-finance-pagination button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.wk-hall-finance-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: #999;
  text-align: center;
}

.wk-hall-finance-scroll > .wk-hall-finance-state {
  min-height: calc(100vh - 160px);
}

.wk-hall-finance-state .wk-hall-finance-menu-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  opacity: 0.55;
}

.wk-hall-finance-state strong {
  max-width: 460px;
  font-size: 14px;
  font-weight: 400;
}

.wk-hall-finance-state button {
  height: 34px;
  margin-top: 16px;
  padding: 0 18px;
  border: 0;
  border-radius: 5px;
  color: #fff;
  background: #9d26ff;
  cursor: pointer;
}

.wk-hall-finance-disclaimer {
  margin: 14px 0 0;
  color: #999;
  font-size: 12px;
  text-align: right;
}

.wk-hall-finance-date-dialog {
  padding-top: 1px;
}

.wk-hall-finance-date-dialog
  .wk-hall-data-center-dialog-presets
  button.selected {
  border-color: #9d26ff;
  color: #8d1fe2;
  background: rgba(157, 38, 255, 0.1);
}

.wk-hall-finance-date-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

body[theme-mode="dark"] .wk-hall-finance-main,
body[theme-mode="dark"] .wk-hall-finance-scroll {
  color: #eee;
  background: #1e1e1f;
}

body[theme-mode="dark"] .wk-hall-finance-header,
body[theme-mode="dark"] .wk-hall-finance-card,
body[theme-mode="dark"] .wk-hall-finance-hall-filter,
body[theme-mode="dark"] .wk-hall-finance-table-section,
body[theme-mode="dark"] .wk-hall-finance-hall-trigger,
body[theme-mode="dark"] .wk-hall-finance-hall-popover,
body[theme-mode="dark"] .wk-hall-finance-menu-popover,
body[theme-mode="dark"] .wk-hall-finance-chart-controls button,
body[theme-mode="dark"] .wk-hall-finance-toolbar button,
body[theme-mode="dark"] .wk-hall-finance-header-refresh {
  color: #eee;
  border-color: #333333;
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-hall-finance-total > strong,
body[theme-mode="dark"] .wk-hall-finance-bar-row .hall-name,
body[theme-mode="dark"] .wk-hall-finance-hall-popover > h3 {
  color: #eee;
}

body[theme-mode="dark"] .wk-hall-finance-table th,
body[theme-mode="dark"] .wk-hall-finance-table td:first-child {
  background: #262628;
}

body[theme-mode="dark"] .wk-hall-finance-table td {
  border-color: #333333;
  color: #ddd;
}

body[theme-mode="dark"] .wk-hall-finance-pagination {
  color: #eee;
}

body[theme-mode="dark"] .wk-hall-finance-pagination button:not(.selected) {
  border-color: #333333;
  color: #ddd;
  background: #2f2f30;
}

@media (max-width: 1120px) {
  .wk-hall-finance-content {
    width: calc(100% - 24px);
  }

  .wk-hall-finance-toolbar {
    align-items: flex-start;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .wk-hall-finance-toolbar-filters {
    flex-wrap: wrap;
  }
}

.wk-hall-benefit-main {
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  container-name: benefit-rules;
  container-type: inline-size;
  background: #f6f7fa;
  color: #171a1d;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.wk-hall-benefit-main button,
.wk-hall-benefit-main input {
  font: inherit;
}

.wk-hall-benefit-route-anchor {
  display: none;
}

.wk-hall-benefit-menu-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.wk-hall-benefit-header {
  min-height: 80px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f0f1f3;
  background: #fff;
}

.wk-hall-benefit-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.wk-hall-benefit-header > span {
  padding: 2px 8px;
  border-radius: 10px;
  background: #f1e8ff;
  color: #6b10ff;
  font-size: 12px;
}

.wk-hall-benefit-scroll {
  min-width: 0;
  min-height: 0;
  padding: 20px;
  flex: 1 1;
  overflow-x: hidden;
  overflow-y: auto;
}

.wk-hall-benefit-hall-row,
.wk-hall-benefit-toolbar {
  min-height: 60px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 26px;
  box-sizing: border-box;
  background: #fff;
}

.wk-hall-benefit-hall-row {
  border-radius: 10px 10px 0 0;
}

.wk-hall-benefit-hall-picker {
  width: 348px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.wk-hall-benefit-hall-picker > span {
  flex: 0 0 auto;
  color: #333;
  font-size: 14px;
}

.wk-hall-benefit-hall-trigger {
  width: 296px;
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(126, 134, 142, 0.2);
  border-radius: 4px;
  background: #fff;
  color: #333;
  cursor: pointer;
}

.wk-hall-benefit-hall-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.wk-hall-benefit-hall-trigger .avatar,
.wk-hall-benefit-hall-dialog .avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: #fff;
  color: #fff;
  font-size: 12px;
}

.wk-hall-benefit-hall-trigger .avatar {
  width: 30px;
  height: 30px;
  border-radius: 4px;
}

.wk-hall-benefit-hall-dialog .avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.wk-hall-benefit-hall-trigger .avatar img,
.wk-hall-benefit-hall-dialog .avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-benefit-hall-trigger strong {
  max-width: 218px;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}

.wk-hall-benefit-hall-trigger > img:last-child {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.wk-hall-benefit-search {
  width: 355px;
  height: 40px;
  padding-left: 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(126, 134, 142, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.wk-hall-benefit-search img,
.wk-hall-benefit-hall-dialog > label img {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.wk-hall-benefit-search input,
.wk-hall-benefit-hall-dialog > label input {
  min-width: 0;
  flex: 1 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333;
}

.wk-hall-benefit-search input::-moz-placeholder, .wk-hall-benefit-hall-dialog > label input::-moz-placeholder {
  color: rgba(153, 153, 153, 0.8);
}

.wk-hall-benefit-search input::placeholder,
.wk-hall-benefit-hall-dialog > label input::placeholder {
  color: rgba(153, 153, 153, 0.8);
}

.wk-hall-benefit-search .search-action {
  width: 40px;
  height: 40px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  border-left: 1px solid #f2f3f4;
  border-radius: 0 4px 4px 0;
  background: #f9f9f9;
}

.wk-hall-benefit-toolbar {
  min-height: 60px;
  margin-top: 1px;
  margin-bottom: 20px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  border-radius: 0 0 10px 10px;
}

.wk-hall-benefit-toolbar .filters,
.wk-hall-benefit-toolbar .actions {
  display: flex;
  align-items: center;
}

.wk-hall-benefit-toolbar .filters {
  width: 844px;
  min-width: 0;
  gap: 26px;
  flex: 1 1 844px;
}

.wk-hall-benefit-toolbar .actions {
  width: 378px;
  gap: 8px;
  flex: 0 0 378px;
}

.wk-hall-benefit-toolbar .filters .filter-field {
  width: 264px;
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 264px;
  box-sizing: border-box;
  color: #333;
}

.wk-hall-benefit-toolbar .filters .filter-field > span {
  flex: 0 0 auto;
  font-size: 14px;
}

.wk-hall-benefit-toolbar .wk-hall-benefit-select {
  width: 198px;
  min-width: 0;
  height: 40px;
  padding: 0 10px 0 12px;
  flex: 1 1 198px;
  box-sizing: border-box;
  border: 1px solid rgba(126, 134, 142, 0.2);
  border-radius: 4px;
}

.wk-hall-benefit-toolbar .wk-hall-benefit-select:focus-within {
  border-color: #9d26ff;
  box-shadow: 0 0 0 2px rgba(157, 38, 255, 0.08);
}

.wk-hall-benefit-select {
  min-width: 0;
  position: relative;
}

.wk-hall-benefit-select-trigger {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333;
  cursor: pointer;
  text-align: left;
}

.wk-hall-benefit-select.is-filter.is-empty
  .wk-hall-benefit-select-trigger {
  color: rgba(153, 153, 153, 0.8);
}

.wk-hall-benefit-select.is-form.is-empty .wk-hall-benefit-select-trigger {
  color: #aaa;
}

.wk-hall-benefit-select-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-benefit-select-trigger > img {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform 0.16s ease;
}

.wk-hall-benefit-select-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.wk-hall-benefit-select.is-form {
  width: 100%;
  height: 55px;
}

.wk-hall-benefit-select.is-form .wk-hall-benefit-select-trigger {
  justify-content: flex-end;
  text-align: right;
  font-size: 14px;
}

.wk-hall-benefit-select.is-form .wk-hall-benefit-select-trigger > span {
  margin-left: auto;
}

.wk-hall-benefit-select.is-form .wk-hall-benefit-select-trigger > img {
  transform: rotate(-90deg);
}

.wk-hall-benefit-select-menu {
  width: 100px;
  min-width: 100px;
  max-width: min(220px, calc(100vw - 16px));
  position: fixed;
  z-index: 1400;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  color: #000;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.08);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
}

.wk-hall-benefit-select-menu.placement-top {
  transform: translateY(-100%);
}

.wk-hall-benefit-select-menu .menu-arrow {
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: 0;
  top: -6px;
  right: 45px;
  border-top: 1px solid #d9d9d9;
  border-left: 1px solid #d9d9d9;
  background: #fff;
  transform: rotate(45deg);
}

.wk-hall-benefit-select-menu.placement-top .menu-arrow {
  top: auto;
  bottom: -6px;
  transform: rotate(225deg);
}

.wk-hall-benefit-select-menu .menu-options {
  max-height: calc(100vh - 32px);
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 5px;
  background: #fff;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wk-hall-benefit-select-menu .menu-options::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.wk-hall-benefit-select-menu [role="option"] {
  width: 100%;
  height: 35px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}

.wk-hall-benefit-select-menu [role="option"].active:not(.selected) {
  background: #f6efff;
}

.wk-hall-benefit-select-menu [role="option"].selected {
  width: calc(100% - 2px);
  max-width: 96px;
  height: 31px;
  margin: 2px auto;
  border-radius: 4px;
  background: #9d26ff;
  color: #fff;
}

.wk-hall-benefit-toolbar .actions button {
  min-width: 65px;
  width: 65px;
  height: 40px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(126, 134, 142, 0.2);
  border-radius: 4px;
  background: #fff;
  color: #555b62;
  cursor: pointer;
  box-sizing: border-box;
  font-size: 15px;
  white-space: nowrap;
}

.wk-hall-benefit-toolbar .actions button.query,
.wk-hall-benefit-toolbar .actions button.save-template {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #fff;
}

.wk-hall-benefit-toolbar .actions button.save-template {
  min-width: 88px;
  width: 88px;
  padding: 0 14px;
}

.wk-hall-benefit-toolbar .actions button.icon {
  min-width: 40px;
  width: 40px;
  padding: 0;
}

.wk-hall-benefit-toolbar .actions button.import-template {
  position: relative;
  overflow: visible;
  border: 0;
  background: transparent;
}

.wk-hall-benefit-toolbar .actions button.import-template::after {
  width: 76px;
  height: 26px;
  position: absolute;
  bottom: 35px;
  left: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0.6px solid #e6e6e6;
  border-radius: 4px;
  background: #fff;
  color: #666;
  content: attr(data-tooltip);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.wk-hall-benefit-toolbar
  .actions
  button.import-template:hover:not(:disabled)::after,
.wk-hall-benefit-toolbar
  .actions
  button.import-template:focus-visible:not(:disabled)::after {
  opacity: 1;
}

.wk-hall-benefit-toolbar .actions button:hover:not(:disabled) {
  border-color: #9d26ff;
  background: rgba(157, 38, 255, 0.08);
  color: #6b10ff;
}

.wk-hall-benefit-toolbar .actions button.query:hover:not(:disabled),
.wk-hall-benefit-toolbar .actions button.save-template:hover:not(:disabled) {
  border-color: transparent;
  background: #5200d4;
  color: #fff;
}

.wk-hall-benefit-toolbar
  .actions
  button.import-template:hover:not(:disabled),
.wk-hall-benefit-toolbar
  .actions
  button.import-template:focus-visible:not(:disabled) {
  border: 0;
  background: transparent;
}

.wk-hall-benefit-toolbar .actions button:disabled,
.wk-hall-benefit-group .row-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.wk-hall-benefit-toolbar .actions button[aria-label="导出 Excel"] img {
  width: 20px;
  height: 20px;
}

.wk-hall-benefit-toolbar .actions button[aria-label="新增福利规则"] img {
  width: 16px;
  height: 16px;
}

.wk-hall-benefit-toolbar .actions button.import-template img {
  width: 40px;
  height: 40px;
  position: absolute;
  inset: 0;
}

.wk-hall-benefit-toolbar .actions button.import-template .hover-icon {
  opacity: 0;
}

.wk-hall-benefit-toolbar
  .actions
  button.import-template:hover:not(:disabled)
  .default-icon,
.wk-hall-benefit-toolbar
  .actions
  button.import-template:focus-visible:not(:disabled)
  .default-icon {
  opacity: 0;
}

.wk-hall-benefit-toolbar
  .actions
  button.import-template:hover:not(:disabled)
  .hover-icon,
.wk-hall-benefit-toolbar
  .actions
  button.import-template:focus-visible:not(:disabled)
  .hover-icon {
  opacity: 1;
}

.wk-hall-benefit-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wk-hall-benefit-group {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.wk-hall-benefit-group > header {
  height: 46px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #f0f1f3;
}

.wk-hall-benefit-group > header::before {
  width: 2px;
  height: 46px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
  background: #9d26ff;
  content: "";
}

.wk-hall-benefit-group .group-toggle {
  min-width: 0;
  height: 100%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  border: 0;
  background: transparent;
  color: #333;
  cursor: pointer;
  text-align: left;
}

.wk-hall-benefit-group .group-toggle strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
}

.wk-hall-benefit-group .group-chevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform 0.16s ease;
}

.wk-hall-benefit-group .group-chevron::before {
  width: 16px;
  height: 8px;
  border-radius: 1px;
  background: #333;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: "";
}

.wk-hall-benefit-group .group-toggle[aria-expanded="false"] .group-chevron {
  transform: rotate(180deg);
}

.wk-hall-benefit-group .group-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.wk-hall-benefit-group .group-meta .cycle {
  padding: 4px 6px;
  border-radius: 2px;
  background: #f1e8ff;
  color: #9d26ff;
  font-size: 11px;
  font-style: normal;
  line-height: 12px;
}

.wk-hall-benefit-group .group-meta .cycle.is-weekly {
  background: #ffeded;
  color: #ff0000;
}

.wk-hall-benefit-group .group-meta i {
  color: #333;
  font-size: 16px;
  font-style: normal;
  line-height: 20px;
}

.wk-hall-benefit-group .table-wrap {
  overflow-x: auto;
}

.wk-hall-benefit-group table {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
  border-collapse: collapse;
}

.wk-hall-benefit-group th,
.wk-hall-benefit-group td {
  height: 56px;
  padding: 16px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #edf0f2;
  color: #000;
  text-align: left;
  word-break: break-word;
  font-size: 14px;
}

.wk-hall-benefit-group th {
  height: 51px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #fafbfc;
  color: #333;
  font-size: 15px;
  font-weight: 500;
}

.wk-hall-benefit-group th:last-child,
.wk-hall-benefit-group td:last-child {
  width: 135px;
}

.wk-hall-benefit-group tbody tr:last-child td {
  border-bottom: 0;
}

.wk-hall-benefit-group .row-actions {
  display: inline-flex;
  align-items: center;
  gap: 25px;
}

.wk-hall-benefit-group .row-actions button {
  width: 16px;
  height: 16px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.wk-hall-benefit-group .row-actions button:hover:not(:disabled) {
  filter: brightness(0.72);
}

.wk-hall-benefit-group .row-actions img {
  width: 16px;
  height: 16px;
}

.wk-hall-benefit-state {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 10px;
  background: #fff;
  color: #8a9097;
}

.wk-hall-benefit-state .wk-hall-benefit-menu-icon {
  width: 42px;
  height: 42px;
  opacity: 0.45;
}

.wk-hall-benefit-state strong {
  font-weight: 400;
}

.wk-hall-benefit-state button {
  height: 36px;
  padding: 0 18px;
  border: 1px solid #9d26ff;
  border-radius: 4px;
  background: #fff;
  color: #6b10ff;
  cursor: pointer;
}

.wk-hall-benefit-state.error {
  color: #d84b4b;
}

.wk-hall-benefit-disclaimer {
  margin: 14px 2px 0;
  color: #9b9fa5;
  font-size: 12px;
}

.wk-hall-benefit-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px 16px;
  gap: 14px 16px;
}

.wk-hall-benefit-form label,
.wk-hall-benefit-form .wk-hall-benefit-form-field {
  height: 55px;
  min-width: 0;
  padding: 0 12px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  position: relative;
  box-sizing: border-box;
  border-radius: 10px;
  background: #f6f6f6;
  color: #333;
  font-size: 14px;
}

.wk-hall-benefit-form .full-row {
  grid-column: 1 / -1;
}

.wk-hall-benefit-form input,
.wk-hall-benefit-form .wk-hall-benefit-select {
  width: 100%;
  height: 55px;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333;
  text-align: right;
  font-size: 14px;
}

.wk-hall-benefit-form label:focus-within,
.wk-hall-benefit-form .wk-hall-benefit-form-field:focus-within {
  box-shadow: 0 0 0 2px rgba(157, 38, 255, 0.1);
}

.wk-hall-benefit-form input::-moz-placeholder {
  color: #aaa;
}

.wk-hall-benefit-form input::placeholder {
  color: #aaa;
}

.wk-hall-benefit-form label.with-hint {
  margin-bottom: 20px;
}

.wk-hall-benefit-form label small {
  min-height: 16px;
  position: absolute;
  top: 61px;
  left: 0;
  color: #999;
  font-size: 12px;
  line-height: 16px;
}

.wk-hall-benefit-form-error {
  grid-column: 1 / -1;
  margin: -3px 0 0;
  color: #e5484d;
  font-size: 12px;
}

.wk-hall-benefit-hall-dialog {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wk-hall-benefit-hall-dialog > label {
  height: 46px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #9d26ff;
  border-radius: 8px;
}

.wk-hall-benefit-hall-dialog > div {
  min-height: 0;
  margin-top: 10px;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
}

.wk-hall-benefit-hall-dialog > div > button {
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: #333;
  text-align: left;
  cursor: pointer;
}

.wk-hall-benefit-hall-dialog > div > button:hover,
.wk-hall-benefit-hall-dialog > div > button[aria-checked="true"] {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #fff;
}

.wk-hall-benefit-hall-dialog button strong {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

/* 807:16036 删除确认弹窗：盾牌 58px、标题 16/24、说明 14/22，均居中排列。 */
.wk-hall-benefit-delete-copy {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(23, 26, 29, 0.6);
  text-align: center;
  font-size: 14px;
  line-height: 22px;
}

.wk-hall-benefit-delete-shield {
  width: 58px;
  height: 58px;
  display: block;
  flex: none;
}

.wk-hall-benefit-delete-copy strong {
  margin-top: 3px;
  color: #171a1d;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.wk-hall-benefit-delete-copy p {
  margin: 8px 0 0;
}

.wk-hall-data-center-dialog.size-benefit-delete
  > .wk-hall-data-center-dialog-body {
  padding: 24px 16px 0;
}

.wk-hall-data-center-dialog.size-benefit-delete > footer {
  padding-top: 8px;
}

.wk-hall-data-center-dialog.size-benefit-template {
  padding: 20px 20px 0;
  gap: 20px;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.wk-hall-data-center-dialog.size-benefit-template > header {
  width: 100%;
  height: 14px;
  min-height: 14px;
  padding: 0 10px;
  box-sizing: border-box;
  border-bottom: 0;
}

.wk-hall-data-center-dialog.size-benefit-template > header strong {
  color: #000;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
}

.wk-hall-data-center-dialog.size-benefit-template
  > .wk-hall-data-center-dialog-body {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.wk-hall-data-center-dialog.size-benefit-template > footer {
  width: calc(100% - 6px);
  height: 72px;
  min-height: 72px;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  box-sizing: border-box;
  border-top: 0.6px solid rgba(0, 0, 0, 0.05);
}

.wk-hall-data-center-dialog.size-benefit-template > footer button {
  width: 129px;
  height: 40px;
  flex: 0 0 129px;
  border: 1px solid #efefef;
  border-radius: 6px;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.wk-hall-data-center-dialog.size-benefit-template
  > footer
  button.primary {
  border: 0;
  color: #fff;
}

.wk-hall-benefit-template-dialog {
  height: 100%;
  min-height: 0;
  position: relative;
}

.wk-hall-benefit-template-dialog h3 {
  margin: 0 0 10px;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
}

.wk-hall-benefit-template-dialog .source-library {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.wk-hall-benefit-template-dialog .source-library > section + section {
  margin-top: 20px;
}

.wk-hall-benefit-template-dialog .source-all h3 {
  margin-bottom: 20px;
}

.wk-hall-benefit-template-dialog .templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, 144px);
  grid-gap: 20px;
  gap: 20px;
}

.wk-hall-benefit-template-dialog .source-card {
  width: 144px;
  height: 133px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: #333;
  text-align: center;
  cursor: pointer;
}

.wk-hall-benefit-template-dialog .source-card .template-thumbnail {
  width: 144px;
  height: 108px;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #ececec;
  border-radius: 6px;
  background: #fff;
}

.wk-hall-benefit-template-dialog .source-card .template-thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-benefit-template-dialog .source-card:hover .template-thumbnail,
.wk-hall-benefit-template-dialog
  .source-card[aria-pressed="true"]
  .template-thumbnail {
  border-color: #6b10ff;
}

.wk-hall-benefit-template-dialog .source-card > strong {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-benefit-template-dialog .section-empty {
  height: 42px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #e3e5e8;
  border-radius: 6px;
  color: #a1a5ab;
  font-size: 12px;
}

.wk-hall-benefit-template-dialog .source-state {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: #8d9199;
  text-align: center;
  font-size: 13px;
}

.wk-hall-benefit-template-dialog .source-state {
  height: 100%;
  min-height: 0;
}

.wk-hall-benefit-template-dialog .source-state.error,
.wk-hall-benefit-template-dialog .template-selection-status.error {
  color: #d84b4b;
}

.wk-hall-benefit-template-dialog .source-state button,
.wk-hall-benefit-template-dialog .template-selection-status button {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #9d26ff;
  border-radius: 5px;
  background: #fff;
  color: #6b10ff;
  cursor: pointer;
}

.wk-hall-benefit-template-dialog .template-selection-status {
  min-height: 32px;
  padding: 4px 8px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.94);
  color: #8d9199;
  font-size: 12px;
}

.wk-hall-benefit-template-dialog .source-preview {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #edeef1;
}

.wk-hall-benefit-template-dialog .source-preview > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wk-hall-benefit-template-dialog .source-preview > header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wk-hall-benefit-template-dialog .source-preview > header strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.wk-hall-benefit-template-dialog .source-preview > header span {
  padding: 2px 6px;
  flex: 0 0 auto;
  border-radius: 3px;
  background: #f1e8ff;
  color: #6b10ff;
  font-size: 11px;
}

.wk-hall-benefit-template-dialog .source-preview > header small,
.wk-hall-benefit-template-dialog .source-preview > p {
  color: #8d9199;
  font-size: 12px;
}

.wk-hall-benefit-template-dialog .source-preview > p {
  margin: 8px 0 0;
}

.wk-hall-benefit-template-dialog .preview-table-wrap {
  max-height: 200px;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #eceef1;
  border-radius: 6px;
}

.wk-hall-benefit-template-dialog .preview-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.wk-hall-benefit-template-dialog .preview-table-wrap th,
.wk-hall-benefit-template-dialog .preview-table-wrap td {
  height: 34px;
  padding: 0 8px;
  overflow: hidden;
  border-bottom: 1px solid #f0f1f3;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-benefit-template-dialog .preview-table-wrap th {
  position: sticky;
  top: 0;
  background: #f7f8fa;
  color: #555b62;
  font-weight: 500;
}

.wk-hall-benefit-template-dialog .preview-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.wk-hall-benefit-delete-copy.source-confirm-copy {
  padding: 0 8px;
  font-size: 12px;
}

body[theme-mode="dark"] .wk-hall-benefit-main,
body[theme-mode="dark"] .wk-hall-benefit-scroll {
  background: #1e1e1f;
  color: #f1f3f5;
}

body[theme-mode="dark"] .wk-hall-benefit-header,
body[theme-mode="dark"] .wk-hall-benefit-hall-row,
body[theme-mode="dark"] .wk-hall-benefit-toolbar,
body[theme-mode="dark"] .wk-hall-benefit-group,
body[theme-mode="dark"] .wk-hall-benefit-state {
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-hall-benefit-hall-picker > span,
body[theme-mode="dark"] .wk-hall-benefit-toolbar .filter-field,
body[theme-mode="dark"] .wk-hall-benefit-group .group-toggle,
body[theme-mode="dark"] .wk-hall-benefit-group .group-meta i,
body[theme-mode="dark"] .wk-hall-benefit-group th,
body[theme-mode="dark"] .wk-hall-benefit-group td {
  color: rgba(255, 255, 255, 0.88);
}

body[theme-mode="dark"] .wk-hall-benefit-group .group-chevron::before {
  background: rgba(255, 255, 255, 0.88);
}

body[theme-mode="dark"] .wk-hall-benefit-group th,
body[theme-mode="dark"] .wk-hall-benefit-search .search-action {
  background: #262628;
}

body[theme-mode="dark"] .wk-hall-benefit-select-menu,
body[theme-mode="dark"] .wk-hall-benefit-select-menu .menu-options,
body[theme-mode="dark"] .wk-hall-benefit-select-menu .menu-arrow {
  background: #2f2f30;
  color: #f1f3f5;
}

body[theme-mode="dark"]
  .wk-hall-benefit-select-menu
  [role="option"]:not(.selected) {
  color: #f1f3f5;
}

body[theme-mode="dark"] .wk-hall-benefit-template-dialog h3,
body[theme-mode="dark"] .wk-hall-benefit-template-dialog .source-card,
body[theme-mode="dark"] .wk-hall-benefit-template-dialog .source-card > strong,
body[theme-mode="dark"] .wk-hall-benefit-template-dialog .source-preview strong,
body[theme-mode="dark"]
  .wk-hall-benefit-template-dialog
  .preview-table-wrap
  td {
  color: rgba(255, 255, 255, 0.88);
}

body[theme-mode="dark"]
  .wk-hall-benefit-template-dialog
  .source-card
  .template-thumbnail,
body[theme-mode="dark"] .wk-hall-benefit-template-dialog .source-state button,
body[theme-mode="dark"]
  .wk-hall-benefit-template-dialog
  .template-selection-status
  button {
  border-color: #444444;
  background: #262628;
}

body[theme-mode="dark"]
  .wk-hall-benefit-template-dialog
  .preview-table-wrap
  th {
  background: #262628;
  color: rgba(255, 255, 255, 0.62);
}

body[theme-mode="dark"] .wk-hall-benefit-template-dialog .section-empty,
body[theme-mode="dark"] .wk-hall-benefit-template-dialog .source-preview,
body[theme-mode="dark"] .wk-hall-benefit-template-dialog .preview-table-wrap,
body[theme-mode="dark"] .wk-hall-benefit-template-dialog .preview-table-wrap th,
body[theme-mode="dark"]
  .wk-hall-benefit-template-dialog
  .preview-table-wrap
  td {
  border-color: #3b3e45;
}

body[theme-mode="dark"] .wk-hall-benefit-template-dialog .source-state button,
body[theme-mode="dark"]
  .wk-hall-benefit-template-dialog
  .template-selection-status
  button {
  color: #c9a9ff;
}

body[theme-mode="dark"]
  .wk-hall-data-center-dialog.size-benefit-template
  > header
  strong,
body[theme-mode="dark"]
  .wk-hall-data-center-dialog.size-benefit-template
  > footer
  button:not(.primary) {
  color: rgba(255, 255, 255, 0.88);
}

body[theme-mode="dark"]
  .wk-hall-data-center-dialog.size-benefit-template
  > footer
  button:not(.primary),
body[theme-mode="dark"]
  .wk-hall-benefit-template-dialog
  .template-selection-status {
  border-color: #444444;
  background: rgba(44, 47, 52, 0.96);
}

body[theme-mode="dark"] .wk-hall-benefit-delete-copy {
  color: rgba(255, 255, 255, 0.6);
}

body[theme-mode="dark"] .wk-hall-benefit-delete-copy strong {
  color: rgba(255, 255, 255, 0.88);
}

@container benefit-rules (max-width: 1120px) {
  .wk-hall-benefit-toolbar {
    flex-wrap: wrap;
  }

  .wk-hall-benefit-toolbar .filters {
    width: 100%;
    flex: 1 1 100%;
  }

  .wk-hall-benefit-toolbar .actions {
    margin-left: auto;
  }
}

@container benefit-rules (max-width: 720px) {
  .wk-hall-benefit-hall-row {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .wk-hall-benefit-hall-picker,
  .wk-hall-benefit-search {
    width: 100%;
  }

  .wk-hall-benefit-hall-trigger {
    width: auto;
    min-width: 0;
    flex: 1 1;
  }

  .wk-hall-benefit-toolbar .filters {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .wk-hall-benefit-toolbar .filters .filter-field {
    width: 100%;
    flex: 0 0 40px;
  }

  .wk-hall-benefit-toolbar .actions {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1315px) {
    .wk-hall-benefit-toolbar {
      flex-wrap: wrap;
    }

    .wk-hall-benefit-toolbar .filters {
      width: 100%;
      flex: 1 1 100%;
    }

    .wk-hall-benefit-toolbar .actions {
      margin-left: auto;
    }
  }
}

@media (max-width: 760px) {
  .wk-hall-benefit-form {
    grid-template-columns: 1fr;
  }

  .wk-hall-benefit-form .full-row,
  .wk-hall-benefit-form-error {
    grid-column: auto;
  }
}

/* Official Alimama ShuHeiTi package. See ../assets/fonts/alimama-shuheiti/LICENSE.txt. */
@font-face {
  font-family: "Alimama ShuHeiTi";
  src: url(../../static/media/AlimamaShuHeiTi-Bold.07ba6db10d150b84b341.woff2)
    format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Official Google Fonts package. See ../assets/fonts/bebas-neue/OFL.txt. */
@font-face {
  font-family: "Bebas Neue";
  src: url(../../static/media/BebasNeue-Regular.0eb75a1156592e0abf2f.ttf)
    format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.wk-hall-root {
  --wk-hall-card-background: var(--wk-bkcolor);
  --wk-hall-gap-background: #f8f8f8;
  --wk-hall-divider: #f0f0f0;
  --wk-hall-control-background: #f7f7f7;
  --wk-hall-control-border: #ececec;

  width: 100%;
  color: #fff;
  color: var(--wk-textcolor, #fff);
}

/* Hall 根节点要同时容纳普通群的多个原生设置分块。 */
.wk-channelsetting-content > .wk-sections:has(.wk-hall-basic-root) {
  --wk-hall-card-background: var(--wk-bkcolor);
  --wk-hall-gap-background: #f8f8f8;
  --wk-hall-divider: #f0f0f0;

  box-sizing: border-box;
  min-height: 100%;
  padding: 16px 12px 40px;
  background: #f8f8f8;
  background: var(--wk-hall-gap-background, #f8f8f8);
}

.wk-channelsetting-content
  > .wk-sections:has(.wk-hall-basic-root)
  > .wk-section {
  overflow: hidden;
  border-radius: 10px;
  background: transparent;
}

.wk-hall-group-summary-card {
  display: flex;
  width: 100%;
  min-height: 95px;
  padding: 10px;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  border-radius: 10px;
  background: var(--wk-bkcolor);
  background: var(--wk-hall-card-background, var(--wk-bkcolor));
  border: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.wk-hall-group-summary-card:hover {
  background: rgba(112, 117, 121, 0.06);
}

.wk-hall-group-summary-card:focus-visible {
  outline: 2px solid #8b5cf6;
  outline: 2px solid var(--wk-active-textcolor, #8b5cf6);
  outline-offset: -2px;
}

.wk-hall-group-summary-body {
  display: flex;
  min-width: 0;
  height: 75px;
  flex: 1 1;
  align-items: flex-start;
  gap: 10px;
}

.wk-hall-group-summary-avatar {
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  border-radius: 19px;
  background: #e7e7e7;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-group-summary-content {
  display: flex;
  min-width: 0;
  flex: 1 1;
  flex-direction: column;
  gap: 9px;
}

.wk-hall-group-summary-content > strong {
  overflow: hidden;
  color: #000000;
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-group-summary-meta {
  display: flex;
  height: 20px;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: #999999;
  color: var(--wk-color-font-tip, #999999);
  white-space: nowrap;
}

.wk-hall-group-summary-platform {
  display: inline-flex;
  box-sizing: border-box;
  height: 20px;
  max-width: 82px;
  padding: 4px 6px;
  flex: 0 1 auto;
  align-items: center;
  border-radius: 4px;
  background: linear-gradient(132deg, #f5e4c1 0%, #fbf4e8 50%, #fae9d1 100%);
  color: #5a432b;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}

.wk-hall-group-summary-platform,
.wk-hall-group-summary-platform > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wk-hall-room-type-badge {
  display: inline-flex;
  box-sizing: border-box;
  width: 48px;
  height: 20px;
  padding: 2px;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  border-radius: 30px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
  line-height: 12px;
}

.wk-hall-room-type-badge.is-female {
  background: linear-gradient(90deg, #ff6ee7 0%, #ff24b3 100%);
}

.wk-hall-room-type-badge.is-song {
  background: linear-gradient(90deg, #ff7f0b 0%, #ff3c26 100%);
}

.wk-hall-room-type-badge.is-social {
  background: linear-gradient(90deg, #ff0044 0%, #ff6159 100%);
}

.wk-hall-room-type-badge.is-entertainment {
  background: linear-gradient(90deg, #1dbbfc 0%, #65f8ff 100%);
}

.wk-hall-room-type-badge.is-order {
  background: linear-gradient(90deg, #0044ff 0%, #6c89ff 100%);
}

.wk-hall-room-type-badge > img {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.wk-hall-room-type-badge > span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-group-summary-id {
  display: inline-flex;
  min-width: 0;
  height: 18px;
  align-items: center;
  gap: 4px;
  color: #999999;
  font-size: 13px;
  font-weight: 400;
  line-height: 12px;
}

.wk-hall-group-summary-id > i {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #d1d4db;
  color: #ffffff;
  font-family: Montserrat, var(--wk-font-family);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 12px;
}

.wk-hall-group-summary-id > span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-group-summary-guild {
  display: flex;
  min-width: 0;
  height: 22px;
  align-items: center;
}

.wk-hall-group-summary-guild-badge {
  max-width: 100%;
}

.wk-hall-room-profile-arrow {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.wk-hall-group-summary-arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.wk-route:has(.wk-hall-room-profile-page),
.wk-route:has(.wk-hall-room-platform-page),
.wk-route:has(.wk-hall-task-settings-page),
.wk-route:has(.wk-hall-copy-queue-page) {
  --wk-height-route-header: 52px;
}

.wk-route:has(.wk-hall-room-profile-page) .wk-route-header,
.wk-route:has(.wk-hall-room-platform-page) .wk-route-header,
.wk-route:has(.wk-hall-task-settings-page) .wk-route-header,
.wk-route:has(.wk-hall-copy-queue-page) .wk-route-header {
  box-sizing: border-box;
  height: 52px;
  padding: 16px 12px 0;
  background: #f8f8f8;
  background: var(--wk-hall-gap-background, #f8f8f8);
}

.wk-route:has(.wk-hall-room-profile-page) .wk-route-header-close,
.wk-route:has(.wk-hall-room-platform-page) .wk-route-header-close,
.wk-route:has(.wk-hall-task-settings-page) .wk-route-header-close,
.wk-route:has(.wk-hall-copy-queue-page) .wk-route-header-close {
  width: 16px;
  height: 36px;
  flex: 0 0 16px;
  border-radius: 4px;
}

.wk-route:has(.wk-hall-room-profile-page)
  .wk-route-header-close-icon.wk-state-back,
.wk-route:has(.wk-hall-room-platform-page)
  .wk-route-header-close-icon.wk-state-back,
.wk-route:has(.wk-hall-task-settings-page)
  .wk-route-header-close-icon.wk-state-back,
.wk-route:has(.wk-hall-copy-queue-page)
  .wk-route-header-close-icon.wk-state-back {
  width: 9px;
  height: 9px;
  border-bottom: 1.5px solid #333333;
  border-left: 1.5px solid #333333;
  border-radius: 1px;
  background: transparent;
  transform: rotate(45deg);
}

.wk-route:has(.wk-hall-room-profile-page)
  .wk-route-header-close-icon.wk-state-back::before,
.wk-route:has(.wk-hall-room-profile-page)
  .wk-route-header-close-icon.wk-state-back::after,
.wk-route:has(.wk-hall-room-platform-page)
  .wk-route-header-close-icon.wk-state-back::before,
.wk-route:has(.wk-hall-room-platform-page)
  .wk-route-header-close-icon.wk-state-back::after,
.wk-route:has(.wk-hall-task-settings-page)
  .wk-route-header-close-icon.wk-state-back::before,
.wk-route:has(.wk-hall-task-settings-page)
  .wk-route-header-close-icon.wk-state-back::after,
.wk-route:has(.wk-hall-copy-queue-page)
  .wk-route-header-close-icon.wk-state-back::before,
.wk-route:has(.wk-hall-copy-queue-page)
  .wk-route-header-close-icon.wk-state-back::after {
  display: none;
}

.wk-route:has(.wk-hall-room-profile-page) .wk-route-header-title-box,
.wk-route:has(.wk-hall-room-platform-page) .wk-route-header-title-box,
.wk-route:has(.wk-hall-task-settings-page) .wk-route-header-title-box,
.wk-route:has(.wk-hall-copy-queue-page) .wk-route-header-title-box {
  height: 36px;
}

.wk-route:has(.wk-hall-room-profile-page) .wk-route-header-title,
.wk-route:has(.wk-hall-room-profile-page) .wk-route-header-title-next,
.wk-route:has(.wk-hall-room-platform-page) .wk-route-header-title,
.wk-route:has(.wk-hall-room-platform-page) .wk-route-header-title-next,
.wk-route:has(.wk-hall-task-settings-page) .wk-route-header-title,
.wk-route:has(.wk-hall-task-settings-page) .wk-route-header-title-next,
.wk-route:has(.wk-hall-copy-queue-page) .wk-route-header-title,
.wk-route:has(.wk-hall-copy-queue-page) .wk-route-header-title-next {
  margin-left: 8px;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 36px;
}

.wk-route:has(.wk-hall-room-platform-page)
  .wk-route-header-right-view-open
  .semi-button {
  min-width: 78px;
  height: 28px;
  padding: 6px 4px 7px 9px;
  border: 0;
  border-radius: 4px;
  background: rgba(157, 38, 255, 0.1);
  color: #9d26ff;
  font-family: var(--wk-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
}

.wk-route:has(.wk-hall-room-platform-page)
  .wk-route-header-right-view-open
  .semi-button:hover {
  background: rgba(157, 38, 255, 0.16);
  color: #9d26ff;
}

.wk-hall-room-profile-page,
.wk-hall-room-platform-page,
.wk-hall-task-settings-page,
.wk-hall-copy-queue-page {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding: 10px 12px 40px;
  background: #f8f8f8;
  background: var(--wk-hall-gap-background, #f8f8f8);
  color: #333333;
  color: var(--wk-textcolor, #333333);
  font-family: var(--wk-font-family);
}

.wk-hall-copy-queue-page {
  display: flex;
  height: 100%;
  padding-bottom: 16px;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.wk-hall-copy-queue-search {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 0 12px;
  align-items: center;
  grid-template-columns: 14px minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
  border: 1px solid #9d26ff;
  border-radius: 8px;
  background: #ffffff;
}

.wk-hall-copy-queue-search > img {
  width: 14px;
  height: 14px;
  opacity: 0.72;
}

.wk-hall-copy-queue-search > input {
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333333;
  font-family: var(--wk-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 12px;
}

.wk-hall-copy-queue-search > input::-moz-placeholder {
  color: #999999;
  opacity: 1;
}

.wk-hall-copy-queue-search > input::placeholder {
  color: #999999;
  opacity: 1;
}

.wk-hall-copy-queue-search > input::-webkit-search-cancel-button {
  display: none;
}

.wk-hall-copy-queue-list {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.wk-hall-copy-queue-card {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 62px;
  min-height: 62px;
  padding: 10px 12px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  font-family: var(--wk-font-family);
  text-align: left;
}

.wk-hall-copy-queue-card:hover:not(:disabled) {
  background: #fbf7ff;
}

.wk-hall-copy-queue-card:focus-visible {
  outline: 2px solid rgba(157, 38, 255, 0.45);
  outline-offset: -2px;
}

.wk-hall-copy-queue-card:disabled {
  cursor: default;
  opacity: 0.55;
}

.wk-hall-copy-queue-avatar {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0e4ff 0%, #e1cdff 100%);
  color: #7c3aed;
  font-size: 16px;
  line-height: 42px;
}

.wk-hall-copy-queue-avatar > img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-copy-queue-name {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-copy-queue-state {
  display: flex;
  min-height: 160px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  border-radius: 10px;
  background: #ffffff;
  color: #999999;
  font-size: 14px;
}

.wk-hall-copy-queue-state > button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #9d26ff;
  cursor: pointer;
  font-family: var(--wk-font-family);
}

.wk-hall-copy-queue-confirm-modal .semi-modal {
  width: 260px;
  max-width: calc(100vw - 24px);
}

.wk-hall-copy-queue-confirm-modal .semi-modal-content {
  overflow: hidden;
  height: 225px;
  padding: 0;
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    #f8f0ff 0%,
    #ffffff 17.0733%,
    #ffffff 100%
  );
}

.wk-hall-copy-queue-confirm-modal .semi-modal-body-wrapper {
  width: 100%;
  height: 225px;
  margin: 0;
}

.wk-hall-copy-queue-confirm-modal .semi-modal-body {
  width: 100%;
  height: 225px;
  margin: 0;
  padding: 0;
}

.wk-hall-copy-queue-confirm {
  display: flex;
  box-sizing: border-box;
  width: 260px;
  height: 225px;
  padding: 16px;
  flex-direction: column;
  justify-content: space-between;
  color: #171a1d;
  font-family: var(--wk-font-family);
}

.wk-hall-copy-queue-confirm-body {
  display: flex;
  width: 228px;
  height: 153px;
  align-items: center;
  flex-direction: column;
}

.wk-hall-copy-queue-confirm-body > img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}

.wk-hall-copy-queue-confirm-body > strong {
  width: 228px;
  margin-top: 11px;
  color: #171a1d;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

.wk-hall-copy-queue-confirm-body > p {
  width: 228px;
  margin: 8px 0 0;
  color: rgba(23, 26, 29, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
}

.wk-hall-copy-queue-confirm-actions {
  display: flex;
  width: 228px;
  height: 32px;
  gap: 12px;
}

.wk-hall-copy-queue-confirm-actions > button {
  width: 108px;
  height: 32px;
  padding: 0;
  border: 1px solid #efefef;
  border-radius: 6px;
  background: transparent;
  color: #333333;
  cursor: pointer;
  font-family: var(--wk-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.wk-hall-copy-queue-confirm-actions > button.primary {
  border: 0;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-hall-copy-queue-confirm-actions > button:hover:not(:disabled) {
  filter: brightness(0.96);
}

.wk-hall-copy-queue-confirm-actions > button:focus-visible {
  outline: 2px solid rgba(157, 38, 255, 0.45);
  outline-offset: 2px;
}

.wk-hall-copy-queue-confirm-actions > button:disabled {
  cursor: default;
  opacity: 0.5;
}

.wk-hall-task-settings-entry {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  min-height: 56px;
  padding: 0 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: var(--wk-bkcolor);
  background: var(--wk-hall-card-background, var(--wk-bkcolor));
  color: #333333;
  color: var(--wk-textcolor, #333333);
  cursor: pointer;
  font-family: var(--wk-font-family);
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
  text-align: left;
}

.wk-hall-task-settings-entry:hover:not(:disabled) {
  background: rgba(112, 117, 121, 0.06);
}

.wk-hall-task-settings-entry:focus-visible {
  outline: 2px solid #8b5cf6;
  outline: 2px solid var(--wk-active-textcolor, #8b5cf6);
  outline-offset: -2px;
}

.wk-hall-task-settings-entry:disabled {
  cursor: default;
  opacity: 0.5;
}

.wk-hall-task-settings-entry-value {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  color: #999999;
  color: var(--wk-color-font-tip, #999999);
  font-size: 13px;
  line-height: 15px;
}

.wk-hall-task-settings-entry-value > i {
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.wk-hall-task-settings-page {
  position: relative;
  display: flex;
  overflow: auto;
  flex-direction: column;
  gap: 10px;
}

.wk-hall-task-settings-card {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 516px;
  min-height: 516px;
  padding: 20px 12px 12px;
  flex-direction: column;
  gap: 10px;
  border-radius: 10px;
  background: #ffffff;
  background: var(--wk-hall-card-background, #ffffff);
}

.wk-hall-task-settings-card > span {
  height: 14px;
  flex: 0 0 14px;
  color: #333333;
  color: var(--wk-textcolor, #333333);
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}

.wk-hall-task-settings-card > textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  flex: 1 1;
  padding: 0;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333333;
  color: var(--wk-textcolor, #333333);
  caret-color: #9d26ff;
  font-family: var(--wk-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.wk-hall-task-settings-card > textarea[aria-invalid="true"] {
  -webkit-text-decoration: underline wavy #f04438;
          text-decoration: underline wavy #f04438;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

.wk-hall-task-settings-common-title {
  display: block;
  width: 100%;
  height: 16px;
  flex: 0 0 16px;
  color: #999999;
  color: var(--wk-color-font-tip, #999999);
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-task-settings-presets {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
}

.wk-hall-task-settings-presets > button {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 4px 6px;
  border: 0;
  border-radius: 2px;
  background: #ffffff;
  background: var(--wk-hall-card-background, #ffffff);
  color: #666666;
  cursor: pointer;
  font-family: var(--wk-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 12px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-task-settings-presets > button:hover:not(:disabled),
.wk-hall-task-settings-presets > button:focus-visible {
  background: rgba(157, 38, 255, 0.1);
  color: #9d26ff;
}

.wk-hall-task-settings-presets > button:focus-visible {
  outline: 1px solid #9d26ff;
  outline-offset: -1px;
}

.wk-hall-task-settings-presets > button:disabled {
  cursor: default;
  opacity: 0.6;
}

.wk-hall-task-settings-error {
  position: absolute;
  top: 570px;
  right: 16px;
  max-width: 230px;
  overflow: hidden;
  color: #f04438;
  font-size: 11px;
  line-height: 15px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-room-profile-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-hall-room-profile-row {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 55px;
  min-height: 55px;
  padding: 0 12px;
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 4px;
  gap: 4px;
  border: 0;
  border-radius: 10px;
  background: var(--wk-bkcolor);
  background: var(--wk-hall-card-background, var(--wk-bkcolor));
  box-shadow: inset 0 -0.6px 0 rgba(0, 0, 0, 0.05);
  color: inherit;
  cursor: pointer;
  font-family: var(--wk-font-family);
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
  text-align: left;
}

.wk-hall-room-profile-row:hover:not(:disabled) {
  background: rgba(112, 117, 121, 0.06);
}

.wk-hall-room-profile-row:focus-visible {
  outline: 2px solid #8b5cf6;
  outline: 2px solid var(--wk-active-textcolor, #8b5cf6);
  outline-offset: -2px;
}

.wk-hall-room-profile-row:disabled {
  color: inherit;
  cursor: default;
  opacity: 1;
}

.wk-hall-room-profile-row > strong {
  overflow: hidden;
  color: #444444;
  color: var(--wk-textcolor, #444444);
  font-weight: 400;
  line-height: 15px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-room-profile-name-row,
.wk-hall-room-profile-id-row {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 55px;
  padding: 0 12px;
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--wk-bkcolor);
  background: var(--wk-hall-card-background, var(--wk-bkcolor));
  box-shadow: inset 0 -0.6px 0 rgba(0, 0, 0, 0.05);
  color: #333333;
  color: var(--wk-textcolor, #333333);
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-room-profile-id-row {
  height: 57px;
}

.wk-hall-room-profile-name-row:focus-within,
.wk-hall-room-profile-id-row:focus-within {
  border-color: #9d26ff;
  box-shadow: 0 0 0 1px rgba(157, 38, 255, 0.08),
    inset 0 -0.6px 0 rgba(0, 0, 0, 0.05);
}

.wk-hall-room-profile-name-row > input,
.wk-hall-room-profile-id-row > input {
  min-width: 0;
  width: 100%;
  height: 32px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333333;
  color: var(--wk-textcolor, #333333);
  caret-color: #9d26ff;
  font: inherit;
  line-height: 15px;
  text-align: right;
}

.wk-hall-room-profile-name-row > input::-moz-placeholder, .wk-hall-room-profile-id-row > input::-moz-placeholder {
  color: #999999;
  color: var(--wk-color-font-tip, #999999);
}

.wk-hall-room-profile-name-row > input::placeholder,
.wk-hall-room-profile-id-row > input::placeholder {
  color: #999999;
  color: var(--wk-color-font-tip, #999999);
}

.wk-hall-room-profile-name-row > input:disabled,
.wk-hall-room-profile-id-row > input:disabled {
  color: inherit;
  cursor: default;
  opacity: 1;
}

.wk-hall-room-profile-guild-row {
  display: grid;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 12px;
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
  align-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--wk-bkcolor);
  background: var(--wk-hall-card-background, var(--wk-bkcolor));
  color: #333333;
  color: var(--wk-textcolor, #333333);
  cursor: pointer;
  font-family: var(--wk-font-family);
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
  text-align: left;
}

.wk-hall-room-profile-guild-row.is-uncertified {
  height: 50px;
  min-height: 50px;
}

.wk-hall-room-profile-guild-row:disabled {
  color: inherit;
  cursor: default;
  opacity: 1;
}

.wk-hall-room-profile-guild-row:hover:not(:disabled) {
  background: rgba(112, 117, 121, 0.06);
}

.wk-hall-room-profile-guild-row:focus-visible {
  outline: 2px solid #8b5cf6;
  outline: 2px solid var(--wk-active-textcolor, #8b5cf6);
  outline-offset: -2px;
}

.wk-hall-room-profile-guild-value {
  display: flex;
  overflow: hidden;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.wk-hall-room-profile-guild-logo,
.wk-hall-room-profile-guild-logo-fallback {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-room-profile-guild-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3e8ff;
  color: #7c3aed;
  font-size: 10px;
  font-weight: 600;
}

.wk-hall-room-profile-guild-value > strong {
  overflow: hidden;
  min-width: 0;
  max-width: 90px;
  color: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
  text-overflow: ellipsis;
}

.wk-hall-room-profile-guild-state {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  width: 60px;
  height: 20px;
  flex: 0 0 60px;
  align-items: center;
}

.wk-hall-room-profile-guild-state > img {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 20px;
  flex: 0 0 17px;
}

.wk-hall-room-profile-guild-state > span {
  display: inline-flex;
  box-sizing: border-box;
  width: 58px;
  height: 16px;
  margin-left: -15px;
  padding-left: 17px;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: linear-gradient(90deg, #ff6c00 0%, #ffa11e 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 400;
  line-height: 12px;
}

.wk-hall-room-profile-guild-state.is-uncertified > span {
  background: linear-gradient(90deg, #c4c6ce 0%, #e9ebf1 100%);
}

.wk-hall-room-platform-page {
  display: flex;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  padding-bottom: 8px;
  flex-direction: column;
  gap: 10px;
}

.wk-hall-room-platform-search {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 0 12px;
  align-items: center;
  gap: 8px;
  border: 1px solid #9d26ff;
  border-radius: 8px;
  background: #ffffff;
}

.wk-hall-room-platform-search > img {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.wk-hall-room-platform-search > input {
  min-width: 0;
  height: 100%;
  flex: 1 1;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333333;
  font-family: var(--wk-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 12px;
}

.wk-hall-room-platform-search > input::-moz-placeholder {
  color: #999999;
}

.wk-hall-room-platform-search > input::placeholder {
  color: #999999;
}

.wk-hall-room-platform-list {
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}

.wk-hall-room-platform-list > button {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 82px;
  min-height: 82px;
  padding: 20px 12px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  font-family: var(--wk-font-family);
  text-align: left;
}

.wk-hall-room-platform-list > button:hover:not(:disabled) {
  background: #fbf8ff;
}

.wk-hall-room-platform-list > button:focus-visible {
  outline: 2px solid rgba(157, 38, 255, 0.45);
  outline-offset: -2px;
}

.wk-hall-room-platform-list > button:disabled {
  cursor: default;
}

.wk-hall-room-platform-identity {
  display: flex;
  overflow: hidden;
  min-width: 0;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}

.wk-hall-room-platform-identity > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-room-platform-empty {
  box-sizing: border-box;
  width: 100%;
  padding: 54px 16px;
  border-radius: 10px;
  background: #ffffff;
  color: #999999;
  font-size: 14px;
  text-align: center;
}

.wk-hall-platform-not-found-modal .semi-modal {
  width: 260px;
  max-width: calc(100vw - 24px);
}

.wk-hall-platform-not-found-modal .semi-modal-content {
  overflow: hidden;
  height: 225px;
  padding: 0;
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    #f8f0ff 0%,
    #ffffff 17.0733%,
    #ffffff 100%
  );
}

.wk-hall-platform-not-found-modal .semi-modal-body {
  height: 225px;
  margin: 0;
  padding: 0;
}

.wk-hall-platform-not-found {
  display: flex;
  box-sizing: border-box;
  width: 260px;
  height: 225px;
  padding: 16px;
  flex-direction: column;
  justify-content: space-between;
  color: #171a1d;
  font-family: var(--wk-font-family);
}

.wk-hall-platform-not-found-body {
  display: flex;
  width: 228px;
  height: 153px;
  align-items: center;
  flex-direction: column;
}

.wk-hall-platform-not-found-body > img {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}

.wk-hall-platform-not-found-body > strong {
  width: 228px;
  margin-top: 11px;
  color: #171a1d;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

.wk-hall-platform-not-found-body > p {
  width: 228px;
  margin: 8px 0 0;
  color: rgba(23, 26, 29, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: center;
}

.wk-hall-platform-not-found-actions {
  display: flex;
  width: 228px;
  height: 32px;
  gap: 12px;
}

.wk-hall-platform-not-found-actions > button {
  width: 108px;
  height: 32px;
  padding: 0;
  border: 1px solid #efefef;
  border-radius: 6px;
  background: transparent;
  color: #333333;
  cursor: pointer;
  font-family: var(--wk-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.wk-hall-platform-not-found-actions > button.primary {
  border: 0;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-hall-platform-not-found-actions > button:focus-visible {
  outline: 2px solid rgba(157, 38, 255, 0.45);
  outline-offset: 2px;
}

.wk-hall-room-profile-state {
  padding: 48px 16px;
  color: #999999;
  color: var(--wk-color-font-tip, #999999);
  text-align: center;
}

.wk-hall-room-profile-selector-page {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding: 16px 12px 40px;
  background: #f8f8f8;
  background: var(--wk-hall-gap-background, #f8f8f8);
  color: #333333;
  color: var(--wk-textcolor, #333333);
}

.wk-hall-room-profile-selector-list {
  overflow: hidden;
  border-radius: 12px;
  background: var(--wk-bkcolor);
  background: var(--wk-hall-card-background, var(--wk-bkcolor));
}

.wk-hall-room-profile-selector-list > button {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid #eeeeee;
  border-bottom: 1px solid var(--wk-hall-divider, #eeeeee);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.wk-hall-room-profile-selector-list > button:last-child {
  border-bottom: 0;
}

.wk-hall-room-profile-selector-list > button:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.08);
}

.wk-hall-room-profile-selector-list > button:focus-visible {
  position: relative;
  outline: 2px solid #8b5cf6;
  outline: 2px solid var(--wk-active-textcolor, #8b5cf6);
  outline-offset: -2px;
}

.wk-hall-room-profile-selector-list > button:disabled {
  cursor: default;
}

.wk-hall-room-profile-check {
  width: 16px;
  height: 9px;
  flex: 0 0 auto;
  border-bottom: 2px solid #8b5cf6;
  border-bottom: 2px solid var(--wk-active-textcolor, #8b5cf6);
  border-left: 2px solid #8b5cf6;
  border-left: 2px solid var(--wk-active-textcolor, #8b5cf6);
  transform: rotate(-45deg) translateY(-2px);
}

.wk-hall-room-profile-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid rgba(139, 92, 246, 0.2);
  border-top-color: #8b5cf6;
  border-top-color: var(--wk-active-textcolor, #8b5cf6);
  border-radius: 50%;
  animation: wk-hall-profile-spin 0.75s linear infinite;
}

.wk-hall-room-type-menu {
  padding-top: 6px;
  border-radius: 6px;
  background: transparent;
  color: #000000;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1));
  font-family: var(--wk-font-family);
}

.wk-hall-room-type-menu::before {
  position: absolute;
  top: 0;
  left: 12px;
  width: 0;
  height: 0;
  border-right: 9px solid transparent;
  border-bottom: 7px solid #ffffff;
  border-left: 9px solid transparent;
  content: "";
}

.wk-hall-room-type-menu > div {
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 210px;
  flex-direction: column;
  border-radius: 6px;
  background: #ffffff;
}

.wk-hall-room-type-menu button {
  display: inline-flex;
  width: calc(100% - 4px);
  height: 31px;
  min-height: 31px;
  margin: 2px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #000000;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  text-align: center;
}

.wk-hall-room-type-menu button[aria-selected="true"] {
  background: #9d26ff;
  color: #ffffff;
}

.wk-hall-room-type-menu
  button:hover:not(:disabled):not([aria-selected="true"]) {
  background: rgba(157, 38, 255, 0.08);
}

.wk-hall-room-type-menu button:focus-visible {
  outline: 2px solid rgba(157, 38, 255, 0.42);
  outline-offset: -2px;
}

.wk-hall-room-type-menu button:disabled {
  cursor: default;
}

.wk-hall-room-type-menu-empty {
  display: flex;
  height: 35px;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 12px;
}

.wk-hall-chat-portal-menu[data-placement="top"].wk-hall-room-type-menu {
  padding-top: 0;
  padding-bottom: 6px;
}

.wk-hall-chat-portal-menu[data-placement="top"].wk-hall-room-type-menu::before {
  top: auto;
  bottom: 0;
  border-top: 7px solid #ffffff;
  border-right: 9px solid transparent;
  border-bottom: 0;
  border-left: 9px solid transparent;
}

/* 夜间 949:10253 下拉浮层：底 #1E1E1F，含指向箭头，选项文字 #DFE2E6。 */
body[theme-mode="dark"] .wk-hall-room-type-menu {
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-group-summary-content > strong {
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-room-type-menu::before {
  border-bottom-color: var(--wk-night-canvas);
}

body[theme-mode="dark"] .wk-hall-room-type-menu > div {
  background: var(--wk-night-canvas);
}

body[theme-mode="dark"] .wk-hall-room-type-menu button {
  color: var(--wk-night-ink);
}

body[theme-mode="dark"]
  .wk-hall-chat-portal-menu[data-placement="top"].wk-hall-room-type-menu::before {
  border-top-color: var(--wk-night-canvas);
  border-bottom: 0;
}

@keyframes wk-hall-profile-spin {
  to {
    transform: rotate(360deg);
  }
}

.wk-hall-members-card {
  overflow: hidden;
  border-radius: 10px;
  background: var(--wk-bkcolor);
  background: var(--wk-hall-card-background, var(--wk-bkcolor));
}

.wk-hall-members-header {
  display: flex;
  min-height: 42px;
  padding: 0 12px;
  align-items: center;
  justify-content: space-between;
}

.wk-hall-members-header > strong {
  font-size: 15px;
  font-weight: 500;
}

.wk-hall-members-header > button {
  display: inline-flex;
  min-height: 32px;
  padding: 0;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #999999;
  color: var(--wk-color-font-tip, #999999);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.wk-hall-members-header > button:focus-visible {
  border-radius: 5px;
  outline: 2px solid #8b5cf6;
  outline: 2px solid var(--wk-active-textcolor, #8b5cf6);
  outline-offset: 2px;
}

.wk-hall-members-arrow {
  width: 7px;
  height: 7px;
  margin-right: 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.wk-hall-basic-root,
.wk-hall-business-root {
  background: var(--wk-hall-gap-background);
}

.wk-hall-basic-flat,
.wk-hall-accordion-body {
  background: var(--wk-hall-card-background);
}

.wk-hall-basic-flat {
  overflow: hidden;
  border-radius: 10px;
}

.wk-hall-basic-flat-list > .wk-hall-basic-flat + .wk-hall-basic-flat {
  margin-top: 10px;
}

.wk-hall-mode-row {
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--wk-hall-card-background);
}

.wk-hall-accordion {
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--wk-hall-card-background);
}

.wk-hall-accordion:first-child {
  margin-top: 0;
}

/* Figma 807:9924 / 807:9931 / 807:10107 / 807:10114：
   一级分组标题栏 351 × 46，左侧 2px 紫色竖条随卡片圆角裁切。 */
.wk-hall-accordion-header {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.wk-hall-accordion-header:hover {
  background: rgba(112, 117, 121, 0.06);
}

.wk-hall-accordion-header:focus-visible {
  outline: 2px solid #8b5cf6;
  outline: 2px solid var(--wk-active-textcolor, #8b5cf6);
  outline-offset: -2px;
}

.wk-hall-accordion-accent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 0;
  background: #9d26ff;
}

.wk-hall-accordion-title {
  flex: 1 1;
  font-size: 17px;
  font-weight: 500;
}

.wk-hall-accordion-status {
  margin-right: 10px;
  color: #8f959e;
  color: var(--wk-color-font-tip, #8f959e);
  font-size: 12px;
}

.wk-hall-accordion-status-error,
.wk-hall-field-error {
  color: #f04438;
}

.wk-hall-value-arrow {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #777777;
  border-bottom: 1.5px solid #777777;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

/* 设计里一级和二级用的是同一个「展开收缩」组件：16 × 8 的实心三角。 */
.wk-hall-accordion-arrow {
  width: 0;
  height: 0;
  border-top: 8px solid currentColor;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  color: #333333;
}

.wk-hall-accordion-open > .wk-hall-accordion-header .wk-hall-accordion-arrow {
  border-top: 0;
  border-bottom: 8px solid currentColor;
}

.wk-hall-subaccordion {
  border-top: 1px solid var(--wk-hall-divider);
  background: var(--wk-hall-card-background);
}

/* Figma 807:9942 / 807:10032：二级分组标题栏 351 × 58，标题为常规字重。 */
.wk-hall-subaccordion-header {
  display: flex;
  width: 100%;
  min-height: 58px;
  padding: 0 12px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.wk-hall-subaccordion-header:hover {
  background: rgba(112, 117, 121, 0.06);
}

.wk-hall-subaccordion-header:focus-visible {
  outline: 2px solid #8b5cf6;
  outline: 2px solid var(--wk-active-textcolor, #8b5cf6);
  outline-offset: -2px;
}

.wk-hall-subaccordion-title {
  flex: 1 1;
  font-size: 15px;
  font-weight: 400;
}

.wk-hall-subaccordion-arrow {
  width: 0;
  height: 0;
  border-top: 8px solid currentColor;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  color: #333333;
}

.wk-hall-subaccordion-open
  > .wk-hall-subaccordion-header
  .wk-hall-subaccordion-arrow {
  border-top: 0;
  border-bottom: 8px solid currentColor;
}

.wk-hall-subaccordion-body {
  background: var(--wk-hall-card-background);
}

/* 厅设置展开后，每一级都保留为原型中的独立白色卡片。 */
.wk-hall-business-root .wk-hall-accordion {
  overflow: visible;
  background: transparent;
}

.wk-hall-business-root .wk-hall-accordion-header {
  overflow: hidden;
  border-radius: 10px;
  background: var(--wk-hall-card-background);
}

.wk-hall-business-root .wk-hall-accordion-body {
  background: transparent;
}

.wk-hall-queue-settings > .wk-hall-navigation-row,
.wk-hall-queue-settings > .wk-hall-subaccordion,
.wk-hall-config-section {
  margin-top: 10px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--wk-hall-card-background);
}

.wk-hall-business-root .wk-hall-subaccordion {
  border-top: 0;
}

.wk-hall-navigation-row {
  display: flex;
  width: 100%;
  min-height: 56px;
  padding: 0 12px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: var(--wk-hall-card-background);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  text-align: left;
}

.wk-hall-navigation-row:hover {
  background: rgba(112, 117, 121, 0.06);
}

.wk-hall-navigation-row:focus-visible,
.wk-hall-inline-action-button:focus-visible,
.wk-hall-item-action-button:focus-visible {
  outline: 2px solid #8b5cf6;
  outline: 2px solid var(--wk-active-textcolor, #8b5cf6);
  outline-offset: -2px;
}

.wk-hall-navigation-row:disabled,
.wk-hall-inline-action-button:disabled,
.wk-hall-item-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.wk-hall-navigation-arrow {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  margin-right: 3px;
  border-right: 1.5px solid #999999;
  border-bottom: 1.5px solid #999999;
  transform: rotate(-45deg);
}

.wk-hall-inline-action-row {
  display: flex;
  min-height: 56px;
  padding: 0 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
}

.wk-hall-inline-action-button {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #7c3aed;
  color: var(--wk-active-textcolor, #7c3aed);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}

.wk-hall-config-list {
  border-top: 1px solid var(--wk-hall-divider);
}

.wk-hall-config-item {
  min-height: 56px;
  padding: 10px 12px;
  border-top: 1px solid var(--wk-hall-divider);
}

.wk-hall-config-item:first-child {
  border-top: 0;
}

.wk-hall-config-item-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(58px, auto) auto;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
}

.wk-hall-config-item-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  font-size: 15px;
}

.wk-hall-config-item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-config-item-tag {
  display: inline-flex;
  height: 22px;
  flex: 0 0 auto;
  padding: 0 6px;
  align-items: center;
  border-radius: 4px;
  background: #fbf1de;
  color: #7b5d34;
  font-size: 12px;
  line-height: 18px;
}

.wk-hall-config-item-value {
  overflow: hidden;
  color: #8f959e;
  color: var(--wk-color-font-tip, #8f959e);
  font-size: 13px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-config-item-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 群聊危险操作在报备设置页下使用原型中的独立卡片，保留原确认流程。 */
.wk-channelsetting-content
  > .wk-sections:has(.wk-hall-basic-root)
  > .wk-section:has(.wk-channelsetting-danger-action) {
  overflow: visible;
  border-radius: 0;
}

.wk-channelsetting-content
  > .wk-sections:has(.wk-hall-basic-root)
  .wk-channelsetting-danger-action {
  min-height: 56px;
  padding: 0 13px;
  border-radius: 10px;
  background: var(--wk-hall-card-background);
  transition: background-color 160ms ease;
}

.wk-channelsetting-content
  > .wk-sections:has(.wk-hall-basic-root)
  .wk-section-row
  + .wk-section-row
  .wk-channelsetting-danger-action {
  margin-top: 10px;
}

.wk-channelsetting-content
  > .wk-sections:has(.wk-hall-basic-root)
  .wk-channelsetting-danger-action:hover {
  background: rgba(255, 29, 37, 0.04);
}

.wk-channelsetting-content
  > .wk-sections:has(.wk-hall-basic-root)
  .wk-channelsetting-danger-action:active {
  background: rgba(255, 29, 37, 0.08);
}

.wk-channelsetting-content
  > .wk-sections:has(.wk-hall-basic-root)
  .wk-channelsetting-danger-action
  .wk-list-item-title {
  color: #ff1d25 !important;
  font-size: 15px;
  line-height: 21px;
}

.wk-hall-config-item-meta {
  margin-top: 3px;
  overflow: hidden;
  color: #8f959e;
  color: var(--wk-color-font-tip, #8f959e);
  font-size: 10px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-item-action-button {
  display: inline-flex;
  width: 22px;
  height: 22px;
  padding: 3px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #8f959e;
  color: var(--wk-color-font-tip, #8f959e);
  cursor: pointer;
}

.wk-hall-item-action-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.wk-hall-item-action-delete:hover {
  color: #f04438;
}

/* BD-20（2026-08-31 拍板）：恢复已停用统计项，用品牌紫与编辑/删除区分。 */
.wk-hall-item-action-restore:hover {
  color: #7c3aff;
}

.wk-hall-item-action-loading {
  font-size: 13px;
  line-height: 1;
}

.wk-hall-setting-row {
  display: flex;
  min-height: 56px;
  padding: 9px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--wk-hall-divider);
  background: var(--wk-bkcolor);
  background: var(--wk-hall-card-background, var(--wk-bkcolor));
}

.wk-hall-setting-row:first-child {
  border-top: 0;
}

.wk-hall-setting-row-accent .wk-hall-setting-label > span:first-child {
  color: #f04438;
}

.wk-hall-setting-label {
  display: flex;
  min-width: 0;
  flex: 1 1;
  flex-direction: column;
  gap: 3px;
  color: #333333;
  color: var(--wk-textcolor, #333333);
  font-size: 15px;
  line-height: 1.4;
}

.wk-hall-setting-label > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-setting-description,
.wk-hall-field-error,
.wk-hall-unit {
  color: #8f959e;
  color: var(--wk-color-font-tip, #8f959e);
  font-size: 12px;
  line-height: 1.3;
}

.wk-hall-field-error {
  color: #f04438;
}

.wk-hall-setting-description {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wk-hall-setting-control {
  display: flex;
  max-width: 188px;
  align-items: center;
  justify-content: flex-end;
}

.wk-hall-number-control {
  display: flex;
  box-sizing: border-box;
  min-width: 74px;
  min-height: 34px;
  padding: 0 10px;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  border: 1px solid var(--wk-hall-control-border);
  border-radius: 8px;
  background: var(--wk-hall-control-background);
}

.wk-hall-number-field {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.wk-hall-number-prefix {
  color: #555555;
  color: var(--wk-textcolor, #555555);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}

.wk-hall-number-field-prefixed .wk-hall-number-control {
  min-width: 60px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
}

.wk-hall-number-field-prefixed .wk-hall-number-control .semi-input-number {
  width: 30px;
}

.wk-hall-number-field-prefixed .wk-hall-number-control .semi-input-wrapper {
  min-height: 26px;
}

.wk-hall-number-field-prefixed .wk-hall-number-control .semi-input,
.wk-hall-number-field-prefixed .wk-hall-number-control .wk-hall-unit {
  font-size: 13px;
}

.wk-hall-number-control .semi-input-number {
  width: 46px;
}

.wk-hall-number-control .semi-input-wrapper {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.wk-hall-number-control .semi-input {
  padding: 0;
  background: transparent;
  color: #333333;
  color: var(--wk-textcolor, #333333);
  font-size: 15px;
  text-align: right;
}

.wk-hall-number-control .wk-hall-unit {
  color: #555555;
  color: var(--wk-textcolor, #555555);
  font-size: 15px;
}

.wk-hall-setting-control .semi-select {
  min-width: 140px;
  max-width: 180px;
  border: 0;
  background: transparent;
  font-size: 14px;
}

.wk-hall-insert-type-menu {
  width: 160px !important;
  min-width: 160px !important;
  padding: 0;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  font-family: var(--wk-font-family);
}

.wk-hall-insert-type-menu .semi-select-option-list {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.wk-hall-insert-type-menu .semi-select-option {
  width: calc(100% - 2px);
  min-height: 31px;
  height: 31px;
  margin: 2px 1px;
  padding: 8px 10px;
  justify-content: center;
  border-radius: 4px;
  background: transparent;
  color: #000000;
  font-family: var(--wk-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-insert-type-menu .semi-select-option-icon {
  display: none !important;
}

.wk-hall-insert-type-menu .semi-select-option-text {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

.wk-hall-insert-type-menu
  .semi-select-option:hover:not(.semi-select-option-disabled):not(
    .semi-select-option-selected
  ),
.wk-hall-insert-type-menu
  .semi-select-option-focused:not(.semi-select-option-disabled):not(
    .semi-select-option-selected
  ) {
  background: rgba(157, 38, 255, 0.1);
  color: #9d26ff;
}

.wk-hall-insert-type-menu .semi-select-option-selected,
.wk-hall-insert-type-menu .semi-select-option-selected:hover,
.wk-hall-insert-type-menu.semi-select-option-list-wrapper
  .semi-select-option-selected.semi-select-option-focused {
  background: #9d26ff;
  color: #ffffff;
  font-weight: 400;
}

.wk-hall-value-button {
  display: flex;
  max-width: 188px;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #666666;
  color: var(--wk-color-font-tip, #666666);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}

.wk-hall-value-button > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-value-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.wk-hall-value-arrow {
  flex: 0 0 auto;
  transform: rotate(-45deg);
}

.wk-hall-static-title {
  padding: 14px 13px 8px;
  border-top: 1px solid var(--wk-hall-divider);
  color: #8b5cf6;
  color: var(--wk-active-textcolor, #8b5cf6);
  font-size: 13px;
  font-weight: 600;
}

.wk-hall-static-title:first-child {
  border-top: 0;
}

.wk-hall-inline-message {
  display: flex;
  min-height: 44px;
  padding: 9px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 10px;
  background: rgba(139, 92, 246, 0.08);
  color: #666;
  color: var(--wk-color-font-tip, #666);
  font-size: 12px;
  line-height: 1.45;
}

.wk-hall-inline-message-warning {
  background: rgba(255, 169, 64, 0.12);
}

.wk-hall-inline-message-error {
  background: rgba(240, 68, 56, 0.1);
  color: #d92d20;
}

.wk-hall-empty {
  padding: 22px 13px;
  color: #8f959e;
  color: var(--wk-color-font-tip, #8f959e);
  font-size: 13px;
  text-align: center;
}

.wk-hall-action-row {
  display: flex;
  padding: 12px 13px;
  justify-content: flex-end;
  border-top: 1px solid var(--wk-hall-divider);
}

.wk-hall-item-card {
  margin: 8px 12px;
  padding: 12px;
  border: 1px solid var(--wk-hall-divider);
  border-radius: 8px;
}

.wk-hall-item-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wk-hall-item-card-title {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-item-card-meta {
  margin-top: 5px;
  color: #8f959e;
  color: var(--wk-color-font-tip, #8f959e);
  font-size: 11px;
  line-height: 1.5;
}

.wk-hall-item-card-actions {
  display: flex;
  gap: 2px;
}

.wk-hall-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.wk-hall-form-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
}

.wk-hall-form-field-wide {
  grid-column: 1 / -1;
}

/* Figma 2384:37861: 434px, 54px title, 393px rows and 10px gaps.
   Newcomer grants remain a server-controlled one-time rule, not a type input. */
.wk-hall-top-type-editor-modal .semi-modal {
  width: min(434px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--wk-font-family);
}

.wk-hall-top-type-editor-modal .semi-modal-content {
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.wk-hall-top-type-editor-modal .semi-modal-header {
  min-height: 54px;
  margin: 0;
  padding: 0 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
}

.wk-hall-top-type-editor-modal .semi-modal-title {
  width: 100%;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
}

.wk-hall-top-type-editor-modal .semi-modal-body {
  max-height: min(720px, calc(100vh - 92px));
  padding: 0 20.5px 32px;
  overflow-x: hidden;
  overflow-y: auto;
}

.wk-hall-top-type-editor-title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 15px;
  font-weight: 500;
}

.wk-hall-top-type-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-hall-top-type-editor-row {
  min-height: 56px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: #fafafa;
  box-shadow: inset 0 -0.6px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #333333;
  font-size: 15px;
  box-sizing: border-box;
}

.wk-hall-top-type-name-row {
  min-height: 55px;
}

.wk-hall-top-type-editor-row > span:first-child {
  flex: none;
}

.wk-hall-top-type-editor-row .semi-input-wrapper,
.wk-hall-top-type-editor-row .semi-input-number {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.wk-hall-top-type-editor-row > .semi-input-wrapper {
  flex: 1 1;
}

.wk-hall-top-type-editor-row .semi-input {
  background: transparent;
  color: #333333;
  font-size: 14px;
  text-align: right;
}

.wk-hall-top-type-editor-row .semi-input::-moz-placeholder {
  color: #999999;
}

.wk-hall-top-type-editor-row .semi-input::placeholder {
  color: #999999;
}

.wk-hall-top-type-skin-row {
  width: 100%;
  font-family: inherit;
  cursor: pointer;
}

.wk-hall-top-type-skin-row > span:last-child {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  min-width: 0;
}

.wk-hall-top-type-skin-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wk-hall-top-type-skin-row:focus-visible,
.wk-hall-top-type-editor-actions button:focus-visible {
  outline: 2px solid #6b10ff;
  outline-offset: 1px;
}

.wk-hall-top-type-days,
.wk-hall-top-type-editor-row > .semi-input-number {
  width: 72px;
  min-width: 72px;
  height: 32px;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  background: #f6f6f6;
  box-sizing: border-box;
}

.wk-hall-top-type-days {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-right: 10px;
  color: #333333;
  font-size: 15px;
}

.wk-hall-top-type-days .semi-input-number {
  width: 39px;
}

.wk-hall-top-type-editor-row .semi-input-number .semi-input {
  padding: 0;
  text-align: center;
  font-size: 15px;
}

.wk-hall-top-type-advanced {
  color: #333333;
  font-size: 15px;
}

.wk-hall-top-type-advanced > summary {
  min-height: 56px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  border-radius: 10px;
  background: #fafafa;
  box-shadow: inset 0 -0.6px rgba(0, 0, 0, 0.05);
}

.wk-hall-top-type-advanced > summary::-webkit-details-marker {
  display: none;
}

.wk-hall-top-type-advanced > summary > img {
  width: 18px;
  height: 18px;
  transform: rotate(180deg);
  transition: transform 0.15s ease;
}

.wk-hall-top-type-advanced[open] > summary > img {
  transform: none;
}

.wk-hall-top-type-advanced-fields {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.wk-hall-top-type-advanced-fields > label {
  min-width: 0;
  min-height: 56px;
  padding: 0 12px;
  border-radius: 10px;
  background: #fafafa;
  box-shadow: inset 0 -0.6px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-size: 13px;
}

.wk-hall-top-type-advanced-fields > label:first-child {
  grid-column: 1 / -1;
}

.wk-hall-top-type-advanced-fields .semi-input-number {
  width: 68px;
  min-width: 0;
}

.wk-hall-top-type-advanced-fields .semi-input-wrapper {
  height: 32px;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  background: #f6f6f6;
}

.wk-hall-top-type-advanced-fields .semi-input {
  text-align: center;
  padding: 0;
  font-size: 15px;
}

.wk-hall-top-type-advanced-fields .semi-switch {
  width: 37px;
  height: 21px;
  min-width: 37px;
  border: 0;
}

.wk-hall-top-type-advanced-fields .semi-switch-knob {
  width: 17px;
  height: 17px;
  top: 2px;
  left: 2px;
  transform: none;
}

.wk-hall-top-type-advanced-fields .semi-switch-checked .semi-switch-knob {
  left: calc(100% - 19px);
  transform: none;
}

.wk-hall-top-type-advanced-fields .semi-switch.semi-switch-checked {
  background: #6b10ff;
}

.wk-hall-top-type-advanced-fields .semi-switch.semi-switch-disabled {
  opacity: 0.35;
}

.wk-hall-top-weight-select.semi-select {
  width: 120px;
  min-width: 0;
  height: 32px;
  border: 1px solid #e7e7eb;
  border-radius: 6px;
  background: #f6f6f6;
}

.wk-hall-top-weight-select.semi-select:hover:not(.semi-select-disabled),
.wk-hall-top-weight-select.semi-select:focus-within {
  border-color: #9d26ff;
}

.wk-hall-task-value-select-menu .semi-select-option-list {
  padding: 4px;
}

.wk-hall-task-value-select-menu .semi-select-option {
  min-height: 30px;
  border-radius: 6px;
  color: #555555;
  text-align: center;
}

.wk-hall-task-value-select-menu .semi-select-option-icon {
  display: none !important;
}

.wk-hall-task-value-select-menu .semi-select-option-text {
  width: 100%;
  justify-content: center;
}

.wk-hall-task-value-select-menu
  .semi-select-option:hover:not(.semi-select-option-disabled):not(
    .semi-select-option-selected
  ),
.wk-hall-task-value-select-menu
  .semi-select-option-focused:not(.semi-select-option-disabled):not(
    .semi-select-option-selected
  ) {
  background: rgba(157, 38, 255, 0.1);
  color: #9d26ff;
}

.wk-hall-task-value-select-menu .semi-select-option-selected,
.wk-hall-task-value-select-menu .semi-select-option-selected:hover {
  background: #9d26ff;
  color: #ffffff;
}

.wk-hall-top-type-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 9px;
  gap: 9px;
  margin-top: 15px;
}

.wk-hall-top-type-editor-actions button {
  min-height: 40px;
  border: 1px solid rgba(51, 51, 51, 0.2);
  border-radius: 8px;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
}

.wk-hall-top-type-editor-actions button:last-child {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-hall-top-type-editor-actions button:last-child:hover:not(:disabled) {
  background: #4800bc;
}

.wk-hall-top-type-editor-actions button:disabled,
.wk-hall-top-type-skin-row:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

body[theme-mode="dark"] .wk-hall-top-type-editor-modal .semi-modal-content,
body[theme-mode="dark"] .wk-hall-top-type-editor-modal .semi-modal-body {
  background: var(--wk-night-canvas);
}

body[theme-mode="dark"] .wk-hall-top-type-editor-modal .semi-modal-header,
body[theme-mode="dark"] .wk-hall-top-type-editor-row,
body[theme-mode="dark"] .wk-hall-top-type-advanced > summary,
body[theme-mode="dark"] .wk-hall-top-type-advanced-fields > label {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-top-type-editor-title,
body[theme-mode="dark"] .wk-hall-top-type-editor-row .semi-input,
body[theme-mode="dark"] .wk-hall-top-type-advanced-fields .semi-input,
body[theme-mode="dark"] .wk-hall-top-type-days {
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-top-type-days,
body[theme-mode="dark"] .wk-hall-top-type-editor-row > .semi-input-number,
body[theme-mode="dark"] .wk-hall-top-type-advanced-fields .semi-input-wrapper {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-canvas);
}

.wk-hall-top-skin-preview-modal .semi-modal-body {
  padding-bottom: 34px;
}

.wk-hall-top-skin-catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  grid-gap: 10px;
  gap: 10px;
  height: 137px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.wk-hall-top-skin-tile { min-width: 0; height: 137px; position: relative; }

.wk-hall-top-skin-preview-card {
  width: 100%;
  height: 137px;
  flex: none;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333333;
  background: #f6f6f6;
  font-family: inherit;
  cursor: pointer;
}

.wk-hall-top-skin-tile.is-selected .wk-hall-top-skin-preview-card { border-color: #9d26ff; background: #ffffff; }
.wk-hall-top-skin-preview-card:disabled { cursor: default; }
.wk-hall-top-skin-preview-card:focus-visible,
.wk-hall-top-skin-expand:focus-visible { outline: 2px solid #6b10ff; outline-offset: -2px; }
.wk-hall-top-skin-expand { position: absolute; top: 7px; right: 7px; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 3px; border: 0; border-radius: 9px; background: rgba(51,51,51,.3); cursor: pointer; }
.wk-hall-top-skin-expand img { width: 10px; height: 10px; }

.wk-hall-top-skin-preview-card > img {
  width: 85px;
  height: 59px;
  flex: none;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-hall-top-skin-preview-card > span {
  margin-top: 14px;
  font-size: 14px;
  line-height: 20px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-top-skin-preview-card > small {
  margin-top: 6px;
  font-size: 12px;
  line-height: 12px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wk-hall-top-skin-preview-actions {
  margin-top: 0;
}

.wk-hall-top-skin-catalog-status { display: flex; align-items: center; gap: 6px; height: 24px; color: #999999; font-size: 12px; line-height: 20px; }
.wk-hall-top-skin-catalog-status > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-hall-top-skin-catalog-status button,
.wk-hall-top-skin-more { flex: none; border: 0; background: transparent; color: #6b10ff; font-family: inherit; cursor: pointer; }
.wk-hall-top-skin-more { grid-column: 1 / -1; min-height: 30px; }
.wk-hall-top-skin-unavailable { align-self: center; color: #999999; font-size: 12px; line-height: 20px; }
.wk-hall-top-skin-preview-card > .wk-hall-top-skin-image-error { display: flex; align-items: center; justify-content: center; width: 85px; height: 59px; flex: none; margin-top: 0; color: #999999; font-size: 12px; white-space: normal; }
.wk-hall-top-skin-detail { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #333333; }
.wk-hall-top-skin-detail > img { width: 100%; height: 200px; -o-object-fit: contain; object-fit: contain; }
.wk-hall-top-skin-detail > strong,
.wk-hall-top-skin-detail > p { max-width: 100%; overflow-wrap: anywhere; }
.wk-hall-top-skin-detail p { margin: 0; font-size: 13px; line-height: 20px; white-space: pre-wrap; }
.wk-hall-top-skin-detail-modal .wk-hall-top-type-editor-actions { grid-template-columns: minmax(0, 1fr); }

body[theme-mode="dark"] .wk-hall-top-skin-preview-card,
body[theme-mode="dark"] .wk-hall-top-skin-tile.is-selected .wk-hall-top-skin-preview-card,
body[theme-mode="dark"] .wk-hall-top-skin-detail {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-top-type-advanced > summary > img {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

body[theme-mode="dark"] .wk-hall-top-type-editor-actions button:not(:last-child) {
  background: var(--wk-night-surface);
  border-color: var(--wk-night-line-strong);
  color: var(--wk-night-ink);
}

@media (max-width: 390px) {
  .wk-hall-top-type-editor-modal .semi-modal-body { padding-left: 12px; padding-right: 12px; }
  .wk-hall-top-type-advanced-fields { grid-template-columns: minmax(0, 1fr); }
  .wk-hall-top-skin-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body[theme-mode="dark"] .wk-hall-top-weight-select.semi-select {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-canvas);
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-task-value-select-menu,
body[theme-mode="dark"] .wk-hall-task-value-select-menu .semi-select-option {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}

/* 添加/编辑报备统计类型：按设计稿使用紧凑行、分段选项和底部双按钮。 */
.wk-hall-statistic-editor-modal .semi-modal {
  width: min(320px, calc(100vw - 24px));
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--wk-font-family);
}

.wk-hall-statistic-editor-modal .semi-modal-content {
  padding: 0;
  border-radius: 10px;
}

.wk-hall-statistic-editor-modal .semi-modal-header {
  min-height: 46px;
  margin: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
}

.wk-hall-statistic-editor-modal .semi-modal-title {
  width: 100%;
}

.wk-hall-statistic-editor-modal .semi-modal-body {
  padding: 0 10px 12px;
  overflow: visible;
}

.wk-hall-statistic-editor-title {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #111111;
  font-size: 15px;
  font-weight: 500;
}

.wk-hall-statistic-editor-title > button {
  width: 20px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}

.wk-hall-statistic-editor-title > button > img {
  width: 16px;
  height: 16px;
  display: block;
}

.wk-hall-statistic-editor {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.wk-hall-statistic-editor-row {
  position: relative;
  min-height: 46px;
  padding: 0 10px;
  border-radius: 7px;
  background: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #333333;
  font-size: 13px;
}

.wk-hall-statistic-editor-row > span:first-child {
  flex: none;
}

.wk-hall-statistic-editor-row.has-error {
  margin-bottom: 10px;
}

.wk-hall-statistic-editor-row .semi-input-wrapper {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  flex: 1 1;
}

.wk-hall-statistic-editor-row .semi-input {
  padding: 0;
  background: transparent;
  color: #333333;
  font-size: 12px;
  text-align: right;
}

.wk-hall-statistic-editor-row .semi-input::-moz-placeholder {
  color: #b5b5b5;
}

.wk-hall-statistic-editor-row .semi-input::placeholder {
  color: #b5b5b5;
}

.wk-hall-statistic-methods {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1;
  grid-gap: 5px;
  gap: 5px;
}

.wk-hall-statistic-methods button {
  min-width: 0;
  min-height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: #ffffff;
  color: #666666;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}

.wk-hall-statistic-methods button.selected {
  background: rgba(157, 38, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(157, 38, 255, 0.42);
  color: #9d26ff;
  font-weight: 500;
}

.wk-hall-statistic-methods button:focus-visible,
.wk-hall-statistic-editor-actions button:focus-visible {
  outline: 2px solid #6b10ff;
  outline-offset: 1px;
}

.wk-hall-statistic-editor-row .semi-switch-checked {
  background-color: #6b10ff;
}

.wk-hall-statistic-editor-error {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -16px;
  z-index: 1;
  color: #d14343;
  font-size: 10px;
  line-height: 14px;
  text-align: right;
}

.wk-hall-statistic-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 7px;
  gap: 7px;
}

.wk-hall-statistic-editor-actions button {
  min-height: 36px;
  border: 1px solid #898989;
  border-radius: 6px;
  background: #ffffff;
  color: #898989;
  cursor: pointer;
  font-size: 13px;
}

.wk-hall-statistic-editor-actions button:last-child {
  border-color: #898989;
  background: #898989;
  color: #ffffff;
}

.wk-hall-statistic-editor-actions button:disabled,
.wk-hall-statistic-methods button:disabled {
  cursor: default;
  opacity: 0.48;
}

body[theme-mode="dark"] .wk-hall-statistic-editor-row {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-statistic-methods button.selected {
  background: rgba(157, 38, 255, 0.26);
  box-shadow: inset 0 0 0 1px rgba(202, 150, 255, 0.7);
  color: #e6ceff;
}

body[theme-mode="dark"] .wk-hall-statistic-methods button,
body[theme-mode="dark"] .wk-hall-statistic-editor-actions button:first-child {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-canvas);
  color: var(--wk-night-ink);
}

.wk-hall-task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wk-hall-task-text-editor,
.wk-hall-task-text-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wk-hall-task-text-field {
  font-size: 13px;
}

.wk-hall-task-text-field .semi-input-textarea-wrapper {
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 12px;
  line-height: 1.6;
}

.wk-hall-task-text-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #8f959e;
  color: var(--wk-color-font-tip, #8f959e);
  font-size: 11px;
}

.wk-hall-task-presets {
  display: flex;
  padding-top: 4px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wk-hall-task-presets-title {
  flex: 0 0 auto;
  font-size: 12px;
}

.wk-hall-task-preset-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.wk-hall-task-item {
  display: grid;
  grid-template-columns: 1fr 1fr 90px 70px auto;
  grid-gap: 6px;
  gap: 6px;
  align-items: center;
}

body[theme-mode="dark"] .wk-hall-accordion-header:hover,
body[theme-mode="dark"] .wk-hall-navigation-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

/*
 * 排挡模式侧边栏夜间稿 949:20409：侧栏底 #1E1E1F，设置分组卡 #2F2F30，
 * 组内行之间只用 #DFE2E6 10% 的内阴影分隔，箭头与折叠符号统一 #DFE2E6。
 */
body[theme-mode="dark"] .wk-hall-root {
  --wk-hall-card-background: var(--wk-night-surface);
  --wk-hall-gap-background: var(--wk-night-canvas);
  --wk-hall-divider: var(--wk-night-line);
  --wk-hall-control-background: var(--wk-night-raise);
  --wk-hall-control-border: var(--wk-night-line-strong);
}

body[theme-mode="dark"]
  .wk-channelsetting-content
  > .wk-sections:has(.wk-hall-basic-root) {
  --wk-hall-card-background: var(--wk-night-surface);
  --wk-hall-gap-background: var(--wk-night-canvas);
  --wk-hall-divider: var(--wk-night-line);

  background: var(--wk-night-canvas);
}

body[theme-mode="dark"] .wk-hall-subaccordion-arrow {
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-room-profile-page,
body[theme-mode="dark"] .wk-hall-room-profile-selector-page {
  --wk-hall-card-background: var(--wk-night-surface);
  --wk-hall-gap-background: var(--wk-night-canvas);
  --wk-hall-divider: var(--wk-night-line);

  background: var(--wk-night-canvas);
}

body[theme-mode="dark"] .wk-hall-accordion-arrow,
body[theme-mode="dark"] .wk-hall-value-arrow {
  border-color: var(--wk-night-ink);
}

@media (max-width: 720px) {
  .wk-hall-form-grid {
    grid-template-columns: 1fr;
  }

  .wk-hall-form-field-wide {
    grid-column: auto;
  }

  .wk-hall-task-item {
    grid-template-columns: 1fr 1fr;
  }
}

/* 聊天运行态：PC 原型的主持摘要、规则、档位、麦序和操作区 */
.wk-hall-chat-header {
  position: relative;
  z-index: 8;
  width: 100%;
  height: 100%;
  min-height: 0;
  container-name: hall-chat;
  container-type: inline-size;
  color: #454545;
  border: 0;
  border-left: 0;
  border-radius: 0;
  /* Figma 807:7715：麦序窗底色。 */
  background: #f8f8f8;
  box-shadow: inset 0.6px 0 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.wk-hall-chat-header,
.wk-hall-chat-header *,
.wk-hall-chat-header *::before,
.wk-hall-chat-header *::after {
  box-sizing: border-box;
}

.wk-hall-chat-summary {
  width: 100%;
  height: 48px;
  padding: 8px 20px;
  border: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

/* Figma 807:6766 / 807:7607：把手是左侧内收的书签形，右侧与面板齐平，
   所以底片用导出的矢量而不是半胶囊圆角。 */
.wk-hall-chat-panel-handle {
  display: none;
  position: absolute;
  z-index: 12;
  width: 16px;
  height: 51.113px;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  -webkit-mask: url(../../static/media/panel-handle-807-5316.cb8388622554499d4b46.svg) no-repeat
    center / 16px 51.113px;
  mask: url(../../static/media/panel-handle-807-5316.cb8388622554499d4b46.svg) no-repeat center /
    16px 51.113px;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}

.wk-hall-chat-panel-handle-tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 51.113px;
  display: block;
  pointer-events: none;
}

.wk-hall-chat-panel-handle.is-hide {
  top: 18px;
  left: -16px;
}

.wk-hall-chat-panel-handle.is-show {
  inset: 0;
}

/* Figma 807:5318：把手里的箭头约 7×12，用 12px 见方的图标旋转后得到。 */
.wk-hall-chat-panel-chevron {
  position: relative;
  width: 6.669px;
  height: 11.938px;
  display: block;
  pointer-events: none;
}

/* Figma 807:5271：紧凑态卡片 376×88，两行各 44px，无外投影。 */
.wk-hall-chat-header.is-compact {
  height: 88px;
  border: 0;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
}

/* 807:5272 / 807:5284：行内边距 12/20，行底 0.6px 发丝线替代描边分隔。 */
.wk-hall-chat-header.is-compact > .wk-hall-chat-summary,
.wk-hall-chat-header.is-compact > .wk-hall-chat-toolbar {
  min-height: 44px;
  height: 44px;
  padding: 12px 20px;
  box-shadow: inset 0 -0.6px 0 rgba(0, 0, 0, 0.05);
}

.wk-hall-chat-header.is-compact > .wk-hall-chat-summary {
  border-radius: 6px 6px 0 0;
  /* 807:5273 铃铛→名称 10px、名称→档期 12px、807:5281 人数→箭头 8px。 */
  -moz-column-gap: 8px;
       column-gap: 8px;
}

.wk-hall-chat-header.is-compact > .wk-hall-chat-toolbar {
  border-top: 0;
  border-radius: 0 0 6px 6px;
}

/* 807:5278：主持名称 15px / 400 / #333333。 */
.wk-hall-chat-header.is-compact .wk-hall-chat-summary-title {
  margin-left: 2px;
  color: #333333;
  font-weight: 400;
}

.wk-hall-chat-header.is-compact .wk-hall-chat-slot-badge {
  margin-left: 4px;
}

/* 807:5285：麦序 / 插队 / 补排 三组指标之间 10px。 */
.wk-hall-chat-header.is-compact .wk-hall-chat-toolbar-metrics {
  -moz-column-gap: 10px;
       column-gap: 10px;
  flex-wrap: nowrap;
}

.wk-hall-chat-header.is-compact .wk-hall-chat-panel-handle.is-hide,
.wk-hall-chat-header.is-expanded .wk-hall-chat-panel-handle.is-hide,
.wk-hall-chat-header.is-hidden .wk-hall-chat-panel-handle.is-show {
  display: inline-flex;
}

.wk-hall-chat-header.is-expanded .wk-hall-chat-panel-handle.is-hide {
  top: calc((100% - var(--wk-conversation-footer)) / 2 + 7px);
  transform: translateY(-50%);
}

.wk-hall-chat-header.is-hidden {
  width: 16px;
  height: 51.113px;
  min-height: 51.113px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.wk-hall-chat-header.is-hidden > .wk-hall-chat-summary,
.wk-hall-chat-header.is-hidden > .wk-hall-chat-toolbar {
  display: none;
}

.wk-hall-chat-header.is-expanded .wk-hall-chat-chevron img {
  transform: rotate(180deg);
}

.wk-hall-chat-header.is-expanded > .wk-hall-chat-summary,
.wk-hall-chat-header.is-expanded > .wk-hall-chat-toolbar {
  width: calc(100% - 40px);
  margin-right: 15px;
  margin-left: 25px;
}

.wk-hall-chat-header.is-expanded > .wk-hall-chat-summary {
  min-height: 44px;
  height: 44px;
  margin-top: 10px;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 -0.6px 0 rgba(0, 0, 0, 0.05);
}

.wk-hall-chat-header.is-expanded > .wk-hall-chat-toolbar {
  min-height: 44px;
  height: 44px;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 -0.6px 0 rgba(0, 0, 0, 0.05);
}

.wk-hall-chat-header.is-expanded .wk-hall-chat-summary-title {
  font-weight: 500;
}

.wk-hall-chat-bell {
  width: 24px;
  height: 24px;
  display: block;
  flex: none;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-hall-chat-summary-title {
  min-width: 0;
  max-width: min(360px, 42%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 400;
}

.wk-hall-chat-status {
  flex: none;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.66);
  color: #5f5f67;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.wk-hall-chat-status.is-serving {
  background: rgba(124, 58, 237, 0.13);
  color: #6d28d9;
}

.wk-hall-chat-status.is-waiting {
  background: rgba(255, 255, 255, 0.72);
  color: #666666;
}

.wk-hall-chat-status.is-empty {
  color: #888888;
}

.wk-hall-chat-status.is-error {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.wk-hall-chat-status.is-prototype-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wk-hall-chat-slot-badge,
.wk-hall-chat-toolbar-metrics b {
  min-width: 26px;
  height: 20px;
  padding: 0 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.64);
  color: #666666;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.wk-hall-chat-slot-badge {
  margin-left: 2px;
}

.wk-hall-chat-toolbar-metric b {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-hall-chat-toolbar-metric.is-queue-time > b {
  width: 42px;
  min-width: 42px;
  background: #fff5ea;
  color: #ff6200;
}

.wk-hall-chat-slot-badge {
  background: #fff5ea;
  color: #ff6200;
}

.wk-hall-chat-countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wk-hall-chat-countdown b {
  min-width: 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 20px;
}

.wk-hall-chat-countdown i {
  position: relative;
  width: 2px;
  height: 7px;
  flex: none;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  font-style: normal;
}

.wk-hall-chat-countdown i::before,
.wk-hall-chat-countdown i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
}

.wk-hall-chat-countdown i::before {
  top: 0;
}

.wk-hall-chat-countdown i::after {
  bottom: 0;
}

.wk-hall-chat-summary-count {
  margin-left: auto;
  color: #666666;
  font-size: 13px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.wk-hall-chat-chevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wk-hall-chat-chevron img {
  width: 16px;
  height: 8px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-hall-chat-toolbar {
  min-height: 48px;
  height: 48px;
  padding: 6px 20px;
  border-top: 1px solid #f1f1f1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.wk-hall-chat-toolbar-metrics,
.wk-hall-chat-toolbar-actions {
  display: flex;
  align-items: center;
}

.wk-hall-chat-toolbar-metrics {
  min-width: 0;
  flex: 1 1 auto;
  color: #333333;
  font-size: 13px;
  flex-wrap: wrap;
  row-gap: 4px;
  -moz-column-gap: 20px;
       column-gap: 20px;
}

.wk-hall-chat-toolbar-metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.wk-hall-chat-toolbar-actions {
  flex: none;
  margin-left: auto;
  gap: 14px;
}

.wk-hall-chat-legacy-rule-metrics {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wk-hall-chat-toolbar-actions button {
  border: 0;
  cursor: pointer;
}

.wk-hall-chat-calendar {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 3px;
  background: transparent;
  color: #4d4d4d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wk-hall-chat-calendar img {
  width: 18px;
  height: 18px;
  display: block;
}

.wk-hall-chat-calendar:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
}
.wk-hall-chat-calendar:disabled {
  cursor: default;
  opacity: 1;
}

.wk-hall-chat-broom-icon {
  width: 18px;
  height: 18px;
}

body[theme-mode="dark"] .wk-hall-chat-calendar img,
body[theme-mode="dark"] .wk-hall-chat-chevron img,
body[theme-mode="dark"] .wk-hall-chat-solid-chevron {
  filter: invert(1);
}

.wk-hall-chat-details {
  min-height: 0;
  padding: 0 15px 16px 25px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  background: #f7f7f7;
  border-radius: 0;
  flex: 1 1;
}

.wk-hall-chat-details::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.wk-hall-chat-gear-switcher {
  position: relative;
  z-index: 5;
  margin: 0 0 12px;
}

.wk-hall-chat-gear-switcher-trigger {
  width: 100%;
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 6px;
  background: #ffffff;
  color: #555555;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.wk-hall-chat-gear-switcher-trigger span {
  font-size: 13px;
}
.wk-hall-chat-gear-switcher-trigger b {
  padding: 2px 7px;
  border-radius: 3px;
  background: #f9f2ff;
  color: #9d26ff;
  font-size: 11px;
  font-weight: 500;
}

.wk-hall-chat-gear-switcher.is-serving .wk-hall-chat-gear-switcher-trigger b {
  background: #fff5ea;
  color: #ff6200;
}
.wk-hall-chat-gear-chevron {
  width: 12px;
  height: 12px;
  margin-left: auto;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
.wk-hall-chat-gear-switcher-trigger:disabled {
  cursor: default;
}

.wk-hall-chat-portal-menu,
.wk-hall-chat-portal-menu * {
  box-sizing: border-box;
}

.wk-hall-chat-portal-menu {
  position: fixed;
  z-index: 900;
}

.wk-hall-chat-gear-menu {
  width: 100px;
  padding: 3px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.wk-hall-chat-gear-menu::before {
  position: absolute;
  top: -7px;
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(255, 255, 255, 0.98);
  border-left: 7px solid transparent;
  content: "";
}

.wk-hall-chat-gear-menu::before {
  right: 18px;
}

.wk-hall-chat-gear-menu.is-toolbar-anchor::before {
  right: 7px;
}

.wk-hall-chat-gear-menu button {
  width: 100%;
  min-height: 36px;
  padding: 6px 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #333333;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}

.wk-hall-chat-gear-menu button:hover {
  background: #f5edff;
}
.wk-hall-chat-gear-menu button.selected,
.wk-hall-chat-gear-menu button.selected:hover {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}
.wk-hall-chat-gear-menu button:disabled {
  cursor: default;
  opacity: 0.42;
}

.wk-hall-chat-meta {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wk-hall-chat-window-chip {
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.wk-hall-chat-window-chip.is-closed {
  background: rgba(127, 29, 29, 0.18);
  color: #ffe4e6;
}

.wk-hall-chat-host-strip {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  color: #666666;
  font-size: 11px;
}

.wk-hall-chat-host-strip b {
  flex: none;
  padding: 4px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.72);
  color: #4f4f4f;
  font-weight: 500;
}

.wk-hall-chat-host-strip em {
  margin-left: 6px;
  color: #7c3aed;
  font-size: 10px;
  font-style: normal;
}

.wk-hall-chat-queue-title {
  margin-bottom: 5px;
  color: #555555;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

.wk-hall-chat-primary-queue-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wk-hall-chat-queue-title span {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.65);
  color: #666666;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

.wk-hall-chat-queue-title small {
  margin-left: auto;
  color: #999999;
  font-size: 10px;
  font-weight: 400;
}

.wk-hall-chat-standby-group {
  margin-top: 7px;
  padding-top: 0;
  border-top: 0;
}

.wk-hall-chat-header.is-expanded .wk-hall-chat-gear-switcher {
  margin: 10px 0;
}

.wk-hall-chat-header.is-expanded .wk-hall-chat-gear-switcher-trigger {
  height: 44px;
}

.wk-hall-chat-header.is-expanded .wk-hall-chat-standby-group {
  margin-top: 20px;
}

.wk-hall-chat-header.is-expanded
  .wk-hall-chat-standby-group
  .wk-hall-chat-queue-title {
  margin-bottom: 10px;
  line-height: 16px;
}

/* Figma 807:6744：「候选」标题是 13px 常规字重的 #666666。 */
.wk-hall-chat-standby-group .wk-hall-chat-queue-title {
  color: #666666;
  font-size: 13px;
  font-weight: 400;
}

.wk-hall-chat-queue-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column-gap: 0;
  -moz-column-gap: 0;
       column-gap: 0;
  grid-row-gap: 8px;
  row-gap: 8px;
}

.wk-hall-chat-queue-group:not(.wk-hall-chat-standby-group)
  .wk-hall-chat-queue-grid {
  width: calc(100% + 8px);
  max-height: 400px;
  margin-top: -8px;
  margin-right: -8px;
  padding: 8px 8px 0 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.wk-hall-chat-standby-group .wk-hall-chat-queue-grid {
  width: calc(100% + 8px);
  max-height: 200px;
  margin-top: -8px;
  margin-right: -8px;
  padding: 8px 8px 0 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.wk-hall-chat-queue-grid::-webkit-scrollbar {
  display: none;
}

/* Figma 807:7759：麦序行是 42px 高、左右各留 16px 的白色卡片。 */
.wk-hall-chat-queue-entry,
.wk-hall-chat-queue-slot-empty,
.wk-hall-chat-queue-empty {
  position: relative;
  height: 42px;
  min-height: 42px;
  padding: 4px 16px;
  border-radius: 6px;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #454545;
  font-size: 12px;
}

.wk-hall-chat-queue-slot-empty {
  border: 0;
  background: #ffffff;
  color: #666666;
  cursor: pointer;
  text-align: left;
}

.wk-hall-chat-queue-slot-empty:hover:not(:disabled) {
  background: #f5f5f5;
}

.wk-hall-chat-queue-slot-empty:disabled {
  cursor: default;
  opacity: 0.52;
}

.wk-hall-chat-empty-slot-label {
  min-width: 0;
  flex: 1 1;
}

.wk-hall-chat-empty-slot-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #dcc8ff;
  background: #f3ecff;
  flex: none;
}

/* 与麦序行的「上麦」按钮（Figma 807:6742）共用 42×24 / 圆角 4 / #9d26ff 紫底规格。 */
.wk-hall-chat-empty-slot-action {
  box-sizing: border-box;
  flex: none;
  min-width: 42px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  background: #9d26ff;
  color: #ffffff;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}

.wk-hall-chat-queue-entry.state-active {
  background: #ffffff;
  box-shadow: none;
}

.wk-hall-chat-queue-entry.state-standby {
  background: #ffffff;
  box-shadow: none;
}

/*
 * 麦序置顶行（PC 原型 1497:40493）：底图由设计包离线烘焙
 * （TangSengDaoDaoWeb/scripts/render-hall-top-card-row-backgrounds.py，按 376×42 出 2x 图），
 * 全麦置顶没有底图、用 #F6FAFD → #BFC3CB 的 96° 渐变。置顶卡面是固定的品牌视觉，
 * 夜间模式沿用同一套卡面；配对的 dark 选择器只为压过通用夜间行底色。
 */
body[theme-mode="dark"]
  .wk-hall-chat-queue-entry.is-top-card
  .wk-hall-chat-member-name,
.wk-hall-chat-queue-entry.is-top-card .wk-hall-chat-member-name,
.wk-hall-chat-queue-entry.is-top-card .wk-hall-chat-top-card-label {
  color: inherit;
}

/* 1497:41094 起：置顶行的行内按钮去掉白底，描边取行内主色 20% 透明度。 */
body[theme-mode="dark"]
  .wk-hall-chat-queue-entry.is-top-card
  .wk-hall-chat-entry-action,
.wk-hall-chat-queue-entry.is-top-card .wk-hall-chat-entry-action {
  border-color: var(--wk-hall-top-card-row-ink-soft);
  background: transparent;
  color: inherit;
}

.wk-hall-chat-queue-entry.is-top-card .wk-hall-chat-entry-action:hover {
  color: inherit;
}

body[theme-mode="dark"]
  .wk-hall-chat-queue-entry.is-top-card.is-top-card-newcomer,
.wk-hall-chat-queue-entry.is-top-card.is-top-card-newcomer {
  --wk-hall-top-card-row-ink-soft: rgba(255, 255, 255, 0.2);
  background: #ffffff url(../../static/media/newcomer.5eeed5074f6a75536b37.png)
    center / 100% 100% no-repeat;
  color: #ffffff;
}

body[theme-mode="dark"] .wk-hall-chat-queue-entry.is-top-card.is-top-card-charm,
.wk-hall-chat-queue-entry.is-top-card.is-top-card-charm {
  --wk-hall-top-card-row-ink-soft: rgba(47, 16, 122, 0.2);
  background: #ffffff url(data:image/png;base64,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) center /
    100% 100% no-repeat;
  color: #2f107a;
}

body[theme-mode="dark"]
  .wk-hall-chat-queue-entry.is-top-card.is-top-card-lights_out,
.wk-hall-chat-queue-entry.is-top-card.is-top-card-lights_out {
  --wk-hall-top-card-row-ink-soft: rgba(255, 42, 91, 0.2);
  background: #ffffff url(data:image/png;base64,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)
    center / 100% 100% no-repeat;
  color: #ff2a5b;
}

body[theme-mode="dark"]
  .wk-hall-chat-queue-entry.is-top-card.is-top-card-daily_rank,
.wk-hall-chat-queue-entry.is-top-card.is-top-card-daily_rank {
  --wk-hall-top-card-row-ink-soft: rgba(235, 70, 0, 0.2);
  background: #ffffff url(data:image/png;base64,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)
    center / 100% 100% no-repeat;
  color: #eb4600;
}

body[theme-mode="dark"]
  .wk-hall-chat-queue-entry.is-top-card.is-top-card-weekly_rank,
.wk-hall-chat-queue-entry.is-top-card.is-top-card-weekly_rank {
  --wk-hall-top-card-row-ink-soft: rgba(2, 43, 151, 0.2);
  background: #ffffff url(../../static/media/weekly_rank.781d8a205b8997480a6a.png)
    center / 100% 100% no-repeat;
  color: #022b97;
}

body[theme-mode="dark"]
  .wk-hall-chat-queue-entry.is-top-card.is-top-card-active,
.wk-hall-chat-queue-entry.is-top-card.is-top-card-active {
  --wk-hall-top-card-row-ink-soft: rgba(2, 107, 84, 0.2);
  background: #ffffff url(data:image/png;base64,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) center /
    100% 100% no-repeat;
  color: #026b54;
}

body[theme-mode="dark"]
  .wk-hall-chat-queue-entry.is-top-card.is-top-card-all_mic,
.wk-hall-chat-queue-entry.is-top-card.is-top-card-all_mic {
  --wk-hall-top-card-row-ink-soft: rgba(51, 51, 51, 0.2);
  background: linear-gradient(96deg, #f6fafd 0%, #bfc3cb 100%);
  color: #333333;
}

.wk-hall-chat-queue-empty {
  grid-column: 1 / -1;
  justify-content: center;
  color: #777777;
}

/* Figma 807:6772：取消角标 16×16 压在行右上角，上沿高出行 7px、右沿超出行 8px。 */
.wk-hall-chat-entry-cancel {
  position: absolute;
  top: -7px;
  right: -8px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ff1d25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wk-hall-chat-entry-cancel-icon {
  display: none;
}

.wk-hall-chat-entry-cancel::before {
  width: 4px;
  height: 1px;
  border-radius: 1px;
  background: #ffffff;
  content: "";
}

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

.wk-hall-chat-queue-group.is-booking .wk-hall-chat-position,
.wk-hall-chat-queue-group.is-serving .wk-hall-chat-position {
  position: static;
  width: auto;
  min-width: 13.455738px;
  height: 20px;
  margin: 0;
  padding-top: 2px;
  overflow: visible;
  clip: auto;
  box-sizing: border-box;
  color: #333333;
  flex: none;
  font-family: "Alimama ShuHeiTi", var(--wk-font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  font-synthesis: none;
  text-align: center;
}

.wk-hall-chat-queue-group.is-booking .wk-hall-chat-position[data-rank="1"],
.wk-hall-chat-queue-group.is-serving .wk-hall-chat-position[data-rank="1"] {
  color: #ff0000;
  font-size: 18px;
}

.wk-hall-chat-queue-group.is-booking .wk-hall-chat-position[data-rank="2"],
.wk-hall-chat-queue-group.is-serving .wk-hall-chat-position[data-rank="2"] {
  color: #ff6200;
  font-size: 18px;
}

.wk-hall-chat-queue-group.is-booking .wk-hall-chat-position[data-rank="3"],
.wk-hall-chat-queue-group.is-serving .wk-hall-chat-position[data-rank="3"] {
  color: #ffaa00;
  font-size: 18px;
}

.wk-hall-chat-queue-group.is-booking
  .wk-hall-chat-position:is([data-rank="1"], [data-rank="2"], [data-rank="3"]),
.wk-hall-chat-queue-group.is-serving
  .wk-hall-chat-position:is([data-rank="1"], [data-rank="2"], [data-rank="3"]) {
  /* Figma's exported glyph outline has a small optical slant that its text metadata omits. */
  transform: skewX(-6deg);
  transform-origin: center;
}

.wk-hall-chat-member-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: #d5d5d5;
  color: #777777;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 10px;
}

.wk-hall-chat-member-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-chat-member-name {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-chat-task-value {
  flex: none;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* 置顶行括号里的类别文案（如「新人置顶」），占用任务值的位置。 */
.wk-hall-chat-top-card-label {
  flex: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  white-space: nowrap;
}

.wk-hall-chat-entry-state {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wk-hall-chat-away-overdue {
  flex: none;
  max-width: 72px;
  padding: 1px 6px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff1f0;
  color: #f04438;
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-chat-source-badge {
  display: none;
}

.wk-hall-chat-standby-badge {
  display: none;
}

.wk-hall-chat-entry-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

/*
 * 麦序行动作按钮统一到 Figma 807:6714（描边态）/ 807:6742（紫底态）的
 * 42×24、圆角 4、0.6px 描边规格；描边默认透明，保证描边态与实心态高度一致。
 */
.wk-hall-chat-help-task,
.wk-hall-chat-entry-action {
  box-sizing: border-box;
  min-width: 42px;
  height: 24px;
  padding: 0 6px;
  border: 0.6px solid transparent;
  border-radius: 4px;
  background: #ffffff;
  color: #333333;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  cursor: pointer;
}

/* Figma 807:7766：麦序行内的「过」按钮是 30×24 的描边胶囊。 */
.wk-hall-chat-pass {
  min-width: 30px;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 0.6px solid rgba(157, 38, 255, 0.2);
  border-radius: 4px;
  color: #9d26ff;
}

/* Figma 807:6678：行内「打他」和同规格按钮的描边是 #9d26ff 20%，不是实色描边。 */
.wk-hall-chat-fight,
.wk-hall-chat-upgrade-task,
.wk-hall-chat-away-replace {
  border-color: rgba(157, 38, 255, 0.2);
  background: #ffffff;
  color: #9d26ff;
}

body[theme-mode="dark"] .wk-hall-chat-away-overdue {
  background: rgba(240, 68, 56, 0.18);
  color: #ff8a80;
}

.wk-hall-chat-help-task:hover,
.wk-hall-chat-entry-action:hover {
  color: #6d28d9;
}

.wk-hall-chat-help-task:disabled,
.wk-hall-chat-entry-action:disabled,
.wk-hall-chat-entry-cancel:disabled {
  cursor: default;
  opacity: 0.52;
}

.wk-hall-chat-queue-actions {
  min-height: 53px;
  margin: 17px -20px 0;
  display: grid;
  grid-template-columns: 124px minmax(260px, 580px) 125px;
  align-items: end;
  justify-content: space-between;
}

.wk-hall-chat-more-actions {
  position: relative;
  grid-column: 1;
  width: 124px;
  height: 53px;
  align-self: end;
}

.wk-hall-chat-action-ornament {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 51px;
  height: 46px;
  display: block;
  pointer-events: none;
  transform: translateX(-50%);
}

.wk-hall-chat-solid-chevron.wk-hall-chat-proxy-caret-dark {
  display: none;
}

body[theme-mode="dark"] .wk-hall-chat-proxy-caret-light {
  display: none;
}

body[theme-mode="dark"] .wk-hall-chat-solid-chevron.wk-hall-chat-proxy-caret-dark {
  display: block;
  filter: none;
}

.wk-hall-chat-more-trigger {
  --wk-hall-proxy-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(224, 186, 255, 0.3) 100%
  );
  --wk-hall-proxy-ink: #5e5e5e;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 124px;
  height: 33px;
  padding: 0 15px;
  border: 0;
  border-radius: 0 17px 17px 0;
  background: rgba(255, 255, 255, 0.58);
  color: #555555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}

.wk-hall-chat-solid-chevron-frame {
  width: 18px;
  height: 18px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wk-hall-chat-solid-chevron {
  width: 11px;
  height: 6px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-hall-chat-more-menu {
  width: 100px;
  height: 78px;
  padding: 7px 0 1px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: transparent;
  /* 807:7683 / 949:10263: 阴影沿原始 Union 轮廓（包含尖角）。 */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.14));
}

.wk-hall-chat-more-menu-surface {
  position: absolute;
  top: -0.078125px;
  left: 0;
  width: 100%;
  height: 78px;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 0;
}

.wk-hall-chat-more-menu-surface.is-dark {
  display: none;
}

.wk-hall-chat-portal-menu[data-placement="top"].wk-hall-chat-gear-menu::before {
  top: auto;
  bottom: -7px;
  border-top: 7px solid rgba(255, 255, 255, 0.98);
  border-bottom: 0;
}

.wk-hall-chat-more-menu[data-placement="top"] {
  padding: 1px 0 7px;
}

.wk-hall-chat-more-menu[data-placement="top"] .wk-hall-chat-more-menu-surface {
  transform: scaleY(-1);
}

.wk-hall-chat-more-menu button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 35px;
  height: 35px;
  padding: 2px;
  box-sizing: border-box;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: var(--wk-font-family);
  font-weight: 400;
  line-height: 15px;
  flex: none;
  text-align: center;
  cursor: pointer;
}

.wk-hall-chat-more-menu button span {
  width: 100%;
  height: 31px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-hall-chat-more-menu button:hover:not(:disabled):not(.selected) span {
  background: #f5f0ff;
  color: #6d28d9;
}

.wk-hall-chat-more-menu button.selected span,
.wk-hall-chat-more-menu button.selected:hover:not(:disabled) span {
  background: #9d26ff;
  color: #ffffff;
}

.wk-hall-chat-more-menu button:disabled {
  cursor: default;
  opacity: 0.46;
}

.wk-hall-chat-more-menu small {
  color: #999999;
  font-size: 10px;
}

.wk-hall-chat-task-queue {
  grid-column: 2;
  min-width: 260px;
  width: 100%;
  max-width: 580px;
  height: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wk-hall-chat-task-value-trigger,
.wk-hall-chat-task-queue > button,
.wk-hall-chat-normal-queue,
.wk-hall-chat-my-queue {
  min-height: 40px;
  border: 1px solid #888888;
  background: transparent;
  color: #4c4c4c;
  font-size: 14px;
}

.wk-hall-chat-task-value-picker {
  position: relative;
  min-width: 0;
}

.wk-hall-chat-task-value-trigger {
  width: 100%;
  height: 100%;
  padding: 0 15px;
  border-radius: 22px 0 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
}

.wk-hall-chat-task-value-trigger span {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.wk-hall-chat-task-value-wheel {
  position: relative;
  width: 28px;
  height: 38px;
  overflow: hidden;
  display: block;
  flex: none;
}

.wk-hall-chat-task-value-wheel strong,
.wk-hall-chat-task-value-wheel small {
  position: absolute;
  right: 0;
  left: 0;
  display: block;
  color: #333333;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
}

.wk-hall-chat-task-value-wheel strong {
  top: 50%;
  font-size: 14px;
  transform: translateY(-50%);
}

.wk-hall-chat-task-value-wheel small {
  color: rgba(51, 51, 51, 0.18);
  font-size: 14px;
}

.wk-hall-chat-task-value-wheel small:first-of-type {
  top: -10px;
}

.wk-hall-chat-task-value-wheel small:last-of-type {
  bottom: -10px;
}

.wk-hall-chat-task-value-trigger svg {
  font-size: 12px;
}

.wk-hall-chat-task-value-trigger .wk-hall-chat-solid-chevron {
  width: 8px;
  height: 8px;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-hall-chat-task-queue > button {
  margin-left: -1px;
  border-radius: 0 22px 22px 0;
  cursor: pointer;
}

.wk-hall-chat-normal-actions {
  position: relative;
  grid-column: 3;
  width: 125px;
  height: 53px;
}

.wk-hall-chat-normal-queue {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 125px;
  min-width: 125px;
  height: 33px;
  min-height: 33px;
  padding: 0 15px;
  border: 0;
  border-radius: 17px 0 0 17px;
  cursor: pointer;
}

.wk-hall-chat-task-queue > button.selected,
.wk-hall-chat-normal-queue.selected {
  border-color: #8c8c8c;
  background: #8c8c8c;
  color: #ffffff;
}

.wk-hall-chat-task-queue > button:hover:not(:disabled),
.wk-hall-chat-normal-queue:hover:not(:disabled) {
  background: #ffffff;
  color: #4c4c4c;
}
.wk-hall-chat-task-value-trigger:disabled,
.wk-hall-chat-task-queue > button:disabled,
.wk-hall-chat-normal-queue:disabled {
  cursor: default;
  opacity: 0.58;
}

.wk-hall-chat-empty-slot-hint {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wk-hall-chat-bought-slot-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px 0;
}

.wk-hall-chat-bought-slot {
  height: 28px;
  min-width: 52px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  font-size: 13px;
}

.wk-hall-chat-bought-slot:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.wk-hall-chat-bought-slot-hint {
  font-size: 12px;
  opacity: 0.7;
}

.wk-hall-chat-my-queue {
  grid-column: 2;
  align-self: end;
  width: min(100%, 520px);
  padding: 0 6px 0 18px;
  border: 0;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wk-hall-chat-my-queue button {
  min-width: 88px;
  height: 32px;
  border: 0;
  border-radius: 17px;
  background: #8b8b8b;
  color: #ffffff;
  cursor: pointer;
}

.wk-hall-chat-my-queue button:disabled {
  cursor: default;
  opacity: 0.58;
}

.wk-hall-chat-next-hint {
  margin-top: 9px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  color: #666666;
  font-size: 11px;
  text-align: center;
}

.wk-hall-chat-runtime-banner {
  min-height: 32px;
  margin: 0 -20px;
  padding: 0 20px;
  border-radius: 0;
  background: transparent;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-align: center;
}

.wk-hall-chat-runtime-banner.is-error {
  background: rgba(185, 28, 28, 0.08);
  color: #991b1b;
}

.wk-hall-proxy-form {
  position: relative;
  width: 100%;
  min-height: 0;
  height: 100%;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
}

.wk-hall-proxy-mode,
.wk-hall-proxy-task,
.wk-hall-proxy-search {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #555555;
  font-size: 13px;
}

.wk-hall-proxy-mode > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.wk-hall-proxy-mode button {
  min-height: 38px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #f6f6f7;
  color: #666666;
  cursor: pointer;
}

.wk-hall-proxy-mode button.selected {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-hall-proxy-mode b {
  padding: 9px 12px;
  border-radius: 8px;
  background: #f5f0ff;
  color: #6d28d9;
  font-weight: 500;
}

.wk-hall-proxy-task select,
.wk-hall-proxy-search input {
  width: 100%;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #ffffff;
  color: #444444;
  outline: none;
}

.wk-hall-proxy-task select:focus,
.wk-hall-proxy-search input:focus {
  border-color: #8b5cf6;
}

.wk-hall-proxy-members {
  max-height: 260px;
  padding: 4px;
  border: 1px solid #eeeeee;
  border-radius: 9px;
  overflow-y: auto;
}

.wk-hall-proxy-members > button {
  width: 100%;
  min-height: 46px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #444444;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.wk-hall-proxy-members > button:hover,
.wk-hall-proxy-members > button.selected {
  background: #f5f0ff;
  color: #6d28d9;
}

.wk-hall-proxy-members small {
  min-width: 0;
  overflow: hidden;
  color: #999999;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-proxy-empty,
.wk-hall-proxy-error {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 12px;
}

.wk-hall-proxy-error {
  color: #dc2626;
}

.wk-hall-proxy-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.wk-hall-proxy-actions button {
  min-width: 92px;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 19px;
  background: #eeeeee;
  color: #555555;
  cursor: pointer;
}

.wk-hall-proxy-actions button.primary {
  background: #8b5cf6;
  color: #ffffff;
}

.wk-hall-proxy-actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

.wk-hall-runtime-modal.wk-hall-member-modal .semi-modal {
  width: min(375px, 100vw);
  height: min(
    918px,
    calc(100vh - var(--wk-height-chat-conversation-header) - 26px)
  );
  margin: calc(var(--wk-height-chat-conversation-header) + 9px) 14px 17px auto;
  border-radius: 10px;
}

.wk-hall-runtime-modal.wk-hall-member-modal .semi-modal-content {
  position: relative;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 20px rgba(0, 0, 0, 0.25);
}

.wk-hall-runtime-modal.wk-hall-member-modal .semi-modal-header {
  height: 36px;
  margin: 16px 0 10px;
  padding: 0 0 0 24px;
  align-items: center;
}

.wk-hall-runtime-modal.wk-hall-member-modal .semi-modal-title {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  justify-content: flex-start;
  line-height: 36px;
  text-align: left;
}

/* Semi 给 body-wrapper 预留 24px 顶间距，会把搜索框和名单整体压到画板下方。 */
.wk-hall-runtime-modal.wk-hall-member-modal .semi-modal-body-wrapper {
  margin: 0;
}

/* 返回箭头要挂到 modal-content 上，这里必须让出定位上下文。 */
.wk-hall-runtime-modal.wk-hall-member-modal .wk-hall-proxy-form {
  position: static;
}

.wk-hall-runtime-modal.wk-hall-member-modal .semi-modal-body {
  min-height: 0;
  max-height: none;
  padding: 0 0 16px;
  display: flex;
  overflow: hidden;
}

/* 返回箭头与标题共用 807:7198 的 36px 行；名单区要裁剪滚动内容，所以把它
   定位到 modal-content 上，否则会被 .semi-modal-body 的 overflow: hidden 裁掉。 */
.wk-hall-member-modal-back {
  position: absolute;
  top: 16px;
  left: 12px;
  z-index: 2;
  width: 24px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}

.wk-hall-member-modal-back img {
  width: 16px;
  height: 16px;
  display: block;
}

.wk-hall-member-modal-back:disabled {
  cursor: default;
  opacity: 0.45;
}

.wk-hall-member-modal-back:focus-visible {
  border-radius: 4px;
  outline: 2px solid #6b10ff;
  outline-offset: 2px;
}

.wk-hall-member-selector {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

.wk-hall-member-search {
  position: relative;
  flex: none;
  display: block;
}

.wk-hall-member-search img {
  position: absolute;
  left: 12px;
  top: 50%;
  z-index: 1;
  width: 14px;
  height: 14px;
  display: block;
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.wk-hall-member-search input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 34px;
  border: 1px solid rgba(107, 16, 255, 0.6);
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  color: #333333;
  font-size: 14px;
}

.wk-hall-member-search input::-moz-placeholder {
  color: #999999;
  line-height: 12px;
}

.wk-hall-member-search input::placeholder {
  color: #999999;
  line-height: 12px;
}

.wk-hall-member-search input:focus {
  border-color: #6b10ff;
  box-shadow: 0 0 0 2px rgba(107, 16, 255, 0.12);
}

/* Figma 807:7831：代排 / 转麦序成员选择器使用实色主紫描边。 */
.wk-hall-runtime-modal.wk-hall-proxy-modal .wk-hall-member-search input {
  border-color: #9d26ff;
}

/* Figma 807:7205 → 807:7229：918px 弹层内名单区可见高度约 658px。
   由弹层剩余空间决定高度，避免旧的 420px 上限提前裁掉参考画板中的成员。 */
.wk-hall-member-groups {
  min-height: 0;
  max-height: none;
  width: calc(100% + 24px);
  margin-top: 10px;
  margin-right: -12px;
  margin-left: -12px;
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-width: none;
}

.wk-hall-member-groups::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.wk-hall-member-group + .wk-hall-member-group {
  margin-top: 10px;
}

.wk-hall-member-group-title {
  height: 35px;
  min-height: 35px;
  margin-bottom: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  color: #999999;
  font-size: 13px;
  line-height: 15px;
}

.wk-hall-member-group > button {
  width: 100%;
  height: 62px;
  min-height: 62px;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.wk-hall-member-group > button:hover:not(:disabled),
.wk-hall-member-group > button.selected {
  background: rgba(157, 38, 255, 0.1);
  box-shadow: inset 3px 0 0 #9d26ff;
}

.wk-hall-member-group > button:disabled {
  cursor: default;
}

.wk-hall-member-group > button:disabled .wk-hall-member-avatar,
.wk-hall-member-group > button:disabled .wk-hall-member-identity {
  opacity: 0.52;
}

.wk-hall-member-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: #ececf0;
  color: #777780;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 16px;
  font-weight: 600;
}

.wk-hall-member-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-member-identity {
  min-width: 0;
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wk-hall-member-identity strong {
  min-width: 0;
  overflow: hidden;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 设计 807:7957 / 807:7955 / 807:7959 的身份标签，成员选择器与群聊昵称行共用。 */
.wk-hall-role-chip {
  flex: none;
  min-width: 34px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 2px;
  background: #f0f0f1;
  color: #8b8b92;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-style: normal;
  line-height: 12px;
  white-space: nowrap;
}

.wk-hall-role-chip[data-role="厅主"] {
  background: rgba(38, 92, 255, 0.1);
  color: #265cff;
}

.wk-hall-role-chip[data-role="管理"] {
  background: rgba(157, 38, 255, 0.1);
  color: #9d26ff;
}

.wk-hall-role-chip[data-role="主持"] {
  background: rgba(255, 98, 0, 0.1);
  color: #ff6200;
}

.wk-hall-member-group > button > small {
  flex: none;
  color: #999999;
  font-size: 13px;
  line-height: 15px;
}

.wk-hall-member-empty {
  min-height: 110px;
  color: #99999f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.wk-hall-member-load-error {
  min-height: 150px;
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  text-align: center;
}

.wk-hall-member-load-error button {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid #dedee5;
  border-radius: 18px;
  background: #ffffff;
  color: #666666;
  cursor: pointer;
}

.wk-hall-runtime-modal.wk-hall-member-modal .wk-hall-member-groups {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
}

.wk-hall-fight-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wk-hall-fight-target {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 9px;
  background: #f6f6f7;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 7px 12px;
  gap: 7px 12px;
  color: #555555;
  font-size: 12px;
}

.wk-hall-fight-target b {
  min-width: 0;
  overflow: hidden;
  color: #333333;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-fight-target small {
  color: #8a8a8a;
}

.wk-hall-fight-task-options {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.wk-hall-fight-task-options legend {
  width: 100%;
  margin-bottom: 8px;
  color: #555555;
  font-size: 13px;
}

.wk-hall-fight-task-options button {
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #ffffff;
  color: #555555;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

.wk-hall-fight-task-options button.selected {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-hall-fight-task-options button:disabled {
  cursor: default;
  opacity: 0.42;
}

.wk-hall-fight-task-options button b {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.wk-hall-fight-hint {
  padding: 9px 11px;
  border-radius: 8px;
  background: #fff8e8;
  color: #8a6116;
  font-size: 12px;
  line-height: 1.55;
}

.wk-hall-fight-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.wk-hall-fight-actions button {
  min-width: 92px;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 19px;
  background: #eeeeee;
  color: #555555;
  cursor: pointer;
}

.wk-hall-fight-actions button.primary {
  background: #8b5cf6;
  color: #ffffff;
}

.wk-hall-fight-actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

/*
 * Figma 807:7894（群聊-排挡 · 任务值选择弹窗）：335×339 白底 10px 圆角，
 * 内容区 311 宽，标题栏 37 高，任务值行 40 高，候选值 5×30 行，底部按钮 151×40。
 */
.wk-hall-runtime-modal.wk-hall-task-value-modal .semi-modal {
  width: min(335px, calc(100vw - 24px));
  height: min(339px, calc(100vh - 24px));
  border-radius: 10px;
}

.wk-hall-runtime-modal.wk-hall-task-value-modal .semi-modal-content {
  /* Keep Semi's content inside the available viewport as well. */
  max-height: calc(100vh - 24px);
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.wk-hall-runtime-modal.wk-hall-task-value-modal .semi-modal-header {
  position: relative;
  height: 37px;
  flex-shrink: 0;
  margin: 12px 0 10px;
  padding: 0;
  align-items: center;
  background: transparent;
}

.wk-hall-runtime-modal.wk-hall-task-value-modal .semi-modal-title {
  width: 100%;
  padding: 0 26px;
  box-sizing: border-box;
  color: #000000;
  font-size: 15px;
  font-weight: 500;
  line-height: 16px;
}

.wk-hall-runtime-modal.wk-hall-task-value-modal .semi-modal-close {
  position: absolute;
  top: 50%;
  right: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
}

.wk-hall-runtime-modal.wk-hall-task-value-modal .semi-modal-body {
  min-height: 0;
  max-height: none;
  padding: 0 0 22px;
  overflow-x: hidden;
  /* Extremely short windows must still allow reaching both action buttons. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.wk-hall-runtime-modal.wk-hall-task-value-modal .semi-modal-body::-webkit-scrollbar {
  display: none;
}

.wk-hall-task-value-close-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.wk-hall-task-value-form {
  display: flex;
  flex-direction: column;
}

/* 任务值行是白底描边式（807:7898），不是早期的灰底大圆角胶囊。 */
.wk-hall-task-value-current {
  min-height: 40px;
  height: 40px;
  padding: 0 11px;
  box-sizing: border-box;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  background: #ffffff;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 15px;
}

/* 807:7901：渐变底 + 白色半透明描边 + 白字角标。 */
.wk-hall-task-value-current em {
  min-width: 105px;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.6px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-size: 13px;
  font-style: normal;
  line-height: 15px;
}

.wk-hall-task-value-current strong {
  margin-left: auto;
  color: #000000;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.wk-hall-task-value-options {
  /* Reserve 205px for viewport margins, header, current value and actions.
   * Only the list shrinks in short windows; the 40px buttons stay visible. */
  --wk-hall-task-options-height: clamp(30px, calc(100vh - 205px), 158px);
  position: relative;
  box-sizing: border-box;
  flex: none;
  min-height: var(--wk-hall-task-options-height);
  height: var(--wk-hall-task-options-height);
  max-height: var(--wk-hall-task-options-height);
  margin: 10px 0;
  /* 64px at design height; keep the first/last row centered after resizing. */
  padding: calc((var(--wk-hall-task-options-height) - 30px) / 2) 0;
  display: grid;
  grid-auto-rows: 30px;
  grid-row-gap: 2px;
  row-gap: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.wk-hall-task-value-options::-webkit-scrollbar {
  display: none;
}

.wk-hall-task-value-options button {
  width: 100%;
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(51, 51, 51, 0.5);
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.wk-hall-task-value-options button:has(+ button.selected),
.wk-hall-task-value-options button.selected + button {
  color: #333333;
}

.wk-hall-task-value-options button.selected {
  background: #9d26ff;
  color: #ffffff;
}

.wk-hall-task-value-options button:disabled {
  cursor: default;
}

.wk-hall-task-value-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 9px;
  gap: 9px;
}

.wk-hall-task-value-actions button {
  min-height: 40px;
  height: 40px;
  border: 1px solid #efefef;
  border-radius: 8px;
  background: transparent;
  color: #333333;
  font-size: 16px;
  line-height: 22.4px;
  cursor: pointer;
}

.wk-hall-task-value-actions button.primary {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-weight: 500;
}

.wk-hall-task-value-actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

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

/* 输入框右上方的 Hall 快捷菜单 */
.wk-conversation {
  --wk-hall-floating-offset: 18px;
}

.wk-conversation:not(.wk-conversation-has-away-banner):has(
    .wk-conversationpositionview[data-visible-actions="1"]
  ) {
  --wk-hall-floating-offset: 78px;
}

.wk-conversation:not(.wk-conversation-has-away-banner):has(
    .wk-conversationpositionview[data-visible-actions="2"]
  ) {
  --wk-hall-floating-offset: 156px;
}

.wk-conversation:not(.wk-conversation-has-away-banner):has(
    .wk-conversationpositionview[data-visible-actions="3"]
  ) {
  --wk-hall-floating-offset: 234px;
}

.wk-conversation-has-away-banner {
  --wk-hall-floating-offset: 103px;
}

.wk-conversation-has-away-banner:has(
    .wk-conversationpositionview[data-visible-actions="2"]
  ) {
  --wk-hall-floating-offset: 156px;
}

.wk-conversation-has-away-banner:has(
    .wk-conversationpositionview[data-visible-actions="3"]
  ) {
  --wk-hall-floating-offset: 234px;
}

.wk-hall-floating-menu {
  position: absolute;
  top: auto;
  right: 20px;
  bottom: calc(
    var(--wk-conversation-footer) + 18px
  );
  bottom: calc(
    var(--wk-conversation-footer) + var(--wk-hall-floating-offset, 18px)
  );
  z-index: 30;
  width: 58px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  pointer-events: none;
}

.wk-conversation-floating-layers > .wk-hall-floating-menu {
  pointer-events: none;
}

.wk-conversation-hasreply .wk-hall-floating-menu {
  bottom: calc(
    var(--wk-conversation-footer) + var(--wk-height-conversation-replyview) +
      18px
  );
  bottom: calc(
    var(--wk-conversation-footer) + var(--wk-height-conversation-replyview) +
      var(--wk-hall-floating-offset, 18px)
  );
}

.wk-hall-floating-trigger {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
}

.wk-hall-floating-trigger img {
  display: block;
  width: 58px;
  height: 58px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Figma 807:7617：展开项右对齐到悬浮按钮的右边缘（counterAxisAlignItems=MAX），
   而不是在 58px 列里居中。 */
.wk-hall-floating-menu-list {
  flex: 0 0 auto;
  width: 58px;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  pointer-events: none;
}

.wk-hall-floating-menu-list button {
  position: relative;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.wk-hall-floating-menu-list button:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

.wk-hall-floating-menu-list button:focus-visible,
.wk-hall-floating-trigger:focus-visible {
  outline: 2px solid #896eff;
  outline-offset: 2px;
}

.wk-hall-floating-menu-icon {
  display: block;
  flex: none;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.wk-hall-floating-menu-icon-dark {
  display: none;
  /* 949:20399~20402 的 render bounds 含左/右 4px、底部 8px 原生阴影。
     50px 图层不参与布局，圆按钮仍为 42px；不能把 SVG 阴影裁在点击框内。 */
  position: absolute;
  top: 0;
  left: -4px;
  width: 50px;
  max-width: none;
  height: 50px;
}

.wk-hall-runtime-loading,
.wk-hall-runtime-empty,
.wk-hall-runtime-error {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a8a8a;
}
.wk-hall-runtime-modal .semi-modal {
  width: min(520px, calc(100vw - 32px));
  border-radius: 12px;
}
.wk-hall-runtime-modal .semi-modal-content {
  border-radius: 12px;
}
.wk-hall-runtime-modal .semi-modal-header {
  padding: 20px 22px 10px;
}
.wk-hall-runtime-modal .semi-modal-title {
  width: 100%;
  color: #333333;
  font-size: 18px;
  font-weight: 600;
  justify-content: center;
  text-align: center;
}
.wk-hall-runtime-modal .semi-modal-body {
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}
.wk-hall-runtime-modal.wk-hall-confirm-modal .semi-modal {
  width: min(260px, calc(100vw - 24px));
  height: 206px;
  border-radius: 6px;
  overflow: hidden;
}
.wk-hall-runtime-modal.wk-hall-confirm-modal .semi-modal-content {
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
}
.wk-hall-runtime-modal.wk-hall-confirm-modal .semi-modal-header {
  height: 104px;
  margin: 0;
  padding: 82px 20px 0;
  box-sizing: border-box;
  position: relative;
  align-items: flex-start;
  justify-content: center;
}

.wk-hall-runtime-modal.wk-hall-confirm-modal .semi-modal-header::before {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 40px;
  height: 44px;
  padding-top: 10px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #b942ff 0%, #6b10ff 100%);
  clip-path: polygon(50% 0, 92% 14%, 86% 72%, 50% 100%, 14% 72%, 8% 14%);
  color: #ffffff;
  content: "!";
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  transform: translateX(-50%);
}
.wk-hall-runtime-modal.wk-hall-confirm-modal .semi-modal-title {
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.wk-hall-runtime-modal.wk-hall-confirm-modal .semi-modal-body {
  padding: 0;
  overflow: visible;
}
.wk-hall-confirm-dialog p {
  height: 48px;
  margin: 0;
  padding: 10px 12px 20px;
  box-sizing: border-box;
  color: #333333;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.wk-hall-confirm-dialog p > span {
  display: block;
}
.wk-hall-confirm-actions {
  height: 54px;
  padding: 2px 16px 18px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, 108px);
  grid-gap: 12px;
  gap: 12px;
}
.wk-hall-confirm-actions button {
  width: 108px;
  min-height: 34px;
  height: 34px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  background: #ffffff;
  color: #555555;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.wk-hall-confirm-actions button.primary {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}
.wk-hall-confirm-actions button:disabled {
  cursor: default;
  opacity: 0.55;
}
.wk-hall-runtime-error {
  color: #dc2626;
}
.wk-hall-runtime-form-error {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fff1f2;
  color: #dc2626;
  font-size: 12px;
}
.wk-hall-runtime-list {
  max-height: 420px;
  overflow-y: auto;
}
.wk-hall-runtime-list-item {
  min-height: 48px;
  padding: 8px 2px;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wk-hall-runtime-list-item span {
  color: #8a8a8a;
  font-size: 12px;
}
.wk-hall-runtime-label {
  margin-bottom: 8px;
  color: #444444;
  font-size: 13px;
}
.wk-hall-runtime-host-input {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #dedede;
  border-radius: 6px;
  outline: none;
}
.wk-hall-runtime-host-input:focus {
  border-color: #8b5cf6;
}
.wk-hall-runtime-hint {
  margin-top: 8px;
  color: #8a8a8a;
  font-size: 12px;
}

/*
 * 夜间排麦面板对齐设计包「群聊-排挡」949:10232 与「消息-排麦」949:18803：
 * 面板底 949:10300 #1E1E1F，摘要/操作行与队列行 949:10302/949:10351 统一 #2F2F30，
 * 下拉浮层 949:10233/949:10253 落到 #1E1E1F，正文一律 #DFE2E6。
 *
 * 面板本体 949:19363（416×944）也是 #1E1E1F，紧凑态卡片 949:19065 才是 #2F2F30。
 * 亮色 .wk-hall-chat-header 写死 #F8F8F8，夜间不覆盖就会沿摘要行的外边距漏出白边，
 * 所以这里连同紧凑态、收起态一起重挂到夜间灰阶。
 */
body[theme-mode="dark"] .wk-hall-chat-header {
  background: var(--wk-night-canvas);
  color: var(--wk-night-ink);
  box-shadow: inset 0.6px 0 0 var(--wk-night-line);
}
body[theme-mode="dark"] .wk-hall-chat-header.is-compact {
  background: var(--wk-night-surface);
}
body[theme-mode="dark"] .wk-hall-chat-header.is-hidden {
  background: transparent;
  box-shadow: none;
}
body[theme-mode="dark"] .wk-hall-chat-summary {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-chat-toolbar {
  border-top-color: var(--wk-night-line);
  background: var(--wk-night-surface);
}
body[theme-mode="dark"] .wk-hall-chat-details {
  background: var(--wk-night-canvas);
}
body[theme-mode="dark"] .wk-hall-chat-queue-slot-empty:hover:not(:disabled) {
  background: var(--wk-night-raise);
}
body[theme-mode="dark"] .wk-hall-chat-task-queue > button:hover:not(:disabled),
body[theme-mode="dark"] .wk-hall-chat-normal-queue:hover:not(:disabled) {
  background: var(--wk-night-raise);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-chat-summary-count,
body[theme-mode="dark"] .wk-hall-chat-meta {
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-chat-status.is-serving,
body[theme-mode="dark"] .wk-hall-chat-source-badge,
body[theme-mode="dark"] .wk-hall-chat-standby-badge {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
}
body[theme-mode="dark"] .wk-hall-chat-queue-entry,
body[theme-mode="dark"] .wk-hall-chat-queue-slot-empty,
body[theme-mode="dark"] .wk-hall-chat-queue-empty {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-chat-queue-entry.state-active,
body[theme-mode="dark"] .wk-hall-chat-queue-entry.state-standby {
  background: var(--wk-night-surface);
}
body[theme-mode="dark"] .wk-hall-chat-gear-menu {
  background: var(--wk-night-canvas);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-chat-my-queue,
body[theme-mode="dark"] .wk-hall-chat-task-value-trigger,
body[theme-mode="dark"] .wk-hall-chat-normal-queue {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}
/*
 * 949:18850 的行内动作按钮在夜间是「紫描边 + 5% 紫底」的幽灵按钮，
 * 亮色写死的 #ffffff 底会在 #2F2F30 队列行上变成一块高亮白片。
 * 实底「上麦」（.wk-hall-chat-empty-slot-action）仍保留 #9D26FF 紫底。
 */
body[theme-mode="dark"] .wk-hall-chat-help-task,
body[theme-mode="dark"] .wk-hall-chat-entry-action,
body[theme-mode="dark"] .wk-hall-chat-fight,
body[theme-mode="dark"] .wk-hall-chat-upgrade-task,
body[theme-mode="dark"] .wk-hall-chat-away-replace {
  border-color: rgba(157, 38, 255, 0.5);
  background: rgba(157, 38, 255, 0.05);
  color: #9d26ff;
}
body[theme-mode="dark"] .wk-hall-chat-help-task:hover,
body[theme-mode="dark"] .wk-hall-chat-entry-action:hover {
  color: #b563ff;
}
/* 949:18871：「候选」分组标题在夜间用正文色，不再沿用亮色的 #666666。 */
body[theme-mode="dark"] .wk-hall-chat-standby-group .wk-hall-chat-queue-title {
  color: var(--wk-night-ink);
}
/* 排队时长与空位徽章保持 #FF6200 语义色，底改成同色 10%，夜间不留 #FFF5EA 亮片。 */
body[theme-mode="dark"] .wk-hall-chat-toolbar-metric.is-queue-time > b,
body[theme-mode="dark"] .wk-hall-chat-slot-badge {
  background: rgba(255, 98, 0, 0.1);
  color: #ff6200;
}
/* 949:20398 原始 SVG 已包含暗色图形、10% 圆底和 0.6px/50% 描边，
   不再叠加亮色圆底或 CSS 投影。四个视窗保持各自完整的 42×42 点击区域。 */
body[theme-mode="dark"] .wk-hall-floating-menu-list button,
body[theme-mode="dark"] .wk-hall-floating-menu-list button:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[theme-mode="dark"] .wk-hall-floating-menu-icon-light {
  display: none;
}

body[theme-mode="dark"] .wk-hall-floating-menu-icon-dark {
  display: block;
}
/* 档期切换器与面板卡面同底，状态徽章保留主色/橙色但换成 10% 底。 */
body[theme-mode="dark"] .wk-hall-chat-gear-switcher-trigger {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-chat-gear-switcher-trigger b {
  background: rgba(157, 38, 255, 0.1);
  color: #9d26ff;
}
body[theme-mode="dark"]
  .wk-hall-chat-gear-switcher.is-serving
  .wk-hall-chat-gear-switcher-trigger
  b {
  background: rgba(255, 98, 0, 0.1);
  color: #ff6200;
}
/* 工具行指标与主持条的说明文字亮色写死 #333333/#666666，夜间几乎不可读。 */
body[theme-mode="dark"] .wk-hall-chat-toolbar-metrics,
body[theme-mode="dark"] .wk-hall-chat-host-strip {
  color: var(--wk-night-ink);
}
/*
 * 夜间次要 chip 统一落到卡面色：亮色里它们都是「白底 20%~72% 透明」，
 * 叠在 #1E1E1F / #2F2F30 上会变成一层洗白的雾片。
 */
body[theme-mode="dark"] .wk-hall-chat-window-chip:not(.is-closed),
body[theme-mode="dark"] .wk-hall-chat-bought-slot,
body[theme-mode="dark"] .wk-hall-chat-host-strip b,
body[theme-mode="dark"] .wk-hall-chat-queue-title span,
body[theme-mode="dark"] .wk-hall-chat-toolbar-metrics b {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}
/* 949:19366 的代排入口有独立渐变，不属于夜间通用 chip。 */
body[theme-mode="dark"] .wk-hall-chat-more-trigger {
  --wk-hall-proxy-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.6) 0%,
    #e0baff 100%
  );
  --wk-hall-proxy-ink: #2f2f30;
  background: var(--wk-hall-proxy-fill);
  color: var(--wk-hall-proxy-ink);
}
body[theme-mode="dark"] .wk-hall-chat-toolbar-metric b {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}
body[theme-mode="dark"] .wk-hall-chat-gear-menu::before {
  border-bottom-color: var(--wk-night-canvas);
}
body[theme-mode="dark"]
  .wk-hall-chat-portal-menu[data-placement="top"].wk-hall-chat-gear-menu::before {
  border-top-color: var(--wk-night-canvas);
  border-bottom: 0;
}
body[theme-mode="dark"] .wk-hall-chat-task-value {
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-chat-member-name,
body[theme-mode="dark"]
  .wk-hall-chat-position:not([data-rank="1"]):not([data-rank="2"]):not(
    [data-rank="3"]
  ) {
  color: rgba(255, 255, 255, 0.84);
}
body[theme-mode="dark"] .wk-hall-chat-gear-menu button {
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-chat-more-menu button {
  color: #dfe2e6;
}
body[theme-mode="dark"] .wk-hall-chat-more-menu-surface.is-light {
  display: none;
}
body[theme-mode="dark"] .wk-hall-chat-more-menu-surface.is-dark {
  display: block;
}
body[theme-mode="dark"] .wk-hall-chat-more-menu button:hover:not(:disabled):not(.selected) span {
  background: rgba(157, 38, 255, 0.1);
  color: #dfe2e6;
}
body[theme-mode="dark"] .wk-hall-chat-gear-menu button:hover,
body[theme-mode="dark"] .wk-hall-chat-gear-menu button.selected {
  background: var(--wk-night-raise);
}
body[theme-mode="dark"] .wk-hall-chat-gear-menu button.selected,
body[theme-mode="dark"] .wk-hall-chat-gear-menu button.selected:hover {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
}
body[theme-mode="dark"] .wk-hall-chat-more-menu button.selected span,
body[theme-mode="dark"]
  .wk-hall-chat-more-menu
  button.selected:hover:not(:disabled)
  span {
  background: #9d26ff;
  color: #ffffff;
}
body[theme-mode="dark"] .wk-hall-proxy-mode,
body[theme-mode="dark"] .wk-hall-proxy-task,
body[theme-mode="dark"] .wk-hall-proxy-search {
  color: rgba(255, 255, 255, 0.75);
}
body[theme-mode="dark"] .wk-hall-proxy-mode button,
body[theme-mode="dark"] .wk-hall-proxy-task select,
body[theme-mode="dark"] .wk-hall-proxy-search input,
body[theme-mode="dark"] .wk-hall-proxy-members {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-proxy-mode button.selected,
body[theme-mode="dark"] .wk-hall-proxy-members > button.selected,
body[theme-mode="dark"] .wk-hall-proxy-members > button:hover {
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
}
body[theme-mode="dark"] .wk-hall-proxy-mode button.selected {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}
body[theme-mode="dark"] .wk-hall-proxy-members > button {
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-fight-target,
body[theme-mode="dark"] .wk-hall-fight-task-options button,
body[theme-mode="dark"] .wk-hall-fight-actions button {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-fight-target b {
  color: rgba(255, 255, 255, 0.9);
}
body[theme-mode="dark"] .wk-hall-fight-task-options button.selected {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}
body[theme-mode="dark"] .wk-hall-fight-hint {
  background: rgba(180, 120, 20, 0.16);
  color: #f4c46a;
}
body[theme-mode="dark"] .wk-hall-member-search input,
body[theme-mode="dark"] .wk-hall-member-group > button,
body[theme-mode="dark"] .wk-hall-task-pass {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-member-identity strong {
  color: var(--wk-night-ink);
}
/*
 * 夜间只兜底没有身份的标签；带 [data-role] 的三色 10% 底是身份语义色，
 * 亮夜两套画板共用，不能被一条通用灰规则盖掉。
 */
body[theme-mode="dark"] .wk-hall-role-chip:not([data-role]) {
  background: var(--wk-night-raise);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-member-group > button:hover:not(:disabled),
body[theme-mode="dark"] .wk-hall-member-group > button.selected {
  background: rgba(139, 92, 246, 0.18);
}
/*
 * 任务值选择弹窗 949:10273：弹窗底 #1E1E1F、当前值行 #2F2F30、
 * 选中项 #9D26FF、取消按钮只留 #DFE2E6 30% 描边。
 */
body[theme-mode="dark"] .wk-hall-task-value-modal .semi-modal-content {
  background: var(--wk-night-canvas);
}
body[theme-mode="dark"] .wk-hall-task-value-current {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-task-value-options button.selected {
  background: #9d26ff;
  color: #ffffff;
}
body[theme-mode="dark"] .wk-hall-task-value-current strong,
body[theme-mode="dark"] .wk-hall-task-value-options button {
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-task-value-current em {
  color: #ffffff;
}
body[theme-mode="dark"] .wk-hall-task-value-actions button {
  border-color: rgba(223, 226, 230, 0.3);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-task-value-actions button.primary {
  border-color: transparent;
  color: #ffffff;
}
body[theme-mode="dark"] .wk-hall-confirm-dialog p {
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-confirm-actions button {
  border-color: rgba(223, 226, 230, 0.3);
  background: transparent;
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-confirm-actions button.primary {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}
body[theme-mode="dark"] .wk-hall-member-load-error button {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-host-mode-tabs button,
body[theme-mode="dark"] .wk-hall-host-occurrence-tabs button,
body[theme-mode="dark"] .wk-hall-gear-create-form input,
body[theme-mode="dark"] .wk-hall-host-member-list button {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}
body[theme-mode="dark"] .wk-hall-host-mode-tabs button.selected,
body[theme-mode="dark"] .wk-hall-host-occurrence-tabs button.selected,
body[theme-mode="dark"] .wk-hall-host-member-list button.selected {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
}
body[theme-mode="dark"] .wk-hall-host-occurrence-tabs span {
  color: var(--wk-night-ink-muted);
}
body[theme-mode="dark"] .wk-hall-current-gear-summary {
  background: var(--wk-night-surface);
}

@container hall-chat (max-width: 960px) {
  .wk-hall-chat-queue-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container hall-chat (max-width: 700px) {
  .wk-hall-chat-queue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wk-hall-chat-queue-actions {
    margin-right: 0;
    margin-left: 0;
    grid-template-columns: 124px minmax(220px, 1fr) 125px;
    -moz-column-gap: 10px;
         column-gap: 10px;
  }

  .wk-hall-chat-more-actions {
    width: 124px;
  }

  .wk-hall-chat-task-queue {
    width: 100%;
    max-width: none;
  }
}

@container hall-chat (max-width: 529px) {
  .wk-hall-chat-summary {
    padding-left: 10px;
    padding-right: 10px;
  }

  .wk-hall-chat-summary-title {
    max-width: 28%;
  }

  .wk-hall-chat-queue-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .wk-hall-chat-queue-actions {
    margin-top: 16px;
    margin-right: 0;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .wk-hall-chat-more-actions,
  .wk-hall-chat-normal-actions {
    width: 100%;
    height: 40px;
  }

  .wk-hall-chat-more-trigger,
  .wk-hall-chat-normal-queue {
    position: relative;
    width: 100%;
    height: 40px;
    min-height: 40px;
  }

  .wk-hall-chat-action-ornament {
    display: none;
  }

  .wk-hall-chat-task-queue {
    min-width: 0;
    max-width: none;
  }
}

/* 窄聊天区（例如 1024 宽画布）把展开面板收到 416px 以下时，摘要与工具行
   放不下原型的单行排布。让它们按内容换行而不是钉死 44px，档位、人数和
   倒计时才不会互相压字；标题继续省略号截断。 */
@container hall-chat (max-width: 415px) {
  .wk-hall-chat-header.is-expanded > .wk-hall-chat-summary,
  .wk-hall-chat-header.is-expanded > .wk-hall-chat-toolbar {
    height: auto;
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .wk-hall-chat-header.is-expanded > .wk-hall-chat-summary {
    -moz-column-gap: 8px;
         column-gap: 8px;
  }

  .wk-hall-chat-header.is-expanded .wk-hall-chat-status,
  .wk-hall-chat-header.is-expanded .wk-hall-chat-slot-badge,
  .wk-hall-chat-header.is-expanded .wk-hall-chat-summary-count {
    flex: none;
    white-space: nowrap;
  }

  .wk-hall-chat-header.is-expanded .wk-hall-chat-summary-title {
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
  }

  /* DOM 顺序是 铃铛/状态/标题/档位/人数/箭头，用 order 把箭头留在首行末尾，
     档位与人数一起落到第二行。 */
  .wk-hall-chat-header.is-expanded .wk-hall-chat-chevron {
    order: 1;
    margin-left: auto;
  }

  .wk-hall-chat-header.is-expanded .wk-hall-chat-slot-badge,
  .wk-hall-chat-header.is-expanded .wk-hall-chat-summary-count {
    order: 2;
  }

  .wk-hall-chat-header.is-expanded .wk-hall-chat-toolbar-metrics {
    -moz-column-gap: 10px;
         column-gap: 10px;
  }
}

@container wk-app-canvas (max-width: 640px) {
  .wk-hall-chat-header,
  .wk-hall-chat-header.is-expanded {
    height: auto;
  }
  .wk-hall-chat-header.is-hidden {
    width: 100%;
    height: 38px;
  }
  .wk-hall-chat-header.is-compact .wk-hall-chat-panel-handle.is-hide,
  .wk-hall-chat-header.is-expanded .wk-hall-chat-panel-handle.is-hide {
    left: 0;
  }
  .wk-hall-chat-header.is-hidden .wk-hall-chat-panel-handle.is-show {
    inset: 0 0 0 auto;
    height: 38px;
  }
  .wk-hall-chat-header.is-hidden
    .wk-hall-chat-panel-handle.is-show
    .wk-hall-chat-panel-handle-tab {
    height: 38px;
  }
  .wk-hall-chat-summary {
    padding-left: 10px;
    padding-right: 10px;
  }
  .wk-hall-chat-summary-title {
    max-width: 35%;
  }
  .wk-hall-chat-toolbar {
    padding-left: 10px;
    padding-right: 10px;
  }
  /* 紧凑态自己声明了 12px 20px，窄画布下要继续收到 10px。 */
  .wk-hall-chat-header.is-compact > .wk-hall-chat-summary,
  .wk-hall-chat-header.is-compact > .wk-hall-chat-toolbar {
    padding-left: 10px;
    padding-right: 10px;
  }
  .wk-hall-chat-toolbar-metrics {
    gap: 5px;
  }
  .wk-hall-chat-header.is-compact .wk-hall-chat-toolbar-metrics {
    -moz-column-gap: 5px;
         column-gap: 5px;
  }
  .wk-hall-chat-meta {
    gap: 4px 10px;
  }
  .wk-hall-chat-queue-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .wk-hall-chat-queue-actions {
    margin-top: 16px;
    margin-right: 0;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .wk-hall-chat-task-queue {
    min-width: 0;
    max-width: none;
  }
  .wk-hall-chat-normal-queue {
    position: relative;
    width: 100%;
    height: 40px;
    min-height: 40px;
  }
  .wk-hall-chat-more-actions,
  .wk-hall-chat-normal-actions {
    width: 100%;
    height: 40px;
  }
  .wk-hall-chat-more-trigger {
    position: relative;
    width: 100%;
    height: 40px;
  }
  .wk-hall-chat-action-ornament {
    display: none;
  }
  .wk-hall-fight-task-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wk-hall-floating-menu {
    right: 14px;
  }
}

@container wk-app-canvas (max-width: 420px) {
  .wk-hall-fight-target {
    grid-template-columns: 1fr;
  }
  .wk-hall-fight-task-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 807:6357 / 807:6790：桌面 416px 侧栏保留原型的四段横向排麦操作。
   四段网格最少要 415px，所以按面板自身宽度启用而不是画布宽度：窄画布下
   面板会被收窄到 300px，那时必须回落到 hall-chat 容器查询的堆叠布局，
   否则操作行会被 .wk-hall-chat-details 的 overflow-x: hidden 裁掉。 */
@container wk-app-canvas (min-width: 641px) {
  @container hall-chat (min-width: 416px) {
    .wk-hall-chat-header.is-expanded > .wk-hall-chat-summary {
      padding-right: 20px;
      padding-left: 20px;
    }

    .wk-hall-chat-header.is-expanded > .wk-hall-chat-toolbar {
      padding: 11px 16px 12px;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-toolbar-metrics {
      -moz-column-gap: 10px;
           column-gap: 10px;
      flex-wrap: nowrap;
    }

    .wk-hall-chat-header.is-expanded
      .wk-hall-chat-toolbar-metric.is-queue-time {
      flex: 0 0 74px;
    }

    .wk-hall-chat-header.is-expanded
      .wk-hall-chat-toolbar-metric:not(.is-queue-time) {
      flex: 0 0 86px;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-queue-actions {
      min-height: 54px;
      /* 面板正文左 25px / 右 15px 是不对称内缩（Figma 807:6357），底部操作行要顶到
       麦序窗两侧，负外边距必须按同一组数值回退，否则整行会整体右移并被裁掉右端。
       原型里操作行左沿停在面板底色内 1px（807:6403 x=1020 对面板 1019），
       所以左边只退 24px；上边距 21px 对应候选名单底 871 → 代排块顶 892。 */
      width: calc(100% + 39px);
      margin: 21px -15px 0 -24px;
      display: grid;
      /* Figma 807:6357: 80px 代排入口 + 19px 留白 + 三个 100px 操作块。
       中间两个斜边各叠 2px，白色只会从斜边间自然透出。 */
      grid-template-columns: 80px 19px 196px 100px minmax(20px, 1fr);
      align-items: end;
      grid-gap: 0;
      gap: 0;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-more-actions {
      grid-column: 1;
      width: 100%;
      height: 54px;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-more-trigger {
      position: absolute;
      width: 100%;
      min-width: 0;
      height: 34px;
      min-height: 34px;
      padding: 0 10px;
      font-size: 14px;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-more-trigger {
      border: 1px solid transparent;
      border-radius: 0 20px 20px 0;
      background: var(--wk-hall-proxy-fill) padding-box;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
      color: var(--wk-hall-proxy-ink);
      justify-content: center;
      gap: 2px;
      font-family: var(--wk-font-family);
      font-weight: 400;
      line-height: 13px;
      letter-spacing: 0;
    }

    /* 描边仅画在边缘；不能把 border-box 渐变铺在 30% 透明填充后面。 */
    .wk-hall-chat-header.is-expanded .wk-hall-chat-more-trigger::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(
        225deg,
        #ffffff 0%,
        #e6c8ff 14.9%,
        #f7ecff 50.96%,
        rgba(255, 255, 255, 0) 100%
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-normal-actions {
      grid-column: 4;
      width: 100px;
      height: 54px;
      z-index: 3;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-normal-actions::before {
      content: none;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-normal-queue {
      position: absolute;
      left: 0;
      right: auto;
      width: 100px;
      min-width: 0;
      height: 40px;
      min-height: 40px;
      padding: 0 8px 0 14px;
      border-color: transparent;
      border-radius: 0 20px 20px 0;
      clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
      font-size: 14px;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-task-queue {
      grid-column: 3;
      min-width: 0;
      width: 198px;
      height: 40px;
      grid-template-columns: 100px 100px;
      background: transparent;
      -moz-column-gap: 0;
           column-gap: 0;
      overflow: visible;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-task-value-picker {
      width: 100px;
      height: 40px;
      isolation: isolate;
      z-index: 3;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-task-value-picker::before {
      content: none;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-task-value-trigger {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100px;
      height: 40px;
      padding: 0 7px;
      border: 1px solid transparent;
      border-radius: 20px 2px 2px 20px;
      background: linear-gradient(180deg, #ffffff 0%, #ffdbc0 100%) padding-box,
        linear-gradient(90deg, #ff7f0b 0%, #ff3c26 100%) border-box;
      background-clip: padding-box, border-box;
      clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    }

    /* The clipped gradient border cannot paint the value block's slanted edge.
     Draw that edge separately so it remains visible above the overlapping task block. */
    .wk-hall-chat-header.is-expanded .wk-hall-chat-task-value-trigger::after {
      content: "";
      position: absolute;
      z-index: 2;
      top: -1px;
      right: 0;
      width: 1px;
      height: 42px;
      background: linear-gradient(180deg, #ff7f0b 0%, #ff3c26 100%);
      transform: skewX(-14deg);
      transform-origin: top right;
      pointer-events: none;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-task-queue > button {
      z-index: 2;
      width: 100px;
      margin-left: -2px;
      padding: 0 6px;
      border: 0;
      border-radius: 2px;
      background: linear-gradient(90deg, #ff7f0b 0%, #ff3c26 100%);
      clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
      font-size: 16px;
      font-weight: 500;
      box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5),
        inset -2px -2px 4px #db0011;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-action-ornament {
      /* Sibling below the trigger: it decorates the entry without covering its text. */
      top: 0;
      left: 24px;
      width: 29px;
      height: 38px;
      display: block;
      -o-object-fit: cover;
         object-fit: cover;
      transform: none;
    }

    .wk-hall-chat-header.is-expanded
      .wk-hall-chat-task-queue
      > button:not(:disabled) {
      background: linear-gradient(90deg, #ff7f0b 0%, #ff3c26 100%);
      color: #ffffff;
    }

    .wk-hall-chat-header.is-expanded
      .wk-hall-chat-task-queue
      > button:hover:not(:disabled) {
      background: linear-gradient(90deg, #ff8e22 0%, #ff4829 100%);
      color: #ffffff;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-task-value-trigger {
      color: #ff6a1a;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-task-value-wheel strong {
      color: #ff3f24;
      font-size: 16px;
      font-weight: 500;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-task-value-wheel small {
      display: none;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-task-value-wheel {
      width: 100%;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-normal-queue:not(:disabled),
    .wk-hall-chat-header.is-expanded
      .wk-hall-chat-normal-queue:hover:not(:disabled) {
      background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
      box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5),
        inset -2px -2px 4px #340095;
      color: #ffffff;
    }

    .wk-hall-chat-header.is-expanded
      .wk-hall-chat-task-queue
      > button:disabled {
      background: linear-gradient(90deg, #ff7f0b 0%, #ff3c26 100%);
      box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5),
        inset -2px -2px 4px #db0011;
      color: #ffffff;
      opacity: 1;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-normal-queue:disabled {
      border-color: transparent;
      background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
      box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5),
        inset -2px -2px 4px #340095;
      color: #ffffff;
      opacity: 1;
    }

    .wk-hall-chat-header.is-expanded .wk-hall-chat-my-queue {
      grid-column: 3 / 5;
      width: 100%;
      font-size: 14px;
    }
  }
}

.wk-hall-task-pass {
  width: 100%;
  min-height: 48px;
  margin-bottom: 18px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #f7f7f7;
  color: #555555;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.wk-hall-task-pass:hover:not(:disabled) {
  background: #f1ebff;
  color: #6d28d9;
}
.wk-hall-task-pass:disabled {
  cursor: default;
  opacity: 0.62;
}
.wk-hall-task-modal .semi-modal {
  width: min(434px, calc(100vw - 24px));
  height: min(620px, calc(100vh - 24px));
  border-radius: 20px;
  overflow: visible;
}

.wk-hall-task-modal .semi-modal-content {
  position: relative;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  /* Rotated backdrop extends past 620px: clip must not create a scrollable
     ancestor for keyboard history paging. Low-height mode overrides to auto. */
  overflow: clip;
}

.wk-hall-task-modal .semi-modal-content::before {
  position: absolute;
  top: 55.523px;
  left: -135.5133px;
  z-index: 0;
  width: 705.026px;
  height: 508.9537px;
  background-image: url(../../static/media/task-summary-background.f8b5eda49ebb8830c788.png);
  background-position: -165.827px -935.2835px;
  background-repeat: no-repeat;
  background-size: 1109.6858px 1972.7749px;
  content: "";
  filter: blur(20px);
  opacity: 0.8;
  pointer-events: none;
  transform: rotate(90deg);
  transform-origin: center;
}

.wk-hall-task-modal .semi-modal-header {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 78px;
  height: 78px;
  margin: 0;
  padding: 26px 20px 16px;
  box-sizing: border-box;
  align-items: center;
  flex: none;
}

.wk-hall-task-modal .semi-modal-title {
  height: 36px;
  color: #000000;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  justify-content: center;
  line-height: 36px;
  text-align: center;
}

.wk-hall-task-modal .semi-modal-close {
  position: absolute;
  top: 31px;
  right: 20px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
}

.wk-hall-task-modal .semi-modal-body {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 542px;
  height: 542px;
  max-height: none;
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.wk-hall-task-shell {
  width: 100%;
  height: 542px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wk-hall-task-content-panel {
  width: calc(100% - 40px);
  height: 452px;
  margin: 0 20px;
  padding: 20px 15px 18px;
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  flex: none;
  flex-direction: column;
  overflow: hidden;
}

.wk-hall-task-summary {
  width: 100%;
  height: 81px;
  padding: 16px 0;
  border-radius: 10px;
  box-sizing: border-box;
  background: #ffffff;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  flex: none;
}

.wk-hall-task-summary > div {
  height: 49px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.wk-hall-task-summary > div + div {
  box-shadow: -0.6px 0 0 rgba(0, 0, 0, 0.05);
}

.wk-hall-task-summary strong {
  width: 100%;
  height: 24px;
  color: #333333;
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: 24px;
  font-weight: 400;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 24px;
  text-align: center;
}

.wk-hall-task-summary span {
  width: 103px;
  max-width: 100%;
  height: 16px;
  color: #999999;
  font-size: 13px;
  line-height: 16px;
  text-align: center;
}

.wk-hall-task-pass-field {
  width: 100%;
  min-height: 50px;
  height: 50px;
  margin-top: 16px;
  padding: 10px;
  border-radius: 6px;
  box-sizing: border-box;
  background: #ffffff;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex: none;
  font-size: 15px;
  line-height: 15px;
}

.wk-hall-task-pass-field input {
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #999999;
  flex: 1 1;
  font-size: 14px;
  line-height: 15px;
  text-align: right;
}

.wk-hall-task-pass-field input::-moz-placeholder {
  color: #999999;
  opacity: 1;
}

.wk-hall-task-pass-field input::placeholder {
  color: #999999;
  opacity: 1;
}

.wk-hall-task-pass-field input[aria-invalid="true"] {
  color: #e5484d;
}

.wk-hall-task-pass-field input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.wk-hall-task-record-heading {
  width: 100%;
  height: 35px;
  margin-top: 10px;
  padding: 10px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: none;
}

.wk-hall-task-record-heading strong {
  color: #999999;
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-task-record-list {
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

.wk-hall-task-record {
  width: 100%;
  min-height: 66px;
  height: 66px;
  padding: 10px;
  border-radius: 6px;
  box-sizing: border-box;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}

.wk-hall-task-record > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wk-hall-task-record strong,
.wk-hall-task-record small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-task-record strong {
  color: #333333;
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-task-record small {
  color: #999999;
  font-size: 14px;
  line-height: 15px;
}

.wk-hall-task-record button,
.wk-hall-task-record em {
  flex: none;
  border: 0;
  background: transparent;
  color: #6b10ff;
  font-size: 14px;
  font-style: normal;
  line-height: 14px;
}

.wk-hall-task-record button {
  padding: 6px 0;
  cursor: pointer;
}

.wk-hall-task-record button:disabled {
  cursor: default;
  opacity: 0.45;
}

.wk-hall-task-record em {
  color: #999999;
}

.wk-hall-task-record-state {
  width: 100%;
  min-height: 0;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1;
  font-size: 13px;
}

.wk-hall-task-record-state.is-error {
  color: #dc2626;
}

/* Pagination stays inside the existing history viewport, never in the footer. */
.wk-hall-task-record-pagination {
  flex: none;
  min-height: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #999999;
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.wk-hall-task-record-pagination button {
  border: 0;
  padding: 6px;
  background: transparent;
  color: #6b10ff;
  font: inherit;
  cursor: pointer;
}

.wk-hall-task-record-pagination button:disabled {
  opacity: 0.45;
  cursor: default;
}

body[theme-mode="dark"] .wk-hall-task-record-pagination {
  color: rgba(223, 226, 230, 0.5);
}

body[theme-mode="dark"] .wk-hall-task-record-pagination button {
  color: #9d26ff;
}

.wk-hall-task-footer {
  width: calc(100% - 41px);
  min-height: 40px;
  height: 40px;
  margin: 22px 20px 28px 21px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 9px;
  gap: 9px;
  flex: none;
}

.wk-hall-task-footer button {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(51, 51, 51, 0.2);
  border-radius: 8px;
  background: transparent;
  color: #333333;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

.wk-hall-task-footer button.primary {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-weight: 500;
}

.wk-hall-task-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal {
  border-radius: 8px;
}

.wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-content {
  border-radius: 8px;
  background: linear-gradient(180deg, #f8f0ff 0%, #ffffff 17.0733%);
}

.wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-header {
  height: 110px;
  padding: 85px 16px 0;
}

.wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-header::before {
  content: none;
}

/* Figma 807:8046：「移除任务」提示用 58px 渐变盾牌，与麦序确认弹窗同一份导出。 */
.wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-icon-wrapper {
  position: absolute;
  top: 27px;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
}

.wk-hall-task-remove-shield {
  width: 58px;
  height: 58px;
  display: block;
}

.wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-title {
  align-items: center;
  font-size: 16px;
  justify-content: center;
  line-height: 24px;
}

/* Semi adds a 36px body offset whenever Modal receives an icon. */
.wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-body {
  margin-left: 0;
}

.wk-hall-runtime-modal.wk-hall-task-remove-modal .wk-hall-confirm-dialog p {
  height: 48px;
  padding: 7px 16px 19px;
  color: rgba(23, 26, 29, 0.6);
  font-size: 14px;
  line-height: 22px;
}

.wk-hall-runtime-modal.wk-hall-task-remove-modal .wk-hall-confirm-actions {
  height: 48px;
  padding: 0 16px 16px;
}

.wk-hall-runtime-modal.wk-hall-task-remove-modal
  .wk-hall-confirm-actions
  button {
  min-height: 32px;
  height: 32px;
  border-color: #efefef;
  border-radius: 6px;
}

body[theme-mode="dark"] .wk-hall-runtime-modal .semi-modal-title {
  color: rgba(255, 255, 255, 0.88);
}

/* Figma 949:10568：暗色无亮色模糊彩图，面板和卡片是不同的层次。 */
body[theme-mode="dark"] .wk-hall-task-modal .semi-modal-title,
body[theme-mode="dark"] .wk-hall-task-summary strong,
body[theme-mode="dark"] .wk-hall-task-record strong {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-task-modal .semi-modal-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 36px;
}

body[theme-mode="dark"] .wk-hall-task-summary,
body[theme-mode="dark"] .wk-hall-task-record {
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-hall-task-modal .semi-modal-content {
  background: #1e1e1f;
}

body[theme-mode="dark"] .wk-hall-task-modal .semi-modal-content::before {
  content: none;
}

body[theme-mode="dark"] .wk-hall-task-modal .semi-modal-close,
body[theme-mode="dark"] .wk-hall-task-modal .semi-modal-close:hover {
  border: 0;
  background: transparent url(../../static/media/host-settings-close-dark.fcf7c450e2dfb2765671.svg) center / 26px 26px no-repeat;
}

body[theme-mode="dark"] .wk-hall-task-modal .semi-modal-close .semi-icon {
  visibility: hidden;
}

body[theme-mode="dark"] .wk-hall-task-content-panel {
  position: relative;
  padding: 22px 17px 20px;
  border: 0;
  background: rgba(223, 226, 230, 0.04);
}

body[theme-mode="dark"] .wk-hall-task-content-panel::before {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(223, 226, 230, 0));
  content: "";
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

body[theme-mode="dark"] .wk-hall-task-summary span,
body[theme-mode="dark"] .wk-hall-task-record-heading strong,
body[theme-mode="dark"] .wk-hall-task-record small,
body[theme-mode="dark"] .wk-hall-task-record em,
body[theme-mode="dark"] .wk-hall-task-record-state:not(.is-error) {
  color: rgba(223, 226, 230, 0.5);
}

body[theme-mode="dark"] .wk-hall-task-pass-field {
  background: #2f2f30;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-task-pass-field input {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-task-pass-field input::-moz-placeholder {
  /* 949:10608 与 949:10609 各一层 50% 透明度。 */
  color: rgba(223, 226, 230, 0.25);
  opacity: 1;
}

body[theme-mode="dark"] .wk-hall-task-pass-field input::placeholder {
  /* 949:10608 与 949:10609 各一层 50% 透明度。 */
  color: rgba(223, 226, 230, 0.25);
  opacity: 1;
}

body[theme-mode="dark"] .wk-hall-task-pass-field input[aria-invalid="true"] {
  color: #e5484d;
}

body[theme-mode="dark"] .wk-hall-task-summary > div + div {
  box-shadow: -0.6px 0 0 rgba(223, 226, 230, 0.05);
}

body[theme-mode="dark"] .wk-hall-task-record button {
  color: #9d26ff;
}

body[theme-mode="dark"] .wk-hall-task-footer button:not(.primary) {
  border-color: rgba(223, 226, 230, 0.3);
  border-radius: 6px;
  color: #dfe2e6;
}

/* 949:10642：原始 SVG 光晕/光束自身已含旋转、模糊与透明度。
 * 位置取 absoluteRenderBounds 相对弹窗根；仅装饰，不参与业务布局。 */
body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal {
  height: 204px;
  border-radius: 10px;
  overflow: visible;
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-content {
  position: relative;
  height: 204px;
  border-radius: 10px;
  background-image:
    url(../../static/media/task-remove-light-beam.a584e286761fa4565a11.svg),
    url(../../static/media/task-remove-glow-bottom.46f2f4d5f1708b93bf7c.svg),
    url(../../static/media/task-remove-glow-left.490456fcb5c421c1f20d.svg),
    url(../../static/media/task-remove-glow-right.66403ec234a615c3d45d.svg),
    linear-gradient(132.402deg, rgb(19.25, 13, 38) 9.9988%, rgb(17.25, 6, 31) 52.4257%, #181a1e 95.6764%);
  background-position: 121.293px 0, 23.434px 109.39px, 0 35.53px, 124.148px 89.681px, 0 0;
  background-size: 139px 127px, 237px 95px, 239px 169px, 136px 115px, 100% 100%;
  background-repeat: no-repeat;
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-content::after {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(131.79deg, rgb(189.474, 171.922, 255) 0.0408%, rgba(232.676, 185.403, 255, 0.5) 21.3301%, rgba(165.087, 148.04, 207.705, 0.2) 40.8705%);
  content: "";
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-header {
  height: 110px;
  padding-top: 86px;
}

/* 949:10664–10668：五个 1px 白色星点，分别保留节点的 2px / 1px 模糊。 */
body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-header::before,
body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-header::after {
  position: absolute;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: #ffffff;
  content: "";
  pointer-events: none;
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-header::before {
  top: 24px;
  left: 52px;
  box-shadow: 190px 28px #ffffff, 46px -9px #ffffff, -37px 36px #ffffff;
  filter: blur(2px);
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-header::after {
  top: 77px;
  left: 23px;
  filter: blur(1px);
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-icon-wrapper {
  top: 24px;
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .semi-modal-title {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .wk-hall-confirm-dialog p {
  height: 46px;
  padding: 7px 16px 17px;
  color: rgba(223, 226, 230, 0.6);
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .wk-hall-confirm-actions button {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-task-remove-modal .wk-hall-confirm-actions button:not(.primary) {
  border-color: rgba(223, 226, 230, 0.5);
  background: transparent;
}

@media (max-height: 643px) {
  .wk-hall-task-modal .semi-modal-content {
    overflow-y: auto;
  }

  .wk-hall-task-modal .semi-modal-header,
  .wk-hall-task-modal .semi-modal-body {
    flex: none;
  }
}
.wk-hall-runtime-primary {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: #8b5cf6;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.wk-hall-runtime-primary:disabled {
  opacity: 0.55;
}

.wk-hall-report-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 18px;
}
.wk-hall-report-options button {
  min-height: 64px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f4f4f4;
  color: #999999;
  font-size: 16px;
  cursor: pointer;
}
.wk-hall-report-options button.selected {
  border-color: #8b5cf6;
  background: #f6f0ff;
  color: #6d28d9;
}
.wk-hall-runtime-modal.wk-hall-report-modal .semi-modal {
  width: min(560px, calc(100vw - 32px));
}
.wk-hall-runtime-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: 9px;
  background: #f4f4f5;
}
.wk-hall-runtime-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #888888;
  cursor: pointer;
}
.wk-hall-runtime-tabs button.selected {
  background: #ffffff;
  color: #6d28d9;
  font-weight: 600;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}
.wk-hall-report-count {
  min-height: 46px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #555555;
}
.wk-hall-report-count input {
  width: 110px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid #dedede;
  border-radius: 7px;
  outline: none;
}
.wk-hall-report-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 12px;
}
.wk-hall-report-filters select,
.wk-hall-report-governance select,
.wk-hall-report-governance input,
.wk-hall-report-governance textarea {
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #dedede;
  border-radius: 7px;
  outline: none;
  background: #ffffff;
  color: #444444;
}
.wk-hall-report-filters select:focus,
.wk-hall-report-governance select:focus,
.wk-hall-report-governance input:focus,
.wk-hall-report-governance textarea:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.13);
}
.wk-hall-report-list {
  max-height: 360px;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.wk-hall-report-list > .semi-spin {
  margin: 20px auto;
}
.wk-hall-report-row {
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid #eeeeee;
  border-radius: 9px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.wk-hall-report-row > div:first-child {
  min-width: 0;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 4px;
}
.wk-hall-report-row strong,
.wk-hall-report-row span,
.wk-hall-report-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-report-row strong {
  color: #333333;
  font-size: 14px;
}
.wk-hall-report-row span {
  color: #6d28d9;
  font-size: 13px;
}
.wk-hall-report-row span.wk-hall-report-row-content {
  display: -webkit-box;
  overflow: hidden;
  color: #555555;
  white-space: normal;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wk-hall-report-submission-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.wk-hall-report-submission-image {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
  cursor: pointer;
}

.wk-hall-report-submission-image > img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-report-submission-image-failed,
.wk-hall-report-submission-image-loading {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 10px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
}

.wk-hall-report-submission-image-preview {
  display: block;
  max-width: min(80vw, 720px);
  max-height: 70vh;
  margin: 0 auto;
}

.wk-hall-report-row small {
  color: #999999;
  font-size: 12px;
}
.wk-hall-report-row-actions {
  flex: none;
  display: flex;
  gap: 7px;
}
.wk-hall-report-row-actions button {
  padding: 6px 10px;
  border: 1px solid #8b5cf6;
  border-radius: 15px;
  background: #ffffff;
  color: #7c3aed;
  cursor: pointer;
}
.wk-hall-report-row-actions button.danger {
  border-color: #fecdd3;
  color: #be123c;
}
.wk-hall-runtime-secondary {
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
  border: 1px solid #dedede;
  border-radius: 7px;
  background: #ffffff;
  color: #666666;
  cursor: pointer;
}
.wk-hall-runtime-secondary:disabled {
  opacity: 0.55;
  cursor: default;
}
.wk-hall-report-governance {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #e9d5ff;
  border-radius: 10px;
  background: #faf7ff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wk-hall-report-governance > strong {
  color: #6d28d9;
}
.wk-hall-report-governance-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  grid-gap: 10px;
  gap: 10px;
}
.wk-hall-report-governance textarea {
  min-height: 76px;
  resize: vertical;
  font-family: inherit;
}
body[theme-mode="dark"] .wk-hall-runtime-tabs,
body[theme-mode="dark"] .wk-hall-report-row {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-surface);
}
body[theme-mode="dark"] .wk-hall-runtime-tabs button.selected,
body[theme-mode="dark"] .wk-hall-report-filters select,
body[theme-mode="dark"] .wk-hall-report-count input,
body[theme-mode="dark"] .wk-hall-runtime-secondary,
body[theme-mode="dark"] .wk-hall-report-governance select,
body[theme-mode="dark"] .wk-hall-report-governance input,
body[theme-mode="dark"] .wk-hall-report-governance textarea {
  border-color: var(--wk-night-line-strong);
  background: #383b40;
  color: rgba(255, 255, 255, 0.84);
}
body[theme-mode="dark"] .wk-hall-report-governance {
  border-color: rgba(139, 92, 246, 0.42);
  background: rgba(139, 92, 246, 0.12);
}
body[theme-mode="dark"] .wk-hall-report-row strong {
  color: rgba(255, 255, 255, 0.88);
}
body[theme-mode="dark"] .wk-hall-report-row span.wk-hall-report-row-content {
  color: rgba(255, 255, 255, 0.68);
}
.wk-hall-reminder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.wk-hall-reminder-grid button {
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f5f5f6;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}
.wk-hall-reminder-grid button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-reminder-grid button em {
  color: #999999;
  font-style: normal;
}
.wk-hall-reminder-grid button.selected {
  border-color: #8b5cf6;
  background: #f6f0ff;
  color: #6d28d9;
}
.wk-hall-reminder-grid button.selected em {
  color: #8b5cf6;
}
.wk-hall-reminder-modal .semi-modal {
  width: min(560px, calc(100vw - 32px));
}
.wk-hall-reminder-modal .wk-hall-runtime-actions button:first-child::before {
  display: none;
}
.wk-hall-reminder-refreshing {
  margin-bottom: 8px;
  color: #8a8a8a;
  font-size: 12px;
  text-align: center;
}
.wk-hall-batch-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
}
.wk-hall-batch-list > button {
  min-height: 54px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f5f5f6;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  gap: 10px;
}
.wk-hall-batch-list > button > span {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wk-hall-batch-list > button > img,
.wk-hall-batch-list > button > i {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.wk-hall-batch-list > button > i {
  background: #e7dcff;
  color: #6d28d9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}
.wk-hall-batch-list strong,
.wk-hall-batch-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-batch-list small {
  color: #999999;
  font-weight: 400;
}
.wk-hall-batch-list em {
  color: #999999;
  font-style: normal;
}
.wk-hall-batch-list > button.selected {
  border-color: #8b5cf6;
  background: #f6f0ff;
  color: #6d28d9;
}
.wk-hall-batch-list > button.selected em {
  color: #8b5cf6;
}
.wk-hall-batch-list > button.success {
  border-color: #b7ebc6;
  background: #f2fbf5;
}
.wk-hall-batch-list > button.success em {
  color: #2eaa5f;
}
.wk-hall-batch-list > button:disabled {
  opacity: 0.52;
  cursor: default;
}
.wk-hall-batch-action-modal .semi-modal {
  width: min(560px, calc(100vw - 32px));
}
.wk-hall-batch-action-modal .wk-hall-runtime-loading {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #888888;
}
.wk-hall-batch-report-types {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.wk-hall-batch-report-types > button {
  flex: 1 1;
  height: 36px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background: #ffffff;
  color: #666666;
  cursor: pointer;
}
.wk-hall-batch-report-types > button.selected {
  border-color: #8b5cf6;
  background: #f6f0ff;
  color: #6d28d9;
}
.wk-hall-batch-summary {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7f4ff;
  color: #666666;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 12px;
}
body[theme-mode="dark"] .wk-hall-batch-list > button > i {
  background: rgba(139, 92, 246, 0.22);
  color: #c4b5fd;
}
body[theme-mode="dark"] .wk-hall-batch-list > button.success {
  border-color: rgba(46, 170, 95, 0.45);
  background: rgba(46, 170, 95, 0.12);
}
body[theme-mode="dark"] .wk-hall-batch-summary {
  background: rgba(139, 92, 246, 0.14);
  color: #dddddd;
  color: var(--wk-textcolor, #dddddd);
}
body[theme-mode="dark"] .wk-hall-batch-report-types > button {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #dddddd;
  color: var(--wk-textcolor, #dddddd);
}
body[theme-mode="dark"] .wk-hall-batch-report-types > button.selected {
  border-color: #a78bfa;
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
}
.wk-hall-report-success-card {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 20px 20px 22px 19px;
  height: 100px;
  min-height: 100px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
        91deg,
        #dcb5ff 0%,
        #9a26ff 3.79%,
        #6c26ff 6.25%,
        #a97aff 13.78%,
        #6926ff 31.23%,
        #f0dfff 59.43%,
        #9826ff 79.81%,
        #b1baff 97.31%
      )
      border-box;
  color: #000000;
  box-sizing: border-box;
}
.wk-hall-report-success-ribbon {
  position: absolute;
  top: -1px;
  left: -1px;
  display: block;
  width: 85px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.wk-hall-report-success-content {
  position: absolute;
  top: 34px;
  left: 19px;
  right: 19px;
  height: 46px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.wk-hall-report-success-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f5f5;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 14px;
}
.wk-hall-report-success-avatar img {
  display: block;
  width: 42px;
  height: 42px;
  -o-object-fit: cover;
     object-fit: cover;
}
.wk-hall-report-success-copy {
  min-width: 0;
  flex: 1 1 auto;
  height: 46px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wk-hall-report-success-heading {
  min-width: 0;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wk-hall-report-success-heading > strong {
  overflow: hidden;
  color: #000000;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-report-success-heading > em {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 20px;
  padding: 4px 6px;
  border-radius: 2px;
  background: #fff5ea;
  color: #ff6200;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 12px;
  white-space: nowrap;
}
.wk-hall-report-success-value {
  min-width: 0;
  height: 18px;
  overflow: hidden;
  display: flex;
  gap: 4px;
  color: #666666;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-report-success-value > strong {
  flex: 0 0 auto;
  font-weight: 400;
}
.wk-hall-report-success-value > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-hall-report-success-content > time {
  flex: 0 0 123px;
  width: 123px;
  overflow: hidden;
  color: #999999;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-away-banner {
  position: absolute;
  left: 19px;
  right: 19px;
  bottom: calc(var(--wk-conversation-footer) + 27px);
  height: 66px;
  min-height: 66px;
  padding: 15px 12px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  z-index: 40;
  box-sizing: border-box;
}
.wk-conversation-has-away-banner .wk-conversation-messages {
  box-sizing: border-box;
  padding-bottom: 93px;
  scroll-padding-bottom: 93px;
}
.wk-conversation-hasreply .wk-hall-away-banner {
  /* prettier-ignore -- keep the full offset readable and testable as one layout equation. */
  bottom: calc(
    var(--wk-conversation-footer) + var(--wk-height-conversation-replyview) +
      27px
  );
}
.wk-hall-away-banner-icon {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9d26ff 0%, #6426ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wk-hall-away-banner-icon img {
  display: block;
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}
.wk-hall-away-banner-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.wk-hall-away-banner-copy strong,
.wk-hall-away-banner-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-away-banner-copy strong {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}
.wk-hall-away-banner-copy strong > span:first-child {
  flex: 0 0 auto;
}
.wk-hall-away-countdown {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}
.wk-hall-away-countdown > b {
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}
.wk-hall-away-countdown > i {
  color: #ffffff;
  font-size: 12px;
  font-style: normal;
  line-height: 20px;
}
.wk-hall-away-overdue {
  min-width: 0;
  overflow: hidden;
  color: #ff7f0b;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-away-banner-copy small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 18px;
}
.wk-hall-away-banner button {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 66px;
  min-width: 66px;
  height: 28px;
  min-height: 28px;
  padding: 6px 9px;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
}
.wk-hall-away-banner button:disabled {
  cursor: default;
  opacity: 0.58;
}
.wk-hall-away-banner button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.78);
  outline-offset: 2px;
}
@container wk-app-canvas (max-width: 420px) {
  .wk-hall-away-banner {
    left: 12px;
    right: 12px;
  }
  .wk-hall-report-success-card {
    margin-right: 12px;
    margin-left: 12px;
  }
  .wk-hall-away-banner {
    gap: 8px;
  }
  .wk-hall-report-success-content > time {
    display: none;
  }
}
.wk-hall-runtime-modal.wk-hall-away-modal .semi-modal {
  width: min(433px, calc(100vw - 24px));
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 54px rgba(31, 18, 55, 0.2);
}
.wk-hall-runtime-modal.wk-hall-away-modal .semi-modal-content {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
}
.wk-hall-runtime-modal.wk-hall-away-modal .semi-modal-header {
  min-height: 56px;
  margin: 0;
  padding: 24px 24px 10px;
}
.wk-hall-runtime-modal.wk-hall-away-modal .semi-modal-title {
  color: #222222;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-align: left;
}
.wk-hall-runtime-modal.wk-hall-away-modal .semi-modal-body {
  max-height: none;
  padding: 10px 24px 24px;
  overflow: visible;
}
.wk-hall-away-confirm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #333333;
}
.wk-hall-away-confirm-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wk-hall-away-confirm-copy > strong {
  color: #2c2535;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}
.wk-hall-away-confirm-copy > p {
  margin: 0;
  color: #77717f;
  font-size: 13px;
  line-height: 20px;
}
.wk-hall-away-confirm-timing {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #eee5ff;
  border-radius: 10px;
  background: #f8f4ff;
  color: #72687d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  box-sizing: border-box;
}
.wk-hall-away-confirm-timing strong {
  color: #7026df;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.wk-hall-away-confirm-reminder {
  padding: 11px 12px;
  border-radius: 10px;
  background: #f7f7f8;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wk-hall-away-confirm-reminder > span {
  color: #99939f;
  font-size: 11px;
  line-height: 16px;
}
.wk-hall-away-confirm-reminder > p {
  margin: 0;
  color: #4f4858;
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
.wk-hall-away-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 2px;
}
.wk-hall-away-confirm-actions button {
  min-height: 44px;
  border: 1px solid #ded9e4;
  border-radius: 10px;
  background: #ffffff;
  color: #5d5665;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease,
    filter 120ms ease, transform 120ms ease;
}
.wk-hall-away-confirm-actions button:focus-visible {
  outline: 3px solid #e2d8ff;
  outline: 3px solid var(--semi-color-primary-light-active, #e2d8ff);
  outline-offset: 2px;
}
.wk-hall-away-confirm-actions > button:first-child:hover:not(:disabled) {
  border-color: #cdb8f0;
  background: #f8f4ff;
  color: #7026df;
}
.wk-hall-away-confirm-actions > button:first-child:active:not(:disabled) {
  background: #efe5ff;
}
.wk-hall-away-confirm-actions .wk-hall-runtime-primary {
  border-color: transparent;
  background: linear-gradient(90deg, #9b26ff 0%, #6326ff 100%);
  color: #ffffff;
  box-shadow: none;
}
.wk-hall-away-confirm-actions .wk-hall-runtime-primary:hover:not(:disabled) {
  filter: brightness(1.06);
}
.wk-hall-away-confirm-actions .wk-hall-runtime-primary:active:not(:disabled) {
  background: #4800bc;
  filter: none;
  transform: translateY(1px);
}
.wk-hall-away-confirm-actions button:disabled {
  cursor: default;
  opacity: 1;
}
.wk-hall-away-confirm-actions .wk-hall-runtime-primary:disabled {
  border-color: transparent;
  background: linear-gradient(90deg, #ebd4ff 0%, #e0d4ff 100%);
  color: rgba(255, 255, 255, 0.92);
}
body[theme-mode="dark"] .wk-hall-away-confirm {
  color: rgba(255, 255, 255, 0.88);
}
body[theme-mode="dark"] .wk-hall-away-confirm-copy > strong {
  color: rgba(255, 255, 255, 0.9);
}
body[theme-mode="dark"] .wk-hall-away-confirm-copy > p {
  color: rgba(255, 255, 255, 0.6);
}
body[theme-mode="dark"] .wk-hall-away-confirm-timing {
  border-color: rgba(155, 38, 255, 0.28);
  background: rgba(155, 38, 255, 0.12);
  color: rgba(255, 255, 255, 0.58);
}
body[theme-mode="dark"] .wk-hall-away-confirm-timing strong {
  color: #c39aff;
}
body[theme-mode="dark"] .wk-hall-away-confirm-reminder {
  background: #35373b;
}
body[theme-mode="dark"] .wk-hall-away-confirm-reminder > span {
  color: rgba(255, 255, 255, 0.45);
}
body[theme-mode="dark"] .wk-hall-away-confirm-reminder > p {
  color: rgba(255, 255, 255, 0.72);
}
body[theme-mode="dark"] .wk-hall-away-confirm-actions > button:first-child {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-surface);
  color: rgba(255, 255, 255, 0.74);
}
.wk-hall-business-event {
  width: -moz-fit-content;
  width: fit-content;
  max-width: min(440px, calc(100% - 36px));
  margin: 10px auto;
  padding: 8px 14px;
  border: 1px solid #e8e8ec;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(31, 35, 48, 0.04);
}
.wk-hall-business-event strong {
  flex: 0 0 auto;
  color: #6d28d9;
  font-weight: 600;
  white-space: nowrap;
}
.wk-hall-business-event span {
  min-width: 0;
  overflow: hidden;
  color: #999999;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[theme-mode="dark"] .wk-hall-business-event {
  border-color: var(--wk-night-line-strong);
  background: rgba(45, 47, 51, 0.9);
  color: rgba(255, 255, 255, 0.68);
}
body[theme-mode="dark"] .wk-hall-business-event strong {
  color: #c4b5fd;
}

.wk-hall-help-task-values {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: 250px;
  overflow-y: auto;
}
.wk-hall-help-task-values button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #888888;
  font-size: 18px;
  cursor: pointer;
}
.wk-hall-help-task-values button.selected {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  box-shadow: none;
}
.wk-hall-help-task-custom {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 10px;
  color: #666666;
  font-size: 13px;
}
.wk-hall-help-task-custom input {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #dedee5;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  color: #333333;
  font-size: 16px;
}
.wk-hall-help-task-custom input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.12);
}
body[theme-mode="dark"] .wk-hall-help-task-custom {
  color: rgba(255, 255, 255, 0.68);
}
body[theme-mode="dark"] .wk-hall-help-task-custom input {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-surface);
  color: #ffffff;
}

.wk-hall-runtime-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  gap: 10px;
  margin-top: 16px;
}
.wk-hall-runtime-actions button {
  min-height: 40px;
  border: 1px solid #8b5cf6;
  border-radius: 7px;
  background: #ffffff;
  color: #7c3aed;
  cursor: pointer;
}
.wk-hall-runtime-actions button:last-child {
  background: #8b5cf6;
  color: #ffffff;
}

/* Figma 807:8108：置顶卡设置使用 433px 淡紫弹层和紧凑主播条目。 */
.wk-hall-top-card-modal .semi-modal {
  width: min(433px, calc(100vw - 32px));
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(71, 36, 132, 0.16);
}

.wk-hall-top-card-modal .semi-modal-content {
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8f4ff 0%, #f3edff 100%);
}

.wk-hall-top-card-modal .semi-modal-header {
  margin: 0;
  padding: 18px 20px 10px;
}

.wk-hall-top-card-modal .semi-modal-title {
  width: 100%;
  color: #333333;
  font-size: 18px;
  font-weight: 500;
  justify-content: center;
  text-align: center;
}

.wk-hall-top-card-modal .semi-modal-body {
  max-height: calc(100vh - 180px);
  padding: 10px 20px 20px;
  overflow-y: auto;
}

.wk-hall-top-card-modal .wk-hall-runtime-list {
  max-height: min(390px, calc(100vh - 280px));
  overflow-y: auto;
}

.wk-hall-top-card-modal .wk-hall-runtime-list-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 30px;
  min-height: 58px;
  margin-bottom: 10px;
  padding: 9px 12px;
  align-items: center;
  justify-content: initial;
  grid-gap: 10px;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 16px rgba(97, 58, 158, 0.06);
}

.wk-hall-top-card-modal .wk-hall-runtime-list-item:last-child {
  margin-bottom: 0;
}

.wk-hall-top-card-modal .wk-hall-runtime-card-avatar {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: #e9e9e9;
  color: #888888;
  font-size: 13px;
}

.wk-hall-top-card-modal .wk-hall-runtime-card-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-top-card-modal .wk-hall-runtime-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.wk-hall-top-card-modal .wk-hall-runtime-list-item strong {
  overflow: hidden;
  color: #333333;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-top-card-modal .wk-hall-runtime-list-item small {
  overflow: hidden;
  color: #999999;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-top-card-modal .wk-hall-runtime-list-item button {
  display: inline-flex;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 6px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #999999;
  cursor: pointer;
}

.wk-hall-top-card-modal .wk-hall-runtime-list-item button img {
  display: block;
  width: 20px;
  height: 20px;
}

.wk-hall-top-card-modal .wk-hall-top-card-list-actions {
  grid-template-columns: minmax(100px, 1fr) minmax(180px, 1.8fr);
  align-items: center;
  margin-top: 14px;
}

.wk-hall-top-card-modal .wk-hall-top-card-list-actions button:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #555555;
}

.wk-hall-top-card-modal .wk-hall-top-card-list-actions button:first-child img {
  display: block;
  width: 16px;
  height: 16px;
}

.wk-hall-top-card-modal .wk-hall-top-card-list-actions button:last-child {
  border: 0;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

body[theme-mode="dark"] .wk-hall-top-card-modal .semi-modal-title,
body[theme-mode="dark"]
  .wk-hall-top-card-modal
  .wk-hall-runtime-list-item
  strong {
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-top-card-modal .wk-hall-runtime-list-item {
  background: var(--wk-night-surface);
}

body[theme-mode="dark"] .wk-hall-top-card-modal .wk-hall-runtime-card-avatar {
  background: var(--wk-night-raise);
  color: var(--wk-night-ink);
}

/* “我的置顶卡”保留原型的五档色系；右侧为空的原始插画资产槽。 */
.wk-hall-my-top-card-modal .semi-modal {
  width: min(433px, calc(100vw - 32px));
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(36, 30, 52, 0.2);
}

.wk-hall-my-top-card-modal .semi-modal-content {
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #f7f4fb;
}

.wk-hall-my-top-card-modal .semi-modal-header {
  margin: 0;
  padding: 18px 20px 10px;
}

.wk-hall-my-top-card-modal .semi-modal-title {
  width: 100%;
  color: #333333;
  font-size: 18px;
  font-weight: 500;
  justify-content: center;
  text-align: center;
}

.wk-hall-my-top-card-modal .semi-modal-body {
  max-height: calc(100vh - 180px);
  padding: 10px 20px 20px;
  overflow: hidden;
}

.wk-hall-my-top-card-shell {
  min-height: 160px;
}

.wk-hall-my-top-card-list {
  display: flex;
  max-height: min(520px, calc(100vh - 250px));
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.wk-hall-my-top-card {
  --wk-top-card-ink: #ffffff;
  --wk-top-card-muted: rgba(255, 255, 255, 0.72);
  position: relative;
  display: flex;
  width: 100%;
  min-height: 94px;
  padding: 16px 18px 14px;
  box-sizing: border-box;
  flex: 0 0 auto;
  align-items: stretch;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #17223a 0%, #39577f 100%);
  box-shadow: 0 8px 20px rgba(38, 38, 58, 0.16);
  color: var(--wk-top-card-ink);
  cursor: pointer;
  text-align: left;
  transition: box-shadow 140ms ease, transform 140ms ease;
}

.wk-hall-my-top-card[data-variant="violet"] {
  background: linear-gradient(135deg, #5d36a8 0%, #936fe4 100%);
}

.wk-hall-my-top-card[data-variant="pink"] {
  background: linear-gradient(135deg, #b96184 0%, #e9a3b9 100%);
}

.wk-hall-my-top-card[data-variant="silver"] {
  --wk-top-card-ink: #4d5360;
  --wk-top-card-muted: rgba(77, 83, 96, 0.7);
  background: linear-gradient(135deg, #e5e8ee 0%, #b7c0cc 100%);
}

.wk-hall-my-top-card[data-variant="gold"] {
  --wk-top-card-ink: #5f461d;
  --wk-top-card-muted: rgba(95, 70, 29, 0.7);
  background: linear-gradient(135deg, #f4d596 0%, #c99b46 100%);
}

.wk-hall-my-top-card:hover:not(:disabled) {
  box-shadow: 0 12px 26px rgba(38, 38, 58, 0.22);
  transform: translateY(-1px);
}

.wk-hall-my-top-card:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}

.wk-hall-my-top-card:disabled {
  cursor: default;
}

.wk-hall-my-top-card-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
}

.wk-hall-my-top-card-heading {
  display: flex;
  max-width: 240px;
  align-items: baseline;
  gap: 10px;
}

.wk-hall-my-top-card-heading strong {
  max-width: 220px;
  overflow: hidden;
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-my-top-card-heading b {
  flex: 0 0 auto;
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.wk-hall-my-top-card-copy small {
  margin-top: 10px;
  color: var(--wk-top-card-muted);
  font-size: 11px;
  line-height: 16px;
}

.wk-hall-my-top-card-art-slot {
  width: 92px;
  min-width: 92px;
  align-self: stretch;
}

.wk-hall-my-top-card-using {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.24);
  color: #ffffff;
  font-size: 11px;
}

.wk-hall-my-top-card-state {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: #888888;
  font-size: 13px;
}

.wk-hall-my-top-card-state button {
  min-height: 34px;
  padding: 0 18px;
  border: 1px solid #8b5cf6;
  border-radius: 6px;
  background: #ffffff;
  color: #7c3aed;
  cursor: pointer;
}

body[theme-mode="dark"] .wk-hall-my-top-card-modal .semi-modal-title {
  color: var(--wk-night-ink);
}

.wk-hall-runtime-modal.wk-hall-top-card-owner-modal .semi-modal {
  width: min(744px, calc(100vw - 32px));
  border-radius: 10px;
}

.wk-hall-top-card-owner-modal .semi-modal-content {
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
}

.wk-hall-top-card-owner-modal .semi-modal-header {
  margin: 0;
  padding: 18px 22px 10px;
}

.wk-hall-top-card-owner-modal .semi-modal-title {
  justify-content: center;
  text-align: center;
}

.wk-hall-top-card-owner-modal .semi-modal-body {
  max-height: calc(100vh - 180px);
  padding: 10px 22px 20px;
  overflow: hidden;
}

.wk-hall-top-card-owner-selector {
  display: flex;
  min-height: 420px;
  flex-direction: column;
}

.wk-hall-top-card-owner-selector .wk-hall-member-groups {
  max-height: min(420px, calc(100vh - 330px));
}

.wk-hall-top-card-owner-actions {
  margin-top: 14px;
}

/* 1171:31191：选择主播左列 #2F2F30、右列 #1E1E1F，弹层底跟右列同色。 */
body[theme-mode="dark"] .wk-hall-top-card-owner-modal .semi-modal-content {
  background: var(--wk-night-canvas);
}

/* 公会摘要独立于排档模式，始终作为单独的群设置区块渲染。 */
.wk-hall-guild-overview {
  margin: 12px 0;
  padding: 22px;
  border-radius: 16px;
  background: #ffffff;
  color: #333333;
}
.wk-hall-guild-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.wk-hall-guild-heading > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wk-hall-guild-heading strong {
  color: #333333;
  font-size: 16px;
}
.wk-hall-guild-heading span {
  color: #999999;
  font-size: 12px;
}
.wk-hall-guild-heading em {
  flex: none;
  padding: 3px 9px;
  border-radius: 10px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 12px;
  font-style: normal;
}
.wk-hall-guild-heading em[data-status="PENDING"] {
  background: #fff7ed;
  color: #c2410c;
}
.wk-hall-guild-heading em[data-status="REJECTED"],
.wk-hall-guild-heading em[data-status="REVOKED"] {
  background: #fff1f2;
  color: #be123c;
}
.wk-hall-guild-message {
  margin-top: 14px;
  padding: 14px;
  border-radius: 8px;
  background: #f7f7f7;
  color: #888888;
  font-size: 13px;
}
.wk-hall-guild-message.error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #dc2626;
}
.wk-hall-guild-message button {
  padding: 4px 10px;
  border: 1px solid #dedede;
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
}
.wk-hall-guild-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #eeeeee;
  border-radius: 8px;
}
.wk-hall-guild-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wk-hall-guild-card-header > img {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
.wk-hall-guild-card-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.wk-hall-guild-card-identity strong {
  color: #333333;
  font-size: 16px;
}
.wk-hall-guild-card-identity span {
  color: #888888;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-guild-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px 16px;
  gap: 8px 16px;
  margin: 14px 0 0;
}
.wk-hall-guild-card dl div {
  min-width: 0;
}
.wk-hall-guild-card dt {
  color: #999999;
  font-size: 11px;
}
.wk-hall-guild-card dd {
  margin: 3px 0 0;
  color: #555555;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-guild-review-reason {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  background: #fff1f2;
  color: #be123c;
  font-size: 12px;
}
.wk-hall-guild-review-reason.pending {
  background: #fff7ed;
  color: #c2410c;
}
.wk-hall-guild-edit {
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px solid #8b5cf6;
  border-radius: 18px;
  background: #ffffff;
  color: #7c3aed;
  cursor: pointer;
}
.wk-hall-guild-form {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid #eeeeee;
}
.wk-hall-guild-steps {
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  list-style: none;
}
.wk-hall-guild-steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #999999;
}
.wk-hall-guild-steps li > span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f3e8ff;
  color: #8b5cf6;
  font-size: 12px;
}
.wk-hall-guild-steps li > strong {
  font-size: 13px;
  font-weight: 500;
}
.wk-hall-guild-steps li.is-complete > span {
  background: #8b5cf6;
  color: #ffffff;
}
.wk-hall-guild-form-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.wk-hall-guild-form-grid label,
.wk-hall-guild-form-grid .wk-hall-guild-platform-field {
  min-height: 58px;
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid #eeeeee;
}
.wk-hall-guild-form-grid label.full {
  grid-column: 1 / -1;
}
.wk-hall-guild-form-grid label > span,
.wk-hall-guild-form-grid .wk-hall-guild-platform-field > span {
  width: 154px;
  flex: none;
  color: #333333;
  font-size: 15px;
}
.wk-hall-guild-form-grid input,
.wk-hall-guild-form-grid select {
  min-width: 0;
  min-height: 42px;
  flex: 1 1;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  color: #333333;
  font-size: 14px;
}
.wk-hall-guild-form-grid input::-moz-placeholder {
  color: #aaaaaa;
}
.wk-hall-guild-form-grid input::placeholder {
  color: #aaaaaa;
}
.wk-hall-guild-form-grid input:focus,
.wk-hall-guild-form-grid select:focus {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}
.wk-hall-guild-platform-trigger {
  min-width: 0;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  display: flex;
  flex: 1 1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  color: #333333;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.wk-hall-guild-platform-trigger-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wk-hall-guild-platform-trigger-identity > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-guild-platform-trigger-chevron {
  flex: none;
}
.wk-hall-guild-platform-trigger:focus-visible {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
  outline: none;
}
.wk-hall-guild-platform-trigger:disabled {
  cursor: wait;
  opacity: 0.7;
}
.wk-hall-guild-form-grid input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.wk-hall-guild-form-grid small {
  color: #999999;
  font-size: 11px;
}
.wk-hall-guild-upload {
  align-items: flex-start !important;
  padding: 16px 0;
}
.wk-hall-guild-upload-card {
  min-height: 76px;
  flex: 1 1;
  border: 1px dashed #cfcfcf;
  border-radius: 12px;
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #777777;
  cursor: pointer;
}
.wk-hall-guild-upload-card:hover {
  border-color: #8b5cf6;
  background: #faf7ff;
  color: #7c3aed;
}
.wk-hall-guild-upload-card:focus-within {
  outline: 2px solid rgba(139, 92, 246, 0.34);
  outline-offset: 2px;
}
.wk-hall-guild-upload-card strong {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wk-hall-guild-upload-card strong img {
  flex: none;
}
.wk-hall-guild-logo-preview {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  -o-object-fit: cover;
     object-fit: cover;
}
.wk-hall-guild-upload.license
  .wk-hall-guild-upload-card
  > img.wk-hall-guild-license-preview {
  width: 100%;
  height: 190px;
  border-radius: 10px;
  -o-object-fit: contain;
     object-fit: contain;
}
.wk-hall-guild-upload.license {
  min-height: 250px;
  flex-direction: column;
  gap: 14px;
}
.wk-hall-guild-upload.license > span {
  width: auto;
}
.wk-hall-guild-upload.license .wk-hall-guild-upload-card {
  width: 100%;
  min-height: 190px;
  flex: auto;
}
.wk-hall-guild-consent {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 18px;
  color: #666666;
  font-size: 12px;
}
.wk-hall-guild-consent input {
  margin-top: 1px;
  accent-color: #6b10ff;
}
.wk-hall-guild-form-error {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  background: #fff1f2;
  color: #be123c;
  font-size: 12px;
}
.wk-hall-guild-form-error button {
  margin-left: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.wk-hall-guild-platform-picker-modal .semi-modal-content {
  overflow: hidden;
  padding: 0;
  border-radius: 10px;
  background: #f8f8f8;
}
.wk-hall-guild-platform-picker-modal .semi-modal-body {
  height: 578px;
  margin: 0;
  padding: 0;
}
.wk-hall-guild-platform-picker {
  box-sizing: border-box;
  width: 375px;
  height: 578px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f8f8f8;
  color: #333333;
}
.wk-hall-guild-platform-picker > header {
  position: relative;
  display: flex;
  height: 36px;
  flex: none;
  align-items: center;
  justify-content: flex-end;
}
.wk-hall-guild-platform-picker > header > strong {
  position: absolute;
  left: 50%;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 36px;
  transform: translateX(-50%);
}
.wk-hall-guild-platform-picker > header > button {
  box-sizing: border-box;
  min-width: 78px;
  height: 28px;
  padding: 6px 4px 7px 9px;
  border: 0;
  border-radius: 4px;
  background: #d9d9d9;
  color: #000000;
  font: inherit;
  font-size: 13px;
  line-height: 15px;
  cursor: pointer;
}
.wk-hall-guild-platform-picker > header > button:hover {
  background: #cecece;
}
.wk-hall-guild-platform-picker-search {
  box-sizing: border-box;
  width: 351px;
  height: 46px;
  padding: 0 12px;
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #ffffff;
}
.wk-hall-guild-platform-picker-search > img {
  flex: none;
}
.wk-hall-guild-platform-picker-search > input {
  min-width: 0;
  height: 100%;
  flex: 1 1;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #333333;
  font: inherit;
  font-size: 14px;
}
.wk-hall-guild-platform-picker-search > input::-moz-placeholder {
  color: #999999;
}
.wk-hall-guild-platform-picker-search > input::placeholder {
  color: #999999;
}
.wk-hall-guild-platform-picker-list {
  min-height: 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(137, 110, 255, 0.34) transparent;
}
.wk-hall-guild-platform-picker-list::-webkit-scrollbar,
.wk-hall-guild-account-center::-webkit-scrollbar,
.wk-hall-guild-platform-history::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.wk-hall-guild-platform-picker-list::-webkit-scrollbar-track,
.wk-hall-guild-account-center::-webkit-scrollbar-track,
.wk-hall-guild-platform-history::-webkit-scrollbar-track {
  background: transparent;
}
.wk-hall-guild-platform-picker-list::-webkit-scrollbar-thumb,
.wk-hall-guild-account-center::-webkit-scrollbar-thumb,
.wk-hall-guild-platform-history::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(137, 110, 255, 0.34);
}
.wk-hall-guild-platform-picker-list::-webkit-scrollbar-thumb:hover,
.wk-hall-guild-account-center::-webkit-scrollbar-thumb:hover,
.wk-hall-guild-platform-history::-webkit-scrollbar-thumb:hover {
  background: rgba(137, 110, 255, 0.5);
}
.wk-hall-guild-platform-picker-list > button {
  box-sizing: border-box;
  width: 351px;
  min-height: 82px;
  padding: 20px 12px;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  color: #333333;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.wk-hall-guild-platform-picker-list > button:hover,
.wk-hall-guild-platform-picker-list > button[aria-selected="true"] {
  background: #fbf8ff;
}
.wk-hall-guild-platform-picker-list > button:focus-visible {
  outline: 2px solid #bf86ff;
  outline-offset: -2px;
}
.wk-hall-guild-platform-picker-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 14px;
}
.wk-hall-guild-platform-picker-identity > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-guild-platform-picker-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #eee7f8;
  color: #7c3aed;
  font-size: 15px;
  font-weight: 500;
}
.wk-hall-guild-platform-picker-icon > img {
  width: 42px;
  height: 42px;
  -o-object-fit: cover;
     object-fit: cover;
}
.wk-hall-guild-platform-picker-icon.is-compact,
.wk-hall-guild-platform-picker-icon.is-compact > img {
  width: 28px;
  height: 28px;
}
.wk-hall-guild-platform-picker-icon.is-compact {
  font-size: 12px;
}
.wk-hall-guild-platform-picker-empty {
  box-sizing: border-box;
  width: 351px;
  padding: 54px 16px;
  border-radius: 10px;
  background: #ffffff;
  color: #999999;
  font-size: 13px;
  text-align: center;
}
.wk-hall-guild-platform-application {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wk-hall-guild-platform-application > label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #333333;
  font-size: 14px;
}
.wk-hall-guild-platform-application input,
.wk-hall-guild-platform-application textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  color: #333333;
  resize: vertical;
}
.wk-hall-guild-platform-application input:focus,
.wk-hall-guild-platform-application textarea:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}
.wk-hall-guild-platform-application label small {
  align-self: flex-end;
  color: #999999;
  font-size: 11px;
}
.wk-hall-guild-platform-pending,
.wk-hall-guild-platform-success {
  padding: 12px 14px;
  border-radius: 9px;
  background: #f3e8ff;
  color: #6d28d9;
}
.wk-hall-guild-platform-pending {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wk-hall-guild-platform-history {
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid #eeeeee;
  padding-top: 12px;
}
.wk-hall-guild-platform-history-title,
.wk-hall-guild-platform-history article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wk-hall-guild-platform-history-title span,
.wk-hall-guild-platform-empty {
  color: #999999;
  font-size: 12px;
}
.wk-hall-guild-platform-history article {
  margin-top: 9px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7f7f8;
}
.wk-hall-guild-platform-history article span {
  flex: none;
  color: #f59e0b;
  font-size: 12px;
}
.wk-hall-guild-platform-history article span[data-status="APPROVED"] {
  color: #16a34a;
}
.wk-hall-guild-platform-history article span[data-status="REJECTED"] {
  color: #dc2626;
}
.wk-hall-guild-platform-history article p {
  margin: 6px 0 0;
  color: #666666;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.wk-hall-guild-platform-history article p.reason {
  color: #be123c;
}
.wk-hall-guild-platform-history article small {
  display: block;
  margin-top: 6px;
  color: #999999;
}
.wk-hall-guild-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #a94ef6 0%, #7c3aed 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.wk-hall-guild-submit:disabled {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  cursor: not-allowed;
  opacity: 0.2;
}
.wk-hall-guild-actions {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.wk-hall-guild-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.wk-hall-guild-cancel {
  min-width: 130px;
  min-height: 48px;
  border: 1px solid #9b9b9b;
  border-radius: 12px;
  background: #ffffff;
  color: #777777;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.wk-hall-guild-cancel:hover {
  background: #f7f7f7;
}
.wk-hall-guild-cancel:focus-visible,
.wk-hall-guild-submit:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.72);
  outline-offset: 2px;
}
.wk-hall-guild-actions .wk-hall-guild-submit {
  margin-top: 0;
}
body[theme-mode="dark"] .wk-hall-guild-overview,
body[theme-mode="dark"] .wk-hall-guild-card {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-surface);
}
body[theme-mode="dark"] .wk-hall-guild-heading strong,
body[theme-mode="dark"] .wk-hall-guild-card-identity strong {
  color: rgba(255, 255, 255, 0.88);
}
body[theme-mode="dark"] .wk-hall-guild-message {
  background: #3a3d42;
}
body[theme-mode="dark"] .wk-hall-guild-form {
  border-color: var(--wk-night-line-strong);
}
body[theme-mode="dark"] .wk-hall-guild-form-grid input,
body[theme-mode="dark"] .wk-hall-guild-form-grid select,
body[theme-mode="dark"] .wk-hall-guild-platform-trigger {
  border-color: var(--wk-night-line-strong);
  background: #383b40;
  color: rgba(255, 255, 255, 0.88);
}
body[theme-mode="dark"]
  .wk-hall-guild-platform-picker-modal
  .semi-modal-content,
body[theme-mode="dark"] .wk-hall-guild-platform-picker {
  background: #25272b;
  color: rgba(255, 255, 255, 0.88);
}
body[theme-mode="dark"] .wk-hall-guild-platform-picker > header > strong {
  color: rgba(255, 255, 255, 0.9);
}
body[theme-mode="dark"] .wk-hall-guild-platform-picker-search,
body[theme-mode="dark"] .wk-hall-guild-platform-picker-list > button,
body[theme-mode="dark"] .wk-hall-guild-platform-picker-empty {
  background: #383b40;
  color: rgba(255, 255, 255, 0.88);
}
body[theme-mode="dark"] .wk-hall-guild-platform-picker-search > input {
  color: rgba(255, 255, 255, 0.88);
}
body[theme-mode="dark"] .wk-hall-guild-platform-application > label,
body[theme-mode="dark"] .wk-hall-guild-platform-history article > div strong {
  color: rgba(255, 255, 255, 0.88);
}
body[theme-mode="dark"] .wk-hall-guild-platform-application input,
body[theme-mode="dark"] .wk-hall-guild-platform-application textarea,
body[theme-mode="dark"] .wk-hall-guild-platform-history article {
  border-color: var(--wk-night-line-strong);
  background: #383b40;
  color: rgba(255, 255, 255, 0.88);
}
@container wk-app-canvas (max-width: 720px) {
  .wk-hall-guild-form-grid {
    grid-template-columns: 1fr;
  }
  .wk-hall-guild-form-grid label.full {
    grid-column: auto;
  }
  .wk-hall-guild-form-grid label:not(.wk-hall-guild-upload),
  .wk-hall-guild-form-grid .wk-hall-guild-platform-field {
    gap: 10px;
  }
  .wk-hall-guild-form-grid label > span,
  .wk-hall-guild-form-grid .wk-hall-guild-platform-field > span {
    width: 118px;
  }
  .wk-hall-guild-platform-field {
    align-items: flex-start !important;
    padding: 10px 0;
  }
}

/* 公会会话标签与独立认证入口 */
.wk-hall-conversation-refresh-marker {
  display: none;
}
.wk-hall-conversation-tags {
  max-width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: #999999;
  font-size: 11px;
  line-height: 12px;
}
.wk-hall-conversation-platform {
  min-width: 0;
  max-width: 72px;
  height: 20px;
  padding: 4px 6px;
  border-radius: 4px;
  background: linear-gradient(114deg, #f5e4c1 0%, #fbf4e8 50%, #fae9d1 100%);
  color: #5a432b;
  display: inline-flex;
  align-items: center;
  flex: none;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}
.wk-hall-conversation-platform-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-guild-identity-badge {
  min-width: 42px;
  height: 20px;
  padding: 0 6px 0 20px;
  background: transparent;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  flex: none;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 400;
  line-height: 12px;
}
.wk-hall-guild-identity-badge::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 0;
  top: 2px;
  height: 16px;
  border-radius: 30px;
  background: linear-gradient(90deg, #ff6c00 0%, #ffa11e 100%);
}
.wk-hall-guild-identity-badge.is-uncertified::before {
  background: linear-gradient(90deg, #c4c6ce 0%, #e9ebf1 100%);
}
.wk-hall-guild-identity-badge-icon {
  width: 17px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
.wk-hall-guild-identity-badge-name {
  min-width: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-conversation-guild {
  max-width: 94px;
}
.wk-hall-conversation-id {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #999999;
  overflow: hidden;
}
.wk-hall-conversation-id-mark {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #e4e6ec;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 8px;
  font-weight: 600;
  line-height: 16px;
}
.wk-hall-conversation-id-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[theme-mode="dark"] .wk-hall-conversation-id-mark {
  background: rgba(255, 255, 255, 0.14);
}
body[theme-mode="dark"] .wk-hall-conversation-id {
  color: rgba(255, 255, 255, 0.5);
}
.wk-hall-menu-icon {
  width: 30px;
  height: 30px;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-hall-guild-center-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #333333;
  border-right: 1px solid #eeeeee;
}
.wk-hall-guild-settings-panel .wk-hall-guild-center-title {
  height: 54px;
  padding: 0;
  border-bottom: 1px solid #f1f1f1;
}
.wk-hall-guild-settings-panel .wk-hall-guild-center-title strong {
  color: #111111;
  font-size: 15px;
  font-weight: 500;
}
.wk-hall-guild-settings-panel .wk-hall-guild-center-items {
  padding: 0;
  overflow: visible;
}
.wk-hall-guild-settings-panel .wk-hall-guild-form {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  height: 478px;
  min-height: 478px;
  flex: none;
  display: flex;
  flex-direction: column;
}
.wk-hall-guild-settings-panel .wk-hall-guild-form.is-step-2 {
  height: 645px;
  min-height: 645px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-steps {
  height: 78px;
  min-height: 78px;
  margin: 0;
  padding: 0 36px;
  border-bottom: 1px solid #f1f1f1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
}
.wk-hall-guild-settings-panel .wk-hall-guild-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #999999;
  white-space: nowrap;
}
.wk-hall-guild-settings-panel .wk-hall-guild-steps li:first-child::after {
  width: 100px;
  height: 1px;
  margin: 0 32px;
  background: rgba(157, 38, 255, 0.35);
  content: "";
}
.wk-hall-guild-settings-panel .wk-hall-guild-steps li > span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f6ebff;
  color: #b57ae4;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-steps li > strong {
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-steps li.is-complete {
  color: #333333;
}
.wk-hall-guild-settings-panel .wk-hall-guild-steps li.is-complete > span {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}
.wk-hall-guild-settings-panel .wk-hall-guild-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 9px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-form.is-step-2
  .wk-hall-guild-form-grid {
  padding-top: 10px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-form.is-step-2
  .wk-hall-guild-company-field {
  margin-bottom: 32px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-form-grid label,
.wk-hall-guild-settings-panel
  .wk-hall-guild-form-grid
  .wk-hall-guild-platform-field {
  min-height: 90px;
  padding: 0;
  border: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}
.wk-hall-guild-settings-panel .wk-hall-guild-form-grid label > span,
.wk-hall-guild-settings-panel
  .wk-hall-guild-form-grid
  .wk-hall-guild-platform-field
  > span {
  width: auto;
  height: 35px;
  color: #666666;
  font-size: 15px;
  line-height: 15px;
  display: flex;
  align-items: center;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-form-grid
  label.wk-hall-guild-credit-field {
  grid-column: 1 / -1;
  min-height: 42px;
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-form-grid
  .wk-hall-guild-credit-field
  > span {
  height: 42px;
  font-size: 13px;
  line-height: 18px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-form-grid
  .wk-hall-guild-credit-field
  > input {
  min-height: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 13px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-form-grid input,
.wk-hall-guild-settings-panel .wk-hall-guild-form-grid select,
.wk-hall-guild-settings-panel .wk-hall-guild-platform-trigger {
  width: 100%;
  min-height: 55px;
  padding: 0 12px;
  border-radius: 10px;
  background: #f6f6f6;
  font-size: 15px;
  box-sizing: border-box;
}
.wk-hall-guild-settings-panel .wk-hall-guild-upload.license {
  grid-column: 1 / -1;
}
.wk-hall-guild-settings-panel .wk-hall-guild-upload.compact {
  grid-column: auto;
  min-height: 90px;
  align-items: stretch !important;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-upload.compact
  .wk-hall-guild-upload-card {
  width: 100%;
  min-height: 55px;
  flex: none;
  border: 0;
  border-radius: 10px;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 12px;
  background: #f6f6f6;
  box-sizing: border-box;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-upload.compact
  .wk-hall-guild-upload-card
  strong {
  min-width: 0;
  color: #999999;
  font-size: 15px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-upload.compact
  .wk-hall-guild-upload-card
  > img {
  width: 13px;
  height: 13px;
  flex: none;
}
.wk-hall-guild-settings-panel .wk-hall-guild-upload.license {
  min-height: 224px;
  gap: 0;
}
.wk-hall-guild-settings-panel .wk-hall-guild-upload.license > span {
  height: 54px;
  flex: none;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-upload.license
  .wk-hall-guild-upload-card {
  width: 171px;
  min-height: 116px;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: #f0f0f0;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-upload.license
  .wk-hall-guild-upload-card
  > img {
  width: 40px;
  height: 40px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-upload.license
  .wk-hall-guild-upload-card
  > img.wk-hall-guild-license-preview {
  width: 171px;
  height: 116px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-upload-hint {
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  box-sizing: border-box;
  color: #999999;
  font-size: 13px;
  line-height: 18px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-consent {
  min-width: 0;
  max-width: 180px;
  min-height: 0;
  margin-top: 0;
  align-items: center;
  font-size: 10px;
  line-height: 14px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-actions {
  height: 72px;
  min-height: 72px;
  margin-top: auto;
  padding-top: 0;
  border-top: 1px solid #f1f1f1;
  box-sizing: border-box;
  position: relative;
  justify-content: center;
  gap: 10px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-actions.without-consent {
  justify-content: center;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-form.is-step-2
  .wk-hall-guild-actions {
  flex: none;
  margin-top: 32px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-form.is-step-2
  .wk-hall-guild-consent {
  position: absolute;
  top: -27px;
  left: 0;
  max-width: 100%;
  white-space: nowrap;
}
.wk-hall-guild-settings-panel .wk-hall-guild-action-buttons {
  flex: none;
  gap: 12px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-cancel,
.wk-hall-guild-settings-panel .wk-hall-guild-submit {
  width: 130px;
  min-height: 40px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-cancel {
  border-color: rgba(157, 38, 255, 0.55);
  color: #8f2cff;
}
.wk-hall-guild-settings-panel .wk-hall-guild-submit {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
}
.wk-hall-guild-settings-panel .wk-hall-guild-submit:disabled {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  opacity: 0.2;
}
body[theme-mode="dark"]
  .wk-hall-guild-settings-panel
  .wk-hall-guild-upload-card {
  background: #383b40;
  color: rgba(255, 255, 255, 0.82);
}
body[theme-mode="dark"]
  .wk-hall-guild-settings-panel
  .wk-hall-guild-upload.license
  .wk-hall-guild-upload-card {
  background: #33363a;
}
body[theme-mode="dark"] .wk-hall-guild-settings-panel .wk-hall-guild-cancel {
  background: transparent;
}

/* 厅信息内只承载账号唯一公会认证，不展示旧的群聊公会选择器。 */
.wk-hall-guild-channel-settings-panel {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 0 12px 40px;
  background: #f8f8f8;
  background: var(--wk-hall-gap-background, #f8f8f8);
}

.wk-hall-guild-channel-settings-panel .wk-hall-guild-center-title {
  display: none;
}

.wk-hall-guild-channel-settings-panel .wk-hall-guild-center-items {
  overflow-x: hidden;
  overflow-y: auto;
}

.wk-hall-guild-channel-settings-panel .wk-hall-guild-form,
.wk-hall-guild-channel-settings-panel .wk-hall-guild-form.is-step-2,
.wk-hall-guild-settings-panel.wk-hall-guild-channel-settings-panel
  .wk-hall-guild-certification-result {
  height: auto;
  min-height: 0;
}

.wk-hall-guild-channel-settings-panel .wk-hall-guild-steps {
  padding: 0 8px;
}

.wk-hall-guild-channel-settings-panel
  .wk-hall-guild-steps
  li:first-child::after {
  width: 24px;
  margin: 0 10px;
}

.wk-hall-guild-channel-settings-panel .wk-hall-guild-form-grid,
.wk-hall-guild-channel-settings-panel .wk-hall-guild-certification-details dl {
  grid-template-columns: minmax(0, 1fr);
}

.wk-hall-guild-channel-settings-panel .wk-hall-guild-form-grid label.full,
.wk-hall-guild-channel-settings-panel .wk-hall-guild-credit-field,
.wk-hall-guild-channel-settings-panel .wk-hall-guild-upload.compact,
.wk-hall-guild-channel-settings-panel .wk-hall-guild-upload.license {
  grid-column: auto;
}

.wk-hall-guild-channel-settings-panel .wk-hall-guild-actions,
.wk-hall-guild-channel-settings-panel
  .wk-hall-guild-form.is-step-2
  .wk-hall-guild-actions {
  margin-top: 24px;
  flex-wrap: wrap;
}

.wk-hall-guild-channel-settings-panel .wk-hall-guild-consent {
  position: static;
  max-width: none;
  flex: 1 1 100%;
  white-space: normal;
}

.wk-hall-guild-channel-settings-panel .wk-hall-guild-action-buttons,
.wk-hall-guild-channel-settings-panel
  .wk-hall-guild-certification-result-actions {
  width: 100%;
}

.wk-hall-guild-channel-settings-panel .wk-hall-guild-cancel,
.wk-hall-guild-channel-settings-panel .wk-hall-guild-submit,
.wk-hall-guild-channel-settings-panel
  .wk-hall-guild-certification-result-actions
  button {
  width: auto;
  min-width: 0;
  flex: 1 1;
}

.wk-hall-guild-settings-panel .wk-hall-guild-certification-result {
  height: 478px;
  min-height: 478px;
  padding: 92px 0 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333333;
  text-align: center;
}
.wk-hall-guild-settings-panel .wk-hall-guild-certification-result-illustration {
  width: auto;
  height: auto;
  display: block;
  flex: none;
}
.wk-hall-guild-settings-panel .wk-hall-guild-certification-result-body {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-certification-result-copy {
  width: -moz-max-content;
  width: max-content;
  max-width: 224px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result-copy
  > strong {
  color: #333333;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-certification-result-copy > p {
  min-height: 40px;
  margin: 0;
  color: #999999;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result.is-approved
  .wk-hall-guild-certification-result-copy,
.wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result.is-rejected
  .wk-hall-guild-certification-result-copy {
  gap: 10px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result.is-approved
  .wk-hall-guild-certification-result-copy {
  width: 224px;
  max-width: 224px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result.is-rejected
  .wk-hall-guild-certification-result-copy {
  width: 196px;
  max-width: 196px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result.is-approved
  .wk-hall-guild-certification-result-copy
  > strong,
.wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result.is-rejected
  .wk-hall-guild-certification-result-copy
  > strong {
  font-size: 15px;
  line-height: 15px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result.is-approved
  .wk-hall-guild-certification-result-copy
  > p,
.wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result.is-rejected
  .wk-hall-guild-certification-result-copy
  > p {
  min-height: 48px;
  line-height: 24px;
}
.wk-hall-guild-settings-panel .wk-hall-guild-certification-result-actions {
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result-actions
  button {
  width: 130px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(157, 38, 255, 0.5);
  border-radius: 8px;
  background: #ffffff;
  color: #9d26ff;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  cursor: pointer;
}
.wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result-actions
  button.is-primary {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}
body[theme-mode="dark"]
  .wk-hall-guild-settings-panel
  .wk-hall-guild-steps
  li.is-complete,
body[theme-mode="dark"]
  .wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result
  .wk-hall-guild-certification-result-copy
  > strong {
  color: rgba(255, 255, 255, 0.9);
}
body[theme-mode="dark"]
  .wk-hall-guild-settings-panel
  .wk-hall-guild-certification-result-actions
  button:not(.is-primary) {
  background: transparent;
}

.wk-hall-guild-settings-panel .wk-hall-guild-certification-details {
  height: 478px;
  min-height: 478px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #333333;
}
.wk-hall-guild-certification-details > header {
  min-height: 62px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wk-hall-guild-certification-details > header > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wk-hall-guild-certification-details > header strong {
  font-size: 15px;
  font-weight: 500;
}
.wk-hall-guild-certification-details > header span {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f2e9ff;
  color: #8f2cff;
  font-size: 12px;
  line-height: 18px;
}
.wk-hall-guild-certification-details > header small {
  flex: none;
  color: #999999;
  font-size: 12px;
}
.wk-hall-guild-certification-details-scroll {
  min-height: 0;
  flex: 1 1;
  padding: 16px 2px 20px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(137, 110, 255, 0.34) transparent;
}
.wk-hall-guild-certification-details-scroll::-webkit-scrollbar {
  width: 5px;
}
.wk-hall-guild-certification-details-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(137, 110, 255, 0.34);
}
.wk-hall-guild-certification-details-scroll > section + section {
  margin-top: 20px;
}
.wk-hall-guild-certification-details h3 {
  margin: 0 0 10px;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.wk-hall-guild-certification-details dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 9px;
  gap: 9px;
}
.wk-hall-guild-certification-details dl > div {
  min-width: 0;
  min-height: 55px;
  padding: 8px 12px;
  border-radius: 10px;
  box-sizing: border-box;
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.wk-hall-guild-certification-details dt {
  color: #999999;
  font-size: 12px;
  line-height: 16px;
}
.wk-hall-guild-certification-details dd {
  min-width: 0;
  margin: 0;
  color: #333333;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}
.wk-hall-guild-certification-details-asset {
  min-height: 86px;
  margin-top: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  box-sizing: border-box;
  background: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wk-hall-guild-certification-details-asset > span:first-child {
  color: #999999;
  font-size: 12px;
}
.wk-hall-guild-certification-details-logo {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}
.wk-hall-guild-certification-details-license {
  width: 171px;
  height: 116px;
  border-radius: 10px;
  -o-object-fit: contain;
     object-fit: contain;
  background: #f0f0f0;
}
.wk-hall-guild-certification-details-asset.is-license {
  min-height: 136px;
}
.wk-hall-guild-certification-details-asset .is-placeholder {
  min-width: 96px;
  min-height: 44px;
  border-radius: 8px;
  background: #eeeeee;
  color: #999999;
  display: grid;
  place-items: center;
  font-size: 12px;
}
.wk-hall-guild-certification-details > footer {
  height: 64px;
  min-height: 64px;
  border-top: 1px solid #f1f1f1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.wk-hall-guild-certification-details > footer button {
  width: 130px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(157, 38, 255, 0.55);
  border-radius: 8px;
  background: #ffffff;
  color: #8f2cff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
body[theme-mode="dark"] .wk-hall-guild-certification-details {
  color: rgba(255, 255, 255, 0.88);
}
body[theme-mode="dark"] .wk-hall-guild-certification-details h3,
body[theme-mode="dark"] .wk-hall-guild-certification-details dd,
body[theme-mode="dark"] .wk-hall-guild-certification-details > header strong {
  color: rgba(255, 255, 255, 0.88);
}
body[theme-mode="dark"] .wk-hall-guild-certification-details dl > div,
body[theme-mode="dark"] .wk-hall-guild-certification-details-asset {
  background: #383b40;
}
body[theme-mode="dark"] .wk-hall-guild-certification-details > footer button {
  background: transparent;
}

@container wk-app-canvas (max-width: 720px) {
  .wk-hall-guild-settings-panel .wk-hall-guild-form,
  .wk-hall-guild-settings-panel .wk-hall-guild-form.is-step-2,
  .wk-hall-guild-settings-panel .wk-hall-guild-certification-result {
    height: auto;
    min-height: 0;
  }

  .wk-hall-guild-settings-panel .wk-hall-guild-steps {
    padding: 0 8px;
  }

  .wk-hall-guild-settings-panel .wk-hall-guild-steps li:first-child::after {
    width: 24px;
    margin: 0 10px;
  }

  .wk-hall-guild-settings-panel .wk-hall-guild-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .wk-hall-guild-settings-panel .wk-hall-guild-form-grid label.full,
  .wk-hall-guild-settings-panel .wk-hall-guild-credit-field,
  .wk-hall-guild-settings-panel .wk-hall-guild-upload.compact,
  .wk-hall-guild-settings-panel .wk-hall-guild-upload.license {
    grid-column: auto;
  }

  .wk-hall-guild-settings-panel .wk-hall-guild-actions {
    margin-top: 24px;
    flex-wrap: wrap;
  }

  .wk-hall-guild-settings-panel
    .wk-hall-guild-form.is-step-2
    .wk-hall-guild-actions {
    margin-top: 24px;
  }

  .wk-hall-guild-settings-panel .wk-hall-guild-consent {
    position: static;
    max-width: none;
    flex: 1 1 100%;
    white-space: normal;
  }

  .wk-hall-guild-settings-panel .wk-hall-guild-certification-result {
    padding: 72px 0 36px;
  }

  .wk-hall-guild-settings-panel .wk-hall-guild-certification-details {
    height: auto;
    min-height: 478px;
  }

  .wk-hall-guild-certification-details > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .wk-hall-guild-certification-details dl {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container wk-app-canvas (max-width: 480px) {
  .wk-hall-guild-settings-panel .wk-hall-guild-action-buttons,
  .wk-hall-guild-settings-panel .wk-hall-guild-certification-result-actions {
    width: 100%;
  }

  .wk-hall-guild-settings-panel .wk-hall-guild-cancel,
  .wk-hall-guild-settings-panel .wk-hall-guild-submit,
  .wk-hall-guild-settings-panel
    .wk-hall-guild-certification-result-actions
    button {
    width: auto;
    min-width: 0;
    flex: 1 1;
  }
}
.wk-hall-guild-center-title {
  height: 86px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #eeeeee;
}
.wk-hall-guild-center-title .wk-hall-menu-icon {
  width: 34px;
  height: 34px;
  color: #8b5cf6;
}
.wk-hall-guild-center-title > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wk-hall-guild-center-title strong {
  font-size: 18px;
}
.wk-hall-guild-center-title span {
  color: #999999;
  font-size: 12px;
}
.wk-hall-guild-center-search {
  margin: 14px 16px;
  display: flex;
  gap: 8px;
}
.wk-hall-guild-center-search input {
  min-width: 0;
  height: 38px;
  flex: 1 1;
  padding: 0 12px;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  outline: none;
  background: #f5f6fb;
}
.wk-hall-guild-center-search input:focus {
  border-color: #a855f7;
}
.wk-hall-guild-center-search button {
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: #8b5cf6;
  color: #ffffff;
  cursor: pointer;
}
.wk-hall-guild-center-items {
  min-height: 0;
  flex: 1 1;
  overflow-y: auto;
}
.wk-hall-guild-center-item {
  width: 100%;
  min-height: 76px;
  padding: 11px 18px;
  border: 0;
  border-bottom: 1px solid #f2f2f2;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}
.wk-hall-guild-center-item:hover {
  background: #faf7ff;
}
.wk-hall-guild-center-item img,
.wk-hall-guild-center-item i {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 16px;
  background: #eeeeee;
  -o-object-fit: cover;
     object-fit: cover;
}
.wk-hall-guild-center-item > span {
  min-width: 0;
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wk-hall-guild-center-item strong,
.wk-hall-guild-center-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-guild-center-item strong {
  color: #333333;
  font-size: 14px;
}
.wk-hall-guild-center-item small {
  color: #999999;
}
.wk-hall-guild-center-item em {
  color: #aaaaaa;
  font-size: 24px;
  font-style: normal;
}
.wk-hall-guild-center-state {
  min-height: 180px;
  padding: 30px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #999999;
  text-align: center;
}
.wk-hall-guild-center-state.error {
  color: #dc2626;
}
.wk-hall-guild-center-state button {
  padding: 6px 14px;
  border: 1px solid #dedede;
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
}
.wk-hall-guild-center-main {
  width: 100%;
  height: 100%;
  background: #f5f6f8;
  color: #333333;
  display: flex;
  flex-direction: column;
}
.wk-hall-guild-center-main > header {
  min-height: 72px;
  padding: 10px 24px;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  gap: 14px;
}
.wk-hall-guild-center-main > header button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #666666;
  font-size: 30px;
  cursor: pointer;
}
.wk-hall-guild-center-main > header button:hover {
  background: #f2f2f2;
}
.wk-hall-guild-center-main > header div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wk-hall-guild-center-main > header strong {
  font-size: 17px;
}
.wk-hall-guild-center-main > header span {
  color: #999999;
  font-size: 12px;
}
.wk-hall-guild-center-scroll {
  min-height: 0;
  flex: 1 1;
  padding: 18px 24px 36px;
  overflow-y: auto;
}
.wk-hall-guild-center-scroll > .wk-hall-guild-overview {
  max-width: 780px;
  margin: 0 auto;
  box-shadow: 0 6px 22px rgba(31, 35, 48, 0.05);
}

.wk-hall-guild-account-center {
  overflow-y: auto;
}

.wk-hall-guild-account-center.wk-hall-guild-settings-panel {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.wk-hall-guild-account-center.wk-hall-guild-settings-panel
  .wk-hall-guild-center-items {
  flex: none;
}

.wk-hall-guild-account-center .wk-hall-guild-center-title span {
  max-width: 420px;
}

.wk-hall-guild-account-card,
.wk-hall-guild-application-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid #eeeef4;
  border-radius: 10px;
  background: #fff;
}

.wk-hall-guild-account-card span,
.wk-hall-guild-application-card span,
.wk-hall-guild-account-card small,
.wk-hall-guild-application-card small {
  color: #8b8b98;
  font-size: 12px;
}

.wk-hall-guild-application-card button {
  align-self: flex-start;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid #7b61ff;
  border-radius: 8px;
  color: #6b4eff;
  background: #fff;
  cursor: pointer;
}

.wk-hall-guild-create {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #7b61ff;
  cursor: pointer;
}

.wk-hall-guild-binding-editor {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wk-hall-guild-binding-editor select {
  flex: 1 1 240px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #dedee8;
  border-radius: 8px;
  background: #fff;
}

.wk-hall-guild-binding-editor button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #7b61ff;
  cursor: pointer;
}

.wk-hall-guild-binding-editor button.danger {
  color: #e05555;
  background: #fff1f1;
}

.wk-hall-guild-binding-editor button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.wk-hall-top-card-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wk-hall-top-card-form label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wk-hall-top-card-form label > span {
  width: 100px;
  flex: none;
  color: #555555;
}
.wk-hall-top-card-form input,
.wk-hall-top-card-form select {
  min-width: 0;
  flex: 1 1;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid #dedede;
  border-radius: 6px;
  background: #ffffff;
}
.wk-hall-top-card-form label button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dedede;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}
.wk-hall-top-card-form label button.selected {
  border-color: #8b5cf6;
  color: #7c3aed;
}
.wk-hall-top-card-date-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wk-hall-top-card-date-field > span {
  width: 100px;
  flex: none;
  color: #555555;
}
.wk-hall-top-card-date-picker {
  min-width: 0;
  flex: 1 1;
}
.wk-hall-top-card-date-picker .semi-datepicker-input {
  width: 100%;
}
.wk-hall-anchor-select {
  min-height: 0;
  padding: 0 2px 2px;
}
.wk-hall-anchor-select-heading {
  min-height: 30px;
  display: flex;
  align-items: center;
}
.wk-hall-anchor-select-heading button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #555555;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.wk-hall-anchor-select-heading button:hover {
  background: #f3f3f4;
}
.wk-hall-anchor-select-heading button:focus-visible,
.wk-hall-member-group > button:focus-visible,
.wk-hall-chat-task-value-trigger:focus-visible,
.wk-hall-task-value-options button:focus-visible,
.wk-hall-task-value-actions button:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}
body[theme-mode="dark"] .wk-hall-anchor-select-heading button {
  color: rgba(255, 255, 255, 0.78);
}
body[theme-mode="dark"] .wk-hall-anchor-select-heading button:hover {
  background: rgba(255, 255, 255, 0.08);
}
.wk-hall-anchor-select .wk-hall-member-groups {
  max-height: 340px;
}
.wk-hall-host-selected {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 10px;
}
.wk-hall-host-selected span {
  padding: 8px;
  border-radius: 6px;
  background: #f6f0ff;
  color: #6d28d9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-host-selected span:only-child {
  grid-column: 1 / -1;
}
.wk-hall-host-modal .semi-modal {
  width: min(760px, calc(100vw - 32px));
}
.wk-hall-host-search {
  margin-bottom: 9px;
}
.wk-hall-host-member-list {
  max-height: 330px;
  overflow-y: auto;
  border: 1px solid #eeeeee;
  border-radius: 8px;
}
.wk-hall-host-member-list button {
  width: 100%;
  min-height: 46px;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid #eeeeee;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.wk-hall-host-member-list button.selected {
  background: #f6f0ff;
  color: #6d28d9;
}
.wk-hall-host-member-list small {
  color: #999999;
}
.wk-hall-fixed-member-field {
  margin-top: 14px;
}
.wk-hall-fixed-member-trigger {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  background: #f4f4f4;
  color: #444444;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}
.wk-hall-fixed-member-trigger:disabled {
  cursor: default;
  opacity: 0.58;
}
.wk-hall-fixed-member-trigger-value {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-fixed-member-trigger-count {
  flex: none;
  color: #8a8a8a;
  font-size: 12px;
}
.wk-hall-fixed-member-trigger-chevron {
  flex: none;
  color: #555555;
  font-size: 14px;
}
.wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal {
  width: min(433px, calc(100vw - 24px));
  border-radius: 12px;
  overflow: hidden;
}
.wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-content {
  border-radius: 12px;
  overflow: hidden;
}
.wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-header {
  padding: 20px 20px 14px;
}
.wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-title {
  font-size: 14px;
  font-weight: 600;
}
.wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-body {
  padding: 0 20px 20px;
  overflow: hidden;
}
.wk-hall-fixed-member-editor {
  min-height: 384px;
  display: flex;
  flex-direction: column;
}
.wk-hall-fixed-member-selection {
  min-height: 46px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #eeeeee;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wk-hall-fixed-member-tags {
  min-width: 0;
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: 6px 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.wk-hall-fixed-member-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #4a4a4a;
  font-size: 14px;
  white-space: nowrap;
}
.wk-hall-fixed-member-tag button {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #a0a0a0;
  cursor: pointer;
  font-size: 15px;
  line-height: 16px;
}
.wk-hall-fixed-member-placeholder {
  color: #555555;
  font-size: 14px;
}
.wk-hall-fixed-member-chevron {
  flex: none;
  color: #555555;
  font-size: 15px;
}
.wk-hall-fixed-member-grid {
  min-height: 0;
  max-height: 256px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 56px;
  grid-gap: 8px;
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.wk-hall-fixed-member-card {
  min-width: 0;
  height: 56px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: #eeeeee;
  color: #454545;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}
.wk-hall-fixed-member-card:disabled {
  cursor: default;
  opacity: 0.48;
}
.wk-hall-fixed-member-name {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-fixed-member-check {
  width: 18px;
  height: 18px;
  border: 1px solid #a7a7a7;
  border-radius: 50%;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}
.wk-hall-fixed-member-card.selected .wk-hall-fixed-member-check {
  border-color: #7c2cff;
  background: #7c2cff;
}
.wk-hall-fixed-member-empty {
  grid-column: 1 / -1;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wk-hall-fixed-member-actions {
  margin-top: auto;
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.wk-hall-fixed-member-actions button {
  min-height: 56px;
  border: 1px solid #8d8d8d;
  border-radius: 6px;
  background: #ffffff;
  color: #686868;
  cursor: pointer;
  font-size: 14px;
}
.wk-hall-fixed-member-actions button:last-child {
  border-color: #929292;
  background: #929292;
  color: #ffffff;
}
.wk-hall-fixed-member-actions button:disabled {
  cursor: default;
  opacity: 0.5;
}
.wk-hall-host-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 14px;
}
.wk-hall-host-mode-tabs button {
  min-height: 38px;
  border: 1px solid #dedede;
  border-radius: 7px;
  background: #ffffff;
  color: #666666;
  cursor: pointer;
}
.wk-hall-host-mode-tabs button.selected {
  border-color: #8b5cf6;
  background: #f6f0ff;
  color: #6d28d9;
  font-weight: 600;
}
.wk-hall-host-mode-tabs button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.wk-hall-host-occurrence-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 10px;
}
.wk-hall-host-occurrence-tabs button {
  min-width: 0;
  min-height: 52px;
  padding: 7px 10px;
  border: 1px solid #dedede;
  border-radius: 7px;
  background: #ffffff;
  color: #555555;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  text-align: left;
}
.wk-hall-host-occurrence-tabs button.selected {
  border-color: #8b5cf6;
  background: #f6f0ff;
  color: #6d28d9;
}
.wk-hall-host-occurrence-tabs button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.wk-hall-host-occurrence-tabs strong,
.wk-hall-host-occurrence-tabs span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-hall-host-occurrence-tabs span {
  color: #888888;
  font-size: 11px;
}
.wk-hall-current-gear-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7f7f7;
}
.wk-hall-current-gear-summary span {
  color: #888888;
  font-size: 12px;
  text-align: right;
}
.wk-hall-gear-create-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.wk-hall-gear-create-form label {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wk-hall-gear-create-form label > span {
  width: 128px;
  flex: none;
  color: #555555;
}
.wk-hall-gear-create-form input {
  min-width: 0;
  flex: 1 1;
  min-height: 38px;
  padding: 6px 9px;
  border: 1px solid #dedede;
  border-radius: 6px;
  background: #ffffff;
}
.wk-hall-created-gears {
  max-height: 150px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eeeeee;
  overflow-y: auto;
}
.wk-hall-created-gears > div:not(.wk-hall-runtime-label) {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  color: #666666;
  font-size: 12px;
}
.wk-hall-created-gears strong {
  color: #6d28d9;
}
.wk-hall-created-gears span {
  text-align: right;
}
.wk-hall-help-task-list {
  max-height: 340px;
  overflow-y: auto;
}
.wk-hall-help-task-list > button {
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid #eeeeee;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.wk-hall-help-task-list > button > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.wk-hall-help-task-list > button small,
.wk-hall-help-task-target small {
  color: #999999;
  font-size: 11px;
  font-weight: 400;
}
.wk-hall-help-task-list strong {
  color: #7c3aed;
}
.wk-hall-help-task-target {
  margin-bottom: 8px;
  text-align: center;
  color: #666666;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Figma 474:29192：群聊主持人、固定档和成员选择 */
.wk-hall-host-modal .semi-modal,
.wk-hall-fixed-member-modal .semi-modal,
.wk-hall-host-modal .semi-modal *,
.wk-hall-fixed-member-modal .semi-modal * {
  box-sizing: border-box;
}

.wk-hall-host-modal .semi-modal {
  width: min(760px, calc(100vw - 32px));
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--wk-font-family);
}

.wk-hall-host-modal .semi-modal-content {
  border-radius: 10px;
  overflow: hidden;
}

.wk-hall-host-modal .semi-modal-header {
  padding: 20px 20px 14px;
}

.wk-hall-host-modal .semi-modal-title {
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.wk-hall-host-modal .semi-modal-body {
  max-height: min(720px, calc(100vh - 120px));
  padding: 0 20px 20px;
  overflow-y: auto;
}

.wk-hall-host-mode-tabs {
  gap: 8px;
  margin-bottom: 14px;
}

.wk-hall-host-mode-tabs button {
  min-height: 40px;
  border-color: #d9d9d9;
  border-radius: 8px;
  color: #333333;
  font-size: 14px;
}

.wk-hall-host-mode-tabs button.selected {
  border-color: #6b10ff;
  background: #f5efff;
  color: #6b10ff;
}

.wk-hall-host-occurrence-tabs {
  gap: 10px;
  margin-bottom: 10px;
}

.wk-hall-host-occurrence-tabs button {
  min-height: 56px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: #ededed;
  color: #333333;
}

.wk-hall-host-occurrence-tabs button.selected {
  border: 1px solid #6b10ff;
  background: #f6f0ff;
  color: #333333;
}

.wk-hall-current-gear-summary {
  min-height: 56px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f6f6;
  color: #333333;
}

.wk-hall-current-gear-summary span {
  color: #999999;
  font-size: 14px;
}

.wk-hall-gear-create-form {
  gap: 10px;
  margin-bottom: 14px;
}

.wk-hall-gear-create-form label {
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f6f6;
}

.wk-hall-gear-create-form label > span {
  width: 150px;
  color: #333333;
  font-size: 14px;
}

.wk-hall-gear-create-form input {
  min-height: 34px;
  border-color: #d9d9d9;
  border-radius: 8px;
  background: #ffffff;
  color: #333333;
}

.wk-hall-host-picker {
  margin-top: 14px;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.wk-hall-host-picker-heading {
  padding: 16px 20px 10px;
}

.wk-hall-host-picker-heading > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wk-hall-host-picker-heading strong {
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.wk-hall-host-picker-heading > div:first-child > span {
  color: #999999;
  font-size: 14px;
}

.wk-hall-host-selected {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 0;
}

.wk-hall-host-selected span {
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #f6f6f6;
  color: #333333;
  font-size: 14px;
}

.wk-hall-host-search {
  min-height: 46px;
  margin: 0 20px 10px;
  padding: 0 12px;
  border: 1px solid #6b10ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #999999;
}

.wk-hall-host-search svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.wk-hall-host-search .wk-hall-runtime-host-input {
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #333333;
  font-size: 14px;
}

.wk-hall-host-search .wk-hall-runtime-host-input:focus {
  border: 0;
}

.wk-hall-host-search .wk-hall-runtime-host-input::-moz-placeholder {
  color: #999999;
}

.wk-hall-host-search .wk-hall-runtime-host-input::placeholder {
  color: #999999;
}

.wk-hall-host-member-list {
  max-height: 310px;
  border: 0;
  border-radius: 0;
}

/* Figma 807:8663：成员行 62 高、左右 20 内边距，勾选/头像/名称间距 10。 */
.wk-hall-host-member-list button {
  min-height: 62px;
  padding: 10px 20px;
  border: 0;
  background: #ffffff;
  justify-content: flex-start;
  gap: 10px;
  color: #333333;
  font-size: 14px;
}

.wk-hall-host-member-list button:hover:not(:disabled),
.wk-hall-host-member-list button.selected {
  background: #f1f1f1;
  color: #333333;
}

.wk-hall-host-member-list button:disabled {
  cursor: default;
  opacity: 0.46;
}

.wk-hall-host-member-check,
.wk-hall-fixed-member-check {
  width: 18px;
  height: 18px;
  border: 1px solid #999999;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.wk-hall-host-member-list button.selected .wk-hall-host-member-check,
.wk-hall-fixed-member-card.selected .wk-hall-fixed-member-check {
  border-color: #6b10ff;
  background: #6b10ff;
}

.wk-hall-host-member-avatar,
.wk-hall-fixed-member-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ededed;
  color: #666666;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  font-size: 14px;
  font-style: normal;
}

.wk-hall-host-member-avatar img,
.wk-hall-fixed-member-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-host-member-name,
.wk-hall-fixed-member-name {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-host-member-list small {
  min-width: 44px;
  flex: none;
  color: #999999;
  text-align: right;
}

.wk-hall-host-picker-actions {
  min-height: 64px;
  padding: 12px 20px;
  border-top: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wk-hall-host-picker-actions button {
  min-width: 129px;
  min-height: 40px;
  border: 1px solid #898989;
  border-radius: 8px;
  background: #ffffff;
  color: #898989;
  cursor: pointer;
  font-size: 14px;
}

.wk-hall-host-picker-actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

.wk-hall-host-picker-actions span {
  color: #999999;
  font-size: 12px;
}

.wk-hall-runtime-modal .wk-hall-runtime-actions {
  gap: 10px;
  padding-top: 20px;
}

.wk-hall-runtime-modal .wk-hall-runtime-actions button {
  min-height: 40px;
  border-radius: 8px;
  font-size: 14px;
}

.wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal {
  width: min(744px, calc(100vw - 24px));
  height: min(646px, calc(100vh - 32px));
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--wk-font-family);
}

.wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-content {
  height: 100%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-header {
  min-height: 58px;
  padding: 20px 24px 10px 327px;
  flex: none;
}

.wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-title {
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-body {
  min-height: 0;
  padding: 0;
  flex: 1 1;
  overflow: hidden;
}

.wk-hall-fixed-member-editor {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 307px minmax(0, 1fr);
}

.wk-hall-fixed-member-available {
  min-width: 0;
  min-height: 0;
  padding: 0 20px 20px;
  border-right: 1px solid #f5f5f5;
  display: flex;
  flex-direction: column;
}

.wk-hall-fixed-member-search {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #6b10ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #999999;
}

.wk-hall-fixed-member-search svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.wk-hall-fixed-member-search input {
  min-width: 0;
  height: 42px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  flex: 1 1;
  color: #333333;
  font-size: 14px;
}

.wk-hall-fixed-member-search input::-moz-placeholder {
  color: #999999;
}

.wk-hall-fixed-member-search input::placeholder {
  color: #999999;
}

.wk-hall-fixed-member-mode {
  padding-top: 18px;
  color: #666666;
  font-size: 14px;
}

.wk-hall-fixed-member-group-title {
  padding: 24px 0 14px;
  color: #999999;
  font-size: 14px;
}

.wk-hall-fixed-member-grid {
  min-height: 0;
  max-height: none;
  margin: 0;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

.wk-hall-fixed-member-card {
  min-height: 62px;
  height: 62px;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  gap: 12px;
  color: #333333;
}

.wk-hall-fixed-member-card:hover:not(:disabled),
.wk-hall-fixed-member-card.selected {
  background: #f1f1f1;
}

.wk-hall-fixed-member-card:disabled {
  opacity: 0.42;
}

.wk-hall-fixed-member-empty {
  min-height: 100px;
  color: #999999;
}

.wk-hall-fixed-member-selection {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.wk-hall-fixed-member-selection-heading {
  min-height: 48px;
  padding: 0 24px 10px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wk-hall-fixed-member-selection-heading strong {
  color: #000000;
  font-size: 16px;
  font-weight: 600;
}

.wk-hall-fixed-member-selection-heading span {
  color: #999999;
  font-size: 14px;
}

.wk-hall-fixed-member-selected-list {
  min-height: 0;
  padding: 0 20px;
  flex: 1 1;
  overflow-y: auto;
}

.wk-hall-fixed-member-selected-row {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #333333;
  font-size: 14px;
}

.wk-hall-fixed-member-selected-row > button {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e5e5e5;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 18px;
}

.wk-hall-fixed-member-placeholder {
  min-height: 120px;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-hall-fixed-member-actions {
  min-height: 88px;
  margin: 0;
  padding: 20px 24px;
  border-top: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: none;
}

.wk-hall-fixed-member-actions button {
  width: 129px;
  min-height: 40px;
  border-color: #898989;
  border-radius: 8px;
  color: #898989;
}

.wk-hall-fixed-member-actions button:last-child {
  border-color: #898989;
  background: #898989;
}

body[theme-mode="dark"] .wk-hall-host-picker,
body[theme-mode="dark"] .wk-hall-host-member-list button,
body[theme-mode="dark"] .wk-hall-fixed-member-selection,
body[theme-mode="dark"] .wk-hall-fixed-member-card,
body[theme-mode="dark"] .wk-hall-fixed-member-search input {
  background: var(--wk-night-canvas);
  color: rgba(255, 255, 255, 0.84);
}

body[theme-mode="dark"] .wk-hall-host-member-list button:hover:not(:disabled),
body[theme-mode="dark"] .wk-hall-host-member-list button.selected,
body[theme-mode="dark"] .wk-hall-fixed-member-card:hover:not(:disabled),
body[theme-mode="dark"] .wk-hall-fixed-member-card.selected {
  background: rgba(107, 16, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
}

body[theme-mode="dark"] .wk-hall-fixed-member-available {
  border-right-color: #3b3e42;
}

@media (max-width: 800px) {
  .wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal {
    height: min(720px, calc(100vh - 24px));
  }

  .wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-header {
    padding-left: 20px;
  }

  .wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-body {
    overflow-y: auto;
  }

  .wk-hall-fixed-member-editor {
    height: auto;
    display: block;
  }

  .wk-hall-fixed-member-available {
    min-height: 330px;
    border-right: 0;
    border-bottom: 1px solid #f5f5f5;
  }

  .wk-hall-fixed-member-selection {
    min-height: 300px;
    padding-top: 18px;
  }

  .wk-hall-host-selected {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Figma 474:29457 / 550:15121 / 550:14779：主持人设置 */
/* Figma 807:8721：主持人设置面板宽 434，双栏态 868（434 × 2）。 */
.wk-hall-host-design-modal .semi-modal {
  width: min(434px, calc(100vw - 24px));
  border-radius: 20px;
}

.wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal {
  /* 已保存的档期数量可变：空态不留大块空白，长列表仍受视口约束。 */
  height: auto;
  max-height: min(1090px, calc(100vh - 32px));
  overflow: hidden;
}

.wk-hall-host-design-modal.wk-hall-host-design-expanded .semi-modal {
  width: min(868px, calc(100vw - 24px));
}

/* Figma 807:8475：添加时间段 434 × 259，r=10，阴影 0 4 10 rgba(0,0,0,0.05)。
   与「添加置顶卡」同属 434 宽 + 54 标题栏的小弹层规格，不沿用主持人列表的 r=20。 */
.wk-hall-host-design-modal.wk-hall-host-design-create-time .semi-modal {
  height: min(259px, calc(100vh - 32px));
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.wk-hall-host-design-modal.wk-hall-host-design-create-time .semi-modal-content {
  border-radius: 10px;
}

.wk-hall-host-design-modal.wk-hall-host-design-create-time .semi-modal-header {
  min-height: 54px;
  height: 54px;
  padding: 2px 20px 0;
}

.wk-hall-host-design-modal.wk-hall-host-design-create-time .semi-modal-title {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  line-height: 50px;
  justify-content: center;
  text-align: center;
}

.wk-hall-host-design-modal .semi-modal-content {
  padding: 0;
  border-radius: 20px;
  position: relative;
}

.wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal-content {
  min-height: 0;
  max-height: inherit;
  overflow: hidden;
}

.wk-hall-host-design-modal.wk-hall-host-design-create-time .semi-modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 时间列表使用 fixed 定位；不能被 Semi 默认的内容裁切。 */
.wk-hall-host-design-modal.wk-hall-host-design-create-time .semi-modal-content {
  overflow: visible;
}

.wk-hall-host-design-modal .semi-modal-header {
  min-height: 58px;
  margin: 0;
  padding: 20px 20px 10px;
  flex: none;
}

.wk-hall-host-design-modal-close {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}

.wk-hall-host-design-modal-close > img {
  width: 26px;
  height: 26px;
  display: block;
}

.wk-hall-host-design-modal-close:focus-visible {
  outline: 2px solid #9d26ff;
  outline-offset: 2px;
}

.wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal-header {
  display: none;
}

.wk-hall-host-design-modal .semi-modal-body {
  max-height: min(646px, calc(100vh - 48px));
  padding: 0 20px 20px;
  overflow-y: auto;
}

.wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal-body,
.wk-hall-host-design-modal.wk-hall-host-design-create-time .semi-modal-body {
  min-height: 0;
  max-height: none;
  flex: 1 1;
}

.wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal-body,
.wk-hall-host-design-modal.wk-hall-host-design-create-time .semi-modal-body {
  overflow: visible;
}

.wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal-content,
.wk-hall-host-design-modal.wk-hall-host-design-list .wk-hall-host-design-list {
  height: auto;
  max-height: inherit;
}

.wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal-body {
  max-height: inherit;
  padding: 0;
  /* 工具栏向标题区域上移 42px；body 不能裁掉该入口。
     长列表仍由 .wk-hall-host-design-rows / -scroll 自行滚动。 */
  overflow: hidden;
  overscroll-behavior: contain;
}

.wk-hall-host-design-modal button,
.wk-hall-host-picker-modal button {
  font-family: inherit;
}

.wk-hall-host-design-list {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wk-hall-host-design-list-toolbar {
  min-height: 28px;
  margin-top: -42px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  position: relative;
  z-index: 1;
}

.wk-hall-host-design-list-toolbar button {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9d26ff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.wk-hall-host-design-panels {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1;
}

.wk-hall-host-design-expanded .wk-hall-host-design-panels {
  display: flex;
  flex-direction: column;
}

.wk-hall-host-design-schedules,
.wk-hall-host-design-fixed {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wk-hall-host-design-rows {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  scrollbar-width: none;
}

.wk-hall-host-design-schedules > .wk-hall-host-design-rows {
  flex: 1 1;
}

.wk-hall-host-design-rows::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.wk-hall-host-design-scroll {
  min-width: 0;
  min-height: 0;
  flex: 1 1;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.wk-hall-host-design-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.wk-hall-host-design-scroll:focus-visible {
  outline: 2px solid #6b10ff;
  outline-offset: 2px;
}

.wk-hall-host-design-paired-rows {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-hall-host-design-row-pair,
.wk-hall-host-design-paired-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 40px;
  gap: 40px;
}

.wk-hall-host-design-fixed-placeholder {
  min-width: 0;
  height: 64px;
  min-height: 64px;
}

.wk-hall-host-design-paired-actions {
  flex: none;
}

.wk-hall-host-design-schedule-row,
.wk-hall-host-design-fixed-row {
  width: 100%;
  min-width: 0;
  height: 64px;
  min-height: 64px;
  border: 0;
  border-radius: 6px;
  background: #f7f7f7;
  color: #333333;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.wk-hall-host-design-schedule-trigger {
  min-width: 0;
  height: 100%;
  /* Figma 807:8474: 时间标签位于左上档位角标下方。 */
  padding: 7px 4px 7px 20px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  flex: 1 1;
  gap: 8px;
  color: #333333;
  cursor: pointer;
  text-align: left;
  position: relative;
}

.wk-hall-host-design-schedule-trigger[aria-disabled="true"] {
  cursor: default;
}

.wk-hall-host-design-schedule-row {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  background: #fafafa;
}

.wk-hall-host-design-schedule-type {
  /* Figma 807:8721 / supplied source SVGs. */
  width: 22px;
  height: 16px;
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
}

.wk-hall-host-design-schedule-type > img {
  width: 22px;
  height: 16px;
  display: block;
}

.wk-hall-host-design-schedule-row strong,
.wk-hall-host-design-fixed-row strong {
  min-width: 64px;
  flex: none;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
}

.wk-hall-host-design-fixed-row span {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  color: #333333;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-host-design-hosts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1;
  grid-gap: 8px;
  gap: 8px;
}

.wk-hall-host-design-host-slot {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wk-hall-host-design-host-slot.is-empty {
  justify-content: center;
}

.wk-hall-host-design-host-slot.is-empty > img {
  width: 42px;
  height: 42px;
  display: block;
}

.wk-hall-host-design-host-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f2e9ff;
  color: #6b10ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  position: relative;
  overflow: visible;
  font-size: 14px;
}

.wk-hall-host-design-host-avatar > img:not(.wk-hall-host-design-host-clear) {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-host-design-host-clear {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 1;
  display: block;
  background: transparent;
  cursor: pointer;
}

.wk-hall-host-design-host-clear > img {
  width: 14px;
  height: 14px;
  display: block;
}

.wk-hall-host-design-host-clear:disabled {
  cursor: default;
}

.wk-hall-host-design-host-name {
  min-width: 0;
  color: #333333;
  flex: 1 1;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-host-design-delete {
  width: 38px;
  height: 64px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}

.wk-hall-host-design-delete img {
  width: 22px;
  height: 22px;
  display: block;
}

.wk-hall-host-design-schedule-row:hover {
  background-color: #f0e6ff;
}

.wk-hall-host-design-schedule-trigger:hover:not([aria-disabled="true"]),
.wk-hall-host-design-schedule-row
  .wk-hall-host-design-delete:hover:not(:disabled),
.wk-hall-host-design-host-clear:hover:not(:disabled) {
  background-color: transparent;
}

.wk-hall-host-design-fixed-row:hover:not(:disabled) {
  background-color: #f0e6ff;
}

.wk-hall-host-design-schedule-trigger:focus-visible,
.wk-hall-host-design-schedule-row button:focus-visible,
.wk-hall-host-design-fixed-row:focus-visible,
.wk-hall-host-design-actions button:focus-visible,
.wk-hall-host-design-field button:focus-visible {
  outline: 2px solid #6b10ff;
  outline-offset: -2px;
}

.wk-hall-host-design-actions {
  width: 100%;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.wk-hall-host-design-actions button {
  min-width: 0;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #898989;
  border-radius: 8px;
  background: #ffffff;
  color: #898989;
  flex: 1 1;
  cursor: pointer;
  font-size: 14px;
}

.wk-hall-host-design-actions
  button:last-child:not(.wk-hall-host-design-add-time) {
  border-color: #898989;
  background: #898989;
  color: #ffffff;
}

/* Figma 807:8948：「添加时间段」用 50% 不透明度的 #9D26FF 描边。 */
.wk-hall-host-design-actions .wk-hall-host-design-add-time {
  width: 100%;
  min-height: 56px;
  height: 56px;
  padding: 0 16px;
  border-color: rgba(157, 38, 255, 0.5);
  border-radius: 8px;
  background: #ffffff;
  color: #9d26ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}

.wk-hall-host-design-add-time > img {
  width: 20px;
  height: 20px;
  display: block;
  filter: invert(23%) sepia(95%) saturate(3685%) hue-rotate(257deg)
    brightness(99%) contrast(104%);
}

.wk-hall-host-design-actions
  .wk-hall-host-design-add-time:hover:not(:disabled) {
  border-color: #9d26ff;
  background: rgba(157, 38, 255, 0.08);
}

.wk-hall-host-design-actions button:disabled,
.wk-hall-host-design-schedule-row button:disabled,
.wk-hall-host-design-fixed-row:disabled,
.wk-hall-host-design-field button:disabled {
  cursor: default;
  opacity: 0.48;
}

.wk-hall-host-design-schedule-row.is-empty
  .wk-hall-host-design-delete:disabled {
  opacity: 1;
}

.wk-hall-host-design-divider {
  height: 22px;
  margin: 6px -20px 0;
  border-bottom: 1px dashed #d9d9d9;
  position: relative;
  flex: none;
}

.wk-hall-host-design-divider::before,
.wk-hall-host-design-divider::after {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e9e9e9;
  content: "";
  position: absolute;
  bottom: -6px;
}

.wk-hall-host-design-divider::before {
  left: -6px;
}

.wk-hall-host-design-divider::after {
  right: -6px;
}

.wk-hall-host-design-fixed {
  padding-top: 0;
}

.wk-hall-host-design-fixed-row {
  padding: 10px 8px 10px 12px;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}

.wk-hall-host-design-fixed-row > img,
.wk-hall-host-design-value > img,
.wk-hall-host-design-select > img {
  width: 12px;
  height: 12px;
  display: block;
  flex: none;
}

.wk-hall-host-design-empty {
  min-height: 160px;
  color: #999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
}

.wk-hall-host-design-empty > img {
  width: 151px;
  height: 60px;
  display: block;
}

.wk-hall-host-design-empty > span {
  line-height: 20px;
}

/* Figma 807:8721 / 807:8952：添加档时项目的单栏与固定档双栏状态。 */
.wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal-content,
.wk-hall-host-design-modal.wk-hall-host-design-list .wk-hall-host-design-list {
  height: auto;
  max-height: inherit;
}

.wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal {
  display: flex;
  flex-direction: column;
}

.wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal-content,
.wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal-body {
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.wk-hall-host-design-list {
  width: 100%;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: stretch;
  background: #ffffff;
}

.wk-hall-host-design-schedule-pane {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.wk-hall-host-design-list.is-fixed-management-expanded
  .wk-hall-host-design-schedule-pane {
  width: 434px;
  flex: 0 1 434px;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.05);
}

.wk-hall-host-design-list-header {
  min-height: 36px;
  height: 36px;
  position: relative;
  display: flex;
  align-items: center;
}

.wk-hall-host-design-list-header h2 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
  pointer-events: none;
}

.wk-hall-host-design-fixed-toggle {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6b10ff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.wk-hall-host-design-list-header .wk-hall-host-design-modal-close,
.wk-hall-host-design-list-header .wk-hall-host-design-fixed-toggle {
  position: relative;
  z-index: 1;
}

.wk-hall-host-design-list-header .wk-hall-host-design-fixed-toggle {
  margin-left: auto;
}

.wk-hall-host-design-fixed-toggle:disabled {
  cursor: default;
  opacity: 0.48;
}

.wk-hall-host-design-schedules {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 19px;
}

.wk-hall-host-design-fixed-pane {
  box-sizing: border-box;
  width: 434px;
  min-width: 0;
  padding: 15px 21px 24px 22px;
  display: flex;
  flex: 1 1 434px;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  border-radius: 0 20px 20px 0;
}

.wk-hall-host-design-fixed-header {
  width: 100%;
  min-height: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.wk-hall-host-design-fixed-toggle.is-expanded {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #333333;
}

.wk-hall-host-design-fixed-toggle.is-expanded > img {
  width: 16px;
  height: 16px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-hall-host-design-fixed-scroll,
.wk-hall-host-design-rows {
  min-height: 0;
  flex: 1 1 auto;
  max-height: min(902px, calc(100vh - 178px));
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.wk-hall-host-design-fixed-scroll::-webkit-scrollbar,
.wk-hall-host-design-rows::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.wk-hall-host-design-fixed-scroll:focus-visible {
  outline: 2px solid #6b10ff;
  outline-offset: 2px;
}

.wk-hall-host-design-fixed-rows,
.wk-hall-host-design-rows {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 左侧的“添加时间段”操作区占 19px 间距 + 56px 按钮。
   右侧保留同等滚动尾部空间，两个列表便可共用同一个 scrollTop，
   且最后一行仍与左侧排档对齐。 */
.wk-hall-host-design-list.is-fixed-management-expanded
  .wk-hall-host-design-fixed-rows {
  padding-bottom: 75px;
}

/* Figma 807:8731：排档行是 #EFEFEF 描边 + 90% 不透明度的 #F9F9F9 行底。 */
.wk-hall-host-design-schedule-row,
.wk-hall-host-design-fixed-row {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 66px;
  min-height: 66px;
  border: 1px solid #efefef;
  border-radius: 10px;
  background: rgba(249, 249, 249, 0.9);
}

.wk-hall-host-design-schedule-row {
  padding: 11px 11px 11px 12px;
  position: relative;
  overflow: visible;
}

.wk-hall-host-design-schedule-type {
  z-index: 2;
  pointer-events: none;
}

.wk-hall-host-design-schedule-trigger {
  width: 320px;
  min-width: 320px;
  height: 42px;
  padding: 0;
  flex: none;
  gap: 15px;
}

/* Figma 807:8735 / 807:8741：档期时间与主持人名称都是 15/15 行高。 */
.wk-hall-host-design-schedule-row strong,
.wk-hall-host-design-fixed-row strong {
  min-width: 46px;
  color: #000000;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
}

.wk-hall-host-design-hosts {
  width: 259px;
  min-width: 259px;
  grid-template-columns: repeat(2, 122px);
  flex: none;
  gap: 15px;
}

.wk-hall-host-design-host-slot {
  width: 122px;
  gap: 8px;
}

.wk-hall-host-design-host-name {
  max-width: 72px;
  font-size: 15px;
  line-height: 15px;
}

.wk-hall-host-design-delete {
  width: 22px;
  height: 22px;
  margin-left: 29px;
  padding: 0;
}

.wk-hall-host-design-actions {
  padding-top: 0;
}

.wk-hall-host-design-actions .wk-hall-host-design-add-time {
  width: 100%;
  min-height: 56px;
  height: 56px;
  padding: 0 16px;
  border-color: rgba(157, 38, 255, 0.5);
  border-radius: 8px;
  background: #ffffff;
  color: #9d26ff;
}

.wk-hall-host-design-fixed-row {
  padding: 10px 12px;
  gap: 12px;
}

.wk-hall-host-design-fixed-row span {
  font-size: 15px;
}

.wk-hall-host-design-fixed-empty {
  min-height: 66px;
  border: 1px solid #efefef;
  border-radius: 10px;
  background: rgba(249, 249, 249, 0.9);
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

@media (max-width: 760px) {
  .wk-hall-host-design-list.is-fixed-management-expanded {
    flex-direction: column;
  }

  .wk-hall-host-design-list.is-fixed-management-expanded
    .wk-hall-host-design-schedule-pane,
  .wk-hall-host-design-fixed-pane {
    width: 100%;
    flex-basis: auto;
  }

  .wk-hall-host-design-list.is-fixed-management-expanded
    .wk-hall-host-design-schedule-pane {
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  }

  .wk-hall-host-design-schedule-trigger {
    width: calc(100% - 51px);
    min-width: 0;
  }

  .wk-hall-host-design-hosts {
    width: auto;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1;
    gap: 8px;
  }

  .wk-hall-host-design-host-slot {
    width: auto;
  }

  .wk-hall-host-design-delete {
    margin-left: 8px;
  }
}

.wk-hall-host-design-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-hall-host-design-time-step .wk-hall-host-design-actions {
  padding-top: 0;
}

.wk-hall-host-design-field {
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f6f6;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #333333;
}

.wk-hall-host-design-field > span {
  width: 76px;
  flex: none;
  color: #333333;
  font-size: 14px;
}

.wk-hall-host-design-field > strong {
  min-width: 0;
  flex: 1 1;
  color: #333333;
  font-size: 13px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.wk-hall-host-design-field > input {
  min-width: 0;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #ffffff;
  color: #333333;
  flex: 1 1;
  font-size: 14px;
}

.wk-hall-host-design-time-selectors {
  min-width: 0;
  width: 204px;
  display: flex;
  align-items: center;
  flex: none;
  gap: 4px;
  margin-left: auto;
}

.wk-hall-host-design-time-picker {
  width: 100px;
  min-width: 100px;
  flex: none;
  position: relative;
}

.wk-hall-host-design-time-select {
  width: 100px;
  min-width: 0;
  height: 34px;
  padding: 0 6px;
  border: 1px solid #e1cdfd;
  border-radius: 6px;
  background: #ffffff;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  font-size: 14px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.wk-hall-host-design-time-select > small {
  min-width: 4em;
  color: #999999;
  flex: 0 0 4em;
  font-size: 11px;
  font-weight: 400;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.wk-hall-host-design-time-select > strong {
  color: #333333;
  min-width: 2ch;
  flex: none;
  font-size: 14px;
  font-weight: 400;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.wk-hall-host-design-time-select > img {
  width: 8px;
  height: 8px;
  flex: none;
  display: block;
}

.wk-hall-host-design-time-select[aria-expanded="true"] {
  border-color: #9d26ff;
  box-shadow: 0 0 0 2px rgba(157, 38, 255, 0.12);
}

.wk-hall-host-design-time-select:disabled {
  cursor: default;
}

.wk-hall-host-design-time-menu {
  width: 100px;
  min-width: 100px;
  height: min(807px, calc(100vh - 32px));
  padding: 4px;
  border: 0;
  border-radius: 6px;
  overflow-y: auto;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  overscroll-behavior: contain;
  position: fixed;
  z-index: 1101;
  box-sizing: border-box;
  white-space: nowrap;
}

.wk-hall-host-design-time-menu button {
  width: 100%;
  min-height: 33px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  overflow: visible;
  white-space: nowrap;
  cursor: pointer;
}

.wk-hall-host-design-time-menu button:hover:not(:disabled) {
  background: rgba(157, 38, 255, 0.1);
  color: #6b10ff;
}

.wk-hall-host-design-time-menu button.selected,
.wk-hall-host-design-time-menu button.selected:hover {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-hall-host-design-select-wrap {
  min-width: 0;
  flex: 1 1;
  position: relative;
}

.wk-hall-host-design-select,
.wk-hall-host-design-value {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 0 0 8px;
  border: 0;
  background: transparent;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
}

.wk-hall-host-design-value > span {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-host-design-value small {
  margin-left: 8px;
  color: #999999;
  font-size: 12px;
}

.wk-hall-host-design-type-menu {
  width: 100px;
  min-height: 68px;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 3;
  overflow: hidden;
}

.wk-hall-host-design-type-menu button {
  width: 100%;
  min-height: 30px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #333333;
  cursor: pointer;
  font-size: 13px;
  text-align: center;
}

.wk-hall-host-design-type-menu button:hover:not(:disabled) {
  background: rgba(157, 38, 255, 0.1);
  color: #6b10ff;
}

.wk-hall-host-design-type-menu button.selected,
.wk-hall-host-design-type-menu button.selected:hover {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-hall-host-design-type-menu button:disabled {
  color: #999999;
  cursor: not-allowed;
}

.wk-hall-host-design-hint {
  margin: 0;
  padding: 2px 2px 0;
  color: #999999;
  font-size: 12px;
  line-height: 18px;
}

.wk-hall-host-design-occurrences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.wk-hall-host-design-occurrences button {
  min-height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
}

.wk-hall-host-design-occurrences button.selected {
  border-color: #6b10ff;
  color: #6b10ff;
}

.wk-hall-runtime-modal.wk-hall-host-picker-modal .semi-modal {
  width: min(307px, calc(100vw - 24px));
  max-height: min(525px, calc(100vh - 32px));
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--wk-font-family);
}

.wk-hall-runtime-modal.wk-hall-host-picker-modal .semi-modal-content {
  height: auto;
  max-height: inherit;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.wk-hall-runtime-modal.wk-hall-host-picker-modal .semi-modal-header {
  min-height: 58px;
  padding: 20px 20px 10px;
  flex: none;
}

.wk-hall-runtime-modal.wk-hall-host-picker-modal .semi-modal-title {
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.wk-hall-runtime-modal.wk-hall-host-picker-modal .semi-modal-body {
  min-height: 0;
  padding: 0;
  flex: 1 1;
  overflow: hidden;
}

.wk-hall-host-picker-modal .wk-hall-host-picker {
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.wk-hall-host-picker-modal .wk-hall-host-search {
  width: 267px;
  min-height: 46px;
  margin: 0 20px 10px;
  flex: none;
}

/* Figma 807:8660：选择主持人搜索框的放大镜是 14px。 */
.wk-hall-host-picker-modal .wk-hall-host-search > img {
  width: 14px;
  height: 14px;
}

.wk-hall-host-search > img,
.wk-hall-fixed-member-search > img {
  width: 16px;
  height: 16px;
  display: block;
  flex: none;
}

.wk-hall-host-picker-modal .wk-hall-host-member-list {
  min-height: 0;
  max-height: 347px;
  flex: 0 1 auto;
  overflow-y: auto;
}

.wk-hall-host-member-radio {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
}

.wk-hall-host-picker-modal .wk-hall-host-picker-actions {
  min-height: 64px;
  padding: 12px 20px;
  gap: 9px;
  flex: none;
}

.wk-hall-host-picker-modal .wk-hall-host-picker-actions button {
  min-width: 0;
  flex: 1 1;
}

.wk-hall-host-picker-modal .wk-hall-host-picker-actions button:last-child {
  border-color: #898989;
  background: #898989;
  color: #ffffff;
}

.wk-hall-fixed-member-check {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.wk-hall-fixed-member-check img {
  width: 18px;
  height: 18px;
  display: block;
}

.wk-hall-fixed-member-card.selected .wk-hall-fixed-member-check {
  border: 0;
  background: transparent;
}

.wk-hall-fixed-member-selected-row > button {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: transparent;
}

.wk-hall-fixed-member-selected-row > button img {
  width: 28px;
  height: 28px;
  display: block;
}

/* Figma 949:11341 / 949:11570 / 949:11117：主持人夜间主题。
   主题图标使用原始资产，所有覆盖限定于主持人弹窗，不改变亮色和共享成员选择器。 */
.wk-hall-host-design-modal .wk-hall-host-theme-dark,
.wk-hall-host-picker-modal .wk-hall-host-theme-dark {
  display: none;
}

body[theme-mode="dark"] .wk-hall-host-design-modal .wk-hall-host-theme-light,
body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-theme-light {
  display: none;
}

body[theme-mode="dark"] .wk-hall-host-design-modal .wk-hall-host-theme-dark,
body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-theme-dark {
  display: block;
}

body[theme-mode="dark"] .wk-hall-host-design-modal .semi-modal-content,
body[theme-mode="dark"] .wk-hall-host-design-list,
body[theme-mode="dark"] .wk-hall-host-design-fixed-pane {
  background: #1e1e1f;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-host-design-modal .semi-modal-content {
  border: 0;
}

body[theme-mode="dark"] .wk-hall-host-design-modal .semi-modal {
  font-family: var(--wk-font-family);
}

body[theme-mode="dark"] .wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal-content,
body[theme-mode="dark"] .wk-hall-host-design-modal.wk-hall-host-design-create-time .semi-modal-content {
  box-shadow: none;
}

body[theme-mode="dark"] .wk-hall-host-design-modal.wk-hall-host-design-list .semi-modal {
  box-shadow: inset 1px 0 0 rgba(223, 226, 230, 0.1), 0 0 20px rgba(0, 0, 0, 0.5);
}

/* 949:11566按钮底边距根底为34px；12个真实档期在宽屏自然构成1090px。 */
body[theme-mode="dark"] .wk-hall-host-design-schedule-pane {
  padding-bottom: 34px;
}

body[theme-mode="dark"] .wk-hall-host-design-list.is-fixed-management-expanded .wk-hall-host-design-schedule-pane {
  box-shadow: inset -0.6px 0 0 rgba(223, 226, 230, 0.05);
}

body[theme-mode="dark"] .wk-hall-host-design-list-header h2,
body[theme-mode="dark"] .wk-hall-host-design-modal .semi-modal-title,
body[theme-mode="dark"] .wk-hall-host-design-fixed-toggle.is-expanded {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-host-design-fixed-toggle {
  color: #9d26ff;
}

body[theme-mode="dark"] .wk-hall-host-design-schedule-row,
body[theme-mode="dark"] .wk-hall-host-design-fixed-row,
body[theme-mode="dark"] .wk-hall-host-design-field,
body[theme-mode="dark"] .wk-hall-host-design-fixed-empty {
  border: 0;
  border-color: transparent;
  background: #2f2f30;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-host-design-schedule-row {
  padding: 12px 11px 12px 12px;
}

body[theme-mode="dark"] .wk-hall-host-design-delete {
  background: transparent;
}

body[theme-mode="dark"] .wk-hall-host-design-add-slot-dark {
  width: 42px;
  height: 42px;
  background: rgba(223, 226, 230, 0.5);
  -webkit-mask-size: 42px 42px;
  mask-size: 42px 42px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

body[theme-mode="dark"] .wk-hall-host-design-schedule-row strong,
body[theme-mode="dark"] .wk-hall-host-design-schedule-row span,
body[theme-mode="dark"] .wk-hall-host-design-fixed-row strong,
body[theme-mode="dark"] .wk-hall-host-design-fixed-row span,
body[theme-mode="dark"] .wk-hall-host-design-field > span,
body[theme-mode="dark"] .wk-hall-host-design-field > strong,
body[theme-mode="dark"] .wk-hall-host-design-value,
body[theme-mode="dark"] .wk-hall-host-design-select,
body[theme-mode="dark"] .wk-hall-host-design-fixed h3 {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-host-design-fixed-row span {
  font-size: 14px;
}

body[theme-mode="dark"] .wk-hall-host-design-fixed-row > img,
body[theme-mode="dark"] .wk-hall-host-design-value > img,
body[theme-mode="dark"] .wk-hall-host-design-select > img {
  width: 13px;
  height: 13px;
}

body[theme-mode="dark"] .wk-hall-host-design-host-clear,
body[theme-mode="dark"] .wk-hall-host-design-host-clear > img {
  width: 12px;
  height: 12px;
}

body[theme-mode="dark"] .wk-hall-host-design-host-clear {
  top: 0;
  right: -1px;
}

body[theme-mode="dark"] .wk-hall-host-design-modal .wk-hall-host-design-actions .wk-hall-host-design-add-time {
  border-color: rgba(157, 38, 255, 0.5);
  background: transparent;
  color: #9d26ff;
}

body[theme-mode="dark"] .wk-hall-host-design-add-time > img {
  filter: none;
}

body[theme-mode="dark"] .wk-hall-host-design-modal .wk-hall-host-design-actions button:not(:last-child) {
  border-color: rgba(223, 226, 230, 0.3);
  border-radius: 6px;
  background: transparent;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-host-design-modal .wk-hall-host-design-actions button:last-child:not(.wk-hall-host-design-add-time) {
  border: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

body[theme-mode="dark"] .wk-hall-host-design-time-step .wk-hall-host-design-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 9px;
  gap: 9px;
}

body[theme-mode="dark"] .wk-hall-host-design-time-step .wk-hall-host-design-actions button {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
}

body[theme-mode="dark"] .wk-hall-host-design-modal.wk-hall-host-design-create-time .semi-modal-body {
  padding-right: 20.5px;
  padding-left: 20.5px;
}

body[theme-mode="dark"] .wk-hall-host-design-modal.wk-hall-host-design-create-time .semi-modal-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 50px;
}

body[theme-mode="dark"] .wk-hall-host-design-type {
  min-height: 55px;
}

body[theme-mode="dark"] .wk-hall-host-design-select-wrap {
  flex: 0 0 auto;
  margin-left: auto;
}

body[theme-mode="dark"] .wk-hall-host-design-select {
  width: auto;
  min-height: 15px;
  padding: 0;
  justify-content: flex-end;
  gap: 4px;
  font-weight: 400;
  line-height: 15px;
}

body[theme-mode="dark"] .wk-hall-host-design-field > span {
  font-size: 15px;
  line-height: 15px;
}

body[theme-mode="dark"] .wk-hall-host-design-time-selectors {
  width: 208px;
  gap: 8px;
}

body[theme-mode="dark"] .wk-hall-host-design-time-menu {
  background: #1e1e1f;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-host-design-type-menu {
  height: 78px;
  min-height: 78px;
  padding: 7px 0 1px;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.14));
  overflow: visible;
}

body[theme-mode="dark"] .wk-hall-host-type-surface {
  position: absolute;
  inset: 0;
  width: 100px;
  height: 78px;
  pointer-events: none;
  z-index: -1;
}

body[theme-mode="dark"] .wk-hall-host-design-type-menu button,
body[theme-mode="dark"] .wk-hall-host-design-time-menu button {
  min-height: 35px;
  height: 35px;
  flex: none;
  background: transparent;
  color: #dfe2e6;
  font-size: 14px;
  line-height: 15px;
}

body[theme-mode="dark"] .wk-hall-host-design-type-menu button {
  padding: 2px;
}

body[theme-mode="dark"] .wk-hall-host-design-type-menu button > span {
  height: 31px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[theme-mode="dark"] .wk-hall-host-design-type-menu button.selected,
body[theme-mode="dark"] .wk-hall-host-design-type-menu button.selected:hover {
  background: transparent;
}

body[theme-mode="dark"] .wk-hall-host-design-type-menu button.selected > span,
body[theme-mode="dark"] .wk-hall-host-design-time-menu button.selected,
body[theme-mode="dark"] .wk-hall-host-design-time-menu button.selected:hover {
  background: #9d26ff;
  color: #ffffff;
}

body[theme-mode="dark"] .wk-hall-host-design-type-menu button:hover:not(:disabled):not(.selected),
body[theme-mode="dark"] .wk-hall-host-design-time-menu button:hover:not(:disabled):not(.selected) {
  background: rgba(157, 38, 255, 0.1);
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-host-design-time-select {
  height: 30px;
  padding: 0 8px;
  border-color: rgba(223, 226, 230, 0.5);
  background: rgba(223, 226, 230, 0.1);
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-host-design-time-select > small {
  color: rgba(223, 226, 230, 0.5);
  font-size: 13px;
  line-height: 15px;
}

body[theme-mode="dark"] .wk-hall-host-design-time-select > strong {
  color: #dfe2e6;
  font-size: 15px;
  line-height: 15px;
}

body[theme-mode="dark"] .wk-hall-host-design-time-select > img {
  display: none;
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-host-picker-modal .semi-modal-content,
body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-picker,
body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-member-list button {
  background: #1e1e1f;
  color: #dfe2e6;
}

/* Semi默认content左右24px和1px边框会挤压307/437双栏及307单栏。 */
body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-host-picker-modal .semi-modal-content,
body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-content {
  box-sizing: border-box;
  padding: 0;
  border: 0;
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-host-picker-modal .semi-modal-body,
body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-body {
  padding: 0;
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-host-picker-modal .semi-modal-header,
body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-header {
  display: none;
}

body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-search {
  margin-top: 20px;
  background: #444444;
  border-color: #9d26ff;
}

body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-search input {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-member-list {
  max-height: 372px;
}

/* 949:11212：姓名在42px头像右侧10px处开始，不能继承button的居中排字。 */
body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-member-name {
  text-align: left;
}

body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-member-list button:hover:not(:disabled),
body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-member-list button.selected {
  background: #2f2f30;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-picker-actions {
  min-height: 77px;
  padding: 10px 20px 27px;
  border-top: 0;
}

body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-picker-actions button:not(:last-child),
body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-action-secondary {
  border-color: rgba(223, 226, 230, 0.3);
  background: transparent;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-host-picker-modal .wk-hall-host-picker-actions button:last-child,
body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-action-primary {
  border: 0;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

body[theme-mode="dark"] .wk-hall-runtime-modal.wk-hall-fixed-member-modal .semi-modal-content,
body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-selection {
  background: #1e1e1f;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-available,
body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-card {
  border-color: transparent;
  background: #2f2f30;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-search {
  background: #444444;
}

body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-card-selected,
body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-card:hover:not(:disabled) {
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-search input {
  background: transparent;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-name,
body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-selection-heading strong,
body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-group-title,
body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-mode {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-selection-heading {
  padding-top: 16px;
}

body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-actions {
  min-height: 72px;
  padding: 16px 20px;
  border-color: transparent;
}

body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-card:not(:disabled):not(.wk-hall-dual-member-card-selected) .wk-hall-dual-member-check img {
  content: url(../../static/media/checkbox-unchecked-dark.643e3dcbe8a376386b21.svg);
}

/* 949:11330：与26px暗色关闭资产同路径比例，18px显示；资产自身含30%灰色，不重复降低透明度。 */
body[theme-mode="dark"] .wk-hall-fixed-member-modal .wk-hall-dual-member-remove img {
  content: url(../../static/media/host-settings-close-dark.fcf7c450e2dfb2765671.svg);
  width: 18px;
  height: 18px;
}

@media (max-width: 720px) {
  .wk-hall-host-design-row-pair,
  .wk-hall-host-design-paired-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .wk-hall-host-design-row-pair:not(.is-configured),
  .wk-hall-host-design-row-pair > .wk-hall-host-design-schedule-row,
  .wk-hall-host-design-paired-actions > .wk-hall-host-design-actions {
    display: none;
  }
}

@media (max-width: 480px) {
  .wk-hall-host-design-modal .semi-modal-body {
    padding-right: 16px;
    padding-left: 16px;
  }

  .wk-hall-host-design-field {
    gap: 8px;
  }

  .wk-hall-host-design-field > span {
    width: 66px;
  }

  .wk-hall-host-design-time-selectors {
    width: calc(100% - 74px);
    min-width: 0;
  }

  .wk-hall-host-design-time-picker {
    width: calc((100% - 4px) / 2);
    min-width: 0;
    flex: 1 1;
  }

  .wk-hall-host-design-time-select {
    width: 100%;
    padding-right: 6px;
    padding-left: 7px;
  }

  .wk-hall-host-design-time-select > small {
    font-size: 11px;
  }
}

/* Figma 474:31194：通用双栏成员选择器（固定档与提醒麦上共享） */
.wk-hall-dual-member-editor {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 307px minmax(0, 1fr);
  font-family: var(--wk-font-family);
}

.wk-hall-dual-member-available {
  min-width: 0;
  min-height: 0;
  padding: 20px 20px 0;
  box-sizing: border-box;
  border-right: 1px solid #f5f5f5;
  display: flex;
  flex-direction: column;
}

.wk-hall-dual-member-search {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #9d26ff;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wk-hall-dual-member-search > img {
  width: 14px;
  height: 14px;
  display: block;
  flex: none;
}

.wk-hall-dual-member-search input {
  min-width: 0;
  height: 42px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  flex: 1 1;
  color: #333333;
  font-size: 14px;
}

.wk-hall-dual-member-search input::-moz-placeholder {
  color: #999999;
}

.wk-hall-dual-member-search input::placeholder {
  color: #999999;
}

/* Figma 807:9369 / 807:8561：左栏各行是 10px 间距的独立画板——
   多选行 36、分组标题 35，间距用外边距补齐，避免标题被内边距撑高。 */
.wk-hall-dual-member-mode {
  height: 36px;
  margin-top: 10px;
  padding: 10px 0;
  box-sizing: border-box;
  color: #666666;
  font-size: 14px;
  line-height: 16px;
}

.wk-hall-dual-member-group-title {
  height: 35px;
  margin-top: 10px;
  padding: 10px 0;
  box-sizing: border-box;
  color: #999999;
  font-size: 13px;
  line-height: 15px;
}

.wk-hall-dual-member-grid {
  min-height: 0;
  margin-top: 10px;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  overflow-y: auto;
}

/* 分组模式下字母组头随列表滚动，首个组头不再叠加 10px 让搜索框与它保持设计间距。 */
.wk-hall-dual-member-group {
  display: flex;
  flex-direction: column;
}

.wk-hall-dual-member-grid
  > .wk-hall-dual-member-group:first-child
  > .wk-hall-dual-member-group-title {
  margin-top: 0;
}

.wk-hall-dual-member-card {
  width: 100%;
  min-width: 0;
  min-height: 62px;
  height: 62px;
  padding: 10px 0;
  border: 0;
  background: #ffffff;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}

.wk-hall-dual-member-card:hover:not(:disabled),
.wk-hall-dual-member-card-selected {
  background: #f1f1f1;
}

.wk-hall-dual-member-card:disabled {
  cursor: default;
  opacity: 0.42;
}

.wk-hall-dual-member-check,
.wk-hall-dual-member-check img {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
}

.wk-hall-dual-member-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: #eee6ff;
  color: #6b10ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 14px;
  font-weight: 600;
}

.wk-hall-dual-member-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-dual-member-name {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  color: #333333;
  font-size: 14px;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-dual-member-status {
  min-height: 120px;
  padding: 18px;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.wk-hall-dual-member-status-error {
  color: #d14343;
}

.wk-hall-dual-member-reload {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #898989;
  border-radius: 8px;
  background: #ffffff;
  color: #666666;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.wk-hall-dual-member-reload img {
  width: 16px;
  height: 16px;
}

.wk-hall-dual-member-selection {
  min-width: 0;
  min-height: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.wk-hall-dual-member-selection-heading {
  min-height: 48px;
  padding: 0 24px 10px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wk-hall-dual-member-selection-heading strong {
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.wk-hall-dual-member-selection-heading span {
  color: #999999;
  font-size: 14px;
  line-height: 22px;
}

.wk-hall-dual-member-selected-list {
  min-height: 0;
  padding: 0 20px;
  flex: 1 1;
  overflow-y: auto;
}

.wk-hall-dual-member-selected-row {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #333333;
  font-size: 14px;
}

.wk-hall-dual-member-selected-row-unavailable {
  opacity: 0.62;
}

.wk-hall-dual-member-remove {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  cursor: pointer;
}

.wk-hall-dual-member-remove img {
  width: 18px;
  height: 18px;
  display: block;
}

.wk-hall-dual-member-placeholder {
  min-height: 120px;
  color: #999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-hall-dual-member-actions {
  min-height: 88px;
  padding: 20px 24px;
  border-top: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: none;
}

.wk-hall-dual-member-action {
  width: 129px;
  min-height: 40px;
  border: 1px solid #898989;
  border-radius: 8px;
  background: #ffffff;
  color: #898989;
  cursor: pointer;
  font-size: 14px;
}

.wk-hall-dual-member-action-primary {
  background: #898989;
  color: #ffffff;
}

.wk-hall-dual-member-action:disabled,
.wk-hall-dual-member-reload:disabled,
.wk-hall-dual-member-remove:disabled {
  cursor: default;
  opacity: 0.5;
}

.wk-hall-runtime-modal.wk-hall-reminder-modal .semi-modal {
  width: min(744px, calc(100vw - 24px));
  height: min(646px, calc(100vh - 32px));
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--wk-font-family);
}

.wk-hall-runtime-modal.wk-hall-reminder-modal .semi-modal-content {
  height: 100%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.wk-hall-runtime-modal.wk-hall-reminder-modal .semi-modal-header {
  display: none;
}

.wk-hall-runtime-modal.wk-hall-reminder-modal .semi-modal-body {
  min-height: 0;
  padding: 0;
  flex: 1 1;
  overflow: hidden;
}

/* Figma 807:9369：左栏 307 宽、内容内缩 20，搜索框实测 267。 */
.wk-hall-reminder-modal .wk-hall-dual-member-available {
  padding: 20px 20px 0;
}

.wk-hall-reminder-modal .wk-hall-dual-member-selection-heading {
  padding-top: 16px;
}

.wk-hall-reminder-modal .wk-hall-dual-member-actions {
  min-height: 72px;
  padding: 16px 20px;
  justify-content: space-between;
}

.wk-hall-runtime-modal.wk-hall-reminder-modal
  .wk-hall-dual-member-action-secondary {
  width: auto;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #333333;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
}

.wk-hall-runtime-modal.wk-hall-reminder-modal
  .wk-hall-dual-member-action-secondary:hover:not(:disabled),
.wk-hall-runtime-modal.wk-hall-reminder-modal
  .wk-hall-dual-member-action-secondary:focus-visible {
  background: transparent;
}

.wk-hall-runtime-modal.wk-hall-reminder-modal
  .wk-hall-dual-member-action-secondary:focus-visible {
  outline: 2px solid rgba(157, 38, 255, 0.4);
  outline-offset: 2px;
}

.wk-hall-runtime-modal.wk-hall-reminder-modal
  .wk-hall-dual-member-action-selection-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
}

body[theme-mode="dark"] .wk-hall-dual-member-selection,
body[theme-mode="dark"] .wk-hall-dual-member-card,
body[theme-mode="dark"] .wk-hall-dual-member-search input,
body[theme-mode="dark"] .wk-hall-dual-member-reload {
  background: var(--wk-night-canvas);
  color: rgba(255, 255, 255, 0.84);
}

body[theme-mode="dark"] .wk-hall-dual-member-card:hover:not(:disabled),
body[theme-mode="dark"] .wk-hall-dual-member-card-selected {
  background: rgba(107, 16, 255, 0.18);
}

body[theme-mode="dark"] .wk-hall-dual-member-available {
  border-right-color: #3b3e42;
}

/* Figma 474:31195 / 474:31210 / 586:13535：报备草稿 */
.wk-hall-runtime-modal.wk-hall-report-modal .semi-modal {
  width: min(433px, calc(100vw - 24px));
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--wk-font-family);
}

.wk-hall-runtime-modal.wk-hall-report-modal-records .semi-modal {
  width: min(560px, calc(100vw - 24px));
}

.wk-hall-runtime-modal.wk-hall-report-modal .semi-modal-content {
  padding: 0;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.wk-hall-runtime-modal.wk-hall-report-modal-entry .semi-modal-content {
  min-height: 181px;
  height: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.wk-hall-runtime-modal.wk-hall-report-modal-entry .semi-modal-body {
  max-height: none;
  overflow-y: visible;
}

.wk-hall-runtime-modal.wk-hall-report-modal-draft .semi-modal-content {
  min-height: 400px;
  height: auto;
}

.wk-hall-runtime-modal.wk-hall-report-modal-draft-compact .semi-modal-content {
  min-height: 0;
}

.wk-hall-runtime-modal.wk-hall-report-modal .semi-modal-header {
  min-height: 50px;
  margin: 0;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.wk-hall-runtime-modal.wk-hall-report-modal .semi-modal-title {
  color: #000000;
  font-size: 15px;
  font-weight: 500;
  line-height: 50px;
}

.wk-hall-runtime-modal.wk-hall-report-modal .semi-modal-body {
  position: relative;
  max-height: min(640px, calc(100vh - 96px));
  padding: 0 20px 20px;
}

.wk-hall-report-entry {
  position: relative;
}

.wk-hall-report-statistic-state {
  min-height: 111px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-hall-report-statistic-state .wk-hall-runtime-error {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.wk-hall-report-statistic-state .wk-hall-runtime-error button {
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid #8b5cf6;
  border-radius: 6px;
  background: #ffffff;
  color: #6d28d9;
  cursor: pointer;
}

.wk-hall-runtime-modal.wk-hall-report-modal .wk-hall-report-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 50px;
  max-height: 230px;
  margin: 0 0 20px;
  grid-gap: 10px;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
}

.wk-hall-runtime-modal.wk-hall-report-modal .wk-hall-report-options button {
  min-height: 50px;
  height: 50px;
  border: 1px solid #efefef;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  color: #333333;
  font-size: 14px;
  font-weight: 400;
}

.wk-hall-runtime-modal.wk-hall-report-modal
  .wk-hall-report-options.has-selection
  button:not(.selected) {
  border-color: transparent;
  background: rgba(237, 237, 237, 0.5);
  color: #999999;
}

.wk-hall-runtime-modal.wk-hall-report-modal
  .wk-hall-report-options
  button.selected {
  border-color: transparent;
  background: linear-gradient(rgba(157, 38, 255, 0.1), rgba(157, 38, 255, 0.1))
      padding-box,
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #9d26ff 0%, #6426ff 100%) border-box;
  color: #9d26ff;
}

.wk-hall-report-batch-entry {
  width: calc(100% - 2px);
  min-height: 40px;
  height: 40px;
  margin: 0 1px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

.wk-hall-report-batch-entry:hover:not(:disabled) {
  background: #4800bc;
}

.wk-hall-report-batch-entry:disabled {
  cursor: not-allowed;
  opacity: 0.2;
}

.wk-hall-report-view-link {
  position: absolute;
  z-index: 1;
  top: -39px;
  right: 30px;
  min-height: 28px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: #898989;
  cursor: pointer;
  font-size: 12px;
}

.wk-hall-report-view-link:disabled {
  cursor: default;
  opacity: 0.5;
}

.wk-hall-report-record-view .wk-hall-report-view-link {
  position: static;
  display: block;
  margin: 0 0 12px auto;
}

.wk-hall-report-draft-view,
.wk-hall-report-record-view {
  position: relative;
}

.wk-hall-report-draft-view {
  padding-top: 8px;
}

.wk-hall-report-member-field {
  min-height: 40px;
  margin-bottom: 14px;
  padding: 0 12px;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #666666;
  font-size: 13px;
}

.wk-hall-report-member-field > span {
  flex: none;
}

.wk-hall-report-member-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wk-hall-report-member-help {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.wk-hall-report-member-help-trigger {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: transparent;
  color: #999999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}

.wk-hall-report-member-help-trigger:hover,
.wk-hall-report-member-help-trigger:focus-visible {
  color: #8b5cf6;
}

.wk-hall-report-member-help-trigger:focus-visible {
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.wk-hall-report-member-help-trigger svg {
  width: 15px;
  height: 15px;
  display: block;
}

.wk-hall-report-member-help-tooltip {
  position: absolute;
  z-index: 3;
  top: calc(100% + 8px);
  left: -58px;
  width: min(300px, calc(100vw - 64px));
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(32, 33, 36, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  visibility: hidden;
  white-space: normal;
}

.wk-hall-report-member-help-tooltip::before {
  position: absolute;
  top: -5px;
  left: 62px;
  width: 10px;
  height: 10px;
  background: rgba(32, 33, 36, 0.96);
  content: "";
  transform: rotate(45deg);
}

.wk-hall-report-member-help-tooltip > strong,
.wk-hall-report-member-help-tooltip > span {
  position: relative;
  display: block;
}

.wk-hall-report-member-help-tooltip > strong {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
}

.wk-hall-report-member-help-tooltip > span + span {
  margin-top: 4px;
}

.wk-hall-report-member-help:hover .wk-hall-report-member-help-tooltip,
.wk-hall-report-member-help:focus-within .wk-hall-report-member-help-tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.wk-hall-report-member-field > strong {
  min-width: 0;
  flex: 1 1;
  overflow: hidden;
  color: #333333;
  font-weight: 400;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-report-member-field > button {
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1;
  gap: 8px;
  color: #333333;
  cursor: pointer;
}

.wk-hall-report-member-field > button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-report-member-field > button > img {
  width: 16px;
  height: 16px;
  display: block;
  flex: none;
}

.wk-hall-report-method-boundary {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wk-hall-report-draft {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wk-hall-report-text-field {
  position: relative;
  display: block;
}

.wk-hall-report-text-field textarea,
.wk-hall-report-text-field input {
  display: block;
  width: 100%;
  min-height: 40px;
  height: 40px;
  max-height: 80px;
  padding: 9px 12px;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  outline: none;
  background: #ffffff;
  color: #333333;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
}

.wk-hall-report-group-value {
  min-height: 40px;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  border: 1px solid #c8c8c8;
  border-radius: 6px;
  background: #ffffff;
  align-items: center;
}

.wk-hall-report-group-value input {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 38px;
  padding: 9px 0 9px 12px;
  border: 0;
  border-radius: 6px 0 0 6px;
  box-shadow: none;
  flex: 1 1;
}

.wk-hall-report-group-count {
  position: relative;
  width: 48px;
  height: 38px;
  display: block;
  flex: none;
}

.wk-hall-report-group-count-trigger {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  height: 38px;
  padding: 0 22px 0 6px;
  border: 0;
  border-radius: 0 6px 6px 0;
  outline: none;
  background: transparent;
  color: #000000;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.wk-hall-report-group-count-trigger:disabled {
  cursor: default;
}

.wk-hall-report-group-count img {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 12px;
  height: 12px;
  display: block;
  pointer-events: none;
  transform: translateY(-50%);
}

.wk-hall-report-text-field input {
  resize: none;
}

.wk-hall-report-text-field textarea:focus,
.wk-hall-report-text-field input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.13);
}

.wk-hall-report-group-value:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.13);
}

.wk-hall-report-group-value input:focus,
.wk-hall-report-group-count-trigger:focus {
  border-color: transparent;
  box-shadow: none;
}

.wk-hall-report-group-count-menu {
  width: 100px;
  height: 112px;
  padding-top: 7px;
  background: transparent;
  box-shadow: none;
  z-index: 1100 !important;
}

.wk-hall-report-group-count-menu::before {
  position: absolute;
  top: 0;
  right: 12px;
  width: 0;
  height: 0;
  border-right: 9px solid transparent;
  border-bottom: 7px solid #ffffff;
  border-left: 9px solid transparent;
  content: "";
}

.wk-hall-report-group-count-menu-list {
  height: 105px;
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
}

.wk-hall-report-group-count-menu-list button {
  width: 100%;
  min-height: 35px;
  height: 35px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 14px;
  line-height: 15px;
  cursor: pointer;
}

.wk-hall-report-group-count-menu-list button:hover:not(:disabled) {
  background: rgba(157, 38, 255, 0.1);
  color: #9d26ff;
}

.wk-hall-report-group-count-menu-list button[aria-selected="true"],
.wk-hall-report-group-count-menu-list button[aria-selected="true"]:hover {
  width: calc(100% - 4px);
  min-height: 31px;
  height: 31px;
  margin: 2px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #9d26ff;
  color: #ffffff;
}

.wk-hall-report-group-count-menu-list button:disabled {
  cursor: default;
  opacity: 0.42;
}

.wk-hall-chat-portal-menu[data-placement="top"].wk-hall-report-group-count-menu {
  padding-top: 0;
  padding-bottom: 7px;
}

.wk-hall-chat-portal-menu[data-placement="top"].wk-hall-report-group-count-menu::before {
  top: auto;
  bottom: 0;
  border-top: 7px solid #ffffff;
  border-bottom: 0;
}

.wk-hall-report-text-field textarea[aria-invalid="true"],
.wk-hall-report-text-field input[aria-invalid="true"] {
  border-color: #d14343;
}

.wk-hall-report-character-count {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wk-hall-report-field-error,
.wk-hall-report-field-unknown {
  font-size: 11px;
  line-height: 17px;
}

.wk-hall-report-field-error {
  color: #d14343;
}

.wk-hall-report-field-unknown {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wk-hall-report-file-input {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.wk-hall-report-image-picker {
  width: 100%;
  height: 200px;
  padding: 24px;
  border: 1px dashed #c3c3c3;
  border-radius: 6px;
  background: #f8f9fa;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}

.wk-hall-report-upload-placeholder {
  width: 62px;
  height: 64px;
  display: block;
  flex: none;
}

.wk-hall-report-upload-placeholder img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-hall-report-image-picker-dragging {
  border-color: #6b10ff;
  background: #f7f2ff;
}

.wk-hall-report-image-picker small {
  color: #999999;
  font-size: 13px;
}

.wk-hall-report-preview-grid {
  position: relative;
  min-height: 200px;
  height: 200px;
  padding: 12px;
  border: 1px dashed #c3c3c3;
  border-radius: 6px;
  background: #f8f9fa;
  display: grid;
  grid-template-columns: repeat(5, 66px);
  grid-auto-rows: 66px;
  align-content: start;
  grid-gap: 8px;
  gap: 8px;
  overflow-y: auto;
}

.wk-hall-report-preview-grid-dragging {
  border-color: #6b10ff;
  background: #f7f2ff;
}

.wk-hall-report-preview,
.wk-hall-report-preview-add {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 2px;
  overflow: hidden;
}

.wk-hall-report-preview > img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-report-preview > button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.56);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.wk-hall-report-preview:hover > button,
.wk-hall-report-preview > button:focus-visible {
  opacity: 1;
}

.wk-hall-report-preview > button img {
  width: 100%;
  height: 100%;
}

.wk-hall-report-preview-add {
  border: 0;
  background: #ffffff;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 15px;
}

.wk-hall-report-preview-add img {
  width: 14px;
  height: 14px;
}

.wk-hall-report-preview-add:disabled {
  cursor: default;
  opacity: 0.55;
}

.wk-hall-report-preview-reselect {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: #6b10ff;
  cursor: pointer;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.wk-hall-report-preview-grid:hover .wk-hall-report-preview-reselect,
.wk-hall-report-preview-reselect:focus-visible {
  opacity: 1;
}

.wk-hall-report-draft-submit {
  min-height: 40px;
  height: 40px;
  margin-top: 0;
  border-radius: 8px;
  background: #898989;
}

.wk-hall-runtime-warning {
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fff7e8;
  color: #9b5a00;
  font-size: 12px;
}

.wk-hall-report-config-recovery-actions {
  margin-top: 8px;
}

.wk-hall-report-config-recovery-actions button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}

.wk-hall-report-config-recovery-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.wk-hall-report-list .wk-hall-runtime-error {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

.wk-hall-report-list .wk-hall-runtime-error button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #8b5cf6;
  border-radius: 8px;
  background: #ffffff;
  color: #6d28d9;
  cursor: pointer;
}

body[theme-mode="dark"] .wk-hall-report-text-field textarea,
body[theme-mode="dark"] .wk-hall-report-text-field input,
body[theme-mode="dark"] .wk-hall-report-group-count-trigger,
body[theme-mode="dark"] .wk-hall-report-image-picker,
body[theme-mode="dark"] .wk-hall-report-preview-grid,
body[theme-mode="dark"] .wk-hall-report-preview-add,
body[theme-mode="dark"] .wk-hall-report-member-field {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-surface);
  color: rgba(255, 255, 255, 0.84);
}

body[theme-mode="dark"] .wk-hall-report-group-count-menu-list {
  background: var(--wk-night-surface);
}

body[theme-mode="dark"] .wk-hall-report-group-count-menu::before {
  border-bottom-color: #2d2f33;
}

body[theme-mode="dark"]
  .wk-hall-chat-portal-menu[data-placement="top"].wk-hall-report-group-count-menu::before {
  border-top-color: #2d2f33;
}

body[theme-mode="dark"] .wk-hall-report-group-count-menu-list button {
  color: rgba(255, 255, 255, 0.84);
}

body[theme-mode="dark"] .wk-hall-report-member-field > strong,
body[theme-mode="dark"] .wk-hall-report-member-field > button {
  color: rgba(255, 255, 255, 0.84);
}

body[theme-mode="dark"] .wk-hall-report-member-help-trigger {
  color: rgba(255, 255, 255, 0.56);
}

body[theme-mode="dark"] .wk-hall-report-member-help-trigger:hover,
body[theme-mode="dark"] .wk-hall-report-member-help-trigger:focus-visible {
  color: #b68cff;
}

.wk-hall-runtime-modal.wk-hall-report-member-modal .semi-modal {
  width: min(744px, calc(100vw - 24px));
  height: min(646px, calc(100vh - 32px));
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--wk-font-family);
}

.wk-hall-runtime-modal.wk-hall-report-member-modal .semi-modal-content {
  height: 100%;
  padding: 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}

.wk-hall-runtime-modal.wk-hall-report-member-modal .semi-modal-header {
  display: none;
}

.wk-hall-runtime-modal.wk-hall-report-member-modal .semi-modal-body {
  min-height: 0;
  padding: 20px 0 0;
  flex: 1 1;
  overflow: hidden;
}

body[theme-mode="dark"] .wk-hall-runtime-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f5c16c;
}

/* Figma 586:13825 / 586:14100：适用于标准双按钮操作区。 */
.wk-hall-runtime-actions button,
.wk-hall-host-picker-actions button,
.wk-hall-host-design-actions button,
.wk-hall-dual-member-action {
  min-height: 40px;
  border: 1px solid #9d26ff;
  border-radius: 8px;
  background: #ffffff;
  color: #9d26ff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

.wk-hall-runtime-actions button:hover:not(:disabled),
.wk-hall-host-picker-actions button:hover:not(:disabled),
.wk-hall-host-design-actions button:hover:not(:disabled),
.wk-hall-dual-member-action:hover:not(:disabled) {
  background: rgba(157, 38, 255, 0.1);
}

.wk-hall-runtime-actions button:last-child,
.wk-hall-host-picker-actions button:last-child,
.wk-hall-host-picker-modal .wk-hall-host-picker-actions button:last-child,
.wk-hall-host-design-actions
  button:last-child:not(.wk-hall-host-design-add-time),
.wk-hall-dual-member-action-primary {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-hall-runtime-actions button:last-child:hover:not(:disabled),
.wk-hall-host-picker-actions button:last-child:hover:not(:disabled),
.wk-hall-host-picker-modal
  .wk-hall-host-picker-actions
  button:last-child:hover:not(:disabled),
.wk-hall-host-design-actions
  button:last-child:not(.wk-hall-host-design-add-time):hover:not(:disabled),
.wk-hall-dual-member-action-primary:hover:not(:disabled) {
  background: #4800bc;
}

.wk-hall-runtime-actions button:disabled,
.wk-hall-host-picker-actions button:disabled,
.wk-hall-host-design-actions button:disabled,
.wk-hall-dual-member-action:disabled {
  cursor: not-allowed;
  opacity: 0.2;
}

/*
 * Figma 807:7643 / 586:13825：Hall 主操作按钮统一使用“默认 / 悬停 / 禁用”三态。
 * 确认弹层、我的任务与置顶卡等页面保留各自尺寸，只共享颜色和可用状态反馈。
 */
.wk-hall-confirm-actions button.primary,
.wk-hall-task-footer button.primary,
.wk-hall-runtime-primary,
.wk-hall-proxy-actions button.primary,
.wk-hall-fight-actions button.primary,
.wk-hall-task-value-actions button.primary,
.wk-hall-guild-submit,
.wk-hall-top-card-modal .wk-hall-top-card-list-actions button:last-child,
.wk-hall-statistic-editor-actions button:last-child {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-hall-confirm-actions button.primary:hover:not(:disabled),
.wk-hall-task-footer button.primary:hover:not(:disabled),
.wk-hall-runtime-primary:hover:not(:disabled),
.wk-hall-proxy-actions button.primary:hover:not(:disabled),
.wk-hall-fight-actions button.primary:hover:not(:disabled),
.wk-hall-task-value-actions button.primary:hover:not(:disabled),
.wk-hall-guild-submit:hover:not(:disabled),
.wk-hall-top-card-modal
  .wk-hall-top-card-list-actions
  button:last-child:hover:not(:disabled),
.wk-hall-statistic-editor-actions button:last-child:hover:not(:disabled) {
  background: #4800bc;
}

.wk-hall-confirm-actions button.primary:disabled,
.wk-hall-task-footer button.primary:disabled,
.wk-hall-runtime-primary:disabled,
.wk-hall-proxy-actions button.primary:disabled,
.wk-hall-fight-actions button.primary:disabled,
.wk-hall-task-value-actions button.primary:disabled,
.wk-hall-guild-submit:disabled,
.wk-hall-top-card-modal
  .wk-hall-top-card-list-actions
  button:last-child:disabled,
.wk-hall-statistic-editor-actions button:last-child:disabled {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  cursor: not-allowed;
  opacity: 0.2;
}

body[theme-mode="dark"] .wk-hall-task-value-actions button.primary {
  border-color: transparent;
}

.wk-hall-standard-action-modal
  .semi-modal-footer
  .semi-button.semi-button-primary,
.wk-hall-standard-action-modal
  .semi-modal-footer
  .semi-button.semi-button-danger {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-hall-standard-action-modal
  .semi-modal-footer
  .semi-button.semi-button-primary:hover:not(:disabled):not(
    .semi-button-primary-disabled
  ),
.wk-hall-standard-action-modal
  .semi-modal-footer
  .semi-button.semi-button-danger:hover:not(:disabled):not(
    .semi-button-danger-disabled
  ) {
  background: #4800bc;
}

.wk-hall-standard-action-modal
  .semi-modal-footer
  .semi-button.semi-button-primary:disabled,
.wk-hall-standard-action-modal
  .semi-modal-footer
  .semi-button.semi-button-danger:disabled,
.wk-hall-standard-action-modal
  .semi-modal-footer
  .semi-button.semi-button-primary-disabled,
.wk-hall-standard-action-modal
  .semi-modal-footer
  .semi-button.semi-button-danger-disabled {
  border-color: transparent;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  cursor: not-allowed;
  opacity: 0.2;
}

body[theme-mode="dark"] .wk-hall-runtime-actions button:not(:last-child),
body[theme-mode="dark"] .wk-hall-host-picker-actions button:not(:last-child),
body[theme-mode="dark"] .wk-hall-host-design-actions button:not(:last-child),
body[theme-mode="dark"] .wk-hall-host-design-add-time,
body[theme-mode="dark"] .wk-hall-dual-member-action-secondary {
  background: #24262b;
  color: #c58bff;
}

@media (max-width: 800px) {
  .wk-hall-runtime-modal.wk-hall-reminder-modal .semi-modal {
    height: min(720px, calc(100vh - 24px));
  }

  .wk-hall-runtime-modal.wk-hall-reminder-modal .semi-modal-body {
    overflow-y: auto;
  }

  .wk-hall-dual-member-editor {
    height: auto;
    display: block;
  }

  .wk-hall-dual-member-available {
    min-height: 330px;
    padding-top: 20px;
    border-right: 0;
    border-bottom: 1px solid #f5f5f5;
  }

  .wk-hall-dual-member-selection {
    min-height: 300px;
    padding-top: 18px;
  }
}

@media (max-width: 480px) {
  .wk-hall-report-preview-grid {
    grid-template-columns: repeat(3, 66px);
  }
}

/* Figma 807:10347：群聊设置中的置顶卡配置。 */
.wk-hall-top-card-section .wk-hall-inline-action-row,
.wk-hall-top-card-section .wk-hall-setting-row {
  min-height: 55px;
  padding-right: 12px;
  padding-left: 12px;
}

.wk-hall-top-card-section .wk-hall-setting-row:has(.wk-hall-number-field) {
  min-height: 56px;
}

.wk-hall-top-card-section .wk-hall-inline-action-row > span,
.wk-hall-top-card-section .wk-hall-setting-label > span:first-child {
  color: #333333;
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-top-card-section .wk-hall-inline-action-row > button {
  color: #9d26ff;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-top-card-section .wk-hall-number-control {
  width: 72px;
  height: 30px;
  min-width: 72px;
  min-height: 30px;
  max-height: 30px;
  border-radius: 6px;
}

.wk-hall-top-card-section .wk-hall-number-control .semi-input-number,
.wk-hall-top-card-section .wk-hall-number-control .semi-input-wrapper {
  height: 28px;
  min-height: 28px;
}

.wk-hall-top-card-section .wk-hall-config-item {
  min-height: 80px;
  padding: 15px 13px;
  box-sizing: border-box;
}

.wk-hall-top-card-section .wk-hall-config-item-main {
  grid-template-columns: minmax(0, 1fr) 42px 42px;
  gap: 8px;
}

.wk-hall-top-card-section .wk-hall-config-item-title,
.wk-hall-top-card-section .wk-hall-config-item-value {
  color: #333333;
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-top-card-section .wk-hall-config-item-meta {
  margin-top: 6px;
  color: #999999;
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-top-card-section .wk-hall-config-item-actions {
  gap: 10px;
}

.wk-hall-top-card-section .wk-hall-config-item-actions button,
.wk-hall-top-card-section .wk-hall-config-item-actions button img {
  width: 16px;
  height: 16px;
}

/*
 * 949:20409：置顶卡分组的行标题、卡名与权重在夜间落到 #DFE2E6。
 * 上面几条为对齐 807:10347 写死了 #333333，叠在 #2F2F30 卡面上几乎读不出来；
 * 说明行同时改走 muted 变量，跟随色板而不是继续写死 #999999。
 */
body[theme-mode="dark"]
  .wk-hall-top-card-section
  .wk-hall-inline-action-row
  > span,
body[theme-mode="dark"]
  .wk-hall-top-card-section
  .wk-hall-setting-label
  > span:first-child,
body[theme-mode="dark"] .wk-hall-top-card-section .wk-hall-config-item-title,
body[theme-mode="dark"] .wk-hall-top-card-section .wk-hall-config-item-value {
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-top-card-section .wk-hall-config-item-meta {
  color: var(--wk-night-ink-muted);
}

/* Figma 807:8108：置顶卡设置、新增、选择主播和确认弹层。 */
.wk-hall-top-card-modal {
  --wk-hall-top-card-panel-top: #eae1f1;
  --wk-hall-top-card-panel-middle: #d8daf1;
  --wk-hall-top-card-panel-blue: rgba(168, 197, 246, 0.42);
  --wk-hall-top-card-panel-highlight-alpha: 0;
}

.wk-hall-my-top-card-modal {
  --wk-hall-top-card-panel-top: #f0e3f1;
  --wk-hall-top-card-panel-middle: #d8daf1;
  --wk-hall-top-card-panel-blue: rgba(176, 204, 239, 0.38);
  --wk-hall-top-card-panel-highlight-alpha: 0.22;
}

.wk-hall-top-card-modal,
.wk-hall-my-top-card-modal {
  --wk-hall-top-card-panel-background: radial-gradient(
      ellipse at 100% 0%,
      rgba(249, 236, 244, var(--wk-hall-top-card-panel-highlight-alpha)) 0%,
      rgba(249, 236, 244, 0) 36%
    ),
    radial-gradient(
      ellipse at 0% 0%,
      rgba(211, 215, 241, 0.36) 0%,
      rgba(211, 215, 241, 0) 42%
    ),
    radial-gradient(
      ellipse at 0% 100%,
      rgba(242, 223, 232, 0.45) 0%,
      rgba(242, 223, 232, 0) 46%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      var(--wk-hall-top-card-panel-blue) 0%,
      rgba(176, 204, 239, 0) 58%
    ),
    linear-gradient(
      180deg,
      var(--wk-hall-top-card-panel-top) 0%,
      var(--wk-hall-top-card-panel-middle) 52%,
      #d8dbf2 100%
    );
}

.wk-hall-runtime-modal.wk-hall-top-card-modal .semi-modal {
  width: min(434px, calc(100vw - 24px));
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 0 20px rgba(0, 0, 0, 0.25);
}

.wk-hall-runtime-modal.wk-hall-top-card-modal.is-managing .semi-modal {
  max-height: min(440px, calc(100vh - 24px));
}

.wk-hall-runtime-modal.wk-hall-top-card-modal.is-adding .semi-modal {
  height: min(418px, calc(100vh - 24px));
}

.wk-hall-top-card-modal .semi-modal-content {
  position: relative;
  isolation: isolate;
  height: 100%;
  border-radius: 20px;
  overflow: clip;
  background: var(--wk-hall-top-card-panel-background);
}

.wk-hall-runtime-modal.wk-hall-top-card-modal.is-managing .semi-modal-content {
  height: auto;
  max-height: inherit;
}

.wk-hall-top-card-modal .semi-modal-header {
  position: relative;
  z-index: 1;
  height: 60px;
  padding: 24px 20px 0;
  box-sizing: border-box;
}

.wk-hall-top-card-modal .semi-modal-title {
  width: 100%;
  justify-content: center;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
}

.wk-hall-top-card-modal .semi-modal-close {
  z-index: 2;
  width: 26px;
  height: 26px;
  top: 24px;
  right: 20px;
  border-radius: 50%;
  background: #ffffff;
  color: #d8d8ea;
}

.wk-hall-top-card-modal .semi-modal-close:hover {
  background: #ffffff;
  color: #c9c9df;
}

.wk-hall-top-card-modal .semi-modal-body {
  position: relative;
  z-index: 1;
  min-height: 0;
  max-height: none;
  padding: 18px 20px 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.wk-hall-top-card-modal .wk-hall-runtime-list {
  max-height: 272px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.wk-hall-top-card-modal .wk-hall-runtime-list-item {
  min-height: 80px;
  height: 80px;
  margin: 0;
  padding: 10px 12px;
  grid-template-columns: 49px minmax(0, 1fr) 22px;
  gap: 8px;
  box-sizing: border-box;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.63) 0%,
    rgba(255, 255, 255, 0.81) 100%
  );
  box-shadow: inset 0 0 0 1px #ffffff;
}

.wk-hall-top-card-modal .wk-hall-runtime-card-avatar {
  width: 49px;
  height: 49px;
}

.wk-hall-top-card-modal .wk-hall-runtime-card-copy {
  gap: 9px;
}

.wk-hall-top-card-modal .wk-hall-runtime-list-item strong {
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
}

.wk-hall-top-card-modal .wk-hall-runtime-list-item small {
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-top-card-modal .wk-hall-runtime-list-item > button {
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  border-radius: 50%;
  background: #fe0000;
}

.wk-hall-top-card-modal .wk-hall-runtime-list-item > button::before {
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: #ffffff;
  content: "";
}

.wk-hall-top-card-modal .wk-hall-top-card-list-actions {
  height: 40px;
  min-height: 40px;
  margin-top: 22px;
  padding: 0;
  grid-template-columns: 154px 231px;
  gap: 9px;
}

.wk-hall-top-card-modal .wk-hall-top-card-list-actions button {
  height: 40px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-top-card-modal .wk-hall-top-card-list-actions button:first-child {
  justify-content: flex-start;
  padding: 0;
  color: #9d26ff;
}

.wk-hall-top-card-modal
  .wk-hall-top-card-list-actions
  button:first-child:hover:not(:disabled) {
  background: transparent;
  color: #9d26ff;
}

.wk-hall-top-card-modal .wk-hall-top-card-list-actions button:last-child {
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
}

.wk-hall-top-card-form {
  gap: 10px;
}

.wk-hall-top-card-form .wk-hall-top-card-form-row {
  width: 393px;
  height: 55px;
  min-height: 55px;
  margin: 0 0 0 0.5px;
  padding: 0 12px;
  box-sizing: border-box;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  background: #fafafa;
  box-shadow: inset 0 -0.6px 0 rgba(0, 0, 0, 0.05);
}

/* 蓝湖“选择信息后/编辑置顶卡”：数量行高 56px，描边只属于右侧数量输入框。 */
.wk-hall-top-card-form .wk-hall-top-card-form-row:nth-child(3) {
  height: 56px;
  min-height: 56px;
  border: 0;
}

.wk-hall-top-card-form .wk-hall-top-card-form-row > span {
  width: auto;
  color: #333333;
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-top-card-form .wk-hall-top-card-value-button,
.wk-hall-top-card-form .wk-hall-top-card-select-control,
.wk-hall-top-card-form .wk-hall-top-card-date-control {
  width: 236px;
  flex: 0 0 236px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.wk-hall-top-card-form .wk-hall-top-card-value-button,
.wk-hall-top-card-form .wk-hall-top-card-select-control {
  min-height: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.wk-hall-top-card-form .wk-hall-top-card-select-control {
  height: 55px;
  min-height: 55px;
}

.wk-hall-top-card-form .wk-hall-top-card-value-button > span,
.wk-hall-top-card-form .wk-hall-top-card-select-control > span {
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-top-card-form .wk-hall-top-card-value-button:not(.has-value) > span,
.wk-hall-top-card-form .wk-hall-top-card-select-control:not(.has-value) > span {
  color: #999999;
  font-size: 14px;
}

.wk-hall-top-card-form .wk-hall-top-card-form-chevron {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.wk-hall-top-card-form .wk-hall-top-card-count-input {
  width: 72px;
  height: 30px;
  min-height: 30px;
  padding: 0 14px;
  flex: 0 0 72px;
  box-sizing: border-box;
  border: 0.6px solid #d9d9d9;
  border-radius: 6px;
  outline: 0;
  background: #f5f5f5;
  color: #333333;
  font-family: var(--wk-font-family);
  font-size: 15px;
  font-weight: 400;
  line-height: 15px;
  text-align: center;
}

.wk-hall-top-card-form .wk-hall-top-card-count-input::-webkit-inner-spin-button,
.wk-hall-top-card-form
  .wk-hall-top-card-count-input::-webkit-outer-spin-button {
  margin: 0;
}

.wk-hall-top-card-form .wk-hall-top-card-date-picker {
  width: 219px;
  min-height: 15px;
  flex: 0 1 219px;
}

.wk-hall-top-card-form .wk-hall-top-card-date-picker .semi-datepicker,
.wk-hall-top-card-form .wk-hall-top-card-date-picker .semi-datepicker-input {
  width: 100%;
}

.wk-hall-top-card-form .wk-hall-top-card-date-picker .semi-input-wrapper {
  min-height: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.wk-hall-top-card-form .wk-hall-top-card-date-picker .semi-input {
  height: 15px;
  min-height: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #333333;
  font-family: var(--wk-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  text-align: right;
}

.wk-hall-top-card-form .wk-hall-top-card-date-picker .semi-input::-moz-placeholder {
  color: #999999;
  opacity: 1;
}

.wk-hall-top-card-form .wk-hall-top-card-date-picker .semi-input::placeholder {
  color: #999999;
  opacity: 1;
}

.wk-hall-top-card-form .wk-hall-top-card-date-picker .semi-input-suffix {
  display: none;
}

.wk-hall-top-card-form > .wk-hall-runtime-actions {
  width: 393px;
  height: 40px;
  min-height: 40px;
  margin-top: 13px;
  margin-left: 1px;
  padding: 0;
  grid-template-columns: 192px 192px;
  gap: 9px;
}

.wk-hall-top-card-form > .wk-hall-runtime-actions button {
  height: 40px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 22.4px;
}

.wk-hall-top-card-form > .wk-hall-runtime-actions button:first-child {
  border-color: rgba(51, 51, 51, 0.2);
  background: transparent;
  color: #333333;
  font-weight: 400;
}

.wk-hall-top-card-form
  > .wk-hall-runtime-actions
  button:first-child:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.45);
}

.wk-hall-top-card-form > .wk-hall-runtime-actions button:last-child {
  font-weight: 500;
}

/* Figma 807:8253：添加置顶卡的日期确认面板。 */
.wk-hall-top-card-date-popover.semi-datepicker {
  width: 293px;
  height: 373px;
  padding-bottom: 9px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  color: #171a1d;
  box-shadow: none;
  font-family: var(--wk-font-family);
}

.wk-hall-top-card-date-popover .semi-datepicker-container {
  display: block;
}

.wk-hall-top-card-date-popover .semi-datepicker-container > div {
  position: relative;
  width: 100%;
}

.wk-hall-top-card-date-popover .semi-datepicker-topSlot {
  height: 54px;
  border-bottom: 0;
}

.wk-hall-top-card-date-title {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 15px;
  font-weight: 500;
  line-height: 16px;
}

.wk-hall-top-card-date-popover .semi-datepicker-month-grid {
  width: 280px;
  height: 232px;
  margin: 3px 0 0 6.5px;
  overflow: hidden;
}

.wk-hall-top-card-date-popover .semi-datepicker-month-grid-left {
  width: 280px;
  height: 232px !important;
  overflow: hidden;
}

.wk-hall-top-card-date-popover .semi-datepicker-yam {
  position: static;
  height: 232px !important;
}

.wk-hall-top-card-date-popover .semi-datepicker-switch {
  display: none;
}

.wk-hall-top-card-date-popover .semi-datepicker-navigation {
  width: 280px;
  height: 36px;
  padding: 0 20px;
  box-sizing: border-box;
}

.wk-hall-top-card-date-popover .semi-datepicker-navigation > button:first-child,
.wk-hall-top-card-date-popover .semi-datepicker-navigation > button:last-child {
  display: none;
}

.wk-hall-top-card-date-popover .semi-datepicker-navigation-month {
  order: -1;
  min-width: 0;
  flex: 1 1;
  color: #171a1d;
  font-family: var(--wk-font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}

.wk-hall-top-card-date-popover .semi-datepicker-navigation-month .semi-button {
  min-height: 24px;
  padding: 0;
  color: inherit;
  font: inherit;
}

.wk-hall-top-card-date-popover .semi-datepicker-navigation > button {
  width: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0;
  color: #171a1d;
}

.wk-hall-top-card-date-popover
  .semi-datepicker-navigation
  > button:nth-of-type(2) {
  margin-right: 61px;
}

.wk-hall-top-card-date-popover .semi-datepicker-navigation > button svg {
  width: 16px;
  height: 16px;
}

.wk-hall-top-card-date-popover .semi-datepicker-month {
  width: 280px;
  height: 192px;
  margin-top: 4px;
  padding: 0;
  overflow: hidden;
}

.wk-hall-top-card-date-popover .semi-datepicker-weekday {
  border-bottom: 0;
  color: #171a1d;
  font-family: var(--wk-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.wk-hall-top-card-date-popover .semi-datepicker-weekday-item,
.wk-hall-top-card-date-popover .semi-datepicker-day {
  width: 40px;
  height: 32px;
  line-height: 32px;
}

.wk-hall-top-card-date-popover
  .semi-datepicker-weeks:has(.semi-datepicker-week:nth-child(6))
  .semi-datepicker-day {
  height: 26.666667px;
  line-height: 26.666667px;
}

.wk-hall-top-card-date-popover .semi-datepicker-day {
  color: #171a1d;
  font-family: var(--wk-font-family);
  font-size: 14px;
  font-weight: 400;
}

.wk-hall-top-card-date-popover .semi-datepicker-day-main {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.wk-hall-top-card-date-popover .semi-datepicker-day-main:hover:not(:active) {
  background: rgba(157, 38, 255, 0.08);
}

.wk-hall-top-card-date-popover
  .semi-datepicker-day-today
  .semi-datepicker-day-main {
  background: #f6f6f6;
  color: #9d26ff;
  font-weight: 400;
}

.wk-hall-top-card-date-popover
  .semi-datepicker-day-selected
  .semi-datepicker-day-main,
.wk-hall-top-card-date-popover
  .semi-datepicker-day-selected
  .semi-datepicker-day-main:hover {
  background: #9d26ff;
  color: #ffffff;
}

.wk-hall-top-card-date-popover .semi-datepicker-bottomSlot {
  position: absolute;
  top: 308px;
  bottom: auto;
  left: 20px;
  z-index: 3;
}

.wk-hall-top-card-date-today {
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9d26ff;
  cursor: pointer;
  font-family: var(--wk-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
}

.wk-hall-top-card-date-popover .semi-datepicker-footer {
  position: absolute;
  top: 292px;
  left: 0;
  z-index: 2;
  width: 293px;
  height: 72px;
  margin: 0;
  padding: 16px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: #ffffff;
}

.wk-hall-top-card-date-popover .semi-datepicker-footer .semi-button {
  width: 80px;
  min-width: 80px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  font-family: var(--wk-font-family);
  font-size: 16px;
  line-height: 22.4px;
}

.wk-hall-top-card-date-popover
  .semi-datepicker-footer
  .semi-button:first-of-type {
  margin-right: 12px;
  border: 1px solid rgba(51, 51, 51, 0.2);
  background: transparent;
  color: #333333;
  font-weight: 400;
}

.wk-hall-top-card-date-popover
  .semi-datepicker-footer
  .semi-button:last-of-type {
  margin: 0;
  border: 0;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-weight: 500;
}

.wk-hall-runtime-modal.wk-hall-top-card-owner-modal .semi-modal {
  width: min(744px, calc(100vw - 24px));
  height: min(646px, calc(100vh - 24px));
  border-radius: 10px;
  overflow: hidden;
}

.wk-hall-top-card-owner-modal .semi-modal-content {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 10px;
}

.wk-hall-top-card-owner-modal .semi-modal-header {
  display: none;
}

.wk-hall-top-card-owner-modal .semi-modal-body {
  height: 646px;
  min-height: 0;
  max-height: none;
  padding: 0;
  flex: 1 1;
}

.wk-hall-top-card-owner-selector {
  height: 646px;
  grid-template-columns: 307px 437px;
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-available {
  height: 646px;
  padding: 20px 20px 0;
  box-sizing: border-box;
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: #ffffff;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.05);
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-search {
  width: 267px;
  height: 46px;
  min-height: 46px;
  box-sizing: border-box;
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-group-title {
  width: 307px;
  height: 35px;
  margin: 10px -20px 0;
  padding: 10px 20px;
  box-sizing: border-box;
  line-height: 15px;
}

/* 分组标题已随列表扩到左栏全宽，组内标题不能再次负向偏移。 */
.wk-hall-top-card-owner-modal
  .wk-hall-dual-member-group
  .wk-hall-dual-member-group-title {
  margin-right: 0;
  margin-left: 0;
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-grid {
  width: 307px;
  margin: 10px -20px 0;
  overflow-x: hidden;
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-card {
  width: 307px;
  padding: 10px 20px;
  box-sizing: border-box;
}

.wk-hall-top-card-owner-modal
  .wk-hall-dual-member-group-title
  + .wk-hall-dual-member-card {
  margin-top: 10px;
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-selection {
  height: 646px;
  padding-bottom: 16px;
  box-sizing: border-box;
  border-radius: 0 10px 10px 0;
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.05);
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-selection-heading {
  height: 36px;
  min-height: 36px;
  margin-top: 16px;
  padding: 0 20px;
  box-sizing: border-box;
  align-items: center;
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-selection-heading strong {
  font-weight: 500;
  line-height: 36px;
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-selection-heading span {
  line-height: 15px;
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-selected-list {
  margin-top: 10px;
  overflow-x: hidden;
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-actions {
  height: 72px;
  min-height: 72px;
  padding: 16px 20px;
  box-sizing: border-box;
  border-top: 0;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.05);
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-action {
  width: 130px;
  font-size: 16px;
}

.wk-hall-top-card-owner-modal .wk-hall-dual-member-action-secondary {
  border-color: rgba(51, 51, 51, 0.2);
  color: #333333;
  font-weight: 400;
}

/*
 * 清空麦序 / 取消排档 / 重新排档三个确认弹窗对齐「移除任务」807:8045 与
 * 「置顶卡」1171:28116 的确认弹窗规格：渐变底、8px 圆角、16/24 标题、
 * 14/22 正文，盾牌用 807:8046 的原始导出替换早期的 clip-path 近似图形。
 */
.wk-hall-runtime-modal.wk-hall-queue-confirm-modal .semi-modal {
  height: 206px;
  border-radius: 8px;
}

.wk-hall-runtime-modal.wk-hall-queue-confirm-modal .semi-modal-content {
  border-radius: 8px;
  background: linear-gradient(180deg, #f8f0ff 0%, #ffffff 17.08%);
}

.wk-hall-runtime-modal.wk-hall-queue-confirm-modal .semi-modal-header {
  height: 109px;
  padding: 85px 16px 0;
}

.wk-hall-runtime-modal.wk-hall-queue-confirm-modal .semi-modal-header::before {
  content: none;
}

.wk-hall-runtime-modal.wk-hall-queue-confirm-modal .semi-modal-icon-wrapper {
  position: absolute;
  top: 27px;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
}

.wk-hall-queue-confirm-shield {
  width: 58px;
  height: 58px;
  display: block;
}

.wk-hall-runtime-modal.wk-hall-queue-confirm-modal .semi-modal-title {
  width: 228px;
  font-size: 16px;
  line-height: 24px;
}

/* Semi 在 Modal 带 icon 时给 body 补 36px 偏移。 */
.wk-hall-runtime-modal.wk-hall-queue-confirm-modal .semi-modal-body {
  margin-left: 0;
}

.wk-hall-queue-confirm-modal .wk-hall-confirm-dialog p {
  height: 49px;
  padding: 8px 16px 19px;
  color: rgba(23, 26, 29, 0.6);
  font-size: 14px;
  line-height: 22px;
}

.wk-hall-queue-confirm-modal .wk-hall-confirm-actions {
  height: 48px;
  padding: 0 16px 16px;
}

.wk-hall-queue-confirm-modal .wk-hall-confirm-actions button {
  height: 32px;
  min-height: 32px;
  border-radius: 6px;
}

.wk-hall-queue-confirm-modal .wk-hall-confirm-actions button:not(.primary) {
  border-color: #efefef;
}

/*
 * BD-12/D2-07（2026-08-31 拍板）：帮过任务二次确认沿用麦序确认弹窗规格，
 * 但正文要多一行「成员 · 来源 · 剩余」明细，因此弹窗与正文高度按内容自适应。
 */
.wk-hall-runtime-modal.wk-hall-pass-task-confirm-modal .semi-modal,
.wk-hall-pass-task-confirm-modal .wk-hall-confirm-dialog p {
  height: auto;
}

.wk-hall-pass-task-target {
  display: block;
  margin-top: 6px;
  color: rgba(23, 26, 29, 0.45);
  font-size: 12px;
  line-height: 18px;
  word-break: break-all;
}

body[theme-mode="dark"] .wk-hall-pass-task-target {
  color: rgba(255, 255, 255, 0.5);
}

/*
 * BD-09/D2-09（2026-08-31 拍板）：清空麦序与重开本轮排麦的确认框要先说明
 * 「X 人 / Y 条任务 / Z 张置顶卡」以及重开后的新报名时间，因此同样把弹窗与
 * 正文高度改为按内容自适应。
 */
.wk-hall-runtime-modal.wk-hall-void-confirm-modal .semi-modal,
.wk-hall-void-confirm-modal .wk-hall-confirm-dialog p {
  height: auto;
}

.wk-hall-void-impact {
  display: block;
  margin-top: 6px;
  color: rgba(23, 26, 29, 0.45);
  font-size: 12px;
  line-height: 18px;
}

body[theme-mode="dark"] .wk-hall-void-impact {
  color: rgba(255, 255, 255, 0.5);
}

/*
 * 置顶卡删除确认（Figma 1171:28162 删除置顶卡提示 / 1171:28117 删除全部置顶卡提示）：
 * 260×206 渐变底、8px 圆角、58px 盾牌与 108×32 按钮都与麦序确认弹窗同规格，
 * 只有正文按原型用 16/22.4 的 #333333。
 */
.wk-hall-top-card-confirm-modal.wk-hall-confirm-modal .semi-modal {
  height: 206px;
  border-radius: 8px;
}

.wk-hall-top-card-confirm-modal.wk-hall-confirm-modal .semi-modal-content {
  border-radius: 8px;
  background: linear-gradient(180deg, #f8f0ff 0%, #ffffff 17.08%);
}

.wk-hall-top-card-confirm-modal.wk-hall-confirm-modal .semi-modal-header {
  height: 109px;
  padding: 85px 16px 0;
}

.wk-hall-top-card-confirm-modal.wk-hall-confirm-modal .semi-modal-title {
  width: 228px;
  font-size: 16px;
  line-height: 24px;
}

.wk-hall-top-card-confirm-modal .wk-hall-confirm-dialog p {
  height: 49px;
  padding: 8px 16px 19px;
  color: #333333;
  font-size: 16px;
  line-height: 22.4px;
}

.wk-hall-top-card-confirm-modal .wk-hall-confirm-actions {
  height: 48px;
  padding: 0 16px 16px;
}

.wk-hall-top-card-confirm-modal .wk-hall-confirm-actions button {
  height: 32px;
  min-height: 32px;
  border-radius: 6px;
}

.wk-hall-top-card-confirm-modal .wk-hall-confirm-actions button:not(.primary) {
  border-color: #efefef;
}

/* Figma 807:8327：我的置顶卡。 */
.wk-hall-my-top-card-modal .semi-modal {
  width: min(332px, calc(100vw - 24px));
  max-height: min(701px, calc(100vh - 24px));
  border-radius: 10px;
  overflow: hidden;
}

.wk-hall-my-top-card-modal .semi-modal-content {
  position: relative;
  isolation: isolate;
  height: auto;
  border-radius: 10px;
  background: var(--wk-hall-top-card-panel-background);
}

.wk-hall-my-top-card-modal .semi-modal-header {
  position: relative;
  z-index: 1;
  height: 36px;
  margin: 23px 20px 0;
  padding: 0;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
}

.wk-hall-my-top-card-modal .semi-modal-title {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
}

.wk-hall-my-top-card-modal .semi-modal-close {
  position: absolute;
  top: 5px;
  right: 0;
  z-index: 1;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
}

.wk-hall-my-top-card-modal-close-icon {
  display: block;
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1);
}

.wk-hall-my-top-card-modal .semi-modal-body {
  position: relative;
  z-index: 1;
  max-height: none;
  padding: 16px 20px 23px;
  overflow: hidden;
}

.wk-hall-my-top-card-list {
  max-height: min(603px, calc(100vh - 122px));
  gap: 16px;
}

.wk-hall-my-top-card {
  width: 292px;
  min-height: 106px;
  height: 106px;
  padding: 18px 12px;
  border-radius: 14px;
  box-shadow: none;
}

.wk-hall-my-top-card::before {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.wk-hall-my-top-card-copy {
  max-width: 159px;
  flex: 0 0 159px;
  justify-content: center;
}

.wk-hall-my-top-card-heading {
  max-width: 159px;
  gap: 9px;
}

.wk-hall-my-top-card-heading strong {
  max-width: 130px;
  font-family: "Alimama ShuHeiTi", var(--wk-font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 15px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wk-hall-my-top-card-heading b {
  font-size: 13px;
  font-weight: 400;
  line-height: 13px;
}

.wk-hall-my-top-card-divider {
  width: 1px;
  height: 10px;
  flex: 0 0 1px;
  background: currentColor;
}

.wk-hall-my-top-card-copy small {
  width: 159px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 12px;
  text-align: right;
}

.wk-hall-my-top-card-art-slot {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 141px;
  height: 106px;
  background-position: center;
  background-repeat: no-repeat;
}

.wk-hall-my-top-card[data-variant="navy"] {
  --wk-top-card-ink: #ffffff;
  --wk-top-card-muted: rgba(255, 255, 255, 0.6);
  background: #101326;
}

.wk-hall-my-top-card[data-variant="navy"]::before {
  top: -33px;
  left: -20px;
  width: 326.4px;
  height: 204px;
  background-image: url(../../static/media/navy-background.0a4c05fda2943440ba0d.png);
  filter: blur(10px);
}

.wk-hall-my-top-card[data-variant="navy"] .wk-hall-my-top-card-heading strong {
  background-image: linear-gradient(
    135deg,
    #f8edca 0%,
    #fffdf4 19.23%,
    #fbfce5 29.01%,
    #fbd6a5 43.04%,
    #fbfce5 100%
  );
}

.wk-hall-my-top-card[data-variant="navy"] .wk-hall-my-top-card-art-slot {
  background-image: url(../../static/media/navy-crown.de6efd38c7b1337285c5.png);
  background-position: right 11px bottom;
  background-size: 105px 73px;
}

.wk-hall-my-top-card[data-variant="violet"] {
  --wk-top-card-ink: #31137d;
  --wk-top-card-muted: rgba(49, 19, 125, 0.6);
  background: #ffffff;
}

.wk-hall-my-top-card[data-variant="violet"]::before {
  top: -22px;
  left: -28px;
  width: 347.28px;
  height: 161px;
  background-image: url(../../static/media/violet-background.11608fdaad5dfccd6179.png);
  filter: blur(40px);
  opacity: 0.3;
}

.wk-hall-my-top-card[data-variant="violet"]
  .wk-hall-my-top-card-heading
  strong {
  background-image: linear-gradient(135deg, #5f61bd 0%, #2f107a 100%);
}

.wk-hall-my-top-card[data-variant="violet"] .wk-hall-my-top-card-art-slot {
  background-image: url(../../static/media/violet-crown.a37012564d4318cbab9a.png);
  background-position: right 10px bottom;
  background-size: 105px 73px;
}

.wk-hall-my-top-card[data-variant="pink"] {
  --wk-top-card-ink: #ff3c61;
  --wk-top-card-muted: rgba(255, 83, 115, 0.6);
  background: #ffffff;
}

.wk-hall-my-top-card[data-variant="pink"]::before {
  top: -40px;
  left: -28px;
  width: 347px;
  height: 195px;
  background-image: url(../../static/media/pink-background.687447dad271912b9acf.png);
  filter: blur(40px);
}

.wk-hall-my-top-card[data-variant="pink"] .wk-hall-my-top-card-heading strong {
  background-image: linear-gradient(135deg, #ffa486 0%, #ff2a5b 100%);
}

.wk-hall-my-top-card[data-variant="pink"] .wk-hall-my-top-card-art-slot {
  background-image: url(../../static/media/pink-crown.c5314663d2707126abc0.png);
  background-position: right 9px bottom;
  background-size: 105px 80px;
}

.wk-hall-my-top-card[data-variant="silver"] {
  --wk-top-card-ink: #333333;
  --wk-top-card-muted: rgba(51, 51, 51, 0.6);
  background: linear-gradient(133deg, #f6faff 0%, #bfc3cb 100%);
}

.wk-hall-my-top-card[data-variant="silver"]
  .wk-hall-my-top-card-heading
  strong {
  background-image: linear-gradient(135deg, #5b5b5b 0%, #333333 100%);
}

.wk-hall-my-top-card[data-variant="silver"] .wk-hall-my-top-card-art-slot {
  background-image: url(../../static/media/silver-crown.038ca282fec13667080b.png);
  background-position: right 9px bottom;
  background-size: 105px 72px;
}

.wk-hall-my-top-card[data-variant="gold"] {
  --wk-top-card-ink: #ea5507;
  --wk-top-card-muted: rgba(234, 119, 6, 0.6);
  background: #ffffff;
}

.wk-hall-my-top-card[data-variant="gold"]::before {
  top: -16px;
  left: -15px;
  width: 321px;
  height: 149px;
  background-image: url(../../static/media/gold-background.55c00c0bfb50b023f037.png);
  filter: blur(40px);
  opacity: 0.6;
}

.wk-hall-my-top-card[data-variant="gold"] .wk-hall-my-top-card-heading strong {
  background-image: linear-gradient(135deg, #e89b28 0%, #eb4600 100%);
}

.wk-hall-my-top-card[data-variant="gold"] .wk-hall-my-top-card-art-slot {
  background-image: url(../../static/media/gold-crown.e3dcbdb6a3c5a2ddbe14.png),
    url(../../static/media/gold-glow.dd090121a504982e49cc.png);
  background-position: right 8px bottom, right bottom;
  background-size: 105px 80px, 141px 106px;
}

/* Figma 1463:37497：周榜蓝色卡面，394×106 / 14px。 */
.wk-hall-my-top-card[data-variant="weekly"] {
  --wk-top-card-ink: #022b97;
  --wk-top-card-muted: rgba(2, 43, 151, 0.8);
  background: #ffffff;
}

.wk-hall-my-top-card[data-variant="weekly"]::before {
  top: -65px;
  left: -33px;
  width: 541px;
  height: 251px;
  background-image: url(../../static/media/weekly-background.f02c93d9b536ffe392c6.png);
  background-size: cover;
  opacity: 0.5;
}

.wk-hall-my-top-card[data-variant="weekly"]
  .wk-hall-my-top-card-heading
  strong {
  background-image: linear-gradient(135deg, #002892 0%, #2d64fd 100%);
}

.wk-hall-my-top-card[data-variant="weekly"] .wk-hall-my-top-card-art-slot {
  background-image: url(../../static/media/weekly-crown.a00ac9ac09e4895c228f.png);
  background-position: 40px 12px;
  background-size: 99px 84px;
}

/* Figma 1463:37516：活跃绿色卡面，394×106 / 14px。 */
.wk-hall-my-top-card[data-variant="active"] {
  --wk-top-card-ink: #026b54;
  --wk-top-card-muted: rgba(25, 124, 104, 0.6);
  background: #ffffff;
}

.wk-hall-my-top-card[data-variant="active"]::before {
  top: -69px;
  left: -56px;
  width: 504px;
  height: 234px;
  background-image: url(../../static/media/active-background.894d8a45fbcd3b104c0a.png);
  background-size: cover;
  opacity: 0.8;
}

.wk-hall-my-top-card[data-variant="active"]
  .wk-hall-my-top-card-heading
  strong {
  background-image: linear-gradient(135deg, #00664f 0%, #00b59a 100%);
}

.wk-hall-my-top-card[data-variant="active"] .wk-hall-my-top-card-art-slot {
  background-image: url(../../static/media/active-crown.9fe4145ced7536dfdd3c.png);
  background-position: 37px 10px;
  background-size: 99px 83px;
}

/* Figma 1171:28116：置顶卡设置、我的置顶卡、管理态和类型选择器。 */
.wk-hall-runtime-modal.wk-hall-top-card-modal .semi-modal,
.wk-hall-runtime-modal.wk-hall-my-top-card-modal .semi-modal,
.wk-hall-runtime-modal.wk-hall-top-card-type-picker-modal .semi-modal {
  width: min(434px, calc(100vw - 24px));
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}

.wk-hall-runtime-modal.wk-hall-top-card-modal.is-settings .semi-modal,
.wk-hall-runtime-modal.wk-hall-my-top-card-modal .semi-modal {
  box-shadow: none;
}

.wk-hall-runtime-modal.wk-hall-top-card-modal.is-settings .semi-modal-content,
.wk-hall-runtime-modal.wk-hall-my-top-card-modal .semi-modal-content {
  box-shadow: none;
}

.wk-hall-runtime-modal.wk-hall-top-card-modal.is-settings .semi-modal {
  height: min(891px, calc(100vh - 24px));
  max-height: min(891px, calc(100vh - 24px));
}

.wk-hall-runtime-modal.wk-hall-top-card-modal.is-adding .semi-modal {
  width: min(434px, calc(100vw - 24px));
  height: min(397px, calc(100vh - 24px));
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.wk-hall-runtime-modal.wk-hall-my-top-card-modal .semi-modal {
  height: min(742px, calc(100vh - 24px));
  max-height: min(742px, calc(100vh - 24px));
}

.wk-hall-runtime-modal.wk-hall-top-card-type-picker-modal .semi-modal {
  height: min(725px, calc(100vh - 24px));
}

.wk-hall-top-card-modal .semi-modal-content,
.wk-hall-my-top-card-modal .semi-modal-content,
.wk-hall-top-card-type-picker-modal .semi-modal-content {
  height: 100%;
  padding: 0;
  border-radius: 20px;
  background: #ffffff;
}

.wk-hall-top-card-type-picker-modal .semi-modal-content {
  border: 0;
}

.wk-hall-top-card-modal.is-adding .semi-modal-content {
  border: 0;
  border-radius: 10px;
  background: #ffffff;
}

.wk-hall-top-card-modal .semi-modal-header,
.wk-hall-my-top-card-modal .semi-modal-header,
.wk-hall-top-card-type-picker-modal .semi-modal-header {
  position: relative;
  z-index: 2;
  height: 60px;
  margin: 0;
  padding: 24px 20px 0;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

.wk-hall-top-card-modal .semi-modal-title,
.wk-hall-my-top-card-modal .semi-modal-title,
.wk-hall-top-card-type-picker-modal .semi-modal-title {
  position: static;
  width: 100%;
  color: #000000;
  font-size: 16px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
  justify-content: center;
}

.wk-hall-top-card-modal .semi-modal-close,
.wk-hall-my-top-card-modal .semi-modal-close {
  position: absolute;
  top: 29px;
  right: auto;
  left: 22px;
  z-index: 3;
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: #eeeeee;
}

.wk-hall-top-card-modal.is-selection-mode .semi-modal-close {
  left: 20px;
}

.wk-hall-top-card-modal-close-icon,
.wk-hall-my-top-card-modal-close-icon {
  display: block;
  width: 26px;
  height: 26px;
  filter: none;
}

.wk-hall-top-card-modal .semi-modal-body,
.wk-hall-my-top-card-modal .semi-modal-body,
.wk-hall-top-card-type-picker-modal .semi-modal-body {
  position: relative;
  z-index: 1;
  height: calc(100% - 60px);
  max-height: none;
  padding: 18px 20px 24px;
  box-sizing: border-box;
  overflow: hidden;
}

.wk-hall-top-card-modal.is-adding .semi-modal-header {
  height: 54px;
  padding: 2px 20px 0;
}

.wk-hall-top-card-modal.is-adding .semi-modal-title {
  font-size: 15px;
  line-height: 50px;
}

.wk-hall-top-card-modal.is-adding .semi-modal-body {
  height: calc(100% - 54px);
  padding: 0 20px 29px;
}

.wk-hall-top-card-modal.is-settings .semi-modal-body {
  z-index: 3;
  padding: 19px 20px 29px;
  overflow: visible;
}

.wk-hall-top-card-settings-shell,
.wk-hall-my-top-card-shell {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wk-hall-top-card-manage-toggle {
  position: absolute;
  top: -36px;
  right: 20px;
  z-index: 4;
  min-width: 71px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #9d26ff;
  font-size: 14px;
  font-weight: 400;
  line-height: 36px;
  text-align: right;
  cursor: pointer;
}

/* 1171:28354 / 1171:28803：未进入管理态是品牌紫的「管理」，进入后变成中性色的「退出管理」。 */
.wk-hall-top-card-modal.is-selection-mode .wk-hall-top-card-manage-toggle {
  right: 22px;
  color: #333333;
}

/* 夜间的置顶卡弹层底色是 #30283F→#292432，中性色 #333333 会糊在背景里。 */
body[theme-mode="dark"]
  .wk-hall-top-card-modal.is-selection-mode
  .wk-hall-top-card-manage-toggle {
  color: rgba(255, 255, 255, 0.88);
}

.wk-hall-top-card-filters {
  display: grid;
  width: 394px;
  height: 46px;
  flex: 0 0 46px;
  grid-template-columns: minmax(0, 282px) 102px;
  grid-gap: 10px;
  gap: 10px;
}

.wk-hall-top-card-search {
  display: flex;
  height: 46px;
  padding: 0 9px;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  border: 1px solid #9d26ff;
  border-radius: 8px;
  background: #ffffff;
}

.wk-hall-top-card-search:focus-within {
  border-color: #9d26ff;
}

.wk-hall-top-card-search img {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  opacity: 1;
}

.wk-hall-top-card-search input {
  min-width: 0;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #333333;
  font-size: 14px;
  line-height: 20px;
}

.wk-hall-top-card-search input::-moz-placeholder {
  color: #999999;
}

.wk-hall-top-card-search input::placeholder {
  color: #999999;
}

.wk-hall-top-card-type-filter {
  width: 102px;
  height: 46px;
  padding: 0 10px 0 12px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #efefef;
  border-radius: 10px;
  background: rgba(249, 249, 249, 0.9);
  color: #333333;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.wk-hall-top-card-type-filter.is-wide {
  width: 394px;
  flex: 0 0 46px;
  padding-right: 11px;
}

.wk-hall-top-card-type-filter > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-top-card-type-filter > img {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  transform: none;
}

.wk-hall-top-card-type-filter[aria-expanded="true"] > img {
  transform: rotate(180deg);
}

.wk-hall-top-card-filter-menu {
  padding: 8px 0;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.wk-hall-top-card-filter-menu [role="option"] {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border: 0;
  background: #ffffff;
  color: #333333;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.wk-hall-top-card-filter-menu [role="option"]:hover,
.wk-hall-top-card-filter-menu [role="option"][aria-selected="true"] {
  background: #f6ecff;
  color: #9d26ff;
}

.wk-hall-top-card-owner-list {
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin-top: 19px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wk-hall-top-card-owner-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.wk-hall-top-card-owner-group {
  width: 394px;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 19px;
}

.wk-hall-top-card-owner-header {
  position: relative;
  width: 394px;
  height: 54px;
  min-height: 54px;
  padding: 6px 12px;
  display: grid;
  box-sizing: border-box;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  color: #333333;
  text-align: left;
  cursor: pointer;
}

.wk-hall-top-card-owner-header::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: #9d26ff;
  content: "";
}

.wk-hall-top-card-owner-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-hall-top-card-owner-header strong {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-top-card-owner-chevron {
  width: 18px;
  height: 18px;
  justify-self: end;
  transform: none;
  filter: none;
}

.wk-hall-top-card-owner-chevron[data-expanded="true"] {
  transform: none;
}

.wk-hall-top-card-owner-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-hall-top-card-settings-row {
  width: 394px;
  min-height: 106px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wk-hall-top-card-settings-row.is-selectable .wk-hall-top-card-face {
  width: 394px;
}

.wk-hall-top-card-modal.is-selection-mode .semi-modal-body {
  padding-bottom: 30px;
}

.wk-hall-top-card-modal.is-selection-mode .wk-hall-top-card-owner-list {
  width: 414px;
  overflow-x: hidden;
}

.wk-hall-top-card-modal.is-selection-mode .wk-hall-top-card-owner-group {
  gap: 2px;
}

.wk-hall-top-card-modal.is-selection-mode .wk-hall-top-card-owner-cards {
  width: 424px;
}

.wk-hall-top-card-modal.is-selection-mode .wk-hall-top-card-settings-row {
  width: 424px;
  gap: 12px;
}

.wk-hall-top-card-group-selector {
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.wk-hall-top-card-group-selector img,
.wk-hall-top-card-select-all img {
  display: block;
  width: 18px;
  height: 18px;
}

.wk-hall-top-card-face,
.wk-hall-my-top-card-modal .wk-hall-my-top-card,
.wk-hall-top-card-type-picker-modal .wk-hall-my-top-card {
  width: 394px;
  min-height: 106px;
  height: 106px;
  padding: 18px 12px;
  border-radius: 14px;
  box-shadow: none;
}

.wk-hall-top-card-face {
  cursor: default;
}

.wk-hall-top-card-face:hover:not(:disabled) {
  box-shadow: none;
  transform: none;
}

.wk-hall-top-card-face::before,
.wk-hall-my-top-card-modal .wk-hall-my-top-card::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.wk-hall-top-card-face .wk-hall-my-top-card-copy,
.wk-hall-my-top-card-modal .wk-hall-my-top-card-copy,
.wk-hall-top-card-type-picker-modal .wk-hall-my-top-card-copy {
  position: absolute;
  top: 33px;
  left: 12px;
  width: 162px;
  height: 40px;
  max-width: 162px;
  flex: 0 0 162px;
  justify-content: flex-start;
}

.wk-hall-top-card-face .wk-hall-my-top-card-heading,
.wk-hall-my-top-card-modal .wk-hall-my-top-card-heading,
.wk-hall-top-card-type-picker-modal .wk-hall-my-top-card-heading {
  width: 162px;
  max-width: 162px;
  height: 18px;
  min-height: 18px;
}

.wk-hall-top-card-face .wk-hall-my-top-card-copy small,
.wk-hall-my-top-card-modal .wk-hall-my-top-card-copy small,
.wk-hall-top-card-type-picker-modal .wk-hall-my-top-card-copy small {
  width: 162px;
  text-align: right;
}

.wk-hall-my-top-card[data-variant="navy"]::before {
  top: -65px;
  left: -21px;
  width: 429px;
  height: 268px;
}

.wk-hall-my-top-card[data-variant="violet"]::before {
  top: -35.01px;
  left: -5.19px;
  width: 403.4px;
  height: 187.02px;
}

.wk-hall-my-top-card[data-variant="pink"]::before {
  top: -54.76px;
  left: -5.21px;
  width: 403.08px;
  height: 226.51px;
}

.wk-hall-my-top-card[data-variant="gold"]::before {
  top: -28.03px;
  left: 9.91px;
  width: 373.1px;
  height: 172.97px;
}

.wk-hall-my-top-card[data-variant="navy"] .wk-hall-my-top-card-art-slot {
  background-position: 20px 14.9px;
  background-size: 105.58px 73.17px;
}

.wk-hall-my-top-card[data-variant="violet"] .wk-hall-my-top-card-art-slot {
  background-position: 23px 16.4px;
  background-size: 105px 73px;
}

.wk-hall-my-top-card[data-variant="pink"] .wk-hall-my-top-card-art-slot {
  background-position: 22px 10.57px;
  background-size: 104.52px 79.38px;
}

.wk-hall-my-top-card[data-variant="silver"] .wk-hall-my-top-card-art-slot {
  background-position: 27px 14.62px;
  background-size: 105px 72px;
}

.wk-hall-my-top-card[data-variant="gold"] .wk-hall-my-top-card-art-slot {
  background-position: 28.67px 15.5px, 0 0;
  background-size: 104.67px 79.55px, 141px 106px;
}

.wk-hall-top-card-management-actions {
  width: 394px;
  height: 72px;
  min-height: 72px;
  margin-top: 19px;
  padding: 16px 0;
  display: grid;
  box-sizing: border-box;
  flex: 0 0 72px;
  grid-template-columns: minmax(0, 1fr) 129px;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  background: #ffffff;
  box-shadow: inset 0 0.6px rgba(0, 0, 0, 0.05);
}

.wk-hall-top-card-select-all {
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #333333;
  font-size: 14px;
  cursor: pointer;
}

/* 1171:28930：管理态删除按钮是 129×40 的 6px 圆角渐变按钮。 */
.wk-hall-top-card-delete-selected {
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  cursor: pointer;
}

.wk-hall-top-card-delete-selected:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 1171:28464：394×56 白底卡片，描边是 50% 透明度的主色。 */
.wk-hall-top-card-add-button {
  width: 394px;
  height: 56px;
  min-height: 56px;
  margin-top: 19px;
  display: flex;
  flex: 0 0 56px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(157, 38, 255, 0.5);
  border-radius: 8px;
  background: #ffffff;
  color: #9d26ff;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  cursor: pointer;
}

.wk-hall-top-card-add-button img {
  width: 20px;
  height: 20px;
}

/*
 * 置顶卡管理/新增页的夜间取值统一放在文件末尾那段 1171:30385 的规则里，
 * 这里不再另起一套半透明白片。
 */

.wk-hall-my-top-card-modal .semi-modal-body {
  padding: 19px 20px 28px;
}

.wk-hall-my-top-card-list {
  min-height: 0;
  max-height: none;
  margin-top: 19px;
  flex: 1 1 auto;
  gap: 10px;
}

.wk-hall-top-card-form {
  gap: 10px;
}

.wk-hall-top-card-mini-preview {
  position: relative;
  width: 114px;
  height: 31px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #101326;
  color: #ffffff;
}

.wk-hall-top-card-mini-preview strong {
  position: relative;
  z-index: 1;
  max-width: 62px;
  padding-left: 6px;
  overflow: hidden;
  font-family: "Alimama ShuHeiTi", var(--wk-font-family);
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-hall-top-card-mini-preview i {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 31px;
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 35px auto;
}

.wk-hall-top-card-mini-preview[data-variant="navy"] i {
  background-image: url(../../static/media/navy-crown.de6efd38c7b1337285c5.png);
}

.wk-hall-top-card-mini-preview[data-variant="violet"] {
  background: linear-gradient(135deg, #eef7ff 0%, #f1e9ff 100%);
  color: #31137d;
}

.wk-hall-top-card-mini-preview[data-variant="violet"] i {
  background-image: url(../../static/media/violet-crown.a37012564d4318cbab9a.png);
}

.wk-hall-top-card-mini-preview[data-variant="pink"] {
  background: linear-gradient(135deg, #fff4dd 0%, #ffe1e8 100%);
  color: #ff3c61;
}

.wk-hall-top-card-mini-preview[data-variant="pink"] i {
  background-image: url(../../static/media/pink-crown.c5314663d2707126abc0.png);
}

.wk-hall-top-card-mini-preview[data-variant="gold"] {
  background: linear-gradient(135deg, #fff8dc 0%, #ffeab4 100%);
  color: #ea5507;
}

.wk-hall-top-card-mini-preview[data-variant="gold"] i {
  background-image: url(../../static/media/gold-crown.e3dcbdb6a3c5a2ddbe14.png);
}

.wk-hall-top-card-mini-preview[data-variant="silver"] {
  background: linear-gradient(135deg, #f6faff 0%, #c8ccd3 100%);
  color: #333333;
}

.wk-hall-top-card-mini-preview[data-variant="silver"] i {
  background-image: url(../../static/media/silver-crown.038ca282fec13667080b.png);
}

.wk-hall-top-card-mini-preview[data-variant="weekly"] {
  background: linear-gradient(135deg, #d9e8ff 0%, #a9c9ff 100%);
  color: #022b97;
}

.wk-hall-top-card-mini-preview[data-variant="weekly"] i {
  background-image: url(../../static/media/weekly-crown.a00ac9ac09e4895c228f.png);
}

.wk-hall-top-card-mini-preview[data-variant="active"] {
  background: linear-gradient(135deg, #d9f8f3 0%, #9debdc 100%);
  color: #026b54;
}

.wk-hall-top-card-mini-preview[data-variant="active"] i {
  background-image: url(../../static/media/active-crown.9fe4145ced7536dfdd3c.png);
}

.wk-hall-top-card-type-picker-modal .semi-modal-body {
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 19px 20px 17px;
  overflow: visible;
}

.wk-hall-top-card-type-picker-back {
  position: absolute;
  top: -36px;
  left: 12px;
  z-index: 4;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wk-hall-top-card-type-picker-back img {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
  filter: brightness(0);
}

.wk-hall-top-card-type-picker-list {
  width: 394px;
  height: 570px;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.wk-hall-top-card-type-picker-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.wk-hall-top-card-type-option {
  flex: 0 0 106px;
  cursor: pointer;
}

.wk-hall-top-card-type-option[aria-selected="true"] {
  border: 2px solid #9d26ff;
}

.wk-hall-top-card-type-option:hover:not(:disabled) {
  box-shadow: none;
  transform: none;
}

.wk-hall-runtime-modal.wk-hall-top-card-type-picker-modal
  .wk-hall-top-card-type-picker-actions {
  width: 393px;
  height: 40px;
  min-height: 40px;
  margin-top: 19px;
  margin-left: 1px;
  padding: 0;
  grid-template-columns: 192px 192px;
  gap: 9px;
}

/*
 * 置顶卡夜间态对齐设计包「群聊-置顶卡管理」1171:30385：
 * 弹层底 1171:30442 / 1171:31018 #1E1E1F，表单行与主播分组头
 * 1171:30392 / 1171:30895 #2F2F30，搜索框 1171:30890 #444444 配 #9D26FF 描边，
 * 正文 #DFE2E6、次要 #999999，确定按钮沿用 #9D26FF → #6426FF 渐变。
 * 亮色仍按 807:8108 的浅紫渐变，只有夜间换成中性灰阶。
 */
body[theme-mode="dark"] .wk-hall-top-card-modal,
body[theme-mode="dark"] .wk-hall-my-top-card-modal {
  --wk-hall-top-card-panel-background: var(--wk-night-canvas);
}

body[theme-mode="dark"] .wk-hall-top-card-modal .semi-modal-content,
body[theme-mode="dark"] .wk-hall-my-top-card-modal .semi-modal-content,
body[theme-mode="dark"]
  .wk-hall-top-card-type-picker-modal
  .semi-modal-content {
  background: var(--wk-night-canvas);
}

body[theme-mode="dark"]
  .wk-hall-runtime-modal.wk-hall-top-card-modal
  .semi-modal,
body[theme-mode="dark"]
  .wk-hall-runtime-modal.wk-hall-my-top-card-modal
  .semi-modal,
body[theme-mode="dark"]
  .wk-hall-runtime-modal.wk-hall-top-card-type-picker-modal
  .semi-modal {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
}

body[theme-mode="dark"] .wk-hall-top-card-modal .semi-modal-title,
body[theme-mode="dark"] .wk-hall-my-top-card-modal .semi-modal-title,
body[theme-mode="dark"] .wk-hall-top-card-type-picker-modal .semi-modal-title {
  color: var(--wk-night-ink);
}

/*
 * 1171:30444：夜间关闭键是 #58595B 的圆底 + 与画布同色的叉号，圆底由图标自身
 * 撑满 26px，按钮底与悬停底都要退成透明，否则边缘会漏出一圈亮边。
 */
body[theme-mode="dark"] .wk-hall-top-card-modal .semi-modal-close,
body[theme-mode="dark"] .wk-hall-top-card-modal .semi-modal-close:hover,
body[theme-mode="dark"] .wk-hall-my-top-card-modal .semi-modal-close {
  background: transparent;
}

/*
 * close.svg 是 #E8E8E8 圆底 + 白色叉号的双色图，brightness(0) invert(1) 会把两者
 * 一起推成纯白，只剩一个白圆。改成先反相再回提亮度：#E8E8E8 落到夜间稿的
 * #585858 圆底，白色叉号落到 #1E1E1F，与 1171:30445 取样一致。
 */
body[theme-mode="dark"] .wk-hall-top-card-modal-close-icon,
body[theme-mode="dark"] .wk-hall-my-top-card-modal-close-icon {
  filter: invert(1) brightness(3.3) contrast(0.765);
}

/* chevron-right-muted.svg 是单色 #999999，反白即可当夜间返回箭头。 */
body[theme-mode="dark"] .wk-hall-top-card-type-picker-back img {
  filter: brightness(0) invert(1);
}

/* 1171:30890：搜索框在夜间是 #444444 填充 + #9D26FF 描边。 */
body[theme-mode="dark"] .wk-hall-top-card-search {
  border-color: #9d26ff;
  background: var(--wk-night-raise);
}

body[theme-mode="dark"] .wk-hall-top-card-search input {
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-top-card-search input::-moz-placeholder, body[theme-mode="dark"]
  .wk-hall-top-card-form
  .wk-hall-top-card-date-picker
  .semi-input::-moz-placeholder {
  color: var(--wk-night-ink-muted);
}

body[theme-mode="dark"] .wk-hall-top-card-search input::placeholder,
body[theme-mode="dark"]
  .wk-hall-top-card-form
  .wk-hall-top-card-select-control:not(.has-value)
  > span,
body[theme-mode="dark"]
  .wk-hall-top-card-form
  .wk-hall-top-card-date-picker
  .semi-input::placeholder {
  color: var(--wk-night-ink-muted);
}

body[theme-mode="dark"] .wk-hall-top-card-type-filter {
  border-color: transparent;
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}

/* 1172:31742：类型下拉浮层落在 #1E1E1F，选中项才用实色 #9D26FF。 */
body[theme-mode="dark"] .wk-hall-top-card-filter-menu {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-canvas);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

body[theme-mode="dark"] .wk-hall-top-card-filter-menu [role="option"] {
  background: transparent;
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-top-card-filter-menu [role="option"]:hover,
body[theme-mode="dark"]
  .wk-hall-top-card-filter-menu
  [role="option"][aria-selected="true"] {
  background: #9d26ff;
  color: #ffffff;
}

/* 1171:30895：主播分组头是 #2F2F30 卡面，左侧仍保留 #9D26FF 的 2px 竖条。 */
body[theme-mode="dark"] .wk-hall-top-card-owner-header {
  background: var(--wk-night-surface);
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-top-card-owner-chevron {
  filter: brightness(0) invert(1);
}

/* 1171:31007：管理态底栏与弹层同底，避免在列表下方压出一条白条。 */
body[theme-mode="dark"] .wk-hall-top-card-management-actions {
  background: var(--wk-night-canvas);
  box-shadow: inset 0 0.6px var(--wk-night-line);
}

body[theme-mode="dark"] .wk-hall-top-card-select-all,
body[theme-mode="dark"]
  .wk-hall-top-card-modal.is-selection-mode
  .wk-hall-top-card-manage-toggle {
  color: var(--wk-night-ink);
}

/* 1171:30554：新增按钮在夜间是透明底的紫色描边块。 */
body[theme-mode="dark"] .wk-hall-top-card-add-button {
  background: transparent;
}

/* 1171:30392 / 1171:31107：添加与编辑置顶卡的表单行统一 #2F2F30。 */
body[theme-mode="dark"] .wk-hall-top-card-form .wk-hall-top-card-form-row {
  background: var(--wk-night-surface);
  box-shadow: inset 0 -0.6px 0 var(--wk-night-line);
}

body[theme-mode="dark"]
  .wk-hall-top-card-form
  .wk-hall-top-card-form-row:nth-child(3) {
  border-color: var(--wk-night-line-strong);
}

body[theme-mode="dark"]
  .wk-hall-top-card-form
  .wk-hall-top-card-form-row
  > span,
body[theme-mode="dark"]
  .wk-hall-top-card-form
  .wk-hall-top-card-value-button
  > span,
body[theme-mode="dark"]
  .wk-hall-top-card-form
  .wk-hall-top-card-select-control
  > span,
body[theme-mode="dark"]
  .wk-hall-top-card-form
  .wk-hall-top-card-date-picker
  .semi-input {
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-top-card-form .wk-hall-top-card-count-input {
  border-color: var(--wk-night-line-strong);
  background: var(--wk-night-raise);
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-top-card-form .wk-hall-top-card-form-chevron,
body[theme-mode="dark"] .wk-hall-top-card-type-filter > img {
  filter: brightness(0) invert(1);
}

/*
 * 1171:30418 / 1171:31099：取消按钮是 #DFE2E6 描边的透明块。
 * 选择器要比通用的 body[theme-mode="dark"] .wk-hall-runtime-actions
 * button:not(:last-child) 更具体，否则会被那条旧的 #24262b 规则压回去。
 */
body[theme-mode="dark"]
  .wk-hall-top-card-form
  > .wk-hall-runtime-actions
  button:first-child,
body[theme-mode="dark"]
  .wk-hall-top-card-type-picker-modal
  .wk-hall-top-card-type-picker-actions
  button:first-child {
  border-color: var(--wk-night-line-strong);
  background: transparent;
  color: var(--wk-night-ink);
}

body[theme-mode="dark"]
  .wk-hall-top-card-form
  > .wk-hall-runtime-actions
  button:first-child:hover:not(:disabled),
body[theme-mode="dark"]
  .wk-hall-top-card-type-picker-modal
  .wk-hall-top-card-type-picker-actions
  button:first-child:hover:not(:disabled) {
  background: var(--wk-night-raise);
}

/* 1171:31264：时间选择弹层同样落在 #1E1E1F，今天仍是 #9D26FF。 */
body[theme-mode="dark"] .wk-hall-top-card-date-popover.semi-datepicker,
body[theme-mode="dark"] .wk-hall-top-card-date-popover .semi-datepicker-footer {
  border-top-color: var(--wk-night-line);
  background: var(--wk-night-canvas);
  color: var(--wk-night-ink);
}

body[theme-mode="dark"] .wk-hall-top-card-date-title,
body[theme-mode="dark"]
  .wk-hall-top-card-date-popover
  .semi-datepicker-navigation-month,
body[theme-mode="dark"] .wk-hall-top-card-date-popover .semi-datepicker-weekday,
body[theme-mode="dark"] .wk-hall-top-card-date-popover .semi-datepicker-day {
  color: var(--wk-night-ink);
}

body[theme-mode="dark"]
  .wk-hall-top-card-date-popover
  .semi-datepicker-navigation
  > button {
  color: var(--wk-night-ink);
}

body[theme-mode="dark"]
  .wk-hall-top-card-date-popover
  .semi-datepicker-day-today
  .semi-datepicker-day-main {
  background: var(--wk-night-surface);
}

body[theme-mode="dark"]
  .wk-hall-top-card-date-popover
  .semi-datepicker-footer
  .semi-button:first-of-type {
  border-color: var(--wk-night-line-strong);
  color: var(--wk-night-ink);
}

/* 1171:31136：删除置顶卡提示保留原型的深紫夜色底，不再沿用亮色的 #F8F0FF。 */
body[theme-mode="dark"]
  .wk-hall-top-card-confirm-modal.wk-hall-confirm-modal
  .semi-modal-content {
  background: linear-gradient(180deg, #130d26 0%, #11061f 46%, #181a1e 100%);
}

body[theme-mode="dark"]
  .wk-hall-top-card-confirm-modal
  .wk-hall-confirm-dialog
  p {
  color: var(--wk-night-ink);
}

/* 1171:31192：选择主播左列是 #2F2F30，右侧已选列与弹层同为 #1E1E1F。 */
body[theme-mode="dark"]
  .wk-hall-top-card-owner-modal
  .wk-hall-dual-member-available {
  background: var(--wk-night-surface);
}

/* 回厅提醒强提醒弹窗（设计 807:9203 / 1147:34473，含带说明与不带说明两种形态） */
.wk-hall-return-reminder-mask {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.wk-hall-return-reminder-card {
  position: relative;
  isolation: isolate;
  width: 290px;
  padding-top: 65px;
  border-radius: 22px;
  background: linear-gradient(180deg, #9d26ff 0%, #6426ff 100%);
  box-shadow: 0 12px 32px rgba(52, 12, 92, 0.28);
}

/* 设计 1147:34472：卡片外扩的 420×420 光晕，按 30% 不透明度铺在卡面之下。 */
.wk-hall-return-reminder-glow {
  position: absolute;
  top: -80px;
  left: -68px;
  z-index: 0;
  width: 420px;
  height: 420px;
  opacity: 0.3;
  pointer-events: none;
}

.wk-hall-return-reminder-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 65px;
  display: flex;
  align-items: center;
  padding: 0 28px;
}

.wk-hall-return-reminder-header > span {
  position: relative;
  color: #ffffff;
  font-family: "Alimama ShuHeiTi", var(--wk-font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 1px;
}

/* 设计 1147:34487：标题两侧的装饰笔画，比标题文字左右各外扩一段。 */
.wk-hall-return-reminder-title-marks {
  position: absolute;
  top: 50%;
  left: -11px;
  width: 121px;
  height: 35px;
  pointer-events: none;
  transform: translateY(-50%);
}

.wk-hall-return-reminder-megaphone {
  position: absolute;
  top: -19px;
  right: 18px;
  width: 99px;
  height: 106px;
  pointer-events: none;
}

.wk-hall-return-reminder-body {
  position: relative;
  z-index: 1;
  min-height: 194px;
  padding: 30px 25px 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f7fff1 0%, #ffffff 40%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

/* 设计 1147:34486：主文案是书黑体渐变字，从右侧 #333333 过渡到左侧 #441269。 */
.wk-hall-return-reminder-body > strong {
  background-image: linear-gradient(275deg, #333333 0%, #441269 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Alimama ShuHeiTi", var(--wk-font-family);
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
}

.wk-hall-return-reminder-body > p {
  margin: 0;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  word-break: break-word;
}

.wk-hall-return-reminder-body > button {
  width: 159px;
  height: 40px;
  margin-top: auto;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
  cursor: pointer;
}

.wk-hall-return-reminder-body > button:hover {
  opacity: 0.92;
}

/* 会话头像左下营业状态角标（设计 807:7260 / 807:5590） */
.wk-hall-conversation-state-marker {
  display: none;
}

.wk-hall-conversation-state {
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  box-sizing: border-box;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* 设计 807:5817 / 807:5822 / 807:5834 三个角标组件都是固定 42×14，
     图标与文案两侧各留 4px，不是自动布局里残留的 6px。 */
  padding: 2px 4px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 8px;
  line-height: 12px;
  white-space: nowrap;
  pointer-events: none;
}

.wk-hall-conversation-state > img {
  width: 8px;
  height: 8px;
  flex: none;
}

.wk-hall-conversation-state.is-scheduling {
  background: linear-gradient(90deg, #ff7f0b 0%, #ff3c26 100%);
}

.wk-hall-conversation-state.is-queueing {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
}

.wk-hall-conversation-state.is-resting {
  background: linear-gradient(90deg, #dcdee4 0%, #b6bac9 100%);
}

/* 插队入口：排麦截止后的补位操作，样式贴近普通排档次级按钮 */
.wk-hall-chat-insert-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wk-hall-chat-insert-queue {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.45);
  background: rgba(139, 92, 246, 0.08);
  color: #6d28d9;
  font: inherit;
  cursor: pointer;
}
.wk-hall-chat-insert-queue:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.wk-hall-chat-entry-state.is-serving {
  color: #059669;
  font-weight: 600;
}

/* 收光快捷金额：产品默认预设，来源未定时的固定 chips */
.wk-hall-report-quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}
.wk-hall-report-quick-amount {
  min-width: 56px;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid #d9d9e3;
  background: #fff;
  color: #333;
  font: inherit;
  cursor: pointer;
}
.wk-hall-report-quick-amount.is-selected {
  border-color: #8b5cf6;
  color: #6d28d9;
  background: rgba(139, 92, 246, 0.08);
}
.wk-hall-report-quick-amount:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wk-app-settings-page {
  position: fixed;
  inset: 0;
  /* 高于 Hall 的普通悬浮层（最高 900），低于设置内的 Semi Modal（1000）。 */
  z-index: 950;
  min-width: 0;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(20, 20, 28, 0.36);
}

.wk-app-settings-dialog {
  width: min(767px, 100%);
  max-width: 767px;
  height: min(565px, 100%);
  max-height: 100%;
  display: grid;
  grid-template-columns: 204px minmax(0, 563px);
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 18px 52px rgba(25, 20, 35, 0.2);
  color: #333333;
  font-size: 14px;
  font-family: var(--wk-font-family);
  outline: none;
}

/* 设计 807:16861：204px 分类栏底色是 #F8F8F8。 */
.wk-app-settings-navigation {
  --wk-secondary-navigation-background: #f8f8f8;
}

.wk-app-settings-navigation-header {
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
}

.wk-app-settings-close {
  width: 42px;
  height: 42px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.wk-app-settings-close:hover {
  background: rgba(0, 0, 0, 0.04);
}

.wk-app-settings-close:focus-visible {
  outline: 2px solid rgba(137, 110, 255, 0.72);
  outline-offset: -2px;
}

.wk-app-settings-close img {
  width: 10px;
  height: 10px;
  object-fit: contain;
}

.wk-app-settings-navigation-icon {
  width: 24px;
  height: 24px;
  flex: none;
  object-fit: contain;
}

.wk-app-settings-content {
  min-width: 0;
  min-height: 0;
  padding: 0 30px 30px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(137, 110, 255, 0.34) transparent;
  background: #ffffff;
}

.wk-app-settings-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.wk-app-settings-content::-webkit-scrollbar-track {
  background: transparent;
}

.wk-app-settings-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(137, 110, 255, 0.34);
}

.wk-app-settings-content::-webkit-scrollbar-thumb:hover {
  background: rgba(137, 110, 255, 0.5);
}

.wk-app-settings-dialog[data-section="guild"] .wk-app-settings-content {
  padding: 13px 30px 0;
}

.wk-app-settings-section {
  width: 100%;
  max-width: none;
}

.wk-app-settings-section > .wk-app-settings-heading:not(:first-child) {
  margin-top: 32px;
}

/* 设计 807:16885：分区标题行 503×54。 */
.wk-app-settings-heading {
  min-height: 54px;
  margin: 0;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  align-items: center;
  color: #111111;
  font-size: 15px;
  font-weight: 500;
  line-height: 50px;
}

.wk-app-settings-row {
  min-height: 62px;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wk-app-settings-row-label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wk-app-settings-row-label > img {
  width: 20px;
  height: 20px;
  flex: none;
  object-fit: contain;
  opacity: 0.72;
}

.wk-app-settings-row-label > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wk-app-settings-row strong {
  color: #333333;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
}

.wk-app-settings-row-label > div > span {
  color: #999999;
  font-size: 14px;
  line-height: 15px;
}

.wk-app-settings-row-control {
  min-width: 0;
  flex: none;
}

.wk-app-settings-row a {
  display: block;
  max-width: 280px;
  color: #384d7b;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-app-settings-web-row {
  height: 70px;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.wk-app-settings-web-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.wk-app-settings-web-title > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.wk-app-settings-web-title img {
  width: 14px;
  height: 14px;
  flex: none;
}

.wk-app-settings-web-title strong {
  color: #333333;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
}

.wk-app-settings-web-title a {
  width: 258px;
  max-width: 258px;
  flex: none;
  color: #384d7b;
  font-size: 13px;
  line-height: 15px;
}

.wk-app-settings-web-row p {
  margin: 0;
  color: #999999;
  font-size: 12px;
  line-height: 15px;
  white-space: nowrap;
}

.wk-app-settings-row select {
  min-width: 96px;
  height: 30px;
  padding: 0 28px 0 10px;
  border: 0.6px solid #d9d9d9;
  border-radius: 6px;
  outline: 0;
  background: #f5f5f5;
  color: #333333;
  font-size: 13px;
  font-family: inherit;
  line-height: 15px;
  -webkit-appearance: none;
          appearance: none;
}

.wk-app-settings-native-select:focus-within {
  border-radius: 6px;
  box-shadow: 0 0 0 2px rgba(137, 110, 255, 0.28);
}

.wk-app-settings-native-select select:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.wk-app-settings-native-select {
  position: relative;
  width: 96px;
  height: 30px;
  display: block;
}

.wk-app-settings-native-select select {
  width: 100%;
  height: 100%;
}

.wk-app-settings-account {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #f4f4f4;
}

.wk-app-settings-account-profile {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.wk-app-settings-account-profile img {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: #dedede;
  object-fit: cover;
}

.wk-app-settings-account-profile span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wk-app-settings-account-profile strong {
  color: #333333;
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
}

.wk-app-settings-account-profile small {
  color: #999999;
  font-size: 13px;
  line-height: 12px;
}

.wk-app-settings-secondary-button {
  min-width: 80px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: #d9d9d9;
  color: #333333;
  font-size: 13px;
  font-family: inherit;
  line-height: 16px;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease,
    transform 120ms ease;
}

.wk-app-settings-secondary-button:not(:disabled):hover {
  background: #cccccc;
}

.wk-app-settings-secondary-button:not(:disabled):active {
  transform: translateY(1px);
}

.wk-app-settings-secondary-button:focus-visible,
.wk-app-settings-account-profile:focus-visible,
.wk-app-settings-select-button:focus-visible,
.wk-app-settings-switch:focus-visible {
  outline: 2px solid rgba(137, 110, 255, 0.72);
  outline-offset: 2px;
}

.wk-app-settings-secondary-button:disabled {
  color: #333333;
  opacity: 1;
  cursor: not-allowed;
}

.wk-app-settings-secondary-button.is-compact {
  min-width: 44px;
  width: 44px;
  padding-right: 9px;
  padding-left: 9px;
}

.wk-app-settings-secondary-button.is-wide {
  min-width: 135px;
}

.wk-app-settings-storage-clear {
  min-height: 72px;
  justify-content: flex-end;
}

.wk-app-settings-storage-clear .wk-app-settings-row-label {
  display: none;
}

.wk-app-settings-select-button {
  min-height: 30px;
  max-width: 220px;
  padding: 0 4px 0 12px;
  border: 0.6px solid #d9d9d9;
  border-radius: 6px;
  background: #f5f5f5;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  line-height: 15px;
  white-space: nowrap;
  cursor: pointer;
}

.wk-app-settings-select-button.is-account-login {
  width: 154px;
}

.wk-app-settings-select-button.is-notification-detail {
  width: 172px;
}

.wk-app-settings-select-value {
  min-width: 0;
  overflow: hidden;
  color: #333333;
  font-size: 13px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-app-settings-select-button:disabled {
  color: #333333;
  opacity: 1;
  cursor: not-allowed;
}

.wk-app-settings-select-arrows {
  width: 20px;
  height: 25px;
  margin-right: -1px;
  border-radius: 4px;
  background: #6b10ff;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.wk-app-settings-native-select .wk-app-settings-select-arrows {
  position: absolute;
  top: 2.5px;
  right: 0;
  pointer-events: none;
}

.wk-app-settings-select-arrows img {
  width: 8px;
  height: 8px;
  flex: none;
}

.wk-app-settings-select-arrows img.is-up {
  transform: rotate(180deg);
}

.wk-app-settings-status,
.wk-app-settings-font-preview {
  color: #777777 !important;
  font-size: 13px !important;
}

.wk-app-settings-switch {
  width: 37px;
  height: 21px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  display: block;
  cursor: pointer;
  transition: background 160ms ease;
}

.wk-app-settings-switch img {
  width: 37px;
  height: 21px;
  display: block;
}

.wk-app-settings-switch:disabled {
  opacity: 1;
  cursor: not-allowed;
}

.wk-app-settings-font-row {
  min-height: 56px;
}

.wk-app-settings-font-size {
  position: relative;
  width: 107px;
  height: 24px;
}

.wk-app-settings-font-size input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 107px;
  height: 24px;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.wk-app-settings-font-visual {
  position: absolute;
  inset: 0;
  width: 107px;
  height: 24px;
  overflow: visible;
  pointer-events: none;
}

.wk-app-settings-font-track {
  position: absolute;
  top: 5px;
  left: 0;
  width: 107px;
  height: 2px;
  border-radius: 10px;
  background: #d9d9d9;
}

.wk-app-settings-font-ticks {
  position: absolute;
  top: 0;
  left: 0;
  width: 107px;
  height: 12px;
  display: flex;
  justify-content: space-between;
}

.wk-app-settings-font-ticks i {
  width: 3px;
  height: 12px;
  border-radius: 10px;
  background: #d9d9d9;
}

.wk-app-settings-font-ticks i.is-active {
  background: #6b10ff;
}

/* 807:17046：滑块落在当前档位的刻度上，9 档在 107px 内每档 13px。 */
.wk-app-settings-font-thumb {
  position: absolute;
  top: -1px;
  left: calc(1 * 13px - 1.5px);
  left: calc(var(--wk-app-settings-font-step, 1) * 13px - 1.5px);
  width: 6px;
  height: 14px;
  box-sizing: border-box;
  border: 0.2px solid #999999;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.wk-app-settings-font-label {
  position: absolute;
  top: 12px;
  color: #999999;
  font-size: 6px;
  line-height: 15px;
  white-space: nowrap;
}

.wk-app-settings-font-size .is-small {
  left: -2px;
}

.wk-app-settings-font-size .is-standard {
  left: 9px;
}

.wk-app-settings-font-size .is-large {
  left: 103px;
}

.wk-app-settings-subheading {
  min-height: 54px;
  margin-top: 32px;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.wk-app-settings-subheading strong {
  color: #111111;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
}

.wk-app-settings-subheading span {
  color: #999999;
  font-size: 14px;
  line-height: 15px;
}

.wk-app-settings-marker-row {
  min-height: 53px;
}

.wk-app-settings-notification-banner {
  min-height: 70px;
}

.wk-app-settings-notification-detail {
  min-height: 62px;
}

.wk-app-settings-notification-sound {
  min-height: 53px;
}

.wk-app-settings-dialog[data-section="notification"] .wk-app-settings-content {
  padding-bottom: 17px;
}

.wk-app-settings-about {
  min-height: 0;
}

.wk-app-settings-legal {
  width: 484px;
  max-width: calc(100% - 19px);
  margin-top: 340px;
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  color: #384d7b;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.wk-app-settings-legal-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.wk-app-settings-legal-link:hover:not(:disabled) {
  text-decoration: underline;
}

.wk-app-settings-legal-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.wk-app-settings-legal-link:focus-visible {
  border-radius: 4px;
  outline: 2px solid rgba(137, 110, 255, 0.72);
  outline-offset: 2px;
}

.wk-app-settings-dialog[data-section="about"] .wk-app-settings-content {
  padding-top: 30px;
}

.wk-app-settings-about > .wk-app-settings-row {
  min-height: 70px;
}

.wk-app-settings-about .wk-app-settings-row-label > div {
  gap: 8px;
}

.wk-app-settings-content .wk-hall-guild-settings-panel {
  width: 100%;
  max-width: none;
  min-height: 100%;
  border: 0;
  background: #ffffff;
}

/*
 * 夜间模式设置弹窗对照设计「设置入口、设置」949:21567：
 * 左侧分类列 #2F2F30、右侧内容 #1E1E1F、正文 #DFE2E6、
 * 分隔线 #DFE2E6 10%、次要按钮 #444444、协议链接 #808EA6。
 */
body[theme-mode="dark"] .wk-app-settings-dialog,
body[theme-mode="dark"] .wk-app-settings-content,
body[theme-mode="dark"] .wk-app-settings-content .wk-hall-guild-settings-panel {
  background: #1e1e1f;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-app-settings-page {
  background: rgba(7, 7, 10, 0.68);
}

body[theme-mode="dark"] .wk-app-settings-navigation {
  --wk-secondary-navigation-background: #2f2f30;
  --wk-secondary-navigation-text: #dfe2e6;
}

body[theme-mode="dark"] .wk-app-settings-close img {
  filter: brightness(0) invert(0.9);
  opacity: 0.9;
}

body[theme-mode="dark"] .wk-app-settings-close:hover {
  background: rgba(223, 226, 230, 0.08);
}

body[theme-mode="dark"] .wk-app-settings-heading,
body[theme-mode="dark"] .wk-app-settings-subheading strong,
body[theme-mode="dark"] .wk-app-settings-row strong,
body[theme-mode="dark"] .wk-app-settings-web-title strong,
body[theme-mode="dark"] .wk-app-settings-account-profile strong {
  color: #dfe2e6;
}

/* 949:21698/949:12314：说明与副标题按正文色 50% 透明度弱化 */
body[theme-mode="dark"] .wk-app-settings-row-label > div > span,
body[theme-mode="dark"] .wk-app-settings-subheading span,
body[theme-mode="dark"] .wk-app-settings-web-row p,
body[theme-mode="dark"] .wk-app-settings-account-profile small {
  color: rgba(223, 226, 230, 0.5);
}

body[theme-mode="dark"] .wk-app-settings-status,
body[theme-mode="dark"] .wk-app-settings-font-preview {
  color: rgba(223, 226, 230, 0.5) !important;
}

body[theme-mode="dark"] .wk-app-settings-heading,
body[theme-mode="dark"] .wk-app-settings-row,
body[theme-mode="dark"] .wk-app-settings-web-row,
body[theme-mode="dark"] .wk-app-settings-account,
body[theme-mode="dark"] .wk-app-settings-subheading {
  border-bottom-color: rgba(223, 226, 230, 0.1);
}

body[theme-mode="dark"] .wk-app-settings-row-label > img {
  filter: brightness(0) invert(0.9);
  opacity: 0.8;
}

/* 949:21603/949:21625：管理、退出登录一类次要按钮为 #444444 底 + #DFE2E6 字 */
body[theme-mode="dark"] .wk-app-settings-secondary-button {
  background: #444444;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-app-settings-secondary-button:disabled {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-app-settings-secondary-button:not(:disabled):hover {
  background: #4f4f4f;
}

/* 949:21609/949:21736：下拉是透明底 + #DFE2E6 10% 描边，右侧箭头块走品牌渐变 */
body[theme-mode="dark"] .wk-app-settings-select-button,
body[theme-mode="dark"] .wk-app-settings-row select {
  border-color: rgba(223, 226, 230, 0.1);
  background: transparent;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-app-settings-select-button:disabled,
body[theme-mode="dark"] .wk-app-settings-select-value {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-app-settings-row select option {
  background: #2f2f30;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-app-settings-select-arrows {
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
}

/* 949:21743：字号滑杆的底轨与未激活刻度在深色下同为 #2F2F30 */
body[theme-mode="dark"] .wk-app-settings-font-track,
body[theme-mode="dark"] .wk-app-settings-font-ticks i {
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-app-settings-font-ticks i.is-active {
  background: #6b10ff;
}

/* 949:21703：协议入口在深色下为 #808EA6 */
body[theme-mode="dark"] .wk-app-settings-legal,
body[theme-mode="dark"] .wk-app-settings-row a,
body[theme-mode="dark"] .wk-app-settings-web-title a {
  color: #808ea6;
}

body[theme-mode="dark"] .wk-app-settings-content {
  scrollbar-color: rgba(191, 77, 255, 0.46) transparent;
}

body[theme-mode="dark"] .wk-app-settings-content::-webkit-scrollbar-thumb {
  background: rgba(191, 77, 255, 0.46);
}

@media (max-width: 815px) {
  .wk-app-settings-page {
    padding: 16px;
  }
}

@media (max-width: 798px) {
  .wk-app-settings-dialog {
    width: 100%;
    max-width: none;
    height: min(565px, 100%);
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .wk-app-settings-navigation-header {
    justify-content: center;
  }

  .wk-app-settings-close {
    margin-left: 0;
  }

  .wk-app-settings-navigation .wk-secondary-navigation-item {
    padding: 16px 24px;
    justify-content: center;
  }

  .wk-app-settings-navigation
    .wk-secondary-navigation-item
    > span:not(.wk-secondary-navigation-item-icon) {
    display: none;
  }

  .wk-app-settings-web-row {
    height: auto;
    min-height: 70px;
  }

  .wk-app-settings-web-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .wk-app-settings-web-title a {
    width: 100%;
    max-width: 100%;
  }

  .wk-app-settings-web-row p {
    white-space: normal;
  }

  .wk-app-settings-content {
    padding-right: 18px;
    padding-left: 18px;
  }

  .wk-app-settings-dialog[data-section="guild"] .wk-app-settings-content {
    padding: 13px 18px 32px;
  }
}

.wk-login {
    --wk-login-accent: #6b10ff;
    --wk-login-gradient: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
    --wk-login-field-bg: #f4f5f7;
    --wk-login-muted: #999999;
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    min-width: 320px;
    min-height: 680px;
    align-items: center;
    justify-content: center;
    overflow: clip;
    padding: 0 24px;
    background: #f8fbff;
    color: #333333;
    font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    font-family: var(--wk-font-family, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif);
    isolation: isolate;
}

.wk-login::before {
    position: absolute;
    z-index: -2;
    inset: -30px;
    background: url(../../static/media/login-background.68ac27c0fd37e55ddf66.png) center / cover no-repeat;
    content: "";
    filter: blur(10px);
    opacity: 0.6;
    transform: scale(1.04);
}

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

.wk-login button,
.wk-login input {
    font-family: inherit;
}

.wk-login button:focus-visible,
.wk-login input:focus-visible {
    outline: 2px solid rgba(107, 16, 255, 0.5);
    outline-offset: 2px;
}

.wk-login-background-overlay {
    position: absolute;
    z-index: -1;
    top: calc(50% - 711px);
    left: calc(50% - 796px);
    width: 505px;
    height: 1007px;
    background: url(../../static/media/login-background-overlay.adaf2ffe84d58a6a8af5.png) center / contain no-repeat;
    pointer-events: none;
}

.wk-login-brand-lockup {
    position: absolute;
    z-index: 2;
    top: calc(50% - 352px);
    left: calc(50% + 0.25px);
    display: flex;
    align-items: center;
    width: 635.5px;
    height: 96px;
    gap: 10px;
    transform: translateX(-50%);
}

.wk-login-brand-mark {
    display: block;
    width: 96px;
    height: 96px;
    flex: none;
}

.wk-login-brand-wordmark {
    color: #333333;
    font-family: "Alimama FangYuanTi VF", "PingFang SC", sans-serif;
    font-family: "Alimama FangYuanTi VF", var(--wk-font-family, "PingFang SC"), sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.92px;
    line-height: 19.2px;
    white-space: nowrap;
}

.wk-login-brand-divider {
    width: 2px;
    height: 17px;
    flex: none;
    border-radius: 1px;
    margin: 0 5px;
    background: #333333;
    transform: rotate(17.9deg);
}

.wk-login-brand-tagline {
    color: #333333;
    font-family: Inter, "PingFang SC", sans-serif;
    font-family: Inter, var(--wk-font-family, "PingFang SC"), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19.36px;
    white-space: nowrap;
}

.wk-login-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: 900px;
    height: 540px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wk-login-qr-pane,
.wk-login-form-pane {
    position: relative;
    min-width: 0;
    height: 540px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(0, 0, 0, 0.05);
}

.wk-login-qr-pane {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 20px 0 0 20px;
    padding-top: 75px;
}

.wk-login-qr-pane h1 {
    height: 36px;
    margin: 0;
    color: #000000;
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
}

.wk-login-qr-pane .semi-spin {
    margin-top: 20px;
}

.wk-login-qr-shell {
    display: flex;
    width: 212px;
    height: 212px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ececec;
    border-radius: 20px;
    background: #ffffff;
}

.wk-login-qr-code {
    position: relative;
    width: 172px;
    height: 172px;
}

.wk-login-qr-code canvas {
    display: block;
    width: 172px !important;
    height: 172px !important;
}

.wk-login-qr-placeholder {
    width: 172px;
    height: 172px;
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(107, 16, 255, 0.05) 25%, transparent 25%) 0 0 / 16px 16px,
        linear-gradient(rgba(107, 16, 255, 0.05) 25%, transparent 25%) 0 0 / 16px 16px,
        #ffffff;
}

.wk-login-qr-avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    overflow: hidden;
    margin: -24px 0 0 -24px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 180ms ease, transform 180ms ease;
}

.wk-login-qr-avatar-show {
    opacity: 1;
    transform: scale(1);
}

.wk-login-qr-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-login-qr-expired {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: rgba(255, 255, 255, 0.94);
    color: #333333;
    cursor: pointer;
    flex-direction: column;
    font-size: 14px;
}

.wk-login-qr-expired span {
    margin-top: 5px;
    color: var(--wk-login-accent);
}

/* 设计 1441:35942：142×36 的「可用 MicQ 扫码」单行提示，与「扫码登录」标题同为 #000000 */
.wk-login-platforms {
    display: flex;
    width: 142px;
    height: 36px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    gap: 6px;
    line-height: 36px;
    white-space: nowrap;
}

.wk-login-platforms strong {
    font-weight: inherit;
}

.wk-login-platforms-prefix,
.wk-login-platforms-suffix {
    font-weight: 400;
}

.wk-login-platform-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
}

.wk-login-platform-icon-micq {
    background: linear-gradient(135deg, #89d2ff 0%, #6e75ff 43%, #6363ff 65%, #a55dff 94%);
}

.wk-login-platform-brand-mark {
    width: 22px;
    height: 22px;
}

.wk-login-form-pane {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    border-radius: 0 20px 20px 0;
    padding: 60px 79px 0 80px;
}

.wk-login-tabs {
    display: flex;
    width: 300px;
    height: 76px;
    margin-left: -5px;
}

.wk-login-tab {
    position: relative;
    display: flex;
    width: 150px;
    height: 76px;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 0 0;
    border: 0;
    background: transparent;
    color: var(--wk-login-muted);
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    line-height: 36px;
}

.wk-login-tab::after {
    position: absolute;
    top: 60px;
    left: 50%;
    width: 20px;
    height: 3px;
    border-radius: 3px;
    background: transparent;
    content: "";
    transform: translateX(-50%);
}

.wk-login-tab-active {
    color: #000000;
    font-weight: 500;
}

/* 设计 807:4754：20×3 的下划线是 #9D26FF → #6426FF 渐变，不是单色强调色 */
.wk-login-tab-active::after {
    background: var(--wk-login-gradient);
}

.wk-login-fields {
    display: grid;
    width: 291px;
    margin-top: 19px;
    grid-gap: 18px;
    gap: 18px;
}

.wk-login-field {
    position: relative;
    display: flex;
    width: 291px;
    height: 46px;
    align-items: center;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--wk-login-field-bg);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.wk-login-field:focus-within {
    border-color: rgba(107, 16, 255, 0.32);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(107, 16, 255, 0.08);
}

.wk-login-field input {
    min-width: 0;
    height: 100%;
    flex: 1 1;
    padding: 0 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #333333;
    font-size: 16px;
    line-height: 22.4px;
}

.wk-login-field input::-moz-placeholder {
    color: var(--wk-login-muted);
    opacity: 1;
}

.wk-login-field input::placeholder {
    color: var(--wk-login-muted);
    opacity: 1;
}

.wk-login-country-code {
    display: flex;
    width: 64px;
    height: 22px;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    box-shadow: inset -0.6px 0 rgba(0, 0, 0, 0.05);
    color: #333333;
    flex: 0 0 64px;
    font-size: 16px;
    gap: 5px;
    line-height: 22.4px;
}

/* 设计 807:4730/807:9470：区号后为向右的 chevron，约 5.6×9.9 */
.wk-login-country-chevron {
    width: 7px;
    height: 7px;
    border-right: 1px solid #595757;
    border-bottom: 1px solid #595757;
    transform: rotate(-45deg) translate(-1px, -1px);
}

.wk-login-phone-field input {
    padding-left: 15px;
}

.wk-login-code-button,
.wk-login-eye-button {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.wk-login-code-button {
    height: 100%;
    padding: 0 16px 0 8px;
    /* 设计 807:4769/807:4786：发码入口与倒计时同为 #6B10FF */
    color: var(--wk-login-accent);
    font-size: 16px;
    line-height: 22.4px;
    white-space: nowrap;
}

/* 设计 807:4769：手机号还不能发码时按 20% 不透明度弱化 */
.wk-login-code-button-idle {
    opacity: 0.2;
}

.wk-login-code-button:disabled {
    cursor: default;
}

.wk-login-eye-button {
    display: flex;
    width: 50px;
    height: 46px;
    align-items: center;
    justify-content: center;
}

.wk-login-eye-icon {
    width: 18px;
    height: 18px;
}

.wk-login-password-group {
    position: relative;
}

/* 设计 807:4883：黑色 60% 圆角 10 气泡，箭头位于右下、指向密码框眼睛图标 */
.wk-login-password-tooltip {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: calc(100% - 2px);
    display: grid;
    width: 256px;
    box-sizing: border-box;
    padding: 13px 15px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 14px;
    line-height: 19.6px;
    pointer-events: none;
}

.wk-login-password-tooltip::after {
    position: absolute;
    top: 100%;
    right: 14px;
    width: 0;
    height: 0;
    border-top: 11.5px solid rgba(0, 0, 0, 0.6);
    border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    content: "";
}

.wk-login-error-slot {
    width: 291px;
    height: 20px;
    margin-top: 8px;
}

.wk-login-error {
    width: 100%;
    padding-top: 4px;
    color: #ff0000;
    font-size: 14px;
    line-height: 19.6px;
    white-space: nowrap;
}

.wk-login-options {
    display: flex;
    width: 291px;
    height: 18px;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    color: #333333;
    font-size: 14px;
    line-height: 15px;
}

.wk-login-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 6px;
    white-space: nowrap;
}

.wk-login-check input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.wk-login-check-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.wk-login-inline-link,
.wk-login-text-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* 设计 807:4892：忘记密码为 12px #384D7B，右对齐于选项行 */
.wk-login-inline-link {
    color: #384d7b;
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
}

.wk-login-inline-link:hover,
.wk-login-text-link:hover {
    color: var(--wk-login-accent);
}

.wk-login-primary {
    width: 291px;
    height: 46px;
    margin-top: 41px;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: var(--wk-login-gradient);
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    line-height: 22.4px;
    transition: background 140ms ease, opacity 140ms ease;
}

.wk-login-primary:not(:disabled):hover {
    background: #4800bc;
}

.wk-login-primary:not(:disabled):active {
    background: #3d009f;
}

.wk-login-primary:disabled {
    opacity: 0.2;
    cursor: default;
}

.wk-login-agreement {
    display: flex;
    width: 289px;
    height: 18px;
    align-items: center;
    margin-top: 22px;
    color: #333333;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 15px;
    white-space: nowrap;
}

.wk-login-agreement .wk-login-check {
    gap: 6px;
}

.wk-login-text-link {
    color: #384d7b;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 15px;
}

/*
 * 注册卡与重置密码卡共用的壳体：只放设计 807:9463 的宽度、圆角与内边距，
 * 卡高和按钮/协议行的纵向节奏由 .wk-login-signup-card / .wk-login-forget-card 各自决定，
 * 避免其中一张卡增减字段时把另一张卡的高度带偏。
 */
.wk-login-register-card {
    position: relative;
    z-index: 1;
    display: flex;
    width: 329px;
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 19px 34px 20px;
    border-radius: 10px;
    background: #ffffff;
}

.wk-login-register-title {
    display: flex;
    width: 289px;
    height: 76px;
    align-items: center;
    justify-content: center;
}

.wk-login-register-title h1 {
    margin: 0;
    color: #000000;
    font-size: 20px;
    font-weight: 500;
    line-height: 36px;
}

.wk-login-register-back {
    position: absolute;
    z-index: 2;
    top: 31px;
    left: 8px;
    display: flex;
    width: 40px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

.wk-login-register-back:hover {
    background: #f4f5f7;
}

.wk-login-register-back img {
    width: 20px;
    height: 20px;
}

.wk-login-register-fields {
    display: grid;
    width: 289px;
    margin-top: 17px;
    grid-gap: 17px;
    gap: 17px;
}

.wk-login-register-fields .wk-login-field {
    width: 289px;
}

.wk-login-register-password-group {
    position: relative;
    width: 289px;
}

.wk-login-register-password-rule {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: calc(100% + 12px);
    display: flex;
    width: 256px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.86);
    color: #ffffff;
    flex-direction: column;
    font-size: 14px;
    line-height: 19.6px;
    pointer-events: none;
    transform: translateY(-50%);
}

.wk-login-register-password-rule::before {
    position: absolute;
    top: 50%;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 8px solid rgba(0, 0, 0, 0.86);
    border-bottom: 7px solid transparent;
    content: "";
    transform: translateY(-50%);
}

/* 设计 807:9463：按钮左对齐 x=19，比字段区左边缘再外扩 1px */
.wk-login-register-card .wk-login-primary {
    margin-left: -1px;
}

/*
 * 注册卡：329×483。设计 807:9463 只画了三行字段（329×420），产品要求验证码常驻，
 * 按 807:9463 的 17px 行距扩出第四行（+46 字段 +17 行距 = +63），其余纵向节奏保持设计值：
 * 10 上内边距 + 76 标题 + 17 + 235 四行字段 + 30 + 46 按钮 + 17 + 18 协议 + 34 下内边距。
 */
.wk-login-signup-card {
    min-height: 483px;
}

.wk-login-signup-card .wk-login-primary {
    margin-top: 30px;
}

.wk-login-signup-card .wk-login-agreement {
    margin-top: 17px;
}

/*
 * 重置密码卡：329×429。设计暂无独立规格，复用注册卡壳体但没有协议勾选行，
 * 字段区同为四行：10 + 76 + 17 + 235 + 17 + 46 按钮 + 28 下内边距。
 */
.wk-login-forget-card {
    min-height: 429px;
    padding-bottom: 28px;
}

.wk-login-forget-card .wk-login-primary {
    margin-top: 17px;
}

@container wk-app-canvas (max-width: 950px) {
    .wk-login {
        padding-right: 16px;
        padding-left: 16px;
    }

    .wk-login-card {
        width: min(900px, calc(100vw - 32px));
        grid-template-columns: minmax(330px, 1fr) minmax(360px, 1fr);
    }

    .wk-login-qr-pane {
        padding-right: 20px;
        padding-left: 20px;
    }

    .wk-login-form-pane {
        align-items: center;
        padding-right: max(34px, calc((100% - 291px) / 2));
        padding-left: max(34px, calc((100% - 291px) / 2));
    }

}

@container wk-app-canvas (max-width: 840px) {
    .wk-login-register-password-rule {
        top: auto;
        right: 0;
        bottom: calc(100% + 8px);
        left: auto;
        transform: none;
    }

    .wk-login-register-password-rule::before {
        top: auto;
        right: 18px;
        bottom: -7px;
        left: auto;
        border-top: 8px solid rgba(0, 0, 0, 0.86);
        border-right: 6px solid transparent;
        border-bottom: 0;
        border-left: 6px solid transparent;
        transform: none;
    }
}

@container wk-app-canvas (max-width: 740px) {
    .wk-login {
        min-height: 700px;
        align-items: center;
    }

    .wk-login-brand-lockup {
        top: 20px;
        width: auto;
        transform: translateX(-50%) scale(0.88);
    }

    /* 窄画布放不下英文标语时只保留品牌标记与字标，避免溢出裁切。 */
    .wk-login-brand-divider,
    .wk-login-brand-tagline {
        display: none;
    }

    .wk-login-card {
        width: min(420px, calc(100vw - 32px));
        grid-template-columns: 1fr;
    }

    .wk-login-qr-pane {
        display: none;
    }

    .wk-login-form-pane {
        width: 100%;
        border-radius: 20px;
        padding-right: max(24px, calc((100% - 291px) / 2));
        padding-left: max(24px, calc((100% - 291px) / 2));
    }

    .wk-login-register-card {
        width: min(329px, calc(100vw - 32px));
        padding-right: max(19px, calc((100% - 291px) / 2));
        padding-left: max(19px, calc((100% - 291px) / 2));
    }
}

@container wk-app-canvas (max-width: 380px) {
    .wk-login {
        padding-right: 10px;
        padding-left: 10px;
    }

    .wk-login-brand-lockup {
        transform: translateX(-50%) scale(0.8);
    }

    .wk-login-card,
    .wk-login-register-card {
        width: calc(100vw - 20px);
    }

    .wk-login-form-pane {
        padding-right: max(14px, calc((100% - 291px) / 2));
        padding-left: max(14px, calc((100% - 291px) / 2));
    }
}

@media (max-height: 680px) {
    .wk-login {
        position: relative;
        inset: auto;
        width: 100%;
        align-items: flex-start;
        overflow: clip;
    }

    .wk-login-card,
    .wk-login-register-card {
        margin-top: 90px;
        margin-bottom: 30px;
    }

    .wk-login-brand-lockup {
        top: 0;
    }
}

/* 未注册账号提示弹窗（设计 807:9497） */
.wk-login-notice-mask {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

.wk-login-notice {
    box-sizing: border-box;
    width: 260px;
    min-height: 225px;
    padding: 16px;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8f0ff 0%, #ffffff 17%);
    text-align: center;
}

/* 设计 807:9506：58×58 盾牌居中，顶部距卡片 24px，与标题间距 3px */
.wk-login-notice-icon {
    display: block;
    width: 58px;
    height: 58px;
    margin: 8px auto 3px;
}

.wk-login-notice h2 {
    height: 24px;
    margin: 0;
    color: #171a1d;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.wk-login-notice p {
    margin: 8px 0 0;
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

.wk-login-notice-actions {
    display: flex;
    margin-top: 20px;
    gap: 12px;
}

.wk-login-notice-actions > button {
    width: 108px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
}

/* 设计 807:9499：次要按钮为 1px #EFEFEF 描边，需盖过上面的 border: 0 */
.wk-login-notice-actions > .wk-login-notice-cancel {
    border: 1px solid #efefef;
    background: transparent;
    color: #333333;
}

.wk-login-notice-confirm {
    background: var(--wk-login-gradient);
    color: #ffffff;
}

.wk-login-notice-actions > button:hover {
    opacity: 0.92;
}

/*
 * 夜间模式登录/注册对照设计「深色系登录、注册-PC端」
 * 949:9196 短信登录、949:9325 密码登录、949:9260 验证码错误、949:10670 注册。
 * 主要令牌：卡片 #181A1E、输入框 #101215、正文 #DFE2E6、
 * 占位与弱化文案 #DFE2E6 30%、强调色 #9D26FF、错误 #FF4D4D。
 * 主题由 WKApp.startup() 在渲染前写到 body[theme-mode]，登录页无需自行同步。
 */
body[theme-mode="dark"] .wk-login {
    --wk-login-accent: #9d26ff;
    --wk-login-field-bg: #101215;
    --wk-login-muted: rgba(223, 226, 230, 0.3);
    background: #0a0b0f;
    color: #dfe2e6;
}

/* 949:9199：深色稿换成另一张暗底光晕图，仍保持 blur 底噪 */
body[theme-mode="dark"] .wk-login::before {
    background-image: url(../../static/media/login-background-dark.400d05be5d9f84297ef9.jpg);
    opacity: 1;
}

/* 深色稿里 949:9197 的浅色光带被 949:9199 完全盖住，这里直接不画 */
body[theme-mode="dark"] .wk-login-background-overlay {
    display: none;
}

body[theme-mode="dark"] .wk-login button:focus-visible,
body[theme-mode="dark"] .wk-login input:focus-visible {
    outline-color: rgba(157, 38, 255, 0.6);
}

/* 1374:28238/1374:28240：深色稿的字标、分隔线与标语统一为 #FFFFFF */
body[theme-mode="dark"] .wk-login-brand-wordmark,
body[theme-mode="dark"] .wk-login-brand-tagline {
    color: #ffffff;
}

body[theme-mode="dark"] .wk-login-brand-divider {
    background: #ffffff;
}

body[theme-mode="dark"] .wk-login-qr-pane,
body[theme-mode="dark"] .wk-login-form-pane {
    background: #181a1e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), inset 0 0 1px rgba(255, 255, 255, 0.06);
}

/* 949:9254：整张卡外沿是 #BDACFF 起手的淡紫描边 */
body[theme-mode="dark"] .wk-login-card::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    border: 1px solid rgba(189, 172, 255, 0.35);
    border-radius: 20px;
    content: "";
    pointer-events: none;
}

body[theme-mode="dark"] .wk-login-qr-pane h1 {
    color: #dee1e5;
}

body[theme-mode="dark"] .wk-login-platforms {
    color: #dfe2e6;
}

/*
 * 949:9217：二维码框为 1px 渐变描边、内部随卡片变暗。
 * 码点本身仍保留浅底深码，避免深色反相二维码在部分相机上扫不出来。
 */
body[theme-mode="dark"] .wk-login-qr-shell {
    border-color: transparent;
    background:
        linear-gradient(#181a1e, #181a1e) padding-box,
        linear-gradient(90deg, #9d26ff 0%, #6426ff 100%) border-box;
}

body[theme-mode="dark"] .wk-login-qr-placeholder {
    background:
        linear-gradient(90deg, rgba(157, 38, 255, 0.18) 25%, transparent 25%) 0 0 / 16px 16px,
        linear-gradient(rgba(157, 38, 255, 0.18) 25%, transparent 25%) 0 0 / 16px 16px,
        #101215;
}

body[theme-mode="dark"] .wk-login-qr-avatar {
    border-color: #181a1e;
}

body[theme-mode="dark"] .wk-login-qr-expired {
    background: rgba(24, 26, 30, 0.94);
    color: #dfe2e6;
}

/* 949:9235/949:9237：未选中页签同为 #DFE2E6，选中页签与下划线走品牌渐变 */
body[theme-mode="dark"] .wk-login-tab {
    color: #dfe2e6;
}

body[theme-mode="dark"] .wk-login-tab-active {
    background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body[theme-mode="dark"] .wk-login-tab-active::after {
    background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
}

body[theme-mode="dark"] .wk-login-field {
    background: #101215;
    border-color: transparent;
}

/* 949:9207：聚焦字段是 60% 不透明度的渐变描边 */
body[theme-mode="dark"] .wk-login-field:focus-within {
    border-color: rgba(157, 38, 255, 0.6);
    background: #101215;
    box-shadow: 0 0 0 3px rgba(157, 38, 255, 0.12);
}

body[theme-mode="dark"] .wk-login-field input {
    color: #dfe2e6;
}

body[theme-mode="dark"] .wk-login-country-code {
    box-shadow: inset -0.6px 0 rgba(255, 255, 255, 0.08);
    color: #dfe2e6;
}

body[theme-mode="dark"] .wk-login-country-chevron {
    border-right-color: rgba(223, 226, 230, 0.3);
    border-bottom-color: rgba(223, 226, 230, 0.3);
}

body[theme-mode="dark"] .wk-login-eye-icon {
    filter: brightness(0) invert(0.9);
    opacity: 0.3;
}

/* 949:9320：动态密码错误提示为 #FF4D4D */
body[theme-mode="dark"] .wk-login-error {
    color: #ff4d4d;
}

body[theme-mode="dark"] .wk-login-options {
    color: #dfe2e6;
}

/* 949:9388：忘记密码为 #DFE2E6 60% */
body[theme-mode="dark"] .wk-login-inline-link {
    color: rgba(223, 226, 230, 0.6);
}

/* 949:9206：协议行前缀 #DFE2E6 30%，两个协议链接 #9D26FF */
body[theme-mode="dark"] .wk-login-agreement {
    color: rgba(223, 226, 230, 0.3);
}

body[theme-mode="dark"] .wk-login-text-link {
    color: #9d26ff;
}

body[theme-mode="dark"] .wk-login-inline-link:hover,
body[theme-mode="dark"] .wk-login-text-link:hover {
    color: #c98cff;
}

/* 949:9253：深色稿的不可用主按钮按 50% 呈现，比亮色的 20% 亮一档 */
body[theme-mode="dark"] .wk-login-primary:disabled {
    opacity: 0.5;
}

body[theme-mode="dark"] .wk-login-primary:not(:disabled):hover {
    background: #7a1ee0;
}

body[theme-mode="dark"] .wk-login-primary:not(:disabled):active {
    background: #6417c2;
}

body[theme-mode="dark"] .wk-login-password-tooltip,
body[theme-mode="dark"] .wk-login-register-password-rule {
    background: rgba(0, 0, 0, 0.86);
    color: #dfe2e6;
}

/* 949:10673：注册卡 #181A1E + 10px 圆角 + 淡紫描边 */
body[theme-mode="dark"] .wk-login-register-card {
    border: 1px solid rgba(189, 172, 255, 0.35);
    background: #181a1e;
}

body[theme-mode="dark"] .wk-login-register-title h1 {
    color: #dfe2e6;
}

body[theme-mode="dark"] .wk-login-register-back:hover {
    background: rgba(223, 226, 230, 0.08);
}

body[theme-mode="dark"] .wk-login-register-back img {
    filter: brightness(0) invert(0.9);
    opacity: 0.5;
}

/* 949:10706：未注册提示卡为 #130D26 → #11061F → #181A1E 的竖向渐变 */
body[theme-mode="dark"] .wk-login-notice {
    background: linear-gradient(180deg, #130d26 0%, #11061f 50%, #181a1e 100%);
}

body[theme-mode="dark"] .wk-login-notice h2 {
    color: #dfe2e6;
}

body[theme-mode="dark"] .wk-login-notice p {
    color: rgba(223, 226, 230, 0.6);
}

body[theme-mode="dark"] .wk-login-notice-actions > .wk-login-notice-cancel {
    border-color: rgba(223, 226, 230, 0.5);
    color: rgba(223, 226, 230, 0.5);
}

body[theme-mode="dark"] .wk-login-notice-confirm {
    color: #dfe2e6;
}



.wk-visitorheader{
    width: 100%;
    height: 80px;
}

.wk-visitorheader-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.wk-visitorheader-content-avatar {
    margin-left: 15px;
}

.wk-visitorheader-content-avatar img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.wk-visitorheader-content-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1;
    padding: 0px 15px;
}

.wk-visitorheader-content-props {
    font-size: 12px;
    color: gray;
}



.wk-channelmanagerlist {
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.wk-moments-sidebar,
.wk-moments-main,
.wk-moment-publisher-modal,
.jsmoments-people-picker {
  --jsmoments-primary: #8b5cf6;
  --jsmoments-primary-strong: #7224ff;
  --jsmoments-text: #242424;
  --jsmoments-muted: #8a8a92;
  --jsmoments-line: rgba(0, 0, 0, 0.08);
  --jsmoments-soft: #f7f7fa;
  --jsmoments-column: 445px;
  font-family: var(--wk-font-family);
}

.wk-moments-sidebar-header {
  display: flex;
  align-items: center;
  padding-right: 20px;
  padding-left: 20px;
}

.wk-moments-sidebar-header strong {
  color: var(--jsmoments-text);
  font-size: 18px;
  font-weight: 600;
}

.wk-moments-sidebar-list .wk-secondary-navigation-item {
  position: relative;
}

.wk-moments-sidebar-badge {
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 9px;
  background: #ff4d5e;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 18px;
}

.wk-secondary-navigation-item.is-selected .wk-moments-sidebar-badge {
  background: #fff;
  color: var(--jsmoments-primary-strong);
}

.wk-moments-notification-setting {
  min-height: 76px;
  padding: 15px 18px;
  box-sizing: border-box;
  border-top: 1px solid var(--jsmoments-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wk-moments-notification-setting > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wk-moments-notification-setting strong {
  color: var(--jsmoments-text);
  font-size: 13px;
  font-weight: 500;
}

.wk-moments-notification-setting small {
  color: var(--jsmoments-muted);
  font-size: 11px;
  line-height: 16px;
}

.wk-moments-notification-setting input {
  width: 36px;
  height: 20px;
  flex: 0 0 36px;
  accent-color: var(--jsmoments-primary);
  cursor: pointer;
}

.wk-moments-main {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  color: var(--jsmoments-text);
}

.wk-moments-main-header {
  width: 100%;
  height: 80px;
  padding: 0 24px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--jsmoments-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.wk-moments-main-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.wk-moments-main-header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wk-moments-main-header button {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--jsmoments-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  font-size: 13px;
}

.wk-moments-main-header button:hover {
  background: var(--jsmoments-soft);
}

.wk-moments-main-header button:disabled {
  cursor: default;
  opacity: 0.45;
}

/* 互动消息「⋯」菜单（设计 807:16358） */
.wk-moments-menu-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.wk-moments-menu-anchor > button {
  font-size: 18px;
  line-height: 1;
}

.wk-moments-menu-mask {
  position: fixed;
  inset: 0;
  z-index: 10;
  border: 0;
  background: transparent;
  cursor: default;
}

.wk-moments-menu {
  width: 195px;
  padding: 4px 0;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 11;
  border: 1px solid var(--jsmoments-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}

.wk-moments-main-header .wk-moments-menu button {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 0;
  justify-content: space-between;
  color: var(--jsmoments-text);
  font-size: 13px;
}

.wk-moments-main-header .wk-moments-menu button + button {
  border-top: 1px solid var(--jsmoments-line);
}

.wk-moments-menu button b {
  color: var(--jsmoments-primary-strong);
  font-weight: 600;
}

.wk-moments-main-header .wk-moments-publish-button {
  padding: 0 16px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #fff;
}

.wk-moments-main-header .wk-moments-publish-button img {
  filter: brightness(0) invert(1);
}

.wk-moments-main-content {
  width: 100%;
  height: calc(100% - 80px);
  min-height: 0;
  padding: 24px 30px 50px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* 设计 807:16049 的 445px 单列：PC 壳层主区与资料卡入口的独立窗共用同一列宽，
   两个入口渲染出的封面头区和动态卡尺寸一致。 */
.wk-moments-feed,
.wk-moments-notification-list,
.wk-moments-inline-error,
.wk-moments-load-more,
.wk-moments-list-end,
.wk-moments-profile-cover {
  width: min(100%, var(--jsmoments-column));
  margin-right: auto;
  margin-left: auto;
}

.wk-moments-feed {
  display: flex;
  flex-direction: column;
}

.wk-moments-state {
  width: 100%;
  min-height: 320px;
  color: var(--jsmoments-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
}

.wk-moments-state.is-error,
.wk-moments-inline-error {
  color: #d94848;
}

.wk-moments-state button,
.wk-moments-inline-error button,
.wk-moments-load-more {
  min-width: 96px;
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 18px;
  background: #f1eaff;
  color: var(--jsmoments-primary-strong);
  cursor: pointer;
}

.wk-moments-inline-error {
  margin-bottom: 12px;
  padding: 12px 16px;
  box-sizing: border-box;
  border-radius: 8px;
  background: #fff1f1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

.wk-moments-inline-error button {
  min-width: 64px;
  height: 30px;
}

.wk-moments-load-more {
  display: block;
  margin-top: 20px;
}

.wk-moments-load-more:disabled {
  color: var(--jsmoments-muted);
  cursor: default;
  opacity: 0.7;
}

.wk-moments-list-end {
  padding: 24px 0 8px;
  color: var(--jsmoments-muted);
  text-align: center;
  font-size: 12px;
}

.wk-moments-profile-cover {
  height: 320px;
  margin-bottom: 14px;
  position: relative;
  border-radius: 12px;
  background: #e8e5ee;
  overflow: hidden;
}

.wk-moments-cover-image {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-moments-profile-cover::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.wk-moments-profile-cover > div {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.wk-moments-profile-cover > div > img {
  width: 70px;
  height: 70px;
  border: 2px solid #fff;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-moments-cover-change {
  height: 32px;
  padding: 0 13px;
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.wk-moments-cover-change:disabled {
  cursor: default;
  opacity: 0.65;
}

/* 设计 807:16060：动态卡左右内边距 20px，正文列 345px（445 − 20×2 − 头像 50 − 间距 10）。 */
.wk-moment-card {
  width: 100%;
  padding: 22px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--jsmoments-line);
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-gap: 10px;
  gap: 10px;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.wk-moment-card.is-focused {
  border-radius: 10px;
  background: #faf7ff;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14);
}

/* 设计 807:16061：动态卡头像为 50 × 50 正圆。 */
.wk-moment-avatar-button {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eee;
  overflow: hidden;
  cursor: pointer;
}

.wk-moment-avatar-button img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-moment-card-body {
  min-width: 0;
}

.wk-moment-card-header {
  min-height: 26px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wk-moment-card-header button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #53628d;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.wk-moment-card-header .wk-moment-delete {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease;
}

.wk-moment-card:hover .wk-moment-delete,
.wk-moment-delete:focus-visible {
  opacity: 1;
}

.wk-moment-delete:hover {
  background: #fff0f0;
}

.wk-moment-text {
  margin: 4px 0 12px;
  color: var(--jsmoments-text);
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.wk-moment-address {
  margin-top: 10px;
  color: #6677a4;
  font-size: 12px;
}

.wk-moment-meta {
  min-height: 30px;
  margin-top: 10px;
  color: var(--jsmoments-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.wk-moment-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wk-moment-actions button {
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: var(--jsmoments-soft);
  color: #53628d;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 12px;
}

.wk-moment-actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

.wk-moment-interactions {
  margin-top: 3px;
  border-radius: 6px;
  background: var(--jsmoments-soft);
  overflow: hidden;
  font-size: 13px;
}

.wk-moment-likes {
  padding: 9px 11px;
  border-bottom: 1px solid var(--jsmoments-line);
  color: #53628d;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 18px;
}

.wk-moment-comments {
  padding: 5px 11px 7px;
}

.wk-moment-comment {
  min-height: 27px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.wk-moment-comment-content {
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--jsmoments-text);
  flex: 1 1;
  cursor: pointer;
  line-height: 19px;
  text-align: left;
  overflow-wrap: anywhere;
}

.wk-moment-comment-content strong {
  color: #53628d;
  font-weight: 500;
}

.wk-moment-comment-delete {
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: #c85a63;
  cursor: pointer;
  font-size: 11px;
  opacity: 0;
}

.wk-moment-comment:hover .wk-moment-comment-delete,
.wk-moment-comment-delete:focus-visible {
  opacity: 1;
}

.wk-moment-comment-editor {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wk-moment-comment-editor > .wk-moment-comment-reply {
  color: var(--jsmoments-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.wk-moment-comment-editor > .wk-moment-comment-reply button {
  border: 0;
  background: transparent;
  color: var(--jsmoments-primary-strong);
  cursor: pointer;
}

.wk-moment-comment-editor textarea {
  min-height: 60px;
  padding: 9px 10px;
  box-sizing: border-box;
  border: 1px solid rgba(139, 92, 246, 0.24);
  border-radius: 7px;
  outline: 0;
  resize: vertical;
  color: var(--jsmoments-text);
  background: #fff;
  font: 13px/20px var(--wk-font-family);
}

.wk-moment-comment-editor textarea:focus {
  border-color: var(--jsmoments-primary);
}

/* 设计 807:16244：评论框下方 24px 高的图标行右对齐，三个 18×18 图标间距 16。 */
.wk-moment-comment-toolbar {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.wk-moment-comment-tool {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.wk-moment-comment-tool img {
  width: 18px;
  height: 18px;
  display: block;
}

.wk-moment-comment-tool:disabled {
  cursor: default;
  opacity: 0.6;
}

.wk-moment-comment-send {
  height: 24px;
  padding: 0 15px;
  border: 0;
  border-radius: 7px;
  background: var(--jsmoments-primary);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}

.wk-moment-comment-send:disabled {
  background: #d5d5db;
  cursor: default;
}

.wk-moment-media {
  max-width: 520px;
  margin-top: 2px;
}

/* 设计 807:16066：九宫格图块 84px、间距 7px（3 列合计 266px）。 */
.wk-moment-media-grid {
  width: min(100%, 266px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 7px;
  gap: 7px;
}

.wk-moment-media-grid-1 {
  width: min(100%, 440px);
  display: block;
}

.wk-moment-media-grid-2,
.wk-moment-media-grid-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wk-moment-media-grid-item {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #eee;
  overflow: hidden;
  cursor: zoom-in;
}

.wk-moment-media-grid-1 .wk-moment-media-grid-item {
  width: auto;
  max-width: 440px;
  height: min(440px, 52vh);
  aspect-ratio: auto;
}

.wk-moment-media-grid-image {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-moment-media-grid-1 .wk-moment-media-grid-image {
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.wk-moment-media-video-player {
  width: min(100%, 520px);
  max-height: 520px;
  border-radius: 6px;
  background: #111;
  display: block;
}

.wk-moments-notification-list {
  display: flex;
  flex-direction: column;
}

.wk-moments-notification-item {
  width: 100%;
  min-height: 92px;
  padding: 16px 8px;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--jsmoments-line);
  background: transparent;
  color: var(--jsmoments-text);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 64px;
  align-items: center;
  grid-gap: 13px;
  gap: 13px;
  cursor: pointer;
  text-align: left;
}

.wk-moments-notification-item:hover {
  background: var(--jsmoments-soft);
}

.wk-moments-notification-avatar {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-moments-notification-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wk-moments-notification-body strong,
.wk-moments-notification-body > span,
.wk-moments-notification-body time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-moments-notification-body > span {
  color: #555;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.wk-moments-notification-body time {
  color: var(--jsmoments-muted);
  font-size: 11px;
}

.wk-moments-notification-preview {
  width: 64px;
  height: 64px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  background: var(--jsmoments-soft);
  color: var(--jsmoments-muted);
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  line-height: 16px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.wk-moments-notification-preview img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-moment-publisher-modal .semi-modal-body {
  padding: 0 24px 20px;
}

/* 资料卡「朋友圈」入口的独立窗口（GlobalModal）：设计 807:16049 的 445 × 900 窄窗。 */
.wk-user-moments-modal .semi-modal {
  max-width: calc(100vw - 32px);
  margin: 40px auto;
}

/* 去掉弹窗默认留白，让窄窗按设计通栏；关闭按钮改为浮在标题栏右上。 */
.wk-user-moments-modal .semi-modal-content {
  padding: 0;
}

.wk-user-moments-modal .semi-modal-body-wrapper {
  margin: 0;
  position: relative;
}

.wk-user-moments-modal .semi-modal-body {
  padding: 0;
}

.wk-user-moments-modal .semi-modal-close {
  position: absolute;
  top: 11px;
  right: 12px;
  z-index: 2;
}

.wk-user-moments-window {
  width: 100%;
  height: min(900px, 82vh);
  min-height: 460px;
  overflow: hidden;
  border-radius: 6px;
}

.wk-user-moments-window .wk-moments-main-header {
  height: 54px;
  /* 右侧留出弹窗关闭按钮的位置。 */
  padding: 0 44px 0 16px;
}

.wk-user-moments-window .wk-moments-main-header h1 {
  font-size: 16px;
}

.wk-user-moments-window .wk-moments-main-content {
  height: calc(100% - 54px);
  padding: 0 0 32px;
}

/* 封面在窄窗内通栏，与设计一致贴住窗口两侧；尺寸沿用主区同一套规则。 */
.wk-user-moments-window .wk-moments-profile-cover {
  margin-bottom: 14px;
  border-radius: 0;
}

.wk-moment-publisher {
  min-height: 380px;
}

.wk-moment-publisher > textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px 0;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  resize: vertical;
  color: var(--jsmoments-text);
  background: transparent;
  font: 15px/24px var(--wk-font-family);
}

.wk-moment-publisher-count {
  margin: -7px 0 10px;
  color: var(--jsmoments-muted);
  text-align: right;
  font-size: 11px;
}

.wk-moment-publisher-media-actions {
  height: 72px;
  border-top: 1px solid var(--jsmoments-line);
  border-bottom: 1px solid var(--jsmoments-line);
  display: flex;
  align-items: center;
  gap: 10px;
}

.wk-moment-publisher-media-actions button {
  height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: var(--jsmoments-soft);
  color: var(--jsmoments-text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.wk-moment-publisher-media-actions button:disabled {
  cursor: default;
  opacity: 0.5;
}

.wk-moment-publisher-media {
  padding: 8px 0 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.wk-moment-publisher-media.is-video {
  grid-template-columns: minmax(0, 360px);
}

.wk-moment-publisher-media > div {
  aspect-ratio: 1;
  position: relative;
  border-radius: 6px;
  background: #eee;
  overflow: hidden;
}

.wk-moment-publisher-media.is-video > div {
  aspect-ratio: 16 / 9;
}

.wk-moment-publisher-media > div > img,
.wk-moment-publisher-media > div > video {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-moment-publisher-media > div > button {
  width: 24px;
  height: 24px;
  padding: 0;
  position: absolute;
  top: 4px;
  right: 4px;
  border: 0;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.62);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.wk-moment-publisher-media > div > button img {
  filter: brightness(0) invert(1);
}

.wk-moment-publisher-add {
  aspect-ratio: 1;
  border: 1px dashed #c9c9d2;
  border-radius: 6px;
  background: var(--jsmoments-soft);
  color: var(--jsmoments-muted);
  cursor: pointer;
  font-size: 30px;
}

.wk-moment-publisher-options {
  margin-top: 14px;
  border-top: 1px solid var(--jsmoments-line);
}

.wk-moment-publisher-options > label,
.wk-moment-publisher-options > button {
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--jsmoments-line);
  background: transparent;
  color: var(--jsmoments-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-size: 14px;
}

.wk-moment-publisher-options > button {
  cursor: pointer;
}

.wk-moment-publisher-options select {
  min-width: 120px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--jsmoments-line);
  border-radius: 6px;
  outline: 0;
  color: var(--jsmoments-text);
  background: #fff;
}

.wk-moment-publisher-options strong {
  max-width: 70%;
  overflow: hidden;
  color: #6677a4;
  font-size: 13px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-moment-publisher-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.wk-moment-publisher-footer > span {
  min-width: 0;
  margin-right: auto;
  overflow: hidden;
  color: #d94848;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-moment-publisher-footer button {
  min-width: 76px;
  height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: 7px;
  background: #f1f1f4;
  color: var(--jsmoments-text);
  cursor: pointer;
}

.wk-moment-publisher-footer button.is-primary {
  min-width: 96px;
  background: var(--jsmoments-primary);
  color: #fff;
}

.wk-moment-publisher-footer button:disabled {
  cursor: default;
  opacity: 0.55;
}

.jsmoments-people-picker .semi-modal-body {
  padding-top: 8px;
}

.jsmoments-people-picker-search {
  margin-bottom: 10px;
}

.jsmoments-people-picker-summary {
  margin-bottom: 8px;
  color: var(--jsmoments-muted);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.jsmoments-people-picker-list {
  height: min(420px, 55vh);
  border-top: 1px solid var(--jsmoments-line);
  overflow-y: auto;
}

.jsmoments-people-picker-item.semi-checkbox {
  width: 100%;
  min-height: 58px;
  padding: 8px 4px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--jsmoments-line);
}

.jsmoments-people-picker-item .semi-checkbox-content {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1;
}

.jsmoments-people-picker-avatar {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  -o-object-fit: cover;
     object-fit: cover;
}

.jsmoments-people-picker-name {
  min-width: 0;
  overflow: hidden;
  color: var(--jsmoments-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jsmoments-people-picker-empty {
  height: 180px;
  color: var(--jsmoments-muted);
  display: grid;
  place-items: center;
  font-size: 13px;
}

/* 夜间模式（设计 949:17714「朋友圈」夜间稿）：
   正文区底 #1E1E1F、浮层与发布弹窗面 #262628、次级面 #2F2F30、
   正文 #DFE2E6、次要 #999999、分隔 #333333。 */
body[theme-mode="dark"] .wk-moments-sidebar,
body[theme-mode="dark"] .wk-moments-main,
body[theme-mode="dark"] .wk-moment-publisher-modal,
body[theme-mode="dark"] .jsmoments-people-picker {
  --jsmoments-text: #dfe2e6;
  --jsmoments-muted: #999999;
  --jsmoments-line: #333333;
  --jsmoments-soft: #2f2f30;
}

body[theme-mode="dark"] .wk-moments-main {
  background: #1e1e1f;
}

body[theme-mode="dark"] .wk-moment-comment-editor textarea,
body[theme-mode="dark"] .wk-moment-publisher-options select {
  background: #2f2f30;
}

/* 弹层（互动消息菜单、发布弹窗）在夜间稿中比正文区更亮一档。 */
body[theme-mode="dark"] .wk-moments-menu {
  background: #262628;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

body[theme-mode="dark"] .wk-moment-publisher-modal .semi-modal-content,
body[theme-mode="dark"] .jsmoments-people-picker .semi-modal-content {
  background: #262628;
}

body[theme-mode="dark"] .wk-moment-card.is-focused {
  background: rgba(157, 38, 255, 0.14);
}

body[theme-mode="dark"] .wk-moment-comment-content,
body[theme-mode="dark"] .wk-moments-notification-body > span,
body[theme-mode="dark"] .wk-moment-publisher-media-actions button,
body[theme-mode="dark"] .wk-moment-publisher-footer button {
  color: var(--jsmoments-text);
}

body[theme-mode="dark"] .wk-moment-publisher-footer button:not(.is-primary) {
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-moment-avatar-button,
body[theme-mode="dark"] .wk-moment-media-grid-item,
body[theme-mode="dark"] .wk-moment-publisher-media > div {
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-moment-publisher-add {
  border-color: #444444;
}

body[theme-mode="dark"] .wk-moment-comment-send:disabled {
  background: #444444;
}

body[theme-mode="dark"] .wk-moments-state button,
body[theme-mode="dark"] .wk-moments-inline-error button,
body[theme-mode="dark"] .wk-moments-load-more {
  background: rgba(157, 38, 255, 0.16);
  color: #bc6cff;
}

body[theme-mode="dark"] .wk-moments-state.is-error,
body[theme-mode="dark"] .wk-moments-inline-error,
body[theme-mode="dark"] .wk-moment-publisher-footer > span {
  color: #ff7878;
}

body[theme-mode="dark"] .wk-moments-inline-error {
  background: rgba(255, 120, 120, 0.14);
}

body[theme-mode="dark"] .wk-moment-publisher-footer button.is-primary {
  color: #fff;
}

@container wk-app-canvas (max-width: 680px) {
  .wk-moments-main-content {
    padding-right: 14px;
    padding-left: 14px;
  }

  .wk-moments-main-header {
    padding: 0 14px;
  }

  .wk-moments-publish-button {
    font-size: 0 !important;
  }

  .wk-moment-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
  }

  .wk-moment-avatar-button {
    width: 44px;
    height: 44px;
  }

  .wk-moment-media-grid {
    width: 100%;
  }
}

/* 资料卡「朋友圈」缩略图入口（设计 807:11849） */
.wk-user-moments-entry {
  cursor: pointer;
}

.wk-user-moments-thumbnails {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.wk-user-moments-thumbnails > img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 「我的」资料卡朋友圈行（设计 807:9855）：
   「朋友圈」15px + 40×40 圆角 6 缩略图（上限 4 张、间距 6） */
.wk-user-moments-entry-card {
  display: flex;
  align-items: center;
  gap: 38px;
  min-height: 52px;
}

.wk-user-moments-entry-card .wk-user-moments-entry-label {
  color: #333333;
  color: var(--wk-textcolor, #333333);
  font-size: 15px;
  flex-shrink: 0;
}

.wk-user-moments-entry-card .wk-user-moments-thumbnails {
  margin-left: 0;
  gap: 6px;
}

.wk-user-moments-entry-card .wk-user-moments-thumbnails > img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

/* 「我的钱包」PC 端（Figma 807:17279 / 807:17439） */

/* 设计数字字体：Montserrat Alternates SemiBold（807:17279 金额与余额均为 600）。
   自托管子集，不依赖客户端预装，也不引用远程字体服务。 */
@font-face {
  font-family: "WK Wallet Montserrat Alternates";
  src: url(../../static/media/MontserratAlternates-SemiBold.subset.60f7e67db739f9fd8611.woff2)
    format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

.wk-wallet-main {
  --wk-wallet-num-font: "WK Wallet Montserrat Alternates",
    "Montserrat Alternates", Montserrat,
    var(--wk-font-family, "PingFang SC", "Microsoft YaHei", sans-serif);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #f6f7fa;
}

/* 顶栏：横跨内容区与确认充值栏（807:17279 顶栏 80 高） */
.wk-wallet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 80px;
  padding: 0 20px;
  background: #ffffff;
  box-shadow: inset 0 -0.6px 0 rgba(0, 0, 0, 0.05);
}

.wk-wallet-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #000000;
}

.wk-wallet-header-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wk-wallet-header-user img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-wallet-header-user span {
  font-size: 16px;
  color: #000000;
}

.wk-wallet-body {
  flex: 1 1;
  min-height: 0;
  display: flex;
}

.wk-wallet-content {
  flex: 1 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wk-wallet-scroll {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wk-wallet-state {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #666666;
}

.wk-wallet-state img {
  width: 44px;
  height: 44px;
  opacity: 0.7;
}

.wk-wallet-state button {
  border: 1px solid #9d26ff;
  background: #ffffff;
  color: #9d26ff;
  border-radius: 6px;
  padding: 6px 18px;
  cursor: pointer;
}

/* 余额横幅（957x180，圆角 20，文案距左 23） */
.wk-wallet-balance-banner {
  position: relative;
  min-height: 180px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 0 23px;
  overflow: hidden;
  flex-shrink: 0;
}

.wk-wallet-balance-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #ffffff;
}

.wk-wallet-balance-text span {
  font-size: 15px;
}

.wk-wallet-balance-text strong {
  font-family: var(--wk-wallet-num-font);
  font-size: 50px;
  font-weight: 600;
  line-height: 1;
}

.wk-wallet-balance-text strong em {
  font-style: normal;
  font-size: 20px;
  font-weight: 500;
}

.wk-wallet-balance-coins {
  width: 197px;
  height: auto;
  flex-shrink: 0;
}

/* 充值卡（白底、圆角 10、内边距 20、纵向间距 20） */
.wk-wallet-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wk-wallet-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wk-wallet-card-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #000000;
}

.wk-wallet-bills-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
  color: #333333;
  padding: 0;
}

.wk-wallet-bills-entry img {
  width: 15px;
  height: 15px;
}

.wk-wallet-disabled-tip {
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff7ed;
  color: #b45309;
  font-size: 13px;
}

/* 充值挡位磁贴：4 列、间距 12、磁贴 120 高圆角 10 */
.wk-wallet-sku-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.wk-wallet-sku {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 120px;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  padding: 10px 12px;
}

.wk-wallet-sku:hover {
  border-color: #c9a4f5;
}

.wk-wallet-sku.selected {
  border-color: #9d26ff;
  background: rgba(157, 38, 255, 0.1);
}

.wk-wallet-sku .coin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wk-wallet-sku .coin img {
  width: 26px;
  height: 26px;
}

.wk-wallet-sku .coin strong {
  font-family: var(--wk-wallet-num-font);
  font-size: 34px;
  font-weight: 600;
  color: #333333;
  line-height: 1;
}

.wk-wallet-sku .price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
}

.wk-wallet-sku .price em {
  font-style: normal;
  color: #999999;
}

.wk-wallet-sku .price i {
  font-style: normal;
  color: #666666;
}

.wk-wallet-sku.custom {
  padding: 0;
}

/* 自定义金额编辑态（807:17439：浅紫底 #F9F6FF + 紫边 #6B10FF） */
.wk-wallet-sku.custom.editing {
  background: #f9f6ff;
  border-color: #6b10ff;
}

.wk-wallet-custom-trigger {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 20px;
  color: #333333;
}

.wk-wallet-custom-trigger img {
  width: 16px;
  height: 16px;
}

.wk-wallet-custom-editor {
  width: 100%;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.wk-wallet-custom-editor input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  font-size: 20px;
  color: #333333;
  caret-color: #6b10ff;
  padding: 6px 0;
}

.wk-wallet-custom-editor input::-moz-placeholder {
  color: #999999;
}

.wk-wallet-custom-editor input::placeholder {
  color: #999999;
}

.wk-wallet-custom-editor p {
  margin: 0;
  font-size: 12px;
  color: #f5222d;
  text-align: center;
}

.wk-wallet-notice h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 500;
  color: #000000;
}

.wk-wallet-notice p {
  margin: 0;
  font-size: 15px;
  line-height: 26px;
  color: #999999;
}

/* 右侧确认充值栏（330 宽，标题下留 133 再进入内容） */
.wk-wallet-confirm {
  width: 330px;
  flex-shrink: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

.wk-wallet-confirm h2 {
  margin: 0 0 133px;
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  text-align: center;
  flex-shrink: 0;
}

.wk-wallet-confirm-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.wk-wallet-confirm-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #999999;
  font-size: 14px;
  text-align: center;
}

.wk-wallet-confirm-placeholder strong {
  color: #333333;
  font-size: 15px;
}

.wk-wallet-confirm-placeholder.error strong {
  color: #f5222d;
}

.wk-wallet-confirm-placeholder button {
  border: 1px solid #9d26ff;
  background: #ffffff;
  color: #9d26ff;
  border-radius: 6px;
  padding: 6px 18px;
  cursor: pointer;
}

.wk-wallet-pay-amount {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.wk-wallet-pay-amount span {
  font-size: 15px;
  color: #333333;
}

.wk-wallet-pay-amount strong {
  font-family: var(--wk-wallet-num-font);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: #ff6200;
}

.wk-wallet-pay-amount strong i {
  font-style: normal;
  font-family: "PingFang SC", sans-serif;
  font-family: var(--wk-font-family, "PingFang SC", sans-serif);
  font-size: 16px;
  font-weight: 400;
}

.wk-wallet-discount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #999999;
  padding: 0;
}

.wk-wallet-discount em {
  font-style: normal;
  color: #ff6200;
}

.wk-wallet-discount img {
  width: 12px;
  height: 12px;
}

.wk-wallet-countdown {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #999999;
}

.wk-wallet-countdown em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
}

.wk-wallet-countdown i {
  font-style: normal;
  color: #9d26ff;
  font-weight: 600;
}

.wk-wallet-qrcode {
  width: 212px;
  height: 212px;
  border: 1px solid #ececec;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.wk-wallet-pay-result {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.wk-wallet-pay-result strong {
  font-size: 16px;
}

.wk-wallet-pay-result.success strong {
  color: #16a34a;
}

.wk-wallet-pay-result.expired strong {
  color: #f5222d;
}

.wk-wallet-pay-result p {
  margin: 0;
  font-size: 14px;
  color: #666666;
}

.wk-wallet-pay-result button {
  border: 1px solid #9d26ff;
  background: #ffffff;
  color: #9d26ff;
  border-radius: 6px;
  padding: 6px 18px;
  cursor: pointer;
}

/* 807:17430：「支持 [支付宝] [微信] 扫码支付」说明行，裸品牌图标 18px，
   无圆形单选容器；点击图标仍可切换通道，仅用透明度轻微区分当前通道。 */
.wk-wallet-channels {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333333;
}

.wk-wallet-channels button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.5;
  transition: opacity 120ms ease;
}

.wk-wallet-channels button:hover {
  opacity: 0.8;
}

.wk-wallet-channels button.selected {
  opacity: 1;
}

.wk-wallet-channels button img {
  width: 18px;
  height: 18px;
  display: block;
}

.wk-wallet-agreement-footer {
  margin-top: 133px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  color: #999999;
}

.wk-wallet-agreement-footer button {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #384d7b;
  padding: 0;
}

/* 弹窗（807:17439：336 宽、圆角 20、内边距上下 30 左右 20、间距 20） */
.wk-wallet-dialog-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.wk-wallet-dialog {
  width: 336px;
  max-height: 70vh;
  background: #ffffff;
  border-radius: 20px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.wk-wallet-dialog > header {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #000000;
}

/* 协议弹窗变体（807:17439「阅读协议」：260 宽、圆角 8、浅紫渐变底） */
.wk-wallet-dialog.agreement {
  width: 260px;
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(180deg, #f8f0ff 0%, #ffffff 17%);
}

.wk-wallet-payment-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.wk-wallet-payment-rows {
  width: 100%;
  background: #f5f5f5;
  border-radius: 6px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wk-wallet-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wk-wallet-payment-row .coin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wk-wallet-payment-row .coin img {
  width: 24px;
  height: 24px;
}

.wk-wallet-payment-row .coin strong {
  font-family: var(--wk-wallet-num-font);
  font-size: 24px;
  font-weight: 600;
  color: #333333;
}

.wk-wallet-payment-row.secondary span {
  font-size: 14px;
  color: #999999;
}

.wk-wallet-payment-row em {
  font-family: var(--wk-wallet-num-font);
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
  color: #ff6200;
}

.wk-wallet-payment-detail p {
  margin: 0;
  font-size: 14px;
  color: #999999;
}

.wk-wallet-payment-detail p em {
  font-style: normal;
  color: #ff6200;
}

.wk-wallet-primary {
  border: none;
  border-radius: 6px;
  min-width: 129px;
  height: 40px;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
  font-size: 14px;
  padding: 0 40px;
  cursor: pointer;
}

/* 账单明细（列表项 80 高、圆角 11、#F5F5F5 底、间距 20） */
.wk-wallet-bills {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  min-height: 120px;
}

.wk-wallet-bills ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wk-wallet-bills li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f5f5f5;
  border-radius: 11px;
  padding: 14px 20px;
  min-height: 80px;
  box-sizing: border-box;
}

.wk-wallet-bills li .meta {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.wk-wallet-bills li .meta strong {
  font-size: 15px;
  font-weight: 500;
  color: #000000;
}

.wk-wallet-bills li .meta time {
  font-size: 13px;
  color: #999999;
}

.wk-wallet-bills li .amount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wk-wallet-bills li .amount img {
  width: 24px;
  height: 24px;
}

.wk-wallet-bills li .amount strong {
  font-family: var(--wk-wallet-num-font);
  font-size: 24px;
  font-weight: 600;
  color: #333333;
}

.wk-wallet-bills-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 0;
  color: #999999;
}

.wk-wallet-bills-state button {
  border: 1px solid #9d26ff;
  background: #ffffff;
  color: #9d26ff;
  border-radius: 6px;
  padding: 6px 18px;
  cursor: pointer;
}

.wk-wallet-bills-loading {
  margin: 0;
  text-align: center;
  color: #999999;
  font-size: 13px;
}

.wk-wallet-bills-more {
  border: none;
  background: none;
  color: #9d26ff;
  font-size: 14px;
  cursor: pointer;
  padding: 6px 0;
}

/* 协议弹窗内容 */
.wk-wallet-agreement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.wk-wallet-agreement img {
  width: 61px;
  height: 61px;
  margin-top: 8px;
}

.wk-wallet-agreement strong {
  font-size: 16px;
  font-weight: 600;
  color: #171a1d;
}

.wk-wallet-agreement-link {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: #384d7b;
  padding: 0;
}

.wk-wallet-agreement footer {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.wk-wallet-agreement footer button {
  min-width: 108px;
  height: 32px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.wk-wallet-agreement footer .cancel {
  border: 1px solid #efefef;
  background: #ffffff;
  color: #333333;
}

.wk-wallet-agreement footer .confirm {
  border: none;
  background: linear-gradient(90deg, #9d26ff 0%, #6426ff 100%);
  color: #ffffff;
}

.wk-wallet-menu-icon {
  width: 30px;
  height: 30px;
}

.wk-wallet-route-anchor {
  display: none;
}

/* 夜间模式（设计 949:18539 / 949:18724「我的钱包」夜间稿）：
   页面底 #1E1E1F、卡片面 #2F2F30、弹窗面 #262628、控件 #444444、
   描边 #333333、正文 #DFE2E6、次要 #999999。 */
body[theme-mode="dark"] .wk-wallet-main {
  background: #1e1e1f;
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-wallet-header {
  background: #1e1e1f;
  box-shadow: inset 0 -0.6px 0 #333333;
}

body[theme-mode="dark"] .wk-wallet-header h1,
body[theme-mode="dark"] .wk-wallet-header-user span,
body[theme-mode="dark"] .wk-wallet-card-header h2,
body[theme-mode="dark"] .wk-wallet-notice h3,
body[theme-mode="dark"] .wk-wallet-confirm h2 {
  color: #dfe2e6;
}

/* 夜间稿没有白色内容卡，充值挡位直接落在页面底色上。 */
body[theme-mode="dark"] .wk-wallet-card {
  background: transparent;
}

body[theme-mode="dark"] .wk-wallet-bills-entry,
body[theme-mode="dark"] .wk-wallet-channels,
body[theme-mode="dark"] .wk-wallet-pay-amount span,
body[theme-mode="dark"] .wk-wallet-custom-trigger,
body[theme-mode="dark"] .wk-wallet-confirm-placeholder strong {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-wallet-notice p,
body[theme-mode="dark"] .wk-wallet-state,
body[theme-mode="dark"] .wk-wallet-confirm-placeholder,
body[theme-mode="dark"] .wk-wallet-agreement-footer,
body[theme-mode="dark"] .wk-wallet-bills-state,
body[theme-mode="dark"] .wk-wallet-bills-loading,
body[theme-mode="dark"] .wk-wallet-pay-result p {
  color: #999999;
}

body[theme-mode="dark"] .wk-wallet-sku {
  border-color: #2f2f30;
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-wallet-sku:hover {
  border-color: #6b3fa0;
}

body[theme-mode="dark"] .wk-wallet-sku.selected {
  border-color: #9d26ff;
  background: rgba(157, 38, 255, 0.1);
}

body[theme-mode="dark"] .wk-wallet-sku.custom.editing {
  border-color: #9d26ff;
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-wallet-sku .coin strong,
body[theme-mode="dark"] .wk-wallet-custom-editor input {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-wallet-sku .price i {
  color: #999999;
}

body[theme-mode="dark"] .wk-wallet-confirm {
  background: #1e1e1f;
  border-left: 1px solid #333333;
}

/* 设计 949:18539：二维码框保留品牌紫描边。 */
body[theme-mode="dark"] .wk-wallet-qrcode {
  border-color: #9d26ff;
  background: #1e1e1f;
}

body[theme-mode="dark"] .wk-wallet-state button,
body[theme-mode="dark"] .wk-wallet-confirm-placeholder button,
body[theme-mode="dark"] .wk-wallet-bills-state button,
body[theme-mode="dark"] .wk-wallet-pay-result button {
  border-color: #9d26ff;
  background: transparent;
  color: #bc6cff;
}

body[theme-mode="dark"] .wk-wallet-agreement-footer button,
body[theme-mode="dark"] .wk-wallet-agreement-link {
  color: #8ea6dd;
}

body[theme-mode="dark"] .wk-wallet-dialog-mask {
  background: rgba(24, 26, 30, 0.8);
}

body[theme-mode="dark"] .wk-wallet-dialog {
  background: #262628;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

body[theme-mode="dark"] .wk-wallet-dialog > header,
body[theme-mode="dark"] .wk-wallet-payment-row .coin strong,
body[theme-mode="dark"] .wk-wallet-bills li .meta strong,
body[theme-mode="dark"] .wk-wallet-bills li .amount strong,
body[theme-mode="dark"] .wk-wallet-agreement strong {
  color: #dfe2e6;
}

/* 设计 949:18724：协议弹窗夜间为深紫星空底。 */
body[theme-mode="dark"] .wk-wallet-dialog.agreement {
  background: linear-gradient(180deg, #32185e 0%, #130b24 62%);
}

body[theme-mode="dark"] .wk-wallet-payment-rows,
body[theme-mode="dark"] .wk-wallet-bills li {
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-wallet-agreement footer .cancel {
  border-color: #444444;
  background: transparent;
  color: #dfe2e6;
}


.wk-message-file {
    width: 300px;
    height: 68px;
    clear: both;
    cursor: pointer;
}


.wk-message-base-bubble-box.fileBox .fileHeader {
    height: 100%;
    width: 78px;
    justify-content: center;
    align-items: center;
    display: flex;
    float: left;
}

.wk-message-base-recv .wk-message-base-bubble-box.fileBox .fileHeader {
    float: right;
}

.wk-message-base-bubble-box.fileBox .fileContent {
    position: relative;
    float: left;
    flex: 1 1;
    width: calc(100% - 78px);
    box-sizing: border-box;
    height: 100%;
}

.wk-message-base-bubble-box.fileBox .fileContent .name {
    height: 16px;
    padding: 0 10px;
    line-height: 16px;
    color: var(--wk-text-item);
    font-size: 14px;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    letter-spacing: .4px;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-message-base-bubble-box.fileBox .fileContent .size {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 12px;
    color: #8f959e;
    margin-bottom: 2px;
}

.wk-message-base-send .wk-message-base-bubble-box.fileBox .fileContent .name {
    color: rgb(255, 255, 255);
}
.wk-message-base-send .wk-message-base-bubble-box.fileBox .fileContent .size {
    color: rgb(255, 255, 255,0.5);
}



.wk-filetoolbar {
   
}

.wk-filetoolbar-content {
    padding: 10px;
}

.wk-filetoolbar-content-icon  img{
    width: 20px;
    height: 20px;
}

.wk-filetoolbar-content-icon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


.wk-imagedialog {
    display: flex;
    justify-content: center;
    align-items: center;

    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-app-region: no-drag;
    z-index: 100;
}

.wk-imagedialog-mask {
    position: absolute;
    background-color: rgba(0,0,0,.3);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.wk-imagedialog-content {
    width: 420px;
    position: relative;
    padding: 28px;
    background: var(--wk-color-item);
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
    max-height: 580px;
}

.wk-imagedialog-content-close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 28px;
    right: 28px;
    font-size: 18px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    line-height: 18px;
}

.wk-imagedialog-content-close svg {
    fill: var(--wk-text-item);
}

.wk-imagedialog-content-title {
    font-size: 16px;
    font-weight: 600;
}

.wk-imagedialog-content-body {
    width: 100%;
    font-size: 14px;
    text-align: center;
    margin-top: 28px;
}

.wk-imagedialog-content-preview {
    box-sizing: border-box;
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    border-radius: 4px 4px 4px 4px;
}

.wk-imagedialog-content-previewImg {
    width: auto;
    height: auto;
    max-width: 240px;
    max-height: 240px;
    background-size: auto 100%;
    background-position: 50%;
    margin: 0 auto 16px;
}

.wk-imagedialog-content-preview-file {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.wk-imagedialog-content-preview--filecontent {
    flex: 1 1;
    width: 100%;
    height: 78px;
    padding: 12px 0px 12px 20px;
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    background-color: rgb(247, 247, 247);
}

body[theme-mode=dark] .wk-imagedialog-content-preview--filecontent {
    background-color: var(--wk-color-secondary);
}

.wk-imagedialog-content-preview-file-icon {
    height: 78px;
    width: 78px;
    display: flex;
    align-items: center;
    border-radius: 0px 0px 0px 10px;
}

.wk-imagedialog-content-preview-file-thumbnail {
    width: 48px;
    height: 48px;
    margin: auto 16px auto auto;
}

.wk-imagedialog-content-preview--filecontent-name {
    color: var(--wk-text-item);
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

.wk-imagedialog-content-preview--filecontent-size {
    font-size: 12px;
    color: var(--wk-color-font-tip);
}

.wk-imagedialog-footer {
    margin-top: 28px;
    justify-content: flex-end;
    display: flex;
}

.wk-imagedialog-footer button{
    background-color: #fff;
    border: 1px solid #dee0e3;
    color: #1f2329;
    border-radius: 4px;
    height: 32px;
    min-width: 100px;
    padding: 0 16px;
    cursor: pointer;
}

.wk-imagedialog-footer-okbtn {
    margin-left: 16px;
    color: white !important;
    border: none !important;
}


.wk-favorites,
.wk-favritemain {
  --wk-favorite-card-background: #f5f5f5;
  --wk-favorite-muted: #999999;
  --wk-favorite-text: #333333;
  font-family: var(--wk-font-family);
}

.wk-favritemain {
  width: 100%;
  height: 100%;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: var(--wk-favorite-text);
}

.wk-favritemain-header {
  width: 100%;
  height: 80px;
  padding: 13px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #ffffff;
  box-shadow: inset 0 -0.6px 0 rgba(0, 0, 0, 0.05);
}

.wk-favritemain-header h1 {
  margin: 0;
  color: #000000;
  font: 500 18px/22px var(--wk-font-family);
}

.wk-favritemain-mobile-back {
  display: none;
}

.wk-favritemain-content {
  width: 100%;
  height: calc(100% - 80px);
  padding: 29px 30px 40px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: #ffffff;
}

.wk-favritemain.is-multi-select .wk-favritemain-content {
  padding-right: 20px;
  padding-bottom: 294px;
  padding-left: 20px;
}

.wk-favorite-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-favorite-load-more {
  display: block;
  min-width: 112px;
  height: 36px;
  margin: 8px auto 24px;
  padding: 0 20px;
  border: 0;
  border-radius: 18px;
  color: #7224ff;
  background: #f4edff;
  cursor: pointer;
}

.wk-favorite-load-more:disabled {
  color: #aaa;
  background: #f4f4f4;
  cursor: default;
}

.wk-favorite-list-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
}

.wk-favritemain.is-multi-select .wk-favorite-list-row {
  gap: 16px;
  cursor: pointer;
}

.wk-favorite-selector {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.wk-favorite-selector img {
  display: block;
}

.wk-favorite-card {
  width: 100%;
  min-width: 0;
  height: 73px;
  padding: 14px 12px;
  box-sizing: border-box;
  border-radius: 6px;
  background: var(--wk-favorite-card-background);
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

.wk-favorite-card.is-image,
.wk-favorite-card.is-video {
  height: 163px;
  padding-top: 12px;
}

.wk-favorite-card.is-file,
.wk-favorite-card.is-voice {
  height: 114px;
}

.wk-favorite-card.is-history {
  height: 122px;
  gap: 15px;
}

.wk-favorite-card-main {
  min-width: 0;
  min-height: 0;
  flex: 1 1;
  font: 400 15px/14px var(--wk-font-family);
}

.wk-favorite-card footer {
  width: 100%;
  height: 15px;
  flex: 0 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--wk-favorite-muted);
  font: 400 13px/15px var(--wk-font-family);
}

.wk-favorite-card footer span,
.wk-favorite-card footer time {
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-favorite-card-image-button {
  width: 106px;
  height: 106px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #d9d9d9;
  display: block;
  overflow: hidden;
  cursor: pointer;
}

.wk-favorite-card-image-button img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-favorite-card-resource-placeholder {
  width: 106px;
  height: 106px;
  border-radius: 2px;
  background: #d9d9d9;
  color: var(--wk-favorite-muted);
  display: grid;
  place-items: center;
  font-size: 13px;
}

.wk-favorite-card-video {
  width: 106px;
  height: 106px;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  background: #d9d9d9;
}

.wk-favorite-card-video video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.wk-favorite-card-video span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.wk-favorite-card-text {
  width: 100%;
  overflow: hidden;
  color: var(--wk-favorite-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-favorite-card-text a {
  color: inherit;
  text-decoration: none;
}

.wk-favorite-card-text a:hover {
  color: #6b10ff;
  text-decoration: underline;
}

.wk-favorite-card-resource-row {
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.wk-favorite-card-resource-row > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wk-favorite-card-resource-row strong,
.wk-favorite-card-resource-row span {
  overflow: hidden;
  color: var(--wk-favorite-text);
  font: 400 15px/16px var(--wk-font-family);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-favorite-card-resource-row > div > span {
  color: var(--wk-favorite-muted);
  font-size: 13px;
}

.wk-favorite-card-resource-row > img,
.wk-favorite-card-voice-tile {
  width: 55px;
  height: 55px;
  flex: 0 0 55px;
}

.wk-favorite-card-voice-tile {
  background: #f1f1f1;
  display: grid;
  place-items: center;
}

.wk-favorite-card-history {
  height: 64px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wk-favorite-card-history strong,
.wk-favorite-card-history span {
  overflow: hidden;
  color: var(--wk-favorite-text);
  font: 400 15px/14px var(--wk-font-family);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wk-favorite-card-history span {
  color: var(--wk-favorite-muted);
  font-size: 13px;
}

.wk-favorite-state {
  width: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--wk-favorite-muted);
  font-size: 14px;
}

.wk-favorite-state.is-error {
  color: #d94848;
}

.wk-favorite-state button {
  min-width: 88px;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: #6b10ff;
  color: #ffffff;
  cursor: pointer;
}

.wk-favorite-multi-toolbar {
  width: 100%;
  height: 264px;
  padding: 108px 12px;
  box-sizing: border-box;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  background: #ffffff;
}

.wk-favorite-multi-toolbar > div {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 88px;
}

.wk-favorite-multi-toolbar button {
  width: 32px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 12px;
  color: var(--wk-favorite-text);
  cursor: pointer;
  font: 500 16px/14px var(--wk-font-family);
  white-space: nowrap;
}

.wk-favorite-multi-toolbar button img {
  flex: none;
}

.wk-favorite-multi-toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.wk-favorite-multi-toolbar button.wk-favorite-multi-close {
  width: 20px;
  justify-content: center;
}

.wk-favritemain > .wk-contextmenus {
  width: 154px;
  min-width: 154px;
  padding: 10px 12px 8px;
  box-sizing: border-box;
  z-index: 1002;
  border-radius: 11px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.wk-favritemain > .wk-contextmenus ul {
  width: 130px;
}

.wk-favritemain > .wk-contextmenus li {
  width: 130px;
  height: 47px;
  padding: 16px 0;
  box-sizing: border-box;
  color: var(--wk-favorite-text);
  font: 400 15px/15px var(--wk-font-family);
}

.wk-favritemain > .wk-contextmenus li:nth-child(2),
.wk-favritemain > .wk-contextmenus li:nth-child(4) {
  box-shadow: inset 0 -0.6px 0 rgba(0, 0, 0, 0.05);
}

.wk-favritemain > .wk-contextmenus li:hover {
  background: #f5f5f5;
}

.wk-favritemain > .wk-contextmenus-mask {
  z-index: 1001;
}

/* 夜间模式（设计 949:18006 / 949:18388「收藏」夜间稿）：
   页面底 #1E1E1F、卡片面 #2F2F30、浮层面 #262628、控件 #444444、
   正文 #DFE2E6、次要 #999999。 */
body[theme-mode="dark"] .wk-favorites,
body[theme-mode="dark"] .wk-favritemain,
body[theme-mode="dark"] .wk-favritemain-header,
body[theme-mode="dark"] .wk-favritemain-content,
body[theme-mode="dark"] .wk-favorite-multi-toolbar {
  --wk-favorite-card-background: #2f2f30;
  --wk-favorite-muted: #999999;
  --wk-favorite-text: #dfe2e6;
  background: #1e1e1f;
}

body[theme-mode="dark"] .wk-favritemain-header {
  box-shadow: inset 0 -0.6px 0 #333333;
}

body[theme-mode="dark"] .wk-favritemain-header h1 {
  color: #dfe2e6;
}

body[theme-mode="dark"] .wk-favorite-card-voice-tile,
body[theme-mode="dark"] .wk-favorite-card-image-button,
body[theme-mode="dark"] .wk-favorite-card-resource-placeholder,
body[theme-mode="dark"] .wk-favorite-card-video {
  background: #444444;
}

body[theme-mode="dark"] .wk-favorite-card-text a:hover {
  color: #bc6cff;
}

body[theme-mode="dark"] .wk-favorite-load-more {
  color: #bc6cff;
  background: rgba(157, 38, 255, 0.16);
}

body[theme-mode="dark"] .wk-favorite-load-more:disabled {
  color: #999999;
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-favorite-state.is-error {
  color: #ff7878;
}

body[theme-mode="dark"] .wk-favritemain > .wk-contextmenus li:hover {
  background: #2f2f30;
}

body[theme-mode="dark"] .wk-favritemain > .wk-contextmenus li:nth-child(2),
body[theme-mode="dark"] .wk-favritemain > .wk-contextmenus li:nth-child(4) {
  box-shadow: inset 0 -0.6px 0 #444444;
}

body[theme-mode="dark"] .wk-favritemain > .wk-contextmenus {
  background: #262628;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}

@container wk-app-canvas (max-width: 640px) {
  .wk-favritemain-header {
    gap: 12px;
  }

  .wk-favritemain-mobile-back {
    width: 30px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
    color: inherit;
    cursor: pointer;
    font-size: 30px;
  }

  .wk-favritemain-content,
  .wk-favritemain.is-multi-select .wk-favritemain-content {
    padding-right: 16px;
    padding-left: 16px;
  }

  .wk-favritemain.is-multi-select .wk-favritemain-content {
    padding-bottom: 294px;
  }
}

.wk-favorite-send-toolbar {
  align-items: center;
  background: transparent;
  border: 0;
  color: #59636e;
  cursor: pointer;
  display: flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  width: 40px;
}

.wk-favorite-send-toolbar:hover {
  color: #8037c7;
}

.wk-favorite-send-modal .semi-modal {
  border-radius: 14px;
  width: min(760px, calc(100vw - 32px));
}

.wk-favorite-send-modal .semi-modal-content {
  border-radius: inherit;
  overflow: hidden;
}

.wk-favorite-send-modal .semi-modal-title {
  color: #20232a;
  font-size: 17px;
  font-weight: 600;
}

.wk-favorite-send-search {
  align-items: center;
  background: #f5f4f7;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #96909d;
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0 12px;
}

.wk-favorite-send-search:focus-within {
  background: #fff;
  border-color: rgba(128, 55, 199, 0.45);
}

.wk-favorite-send-search input {
  background: transparent;
  border: 0;
  color: #26232b;
  flex: 1 1;
  font-size: 14px;
  height: 38px;
  min-width: 0;
  outline: none;
}

.wk-favorite-send-layout {
  border: 1px solid #ece8f0;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  height: min(430px, calc(100vh - 260px));
  min-height: 330px;
  overflow: hidden;
}

.wk-favorite-send-categories {
  background: #faf9fb;
  border-right: 1px solid #ece8f0;
  overflow-y: auto;
  padding: 8px;
}

.wk-favorite-send-categories button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: #4d4853;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}

.wk-favorite-send-categories button:hover,
.wk-favorite-send-categories button.selected {
  background: #efe4fb;
  color: #8037c7;
}

.wk-favorite-send-categories small {
  color: #aaa4ae;
  font-size: 10px;
}

.wk-favorite-send-results {
  min-width: 0;
  overflow-y: auto;
  padding: 8px 14px;
}

.wk-favorite-send-list {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}

.wk-favorite-send-list > button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #2f2b33;
  cursor: pointer;
  display: flex;
  gap: 12px;
  min-height: 64px;
  padding: 8px;
  text-align: left;
  width: 100%;
}

.wk-favorite-send-list > button:hover {
  background: #faf7fd;
}

.wk-favorite-send-list > button.selected {
  background: #f5edfd;
  border-color: rgba(128, 55, 199, 0.34);
}

.wk-favorite-send-list > button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.wk-favorite-send-list img,
.wk-favorite-send-kind {
  align-items: center;
  background: #f0e5fa;
  border-radius: 8px;
  color: #8037c7;
  display: flex;
  flex: 0 0 48px;
  font-size: 12px;
  height: 48px;
  justify-content: center;
  -o-object-fit: cover;
     object-fit: cover;
  width: 48px;
}

.wk-favorite-send-copy {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  min-width: 0;
}

.wk-favorite-send-copy strong {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.wk-favorite-send-copy small {
  color: #97919d;
  font-size: 12px;
  margin-top: 4px;
}

.wk-favorite-send-list i {
  align-items: center;
  border: 1px solid #d6d0dc;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex: 0 0 20px;
  font-size: 12px;
  font-style: normal;
  height: 20px;
  justify-content: center;
}

.wk-favorite-send-list > button.selected i {
  background: #8037c7;
  border-color: #8037c7;
}

.wk-favorite-send-state {
  align-items: center;
  color: #99939f;
  display: flex;
  height: 100%;
  justify-content: center;
  text-align: center;
}

.wk-favorite-send-state.error {
  color: #df4f4f;
}

.wk-favorite-send-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.wk-favorite-send-footer > span {
  color: #99939f;
  font-size: 12px;
}

.wk-favorite-send-footer > div {
  display: flex;
  gap: 12px;
}

.wk-favorite-send-footer button {
  background: #fff;
  border: 1px solid #ded9e2;
  border-radius: 6px;
  color: #4d4853;
  cursor: pointer;
  height: 34px;
  min-width: 84px;
}

.wk-favorite-send-footer button:last-child {
  background: #8037c7;
  border-color: #8037c7;
  color: #fff;
}

.wk-favorite-send-footer button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

body[theme-mode="dark"] .wk-favorite-send-toolbar {
  color: #c6c0cc;
}

body[theme-mode="dark"] .wk-favorite-send-modal .semi-modal-title,
body[theme-mode="dark"] .wk-favorite-send-search input,
body[theme-mode="dark"] .wk-favorite-send-list > button {
  color: var(--wk-textcolor);
}

body[theme-mode="dark"] .wk-favorite-send-search,
body[theme-mode="dark"] .wk-favorite-send-categories {
  background: var(--wk-color-secondary-2);
}

body[theme-mode="dark"] .wk-favorite-send-layout,
body[theme-mode="dark"] .wk-favorite-send-categories {
  border-color: rgba(255, 255, 255, 0.1);
}

body[theme-mode="dark"] .wk-favorite-send-categories button:hover,
body[theme-mode="dark"] .wk-favorite-send-categories button.selected,
body[theme-mode="dark"] .wk-favorite-send-list > button:hover,
body[theme-mode="dark"] .wk-favorite-send-list > button.selected {
  background: rgba(128, 55, 199, 0.22);
}

body[theme-mode="dark"] .wk-favorite-send-footer button:first-child {
  background: var(--wk-color-secondary-2);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--wk-textcolor);
}

@media (max-width: 640px) {
  .wk-favorite-send-layout {
    grid-template-columns: 112px minmax(0, 1fr);
  }

  .wk-favorite-send-categories small,
  .wk-favorite-send-footer > span {
    display: none;
  }
}


.wk-p2pcall {
    width: 100%;
    height: 665px;
    overflow: hidden;
    background-color: rgb(0, 0, 0,0.90);
    position: relative;

}

.wk-p2pcall-localvideo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    border-radius: 8px;
    transition: all 250ms ease-in-out;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-p2pcall-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0px;
    pointer-events:none;
}

.wk-p2pcall-modal .semi-modal-content{
    padding: 0px !important;
}

.wk-p2pcall-modal .semi-modal-body-wrapper {
    margin: 0px;
}

.wk-p2pcall-userbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;

    opacity: 1;
    transition: opacity 500ms ease-in-out;
}

.wk-userbox-name, .wk-userbox-tip{
    font-size: 17px;
    font-weight: bold;
    color: white;
    margin-top: 10px;
}

.wk-userbox-tip {
    font-size: 15px;
    margin-top: 10px;
}

.wk-p2pcall-footer {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 0px;
    transition:all 250ms ease-in-out;
    transform: translateY(0px);
}

.wk-p2pcall-remotevideo {
    background-color: rgb(0, 0, 0,0.90);
    transition: all 250ms ease-in-out;
    border-radius: 8px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    opacity: 0;
    width: 120px;
    height: 160px;
    cursor: pointer;
    -o-object-fit: cover;
       object-fit: cover;

}

.wk-p2pcall .wk-p2pcall-footer {
    z-index: 999;
}

.wk-p2p-answering,.wk-p2p-talking .wk-p2pcall-userbox{
    opacity: 0;
}

.wk-p2p-answering,.wk-p2p-talking .wk-p2pcall-remotevideo{
    opacity: 1;
}

.wk-p2p-calltype-audio .wk-p2pcall-userbox {
    opacity: 1;
}

.wk-p2pcall-localvideo:hover .wk-p2pcall-footer,
.wk-p2pcall-remotevideo:hover .wk-p2pcall-footer,
.wk-p2p-answering:hover .wk-p2pcall-footer,
.wk-p2p-talking:hover .wk-p2pcall-footer {
  transform: translateY(0px);
}

.wk-p2p-calltype-audio video {
    visibility: hidden;
}



.wk-p2p-calling .wk-p2pcall-content {
    z-index: 1000;
}

.wk-p2p-talking .wk-p2pcall-footer {
    transform: translateY(150px);
}

.wk-p2p-calltype-audio .wk-p2pcall-footer {
    transform: translateY(0px);
}

.wk-p2p-changesmall {
    top: 20px;
    right: 20px;
    z-index: 998;
}


.wk-p2p-changebig {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 997;
}
.wk-call-btn {
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wk-call-btn button {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    border: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.wk-call-btn img {
    width: 32px;
    height: 32px;
}

.wk-call-btn .hangup {
    background-color: rgb(230, 90, 70);
}

.wk-call-btn .label {
    color: white;
    margin-top: 10px;
}

.wk-call-btn .answer {
    background-color: green;
}


.wk-message-callsystem {
    display: flex;
}

.wk-callsystem-content {
    margin-left: 5px;
    margin-right: 5px;
    opacity: 0.9;
}

.wk-callsystem-icon {
    opacity: 0.5;
}
.wk-conference-modal .semi-modal-content {
    padding: 0 !important;
    overflow: hidden;
    background: #15171c;
}
.wk-conference-modal .semi-modal-body-wrapper {
    margin: 0;
}

.wk-conference-selector {
    width: 520px;
    max-width: 100%;
    height: 620px;
    display: flex;
    flex-direction: column;
    background: #fff;
    background: var(--wk-color-secondary, #fff);
    color: #20232a;
    color: var(--wk-text-color, #20232a);
}

.wk-conference-selector-header,
.wk-conference-selector-footer {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(127, 127, 127, .18);
}

.wk-conference-selector-footer {
    border-top: 1px solid rgba(127, 127, 127, .18);
    border-bottom: 0;
    justify-content: flex-end;
    gap: 12px;
}

.wk-conference-selector-title {
    font-size: 19px;
    font-weight: 600;
}

.wk-conference-selector-tip {
    color: #8b9099;
    font-size: 13px;
}

.wk-conference-selector-list {
    flex: 1 1;
    overflow-y: auto;
    padding: 8px 12px;
}

.wk-conference-selector-member {
    width: 100%;
    height: 60px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: inherit;
    text-align: left;
}

.wk-conference-selector-member:hover,
.wk-conference-selector-member.is-selected {
    background: rgba(108, 44, 255, .09);
}

.wk-conference-selector-check {
    width: 20px;
    height: 20px;
    border: 1px solid #b7bbc4;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
}

.wk-conference-selector-member.is-selected .wk-conference-selector-check {
    border-color: #6c2cff;
    background: #6c2cff;
}

.wk-conference-avatar {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-conference-selector-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-conference-button {
    min-width: 92px;
    height: 38px;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.wk-conference-button.is-secondary {
    background: #eef0f4;
    color: #3d424b;
}

.wk-conference-button.is-primary {
    background: #6c2cff;
    color: #fff;
}

.wk-conference-button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.wk-conference-call {
    width: min(920px, 92vw);
    height: min(700px, 88vh);
    min-height: 560px;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: #15171c;
}

.wk-conference-call-header {
    height: 70px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1d2026;
}

.wk-conference-call-title {
    font-size: 19px;
    font-weight: 600;
}

.wk-conference-call-status {
    color: #aeb3bd;
    font-size: 13px;
}

.wk-conference-grid {
    flex: 1 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    grid-auto-rows: minmax(180px, 1fr);
    grid-gap: 12px;
    gap: 12px;
}

.wk-conference-tile {
    min-height: 180px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #252932;
}

.wk-conference-video {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-conference-avatar-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wk-conference-tile-avatar {
    width: 82px;
    height: 82px;
    border-radius: 18px;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-conference-tile-name {
    max-width: calc(100% - 24px);
    position: absolute;
    left: 12px;
    bottom: 10px;
    padding: 4px 8px;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0, 0, 0, .55);
    font-size: 13px;
}

.wk-conference-waiting {
    position: absolute;
    top: calc(50% + 52px);
    left: 0;
    right: 0;
    color: #aeb3bd;
    text-align: center;
    font-size: 13px;
}

.wk-conference-controls {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: #1d2026;
}

.wk-conference-control {
    min-width: 88px;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 22px;
    background: #343943;
    color: #fff;
    cursor: pointer;
}

.wk-conference-control.is-off {
    background: #565c68;
}

.wk-conference-control.is-hangup,
.wk-conference-round-button.is-danger {
    background: #e74c4c;
}

.wk-conference-fatal,
.wk-conference-empty {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #aeb3bd;
    text-align: center;
}

.wk-conference-error {
    padding: 8px 18px;
    color: #e74c4c;
    font-size: 13px;
    text-align: center;
}

.wk-conference-invite {
    width: 420px;
    max-width: 100%;
    height: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    background: linear-gradient(180deg, #242833 0%, #15171c 100%);
}

.wk-conference-invite-avatar {
    width: 108px;
    height: 108px;
    margin-top: 90px;
    border-radius: 24px;
    -o-object-fit: cover;
       object-fit: cover;
}

.wk-conference-invite-name {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
}

.wk-conference-invite-tip {
    margin-top: 10px;
    color: #b8bdc7;
}

.wk-conference-invite-actions {
    width: 100%;
    margin-top: auto;
    margin-bottom: 70px;
    display: flex;
    justify-content: space-around;
}

.wk-conference-round-button {
    width: 76px;
    height: 76px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
}

.wk-conference-round-button.is-answer {
    background: #32b768;
}

@media (max-width: 720px) {
    .wk-conference-call {
        width: 96vw;
        height: 90vh;
    }

    .wk-conference-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(150px, 1fr);
    }
}

/*
 * 聚声 Web 默认外观虽然沿用 ThemeMode.light 的历史命名，实际使用的是
 * 深色海军蓝界面。这里统一 Semi UI 的语义色，确保挂载到 body 的 Modal、
 * Toast、Notification、Popover 和表单控件与应用外壳使用同一套主题。
 */
body,
body[theme-mode="dark"] {
  --semi-color-primary: #b56bea;
  --semi-color-primary-hover: #c084fc;
  --semi-color-primary-active: #a855f7;
  --semi-color-primary-disabled: rgba(181, 107, 234, 0.36);
  --semi-color-primary-light-default: rgba(181, 107, 234, 0.18);
  --semi-color-primary-light-hover: rgba(181, 107, 234, 0.26);
  --semi-color-primary-light-active: rgba(181, 107, 234, 0.34);

  --semi-color-tertiary: #4e496d;
  --semi-color-tertiary-hover: #605a82;
  --semi-color-tertiary-active: #3d3958;
  --semi-color-tertiary-disabled: rgba(255, 255, 255, 0.12);
  --semi-color-tertiary-light-default: rgba(255, 255, 255, 0.08);
  --semi-color-tertiary-light-hover: rgba(255, 255, 255, 0.12);
  --semi-color-tertiary-light-active: rgba(255, 255, 255, 0.16);

  --semi-color-info: #7ab8ff;
  --semi-color-info-light-default: rgba(122, 184, 255, 0.16);
  --semi-color-info-light-hover: rgba(122, 184, 255, 0.24);
  --semi-color-info-light-active: rgba(122, 184, 255, 0.32);
  --semi-color-success: #57c96b;
  --semi-color-success-light-default: rgba(87, 201, 107, 0.16);
  --semi-color-success-light-hover: rgba(87, 201, 107, 0.24);
  --semi-color-success-light-active: rgba(87, 201, 107, 0.32);
  --semi-color-warning: #f5b94c;
  --semi-color-warning-light-default: rgba(245, 185, 76, 0.16);
  --semi-color-warning-light-hover: rgba(245, 185, 76, 0.24);
  --semi-color-warning-light-active: rgba(245, 185, 76, 0.32);
  --semi-color-danger: #ff6b6b;
  --semi-color-danger-light-default: rgba(255, 107, 107, 0.16);
  --semi-color-danger-light-hover: rgba(255, 107, 107, 0.24);
  --semi-color-danger-light-active: rgba(255, 107, 107, 0.32);

  --semi-color-focus-border: #c084fc;
  --semi-color-border: rgba(255, 255, 255, 0.13);
  --semi-color-overlay-bg: rgba(5, 4, 16, 0.74);
  --semi-color-fill-0: rgba(255, 255, 255, 0.07);
  --semi-color-fill-1: rgba(255, 255, 255, 0.11);
  --semi-color-fill-2: rgba(255, 255, 255, 0.16);
  --semi-color-disabled-text: rgba(255, 255, 255, 0.42);
  --semi-color-disabled-border: rgba(255, 255, 255, 0.09);
  --semi-color-disabled-bg: rgba(255, 255, 255, 0.1);
  --semi-color-disabled-fill: rgba(255, 255, 255, 0.06);

  --semi-color-bg-0: #0b0a1e;
  --semi-color-bg-1: #15132a;
  --semi-color-bg-2: #191730;
  --semi-color-bg-3: #201d3c;
  --semi-color-bg-4: #29254a;
  --semi-color-text-0: rgba(255, 255, 255, 0.94);
  --semi-color-text-1: rgba(255, 255, 255, 0.82);
  --semi-color-text-2: rgba(255, 255, 255, 0.66);
  --semi-color-text-3: rgba(255, 255, 255, 0.46);
  --semi-shadow-elevated: 0 18px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* 新版桌面端原型采用亮色工作台；深色模式继续使用上面的独立变量。 */
body:not([theme-mode="dark"]) {
  --semi-color-primary: #8b5cf6;
  --semi-color-primary-hover: #9f75f8;
  --semi-color-primary-active: #7c3aed;
  --semi-color-primary-disabled: rgba(139, 92, 246, 0.36);
  --semi-color-primary-light-default: #f3efff;
  --semi-color-primary-light-hover: #ece5ff;
  --semi-color-primary-light-active: #e2d8ff;
  --semi-color-tertiary: #6b7280;
  --semi-color-tertiary-hover: #4b5563;
  --semi-color-tertiary-active: #374151;
  --semi-color-border: #e7e7e7;
  --semi-color-overlay-bg: rgba(17, 24, 39, 0.45);
  --semi-color-fill-0: #f7f7f8;
  --semi-color-fill-1: #f1f2f4;
  --semi-color-fill-2: #e9eaed;
  --semi-color-disabled-text: #b6b6b6;
  --semi-color-disabled-border: #eeeeee;
  --semi-color-disabled-bg: #f5f5f5;
  --semi-color-disabled-fill: #f5f5f5;
  --semi-color-bg-0: #ffffff;
  --semi-color-bg-1: #ffffff;
  --semi-color-bg-2: #ffffff;
  --semi-color-bg-3: #f7f7f8;
  --semi-color-bg-4: #f0f1f3;
  --semi-color-text-0: #252525;
  --semi-color-text-1: #4b4b4b;
  --semi-color-text-2: #777777;
  --semi-color-text-3: #a3a3a3;
  --semi-shadow-elevated: 0 18px 48px rgba(31, 35, 48, 0.16),
    0 0 0 1px rgba(31, 35, 48, 0.04);
}

/*
 * 夜间模式统一使用设计包「微聚声原型设计-PC端夜间模式」的灰阶：
 * #1E1E1F 页面底、#262628 浮层、#2F2F30 卡片/弹窗、#444444 输入与选中，
 * 正文 #DFE2E6、占位 #999999，主色取 949:18384 的 #9D26FF。
 */
body[theme-mode="dark"] {
  --semi-color-primary: #9d26ff;
  --semi-color-primary-hover: #b45cff;
  --semi-color-primary-active: #8a17e6;
  --semi-color-primary-disabled: rgba(157, 38, 255, 0.36);
  --semi-color-primary-light-default: rgba(157, 38, 255, 0.18);
  --semi-color-primary-light-hover: rgba(157, 38, 255, 0.26);
  --semi-color-primary-light-active: rgba(157, 38, 255, 0.34);
  --semi-color-focus-border: #9d26ff;

  --semi-color-bg-0: #1e1e1f;
  --semi-color-bg-1: #262628;
  --semi-color-bg-2: #2f2f30;
  --semi-color-bg-3: #444444;
  --semi-color-bg-4: #444444;
  --semi-color-border: rgba(223, 226, 230, 0.1);
  --semi-color-fill-0: rgba(223, 226, 230, 0.06);
  --semi-color-fill-1: rgba(223, 226, 230, 0.1);
  --semi-color-fill-2: rgba(223, 226, 230, 0.16);

  --semi-color-text-0: #dfe2e6;
  --semi-color-text-1: rgba(223, 226, 230, 0.8);
  --semi-color-text-2: rgba(223, 226, 230, 0.6);
  --semi-color-text-3: #999999;
  --semi-color-disabled-text: rgba(223, 226, 230, 0.42);
}

/* 主操作保持聚声紫色品牌，禁用态仍可辨认但不会误导为可点击。 */
.semi-button-primary:not(.semi-button-light):not(.semi-button-borderless):not(
    .semi-button-outline
  ):not(.semi-button-disabled) {
  background: linear-gradient(90deg, #9b1fbd 0%, #631ebc 100%);
  background: var(
    --wk-confirm-btn-gradient,
    linear-gradient(90deg, #9b1fbd 0%, #631ebc 100%)
  );
  color: #fff;
}

.semi-button-primary:not(.semi-button-light):not(.semi-button-borderless):not(
    .semi-button-outline
  ):not(.semi-button-disabled):hover {
  filter: brightness(1.1);
}

.semi-button-primary:not(.semi-button-light):not(.semi-button-borderless):not(
    .semi-button-outline
  ):not(.semi-button-disabled):active {
  filter: brightness(0.92);
}

.semi-modal-footer
  .semi-button-tertiary.semi-button-light:not(.semi-button-disabled) {
  background: #201d3c;
  background: var(--wk-cancel-btn-gradient, #201d3c);
  color: var(--semi-color-text-0);
}

body:not([theme-mode="dark"])
  .semi-modal-footer
  .semi-button-tertiary.semi-button-light:not(.semi-button-disabled) {
  background: #f1f2f4;
  color: #444444;
}

.semi-modal-footer
  .semi-button-tertiary.semi-button-light:not(.semi-button-disabled):hover {
  background: #2c2850;
}

.semi-modal-footer
  .semi-button-tertiary.semi-button-light:not(.semi-button-disabled):active {
  background: #19172f;
}

/* 弹出层增加边界，避免深色面板和遮罩融在一起。 */
.semi-modal-content,
.semi-toast-content,
.semi-notification-notice {
  border: 1px solid var(--semi-color-border);
}

.semi-modal-content {
  background-color: var(--semi-color-bg-2);
  color: var(--semi-color-text-0);
}

/*
 * Figma 的正文与控件以 PingFang SC（苹方）为主。
 * macOS：优先系统苹方 PingFang SC。
 * Windows：无苹方时使用内置 WK UI Sans（Noto Sans SC / 思源黑体同族子集），
 * 再回退 Source Han Sans SC / 系统中文字体；Microsoft YaHei 仅作更后回退。
 */
@font-face {
  font-family: "WK UI Sans";
  src: url(../../static/media/wk-ui-noto-sans-sc.ac691026bf32b6bf5b89.woff2) format("woff2-variations");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

/* Figma 的概览数值与周期选项使用 Inter；固定自托管版本避免系统回退差异。 */
@font-face {
  font-family: "WK UI Inter";
  src: url(../../static/media/wk-ui-inter-regular.85c128721035823e5405.woff2) format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "WK UI Inter";
  src: url(../../static/media/wk-ui-inter-semibold.594041393209f0003754.woff2) format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --wk-font-family: "PingFang SC", "WK UI Sans", "Source Han Sans SC",
    "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --wk-font-data-latin: "WK UI Inter", var(--wk-font-family);
  --wk-font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace;
}

html,
body,
#root {
  font-family: "PingFang SC", "WK UI Sans", "Source Han Sans SC",
    "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-family: var(--wk-font-family);
}

/*
 * 「设置-通用」的字号档位落在 --wk-font-scale 上（appearance.ts 写到 <html>）。
 * 标准档为 1，等于浏览器默认的 16px，因此默认档位下这条规则不改变任何排版；
 * 组件里显式声明了 px 字号的文本不受影响，只有继承正文字号的文字会跟随缩放。
 */
body {
  font-size: calc(16px * 1);
  font-size: calc(16px * var(--wk-font-scale, 1));
}

button,
input,
textarea,
select {
  font-family: inherit;
}

/* Semi UI 在组件样式中直接声明 Inter，末端统一覆盖普通控件和 portal 内容。 */
body [class^="semi-"],
body [class*=" semi-"] {
  font-family: "PingFang SC", "WK UI Sans", "Source Han Sans SC",
    "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important;
  font-family: var(--wk-font-family) !important;
}

/* 代码高亮属于内容语义，不跟随正文中文字体。 */
body .semi-codeHighlight pre,
body .semi-codeHighlight code,
body .semi-codeHighlight-defaultTheme pre[class*="language-"],
body .semi-codeHighlight-defaultTheme code[class*="language-"] {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace !important;
  font-family: var(--wk-font-monospace) !important;
}

/* Hall 的结构化任务文本是代码式输入，不能被上面的 Semi UI 正文字体覆盖。 */
body .wk-hall-task-text-field .semi-input-textarea-wrapper,
body .wk-hall-task-text-field .semi-input-textarea {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace !important;
  font-family: var(--wk-font-monospace) !important;
}