:root,
:host {
  color-scheme: var(--mantine-color-scheme);
}

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

input,
button,
textarea,
select {
  font: inherit;
}

button,
select {
  text-transform: none;
}

body,
:host {
  margin: 0;
  font-family: var(--mantine-font-family);
  font-size: var(--mantine-font-size-md);
  line-height: var(--mantine-line-height);
  background-color: var(--mantine-color-body);
  color: var(--mantine-color-text);

  -webkit-font-smoothing: var(--mantine-webkit-font-smoothing);
  -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
}

@media screen and (max-device-width: 31.25em) {

body,
:host {
    -webkit-text-size-adjust: 100%
}
  }

@media (prefers-reduced-motion: reduce) {
    [data-respect-reduced-motion] [data-reduce-motion] {
      transition: none;
      animation: none;
    }
  }

[data-mantine-color-scheme='light'] .mantine-light-hidden {
    display: none;
}

[data-mantine-color-scheme='dark'] .mantine-dark-hidden {
    display: none;
}

.mantine-focus-auto:focus-visible {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

.mantine-focus-always:focus {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

.mantine-focus-never:focus {
    outline: none;
  }

.mantine-active:active {
    transform: translateY(calc(0.0625rem * var(--mantine-scale)));
  }

fieldset:disabled .mantine-active:active {
    transform: none;
  }

:where([dir="rtl"]) .mantine-rotate-rtl {
    transform: rotate(180deg);
}

/* This file is automatically generated, do not modify it directly. */
:root,
:host {
  --mantine-z-index-app: 100;
  --mantine-z-index-modal: 200;
  --mantine-z-index-popover: 300;
  --mantine-z-index-overlay: 400;
  --mantine-z-index-max: 9999;
  --mantine-scale: 1;
  --mantine-cursor-type: default;
  --mantine-webkit-font-smoothing: antialiased;
  --mantine-moz-font-smoothing: grayscale;
  --mantine-color-white: #fff;
  --mantine-color-black: #000;
  --mantine-line-height: 1.55;
  --mantine-font-family:
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji;
  --mantine-font-family-monospace:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  --mantine-font-family-headings:
    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji;
  --mantine-heading-font-weight: 700;
  --mantine-heading-text-wrap: wrap;
  --mantine-radius-default: calc(0.5rem * var(--mantine-scale));
  --mantine-primary-color-filled: var(--mantine-color-blue-filled);
  --mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);
  --mantine-primary-color-light: var(--mantine-color-blue-light);
  --mantine-primary-color-light-hover: var(--mantine-color-blue-light-hover);
  --mantine-primary-color-light-color: var(--mantine-color-blue-light-color);
  --mantine-breakpoint-xs: 36em;
  --mantine-breakpoint-sm: 48em;
  --mantine-breakpoint-md: 62em;
  --mantine-breakpoint-lg: 75em;
  --mantine-breakpoint-xl: 88em;
  --mantine-spacing-xs: calc(0.625rem * var(--mantine-scale));
  --mantine-spacing-sm: calc(0.75rem * var(--mantine-scale));
  --mantine-spacing-md: calc(1rem * var(--mantine-scale));
  --mantine-spacing-lg: calc(1.25rem * var(--mantine-scale));
  --mantine-spacing-xl: calc(2rem * var(--mantine-scale));
  --mantine-font-size-xs: calc(0.75rem * var(--mantine-scale));
  --mantine-font-size-sm: calc(0.875rem * var(--mantine-scale));
  --mantine-font-size-md: calc(1rem * var(--mantine-scale));
  --mantine-font-size-lg: calc(1.125rem * var(--mantine-scale));
  --mantine-font-size-xl: calc(1.25rem * var(--mantine-scale));
  --mantine-line-height-xs: 1.4;
  --mantine-line-height-sm: 1.45;
  --mantine-line-height-md: 1.55;
  --mantine-line-height-lg: 1.6;
  --mantine-line-height-xl: 1.65;
  --mantine-shadow-xs:
    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
      rgba(0, 0, 0, 0.05),
    0 calc(0.0625rem * var(--mantine-scale)) calc(0.125rem * var(--mantine-scale))
      rgba(0, 0, 0, 0.1);
  --mantine-shadow-sm:
    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
      rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--mantine-scale))
      calc(0.9375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)),
    rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--mantine-scale))
      calc(0.4375rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
  --mantine-shadow-md:
    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
      rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--mantine-scale))
      calc(1.5625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale)),
    rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--mantine-scale))
      calc(0.625rem * var(--mantine-scale)) calc(-0.3125rem * var(--mantine-scale));
  --mantine-shadow-lg:
    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
      rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--mantine-scale))
      calc(1.4375rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale)),
    rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale))
      calc(-0.4375rem * var(--mantine-scale));
  --mantine-shadow-xl:
    0 calc(0.0625rem * var(--mantine-scale)) calc(0.1875rem * var(--mantine-scale))
      rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--mantine-scale)) calc(1.75rem * var(--mantine-scale))
      calc(-0.4375rem * var(--mantine-scale)),
    rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--mantine-scale))
      calc(1.0625rem * var(--mantine-scale)) calc(-0.4375rem * var(--mantine-scale));
  --mantine-radius-xs: calc(0.125rem * var(--mantine-scale));
  --mantine-radius-sm: calc(0.25rem * var(--mantine-scale));
  --mantine-radius-md: calc(0.5rem * var(--mantine-scale));
  --mantine-radius-lg: calc(1rem * var(--mantine-scale));
  --mantine-radius-xl: calc(2rem * var(--mantine-scale));
  --mantine-font-weight-regular: 400;
  --mantine-font-weight-medium: 600;
  --mantine-font-weight-bold: 700;
  --mantine-primary-color-0: var(--mantine-color-blue-0);
  --mantine-primary-color-1: var(--mantine-color-blue-1);
  --mantine-primary-color-2: var(--mantine-color-blue-2);
  --mantine-primary-color-3: var(--mantine-color-blue-3);
  --mantine-primary-color-4: var(--mantine-color-blue-4);
  --mantine-primary-color-5: var(--mantine-color-blue-5);
  --mantine-primary-color-6: var(--mantine-color-blue-6);
  --mantine-primary-color-7: var(--mantine-color-blue-7);
  --mantine-primary-color-8: var(--mantine-color-blue-8);
  --mantine-primary-color-9: var(--mantine-color-blue-9);
  --mantine-color-dark-0: #c9c9c9;
  --mantine-color-dark-1: #b8b8b8;
  --mantine-color-dark-2: #828282;
  --mantine-color-dark-3: #696969;
  --mantine-color-dark-4: #424242;
  --mantine-color-dark-5: #3b3b3b;
  --mantine-color-dark-6: #2e2e2e;
  --mantine-color-dark-7: #242424;
  --mantine-color-dark-8: #1f1f1f;
  --mantine-color-dark-9: #141414;
  --mantine-color-gray-0: #f8f9fa;
  --mantine-color-gray-1: #f1f3f5;
  --mantine-color-gray-2: #e9ecef;
  --mantine-color-gray-3: #dee2e6;
  --mantine-color-gray-4: #ced4da;
  --mantine-color-gray-5: #adb5bd;
  --mantine-color-gray-6: #868e96;
  --mantine-color-gray-7: #495057;
  --mantine-color-gray-8: #343a40;
  --mantine-color-gray-9: #212529;
  --mantine-color-red-0: #fff5f5;
  --mantine-color-red-1: #ffe3e3;
  --mantine-color-red-2: #ffc9c9;
  --mantine-color-red-3: #ffa8a8;
  --mantine-color-red-4: #ff8787;
  --mantine-color-red-5: #ff6b6b;
  --mantine-color-red-6: #fa5252;
  --mantine-color-red-7: #f03e3e;
  --mantine-color-red-8: #e03131;
  --mantine-color-red-9: #c92a2a;
  --mantine-color-pink-0: #fff0f6;
  --mantine-color-pink-1: #ffdeeb;
  --mantine-color-pink-2: #fcc2d7;
  --mantine-color-pink-3: #faa2c1;
  --mantine-color-pink-4: #f783ac;
  --mantine-color-pink-5: #f06595;
  --mantine-color-pink-6: #e64980;
  --mantine-color-pink-7: #d6336c;
  --mantine-color-pink-8: #c2255c;
  --mantine-color-pink-9: #a61e4d;
  --mantine-color-grape-0: #f8f0fc;
  --mantine-color-grape-1: #f3d9fa;
  --mantine-color-grape-2: #eebefa;
  --mantine-color-grape-3: #e599f7;
  --mantine-color-grape-4: #da77f2;
  --mantine-color-grape-5: #cc5de8;
  --mantine-color-grape-6: #be4bdb;
  --mantine-color-grape-7: #ae3ec9;
  --mantine-color-grape-8: #9c36b5;
  --mantine-color-grape-9: #862e9c;
  --mantine-color-violet-0: #f3f0ff;
  --mantine-color-violet-1: #e5dbff;
  --mantine-color-violet-2: #d0bfff;
  --mantine-color-violet-3: #b197fc;
  --mantine-color-violet-4: #9775fa;
  --mantine-color-violet-5: #845ef7;
  --mantine-color-violet-6: #7950f2;
  --mantine-color-violet-7: #7048e8;
  --mantine-color-violet-8: #6741d9;
  --mantine-color-violet-9: #5f3dc4;
  --mantine-color-indigo-0: #edf2ff;
  --mantine-color-indigo-1: #dbe4ff;
  --mantine-color-indigo-2: #bac8ff;
  --mantine-color-indigo-3: #91a7ff;
  --mantine-color-indigo-4: #748ffc;
  --mantine-color-indigo-5: #5c7cfa;
  --mantine-color-indigo-6: #4c6ef5;
  --mantine-color-indigo-7: #4263eb;
  --mantine-color-indigo-8: #3b5bdb;
  --mantine-color-indigo-9: #364fc7;
  --mantine-color-blue-0: #e7f5ff;
  --mantine-color-blue-1: #d0ebff;
  --mantine-color-blue-2: #a5d8ff;
  --mantine-color-blue-3: #74c0fc;
  --mantine-color-blue-4: #4dabf7;
  --mantine-color-blue-5: #339af0;
  --mantine-color-blue-6: #228be6;
  --mantine-color-blue-7: #1c7ed6;
  --mantine-color-blue-8: #1971c2;
  --mantine-color-blue-9: #1864ab;
  --mantine-color-cyan-0: #e3fafc;
  --mantine-color-cyan-1: #c5f6fa;
  --mantine-color-cyan-2: #99e9f2;
  --mantine-color-cyan-3: #66d9e8;
  --mantine-color-cyan-4: #3bc9db;
  --mantine-color-cyan-5: #22b8cf;
  --mantine-color-cyan-6: #15aabf;
  --mantine-color-cyan-7: #1098ad;
  --mantine-color-cyan-8: #0c8599;
  --mantine-color-cyan-9: #0b7285;
  --mantine-color-teal-0: #e6fcf5;
  --mantine-color-teal-1: #c3fae8;
  --mantine-color-teal-2: #96f2d7;
  --mantine-color-teal-3: #63e6be;
  --mantine-color-teal-4: #38d9a9;
  --mantine-color-teal-5: #20c997;
  --mantine-color-teal-6: #12b886;
  --mantine-color-teal-7: #0ca678;
  --mantine-color-teal-8: #099268;
  --mantine-color-teal-9: #087f5b;
  --mantine-color-green-0: #ebfbee;
  --mantine-color-green-1: #d3f9d8;
  --mantine-color-green-2: #b2f2bb;
  --mantine-color-green-3: #8ce99a;
  --mantine-color-green-4: #69db7c;
  --mantine-color-green-5: #51cf66;
  --mantine-color-green-6: #40c057;
  --mantine-color-green-7: #37b24d;
  --mantine-color-green-8: #2f9e44;
  --mantine-color-green-9: #2b8a3e;
  --mantine-color-lime-0: #f4fce3;
  --mantine-color-lime-1: #e9fac8;
  --mantine-color-lime-2: #d8f5a2;
  --mantine-color-lime-3: #c0eb75;
  --mantine-color-lime-4: #a9e34b;
  --mantine-color-lime-5: #94d82d;
  --mantine-color-lime-6: #82c91e;
  --mantine-color-lime-7: #74b816;
  --mantine-color-lime-8: #66a80f;
  --mantine-color-lime-9: #5c940d;
  --mantine-color-yellow-0: #fff9db;
  --mantine-color-yellow-1: #fff3bf;
  --mantine-color-yellow-2: #ffec99;
  --mantine-color-yellow-3: #ffe066;
  --mantine-color-yellow-4: #ffd43b;
  --mantine-color-yellow-5: #fcc419;
  --mantine-color-yellow-6: #fab005;
  --mantine-color-yellow-7: #f59f00;
  --mantine-color-yellow-8: #f08c00;
  --mantine-color-yellow-9: #e67700;
  --mantine-color-orange-0: #fff4e6;
  --mantine-color-orange-1: #ffe8cc;
  --mantine-color-orange-2: #ffd8a8;
  --mantine-color-orange-3: #ffc078;
  --mantine-color-orange-4: #ffa94d;
  --mantine-color-orange-5: #ff922b;
  --mantine-color-orange-6: #fd7e14;
  --mantine-color-orange-7: #f76707;
  --mantine-color-orange-8: #e8590c;
  --mantine-color-orange-9: #d9480f;
  --mantine-h1-font-size: calc(2.125rem * var(--mantine-scale));
  --mantine-h1-line-height: 1.3;
  --mantine-h1-font-weight: 700;
  --mantine-h2-font-size: calc(1.625rem * var(--mantine-scale));
  --mantine-h2-line-height: 1.35;
  --mantine-h2-font-weight: 700;
  --mantine-h3-font-size: calc(1.375rem * var(--mantine-scale));
  --mantine-h3-line-height: 1.4;
  --mantine-h3-font-weight: 700;
  --mantine-h4-font-size: calc(1.125rem * var(--mantine-scale));
  --mantine-h4-line-height: 1.45;
  --mantine-h4-font-weight: 700;
  --mantine-h5-font-size: calc(1rem * var(--mantine-scale));
  --mantine-h5-line-height: 1.5;
  --mantine-h5-font-weight: 700;
  --mantine-h6-font-size: calc(0.875rem * var(--mantine-scale));
  --mantine-h6-line-height: 1.5;
  --mantine-h6-font-weight: 700;
}

:root[data-mantine-color-scheme='dark'],
:host([data-mantine-color-scheme='dark']) {
  --mantine-color-scheme: dark;
  --mantine-primary-color-contrast: var(--mantine-color-white);
  --mantine-color-bright: var(--mantine-color-white);
  --mantine-color-text: var(--mantine-color-dark-0);
  --mantine-color-body: var(--mantine-color-dark-7);
  --mantine-color-error: var(--mantine-color-red-8);
  --mantine-color-success: var(--mantine-color-teal-8);
  --mantine-color-placeholder: var(--mantine-color-dark-3);
  --mantine-color-anchor: var(--mantine-color-blue-4);
  --mantine-color-default: var(--mantine-color-dark-6);
  --mantine-color-default-hover: var(--mantine-color-dark-5);
  --mantine-color-default-color: var(--mantine-color-white);
  --mantine-color-default-border: var(--mantine-color-dark-4);
  --mantine-color-dimmed: var(--mantine-color-dark-2);
  --mantine-color-disabled: var(--mantine-color-dark-6);
  --mantine-color-disabled-color: var(--mantine-color-dark-3);
  --mantine-color-disabled-border: var(--mantine-color-dark-4);
  --mantine-color-dark-text: var(--mantine-color-dark-4);
  --mantine-color-dark-filled: var(--mantine-color-dark-8);
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-9);
  --mantine-color-dark-light: rgba(10, 10, 10, 1);
  --mantine-color-dark-light-hover: rgba(14, 14, 14, 1);
  --mantine-color-dark-light-color: var(--mantine-color-dark-0);
  --mantine-color-dark-outline: var(--mantine-color-dark-4);
  --mantine-color-dark-outline-hover: rgba(66, 66, 66, 0.05);
  --mantine-color-gray-text: var(--mantine-color-gray-4);
  --mantine-color-gray-filled: var(--mantine-color-gray-8);
  --mantine-color-gray-filled-hover: var(--mantine-color-gray-9);
  --mantine-color-gray-light: rgba(17, 19, 21, 1);
  --mantine-color-gray-light-hover: rgba(23, 26, 29, 1);
  --mantine-color-gray-light-color: var(--mantine-color-gray-0);
  --mantine-color-gray-outline: var(--mantine-color-gray-4);
  --mantine-color-gray-outline-hover: rgba(206, 212, 218, 0.05);
  --mantine-color-red-text: var(--mantine-color-red-4);
  --mantine-color-red-filled: var(--mantine-color-red-8);
  --mantine-color-red-filled-hover: var(--mantine-color-red-9);
  --mantine-color-red-light: rgba(101, 21, 21, 1);
  --mantine-color-red-light-hover: rgba(141, 29, 29, 1);
  --mantine-color-red-light-color: var(--mantine-color-red-0);
  --mantine-color-red-outline: var(--mantine-color-red-4);
  --mantine-color-red-outline-hover: rgba(255, 135, 135, 0.05);
  --mantine-color-pink-text: var(--mantine-color-pink-4);
  --mantine-color-pink-filled: var(--mantine-color-pink-8);
  --mantine-color-pink-filled-hover: var(--mantine-color-pink-9);
  --mantine-color-pink-light: rgba(83, 15, 39, 1);
  --mantine-color-pink-light-hover: rgba(116, 21, 54, 1);
  --mantine-color-pink-light-color: var(--mantine-color-pink-0);
  --mantine-color-pink-outline: var(--mantine-color-pink-4);
  --mantine-color-pink-outline-hover: rgba(247, 131, 172, 0.05);
  --mantine-color-grape-text: var(--mantine-color-grape-4);
  --mantine-color-grape-filled: var(--mantine-color-grape-8);
  --mantine-color-grape-filled-hover: var(--mantine-color-grape-9);
  --mantine-color-grape-light: rgba(67, 23, 78, 1);
  --mantine-color-grape-light-hover: rgba(94, 32, 109, 1);
  --mantine-color-grape-light-color: var(--mantine-color-grape-0);
  --mantine-color-grape-outline: var(--mantine-color-grape-4);
  --mantine-color-grape-outline-hover: rgba(218, 119, 242, 0.05);
  --mantine-color-violet-text: var(--mantine-color-violet-4);
  --mantine-color-violet-filled: var(--mantine-color-violet-8);
  --mantine-color-violet-filled-hover: var(--mantine-color-violet-9);
  --mantine-color-violet-light: rgba(48, 31, 98, 1);
  --mantine-color-violet-light-hover: rgba(67, 43, 137, 1);
  --mantine-color-violet-light-color: var(--mantine-color-violet-0);
  --mantine-color-violet-outline: var(--mantine-color-violet-4);
  --mantine-color-violet-outline-hover: rgba(151, 117, 250, 0.05);
  --mantine-color-indigo-text: var(--mantine-color-indigo-4);
  --mantine-color-indigo-filled: var(--mantine-color-indigo-8);
  --mantine-color-indigo-filled-hover: var(--mantine-color-indigo-9);
  --mantine-color-indigo-light: rgba(27, 40, 100, 1);
  --mantine-color-indigo-light-hover: rgba(38, 55, 139, 1);
  --mantine-color-indigo-light-color: var(--mantine-color-indigo-0);
  --mantine-color-indigo-outline: var(--mantine-color-indigo-4);
  --mantine-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);
  --mantine-color-blue-text: var(--mantine-color-blue-4);
  --mantine-color-blue-filled: var(--mantine-color-blue-8);
  --mantine-color-blue-filled-hover: var(--mantine-color-blue-9);
  --mantine-color-blue-light: rgba(12, 50, 86, 1);
  --mantine-color-blue-light-hover: rgba(17, 70, 120, 1);
  --mantine-color-blue-light-color: var(--mantine-color-blue-0);
  --mantine-color-blue-outline: var(--mantine-color-blue-4);
  --mantine-color-blue-outline-hover: rgba(77, 171, 247, 0.05);
  --mantine-color-cyan-text: var(--mantine-color-cyan-4);
  --mantine-color-cyan-filled: var(--mantine-color-cyan-8);
  --mantine-color-cyan-filled-hover: var(--mantine-color-cyan-9);
  --mantine-color-cyan-light: rgba(6, 57, 67, 1);
  --mantine-color-cyan-light-hover: rgba(8, 80, 93, 1);
  --mantine-color-cyan-light-color: var(--mantine-color-cyan-0);
  --mantine-color-cyan-outline: var(--mantine-color-cyan-4);
  --mantine-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);
  --mantine-color-teal-text: var(--mantine-color-teal-4);
  --mantine-color-teal-filled: var(--mantine-color-teal-8);
  --mantine-color-teal-filled-hover: var(--mantine-color-teal-9);
  --mantine-color-teal-light: rgba(4, 64, 46, 1);
  --mantine-color-teal-light-hover: rgba(6, 89, 64, 1);
  --mantine-color-teal-light-color: var(--mantine-color-teal-0);
  --mantine-color-teal-outline: var(--mantine-color-teal-4);
  --mantine-color-teal-outline-hover: rgba(56, 217, 169, 0.05);
  --mantine-color-green-text: var(--mantine-color-green-4);
  --mantine-color-green-filled: var(--mantine-color-green-8);
  --mantine-color-green-filled-hover: var(--mantine-color-green-9);
  --mantine-color-green-light: rgba(22, 69, 31, 1);
  --mantine-color-green-light-hover: rgba(30, 97, 43, 1);
  --mantine-color-green-light-color: var(--mantine-color-green-0);
  --mantine-color-green-outline: var(--mantine-color-green-4);
  --mantine-color-green-outline-hover: rgba(105, 219, 124, 0.05);
  --mantine-color-lime-text: var(--mantine-color-lime-4);
  --mantine-color-lime-filled: var(--mantine-color-lime-8);
  --mantine-color-lime-filled-hover: var(--mantine-color-lime-9);
  --mantine-color-lime-light: rgba(46, 74, 7, 1);
  --mantine-color-lime-light-hover: rgba(64, 104, 9, 1);
  --mantine-color-lime-light-color: var(--mantine-color-lime-0);
  --mantine-color-lime-outline: var(--mantine-color-lime-4);
  --mantine-color-lime-outline-hover: rgba(169, 227, 75, 0.05);
  --mantine-color-yellow-text: var(--mantine-color-yellow-4);
  --mantine-color-yellow-filled: var(--mantine-color-yellow-8);
  --mantine-color-yellow-filled-hover: var(--mantine-color-yellow-9);
  --mantine-color-yellow-light: rgba(115, 60, 0, 1);
  --mantine-color-yellow-light-hover: rgba(161, 83, 0, 1);
  --mantine-color-yellow-light-color: var(--mantine-color-yellow-0);
  --mantine-color-yellow-outline: var(--mantine-color-yellow-4);
  --mantine-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);
  --mantine-color-orange-text: var(--mantine-color-orange-4);
  --mantine-color-orange-filled: var(--mantine-color-orange-8);
  --mantine-color-orange-filled-hover: var(--mantine-color-orange-9);
  --mantine-color-orange-light: rgba(109, 36, 8, 1);
  --mantine-color-orange-light-hover: rgba(152, 50, 11, 1);
  --mantine-color-orange-light-color: var(--mantine-color-orange-0);
  --mantine-color-orange-outline: var(--mantine-color-orange-4);
  --mantine-color-orange-outline-hover: rgba(255, 169, 77, 0.05);
}

:root[data-mantine-color-scheme='light'],
:host([data-mantine-color-scheme='light']) {
  --mantine-color-scheme: light;
  --mantine-primary-color-contrast: var(--mantine-color-white);
  --mantine-color-bright: var(--mantine-color-black);
  --mantine-color-text: #000;
  --mantine-color-body: #fff;
  --mantine-color-error: var(--mantine-color-red-6);
  --mantine-color-success: var(--mantine-color-teal-8);
  --mantine-color-placeholder: var(--mantine-color-gray-5);
  --mantine-color-anchor: var(--mantine-color-blue-6);
  --mantine-color-default: var(--mantine-color-white);
  --mantine-color-default-hover: var(--mantine-color-gray-0);
  --mantine-color-default-color: var(--mantine-color-black);
  --mantine-color-default-border: var(--mantine-color-gray-4);
  --mantine-color-dimmed: var(--mantine-color-gray-6);
  --mantine-color-disabled: var(--mantine-color-gray-2);
  --mantine-color-disabled-color: var(--mantine-color-gray-5);
  --mantine-color-disabled-border: var(--mantine-color-gray-3);
  --mantine-color-dark-text: var(--mantine-color-dark-filled);
  --mantine-color-dark-filled: var(--mantine-color-dark-6);
  --mantine-color-dark-filled-hover: var(--mantine-color-dark-7);
  --mantine-color-dark-light: var(--mantine-color-dark-1);
  --mantine-color-dark-light-hover: var(--mantine-color-dark-2);
  --mantine-color-dark-light-color: var(--mantine-color-dark-9);
  --mantine-color-dark-outline: var(--mantine-color-dark-6);
  --mantine-color-dark-outline-hover: rgba(46, 46, 46, 0.05);
  --mantine-color-gray-text: var(--mantine-color-gray-filled);
  --mantine-color-gray-filled: var(--mantine-color-gray-6);
  --mantine-color-gray-filled-hover: var(--mantine-color-gray-7);
  --mantine-color-gray-light: var(--mantine-color-gray-1);
  --mantine-color-gray-light-hover: var(--mantine-color-gray-2);
  --mantine-color-gray-light-color: var(--mantine-color-gray-9);
  --mantine-color-gray-outline: var(--mantine-color-gray-6);
  --mantine-color-gray-outline-hover: rgba(134, 142, 150, 0.05);
  --mantine-color-red-text: var(--mantine-color-red-filled);
  --mantine-color-red-filled: var(--mantine-color-red-6);
  --mantine-color-red-filled-hover: var(--mantine-color-red-7);
  --mantine-color-red-light: var(--mantine-color-red-1);
  --mantine-color-red-light-hover: var(--mantine-color-red-2);
  --mantine-color-red-light-color: var(--mantine-color-red-9);
  --mantine-color-red-outline: var(--mantine-color-red-6);
  --mantine-color-red-outline-hover: rgba(250, 82, 82, 0.05);
  --mantine-color-pink-text: var(--mantine-color-pink-filled);
  --mantine-color-pink-filled: var(--mantine-color-pink-6);
  --mantine-color-pink-filled-hover: var(--mantine-color-pink-7);
  --mantine-color-pink-light: var(--mantine-color-pink-1);
  --mantine-color-pink-light-hover: var(--mantine-color-pink-2);
  --mantine-color-pink-light-color: var(--mantine-color-pink-9);
  --mantine-color-pink-outline: var(--mantine-color-pink-6);
  --mantine-color-pink-outline-hover: rgba(230, 73, 128, 0.05);
  --mantine-color-grape-text: var(--mantine-color-grape-filled);
  --mantine-color-grape-filled: var(--mantine-color-grape-6);
  --mantine-color-grape-filled-hover: var(--mantine-color-grape-7);
  --mantine-color-grape-light: var(--mantine-color-grape-1);
  --mantine-color-grape-light-hover: var(--mantine-color-grape-2);
  --mantine-color-grape-light-color: var(--mantine-color-grape-9);
  --mantine-color-grape-outline: var(--mantine-color-grape-6);
  --mantine-color-grape-outline-hover: rgba(190, 75, 219, 0.05);
  --mantine-color-violet-text: var(--mantine-color-violet-filled);
  --mantine-color-violet-filled: var(--mantine-color-violet-6);
  --mantine-color-violet-filled-hover: var(--mantine-color-violet-7);
  --mantine-color-violet-light: var(--mantine-color-violet-1);
  --mantine-color-violet-light-hover: var(--mantine-color-violet-2);
  --mantine-color-violet-light-color: var(--mantine-color-violet-9);
  --mantine-color-violet-outline: var(--mantine-color-violet-6);
  --mantine-color-violet-outline-hover: rgba(121, 80, 242, 0.05);
  --mantine-color-indigo-text: var(--mantine-color-indigo-filled);
  --mantine-color-indigo-filled: var(--mantine-color-indigo-6);
  --mantine-color-indigo-filled-hover: var(--mantine-color-indigo-7);
  --mantine-color-indigo-light: var(--mantine-color-indigo-1);
  --mantine-color-indigo-light-hover: var(--mantine-color-indigo-2);
  --mantine-color-indigo-light-color: var(--mantine-color-indigo-9);
  --mantine-color-indigo-outline: var(--mantine-color-indigo-6);
  --mantine-color-indigo-outline-hover: rgba(76, 110, 245, 0.05);
  --mantine-color-blue-text: var(--mantine-color-blue-filled);
  --mantine-color-blue-filled: var(--mantine-color-blue-6);
  --mantine-color-blue-filled-hover: var(--mantine-color-blue-7);
  --mantine-color-blue-light: var(--mantine-color-blue-1);
  --mantine-color-blue-light-hover: var(--mantine-color-blue-2);
  --mantine-color-blue-light-color: var(--mantine-color-blue-9);
  --mantine-color-blue-outline: var(--mantine-color-blue-6);
  --mantine-color-blue-outline-hover: rgba(34, 139, 230, 0.05);
  --mantine-color-cyan-text: var(--mantine-color-cyan-filled);
  --mantine-color-cyan-filled: var(--mantine-color-cyan-6);
  --mantine-color-cyan-filled-hover: var(--mantine-color-cyan-7);
  --mantine-color-cyan-light: var(--mantine-color-cyan-1);
  --mantine-color-cyan-light-hover: var(--mantine-color-cyan-2);
  --mantine-color-cyan-light-color: var(--mantine-color-cyan-9);
  --mantine-color-cyan-outline: var(--mantine-color-cyan-6);
  --mantine-color-cyan-outline-hover: rgba(21, 170, 191, 0.05);
  --mantine-color-teal-text: var(--mantine-color-teal-filled);
  --mantine-color-teal-filled: var(--mantine-color-teal-6);
  --mantine-color-teal-filled-hover: var(--mantine-color-teal-7);
  --mantine-color-teal-light: var(--mantine-color-teal-1);
  --mantine-color-teal-light-hover: var(--mantine-color-teal-2);
  --mantine-color-teal-light-color: var(--mantine-color-teal-9);
  --mantine-color-teal-outline: var(--mantine-color-teal-6);
  --mantine-color-teal-outline-hover: rgba(18, 184, 134, 0.05);
  --mantine-color-green-text: var(--mantine-color-green-filled);
  --mantine-color-green-filled: var(--mantine-color-green-6);
  --mantine-color-green-filled-hover: var(--mantine-color-green-7);
  --mantine-color-green-light: var(--mantine-color-green-1);
  --mantine-color-green-light-hover: var(--mantine-color-green-2);
  --mantine-color-green-light-color: var(--mantine-color-green-9);
  --mantine-color-green-outline: var(--mantine-color-green-6);
  --mantine-color-green-outline-hover: rgba(64, 192, 87, 0.05);
  --mantine-color-lime-text: var(--mantine-color-lime-filled);
  --mantine-color-lime-filled: var(--mantine-color-lime-6);
  --mantine-color-lime-filled-hover: var(--mantine-color-lime-7);
  --mantine-color-lime-light: var(--mantine-color-lime-1);
  --mantine-color-lime-light-hover: var(--mantine-color-lime-2);
  --mantine-color-lime-light-color: var(--mantine-color-lime-9);
  --mantine-color-lime-outline: var(--mantine-color-lime-6);
  --mantine-color-lime-outline-hover: rgba(130, 201, 30, 0.05);
  --mantine-color-yellow-text: var(--mantine-color-yellow-filled);
  --mantine-color-yellow-filled: var(--mantine-color-yellow-6);
  --mantine-color-yellow-filled-hover: var(--mantine-color-yellow-7);
  --mantine-color-yellow-light: var(--mantine-color-yellow-1);
  --mantine-color-yellow-light-hover: var(--mantine-color-yellow-2);
  --mantine-color-yellow-light-color: var(--mantine-color-yellow-9);
  --mantine-color-yellow-outline: var(--mantine-color-yellow-6);
  --mantine-color-yellow-outline-hover: rgba(250, 176, 5, 0.05);
  --mantine-color-orange-text: var(--mantine-color-orange-filled);
  --mantine-color-orange-filled: var(--mantine-color-orange-6);
  --mantine-color-orange-filled-hover: var(--mantine-color-orange-7);
  --mantine-color-orange-light: var(--mantine-color-orange-1);
  --mantine-color-orange-light-hover: var(--mantine-color-orange-2);
  --mantine-color-orange-light-color: var(--mantine-color-orange-9);
  --mantine-color-orange-outline: var(--mantine-color-orange-6);
  --mantine-color-orange-outline-hover: rgba(253, 126, 20, 0.05);
}

.m_d57069b5 {
  --scrollarea-scrollbar-size: calc(0.75rem * var(--mantine-scale));

  position: relative;
  overflow: hidden;
}

  .m_d57069b5:where([data-autosize]) .m_b1336c6 {
    min-width: min-content;
  }

.m_c0783ff9 {
  scrollbar-width: none;
  overscroll-behavior: var(--scrollarea-over-scroll-behavior);
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
}

.m_c0783ff9::-webkit-scrollbar {
    display: none;
  }

.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
      [data-offset-scrollbars='xy'],
      [data-offset-scrollbars='y'],
      [data-offset-scrollbars='present']
    ):where([data-vertical-hidden]) {
        padding-inline-end: 0;
        padding-inline-start: 0;
      }

.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
      [data-offset-scrollbars='xy'],
      [data-offset-scrollbars='y'],
      [data-offset-scrollbars='present']
    ):not([data-vertical-hidden]) {
        padding-inline-end: var(--scrollarea-scrollbar-size);
        padding-inline-start: unset;
      }

.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
      [data-offset-scrollbars='xy'],
      [data-offset-scrollbars='x'],
      [data-offset-scrollbars='present']
    ):where([data-horizontal-hidden]) {
        padding-bottom: 0;
      }

.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
      [data-offset-scrollbars='xy'],
      [data-offset-scrollbars='x'],
      [data-offset-scrollbars='present']
    ):not([data-horizontal-hidden]) {
        padding-bottom: var(--scrollarea-scrollbar-size);
      }

.m_f8f631dd {
  min-width: 100%;
  display: table;
}

.m_c44ba933 {
  user-select: none;
  touch-action: none;
  box-sizing: border-box;
  transition:
    background-color 150ms ease,
    opacity 150ms ease;

  padding: calc(var(--scrollarea-scrollbar-size) / 5);
  display: flex;
  background-color: transparent;
  flex-direction: row;
}

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_c44ba933:hover {
      background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='light']) .m_c44ba933:hover > .m_d8b5e363 {
        background-color: rgba(0, 0, 0, 0.5);
      }

    :where([data-mantine-color-scheme='dark']) .m_c44ba933:hover {
      background-color: var(--mantine-color-dark-8);
  }

      :where([data-mantine-color-scheme='dark']) .m_c44ba933:hover > .m_d8b5e363 {
        background-color: rgba(255, 255, 255, 0.5);
      }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_c44ba933:active {
      background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='light']) .m_c44ba933:active > .m_d8b5e363 {
        background-color: rgba(0, 0, 0, 0.5);
      }

    :where([data-mantine-color-scheme='dark']) .m_c44ba933:active {
      background-color: var(--mantine-color-dark-8);
  }

      :where([data-mantine-color-scheme='dark']) .m_c44ba933:active > .m_d8b5e363 {
        background-color: rgba(255, 255, 255, 0.5);
      }
}

.m_c44ba933:where([data-hidden], [data-state='hidden']) {
    display: none;
  }

.m_c44ba933:where([data-orientation='vertical']) {
    width: var(--scrollarea-scrollbar-size);
    top: 0;
    bottom: var(--sa-corner-width);
    inset-inline-end: 0;
  }

.m_c44ba933:where([data-orientation='horizontal']) {
    height: var(--scrollarea-scrollbar-size);
    flex-direction: column;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: var(--sa-corner-width);
  }

.m_d8b5e363 {
  flex: 1;
  border-radius: var(--scrollarea-scrollbar-size);
  position: relative;
  transition: background-color 150ms ease;
  overflow: hidden;
  opacity: var(--thumb-opacity);
}

.m_d8b5e363::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: calc(2.75rem * var(--mantine-scale));
    min-height: calc(2.75rem * var(--mantine-scale));
  }

:where([data-mantine-color-scheme='light']) .m_d8b5e363 {
    background-color: rgba(0, 0, 0, 0.4);
}

:where([data-mantine-color-scheme='dark']) .m_d8b5e363 {
    background-color: rgba(255, 255, 255, 0.4);
}

.m_21657268 {
  position: absolute;
  opacity: 0;
  transition: opacity 150ms ease;
  display: block;
  inset-inline-end: 0;
  bottom: 0;
}

:where([data-mantine-color-scheme='light']) .m_21657268 {
    background-color: var(--mantine-color-gray-0);
}

:where([data-mantine-color-scheme='dark']) .m_21657268 {
    background-color: var(--mantine-color-dark-8);
}

.m_21657268:where([data-hovered]) {
    opacity: 1;
  }

.m_21657268:where([data-hidden]) {
    display: none;
  }

.m_b1336c6 {
  min-width: 100%;
}

.m_87cf2631 {
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  appearance: none;
  font-size: var(--mantine-font-size-md);
  text-align: start;
  text-decoration: none;
  color: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.m_515a97f8 {
  border: 0;
  clip: rect(0 0 0 0);
  height: calc(0.0625rem * var(--mantine-scale));
  width: calc(0.0625rem * var(--mantine-scale));
  margin: calc(-0.0625rem * var(--mantine-scale));
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.m_1b7284a3 {
  --paper-radius: var(--mantine-radius-default);

  outline: 0;
  -webkit-tap-highlight-color: transparent;
  display: block;
  touch-action: manipulation;
  text-decoration: none;
  border-radius: var(--paper-radius);
  box-shadow: var(--paper-shadow);
  background-color: var(--mantine-color-body);
}

  [data-mantine-color-scheme='light'] .m_1b7284a3 {
    --paper-border-color: var(--mantine-color-gray-3);
}

  [data-mantine-color-scheme='dark'] .m_1b7284a3 {
    --paper-border-color: var(--mantine-color-dark-4);
}

  .m_1b7284a3:where([data-with-border]) {
    border: calc(0.0625rem * var(--mantine-scale)) solid var(--paper-border-color);
  }

.m_9814e45f {
  inset: 0;
  position: absolute;
  background: var(--overlay-bg, rgba(0, 0, 0, 0.6));
  -webkit-backdrop-filter: var(--overlay-filter);
  backdrop-filter: var(--overlay-filter);
  border-radius: var(--overlay-radius, 0);
  z-index: var(--overlay-z-index);
}

  .m_9814e45f:where([data-fixed]) {
    position: fixed;
  }

  .m_9814e45f:where([data-center]) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

.m_38a85659 {
  position: absolute;
  border: 1px solid var(--popover-border-color);
  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
  box-shadow: var(--popover-shadow, none);
  border-radius: var(--popover-radius, var(--mantine-radius-default));
}

  .m_38a85659:where([data-fixed]) {
    position: fixed;
  }

  .m_38a85659:focus {
    outline: none;
  }

  :where([data-mantine-color-scheme='light']) .m_38a85659 {
    --popover-border-color: var(--mantine-color-gray-2);
    background-color: var(--mantine-color-white);
}

  :where([data-mantine-color-scheme='dark']) .m_38a85659 {
    --popover-border-color: var(--mantine-color-dark-4);
    background-color: var(--mantine-color-dark-6);
}

.m_a31dc6c1 {
  background-color: inherit;
  border: 1px solid var(--popover-border-color);
  z-index: 1;
}

.m_3d7bc908 {
  position: fixed;
  inset: 0;
}

.m_5ae2e3c {
  --loader-size-xs: calc(1.125rem * var(--mantine-scale));
  --loader-size-sm: calc(1.375rem * var(--mantine-scale));
  --loader-size-md: calc(2.25rem * var(--mantine-scale));
  --loader-size-lg: calc(2.75rem * var(--mantine-scale));
  --loader-size-xl: calc(3.625rem * var(--mantine-scale));
  --loader-size: var(--loader-size-md);
  --loader-color: var(--mantine-primary-color-filled);
}

/* ----- Bars loader ----- */
@keyframes m_5d2b3b9d {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  50%,
  100% {
    transform: scale(1);
  }
}

.m_7a2bd4cd {
  position: relative;
  width: var(--loader-size);
  height: var(--loader-size);
  display: flex;
  gap: calc(var(--loader-size) / 5);
}

.m_870bb79 {
  flex: 1;
  background: var(--loader-color);
  animation: m_5d2b3b9d 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  border-radius: calc(0.125rem * var(--mantine-scale));
}

.m_870bb79:nth-of-type(1) {
    animation-delay: -240ms;
  }

.m_870bb79:nth-of-type(2) {
    animation-delay: -120ms;
  }

.m_870bb79:nth-of-type(3) {
    animation-delay: 0;
  }

/* ----- Dots loader ----- */
@keyframes m_aac34a1 {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.6);
    opacity: 0.5;
  }
}

.m_4e3f22d7 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--loader-size) / 10);
  position: relative;
  width: var(--loader-size);
  height: var(--loader-size);
}

.m_870c4af {
  width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
  height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
  border-radius: 50%;
  background: var(--loader-color);
  animation: m_aac34a1 0.8s infinite linear;
}

.m_870c4af:nth-child(2) {
    animation-delay: 0.4s;
  }

/* ----- Oval loader ----- */
@keyframes m_f8e89c4b {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.m_b34414df {
  display: inline-block;
  width: var(--loader-size);
  height: var(--loader-size);
}

.m_b34414df::after {
    content: '';
    display: block;
    width: var(--loader-size);
    height: var(--loader-size);
    border-radius: calc(625rem * var(--mantine-scale));
    border-width: calc(var(--loader-size) / 8);
    border-style: solid;
    border-color: var(--loader-color) var(--loader-color) var(--loader-color) transparent;
    animation: m_f8e89c4b 1.2s linear infinite;
  }

.m_8d3f4000 {
  --ai-size-xs: calc(1.125rem * var(--mantine-scale));
  --ai-size-sm: calc(1.375rem * var(--mantine-scale));
  --ai-size-md: calc(1.75rem * var(--mantine-scale));
  --ai-size-lg: calc(2.125rem * var(--mantine-scale));
  --ai-size-xl: calc(2.75rem * var(--mantine-scale));

  --ai-size-input-xs: calc(1.875rem * var(--mantine-scale));
  --ai-size-input-sm: calc(2.25rem * var(--mantine-scale));
  --ai-size-input-md: calc(2.625rem * var(--mantine-scale));
  --ai-size-input-lg: calc(3.125rem * var(--mantine-scale));
  --ai-size-input-xl: calc(3.75rem * var(--mantine-scale));

  --ai-size: var(--ai-size-md);
  --ai-color: var(--mantine-color-white);

  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
  overflow: hidden;

  width: var(--ai-size);
  height: var(--ai-size);
  min-width: var(--ai-size);
  min-height: var(--ai-size);
  border-radius: var(--ai-radius, var(--mantine-radius-default));
  background: var(--ai-bg, var(--mantine-primary-color-filled));
  color: var(--ai-color, var(--mantine-color-white));
  border: var(--ai-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
  cursor: pointer;
}

  @media (hover: hover) {
    .m_8d3f4000:hover:where(:not([data-loading], :disabled, [data-disabled])) {
      background-color: var(--ai-hover, var(--mantine-primary-color-filled-hover));
      color: var(--ai-hover-color, var(--ai-color));
    }
}

  @media (hover: none) {
    .m_8d3f4000:active:where(:not([data-loading], :disabled, [data-disabled])) {
      background-color: var(--ai-hover, var(--mantine-primary-color-filled-hover));
      color: var(--ai-hover-color, var(--ai-color));
    }
}

  .m_8d3f4000[data-loading] {
    cursor: not-allowed;
  }

  .m_8d3f4000[data-loading] .m_8d3afb97 {
      opacity: 0;
      transform: translateY(100%);
    }

  .m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
    cursor: not-allowed;
    border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
    color: var(--mantine-color-disabled-color);
    background: var(--mantine-color-disabled);
  }

  .m_8d3f4000:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])):active {
      transform: none;
    }

.m_302b9fb1 {
  inset: calc(-0.0625rem * var(--mantine-scale));
  position: absolute;
  border-radius: var(--ai-radius, var(--mantine-radius-default));
  display: flex;
  align-items: center;
  justify-content: center;
}

:where([data-mantine-color-scheme='light']) .m_302b9fb1 {
    background-color: rgba(255, 255, 255, 0.15);
}

:where([data-mantine-color-scheme='dark']) .m_302b9fb1 {
    background-color: rgba(0, 0, 0, 0.15);
}

.m_1a0f1b21 {
  --ai-border-width: calc(0.0625rem * var(--mantine-scale));
  display: flex;
}

.m_1a0f1b21 :where(*):focus {
      position: relative;
      z-index: 1;
    }

.m_1a0f1b21[data-orientation='horizontal'] {
    flex-direction: row;
  }

.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):first-child {
        border-end-end-radius: 0;
        border-start-end-radius: 0;
        border-inline-end-width: calc(var(--ai-border-width) / 2);
      }

.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):last-child {
        border-end-start-radius: 0;
        border-start-start-radius: 0;
        border-inline-start-width: calc(var(--ai-border-width) / 2);
      }

.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
        border-radius: 0;
        border-inline-width: calc(var(--ai-border-width) / 2);
      }

.m_1a0f1b21[data-orientation='vertical'] {
    flex-direction: column;
  }

.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):first-child {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        border-bottom-width: calc(var(--ai-border-width) / 2);
      }

.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):last-child {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        border-top-width: calc(var(--ai-border-width) / 2);
      }

.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
        border-radius: 0;
        border-bottom-width: calc(var(--ai-border-width) / 2);
        border-top-width: calc(var(--ai-border-width) / 2);
      }

.m_8d3afb97 {
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 150ms ease,
    opacity 100ms ease;
  width: 100%;
  height: 100%;
}

.m_437b6484 {
  --section-height-xs: calc(1.125rem * var(--mantine-scale));
  --section-height-sm: calc(1.375rem * var(--mantine-scale));
  --section-height-md: calc(1.75rem * var(--mantine-scale));
  --section-height-lg: calc(2.125rem * var(--mantine-scale));
  --section-height-xl: calc(2.75rem * var(--mantine-scale));

  --section-height-input-xs: calc(1.875rem * var(--mantine-scale));
  --section-height-input-sm: calc(2.25rem * var(--mantine-scale));
  --section-height-input-md: calc(2.625rem * var(--mantine-scale));
  --section-height-input-lg: calc(3.125rem * var(--mantine-scale));
  --section-height-input-xl: calc(3.75rem * var(--mantine-scale));

  --section-padding-x-xs: calc(0.375rem * var(--mantine-scale));
  --section-padding-x-sm: calc(0.5rem * var(--mantine-scale));
  --section-padding-x-md: calc(0.625rem * var(--mantine-scale));
  --section-padding-x-lg: calc(0.75rem * var(--mantine-scale));
  --section-padding-x-xl: calc(1rem * var(--mantine-scale));

  --section-height: var(--section-height-sm);
  --section-padding-x: var(--section-padding-x-sm);
  --section-color: var(--mantine-color-white);

  font-weight: var(--mantine-font-weight-medium);
  width: auto;
  border-radius: var(--section-radius, var(--mantine-radius-default));
  font-size: var(--section-fz, var(--mantine-font-size-sm));
  background: var(--section-bg, var(--mantine-primary-color-filled));
  border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
  color: var(--section-color, var(--mantine-color-white));
  height: var(--section-height, var(--section-height-sm));
  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m_86a44da5 {
  --cb-size-xs: calc(1.125rem * var(--mantine-scale));
  --cb-size-sm: calc(1.375rem * var(--mantine-scale));
  --cb-size-md: calc(1.75rem * var(--mantine-scale));
  --cb-size-lg: calc(2.125rem * var(--mantine-scale));
  --cb-size-xl: calc(2.75rem * var(--mantine-scale));

  --cb-size: var(--cb-size-md);
  --cb-icon-size: 70%;
  --cb-radius: var(--mantine-radius-default);

  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;

  width: var(--cb-size);
  height: var(--cb-size);
  min-width: var(--cb-size);
  min-height: var(--cb-size);
  border-radius: var(--cb-radius);
}

  :where([data-mantine-color-scheme='light']) .m_86a44da5 {
    color: var(--mantine-color-gray-7);
}

  :where([data-mantine-color-scheme='dark']) .m_86a44da5 {
    color: var(--mantine-color-dark-1);
}

  .m_86a44da5[data-disabled],
  .m_86a44da5:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_220c80f2:where(:not([data-disabled], :disabled)):hover {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):hover {
      background-color: var(--mantine-color-dark-6);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_220c80f2:where(:not([data-disabled], :disabled)):active {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_220c80f2:where(:not([data-disabled], :disabled)):active {
      background-color: var(--mantine-color-dark-6);
  }
}

.m_4081bf90 {
  display: flex;
  flex-direction: row;
  flex-wrap: var(--group-wrap, wrap);
  justify-content: var(--group-justify, flex-start);
  align-items: var(--group-align, center);
  gap: var(--group-gap, var(--mantine-spacing-md));
}

  .m_4081bf90:where([data-grow]) > * {
      flex-grow: 1;
      max-width: var(--group-child-width);
    }

.m_615af6c9 {
  line-height: 1;
  padding: 0;
  margin: 0;
  font-weight: var(--mantine-font-weight-regular);
  font-size: var(--mantine-font-size-md);
}

.m_b5489c3c {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--mb-padding, var(--mantine-spacing-md));
  padding-inline-end: calc(var(--mb-padding, var(--mantine-spacing-md)) - calc(0.3125rem * var(--mantine-scale)));
  position: sticky;
  top: 0;
  background-color: var(--mantine-color-body);
  z-index: 1000;
  min-height: calc(3.75rem * var(--mantine-scale));
  transition: padding-inline-end 100ms;
}

.m_60c222c7 {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: var(--mb-z-index);
  pointer-events: none;
}

.m_fd1ab0aa {
  pointer-events: all;
  box-shadow: var(--mb-shadow, var(--mantine-shadow-xl));
}

.m_fd1ab0aa [data-mantine-scrollbar] {
    z-index: 1001;
  }

[data-offset-scrollbars] .m_fd1ab0aa:has([data-mantine-scrollbar]) .m_b5489c3c {
    padding-inline-end: calc(var(--mb-padding, var(--mantine-spacing-md)) + calc(0.3125rem * var(--mantine-scale)));
  }

.m_606cb269 {
  margin-inline-start: auto;
}

.m_5df29311 {
  padding: var(--mb-padding, var(--mantine-spacing-md));
  padding-top: var(--mb-padding, var(--mantine-spacing-md));
}

.m_5df29311:where(:not(:only-child)) {
    padding-top: 0;
  }

.m_6c018570 {
  position: relative;
  margin-top: var(--input-margin-top, 0rem);
  margin-bottom: var(--input-margin-bottom, 0rem);

  --input-height-xs: calc(1.875rem * var(--mantine-scale));
  --input-height-sm: calc(2.25rem * var(--mantine-scale));
  --input-height-md: calc(2.625rem * var(--mantine-scale));
  --input-height-lg: calc(3.125rem * var(--mantine-scale));
  --input-height-xl: calc(3.75rem * var(--mantine-scale));

  --input-padding-y-xs: calc(0.3125rem * var(--mantine-scale));
  --input-padding-y-sm: calc(0.375rem * var(--mantine-scale));
  --input-padding-y-md: calc(0.5rem * var(--mantine-scale));
  --input-padding-y-lg: calc(0.625rem * var(--mantine-scale));
  --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale));

  --input-height: var(--input-height-sm);
  --input-radius: var(--mantine-radius-default);

  --input-cursor: text;
  --input-line-height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
  --input-padding: calc(var(--input-height) / 3);
  --input-padding-inline-start: var(--input-padding);
  --input-padding-inline-end: var(--input-padding);
  --input-placeholder-color: var(--mantine-color-placeholder);
  --input-color: var(--mantine-color-text);
  --input-disabled-bg: var(--mantine-color-disabled);
  --input-disabled-color: var(--mantine-color-disabled-color);

  --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - calc(0.125rem * var(--mantine-scale))));

  --input-right-section-size: var(
    --input-right-section-width,
    calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)))
  );

  --input-size: var(--input-height);

  --section-y: calc(0.0625rem * var(--mantine-scale));
  --left-section-start: calc(0.0625rem * var(--mantine-scale));
  --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);

  --right-section-end: calc(0.0625rem * var(--mantine-scale));
  --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
}

  .m_6c018570[data-variant='unstyled'] {
    --input-padding: 0;
    --input-padding-y: 0;
    --input-padding-inline-start: 0;
    --input-padding-inline-end: 0;
  }

  .m_6c018570[data-pointer] {
    --input-cursor: pointer;
  }

  .m_6c018570[data-with-bottom-section] {
    --input-bottom-section-height: calc(1.75rem * var(--mantine-scale));
  }

  .m_6c018570[data-multiline] {
    --input-padding-y-xs: calc(0.28125rem * var(--mantine-scale));
    --input-padding-y-sm: calc(0.34375rem * var(--mantine-scale));
    --input-padding-y-md: calc(0.4375rem * var(--mantine-scale));
    --input-padding-y-lg: calc(0.59375rem * var(--mantine-scale));
    --input-padding-y-xl: calc(0.8125rem * var(--mantine-scale));

    --input-size: auto;
    --input-line-height: var(--mantine-line-height);
  }

  .m_6c018570[data-with-left-section] {
    --input-padding-inline-start: var(--input-left-section-size);
  }

  .m_6c018570[data-with-right-section] {
    --input-padding-inline-end: var(--input-right-section-size);
  }

  .m_6c018570[data-size='xs'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
        --input-padding-inline-end: calc(2.5625rem * var(--mantine-scale));
      }

  .m_6c018570[data-size='sm'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
        --input-padding-inline-end: calc(3.125rem * var(--mantine-scale));
      }

  .m_6c018570[data-size='md'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
        --input-padding-inline-end: calc(3.75rem * var(--mantine-scale));
      }

  .m_6c018570[data-size='lg'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
        --input-padding-inline-end: calc(4.5rem * var(--mantine-scale));
      }

  .m_6c018570[data-size='xl'] .m_6c018570[data-with-right-section]:has([data-combined-clear-section]) {
        --input-padding-inline-end: calc(5.5625rem * var(--mantine-scale));
      }

  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='default'] {
      --input-bd: var(--mantine-color-gray-4);
      --input-bg: var(--mantine-color-white);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='filled'] {
      --input-bd: transparent;
      --input-bg: var(--mantine-color-gray-1);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='light'] .m_6c018570[data-variant='unstyled'] {
      --input-bd: transparent;
      --input-bg: transparent;
      --input-bd-focus: transparent;
    }

  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='default'] {
      --input-bd: var(--mantine-color-dark-4);
      --input-bg: var(--mantine-color-dark-6);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='filled'] {
      --input-bd: transparent;
      --input-bg: var(--mantine-color-dark-5);
      --input-bd-focus: var(--mantine-primary-color-filled);
    }

  [data-mantine-color-scheme='dark'] .m_6c018570[data-variant='unstyled'] {
      --input-bd: transparent;
      --input-bg: transparent;
      --input-bd-focus: transparent;
    }

  [data-mantine-color-scheme] .m_6c018570[data-error]:not([data-variant='unstyled']) {
      --input-bd: var(--mantine-color-error);
    }

  [data-mantine-color-scheme] .m_6c018570[data-error] {

    --input-color: var(--mantine-color-error);
    --input-placeholder-color: var(--mantine-color-error);
    --input-section-color: var(--mantine-color-error);
}

  [data-mantine-color-scheme] .m_6c018570[data-success]:not([data-variant='unstyled']) {
      --input-bd: var(--mantine-color-success);
    }

  [data-mantine-color-scheme] .m_6c018570[data-success] {

    --input-section-color: var(--mantine-color-success);
}

  :where([dir="rtl"]) .m_6c018570 {
    --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
    --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
}

  .m_6c018570[dir='ltr'] {
    --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
    --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
  }

.m_8fb7ebe7 {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  resize: var(--input-resize, none);
  display: block;
  width: 100%;
  transition: border-color 100ms ease;

  text-align: var(--input-text-align, start);
  color: var(--input-color);
  border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
  background-color: var(--input-bg);
  font-family: var(--input-font-family, var(--mantine-font-family));
  height: var(--input-size);
  min-height: var(--input-height);
  line-height: var(--input-line-height);
  font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));
  border-radius: var(--input-radius);
  padding-inline-start: var(--input-padding-inline-start);
  padding-inline-end: var(--input-padding-inline-end);
  padding-top: var(--input-padding-y, 0rem);
  padding-bottom: var(--input-padding-y, 0rem);
  cursor: var(--input-cursor);
  overflow: var(--input-overflow);
}

/* Used as data attribute in Textarea component, does not have associated prop on the Input component */

.m_8fb7ebe7[data-no-overflow] {
    --input-overflow: hidden;
  }

/* Used as data attribute in JsonInput component, does not have associated prop on the Input component */

.m_8fb7ebe7[data-monospace] {
    --input-font-family: var(--mantine-font-family-monospace);
    --_input-fz: calc(var(--input-fz) - calc(0.125rem * var(--mantine-scale)));
  }

.m_8fb7ebe7:focus,
  .m_8fb7ebe7:focus-within {
    outline: none;
    --input-bd: var(--input-bd-focus);
  }

.m_6c018570[data-error] .m_8fb7ebe7:focus, .m_6c018570[data-error] .m_8fb7ebe7:focus-within {
      --input-bd: var(--mantine-color-error);
    }

.m_6c018570[data-success] .m_8fb7ebe7:focus, .m_6c018570[data-success] .m_8fb7ebe7:focus-within {
      --input-bd: var(--mantine-color-success);
    }

.m_8fb7ebe7::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
  }

.m_8fb7ebe7::-webkit-inner-spin-button,
  .m_8fb7ebe7::-webkit-outer-spin-button,
  .m_8fb7ebe7::-webkit-search-decoration,
  .m_8fb7ebe7::-webkit-search-cancel-button,
  .m_8fb7ebe7::-webkit-search-results-button,
  .m_8fb7ebe7::-webkit-search-results-decoration {
    appearance: none;
  }

.m_8fb7ebe7[type='number'] {
    -moz-appearance: textfield;
  }

.m_8fb7ebe7:disabled,
  .m_8fb7ebe7[data-disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-color);
  }

/* Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported */

.m_8fb7ebe7:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-color);
  }

.m_8fb7ebe7[readonly] {
    caret-color: transparent;
  }

[data-with-bottom-section] .m_8fb7ebe7 {
    padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));
  }

.m_93f4ed57 {
  position: absolute;
  bottom: calc(0.0625rem * var(--mantine-scale));
  left: calc(0.0625rem * var(--mantine-scale));
  right: calc(0.0625rem * var(--mantine-scale));
  height: var(--input-bottom-section-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-inline: var(--input-padding);
  border-radius: 0 0 var(--input-radius) var(--input-radius);
  pointer-events: all;
  color: var(--mantine-color-dimmed);
  font-size: var(--input-fz, var(--mantine-font-size-sm));
}

.m_82577fc2 {
  pointer-events: var(--section-pointer-events);
  position: absolute;
  z-index: 1;
  inset-inline-start: var(--section-start);
  inset-inline-end: var(--section-end);
  bottom: var(--section-y);
  top: var(--section-y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--section-size);
  border-radius: var(--section-border-radius);
  color: var(--input-section-color, var(--mantine-color-dimmed));
}

.m_82577fc2[data-position='right'] {
    --section-pointer-events: var(--input-right-section-pointer-events);
    --section-end: var(--right-section-end);
    --section-size: var(--input-right-section-size);
    --section-border-radius: var(--right-section-border-radius);
  }

.m_6c018570[data-size='xs'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
        --section-size: calc(2.5625rem * var(--mantine-scale));
      }

.m_6c018570[data-size='sm'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
        --section-size: calc(3.125rem * var(--mantine-scale));
      }

.m_6c018570[data-size='md'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
        --section-size: calc(3.75rem * var(--mantine-scale));
      }

.m_6c018570[data-size='lg'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
        --section-size: calc(4.5rem * var(--mantine-scale));
      }

.m_6c018570[data-size='xl'] .m_82577fc2[data-position='right']:has([data-combined-clear-section]) {
        --section-size: calc(5.5625rem * var(--mantine-scale));
      }

.m_82577fc2[data-position='left'] {
    --section-pointer-events: var(--input-left-section-pointer-events);
    --section-start: var(--left-section-start);
    --section-size: var(--input-left-section-size);
    --section-border-radius: var(--left-section-border-radius);
  }

/* ----- Input.Placeholder ----- */
.m_88bacfd0 {
  color: var(--input-placeholder-color, var(--mantine-color-placeholder));
}
.m_6c018570[data-error] .m_88bacfd0 {
    --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));
  }

/* ----- Input.Wrapper ----- */
.m_46b77525 {
  line-height: var(--mantine-line-height);
}

.m_8fdc1311 {
  display: inline-block;
  font-weight: var(--mantine-font-weight-medium);
  overflow-wrap: break-word;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  font-size: var(--input-label-size, var(--mantine-font-size-sm));
}

.m_78a94662 {
  color: var(--input-asterisk-color, var(--mantine-color-error));
}

.m_8f816625,
.m_9d9d40e0,
.m_fe47ce59 {
  word-wrap: break-word;
  line-height: 1.2;
  display: block;
  margin: 0;
  padding: 0;
}

.m_8f816625 {
  color: var(--mantine-color-error);
  font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
}

.m_9d9d40e0 {
  color: var(--mantine-color-success);
  font-size: var(--input-success-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
}

.m_fe47ce59 {
  color: var(--mantine-color-dimmed);
  font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
}

.m_8bffd616 {
  display: flex;
}

.m_96b553a6 {
  --transition-duration: 150ms;

  top: 0;
  left: 0;
  position: absolute;
  z-index: 0;
  transition-property: transform, width, height;
  transition-timing-function: ease;
  transition-duration: 0ms;
}

  .m_96b553a6:where([data-initialized]) {
    transition-duration: var(--transition-duration);
  }

  .m_96b553a6:where([data-hidden]) {
    display: none;
  }

.m_9bdbb667 {
  --accordion-radius: var(--mantine-radius-default);
}

.m_df78851f {
  overflow-wrap: break-word;
}

.m_4ba554d4 {
  padding: var(--mantine-spacing-md);
  padding-top: calc(var(--mantine-spacing-xs) / 2);
}

.m_8fa820a0 {
  margin: 0;
  padding: 0;
  width: 100%;
}

.m_4ba585b8 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  padding-inline: var(--mantine-spacing-md);
  opacity: 1;
  cursor: pointer;
  background-color: transparent;
  color: var(--mantine-color-bright);
}

.m_4ba585b8:where([data-chevron-position='left']) {
    flex-direction: row;
    padding-inline-start: 0;
  }

.m_4ba585b8:where(:disabled, [data-disabled]) {
    opacity: 0.4;
    cursor: not-allowed;
  }

@media (hover: hover) {
      :where([data-mantine-color-scheme='light']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='light']) .m_4271d21b:where(:not(:disabled, [data-disabled])):hover {
        background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='dark']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):hover, :where([data-mantine-color-scheme='dark']) .m_4271d21b:where(:not(:disabled, [data-disabled])):hover {
        background-color: var(--mantine-color-dark-6);
  }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='light']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='light']) .m_4271d21b:where(:not(:disabled, [data-disabled])):active {
        background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='dark']) .m_6939a5e9:where(:not(:disabled, [data-disabled])):active, :where([data-mantine-color-scheme='dark']) .m_4271d21b:where(:not(:disabled, [data-disabled])):active {
        background-color: var(--mantine-color-dark-6);
  }
}

.m_df3ffa0f {
  color: inherit;
  font-weight: var(--mantine-font-weight-regular);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: var(--mantine-spacing-sm);
  padding-bottom: var(--mantine-spacing-sm);
}

.m_3f35ae96 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: transform var(--accordion-transition-duration, 200ms) ease;
  width: var(--accordion-chevron-size, calc(0.9375rem * var(--mantine-scale)));
  min-width: var(--accordion-chevron-size, calc(0.9375rem * var(--mantine-scale)));
  transform: rotate(0deg);
}

.m_3f35ae96:where([data-rotate]) {
    transform: rotate(180deg);
  }

.m_3f35ae96:where([data-position='left']) {
    margin-inline-end: var(--mantine-spacing-md);
    margin-inline-start: var(--mantine-spacing-md);
  }

.m_9bd771fe {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--mantine-spacing-sm);
}

.m_9bd771fe:where([data-chevron-position='left']) {
    margin-inline-end: 0;
    margin-inline-start: var(--mantine-spacing-lg);
  }

:where([data-mantine-color-scheme='light']) .m_9bd7b098 {
    --item-border-color: var(--mantine-color-gray-3);
    --item-filled-color: var(--mantine-color-gray-0);
}

:where([data-mantine-color-scheme='dark']) .m_9bd7b098 {
    --item-border-color: var(--mantine-color-dark-4);
    --item-filled-color: var(--mantine-color-dark-6);
}

.m_fe19b709 {
  border-bottom: 1px solid var(--item-border-color);
}

.m_1f921b3b {
  border: 1px solid var(--item-border-color);
  transition: background-color 150ms ease;
}

.m_1f921b3b:where([data-active]) {
    background-color: var(--item-filled-color);
  }

.m_1f921b3b:first-of-type {
    border-start-start-radius: var(--accordion-radius);
    border-start-end-radius: var(--accordion-radius);
  }

.m_1f921b3b:first-of-type > [data-accordion-control] {
      border-start-start-radius: var(--accordion-radius);
      border-start-end-radius: var(--accordion-radius);
    }

.m_1f921b3b:last-of-type {
    border-end-start-radius: var(--accordion-radius);
    border-end-end-radius: var(--accordion-radius);
  }

.m_1f921b3b:last-of-type > [data-accordion-control] {
      border-end-start-radius: var(--accordion-radius);
      border-end-end-radius: var(--accordion-radius);
    }

.m_1f921b3b + .m_1f921b3b {
    border-top: 0;
  }

.m_2cdf939a {
  border-radius: var(--accordion-radius);
}

.m_2cdf939a:where([data-active]) {
    background-color: var(--item-filled-color);
  }

.m_9f59b069 {
  background-color: var(--item-filled-color);
  border-radius: var(--accordion-radius);
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  transition: background-color 150ms ease;
}

.m_9f59b069[data-active] {
    border-color: var(--item-border-color);
  }

:where([data-mantine-color-scheme='light']) .m_9f59b069[data-active] {
      background-color: var(--mantine-color-white);
}

:where([data-mantine-color-scheme='dark']) .m_9f59b069[data-active] {
      background-color: var(--mantine-color-dark-7);
}

.m_9f59b069 + .m_9f59b069 {
    margin-top: var(--mantine-spacing-md);
  }

.m_7f854edf {
  position: fixed;
  z-index: var(--affix-z-index);
  inset-inline-start: var(--affix-left);
  inset-inline-end: var(--affix-right);
  top: var(--affix-top);
  bottom: var(--affix-bottom);
}

.m_66836ed3 {
  --alert-radius: var(--mantine-radius-default);
  --alert-bg: var(--mantine-primary-color-light);
  --alert-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  --alert-color: var(--mantine-primary-color-light-color);

  padding: var(--mantine-spacing-md) var(--mantine-spacing-md);
  border-radius: var(--alert-radius);
  position: relative;
  overflow: hidden;
  background-color: var(--alert-bg);
  border: var(--alert-bd);
  color: var(--alert-color);
}

.m_a5d60502 {
  display: flex;
}

.m_667c2793 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--mantine-spacing-xs);
}

.m_6a03f287 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--mantine-font-size-sm);
  font-weight: var(--mantine-font-weight-bold);
}

.m_6a03f287:where([data-with-close-button]) {
    padding-inline-end: var(--mantine-spacing-md);
  }

.m_698f4f23 {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m_667f2a6a {
  line-height: 1;
  width: calc(1.25rem * var(--mantine-scale));
  height: calc(1.25rem * var(--mantine-scale));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-inline-end: var(--mantine-spacing-md);
  margin-top: calc(0.0625rem * var(--mantine-scale));
}

.m_7fa78076 {
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: var(--mantine-font-size-sm);
}

:where([data-mantine-color-scheme='light']) .m_7fa78076 {
    color: var(--mantine-color-black);
}

:where([data-mantine-color-scheme='dark']) .m_7fa78076 {
    color: var(--mantine-color-white);
}

.m_7fa78076:where([data-variant='filled']) {
    color: var(--alert-color);
  }

.m_7fa78076:where([data-variant='white']) {
    color: var(--mantine-color-black);
  }

.m_87f54839 {
  width: calc(1.25rem * var(--mantine-scale));
  height: calc(1.25rem * var(--mantine-scale));
  color: var(--alert-color);
}

.m_b6d8b162 {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  font-size: var(--text-fz, var(--mantine-font-size-md));
  line-height: var(--text-lh, var(--mantine-line-height-md));
  font-weight: var(--mantine-font-weight-regular);
  text-wrap: var(--text-text-wrap, var(--mantine-text-wrap));
  margin: 0;
  padding: 0;
}

  .m_b6d8b162:where([data-truncate]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .m_b6d8b162:where([data-truncate='start']) {
    direction: rtl;
    text-align: end;
  }

  :where([dir="rtl"]) .m_b6d8b162:where([data-truncate='start']) {
      direction: ltr;
      text-align: start;
}

  .m_b6d8b162:where([data-variant='gradient']) {
    background-image: var(--text-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .m_b6d8b162:where([data-line-clamp]) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--text-line-clamp);
    -webkit-box-orient: vertical;
  }

  .m_b6d8b162:where([data-inherit]) {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
  }

  .m_b6d8b162:where([data-inline]) {
    line-height: 1;
  }

.m_849cf0da {
  color: var(--mantine-color-anchor);
  text-decoration: none;
  appearance: none;
  border: none;
  display: inline;
  padding: 0;
  margin: 0;
  background-color: transparent;
  cursor: pointer;
}

  @media (hover: hover) {

  .m_849cf0da:where([data-underline='hover']):hover {
      text-decoration: underline;
  }
}

  @media (hover: none) {

  .m_849cf0da:where([data-underline='hover']):active {
      text-decoration: underline;
  }
}

  .m_849cf0da:where([data-underline='not-hover']) {
    text-decoration: underline;
  }

  @media (hover: hover) {

  .m_849cf0da:where([data-underline='not-hover']):hover {
      text-decoration: none;
  }
}

  @media (hover: none) {

  .m_849cf0da:where([data-underline='not-hover']):active {
      text-decoration: none;
  }
}

  .m_849cf0da:where([data-underline='always']) {
    text-decoration: underline;
  }

  .m_849cf0da:where([data-variant='gradient']),
    .m_849cf0da:where([data-variant='gradient']):hover {
      text-decoration: none;
    }

  .m_849cf0da:where([data-line-clamp]) {
    display: -webkit-box;
  }

.m_48204f9b {
  width: var(--slider-size);
  height: var(--slider-size);
  position: relative;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

  .m_48204f9b:focus-within {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

  .m_48204f9b {

  --slider-size: calc(3.75rem * var(--mantine-scale));
  --thumb-size: calc(var(--slider-size) / 5);
}

  :where([data-mantine-color-scheme='light']) .m_48204f9b {
    background-color: var(--mantine-color-gray-1);
}

  :where([data-mantine-color-scheme='dark']) .m_48204f9b {
    background-color: var(--mantine-color-dark-5);
}

.m_bb9cdbad {
  position: absolute;
  inset: calc(0.0625rem * var(--mantine-scale));
  border-radius: var(--slider-size);
  pointer-events: none;
}

.m_481dd586 {
  width: calc(0.125rem * var(--mantine-scale));
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  transform: rotate(var(--angle));
}

.m_481dd586::before {
    content: '';
    position: absolute;
    top: calc(var(--thumb-size) / 3);
    left: calc(0.03125rem * var(--mantine-scale));
    width: calc(0.0625rem * var(--mantine-scale));
    height: calc(var(--thumb-size) / 1.5);
    transform: translate(-50%, -50%);
  }

:where([data-mantine-color-scheme='light']) .m_481dd586::before {
      background-color: var(--mantine-color-gray-4);
}

:where([data-mantine-color-scheme='dark']) .m_481dd586::before {
      background-color: var(--mantine-color-dark-3);
}

.m_481dd586[data-label]::after {
    min-width: calc(1.125rem * var(--mantine-scale));
    text-align: center;
    content: attr(data-label);
    position: absolute;
    top: calc(-1.5rem * var(--mantine-scale));
    left: calc(-0.4375rem * var(--mantine-scale));
    transform: rotate(calc(360deg - var(--angle)));
    font-size: var(--mantine-font-size-xs);
  }

.m_bc02ba3d {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 1.5px);
  inset-inline-end: 0;
  height: 100%;
  width: calc(0.1875rem * var(--mantine-scale));
  outline: none;
  pointer-events: none;
}

.m_bc02ba3d::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: min(var(--thumb-size), calc(var(--slider-size) / 2));
    width: calc(0.1875rem * var(--mantine-scale));
  }

:where([data-mantine-color-scheme='light']) .m_bc02ba3d::before {
      background-color: var(--mantine-color-gray-7);
}

:where([data-mantine-color-scheme='dark']) .m_bc02ba3d::before {
      background-color: var(--mantine-color-dark-1);
}

.m_bb8e875b {
  font-size: var(--mantine-font-size-xs);
}

.m_89ab340[data-resizing] {
    --app-shell-transition-duration: 0ms !important;
  }
  .m_89ab340[data-disabled] {
    --app-shell-header-offset: 0rem !important;
    --app-shell-navbar-offset: 0rem !important;
    --app-shell-aside-offset: 0rem !important;
    --app-shell-footer-offset: 0rem !important;
  }
  .m_89ab340[data-mode='static'] {
    display: grid;
    grid-template-columns: var(--app-shell-navbar-width, 0) 1fr var(--app-shell-aside-width, 0);
    grid-template-rows: auto 1fr auto;
    position: relative;
    height: 100%;
    overflow: auto;
  }
  [data-mantine-color-scheme='light'] .m_89ab340 {
    --app-shell-border-color: var(--mantine-color-gray-3);
}
  [data-mantine-color-scheme='dark'] .m_89ab340 {
    --app-shell-border-color: var(--mantine-color-dark-4);
}

.m_45252eee,
.m_9cdde9a,
.m_3b16f56b,
.m_8983817,
.m_3840c879 {
  transition-duration: var(--app-shell-transition-duration);
  transition-timing-function: var(--app-shell-transition-timing-function);
}

.m_45252eee,
.m_9cdde9a {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: var(--app-shell-header-offset, 0rem);
  height: calc(
    100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-offset, 0rem)
  );
  background-color: var(--mantine-color-body);
  transition-property: transform, top, height;
}

:where([data-mode='static']) .m_45252eee, :where([data-mode='static']) .m_9cdde9a {
    position: var(--app-shell-navbar-position, fixed);
    grid-row: var(--app-shell-navbar-grid-row, auto);
    height: 100%;
  }

:where([data-layout='alt']) .m_45252eee, :where([data-layout='alt']) .m_9cdde9a {
    top: 0rem;
    height: 100dvh;
  }

:where([data-mode='static'][data-layout='alt']) .m_45252eee, :where([data-mode='static'][data-layout='alt']) .m_9cdde9a {
    grid-row: 1 / -1;
    height: 100%;
  }

.m_45252eee {
  inset-inline-start: 0;
  width: var(--app-shell-navbar-width);
  transition-property: transform, top, height;
  transform: var(--app-shell-navbar-transform);
  z-index: var(--app-shell-navbar-z-index);
}

:where([data-mode='static']) .m_45252eee {
    grid-column: var(--app-shell-navbar-grid-column, auto);
    display: var(--app-shell-navbar-display, flex);
  }

:where([dir="rtl"]) .m_45252eee {
    transform: var(--app-shell-navbar-transform-rtl);
}

.m_45252eee:where([data-with-border]) {
    border-inline-end: 1px solid var(--app-shell-border-color);
  }

.m_9cdde9a {
  inset-inline-end: 0;
  width: var(--app-shell-aside-width);
  transform: var(--app-shell-aside-transform);
  z-index: var(--app-shell-aside-z-index);
}

:where([data-mode='static']) .m_9cdde9a {
    position: var(--app-shell-aside-position, fixed);
    grid-column: var(--app-shell-aside-grid-column, auto);
    grid-row: var(--app-shell-aside-grid-row, auto);
    display: var(--app-shell-aside-display, flex);
  }

:where([dir="rtl"]) .m_9cdde9a {
    transform: var(--app-shell-aside-transform-rtl);
}

.m_9cdde9a:where([data-with-border]) {
    border-inline-start: 1px solid var(--app-shell-border-color);
  }

:where([data-mode='static'][data-layout='alt']) .m_9cdde9a {
    grid-row: 1 / -1;
  }

:where([data-scroll-locked]) .m_9cdde9a {
    visibility: var(--app-shell-aside-scroll-locked-visibility);
  }

.m_8983817 {
  padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
  padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
  padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
  padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));
  min-height: 100dvh;
  transition-property: padding;
}

:where([data-mode='static']) .m_8983817 {
    padding-inline-start: var(--app-shell-padding);
    padding-inline-end: var(--app-shell-padding);
    padding-top: var(--app-shell-padding);
    padding-bottom: var(--app-shell-padding);
    min-height: auto;
    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);
    grid-row: var(--app-shell-main-grid-row, 2);
  }

.m_3b16f56b,
.m_3840c879 {
  position: fixed;
  inset-inline: 0;
  transition-property: transform, margin-inline-start, margin-inline-end;
  background-color: var(--mantine-color-body);
}

:where([data-mode='static']) .m_3b16f56b, :where([data-mode='static']) .m_3840c879 {
    position: var(--app-shell-header-position, fixed);
    grid-column: var(--app-shell-header-grid-column, auto);
  }

:where([data-layout='alt']) .m_3b16f56b, :where([data-layout='alt']) .m_3840c879 {
    margin-inline-start: var(--app-shell-navbar-offset, 0rem);
    margin-inline-end: var(--app-shell-aside-offset, 0rem);
  }

:where([data-mode='static'][data-layout='alt']) .m_3b16f56b, :where([data-mode='static'][data-layout='alt']) .m_3840c879 {
    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);
    margin-inline-start: 0rem;
    margin-inline-end: 0rem;
  }

.m_3b16f56b {
  top: 0;
  height: var(--app-shell-header-height);
  background-color: var(--mantine-color-body);
  transform: var(--app-shell-header-transform);
  z-index: var(--app-shell-header-z-index);
}

:where([data-mode='static']) .m_3b16f56b {
    grid-row: var(--app-shell-header-grid-row, auto);
  }

.m_3b16f56b:where([data-with-border]) {
    border-bottom: 1px solid var(--app-shell-border-color);
  }

.m_3840c879 {
  bottom: 0;
  height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  transform: var(--app-shell-footer-transform);
  z-index: var(--app-shell-footer-z-index);
}

:where([data-mode='static']) .m_3840c879 {
    position: var(--app-shell-footer-position, fixed);
    grid-column: var(--app-shell-footer-grid-column, auto);
    grid-row: var(--app-shell-footer-grid-row, auto);
  }

:where([data-mode='static'][data-layout='alt']) .m_3840c879 {
    grid-column: var(--app-shell-main-column-start, 1) / var(--app-shell-main-column-end, -1);
  }

.m_3840c879:where([data-with-border]) {
    border-top: 1px solid var(--app-shell-border-color);
  }

.m_6dcfc7c7 {
  flex-grow: 0;
}

.m_6dcfc7c7:where([data-grow]) {
    flex-grow: 1;
  }

.m_71ac47fc {
  --ar-ratio: 1;
  max-width: 100%;
}

  .m_71ac47fc > :where(*:not(style)) {
    aspect-ratio: var(--ar-ratio);
    width: 100%;
  }

  .m_71ac47fc > :where(img, video) {
    object-fit: cover;
  }

.m_88b62a41 {
  --combobox-padding: calc(0.25rem * var(--mantine-scale));
  padding: var(--combobox-padding);
}

  .m_88b62a41:has([data-mantine-scrollbar]) .m_985517d8 {
      max-width: calc(100% + var(--combobox-padding));
    }

  .m_88b62a41[data-composed] {
    padding-inline-end: 0;
  }

  .m_88b62a41[data-hidden] {
    display: none;
  }

  .m_88b62a41[data-floating-height='viewport']:not([data-hidden]) {
    --combobox-floating-options-max-height: calc(
      var(--combobox-floating-max-height, 100vh) - var(--combobox-padding) * 2
    );
    max-height: var(--combobox-floating-max-height, none);
    overflow: hidden;
  }

/* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown */
.m_88b62a41,
.m_b2821a6e {
  --combobox-option-padding-xs: calc(0.25rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale));
  --combobox-option-padding-sm: calc(0.375rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
  --combobox-option-padding-md: calc(0.5rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale));
  --combobox-option-padding-lg: calc(0.625rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale));
  --combobox-option-padding-xl: calc(0.875rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale));
  --combobox-option-padding: var(--combobox-option-padding-sm);
}

.m_92253aa5 {
  padding: var(--combobox-option-padding);
  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
  border-radius: var(--mantine-radius-default);
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  overflow-wrap: break-word;
}

.m_92253aa5:where([data-combobox-selected]) {
    background-color: var(--mantine-primary-color-filled);
    color: var(--mantine-color-white);
  }

.m_92253aa5:where([data-combobox-disabled]) {
    cursor: not-allowed;
    opacity: 0.35;
  }

@media (hover: hover) {
      :where([data-mantine-color-scheme='light']) .m_92253aa5:hover:where(:not([data-combobox-selected], [data-combobox-disabled])) {
        background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='dark']) .m_92253aa5:hover:where(:not([data-combobox-selected], [data-combobox-disabled])) {
        background-color: var(--mantine-color-dark-7);
  }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='light']) .m_92253aa5:active:where(:not([data-combobox-selected], [data-combobox-disabled])) {
        background-color: var(--mantine-color-gray-0);
  }

      :where([data-mantine-color-scheme='dark']) .m_92253aa5:active:where(:not([data-combobox-selected], [data-combobox-disabled])) {
        background-color: var(--mantine-color-dark-7);
  }
}

.m_985517d8 {
  margin-inline: calc(var(--combobox-padding) * -1);
  margin-top: calc(var(--combobox-padding) * -1);
  width: calc(100% + var(--combobox-padding) * 2);
  border-top-width: 0;
  border-inline-width: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  margin-bottom: var(--combobox-padding);
  position: relative;
}

:where([data-mantine-color-scheme='light']) .m_985517d8, :where([data-mantine-color-scheme='light']) .m_985517d8:focus {
      border-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_985517d8, :where([data-mantine-color-scheme='dark']) .m_985517d8:focus {
      border-color: var(--mantine-color-dark-4);
}

:where([data-mantine-color-scheme='light']) .m_985517d8 {
    background-color: var(--mantine-color-white);
}

:where([data-mantine-color-scheme='dark']) .m_985517d8 {
    background-color: var(--mantine-color-dark-7);
}

.m_2530cd1d {
  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
  text-align: center;
  padding: var(--combobox-option-padding);
  color: var(--mantine-color-dimmed);
}

.m_858f94bd,
.m_82b967cb {
  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));
  border: 0 solid transparent;
  margin-inline: calc(var(--combobox-padding) * -1);
  padding: var(--combobox-option-padding);
}

:where([data-mantine-color-scheme='light']) .m_858f94bd, :where([data-mantine-color-scheme='light']) .m_82b967cb {
    border-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_858f94bd, :where([data-mantine-color-scheme='dark']) .m_82b967cb {
    border-color: var(--mantine-color-dark-4);
}

.m_82b967cb {
  border-top-width: calc(0.0625rem * var(--mantine-scale));
  margin-top: var(--combobox-padding);
  margin-bottom: calc(var(--combobox-padding) * -1);
}

.m_858f94bd {
  border-bottom-width: calc(0.0625rem * var(--mantine-scale));
  margin-bottom: var(--combobox-padding);
  margin-top: calc(var(--combobox-padding) * -1);
}

.m_254f3e4f:has(.m_2bb2e9e5:only-child) {
    display: none;
  }

.m_2bb2e9e5 {
  color: var(--mantine-color-dimmed);
  font-size: calc(var(--combobox-option-fz, var(--mantine-font-size-sm)) * 0.85);
  padding: var(--combobox-option-padding);
  font-weight: var(--mantine-font-weight-medium);
  position: relative;
  display: flex;
  align-items: center;
}

.m_2bb2e9e5::after {
    content: '';
    flex: 1;
    inset-inline: 0;
    height: calc(0.0625rem * var(--mantine-scale));
    margin-inline-start: var(--mantine-spacing-xs);
  }

:where([data-mantine-color-scheme='light']) .m_2bb2e9e5::after {
      background-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_2bb2e9e5::after {
      background-color: var(--mantine-color-dark-4);
}

.m_2bb2e9e5:only-child {
    display: none;
  }

/* ------- Combobox.Chevron ------- */
.m_2943220b {
  --combobox-chevron-size-xs: calc(0.875rem * var(--mantine-scale));
  --combobox-chevron-size-sm: calc(1.125rem * var(--mantine-scale));
  --combobox-chevron-size-md: calc(1.25rem * var(--mantine-scale));
  --combobox-chevron-size-lg: calc(1.5rem * var(--mantine-scale));
  --combobox-chevron-size-xl: calc(1.75rem * var(--mantine-scale));
  --combobox-chevron-size: var(--combobox-chevron-size-sm);
}
:where([data-mantine-color-scheme='light']) .m_2943220b {
    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-gray-6));
}
:where([data-mantine-color-scheme='dark']) .m_2943220b {
    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-dark-3));
}
.m_2943220b {

  width: var(--combobox-chevron-size);
  height: var(--combobox-chevron-size);
  color: var(--_combobox-chevron-color);
}
.m_2943220b:where([data-error]) {
    color: var(--combobox-chevron-color, var(--mantine-color-error));
  }

/* ------- OptionsDropdown ------- */
.m_390b5f4 {
  display: flex;
  align-items: center;
  gap: calc(0.5rem * var(--mantine-scale));
}
.m_390b5f4:where([data-reverse]) {
    justify-content: space-between;
  }

.m_8ee53fc2 {
  opacity: 0.4;
  width: 0.8em;
  min-width: 0.8em;
  height: 0.8em;
}

:where([data-combobox-selected]) .m_8ee53fc2 {
    opacity: 1;
  }

.m_a530ee0a {
  width: 0.8em;
  min-width: 0.8em;
  height: 0.8em;
}

.m_5f75b09e {
  --label-lh-xs: calc(1rem * var(--mantine-scale));
  --label-lh-sm: calc(1.25rem * var(--mantine-scale));
  --label-lh-md: calc(1.5rem * var(--mantine-scale));
  --label-lh-lg: calc(1.875rem * var(--mantine-scale));
  --label-lh-xl: calc(2.25rem * var(--mantine-scale));
  --label-lh: var(--label-lh-sm);
}

  .m_5f75b09e[data-label-position='left'] {
    --label-order: 1;
    --label-offset-end: var(--mantine-spacing-sm);
    --label-offset-start: 0;
  }

  .m_5f75b09e[data-label-position='right'] {
    --label-order: 2;
    --label-offset-end: 0;
    --label-offset-start: var(--mantine-spacing-sm);
  }

.m_5f6e695e {
  -webkit-tap-highlight-color: transparent;
  display: flex;
}

.m_d3ea56bb {
  --label-cursor: var(--mantine-cursor-type);

  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  flex-direction: column;
  font-size: var(--label-fz, var(--mantine-font-size-sm));
  line-height: var(--label-lh);
  cursor: var(--label-cursor);
  order: var(--label-order);
}

fieldset:disabled .m_d3ea56bb,
  .m_d3ea56bb[data-disabled] {
    --label-cursor: not-allowed;
  }

.m_8ee546b8 {
  cursor: var(--label-cursor);
  color: inherit;
  padding-inline-start: var(--label-offset-start);
  padding-inline-end: var(--label-offset-end);
}

fieldset:disabled .m_8ee546b8,
  .m_8ee546b8:where([data-disabled]) {
    color: var(--mantine-color-disabled-color);
  }

.m_328f68c0 {
  margin-top: calc(var(--mantine-spacing-xs) / 2);
  padding-inline-start: var(--label-offset-start);
  padding-inline-end: var(--label-offset-end);
  cursor: default;
}

.m_8e8a99cc {
  margin-top: calc(var(--mantine-spacing-xs) / 2);
  padding-inline-start: var(--label-offset-start);
  padding-inline-end: var(--label-offset-end);
}

.m_26775b0a {
  --card-radius: var(--mantine-radius-default);

  display: block;
  width: 100%;
  border-radius: var(--card-radius);
  cursor: pointer;
}

  .m_26775b0a :where(*) {
    cursor: inherit;
  }

  .m_26775b0a:where([data-with-border]) {
    border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  }

  :where([data-mantine-color-scheme='light']) .m_26775b0a:where([data-with-border]) {
      border-color: var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_26775b0a:where([data-with-border]) {
      border-color: var(--mantine-color-dark-4);
}

.m_5e5256ee {
  --checkbox-size-xs: calc(1rem * var(--mantine-scale));
  --checkbox-size-sm: calc(1.25rem * var(--mantine-scale));
  --checkbox-size-md: calc(1.5rem * var(--mantine-scale));
  --checkbox-size-lg: calc(1.875rem * var(--mantine-scale));
  --checkbox-size-xl: calc(2.25rem * var(--mantine-scale));

  --checkbox-size: var(--checkbox-size-sm);
  --checkbox-color: var(--mantine-primary-color-filled);
}

  .m_5e5256ee:where([data-variant='filled']) {
    --checkbox-icon-color: var(--mantine-color-white);
  }

  .m_5e5256ee:where([data-variant='outline']) {
    --checkbox-icon-color: var(--checkbox-color);
  }

  .m_5e5256ee {

  position: relative;
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  width: var(--checkbox-size);
  min-width: var(--checkbox-size);
  height: var(--checkbox-size);
  min-height: var(--checkbox-size);
  border-radius: var(--checkbox-radius, var(--mantine-radius-default));
  transition:
    border-color 100ms ease,
    background-color 100ms ease;
  cursor: var(--mantine-cursor-type);
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

  :where([data-mantine-color-scheme='light']) .m_5e5256ee {
    background-color: var(--mantine-color-white);
    border-color: var(--mantine-color-gray-4);
}

  :where([data-mantine-color-scheme='dark']) .m_5e5256ee {
    background-color: var(--mantine-color-dark-6);
    border-color: var(--mantine-color-dark-4);
}

  .m_5e5256ee[data-indeterminate],
  .m_5e5256ee[data-checked] {
    background-color: var(--checkbox-color);
    border-color: var(--checkbox-color);
  }

  .m_5e5256ee[data-indeterminate] > .m_1b1c543a, .m_5e5256ee[data-checked] > .m_1b1c543a {
      opacity: 1;
      transform: none;
      color: var(--checkbox-icon-color);
    }

  .m_5e5256ee[data-disabled] {
    cursor: not-allowed;
    border-color: var(--mantine-color-disabled-border);
    background-color: var(--mantine-color-disabled);
  }

  [data-mantine-color-scheme='light'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a {
        color: var(--mantine-color-gray-5);
}

  [data-mantine-color-scheme='dark'] .m_5e5256ee[data-disabled][data-checked] > .m_1b1c543a {
        color: var(--mantine-color-dark-3);
}

.m_76e20374[data-indeterminate]:not([data-disabled]),
  .m_76e20374[data-checked]:not([data-disabled]) {
    background-color: transparent;
    border-color: var(--checkbox-color);
  }

.m_76e20374[data-indeterminate]:not([data-disabled]) > .m_1b1c543a, .m_76e20374[data-checked]:not([data-disabled]) > .m_1b1c543a {
      color: var(--checkbox-icon-color);
      opacity: 1;
      transform: none;
    }

.m_1b1c543a {
  display: block;
  width: 60%;
  color: transparent;
  pointer-events: none;
  transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
  opacity: 1;
  transition:
    transform 100ms ease,
    opacity 100ms ease;
}

.m_bf2d988c {
  --checkbox-size-xs: calc(1rem * var(--mantine-scale));
  --checkbox-size-sm: calc(1.25rem * var(--mantine-scale));
  --checkbox-size-md: calc(1.5rem * var(--mantine-scale));
  --checkbox-size-lg: calc(1.875rem * var(--mantine-scale));
  --checkbox-size-xl: calc(2.25rem * var(--mantine-scale));

  --checkbox-size: var(--checkbox-size-sm);
  --checkbox-color: var(--mantine-primary-color-filled);
}

  .m_bf2d988c:where([data-variant='filled']) {
    --checkbox-icon-color: var(--mantine-color-white);
  }

  .m_bf2d988c:where([data-variant='outline']) {
    --checkbox-icon-color: var(--checkbox-color);
  }

.m_26062bec {
  position: relative;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  order: 1;
}

.m_26062bec:where([data-label-position='left']) {
    order: 2;
  }

.m_26063560 {
  appearance: none;
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border-radius: var(--checkbox-radius, var(--mantine-radius-default));
  padding: 0;
  display: block;
  margin: 0;
  transition:
    border-color 100ms ease,
    background-color 100ms ease;
  cursor: var(--mantine-cursor-type);
  -webkit-tap-highlight-color: transparent;
}

:where([data-mantine-color-scheme='light']) .m_26063560 {
    background-color: var(--mantine-color-white);
    border-color: var(--mantine-color-gray-4);
}

:where([data-mantine-color-scheme='dark']) .m_26063560 {
    background-color: var(--mantine-color-dark-6);
    border-color: var(--mantine-color-dark-4);
}

.m_26063560:where([data-with-error-styles][data-error]) {
    border-color: var(--mantine-color-error);
  }

.m_26063560[data-indeterminate],
  .m_26063560:checked {
    background-color: var(--checkbox-color);
    border-color: var(--checkbox-color);
  }

.m_26063560[data-indeterminate] + .m_bf295423, .m_26063560:checked + .m_bf295423 {
      opacity: 1;
      transform: none;
    }

.m_26063560:disabled {
    cursor: not-allowed;
    border-color: var(--mantine-color-disabled-border);
    background-color: var(--mantine-color-disabled);
  }

.m_26063560:disabled + .m_bf295423 {
      color: var(--mantine-color-disabled-color);
    }

.m_215c4542 + .m_bf295423 {
    color: var(--checkbox-color);
  }

.m_215c4542[data-indeterminate]:not(:disabled),
  .m_215c4542:checked:not(:disabled) {
    background-color: transparent;
    border-color: var(--checkbox-color);
  }

.m_215c4542[data-indeterminate]:not(:disabled) + .m_bf295423, .m_215c4542:checked:not(:disabled) + .m_bf295423 {
      color: var(--checkbox-icon-color);
      opacity: 1;
      transform: none;
    }

.m_bf295423 {
  position: absolute;
  inset: 0;
  width: 60%;
  margin: auto;
  color: var(--checkbox-icon-color);
  pointer-events: none;
  transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
  opacity: 0;
  transition:
    transform 100ms ease,
    opacity 100ms ease;
}

/* Avatar.Group root element */
.m_11def92b {
  --ag-spacing: var(--mantine-spacing-sm);
  --ag-offset: calc(var(--ag-spacing) * -1);

  display: flex;
  padding-inline-start: var(--ag-spacing);
}

/* Avatar root element */
.m_f85678b6 {
  --avatar-size-xs: calc(1rem * var(--mantine-scale));
  --avatar-size-sm: calc(1.625rem * var(--mantine-scale));
  --avatar-size-md: calc(2.375rem * var(--mantine-scale));
  --avatar-size-lg: calc(3.5rem * var(--mantine-scale));
  --avatar-size-xl: calc(5.25rem * var(--mantine-scale));

  --avatar-size: var(--avatar-size-md);
  --avatar-radius: calc(62.5rem * var(--mantine-scale));
  --avatar-bg: var(--mantine-color-gray-light);
  --avatar-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  --avatar-color: var(--mantine-color-gray-light-color);
  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);

  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: block;
  user-select: none;
  overflow: hidden;
  border-radius: var(--avatar-radius);
  text-decoration: none;
  padding: 0;
  width: var(--avatar-size);
  height: var(--avatar-size);
  min-width: var(--avatar-size);
}
.m_f85678b6:where([data-within-group]) {
    margin-inline-start: var(--ag-offset);
    border: 2px solid var(--mantine-color-body);
    background: var(--mantine-color-body);
  }

.m_11f8ac07 {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.m_104cd71f {
  font-weight: var(--mantine-font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  user-select: none;
  border-radius: var(--avatar-radius);
  font-size: var(--avatar-placeholder-fz);
  background: var(--avatar-bg);
  border: var(--avatar-bd);
  color: var(--avatar-color);
}

.m_104cd71f > [data-avatar-placeholder-icon] {
    width: 70%;
    height: 70%;
  }

.m_2ce0de02 {
  background-size: cover;
  background-position: center;
  display: block;
  width: 100%;
  border: 0;
  text-decoration: none;
  border-radius: var(--bi-radius, 0);
}

.m_347db0ec {
  --badge-height-xs: calc(1rem * var(--mantine-scale));
  --badge-height-sm: calc(1.125rem * var(--mantine-scale));
  --badge-height-md: calc(1.25rem * var(--mantine-scale));
  --badge-height-lg: calc(1.625rem * var(--mantine-scale));
  --badge-height-xl: calc(2rem * var(--mantine-scale));

  --badge-fz-xs: calc(0.5625rem * var(--mantine-scale));
  --badge-fz-sm: calc(0.625rem * var(--mantine-scale));
  --badge-fz-md: calc(0.6875rem * var(--mantine-scale));
  --badge-fz-lg: calc(0.8125rem * var(--mantine-scale));
  --badge-fz-xl: calc(1rem * var(--mantine-scale));

  --badge-padding-x-xs: calc(0.375rem * var(--mantine-scale));
  --badge-padding-x-sm: calc(0.5rem * var(--mantine-scale));
  --badge-padding-x-md: calc(0.625rem * var(--mantine-scale));
  --badge-padding-x-lg: calc(0.75rem * var(--mantine-scale));
  --badge-padding-x-xl: calc(1rem * var(--mantine-scale));

  --badge-height: var(--badge-height-md);
  --badge-fz: var(--badge-fz-md);
  --badge-padding-x: var(--badge-padding-x-md);
  --badge-radius: calc(62.5rem * var(--mantine-scale));
  --badge-lh: calc(var(--badge-height) - calc(0.125rem * var(--mantine-scale)));
  --badge-color: var(--mantine-color-white);
  --badge-bg: var(--mantine-primary-color-filled);
  --badge-border-width: calc(0.0625rem * var(--mantine-scale));
  --badge-bd: var(--badge-border-width) solid transparent;

  -webkit-tap-highlight-color: transparent;
  font-size: var(--badge-fz);
  border-radius: var(--badge-radius);
  height: var(--badge-height);
  line-height: var(--badge-lh);
  text-decoration: none;
  padding: 0 var(--badge-padding-x);
  display: inline-grid;
  align-items: center;
  justify-content: center;
  width: fit-content;
  text-transform: uppercase;
  font-weight: var(--mantine-font-weight-bold);
  letter-spacing: calc(0.015625rem * var(--mantine-scale));
  cursor: default;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--badge-color);
  background: var(--badge-bg);
  border: var(--badge-bd);
}

  .m_347db0ec:where([data-with-left-section], [data-variant='dot']) {
    grid-template-columns: auto 1fr;
  }

  .m_347db0ec:where([data-with-right-section]) {
    grid-template-columns: 1fr auto;
  }

  .m_347db0ec:where(
    [data-with-left-section][data-with-right-section],
    [data-variant='dot'][data-with-right-section]
  ) {
    grid-template-columns: auto 1fr auto;
  }

  .m_347db0ec:where([data-block]) {
    display: flex;
    width: 100%;
  }

  .m_347db0ec:where([data-circle]) {
    padding-inline: calc(0.125rem * var(--mantine-scale));
    display: flex;
    width: var(--badge-height);
  }

.m_fbd81e3d {
  --badge-dot-size: calc(var(--badge-height) / 3.4);
}

:where([data-mantine-color-scheme='light']) .m_fbd81e3d {
    background-color: var(--mantine-color-white);
    border-color: var(--mantine-color-gray-4);
    color: var(--mantine-color-black);
}

:where([data-mantine-color-scheme='dark']) .m_fbd81e3d {
    background-color: var(--mantine-color-dark-5);
    border-color: var(--mantine-color-dark-5);
    color: var(--mantine-color-white);
}

.m_fbd81e3d::before {
    content: '';
    display: block;
    width: var(--badge-dot-size);
    height: var(--badge-dot-size);
    border-radius: var(--badge-dot-size);
    background-color: var(--badge-dot-color);
    margin-inline-end: var(--badge-dot-size);
  }

.m_5add502a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  cursor: inherit;
}

.m_91fdda9b {
  --badge-section-margin: calc(var(--mantine-spacing-xs) / 2);

  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
}

.m_91fdda9b:where([data-position='left']) {
    margin-inline-end: var(--badge-section-margin);
  }

.m_91fdda9b:where([data-position='right']) {
    margin-inline-start: var(--badge-section-margin);
  }

.m_ddec01c0 {
  --blockquote-border: 3px solid var(--bq-bd);

  position: relative;
  margin: 0;
  text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap));
  border-inline-start: var(--blockquote-border);
  border-start-end-radius: var(--bq-radius);
  border-end-end-radius: var(--bq-radius);
  padding: var(--mantine-spacing-xl) calc(2.375rem * var(--mantine-scale));
}

  :where([data-mantine-color-scheme='light']) .m_ddec01c0 {
    background-color: var(--bq-bg-light);
}

  :where([data-mantine-color-scheme='dark']) .m_ddec01c0 {
    background-color: var(--bq-bg-dark);
}

.m_dde7bd57 {
  --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);

  position: absolute;
  color: var(--bq-bd);
  background-color: var(--mantine-color-body);
  display: flex;
  align-items: center;
  justify-content: center;
  top: var(--blockquote-icon-offset);
  inset-inline-start: var(--blockquote-icon-offset);
  width: var(--bq-icon-size);
  height: var(--bq-icon-size);
  border-radius: var(--bq-icon-size);
}

.m_dde51a35 {
  display: block;
  margin-top: var(--mantine-spacing-md);
  opacity: 0.6;
  font-size: 85%;
}

.m_8b3717df {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.m_f678d540 {
  line-height: 1;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.m_3b8f2208 {
  margin-inline: var(--bc-separator-margin, var(--mantine-spacing-xs));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where([data-mantine-color-scheme='light']) .m_3b8f2208 {
    color: var(--mantine-color-gray-7);
}

:where([data-mantine-color-scheme='dark']) .m_3b8f2208 {
    color: var(--mantine-color-dark-2);
}

.m_fea6bf1a {
  --burger-size-xs: calc(0.75rem * var(--mantine-scale));
  --burger-size-sm: calc(1.125rem * var(--mantine-scale));
  --burger-size-md: calc(1.5rem * var(--mantine-scale));
  --burger-size-lg: calc(2.125rem * var(--mantine-scale));
  --burger-size-xl: calc(2.625rem * var(--mantine-scale));

  --burger-size: var(--burger-size-md);
  --burger-line-size: calc(var(--burger-size) / 12);

  width: calc(var(--burger-size) + var(--mantine-spacing-xs));
  height: calc(var(--burger-size) + var(--mantine-spacing-xs));
  padding: calc(var(--mantine-spacing-xs) / 2);
  cursor: pointer;
}

  :where([data-mantine-color-scheme='light']) .m_fea6bf1a {
    --burger-color: var(--mantine-color-black);
}

  :where([data-mantine-color-scheme='dark']) .m_fea6bf1a {
    --burger-color: var(--mantine-color-white);
}

.m_d4fb9cad {
  position: relative;
  user-select: none;
}

.m_d4fb9cad,
  .m_d4fb9cad::before,
  .m_d4fb9cad::after {
    display: block;
    width: var(--burger-size);
    height: var(--burger-line-size);
    background-color: var(--burger-color);
    outline: calc(0.0625rem * var(--mantine-scale)) solid transparent;
    transition-property: background-color, transform;
    transition-duration: var(--burger-transition-duration, 300ms);
    transition-timing-function: var(--burger-transition-timing-function, ease);
  }

.m_d4fb9cad::before,
  .m_d4fb9cad::after {
    position: absolute;
    content: '';
    inset-inline-start: 0;
  }

.m_d4fb9cad::before {
    top: calc(var(--burger-size) / -3);
  }

.m_d4fb9cad::after {
    top: calc(var(--burger-size) / 3);
  }

.m_d4fb9cad[data-opened] {
    background-color: transparent;
  }

.m_d4fb9cad[data-opened]::before {
      transform: translateY(calc(var(--burger-size) / 3)) rotate(45deg);
    }

.m_d4fb9cad[data-opened]::after {
      transform: translateY(calc(var(--burger-size) / -3)) rotate(-45deg);
    }

.m_77c9d27d {
  --button-height-xs: calc(1.875rem * var(--mantine-scale));
  --button-height-sm: calc(2.25rem * var(--mantine-scale));
  --button-height-md: calc(2.625rem * var(--mantine-scale));
  --button-height-lg: calc(3.125rem * var(--mantine-scale));
  --button-height-xl: calc(3.75rem * var(--mantine-scale));

  --button-height-compact-xs: calc(1.375rem * var(--mantine-scale));
  --button-height-compact-sm: calc(1.625rem * var(--mantine-scale));
  --button-height-compact-md: calc(1.875rem * var(--mantine-scale));
  --button-height-compact-lg: calc(2.125rem * var(--mantine-scale));
  --button-height-compact-xl: calc(2.5rem * var(--mantine-scale));

  --button-padding-x-xs: calc(0.875rem * var(--mantine-scale));
  --button-padding-x-sm: calc(1.125rem * var(--mantine-scale));
  --button-padding-x-md: calc(1.375rem * var(--mantine-scale));
  --button-padding-x-lg: calc(1.625rem * var(--mantine-scale));
  --button-padding-x-xl: calc(2rem * var(--mantine-scale));

  --button-padding-x-compact-xs: calc(0.4375rem * var(--mantine-scale));
  --button-padding-x-compact-sm: calc(0.5rem * var(--mantine-scale));
  --button-padding-x-compact-md: calc(0.625rem * var(--mantine-scale));
  --button-padding-x-compact-lg: calc(0.75rem * var(--mantine-scale));
  --button-padding-x-compact-xl: calc(0.875rem * var(--mantine-scale));

  --button-height: var(--button-height-sm);
  --button-padding-x: var(--button-padding-x-sm);
  --button-color: var(--mantine-color-white);

  user-select: none;
  font-weight: var(--mantine-font-weight-medium);
  position: relative;
  line-height: 1;
  text-align: center;
  overflow: hidden;

  width: auto;
  cursor: pointer;
  display: inline-block;
  border-radius: var(--button-radius, var(--mantine-radius-default));
  font-size: var(--button-fz, var(--mantine-font-size-sm));
  background: var(--button-bg, var(--mantine-primary-color-filled));
  border: var(--button-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
  color: var(--button-color, var(--mantine-color-white));
  height: var(--button-height, var(--button-height-sm));
  padding-inline: var(--button-padding-x, var(--button-padding-x-sm));
  vertical-align: middle;
}

  .m_77c9d27d:where([data-block]) {
    display: block;
    width: 100%;
  }

  .m_77c9d27d:where([data-with-left-section]) {
    padding-inline-start: calc(var(--button-padding-x) / 1.5);
  }

  .m_77c9d27d:where([data-with-right-section]) {
    padding-inline-end: calc(var(--button-padding-x) / 1.5);
  }

  .m_77c9d27d:where(:disabled:not([data-loading]), [data-disabled]:not([data-loading])) {
    cursor: not-allowed;
    border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
    transform: none;
    color: var(--mantine-color-disabled-color);
    background: var(--mantine-color-disabled);
  }

  .m_77c9d27d::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: calc(-0.0625rem * var(--mantine-scale));
    border-radius: var(--button-radius, var(--mantine-radius-default));
    transform: translateY(-100%);
    opacity: 0;
    filter: blur(12px);
    transition:
      transform 150ms ease,
      opacity 100ms ease;
  }

  :where([data-mantine-color-scheme='light']) .m_77c9d27d::before {
      background-color: rgba(255, 255, 255, 0.15);
}

  :where([data-mantine-color-scheme='dark']) .m_77c9d27d::before {
      background-color: rgba(0, 0, 0, 0.15);
}

  .m_77c9d27d:where([data-loading]) {
    cursor: not-allowed;
    transform: none;
  }

  .m_77c9d27d:where([data-loading])::before {
      transform: translateY(0);
      opacity: 1;
    }

  .m_77c9d27d:where([data-loading]) .m_80f1301b {
      opacity: 0;
      transform: translateY(100%);
    }

  @media (hover: hover) {
    .m_77c9d27d:hover:where(:not([data-loading], :disabled, [data-disabled])) {
      background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));
      color: var(--button-hover-color, var(--button-color));
    }
}

  @media (hover: none) {
    .m_77c9d27d:active:where(:not([data-loading], :disabled, [data-disabled])) {
      background-color: var(--button-hover, var(--mantine-primary-color-filled-hover));
      color: var(--button-hover-color, var(--button-color));
    }
}

.m_80f1301b {
  display: flex;
  align-items: center;
  justify-content: var(--button-justify, center);
  height: 100%;
  overflow: visible;
  transition:
    transform 150ms ease,
    opacity 100ms ease;
}

.m_811560b9 {
  white-space: nowrap;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  opacity: 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.m_811560b9:where([data-loading]) {
    opacity: 0.2;
  }

.m_a74036a {
  display: flex;
  align-items: center;
}

.m_a74036a:where([data-position='left']) {
    margin-inline-end: var(--mantine-spacing-xs);
  }

.m_a74036a:where([data-position='right']) {
    margin-inline-start: var(--mantine-spacing-xs);
  }

.m_a25b86ee {
  position: absolute;
  left: 50%;
  top: 50%;
}

.m_80d6d844 {
  --button-border-width: calc(0.0625rem * var(--mantine-scale));
  display: flex;
}

.m_80d6d844 :where(.m_77c9d27d):focus {
      position: relative;
      z-index: 1;
    }

.m_80d6d844[data-orientation='horizontal'] {
    flex-direction: row;
  }

.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):first-child, .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):first-child {
        border-end-end-radius: 0;
        border-start-end-radius: 0;
        border-inline-end-width: calc(var(--button-border-width) / 2);
      }

.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):last-child, .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):last-child {
        border-end-start-radius: 0;
        border-start-start-radius: 0;
        border-inline-start-width: calc(var(--button-border-width) / 2);
      }

.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child), .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child) {
        border-radius: 0;
        border-inline-width: calc(var(--button-border-width) / 2);
      }

.m_80d6d844[data-orientation='vertical'] {
    flex-direction: column;
  }

.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):first-child, .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):first-child {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        border-bottom-width: calc(var(--button-border-width) / 2);
      }

.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):last-child, .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):last-child {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        border-top-width: calc(var(--button-border-width) / 2);
      }

.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child), .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child) {
        border-radius: 0;
        border-bottom-width: calc(var(--button-border-width) / 2);
        border-top-width: calc(var(--button-border-width) / 2);
      }

.m_70be2a01 {
  --section-height-xs: calc(1.875rem * var(--mantine-scale));
  --section-height-sm: calc(2.25rem * var(--mantine-scale));
  --section-height-md: calc(2.625rem * var(--mantine-scale));
  --section-height-lg: calc(3.125rem * var(--mantine-scale));
  --section-height-xl: calc(3.75rem * var(--mantine-scale));

  --section-height-compact-xs: calc(1.375rem * var(--mantine-scale));
  --section-height-compact-sm: calc(1.625rem * var(--mantine-scale));
  --section-height-compact-md: calc(1.875rem * var(--mantine-scale));
  --section-height-compact-lg: calc(2.125rem * var(--mantine-scale));
  --section-height-compact-xl: calc(2.5rem * var(--mantine-scale));

  --section-padding-x-xs: calc(0.875rem * var(--mantine-scale));
  --section-padding-x-sm: calc(1.125rem * var(--mantine-scale));
  --section-padding-x-md: calc(1.375rem * var(--mantine-scale));
  --section-padding-x-lg: calc(1.625rem * var(--mantine-scale));
  --section-padding-x-xl: calc(2rem * var(--mantine-scale));

  --section-padding-x-compact-xs: calc(0.4375rem * var(--mantine-scale));
  --section-padding-x-compact-sm: calc(0.5rem * var(--mantine-scale));
  --section-padding-x-compact-md: calc(0.625rem * var(--mantine-scale));
  --section-padding-x-compact-lg: calc(0.75rem * var(--mantine-scale));
  --section-padding-x-compact-xl: calc(0.875rem * var(--mantine-scale));

  --section-height: var(--section-height-sm);
  --section-padding-x: var(--section-padding-x-sm);
  --section-color: var(--mantine-color-white);

  font-weight: var(--mantine-font-weight-medium);
  width: auto;
  border-radius: var(--section-radius, var(--mantine-radius-default));
  font-size: var(--section-fz, var(--mantine-font-size-sm));
  background: var(--section-bg, var(--mantine-primary-color-filled));
  border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
  color: var(--section-color, var(--mantine-color-white));
  height: var(--section-height, var(--section-height-sm));
  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m_e615b15f {
  --card-padding: var(--mantine-spacing-md);

  position: relative;
  overflow: hidden;
  display: flex;
  padding: var(--card-padding);
  color: var(--mantine-color-text);
}

  .m_e615b15f:where([data-orientation='horizontal']) {
    flex-direction: row;
  }

  .m_e615b15f:where([data-orientation='vertical']) {
    flex-direction: column;
  }

  :where([data-mantine-color-scheme='light']) .m_e615b15f {
    background-color: var(--mantine-color-white);
}

  :where([data-mantine-color-scheme='dark']) .m_e615b15f {
    background-color: var(--mantine-color-dark-6);
}

.m_599a2148 {
  display: block;
  margin-inline: calc(var(--card-padding) * -1);
}

:where([data-mantine-color-scheme='light']) .m_599a2148 {
    --border-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_599a2148 {
    --border-color: var(--mantine-color-dark-4);
}

.m_599a2148:where([data-orientation='vertical']):first-child {
      margin-top: calc(var(--card-padding) * -1);
      border-top: none !important;
    }

.m_599a2148:where([data-orientation='vertical']):last-child {
      margin-bottom: calc(var(--card-padding) * -1);
      border-bottom: none !important;
    }

.m_599a2148:where([data-orientation='vertical'])[data-inherit-padding] {
      padding-inline: var(--card-padding);
    }

.m_599a2148:where([data-orientation='vertical'])[data-with-border] {
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
    }

.m_599a2148:where([data-orientation='vertical']) + .m_599a2148:where([data-orientation='vertical']) {
      border-top: none !important;
    }

.m_599a2148:where([data-orientation='horizontal']) {
    margin-block: calc(var(--card-padding) * -1);
    margin-inline: 0;
  }

.m_599a2148:where([data-orientation='horizontal']):first-child {
      margin-inline-start: calc(var(--card-padding) * -1);
      border-inline-start: none !important;
    }

.m_599a2148:where([data-orientation='horizontal']):last-child {
      margin-inline-end: calc(var(--card-padding) * -1);
      border-inline-end: none !important;
    }

.m_599a2148:where([data-orientation='horizontal'])[data-inherit-padding] {
      padding-block: var(--card-padding);
    }

.m_599a2148:where([data-orientation='horizontal'])[data-with-border] {
      border-inline-start: 1px solid var(--border-color);
      border-inline-end: 1px solid var(--border-color);
    }

.m_599a2148:where([data-orientation='horizontal']) + .m_599a2148:where([data-orientation='horizontal']) {
      border-inline-start: none !important;
    }

.m_4451eb3a {
  display: flex;
  align-items: center;
  justify-content: center;
}

  .m_4451eb3a:where([data-inline]) {
    display: inline-flex;
  }

.m_f59ffda3 {
  --chip-size-xs: calc(1.4375rem * var(--mantine-scale));
  --chip-size-sm: calc(1.75rem * var(--mantine-scale));
  --chip-size-md: calc(2rem * var(--mantine-scale));
  --chip-size-lg: calc(2.25rem * var(--mantine-scale));
  --chip-size-xl: calc(2.5rem * var(--mantine-scale));

  --chip-icon-size-xs: calc(0.5625rem * var(--mantine-scale));
  --chip-icon-size-sm: calc(0.75rem * var(--mantine-scale));
  --chip-icon-size-md: calc(0.875rem * var(--mantine-scale));
  --chip-icon-size-lg: calc(1rem * var(--mantine-scale));
  --chip-icon-size-xl: calc(1.125rem * var(--mantine-scale));

  --chip-padding-xs: calc(1rem * var(--mantine-scale));
  --chip-padding-sm: calc(1.25rem * var(--mantine-scale));
  --chip-padding-md: calc(1.5rem * var(--mantine-scale));
  --chip-padding-lg: calc(1.75rem * var(--mantine-scale));
  --chip-padding-xl: calc(2rem * var(--mantine-scale));

  --chip-checked-padding-xs: calc(0.5125rem * var(--mantine-scale));
  --chip-checked-padding-sm: calc(0.625rem * var(--mantine-scale));
  --chip-checked-padding-md: calc(0.73125rem * var(--mantine-scale));
  --chip-checked-padding-lg: calc(0.84375rem * var(--mantine-scale));
  --chip-checked-padding-xl: calc(0.98125rem * var(--mantine-scale));

  --chip-spacing-xs: calc(0.625rem * var(--mantine-scale));
  --chip-spacing-sm: calc(0.75rem * var(--mantine-scale));
  --chip-spacing-md: calc(1rem * var(--mantine-scale));
  --chip-spacing-lg: calc(1.25rem * var(--mantine-scale));
  --chip-spacing-xl: calc(1.375rem * var(--mantine-scale));

  --chip-size: var(--chip-size-sm);
  --chip-icon-size: var(--chip-icon-size-sm);
  --chip-padding: var(--chip-padding-sm);
  --chip-spacing: var(--chip-spacing-sm);
  --chip-checked-padding: var(--chip-checked-padding-sm);
  --chip-bg: var(--mantine-primary-color-filled);
  --chip-hover: var(--mantine-primary-color-filled-hover);
  --chip-color: var(--mantine-color-white);
  --chip-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;
}

.m_be049a53 {
  display: inline-flex;
  align-items: center;
  user-select: none;
  border-radius: var(--chip-radius, 1000rem);
  height: var(--chip-size);
  font-size: var(--chip-fz, var(--mantine-font-size-sm));
  line-height: calc(var(--chip-size) - calc(0.125rem * var(--mantine-scale)));
  padding-inline: var(--chip-padding);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  color: var(--mantine-color-text);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.m_be049a53:where([data-checked]) {
    padding-inline: var(--chip-checked-padding);
  }

.m_be049a53:where([data-disabled]) {
    cursor: not-allowed;
    background-color: var(--mantine-color-disabled);
    color: var(--mantine-color-disabled-color);
  }

:where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]) {
    background-color: var(--mantine-color-white);
    border: 1px solid var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]) {
    background-color: var(--mantine-color-dark-6);
    border: 1px solid var(--mantine-color-dark-4);
}

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]):hover {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]):hover {
      background-color: var(--mantine-color-dark-5);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_3904c1af:not([data-disabled]):active {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_3904c1af:not([data-disabled]):active {
      background-color: var(--mantine-color-dark-5);
  }
}

.m_3904c1af:not([data-disabled]):where([data-checked]) {
    --chip-icon-color: var(--chip-color);
    border: var(--chip-bd);
  }

@media (hover: hover) {

  .m_3904c1af:not([data-disabled]):where([data-checked]):hover {
      background-color: var(--chip-hover);
  }
}

@media (hover: none) {

  .m_3904c1af:not([data-disabled]):where([data-checked]):active {
      background-color: var(--chip-hover);
  }
}

.m_fa109255:not([data-disabled]),
.m_f7e165c3:not([data-disabled]) {
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  color: var(--mantine-color-text);
}

:where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]), :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]) {
    background-color: var(--mantine-color-gray-1);
}

:where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]), :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]) {
    background-color: var(--mantine-color-dark-5);
}

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]):hover, :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]):hover {
      background-color: var(--mantine-color-gray-2);
  }

    :where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]):hover, :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]):hover {
      background-color: var(--mantine-color-dark-4);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_fa109255:not([data-disabled]):active, :where([data-mantine-color-scheme='light']) .m_f7e165c3:not([data-disabled]):active {
      background-color: var(--mantine-color-gray-2);
  }

    :where([data-mantine-color-scheme='dark']) .m_fa109255:not([data-disabled]):active, :where([data-mantine-color-scheme='dark']) .m_f7e165c3:not([data-disabled]):active {
      background-color: var(--mantine-color-dark-4);
  }
}

.m_fa109255:not([data-disabled]):where([data-checked]), .m_f7e165c3:not([data-disabled]):where([data-checked]) {
    --chip-icon-color: var(--chip-color);
    color: var(--chip-color);
    background-color: var(--chip-bg);
  }

@media (hover: hover) {

  .m_fa109255:not([data-disabled]):where([data-checked]):hover, .m_f7e165c3:not([data-disabled]):where([data-checked]):hover {
      background-color: var(--chip-hover);
  }
}

@media (hover: none) {

  .m_fa109255:not([data-disabled]):where([data-checked]):active, .m_f7e165c3:not([data-disabled]):where([data-checked]):active {
      background-color: var(--chip-hover);
  }
}

.m_9ac86df9 {
  width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
  max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
  height: var(--chip-icon-size);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.m_d6d72580 {
  width: var(--chip-icon-size);
  height: var(--chip-icon-size);
  display: block;
  color: var(--chip-icon-color, inherit);
}

.m_bde07329 {
  width: 0;
  height: 0;
  padding: 0;
  opacity: 0;
  margin: 0;
}

.m_bde07329:focus-visible + .m_be049a53 {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

.m_b183c0a2 {
  font-family: var(--mantine-font-family-monospace);
  line-height: var(--mantine-line-height);
  padding: 2px calc(var(--mantine-spacing-xs) / 2);
  border-radius: var(--mantine-radius-sm);
  font-size: var(--mantine-font-size-xs);
  margin: 0;
  overflow: auto;
}

  :where([data-mantine-color-scheme='light']) .m_b183c0a2 {
    background-color: var(--code-bg, var(--mantine-color-gray-0));
}

  :where([data-mantine-color-scheme='dark']) .m_b183c0a2 {
    background-color: var(--code-bg, var(--mantine-color-dark-6));
}

  .m_b183c0a2[data-block] {
    padding: var(--mantine-spacing-xs);
  }

.m_de3d2490 {
  --cs-size: calc(1.75rem * var(--mantine-scale));
  --cs-radius: calc(62.5rem * var(--mantine-scale));

  -webkit-tap-highlight-color: transparent;
  border: none;
  appearance: none;
  display: block;
  line-height: 1;
  position: relative;
  width: var(--cs-size);
  height: var(--cs-size);
  min-width: var(--cs-size);
  min-height: var(--cs-size);
  border-radius: var(--cs-radius);
  color: inherit;
  text-decoration: none;
}

  [data-mantine-color-scheme='light'] .m_de3d2490 {
    --alpha-overlay-color: var(--mantine-color-gray-3);
    --alpha-overlay-bg: var(--mantine-color-white);
}

  [data-mantine-color-scheme='dark'] .m_de3d2490 {
    --alpha-overlay-color: var(--mantine-color-dark-4);
    --alpha-overlay-bg: var(--mantine-color-dark-7);
}

.m_862f3d1b {
  position: absolute;
  inset: 0;
  border-radius: var(--cs-radius);
}

.m_98ae7f22 {
  position: absolute;
  inset: 0;
  border-radius: var(--cs-radius);
  z-index: 1;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0 0 0 calc(0.0625rem * var(--mantine-scale)) inset,
    rgb(0, 0, 0, 0.15) 0 0 calc(0.25rem * var(--mantine-scale)) inset;
}

.m_95709ac0 {
  position: absolute;
  inset: 0;
  border-radius: var(--cs-radius);
  background-size: calc(0.5rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale));
  background-position:
    0 0,
    0 calc(0.25rem * var(--mantine-scale)),
    calc(0.25rem * var(--mantine-scale)) calc(-0.25rem * var(--mantine-scale)),
    calc(-0.25rem * var(--mantine-scale)) 0;
  background-image:
    linear-gradient(45deg, var(--alpha-overlay-color) 25%, transparent 25%),
    linear-gradient(-45deg, var(--alpha-overlay-color) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--alpha-overlay-color) 75%),
    linear-gradient(-45deg, var(--alpha-overlay-bg) 75%, var(--alpha-overlay-color) 75%);
}

.m_93e74e3 {
  position: absolute;
  inset: 0;
  border-radius: var(--cs-radius);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m_fee9c77 {
  --cp-width-xs: calc(11.25rem * var(--mantine-scale));
  --cp-width-sm: calc(12.5rem * var(--mantine-scale));
  --cp-width-md: calc(15rem * var(--mantine-scale));
  --cp-width-lg: calc(17.5rem * var(--mantine-scale));
  --cp-width-xl: calc(20rem * var(--mantine-scale));

  --cp-preview-size-xs: calc(1.625rem * var(--mantine-scale));
  --cp-preview-size-sm: calc(2.125rem * var(--mantine-scale));
  --cp-preview-size-md: calc(2.625rem * var(--mantine-scale));
  --cp-preview-size-lg: calc(3.125rem * var(--mantine-scale));
  --cp-preview-size-xl: calc(3.375rem * var(--mantine-scale));

  --cp-thumb-size-xs: calc(0.5rem * var(--mantine-scale));
  --cp-thumb-size-sm: calc(0.75rem * var(--mantine-scale));
  --cp-thumb-size-md: calc(1rem * var(--mantine-scale));
  --cp-thumb-size-lg: calc(1.25rem * var(--mantine-scale));
  --cp-thumb-size-xl: calc(1.375rem * var(--mantine-scale));

  --cp-saturation-height-xs: calc(6.25rem * var(--mantine-scale));
  --cp-saturation-height-sm: calc(6.875rem * var(--mantine-scale));
  --cp-saturation-height-md: calc(7.5rem * var(--mantine-scale));
  --cp-saturation-height-lg: calc(8.75rem * var(--mantine-scale));
  --cp-saturation-height-xl: calc(10rem * var(--mantine-scale));

  --cp-preview-size: var(--cp-preview-size-sm);
  --cp-thumb-size: var(--cp-thumb-size-sm);
  --cp-saturation-height: var(--cp-saturation-height-sm);
  --cp-width: var(--cp-width-sm);
  --cp-body-spacing: var(--mantine-spacing-sm);

  width: var(--cp-width);
  padding: calc(0.0625rem * var(--mantine-scale));
}

  .m_fee9c77:where([data-full-width]) {
    width: 100%;
  }

.m_9dddfbac {
  width: var(--cp-preview-size);
  height: var(--cp-preview-size);
}

.m_bffecc3e {
  display: flex;
  padding-top: calc(var(--cp-body-spacing) / 2);
}

.m_3283bb96 {
  flex: 1;
}

.m_3283bb96:not(:only-child) {
    margin-inline-end: var(--mantine-spacing-xs);
  }

.m_40d572ba {
  overflow: hidden;
  position: absolute;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
  border: 2px solid var(--mantine-color-white);
  width: var(--cp-thumb-size);
  height: var(--cp-thumb-size);
  border-radius: var(--cp-thumb-size);
  left: calc(var(--thumb-x-offset) - var(--cp-thumb-size) / 2);
  top: calc(var(--thumb-y-offset) - var(--cp-thumb-size) / 2);
}

.m_d8ee6fd8 {
  height: unset !important;
  width: unset !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: calc(0.125rem * var(--mantine-scale));
  cursor: pointer;
  padding-bottom: calc(var(--cp-swatch-size) - calc(0.25rem * var(--mantine-scale)));
  flex: 0 0 calc(var(--cp-swatch-size) - calc(0.25rem * var(--mantine-scale)));
}

.m_5711e686 {
  margin-top: calc(0.3125rem * var(--mantine-scale));
  margin-inline: calc(-0.125rem * var(--mantine-scale));
  display: flex;
  flex-wrap: wrap;
}

.m_5711e686:only-child {
    margin-top: 0;
  }

.m_202a296e {
  --cp-thumb-size-xs: calc(0.5rem * var(--mantine-scale));
  --cp-thumb-size-sm: calc(0.75rem * var(--mantine-scale));
  --cp-thumb-size-md: calc(1rem * var(--mantine-scale));
  --cp-thumb-size-lg: calc(1.25rem * var(--mantine-scale));
  --cp-thumb-size-xl: calc(1.375rem * var(--mantine-scale));

  -webkit-tap-highlight-color: transparent;
  position: relative;
  height: var(--cp-saturation-height);
  border-radius: var(--mantine-radius-sm);
  margin: calc(var(--cp-thumb-size) / 2);
}

.m_202a296e:where([data-focus-ring='auto']):focus:focus-visible .m_40d572ba {
        outline: 2px solid var(--mantine-color-blue-filled);
      }

.m_202a296e:where([data-focus-ring='always']):focus .m_40d572ba {
        outline: 2px solid var(--mantine-color-blue-filled);
      }

.m_11b3db02 {
  position: absolute;
  border-radius: var(--mantine-radius-sm);
  inset: calc(var(--cp-thumb-size) * -1 / 2 - calc(0.0625rem * var(--mantine-scale)));
}

.m_d856d47d {
  --cp-thumb-size-xs: calc(0.5rem * var(--mantine-scale));
  --cp-thumb-size-sm: calc(0.75rem * var(--mantine-scale));
  --cp-thumb-size-md: calc(1rem * var(--mantine-scale));
  --cp-thumb-size-lg: calc(1.25rem * var(--mantine-scale));
  --cp-thumb-size-xl: calc(1.375rem * var(--mantine-scale));
  --cp-thumb-size: var(--cp-thumb-size, calc(0.75rem * var(--mantine-scale)));

  position: relative;
  height: calc(var(--cp-thumb-size) + calc(0.125rem * var(--mantine-scale)));
  margin-inline: calc(var(--cp-thumb-size) / 2);
  outline: none;
}

.m_d856d47d + .m_d856d47d {
    margin-top: calc(0.375rem * var(--mantine-scale));
  }

.m_d856d47d:where([data-focus-ring='auto']):focus:focus-visible .m_40d572ba {
        outline: 2px solid var(--mantine-color-blue-filled);
      }

.m_d856d47d:where([data-focus-ring='always']):focus .m_40d572ba {
        outline: 2px solid var(--mantine-color-blue-filled);
      }

:where([data-mantine-color-scheme='light']) .m_d856d47d {
    --slider-checkers: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_d856d47d {
    --slider-checkers: var(--mantine-color-dark-4);
}

.m_8f327113 {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline: calc(var(--cp-thumb-size) * -1 / 2 - calc(0.0625rem * var(--mantine-scale)));
  border-radius: 10000rem;
}

.m_b077c2bc {
  --ci-eye-dropper-icon-size-xs: calc(0.875rem * var(--mantine-scale));
  --ci-eye-dropper-icon-size-sm: calc(1rem * var(--mantine-scale));
  --ci-eye-dropper-icon-size-md: calc(1.125rem * var(--mantine-scale));
  --ci-eye-dropper-icon-size-lg: calc(1.25rem * var(--mantine-scale));
  --ci-eye-dropper-icon-size-xl: calc(1.375rem * var(--mantine-scale));
  --ci-eye-dropper-icon-size: var(--ci-eye-dropper-icon-size-sm);
}

.m_66a028b5 {
  --ci-button-size-xs: calc(1.375rem * var(--mantine-scale));
  --ci-button-size-sm: calc(1.625rem * var(--mantine-scale));
  --ci-button-size-md: calc(1.75rem * var(--mantine-scale));
  --ci-button-size-lg: calc(2rem * var(--mantine-scale));
  --ci-button-size-xl: calc(2.5rem * var(--mantine-scale));
  --ci-button-size: var(--ci-button-size-sm);

  width: var(--ci-button-size);
  height: var(--ci-button-size);
  min-width: var(--ci-button-size);
  min-height: var(--ci-button-size);
}

.m_c5ccdcab {
  --ci-preview-size-xs: calc(1rem * var(--mantine-scale));
  --ci-preview-size-sm: calc(1.125rem * var(--mantine-scale));
  --ci-preview-size-md: calc(1.375rem * var(--mantine-scale));
  --ci-preview-size-lg: calc(1.75rem * var(--mantine-scale));
  --ci-preview-size-xl: calc(2.25rem * var(--mantine-scale));
  --ci-preview-size: var(--ci-preview-size-sm);
}

.m_5ece2cd7 {
  padding: calc(0.5rem * var(--mantine-scale));
}

.m_7485cace {
  --container-size-xs: calc(33.75rem * var(--mantine-scale));
  --container-size-sm: calc(45rem * var(--mantine-scale));
  --container-size-md: calc(60rem * var(--mantine-scale));
  --container-size-lg: calc(71.25rem * var(--mantine-scale));
  --container-size-xl: calc(82.5rem * var(--mantine-scale));
  --container-size: var(--container-size-md);
}

  .m_7485cace:where([data-strategy='block']) {
    max-width: var(--container-size);
    padding-inline: var(--mantine-spacing-md);
    margin-inline: auto;
  }

  .m_7485cace:where([data-strategy='block']):where([data-fluid]) {
      max-width: 100%;
    }

  .m_7485cace:where([data-strategy='grid']) {
    display: grid;
    grid-template-columns: 1fr min(100%, var(--container-size)) 1fr;
    margin-inline: auto;
  }

  .m_7485cace:where([data-strategy='grid']) > * {
      grid-column: 2;
    }

  .m_7485cace:where([data-strategy='grid']) > [data-breakout] {
      grid-column: 1 / -1;
    }

  .m_7485cace:where([data-strategy='grid']) > [data-breakout] > [data-container] {
        max-width: var(--container-size);
        margin-inline: auto;
      }

.m_f84d0407 {
  --data-list-fz: var(--mantine-font-size-sm);
  --data-list-lh: var(--mantine-line-height-sm);
  --data-list-gap: var(--mantine-spacing-sm);
  --data-list-label-width: calc(7.5rem * var(--mantine-scale));

  display: flex;
  flex-direction: column;
  gap: var(--data-list-gap);
  font-size: var(--data-list-fz);
  line-height: var(--data-list-lh);
  margin: 0;
  padding: 0;
}

  .m_f84d0407:where([data-with-divider]) {
    gap: 0;
  }

.m_f848fe38 {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--mantine-spacing-xs);
}

.m_f84d0407:where([data-orientation='vertical']) > .m_f848fe38 {
  flex-direction: column;
  gap: 0;
}

.m_c791b39c {
  color: var(--mantine-color-dimmed);
  font-size: var(--data-list-fz);
  line-height: var(--data-list-lh);
  min-width: var(--data-list-label-width);
  margin: 0;
}

.m_f84d0407:where([data-orientation='vertical']) .m_c791b39c {
  min-width: 100%;
}

.m_c81ec619 {
  font-size: var(--data-list-fz);
  line-height: var(--data-list-lh);
  margin: 0;
}

.m_f84d0407:where([data-with-divider]) > .m_f848fe38:where(:not(:first-of-type)) {
  border-top: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);
  padding-top: var(--data-list-gap);
  margin-top: var(--data-list-gap);
}

.m_e2125a27 {
  --dialog-size-xs: calc(10rem * var(--mantine-scale));
  --dialog-size-sm: calc(12.5rem * var(--mantine-scale));
  --dialog-size-md: calc(21.25rem * var(--mantine-scale));
  --dialog-size-lg: calc(25rem * var(--mantine-scale));
  --dialog-size-xl: calc(31.25rem * var(--mantine-scale));
  --dialog-size: var(--dialog-size-md);

  position: relative;
  width: var(--dialog-size);
  max-width: calc(100vw - var(--mantine-spacing-xl) * 2);
  min-height: calc(3.125rem * var(--mantine-scale));
}

.m_5abab665 {
  position: absolute;
  top: calc(var(--mantine-spacing-md) / 2);
  inset-inline-end: calc(var(--mantine-spacing-md) / 2);
}

.m_3eebeb36 {
  --divider-size-xs: calc(0.0625rem * var(--mantine-scale));
  --divider-size-sm: calc(0.125rem * var(--mantine-scale));
  --divider-size-md: calc(0.1875rem * var(--mantine-scale));
  --divider-size-lg: calc(0.25rem * var(--mantine-scale));
  --divider-size-xl: calc(0.3125rem * var(--mantine-scale));
  --divider-size: var(--divider-size-xs);
}

  :where([data-mantine-color-scheme='light']) .m_3eebeb36 {
    --divider-color: var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_3eebeb36 {
    --divider-color: var(--mantine-color-dark-4);
}

  .m_3eebeb36:where([data-orientation='horizontal']) {
    border-top: var(--divider-size) var(--divider-border-style, solid) var(--divider-color);
  }

  .m_3eebeb36:where([data-orientation='vertical']) {
    border-inline-start: var(--divider-size) var(--divider-border-style, solid) var(--divider-color);
    height: auto;
    align-self: stretch;
  }

  .m_3eebeb36:where([data-with-label]) {
    border: 0;
  }

.m_9e365f20 {
  display: flex;
  align-items: center;
  font-size: var(--mantine-font-size-xs);
  color: var(--mantine-color-dimmed);
  white-space: nowrap;
}

.m_9e365f20:where([data-position='left'])::before {
    display: none;
  }

.m_9e365f20:where([data-position='right'])::after {
    display: none;
  }

.m_9e365f20::before {
    content: '';
    flex: 1;
    height: calc(0.0625rem * var(--mantine-scale));
    border-top: var(--divider-size) var(--divider-border-style, solid) var(--divider-color);
    margin-inline-end: var(--mantine-spacing-xs);
  }

.m_9e365f20::after {
    content: '';
    flex: 1;
    height: calc(0.0625rem * var(--mantine-scale));
    border-top: var(--divider-size) var(--divider-border-style, solid) var(--divider-color);
    margin-inline-start: var(--mantine-spacing-xs);
  }

.m_f11b401e {
  --drawer-size-xs: calc(20rem * var(--mantine-scale));
  --drawer-size-sm: calc(23.75rem * var(--mantine-scale));
  --drawer-size-md: calc(27.5rem * var(--mantine-scale));
  --drawer-size-lg: calc(38.75rem * var(--mantine-scale));
  --drawer-size-xl: calc(48.75rem * var(--mantine-scale));
  --drawer-size: var(--drawer-size-md);
  --drawer-offset: 0rem;
}

.m_5a7c2c9 {
  z-index: 1000;
}

.m_b8a05bbd {
  flex: var(--drawer-flex, 0 0 var(--drawer-size));
  height: var(--drawer-height, calc(100% - var(--drawer-offset) * 2));
  margin: var(--drawer-offset);
  max-width: calc(100% - var(--drawer-offset) * 2);
  max-height: calc(100% - var(--drawer-offset) * 2);
  overflow-y: auto;
}

.m_b8a05bbd[data-hidden] {
    opacity: 0 !important;
    pointer-events: none;
  }

.m_31cd769a {
  display: flex;
  justify-content: var(--drawer-justify, flex-start);
  align-items: var(--drawer-align, flex-start);
}

.m_7ffcadab {
  --empty-state-indicator-size-xs: calc(2rem * var(--mantine-scale));
  --empty-state-indicator-size-sm: calc(2.5rem * var(--mantine-scale));
  --empty-state-indicator-size-md: calc(3rem * var(--mantine-scale));
  --empty-state-indicator-size-lg: calc(3.75rem * var(--mantine-scale));
  --empty-state-indicator-size-xl: calc(4.5rem * var(--mantine-scale));

  --empty-state-gap-xs: calc(0.375rem * var(--mantine-scale));
  --empty-state-gap-sm: calc(0.5rem * var(--mantine-scale));
  --empty-state-gap-md: calc(0.625rem * var(--mantine-scale));
  --empty-state-gap-lg: calc(0.75rem * var(--mantine-scale));
  --empty-state-gap-xl: calc(1rem * var(--mantine-scale));

  --empty-state-title-fz-xs: var(--mantine-font-size-sm);
  --empty-state-title-fz-sm: var(--mantine-font-size-md);
  --empty-state-title-fz-md: var(--mantine-font-size-lg);
  --empty-state-title-fz-lg: var(--mantine-font-size-xl);
  --empty-state-title-fz-xl: calc(var(--mantine-font-size-xl) * 1.2);

  --empty-state-description-fz-xs: var(--mantine-font-size-xs);
  --empty-state-description-fz-sm: var(--mantine-font-size-sm);
  --empty-state-description-fz-md: var(--mantine-font-size-sm);
  --empty-state-description-fz-lg: var(--mantine-font-size-md);
  --empty-state-description-fz-xl: var(--mantine-font-size-lg);

  display: flex;
  gap: var(--empty-state-gap, var(--empty-state-gap-md));
}

  .m_7ffcadab[data-align='center'] {
    flex-direction: column;
    align-items: center;
  }

  .m_7ffcadab[data-align='left'] {
    flex-direction: row;
    align-items: flex-start;
  }

  .m_7ffcadab[data-align='right'] {
    flex-direction: row-reverse;
    align-items: flex-start;
  }

.m_7ff5666b {
  display: flex;
  flex-direction: column;
  gap: var(--empty-state-gap, var(--empty-state-gap-md));
  min-width: 0;
}

[data-align='center'] > .m_7ff5666b {
    align-items: center;
    text-align: center;
  }

[data-align='left'] > .m_7ff5666b {
    align-items: flex-start;
    text-align: left;
  }

[data-align='right'] > .m_7ff5666b {
    align-items: flex-end;
    text-align: right;
  }

.m_866226e6 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--empty-state-indicator-color, var(--mantine-color-dimmed));
  font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
  line-height: 1;
}

.m_866226e6 > svg {
    width: 1em;
    height: 1em;
  }

[data-mantine-color-scheme='light'] .m_866226e6[data-with-background] {
      --empty-state-indicator-default-bg: var(--mantine-color-gray-1);
}

[data-mantine-color-scheme='dark'] .m_866226e6[data-with-background] {
      --empty-state-indicator-default-bg: var(--mantine-color-dark-6);
}

.m_866226e6[data-with-background] {

    width: 2em;
    height: 2em;
    border-radius: calc(62.5rem * var(--mantine-scale));
    background-color: var(--empty-state-indicator-bg, var(--empty-state-indicator-default-bg));
}

.m_7fb28eaf {
  font-size: var(--empty-state-title-fz, var(--empty-state-title-fz-md));
  font-weight: 600;
  line-height: 1.3;
  color: var(--mantine-color-bright);
  margin: 0;
  text-wrap: balance;
}

.m_5f111313 {
  font-size: var(--empty-state-description-fz, var(--empty-state-description-fz-md));
  line-height: 1.55;
  color: var(--mantine-color-dimmed);
  margin: 0;
  max-width: 32rem;
  text-wrap: pretty;
}

.m_65f4fb94 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mantine-spacing-sm);
}

.m_e9408a47 {
  padding: var(--mantine-spacing-lg);
  padding-top: var(--mantine-spacing-xs);
  border-radius: var(--fieldset-radius, var(--mantine-radius-default));
  min-inline-size: auto;
}

.m_84c9523a {
  border: calc(0.0625rem * var(--mantine-scale)) solid;
}

:where([data-mantine-color-scheme='light']) .m_84c9523a {
    border-color: var(--mantine-color-gray-3);
    background-color: var(--mantine-color-white);
}

:where([data-mantine-color-scheme='dark']) .m_84c9523a {
    border-color: var(--mantine-color-dark-4);
    background-color: var(--mantine-color-dark-7);
}

.m_ef274e49 {
  border: calc(0.0625rem * var(--mantine-scale)) solid;
}

:where([data-mantine-color-scheme='light']) .m_ef274e49 {
    border-color: var(--mantine-color-gray-3);
    background-color: var(--mantine-color-gray-0);
}

:where([data-mantine-color-scheme='dark']) .m_ef274e49 {
    border-color: var(--mantine-color-dark-4);
    background-color: var(--mantine-color-dark-6);
}

.m_eda993d3 {
  padding: 0;
  border: 0;
  border-radius: 0;
}

.m_90794832 {
  font-size: var(--mantine-font-size-sm);
}

.m_74ca27fe {
  padding: 0;
  margin-bottom: var(--mantine-spacing-sm);
}

.m_df020499 {
  position: fixed;
  z-index: var(--floating-window-z-index);
}

.m_8478a6da {
  container: mantine-grid / inline-size;
}

.m_410352e9 {
  --grid-overflow: visible;
  --grid-column-gap: var(--grid-gap);
  --grid-row-gap: var(--grid-gap);

  overflow: var(--grid-overflow);
}

.m_dee7bd2f {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--grid-justify);
  align-items: var(--grid-align);
  gap: var(--grid-row-gap) var(--grid-column-gap);
}

.m_96bdd299 {
  --col-flex-grow: 0;
  --col-offset: 0rem;

  flex-shrink: 0;
  order: var(--col-order);
  flex-basis: var(--col-flex-basis);
  width: var(--col-width);
  max-width: var(--col-max-width);
  flex-grow: var(--col-flex-grow);
  margin-inline-start: var(--col-offset);
  align-self: var(--col-align-self);
}

.m_bcb3f3c2 {
  color: var(--mantine-color-black);
}

  :where([data-mantine-color-scheme='light']) .m_bcb3f3c2 {
    background-color: var(--mark-bg-light);
}

  :where([data-mantine-color-scheme='dark']) .m_bcb3f3c2 {
    background-color: var(--mark-bg-dark);
}

.m_9e117634 {
  display: block;
  object-fit: var(--image-object-fit, cover);
  width: 100%;
  border-radius: var(--image-radius, 0);
}

@keyframes m_885901b1 {
  0% {
    opacity: 0.6;
    transform: scale(0);
  }

  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

.m_e5262200 {
  --indicator-size: calc(0.625rem * var(--mantine-scale));
  --indicator-color: var(--mantine-primary-color-filled);

  position: relative;
  display: block;
}

.m_e5262200:where([data-inline]) {
    display: inline-block;
  }

.m_760d1fb1 {
  position: absolute;
  top: var(--indicator-top);
  left: var(--indicator-left);
  right: var(--indicator-right);
  bottom: var(--indicator-bottom);
  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));
  min-width: var(--indicator-size);
  height: var(--indicator-size);
  border-radius: var(--indicator-radius, 1000rem);
  z-index: var(--indicator-z-index, 200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--mantine-font-size-xs);
  background-color: var(--indicator-color);
  color: var(--indicator-text-color, var(--mantine-color-white));
  white-space: nowrap;
}

.m_760d1fb1::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--indicator-color);
    border-radius: var(--indicator-radius, 1000rem);
    z-index: -1;
  }

.m_760d1fb1:where([data-with-label]) {
    padding-inline: calc(var(--mantine-spacing-xs) / 2);
  }

.m_760d1fb1:where([data-with-border]) {
    border: 2px solid var(--mantine-color-body);
  }

.m_760d1fb1[data-processing]::before {
      animation: m_885901b1 1000ms linear infinite;
    }

.m_dc6f14e2 {
  --kbd-fz-xs: calc(0.625rem * var(--mantine-scale));
  --kbd-fz-sm: calc(0.75rem * var(--mantine-scale));
  --kbd-fz-md: calc(0.875rem * var(--mantine-scale));
  --kbd-fz-lg: calc(1rem * var(--mantine-scale));
  --kbd-fz-xl: calc(1.25rem * var(--mantine-scale));
  --kbd-fz: var(--kbd-fz-sm);

  font-family: var(--mantine-font-family-monospace);
  line-height: var(--mantine-line-height);
  font-weight: var(--mantine-font-weight-bold);
  font-size: var(--kbd-fz);
  border-radius: var(--mantine-radius-sm);
  border: calc(0.0625rem * var(--mantine-scale)) solid;
  border-bottom-width: calc(0.1875rem * var(--mantine-scale));
  unicode-bidi: embed;
  text-align: center;
  padding: 0.12em 0.45em;
}

  :where([data-mantine-color-scheme='light']) .m_dc6f14e2 {
    border-color: var(--mantine-color-gray-3);
    color: var(--mantine-color-gray-7);
    background-color: var(--mantine-color-gray-0);
}

  :where([data-mantine-color-scheme='dark']) .m_dc6f14e2 {
    border-color: var(--mantine-color-dark-4);
    color: var(--mantine-color-dark-0);
    background-color: var(--mantine-color-dark-6);
}

.m_abbac491 {
  --list-fz: var(--mantine-font-size-md);
  --list-lh: var(--mantine-line-height-md);
  --list-marker-gap: var(--mantine-spacing-lg);

  list-style-position: outside;
  font-size: var(--list-fz);
  line-height: var(--list-lh);
  margin: 0;
  padding: 0;
  padding-inline-start: var(--list-marker-gap);
}

  .m_abbac491[data-type='none'] {
    --list-marker-gap: 0;
  }

  .m_abbac491:where([data-with-padding]) {
    padding-inline-start: calc(var(--list-marker-gap) + var(--mantine-spacing-md));
  }

.m_abb6bec2 {
  white-space: normal;
  line-height: var(--list-lh);
}

.m_abb6bec2:where([data-with-icon]) {
    list-style: none;
  }

.m_abb6bec2:where([data-with-icon]) .m_75cd9f71 {
      --li-direction: row;
      --li-align: center;
    }

.m_abb6bec2:where(:not(:first-of-type)) {
    margin-top: var(--list-spacing, 0);
  }

.m_abb6bec2:where([data-centered]) {
    line-height: 1;
  }

.m_75cd9f71 {
  display: inline-flex;
  flex-direction: var(--li-direction, column);
  align-items: var(--li-align, flex-start);
  white-space: normal;
}

.m_60f83e5b {
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: var(--mantine-spacing-sm);
}

.m_6e45937b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: var(--lo-z-index);
}

.m_e8eb006c {
  position: relative;
  z-index: calc(var(--lo-z-index) + 1);
}

.m_df587f17 {
  z-index: var(--lo-z-index);
}

@keyframes m_55dc625a {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(
      calc(
        -100% / var(--marquee-repeat, 4) - var(--marquee-gap, var(--mantine-spacing-md)) /
          var(--marquee-repeat, 4)
      )
    );
  }
}

@keyframes m_cdef532c {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(
      calc(
        -100% / var(--marquee-repeat, 4) - var(--marquee-gap, var(--mantine-spacing-md)) /
          var(--marquee-repeat, 4)
      )
    );
  }
}

.m_7dc7d3cd {
  --_fade-color: var(--marquee-fade-color, var(--mantine-color-body));
  --_fade-size: var(--marquee-fade-size, 5%);

  position: relative;
  overflow: hidden;
  display: flex;
  max-height: 100%;
  max-width: 100%;

  /* Fade edges using pseudo-elements */

  /* Horizontal fade edges */

  /* Vertical fade edges */
}

.m_7dc7d3cd:where([data-orientation='horizontal']) {
    flex-direction: row;
  }

.m_7dc7d3cd:where([data-orientation='vertical']) {
    flex-direction: column;
  }

.m_7dc7d3cd[data-fade-edges]::before,
  .m_7dc7d3cd[data-fade-edges]::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }

.m_7dc7d3cd[data-orientation='horizontal'][data-fade-edges]::before,
  .m_7dc7d3cd[data-orientation='horizontal'][data-fade-edges]::after {
    top: 0;
    bottom: 0;
    width: var(--_fade-size);
  }

.m_7dc7d3cd[data-orientation='horizontal'][data-fade-edges]::before {
    left: 0;
    background: linear-gradient(to right, var(--_fade-color), transparent);
  }

.m_7dc7d3cd[data-orientation='horizontal'][data-fade-edges]::after {
    right: 0;
    background: linear-gradient(to left, var(--_fade-color), transparent);
  }

.m_7dc7d3cd[data-orientation='vertical'][data-fade-edges]::before,
  .m_7dc7d3cd[data-orientation='vertical'][data-fade-edges]::after {
    left: 0;
    right: 0;
    height: var(--_fade-size);
  }

.m_7dc7d3cd[data-orientation='vertical'][data-fade-edges]::before {
    top: 0;
    background: linear-gradient(to bottom, var(--_fade-color), transparent);
  }

.m_7dc7d3cd[data-orientation='vertical'][data-fade-edges]::after {
    bottom: 0;
    background: linear-gradient(to top, var(--_fade-color), transparent);
  }

.m_1f9675ae {
  display: flex;
  gap: var(--marquee-gap, var(--mantine-spacing-md));
  animation-duration: var(--marquee-duration, 40000ms);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.m_7dc7d3cd[data-orientation='horizontal'] > .m_1f9675ae {
    flex-direction: row;
    animation-name: m_55dc625a;
  }

.m_7dc7d3cd[data-orientation='vertical'] > .m_1f9675ae {
    flex-direction: column;
    animation-name: m_cdef532c;
  }

.m_7dc7d3cd[data-reverse] > .m_1f9675ae {
    animation-direction: reverse;
  }

.m_7dc7d3cd[data-pause-on-hover]:hover > .m_1f9675ae {
    animation-play-state: paused;
  }

.m_3a9900f4 {
  display: flex;
  flex-shrink: 0;
  gap: var(--marquee-gap, var(--mantine-spacing-md));
}

.m_7dc7d3cd[data-orientation='horizontal'] .m_3a9900f4 {
    flex-direction: row;
  }

.m_7dc7d3cd[data-orientation='vertical'] .m_3a9900f4 {
    flex-direction: column;
  }

.m_dc9b7c9f {
  padding: calc(0.25rem * var(--mantine-scale));
}

.m_9bfac126 {
  color: var(--mantine-color-dimmed);
  font-weight: var(--mantine-font-weight-medium);
  font-size: var(--mantine-font-size-xs);
  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm);
  cursor: default;
}

.m_efdf90cb {
  margin-top: calc(0.25rem * var(--mantine-scale));
  margin-bottom: calc(0.25rem * var(--mantine-scale));
  border-top: calc(0.0625rem * var(--mantine-scale)) solid;
}

:where([data-mantine-color-scheme='light']) .m_efdf90cb {
    border-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_efdf90cb {
    border-color: var(--mantine-color-dark-4);
}

.m_99ac2aa1 {
  font-size: var(--mantine-font-size-sm);
  width: 100%;
  padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm);
  border-radius: var(--popover-radius, var(--mantine-radius-default));
  color: var(--menu-item-color, var(--mantine-color-text));
  display: flex;
  align-items: center;
  user-select: none;
}

.m_99ac2aa1:where([data-disabled], :disabled) {
    color: var(--mantine-color-disabled-color);
    opacity: 0.6;
    cursor: not-allowed;
  }

:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus, [data-menu-active]):where(:not(:disabled, [data-disabled])) {
        background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
}

:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus, [data-menu-active]):where(:not(:disabled, [data-disabled])) {
        background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
}

.m_99ac2aa1:where([data-sub-menu-item]) {
    padding-inline-end: calc(0.3125rem * var(--mantine-scale));
  }

.m_ef8769b6 {
  --menu-search-padding: var(--popover-padding, 4px);

  margin-inline: calc(var(--menu-search-padding) * -1);
  margin-top: calc(var(--menu-search-padding) * -1);
  width: calc(100% + var(--menu-search-padding) * 2);
  border-top-width: 0;
  border-inline-width: 0;
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  margin-bottom: var(--menu-search-padding);
}

:where([data-mantine-color-scheme='light']) .m_ef8769b6, :where([data-mantine-color-scheme='light']) .m_ef8769b6:focus {
      border-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_ef8769b6, :where([data-mantine-color-scheme='dark']) .m_ef8769b6:focus {
      border-color: var(--mantine-color-dark-4);
}

:where([data-mantine-color-scheme='light']) .m_ef8769b6 {
    background-color: var(--mantine-color-white);
}

:where([data-mantine-color-scheme='dark']) .m_ef8769b6 {
    background-color: var(--mantine-color-dark-7);
}

.m_5476e0d3 {
  flex: 1;
}

.m_8395186e {
  width: calc(0.75rem * var(--mantine-scale));
  height: calc(0.75rem * var(--mantine-scale));
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: calc(0.5rem * var(--mantine-scale));
}

.m_8b75e504 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.m_8b75e504:where([data-position='left']) {
    margin-inline-end: var(--mantine-spacing-xs);
  }

.m_8b75e504:where([data-position='right']) {
    margin-inline-start: var(--mantine-spacing-xs);
  }

.m_b85b0bed {
  transform: rotate(-90deg);
}

:where([dir="rtl"]) .m_b85b0bed {
    transform: rotate(90deg);
}

.m_de2654db {
  display: flex;
  align-items: center;
}

.m_f08a2b4a {
  font-size: var(--mantine-font-size-sm);
  line-height: 1;
  padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm);
  border-radius: var(--mantine-radius-default);
  color: var(--mantine-color-text);
  background-color: transparent;
  user-select: none;
  cursor: pointer;
}

.m_f08a2b4a:where([data-disabled], :disabled) {
    color: var(--mantine-color-disabled-color);
    opacity: 0.6;
    cursor: not-allowed;
  }

:where([data-mantine-color-scheme='light']) .m_f08a2b4a:where(:hover, :focus-visible, [data-expanded]):where(:not(:disabled, [data-disabled])) {
        background-color: var(--mantine-color-gray-1);
}

:where([data-mantine-color-scheme='dark']) .m_f08a2b4a:where(:hover, :focus-visible, [data-expanded]):where(:not(:disabled, [data-disabled])) {
        background-color: var(--mantine-color-dark-5);
}

.m_9df02822 {
  --modal-size-xs: calc(20rem * var(--mantine-scale));
  --modal-size-sm: calc(23.75rem * var(--mantine-scale));
  --modal-size-md: calc(27.5rem * var(--mantine-scale));
  --modal-size-lg: calc(38.75rem * var(--mantine-scale));
  --modal-size-xl: calc(48.75rem * var(--mantine-scale));
  --modal-size: var(--modal-size-md);

  --modal-y-offset: 5dvh;
  --modal-x-offset: 5vw;
}

  .m_9df02822[data-full-screen] {
    --modal-border-radius: 0 !important;
  }

  .m_9df02822[data-full-screen] .m_54c44539 {
      --modal-content-flex: 0 0 100%;
      --modal-content-max-height: auto;
      --modal-content-height: 100dvh;
    }

  .m_9df02822[data-full-screen] .m_1f958f16 {
      --modal-inner-y-offset: 0;
      --modal-inner-x-offset: 0;
    }

  .m_9df02822[data-centered] .m_1f958f16 {
      --modal-inner-align: center;
    }

.m_d0e2b9cd {
  border-start-start-radius: var(--modal-radius, var(--mantine-radius-default));
  border-start-end-radius: var(--modal-radius, var(--mantine-radius-default));
}

.m_54c44539 {
  flex: var(--modal-content-flex, 0 0 var(--modal-size));
  max-width: 100%;
  max-height: var(--modal-content-max-height, calc(100dvh - var(--modal-y-offset) * 2));
  height: var(--modal-content-height, auto);
  overflow-y: auto;
}

.m_54c44539[data-full-screen] {
    border-radius: 0;
  }

.m_54c44539[data-hidden] {
    opacity: 0 !important;
    pointer-events: none;
  }

.m_1f958f16 {
  display: flex;
  justify-content: center;
  align-items: var(--modal-inner-align, flex-start);
  padding-top: var(--modal-inner-y-offset, var(--modal-y-offset));
  padding-bottom: var(--modal-inner-y-offset, var(--modal-y-offset));
  padding-inline: var(--modal-inner-x-offset, var(--modal-x-offset));
}

.m_7cda1cd6 {
  --pill-fz-xs: calc(0.625rem * var(--mantine-scale));
  --pill-fz-sm: calc(0.75rem * var(--mantine-scale));
  --pill-fz-md: calc(0.875rem * var(--mantine-scale));
  --pill-fz-lg: calc(1rem * var(--mantine-scale));
  --pill-fz-xl: calc(1.125rem * var(--mantine-scale));

  --pill-height-xs: calc(1.125rem * var(--mantine-scale));
  --pill-height-sm: calc(1.375rem * var(--mantine-scale));
  --pill-height-md: calc(1.5625rem * var(--mantine-scale));
  --pill-height-lg: calc(1.75rem * var(--mantine-scale));
  --pill-height-xl: calc(2rem * var(--mantine-scale));

  --pill-fz: var(--pill-fz-sm);
  --pill-height: var(--pill-height-sm);

  font-size: var(--pill-fz);
  flex: 0;
  height: var(--pill-height);
  padding-inline: 0.8em;
  display: inline-flex;
  align-items: center;
  border-radius: var(--pill-radius, 1000rem);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  max-width: 100%;
  position: relative;
}

  :where([data-mantine-color-scheme='dark']) .m_7cda1cd6 {
    background-color: var(--mantine-color-dark-7);
    color: var(--mantine-color-dark-0);
}

  :where([data-mantine-color-scheme='light']) .m_7cda1cd6 {
    color: var(--mantine-color-black);
}

  .m_7cda1cd6:where([data-with-remove]:not(:has(button:disabled))) {
    padding-inline-end: 0;
  }

  .m_7cda1cd6:where([data-disabled], :has(button:disabled)) {
    cursor: not-allowed;
  }

  .m_7cda1cd6:where([draggable='true']) {
    cursor: grab;
  }

  .m_7cda1cd6:where([draggable='true']):focus-visible {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

  .m_7cda1cd6:where([data-dragging]) {
    opacity: 0.4;
    cursor: grabbing;
  }

  .m_7cda1cd6:where([data-drag-over='before'])::before,
  .m_7cda1cd6:where([data-drag-over='after'])::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(0.125rem * var(--mantine-scale));
    background-color: var(--mantine-primary-color-filled);
    pointer-events: none;
    z-index: 1;
  }

  .m_7cda1cd6:where([data-drag-over='before'])::before {
    inset-inline-start: calc(-0.25rem * var(--mantine-scale));
  }

  .m_7cda1cd6:where([data-drag-over='after'])::after {
    inset-inline-end: calc(-0.25rem * var(--mantine-scale));
  }

:where([data-mantine-color-scheme='light']) .m_44da308b {
    background-color: var(--mantine-color-gray-1);
}

:where([data-mantine-color-scheme='light']) .m_44da308b:where([data-disabled], :has(button:disabled)) {
      background-color: var(--mantine-color-disabled);
    }

:where([data-mantine-color-scheme='light']) .m_e3a01f8 {
    background-color: var(--mantine-color-white);
}

:where([data-mantine-color-scheme='light']) .m_e3a01f8:where([data-disabled], :has(button:disabled)) {
      background-color: var(--mantine-color-disabled);
    }

.m_1e0e6180 {
  cursor: inherit;
  display: block;
  overflow: hidden;
  height: 100%;
  line-height: var(--pill-height);
  text-overflow: ellipsis;
}

.m_ae386778 {
  color: inherit;
  font-size: inherit;
  height: 100%;
  min-height: unset;
  min-width: 2em;
  width: unset;
  border-radius: 0;
  padding-inline-start: 0.1em;
  padding-inline-end: 0.3em;
  flex: 0;
  border-end-end-radius: var(--pill-radius, 50%);
  border-start-end-radius: var(--pill-radius, 50%);
}

.m_7cda1cd6[data-disabled] > .m_ae386778,
  .m_ae386778:disabled {
    display: none;
    background-color: transparent;
    width: 0.8em;
    min-width: 0.8em;
    padding: 0;
    cursor: not-allowed;
  }

.m_7cda1cd6[data-disabled] > .m_ae386778 > svg, .m_ae386778:disabled > svg {
      display: none;
    }

.m_ae386778 > svg {
    pointer-events: none;
  }

.m_1dcfd90b {
  --pg-gap-xs: calc(0.375rem * var(--mantine-scale));
  --pg-gap-sm: calc(0.5rem * var(--mantine-scale));
  --pg-gap-md: calc(0.625rem * var(--mantine-scale));
  --pg-gap-lg: calc(0.75rem * var(--mantine-scale));
  --pg-gap-xl: calc(0.75rem * var(--mantine-scale));
  --pg-gap: var(--pg-gap-sm);

  display: flex;
  align-items: center;
  gap: var(--pg-gap);
  flex-wrap: wrap;
}

.m_45c4369d {
  background-color: transparent;
  appearance: none;
  min-width: calc(6.25rem * var(--mantine-scale));
  flex: 1;
  border: 0;
  font-size: inherit;
  height: 1.6em;
  color: inherit;
  padding: 0;
}

  .m_45c4369d::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
  }

  .m_45c4369d:where([data-type='hidden'], [data-type='auto']) {
    height: calc(0.0625rem * var(--mantine-scale));
    width: calc(0.0625rem * var(--mantine-scale));
    top: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    opacity: 0;
  }

  .m_45c4369d:focus {
    outline: none;
  }

  .m_45c4369d:where([data-type='auto']:focus) {
    height: 1.6em;
    visibility: visible;
    opacity: 1;
    position: static;
  }

  .m_45c4369d:where([data-pointer]:not([data-disabled], :disabled)) {
    cursor: pointer;
  }

  .m_45c4369d:where([data-disabled], :disabled) {
    cursor: not-allowed;
  }

.m_f0824112 {
  --nl-bg: var(--mantine-primary-color-light);
  --nl-hover: var(--mantine-primary-color-light-hover);
  --nl-color: var(--mantine-primary-color-light-color);

  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px var(--mantine-spacing-sm);
  user-select: none;
}

  @media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_f0824112:hover {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_f0824112:hover {
      background-color: var(--mantine-color-dark-6);
  }
}

  @media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_f0824112:active {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_f0824112:active {
      background-color: var(--mantine-color-dark-6);
  }
}

  .m_f0824112:where([data-disabled]) {
    opacity: 0.4;
    pointer-events: none;
  }

  .m_f0824112:where([data-active], [aria-current='page']) {
    background-color: var(--nl-bg);
    color: var(--nl-color);
  }

  @media (hover: hover) {

  .m_f0824112:where([data-active], [aria-current='page']):hover {
      background-color: var(--nl-hover);
  }
}

  @media (hover: none) {

  .m_f0824112:where([data-active], [aria-current='page']):active {
      background-color: var(--nl-hover);
  }
}

  .m_f0824112:where([data-active], [aria-current='page']) .m_57492dcc {
      --description-opacity: 0.9;
      --description-color: var(--nl-color);
    }

.m_690090b5 {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 150ms ease;
}

.m_690090b5 > svg {
    display: block;
  }

.m_690090b5:where([data-position='left']) {
    margin-inline-end: var(--mantine-spacing-sm);
  }

.m_690090b5:where([data-position='right']) {
    margin-inline-start: var(--mantine-spacing-sm);
  }

.m_690090b5:where([data-rotate]) {
    transform: rotate(90deg);
  }

.m_1f6ac4c4 {
  font-size: var(--mantine-font-size-sm);
}

.m_f07af9d2 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m_f07af9d2:where([data-no-wrap]) {
    white-space: nowrap;
  }

.m_57492dcc {
  display: block;
  font-size: var(--mantine-font-size-xs);
  opacity: var(--description-opacity, 1);
  color: var(--description-color, var(--mantine-color-dimmed));
  overflow: hidden;
  text-overflow: ellipsis;
}

:where([data-no-wrap]) .m_57492dcc {
    white-space: nowrap;
  }

.m_e17b862f {
  padding-inline-start: var(--nl-offset, var(--mantine-spacing-lg));
}

.m_1fd8a00b {
  transform: rotate(-90deg);
}

.m_a513464 {
  --notification-radius: var(--mantine-radius-default);
  --notification-color: var(--mantine-primary-color-filled);

  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  padding-inline-start: calc(1.375rem * var(--mantine-scale));
  padding-inline-end: var(--mantine-spacing-xs);
  padding-top: var(--mantine-spacing-xs);
  padding-bottom: var(--mantine-spacing-xs);
  border-radius: var(--notification-radius);
  box-shadow: var(--mantine-shadow-lg);
}

  .m_a513464::before {
    content: '';
    display: block;
    position: absolute;
    width: calc(0.375rem * var(--mantine-scale));
    top: var(--notification-radius);
    bottom: var(--notification-radius);
    inset-inline-start: calc(0.25rem * var(--mantine-scale));
    border-radius: var(--notification-radius);
    background-color: var(--notification-color);
  }

  :where([data-mantine-color-scheme='light']) .m_a513464 {
    background-color: var(--mantine-color-white);
}

  :where([data-mantine-color-scheme='dark']) .m_a513464 {
    background-color: var(--mantine-color-dark-6);
}

  .m_a513464:where([data-with-icon])::before {
      display: none;
    }

  :where([data-mantine-color-scheme='light']) .m_a513464:where([data-with-border]) {
      border: 1px solid var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_a513464:where([data-with-border]) {
      border: 1px solid var(--mantine-color-dark-4);
}

.m_a4ceffb {
  box-sizing: border-box;
  margin-inline-end: var(--mantine-spacing-md);
  width: calc(1.75rem * var(--mantine-scale));
  height: calc(1.75rem * var(--mantine-scale));
  border-radius: calc(1.75rem * var(--mantine-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--notification-color);
  color: var(--mantine-color-white);
}

.m_b0920b15 {
  margin-inline-end: var(--mantine-spacing-md);
}

.m_a49ed24 {
  flex: 1;
  overflow: hidden;
  margin-inline-end: var(--mantine-spacing-xs);
}

.m_3feedf16 {
  margin-bottom: calc(0.125rem * var(--mantine-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--mantine-font-size-sm);
  line-height: var(--mantine-line-height-sm);
  font-weight: var(--mantine-font-weight-medium);
}

:where([data-mantine-color-scheme='light']) .m_3feedf16 {
    color: var(--mantine-color-gray-9);
}

:where([data-mantine-color-scheme='dark']) .m_3feedf16 {
    color: var(--mantine-color-white);
}

.m_3d733a3a {
  font-size: var(--mantine-font-size-sm);
  line-height: var(--mantine-line-height-sm);
  overflow: hidden;
  text-overflow: ellipsis;
}

:where([data-mantine-color-scheme='light']) .m_3d733a3a {
    color: var(--mantine-color-black);
}

:where([data-mantine-color-scheme='dark']) .m_3d733a3a {
    color: var(--mantine-color-dark-0);
}

:where([data-mantine-color-scheme='light']) .m_3d733a3a:where([data-with-title]) {
      color: var(--mantine-color-gray-6);
}

:where([data-mantine-color-scheme='dark']) .m_3d733a3a:where([data-with-title]) {
      color: var(--mantine-color-dark-2);
}

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_919a4d88:hover {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_919a4d88:hover {
      background-color: var(--mantine-color-dark-8);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_919a4d88:active {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_919a4d88:active {
      background-color: var(--mantine-color-dark-8);
  }
}

.m_e2f5cd4e {
  --ni-right-section-width-xs: calc(1.0625rem * var(--mantine-scale));
  --ni-right-section-width-sm: calc(1.5rem * var(--mantine-scale));
  --ni-right-section-width-md: calc(1.6875rem * var(--mantine-scale));
  --ni-right-section-width-lg: calc(1.9375rem * var(--mantine-scale));
  --ni-right-section-width-xl: calc(2.125rem * var(--mantine-scale));
}

.m_95e17d22 {
  --ni-chevron-size-xs: calc(0.625rem * var(--mantine-scale));
  --ni-chevron-size-sm: calc(0.875rem * var(--mantine-scale));
  --ni-chevron-size-md: calc(1rem * var(--mantine-scale));
  --ni-chevron-size-lg: calc(1.125rem * var(--mantine-scale));
  --ni-chevron-size-xl: calc(1.25rem * var(--mantine-scale));
  --ni-chevron-size: var(--ni-chevron-size-sm);

  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(var(--input-height) - calc(0.125rem * var(--mantine-scale)));
  max-width: calc(var(--ni-chevron-size) * 1.7);
  margin-inline-start: auto;
}

.m_80b4b171 {
  --control-border: 1px solid var(--input-bd);
  --control-radius: calc(var(--input-radius) - calc(0.0625rem * var(--mantine-scale)));

  flex: 0 0 50%;
  width: 100%;
  padding: 0;
  height: calc(var(--input-height) / 2 - calc(0.0625rem * var(--mantine-scale)));
  border-inline-start: var(--control-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mantine-color-text);
  background-color: transparent;
  cursor: pointer;
}

.m_80b4b171:where(:disabled) {
    background-color: transparent;
    cursor: not-allowed;
    opacity: 0.6;
    color: var(--mantine-color-disabled-color);
  }

.m_e2f5cd4e[data-error] :where(.m_80b4b171) {
    color: var(--mantine-color-error);
  }

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_80b4b171:hover {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_80b4b171:hover {
      background-color: var(--mantine-color-dark-4);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_80b4b171:active {
      background-color: var(--mantine-color-gray-0);
  }

    :where([data-mantine-color-scheme='dark']) .m_80b4b171:active {
      background-color: var(--mantine-color-dark-4);
  }
}

.m_80b4b171:where(:first-of-type) {
    border-radius: 0;
    border-start-end-radius: var(--control-radius);
  }

.m_80b4b171:last-of-type {
    border-radius: 0;
    border-end-end-radius: var(--control-radius);
  }

.m_f62ab2af {
  display: flex;
  flex-wrap: wrap;
  contain: layout style;
  gap: var(--ol-gap, var(--mantine-spacing-xs));
}

.m_4addd315 {
  --pagination-control-size-xs: calc(1.375rem * var(--mantine-scale));
  --pagination-control-size-sm: calc(1.625rem * var(--mantine-scale));
  --pagination-control-size-md: calc(2rem * var(--mantine-scale));
  --pagination-control-size-lg: calc(2.375rem * var(--mantine-scale));
  --pagination-control-size-xl: calc(2.75rem * var(--mantine-scale));

  --pagination-control-size-input-xs: calc(1.875rem * var(--mantine-scale));
  --pagination-control-size-input-sm: calc(2.25rem * var(--mantine-scale));
  --pagination-control-size-input-md: calc(2.625rem * var(--mantine-scale));
  --pagination-control-size-input-lg: calc(3.125rem * var(--mantine-scale));
  --pagination-control-size-input-xl: calc(3.75rem * var(--mantine-scale));

  --pagination-control-size: var(--pagination-control-size-md);
  --pagination-control-fz: var(--mantine-font-size-md);
  --pagination-active-bg: var(--mantine-primary-color-filled);
}

  .m_4addd315:where([data-layout='responsive']) {
    container-type: inline-size;
  }

.m_326d024a {
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(0.0625rem * var(--mantine-scale)) solid;
  cursor: pointer;
  color: var(--mantine-color-text);
  height: var(--pagination-control-size);
  min-width: var(--pagination-control-size);
  font-size: var(--pagination-control-fz);
  line-height: 1;
  border-radius: var(--pagination-control-radius, var(--mantine-radius-default));
}

.m_326d024a:where([data-with-padding]) {
    padding: calc(var(--pagination-control-size) / 4);
  }

.m_326d024a:where(:disabled, [data-disabled]) {
    cursor: not-allowed;
    opacity: 0.4;
  }

:where([data-mantine-color-scheme='light']) .m_326d024a {
    border-color: var(--mantine-color-gray-4);
    background-color: var(--mantine-color-white);
}

@media (hover: hover) {
      :where([data-mantine-color-scheme='light']) .m_326d024a:hover:where(:not(:disabled, [data-disabled])) {
        background-color: var(--mantine-color-gray-0);
      }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='light']) .m_326d024a:active:where(:not(:disabled, [data-disabled])) {
        background-color: var(--mantine-color-gray-0);
      }
}

:where([data-mantine-color-scheme='dark']) .m_326d024a {
    border-color: var(--mantine-color-dark-4);
    background-color: var(--mantine-color-dark-6);
}

@media (hover: hover) {
      :where([data-mantine-color-scheme='dark']) .m_326d024a:hover:where(:not(:disabled, [data-disabled])) {
        background-color: var(--mantine-color-dark-5);
      }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='dark']) .m_326d024a:active:where(:not(:disabled, [data-disabled])) {
        background-color: var(--mantine-color-dark-5);
      }
}

.m_326d024a:where([data-active]) {
    background-color: var(--pagination-active-bg);
    border-color: var(--pagination-active-bg);
    color: var(--pagination-active-color, var(--mantine-color-white));
  }

@media (hover: hover) {

  .m_326d024a:where([data-active]):hover {
      background-color: var(--pagination-active-bg);
  }
}

@media (hover: none) {

  .m_326d024a:where([data-active]):active {
      background-color: var(--pagination-active-bg);
  }
}

.m_4ad7767d {
  height: var(--pagination-control-size);
  min-width: var(--pagination-control-size);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.m_105fdbed {
  display: flex;
  gap: inherit;
  align-items: center;
}

@container (width <= 400px) {

.m_105fdbed {
    display: none
}
  }

.m_10817321 {
  display: none;
  align-items: center;
  justify-content: center;
  height: var(--pagination-control-size);
  font-size: var(--pagination-control-fz);
  white-space: nowrap;
}

@container (width <= 400px) {

.m_10817321 {
    display: flex
}
  }

.m_f61ca620 {
  --psi-button-size-xs: calc(1.375rem * var(--mantine-scale));
  --psi-button-size-sm: calc(1.625rem * var(--mantine-scale));
  --psi-button-size-md: calc(1.75rem * var(--mantine-scale));
  --psi-button-size-lg: calc(2rem * var(--mantine-scale));
  --psi-button-size-xl: calc(2.5rem * var(--mantine-scale));

  --psi-icon-size-xs: calc(1rem * var(--mantine-scale));
  --psi-icon-size-sm: calc(1.25rem * var(--mantine-scale));
  --psi-icon-size-md: calc(1.375rem * var(--mantine-scale));
  --psi-icon-size-lg: calc(1.5rem * var(--mantine-scale));
  --psi-icon-size-xl: calc(1.75rem * var(--mantine-scale));

  --psi-button-size: var(--psi-button-size-sm);
  --psi-icon-size: var(--psi-icon-size-sm);
}

.m_ccf8da4c {
  position: relative;
  overflow: hidden;
}

.m_f2d85dd2 {
  font-family: var(--mantine-font-family);
  background-color: transparent;
  border: 0;
  padding-inline-end: var(--input-padding-inline-end);
  padding-inline-start: var(--input-padding-inline-start);
  position: absolute;
  inset: 0;
  outline: 0;
  font-size: inherit;
  line-height: var(--mantine-line-height);
  height: 100%;
  width: 100%;
  color: inherit;
}

.m_ccf8da4c[data-disabled] .m_f2d85dd2,
  .m_f2d85dd2:disabled {
    cursor: not-allowed;
  }

.m_f2d85dd2::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1;
  }

.m_f2d85dd2::-ms-reveal {
    display: none;
  }

.m_b1072d44 {
  width: var(--psi-button-size);
  height: var(--psi-button-size);
  min-width: var(--psi-button-size);
  min-height: var(--psi-button-size);
}

.m_b1072d44:disabled {
    display: none;
  }

.m_f1cb205a {
  --pin-input-size-xs: calc(1.875rem * var(--mantine-scale));
  --pin-input-size-sm: calc(2.25rem * var(--mantine-scale));
  --pin-input-size-md: calc(2.625rem * var(--mantine-scale));
  --pin-input-size-lg: calc(3.125rem * var(--mantine-scale));
  --pin-input-size-xl: calc(3.75rem * var(--mantine-scale));
  --pin-input-size: var(--pin-input-size-sm);
}

.m_cb288ead {
  width: var(--pin-input-size);
  height: var(--pin-input-size);
}

@keyframes m_81a374bd {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: calc(2.5rem * var(--mantine-scale)) 0;
  }
}

@keyframes m_e0fb7a86 {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 calc(2.5rem * var(--mantine-scale));
  }
}

.m_db6d6462 {
  --progress-radius: var(--mantine-radius-default);
  --progress-size: var(--progress-size-md);

  --progress-size-xs: calc(0.1875rem * var(--mantine-scale));
  --progress-size-sm: calc(0.3125rem * var(--mantine-scale));
  --progress-size-md: calc(0.5rem * var(--mantine-scale));
  --progress-size-lg: calc(0.75rem * var(--mantine-scale));
  --progress-size-xl: calc(1rem * var(--mantine-scale));

  position: relative;
  height: var(--progress-size);
  border-radius: var(--progress-radius);
  overflow: hidden;
  display: flex;
}

:where([data-mantine-color-scheme='light']) .m_db6d6462 {
    background-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_db6d6462 {
    background-color: var(--mantine-color-dark-4);
}

.m_db6d6462:where([data-orientation='vertical']) {
    height: auto;
    width: var(--progress-size);
    flex-direction: column-reverse;
  }

.m_2242eb65 {
  background-color: var(--progress-section-color);
  height: 100%;
  width: var(--progress-section-size);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: calc(1.25rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale));
  transition: width var(--progress-transition-duration, 100ms) ease;
}

.m_2242eb65:where([data-striped]) {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
  }

.m_2242eb65:where([data-animated]) {
    animation: m_81a374bd 1s linear infinite;
  }

.m_2242eb65:where(:last-of-type) {
    border-radius: 0;
    border-start-end-radius: var(--progress-radius);
    border-end-end-radius: var(--progress-radius);
  }

.m_2242eb65:where(:first-of-type) {
    border-radius: 0;
    border-start-start-radius: var(--progress-radius);
    border-end-start-radius: var(--progress-radius);
  }

.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65 {
    width: 100%;
    height: var(--progress-section-size);
    transition: height var(--progress-transition-duration, 100ms) ease;
  }

.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where([data-striped]) {
      background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
      );
    }

.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where([data-animated]) {
      animation: m_e0fb7a86 1s linear infinite;
    }

.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where(:last-of-type) {
      border-radius: 0;
      border-start-start-radius: var(--progress-radius);
      border-start-end-radius: var(--progress-radius);
    }

.m_db6d6462:where([data-orientation='vertical']) .m_2242eb65:where(:first-of-type) {
      border-radius: 0;
      border-end-start-radius: var(--progress-radius);
      border-end-end-radius: var(--progress-radius);
    }

.m_91e40b74 {
  color: var(--progress-label-color, var(--mantine-color-white));
  font-weight: bold;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: min(calc(var(--progress-size) * 0.65), calc(1.125rem * var(--mantine-scale)));
  line-height: 1;
  padding-inline: calc(0.25rem * var(--mantine-scale));
}

.m_db6d6462:where([data-orientation='vertical']) .m_91e40b74 {
    writing-mode: vertical-rl;
  }

.m_9dc8ae12 {
  --card-radius: var(--mantine-radius-default);

  display: block;
  width: 100%;
  border-radius: var(--card-radius);
  cursor: pointer;
}

  .m_9dc8ae12 :where(*) {
    cursor: inherit;
  }

  .m_9dc8ae12:where([data-with-border]) {
    border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  }

  :where([data-mantine-color-scheme='light']) .m_9dc8ae12:where([data-with-border]) {
      border-color: var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_9dc8ae12:where([data-with-border]) {
      border-color: var(--mantine-color-dark-4);
}

.m_717d7ff6 {
  --radio-size-xs: calc(1rem * var(--mantine-scale));
  --radio-size-sm: calc(1.25rem * var(--mantine-scale));
  --radio-size-md: calc(1.5rem * var(--mantine-scale));
  --radio-size-lg: calc(1.875rem * var(--mantine-scale));
  --radio-size-xl: calc(2.25rem * var(--mantine-scale));

  --radio-icon-size-xs: calc(0.375rem * var(--mantine-scale));
  --radio-icon-size-sm: calc(0.5rem * var(--mantine-scale));
  --radio-icon-size-md: calc(0.625rem * var(--mantine-scale));
  --radio-icon-size-lg: calc(0.875rem * var(--mantine-scale));
  --radio-icon-size-xl: calc(1rem * var(--mantine-scale));

  --radio-icon-size: var(--radio-icon-size-sm);
  --radio-size: var(--radio-size-sm);
  --radio-color: var(--mantine-primary-color-filled);
  --radio-icon-color: var(--mantine-color-white);

  position: relative;
  border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  width: var(--radio-size);
  min-width: var(--radio-size);
  height: var(--radio-size);
  min-height: var(--radio-size);
  border-radius: var(--radio-radius, 10000px);
  transition:
    border-color 100ms ease,
    background-color 100ms ease;
  cursor: var(--mantine-cursor-type);
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

  :where([data-mantine-color-scheme='light']) .m_717d7ff6 {
    background-color: var(--mantine-color-white);
    border-color: var(--mantine-color-gray-4);
}

  :where([data-mantine-color-scheme='dark']) .m_717d7ff6 {
    background-color: var(--mantine-color-dark-6);
    border-color: var(--mantine-color-dark-4);
}

  .m_717d7ff6[data-checked] {
    background-color: var(--radio-color);
    border-color: var(--radio-color);
  }

  .m_717d7ff6[data-checked] > .m_3e4da632 {
      opacity: 1;
      transform: none;
      color: var(--radio-icon-color);
    }

  .m_717d7ff6[data-disabled] {
    cursor: not-allowed;
    background-color: var(--mantine-color-disabled);
    border-color: var(--mantine-color-disabled-border);
  }

  .m_717d7ff6[data-disabled][data-checked] > .m_3e4da632 {
      color: var(--mantine-color-disabled-color);
    }

.m_2980836c[data-checked]:not([data-disabled]) {
    background-color: transparent;
    border-color: var(--radio-color);
  }

.m_2980836c[data-checked]:not([data-disabled]) > .m_3e4da632 {
      color: var(--radio-color);
      opacity: 1;
      transform: none;
    }

.m_3e4da632 {
  display: block;
  width: var(--radio-icon-size);
  height: var(--radio-icon-size);
  color: transparent;
  pointer-events: none;
  transform: translateY(calc(0.3125rem * var(--mantine-scale))) scale(0.5);
  opacity: 1;
  transition:
    transform 100ms ease,
    opacity 100ms ease;
}

.m_f3f1af94 {
  --radio-size-xs: calc(1rem * var(--mantine-scale));
  --radio-size-sm: calc(1.25rem * var(--mantine-scale));
  --radio-size-md: calc(1.5rem * var(--mantine-scale));
  --radio-size-lg: calc(1.875rem * var(--mantine-scale));
  --radio-size-xl: calc(2.25rem * var(--mantine-scale));
  --radio-size: var(--radio-size-sm);

  --radio-icon-size-xs: calc(0.375rem * var(--mantine-scale));
  --radio-icon-size-sm: calc(0.5rem * var(--mantine-scale));
  --radio-icon-size-md: calc(0.625rem * var(--mantine-scale));
  --radio-icon-size-lg: calc(0.875rem * var(--mantine-scale));
  --radio-icon-size-xl: calc(1rem * var(--mantine-scale));
  --radio-icon-size: var(--radio-icon-size-sm);
  --radio-icon-color: var(--mantine-color-white);
}

.m_89c4f5e4 {
  position: relative;
  width: var(--radio-size);
  height: var(--radio-size);
  order: 1;
}

.m_89c4f5e4:where([data-label-position='left']) {
    order: 2;
  }

.m_f3ed6b2b {
  color: var(--radio-icon-color);
  opacity: var(--radio-icon-opacity, 0);
  translate: -50% -50%;
  transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
  transition:
    opacity 100ms ease,
    transform 200ms ease;
  pointer-events: none;
  width: var(--radio-icon-size);
  height: var(--radio-icon-size);
  position: absolute;
  top: 50%;
  left: 50%;
}

.m_8a3dbb89 {
  border: calc(0.0625rem * var(--mantine-scale)) solid;
  position: relative;
  appearance: none;
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: var(--radio-radius, var(--radio-size));
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition-property: background-color, border-color;
  transition-timing-function: ease;
  transition-duration: 100ms;
  cursor: var(--mantine-cursor-type);
  -webkit-tap-highlight-color: transparent;
}

:where([data-mantine-color-scheme='light']) .m_8a3dbb89 {
    background-color: var(--mantine-color-white);
    border-color: var(--mantine-color-gray-4);
}

:where([data-mantine-color-scheme='dark']) .m_8a3dbb89 {
    background-color: var(--mantine-color-dark-6);
    border-color: var(--mantine-color-dark-4);
}

.m_8a3dbb89:checked {
    background-color: var(--radio-color, var(--mantine-primary-color-filled));
    border-color: var(--radio-color, var(--mantine-primary-color-filled));
  }

.m_8a3dbb89:checked + .m_f3ed6b2b {
      --radio-icon-opacity: 1;
      --radio-icon-transform: scale(1);
    }

.m_8a3dbb89:disabled {
    cursor: not-allowed;
    background-color: var(--mantine-color-disabled);
    border-color: var(--mantine-color-disabled-border);
  }

.m_8a3dbb89:disabled + .m_f3ed6b2b {
      --radio-icon-color: var(--mantine-color-disabled-color);
    }

.m_8a3dbb89:where([data-with-error-styles][data-error]) {
    border-color: var(--mantine-color-error);
  }

.m_1bfe9d39 + .m_f3ed6b2b {
    --radio-icon-color: var(--radio-color);
  }

.m_1bfe9d39:checked:not(:disabled) {
    background-color: transparent;
    border-color: var(--radio-color);
  }

.m_1bfe9d39:checked:not(:disabled) + .m_f3ed6b2b {
      --radio-icon-color: var(--radio-color);
      --radio-icon-opacity: 1;
      --radio-icon-transform: none;
    }

.m_f8d312f2 {
  --rating-size-xs: calc(0.875rem * var(--mantine-scale));
  --rating-size-sm: calc(1.125rem * var(--mantine-scale));
  --rating-size-md: calc(1.25rem * var(--mantine-scale));
  --rating-size-lg: calc(1.75rem * var(--mantine-scale));
  --rating-size-xl: calc(2rem * var(--mantine-scale));

  display: flex;
  width: max-content;
}

  .m_f8d312f2:where(:has(input:disabled)) {
    pointer-events: none;
  }

.m_61734bb7 {
  position: relative;
  transition: transform 100ms ease;
}

.m_61734bb7:where([data-active]) {
    z-index: 1;
    transform: scale(1.1);
  }

.m_5662a89a {
  width: var(--rating-size);
  height: var(--rating-size);
  display: block;
}

:where([data-mantine-color-scheme='light']) .m_5662a89a {
    fill: var(--mantine-color-gray-3);
    stroke: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_5662a89a {
    fill: var(--mantine-color-dark-3);
    stroke: var(--mantine-color-dark-3);
}

.m_5662a89a:where([data-filled]) {
    fill: var(--rating-color);
    stroke: var(--rating-color);
  }

.m_211007ba {
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
}

.m_211007ba:focus-visible + label {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

.m_21342ee4 {
  display: block;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--rating-item-z-index, 0);
  -webkit-tap-highlight-color: transparent;
}

.m_21342ee4:where([data-read-only]) {
    cursor: default;
  }

.m_21342ee4:where(:last-of-type) {
    position: relative;
  }

.m_fae05d6a {
  clip-path: var(--rating-symbol-clip-path);
}

.m_47dd3981 {
  display: inline-flex;
  align-items: baseline;
  overflow: hidden;
}

  .m_47dd3981[data-tabular-numbers] {
    font-variant-numeric: tabular-nums;
  }

.m_b301d46e {
  display: inline-block;
  width: 1ch;
  height: 1em;
  overflow: hidden;
  line-height: 1;
  transition:
    width var(--rn-duration) var(--rn-timing-function),
    opacity var(--rn-duration) var(--rn-timing-function);
}

.m_b301d46e[data-empty] {
    width: 0;
    opacity: 0;
  }

.m_8ae40964 {
  display: flex;
  flex-direction: column;
  animation: m_18d73873 var(--rn-duration) var(--rn-timing-function);
}

.m_8ae40964 > span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1em;
  }

.m_47d64bf5 {
  display: inline-block;
  overflow: hidden;
  white-space: pre;
  transition: opacity var(--rn-duration) var(--rn-timing-function);
}

.m_47d64bf5[data-empty] {
    width: 0;
    opacity: 0;
  }

@keyframes m_18d73873 {
  from {
    transform: var(--rn-roll-from);
  }

  to {
    transform: var(--rn-roll-to);
  }
}

.m_1b3c8819 {
  --tooltip-radius: var(--mantine-radius-default);

  position: absolute;
  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-xs);
  pointer-events: none;
  font-size: var(--mantine-font-size-sm);
  white-space: nowrap;
  border-radius: var(--tooltip-radius);
}

  :where([data-mantine-color-scheme='light']) .m_1b3c8819 {
    background-color: var(--tooltip-bg, var(--mantine-color-gray-9));
    color: var(--tooltip-color, var(--mantine-color-white));
}

  :where([data-mantine-color-scheme='dark']) .m_1b3c8819 {
    background-color: var(--tooltip-bg, var(--mantine-color-gray-2));
    color: var(--tooltip-color, var(--mantine-color-black));
}

  .m_1b3c8819:where([data-multiline]) {
    white-space: normal;
  }

  .m_1b3c8819:where([data-fixed]) {
    position: fixed;
  }

.m_f898399f {
  background-color: inherit;
  border: 0;
  z-index: 1;
}

.m_b32e4812 {
  position: relative;
  width: var(--rp-size);
  height: var(--rp-size);
  min-width: var(--rp-size);
  min-height: var(--rp-size);
  --rp-transition-duration: 0ms;
}

.m_d43b5134 {
  width: var(--rp-size);
  height: var(--rp-size);
  min-width: var(--rp-size);
  min-height: var(--rp-size);
  transform: rotate(calc(var(--rp-start-angle, 270deg) - 360deg));
}

.m_b1ca1fbf {
  stroke: var(--curve-color, var(--rp-curve-root-color));
  transition:
    stroke-dashoffset var(--rp-transition-duration) ease,
    stroke-dasharray var(--rp-transition-duration) ease,
    stroke var(--rp-transition-duration);
}

[data-mantine-color-scheme='light'] .m_b1ca1fbf {
    --rp-curve-root-color: var(--mantine-color-gray-2);
}

[data-mantine-color-scheme='dark'] .m_b1ca1fbf {
    --rp-curve-root-color: var(--mantine-color-dark-4);
}

.m_b23f9dc4 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline: var(--rp-label-offset);
}

.m_bc8f275 {
  --scroller-control-size: calc(3.125rem * var(--mantine-scale));
  --scroller-background-color: var(--mantine-color-body);

  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.m_ee44dece {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
}

.m_ee44dece::-webkit-scrollbar {
    display: none;
  }

.m_ee44dece[data-draggable] {
    cursor: grab;
  }

.m_53e4f606 {
  display: inline-flex;
  white-space: nowrap;
}

.m_47754fc8 {
  width: var(--scroller-control-size);
  height: var(--scroller-control-size);
}

.m_53e526ea {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--scroller-control-size);
  z-index: 1;
  color: var(--mantine-color-dimmed);
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 200ms ease,
    color 150ms ease;
}

.m_53e526ea:hover {
    color: var(--mantine-color-text);
  }

.m_53e526ea:where([data-position='start']) {
    inset-inline-start: 0;
    background: linear-gradient(to right, var(--scroller-background-color) 40%, transparent);
    justify-content: flex-start;
  }

.m_53e526ea:where([data-position='start']) .m_47754fc8 {
      transform: rotate(90deg);
    }

.m_53e526ea:where([data-position='end']) {
    inset-inline-end: 0;
    background: linear-gradient(to left, var(--scroller-background-color) 40%, transparent);
    justify-content: flex-end;
  }

.m_53e526ea:where([data-position='end']) .m_47754fc8 {
      transform: rotate(-90deg);
    }

.m_53e526ea:where([data-hidden]) {
    opacity: 0;
    pointer-events: none;
  }

.m_cf365364 {
  --sc-padding-xs: calc(0.125rem * var(--mantine-scale)) calc(0.375rem * var(--mantine-scale));
  --sc-padding-sm: calc(0.1875rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
  --sc-padding-md: calc(0.25rem * var(--mantine-scale)) calc(0.875rem * var(--mantine-scale));
  --sc-padding-lg: calc(0.4375rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale));
  --sc-padding-xl: calc(0.625rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale));

  --sc-transition-duration: 200ms;
  --sc-padding: var(--sc-padding-sm);
  --sc-transition-timing-function: ease;
  --sc-font-size: var(--mantine-font-size-sm);

  position: relative;
  display: inline-flex;
  flex-direction: row;
  width: auto;
  border-radius: var(--sc-radius, var(--mantine-radius-default));
  overflow: hidden;
  padding: calc(0.25rem * var(--mantine-scale));
}

  .m_cf365364:where([data-full-width]) {
    display: flex;
  }

  .m_cf365364:where([data-orientation='vertical']) {
    display: flex;
    flex-direction: column;
    width: max-content;
  }

  .m_cf365364:where([data-orientation='vertical']):where([data-full-width]) {
      width: auto;
    }

  :where([data-mantine-color-scheme='light']) .m_cf365364 {
    background-color: var(--mantine-color-gray-1);
}

  :where([data-mantine-color-scheme='dark']) .m_cf365364 {
    background-color: var(--mantine-color-dark-8);
}

.m_9e182ccd {
  position: absolute;
  display: block;
  z-index: 1;
  border-radius: max(
    calc(var(--sc-radius, var(--mantine-radius-default)) - 4px),
    calc(var(--sc-radius, var(--mantine-radius-default)) / 4)
  );
}

:where([data-mantine-color-scheme='light']) .m_9e182ccd {
    box-shadow: var(--sc-shadow, none);
    background-color: var(--sc-color, var(--mantine-color-white));
}

:where([data-mantine-color-scheme='dark']) .m_9e182ccd {
    box-shadow: none;
    background-color: var(--sc-color, var(--mantine-color-dark-5));
}

.m_1738fcb2 {
  -webkit-tap-highlight-color: transparent;
  font-weight: var(--mantine-font-weight-medium);
  display: block;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
  font-size: var(--sc-font-size);
  padding: var(--sc-padding);
  transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);
  cursor: pointer;

  /* outline is controlled by .input */
  outline: var(--segmented-control-outline, none);
}

:where([data-mantine-color-scheme='light']) .m_1738fcb2 {
    color: var(--mantine-color-gray-7);
}

:where([data-mantine-color-scheme='dark']) .m_1738fcb2 {
    color: var(--mantine-color-dark-1);
}

.m_1738fcb2:where([data-read-only]) {
    cursor: default;
  }

fieldset:disabled .m_1738fcb2,
  .m_1738fcb2:where([data-disabled]) {
    cursor: not-allowed;
    color: var(--mantine-color-disabled-color);
  }

:where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active]) {
      color: var(--sc-label-color, var(--mantine-color-black));
}

:where([data-mantine-color-scheme='dark']) .m_1738fcb2:where([data-active]) {
      color: var(--sc-label-color, var(--mantine-color-white));
}

.m_cf365364:where([data-initialized]) .m_1738fcb2:where([data-active])::before {
        display: none;
      }

.m_1738fcb2:where([data-active])::before {
      content: '';
      inset: 0;
      z-index: 0;
      position: absolute;
      border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
}

:where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active])::before {
        box-shadow: var(--sc-shadow, none);
        background-color: var(--sc-color, var(--mantine-color-white));
}

:where([data-mantine-color-scheme='dark']) .m_1738fcb2:where([data-active])::before {
        box-shadow: none;
        background-color: var(--sc-color, var(--mantine-color-dark-5));
}

@media (hover: hover) {
      :where([data-mantine-color-scheme='light']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):hover {
        color: var(--mantine-color-black);
  }

      :where([data-mantine-color-scheme='dark']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):hover {
        color: var(--mantine-color-white);
  }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='light']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):active {
        color: var(--mantine-color-black);
  }

      :where([data-mantine-color-scheme='dark']) .m_1738fcb2:where(:not([data-disabled], [data-active], [data-read-only])):active {
        color: var(--mantine-color-white);
  }
}

@media (hover: hover) {

  fieldset:disabled .m_1738fcb2:hover {
      color: var(--mantine-color-disabled-color) !important;
  }
}

@media (hover: none) {

  fieldset:disabled .m_1738fcb2:active {
      color: var(--mantine-color-disabled-color) !important;
  }
}

.m_1714d588 {
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
}

.m_1714d588[data-focus-ring='auto']:focus:focus-visible + .m_1738fcb2 {
        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);
      }

.m_1714d588[data-focus-ring='always']:focus + .m_1738fcb2 {
        --segmented-control-outline: 2px solid var(--mantine-primary-color-filled);
      }

.m_69686b9b {
  position: relative;
  flex: 1;
  z-index: 2;
  transition: border-color var(--sc-transition-duration) var(--sc-transition-timing-function);
}

.m_cf365364[data-with-items-borders] :where(.m_69686b9b)::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    background-color: var(--separator-color);
    width: calc(0.0625rem * var(--mantine-scale));
    transition: background-color var(--sc-transition-duration) var(--sc-transition-timing-function);
  }

.m_69686b9b[data-orientation='vertical']::before {
      top: 0;
      inset-inline: 0;
      bottom: auto;
      height: calc(0.0625rem * var(--mantine-scale));
      width: auto;
    }

:where([data-mantine-color-scheme='light']) .m_69686b9b {
    --separator-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_69686b9b {
    --separator-color: var(--mantine-color-dark-4);
}

.m_69686b9b:first-of-type::before {
      --separator-color: transparent;
    }

[data-mantine-color-scheme] .m_69686b9b[data-active]::before, [data-mantine-color-scheme] .m_69686b9b[data-active] + .m_69686b9b::before {
          --separator-color: transparent;
        }

.m_78882f40 {
  position: relative;
  z-index: 2;
}

.m_fa528724 {
  --scp-filled-segment-color: var(--mantine-primary-color-filled);
  --scp-transition-duration: 0ms;
  --scp-thickness: calc(0.75rem * var(--mantine-scale));
}

  :where([data-mantine-color-scheme='light']) .m_fa528724 {
    --scp-empty-segment-color: var(--mantine-color-gray-2);
}

  :where([data-mantine-color-scheme='dark']) .m_fa528724 {
    --scp-empty-segment-color: var(--mantine-color-dark-4);
}

  .m_fa528724 {

  position: relative;
  width: fit-content;
}

.m_62e9e7e2 {
  display: block;
  transform: var(--scp-rotation);
  overflow: hidden;
}

.m_c573fb6f {
  transition:
    stroke-dashoffset var(--scp-transition-duration) ease,
    stroke-dasharray var(--scp-transition-duration) ease,
    stroke-opacity var(--scp-transition-duration) ease,
    stroke var(--scp-transition-duration);
}

.m_4fa340f2 {
  position: absolute;
  margin: 0;
  padding: 0;
  inset-inline: 0;
  text-align: center;
  z-index: 1;
}

.m_4fa340f2:where([data-position='bottom']) {
    bottom: 0;
    padding-inline: calc(var(--scp-thickness) * 2);
  }

.m_4fa340f2:where([data-position='bottom']):where([data-orientation='down']) {
      bottom: auto;
      top: 0;
    }

.m_4fa340f2:where([data-position='center']) {
    top: 50%;
    transform: translateY(-50%);
    padding-inline: calc(var(--scp-thickness) * 3);
  }

.m_925c2d2c {
  container: simple-grid / inline-size;
}

.m_2415a157 {
  display: grid;
  grid-template-columns: repeat(var(--sg-cols), minmax(0, 1fr));
  grid-auto-rows: var(--sg-auto-rows, auto);
  gap: var(--sg-spacing-y) var(--sg-spacing-x);
}

.m_2415a157[data-auto-cols='auto-fill'] {
  grid-template-columns: repeat(auto-fill, minmax(var(--sg-min-col-width), 1fr));
}

.m_2415a157[data-auto-cols='auto-fit'] {
  grid-template-columns: repeat(auto-fit, minmax(var(--sg-min-col-width), 1fr));
}

@keyframes m_299c329c {
  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

.m_18320242 {
  height: var(--skeleton-height, auto);
  width: var(--skeleton-width, 100%);
  border-radius: var(--skeleton-radius, var(--mantine-radius-default));
  position: relative;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.m_18320242:where([data-animate])::after {
    animation: m_299c329c 1500ms linear infinite;
  }

.m_18320242:where([data-visible]) {
    overflow: hidden;
  }

.m_18320242:where([data-visible])::before {
      position: absolute;
      content: '';
      inset: 0;
      z-index: 10;
      background-color: var(--mantine-color-body);
    }

.m_18320242:where([data-visible])::after {
      position: absolute;
      content: '';
      inset: 0;
      z-index: 11;
    }

:where([data-mantine-color-scheme='light']) .m_18320242:where([data-visible])::after {
        background-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_18320242:where([data-visible])::after {
        background-color: var(--mantine-color-dark-4);
}

.m_dd36362e {
  --slider-size-xs: calc(0.25rem * var(--mantine-scale));
  --slider-size-sm: calc(0.375rem * var(--mantine-scale));
  --slider-size-md: calc(0.5rem * var(--mantine-scale));
  --slider-size-lg: calc(0.625rem * var(--mantine-scale));
  --slider-size-xl: calc(0.75rem * var(--mantine-scale));

  --slider-size: var(--slider-size-md);
  --slider-radius: calc(62.5rem * var(--mantine-scale));
  --slider-color: var(--mantine-primary-color-filled);
  --slider-track-disabled-bg: var(--mantine-color-disabled);

  -webkit-tap-highlight-color: transparent;
  outline: none;
  height: calc(var(--slider-size) * 2);
  padding-inline: var(--slider-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  touch-action: none;
  position: relative;
}

  [data-mantine-color-scheme='light'] .m_dd36362e {
    --slider-track-bg: var(--mantine-color-gray-2);
}

  [data-mantine-color-scheme='dark'] .m_dd36362e {
    --slider-track-bg: var(--mantine-color-dark-4);
}

  .m_dd36362e[data-orientation='vertical'] {
    width: calc(var(--slider-size) * 2);
    height: calc(12.5rem * var(--mantine-scale));
    padding-inline: 0;
    padding-block: var(--slider-size);
  }

.m_c9357328 {
  position: absolute;
  top: calc(-2.25rem * var(--mantine-scale));
  font-size: var(--mantine-font-size-xs);
  color: var(--mantine-color-white);
  padding: calc(var(--mantine-spacing-xs) / 2);
  border-radius: var(--mantine-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  touch-action: none;
}

:where([data-mantine-color-scheme='light']) .m_c9357328 {
    background-color: var(--mantine-color-gray-9);
}

:where([data-mantine-color-scheme='dark']) .m_c9357328 {
    background-color: var(--mantine-color-dark-4);
}

:where(.m_dd36362e[data-orientation='vertical']) .m_c9357328 {
    top: auto;
    inset-inline-start: calc(100% + 8px);
  }

.m_c9a9a60a {
  position: absolute;
  display: flex;
  height: var(--slider-thumb-size);
  width: var(--slider-thumb-size);
  border: calc(0.25rem * var(--mantine-scale)) solid;
  transform: translate(-50%, -50%);
  top: 50%;
  cursor: pointer;
  border-radius: var(--slider-radius);
  align-items: center;
  justify-content: center;
  transition:
    box-shadow 100ms ease,
    transform 100ms ease;
  z-index: 3;
  user-select: none;
  touch-action: none;
  outline-offset: calc(0.125rem * var(--mantine-scale));
  left: var(--slider-thumb-offset);
}

:where([dir="rtl"]) .m_c9a9a60a {
    left: auto;
    right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));
}

fieldset:disabled .m_c9a9a60a,
  .m_c9a9a60a:where([data-disabled]) {
    display: none;
  }

.m_c9a9a60a:where([data-dragging]) {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: var(--mantine-shadow-sm);
  }

:where([data-mantine-color-scheme='light']) .m_c9a9a60a {
    color: var(--slider-color);
    border-color: var(--slider-color);
    background-color: var(--mantine-color-white);
}

:where([data-mantine-color-scheme='dark']) .m_c9a9a60a {
    color: var(--mantine-color-white);
    border-color: var(--mantine-color-white);
    background-color: var(--slider-color);
}

:where(.m_dd36362e[data-orientation='vertical']) .m_c9a9a60a {
    left: 50%;
    top: auto;
    right: auto;
    bottom: var(--slider-thumb-offset);
    transform: translate(-50%, 50%);
  }

:where(.m_dd36362e[data-orientation='vertical']) .m_c9a9a60a:where([data-dragging]) {
      transform: translate(-50%, 50%) scale(1.05);
    }

:where([dir="rtl"]) :where(.m_dd36362e[data-orientation='vertical']) .m_c9a9a60a {
      left: 50%;
      right: auto;
}

.m_a8645c2 {
  display: flex;
  align-items: center;
  width: 100%;
  height: calc(var(--slider-size) * 2);
  cursor: pointer;
}

fieldset:disabled .m_a8645c2,
  .m_a8645c2:where([data-disabled]) {
    cursor: not-allowed;
  }

:where(.m_dd36362e[data-orientation='vertical']) .m_a8645c2 {
    flex-direction: column;
    width: calc(var(--slider-size) * 2);
    height: 100%;
  }

.m_c9ade57f {
  position: relative;
  width: 100%;
  height: var(--slider-size);
}

.m_c9ade57f:where([data-inverted]:not([data-disabled])) {
    --track-bg: var(--slider-color);
  }

fieldset:disabled .m_c9ade57f:where([data-inverted]),
  .m_c9ade57f:where([data-inverted][data-disabled]) {
    --track-bg: var(--slider-track-disabled-bg);
  }

.m_c9ade57f::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: var(--slider-radius);
    inset-inline: calc(var(--slider-size) * -1);
    background-color: var(--track-bg, var(--slider-track-bg));
    z-index: 0;
  }

:where(.m_dd36362e[data-orientation='vertical']) .m_c9ade57f {
    width: var(--slider-size);
    height: 100%;
  }

:where(.m_dd36362e[data-orientation='vertical']) .m_c9ade57f::before {
      inset-inline: 0;
      top: calc(var(--slider-size) * -1);
      bottom: calc(var(--slider-size) * -1);
    }

.m_38aeed47 {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  background-color: var(--slider-color);
  border-radius: var(--slider-radius);
  width: var(--slider-bar-width);
  inset-inline-start: var(--slider-bar-offset);
}

.m_38aeed47:where([data-inverted]) {
    background-color: var(--slider-track-bg);
  }

fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
  .m_38aeed47:where([data-disabled]:not([data-inverted])) {
    background-color: var(--mantine-color-disabled-color);
  }

:where(.m_dd36362e[data-orientation='vertical']) .m_38aeed47 {
    top: auto;
    bottom: var(--slider-bar-offset);
    inset-inline-start: 0;
    width: 100%;
    height: var(--slider-bar-width);
  }

.m_b7b0423a {
  position: absolute;
  inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);
  top: 0;
  z-index: 2;
  height: 0;
  pointer-events: none;
}

:where(.m_dd36362e[data-orientation='vertical']) .m_b7b0423a {
    inset-inline-start: 0;
    top: auto;
    bottom: calc(var(--mark-offset) + var(--slider-size) / 2);
    height: 0;
    width: 0;
  }

.m_dd33bc19 {
  border: calc(0.125rem * var(--mantine-scale)) solid;
  height: var(--slider-size);
  width: var(--slider-size);
  border-radius: calc(62.5rem * var(--mantine-scale));
  background-color: var(--mantine-color-white);
  pointer-events: none;
}

:where([data-mantine-color-scheme='light']) .m_dd33bc19 {
    border-color: var(--mantine-color-gray-2);
}

:where([data-mantine-color-scheme='dark']) .m_dd33bc19 {
    border-color: var(--mantine-color-dark-4);
}

.m_dd33bc19:where([data-filled]) {
    border-color: var(--slider-color);
  }

.m_dd33bc19:where([data-filled]):where([data-disabled]) {
      border-color: var(--mantine-color-disabled-border);
    }

.m_68c77a5b {
  transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
  font-size: var(--mantine-font-size-sm);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

:where([dir="rtl"]) .m_68c77a5b {
    transform: translate(calc(50% - var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
}

:where([data-mantine-color-scheme='light']) .m_68c77a5b {
    color: var(--mantine-color-gray-6);
}

:where([data-mantine-color-scheme='dark']) .m_68c77a5b {
    color: var(--mantine-color-dark-2);
}

:where(.m_dd36362e[data-orientation='vertical']) .m_68c77a5b {
    transform: translate(
      calc(var(--slider-size) + var(--mantine-spacing-xs) / 2),
      calc(-50% - var(--slider-size) / 2)
    );
  }

.m_19e66008 {
  display: flex;
}

  .m_19e66008:where([data-orientation='horizontal']) {
    flex-direction: row;
  }

  .m_19e66008:where([data-orientation='vertical']) {
    flex-direction: column;
  }

.m_19e5428e {
  flex-grow: 0;
  flex-shrink: 1;
  overflow: auto;
}

.m_27f81bce {
  flex: 0 0 var(--splitter-line-size, calc(0.125rem * var(--mantine-scale)));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  touch-action: none;
  outline: none;
  background-color: var(--splitter-handle-color, var(--mantine-color-body));
}

.m_27f81bce:where([data-orientation='horizontal']) {
    cursor: col-resize;
  }

.m_27f81bce:where([data-orientation='vertical']) {
    cursor: row-resize;
  }

.m_22feb770 {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(62.5rem * var(--mantine-scale));
  color: var(--mantine-color-dimmed);
  transition: color 100ms ease;
}

:where([data-mantine-color-scheme='light']) .m_22feb770 {
    background-color: var(--mantine-color-white);
    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_22feb770 {
    background-color: var(--mantine-color-dark-6);
    border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
}

.m_22feb770:where([data-orientation='horizontal']) {
    width: calc(0.75rem * var(--mantine-scale));
    height: calc(3.75rem * var(--mantine-scale));
  }

.m_22feb770:where([data-orientation='vertical']) {
    width: calc(3.75rem * var(--mantine-scale));
    height: calc(0.75rem * var(--mantine-scale));
  }

.m_22feb770 > svg {
    width: 100%;
    height: 100%;
  }

.m_27f81bce:focus-visible .m_22feb770 {
    box-shadow: 0 0 0 calc(0.125rem * var(--mantine-scale)) var(--mantine-primary-color-filled);
  }

.m_559cce2d {
  position: relative;
}

  .m_559cce2d:where([data-has-spoiler]) {
    margin-bottom: calc(1.5rem * var(--mantine-scale));
  }

.m_b912df4e {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: max-height var(--spoiler-transition-duration, 200ms) ease;
}

.m_b9131032 {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  height: calc(1.5rem * var(--mantine-scale));
}

.m_6d731127 {
  display: flex;
  flex-direction: column;
  align-items: var(--stack-align, stretch);
  justify-content: var(--stack-justify, flex-start);
  gap: var(--stack-gap, var(--mantine-spacing-md));
}

.m_cbb4ea7e {
  --stepper-icon-size-xs: calc(2.125rem * var(--mantine-scale));
  --stepper-icon-size-sm: calc(2.25rem * var(--mantine-scale));
  --stepper-icon-size-md: calc(2.625rem * var(--mantine-scale));
  --stepper-icon-size-lg: calc(3rem * var(--mantine-scale));
  --stepper-icon-size-xl: calc(3.25rem * var(--mantine-scale));

  --stepper-icon-size: var(--stepper-icon-size-md);
  --stepper-color: var(--mantine-primary-color-filled);
  --stepper-content-padding: var(--mantine-spacing-md);
  --stepper-spacing: var(--mantine-spacing-md);
  --stepper-radius: calc(62.5rem * var(--mantine-scale));
  --stepper-fz: var(--mantine-font-size-md);
  --stepper-outline-thickness: calc(0.125rem * var(--mantine-scale));
}

  [data-mantine-color-scheme='light'] .m_cbb4ea7e {
    --stepper-outline-color: var(--mantine-color-gray-2);
}

  [data-mantine-color-scheme='dark'] .m_cbb4ea7e {
    --stepper-outline-color: var(--mantine-color-dark-5);
}

.m_aaf89d0b {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.m_aaf89d0b:where([data-wrap]) {
    flex-wrap: wrap;
    gap: var(--mantine-spacing-md) 0;
  }

.m_aaf89d0b:where([data-orientation='vertical']) {
    flex-direction: column;
  }

.m_aaf89d0b:where([data-orientation='vertical']):where([data-icon-position='left']) {
      align-items: flex-start;
    }

.m_aaf89d0b:where([data-orientation='vertical']):where([data-icon-position='right']) {
      align-items: flex-end;
    }

.m_aaf89d0b:where([data-orientation='horizontal']) {
    flex-direction: row;
  }

.m_2a371ac9 {
  transition: background-color 150ms ease;
  flex: 1;
  height: var(--stepper-outline-thickness);
  margin-inline: var(--mantine-spacing-md);
  background-color: var(--stepper-outline-color);
}

.m_2a371ac9:where([data-active]) {
    background-color: var(--stepper-color);
  }

.m_78da155d {
  padding-top: var(--stepper-content-padding);
}

.m_cbb57068 {
  --step-color: var(--stepper-color);

  display: flex;
  cursor: default;
}

.m_cbb57068:where([data-allow-click]) {
    cursor: pointer;
  }

.m_cbb57068:where([data-icon-position='left']) {
    flex-direction: row;
  }

.m_cbb57068:where([data-icon-position='right']) {
    flex-direction: row-reverse;
  }

.m_f56b1e2c {
  align-items: center;
}

.m_833edb7e {
  --separator-spacing: calc(var(--mantine-spacing-xs) / 2);

  justify-content: flex-start;
  min-height: calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--separator-spacing));
  margin-top: var(--separator-spacing);
  overflow: hidden;
}

.m_833edb7e:where(:first-of-type) {
    margin-top: 0;
  }

.m_833edb7e:where(:last-of-type) {
    min-height: auto;
  }

.m_833edb7e:where(:last-of-type) .m_6496b3f3 {
      display: none;
    }

.m_818e70b {
  position: relative;
}

.m_6496b3f3 {
  top: calc(var(--stepper-icon-size) + var(--separator-spacing));
  inset-inline-start: calc(var(--stepper-icon-size) / 2);
  height: 100vh;
  position: absolute;
  border-inline-start: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
}

.m_6496b3f3:where([data-active]) {
    border-color: var(--stepper-color);
  }

.m_1959ad01 {
  height: var(--stepper-icon-size);
  width: var(--stepper-icon-size);
  min-height: var(--stepper-icon-size);
  min-width: var(--stepper-icon-size);
  border-radius: var(--stepper-radius);
  font-size: var(--stepper-fz);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: bold;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
  border: var(--stepper-outline-thickness) solid var(--stepper-outline-color);
  background-color: var(--stepper-outline-color);
}

:where([data-mantine-color-scheme='light']) .m_1959ad01 {
    color: var(--mantine-color-gray-7);
}

:where([data-mantine-color-scheme='dark']) .m_1959ad01 {
    color: var(--mantine-color-dark-1);
}

.m_1959ad01:where([data-progress]) {
    border-color: var(--step-color);
  }

.m_1959ad01:where([data-completed]) {
    color: var(--stepper-icon-color, var(--mantine-color-white));
    background-color: var(--step-color);
    border-color: var(--step-color);
  }

.m_8faaac38 {
  display: flex;
}

.m_a79331dc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stepper-icon-color, var(--mantine-color-white));
}

.m_1956aa2a {
  display: flex;
  flex-direction: column;
}

.m_1956aa2a:where([data-icon-position='left']) {
    margin-inline-start: var(--mantine-spacing-sm);
  }

.m_1956aa2a:where([data-icon-position='right']) {
    text-align: end;
    margin-inline-end: var(--mantine-spacing-sm);
  }

.m_12051f6c {
  font-weight: var(--mantine-font-weight-medium);
  font-size: var(--stepper-fz);
  line-height: 1;
}

.m_164eea74 {
  margin-top: calc(var(--stepper-spacing) / 3);
  margin-bottom: calc(var(--stepper-spacing) / 3);
  font-size: calc(var(--stepper-fz) - calc(0.125rem * var(--mantine-scale)));
  line-height: 1;
  color: var(--mantine-color-dimmed);
}

.m_5f93f3bb {
  --switch-height-xs: calc(1rem * var(--mantine-scale));
  --switch-height-sm: calc(1.25rem * var(--mantine-scale));
  --switch-height-md: calc(1.5rem * var(--mantine-scale));
  --switch-height-lg: calc(1.875rem * var(--mantine-scale));
  --switch-height-xl: calc(2.25rem * var(--mantine-scale));

  --switch-width-xs: calc(2rem * var(--mantine-scale));
  --switch-width-sm: calc(2.375rem * var(--mantine-scale));
  --switch-width-md: calc(2.875rem * var(--mantine-scale));
  --switch-width-lg: calc(3.5rem * var(--mantine-scale));
  --switch-width-xl: calc(4.5rem * var(--mantine-scale));

  --switch-thumb-size-xs: calc(0.75rem * var(--mantine-scale));
  --switch-thumb-size-sm: calc(0.875rem * var(--mantine-scale));
  --switch-thumb-size-md: calc(1.125rem * var(--mantine-scale));
  --switch-thumb-size-lg: calc(1.375rem * var(--mantine-scale));
  --switch-thumb-size-xl: calc(1.75rem * var(--mantine-scale));

  --switch-label-font-size-xs: calc(0.3125rem * var(--mantine-scale));
  --switch-label-font-size-sm: calc(0.375rem * var(--mantine-scale));
  --switch-label-font-size-md: calc(0.4375rem * var(--mantine-scale));
  --switch-label-font-size-lg: calc(0.5625rem * var(--mantine-scale));
  --switch-label-font-size-xl: calc(0.6875rem * var(--mantine-scale));

  --switch-track-label-padding-xs: calc(0.125rem * var(--mantine-scale));
  --switch-track-label-padding-sm: calc(0.15625rem * var(--mantine-scale));
  --switch-track-label-padding-md: calc(0.1875rem * var(--mantine-scale));
  --switch-track-label-padding-lg: calc(0.1875rem * var(--mantine-scale));
  --switch-track-label-padding-xl: calc(0.21875rem * var(--mantine-scale));

  --switch-height: var(--switch-height-sm);
  --switch-width: var(--switch-width-sm);
  --switch-thumb-size: var(--switch-thumb-size-sm);
  --switch-label-font-size: var(--switch-label-font-size-sm);
  --switch-track-label-padding: var(--switch-track-label-padding-sm);
  --switch-radius: calc(62.5rem * var(--mantine-scale));
  --switch-color: var(--mantine-primary-color-filled);
  --switch-disabled-color: var(--mantine-color-disabled);

  position: relative;
}

.m_926b4011 {
  /* Hide the input visually without removing it from the accessibility tree or obscuring it in the DOM */
  height: 100%;
  width: 100%;
  opacity: 0;

  margin: 0;
  padding: 0;
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
}

.m_9307d992 {
  -webkit-tap-highlight-color: transparent;
  cursor: var(--switch-cursor, var(--mantine-cursor-type));
  overflow: hidden;
  position: relative;
  border-radius: var(--switch-radius);
  background-color: var(--switch-bg);
  height: var(--switch-height);
  min-width: var(--switch-width);
  margin: 0;
  transition:
    background-color 150ms ease,
    border-color 150ms ease;
  appearance: none;
  display: flex;
  align-items: center;
  font-size: var(--switch-label-font-size);
  font-weight: var(--mantine-font-weight-medium);
  order: var(--switch-order, 1);
  user-select: none;
  z-index: 0;
  line-height: 0;
  color: var(--switch-text-color);
}

.m_9307d992:where([data-without-labels]) {
    width: var(--switch-width);
  }

.m_926b4011:focus-visible + .m_9307d992 {
    outline: 2px solid var(--mantine-primary-color-filled);
    outline-offset: calc(0.125rem * var(--mantine-scale));
  }

.m_926b4011:checked + .m_9307d992 {
    --switch-bg: var(--switch-color);
    --switch-text-color: var(--mantine-color-white);
  }

.m_926b4011:disabled + .m_9307d992,
  .m_926b4011[data-disabled] + .m_9307d992 {
    --switch-bg: var(--switch-disabled-color);
    --switch-cursor: not-allowed;
  }

[data-mantine-color-scheme='light'] .m_9307d992 {
    --switch-bg: var(--mantine-color-gray-3);
    --switch-text-color: var(--mantine-color-gray-6);
}

[data-mantine-color-scheme='dark'] .m_9307d992 {
    --switch-bg: var(--mantine-color-dark-5);
    --switch-text-color: var(--mantine-color-dark-1);
}

.m_9307d992[data-label-position='left'] {
    --switch-order: 2;
  }

.m_93039a1d {
  position: absolute;
  z-index: 1;
  border-radius: var(--switch-radius);
  display: flex;
  background-color: var(--switch-thumb-bg, var(--mantine-color-white));
  height: var(--switch-thumb-size);
  width: var(--switch-thumb-size);
  inset-inline-start: var(--switch-thumb-start, var(--switch-track-label-padding));
  transition: inset-inline-start 150ms ease;
}

.m_93039a1d:where([data-with-thumb-indicator])::before {
    content: '';
    width: 40%;
    height: 40%;
    background-color: var(--switch-bg);
    position: absolute;
    border-radius: var(--switch-radius);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.m_93039a1d > * {
    margin: auto;
  }

.m_926b4011:checked + * > .m_93039a1d {
    --switch-thumb-start: calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding));
  }

.m_926b4011:disabled + * > .m_93039a1d,
  .m_926b4011[data-disabled] + * > .m_93039a1d {
    --switch-thumb-bg: var(--switch-thumb-bg-disabled);
  }

[data-mantine-color-scheme='light'] .m_93039a1d {
    --switch-thumb-bg-disabled: var(--mantine-color-gray-0);
}

[data-mantine-color-scheme='dark'] .m_93039a1d {
    --switch-thumb-bg-disabled: var(--mantine-color-dark-3);
}

.m_8277e082 {
  height: 100%;
  display: grid;
  place-content: center;
  min-width: calc(var(--switch-width) - var(--switch-thumb-size));
  padding-inline: var(--switch-track-label-padding);
  margin-inline-start: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
  transition: margin 150ms ease;
}

.m_926b4011:checked + * > .m_8277e082 {
    margin-inline-end: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));
    margin-inline-start: 0;
  }

.m_b23fa0ef {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  line-height: var(--mantine-line-height);
  font-size: var(--mantine-font-size-sm);
  table-layout: var(--table-layout, auto);
  caption-side: var(--table-caption-side, bottom);
  border: none;
}

  :where([data-mantine-color-scheme='light']) .m_b23fa0ef {
    --table-hover-color: var(--mantine-color-gray-1);
    --table-striped-color: var(--mantine-color-gray-0);
    --table-border-color: var(--mantine-color-gray-3);
}

  :where([data-mantine-color-scheme='dark']) .m_b23fa0ef {
    --table-hover-color: var(--mantine-color-dark-5);
    --table-striped-color: var(--mantine-color-dark-6);
    --table-border-color: var(--mantine-color-dark-4);
}

  .m_b23fa0ef:where([data-with-table-border]) {
    border: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
  }

  .m_b23fa0ef:where([data-tabular-nums]) {
    font-variant-numeric: tabular-nums;
  }

  .m_b23fa0ef:where([data-variant='vertical']) :where(.m_4e7aa4f3) {
    font-weight: var(--mantine-font-weight-medium);
  }

  :where([data-mantine-color-scheme='light']) .m_b23fa0ef:where([data-variant='vertical']) :where(.m_4e7aa4f3) {
      background-color: var(--mantine-color-gray-0);
}

  :where([data-mantine-color-scheme='dark']) .m_b23fa0ef:where([data-variant='vertical']) :where(.m_4e7aa4f3) {
      background-color: var(--mantine-color-dark-6);
}

.m_4e7aa4f3 {
  text-align: start;
}

.m_4e7aa4fd {
  border-bottom: none;
  background-color: transparent;
}

@media (hover: hover) {
    .m_4e7aa4fd:hover:where([data-hover]) {
      background-color: var(--tr-hover-bg);
    }
}

@media (hover: none) {
    .m_4e7aa4fd:active:where([data-hover]) {
      background-color: var(--tr-hover-bg);
    }
}

.m_4e7aa4fd:where([data-with-row-border]) {
    border-bottom: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
  }

.m_4e7aa4ef,
.m_4e7aa4f3 {
  padding: var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs));
}

.m_4e7aa4ef:where([data-with-column-border]:not(:first-child)), .m_4e7aa4f3:where([data-with-column-border]:not(:first-child)) {
    border-inline-start: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
  }

.m_4e7aa4ef:where([data-with-column-border]:not(:last-child)), .m_4e7aa4f3:where([data-with-column-border]:not(:last-child)) {
    border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
  }

.m_b2404537 > :where(tr):where([data-with-row-border]:last-of-type) {
      border-bottom: none;
    }

.m_b2404537 > :where(tr):where([data-striped='odd']:nth-of-type(odd)) {
      background-color: var(--table-striped-color);
    }

.m_b2404537 > :where(tr):where([data-striped='even']:nth-of-type(even)) {
      background-color: var(--table-striped-color);
    }

.m_b2404537 > :where(tr)[data-hover] {
      --tr-hover-bg: var(--table-highlight-on-hover-color, var(--table-hover-color));
    }

.m_b242d975 {
  top: var(--table-sticky-header-offset, 0);
  z-index: 3;
}

.m_b242d975:where([data-sticky]) {
    position: sticky;
  }

.m_b242d975:where([data-sticky]) :where(.m_4e7aa4f3) {
      position: sticky;
      top: var(--table-sticky-header-offset, 0);
      background-color: var(--mantine-color-body);
    }

/* border-collapse: collapse drops borders on position: sticky cells —
       the tr's border-bottom scrolls away with the row, so redraw it with
       box-shadow on the (sticky) th. The tr's border-bottom is suppressed
       here so the two don't stack into a double line. */

.m_b242d975:where([data-sticky]) :where(.m_4e7aa4fd[data-with-row-border]) {
      border-bottom: none;
    }

.m_b242d975:where([data-sticky]) :where(.m_4e7aa4fd[data-with-row-border]) :where(.m_4e7aa4f3) {
      box-shadow: inset 0 -1px 0 var(--table-border-color);
    }

.m_b242d975:where([data-sticky]) :where(.m_4e7aa4f3[data-with-column-border]) {
      border-inline-start: none;
      border-inline-end: none;
    }

/* Single pseudo-element per internal boundary, centered on the boundary
       (-0.5px) to align with the body's border-collapse line. */

.m_b242d975:where([data-sticky]) :where(.m_4e7aa4f3[data-with-column-border]:not(:first-child))::before {
      content: '';
      position: absolute;
      inset-block: 0;
      inset-inline-start: calc(-0.03125rem * var(--mantine-scale));
      width: calc(0.0625rem * var(--mantine-scale));
      background-color: var(--table-border-color);
    }

:where([data-with-table-border]) .m_b242d975[data-sticky] {
  position: sticky;
  top: var(--table-sticky-header-offset, 0);
  z-index: 4;
  border-top: none;
}

:where([data-with-table-border]) .m_b242d975[data-sticky]::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: calc(-0.03125rem * var(--mantine-scale));
  width: 100%;
  height: calc(0.0625rem * var(--mantine-scale));
  background-color: var(--table-border-color);
  z-index: 5;
}

:where([data-with-table-border]) .m_b242d975[data-sticky] .m_4e7aa4f3:first-child {
  border-top: none;
}

.m_9e5a3ac7 {
  color: var(--mantine-color-dimmed);
}

.m_9e5a3ac7:where([data-side='top']) {
    margin-bottom: var(--mantine-spacing-xs);
  }

.m_9e5a3ac7:where([data-side='bottom']) {
    margin-top: var(--mantine-spacing-xs);
  }

.m_a100c15 {
  overflow-x: var(--table-overflow);
}

.m_62259741 {
  min-width: var(--table-min-width);
  max-height: var(--table-max-height);
}

.m_bcaa9990 {
  display: flex;
  flex-direction: column;
  --toc-depth-offset: 0.8em;
}

.m_375a65ef {
  display: block;
  padding: 0.3em 0.8em;
  font-size: var(--toc-size, var(--mantine-font-size-md));
  border-radius: var(--toc-radius, var(--mantine-radius-default));
  padding-left: max(calc(var(--depth-offset) * var(--toc-depth-offset)), 0.8em);
}

@media (hover: hover) {
      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
        background-color: var(--mantine-color-gray-1);
  }

      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
        background-color: var(--mantine-color-dark-5);
  }
}

@media (hover: none) {
      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
        background-color: var(--mantine-color-gray-1);
  }

      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
        background-color: var(--mantine-color-dark-5);
  }
}

.m_375a65ef:where([data-active]) {
    background-color: var(--toc-bg);
    color: var(--toc-color);
  }

[data-mantine-color-scheme='light'] .m_89d60db1 {
    --tab-border-color: var(--mantine-color-gray-3);
}
  [data-mantine-color-scheme='dark'] .m_89d60db1 {
    --tab-border-color: var(--mantine-color-dark-4);
}
  .m_89d60db1 {

  display: var(--tabs-display);
  flex-direction: var(--tabs-flex-direction);

  --tabs-list-direction: row;
  --tabs-panel-grow: unset;
  --tabs-display: block;
  --tabs-flex-direction: row;
  --tabs-list-border-width: 0;
  --tabs-list-border-size: 0 0 var(--tabs-list-border-width) 0;
  --tabs-list-gap: unset;

  --tabs-list-line-bottom: 0;
  --tabs-list-line-top: unset;
  --tabs-list-line-start: 0;
  --tabs-list-line-end: 0;

  --tab-radius: var(--tabs-radius) var(--tabs-radius) 0 0;
  --tab-border-width: 0 0 var(--tabs-list-border-width) 0;
}

  .m_89d60db1[data-inverted] {
    --tabs-list-line-bottom: unset;
    --tabs-list-line-top: 0;
    --tab-radius: 0 0 var(--tabs-radius) var(--tabs-radius);
    --tab-border-width: var(--tabs-list-border-width) 0 0 0;
  }

  .m_89d60db1[data-inverted] .m_576c9d4::before {
      top: 0;
      bottom: unset;
    }

  .m_89d60db1[data-orientation='vertical'] {
    --tabs-list-line-start: unset;
    --tabs-list-line-end: 0;
    --tabs-list-line-top: 0;
    --tabs-list-line-bottom: 0;
    --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0;
    --tab-border-width: 0 var(--tabs-list-border-width) 0 0;
    --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);
    --tabs-list-direction: column;
    --tabs-panel-grow: 1;
    --tabs-display: flex;
  }

  [dir="rtl"] .m_89d60db1[data-orientation='vertical'] {
      --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width);
      --tab-border-width: 0 0 0 var(--tabs-list-border-width);
      --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;
}

  .m_89d60db1[data-orientation='vertical'][data-placement='right'] {
      --tabs-flex-direction: row-reverse;
      --tabs-list-line-start: 0;
      --tabs-list-line-end: unset;
      --tabs-list-border-size: 0 0 0 var(--tabs-list-border-width);
      --tab-border-width: 0 0 0 var(--tabs-list-border-width);
      --tab-radius: 0 var(--tabs-radius) var(--tabs-radius) 0;
    }

  [dir="rtl"] .m_89d60db1[data-orientation='vertical'][data-placement='right'] {
        --tabs-list-border-size: 0 var(--tabs-list-border-width) 0 0;
        --tab-border-width: 0 var(--tabs-list-border-width) 0 0;
        --tab-radius: var(--tabs-radius) 0 0 var(--tabs-radius);
}

  .m_89d60db1[data-variant='default'] {
    --tabs-list-border-width: calc(0.125rem * var(--mantine-scale));
  }

  [data-mantine-color-scheme='light'] .m_89d60db1[data-variant='default'] {
      --tab-hover-color: var(--mantine-color-gray-0);
}

  [data-mantine-color-scheme='dark'] .m_89d60db1[data-variant='default'] {
      --tab-hover-color: var(--mantine-color-dark-6);
}

  .m_89d60db1[data-variant='outline'] {
    --tabs-list-border-width: calc(0.0625rem * var(--mantine-scale));
  }

  .m_89d60db1[data-variant='pills'] {
    --tabs-list-gap: calc(var(--mantine-spacing-sm) / 2);
  }

  [data-mantine-color-scheme='light'] .m_89d60db1[data-variant='pills'] {
      --tab-hover-color: var(--mantine-color-gray-0);
}

  [data-mantine-color-scheme='dark'] .m_89d60db1[data-variant='pills'] {
      --tab-hover-color: var(--mantine-color-dark-6);
}

.m_89d33d6d {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--tabs-justify, flex-start);
  flex-direction: var(--tabs-list-direction);
  gap: var(--tabs-list-gap);
}

.m_89d33d6d:where([data-grow]) .m_4ec4dce6 {
    flex: 1;
  }

.m_b0c91715 {
  flex-grow: var(--tabs-panel-grow);
}

.m_4ec4dce6 {
  position: relative;
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
  font-size: var(--mantine-font-size-sm);
  white-space: nowrap;
  z-index: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  user-select: none;
}

.m_4ec4dce6:where(:disabled, [data-disabled]) {
    opacity: 0.5;
    cursor: not-allowed;
  }

.m_4ec4dce6:focus {
    z-index: 1;
  }

.m_fc420b1f {
  display: flex;
  align-items: center;
  justify-content: center;
}

.m_fc420b1f:where([data-position='left']:not(:only-child)) {
    margin-inline-end: var(--mantine-spacing-xs);
  }

.m_fc420b1f:where([data-position='right']:not(:only-child)) {
    margin-inline-start: var(--mantine-spacing-xs);
  }

.m_42bbd1ae {
  flex: 1;
  text-align: center;
}

/*************************************** default variant ***************************************/
.m_576c9d4 {
  position: relative;
}
.m_576c9d4::before {
    content: '';
    position: absolute;
    border: 1px solid var(--tab-border-color);
    bottom: var(--tabs-list-line-bottom);
    inset-inline-start: var(--tabs-list-line-start);
    inset-inline-end: var(--tabs-list-line-end);
    top: var(--tabs-list-line-top);
  }

.m_539e827b {
  border-radius: var(--tab-radius);
  border-width: var(--tab-border-width);
  border-style: solid;
  border-color: transparent;
  background-color: transparent;
}

.m_539e827b:where([data-active]) {
    border-color: var(--tabs-color);
  }

@media (hover: hover) {
    .m_539e827b:hover {
    background-color: var(--tab-hover-color);
    }

    .m_539e827b:hover:where(:not([data-active])) {
      border-color: var(--tab-border-color);
    }
}

@media (hover: none) {
    .m_539e827b:active {
    background-color: var(--tab-hover-color);
    }

    .m_539e827b:active:where(:not([data-active])) {
      border-color: var(--tab-border-color);
    }
}

@media (hover: hover) {
    .m_539e827b:disabled:hover, .m_539e827b[data-disabled]:hover {
      background-color: transparent;
    }
}

@media (hover: none) {
    .m_539e827b:disabled:active, .m_539e827b[data-disabled]:active {
      background-color: transparent;
    }
}

/*************************************** outline variant ***************************************/
.m_6772fbd5 {
  position: relative;
}
.m_6772fbd5::before {
    content: '';
    position: absolute;
    border-color: var(--tab-border-color);
    border-width: var(--tabs-list-border-size);
    border-style: solid;
    bottom: var(--tabs-list-line-bottom);
    inset-inline-start: var(--tabs-list-line-start);
    inset-inline-end: var(--tabs-list-line-end);
    top: var(--tabs-list-line-top);
  }

.m_b59ab47c {
  border-top: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  border-bottom: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  border-inline: calc(0.0625rem * var(--mantine-scale)) solid transparent;
  border-top-color: var(--tab-border-top-color);
  border-bottom-color: var(--tab-border-bottom-color);
  border-radius: var(--tab-radius);
  position: relative;

  --tab-border-bottom-color: transparent;
  --tab-border-top-color: transparent;
  --tab-border-inline-end-color: transparent;
  --tab-border-inline-start-color: transparent;
}

.m_b59ab47c:where([data-active])::before {
      content: '';
      position: absolute;
      background-color: var(--tab-border-color);
      bottom: var(--tab-before-bottom, calc(-0.0625rem * var(--mantine-scale)));
      inset-inline-start: var(--tab-before-start, calc(-0.0625rem * var(--mantine-scale)));
      inset-inline-end: var(--tab-before-end, auto);
      top: var(--tab-before-top, auto);
      width: calc(0.0625rem * var(--mantine-scale));
      height: calc(0.0625rem * var(--mantine-scale));
    }

.m_b59ab47c:where([data-active])::after {
      content: '';
      position: absolute;
      background-color: var(--tab-border-color);
      bottom: var(--tab-after-bottom, calc(-0.0625rem * var(--mantine-scale)));
      inset-inline-end: var(--tab-after-end, calc(-0.0625rem * var(--mantine-scale)));
      inset-inline-start: var(--tab-after-start, auto);
      top: var(--tab-after-top, auto);
      width: calc(0.0625rem * var(--mantine-scale));
      height: calc(0.0625rem * var(--mantine-scale));
    }

.m_b59ab47c:where([data-active]) {

    border-top-color: var(--tab-border-top-color);
    border-bottom-color: var(--tab-border-bottom-color);
    border-inline-start-color: var(--tab-border-inline-start-color);
    border-inline-end-color: var(--tab-border-inline-end-color);

    --tab-border-top-color: var(--tab-border-color);
    --tab-border-inline-start-color: var(--tab-border-color);
    --tab-border-inline-end-color: var(--tab-border-color);
    --tab-border-bottom-color: var(--mantine-color-body);
}

.m_b59ab47c:where([data-active])[data-inverted] {
      --tab-border-bottom-color: var(--tab-border-color);
      --tab-border-top-color: var(--mantine-color-body);

      --tab-before-bottom: auto;
      --tab-before-top: calc(-0.0625rem * var(--mantine-scale));
      --tab-after-bottom: auto;
      --tab-after-top: calc(-0.0625rem * var(--mantine-scale));
    }

.m_b59ab47c:where([data-active])[data-orientation='vertical'][data-placement='left'] {
        --tab-border-inline-end-color: var(--mantine-color-body);
        --tab-border-inline-start-color: var(--tab-border-color);
        --tab-border-bottom-color: var(--tab-border-color);

        --tab-before-end: calc(-0.0625rem * var(--mantine-scale));
        --tab-before-start: auto;
        --tab-before-bottom: auto;
        --tab-before-top: calc(-0.0625rem * var(--mantine-scale));
        --tab-after-start: auto;
        --tab-after-end: calc(-0.0625rem * var(--mantine-scale));
      }

.m_b59ab47c:where([data-active])[data-orientation='vertical'][data-placement='right'] {
        --tab-border-inline-start-color: var(--mantine-color-body);
        --tab-border-inline-end-color: var(--tab-border-color);
        --tab-border-bottom-color: var(--tab-border-color);

        --tab-before-start: calc(-0.0625rem * var(--mantine-scale));
        --tab-before-end: auto;
        --tab-before-bottom: auto;
        --tab-before-top: calc(-0.0625rem * var(--mantine-scale));
        --tab-after-end: auto;
        --tab-after-start: calc(-0.0625rem * var(--mantine-scale));
      }

/*************************************** pills variant ***************************************/
.m_c3381914 {
  border-radius: var(--tabs-radius);
  background-color: var(--tab-bg);
  color: var(--tab-color);

  --tab-bg: transparent;
  --tab-color: inherit;
}
@media (hover: hover) {
    .m_c3381914:not([data-disabled]):hover {
      --tab-bg: var(--tab-hover-color);
    }
}
@media (hover: none) {
    .m_c3381914:not([data-disabled]):active {
      --tab-bg: var(--tab-hover-color);
    }
}
.m_c3381914[data-active][data-active] {
    --tab-bg: var(--tabs-color);
    --tab-color: var(--tabs-text-color, var(--mantine-color-white));
  }
@media (hover: hover) {
    .m_c3381914[data-active][data-active]:hover {
      --tab-bg: var(--tabs-color);
    }
}
@media (hover: none) {
    .m_c3381914[data-active][data-active]:active {
      --tab-bg: var(--tabs-color);
    }
}

.m_7341320d {
  --ti-size-xs: calc(1.125rem * var(--mantine-scale));
  --ti-size-sm: calc(1.375rem * var(--mantine-scale));
  --ti-size-md: calc(1.75rem * var(--mantine-scale));
  --ti-size-lg: calc(2.125rem * var(--mantine-scale));
  --ti-size-xl: calc(2.75rem * var(--mantine-scale));
  --ti-size: var(--ti-size-md);

  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;

  width: var(--ti-size);
  height: var(--ti-size);
  min-width: var(--ti-size);
  min-height: var(--ti-size);
  border-radius: var(--ti-radius, var(--mantine-radius-default));
  background: var(--ti-bg, var(--mantine-primary-color-filled));
  color: var(--ti-color, var(--mantine-color-white));
  border: var(--ti-bd, 1px solid transparent);
}

.m_43657ece {
  --offset: calc(var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2);
  --tl-bullet-size: calc(1.25rem * var(--mantine-scale));
  --tl-line-width: calc(0.25rem * var(--mantine-scale));
  --tl-radius: calc(62.5rem * var(--mantine-scale));
  --tl-color: var(--mantine-primary-color-filled);
}

  .m_43657ece:where([data-align='left']) {
    padding-inline-start: var(--offset);
  }

  .m_43657ece:where([data-align='right']) {
    padding-inline-end: var(--offset);
  }

.m_2ebe8099 {
  font-weight: var(--mantine-font-weight-medium);
  line-height: 1;
  margin-bottom: calc(var(--mantine-spacing-xs) / 2);
}

.m_436178ff {
  --item-border: var(--tl-line-width) var(--tli-border-style, solid) var(--item-border-color);

  position: relative;
  color: var(--mantine-color-text);
}

.m_436178ff::before {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    inset-inline-start: var(--timeline-line-start, 0);
    inset-inline-end: var(--timeline-line-end, 0);
    bottom: calc(var(--mantine-spacing-xl) * -1);
    border-inline-start: var(--item-border);
    display: var(--timeline-line-display, none);
  }

.m_43657ece[data-align='left'] .m_436178ff::before {
      --timeline-line-start: calc(var(--tl-line-width) * -1);
      --timeline-line-end: auto;
    }

.m_43657ece[data-align='right'] .m_436178ff::before {
      --timeline-line-start: auto;
      --timeline-line-end: calc(var(--tl-line-width) * -1);
    }

.m_43657ece:where([data-align='left']) .m_436178ff {
    padding-inline-start: var(--offset);
    text-align: start;
  }

.m_43657ece:where([data-align='right']) .m_436178ff {
    padding-inline-end: var(--offset);
    text-align: end;
  }

:where([data-mantine-color-scheme='light']) .m_436178ff {
    --item-border-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_436178ff {
    --item-border-color: var(--mantine-color-dark-4);
}

.m_436178ff:where([data-line-active])::before {
      border-color: var(--tli-color, var(--tl-color));
    }

.m_436178ff:where(:not(:last-of-type)) {
    --timeline-line-display: block;
  }

.m_436178ff:where(:not(:first-of-type)) {
    margin-top: var(--mantine-spacing-xl);
  }

.m_8affcee1 {
  width: var(--tl-bullet-size);
  height: var(--tl-bullet-size);
  border-radius: var(--tli-radius, var(--tl-radius));
  border: var(--tl-line-width) solid;
  background-color: var(--mantine-color-body);
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mantine-color-text);
}

:where([data-mantine-color-scheme='light']) .m_8affcee1 {
    border-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_8affcee1 {
    border-color: var(--mantine-color-dark-4);
}

.m_43657ece:where([data-align='left']) .m_8affcee1 {
    inset-inline-start: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);
    inset-inline-end: auto;
  }

.m_43657ece:where([data-align='right']) .m_8affcee1 {
    inset-inline-start: auto;
    inset-inline-end: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);
  }

.m_8affcee1:where([data-with-child]) {
    border-width: var(--tl-line-width);
  }

:where([data-mantine-color-scheme='light']) .m_8affcee1:where([data-with-child]) {
      background-color: var(--mantine-color-gray-3);
}

:where([data-mantine-color-scheme='dark']) .m_8affcee1:where([data-with-child]) {
      background-color: var(--mantine-color-dark-4);
}

.m_8affcee1:where([data-active]) {
    border-color: var(--tli-color, var(--tl-color));
    background-color: var(--mantine-color-white);
    color: var(--tl-icon-color, var(--mantine-color-white));
  }

.m_8affcee1:where([data-active]):where([data-with-child]) {
      background-color: var(--tli-color, var(--tl-color));
      color: var(--tl-icon-color, var(--mantine-color-white));
    }

.m_43657ece:where([data-align='left']) .m_540e8f41 {
    padding-inline-start: var(--offset);
    text-align: start;
  }

.m_43657ece:where([data-align='right']) .m_540e8f41 {
    padding-inline-end: var(--offset);
    text-align: end;
  }

.m_8a5d1357 {
  margin: 0;
  font-weight: var(--title-fw);
  font-size: var(--title-fz);
  line-height: var(--title-lh);
  font-family: var(--mantine-font-family-headings);
  text-wrap: var(--title-text-wrap, var(--mantine-heading-text-wrap));
}

  .m_8a5d1357:where([data-line-clamp]) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--title-line-clamp);
    -webkit-box-orient: vertical;
  }

:where([data-tree-root]) {
  --level-offset: var(--mantine-spacing-lg);
  --tree-line-width: calc(0.0625rem * var(--mantine-scale));
  --tree-line-color: var(--mantine-color-default-border);
}

.m_f698e191 {
  margin: 0;
  padding: 0;
  user-select: none;
}

.m_75f3ecf {
  margin: 0;
  padding: 0;
}

.m_f6970eb1 {
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 0;
  outline: 0;
}

.m_f6970eb1:focus-visible > .m_dc283425 {
      outline: 2px solid var(--mantine-primary-color-filled);
      outline-offset: calc(0.125rem * var(--mantine-scale));
    }

.m_dc283425 {
  position: relative;
  padding-inline-start: var(--label-offset);
}

:where([data-mantine-color-scheme='light']) .m_dc283425:where([data-selected]) {
      background-color: var(--mantine-color-gray-1);
}

:where([data-mantine-color-scheme='dark']) .m_dc283425:where([data-selected]) {
      background-color: var(--mantine-color-dark-5);
}

.m_dc283425:where([data-dragging]) {
    opacity: 0.4;
  }

.m_dc283425:where([data-drag-over='before'])::before {
    content: '';
    position: absolute;
    top: calc(-0.0625rem * var(--mantine-scale));
    inset-inline-start: var(--label-offset, 0);
    inset-inline-end: 0;
    height: calc(0.125rem * var(--mantine-scale));
    background-color: var(--mantine-primary-color-filled);
    pointer-events: none;
    z-index: 1;
  }

.m_dc283425:where([data-drag-over='after'])::after {
    content: '';
    position: absolute;
    bottom: calc(-0.0625rem * var(--mantine-scale));
    inset-inline-start: var(--label-offset, 0);
    inset-inline-end: 0;
    height: calc(0.125rem * var(--mantine-scale));
    background-color: var(--mantine-primary-color-filled);
    pointer-events: none;
    z-index: 1;
  }

.m_dc283425:where([data-drag-over='inside']) {
    background-color: var(--mantine-primary-color-light);
  }

:where([data-with-lines]) .m_f6970eb1 {
    position: relative;
  }

/* Horizontal connector at the node's own level — applies to both nested and flat layouts */

:where([data-with-lines]) .m_f6970eb1:not([data-level='1'])::before {
    content: '';
    position: absolute;
    top: calc(0.75rem * var(--mantine-scale));
    inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
    width: calc(var(--level-offset) / 2);
    height: 0;
    border-top: var(--tree-line-width) solid var(--tree-line-color);
    pointer-events: none;
    z-index: 1;
  }

/* Vertical line for nested layout (regular Tree): the line spans the parent <li>'s
     full height — including descendants — so ancestor columns stay continuous. */

:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
      width: 0;
      border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
      pointer-events: none;
      z-index: 1;
    }

:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1:last-child::after {
      bottom: auto;
      height: calc(0.75rem * var(--mantine-scale));
    }

:where([data-with-lines]) .m_f6970eb1:where([data-dragging])::before,
    :where([data-with-lines]) .m_f6970eb1:where([data-dragging])::after {
      display: none;
    }

:where([data-with-lines]) .m_f6970eb1:where([data-dragging]) .m_c03b303c {
      display: none;
    }

/* Vertical line markers rendered as DOM children by `FlatTreeNode` for flat layouts
   (e.g. virtualized trees) where ::after on a single node can't span ancestor rows.
   Each marker is positioned at column `--flat-line-column` and is only visible
   inside a `[data-with-lines]` tree. */
.m_c03b303c {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  inset-inline-start: calc((var(--flat-line-column) - 1.5) * var(--level-offset));
  border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
  pointer-events: none;
  z-index: 1;
  display: none;
}

:where([data-with-lines]) .m_c03b303c {
  display: block;
}

.m_bf7448d9 {
  bottom: auto;
  height: calc(0.75rem * var(--mantine-scale));
}

.m_529d33e8 {
  --ts-level-offset: calc(1.25rem * var(--mantine-scale));
  --ts-line-width: calc(0.0625rem * var(--mantine-scale));
  --ts-line-color: var(--mantine-color-default-border);
  --ts-option-padding-y: calc(0.25rem * var(--mantine-scale));
  --ts-option-padding-x: calc(0.5rem * var(--mantine-scale));
}

.m_28bb748 {
  display: flex;
  align-items: center;
  gap: calc(0.375rem * var(--mantine-scale));
  position: relative;
  padding: var(--ts-option-padding-y) var(--ts-option-padding-x);
  padding-inline-start: var(--ts-option-padding-x);
}

.m_aa3e3f86 {
  display: flex;
  align-items: center;
  justify-content: center;
  --_ts-expand-icon-size: calc(1.45 * var(--combobox-option-fz, var(--mantine-font-size-sm)));
  width: var(--_ts-expand-icon-size);
  min-width: var(--_ts-expand-icon-size);
  height: var(--_ts-expand-icon-size);
  border-radius: var(--mantine-radius-sm);
  cursor: pointer;
  color: var(--mantine-color-dimmed);
  transform: rotate(-90deg);
}

:where([data-combobox-selected]) .m_aa3e3f86 {
    color: var(--mantine-color-white);
  }

:where([dir="rtl"]) .m_aa3e3f86 {
    transform: rotate(90deg);
}

.m_aa3e3f86:where([data-expanded]) {
    transform: rotate(0deg);
  }

@media (hover: hover) {
    :where([data-mantine-color-scheme='light']) .m_aa3e3f86:hover {
      background-color: var(--mantine-color-gray-1);
  }

    :where([data-mantine-color-scheme='dark']) .m_aa3e3f86:hover {
      background-color: var(--mantine-color-dark-5);
  }
}

@media (hover: none) {
    :where([data-mantine-color-scheme='light']) .m_aa3e3f86:active {
      background-color: var(--mantine-color-gray-1);
  }

    :where([data-mantine-color-scheme='dark']) .m_aa3e3f86:active {
      background-color: var(--mantine-color-dark-5);
  }
}

.m_eaa4cdee {
  opacity: 0.4;
  width: 0.8em;
  min-width: 0.8em;
  height: 0.8em;
  margin-inline-start: auto;
}

:where([data-combobox-selected]) .m_eaa4cdee {
    opacity: 1;
  }

.m_ffe3a9c1 {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tree lines */
.m_57207d5d {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);
  pointer-events: none;
}

.m_41b9db0b {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);
  pointer-events: none;
}

.m_41b9db0b:where([data-last]) {
    bottom: auto;
    height: 50%;
  }

.m_1246e79 {
  position: absolute;
  top: 50%;
  height: 0;
  border-top: var(--ts-line-width) solid var(--ts-line-color);
  pointer-events: none;
}

.m_d08caa0 :first-child {
    margin-top: 0;
  }
  .m_d08caa0 :last-child {
    margin-bottom: 0;
  }
  .m_d08caa0 :where(h1, h2, h3, h4, h5, h6) {
    margin-bottom: var(--mantine-spacing-xs);
    text-wrap: var(--mantine-heading-text-wrap);
    font-family: var(--mantine-font-family-headings);
  }
  .m_d08caa0 :where(h1) {
    margin-top: calc(1.5 * var(--mantine-spacing-xl));
    font-size: var(--mantine-h1-font-size);
    line-height: var(--mantine-h1-line-height);
    font-weight: var(--mantine-h1-font-weight);
  }
  .m_d08caa0 :where(h2) {
    margin-top: var(--mantine-spacing-xl);
    font-size: var(--mantine-h2-font-size);
    line-height: var(--mantine-h2-line-height);
    font-weight: var(--mantine-h2-font-weight);
  }
  .m_d08caa0 :where(h3) {
    margin-top: calc(0.8 * var(--mantine-spacing-xl));
    font-size: var(--mantine-h3-font-size);
    line-height: var(--mantine-h3-line-height);
    font-weight: var(--mantine-h3-font-weight);
  }
  .m_d08caa0 :where(h4) {
    margin-top: calc(0.8 * var(--mantine-spacing-xl));
    font-size: var(--mantine-h4-font-size);
    line-height: var(--mantine-h4-line-height);
    font-weight: var(--mantine-h4-font-weight);
  }
  .m_d08caa0 :where(h5) {
    margin-top: calc(0.5 * var(--mantine-spacing-xl));
    font-size: var(--mantine-h5-font-size);
    line-height: var(--mantine-h5-line-height);
    font-weight: var(--mantine-h5-font-weight);
  }
  .m_d08caa0 :where(h6) {
    margin-top: calc(0.5 * var(--mantine-spacing-xl));
    font-size: var(--mantine-h6-font-size);
    line-height: var(--mantine-h6-line-height);
    font-weight: var(--mantine-h6-font-weight);
  }
  .m_d08caa0 :where(img) {
    max-width: 100%;
    margin-bottom: var(--mantine-spacing-xs);
  }
  .m_d08caa0 :where(p) {
    margin-top: 0;
    margin-bottom: var(--mantine-spacing-lg);
  }
  :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(mark) {
      background-color: var(--mantine-color-yellow-2);
      color: inherit;
}
  :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(mark) {
      background-color: var(--mantine-color-yellow-5);
      color: var(--mantine-color-black);
}
  .m_d08caa0 :where(a) {
    color: var(--mantine-color-anchor);
    text-decoration: none;
  }
  @media (hover: hover) {
    .m_d08caa0 :where(a):hover {
      text-decoration: underline;
    }
}
  @media (hover: none) {
    .m_d08caa0 :where(a):active {
      text-decoration: underline;
    }
}
  .m_d08caa0 :where(hr) {
    margin-top: var(--mantine-spacing-md);
    margin-bottom: var(--mantine-spacing-md);
    border: 0;
    border-top: calc(0.0625rem * var(--mantine-scale)) solid;
  }
  :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(hr) {
      border-color: var(--mantine-color-gray-3);
}
  :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(hr) {
      border-color: var(--mantine-color-dark-3);
}
  .m_d08caa0 :where(pre) {
    padding: var(--mantine-spacing-xs);
    line-height: var(--mantine-line-height);
    margin: 0;
    margin-top: var(--mantine-spacing-md);
    margin-bottom: var(--mantine-spacing-md);
    overflow-x: auto;
    font-family: var(--mantine-font-family-monospace);
    font-size: var(--mantine-font-size-xs);
    border-radius: var(--mantine-radius-sm);
  }
  :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(pre) {
      background-color: var(--mantine-color-gray-0);
}
  :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(pre) {
      background-color: var(--mantine-color-dark-8);
}
  .m_d08caa0 :where(pre) :where(code) {
      background-color: transparent;
      padding: 0;
      border-radius: 0;
      color: inherit;
      border: 0;
    }
  .m_d08caa0 :where(kbd) {
    --kbd-fz: calc(0.75rem * var(--mantine-scale));
    --kbd-padding: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));

    font-family: var(--mantine-font-family-monospace);
    line-height: var(--mantine-line-height);
    font-weight: var(--mantine-font-weight-bold);
    padding: var(--kbd-padding);
    font-size: var(--kbd-fz);
    border-radius: var(--mantine-radius-sm);
    border: calc(0.0625rem * var(--mantine-scale)) solid;
    border-bottom-width: calc(0.1875rem * var(--mantine-scale));
  }
  :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(kbd) {
      border-color: var(--mantine-color-gray-3);
      color: var(--mantine-color-gray-7);
      background-color: var(--mantine-color-gray-0);
}
  :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(kbd) {
      border-color: var(--mantine-color-dark-3);
      color: var(--mantine-color-dark-0);
      background-color: var(--mantine-color-dark-5);
}
  .m_d08caa0 :where(code) {
    line-height: var(--mantine-line-height);
    padding: calc(0.0625rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
    border-radius: var(--mantine-radius-sm);
    font-family: var(--mantine-font-family-monospace);
    font-size: var(--mantine-font-size-xs);
  }
  :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(code) {
      background-color: var(--mantine-color-gray-0);
      color: var(--mantine-color-black);
}
  :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(code) {
      background-color: var(--mantine-color-dark-5);
      color: var(--mantine-color-white);
}
  .m_d08caa0 :where(ul, ol):not([data-type='taskList']) {
    margin-bottom: var(--mantine-spacing-md);
    padding-inline-start: var(--mantine-spacing-xl);
    list-style-position: outside;
  }
  .m_d08caa0 :where(table) {
    width: 100%;
    border-collapse: collapse;
    caption-side: bottom;
    margin-bottom: var(--mantine-spacing-md);
  }
  :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(table) {
      --table-border-color: var(--mantine-color-gray-3);
}
  :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(table) {
      --table-border-color: var(--mantine-color-dark-4);
}
  .m_d08caa0 :where(table) :where(caption) {
      margin-top: var(--mantine-spacing-xs);
      font-size: var(--mantine-font-size-sm);
      color: var(--mantine-color-dimmed);
    }
  .m_d08caa0 :where(table) :where(th) {
      text-align: start;
      font-weight: bold;
      font-size: var(--mantine-font-size-sm);
      padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
    }
  .m_d08caa0 :where(table) :where(thead th) {
      border-bottom: calc(0.0625rem * var(--mantine-scale)) solid;
      border-color: var(--table-border-color);
    }
  .m_d08caa0 :where(table) :where(tfoot th) {
      border-top: calc(0.0625rem * var(--mantine-scale)) solid;
      border-color: var(--table-border-color);
    }
  .m_d08caa0 :where(table) :where(td) {
      padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
      border-bottom: calc(0.0625rem * var(--mantine-scale)) solid;
      border-color: var(--table-border-color);
      font-size: var(--mantine-font-size-sm);
    }
  .m_d08caa0 :where(table) :where(tr:last-of-type td) {
      border-bottom: 0;
    }
  .m_d08caa0 :where(blockquote) {
    font-size: var(--mantine-font-size-lg);
    line-height: var(--mantine-line-height);
    margin: var(--mantine-spacing-md) 0;
    border-radius: var(--mantine-radius-sm);
    padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
  }
  :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(blockquote) {
      background-color: var(--mantine-color-gray-0);
}
  :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(blockquote) {
      background-color: var(--mantine-color-dark-8);
}
.m_b37d9ac7 {
  width: calc(100% - var(--mantine-spacing-md) * 2);
  position: fixed;
  z-index: var(--notifications-z-index);
  max-width: var(--notifications-container-width);
}

  .m_b37d9ac7:where([data-position='top-center']) {
    top: var(--mantine-spacing-md);
    left: 50%;
    transform: translateX(-50%);
  }

  .m_b37d9ac7:where([data-position='top-left']) {
    top: var(--mantine-spacing-md);
    left: var(--mantine-spacing-md);
  }

  .m_b37d9ac7:where([data-position='top-right']) {
    top: var(--mantine-spacing-md);
    right: var(--mantine-spacing-md);
  }

  .m_b37d9ac7:where([data-position='bottom-center']) {
    bottom: var(--mantine-spacing-md);
    left: 50%;
    transform: translateX(-50%);
  }

  .m_b37d9ac7:where([data-position='bottom-left']) {
    bottom: var(--mantine-spacing-md);
    left: var(--mantine-spacing-md);
  }

  .m_b37d9ac7:where([data-position='bottom-right']) {
    bottom: var(--mantine-spacing-md);
    right: var(--mantine-spacing-md);
  }

.m_5ed0edd0 + .m_5ed0edd0 {
    margin-top: var(--mantine-spacing-md);
  }
.function-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 4px 10px;
}

.function-page-header-copy {
  min-width: 0;
  text-align: left;
}

.function-page-breadcrumb {
  margin-bottom: 5px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.function-page-header h1 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 25px;
  line-height: 1.25;
}

.function-page-header p {
  max-width: 920px;
  margin: 6px 0 0;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.6;
}

.function-page-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
}

.function-page-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: -2px 0 10px;
  padding: 4px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface);
}

.function-page-tabs button {
  min-height: 32px;
  padding: 0 15px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--theme-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.function-page-tabs button:hover {
  background: var(--theme-hover);
  color: var(--theme-text);
}

.function-page-tabs button.active {
  background: var(--primary);
  color: var(--theme-on-accent);
}

.function-page-tabs button:focus-visible,
.function-help-guide button:focus-visible,
.function-help-guide a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.function-help-guide {
  overflow: hidden;
  margin: 0 0 12px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface);
  color: var(--theme-text);
}

.function-help-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  background: var(--theme-surface);
}

.function-help-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 850;
}

.function-help-intro h2 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 20px;
  line-height: 1.35;
}

.function-help-intro > div:first-child > p {
  max-width: 900px;
  margin: 7px 0 0;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.65;
}

.function-help-overview {
  display: grid;
  gap: 5px;
  margin: 12px 0 0;
}

.function-help-overview > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
}

.function-help-overview dt {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 850;
}

.function-help-overview dd {
  margin: 0;
  color: var(--theme-text);
  font-size: 12px;
  line-height: 1.55;
}

.function-help-primary-actions,
.function-help-footer-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.function-help-primary,
.function-help-secondary,
.function-help-resource {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
}

.function-help-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--theme-on-accent);
}

.function-help-secondary,
.function-help-resource {
  background: var(--theme-control);
  color: var(--primary-dark);
}

.function-help-primary:hover {
  background: var(--primary-dark);
}

.function-help-secondary:hover,
.function-help-resource:hover {
  border-color: var(--primary);
  background: var(--theme-hover);
}

.function-help-section {
  padding: 16px 20px;
  border-top: 1px solid var(--theme-border);
}

.function-help-section-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.function-help-section-title > span {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 24px;
  border-radius: 5px;
  background: var(--primary);
  color: var(--theme-on-accent);
  font-size: 11px;
  font-weight: 900;
}

.function-help-section-title h3 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 15px;
}

.function-help-section-title p {
  margin: 3px 0 0;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.45;
}

.function-help-checklist,
.function-help-ai-section > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.function-help-checklist li,
.function-help-ai-section > ul li {
  position: relative;
  padding-left: 16px;
  color: var(--theme-text);
  font-size: 12px;
  line-height: 1.55;
}

.function-help-checklist li::before,
.function-help-ai-section > ul li::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.function-help-ai-section > ul li strong,
.function-help-ai-section > ul li span {
  display: block;
}

.function-help-ai-section > ul li strong {
  margin-bottom: 2px;
  color: var(--theme-text-strong);
  font-weight: 800;
}

.function-help-ai-section > ul li span {
  color: var(--theme-text);
}

.function-help-ai-summary {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--theme-border);
  color: var(--theme-text-strong);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.function-help-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.function-help-steps li {
  display: flex;
  min-width: 0;
  gap: 8px;
  padding: 0 12px;
  border-left: 1px solid var(--theme-border);
}

.function-help-steps li:first-child {
  padding-left: 0;
  border-left: 0;
}

.function-help-steps li > b {
  color: var(--primary-dark);
  font-size: 18px;
  line-height: 1.15;
}

.function-help-steps strong,
.function-help-steps span {
  display: block;
}

.function-help-steps strong {
  color: var(--theme-text-strong);
  font-size: 12px;
}

.function-help-steps span {
  margin-top: 3px;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.5;
}

.function-help-section-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0 0;
  border-top: 1px solid var(--theme-border);
}

.function-help-section-map > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.55fr) minmax(0, 1.45fr);
  gap: 12px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--theme-border);
}

.function-help-section-map > div:nth-child(odd) {
  padding-left: 0;
}

.function-help-section-map dt {
  color: var(--theme-text-strong);
  font-size: 12px;
  font-weight: 800;
}

.function-help-section-map dd {
  margin: 0;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.5;
}

.function-help-ai-section {
  background: var(--theme-active);
}

.function-help-final-section {
  padding-bottom: 18px;
}

.function-help-footer-actions {
  margin-top: 14px;
}

@media (max-width: 1100px) {
  .function-help-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 0;
  }

  .function-help-steps li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .function-page-header,
  .function-help-intro {
    flex-direction: column;
  }

  .function-page-header-actions {
    padding-top: 0;
  }

  .function-page-tabs button {
    flex: 1 1 0;
  }

  .function-help-checklist,
  .function-help-ai-section > ul,
  .function-help-section-map,
  .function-help-steps {
    grid-template-columns: 1fr;
  }

  .function-help-steps li {
    padding: 0;
    border-left: 0;
  }

  .function-help-section-map > div,
  .function-help-section-map > div:nth-child(odd) {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 9px 0;
  }
}
.table-tools-page .table-source-requirements {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.table-tools-page .table-source-requirements-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.table-tools-page .table-source-requirements-copy strong,
.table-tools-page .table-source-requirements-copy b {
  color: var(--theme-text-strong);
}

.table-tools-page .table-source-requirements-copy p,
.table-tools-page .table-source-requirements-copy small {
  margin: 0;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.55;
}

.table-tools-page .table-source-requirements-copy small {
  color: var(--theme-text);
}

.table-tools-page .table-source-requirements-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
}

.table-tools-page .table-source-requirements-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  text-decoration: none;
}

.table-tools-page .stage2-output-guide {
  align-items: start;
  margin-bottom: 10px;
}

.table-tools-page .douyin-table-guide {
  margin-top: 0;
}

.table-tools-page .douyin-form-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px 12px;
}

.table-tools-page .douyin-form-grid > .field-layout-path,
.table-tools-page .douyin-form-grid > .field-layout-wideOption {
  grid-column: span 6;
}

.table-tools-page .douyin-form-grid > .field-layout-short {
  grid-column: span 3;
}

.table-tools-page .douyin-form-grid > .field-layout-tiny {
  grid-column: span 2;
}

.table-tools-page .douyin-form-grid > .field-layout-full,
.table-tools-page .form-grid > .table-validation-summary {
  grid-column: 1 / -1;
}

.table-tools-page .field-label-row {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  align-self: flex-start;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--theme-text-strong);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.table-tools-page .field-label-title-group {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 5px;
}

.table-tools-page .field-label-text {
  min-width: 0;
}

.table-tools-page .field-requirement {
  flex: 0 0 auto;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 650;
  line-height: 14px;
}

.table-tools-page .field-requirement.required {
  background: var(--theme-danger);
  color: var(--theme-danger-text);
}

.table-tools-page .field-requirement.optional {
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
}

.table-tools-page .field-requirement.automatic {
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
}

.table-tools-page .field-label-row .help-dot {
  flex: 0 0 auto;
  margin-left: 0;
}

.table-tools-page .table-validation-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 10px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 7px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 12px;
  line-height: 1.45;
}

.table-tools-page .table-validation-summary strong {
  flex: 0 0 auto;
  color: inherit;
}

.table-tools-page .field-error {
  color: var(--theme-danger-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.table-tools-page .field.has-error > input:not([type="checkbox"]):not([type="radio"]),
.table-tools-page .field.has-error > select,
.table-tools-page .field.has-error .path-input {
  border-color: var(--theme-danger-border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger-border) 24%, transparent);
}

.table-tools-page .douyin-form-grid .field > input:not([type="checkbox"]):not([type="radio"]),
.table-tools-page .douyin-form-grid .field > select,
.table-tools-page .douyin-form-grid .path-input,
.table-tools-page .douyin-form-grid .readonly-value,
.table-tools-page .douyin-form-grid .segmented {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
  color: var(--theme-text);
}

.table-tools-page .douyin-form-grid .path-input input,
.table-tools-page .douyin-form-grid .readonly-value span {
  color: var(--theme-text);
}

.table-tools-page .douyin-form-grid .segmented button {
  color: var(--theme-muted);
}

.table-tools-page .douyin-form-grid .segmented button.active {
  color: #ffffff;
}

.table-tools-page .sub-panel-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-tools-page .sub-panel-title-row .sub-panel-title {
  flex: 1 1 auto;
}

.table-tools-page .sub-panel-title-row > .interactive-help-tip-anchor {
  flex: 0 0 auto;
}

.table-field-help-content {
  display: grid;
  gap: 8px;
}

.table-field-help-content p {
  margin: 0;
  color: var(--theme-text);
  font-size: 12px;
  line-height: 1.55;
}

.table-field-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.table-field-help-content button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--theme-link, var(--theme-text-strong));
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
}

.table-field-help-content button:hover {
  text-decoration: underline;
}

.table-tools-page .form-grid > .action-bar {
  grid-column: 1 / -1;
}

.table-tools-page .action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.table-tools-page .action-bar > .primary-button {
  flex: 0 0 auto;
}

.table-tools-page .table-task-feedback {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  order: -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}

.table-tools-page .table-task-feedback.creating,
.table-tools-page .table-task-feedback.running {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.table-tools-page .table-task-feedback.success {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.table-tools-page .table-task-feedback.failed,
.table-tools-page .table-task-feedback.cancelled {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
  color: var(--theme-danger-text);
}

.table-tools-page .table-task-feedback-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.table-tools-page .table-task-feedback.creating .table-task-feedback-dot,
.table-tools-page .table-task-feedback.running .table-task-feedback-dot {
  animation: table-task-pulse 1.2s ease-in-out infinite;
}

.table-tools-page .table-task-feedback-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
}

.table-tools-page .table-task-feedback-copy strong {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 12px;
}

.table-tools-page .table-task-feedback-copy span {
  overflow: hidden;
  color: currentColor;
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-tools-page .table-task-feedback-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.table-tools-page .table-task-feedback-actions button {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-surface);
  color: var(--theme-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.table-tools-page .table-task-feedback-actions button:hover {
  border-color: var(--theme-success-border);
  color: var(--theme-success-text);
}

@keyframes table-task-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.86);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 980px) {
  .table-tools-page .table-source-requirements {
    grid-template-columns: minmax(0, 1fr);
  }

  .table-tools-page .table-source-requirements-actions {
    justify-content: flex-start;
  }

  .table-tools-page .douyin-form-grid > .field-layout-path,
  .table-tools-page .douyin-form-grid > .field-layout-wideOption {
    grid-column: 1 / -1;
  }

  .table-tools-page .douyin-form-grid > .field-layout-short,
  .table-tools-page .douyin-form-grid > .field-layout-tiny {
    grid-column: span 6;
  }

  .table-tools-page .action-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .table-tools-page .action-bar > .primary-button {
    align-self: flex-end;
  }

  .table-tools-page .table-task-feedback {
    width: 100%;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .table-tools-page .table-task-feedback-actions {
    grid-column: 2;
    flex-wrap: wrap;
  }

  .table-tools-page .table-task-feedback-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .table-tools-page .table-task-feedback-copy span {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .table-tools-page .douyin-form-grid > .field-layout-short,
  .table-tools-page .douyin-form-grid > .field-layout-tiny {
    grid-column: 1 / -1;
  }

  .table-tools-page .table-validation-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .table-tools-page .table-task-feedback-dot {
    animation: none !important;
  }
}
.tk-fully-managed-page {
  container-type: inline-size;
  display: grid;
  gap: 10px;
  padding: 4px 0 96px;
  color: var(--theme-text);
}

.tk-fully-managed-page * {
  box-sizing: border-box;
}

.tk-fully-managed-header-actions,
.tk-final-buttons {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.tk-fully-managed-section,
.tk-fully-managed-final-action,
.tk-help-page {
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface);
}

.tk-fully-managed-section {
  overflow: hidden;
}

.tk-fully-managed-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-active);
}

.tk-fully-managed-section-head h2 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 15px;
  font-weight: 900;
}

.tk-fully-managed-section-head p {
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--theme-text-muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-fully-managed-binding {
  max-width: 300px;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-fully-managed-binding.ready {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.tk-fully-managed-binding.blocked {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.tk-fully-managed-target-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(280px, 460px);
  gap: 10px 14px;
  align-items: start;
  padding: 12px 12px 10px;
}

.tk-template-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 7px;
  margin: 0 12px;
  padding: 9px 0;
  border-top: 1px solid var(--theme-border);
}

.tk-template-strip > span,
.tk-template-error {
  color: var(--theme-text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.tk-template-select {
  flex: 0 1 260px !important;
  min-width: 210px !important;
  max-width: 300px !important;
}

.tk-template-error {
  margin: -3px 12px 8px;
  color: var(--theme-danger-text);
}

.tk-fully-managed-target-grid label,
.tk-fully-managed-range-grid > label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.tk-fully-managed-target-grid label > span,
.tk-fully-managed-range-grid label > span {
  color: var(--theme-text-strong);
  font-size: 12px;
  font-weight: 750;
}

.tk-fully-managed-target-grid small,
.tk-fully-managed-range-grid small,
.tk-inline-field small {
  margin-left: 3px;
  color: var(--theme-danger-text);
  font-size: 10px;
  font-weight: 700;
}

.tk-fully-managed-target-grid select,
.tk-fully-managed-range-grid input,
.tk-inline-field input,
.tk-inline-field select,
.tk-inline-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text-strong);
  font-size: 13px;
  outline: none;
}

.tk-fully-managed-target-grid select,
.tk-fully-managed-range-grid input,
.tk-inline-field input,
.tk-inline-field select {
  height: 32px;
  padding: 4px 9px;
}

.tk-inline-field textarea {
  min-height: 58px;
  padding: 7px 9px;
  line-height: 1.45;
  resize: vertical;
}

.tk-fully-managed-target-grid select:focus,
.tk-fully-managed-range-grid input:focus,
.tk-inline-field input:focus,
.tk-inline-field select:focus,
.tk-inline-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent);
}

.tk-fully-managed-target-grid select:disabled,
.tk-fully-managed-range-grid input:disabled,
.tk-inline-field input:disabled,
.tk-inline-field select:disabled {
  background: var(--theme-surface-elevated);
  color: var(--theme-text-muted);
  cursor: not-allowed;
}

.tk-range-divider {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 12px;
  padding-top: 9px;
  border-top: 1px solid var(--theme-border);
}

.tk-range-divider strong {
  flex: 0 0 auto;
  color: var(--theme-text-strong);
  font-size: 13px;
}

.tk-range-divider span {
  color: var(--theme-text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.tk-fully-managed-statuses {
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 9px 12px 0;
  border: 0;
}

.tk-fully-managed-statuses legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.tk-fully-managed-statuses label {
  cursor: pointer;
}

.tk-fully-managed-statuses input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tk-fully-managed-statuses span {
  display: block;
  min-width: 78px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  padding: 6px 10px;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 12px;
  text-align: center;
}

.tk-fully-managed-statuses label.active span {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--theme-on-accent);
  font-weight: 750;
}

.tk-fully-managed-statuses input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tk-fully-managed-range-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 96px 160px;
  gap: 10px 14px;
  align-items: start;
  padding: 10px 12px 12px;
}

.tk-range-checkbox {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin: -4px 12px 10px;
  color: var(--theme-text-muted);
  font-size: 11px;
  cursor: pointer;
}

.tk-range-checkbox input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--primary);
}

.tk-record-and-pacing {
  display: grid;
  gap: 9px;
  margin: 0 12px 12px;
  padding-top: 10px;
  border-top: 1px solid var(--theme-border);
}

.tk-record-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 7px 10px;
}

.tk-record-row .tk-inline-field.path {
  flex: 0 1 380px;
  min-width: min(100%, 270px);
  max-width: 420px;
}

.tk-record-reprocess {
  margin: 0 0 7px;
  color: var(--theme-text-strong);
}

.tk-pacing-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 10px;
}

.tk-pacing-copy strong {
  color: var(--theme-text-strong);
  font-size: 12px;
}

.tk-pacing-copy span {
  color: var(--theme-text-muted);
  font-size: 11px;
}

.tk-pacing-fields {
  gap: 7px 10px;
}

.tk-pacing-fields .tk-inline-field.tiny {
  flex-basis: 126px;
  min-width: 116px;
  max-width: 138px;
}

.tk-pacing-fields .tk-inline-field.short {
  flex-basis: 148px;
  min-width: 138px;
  max-width: 160px;
}

.tk-fully-managed-error,
.tk-fully-managed-empty {
  border: 1px solid var(--theme-danger-border);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 12px;
  line-height: 1.45;
}

.tk-fully-managed-empty {
  margin: 0 12px 10px;
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.tk-module-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-height: 54px;
  padding: 10px 12px;
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.tk-fully-managed-section-head + .tk-module-row {
  border-top: 0;
}

.tk-module-row.enabled {
  background: color-mix(in srgb, var(--theme-active) 58%, var(--theme-surface));
}

.tk-module-row-choice {
  grid-template-columns: minmax(0, 1fr);
}

.tk-module-body,
.tk-module-row > div {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.tk-module-row strong {
  color: var(--theme-text-strong);
  font-size: 13px;
}

.tk-module-row p {
  margin: 0;
  color: var(--theme-text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.tk-inline-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px 9px;
}

.tk-fulfillment-options {
  display: inline-flex;
  align-items: stretch;
  width: fit-content;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--theme-border-strong);
}

.tk-fulfillment-options legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tk-fulfillment-options label {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  cursor: pointer;
  color: var(--theme-text-muted);
  font-size: 12px;
  font-weight: 700;
  border-left: 1px solid var(--theme-border-strong);
}

.tk-fulfillment-options label:first-of-type {
  border-left: 0;
}

.tk-fulfillment-options label.active {
  color: var(--primary-strong);
  background: var(--theme-active);
}

.tk-fulfillment-options input {
  width: 14px;
  height: 14px;
  margin: 0 6px 0 0;
  accent-color: var(--primary);
}

.tk-inline-field {
  display: grid;
  flex: 0 1 176px;
  min-width: 150px;
  max-width: 220px;
  gap: 5px;
}

.tk-inline-field.wide {
  flex: 0 1 300px;
  min-width: min(100%, 235px);
  max-width: 360px;
}

.tk-inline-field.short-wide {
  flex: 0 1 270px;
  min-width: min(100%, 205px);
  max-width: 320px;
}

.tk-inline-field.path {
  flex: 0 1 320px;
  min-width: min(100%, 250px);
  max-width: 380px;
}

.tk-inline-field.short {
  flex: 0 1 142px;
  min-width: 120px;
  max-width: 160px;
}

.tk-inline-field.tiny {
  flex: 0 1 104px;
  min-width: 92px;
  max-width: 116px;
}

.tk-inline-field span {
  color: var(--theme-text-strong);
  font-size: 11px;
  font-weight: 700;
}

.tk-module-switch {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 18px;
  margin-top: 1px;
  cursor: pointer;
}

.tk-module-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tk-module-switch > span {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--theme-border-strong);
  transition: background 140ms ease;
}

.tk-module-switch > span::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--theme-on-accent);
  content: '';
  transition: transform 140ms ease;
}

.tk-module-switch input:checked + span {
  background: var(--primary);
}

.tk-module-switch input:checked + span::after {
  transform: translateX(14px);
}

.tk-module-switch input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tk-module-static-mark {
  display: grid;
  width: 32px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: var(--theme-border);
  color: var(--theme-text-muted);
  font-size: 10px;
  font-weight: 800;
}

.tk-module-row-static {
  background: var(--theme-surface);
}

.tk-path-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 7px;
}

.tk-input-unit {
  display: flex;
  align-items: center;
  min-width: 0;
}

.tk-input-unit input {
  border-radius: 5px 0 0 5px;
}

.tk-input-unit b {
  display: grid;
  height: 32px;
  min-width: 42px;
  place-items: center;
  border: 1px solid var(--theme-border-strong);
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: var(--theme-surface-elevated);
  color: var(--theme-text-muted);
  font-size: 10px;
  font-weight: 700;
}

.tk-care-label-template-panel {
  display: grid;
  gap: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--theme-border);
}

.tk-care-label-category-row,
.tk-care-label-file-row,
.tk-qualification-file-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.tk-care-label-category-row .tk-inline-field,
.tk-care-label-file-row .tk-inline-field,
.tk-qualification-file-row .tk-inline-field {
  width: auto;
}

.tk-care-label-status {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  color: var(--theme-text-muted);
  font-size: 11px;
}

.field-invalid select,
.field-invalid input {
  border-color: var(--theme-danger-border) !important;
}

.field-invalid em,
.tk-module-row em,
.tk-care-label-status em {
  color: var(--theme-danger-text);
  font-size: 11px;
  font-style: normal;
}

.tk-fully-managed-final-action {
  position: sticky;
  z-index: 12;
  bottom: 8px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  border-color: var(--theme-border-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.tk-success-followup {
  display: grid;
  grid-template-columns: auto minmax(150px, 220px);
  align-items: center;
  gap: 3px 6px;
  color: var(--theme-text-strong);
  font-size: 11px;
  font-weight: 700;
}

.tk-success-followup input {
  width: 220px;
  max-width: 100%;
  height: 30px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  padding: 4px 7px;
  background: var(--theme-control);
  color: var(--theme-text-strong);
  font-size: 11px;
}

.tk-success-followup small {
  grid-column: 1 / -1;
  color: var(--theme-text-muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.25;
}

.tk-final-action-choice {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

.tk-final-action-choice legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.tk-final-action-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tk-final-action-choice span {
  display: block;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  padding: 6px 9px;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 11px;
  cursor: pointer;
}

.tk-final-action-choice .active span {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--theme-on-accent);
  font-weight: 800;
}

.tk-final-action-choice input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.tk-template-dialog-backdrop {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.42);
}

.tk-template-dialog {
  display: grid;
  width: min(440px, 100%);
  gap: 12px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 8px;
  padding: 14px;
  background: var(--theme-surface);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
}

.tk-template-dialog > div,
.tk-template-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tk-template-dialog > div strong {
  color: var(--theme-text-strong);
  font-size: 15px;
}

.tk-template-dialog > div button {
  border: 0;
  background: transparent;
  color: var(--theme-text-muted);
  font-size: 20px;
  cursor: pointer;
}

.tk-template-dialog label {
  display: grid;
  gap: 5px;
  color: var(--theme-text-strong);
  font-size: 12px;
  font-weight: 700;
}

.tk-template-dialog input {
  height: 34px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  padding: 5px 9px;
  background: var(--theme-control);
  color: var(--theme-text-strong);
}

.tk-template-dialog p,
.tk-template-dialog em {
  margin: 0;
  color: var(--theme-text-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}

.tk-template-dialog em {
  color: var(--theme-danger-text);
}

.tk-final-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
}

.tk-final-copy strong {
  flex: 0 0 auto;
  color: var(--theme-text-strong);
  font-size: 13px;
}

.tk-final-copy span {
  overflow: hidden;
  color: var(--theme-text-muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tk-help-page {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.tk-help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-border);
}

.tk-help-head > div > span {
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
}

.tk-help-head h2 {
  margin: 3px 0 4px;
  color: var(--theme-text-strong);
  font-size: 19px;
}

.tk-help-head p,
.tk-help-grid p,
.tk-help-grid li {
  margin: 0;
  color: var(--theme-text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.tk-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tk-help-grid article {
  min-width: 0;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  padding: 11px;
  background: var(--theme-surface-raised);
}

.tk-help-grid strong {
  display: block;
  margin-bottom: 5px;
  color: var(--theme-text-strong);
  font-size: 13px;
}

.tk-help-grid ul,
.tk-help-grid ol {
  margin: 0;
  padding-left: 18px;
}

.tk-help-resource {
  justify-self: start;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.tk-help-resource:hover {
  text-decoration: underline;
}

@container (max-width: 900px) {
  .tk-fully-managed-target-grid,
  .tk-care-label-category-row {
    grid-template-columns: 1fr;
  }

  .tk-fully-managed-range-grid {
    grid-template-columns: minmax(240px, 1fr) 96px 160px;
  }

  .tk-fully-managed-section-head p {
    white-space: normal;
  }

  .tk-fully-managed-final-action,
  .tk-help-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .tk-final-copy {
    display: grid;
    gap: 2px;
  }

  .tk-final-copy span {
    white-space: normal;
  }

  .tk-final-buttons {
    justify-content: flex-start;
  }

  .tk-final-action-choice {
    justify-content: flex-start;
  }

  .tk-success-followup {
    grid-template-columns: auto minmax(150px, 220px);
    justify-content: start;
  }
}

@container (max-width: 640px) {
  .tk-fully-managed-section-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-fully-managed-section-head .tk-fully-managed-binding {
    justify-self: start;
  }

  .tk-fully-managed-range-grid,
  .tk-care-label-file-row,
  .tk-help-grid {
    grid-template-columns: 1fr;
  }

  .tk-fully-managed-statuses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tk-fully-managed-statuses span {
    min-width: 0;
  }

  .tk-range-divider {
    display: grid;
    gap: 2px;
  }

  .tk-inline-field,
  .tk-inline-field.wide,
  .tk-inline-field.short-wide,
  .tk-inline-field.path,
  .tk-inline-field.short,
  .tk-inline-field.tiny {
    flex-basis: 100%;
    min-width: 0;
    max-width: none;
  }


  .tk-template-strip {
    align-items: stretch;
  }

  .tk-template-select {
    flex-basis: 100% !important;
    max-width: none !important;
  }
}
.detail-gen-page {
  min-width: 0;
  color: #111827;
}

.detail-gen-shell {
  display: grid;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
  gap: 24px;
  min-width: 0;
  height: calc(100dvh - 86px);
}

.detail-gen-left-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border-right: 1px solid #dbe3ef;
  background: #ffffff;
  scrollbar-width: thin;
}

.detail-gen-left-scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 18px 14px;
  scrollbar-width: thin;
}

.detail-gen-left-footer {
  flex: 0 0 auto;
  padding: 12px 18px 18px;
  border-top: 1px solid #e5eaf2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #ffffff);
  box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.08);
}

.detail-gen-main-panel {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding: 20px 26px 46px 0;
  scrollbar-width: thin;
}

.detail-gen-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
}

.detail-gen-card h2,
.detail-gen-section-head h2,
.detail-gen-block-title h2 {
  margin: 0;
  color: #111827;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0;
}

.detail-gen-section-head,
.detail-gen-block-title,
.detail-gen-plan-head,
.detail-gen-dialog-head,
.detail-gen-top-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.detail-gen-section-head span,
.detail-gen-block-title p,
.detail-gen-top-actions p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
}

.detail-gen-upload-title-row,
.detail-gen-label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  column-gap: 0;
  row-gap: 4px;
}

.detail-gen-upload-title-row {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.detail-gen-label-row > .detail-gen-field-mark,
.detail-gen-upload-title-row > .detail-gen-field-mark {
  flex: 0 0 auto;
}

.detail-gen-label-row > .interactive-help-tip-anchor,
.detail-gen-upload-title-row > .interactive-help-tip-anchor {
  flex: 0 0 auto;
  margin-left: 10px;
}

.detail-gen-upload-card.has-required-error .detail-gen-dropzone {
  border-color: var(--theme-danger-border, #d92d20);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger-border, #d92d20) 24%, transparent);
}

.detail-gen-dropzone {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 116px;
  padding: 18px 14px;
  border: 2px dashed #b8c7df;
  border-radius: 10px;
  background: #f8fbff;
  color: #5267f6;
  cursor: pointer;
}

.detail-gen-dropzone strong {
  color: #111827;
  font-size: 15px;
}

.detail-gen-dropzone span {
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.detail-gen-upload-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.detail-gen-upload-empty-state {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px dashed #cfd9e8;
  border-radius: 8px;
  background: #f8fbff;
  color: #64748b;
}

.detail-gen-upload-empty-rail {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.detail-gen-upload-empty-rail span {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(82, 103, 246, 0.04);
}

.detail-gen-upload-empty-state p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.detail-gen-upload-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  color: #64748b;
  font-size: 12px;
}

.detail-gen-upload-summary button {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #ffffff;
  color: #3157d4;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-upload-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  min-width: 0;
  height: 72px;
  border: 1px solid #d7dfec;
  border-radius: 8px;
  background: #e2e8f0;
}

.detail-gen-upload-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f8fafc;
}

.detail-gen-upload-broken {
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 900;
}

.detail-gen-upload-thumb.is-broken .detail-gen-upload-broken {
  display: grid;
}

.detail-gen-upload-thumb figcaption {
  position: absolute;
  left: 4px;
  bottom: 4px;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.detail-gen-upload-thumb button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #ffffff;
  cursor: pointer;
}

.detail-gen-two-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-gen-field,
.detail-gen-two-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.detail-gen-field span,
.detail-gen-two-fields span {
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

.detail-gen-field input,
.detail-gen-field textarea,
.detail-gen-two-fields input,
.detail-gen-category-field input {
  width: 100%;
  border: 1px solid #d4deea;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.detail-gen-field input,
.detail-gen-two-fields input,
.detail-gen-category-field input {
  min-height: 42px;
  padding: 0 12px;
}

.detail-gen-field textarea {
  min-height: 108px;
  resize: vertical;
  padding: 11px 12px;
  line-height: 1.55;
}

.detail-gen-field input:focus,
.detail-gen-field textarea:focus,
.detail-gen-two-fields input:focus,
.detail-gen-category-field input:focus {
  border-color: #5267f6;
  box-shadow: 0 0 0 3px rgba(82, 103, 246, 0.11);
}

.detail-gen-field input::placeholder,
.detail-gen-field textarea::placeholder,
.detail-gen-two-fields input::placeholder {
  color: #74839a;
}

.detail-gen-field-mark {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 5px;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  vertical-align: 1px;
}

.detail-gen-field-mark.required {
  background: #fef2f2;
  color: #b42318;
}

.detail-gen-field-mark.optional {
  background: #f1f5f9;
  color: #475569;
}

.detail-gen-field-mark.default {
  background: #eef2ff;
  color: #3157d4;
}

.detail-gen-category-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.detail-gen-category-field button {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #cfdcff;
  border-radius: 8px;
  background: #eef4ff;
  color: #3157d4;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-compact-number input {
  max-width: 116px;
}

.detail-gen-count-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 116px));
  gap: 10px;
}

.detail-gen-count-field {
  display: grid;
  gap: 6px;
}

.detail-gen-count-range span {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.detail-gen-count-range input {
  min-height: 40px;
  width: 100%;
  border: 1px solid #d4deea;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: #334155;
  font: inherit;
  outline: none;
}

.detail-gen-count-range input:focus {
  border-color: #5267f6;
  box-shadow: 0 0 0 3px rgba(82, 103, 246, 0.11);
}

.detail-gen-option-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
  gap: 8px;
}

.detail-gen-option,
.detail-gen-soft-button,
.detail-gen-top-actions button,
.detail-gen-result-actions button,
.detail-gen-preview-actions button,
.detail-gen-tool-row button,
.detail-gen-history-row button,
.detail-gen-confirm-actions button,
.detail-gen-lock-box button {
  min-height: 36px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.detail-gen-option.selected {
  border-color: #91a4ff;
  background: #eef2ff;
  color: #3157d4;
}

.detail-gen-main-action,
.detail-gen-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: #5267f6;
  color: #ffffff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-main-action {
  width: 100%;
}

.detail-gen-error {
  margin: -2px 2px 0;
  color: #b42318;
  font-size: 13px;
  line-height: 1.45;
}

.detail-gen-footer-error {
  margin: 0 0 8px;
}

.detail-gen-validation-summary {
  margin: 0 0 8px;
}

.detail-gen-action-note {
  margin: 0 0 9px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.detail-gen-action-note a {
  margin-left: 6px;
  color: #3157d4;
  font-weight: 800;
  text-decoration: none;
}

.detail-gen-action-note a:hover,
.detail-gen-action-note a:focus-visible {
  text-decoration: underline;
}

.detail-gen-edit-instruction {
  display: grid;
  gap: 7px;
}

.detail-gen-edit-instruction > .detail-gen-label-row {
  color: #111827;
  font-size: 13px;
  font-weight: 800;
}

.detail-gen-top-actions {
  align-items: center;
  margin-bottom: 12px;
}

.detail-gen-top-actions h1 {
  margin: 0;
  color: #111827;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0;
}

.detail-gen-top-actions > div:last-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-gen-top-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 16px;
}

.detail-gen-top-actions button:nth-child(2) {
  border-color: #cfdcff;
  background: #eef4ff;
  color: #3157d4;
}

.detail-gen-hero-card {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 420px;
  padding: 22px 34px 18px;
  border: 1px solid #d4deea;
  border-radius: 12px;
  background: #ffffff;
}

.detail-gen-hero-card h1 {
  margin: 0;
  color: #111827;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0;
}

.detail-gen-showcase-frame {
  overflow: hidden;
  width: min(920px, 96%);
  height: 330px;
  border-radius: 10px;
  background: #ffffff;
}

.detail-gen-showcase-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-gen-carousel-dots {
  display: flex;
  gap: 10px;
}

.detail-gen-carousel-dots span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #dbe3ef;
}

.detail-gen-carousel-dots .active {
  background: #5267f6;
}

.detail-gen-history-section {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.detail-gen-history-grid,
.detail-gen-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.detail-gen-history-card,
.detail-gen-result-card {
  overflow: hidden;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
}

.detail-gen-sample-art,
.detail-gen-result-art,
.detail-gen-preview-art,
.detail-gen-edit-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  color: #111827;
  isolation: isolate;
}

.detail-gen-sample-art {
  height: 190px;
}

.detail-gen-sample-art img,
.detail-gen-history-page-cover img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-gen-sample-art span {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 6px 14px;
  border-radius: 6px;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.detail-gen-sample-art i,
.detail-gen-sample-art b,
.detail-gen-result-art::before,
.detail-gen-result-art::after,
.detail-gen-preview-art::before,
.detail-gen-preview-art::after,
.detail-gen-edit-art::before,
.detail-gen-edit-art::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.82);
}

.detail-gen-sample-art i {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  left: 28px;
  top: 52px;
}

.detail-gen-sample-art b {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  right: 22px;
  top: 30px;
}

.detail-gen-history-card > div:last-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}

.detail-gen-history-card strong {
  font-size: 14px;
}

.detail-gen-history-card button {
  border: 0;
  background: transparent;
  color: #3157d4;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-active-workspace {
  display: grid;
  gap: 14px;
}

.detail-gen-task-strip,
.detail-gen-plan-panel,
.detail-gen-results-panel {
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #ffffff;
}

.detail-gen-task-strip {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.detail-gen-task-strip span,
.detail-gen-plan-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 18px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #3157d4;
  font-size: 13px;
  font-weight: 900;
}

.detail-gen-task-strip strong {
  font-size: 15px;
}

.detail-gen-task-strip p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.detail-gen-task-strip button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-task-strip .detail-gen-start-images-button {
  border-color: #5267f6;
  background: #5267f6;
  color: #ffffff;
}

.detail-gen-plan-panel {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.detail-gen-plan-head {
  align-items: center;
}

.detail-gen-plan-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.detail-gen-plan-head h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0;
}

.detail-gen-plan-tags {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
}

.detail-gen-plan-tags span {
  min-height: 24px;
  padding: 0 10px;
  font-size: 12px;
}

.detail-gen-style-summary {
  display: grid;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #f8fbff;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.detail-gen-style-summary.is-editing {
  border-color: #91a4ff;
  background: #ffffff;
}

.detail-gen-style-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.detail-gen-style-summary-head > span {
  color: #111827;
  font-size: 12px;
  font-weight: 900;
}

.detail-gen-style-summary-head > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.detail-gen-style-summary button {
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid #c7d2fe;
  border-radius: 7px;
  background: #eef2ff;
  color: #3157d4;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-style-summary button.primary {
  border-color: #5267f6;
  background: #5267f6;
  color: #ffffff;
}

.detail-gen-style-summary textarea {
  width: 100%;
  min-height: 30px;
  max-height: 44px;
  overflow: auto;
  resize: vertical;
  border: 0;
  background: transparent;
  color: #475569;
  font: inherit;
  line-height: 1.55;
  outline: none;
}

.detail-gen-style-summary.is-editing textarea {
  min-height: 56px;
  max-height: 104px;
}

.detail-gen-style-summary textarea:disabled {
  resize: none;
  cursor: not-allowed;
}

.detail-gen-plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 7px;
  max-height: 210px;
  overflow: auto;
  padding-right: 2px;
}

.detail-gen-plan-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  padding: 8px 9px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
}

.detail-gen-plan-unit-edit {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #ffffff;
  color: #3157d4;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-plan-item-title {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.detail-gen-plan-item-title > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.detail-gen-plan-list.is-planning article {
  border-color: #dce6ff;
  background: #f8fbff;
}

.detail-gen-plan-list span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 22px;
  border-radius: 6px;
  background: #e9eefc;
  color: #3157d4;
  font-size: 12px;
  font-weight: 900;
}

.detail-gen-plan-list strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-gen-plan-item-title p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.detail-gen-plan-start-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  background: #f5f7ff;
}

.detail-gen-plan-start-bar p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.45;
}

.detail-gen-plan-start-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.detail-gen-plan-start-bar button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #5267f6;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-plan-start-bar button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.detail-gen-plan-start-bar .detail-gen-plan-secondary-button {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
}

.detail-gen-recovery-bar {
  border-color: #f4c56a;
  background: #fff9eb;
}

.detail-gen-planning-failed {
  border-color: #f4c56a;
  background: #fffaf0;
}

.detail-gen-results-panel {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.detail-gen-planning-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 240px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  text-align: center;
}

.detail-gen-planning-empty strong {
  color: #1f2a44;
  font-size: 18px;
}

.detail-gen-planning-empty p {
  margin: 0;
}

.detail-gen-result-art {
  width: 100%;
  height: 180px;
  min-height: 180px;
  padding: 12px;
  cursor: pointer;
}

.detail-gen-result-art:disabled {
  cursor: default;
}

.detail-gen-result-art strong {
  z-index: 2;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  font-size: 16px;
}

.detail-gen-result-art img,
.detail-gen-preview-art img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f8fafc;
}

.detail-gen-result-art:has(img)::before,
.detail-gen-result-art:has(img)::after,
.detail-gen-preview-art:has(img)::before,
.detail-gen-preview-art:has(img)::after {
  display: none;
}

.detail-gen-result-art em {
  z-index: 2;
  margin-top: 58px;
  padding: 18px 34px;
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.88);
  color: #64748b;
  font-style: normal;
  font-weight: 900;
}

.detail-gen-order {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  min-width: 40px;
  padding: 5px 9px;
  border-radius: 6px;
  background: #111827;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.detail-gen-status {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}

.detail-gen-status.done {
  background: #dcfce7;
  color: #166534;
}

.detail-gen-status.running {
  background: #eef2ff;
  color: #3157d4;
}

.detail-gen-status.waiting {
  background: #f8fafc;
  color: #64748b;
}

.detail-gen-progress {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  height: 10px;
  border-radius: 999px;
  background: #e0e7ff;
}

.detail-gen-progress b {
  display: block;
  width: 66%;
  height: 100%;
  border-radius: inherit;
  background: #5267f6;
}

.detail-gen-result-actions {
  display: flex;
  gap: 5px;
  padding: 7px;
}

.detail-gen-result-actions button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
}

.detail-gen-result-actions .detail-gen-icon-danger-button {
  flex: 0 0 28px;
  width: 28px;
  padding: 0;
  border-color: #fecaca;
  color: #b91c1c;
}

.detail-gen-result-actions button:disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.detail-gen-danger-button {
  border-color: #fecaca !important;
  background: #fef2f2 !important;
  color: #b91c1c !important;
}

.tone-warm { background: linear-gradient(135deg, #f7e7d0, #fff7ed); }
.tone-mint { background: linear-gradient(135deg, #dff3ee, #f0fdfa); }
.tone-blue { background: linear-gradient(135deg, #e9f2ff, #eff6ff); }
.tone-violet { background: linear-gradient(135deg, #f3e8ff, #faf5ff); }
.tone-rose { background: linear-gradient(135deg, #fee2e2, #fff1f2); }
.tone-amber { background: linear-gradient(135deg, #fef3c7, #fff7ed); }
.tone-sky { background: linear-gradient(135deg, #e0f2fe, #f8fafc); }
.tone-green { background: linear-gradient(135deg, #dcfce7, #f8fafc); }
.tone-pink { background: linear-gradient(135deg, #fae8ff, #f8fafc); }
.tone-purple { background: linear-gradient(135deg, #ede9fe, #f8fafc); }
.tone-teal { background: linear-gradient(135deg, #ccfbf1, #f8fafc); }
.tone-orange { background: linear-gradient(135deg, #ffedd5, #f8fafc); }

.detail-gen-result-art::before,
.detail-gen-preview-art::before,
.detail-gen-edit-art::before {
  right: 24px;
  bottom: 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.detail-gen-result-art::after,
.detail-gen-preview-art::after,
.detail-gen-edit-art::after {
  left: 28px;
  bottom: 44px;
  width: 54%;
  height: 4px;
  border-radius: 999px;
}

.detail-gen-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.52);
}

.detail-gen-preview-dialog,
.detail-gen-edit-dialog,
.detail-gen-history-dialog,
.detail-gen-plan-edit-dialog,
.detail-gen-plan-unit-dialog,
.detail-gen-confirm-dialog {
  width: min(1080px, 96vw);
  max-height: min(900px, 92dvh);
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.25);
}

.detail-gen-preview-dialog {
  display: flex;
  flex-direction: column;
  width: min(960px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
}

.detail-gen-dialog-head {
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid #e5eaf2;
  background: #ffffff;
}

.detail-gen-dialog-head strong {
  display: block;
  font-size: 18px;
}

.detail-gen-dialog-head span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}

.detail-gen-dialog-head button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
}

.detail-gen-preview-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding: 14px 18px;
  background: #f8fafc;
}

.detail-gen-preview-art {
  min-height: min(720px, 76dvh);
  margin: 0;
  border-radius: 10px;
  background: #ffffff;
}

.detail-gen-preview-art:has(img) {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  overflow: visible;
  background: transparent;
}

.detail-gen-preview-art:has(img) img {
  position: static;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  border-radius: 8px;
  object-fit: contain;
}

.detail-gen-preview-art strong,
.detail-gen-edit-art strong {
  z-index: 2;
  padding: 16px 22px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  font-size: 24px;
}

.detail-gen-preview-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 16px;
  border-top: 1px solid #e5eaf2;
  background: #ffffff;
}

.detail-gen-preview-actions button {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  gap: 5px;
  padding: 0 10px;
  font-size: 12px;
}

.detail-gen-edit-dialog {
  width: min(1240px, 96vw);
}

.detail-gen-plan-edit-dialog {
  width: min(1120px, 96vw);
}

.detail-gen-plan-unit-dialog {
  width: min(780px, 96vw);
}

.detail-gen-plan-edit-body {
  display: grid;
  gap: 14px;
  max-height: calc(92dvh - 138px);
  overflow: auto;
  padding: 18px;
}

.detail-gen-plan-edit-list {
  display: grid;
  gap: 12px;
}

.detail-gen-plan-edit-list article {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #f8fbff;
}

.detail-gen-plan-edit-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) minmax(220px, 1.15fr);
  gap: 10px;
}

.detail-gen-plan-edit-field {
  display: grid;
  gap: 6px;
}

.detail-gen-plan-edit-list span,
.detail-gen-plan-edit-row span {
  color: #111827;
  font-size: 12px;
  font-weight: 900;
}

.detail-gen-plan-style-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.detail-gen-plan-style-field > span > span,
.detail-gen-plan-edit-field > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.detail-gen-plan-style-field > span button {
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #c7d2fe;
  border-radius: 7px;
  background: #eef2ff;
  color: #3157d4;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-help-tip {
  display: inline-grid !important;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}

.detail-gen-help-tip:hover,
.detail-gen-help-tip:focus {
  border-color: #91a4ff;
  color: #3157d4 !important;
  outline: none;
}

.detail-gen-plan-edit-list input,
.detail-gen-plan-edit-list textarea,
.detail-gen-plan-edit-row input {
  width: 100%;
  border: 1px solid #d4deea;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font: inherit;
  outline: none;
}

.detail-gen-plan-edit-list input,
.detail-gen-plan-edit-row input {
  min-height: 40px;
  padding: 0 10px;
}

.detail-gen-plan-edit-list textarea {
  min-height: 74px;
  resize: vertical;
  padding: 10px;
  line-height: 1.5;
}

.detail-gen-plan-style-field textarea:disabled {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

.detail-gen-plan-edit-list input:focus,
.detail-gen-plan-edit-list textarea:focus,
.detail-gen-plan-edit-row input:focus {
  border-color: #5267f6;
  box-shadow: 0 0 0 3px rgba(82, 103, 246, 0.11);
}

.detail-gen-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid #e5eaf2;
}

.detail-gen-dialog-actions button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-dialog-actions button.primary {
  border-color: #5267f6;
  background: #5267f6;
  color: #ffffff;
}

.detail-gen-edit-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 18px;
  max-height: calc(92dvh - 70px);
  overflow: auto;
  padding: 18px;
}

.detail-gen-canvas-area,
.detail-gen-edit-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.detail-gen-edit-art {
  position: relative;
  min-height: 520px;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: #f8fafc;
  cursor: crosshair;
  touch-action: none;
}

.detail-gen-edit-art img,
.detail-gen-edit-art canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.detail-gen-edit-art img {
  z-index: 1;
  object-fit: cover;
}

.detail-gen-edit-art canvas {
  z-index: 2;
  pointer-events: none;
}

.detail-gen-edit-art canvas + canvas {
  z-index: 3;
}

.detail-gen-edit-art:has(img)::before,
.detail-gen-edit-art:has(img)::after {
  display: none;
}

.detail-gen-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.detail-gen-tool-row button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
}

.detail-gen-tool-row button.selected {
  border-color: #5267f6;
  background: #eef2ff;
  color: #3157d4;
}

.detail-gen-edit-side {
  align-content: start;
}

.detail-gen-canvas-settings {
  display: grid;
  grid-template-columns: minmax(160px, 0.75fr) minmax(180px, 1fr);
  gap: 10px;
}

.detail-gen-canvas-control {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.detail-gen-canvas-settings span {
  color: #475569;
  font-size: 13px;
  font-weight: 900;
}

.detail-gen-canvas-settings input[type='text'],
.detail-gen-canvas-settings input:not([type]) {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid #d4deea;
  border-radius: 8px;
  font: inherit;
}

.detail-gen-canvas-settings input[type='range'] {
  width: 100%;
}

.detail-gen-lock-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #f8fbff;
}

.detail-gen-lock-box span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}

.detail-gen-lock-box button {
  padding: 0 14px;
}

.detail-gen-edit-side textarea {
  min-height: 210px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #d4deea;
  border-radius: 10px;
  color: #334155;
  font: inherit;
  line-height: 1.55;
}

.detail-gen-edit-side textarea:read-only {
  background: #f8fafc;
  color: #475569;
}

.detail-gen-edit-side .detail-gen-style-textarea {
  min-height: 112px;
}

.detail-gen-edit-error {
  display: block;
  padding: 10px 12px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 800;
}

.detail-gen-edit-side p,
.detail-gen-dialog-note {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.detail-gen-history-dialog {
  width: min(760px, 94vw);
}

.detail-gen-confirm-dialog {
  width: min(460px, 92vw);
}

.detail-gen-confirm-body {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.detail-gen-confirm-body p {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
}

.detail-gen-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.detail-gen-confirm-actions button {
  padding: 0 16px;
}

.detail-gen-history-list {
  display: grid;
  gap: 10px;
  max-height: 64dvh;
  overflow: auto;
  padding: 18px;
}

.detail-gen-history-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
}

.detail-gen-history-mini {
  height: 54px;
  border-radius: 8px;
}

.detail-gen-history-row strong {
  display: block;
  font-size: 14px;
}

.detail-gen-history-row span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
}

.detail-gen-history-row button {
  padding: 0 13px;
}

.detail-gen-dialog-note {
  padding: 16px 18px 0;
}

.detail-gen-history-page {
  display: grid;
  gap: 16px;
}

.detail-gen-history-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
}

.detail-gen-history-page-head.compact {
  padding: 12px 14px;
}

.detail-gen-history-page-head h2 {
  margin: 0;
  font-size: 18px;
}

.detail-gen-history-page-head p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
}

.detail-gen-history-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.detail-gen-history-page-head button,
.detail-gen-table-actions button,
.detail-gen-recycle-actions button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-table-actions button.danger,
.detail-gen-recycle-actions button.danger {
  border-color: #fecaca;
  background: #fff7f7;
  color: #b91c1c;
}

.detail-gen-history-source-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: -16px;
  padding: 0 10px;
  overflow-x: auto;
}

.detail-gen-history-source-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid #dbe3ef;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #f4f7fb;
  color: #475569;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.detail-gen-history-source-tabs button.active {
  position: relative;
  z-index: 1;
  background: #ffffff;
  color: #111827;
}

.detail-gen-history-source-tabs b {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e8eef8;
  color: #475569;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
}

.detail-gen-history-source-tabs button.active b {
  background: #dcfce7;
  color: #166534;
}

.detail-gen-history-table-wrap {
  overflow-x: auto;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
}

.detail-gen-history-table {
  width: 100%;
  min-width: 1060px;
  border-collapse: collapse;
  font-size: 12px;
}

.detail-gen-history-table th,
.detail-gen-history-table td {
  max-width: 170px;
  padding: 9px 8px;
  border-bottom: 1px solid #edf2f7;
  color: #475569;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-gen-history-table th {
  background: #f8fafc;
  color: #1f2a44;
  font-weight: 900;
}

.detail-gen-history-table td strong {
  color: #111827;
}

.detail-gen-table-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-gen-history-copy-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
}

.detail-gen-history-copy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.detail-gen-history-copy-grid span {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  color: #64748b;
  font-size: 11px;
}

.detail-gen-history-copy-grid b {
  color: #111827;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-gen-history-copy-text {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: #f8fbff;
}

.detail-gen-history-copy-text strong {
  font-size: 12px;
}

.detail-gen-history-copy-text p {
  max-height: 76px;
  overflow: auto;
  margin: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.55;
}

.detail-gen-history-module-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-gen-history-module-list span {
  padding: 5px 8px;
  border: 1px solid #dbe3ef;
  border-radius: 7px;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.history-detail-grid {
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 10px;
}

.history-detail-grid .detail-gen-result-actions {
  gap: 4px;
  padding: 6px;
}

.history-detail-grid .detail-gen-result-actions button {
  min-height: 27px;
  padding: 0 5px;
  font-size: 11px;
}

.history-detail-grid .detail-gen-result-actions .detail-gen-icon-danger-button {
  flex-basis: 27px;
  width: 27px;
}

.detail-gen-block-title.compact h2 {
  font-size: 17px;
}

.detail-gen-recycle-page {
  display: grid;
  gap: 14px;
}

.detail-gen-recycle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.detail-gen-recycle-card {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
}

.detail-gen-recycle-thumb {
  position: relative;
  display: grid;
  place-items: center;
  height: 180px;
  overflow: hidden;
  border: 1px solid #edf2f7;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
}

.detail-gen-recycle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-gen-recycle-thumb span {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 7px;
  border-radius: 6px;
  background: rgba(17, 24, 39, 0.88);
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
}

.detail-gen-recycle-card strong {
  display: block;
  color: #111827;
  font-size: 13px;
}

.detail-gen-recycle-card span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 11px;
}

.detail-gen-recycle-actions {
  display: flex;
  gap: 7px;
}

.detail-gen-recycle-actions button {
  flex: 1;
}

.detail-gen-recycle-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.detail-gen-recycle-preview-grid figure {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 8px;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  background: #ffffff;
}

.detail-gen-recycle-preview-grid img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: #f8fafc;
}

.detail-gen-recycle-preview-grid figcaption {
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.detail-gen-history-page-list {
  display: grid;
  gap: 12px;
}

.detail-gen-history-page-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #ffffff;
}

.detail-gen-history-page-cover {
  position: relative;
  height: 82px;
  overflow: hidden;
  border-radius: 8px;
}

.detail-gen-history-page-cover span {
  z-index: 2;
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(17, 24, 39, 0.9);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.detail-gen-history-page-card strong {
  display: block;
  font-size: 15px;
}

.detail-gen-history-page-card span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
}

.detail-gen-history-empty {
  margin: 0;
  padding: 28px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  color: #64748b;
  text-align: center;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .detail-gen-shell {
    grid-template-columns: 1fr;
    height: auto;
  }

  .detail-gen-left-panel,
  .detail-gen-main-panel {
    height: auto;
    overflow: visible;
    padding-right: 18px;
    border-right: 0;
  }

  .detail-gen-left-panel {
    padding: 0;
  }

  .detail-gen-left-scroll {
    overflow: visible;
    padding: 18px;
  }

  .detail-gen-left-footer {
    position: sticky;
    bottom: 0;
    z-index: 12;
  }

  .detail-gen-history-grid,
  .detail-gen-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-gen-history-copy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-gen-plan-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .detail-gen-top-actions,
  .detail-gen-task-strip,
  .detail-gen-edit-body {
    grid-template-columns: 1fr;
  }

  .detail-gen-top-actions,
  .detail-gen-section-head,
  .detail-gen-block-title,
  .detail-gen-plan-head {
    display: grid;
  }

  .detail-gen-plan-head-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .detail-gen-plan-start-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .detail-gen-plan-start-actions {
    width: 100%;
  }

  .detail-gen-plan-start-actions button {
    flex: 1 1 0;
  }

  .detail-gen-two-fields,
  .detail-gen-category-field,
  .detail-gen-history-grid,
  .detail-gen-result-grid,
  .detail-gen-plan-list,
  .detail-gen-history-copy-grid,
  .detail-gen-recycle-grid {
    grid-template-columns: 1fr;
  }

  .detail-gen-upload-empty-state {
    align-items: flex-start;
    flex-direction: column;
  }

  .detail-gen-showcase-frame {
    width: 100%;
    height: 260px;
  }

  .detail-gen-hero-card {
    padding: 24px 18px;
  }

  .detail-gen-history-row {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .detail-gen-history-page-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .detail-gen-history-page-head,
  .detail-gen-history-head-actions {
    display: grid;
    width: 100%;
  }
}

/* 深色主题仅覆盖界面容器，图片与画布内容保持原始颜色。 */
html[data-theme="dark"] .detail-gen-page {
  color: var(--theme-text, #edf7f7);
}

html[data-theme="dark"] .detail-gen-left-panel {
  border-color: var(--theme-border, #314547);
  background: var(--theme-surface, #151f20);
}

html[data-theme="dark"] .detail-gen-left-footer {
  border-color: var(--theme-border, #314547);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--theme-surface-raised, #1b2728) 92%, transparent),
    var(--theme-surface, #151f20)
  );
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .detail-gen-main-panel,
html[data-theme="dark"] .detail-gen-preview-scroll {
  background: var(--theme-canvas, #0f1718);
}

html[data-theme="dark"] .detail-gen-card,
html[data-theme="dark"] .detail-gen-hero-card,
html[data-theme="dark"] .detail-gen-history-card,
html[data-theme="dark"] .detail-gen-result-card,
html[data-theme="dark"] .detail-gen-task-strip,
html[data-theme="dark"] .detail-gen-plan-panel,
html[data-theme="dark"] .detail-gen-results-panel {
  border-color: var(--theme-border, #314547);
  background: var(--theme-surface-raised, #1b2728);
}

html[data-theme="dark"] .detail-gen-card h2,
html[data-theme="dark"] .detail-gen-section-head h2,
html[data-theme="dark"] .detail-gen-block-title h2,
html[data-theme="dark"] .detail-gen-top-actions h1,
html[data-theme="dark"] .detail-gen-hero-card h1,
html[data-theme="dark"] .detail-gen-dropzone strong,
html[data-theme="dark"] .detail-gen-style-summary-head > span,
html[data-theme="dark"] .detail-gen-plan-edit-list span,
html[data-theme="dark"] .detail-gen-plan-edit-row span,
html[data-theme="dark"] .detail-gen-planning-empty strong {
  color: var(--theme-text, #edf7f7);
}

html[data-theme="dark"] .detail-gen-section-head span,
html[data-theme="dark"] .detail-gen-block-title p,
html[data-theme="dark"] .detail-gen-top-actions p,
html[data-theme="dark"] .detail-gen-dropzone span,
html[data-theme="dark"] .detail-gen-upload-empty-state,
html[data-theme="dark"] .detail-gen-upload-empty-state p,
html[data-theme="dark"] .detail-gen-upload-summary,
html[data-theme="dark"] .detail-gen-task-strip p,
html[data-theme="dark"] .detail-gen-style-summary,
html[data-theme="dark"] .detail-gen-plan-item-title p,
html[data-theme="dark"] .detail-gen-plan-start-bar p,
html[data-theme="dark"] .detail-gen-planning-empty,
html[data-theme="dark"] .detail-gen-dialog-head span,
html[data-theme="dark"] .detail-gen-lock-box span,
html[data-theme="dark"] .detail-gen-edit-side p,
html[data-theme="dark"] .detail-gen-dialog-note {
  color: var(--theme-text-muted, #9eb0b2);
}

html[data-theme="dark"] .detail-gen-dropzone,
html[data-theme="dark"] .detail-gen-upload-empty-state,
html[data-theme="dark"] .detail-gen-style-summary,
html[data-theme="dark"] .detail-gen-plan-list.is-planning article,
html[data-theme="dark"] .detail-gen-plan-start-bar,
html[data-theme="dark"] .detail-gen-planning-empty,
html[data-theme="dark"] .detail-gen-plan-edit-list article,
html[data-theme="dark"] .detail-gen-lock-box {
  border-color: var(--theme-border, #314547);
  background: var(--theme-surface-elevated, #202d2e);
}

html[data-theme="dark"] .detail-gen-upload-empty-rail span,
html[data-theme="dark"] .detail-gen-upload-summary button,
html[data-theme="dark"] .detail-gen-option,
html[data-theme="dark"] .detail-gen-soft-button,
html[data-theme="dark"] .detail-gen-top-actions button,
html[data-theme="dark"] .detail-gen-result-actions button,
html[data-theme="dark"] .detail-gen-preview-actions button,
html[data-theme="dark"] .detail-gen-tool-row button,
html[data-theme="dark"] .detail-gen-history-row button,
html[data-theme="dark"] .detail-gen-confirm-actions button,
html[data-theme="dark"] .detail-gen-lock-box button,
html[data-theme="dark"] .detail-gen-task-strip button,
html[data-theme="dark"] .detail-gen-plan-unit-edit,
html[data-theme="dark"] .detail-gen-dialog-head button,
html[data-theme="dark"] .detail-gen-dialog-actions button,
html[data-theme="dark"] .detail-gen-help-tip {
  border-color: var(--theme-border, #314547);
  background: var(--theme-control, #132021);
  color: var(--theme-text, #edf7f7);
}

html[data-theme="dark"] .detail-gen-field span,
html[data-theme="dark"] .detail-gen-two-fields span,
html[data-theme="dark"] .detail-gen-count-range span,
html[data-theme="dark"] .detail-gen-canvas-settings span {
  color: var(--theme-text, #edf7f7);
}

html[data-theme="dark"] .detail-gen-action-note {
  color: var(--theme-text-muted, #9eb0b2);
}

html[data-theme="dark"] .detail-gen-action-note a {
  color: var(--theme-accent, #6fe3de);
}

html[data-theme="dark"] .detail-gen-edit-instruction > .detail-gen-label-row {
  color: var(--theme-text, #edf7f7);
}

html[data-theme="dark"] .detail-gen-field input,
html[data-theme="dark"] .detail-gen-field textarea,
html[data-theme="dark"] .detail-gen-two-fields input,
html[data-theme="dark"] .detail-gen-category-field input,
html[data-theme="dark"] .detail-gen-count-range input,
html[data-theme="dark"] .detail-gen-plan-edit-list input,
html[data-theme="dark"] .detail-gen-plan-edit-list textarea,
html[data-theme="dark"] .detail-gen-plan-edit-row input,
html[data-theme="dark"] .detail-gen-canvas-settings input[type='text'],
html[data-theme="dark"] .detail-gen-canvas-settings input:not([type]),
html[data-theme="dark"] .detail-gen-edit-side textarea {
  border-color: var(--theme-border, #314547);
  background: var(--theme-control, #132021);
  color: var(--theme-text, #edf7f7);
}

html[data-theme="dark"] .detail-gen-field input::placeholder,
html[data-theme="dark"] .detail-gen-field textarea::placeholder,
html[data-theme="dark"] .detail-gen-two-fields input::placeholder {
  color: var(--theme-text-muted, #9eb0b2);
}

html[data-theme="dark"] .detail-gen-field-mark.optional,
html[data-theme="dark"] .detail-gen-field-mark.default,
html[data-theme="dark"] .detail-gen-option.selected,
html[data-theme="dark"] .detail-gen-top-actions button:nth-child(2),
html[data-theme="dark"] .detail-gen-task-strip span,
html[data-theme="dark"] .detail-gen-plan-tags span,
html[data-theme="dark"] .detail-gen-style-summary button,
html[data-theme="dark"] .detail-gen-plan-style-field > span button,
html[data-theme="dark"] .detail-gen-tool-row button.selected,
html[data-theme="dark"] .detail-gen-status.running {
  border-color: color-mix(in srgb, var(--theme-accent, #38c7c2) 52%, var(--theme-border, #314547));
  background: var(--theme-accent-soft, #183c3b);
  color: var(--theme-accent, #6fe3de);
}

html[data-theme="dark"] .detail-gen-showcase-frame,
html[data-theme="dark"] .detail-gen-upload-thumb,
html[data-theme="dark"] .detail-gen-edit-art {
  background: var(--theme-control, #132021);
}

html[data-theme="dark"] .detail-gen-style-summary.is-editing,
html[data-theme="dark"] .detail-gen-plan-list article,
html[data-theme="dark"] .detail-gen-plan-start-bar .detail-gen-plan-secondary-button {
  border-color: var(--theme-border, #314547);
  background: var(--theme-surface-raised, #1b2728);
}

html[data-theme="dark"] .detail-gen-recovery-bar,
html[data-theme="dark"] .detail-gen-planning-failed {
  border-color: #7d6434;
  background: #302819;
}

html[data-theme="dark"] .detail-gen-preview-dialog,
html[data-theme="dark"] .detail-gen-edit-dialog,
html[data-theme="dark"] .detail-gen-history-dialog,
html[data-theme="dark"] .detail-gen-plan-edit-dialog,
html[data-theme="dark"] .detail-gen-plan-unit-dialog,
html[data-theme="dark"] .detail-gen-confirm-dialog {
  border: 1px solid var(--theme-border, #314547);
  background: var(--theme-surface-raised, #1b2728);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

html[data-theme="dark"] .detail-gen-dialog-head,
html[data-theme="dark"] .detail-gen-preview-actions {
  border-color: var(--theme-border, #314547);
  background: var(--theme-surface-raised, #1b2728);
}

html[data-theme="dark"] .detail-gen-preview-art:not(:has(img)) {
  background: var(--theme-surface-elevated, #202d2e);
}

html[data-theme="dark"] .detail-gen-preview-art strong,
html[data-theme="dark"] .detail-gen-edit-art strong,
html[data-theme="dark"] .detail-gen-result-art strong {
  background: rgba(19, 32, 33, 0.9);
  color: var(--theme-text, #edf7f7);
}

html[data-theme="dark"] .detail-gen-plan-style-field textarea:disabled,
html[data-theme="dark"] .detail-gen-edit-side textarea:read-only {
  background: var(--theme-surface-elevated, #202d2e);
  color: var(--theme-text-muted, #9eb0b2);
}
.online-image-page {
  display: grid;
  gap: 14px;
  min-width: 0;
  container-name: online-image-workbench;
  container-type: inline-size;
}

.online-image-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--theme-success-text) 13%, transparent), transparent 28%),
    linear-gradient(135deg, var(--theme-surface) 0%, var(--theme-active) 68%, var(--theme-info) 100%);
  box-shadow: var(--theme-shadow);
}

.online-image-hero h1 {
  margin: 4px 0 7px;
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: 0;
}

.online-image-hero p {
  max-width: 920px;
  margin: 0;
  color: var(--theme-muted);
  line-height: 1.62;
}

.online-image-hero-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.online-image-hero-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.page-eyebrow {
  color: var(--theme-success-text);
  font-size: 13px;
  font-weight: 800;
}

.online-image-mode-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: var(--theme-surface);
}

.online-image-mode-section.has-error {
  border-color: var(--theme-danger-text);
}

.online-image-mode-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.online-image-mode-heading h2 {
  margin: 0 0 3px;
  color: var(--theme-text-strong);
  font-size: 16px;
}

.online-image-mode-heading p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.5;
}

.online-image-mode-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}

.online-image-mode-card {
  display: grid;
  flex: 1 1 280px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  min-width: 0;
  min-height: 76px;
  padding: 11px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.online-image-mode-card:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-hover);
  transform: translateY(-1px);
}

.online-image-mode-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-success-text) 24%, transparent);
  outline-offset: 2px;
}

.online-image-mode-card.is-active {
  border-color: var(--theme-success-text);
  background: var(--theme-active);
}

.online-image-mode-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--theme-control);
  color: var(--theme-muted);
}

.online-image-mode-card.is-active .online-image-mode-icon {
  background: var(--theme-success-text);
  color: var(--theme-on-accent);
}

.online-image-mode-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.online-image-mode-copy strong {
  color: var(--theme-text-strong);
  font-size: 15px;
  line-height: 1.3;
}

.online-image-mode-copy small {
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
  text-wrap: pretty;
}

.online-image-mode-card em {
  color: var(--theme-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.online-image-mode-card.is-active em {
  color: var(--theme-success-text);
}

.online-image-mode-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 8px;
  color: var(--theme-muted);
  background: var(--theme-control);
}

.online-image-layout {
  display: grid;
  grid-template-columns: minmax(390px, 430px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.online-image-left {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.online-image-panel,
.online-image-result-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

.online-image-panel {
  overflow-y: auto;
  max-height: calc(100vh - 118px);
}

.online-image-result-panel {
  min-height: 646px;
}

.online-image-page .panel-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.online-image-page .panel-title-row h2 {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.25;
}

.online-image-page .panel-title-row p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.5;
}

.online-image-page .result-title-row {
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--theme-border);
}

.online-image-field {
  display: grid;
  gap: 7px;
}

.online-image-field > span {
  color: var(--theme-text-strong);
  font-size: 14px;
  font-weight: 800;
}

.online-image-label-row {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.online-image-prompt-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.online-image-agent-prompt-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--theme-success-border);
  border-radius: 7px;
  background: var(--theme-success);
  color: var(--theme-success-text);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.online-image-agent-prompt-button:hover {
  border-color: var(--theme-success-text);
  background: var(--theme-active);
}

.online-image-agent-prompt-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-success-text) 24%, transparent);
  outline-offset: 2px;
}

.online-image-agent-prompt-button svg {
  flex: 0 0 auto;
}

.online-image-upload-title {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.online-image-label-row .required-field-mark,
.online-image-upload-title .required-field-mark {
  margin-left: 0;
}

.online-image-field select,
.online-image-field input,
.online-image-field textarea {
  width: 100%;
  border: 1px solid var(--theme-border-strong);
  border-radius: 8px;
  background: var(--theme-control);
  color: var(--theme-text);
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.online-image-field select {
  min-height: 38px;
  padding: 0 11px;
}

.online-image-field input {
  min-height: 38px;
  padding: 0 11px;
}

.online-image-field textarea {
  resize: vertical;
  min-height: 94px;
  padding: 10px 11px;
  line-height: 1.5;
}

.online-image-field select:focus,
.online-image-field input:focus,
.online-image-field textarea:focus {
  border-color: var(--theme-success-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-success-text) 12%, transparent);
}

.online-image-field.has-error select,
.online-image-field.has-error input,
.online-image-field.has-error textarea {
  border-color: var(--theme-danger-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger-text) 13%, transparent);
}

.online-image-field small {
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.5;
}

.online-image-field-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.online-image-field-meta small:first-child {
  min-width: 0;
}

.online-image-field-meta small:last-child {
  flex: 0 0 auto;
}

.online-image-label-row > small {
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 600;
}

.online-image-setting-group,
.online-image-output-settings {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--theme-border);
}

.online-image-setting-group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.online-image-setting-group-title strong {
  flex: 0 0 auto;
  color: var(--theme-text-strong);
  font-size: 14px;
}

.online-image-setting-group-title span {
  min-width: 0;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.4;
  text-align: right;
  text-wrap: pretty;
}

.online-image-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
}

.online-image-upload-box {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--theme-border);
  border-radius: 9px;
  background: var(--theme-surface-raised);
}

.online-image-upload-box.has-image {
  border-color: color-mix(in srgb, var(--theme-success-text) 45%, var(--theme-border));
  background: color-mix(in srgb, var(--theme-success-text) 5%, var(--theme-surface-raised));
}

.online-image-upload-box.has-error {
  border-color: var(--theme-danger-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger-text) 10%, transparent);
}

.online-image-upload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.online-image-upload-title-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.online-image-upload-head strong,
.online-image-reference-head strong {
  color: var(--theme-text-strong);
  font-size: 14px;
}

.online-image-inline-error {
  color: var(--theme-danger-text);
  font-size: 11px;
  line-height: 1.45;
}

.online-image-upload-head > span,
.online-image-reference-head > span {
  flex: 0 0 auto;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
}

.online-image-upload-dropzone,
.online-image-reference-dropzone {
  display: grid;
  place-items: center;
  gap: 5px;
  width: 100%;
  min-height: 92px;
  padding: 12px 10px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 8px;
  background: var(--theme-control);
  color: var(--theme-success-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.online-image-upload-dropzone strong {
  color: var(--theme-text-strong);
  font-size: 13px;
}

.online-image-upload-dropzone span,
.online-image-reference-dropzone span {
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.4;
}

.online-image-upload-dropzone:hover,
.online-image-reference-dropzone:hover {
  border-color: var(--theme-success-text);
  background: var(--theme-hover);
}

.online-image-reference-dropzone {
  display: flex;
  min-height: 56px;
}

.online-image-reference-dropzone:disabled {
  cursor: default;
  opacity: .68;
}

.online-image-upload-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  color: var(--theme-muted);
  font-size: 11px;
}

.online-image-upload-summary > span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-image-upload-summary button {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-control);
  color: var(--theme-success-text);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.online-image-upload-strip,
.online-image-reference-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 72px));
  gap: 7px;
  min-width: 0;
}

.online-image-upload-empty-state {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px 9px;
  border: 1px dashed var(--theme-border);
  border-radius: 7px;
  background: var(--theme-control);
  color: var(--theme-muted);
}

.online-image-upload-empty-rail {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.online-image-upload-empty-rail span {
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-surface);
}

.online-image-upload-empty-state p {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
}

.online-image-upload-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  height: 62px;
  margin: 0;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-control);
}

.online-image-upload-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--theme-surface);
}

.online-image-upload-broken {
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 800;
}

.online-image-upload-thumb.is-broken .online-image-upload-broken {
  display: grid;
}

.online-image-upload-thumb figcaption {
  position: absolute;
  left: 3px;
  bottom: 3px;
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--theme-overlay);
  color: var(--theme-on-accent);
  font-size: 10px;
  font-weight: 900;
}

.online-image-reference-box {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--theme-border);
  border-radius: 9px;
  background: var(--theme-surface-raised);
}

.online-image-reference-box.has-error {
  border-color: var(--theme-danger-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger-text) 10%, transparent);
}

.online-image-product-collection {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--theme-border);
  border-radius: 9px;
  background: var(--theme-surface-raised);
}

.online-image-product-collection.has-image {
  border-color: var(--theme-success-border);
  background: color-mix(in srgb, var(--theme-success) 38%, var(--theme-surface-raised));
}

.online-image-product-collection.has-error {
  border-color: var(--theme-danger-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger-text) 10%, transparent);
}

.online-image-product-dropzone:disabled {
  cursor: default;
  opacity: .68;
}

.online-image-product-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-control);
}

.online-image-product-primary .online-image-upload-thumb {
  flex: 0 0 72px;
}

.online-image-product-primary > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.online-image-product-primary > div strong {
  color: var(--theme-text-strong);
  font-size: 12px;
}

.online-image-product-primary > div span {
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-image-product-flat-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 72px));
  gap: 7px;
  min-width: 0;
}

.online-image-product-flat-thumb,
.online-image-product-primary .online-image-upload-thumb {
  position: relative;
}

.online-image-product-flat-thumb > button,
.online-image-product-primary .online-image-upload-thumb > button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--theme-overlay);
  color: var(--theme-on-accent);
  cursor: pointer;
}

.online-image-product-supplement {
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--theme-border);
}

.online-image-product-supplement summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--theme-text-strong);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.online-image-product-supplement summary small {
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 600;
  text-align: right;
}

.online-image-product-supplement > p {
  margin: 7px 0;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.45;
}

.online-image-scene-reference {
  min-width: 0;
  border: 1px solid var(--theme-border);
  border-radius: 9px;
  background: var(--theme-surface-raised);
}

.online-image-scene-reference.has-image {
  border-color: var(--theme-success-border);
}

.online-image-scene-reference-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--theme-text);
  font: inherit;
  cursor: pointer;
}

.online-image-scene-reference-toggle:hover {
  background: var(--theme-hover);
}

.online-image-scene-reference-toggle:focus-visible,
.online-image-scene-reference-dropzone:focus-visible,
.online-image-scene-reference-actions button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-success-text) 24%, transparent);
  outline-offset: 2px;
}

.online-image-scene-reference-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.online-image-scene-reference-title svg {
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

.online-image-scene-reference.is-open .online-image-scene-reference-title svg {
  transform: rotate(90deg);
}

.online-image-scene-reference-title strong {
  color: var(--theme-text-strong);
  font-size: 13px;
}

.online-image-scene-reference-title em {
  padding: 1px 5px;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  color: var(--theme-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.online-image-scene-reference-toggle > span:last-child {
  flex: 0 0 auto;
  color: var(--theme-muted);
  font-size: 11px;
}

.online-image-scene-reference-body {
  display: grid;
  gap: 9px;
  padding: 10px;
  border-top: 1px solid var(--theme-border);
}

.online-image-scene-reference-body > p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.55;
}

.online-image-scene-reference-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 66px;
  padding: 10px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 8px;
  background: var(--theme-control);
  color: var(--theme-success-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.online-image-scene-reference-dropzone:hover {
  border-color: var(--theme-success-text);
  background: var(--theme-hover);
}

.online-image-scene-reference-dropzone > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.online-image-scene-reference-dropzone strong {
  color: var(--theme-text-strong);
  font-size: 12px;
}

.online-image-scene-reference-dropzone small {
  color: var(--theme-muted);
  font-size: 10px;
  line-height: 1.4;
}

.online-image-scene-reference-file {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-control);
}

.online-image-scene-reference-file figure {
  overflow: hidden;
  width: 64px;
  height: 56px;
  margin: 0;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface);
}

.online-image-scene-reference-file img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.online-image-scene-reference-file > div:not(.online-image-scene-reference-actions) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.online-image-scene-reference-file > div > span {
  overflow: hidden;
  color: var(--theme-text-strong);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-image-scene-reference-file > div > small {
  color: var(--theme-muted);
  font-size: 10px;
  line-height: 1.35;
}

.online-image-scene-reference-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.online-image-scene-reference-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface);
  color: var(--theme-success-text);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.online-image-scene-reference-actions button.is-remove {
  color: var(--theme-danger-text);
}

.online-image-reference-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
}

.online-image-reference-list figure {
  position: relative;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-control);
}

.online-image-reference-list figure > button {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--theme-overlay);
  color: var(--theme-on-accent);
  cursor: pointer;
}

.online-image-product-flat-thumb > button:focus-visible,
.online-image-product-primary .online-image-upload-thumb > button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-success-text) 24%, transparent);
  outline-offset: 2px;
}

.online-image-reference-add {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 62px;
  padding: 6px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 7px;
  background: var(--theme-control);
  color: var(--theme-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.online-image-reference-add:hover {
  border-color: var(--theme-success-text);
  color: var(--theme-success-text);
}

.online-image-text-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.online-image-output-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.online-image-output-settings .online-image-setting-group-title {
  grid-column: 1 / -1;
}

.online-image-compact-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.online-image-compact-field > span {
  color: var(--theme-text-strong);
  font-size: 12px;
  font-weight: 800;
}

.online-image-compact-field select {
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 7px;
  background: var(--theme-control);
  color: var(--theme-text);
  font: inherit;
  font-size: 12px;
}

.online-image-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.online-image-segmented button {
  min-width: 42px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-control);
  color: var(--theme-text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.online-image-segmented button:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-hover);
}

.online-image-segmented button:focus-visible,
.online-image-upload-dropzone:focus-visible,
.online-image-reference-dropzone:focus-visible,
.online-image-upload-summary button:focus-visible,
.online-image-reference-add:focus-visible,
.online-image-reference-list figure > button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--theme-success-text) 24%, transparent);
  outline-offset: 2px;
}

.online-image-segmented button.is-active {
  border-color: var(--theme-success-text);
  background: var(--theme-active);
  color: var(--theme-success-text);
  font-weight: 800;
}

.online-image-compact-field.is-fixed .online-image-segmented button {
  cursor: default;
}

.online-image-count-field {
  grid-column: 1 / -1;
}

.online-image-count-field .online-image-segmented {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.online-image-count-field .online-image-segmented button {
  width: 100%;
  min-width: 0;
}

.online-image-actions {
  position: sticky;
  bottom: -16px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 -16px -16px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--theme-border);
  background: color-mix(in srgb, var(--theme-surface) 94%, transparent);
  backdrop-filter: blur(8px);
}

.online-image-validation-summary {
  padding: 9px 10px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 8px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.online-image-submit-note {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface-raised);
}

.online-image-submit-note > span {
  min-width: 0;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
}

.online-image-submit-help {
  display: grid;
  gap: 9px;
  max-width: 340px;
}

.online-image-submit-help p {
  margin: 0;
  color: var(--theme-text);
  font-size: 12px;
  line-height: 1.55;
}

.online-image-submit-help a {
  width: fit-content;
  color: var(--theme-success-text);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.online-image-submit-help a:hover {
  text-decoration: underline;
}

.online-image-help-tip {
  flex: 0 0 auto;
}

.online-image-generate-button {
  flex: 1 1 200px;
  min-height: 40px;
  padding-inline: 18px;
}

.online-image-generate-button svg,
.online-image-page .result-title-row .secondary-button svg,
.online-image-lightbox-download svg {
  flex: 0 0 auto;
}

.online-image-page .secondary-button.compact {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 13px;
}

.online-image-template-retry {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.online-image-error {
  padding: 9px 10px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 8px;
  color: var(--theme-danger-text);
  background: var(--theme-danger);
  font-size: 13px;
  line-height: 1.5;
}

.online-image-save-recovery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--theme-warning-border);
  border-radius: 9px;
  background: var(--theme-warning);
}

.online-image-save-recovery > div {
  min-width: 0;
}

.online-image-save-recovery strong {
  display: block;
  margin-bottom: 4px;
  color: var(--theme-warning-text);
  font-size: 14px;
}

.online-image-save-recovery p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.5;
}

.online-image-save-recovery .primary-button {
  flex: 0 0 auto;
  min-height: 36px;
}

.online-image-save-recovery.is-expired {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
}

.online-image-save-recovery.is-expired strong {
  color: var(--theme-danger-text);
}

.online-image-save-recovery.is-expired p {
  color: var(--theme-muted);
}

.online-image-demo-motion {
  position: relative;
  display: grid;
  gap: 16px;
  min-height: 430px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background:
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--theme-success-text) 14%, transparent), transparent 26%),
    radial-gradient(circle at 84% 80%, color-mix(in srgb, var(--theme-info-text) 12%, transparent), transparent 28%),
    linear-gradient(135deg, var(--theme-surface-raised) 0%, var(--theme-active) 100%);
}

.online-image-demo-copy {
  max-width: 560px;
  z-index: 1;
}

.online-image-demo-copy span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--theme-success-text);
  background: var(--theme-active);
  font-size: 12px;
  font-weight: 800;
}

.online-image-demo-copy strong {
  display: block;
  margin-bottom: 7px;
  color: var(--theme-text-strong);
  font-size: 24px;
  line-height: 1.22;
}

.online-image-demo-copy p {
  margin: 0;
  color: var(--theme-muted);
  line-height: 1.65;
}

.online-image-demo-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
  align-items: center;
  z-index: 1;
}

.online-image-demo-combine,
.online-image-demo-cleanup {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.online-image-demo-fanout {
  grid-template-columns: minmax(140px, .72fr) minmax(0, 2.28fr);
  gap: 46px;
}

.online-image-demo-scene-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.online-image-demo-card {
  position: relative;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-surface) 90%, transparent);
  box-shadow: var(--theme-shadow);
  animation: online-card-float 4.8s ease-in-out infinite;
}

.online-image-demo-card.step-2 {
  animation-delay: .35s;
}

.online-image-demo-card.step-3 {
  animation-delay: .7s;
  border-color: var(--theme-success-border);
  box-shadow: 0 18px 32px color-mix(in srgb, var(--theme-success-text) 17%, transparent);
}

.online-image-demo-card.step-4 {
  animation-delay: 1.05s;
}

.online-image-demo-card.is-result {
  border-color: var(--theme-success-border);
}

.online-image-demo-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
}

.online-image-demo-card figcaption {
  padding-top: 8px;
  color: var(--theme-text);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.online-image-demo-arrow {
  position: absolute;
  top: 48%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--theme-on-accent);
  background: var(--theme-success-text);
  font-weight: 900;
  box-shadow: 0 9px 18px color-mix(in srgb, var(--theme-success-text) 22%, transparent);
  animation: online-pulse 1.8s ease-in-out infinite;
  z-index: 2;
}

.online-image-demo-arrow.arrow-one {
  left: calc(33.333% - 20px);
}

.online-image-demo-arrow.arrow-two {
  left: calc(66.666% - 20px);
  animation-delay: .35s;
}

.online-image-demo-fanout .online-image-demo-arrow.arrow-one {
  left: calc(24% - 17px);
}

.online-image-demo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  z-index: 1;
}

.online-image-demo-strip img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  box-shadow: var(--theme-shadow);
}

.online-image-demo-motion.is-product-scene-suite .online-image-demo-card img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.online-image-demo-motion.is-product-white-bg {
  background:
    radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--theme-success-text) 10%, transparent), transparent 24%),
    linear-gradient(135deg, var(--theme-surface-raised) 0%, var(--theme-canvas) 100%);
}


.online-image-demo-motion.is-product-white-bg .online-image-demo-card.step-1 img {
  object-fit: cover;
}

.online-image-demo-motion.is-product-white-bg .online-image-demo-card.step-3 img {
  object-fit: contain;
  /* 白底图结果画布必须保持纯白，不随界面主题变色。 */
  background: var(--theme-on-accent);
}

.online-image-white-cleanup-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  background: var(--theme-control);
}

.online-image-white-cleanup-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.online-image-white-cleanup-stage > .online-image-white-clean-layer {
  object-fit: contain;
  background: var(--theme-on-accent);
  clip-path: inset(0 100% 0 0);
  animation: online-white-reveal 4.2s ease-in-out infinite;
}

.online-image-white-scan-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--theme-success-text);
  box-shadow: 0 0 14px color-mix(in srgb, var(--theme-success-text) 46%, transparent);
  animation: online-white-scan 4.2s ease-in-out infinite;
}

@keyframes online-card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes online-scene-focus {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes online-white-scan {
  0%, 10% { left: 0; opacity: .2; }
  48%, 68% { left: calc(100% - 3px); opacity: .95; }
  100% { left: 0; opacity: .2; }
}

@keyframes online-white-reveal {
  0%, 10% { clip-path: inset(0 100% 0 0); }
  48%, 68% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes online-pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.08); opacity: 1; }
}

.online-image-loading-stage {
  display: grid;
  place-items: center;
  gap: 13px;
  min-height: 536px;
  padding: 24px;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--theme-surface), var(--theme-active));
  text-align: center;
}

.online-image-loading-stage strong {
  color: var(--theme-text-strong);
  font-size: 20px;
}

.online-image-loading-stage p {
  margin: 0;
  color: var(--theme-muted);
}

.online-image-orbit {
  position: relative;
  width: 72px;
  height: 72px;
  border: 2px solid var(--theme-success-border);
  border-radius: 50%;
  animation: online-spin 1.5s linear infinite;
}

.online-image-orbit span {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--theme-success-text);
}

.online-image-orbit span:nth-child(1) {
  top: -7px;
  left: 29px;
}

.online-image-orbit span:nth-child(2) {
  right: -7px;
  top: 29px;
  background: var(--theme-info-text);
}

.online-image-orbit span:nth-child(3) {
  bottom: -7px;
  left: 29px;
  background: var(--theme-warning-text);
}

@keyframes online-spin {
  to { transform: rotate(360deg); }
}

.online-image-result-grid {
  display: grid;
  gap: 12px;
  align-items: start;
}

.online-image-result-grid.count-1 {
  grid-template-columns: minmax(280px, 540px);
  justify-content: center;
}

.online-image-result-grid.count-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.online-image-result-grid.count-3,
.online-image-result-grid.count-4,
.online-image-result-grid.count-5 {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.online-image-result-card {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: var(--theme-surface-raised);
}

.online-image-result-card > button {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--theme-control);
  cursor: zoom-in;
}

.online-image-result-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--theme-surface);
  transition: transform 180ms ease;
}

.online-image-result-card > button:hover img {
  filter: brightness(1.02);
}

.online-image-result-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--theme-text);
  font-size: 13px;
  font-weight: 800;
}

.online-image-result-card figcaption a {
  color: var(--theme-success-text);
  text-decoration: none;
}

.online-image-history-panel {
  gap: 10px;
}

.online-image-history-list {
  display: grid;
  gap: 7px;
}

.online-image-history-list button {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  text-align: left;
  cursor: pointer;
}

.online-image-history-list button:hover {
  border-color: var(--theme-success-border);
  background: var(--theme-hover);
}

.online-image-history-list strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
}

.online-image-history-list span {
  color: var(--theme-muted);
  font-size: 12px;
}

.online-image-history-list em {
  grid-column: 1 / -1;
  color: var(--theme-muted);
  font-size: 12px;
  font-style: normal;
}

.online-image-empty-history {
  padding: 12px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 8px;
  color: var(--theme-muted);
  background: var(--theme-surface-raised);
  font-size: 13px;
}

.online-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 58px 72px;
  background: var(--theme-overlay);
}

.online-image-lightbox img {
  max-width: min(88vw, 980px);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: var(--theme-shadow);
}

.online-image-lightbox-close,
.online-image-lightbox-nav {
  position: fixed;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--theme-on-accent);
  background: var(--theme-overlay-control);
  cursor: pointer;
}

.online-image-lightbox-close {
  top: 22px;
  right: 24px;
  width: 42px;
  height: 42px;
}

.online-image-lightbox-nav {
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
}

.online-image-lightbox-nav.prev {
  left: 28px;
}

.online-image-lightbox-nav.next {
  right: 28px;
}

.online-image-lightbox-download {
  position: fixed;
  right: 24px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--theme-text-strong);
  background: var(--theme-surface);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 1280px) {
  .online-image-layout {
    grid-template-columns: minmax(330px, .92fr) minmax(450px, 1.08fr);
  }

  .online-image-demo-flow {
    gap: 28px;
  }
}

@media (max-width: 1040px) {
  .online-image-layout {
    grid-template-columns: 1fr;
  }

  .online-image-result-panel {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .online-image-hero,
  .online-image-panel,
  .online-image-result-panel {
    padding: 13px;
  }

  .online-image-upload-grid,
  .online-image-demo-flow,
  .online-image-demo-strip {
    grid-template-columns: 1fr;
  }

  .online-image-demo-arrow {
    display: none;
  }

  .online-image-result-grid.count-2,
  .online-image-result-grid.count-3,
  .online-image-result-grid.count-4,
  .online-image-result-grid.count-5 {
    grid-template-columns: 1fr;
  }

  .online-image-save-recovery {
    align-items: stretch;
    flex-direction: column;
  }

  .online-image-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .online-image-hero-actions {
    flex-wrap: wrap;
  }
}

/* 深色主题只调整工具界面容器；生成图片与素材预览保持原始色彩。 */
html[data-theme="dark"] .online-image-hero {
  border-color: var(--theme-border);
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--theme-success-text) 10%, transparent), transparent 28%),
    linear-gradient(135deg, var(--theme-surface-raised), var(--theme-surface));
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .online-image-page .page-eyebrow {
  color: var(--theme-success-text);
}

html[data-theme="dark"] .online-image-panel,
html[data-theme="dark"] .online-image-result-panel {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .online-image-page .result-title-row {
  border-bottom-color: var(--theme-border);
}

html[data-theme="dark"] .online-image-field > span,
html[data-theme="dark"] .online-image-upload-head strong,
html[data-theme="dark"] .online-image-reference-head strong,
html[data-theme="dark"] .online-image-demo-copy strong,
html[data-theme="dark"] .online-image-loading-stage strong {
  color: var(--theme-text-strong);
}

html[data-theme="dark"] .online-image-field select,
html[data-theme="dark"] .online-image-field input,
html[data-theme="dark"] .online-image-field textarea {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
  color: var(--theme-text);
  color-scheme: dark;
}

html[data-theme="dark"] .online-image-field select:focus,
html[data-theme="dark"] .online-image-field input:focus,
html[data-theme="dark"] .online-image-field textarea:focus {
  border-color: var(--theme-success-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-success-text) 14%, transparent);
}

html[data-theme="dark"] .online-image-upload-box,
html[data-theme="dark"] .online-image-upload-box.has-image,
html[data-theme="dark"] .online-image-product-collection,
html[data-theme="dark"] .online-image-product-collection.has-image {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
}

html[data-theme="dark"] .online-image-submit-note {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
}

html[data-theme="dark"] .online-image-submit-help a {
  color: var(--theme-success-text);
}

html[data-theme="dark"] .online-image-upload-box.has-image {
  border-color: var(--theme-success-border);
}

html[data-theme="dark"] .online-image-product-collection.has-image {
  border-color: var(--theme-success-border);
}

html[data-theme="dark"] .online-image-upload-dropzone,
html[data-theme="dark"] .online-image-reference-dropzone {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
  color: var(--theme-muted);
}

html[data-theme="dark"] .online-image-upload-summary button,
html[data-theme="dark"] .online-image-upload-empty-state,
html[data-theme="dark"] .online-image-upload-empty-rail span,
html[data-theme="dark"] .online-image-upload-thumb {
  border-color: var(--theme-border);
  background: var(--theme-control);
}

html[data-theme="dark"] .online-image-upload-thumb img {
  background: var(--theme-surface);
}

html[data-theme="dark"] .online-image-error {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
  color: var(--theme-danger-text);
}

html[data-theme="dark"] .online-image-save-recovery {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
}

html[data-theme="dark"] .online-image-save-recovery strong {
  color: var(--theme-warning-text);
}

html[data-theme="dark"] .online-image-save-recovery p {
  color: var(--theme-muted);
}

html[data-theme="dark"] .online-image-save-recovery.is-expired {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
}

html[data-theme="dark"] .online-image-save-recovery.is-expired strong {
  color: var(--theme-danger-text);
}

html[data-theme="dark"] .online-image-save-recovery.is-expired p {
  color: var(--theme-muted);
}

html[data-theme="dark"] .online-image-demo-motion {
  border-color: var(--theme-border);
  background:
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--theme-success-text) 9%, transparent), transparent 26%),
    radial-gradient(circle at 84% 80%, color-mix(in srgb, var(--theme-info-text) 8%, transparent), transparent 28%),
    linear-gradient(135deg, var(--theme-surface-raised), var(--theme-surface));
}

html[data-theme="dark"] .online-image-demo-motion.is-product-white-bg {
  background:
    radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--theme-success-text) 7%, transparent), transparent 24%),
    linear-gradient(135deg, var(--theme-surface-raised), var(--theme-surface));
}

html[data-theme="dark"] .online-image-demo-copy span {
  color: var(--theme-success-text);
  background: var(--theme-active);
}

html[data-theme="dark"] .online-image-demo-copy p {
  color: var(--theme-muted);
}

html[data-theme="dark"] .online-image-demo-card {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-elevated);
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .online-image-demo-card.step-3 {
  border-color: var(--theme-success-border);
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .online-image-demo-card figcaption,
html[data-theme="dark"] .online-image-result-card figcaption {
  color: var(--theme-text);
}

html[data-theme="dark"] .online-image-demo-strip img {
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .online-image-loading-stage {
  border-color: var(--theme-border);
  background: linear-gradient(135deg, var(--theme-surface-raised), var(--theme-surface));
}

html[data-theme="dark"] .online-image-orbit {
  border-color: var(--theme-success-border);
}

html[data-theme="dark"] .online-image-result-card {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
}

html[data-theme="dark"] .online-image-result-card figcaption a {
  color: var(--theme-success-text);
}

html[data-theme="dark"] .online-image-history-list button {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}

html[data-theme="dark"] .online-image-history-list button:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-hover);
}

html[data-theme="dark"] .online-image-empty-history {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
  color: var(--theme-muted);
}

@container online-image-workbench (max-width: 980px) {
  .online-image-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .online-image-panel {
    overflow: visible;
    max-height: none;
  }

  .online-image-result-panel {
    min-height: 520px;
  }
}

@container online-image-workbench (max-width: 760px) {
  .online-image-mode-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .online-image-mode-card {
    min-height: 68px;
  }

  .online-image-hero,
  .online-image-mode-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .online-image-hero-actions {
    flex-wrap: wrap;
  }

  .online-image-hero-actions .secondary-button {
    justify-content: center;
    flex: 1 1 180px;
  }

  .online-image-result-grid.count-2,
  .online-image-result-grid.count-3,
  .online-image-result-grid.count-4,
  .online-image-result-grid.count-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container online-image-workbench (max-width: 560px) {
  .online-image-hero,
  .online-image-mode-section,
  .online-image-panel,
  .online-image-result-panel {
    padding: 12px;
  }

  .online-image-upload-grid,
  .online-image-text-fields,
  .online-image-output-settings,
  .online-image-demo-flow,
  .online-image-demo-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .online-image-setting-group-title,
  .online-image-reference-head,
  .online-image-product-supplement summary,
  .online-image-save-recovery {
    align-items: stretch;
    flex-direction: column;
  }

  .online-image-scene-reference-toggle {
    align-items: flex-start;
  }

  .online-image-scene-reference-file {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .online-image-scene-reference-file figure {
    width: 56px;
    height: 52px;
  }

  .online-image-scene-reference-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .online-image-prompt-heading {
    align-items: flex-start;
  }

  .online-image-agent-prompt-button {
    max-width: 100%;
    white-space: normal;
  }

  .online-image-setting-group-title span {
    overflow: visible;
    text-align: left;
    text-overflow: initial;
    white-space: normal;
  }

  .online-image-demo-arrow {
    display: none;
  }

  .online-image-demo-scene-results {
    grid-template-columns: minmax(0, 1fr);
  }

  .online-image-result-grid.count-2,
  .online-image-result-grid.count-3,
  .online-image-result-grid.count-4,
  .online-image-result-grid.count-5 {
    grid-template-columns: minmax(0, 1fr);
  }

  .online-image-actions {
    bottom: -12px;
    margin: 0 -12px -12px;
    padding: 10px 12px 12px;
  }

  .online-image-actions .secondary-button {
    flex: 1 1 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-image-mode-card,
  .online-image-agent-prompt-button,
  .online-image-upload-dropzone,
  .online-image-reference-dropzone,
  .online-image-demo-card,
  .online-image-demo-strip img,
  .online-image-white-clean-layer,
  .online-image-white-scan-line,
  .online-image-result-card img,
  .online-image-orbit,
  .online-image-orbit span {
    animation: none !important;
    transition: none !important;
  }
}
.generation-history-page {
  display: grid;
  gap: 14px;
  padding: 22px 24px 42px;
  color: #17252b;
}

.generation-history-head,
.generation-history-toolbar,
.generation-history-summary,
.generation-history-row {
  border: 1px solid #d8e5e7;
  background: #fff;
  box-shadow: 0 8px 24px rgba(24, 66, 73, 0.045);
}

.generation-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 8px;
}

.generation-history-head .crumb {
  display: block;
  margin-bottom: 5px;
  color: #138f89;
  font-size: 13px;
  font-weight: 600;
}

.generation-history-head h1 {
  margin: 0;
  font-size: 25px;
  letter-spacing: 0;
}

.generation-history-head p {
  margin: 7px 0 0;
  color: #607177;
  font-size: 14px;
}

.generation-history-head-actions,
.generation-history-actions,
.generation-history-asset-actions,
.generation-history-drawer footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.generation-history-head-actions .secondary-button,
.generation-history-actions .secondary-button,
.generation-history-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-decoration: none;
}

.generation-history-summary {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 50px;
  padding: 8px 18px;
  border-radius: 7px;
}

.generation-history-summary span {
  color: #51636a;
  font-size: 13px;
  white-space: nowrap;
}

.generation-history-summary b {
  margin-right: 4px;
  color: #142a31;
  font-size: 18px;
}

.generation-history-summary .has-failure,
.generation-history-summary .has-failure b {
  color: #c2473c;
}

.generation-history-summary small {
  margin-left: auto;
  color: #75868c;
  font-size: 12px;
}

.generation-history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 7px;
}

.generation-history-tabs,
.generation-history-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.generation-history-tabs button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #52646a;
  cursor: pointer;
}

.generation-history-tabs button.active {
  border-color: #a8ddd9;
  background: #e9f8f6;
  color: #087d77;
  font-weight: 600;
}

.generation-history-filters label {
  display: flex;
  align-items: center;
  gap: 7px;
  width: min(340px, 34vw);
  min-width: 220px;
  padding: 0 10px;
  border: 1px solid #cbdcdf;
  border-radius: 6px;
  color: #73858b;
}

.generation-history-filters input,
.generation-history-filters select,
.generation-history-filters select {
  min-height: 34px;
  border: 0;
  background: transparent;
  outline: 0;
}

.generation-history-filters input {
  min-width: 0;
  flex: 1;
}

.generation-history-filters select {
  min-width: 118px;
  padding: 0 28px 0 10px;
  border: 1px solid #cbdcdf;
  border-radius: 6px;
  background: #fff;
}

.generation-history-message {
  padding: 10px 13px;
  border: 1px solid #b9e3df;
  border-radius: 6px;
  background: #eefaf8;
  color: #26736f;
  font-size: 13px;
}

.generation-history-list {
  display: grid;
  gap: 9px;
}

.generation-history-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px 2px;
  color: #66797e;
  font-size: 13px;
}

.generation-history-pagination > div {
  display: flex;
  gap: 8px;
}

.generation-history-row {
  display: grid;
  grid-template-columns: 98px minmax(260px, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 10px;
  border-radius: 7px;
}

.generation-history-thumb,
.generation-history-asset-preview {
  overflow: hidden;
  padding: 0;
  border: 1px solid #d5e2e4;
  border-radius: 6px;
  background: #f2f7f7;
  cursor: pointer;
}

.generation-history-thumb {
  width: 98px;
  height: 90px;
}

.generation-history-thumb img,
.generation-history-thumb video,
.generation-history-asset-preview img,
.generation-history-asset-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.generation-history-main {
  min-width: 0;
}

.generation-history-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.generation-history-title-row span {
  color: #198b85;
  font-size: 12px;
}

.generation-history-title-row h2 {
  margin: 3px 0 0;
  overflow: hidden;
  color: #17282e;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.generation-history-title-row em,
.generation-history-drawer-meta .status-success,
.generation-history-drawer-meta .status-failed,
.generation-history-drawer-meta .status-processing {
  padding: 3px 8px;
  border-radius: 999px;
  background: #edf4f4;
  color: #596b70;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.generation-history-title-row .status-success,
.generation-history-drawer-meta .status-success { background: #e8f8f2; color: #19815f; }
.generation-history-title-row .status-failed,
.generation-history-drawer-meta .status-failed { background: #fff0ee; color: #bd4a40; }
.generation-history-title-row .status-processing,
.generation-history-drawer-meta .status-processing { background: #fff5dd; color: #9d6a09; }

.generation-history-main > p {
  display: -webkit-box;
  margin: 8px 0;
  overflow: hidden;
  color: #64757b;
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.generation-history-meta {
  display: flex;
  gap: 14px;
  color: #8a989c;
  font-size: 12px;
  flex-wrap: wrap;
}

.generation-history-meta .result-available,
.generation-history-drawer-meta .result-available {
  color: #26736f;
}

.generation-history-meta .result-expired,
.generation-history-drawer-meta .result-expired {
  color: #9d6a09;
}

.generation-history-actions {
  max-width: 245px;
  justify-content: flex-end;
}

.generation-history-empty,
.generation-history-no-assets {
  display: grid;
  place-items: center;
  gap: 7px;
  min-height: 220px;
  border: 1px dashed #cbdcdf;
  border-radius: 8px;
  background: #fbfdfd;
  color: #718187;
}

.generation-history-empty-preview {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: #799096;
  font-size: 11px;
}

.generation-history-drawer-backdrop,
.generation-history-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
  background: rgba(10, 25, 29, 0.42);
  backdrop-filter: blur(2px);
}

.generation-history-drawer {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  width: min(720px, 94vw);
  height: 100%;
  background: #f7fafa;
  box-shadow: -16px 0 40px rgba(10, 34, 39, 0.18);
}

.generation-history-drawer > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  border-bottom: 1px solid #dbe7e9;
  background: #fff;
}

.generation-history-drawer > header span { color: #188b85; font-size: 12px; }
.generation-history-drawer > header h2 { margin: 4px 0; font-size: 21px; }
.generation-history-drawer > header p { margin: 0; color: #64757b; font-size: 13px; line-height: 1.55; }
.generation-history-drawer > header button,
.generation-history-preview-modal header button {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef4f4;
  place-items: center;
  cursor: pointer;
}

.generation-history-drawer-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-bottom: 1px solid #dbe7e9;
  color: #718187;
  font-size: 12px;
  background: #fbfdfd;
}

.generation-history-assets {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 16px 20px;
  overflow: auto;
}

.generation-history-assets article {
  display: grid;
  grid-template-columns: 104px minmax(130px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px;
  border: 1px solid #d8e5e7;
  border-radius: 7px;
  background: #fff;
}

.generation-history-asset-preview { width: 104px; height: 92px; }
.generation-history-assets article > div:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.generation-history-assets article > div:nth-child(2) strong { font-size: 14px; }
.generation-history-assets article > div:nth-child(2) span { overflow: hidden; color: #76878c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.generation-history-asset-actions button,
.generation-history-asset-actions a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border: 0;
  background: transparent;
  color: #167f7a;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.generation-history-asset-actions .preview-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #73858b;
  font-size: 12px;
}

.generation-history-drawer footer {
  justify-content: flex-end;
  padding: 13px 20px;
  border-top: 1px solid #dbe7e9;
  background: #fff;
}

.generation-history-drawer footer a { text-decoration: none; }

.generation-history-preview-modal {
  z-index: 1300;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.generation-history-preview-modal > div {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1040px, 94vw);
  height: min(820px, 90vh);
  overflow: hidden;
  border-radius: 8px;
  background: #111b1e;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.generation-history-preview-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: #fff;
}

.generation-history-preview-modal img,
.generation-history-preview-modal video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

@media (max-width: 980px) {
  .generation-history-page { padding: 16px; }
  .generation-history-head,
  .generation-history-toolbar { align-items: stretch; flex-direction: column; }
  .generation-history-summary { align-items: flex-start; flex-wrap: wrap; }
  .generation-history-summary small { width: 100%; margin-left: 0; }
  .generation-history-filters label { width: min(100%, 440px); }
  .generation-history-row { grid-template-columns: 82px minmax(0, 1fr); }
  .generation-history-thumb { width: 82px; height: 82px; }
  .generation-history-actions { grid-column: 1 / -1; max-width: none; justify-content: flex-start; }
}

@media (max-width: 640px) {
  .generation-history-page { padding: 12px; }
  .generation-history-row { grid-template-columns: 1fr; }
  .generation-history-thumb { width: 100%; height: 150px; }
  .generation-history-assets article { grid-template-columns: 82px minmax(0, 1fr); }
  .generation-history-asset-preview { width: 82px; height: 78px; }
  .generation-history-asset-actions { grid-column: 1 / -1; }
}

/* Dark theme color overrides only; light theme remains unchanged. */
html[data-theme="dark"] .generation-history-page {
  color: var(--theme-text, #edf5f5);
}

html[data-theme="dark"] .generation-history-head,
html[data-theme="dark"] .generation-history-toolbar,
html[data-theme="dark"] .generation-history-summary,
html[data-theme="dark"] .generation-history-row {
  border-color: var(--theme-border, #34474b);
  background: var(--theme-surface, #172225);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] .generation-history-head p,
html[data-theme="dark"] .generation-history-summary span,
html[data-theme="dark"] .generation-history-summary small,
html[data-theme="dark"] .generation-history-pagination,
html[data-theme="dark"] .generation-history-main > p,
html[data-theme="dark"] .generation-history-meta,
html[data-theme="dark"] .generation-history-empty-preview,
html[data-theme="dark"] .generation-history-asset-actions .preview-hint {
  color: var(--theme-text-muted, #9eb0b4);
}

html[data-theme="dark"] .generation-history-head h1,
html[data-theme="dark"] .generation-history-summary b,
html[data-theme="dark"] .generation-history-title-row h2,
html[data-theme="dark"] .generation-history-assets article > div:nth-child(2) strong {
  color: var(--theme-text, #edf5f5);
}

html[data-theme="dark"] .generation-history-tabs button {
  color: var(--theme-text-muted, #9eb0b4);
}

html[data-theme="dark"] .generation-history-tabs button:hover {
  border-color: var(--theme-border-strong, #496066);
  background: var(--theme-surface-raised, #1d2a2e);
  color: var(--theme-text, #edf5f5);
}

html[data-theme="dark"] .generation-history-tabs button.active {
  border-color: rgba(47, 198, 187, 0.45);
  background: rgba(47, 198, 187, 0.13);
  color: var(--theme-accent, #52d6cd);
}

html[data-theme="dark"] .generation-history-filters label,
html[data-theme="dark"] .generation-history-filters select {
  border-color: var(--theme-border, #34474b);
  background: var(--theme-control, #111b1e);
  color: var(--theme-text, #edf5f5);
  color-scheme: dark;
}

html[data-theme="dark"] .generation-history-filters input,
html[data-theme="dark"] .generation-history-filters select,
html[data-theme="dark"] .generation-history-filters input::placeholder {
  color: var(--theme-text-muted, #9eb0b4);
}

html[data-theme="dark"] .generation-history-message {
  border-color: rgba(47, 198, 187, 0.34);
  background: rgba(47, 198, 187, 0.1);
  color: var(--theme-accent, #52d6cd);
}

html[data-theme="dark"] .generation-history-thumb,
html[data-theme="dark"] .generation-history-asset-preview {
  border-color: var(--theme-border, #34474b);
  background: var(--theme-control, #111b1e);
}

html[data-theme="dark"] .generation-history-title-row em,
html[data-theme="dark"] .generation-history-drawer-meta .status-success,
html[data-theme="dark"] .generation-history-drawer-meta .status-failed,
html[data-theme="dark"] .generation-history-drawer-meta .status-processing {
  background: var(--theme-surface-raised, #1d2a2e);
  color: var(--theme-text-muted, #9eb0b4);
}

html[data-theme="dark"] .generation-history-title-row .status-success,
html[data-theme="dark"] .generation-history-drawer-meta .status-success {
  background: rgba(54, 185, 130, 0.14);
  color: #70d8ad;
}

html[data-theme="dark"] .generation-history-title-row .status-failed,
html[data-theme="dark"] .generation-history-drawer-meta .status-failed {
  background: rgba(226, 101, 91, 0.14);
  color: #f08d84;
}

html[data-theme="dark"] .generation-history-title-row .status-processing,
html[data-theme="dark"] .generation-history-drawer-meta .status-processing {
  background: rgba(221, 170, 65, 0.14);
  color: #e8bd66;
}

html[data-theme="dark"] .generation-history-empty,
html[data-theme="dark"] .generation-history-no-assets {
  border-color: var(--theme-border-strong, #496066);
  background: var(--theme-surface-raised, #1d2a2e);
  color: var(--theme-text-muted, #9eb0b4);
}

html[data-theme="dark"] .generation-history-drawer {
  background: var(--theme-canvas, #0d1518);
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] .generation-history-drawer > header,
html[data-theme="dark"] .generation-history-drawer footer,
html[data-theme="dark"] .generation-history-preview-modal header,
html[data-theme="dark"] .generation-history-assets article {
  border-color: var(--theme-border, #34474b);
  background: var(--theme-surface, #172225);
}

html[data-theme="dark"] .generation-history-drawer > header p,
html[data-theme="dark"] .generation-history-drawer-meta,
html[data-theme="dark"] .generation-history-assets article > div:nth-child(2) span {
  color: var(--theme-text-muted, #9eb0b4);
}

html[data-theme="dark"] .generation-history-drawer-meta {
  border-color: var(--theme-border, #34474b);
  background: var(--theme-surface-raised, #1d2a2e);
}

html[data-theme="dark"] .generation-history-drawer > header button,
html[data-theme="dark"] .generation-history-preview-modal header button {
  background: var(--theme-control, #111b1e);
  color: var(--theme-text, #edf5f5);
}
/* 仅固定多节点编辑器生效，不覆盖其它工作流、导航和业务页面。 */
.self-workflow-admin-page.is-compact-workflow :is(.self-workflow-config-panel, .self-workflow-contract-panel)[hidden] { display: none; }
.self-workflow-admin-page.is-compact-workflow .self-workflow-identity-strip { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0; padding: 0; border: 0; background: transparent; }
.self-workflow-admin-page.is-compact-workflow .self-workflow-identity-strip > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; padding: 0; border: 0; flex: 0 1 auto; min-width: 0; }
.self-workflow-admin-page.is-compact-workflow .self-workflow-identity-strip dd { margin: 0; overflow-wrap: anywhere; }
.self-workflow-admin-page.is-compact-workflow .self-workflow-identity-strip :is(dt, dd) { font-size: 12px; }
.self-workflow-admin-page.is-compact-workflow .self-workflow-title-row { margin-bottom: 8px; padding-bottom: 8px; }
.self-workflow-admin-page.is-compact-workflow .self-workflow-title-row p { margin: 4px 0 0; font-size: 12px; }
.fwc-root { container-type: inline-size; container-name: fixed-workflow; color: var(--theme-text); min-width: 0; font-size: 13px; }
.fwc-root *, .fwc-root *::before, .fwc-root *::after { box-sizing: border-box; }
.fwc-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 10px; }
.fwc-heading h3 { margin: 0; font-size: 15px; }
.fwc-heading > span { font-size: 12px; color: var(--theme-muted); }
.fwc-heading-state { margin-inline-start: auto; }
.fwc-workspace { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fwc-nodes, .fwc-editor { min-width: 0; }
.fwc-list-head { display: grid; grid-template-columns: minmax(145px, 0.75fr) minmax(0, 1.8fr); gap: 12px; padding: 7px 10px; color: var(--theme-muted); border-bottom: 1px solid var(--theme-border-strong); }
.fwc-node-list { list-style: none; padding: 0; margin: 0; }
.fwc-node { display: grid; grid-template-columns: minmax(145px, 0.75fr) minmax(0, 1.8fr); gap: 12px; align-items: center; padding: 9px 8px; border-bottom: 1px solid var(--theme-border); }
.fwc-node.is-selected { background: var(--theme-active); }
.fwc-node.is-selected .fwc-index { color: var(--theme-text); }
.fwc-node-button { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border: 0; background: transparent; color: var(--theme-text); text-align: left; font: inherit; line-height: 1.4; cursor: pointer; }
.fwc-node-button:hover { color: var(--theme-success-text); }
.fwc-node-button[aria-pressed="true"] { font-weight: 600; }
.fwc-node-button small { display: block; color: var(--theme-warning-text); font-size: 11px; font-weight: 400; }
.fwc-index { flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--theme-muted); }
.fwc-channel-fields { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; align-items: center; }
.fwc-sized-field { display: grid; gap: 4px; width: var(--fwc-control-width); max-width: 100%; flex: 0 1 var(--fwc-control-width); min-width: 0; }
.fwc-model-field { display: grid; flex: 1 1 190px; min-width: 0; max-width: 100%; }
.fwc-root select, .fwc-root input, .fwc-root textarea { border: 1px solid var(--theme-border-strong); color: var(--theme-text); background: var(--theme-control); border-radius: 5px; font: inherit; }
.fwc-sized-field > select, .fwc-sized-field > input, .fwc-model-field > select { width: 100%; min-width: 0; height: 32px; padding: 4px 7px; }
.fwc-root :is(input, select, textarea, button):focus-visible { outline: 2px solid var(--theme-info-text); outline-offset: 2px; }
.fwc-root :disabled { cursor: not-allowed; opacity: 0.65; }
.fwc-inline-error { flex-basis: 100%; color: var(--theme-danger-text); font-size: 12px; overflow-wrap: anywhere; }
.fwc-editor { border-inline-start: 1px solid var(--theme-border); padding-inline-start: 16px; }
.fwc-editor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fwc-editor-heading h4 { margin: 0; font-size: 14px; }
.fwc-editor-heading > span { font-size: 12px; color: var(--theme-muted); white-space: nowrap; }
.fwc-description { margin: 6px 0 8px; color: var(--theme-muted); font-size: 12px; line-height: 1.5; }
.fwc-detail-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 8px 0 10px; }
.fwc-model-summary { flex: 1 1 190px; min-width: 0; margin: 0; font-size: 12px; }
.fwc-model-summary > div { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.fwc-model-summary dt { color: var(--theme-muted); flex-shrink: 0; }
.fwc-model-summary dd { margin: 0; overflow-wrap: anywhere; }
.fwc-parameters { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; max-width: 100%; }
.fwc-parameter > span { color: var(--theme-muted); font-size: 12px; }
.fwc-parameter .self-workflow-boolean { min-height: 32px; display: flex; gap: 4px; align-items: center; }
.fwc-prompt-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--theme-border); padding-bottom: 6px; }
.fwc-prompt-tabs button { padding: 5px 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--theme-muted); font: inherit; cursor: pointer; }
.fwc-prompt-tabs button.is-active { background: var(--theme-active); border-color: var(--theme-success-border); color: var(--theme-text-strong); font-weight: 600; }
.fwc-prompt-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 7px 0; font-size: 12px; color: var(--theme-muted); }
.fwc-textarea-label { display: block; min-width: 0; }
.fwc-textarea-label > textarea { display: block; width: 100%; min-width: 0; height: 330px; min-height: 96px; padding: 9px 10px; line-height: 1.6; resize: vertical; tab-size: 2; }
.fwc-textarea-label > textarea.is-short { height: 112px; }
.fwc-placeholders { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin: 8px 0; color: var(--theme-muted); font-size: 12px; overflow-wrap: anywhere; }
.fwc-placeholders code { color: var(--theme-text); font-size: 12px; }
.fwc-footnote { margin: 8px 0 0; font-size: 12px; color: var(--theme-muted); line-height: 1.5; overflow-wrap: anywhere; }
.fwc-prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fwc-root .fwc-prompt-actions button { min-height: 32px; padding: 5px 12px; font-size: 13px; }
.fwc-message { padding: 7px 9px; margin: 8px 0 0; font-size: 12px; line-height: 1.5; border-radius: 4px; overflow-wrap: anywhere; }
.fwc-message.is-error { color: var(--theme-danger-text); background: var(--theme-danger); }
.fwc-message.is-ok { color: var(--theme-success-text); background: var(--theme-success); }
.fwc-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@container fixed-workflow (max-width: 950px) {
  .fwc-workspace { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .fwc-editor { border-inline-start: 0; border-top: 1px solid var(--theme-border); padding: 12px 0 0; }
}
@container fixed-workflow (max-width: 540px) {
  .fwc-list-head { display: none; }
  .fwc-node { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 8px 4px; }
  .fwc-heading-state { margin-inline-start: 0; }
}
/* 标题专用：缩小左栏并让节点选模上下紧凑排列，保留其它工作流原布局。 */
.fwc-title .fwc-workspace { grid-template-columns: minmax(270px, .65fr) minmax(0, 1.35fr); }
.fwc-title .fwc-list-head { grid-template-columns: minmax(0, 1fr); }
.fwc-title .fwc-list-head > span:last-child { display: none; }
.fwc-title .fwc-node { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 6px; }
.fwc-title .fwc-model-field { flex: 1 1 160px; }
.fwc-title .fwc-node-list { max-block-size: 620px; overflow-y: auto; }
.fwc-title .fwc-editor { border-inline-start: 1px solid var(--theme-border); border-top: 0; padding: 0 0 0 16px; }
.fwc-title-knowledge { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--theme-border); }
.fwc-title-knowledge-head, .fwc-title-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fwc-title-toggle { width: fit-content; max-width: 100%; }
.fwc-title-toggle input { margin: 0; flex-shrink: 0; }
.fwc-title-knowledge-head { gap: 8px 18px; }
.fwc-title-connection { margin-top: 8px; }
.fwc-title-connection summary { width: fit-content; cursor: pointer; color: var(--theme-text); }
.fwc-title-connection-fields { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.fwc-title-id { display: grid; gap: 4px; flex: 1 1 220px; max-width: 340px; min-width: 0; }
.fwc-title-id > span { color: var(--theme-muted); font-size: 12px; }
.fwc-title-id input { width: 100%; min-width: 0; height: 32px; padding: 4px 7px; }
.fwc-title-material-list { list-style: none; padding: 0; margin: 8px 0; }
.fwc-title-material-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 0; border-bottom: 1px solid var(--theme-border); }
.fwc-title-material-description { display: grid; gap: 3px; flex: 1 1 230px; min-width: 0; overflow-wrap: anywhere; }
.fwc-title-material-description strong { font-size: 13px; font-weight: 600; }
.fwc-title-material-description :is(span, small) { color: var(--theme-muted); font-size: 12px; }
.fwc-title-material-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fwc-title-material-actions button { min-height: 32px; font-size: 12px; padding: 5px 8px; }
@container fixed-workflow (max-width: 760px) {
  .fwc-title .fwc-workspace { grid-template-columns: minmax(0, 1fr); }
  .fwc-title .fwc-editor { border-inline-start: 0; border-top: 1px solid var(--theme-border); padding: 12px 0 0; }
}
.doc-markdown .doc-list {
  display: grid;
  gap: 4px;
  margin: 9px 0;
  padding-left: 24px;
}

.doc-markdown .doc-list li {
  padding-left: 2px;
}

.doc-markdown > p code,
.doc-markdown li code,
.doc-markdown td code,
.doc-markdown th code {
  padding: 1px 4px;
  border: 1px solid var(--theme-border);
  border-radius: 4px;
  background: var(--theme-surface-raised);
  color: var(--theme-text-strong);
  font-size: 0.9em;
}

.doc-table-scroll {
  max-width: 100%;
  margin: 12px 0;
  overflow-x: auto;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface);
}

.doc-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  color: var(--theme-text);
  font-size: 12px;
  line-height: 1.55;
}

.doc-table th,
.doc-table td {
  min-width: 110px;
  padding: 8px 10px;
  border-right: 1px solid var(--theme-border);
  border-bottom: 1px solid var(--theme-border);
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
}

.doc-table th {
  background: var(--theme-surface-elevated);
  color: var(--theme-text-strong);
  font-weight: 800;
}

.doc-table th:last-child,
.doc-table td:last-child {
  border-right: 0;
}

.doc-table tbody tr:last-child td {
  border-bottom: 0;
}

.doc-table tbody tr:hover {
  background: var(--theme-hover);
}
.admin-guidance-panel {
  margin: 0 0 12px;
}

.admin-guidance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(0, 1.05fr);
  gap: 8px;
}

.admin-guidance-grid > section {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.admin-guidance-grid h3 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 12px;
  line-height: 1.4;
}

.admin-guidance-grid p,
.admin-guidance-grid ol {
  margin: 5px 0 0;
  color: var(--theme-text);
  font-size: 12px;
  line-height: 1.55;
}

.admin-guidance-grid ol {
  display: grid;
  gap: 4px;
  padding-left: 18px;
}

@media (max-width: 980px) {
  .admin-guidance-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .admin-guidance-grid > section:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 680px) {
  .admin-guidance-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-guidance-grid > section:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
  }
}
.category-capture-complete-mask {
  position: fixed;
  inset: 0;
  z-index: 1660;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--theme-overlay) 42%, transparent);
}

.category-capture-complete-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 8px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 18px 46px rgba(8, 35, 42, 0.2);
}

.category-capture-complete-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.category-capture-complete-icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--theme-success-border);
  border-radius: 50%;
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.category-capture-complete-heading h2 {
  margin: 1px 0 4px;
  font-size: 18px;
  line-height: 1.35;
}

.category-capture-complete-leaf,
.category-capture-complete-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
}

.category-capture-complete-leaf {
  color: var(--theme-text-strong);
  font-weight: 700;
}

.category-capture-complete-copy {
  margin: 14px 0 18px 50px;
  color: var(--theme-muted);
}

.category-capture-complete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.category-capture-complete-actions .ghost-button,
.category-capture-complete-actions .primary-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 15px;
}

.category-capture-complete-actions .ghost-button {
  background: var(--theme-control);
  color: var(--theme-text);
}

@media (max-width: 520px) {
  .category-capture-complete-dialog {
    padding: 17px;
  }

  .category-capture-complete-copy {
    margin-left: 0;
  }
}
.sku-parameter-panel .sku-parameter-field-list {
  gap: 5px;
  margin-top: 7px;
}

.sku-parameter-panel .sku-parameter-field-row {
  display: flex;
  min-height: 41px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px 9px;
  padding: 5px 7px;
}

.sku-parameter-panel .sku-parameter-field-copy {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
}

.sku-parameter-panel .sku-parameter-field-copy > div {
  flex: 0 0 auto;
  gap: 5px;
  white-space: nowrap;
}

.sku-parameter-panel .sku-parameter-field-copy em:not(.optional) {
  color: var(--theme-danger-text, #b74444);
  font-weight: 700;
}

.sku-parameter-panel .sku-parameter-field-copy > button {
  display: block;
  min-width: 0;
  max-width: 220px;
  flex: 0 1 220px;
  margin-top: 0;
}

.sku-parameter-panel .sku-parameter-mode {
  flex: 0 0 auto;
}

.sku-parameter-panel .sku-parameter-field-row > .plain-input,
.sku-parameter-panel .sku-parameter-field-row > .plain-select {
  width: 240px;
  min-width: 160px;
  max-width: 280px;
  flex: 0 1 240px;
}

@media (max-width: 720px) {
  .sku-parameter-panel .sku-parameter-field-copy {
    max-width: 100%;
    flex: 1 1 100%;
  }

  .sku-parameter-panel .sku-parameter-field-copy > button {
    max-width: 200px;
    flex-basis: 200px;
  }

  .sku-parameter-panel .sku-parameter-field-row > .plain-input,
  .sku-parameter-panel .sku-parameter-field-row > .plain-select {
    width: auto;
    max-width: 280px;
    flex: 1 1 160px;
  }
}
:root {
  --header-height: 88px;
  --layout-header-height: var(--header-height);
  --sidebar-width: 232px;
  --sidebar-collapsed-width: 72px;
  --header-brand-width: 272px;
  --bg: #f4f8fa;
  --surface: #ffffff;
  --surface-soft: #f8fbfc;
  --line: #dbe6eb;
  --line-strong: #c4d3dc;
  --text: #17242b;
  --muted: #5f7680;
  --soft-text: #8b9da6;
  --primary: #08a9a4;
  --primary-dark: #067d7a;
  --primary-soft: #e7f8f7;
  --blue: #2378d7;
  --blue-soft: #eaf4ff;
  --warning: #9b5a00;
  --warning-soft: #fff5df;
  --danger: #d94141;
  --danger-soft: #fff3f3;
  --shadow: 0 8px 22px rgba(21, 48, 59, 0.06);
  --theme-canvas: #f4f8fa;
  --theme-sidebar: #f7fbfc;
  --theme-surface: #ffffff;
  --theme-surface-raised: #f8fbfc;
  --theme-surface-elevated: #eef6f7;
  --theme-elevated: var(--theme-surface-elevated);
  --theme-control: #ffffff;
  --theme-border: #dbe6eb;
  --theme-border-strong: #c4d3dc;
  --theme-text: #17242b;
  --theme-text-strong: #102f39;
  --theme-on-accent: #ffffff;
  --theme-muted: #5f7680;
  --theme-active: #e7f8f7;
  --theme-hover: #f8fcfd;
  --theme-success: #eef6f3;
  --theme-success-text: #0c7e73;
  --theme-success-border: #b8dfda;
  --theme-warning: #fff5df;
  --theme-warning-text: #95620a;
  --theme-warning-border: #ead8a0;
  --theme-danger: #fff3f3;
  --theme-danger-text: #b74444;
  --theme-danger-border: #efb7b7;
  --theme-info: #eaf4ff;
  --theme-info-text: #2378d7;
  --theme-info-border: #bdd9f5;
  --theme-overlay: rgba(5, 20, 26, 0.82);
  --theme-overlay-control: rgba(255, 255, 255, 0.16);
  --theme-shadow: 0 8px 22px rgba(21, 48, 59, 0.06);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.ai-points-mark {
  position: relative;
  display: inline-flex;
  width: 13px;
  height: 13px;
  align-items: center;
  justify-content: center;
  flex: 0 0 13px;
  margin-left: 4px;
  border: 1px solid var(--theme-warning-border);
  border-radius: 50%;
  background: var(--theme-warning);
  color: var(--theme-warning-text);
  vertical-align: -2px;
  cursor: help;
}

.ai-points-mark::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 1200;
  width: max-content;
  max-width: 160px;
  padding: 5px 7px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-text-strong);
  color: var(--theme-surface);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.ai-points-mark:hover::after,
.ai-points-mark:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.inline-setting-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.balance-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(14, 31, 37, 0.46);
  backdrop-filter: blur(2px);
}

.balance-dialog {
  position: relative;
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid var(--theme-warning-border);
  border-radius: 8px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 20px 54px rgba(8, 26, 32, 0.24);
}

.balance-dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--theme-muted);
  font-size: 22px;
  cursor: pointer;
}

.balance-dialog-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 7px;
  background: var(--theme-warning);
  color: var(--theme-warning-text);
  font-size: 20px;
  font-weight: 800;
}

.balance-dialog-copy h2 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 20px;
}

.balance-dialog-copy p {
  margin: 6px 0 0;
  color: var(--theme-muted);
  font-size: 14px;
}

.balance-dialog-amounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.balance-dialog-amounts > div {
  padding: 12px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
}

.balance-dialog-amounts span,
.balance-dialog-amounts strong {
  display: block;
}

.balance-dialog-amounts span {
  color: var(--theme-muted);
  font-size: 12px;
}

.balance-dialog-amounts strong {
  margin-top: 4px;
  color: var(--theme-text-strong);
  font-size: 16px;
}

.balance-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.automation-quota-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1610;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(14, 31, 37, 0.5);
  backdrop-filter: blur(2px);
}

.automation-quota-dialog {
  position: relative;
  width: min(560px, 100%);
  padding: 22px;
  border: 1px solid var(--theme-warning-border);
  border-radius: 9px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 10px 28px rgba(8, 26, 32, 0.2);
}

.automation-quota-dialog.is-start_confirm {
  border-color: var(--theme-border-strong);
}

.automation-quota-dialog.is-start_confirm .automation-quota-dialog-icon {
  border: 1px solid var(--theme-border);
  background: var(--theme-active);
  color: var(--primary-dark);
}

.automation-quota-dialog-close {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--theme-muted);
  font-size: 22px;
  cursor: pointer;
}

.automation-quota-dialog-close:hover {
  background: var(--theme-hover);
  color: var(--theme-text-strong);
}

.automation-quota-dialog-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  padding-right: 30px;
}

.automation-quota-dialog-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 7px;
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.automation-quota-dialog-heading h2 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 19px;
  line-height: 1.35;
}

.automation-quota-dialog-heading p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.55;
}

.automation-quota-dialog-description {
  display: grid;
  gap: 4px;
  margin-top: 5px;
}

.automation-quota-dialog-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 17px 0 11px;
}

.automation-quota-dialog-counts > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
}

.automation-quota-dialog-counts span,
.automation-quota-dialog-counts strong {
  display: block;
}

.automation-quota-dialog-cost-breakdown {
  display: grid;
  gap: 6px;
  margin: 0 0 11px;
  padding: 9px 11px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  font-size: 12px;
}

.automation-quota-dialog-cost-breakdown > div {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.automation-quota-dialog-cost-breakdown > div > span:nth-child(2) {
  color: var(--theme-muted);
}

.automation-quota-dialog-cost-breakdown > div > strong {
  color: var(--theme-text-strong);
  text-align: right;
}

@media (max-width: 620px) {
  .automation-quota-dialog-cost-breakdown > div {
    grid-template-columns: 1fr auto;
  }

  .automation-quota-dialog-cost-breakdown > div > span:nth-child(2) {
    grid-column: 1 / -1;
  }
}

.automation-quota-dialog-counts span {
  color: var(--theme-muted);
  font-size: 11px;
}

.automation-quota-dialog-counts strong {
  margin-top: 3px;
  overflow: hidden;
  color: var(--theme-text-strong);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-quota-dialog-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.5;
}

.automation-quota-dialog-deadline {
  margin: 0 0 10px;
  color: var(--theme-warning-text);
  font-size: 12px;
  line-height: 1.5;
}

.automation-quota-dialog-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-height: 27px;
  margin-top: 9px;
}

.automation-quota-link-button {
  min-height: 27px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--theme-muted);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.automation-quota-link-button:hover {
  color: var(--primary-dark);
}

.automation-quota-dialog :is(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.automation-quota-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 13px;
}

.automation-quota-dialog :is(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  .automation-quota-dialog-backdrop {
    padding: 12px;
  }

  .automation-quota-dialog {
    padding: 18px;
  }

  .automation-quota-dialog-counts {
    grid-template-columns: 1fr;
  }

  .automation-quota-dialog-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .automation-quota-dialog-actions button {
    width: 100%;
  }
}

/* AI批量生图：用户视角重排版 */
.batch-image-hero-v2 {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  gap: 14px;
  padding: 18px 20px;
}

.batch-image-hero-v2 h1 {
  font-size: 27px;
}

.batch-image-hero-v2 p {
  max-width: 980px;
  font-size: 14px;
}

.batch-image-hero-v2 .batch-image-instance-card {
  min-height: 104px;
  align-content: center;
}

.batch-image-flow-strip-v2 {
  grid-template-columns: minmax(360px, 1.5fr) repeat(3, minmax(150px, .72fr));
  margin-bottom: 2px;
}

.batch-image-workbench-v2 {
  display: grid;
  gap: 12px;
}

.batch-image-workbench-v2 .panel {
  border: 1px solid #d3e2e7;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(18, 48, 60, .045);
}

.batch-image-demo-stage-v2 {
  grid-template-columns: minmax(150px, 210px) minmax(190px, .8fr) minmax(150px, 210px);
  gap: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 10%, rgba(8, 169, 164, .12), transparent 28%),
    linear-gradient(135deg, #f8fffe 0%, #f5fbfd 100%);
}

.batch-image-demo-stage-v2 .batch-image-demo-card {
  width: min(100%, 210px);
}

.batch-image-demo-bridge-v2 {
  align-self: stretch;
  align-content: center;
}

.demo-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 210px);
  min-height: 140px;
  border: 1px solid #cbe6e3;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(8,169,164,.10), rgba(35,120,215,.08)),
    #ffffff;
  overflow: hidden;
}

.demo-orbit::before,
.demo-orbit::after {
  position: absolute;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(8, 169, 164, .35);
  border-radius: 999px;
  content: "";
}

.demo-orbit::before {
  animation: batch-image-orbit-a 2.4s ease-in-out infinite;
}

.demo-orbit::after {
  animation: batch-image-orbit-b 2.4s ease-in-out infinite;
}

.demo-orbit span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 5px rgba(8, 169, 164, .12);
}

.demo-orbit span:first-child {
  left: 32px;
}

.demo-orbit span:last-child {
  right: 32px;
}

.demo-orbit b {
  position: relative;
  z-index: 1;
  padding: 7px 12px;
  border-radius: 999px;
  color: #08766f;
  background: #e8f8f6;
  font-size: 13px;
}

@keyframes batch-image-orbit-a {
  0%, 100% { transform: translateX(-40px) scale(.86); opacity: .45; }
  50% { transform: translateX(40px) scale(1.04); opacity: .95; }
}

@keyframes batch-image-orbit-b {
  0%, 100% { transform: translateX(40px) scale(1.04); opacity: .95; }
  50% { transform: translateX(-40px) scale(.86); opacity: .45; }
}

.batch-image-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 11px 14px;
}

.batch-image-form-grid .span-2 {
  grid-column: span 2;
}

.batch-image-inline-setting {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.batch-image-number-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.batch-image-number-row input {
  max-width: 96px;
  text-align: center;
}

.batch-image-number-row.compact input {
  max-width: 72px;
}

.batch-image-number-row span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.batch-image-cloud-grid {
  display: grid;
  grid-template-columns: minmax(250px, .85fr) minmax(220px, .65fr) minmax(360px, 1.2fr);
  gap: 14px;
  align-items: start;
}

.batch-image-gpu-list {
  display: grid;
  gap: 8px;
}

.batch-image-gpu-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid #d5e5e8;
  border-radius: 9px;
  color: var(--text);
  background: #fbfefe;
  text-align: left;
}

.batch-image-gpu-list button.active {
  border-color: #76d5ce;
  background: #eaf9f7;
  box-shadow: 0 8px 18px rgba(8, 169, 164, .08);
}

.batch-image-gpu-list strong {
  font-size: 13px;
}

.batch-image-gpu-list span {
  grid-column: 1;
  color: var(--muted);
  font-size: 12px;
}

.batch-image-gpu-list em {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #08766f;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.batch-image-estimate-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #bfe5e1;
  border-radius: 10px;
  background: linear-gradient(135deg, #f2fffc, #ffffff);
}

.batch-image-estimate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.batch-image-estimate-head b {
  color: var(--text);
  font-size: 14px;
}

.ghost-button.compact {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
}

.batch-image-estimate-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.batch-image-estimate-card dl div {
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: 8px;
  border: 1px solid #d8eaec;
  border-radius: 8px;
  background: #fff;
}

.batch-image-estimate-card dt {
  color: var(--muted);
  font-size: 12px;
}

.batch-image-estimate-card dd {
  margin: 0;
  color: #0c3f45;
  font-size: 16px;
  font-weight: 800;
}

.batch-image-cloud-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 10px 12px;
}

.batch-image-cloud-settings .batch-image-field:nth-child(1),
.batch-image-cloud-settings .batch-image-field:nth-child(2) {
  grid-column: span 3;
}

.batch-image-run-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.batch-image-run-flow button {
  min-height: 34px;
}

.batch-image-handoff-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) minmax(180px, .7fr) minmax(170px, .55fr);
  gap: 11px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e0ecef;
}

.batch-image-result-tags:empty {
  display: none;
}

@media (max-width: 1260px) {
  .batch-image-flow-strip-v2,
  .batch-image-cloud-grid,
  .batch-image-demo-stage-v2 {
    grid-template-columns: 1fr;
  }

  .batch-image-demo-stage-v2 .batch-image-demo-card,
  .demo-orbit {
    justify-self: center;
  }
}

@media (max-width: 920px) {
  .batch-image-hero-v2,
  .batch-image-form-grid,
  .batch-image-cloud-settings,
  .batch-image-handoff-grid {
    grid-template-columns: 1fr;
  }

  .batch-image-form-grid .span-2,
  .batch-image-cloud-settings .batch-image-field:nth-child(1),
  .batch-image-cloud-settings .batch-image-field:nth-child(2) {
    grid-column: auto;
  }
}

.douyin-local-page {
  display: grid;
  gap: 14px;
}

.douyin-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

.douyin-status-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
  box-shadow: 0 8px 22px rgba(15, 70, 75, 0.05);
}

.douyin-status-card span,
.douyin-facts span,
.report-path-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.douyin-status-card strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
}

.douyin-status-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.douyin-status-card.tone-success {
  border-color: rgba(12, 165, 154, 0.26);
  background: linear-gradient(180deg, #f6fffd, #fff);
}

.douyin-status-card.tone-warning {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(180deg, #fffbeb, #fff);
}

.douyin-status-card.tone-locked {
  border-color: rgba(239, 68, 68, 0.28);
  background: linear-gradient(180deg, #fff7f7, #fff);
}

.douyin-local-panel {
  padding: 16px 18px;
}

.douyin-package-form {
  display: grid;
  grid-template-columns: minmax(360px, 1.2fr) minmax(180px, 0.5fr) minmax(120px, 0.25fr);
  gap: 14px 16px;
  align-items: start;
}

.douyin-package-form .span-2 {
  grid-column: span 2;
}

.douyin-package-form .field {
  display: grid;
  gap: 6px;
}

.douyin-package-form .field > span {
  font-weight: 700;
  color: var(--text);
}

.douyin-package-form .field small,
.douyin-next-note {
  color: var(--muted);
  line-height: 1.5;
}

.douyin-package-form select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  color: var(--text);
}

.douyin-final-preflight-form {
  grid-template-columns: minmax(180px, 0.45fr) minmax(360px, 1fr) minmax(220px, 0.55fr);
}

.douyin-package-form .compact-number-field {
  max-width: 150px;
}

.douyin-single-product-toggle {
  align-self: end;
  min-height: 36px;
}

.douyin-fixed-rule {
  align-content: start;
}

.douyin-fixed-rule strong {
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(10, 148, 140, 0.28);
  border-radius: 8px;
  background: #f0fdfa;
  padding: 0 12px;
  color: #087f75;
  font-size: 14px;
}

.douyin-package-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.danger-outline-btn {
  border: 1px solid rgba(217, 65, 65, 0.42);
  border-radius: 8px;
  background: #fff8f8;
  color: var(--danger);
  padding: 9px 13px;
  font-weight: 700;
  cursor: pointer;
}

.danger-outline-btn:not(:disabled):hover {
  border-color: rgba(217, 65, 65, 0.68);
  background: #fff1f1;
}

.danger-outline-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.douyin-final-warning {
  margin: 8px 0 0;
  color: #8a4a15;
  font-size: 12px;
  line-height: 1.55;
}

.douyin-final-readiness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.douyin-final-readiness-grid > div {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfefe;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.douyin-final-readiness-grid span {
  color: var(--muted);
  font-size: 12px;
}

.douyin-final-readiness-grid strong {
  color: var(--text);
  font-size: 15px;
}

.douyin-final-readiness-grid small {
  color: var(--muted);
  line-height: 1.45;
  word-break: break-all;
}

.douyin-task-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.douyin-task-summary div {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 9px 10px;
}

.douyin-task-summary span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.douyin-task-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 15px;
}

.douyin-preflight-result {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfdfd;
}

.douyin-preflight-result.success {
  border-color: rgba(20, 184, 166, 0.32);
  background: #f0fdfa;
}

.douyin-preflight-result.warning {
  border-color: rgba(245, 158, 11, 0.35);
  background: #fffbeb;
}

.douyin-preflight-result > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

.panel-title-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.panel-title-row h2,
.douyin-next-grid h3 {
  margin: 0;
}

.panel-title-row p,
.douyin-next-grid p {
  margin: 6px 0 0;
}

.status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: #f7faf9;
}

.status-pill.success {
  color: #087f75;
  border-color: rgba(12, 165, 154, 0.35);
  background: #e9fbf8;
}

.status-pill.warning {
  color: #a16207;
  border-color: rgba(245, 158, 11, 0.35);
  background: #fffbeb;
}

.douyin-next-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.1fr);
  gap: 16px;
}

.compact-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text);
  line-height: 1.7;
}

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

.copy-line {
  display: grid;
  grid-template-columns: 64px minmax(260px, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.copy-line code,
.report-path-grid code {
  display: block;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fbfb;
  padding: 8px 10px;
  color: #164e4b;
  white-space: normal;
  overflow-wrap: anywhere;
}

.douyin-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.douyin-facts div {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfdfd;
  padding: 10px 12px;
}

.douyin-facts strong {
  display: block;
  margin-top: 5px;
  font-size: 15px;
}

.douyin-report-details summary {
  cursor: pointer;
  font-weight: 700;
}

.report-path-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 1180px) {
  .douyin-status-grid,
  .douyin-facts,
  .douyin-task-summary {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .douyin-next-grid {
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 760px) {
  .douyin-status-grid,
  .douyin-facts,
  .douyin-task-summary,
  .douyin-package-form,
  .copy-line {
    grid-template-columns: 1fr;
  }

  .douyin-final-readiness-grid {
    grid-template-columns: 1fr;
  }

  .douyin-package-form .compact-number-field {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-orbit::before,
  .demo-orbit::after {
    animation: none;
  }
}

.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid #cbdde0;
  border-radius: 999px;
  color: #45606a;
  background: #f7fbfb;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.status-pill.active {
  border-color: #94d9d3;
  color: #08766f;
  background: #e8f8f6;
}

.status-pill.muted {
  color: #6f8590;
  background: #f3f7f8;
}

.batch-image-page {
  display: grid;
  gap: 10px;
}

.batch-image-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 158px;
  gap: 12px;
  align-items: center;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #f9fffe 0%, #edfafa 56%, #f6f3ff 100%);
  box-shadow: var(--shadow);
}

.batch-image-hero h1 {
  margin: 4px 0 7px;
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: 0;
}

.batch-image-hero p {
  max-width: 1040px;
  color: var(--muted);
  line-height: 1.65;
}

.batch-image-instance-card {
  min-height: 66px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #045a67, #08a99d);
  box-shadow: 0 8px 18px rgba(8, 169, 164, 0.2);
  animation: instance-pop 260ms ease;
}

.batch-image-value-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.batch-image-value-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid #bfebe7;
  border-radius: 999px;
  color: #066d68;
  background: rgba(238, 252, 249, .86);
  font-size: 12px;
  font-weight: 800;
}

@keyframes instance-pop {
  from { transform: translateY(4px); opacity: .7; }
  to { transform: translateY(0); opacity: 1; }
}

.batch-image-instance-card span {
  display: inline-flex;
  width: fit-content;
  margin: 2px 0 5px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #043c3a;
  background: rgba(255, 246, 201, 0.92);
  font-size: 11px;
  font-weight: 800;
}

.batch-image-instance-card b {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
}

.batch-image-instance-card small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
}

.batch-image-flow-strip {
  display: grid;
  grid-template-columns: minmax(360px, 1.52fr) repeat(3, minmax(124px, .62fr));
  gap: 8px;
  padding: 9px;
  border: 1px solid #a9dbd7;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #f2fbfa);
  box-shadow: var(--shadow);
}

.flow-copy,
.flow-step {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #d9e9e8;
  border-radius: 8px;
  background: #f8fcfc;
}

.flow-copy {
  border-color: #9edfd7;
  background: linear-gradient(135deg, #e9fbf7, #ffffff);
}

.flow-copy b,
.flow-step strong {
  font-size: 14px;
  color: var(--text);
}

.flow-copy span,
.flow-step span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.flow-step.accent {
  border-color: #f0d9a2;
  background: #fff8e8;
}

.batch-image-workbench {
  display: grid;
  gap: 12px;
  align-items: start;
}

.batch-image-visual-panel,
.batch-image-task-panel,
.batch-image-command-panel,
.batch-image-settings-panel {
  display: grid;
  gap: 12px;
}

.batch-image-task-panel {
  order: 2;
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.batch-image-visual-panel {
  order: 1;
  min-width: 0;
}

.batch-image-command-panel {
  order: 4;
}

.batch-image-settings-panel {
  grid-column: 1 / -1;
  order: 3;
}

.batch-image-demo-stage {
  display: grid;
  grid-template-columns: minmax(120px, .72fr) minmax(150px, .86fr) minmax(120px, .72fr);
  gap: 10px;
  align-items: center;
  justify-items: center;
  padding: 10px;
  border: 1px solid #d3e9e7;
  border-radius: 10px;
  background: linear-gradient(135deg, #f5fffd 0%, #f8fbff 100%);
}

.batch-image-demo-card {
  width: min(100%, 176px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(18, 91, 89, .08);
}

.batch-image-demo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.batch-image-demo-card figcaption {
  padding: 6px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.batch-image-demo-bridge {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}

.batch-image-demo-bridge video {
  display: block;
  width: min(100%, 158px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid #b8dedb;
  border-radius: 10px;
  background: #e8f4f3;
  box-shadow: 0 10px 24px rgba(0, 168, 153, .15);
}

.batch-image-demo-flow {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  gap: 6px;
  align-items: center;
  padding: 5px 7px;
  border: 1px solid #cde8e5;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.batch-image-demo-flow b {
  position: relative;
  padding: 0 16px;
  color: var(--brand-dark);
  font-size: 12px;
}

.batch-image-demo-flow b::before,
.batch-image-demo-flow b::after {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 1px;
  background: #18b7aa;
  content: "";
}

.batch-image-demo-flow b::before {
  left: 0;
}

.batch-image-demo-flow b::after {
  right: 0;
}

.ai-video-page {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-bottom: 16px;
}

html[data-theme="dark"] {
  --bg: #111516;
  --surface: #181d1f;
  --surface-soft: #1e2527;
  --line: #303a3d;
  --line-strong: #465255;
  --text: #edf3f3;
  --muted: #a9b7b9;
  --soft-text: #7f9093;
  --primary: #20b8b1;
  --primary-dark: #72ddd7;
  --primary-soft: #15302f;
  --blue: #70aef6;
  --blue-soft: #182a3d;
  --warning: #f1bd66;
  --warning-soft: #352a17;
  --danger: #ff8585;
  --danger-soft: #3b2022;
  --shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
  --theme-canvas: #111516;
  --theme-sidebar: #151c1e;
  --theme-surface: #181f21;
  --theme-surface-raised: #1e2729;
  --theme-surface-elevated: #263133;
  --theme-elevated: var(--theme-surface-elevated);
  --theme-control: #12191b;
  --theme-border: #303c3f;
  --theme-border-strong: #465457;
  --theme-text: #edf4f3;
  --theme-text-strong: #f7fbfb;
  --theme-on-accent: #ffffff;
  --theme-muted: #a7b7b9;
  --theme-active: #153331;
  --theme-hover: #222d2f;
  --theme-success: #153331;
  --theme-success-text: #72ddd7;
  --theme-success-border: #37615e;
  --theme-warning: #352b18;
  --theme-warning-text: #f1bd66;
  --theme-warning-border: #6d5930;
  --theme-danger: #3b2325;
  --theme-danger-text: #ff9a9a;
  --theme-danger-border: #754548;
  --theme-info: #182a3d;
  --theme-info-text: #70aef6;
  --theme-info-border: #365672;
  --theme-overlay: rgba(5, 20, 26, 0.9);
  --theme-overlay-control: rgba(255, 255, 255, 0.16);
  --theme-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

.batch-image-history-entry {
  display: flex;
  margin-top: 10px;
}

.ai-video-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 8px;
}

.ai-video-page-head > div {
  display: grid;
  gap: 4px;
}

.ai-video-page-head-actions {
  display: flex !important;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 7px !important;
}

.ai-video-page-head-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  text-decoration: none;
}

.ai-video-page-head .crumb {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
}

.ai-video-page-head h1 {
  margin: 0;
  color: var(--text);
  font-size: 25px;
  line-height: 1.25;
}

.ai-video-page-head p {
  max-width: 900px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.ai-video-status-bar {
  position: sticky;
  top: 58px;
  z-index: 6;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid #cbe4e7;
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 18px rgba(20, 64, 78, .05);
}

.ai-video-status-bar p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
}

.ai-video-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 18px 20px;
  border: 1px solid #cde4e7;
  border-radius: 10px;
  background:
    radial-gradient(circle at 72% 20%, rgba(13, 172, 164, .13), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #effafa 62%, #f4f7ff 100%);
}

.ai-video-hero .crumb {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
}

.ai-video-hero h1 {
  max-width: 780px;
  margin: 6px 0 8px;
  color: var(--text);
  font-size: 28px;
  line-height: 1.22;
  letter-spacing: 0;
  text-wrap: balance;
}

.ai-video-hero p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.ai-video-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 280px;
}

.ai-video-hero-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #b8e5e2;
  border-radius: 999px;
  color: #066d68;
  background: #effcfb;
  font-size: 12px;
  font-weight: 700;
}

.ai-video-service-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid #dbe9ed;
  border-radius: 8px;
  color: #365b64;
  background: #fbfefe;
}

.ai-video-service-note strong {
  color: #08756f;
  font-size: 13px;
}

.ai-video-service-note span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.ai-video-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
  gap: 14px;
  align-items: start;
}

.ai-video-left-panel,
.ai-video-preview-panel {
  display: grid;
  gap: 13px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #d6e6ea;
  border-radius: 10px;
  background: #fff;
}

.ai-video-preview-panel {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 86px);
  overflow: auto;
  background: #fff;
}

.ai-video-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.ai-video-mode-row p {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-video-tabs,
.ai-video-inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ai-video-inline-options.wrap {
  gap: 7px 8px;
}

.ai-video-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid #c7dde2;
  border-radius: 8px;
  color: #35565f;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ai-video-chip.active {
  border-color: var(--primary);
  color: #fff;
  background: var(--primary);
}

.ai-video-chip:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.ai-video-section {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #e2edf0;
}

.ai-video-section h2 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.ai-video-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-video-section-title-row > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.ai-video-template-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ai-video-type-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.ai-video-type-card {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 9px 10px;
  border: 1px solid #d7e6ea;
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.ai-video-type-card.active {
  border-color: #55c8c1;
  background: #effbf9;
}

.ai-video-type-card strong {
  font-size: 13px;
  line-height: 1.35;
}

.ai-video-type-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ai-video-type-card-head > span {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.ai-video-type-card-head > span.available {
  color: #087f78;
  background: #e7f8f5;
}

.ai-video-type-card-head > span.unavailable {
  color: #68777d;
  background: #eef3f4;
}

.ai-video-type-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ai-video-template-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px dashed #bdd7dc;
  border-radius: 8px;
  color: var(--text);
  background: #f8fbfc;
}

.ai-video-template-empty strong {
  font-size: 13px;
}

.ai-video-template-empty span {
  color: var(--muted);
  font-size: 12px;
}

.ai-video-upload-box {
  display: block;
  width: 100%;
  padding: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
  text-align: left;
}

.ai-video-upload-box:focus-visible {
  outline: 2px solid rgba(0, 166, 156, .35);
  outline-offset: 3px;
}

.ai-video-upload-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 14px;
  border: 1px dashed #9fd8d5;
  border-radius: 9px;
  color: #4b6d76;
  background: #f7fbfb;
  text-align: center;
}

.ai-video-upload-empty svg {
  color: var(--primary);
}

.ai-video-upload-empty strong {
  color: var(--text);
  font-size: 13px;
}

.ai-video-upload-empty span {
  max-width: 280px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.ai-video-upload-preview {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: 1px solid #cde2e6;
  border-radius: 9px;
  background: #eef3f4;
}

.ai-video-upload-preview img,
.ai-video-upload-preview video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #edf2f3;
}

.ai-video-upload-preview figcaption {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  background: #fff;
  text-align: left;
}

.ai-video-upload-preview figcaption strong,
.ai-video-upload-preview figcaption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-video-upload-preview figcaption strong {
  color: var(--text);
  font-size: 12px;
}

.ai-video-upload-preview figcaption span {
  color: var(--muted);
  font-size: 11px;
}

.ai-video-media-picker {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.ai-video-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 220px));
  gap: 12px;
  align-items: start;
  justify-content: start;
}

.ai-video-media-slot {
  display: grid;
  gap: 7px;
  min-width: 0;
  width: 100%;
}

.ai-video-media-slot-head {
  display: grid;
  gap: 3px;
}

.ai-video-field-title-line {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0;
}

.ai-video-field-title-line > .required-field-mark,
.ai-video-path-field .ai-video-field-title-line > .required-field-mark {
  color: var(--theme-danger-text);
  font-size: 11px;
}

.ai-video-media-slot-head strong {
  color: var(--text);
  font-size: 13px;
}

.ai-video-media-slot-head span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.ai-video-media-slot.has-required-error .ai-video-upload-box {
  border-color: var(--theme-danger-border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger-border) 24%, transparent);
}

.ai-video-source-composer {
  display: grid;
  gap: 14px;
  align-items: start;
}

.ai-video-source-composer.single-input {
  grid-template-columns: minmax(190px, 220px) minmax(280px, 1fr);
}

.ai-video-source-composer.multi-input {
  grid-template-columns: 1fr;
}

.ai-video-source-composer.single-input .ai-video-media-grid {
  grid-template-columns: minmax(190px, 220px);
}

.ai-video-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-video-media-actions .secondary-button.compact {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

.ai-video-media-source-details {
  color: var(--muted);
  font-size: 12px;
}

.ai-video-media-source-details summary {
  width: fit-content;
  color: #517079;
  cursor: pointer;
}

.ai-video-media-source-fields {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.ai-video-media-source-fields label {
  display: grid;
  gap: 4px;
}

.ai-video-media-source-fields label > span {
  color: var(--muted);
  font-size: 11px;
}

.ai-video-media-source-fields input {
  width: 100%;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #cbdde3;
  border-radius: 7px;
  color: var(--text);
  background: #fff;
}

.ai-video-batch-composer {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(210px, .85fr);
  gap: 14px;
  align-items: start;
}

.ai-video-batch-core {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(148px, 178px);
  gap: 12px;
  align-items: start;
}

.ai-video-number-field {
  display: grid;
  gap: 6px;
}

.ai-video-number-field > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.ai-video-number-field input {
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #cbdde3;
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  font: inherit;
}

.ai-video-number-field small,
.ai-video-batch-model-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.ai-video-batch-shared-media {
  min-width: 0;
}

.ai-video-batch-model-hint {
  display: block;
  margin-top: 8px;
}

.ai-video-path-stack {
  display: grid;
  gap: 10px;
}

.ai-video-section-note {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.ai-video-path-field,
.ai-video-setting-grid label {
  display: grid;
  gap: 6px;
}

.ai-video-path-field.compact {
  gap: 4px;
}

.ai-video-path-field span,
.ai-video-setting-grid label > span {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.ai-video-path-field input,
.ai-video-setting-grid textarea {
  width: 100%;
  border: 1px solid #cbdde3;
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  font: inherit;
}

.ai-video-path-field input {
  min-height: 34px;
  padding: 6px 9px;
}

.ai-video-path-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ai-video-path-actions .secondary-button {
  min-height: 34px;
  padding: 6px 12px;
  white-space: nowrap;
}

.ai-video-setting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ai-video-setting-grid .wide {
  grid-column: 1 / -1;
}

.ai-video-setting-grid textarea {
  min-height: 92px;
  padding: 9px 10px;
  line-height: 1.6;
  resize: vertical;
}

.ai-video-prompt-layout {
  display: grid;
}

.ai-video-prompt-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ai-video-output-field {
  display: grid;
  grid-template-columns: minmax(210px, .72fr) minmax(360px, 1.28fr);
  gap: 12px;
  align-items: end;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #d7e6e9;
  border-radius: 7px;
  background: #f9fcfc;
}

.ai-video-output-field > div:first-child {
  display: grid;
  gap: 3px;
}

.ai-video-output-field strong {
  font-size: 13px;
}

.ai-video-output-field span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ai-video-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-video-prompt-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.ai-video-prompt-head span {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #08756f;
  background: #e8f8f6;
  font-size: 11px;
  font-weight: 700;
}

.ai-video-prompt-head .required-field-mark {
  min-height: 16px;
  padding: 0 4px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 4px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  line-height: 14px;
}

.ai-video-prompt-card textarea {
  width: 100%;
  min-height: 176px;
  padding: 10px 11px;
  border: 1px solid #cbdde3;
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}

.ai-video-copy-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  min-height: 29px;
  padding: 4px 9px;
  border: 1px solid #cbdde3;
  border-radius: 7px;
  color: #45646d;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}

.ai-video-action-row {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 0 -16px -16px;
  padding: 11px 16px;
  border-top: 1px solid #d9e8eb;
  border-radius: 0 0 10px 10px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -8px 18px rgba(18, 56, 64, .06);
  backdrop-filter: blur(8px);
}

.ai-video-action-row button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ai-video-action-status {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 220px;
  overflow: visible;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
}

.ai-video-validation-summary {
  width: fit-content;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 6px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 12px;
  font-weight: 700;
}

.ai-video-online-note {
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.45;
}

.ai-video-online-note .setting-help-link {
  margin-left: 4px;
}

.ai-video-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.ai-video-unavailable-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d8e7ea;
  border-radius: 8px;
  color: #55717a;
  background: #f6fafb;
  font-size: 13px;
  font-weight: 700;
}

.ai-video-preview-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.ai-video-preview-heading span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
}

.ai-video-preview-heading h2 {
  margin: 4px 0 6px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.ai-video-preview-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.ai-video-ratio-pill {
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid #bfe8e4;
  border-radius: 999px;
  background: #e7f8f7;
}

.ai-video-player-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid #d8e8eb;
  border-radius: 14px;
  background: #f2f6f7;
  cursor: zoom-in;
}

.ai-video-player-frame video {
  width: min(100%, 320px);
  max-height: 474px;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: 12px;
  background: #dce8eb;
  box-shadow: 0 12px 28px rgba(18, 56, 64, .14);
}

.ai-video-state-frame {
  padding: 32px;
  cursor: default;
}

.ai-video-generation-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(100%, 430px);
  text-align: center;
}

.ai-video-generation-state strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
}

.ai-video-generation-state p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.ai-video-generation-state time {
  color: #08756f;
  font-size: 12px;
  font-weight: 700;
}

.ai-video-generation-motion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 64px;
  height: 48px;
  margin-bottom: 2px;
}

.ai-video-generation-motion span {
  width: 7px;
  height: 30px;
  border-radius: 999px;
  background: var(--primary);
  animation: ai-video-generation-pulse 1.1s ease-in-out infinite;
  transform-origin: center;
}

.ai-video-generation-motion span:nth-child(2) {
  animation-delay: 140ms;
}

.ai-video-generation-motion span:nth-child(3) {
  animation-delay: 280ms;
}

.ai-video-state-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #e4a9a5;
  border-radius: 50%;
  color: #b5473d;
  background: #fff5f4;
  font-size: 22px;
  font-weight: 800;
}

.ai-video-generation-state.timeout .ai-video-state-mark {
  border-color: #e5c178;
  color: #9a6500;
  background: #fff9eb;
}

.ai-video-generation-state .secondary-button {
  margin-top: 4px;
}

@keyframes ai-video-generation-pulse {
  0%, 100% {
    opacity: .34;
    transform: scaleY(.45);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

.ai-video-preview-open {
  position: absolute;
  right: 16px;
  bottom: 16px;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid rgba(8, 169, 164, .38);
  border-radius: 999px;
  color: var(--primary-dark);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 26px rgba(18, 56, 64, .16);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.ai-video-preview-open:hover {
  color: #fff;
  background: var(--primary);
}

.ai-video-preview-details {
  display: grid;
  border-top: 1px solid #e1ecef;
}

.ai-video-preview-details > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #e1ecef;
}

.ai-video-preview-details strong {
  color: var(--text);
  font-size: 12px;
}

.ai-video-preview-details span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.ai-video-result-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.ai-video-result-strip div,
.ai-video-example-row article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #dae9ec;
  border-radius: 9px;
  background: #fbfefe;
}

.ai-video-result-strip strong,
.ai-video-example-row strong {
  color: var(--text);
  font-size: 13px;
}

.ai-video-result-strip span,
.ai-video-example-row p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.ai-video-check-summary {
  display: grid;
  gap: 7px;
  padding: 12px 14px;
  border: 1px solid #cbe5e8;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(8, 169, 164, .10), rgba(255, 255, 255, .92));
}

.ai-video-check-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-video-check-summary span {
  color: var(--muted);
  font-size: 12px;
}

.ai-video-check-summary strong {
  color: var(--primary-dark);
  font-size: 14px;
}

.ai-video-check-summary p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}

.ai-video-check-summary .warning {
  color: #b46b00;
}

.ai-video-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.ai-video-result-actions .secondary-button {
  min-height: 32px;
  padding: 6px 11px;
}

.ai-video-result-actions a.secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.ai-video-result-actions-standalone {
  padding-top: 2px;
}

.ai-video-example-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.ai-video-example-row article span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #fff;
  background: var(--primary);
  font-size: 12px;
  font-weight: 800;
}

.ai-video-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(12, 32, 38, .58);
  backdrop-filter: blur(6px);
}

.ai-video-preview-modal-card {
  display: grid;
  gap: 14px;
  width: min(92vw, 720px);
  max-height: 92vh;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 18px;
  background: #f9feff;
  box-shadow: 0 26px 70px rgba(3, 31, 36, .34);
}

.ai-video-preview-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ai-video-preview-modal-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ai-video-preview-modal-head span {
  color: var(--muted);
  font-size: 12px;
}

.ai-video-preview-modal-head strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.3;
}

.ai-video-preview-modal-head button {
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid #c9dce0;
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.ai-video-preview-modal-stage {
  display: grid;
  place-items: center;
  min-height: 420px;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 20% 18%, rgba(8, 169, 164, .14), transparent 30%),
    #edf7f8;
}

.ai-video-preview-modal-stage video,
.ai-video-preview-modal-stage img {
  width: min(100%, 360px);
  max-height: calc(92vh - 130px);
  object-fit: contain;
  border-radius: 16px;
  background: #dce8eb;
  box-shadow: 0 18px 42px rgba(18, 56, 64, .20);
}

.ai-video-preview-modal-stage video {
  aspect-ratio: 9 / 16;
}

.ai-video-preview-modal-stage img {
  width: min(100%, 720px);
}

@media (max-width: 1180px) {
  .ai-video-workbench {
    grid-template-columns: 1fr;
  }

  .ai-video-preview-panel {
    position: static;
    max-height: none;
  }

  .ai-video-player-frame {
    min-height: 390px;
  }
}

@media (max-width: 720px) {
  .ai-video-preview-modal {
    padding: 14px;
  }

  .ai-video-preview-modal-stage {
    min-height: 360px;
  }

  .ai-video-preview-modal-stage video,
  .ai-video-preview-modal-stage img {
    width: min(100%, 300px);
  }
}

@media (max-width: 820px) {
  .ai-video-status-bar,
  .ai-video-hero,
  .ai-video-result-strip,
  .ai-video-example-row,
  .ai-video-type-list,
  .ai-video-setting-grid,
  .ai-video-source-composer.single-input,
  .ai-video-batch-composer,
  .ai-video-batch-core {
    grid-template-columns: 1fr;
  }

  .ai-video-hero-badges {
    justify-content: flex-start;
  }

  .ai-video-mode-row,
  .ai-video-action-row {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-video-mode-row p {
    text-align: left;
    white-space: normal;
  }

  .ai-video-action-buttons {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-video-generation-motion span {
    animation: none;
    opacity: .75;
    transform: none;
  }
}

.batch-image-motion {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid #d8e9e7;
  border-radius: 8px;
  background: #f7fcfb;
}

.batch-image-motion b {
  font-size: 13px;
}

.batch-image-motion span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.batch-image-form-grid {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(150px, .78fr) minmax(116px, .6fr);
  gap: 7px 8px;
  align-items: start;
}

.batch-image-task-sections {
  display: grid;
  gap: 9px;
}

.batch-image-inline-section {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 10px 14px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid #d9e8e6;
  border-radius: 8px;
  background: #fbfdfd;
}

.batch-image-inline-section h3 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.batch-image-inline-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: flex-start;
}

.batch-image-inline-grid .batch-image-field {
  flex: 0 1 auto;
}

.batch-image-inline-grid .main-path {
  flex: 1 1 420px;
  max-width: 680px;
}

.batch-image-inline-grid .list-file {
  flex: 1 1 300px;
  max-width: 460px;
}

.batch-image-inline-grid .workflow-field {
  flex: 0 1 280px;
}

.batch-image-inline-grid .alias-field {
  flex: 0 0 118px;
}

.batch-image-inline-grid .option-field {
  flex: 0 1 auto;
  min-width: 220px;
}

.batch-image-basic-grid {
  display: grid;
  grid-template-columns: minmax(270px, 1.1fr) minmax(230px, .9fr) minmax(220px, .75fr) minmax(120px, .35fr);
  gap: 8px 10px;
  align-items: start;
}

.batch-image-settings-sections {
  display: grid;
  gap: 10px;
}

.batch-image-settings-section {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px 14px;
  align-content: start;
  padding: 10px 12px;
  border: 1px solid #d9e8e6;
  border-radius: 8px;
  background: #fbfdfd;
}

.batch-image-settings-section h3 {
  margin: 0;
  padding-top: 4px;
  color: var(--text);
  font-size: 14px;
}

.batch-image-compact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: flex-start;
}

.batch-image-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.batch-image-field.path-field {
  grid-column: span 2;
}

.batch-image-field.medium-path {
  grid-column: span 2;
}

.batch-image-field.compact-path {
  grid-column: span 1;
}

.batch-image-basic-grid .path-field {
  grid-column: span 2;
}

.batch-image-basic-grid .wide-field {
  grid-column: span 1;
  min-width: 0;
}

.batch-image-basic-grid .short-field {
  grid-column: span 1;
  max-width: 150px;
}

.batch-image-compact-grid .batch-image-field {
  flex: 1 1 180px;
}

.batch-image-compact-grid .medium-field {
  flex: 0 1 198px;
}

.batch-image-compact-grid .wide-field {
  flex: 0 1 260px;
}

.batch-image-compact-grid .wide-option {
  flex-basis: 100%;
}

.batch-image-compact-grid .path-field {
  flex: 1 1 360px;
  max-width: 620px;
}

.batch-image-compact-grid .medium-path {
  flex: 0 1 330px;
  max-width: 440px;
}

.batch-image-compact-grid .short-number,
.batch-image-compact-grid .tiny-field {
  flex: 0 1 116px;
}

.batch-image-compact-grid .short-number input,
.batch-image-compact-grid .tiny-field input {
  max-width: 96px;
}

.batch-image-compact-grid .switch-field {
  flex: 0 1 auto;
  min-width: 150px;
}

.batch-image-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.batch-image-field input,
.batch-image-field select {
  width: 100%;
  height: 32px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
}

.batch-image-path-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 4px;
}

.icon-file-button {
  width: 30px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b8d7d8;
  border-radius: 7px;
  color: var(--primary-dark);
  background: #f7fcfc;
}

.batch-image-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  padding: 2px;
  border: 1px solid #b8d7d8;
  border-radius: 8px;
  background: #f7fcfc;
}

.batch-image-segmented button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  color: #45646d;
  background: transparent;
  white-space: nowrap;
}

.batch-image-segmented button.active {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 6px 14px rgba(8, 169, 164, .18);
}

/* AI口播视频一键成片：按生成流程组织 */
.video-single-flow-page {
  padding-bottom: 78px;
}

.video-single-flow-page .video-single-hero {
  padding: 18px 20px;
}

.video-single-flow-page .video-single-hero h1 {
  font-size: 25px;
}

.video-single-flow-page .video-single-hero p {
  max-width: 980px;
}

.video-single-flow-page .single-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.video-single-flow-page .single-flow-step {
  align-items: center;
  background: #fff;
  border: 1px solid #d4e4ea;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
}

.video-single-flow-page .single-flow-step > span {
  align-items: center;
  background: var(--primary);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.video-single-flow-page .single-flow-step strong {
  display: block;
  font-size: 13px;
}

.video-single-flow-page .single-flow-step small {
  color: #5f7680;
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.video-single-flow-page .video-single-flow-grid {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(760px, 1fr) minmax(410px, 480px);
}

.video-single-flow-page .video-single-flow-main {
  display: grid;
  gap: 12px;
}

.video-single-flow-page .panel.dense {
  padding: 0;
  overflow: hidden;
}

.video-single-flow-page .single-panel-head {
  align-items: center;
  background: linear-gradient(180deg, #fff, #fbfeff);
  border-bottom: 1px solid #dbe6eb;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin: 0;
  padding: 13px 15px 11px;
}

.video-single-flow-page .single-panel-head h2 {
  font-size: 17px;
}

.video-single-flow-page .single-panel-head p {
  color: #5f7680;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 3px;
}

.video-single-flow-page .single-flow-body {
  padding: 13px 15px;
}

.video-single-flow-page .status-badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 24px;
  padding: 0 9px;
  white-space: nowrap;
}

.video-single-flow-page .status-badge.warning {
  background: #fff3df;
  color: #a75b00;
}

.video-single-flow-page .single-material-row {
  align-items: stretch;
  display: grid;
  gap: 10px;
  grid-template-columns:
    minmax(205px, 220px)
    minmax(360px, 1fr)
    minmax(320px, 340px);
}

.video-single-flow-page .single-upload-drop {
  align-content: start;
  background: #f0fffd;
  border: 1px dashed #8fd8d5;
  border-radius: 9px;
  display: grid;
  gap: 8px;
  justify-items: stretch;
  min-width: 0;
  min-height: 84px;
  padding: 10px 12px;
}

.video-single-flow-page .single-upload-drop.has-required-error {
  border-color: var(--theme-danger-border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger-border) 24%, transparent);
}

.video-single-flow-page .single-upload-required-title,
.video-single-flow-page .single-panel-action-with-help,
.video-single-flow-page .single-upload-action-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.video-single-flow-page .single-upload-required-title {
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 4px;
  white-space: normal;
}

.video-single-flow-page .single-panel-action-with-help {
  justify-content: flex-end;
}

.video-single-flow-page .single-upload-drop > .secondary-button {
  width: 100%;
}

.video-single-flow-page .single-upload-action-row {
  justify-content: space-between;
  width: 100%;
}

.video-single-flow-page .single-upload-action-row .mini-button {
  flex: 1 1 auto;
}

.video-single-flow-page .single-upload-drop small {
  color: #58707a;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.video-single-flow-page .single-media-board {
  background: #fbfeff;
  border: 1px solid #d7e8ec;
  border-radius: 9px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
}

.video-single-flow-page .single-media-board-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.video-single-flow-page .single-media-board-head strong {
  color: #203942;
  font-size: 13px;
}

.video-single-flow-page .single-media-board-head span {
  color: #5f7680;
  font-size: 12px;
}

.video-single-flow-page .single-media-tray {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.video-single-flow-page .single-media-empty {
  align-items: center;
  background: #f4fafb;
  border: 1px dashed #bad7df;
  border-radius: 8px;
  box-sizing: border-box;
  color: #5f7680;
  display: flex;
  flex: 1 1 100%;
  font-size: 12px;
  justify-content: center;
  min-height: 86px;
  min-width: 0;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.video-single-flow-page .single-media-card {
  background: #fff;
  border: 1px solid #d7e8ec;
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  width: 168px;
}

.video-single-flow-page .single-media-thumb {
  align-items: center;
  background: linear-gradient(135deg, rgba(8,169,164,.12), rgba(45,122,190,.10));
  border: 1px solid #c9e2e8;
  border-radius: 7px;
  color: #0a7d78;
  cursor: pointer;
  display: grid;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.video-single-flow-page .single-media-thumb img,
.video-single-flow-page .single-media-thumb video {
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  width: 100%;
}

.video-single-flow-page .single-media-thumb span {
  align-self: end;
  background: rgba(17, 42, 50, .76);
  border-radius: 999px;
  color: #fff;
  justify-self: center;
  margin: 0 0 7px;
  padding: 3px 9px;
  position: relative;
}

.video-single-flow-page .single-media-meta {
  min-width: 0;
}

.video-single-flow-page .single-media-meta strong,
.video-single-flow-page .single-media-meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-single-flow-page .single-media-meta strong {
  color: #203942;
  font-size: 12px;
}

.video-single-flow-page .single-media-meta small {
  color: #5f7680;
  font-size: 11px;
  margin-top: 2px;
}

.video-single-flow-page .single-media-remove {
  background: transparent;
  border: 0;
  color: #d65353;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  justify-self: start;
  padding: 0;
}

.video-single-flow-page .single-save-stack {
  align-content: start;
  align-self: start;
  background: #fbfeff;
  border: 1px solid #d7e8ec;
  border-radius: 9px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
}

.video-single-flow-page .single-material-list {
  display: grid;
  gap: 7px;
}

.video-single-flow-page .single-material-item {
  background: #fbfeff;
  border: 1px solid #d7e8ec;
  border-radius: 8px;
  display: grid;
  gap: 3px;
  min-height: 38px;
  padding: 7px 9px;
}

.video-single-flow-page .single-material-item strong {
  color: #203942;
  font-size: 12px;
}

.video-single-flow-page .single-material-item b {
  color: #087d78;
}

.video-single-flow-page .single-material-item span {
  color: #5f7680;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-single-flow-page .single-template-row {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  margin-top: 0;
}

.video-single-flow-page .single-template-row .field {
  grid-column: 1 / -1;
  margin: 0;
}

.video-single-flow-page .single-template-row > button:first-of-type {
  grid-column: 2;
}

.video-single-flow-page .single-template-row > button:last-of-type {
  grid-column: 3;
}

.video-single-flow-page .single-template-row select {
  height: 36px;
  max-width: 100%;
}

.video-single-flow-page .single-template-row > button {
  height: 36px;
  white-space: nowrap;
}

.video-single-flow-page .field-title-with-help {
  max-width: 100%;
  flex-wrap: wrap;
  row-gap: 4px;
}

.video-single-flow-page .interactive-help-tip-anchor {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
}

.video-single-flow-page .help-dot.interactive-help-tip {
  box-sizing: border-box;
  flex: 0 0 17px;
  width: 17px;
  min-width: 17px;
  max-width: 17px;
  height: 17px;
  min-height: 17px;
  max-height: 17px;
  margin-left: 0;
  padding: 0;
  aspect-ratio: 1;
  line-height: 1;
}

.video-single-flow-page .single-scheme-flow-grid {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(156px, .78fr) minmax(222px, 1fr) minmax(210px, .95fr) minmax(142px, .7fr);
}

.video-single-flow-page .segmented-orange button.selected {
  background: #f28a18;
  border-color: #f28a18;
}

.video-single-flow-page .segmented button:disabled {
  background: #edf3f5;
  box-shadow: none;
  color: #8a9aa2;
  cursor: not-allowed;
  opacity: .78;
}

.video-single-flow-page .single-copy-voice-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  padding: 13px 15px;
}

.video-single-flow-page .single-copy-top-grid {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.video-single-flow-page .single-copy-top-grid .field {
  flex: 1 1 150px;
  min-width: 150px;
}

.video-single-flow-page .single-copy-top-grid .field:first-child {
  flex-basis: 220px;
}

.video-single-flow-page .single-copy-top-grid .mini-field {
  max-width: 132px;
}

.video-single-flow-page .single-copy-column {
  min-width: 0;
}

.video-single-flow-page .single-copy-textarea {
  min-height: 160px;
  resize: vertical;
}

.video-single-flow-page .single-copy-foot {
  align-items: end;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 8px;
}

.video-single-flow-page .single-copy-foot > span {
  color: #5f7680;
  font-size: 12px;
  padding-bottom: 10px;
}

.video-single-flow-page .single-copy-generate-status {
  border-radius: 8px;
  color: #4c6770;
  flex: 1 1 240px;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
  min-width: 220px;
  padding: 7px 9px;
}

.video-single-flow-page .single-copy-generate-status.running {
  background: #e9f9f6;
  color: #087d78;
}

.video-single-flow-page .single-copy-generate-status.success {
  background: #e9f9ef;
  color: #16803d;
}

.video-single-flow-page .single-copy-generate-status.warning,
.video-single-flow-page .single-copy-generate-status.error {
  background: #fff2ec;
  color: #b5411d;
}

.video-single-flow-page .single-voice-column {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.video-single-flow-page .single-voice-head .field {
  max-width: 330px;
}

.video-single-flow-page .single-voice-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.video-single-flow-page .voice-card {
  background: #fbfeff;
  border: 1px solid #d4e6ea;
  border-radius: 8px;
  color: #17242b;
  display: block;
  height: auto;
  min-height: 58px;
  padding: 9px 10px;
  text-align: left;
}

.video-single-flow-page .voice-card.selected {
  background: #effbf9;
  border-color: #62cfc8;
  box-shadow: inset 0 0 0 1px rgba(8, 169, 164, .1);
}

.video-single-flow-page .voice-card strong {
  display: block;
  font-size: 13px;
}

.video-single-flow-page .voice-card span {
  color: #5f7680;
  display: block;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 4px;
}

.video-single-flow-page .single-voice-tuning-grid {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, max-content);
}

.video-single-flow-page .single-tuning-grid {
  align-items: end;
  display: grid;
  gap: 10px 14px;
  grid-template-columns: repeat(6, minmax(88px, max-content));
}

.video-single-flow-page .single-tuning-grid .single-wide-field {
  grid-column: span 2;
  min-width: 260px;
}

.video-single-flow-page .single-tuning-grid .single-path-field {
  grid-column: span 3;
  min-width: 360px;
}

.video-single-flow-page .compact-checks {
  align-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: 34px;
}

.video-single-flow-page .single-preview-panel {
  position: sticky;
  top: 12px;
}

.video-single-flow-page .single-preview-box {
  display: grid;
  gap: 12px;
  padding: 13px 15px;
}

.video-single-flow-page .single-phone-frame {
  background: #f7fcfd;
  border: 9px solid #203b45;
  border-radius: 24px;
  box-shadow: 0 14px 24px rgba(23, 36, 43, .14);
  color: #5f7680;
  display: grid;
  gap: 8px;
  margin: 0 auto;
  max-width: 360px;
  padding: 12px;
  place-items: center;
  white-space: pre-line;
  width: min(100%, 360px);
}

.video-single-flow-page .single-phone-frame .preview-canvas:disabled {
  cursor: default;
  opacity: .92;
}

.video-single-flow-page .single-phone-frame .preview-canvas {
  align-items: center;
  appearance: none;
  background: linear-gradient(180deg, rgba(8,169,164,.10), rgba(35,120,215,.08));
  border: 1px dashed #b9d6df;
  border-radius: 14px;
  color: #5f7680;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: center;
  width: 100%;
}

.video-single-flow-page .single-phone-frame .preview-canvas img,
.video-single-flow-page .single-phone-frame .preview-canvas video {
  height: 100%;
  inset: 0;
  object-fit: contain;
  position: absolute;
  width: 100%;
}

.video-single-flow-page .single-phone-frame .preview-play-pill {
  background: rgba(23, 36, 43, .86);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
  padding: 5px 12px;
  position: relative;
  z-index: 1;
}

.video-single-flow-page .single-preview-download {
  background: rgba(23, 36, 43, .90);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  min-height: 30px;
  padding: 6px 8px;
  text-align: center;
  width: 100%;
}

.video-single-flow-page .single-preview-download:disabled {
  background: #c7d6db;
  color: #f7fbfc;
  cursor: not-allowed;
}

.video-single-flow-page .single-media-modal {
  align-items: center;
  background: rgba(12, 24, 29, .62);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 28px;
  position: fixed;
  z-index: 70;
}

.video-single-flow-page .single-media-modal-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  display: grid;
  gap: 10px;
  max-height: 92vh;
  max-width: min(980px, 94vw);
  padding: 14px;
  width: min(920px, 94vw);
}

.video-single-flow-page .single-media-modal-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.video-single-flow-page .single-media-modal-head strong {
  color: #17242b;
  font-size: 16px;
}

.video-single-flow-page .single-media-modal-head button {
  background: #f3f8f9;
  border: 1px solid #cbdde2;
  border-radius: 8px;
  color: #203942;
  cursor: pointer;
  font-weight: 800;
  height: 32px;
  padding: 0 12px;
}

.video-single-flow-page .single-media-modal-body {
  align-items: center;
  background: #ecf4f6;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  min-height: min(640px, 76vh);
  overflow: hidden;
  padding: 18px;
}

.video-single-flow-page .single-media-modal-viewer {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 44px minmax(0, auto) 44px;
  justify-content: center;
  width: 100%;
}

.video-single-flow-page .single-media-modal-arrow {
  align-items: center;
  background: rgba(255, 255, 255, .9);
  border: 1px solid #cbdde2;
  border-radius: 999px;
  color: #0f6967;
  cursor: pointer;
  display: inline-flex;
  font-size: 34px;
  font-weight: 700;
  height: 56px;
  justify-content: center;
  line-height: 1;
  width: 44px;
}

.video-single-flow-page .single-media-modal-arrow:hover:not(:disabled) {
  background: #0aa7a2;
  border-color: #0aa7a2;
  color: #fff;
}

.video-single-flow-page .single-media-modal-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.video-single-flow-page .single-media-modal-stage {
  align-items: center;
  background: #102227;
  border-radius: 10px;
  display: flex;
  height: min(72vh, 720px);
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}

.video-single-flow-page .single-media-modal-stage img,
.video-single-flow-page .single-media-modal-stage video {
  background: #102227;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.video-single-flow-page .single-media-modal-card p {
  color: #5f7680;
  font-size: 12px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-single-flow-page .preview-summary {
  display: grid;
  gap: 8px;
}

.video-single-flow-page .preview-summary > div {
  align-items: center;
  background: #fbfeff;
  border: 1px solid #d8e7eb;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 9px 10px;
}

.video-single-flow-page .preview-summary dt,
.video-single-flow-page .preview-summary dd {
  font-size: 12px;
  margin: 0;
}

.video-single-flow-page .preview-summary dd {
  color: #5f7680;
}

.video-single-flow-page .video-single-action-dock {
  align-items: center;
  background: rgba(245, 254, 253, .96);
  border: 1px solid #a9dcd8;
  border-radius: 10px;
  bottom: 16px;
  box-shadow: 0 14px 30px rgba(18, 48, 60, .16);
  display: flex;
  gap: 16px;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: 11px 14px;
  position: sticky;
  z-index: 10;
}

.video-single-flow-page .video-single-validation-summary {
  margin: 0 0 2px;
}

.video-single-flow-page .video-single-action-dock .setting-help-link {
  width: fit-content;
}

.video-single-flow-page .video-single-action-dock .final-action-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
}

.video-single-flow-page .video-single-action-dock .final-action-copy strong {
  font-size: 14px;
}

.video-single-flow-page .video-single-action-dock .final-action-copy > span {
  flex: 1 1 420px;
  min-width: 260px;
  font-size: 12px;
}

.video-single-flow-page .video-single-action-dock .video-single-validation-summary {
  flex: 1 0 100%;
}

@media (max-width: 1550px) {
  .video-single-flow-page .video-single-flow-grid {
    grid-template-columns: 1fr;
  }

  .video-single-flow-page .single-preview-panel {
    position: static;
  }

  .video-single-flow-page .single-copy-voice-grid {
    grid-template-columns: 1fr;
  }

  .video-single-flow-page .video-single-action-dock {
    bottom: 10px;
  }
}

@media (max-width: 980px) {
  .video-single-flow-page .single-flow-steps,
  .video-single-flow-page .single-scheme-flow-grid,
  .video-single-flow-page .single-copy-top-grid,
  .video-single-flow-page .single-template-row,
  .video-single-flow-page .single-tuning-grid,
  .video-single-flow-page .single-copy-foot {
    grid-template-columns: 1fr;
  }

  .video-single-flow-page .single-voice-tuning-grid,
  .video-single-flow-page .single-voice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-single-flow-page .single-material-row {
    grid-template-columns: 1fr;
  }

  .video-single-flow-page .video-single-action-dock {
    align-items: stretch;
    flex-direction: column;
  }
}

.batch-image-segmented button:disabled,
.batch-image-segmented button.disabled {
  color: #8a9aa2;
  background: #edf3f5;
  cursor: not-allowed;
  opacity: .78;
  box-shadow: none;
}

.batch-image-switch {
  width: fit-content;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 4px;
  border: 1px solid #c9d9de;
  border-radius: 999px;
  color: #58707a;
  background: #f3f7f8;
  font-weight: 800;
}

.batch-image-switch span {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #b6c8cf;
}

.batch-image-switch.active {
  border-color: #9adbd5;
  color: var(--primary-dark);
  background: #e8f8f6;
}

.batch-image-switch.active span {
  background: var(--primary);
}

.batch-image-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 8px;
  padding-top: 2px;
}

.batch-image-action-group {
  display: grid;
  gap: 7px;
  align-items: start;
  padding: 7px 8px;
  border: 1px solid #dbe9ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.batch-image-action-group > span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  color: #4b6772;
  font-size: 12px;
  font-weight: 900;
}

.batch-image-action-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.batch-image-action-group button {
  min-height: 30px;
  padding-inline: 10px;
}

.batch-image-action-group.risk {
  border-color: #f0d4a0;
  background: #fffaf0;
}

.batch-image-action-group.risk > span {
  color: #9a6500;
}

.batch-image-cost-guard {
  display: grid;
  grid-template-columns: minmax(300px, .88fr) minmax(360px, 1.12fr);
  align-items: start;
  gap: 8px 14px;
  padding: 8px 10px;
  border: 1px solid #f0d4a0;
  border-radius: 8px;
  background: #fff8e8;
  color: #6f531a;
  font-size: 12px;
  line-height: 1.55;
}

.batch-image-cost-guard > div:first-child {
  display: grid;
  gap: 3px;
}

.batch-image-cost-guard b {
  color: #9a6500;
  font-size: 13px;
}

.batch-image-cost-guard > div:first-child > span {
  color: #6f531a;
}

.batch-image-guard-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.batch-image-guard-list span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid #d8e8e8;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  white-space: nowrap;
}

.batch-image-guard-list span.passed {
  border-color: #9adbd5;
  background: #f1fbfa;
  color: var(--primary-dark);
}

.batch-image-guard-list span.blocked {
  border-color: #f0b0b0;
  background: #fff7f7;
  color: #a33c3c;
}

.batch-image-guard-list b {
  color: inherit;
  font-size: 12px;
}

.batch-image-guard-list em {
  font-style: normal;
  color: inherit;
}

.batch-image-task-note {
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid #cfe1e6;
  border-radius: 8px;
  background: #f8fbfc;
  color: var(--muted);
  font-size: 12px;
}

.batch-image-task-note b {
  color: var(--text);
  font-size: 13px;
}

.batch-image-task-note.failed {
  border-color: #f3b9b9;
  background: #fff6f6;
}

.batch-image-result-summary {
  display: grid;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid #cfe1e6;
  border-radius: 8px;
  background: #ffffff;
}

.batch-image-result-summary.idle {
  background: #f8fbfc;
}

.batch-image-result-summary.failed {
  border-color: #f0b0b0;
  background: #fff7f7;
}

.batch-image-result-summary b {
  color: var(--text);
}

.batch-image-result-summary span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.batch-image-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.batch-image-result-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.batch-image-result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.batch-image-result-tags span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid #bfe4e2;
  border-radius: 999px;
  color: #06736d;
  background: #eefbf9;
  font-weight: 700;
}

.batch-image-result-log {
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid #dce8ec;
  border-radius: 7px;
  background: #f7fbfc;
}

.batch-image-result-log code {
  overflow: hidden;
  color: #314c55;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-image-next-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding-top: 1px;
}

.batch-image-next-step b {
  font-size: 12px;
}

@media (max-width: 1120px) {
  .material-two-column,
  .material-detail-workbench,
  .material-template-layout {
    grid-template-columns: 1fr;
  }

  .material-template-settings {
    max-width: none;
  }

  .detail-showcase-stage,
  .template-showcase-stage {
    grid-template-columns: 1fr;
  }

  .template-preview-stack {
    min-height: 360px;
  }

  .batch-image-workbench {
    grid-template-columns: 1fr;
  }

  .batch-image-task-panel {
    max-width: none;
    justify-self: stretch;
  }

  .batch-image-form-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .batch-image-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .batch-image-hero,
  .batch-image-flow-strip {
    grid-template-columns: 1fr;
  }

  .batch-image-instance-card {
    width: 100%;
  }

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

  .batch-image-basic-grid,
  .batch-image-settings-sections {
    grid-template-columns: 1fr;
  }

  .batch-image-settings-section {
    grid-template-columns: 1fr;
  }

  .batch-image-inline-section {
    grid-template-columns: 1fr;
  }

  .batch-image-cost-guard {
    grid-template-columns: 1fr;
  }

  .batch-image-guard-list {
    justify-content: flex-start;
  }

  .batch-image-basic-grid .short-field {
    max-width: none;
  }

  .batch-image-demo-stage {
    grid-template-columns: 1fr;
  }

  .batch-image-field.path-field {
    grid-column: auto;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  background: var(--bg);
  font-size: 13px;
  letter-spacing: 0;
  overflow-x: clip;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.app-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px 0 0;
  background: var(--primary);
  border-bottom: 1px solid #07918d;
  box-shadow: 0 6px 18px rgba(18, 44, 55, 0.14);
}

.header-brand {
  flex: 0 0 var(--header-brand-width);
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  color: #fff;
}

.brand-mark {
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--primary-dark);
  font-weight: 900;
  overflow: visible;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-name {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.08;
}

.brand-sub {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.18;
}

.global-left,
.global-actions,
.topbar-actions,
.template-row,
.template-actions,
.action-buttons,
.inline-actions,
.switch-row,
.check-row,
.radio-group,
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.material-page .material-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.material-hero-badge {
  min-width: 220px;
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid #bfe4e2;
  border-radius: 8px;
  background: linear-gradient(135deg, #f1fffe, #f8fbfc);
  color: #35656d;
}

.material-hero-badge strong {
  color: var(--primary-dark);
  font-size: 14px;
}

.material-two-column {
  display: grid;
  grid-template-columns: minmax(620px, 1.36fr) minmax(340px, 0.64fr);
  gap: 12px;
  align-items: start;
}

.material-detail-workbench {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
  gap: 12px;
  align-items: start;
}

.material-template-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(560px, 1.58fr);
  gap: 12px;
  align-items: start;
}

.material-extract-layout {
  grid-template-columns: minmax(680px, 1.45fr) minmax(360px, 0.75fr);
}

.material-stack {
  display: grid;
  gap: 10px;
}

.material-template-settings {
  max-width: 440px;
}

.material-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -10px 24px rgba(25, 55, 64, 0.08);
}

.material-action-guide {
  display: flex;
  flex: 1 1 420px;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-right: auto;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
}

.material-validation-summary {
  flex: 1 0 100%;
}

.material-help-content {
  display: grid;
  gap: 7px;
  max-width: 390px;
}

.material-help-content p {
  margin: 0;
}

.material-help-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 12px;
}

.local-video-env {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}

.local-video-env.is-ready {
  min-height: 82px;
  border-color: var(--theme-success-border);
  background: color-mix(in srgb, var(--theme-success) 72%, var(--theme-surface) 28%);
}

.video-clip-page .local-video-env {
  min-height: 134px;
}

.local-video-env__header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.local-video-env__state-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 7px;
  background: var(--theme-warning);
  color: var(--theme-warning-text);
  font-size: 16px;
  font-weight: 900;
}

.local-video-env.is-ready .local-video-env__state-icon {
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.local-video-env__heading {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 3px;
}

.local-video-env__title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.local-video-env__title-row h3 {
  color: var(--theme-text-strong);
  font-size: 14px;
  line-height: 1.4;
}

.local-video-env__status {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--theme-warning-border);
  border-radius: 999px;
  background: var(--theme-warning);
  color: var(--theme-warning-text);
  font-size: 12px;
  font-weight: 700;
}

.local-video-env.is-ready .local-video-env__status {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.local-video-env__heading p {
  max-width: 72ch;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.55;
}

.local-video-env__advice {
  display: flex;
  min-width: 340px;
  max-width: 650px;
  flex: 0 1 650px;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--theme-border);
}

.local-video-env__advice span {
  flex: 0 0 auto;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.local-video-env__advice strong {
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.local-video-env__install-row {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(350px, 1.1fr) auto;
  align-items: center;
  gap: 10px 18px;
  padding-top: 11px;
  border-top: 1px solid var(--theme-border);
}

.local-video-env__install-choice {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.local-video-env__install-choice button,
.local-video-env__refresh {
  flex: 0 0 auto;
  white-space: nowrap;
}

.local-video-env__install-choice .primary-button {
  min-height: 34px;
  padding-inline: 14px;
  box-shadow: none;
}

.local-video-env__install-choice .secondary-button {
  min-height: 34px;
}

.local-video-env__install-choice span {
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
}

.local-video-env__error {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 7px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .local-video-env__header {
    flex-wrap: wrap;
  }

  .local-video-env__advice {
    order: 3;
    width: calc(100% - 38px);
    max-width: none;
    flex-basis: calc(100% - 38px);
    margin-left: 38px;
    padding: 8px 0 0;
    border-top: 1px solid var(--theme-border);
    border-left: 0;
  }

  .local-video-env__install-row {
    grid-template-columns: 1fr 1fr;
  }

  .local-video-env__install-row > .local-video-env__refresh {
    justify-self: end;
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .local-video-env {
    padding: 12px;
  }

  .local-video-env__header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .local-video-env__header > .local-video-env__refresh {
    margin-left: 38px;
  }

  .local-video-env__advice {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .local-video-env__install-row {
    grid-template-columns: 1fr;
  }

  .local-video-env__install-choice {
    align-items: flex-start;
  }

  .local-video-env__install-row > .local-video-env__refresh {
    grid-column: auto;
  }
}

.material-detail-workbench {
  grid-template-columns: minmax(360px, 0.74fr) minmax(520px, 1.26fr);
}

.material-template-row {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px;
}

.material-template-row .plain-select {
  flex: 1 1 190px;
  max-width: 260px;
}

.material-template-row .secondary-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding-inline: 10px;
  white-space: nowrap;
}

.material-template-row .primary-button.material-template-save-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(8, 169, 164, 0.18);
  white-space: nowrap;
}

.template-save-inline-status {
  flex: 0 0 auto;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.white-bg-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.check-inline {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  flex: 0 0 auto;
  color: #244650;
  font-size: 13px;
  font-weight: 700;
}

.te-check-inline {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  flex: 0 0 auto;
  color: #244650;
  font-size: 13px;
  font-weight: 700;
}

.material-detail-form {
  display: grid;
  gap: 10px;
}

.material-preview {
  min-height: 420px;
}

.material-preview.large {
  min-height: 660px;
}

.material-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.material-preview.large .material-preview-grid {
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
}

.material-preview-card {
  min-height: 178px;
  display: grid;
  grid-template-rows: 92px auto auto auto;
  gap: 6px;
  padding: 10px;
  border: 1px solid #dce8ed;
  border-radius: 8px;
  background: linear-gradient(160deg, #ffffff, #f4fbfb);
}

.material-preview-card .preview-art {
  display: grid;
  place-items: center;
  border-radius: 7px;
  background:
    radial-gradient(circle at 25% 25%, rgba(8, 169, 164, 0.28), transparent 28%),
    linear-gradient(135deg, #e8fbfa, #fff7e6);
  color: var(--primary-dark);
  font-size: 28px;
  font-weight: 900;
}

.material-preview-card strong {
  color: #17343b;
}

.material-preview-card span {
  color: var(--muted);
  line-height: 1.5;
}

.material-preview-card button {
  width: max-content;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--soft-text);
  cursor: not-allowed;
}

.material-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  gap: 10px;
  align-items: end;
}

.material-task-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(400px, 1fr) minmax(160px, 0.42fr) minmax(430px, 0.95fr);
  gap: 12px;
  align-items: end;
  padding-top: 2px;
}

.material-task-grid .field {
  min-width: 0;
}

.material-task-grid.material-extract-task-grid {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  grid-template-areas:
    "level level"
    "source output-root"
    "output-level repeat"
    "template template";
  align-items: start;
  gap: 10px 12px;
}

.material-extract-level-field {
  grid-area: level;
}

.material-extract-source-field {
  grid-area: source;
}

.material-extract-output-root-field {
  grid-area: output-root;
}

.material-extract-output-level-field {
  grid-area: output-level;
  max-width: 420px;
}

.material-extract-output-level-select {
  width: min(100%, 360px);
}

.material-extract-repeat-field {
  grid-area: repeat;
  max-width: 620px;
}

.material-extract-template-field {
  grid-area: template;
  justify-self: start;
  width: min(100%, 620px);
}

.material-extract-task-grid .compact-task-path {
  width: 100%;
  max-width: none;
}

.material-extract-task-grid .material-template-row {
  grid-template-columns: minmax(160px, 220px) auto auto;
  justify-content: start;
}

.material-extract-task-grid .material-template-row .plain-select {
  width: 100%;
  max-width: 220px;
}

.material-extract-level-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.material-extract-level-options button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-control);
  color: var(--theme-text);
  text-align: left;
  cursor: pointer;
}

.material-extract-level-options button:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-hover);
}

.material-extract-level-options button.active {
  border-color: var(--primary);
  background: var(--theme-active);
}

.material-extract-level-options strong {
  color: var(--theme-text-strong);
  font-size: 12px;
  line-height: 1.35;
}

.material-extract-level-options span {
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-task-path {
  width: min(100%, 560px);
}

.compact-task-path input {
  min-width: 0;
}

.detail-mode-grid {
  grid-template-columns: minmax(160px, 0.95fr) minmax(160px, 0.95fr) minmax(92px, 0.55fr);
}

.video-preprocess-grid {
  grid-template-columns: minmax(170px, 1fr) minmax(130px, 0.55fr);
}

.compact-with-control {
  align-items: end;
}

.material-page .panel > .panel-title.compact-with-control,
.material-inline-feature-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.material-page .panel > .panel-title.compact-with-control .switch-control,
.material-inline-feature-head .switch-control {
  justify-self: end;
  margin-left: auto;
}

.compact-with-control .material-multi-select {
  width: min(320px, 100%);
  flex: 0 1 320px;
}

.material-page .plain-input.compact-number {
  width: 74px;
  min-height: 30px;
  font-weight: 500;
  text-align: center;
}

.material-page .plain-select.compact-select {
  width: min(100%, 260px);
}

.material-inline-feature-panel {
  padding: 12px;
}

.material-inline-feature-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.material-inline-feature-head h2 {
  margin: 0 0 3px;
  font-size: 15px;
}

.material-inline-feature-head p,
.inline-muted-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.material-inline-feature-body,
.inline-feature-compact {
  display: grid;
  gap: 8px;
  margin-top: 9px;
  padding: 10px;
  border: 1px solid #d7e8ec;
  border-radius: 8px;
  background: #f8fcfc;
}

.compact-control-row {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.compact-control-row.secondary {
  align-items: center;
  padding-top: 7px;
  border-top: 1px dashed #d8e8ec;
}

.mini-control {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.mini-control > span {
  color: #314852;
  font-size: 12px;
  font-weight: 800;
}

.mini-control.tiny {
  width: 88px;
  flex: 0 0 88px;
}

.mini-control.medium {
  width: 164px;
  flex: 0 0 164px;
}

.mini-control.wide {
  width: min(100%, 260px);
  flex: 0 1 260px;
}

.mini-control.flex {
  min-width: 220px;
  flex: 1 1 260px;
}

.inline-check-control {
  min-height: 32px;
  align-self: end;
  padding: 0 2px 2px 0;
  white-space: nowrap;
}

.inline-feature-compact .plain-input,
.inline-feature-compact .plain-select,
.material-inline-feature-body .plain-input,
.material-inline-feature-body .plain-select {
  min-height: 32px;
}

.white-bg-inline-options {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}

.white-bg-inline-options .compact-control-row.secondary {
  border-top-color: var(--theme-border);
}

.material-multi-select {
  position: relative;
  z-index: 2;
  width: min(100%, 280px);
}

.material-multi-select[open] {
  z-index: 1200;
}

.material-multi-select .multi-select-panel {
  z-index: 1201;
}

.material-multi-select .multi-select-option {
  grid-template-columns: auto minmax(120px, 1fr);
}

.material-scope-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
  width: min(100%, 420px);
  padding: 4px;
  border: 1px solid #cfe2e8;
  border-radius: 8px;
  background: #eef6f7;
}

.material-scope-tabs button {
  min-height: 44px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #42606b;
  text-align: left;
}

.material-scope-tabs button strong {
  font-size: 14px;
  color: #263f49;
}

.material-scope-tabs button span {
  color: #738892;
  font-size: 11px;
  font-weight: 500;
}

.material-scope-tabs button.active {
  border-color: rgba(8, 169, 164, 0.42);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(8, 169, 164, 0.22);
}

.material-scope-tabs button.active strong {
  color: #fff;
}

.material-scope-tabs button.active span {
  color: rgba(255, 255, 255, 0.86);
}

.material-scope-tabs.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 220px;
  gap: 4px;
  padding: 3px;
  background: var(--theme-control);
  border-color: var(--theme-border);
}

.material-scope-tabs.compact button {
  min-height: 32px;
  justify-items: center;
  padding: 4px 8px;
  text-align: center;
}

.material-scope-tabs.compact button span {
  display: none;
}

.material-scope-tabs.compact button strong {
  font-size: 13px;
}

.switch-control {
  min-height: 30px;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 9px 4px 5px;
  border: 1px solid #cbdde3;
  border-radius: 999px;
  background: #edf4f6;
  color: #60747e;
  font-size: 12px;
  font-weight: 800;
}

.switch-control span {
  width: 32px;
  height: 18px;
  position: relative;
  border-radius: 999px;
  background: #c4d2d8;
  transition: background 0.18s ease;
}

.switch-control span::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(24, 47, 56, 0.2);
  transition: transform 0.18s ease;
}

.switch-control.on {
  border-color: rgba(8, 169, 164, 0.45);
  background: #e7faf8;
  color: var(--primary-dark);
}

.switch-control.on span {
  background: var(--primary);
}

.switch-control.on span::after {
  transform: translateX(14px);
}

.switch-control:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.material-motion-preview {
  min-height: 400px;
  overflow: hidden;
}

.material-inline-feature-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  .ai-video-output-field {
    grid-template-columns: 1fr;
  }

  .ai-video-page-head {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-video-page-head-actions {
    align-self: stretch;
    justify-content: flex-start;
  }
}

.crop-motion-stage {
  min-height: 305px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d7e9ee;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(239, 250, 250, 0.88), rgba(255, 255, 255, 0.96)),
    radial-gradient(circle at 86% 12%, rgba(8, 169, 164, 0.12), transparent 34%);
}

.motion-copy {
  display: grid;
  gap: 5px;
}

.motion-copy strong {
  color: #16363f;
  font-size: 19px;
}

.motion-copy span {
  color: #5d737d;
  line-height: 1.55;
}

.motion-board {
  position: relative;
  min-height: 192px;
  display: grid;
  grid-template-columns: minmax(98px, 0.58fr) 42px minmax(136px, 0.8fr);
  align-items: center;
  gap: 10px;
}

.motion-source-stack {
  position: relative;
  height: 144px;
}

.motion-source-stack img {
  position: absolute;
  left: calc(var(--i) * 12px);
  top: calc(var(--i) * 8px);
  width: 88px;
  height: 122px;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(37, 61, 70, 0.16);
  animation: materialFloat 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.8s);
}

.motion-scanner {
  height: 92px;
  display: grid;
  place-items: center;
  position: relative;
}

.motion-scanner::before,
.motion-scanner::after {
  content: "";
  width: 40px;
  height: 2px;
  position: absolute;
  background: #8ecfcb;
}

.motion-scanner::before {
  transform: rotate(28deg);
}

.motion-scanner::after {
  transform: rotate(-28deg);
}

.motion-scanner span {
  width: 34px;
  height: 34px;
  border: 1px solid #8ed8d3;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 18px rgba(8, 169, 164, 0.16);
  animation: materialPulse 2.6s ease-in-out infinite;
}

.motion-output-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.motion-output-card {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #cbe5e4;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #21434b;
  box-shadow: 0 8px 18px rgba(31, 61, 72, 0.08);
  animation: materialOutputIn 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.22s);
}

.motion-output-card span {
  font-size: 12.5px;
  font-weight: 900;
}

.motion-output-card em {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e7f8f7;
  color: var(--primary-dark);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.motion-step-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.motion-step-row span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: #46616b;
  font-size: 12px;
  font-weight: 800;
}

@keyframes materialFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes materialPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.72; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes materialOutputIn {
  0%, 18% { transform: translateY(8px); opacity: 0.58; }
  38%, 100% { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-source-stack img,
  .motion-scanner span,
  .motion-output-card {
    animation: none;
  }
}

.material-upload-demo {
  min-height: 132px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px dashed #a7d8d5;
  border-radius: 8px;
  background: #f3fcfb;
  text-align: center;
  color: var(--muted);
}

.material-upload-demo strong {
  color: var(--primary-dark);
  font-size: 15px;
}

.detail-generation-showcase,
.template-frame-showcase {
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(8, 169, 164, 0.13), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(255, 190, 91, 0.18), transparent 28%),
    linear-gradient(145deg, #ffffff 0%, #f6fbfc 56%, #fff8ee 100%);
}

.detail-showcase-stage,
.template-showcase-stage {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(250px, 0.76fr) minmax(320px, 1.24fr);
  gap: 18px;
  align-items: center;
}

.detail-showcase-copy,
.template-showcase-copy {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.detail-showcase-copy > span,
.template-showcase-copy > span {
  width: max-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e8fbfa;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.detail-showcase-copy strong,
.template-showcase-copy strong {
  max-width: 420px;
  color: #102f37;
  font-size: 24px;
  line-height: 1.35;
}

.detail-showcase-copy p,
.template-showcase-copy p {
  max-width: 420px;
  color: #5f737b;
  line-height: 1.8;
}

.detail-showcase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-showcase-tags span {
  padding: 6px 10px;
  border: 1px solid #d7e8ee;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #47656e;
  font-size: 12px;
}

.detail-showcase-visual {
  min-height: 380px;
  position: relative;
  display: grid;
  grid-template-columns: 0.86fr 1fr;
  grid-template-rows: 1fr 0.78fr;
  gap: 12px;
  padding: 14px;
}

.detail-poster,
.template-preview-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(186, 210, 218, 0.82);
  border-radius: 18px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.58)),
    linear-gradient(135deg, #e8fbfa, #fff5e5);
  box-shadow: 0 18px 36px rgba(22, 51, 60, 0.12);
}

.detail-poster.tall {
  grid-row: span 2;
}

.detail-poster.wide {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62)),
    linear-gradient(135deg, #f6eefc, #e8fbfa);
}

.detail-poster i,
.template-preview-card i {
  position: absolute;
  inset: 18px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 18%, rgba(8, 169, 164, 0.32), transparent 25%),
    radial-gradient(circle at 75% 65%, rgba(255, 177, 91, 0.38), transparent 26%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.16));
}

.detail-poster b,
.template-preview-card b {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(16, 47, 55, 0.82);
  color: #fff;
  font-size: 12px;
}

.showcase-progress-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.showcase-progress-row span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #dce8ed;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #48656e;
  font-size: 13px;
}

.showcase-progress-row b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
}

.extract-summary-panel {
  min-height: 330px;
}

.extract-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.extract-summary-grid div {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #dce8ed;
  border-radius: 8px;
  background: #f8fbfc;
}

.extract-summary-grid span,
.extract-output-list > strong {
  color: #5e747c;
  font-size: 12px;
}

.extract-summary-grid strong {
  color: #17343b;
  font-size: 18px;
}

.extract-summary-grid small {
  color: #789099;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.material-extract-rule-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.55;
}

.material-extract-rule-note strong {
  flex: 0 0 auto;
  color: var(--theme-text-strong);
  font-size: 12px;
}

.extract-output-setting {
  display: grid;
  gap: 8px;
}

.extract-output-path {
  display: grid;
  grid-template-columns: 86px minmax(360px, 620px);
  align-items: center;
  gap: 6px 10px;
}

.extract-output-path-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 700;
}

.extract-output-path .required-field-error {
  grid-column: 2;
}

.material-extract-settings {
  display: grid;
  gap: 10px;
}

.extract-kind-settings-list {
  display: grid;
  gap: 8px;
}

.extract-kind-setting {
  display: grid;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface-raised);
}

.extract-ocr-setting {
  background: var(--theme-surface-elevated);
}

.extract-ocr-url-field {
  min-width: min(100%, 360px);
  flex: 1 1 360px;
}

.extract-ocr-url-input {
  width: min(100%, 520px);
}

.extract-kind-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.extract-kind-heading > div {
  display: grid;
  gap: 3px;
}

.extract-kind-heading strong {
  color: var(--theme-text-strong);
  font-size: 14px;
}

.extract-kind-heading span {
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.5;
}

.extract-setting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
}

.extract-setting-row > .field {
  flex: 0 1 auto;
  min-width: 160px;
}

.extract-setting-row > .extract-ocr-url-field {
  min-width: min(100%, 360px);
  flex: 1 1 360px;
}

.extract-number-pair {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.extract-number-pair .field {
  min-width: 92px;
}

.extract-keyword-input {
  width: min(100%, 620px);
}

.extract-short-select {
  width: 180px;
}

.compact-unit-input {
  width: 108px;
}

.extract-task-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 24, 28, 0.34);
  backdrop-filter: blur(2px);
}

.extract-task-dialog {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px 14px;
  width: min(560px, 100%);
  padding: 20px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 12px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 20px 50px rgba(16, 47, 55, 0.24);
}

.extract-task-dialog-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--theme-active);
  color: var(--primary-dark);
  font-size: 20px;
  font-weight: 800;
}

.extract-task-dialog h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.extract-task-dialog p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.65;
}

.extract-task-dialog-note {
  margin-top: 6px !important;
}

.extract-task-dialog-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.extract-output-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dce8ed;
  border-radius: 8px;
  background: #ffffff;
}

.extract-output-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.extract-output-list span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8fbfa;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 700;
}

.extract-tip {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--primary);
  border-radius: 7px;
  background: #f3fcfb;
  color: #496870;
  line-height: 1.6;
}

.template-showcase-stage {
  grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.28fr);
}

.template-preview-stack {
  position: relative;
  min-height: 420px;
}

.template-preview-card {
  position: absolute;
  width: 56%;
  min-height: 320px;
}

.template-preview-card.main {
  left: 10%;
  top: 38px;
  transform: rotate(-4deg);
}

.template-preview-card.side {
  right: 8%;
  top: 84px;
  min-height: 270px;
  transform: rotate(5deg);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62)),
    linear-gradient(135deg, #eef4ff, #fff3df);
}

.template-preview-card.mini {
  right: 22%;
  bottom: 28px;
  width: 38%;
  min-height: 150px;
  transform: rotate(-1deg);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.58)),
    linear-gradient(135deg, #e8fbfa, #f7f0ff);
}

.field span em {
  margin-left: 5px;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid #bfd5dc;
  border-radius: 50%;
  color: #6e8790;
  font-style: normal;
  font-size: 11px;
  cursor: help;
}

.field.full {
  grid-column: 1 / -1;
}

.plain-textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--text);
  background: #fff;
  outline: none;
}

.segmented.disabled-aware button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.check-row.wrap {
  flex-wrap: wrap;
}

.unit-input {
  display: flex;
  align-items: center;
  gap: 6px;
}

.unit-input span {
  color: var(--muted);
}

.material-detail-page,
.material-template-page {
  display: grid;
  gap: 12px;
}

.material-mode-tabs {
  width: max-content;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #d6e8ed;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(20, 52, 62, 0.06);
}

.material-mode-tabs button {
  min-width: 118px;
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #49636c;
  font-weight: 800;
  cursor: pointer;
}

.material-mode-tabs button.active {
  color: #ffffff;
  background: var(--primary);
  box-shadow: 0 8px 18px rgba(8, 169, 164, 0.2);
}

.ai-detail-workbench {
  grid-template-columns: minmax(420px, 0.525fr) minmax(620px, 1.475fr);
}

.ai-detail-form-stack {
  display: grid;
  gap: 12px;
}

.compact-path {
  grid-template-columns: minmax(0, 1fr) 96px;
}

.detail-root-path {
  grid-template-columns: minmax(0, 1fr) 88px 80px;
}

.reference-upload-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e9ee;
  border-radius: 12px;
  background: #f8fcfd;
}

.reference-upload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reference-upload-head div {
  display: grid;
  gap: 2px;
}

.reference-upload-head strong {
  color: #132f37;
  font-size: 14px;
}

.reference-upload-head span {
  color: #68818a;
  font-size: 12px;
}

.mini-upload-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #9ed8d4;
  border-radius: 8px;
  color: var(--primary-dark);
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.mini-upload-button input {
  display: none;
}

.reference-upload-drop {
  min-height: 76px;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 1px dashed #aeddd9;
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(232, 251, 250, 0.72), rgba(255, 255, 255, 0.86));
  text-align: center;
}

.reference-upload-drop span {
  color: #28474f;
  font-weight: 800;
}

.reference-upload-drop small {
  color: #78919a;
}

.reference-thumb-wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.reference-thumb-wall span,
.reference-thumb-wall figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid #dce8ed;
  border-radius: 10px;
  background:
    linear-gradient(135deg, #ffffff, #eef7f8);
}

.reference-thumb-wall figure {
  position: relative;
  margin: 0;
}

.reference-thumb-wall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reference-thumb-wall figcaption {
  position: absolute;
  inset: auto 4px 4px;
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(16, 47, 55, 0.72);
  color: #ffffff;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pick-rule-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-detail-inline-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  gap: 8px;
}

.ai-detail-inline-pair .field {
  min-width: 0;
}

.text-link-button {
  width: max-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  font-weight: 800;
  cursor: pointer;
}

.material-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.material-action-guidance {
  flex: 1 1 420px;
  margin: 0 auto 0 0;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
}

.material-action-guidance .setting-help-link {
  margin-left: 7px;
}

.detail-generation-showcase,
.template-frame-showcase {
  position: relative;
}

.detail-generation-showcase::before,
.template-frame-showcase::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -120px;
  top: -160px;
  border-radius: 50%;
  background: #edf1ff;
  opacity: 0.48;
  pointer-events: none;
}

.detail-generation-showcase::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  left: -88px;
  bottom: -90px;
  border-radius: 50%;
  background: #e8f7f6;
  opacity: 0.55;
  pointer-events: none;
}

.detail-generation-showcase > *,
.template-frame-showcase > * {
  position: relative;
  z-index: 1;
}

.detail-strip-gallery {
  min-height: 456px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  overflow: hidden;
  padding: 12px 0;
}

.detail-strip-gallery img {
  display: block;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 18px 38px rgba(20, 48, 58, 0.15);
}

.detail-strip-gallery .main {
  width: 34%;
  max-width: 255px;
  height: 410px;
  object-position: top center;
}

.detail-strip-gallery .strip {
  width: 16%;
  min-width: 88px;
  height: 338px;
  object-position: top center;
}

.detail-strip-gallery .strip-2 {
  height: 382px;
}

.detail-strip-gallery .strip-3 {
  height: 310px;
}

.detail-strip-gallery .strip-4 {
  height: 360px;
}

.generation-running-canvas {
  min-height: 520px;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 169, 164, 0.12), transparent 28%),
    linear-gradient(135deg, #fbffff, #f1f7ff);
  text-align: center;
}

.generation-running-canvas strong {
  color: #12323a;
  font-size: 24px;
}

.generation-running-canvas span {
  max-width: 520px;
  color: #637b84;
  line-height: 1.7;
}

.soft-orbit {
  width: 96px;
  height: 96px;
  border: 2px solid rgba(8, 169, 164, 0.18);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: detailOrbit 1.8s linear infinite;
}

.running-steps {
  display: flex;
  gap: 8px;
}

.running-steps i {
  width: 30px;
  height: 5px;
  border-radius: 999px;
  background: #cfdce2;
}

.running-steps i.active {
  background: var(--primary);
}

@keyframes detailOrbit {
  to {
    transform: rotate(360deg);
  }
}

.detail-motion-showcase {
  min-height: 620px;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 4%, rgba(8, 169, 164, 0.09), transparent 26%),
    radial-gradient(circle at 8% 92%, rgba(255, 196, 107, 0.12), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(243, 252, 251, 0.96));
}

.detail-motion-showcase.batch {
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 196, 107, 0.13), transparent 28%),
    radial-gradient(circle at 12% 86%, rgba(8, 169, 164, 0.09), transparent 24%),
    linear-gradient(135deg, #ffffff, #f5fbff);
}

.detail-motion-showcase.running {
  background:
    radial-gradient(circle at 18% 28%, rgba(8, 169, 164, 0.08), transparent 24%),
    radial-gradient(circle at 80% 20%, rgba(255, 207, 126, 0.12), transparent 26%),
    linear-gradient(135deg, #f9fdfd, #edf8fa);
}

.detail-motion-showcase::before {
  width: 300px;
  height: 300px;
  right: -126px;
  top: -150px;
  background: rgba(223, 242, 244, 0.58);
}

.detail-motion-showcase::after {
  width: 180px;
  height: 180px;
  left: -76px;
  bottom: -78px;
  background: rgba(255, 245, 224, 0.72);
}

.detail-motion-stage {
  min-height: 580px;
  position: relative;
  overflow: hidden;
  padding: 28px 28px 78px;
}

.detail-motion-head {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  max-width: 480px;
}

.detail-motion-head span {
  width: max-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(8, 169, 164, 0.1);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 900;
}

.detail-motion-head strong {
  max-width: 440px;
  color: #102f37;
  font-size: 26px;
  line-height: 1.24;
  text-wrap: balance;
}

.detail-motion-head p {
  max-width: 480px;
  margin: 0;
  color: #607983;
  line-height: 1.65;
}

.detail-motion-fan {
  position: relative;
  height: 440px;
  margin-top: 14px;
}

.detail-motion-hero-poster {
  position: absolute;
  left: 0;
  top: 42px;
  width: clamp(178px, 27%, 236px);
  height: 330px;
  object-fit: cover;
  object-position: top center;
  border: 6px solid #ffffff;
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(20, 47, 56, 0.14);
  animation: detailPosterFloat 5.6s ease-in-out infinite;
}

.detail-motion-strip-wall {
  position: absolute;
  left: clamp(190px, 29%, 250px);
  top: 20px;
  right: 4px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, 1.4vw, 14px);
  perspective: 900px;
}

.detail-motion-strip-wall img {
  width: clamp(76px, 12.4%, 112px);
  height: 360px;
  object-fit: cover;
  object-position: top center;
  border: 5px solid #ffffff;
  border-radius: 14px;
  box-shadow: 0 16px 28px rgba(28, 58, 70, 0.12);
  transform-origin: center bottom;
  animation: detailStripReveal 6.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.22s);
}

.detail-motion-strip-wall img:nth-child(2) {
  height: 392px;
}

.detail-motion-strip-wall img:nth-child(3) {
  height: 326px;
}

.detail-motion-strip-wall img:nth-child(4) {
  height: 374px;
}

.detail-motion-caption-band {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(8, 169, 164, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
}

.detail-motion-caption-band strong {
  color: #12323a;
  font-size: 15px;
}

.detail-motion-caption-band span {
  color: #66818a;
  font-size: 12px;
}

.detail-motion-status-canvas {
  min-height: 580px;
  position: relative;
  overflow: hidden;
  padding: 28px;
}

.detail-motion-queue-card {
  position: absolute;
  left: 30px;
  top: 34px;
  z-index: 2;
  width: min(285px, calc(100% - 60px));
  padding: 16px;
  border: 1px solid rgba(8, 169, 164, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
}

.detail-motion-queue-card strong {
  display: block;
  margin-bottom: 6px;
  color: #12323a;
  font-size: 18px;
}

.detail-motion-queue-card span {
  color: #607983;
  font-size: 13px;
  line-height: 1.6;
}

.detail-motion-progress-ring {
  position: absolute;
  right: 54px;
  top: 48px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) 0 72%, #e6f1f4 72% 100%);
  display: grid;
  place-items: center;
  animation: detailRingBreath 2.8s ease-in-out infinite;
}

.detail-motion-progress-ring::after {
  content: "生成中";
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px #dcecef;
}

.detail-motion-floating-preview {
  position: absolute;
  left: 72px;
  right: 48px;
  bottom: 64px;
  height: 190px;
}

.detail-motion-floating-preview img {
  position: absolute;
  bottom: 0;
  width: 112px;
  height: 168px;
  object-fit: cover;
  object-position: top center;
  border: 5px solid #ffffff;
  border-radius: 14px;
  box-shadow: 0 16px 28px rgba(28, 58, 70, 0.13);
  animation: detailFloatPreview 5.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.28s);
}

.detail-motion-floating-preview img:nth-child(1) {
  left: 0;
}

.detail-motion-floating-preview img:nth-child(2) {
  left: 96px;
}

.detail-motion-floating-preview img:nth-child(3) {
  left: 192px;
}

.detail-motion-floating-preview img:nth-child(4) {
  left: 288px;
}

.detail-motion-status-steps {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 22px;
  display: flex;
  gap: 8px;
}

.detail-motion-status-steps span {
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #43616c;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.detail-motion-status-steps .active {
  background: rgba(8, 169, 164, 0.1);
  color: var(--primary-dark);
}

.detail-motion-batch-canvas {
  min-height: 580px;
  position: relative;
  overflow: hidden;
  padding: 28px 28px 78px;
}

.detail-motion-batch-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  max-width: 500px;
}

.detail-motion-batch-copy span {
  width: max-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(8, 169, 164, 0.1);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 900;
}

.detail-motion-batch-copy strong {
  max-width: 460px;
  color: #102f37;
  font-size: 26px;
  line-height: 1.24;
  text-wrap: balance;
}

.detail-motion-batch-copy p {
  max-width: 500px;
  margin: 0;
  color: #607983;
  line-height: 1.65;
}

.detail-motion-batch-board {
  position: relative;
  min-height: 390px;
  margin-top: 18px;
  border: 1px solid rgba(195, 220, 226, 0.76);
  border-radius: 16px;
  background:
    radial-gradient(circle at 78% 18%, rgba(8, 169, 164, 0.1), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(246, 252, 253, 0.9));
}

.detail-motion-batch-card {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 190px;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(190, 216, 224, 0.86);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 24px rgba(20, 47, 56, 0.08);
}

.detail-motion-batch-card:nth-child(1) {
  left: 24px;
  top: 30px;
}

.detail-motion-batch-card:nth-child(2) {
  left: 145px;
  top: 148px;
}

.detail-motion-batch-card:nth-child(3) {
  left: 38px;
  bottom: 30px;
}

.detail-motion-batch-card b {
  width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef7f8;
  color: #4d6a75;
  font-size: 12px;
}

.detail-motion-batch-card span {
  color: #17343e;
  font-size: 14px;
  font-weight: 900;
}

.detail-motion-batch-card small {
  color: #708890;
  line-height: 1.45;
}

.detail-motion-batch-card.active b {
  background: #e2fbf8;
  color: var(--primary-dark);
}

.detail-motion-batch-preview {
  position: absolute;
  right: 28px;
  top: 26px;
  bottom: 24px;
  width: min(48%, 430px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.detail-motion-batch-preview img {
  width: clamp(70px, 23%, 108px);
  height: 310px;
  object-fit: cover;
  object-position: top center;
  border: 5px solid #ffffff;
  border-radius: 14px;
  box-shadow: 0 16px 28px rgba(28, 58, 70, 0.13);
  animation: detailStripReveal 6.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.2s);
}

.detail-motion-batch-preview img:nth-child(2) {
  height: 350px;
}

.detail-motion-batch-preview img:nth-child(3) {
  height: 286px;
}

.detail-motion-batch-preview img:nth-child(4) {
  height: 330px;
}

@keyframes detailPosterFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

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

@keyframes detailStripReveal {
  0%,
  14% {
    opacity: 0.45;
    transform: translateY(20px) rotateY(-12deg) scale(0.94);
  }

  34%,
  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0) scale(1);
  }
}

@keyframes detailRingBreath {
  0%,
  100% {
    transform: scale(0.96);
    filter: saturate(0.96);
  }

  50% {
    transform: scale(1.04);
    filter: saturate(1.1);
  }
}

@keyframes detailFloatPreview {
  0%,
  18% {
    opacity: 0.55;
    transform: translateY(14px) scale(0.94);
  }

  40%,
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1280px) {
  .detail-motion-strip-wall {
    left: 210px;
  }

  .detail-motion-strip-wall img {
    width: 82px;
  }
}

@media (max-width: 980px) {
  .detail-motion-stage,
  .detail-motion-status-canvas,
  .detail-motion-batch-canvas {
    min-height: 700px;
  }

  .detail-motion-fan {
    height: 520px;
  }

  .detail-motion-strip-wall {
    left: 0;
    top: 360px;
    justify-content: flex-start;
  }

  .detail-motion-strip-wall img {
    width: 84px;
    height: 150px;
  }

  .detail-motion-strip-wall img:nth-child(2),
  .detail-motion-strip-wall img:nth-child(3),
  .detail-motion-strip-wall img:nth-child(4) {
    height: 150px;
  }

  .detail-motion-progress-ring {
    right: 28px;
    top: 210px;
  }

  .detail-motion-floating-preview {
    left: 30px;
    right: 30px;
  }

  .detail-motion-batch-board {
    min-height: 500px;
  }

  .detail-motion-batch-card:nth-child(1),
  .detail-motion-batch-card:nth-child(2),
  .detail-motion-batch-card:nth-child(3) {
    left: 22px;
    width: min(220px, calc(100% - 44px));
  }

  .detail-motion-batch-card:nth-child(1) {
    top: 24px;
  }

  .detail-motion-batch-card:nth-child(2) {
    top: 122px;
  }

  .detail-motion-batch-card:nth-child(3) {
    top: 220px;
    bottom: auto;
  }

  .detail-motion-batch-preview {
    left: 22px;
    right: 22px;
    top: 326px;
    bottom: 18px;
    width: auto;
    justify-content: flex-start;
  }

  .detail-motion-batch-preview img,
  .detail-motion-batch-preview img:nth-child(2),
  .detail-motion-batch-preview img:nth-child(3),
  .detail-motion-batch-preview img:nth-child(4) {
    width: 82px;
    height: 142px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-motion-hero-poster,
  .detail-motion-strip-wall img,
  .detail-motion-progress-ring,
  .detail-motion-floating-preview img,
  .detail-motion-batch-preview img {
    animation: none;
  }
}

.detail-compare-showcase {
  min-height: 620px;
  position: relative;
  overflow: hidden;
  padding: 26px;
  background:
    radial-gradient(circle at 86% 8%, rgba(8, 169, 164, 0.08), transparent 25%),
    radial-gradient(circle at 8% 90%, rgba(255, 199, 116, 0.1), transparent 26%),
    linear-gradient(135deg, #fbfefe, #f3fbfb);
}

.detail-compare-showcase.batch {
  background:
    radial-gradient(circle at 82% 14%, rgba(8, 169, 164, 0.08), transparent 26%),
    radial-gradient(circle at 12% 86%, rgba(255, 205, 132, 0.12), transparent 26%),
    linear-gradient(135deg, #ffffff, #f5fbff);
}

.detail-compare-showcase.running {
  display: grid;
  place-items: center;
  min-height: 460px;
}

.detail-compare-showcase::before {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -96px;
  top: -108px;
  border-radius: 50%;
  background: rgba(8, 169, 164, 0.08);
}

.detail-compare-showcase::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  left: -74px;
  bottom: -74px;
  border-radius: 50%;
  background: rgba(255, 211, 139, 0.18);
}

.detail-compare-showcase > * {
  position: relative;
  z-index: 1;
}

.detail-compare-copy {
  max-width: 560px;
  display: grid;
  gap: 8px;
}

.detail-compare-kicker {
  width: max-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(8, 169, 164, 0.1);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 900;
}

.detail-compare-copy strong {
  max-width: 560px;
  color: #102f37;
  font-size: 26px;
  line-height: 1.24;
  text-wrap: balance;
}

.detail-compare-copy p {
  max-width: 540px;
  margin: 0;
  color: #607983;
  line-height: 1.65;
}

.detail-compare-stage {
  position: relative;
  min-height: 430px;
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(128px, 0.58fr) minmax(280px, 1.28fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: center;
}

.detail-before-panel,
.detail-process-panel,
.detail-after-panel {
  position: relative;
  min-height: 330px;
}

.detail-before-panel > span,
.detail-after-panel > span {
  display: inline-flex;
  margin-bottom: 10px;
  color: #43616c;
  font-size: 12px;
  font-weight: 900;
}

.detail-before-stack {
  position: relative;
  min-height: 308px;
}

.detail-before-stack img {
  position: absolute;
  width: min(82%, 170px);
  height: 276px;
  object-fit: cover;
  object-position: top center;
  border: 6px solid #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 30px rgba(20, 47, 56, 0.13);
  animation: detailBeforeFloat 5.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.3s);
}

.detail-before-stack img:nth-child(1) {
  left: 0;
  top: 14px;
  transform: rotate(-4deg);
}

.detail-before-stack img:nth-child(2) {
  left: 44px;
  top: 42px;
  transform: rotate(4deg);
}

.detail-process-panel {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
}

.detail-process-orbit {
  position: relative;
  width: 136px;
  height: 136px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffffff 0 46%, transparent 47%),
    conic-gradient(from 36deg, rgba(8, 169, 164, 0.18), rgba(255, 194, 102, 0.42), rgba(8, 169, 164, 0.18));
  color: #14343c;
  box-shadow: inset 0 0 0 1px rgba(8, 169, 164, 0.12);
}

.detail-process-orbit i {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
  transform: translateY(-68px);
  animation: detailOrbit 5s linear infinite;
}

.detail-process-orbit strong {
  font-size: 16px;
}

.detail-process-tags {
  display: flex;
  max-width: 160px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.detail-process-tags span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #4f6a74;
  font-size: 12px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(194, 218, 224, 0.72);
}

.detail-result-strip-wall {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(7px, 1vw, 11px);
  min-height: 350px;
  overflow: hidden;
}

.detail-result-strip-wall img {
  width: clamp(58px, 17%, 98px);
  height: 318px;
  object-fit: cover;
  object-position: top center;
  border: 5px solid #ffffff;
  border-radius: 14px;
  box-shadow: 0 16px 28px rgba(28, 58, 70, 0.12);
  animation: detailAfterRise 6.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
}

.detail-result-strip-wall img:nth-child(2) {
  height: 348px;
}

.detail-result-strip-wall img:nth-child(3) {
  height: 288px;
}

.detail-result-strip-wall img:nth-child(4) {
  height: 330px;
}

.detail-result-strip-wall img:nth-child(5) {
  height: 302px;
}

.detail-compare-batch-stage {
  min-height: 420px;
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(190px, 0.86fr) minmax(132px, 0.56fr) minmax(300px, 1.26fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: center;
}

.detail-folder-stack {
  display: grid;
  gap: 10px;
}

.detail-folder-card {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(190, 216, 224, 0.86);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 22px rgba(20, 47, 56, 0.07);
}

.detail-folder-card.active {
  border-color: rgba(8, 169, 164, 0.34);
  background: rgba(235, 252, 249, 0.94);
}

.detail-folder-card b {
  color: #15353d;
  font-size: 13px;
}

.detail-folder-card span {
  color: #254b55;
  font-weight: 900;
}

.detail-folder-card small {
  color: #718890;
}

.detail-queue-core {
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  align-content: center;
  justify-self: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffffff 0 47%, transparent 48%),
    conic-gradient(from 120deg, rgba(8, 169, 164, 0.18), rgba(255, 199, 116, 0.42), rgba(8, 169, 164, 0.18));
  color: #17343e;
  box-shadow: inset 0 0 0 1px rgba(8, 169, 164, 0.12);
}

.detail-queue-core i {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  transform: translateY(-70px);
  animation: detailOrbit 5.4s linear infinite;
}

.detail-queue-core strong {
  font-size: 16px;
}

.detail-queue-core span {
  color: #6d8790;
  font-size: 12px;
}

.detail-compare-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid rgba(8, 169, 164, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
}

.detail-compare-caption strong {
  color: #12323a;
  font-size: 15px;
}

.detail-compare-caption span {
  color: #66818a;
  font-size: 12px;
}

.detail-compare-running-scene {
  position: relative;
  width: min(620px, 100%);
  min-height: 310px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(8, 169, 164, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 36% 34%, rgba(8, 169, 164, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(239, 250, 250, 0.9));
}

.detail-compare-run-bg {
  position: absolute;
  inset: 44px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, rgba(8, 169, 164, 0.18), rgba(255, 205, 132, 0.2), rgba(8, 169, 164, 0.18));
  filter: blur(10px);
  opacity: 0.72;
  animation: detailOrbit 8s linear infinite;
}

.detail-compare-running-scene strong {
  position: relative;
  color: #12323a;
  font-size: 24px;
}

.detail-compare-running-scene p {
  position: relative;
  max-width: 440px;
  margin: 0;
  color: #607983;
  text-align: center;
  line-height: 1.65;
}

.detail-compare-running-steps {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.detail-compare-running-steps span {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #607983;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(194, 218, 224, 0.72);
}

.detail-compare-running-steps .active {
  background: rgba(8, 169, 164, 0.1);
  color: var(--primary-dark);
}

@keyframes detailBeforeFloat {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -8px;
  }
}

@keyframes detailAfterRise {
  0%,
  16% {
    opacity: 0.5;
    transform: translateY(22px) scale(0.95);
  }

  38%,
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1180px) {
  .detail-compare-stage,
  .detail-compare-batch-stage {
    grid-template-columns: 1fr;
  }

  .detail-before-panel,
  .detail-process-panel,
  .detail-after-panel {
    min-height: auto;
  }

  .detail-before-stack {
    min-height: 240px;
  }

  .detail-before-stack img {
    width: 150px;
    height: 220px;
  }

  .detail-result-strip-wall {
    justify-content: flex-start;
    min-height: 210px;
  }

  .detail-result-strip-wall img,
  .detail-result-strip-wall img:nth-child(2),
  .detail-result-strip-wall img:nth-child(3),
  .detail-result-strip-wall img:nth-child(4),
  .detail-result-strip-wall img:nth-child(5) {
    width: 76px;
    height: 170px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .detail-before-stack img,
  .detail-process-orbit i,
  .detail-result-strip-wall img,
  .detail-queue-core i,
  .detail-compare-run-bg {
    animation: none;
  }
}

.template-before-after {
  min-height: 480px;
  position: relative;
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(239, 249, 249, 0.8), rgba(255, 247, 235, 0.78));
}

.template-before-after figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(191, 216, 224, 0.88);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(21, 48, 56, 0.14);
}

.template-before-after img {
  width: 100%;
  height: 420px;
  display: block;
  object-fit: cover;
  object-position: top center;
}

.template-before-after figcaption {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(18, 50, 58, 0.84);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.template-before-after .after {
  transform: translateY(-12px);
}

.template-before-after .small {
  position: absolute;
  right: 32px;
  bottom: 24px;
  width: 32%;
  transform: none;
}

.template-before-after .small img {
  height: 190px;
}

@media (max-width: 1600px) {
  .material-task-grid {
    grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.1fr);
  }

  .material-task-grid.material-extract-task-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}

@media (max-width: 1240px) {
  .material-task-grid {
    grid-template-columns: 1fr;
  }

  .material-task-grid.material-extract-task-grid {
    grid-template-columns: minmax(180px, 0.65fr) minmax(320px, 1.35fr);
    grid-template-areas:
      "level level"
      "source output-root"
      "output-level repeat"
      "template template";
  }

  .material-extract-template-field {
    justify-self: stretch;
  }

  .material-extract-layout {
    grid-template-columns: 1fr;
  }

  .extract-output-path {
    grid-template-columns: 1fr;
  }

  .extract-output-path .required-field-error {
    grid-column: 1;
  }

  .extract-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }

  .compact-task-path,
  .material-scope-tabs {
    width: 100%;
  }

  .material-two-column,
  .material-detail-workbench,
  .material-template-layout {
    grid-template-columns: 1fr;
  }

  .material-hero-badge {
    display: none;
  }
}

.top-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.account-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 7px;
  color: #15535f;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(14, 72, 82, 0.1);
}

.account-pill:hover {
  background: #effffd;
}

.account-pill.signed {
  color: #07424a;
}

.account-menu-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.account-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 42, 48, 0.32);
  backdrop-filter: blur(3px);
}

.account-popover {
  position: static;
  z-index: 1401;
  display: grid;
  gap: 14px;
  width: min(520px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  padding: 16px;
  overflow: auto;
  border: 1px solid rgba(185, 222, 220, 0.9);
  border-radius: 10px;
  background: #f8fcfc;
  box-shadow: 0 28px 80px rgba(8, 43, 50, 0.28);
}

.auth-gate-root {
  min-height: 100vh;
  background: var(--theme-canvas);
  color: var(--theme-text);
}

.account-menu-full-page {
  display: block;
  min-height: 100vh;
}

.account-auth-gate-backdrop {
  align-items: center;
  overflow: auto;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, var(--theme-canvas)), var(--theme-canvas));
  backdrop-filter: none;
}

.account-menu-full-page .account-popover {
  width: min(500px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  border-color: var(--theme-border-strong);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 24px 64px rgba(8, 43, 50, 0.18);
}

.auth-gate-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-border);
}

.auth-gate-brand img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain;
}

.auth-gate-brand div {
  display: grid;
  gap: 2px;
}

.auth-gate-brand strong {
  color: var(--theme-text-strong);
  font-size: 21px;
}

.auth-gate-brand span {
  color: var(--theme-muted);
  font-size: 13px;
}

.auth-gate-message {
  padding: 9px 11px;
  border: 1px solid var(--theme-warning-border);
  border-radius: 7px;
  background: var(--theme-warning);
  color: var(--theme-warning-text);
  font-size: 13px;
  line-height: 1.5;
}

.auth-recovery-screen {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--theme-canvas);
  color: var(--theme-text);
}

.auth-recovery-screen.is-overlay {
  z-index: 2300;
  background: color-mix(in srgb, var(--theme-canvas) 88%, transparent);
  backdrop-filter: blur(5px);
}

.auth-recovery-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(520px, 100%);
  padding: 20px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 8px;
  background: var(--theme-surface);
  box-shadow: 0 20px 54px rgba(8, 36, 42, 0.18);
}

.auth-recovery-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.auth-recovery-card div {
  min-width: 0;
}

.auth-recovery-card span {
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
}

.auth-recovery-card h1 {
  margin: 2px 0 4px;
  color: var(--theme-text-strong);
  font-size: 19px;
}

.auth-recovery-card p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.5;
}

.auth-recovery-card button,
.device-switch-actions button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--primary);
  border-radius: 6px;
  background: var(--primary);
  color: var(--theme-on-accent);
  cursor: pointer;
  font-weight: 800;
}

.auth-recovery-spinner {
  color: var(--primary);
  animation: auth-recovery-spin 0.9s linear infinite;
}

@keyframes auth-recovery-spin {
  to { transform: rotate(360deg); }
}

.device-switch-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 27, 33, 0.52);
  backdrop-filter: blur(3px);
}

.device-switch-dialog {
  width: min(520px, 100%);
  padding: 20px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 8px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 24px 70px rgba(5, 25, 30, 0.28);
}

.device-switch-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.device-switch-heading > svg {
  flex: 0 0 auto;
  color: var(--theme-warning-text);
}

.device-switch-heading h2 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 20px;
}

.device-switch-heading p {
  margin: 4px 0 0;
  color: var(--theme-muted);
  font-size: 13px;
}

.device-switch-warning,
.device-switch-note,
.device-switch-error {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.55;
}

.device-switch-warning {
  border: 1px solid var(--theme-warning-border);
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.device-switch-note {
  border: 1px solid var(--theme-info-border);
  background: var(--theme-info);
  color: var(--theme-info-text);
}

.device-switch-error {
  border: 1px solid var(--theme-danger-border);
  background: var(--theme-danger);
  color: var(--theme-danger-text);
}

.device-switch-task-list {
  display: grid;
  gap: 6px;
  max-height: 190px;
  margin-top: 12px;
  overflow: auto;
}

.device-switch-task-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  font-size: 13px;
}

.device-switch-task-list span {
  flex: 0 0 auto;
  color: var(--theme-muted);
}

.device-switch-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.device-switch-actions button.secondary {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
  color: var(--theme-text);
}

.device-switch-actions button:disabled {
  cursor: wait;
  opacity: 0.62;
}

@media (max-width: 560px) {
  .account-auth-gate-backdrop,
  .auth-recovery-screen,
  .device-switch-backdrop {
    align-items: start;
    padding: 16px;
  }

  .account-menu-full-page .account-popover {
    max-height: calc(100vh - 32px);
  }

  .auth-recovery-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .auth-recovery-card button,
  .auth-recovery-spinner {
    grid-column: 1 / -1;
    justify-self: stretch;
  }

  .device-switch-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.account-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 0;
}

.account-dialog-head div {
  display: grid;
  gap: 4px;
}

.account-dialog-head strong {
  color: #062f36;
  font-size: 18px;
  line-height: 1.2;
}

.account-dialog-head span {
  color: #617a82;
  font-size: 13px;
  line-height: 1.45;
}

.account-dialog-close {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfe4e4;
  border-radius: 999px;
  background: #fff;
  color: #45636b;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.account-dialog-close:hover {
  border-color: var(--primary);
  background: #effffd;
  color: #063b42;
}

.account-login-shell {
  display: grid;
  gap: 12px;
}

.account-login-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid #d7e8e8;
  border-radius: 9px;
  background: #eef8f8;
}

.account-login-tabs button {
  min-height: 34px;
  flex: 1 1 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #557178;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.account-login-tabs button.active {
  background: #fff;
  color: #063b42;
  box-shadow: 0 6px 16px rgba(12, 78, 83, 0.12);
}

.account-login-tabs button.warn.active {
  color: #9a4b00;
}

.account-bootstrap-hint {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid #ffe1a6;
  border-radius: 8px;
  background: #fff9eb;
  color: #7a4b00;
}

.account-bootstrap-hint b {
  font-size: 12px;
}

.account-bootstrap-hint span {
  font-size: 12px;
  line-height: 1.45;
}

.account-panel {
  padding: 14px;
  border: 1px solid #c8e6e4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(19, 58, 68, 0.08);
  color: #132f38;
}

.account-popover .account-panel {
  box-shadow: none;
}

.account-login-form {
  padding: 16px;
}

@media (max-width: 820px) {
  .material-task-grid.material-extract-task-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "level"
      "source"
      "output-root"
      "output-level"
      "repeat"
      "template";
  }

  .material-extract-level-options {
    grid-template-columns: 1fr;
  }
}

.account-login-help {
  display: flex;
  justify-content: flex-end;
}

.account-register-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 16px 16px;
  color: #6b7d82;
  font-size: 12px;
}

.account-register-link button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #087f78;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.account-register-link button:hover {
  text-decoration: underline;
}

.account-panel-head {
  display: grid;
  gap: 3px;
  margin-bottom: 12px;
}

.account-panel-head strong {
  font-size: 15px;
  color: #062f36;
}

.account-panel-head span {
  color: #69818a;
  font-size: 12px;
  line-height: 1.45;
}

.account-summary-grid {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 0 12px;
  border-top: 1px solid #e8f0f1;
  border-bottom: 1px solid #e8f0f1;
}

.account-summary-grid span {
  color: #71858d;
  font-size: 12px;
}

.account-summary-grid b {
  min-width: 0;
  overflow: hidden;
  color: #102f38;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}

.account-quick-links {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.account-quick-links button {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #d8ebeb;
  border-radius: 7px;
  background: #f9fdfd;
  color: #143b45;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.account-quick-links button:hover {
  border-color: #9bd6d2;
  background: #effffd;
}

.account-quick-links b {
  font-size: 13px;
}

.account-quick-links span {
  color: #6b858d;
  font-size: 12px;
}

.account-form {
  display: grid;
  gap: 10px;
}

.account-form-row {
  display: grid;
  gap: 5px;
}

.account-form-row span {
  color: #244b55;
  font-size: 12px;
  font-weight: 800;
}

.account-form-row input {
  height: 34px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #cbdde1;
  border-radius: 6px;
  background: #fff;
  color: #102f38;
}

.account-form-row input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(12, 176, 166, 0.12);
}

.account-form-row.code-row {
  grid-template-columns: 1fr 112px;
}

.account-form-row.code-row > span {
  grid-column: 1 / -1;
}

.account-error {
  padding: 8px 10px;
  border: 1px solid #ffd2d2;
  border-radius: 6px;
  background: #fff6f6;
  color: #b4232a;
  font-size: 12px;
  line-height: 1.4;
}

.account-actions.split {
  justify-content: space-between;
  gap: 8px;
}

.account-recharge-box {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #d9eceb;
  border-radius: 8px;
  background: #f8fcfc;
}

.account-recharge-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.account-recharge-head strong {
  color: #103b43;
  font-size: 13px;
}

.account-recharge-head span,
.account-recharge-box small {
  color: #6c858d;
  font-size: 12px;
  line-height: 1.4;
}

.account-form-row.recharge-row {
  grid-template-columns: 74px 92px 1fr;
  align-items: center;
}

.account-form-row.recharge-row > span {
  grid-column: auto;
}

.account-form-row.recharge-row em {
  color: #137c78;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.recharge-order-note {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid #ffe1a6;
  border-radius: 6px;
  background: #fff8e8;
  color: #7a4b00;
}

.recharge-order-note.paid {
  border-color: #bfe7d2;
  background: #f0fbf5;
  color: #147244;
}

.recharge-order-note b,
.recharge-order-note span {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-order-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e6f0f1;
}

.account-order-list-head,
.account-order-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 58px 42px;
  gap: 8px;
  align-items: center;
}

.account-order-list-head strong {
  color: #173943;
  font-size: 13px;
}

.account-order-list-head span,
.account-order-item span {
  color: #6b8188;
  font-size: 12px;
}

.account-order-item {
  min-height: 28px;
  padding: 5px 6px;
  border: 1px solid #edf3f4;
  border-radius: 6px;
  background: #ffffff;
}

.account-order-item b {
  min-width: 0;
  overflow: hidden;
  color: #173943;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-order-muted {
  color: #a8b8be;
  text-align: center;
}

.order-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff3d1;
  color: #8a5b00;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.order-status.paid {
  background: #e7f8ee;
  color: #147244;
}

.order-status.closed {
  background: #eef2f4;
  color: #657981;
}

.order-status.refunded {
  background: #eef1ff;
  color: #4351a6;
}

.order-status.review {
  background: #fff2dc;
  color: #985c00;
}

.mini-text-button {
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid #d3e5ea;
  border-radius: 5px;
  background: #ffffff;
  color: #37606c;
  font-size: 12px;
  line-height: 1;
}

.mini-text-button:hover:not(:disabled) {
  border-color: #93ccd7;
  color: var(--primary-dark);
}

.mini-text-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.account-center-page {
  display: grid;
  gap: 16px;
  padding: 20px 24px 32px;
  color: #14313a;
}

.account-center-hero,
.account-center-empty,
.account-center-main,
.account-center-nav,
.account-section {
  border: 1px solid #d8e9eb;
  border-radius: 8px;
  background: #ffffff;
}

.account-center-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.account-center-hero h1 {
  margin: 0 0 4px;
  color: #062f36;
  font-size: 22px;
  line-height: 1.2;
}

.account-center-hero p,
.account-center-empty p {
  margin: 0;
  color: #657d85;
  font-size: 13px;
  line-height: 1.5;
}

.account-center-empty {
  display: grid;
  max-width: 520px;
  gap: 12px;
  margin: 80px auto;
  padding: 24px;
  text-align: center;
}

.account-center-empty strong {
  color: #062f36;
  font-size: 18px;
}

.account-center-layout {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.account-center-nav {
  position: sticky;
  top: 68px;
  display: grid;
  gap: 6px;
  padding: 8px;
}

.account-center-nav button {
  display: grid;
  gap: 2px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #49666f;
  cursor: pointer;
  text-align: left;
}

.account-center-nav button:hover {
  background: #f3fbfb;
}

.account-center-nav button.active {
  border-color: #b9e3df;
  background: #e9faf7;
  color: #053940;
}

.account-center-nav b {
  font-size: 13px;
}

.account-center-nav span {
  color: #748a91;
  font-size: 12px;
}

.account-center-main {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
}

.account-overview-band {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 10px;
}

.account-overview-band > div,
.account-stat-card,
.account-plan-row,
.account-current-order,
.account-platform-tile {
  border: 1px solid #e0ecee;
  border-radius: 8px;
  background: #fbfdfd;
}

.account-overview-band > div {
  display: grid;
  gap: 4px;
  padding: 13px;
}

.account-overview-band span,
.account-stat-card span,
.account-recharge-preview span {
  color: #6e858d;
  font-size: 12px;
}

.account-overview-band strong {
  color: #08323a;
  font-size: 18px;
}

.account-overview-band small,
.account-stat-card small {
  color: #6c858d;
  font-size: 12px;
  line-height: 1.4;
}

.account-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.account-stat-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
}

.account-stat-card b {
  overflow: hidden;
  color: #062f36;
  font-size: 20px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-section {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.account-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf3f4;
}

.account-section-head h2 {
  margin: 0 0 4px;
  color: #062f36;
  font-size: 18px;
  line-height: 1.2;
}

.account-section-head p {
  margin: 0;
  color: #657d85;
  font-size: 13px;
  line-height: 1.45;
}

.account-soft-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #bee5df;
  border-radius: 999px;
  background: #effffd;
  color: #0d686b;
  font-size: 12px;
  font-weight: 800;
}

.account-plan-list {
  display: grid;
  gap: 8px;
}

.account-plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 118px minmax(220px, 0.9fr);
  gap: 12px;
  align-items: center;
  padding: 11px;
}

.account-plan-row.current {
  border-color: #8bd3ce;
  background: #effffd;
}

.account-plan-row strong,
.account-shop-row b,
.account-device-row b,
.account-platform-tile b {
  color: #10343d;
  font-size: 13px;
}

.account-plan-row span,
.account-plan-row small,
.account-shop-row span,
.account-device-row span,
.account-platform-tile span {
  min-width: 0;
  overflow: hidden;
  color: #657d85;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-plan-row b {
  color: #08323a;
  font-size: 14px;
}

.account-inline-note {
  padding: 9px 11px;
  border: 1px solid #d9eceb;
  border-radius: 7px;
  background: #f8fcfc;
  color: #59747c;
  font-size: 12px;
  line-height: 1.45;
}

.account-wallet-grid {
  display: grid;
  grid-template-columns: 160px minmax(150px, 1fr) 140px;
  gap: 10px;
  align-items: end;
}

.account-wallet-grid .account-form-row input,
.account-bind-form .account-form-row input,
.account-bind-form .account-form-row select,
.account-edit-card .account-form-row input,
.account-edit-card .account-form-row select,
.account-team-row select {
  height: 36px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #cbdde1;
  border-radius: 6px;
  background: #fff;
  color: #102f38;
}

.account-bind-form .account-form-row select:focus,
.account-edit-card .account-form-row select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(12, 176, 166, 0.12);
}

.account-recharge-preview {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #d9eceb;
  border-radius: 7px;
  background: #f8fcfc;
}

.account-recharge-preview b {
  color: #0d686b;
  font-size: 15px;
}

.account-current-order {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.2fr) 118px;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

.account-current-order.paid {
  border-color: #bfe7d2;
  background: #f0fbf5;
}

.account-current-order small {
  overflow: hidden;
  color: #6c858d;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-order-table,
.account-shop-table,
.account-device-table {
  display: grid;
  border: 1px solid #e2ecee;
  border-radius: 8px;
  overflow: hidden;
}

.account-order-row,
.account-shop-row,
.account-device-row {
  display: grid;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border-top: 1px solid #edf3f4;
  background: #fff;
}

.account-order-row:first-child,
.account-shop-row:first-child,
.account-device-row:first-child {
  border-top: 0;
}

.account-order-row {
  grid-template-columns: 84px 110px 100px 100px 70px;
}

.account-shop-row {
  grid-template-columns: 64px minmax(130px, 1fr) minmax(130px, 0.9fr) minmax(116px, 0.75fr) 82px 72px 96px minmax(310px, 1.6fr);
}

.account-device-row {
  grid-template-columns: minmax(0, 1fr) 150px 76px 110px;
}

.account-order-row.head,
.account-shop-row.head,
.account-device-row.head {
  min-height: 34px;
  background: #f3f8f9;
  color: #49666f;
  font-size: 12px;
  font-weight: 800;
}

.account-empty-row {
  padding: 14px;
  color: #738990;
  font-size: 13px;
}

.account-platform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.account-platform-tile {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid #d9eceb;
  border-radius: 7px;
  background: #f8fcfc;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.account-platform-tile.pending {
  border-color: #d8e0e1;
  background: #f4f7f7;
  cursor: not-allowed;
}

.account-platform-tile.selected {
  border-color: var(--primary);
  background: #e8fbf9;
  box-shadow: 0 0 0 3px rgba(12, 176, 166, 0.08);
}

.account-platform-tile.pending b,
.account-platform-tile.pending span {
  color: #8a999f;
}

.account-bind-form {
  display: grid;
  grid-template-columns: 120px minmax(180px, 1fr) minmax(160px, 0.75fr) minmax(180px, 0.9fr) 110px;
  gap: 10px;
  align-items: end;
}

.account-bind-form-verified {
  grid-template-columns: 120px minmax(230px, 1fr) minmax(210px, 0.9fr) 150px;
  padding: 12px 0;
  border-top: 1px solid #e1ecee;
  border-bottom: 1px solid #e1ecee;
}

.account-bind-form-verified > .account-form-row:nth-of-type(1) {
  grid-column: 1;
}

.account-bind-form-verified > .account-form-row:nth-of-type(2) {
  grid-column: 2;
}

.account-bind-check {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.account-bind-password {
  grid-column: 3;
  grid-row: 2;
}

.account-bind-form-verified > .primary-button {
  grid-column: 4;
  grid-row: 2;
}

.account-bind-mode {
  display: flex;
  grid-column: 1 / -1;
  gap: 9px;
  align-items: baseline;
  min-width: 0;
  color: #536d74;
  font-size: 12px;
}

.account-bind-mode strong {
  flex: 0 0 auto;
  color: #10343d;
  font-size: 13px;
}

.account-bind-mode span {
  min-width: 0;
}

.account-bind-mode .mini-text-button {
  margin-left: auto;
}

.account-binding-guide {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 10px 12px;
  border-left: 3px solid var(--primary);
  background: #f4fbfa;
  color: #35545c;
}

.account-binding-guide strong {
  flex: 0 0 auto;
  padding-top: 1px;
  color: #0d5559;
  font-size: 13px;
}

.account-binding-guide ol {
  display: flex;
  flex: 1;
  gap: 24px;
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
}

.account-binding-guide li {
  flex: 1;
  padding-right: 4px;
}

.account-inline-check {
  display: flex;
  gap: 7px;
  align-items: center;
  min-height: 36px;
  color: #36545c;
  font-size: 12px;
  cursor: pointer;
}

.account-inline-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

.account-shop-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-shop-identity b {
  overflow: hidden;
  color: #10343d;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-shop-identity small {
  overflow: hidden;
  color: #71878e;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-shop-status {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff7e8;
  color: #9a5b08 !important;
  font-weight: 700;
}

.account-shop-status.active {
  background: #eaf8f2;
  color: #147253 !important;
}

.account-shop-status.paused {
  background: #eef2f4;
  color: #60747b !important;
}

.account-shop-status.verification.verified {
  background: #eaf8f2;
  color: #147253 !important;
}

.account-shop-status.unavailable {
  background: #f7f0e5;
  color: #8a5c16 !important;
}

.mini-text-button.primary {
  color: #087a78;
  font-weight: 700;
}

.account-shop-credential-editor {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr) minmax(220px, 1fr) 150px minmax(150px, auto);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #bfe3df;
  border-radius: 7px;
  background: #f6fcfb;
}

.account-shop-credential-editor > div {
  display: grid;
  gap: 4px;
  align-self: center;
}

.account-shop-credential-editor > div strong {
  color: #10343d;
  font-size: 13px;
}

.account-shop-credential-editor > div span {
  color: #6a8188;
  font-size: 11px;
  line-height: 1.4;
}

.account-binding-rules {
  padding-top: 2px;
  color: #4d6870;
  font-size: 12px;
}

.account-binding-rules summary {
  width: fit-content;
  color: #0d686b;
  font-weight: 700;
  cursor: pointer;
}

.account-binding-rules ul {
  display: grid;
  gap: 5px;
  margin: 9px 0 0;
  padding: 10px 12px 10px 28px;
  border-top: 1px solid #deebed;
  background: #fafcfc;
  line-height: 1.5;
}

.account-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.mini-text-button.danger {
  color: #b42318;
}

.shop-verification-backdrop {
  position: fixed;
  z-index: 1600;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(12, 30, 35, 0.46);
  backdrop-filter: blur(3px);
}

.shop-verification-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border: 1px solid var(--theme-border-strong);
  border-radius: 8px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 24px 70px rgba(7, 26, 31, 0.28);
}

.shop-verification-dialog-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--theme-border);
}

.shop-verification-dialog-head h2 {
  margin: 3px 0 0;
  color: var(--theme-text-strong);
  font-size: 20px;
  letter-spacing: 0;
}

.shop-verification-kicker {
  color: var(--theme-muted);
  font-size: 12px;
}

.shop-verification-close {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  cursor: pointer;
}

.shop-verification-close:hover {
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
}

.shop-verification-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 16px 20px;
  border-bottom: 1px solid var(--theme-border);
}

.shop-verification-step {
  position: relative;
  display: grid;
  gap: 7px;
  justify-items: center;
  color: var(--theme-muted);
  font-size: 12px;
  text-align: left;
}

.shop-verification-step:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: 14px;
  left: calc(50% + 22px);
  width: calc(100% - 44px);
  height: 1px;
  background: var(--theme-border-strong);
  content: '';
}

.shop-verification-step > span {
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--theme-border-strong);
  border-radius: 50%;
  background: var(--theme-surface);
  color: var(--theme-muted);
  font-weight: 700;
}

.shop-verification-step.active,
.shop-verification-step.done {
  color: var(--theme-success-text);
}

.shop-verification-step.active > span,
.shop-verification-step.done > span {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.shop-verification-message {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 16px 20px 0;
  padding: 14px;
  border: 1px solid var(--theme-info-border);
  border-radius: 7px;
  background: var(--theme-info);
  color: var(--theme-info-text);
}

.shop-verification-message.verified {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.shop-verification-message.failed,
.shop-verification-message.cancelled {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
  color: var(--theme-danger-text);
}

.shop-verification-message strong {
  display: block;
  margin-bottom: 3px;
  color: currentColor;
  font-size: 14px;
}

.shop-verification-message p {
  margin: 0;
  color: currentColor;
  font-size: 13px;
  line-height: 1.55;
}

.shop-verification-spinner {
  flex: 0 0 auto;
  animation: shop-verification-spin 1s linear infinite;
}

@keyframes shop-verification-spin {
  to { transform: rotate(360deg); }
}

.shop-verification-hints {
  display: grid;
  gap: 6px;
  margin: 14px 20px 0;
  padding: 0 0 0 20px;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.5;
}

.shop-verification-result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 20px 0;
}

.shop-verification-result span {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 12px;
}

.shop-verification-result b {
  overflow-wrap: anywhere;
  color: var(--theme-text-strong);
  font-size: 14px;
}

.shop-verification-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 20px 18px;
}

@media (max-width: 560px) {
  .shop-verification-steps,
  .shop-verification-result {
    grid-template-columns: 1fr;
  }

  .shop-verification-step {
    grid-template-columns: 28px 1fr;
    justify-items: start;
    align-items: center;
    text-align: left;
  }

  .shop-verification-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 1180px) {
  .account-center-layout,
  .account-overview-band,
  .account-stat-grid,
  .account-wallet-grid,
  .account-bind-form,
  .account-shop-credential-editor {
    grid-template-columns: 1fr;
  }

  .account-bind-form-verified > .account-form-row:nth-of-type(1),
  .account-bind-form-verified > .account-form-row:nth-of-type(2),
  .account-bind-form-verified > .account-form-row:nth-of-type(3),
  .account-bind-check,
  .account-bind-password,
  .account-bind-form-verified > .primary-button {
    grid-row: auto;
    grid-column: auto;
  }

  .account-binding-guide,
  .account-binding-guide ol {
    display: grid;
    gap: 8px;
  }

  .account-center-nav {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-plan-row,
  .account-current-order,
  .account-order-row,
  .account-shop-row,
  .account-device-row,
  .account-team-row,
  .account-platform-grid {
    grid-template-columns: 1fr;
  }
}

.account-center-active .app-shell {
  display: block;
  min-height: 100vh;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  background: #f4f8f7;
}

.account-center-active.agent-assistant-open .app-shell {
  padding-right: 0;
}

.account-center-active .main {
  min-height: 100vh;
  padding: 0;
  background: #f4f8f7;
}

.account-center-active .top-agent-entry {
  display: none;
}

.account-center-standalone-page {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  min-height: 100vh;
  padding: 0;
  color: #102f38;
  background:
    radial-gradient(circle at 92% 4%, rgba(16, 174, 166, 0.12), transparent 26%),
    linear-gradient(180deg, #f7fbfa 0%, #f2f7f6 100%);
}

.account-standalone-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 10px clamp(24px, 4vw, 56px);
  border-bottom: 1px solid #dbe9e8;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.account-standalone-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100vh - 56px);
}

.account-standalone-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.account-standalone-brand > span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #08b5aa, #0b8d89);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.account-standalone-brand b {
  display: block;
  color: #082f36;
  font-size: 15px;
  line-height: 1.1;
}

.account-standalone-brand small {
  display: block;
  margin-top: 3px;
  color: #67818a;
  font-size: 12px;
}

.account-standalone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.account-standalone-actions button,
.account-ghost-button,
.account-family-tabs button,
.account-billing-segment button,
.account-points-actions button {
  height: 34px;
  padding: 0 13px;
  border: 1px solid #d8e7e8;
  border-radius: 8px;
  background: #fff;
  color: #173d45;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.account-standalone-actions button:hover,
.account-ghost-button:hover,
.account-family-tabs button:hover,
.account-billing-segment button:hover,
.account-points-actions button:hover {
  border-color: #97d8d4;
  color: #04746f;
}

.account-local-sidebar {
  position: sticky;
  top: 56px;
  align-self: start;
  height: calc(100vh - 56px);
  padding: 22px 14px 18px;
  border-right: 1px solid #dbe9e8;
  background: rgba(255, 255, 255, 0.92);
  overflow-y: auto;
}

.account-local-sidebar-title {
  display: grid;
  gap: 5px;
  padding: 6px 10px 16px;
}

.account-local-sidebar-title strong {
  color: #082f36;
  font-size: 17px;
  line-height: 1.15;
}

.account-local-sidebar-title span {
  color: #647b83;
  font-size: 12px;
}

.account-local-nav {
  display: grid;
  gap: 6px;
}

.account-local-nav button {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 54px;
  width: 100%;
  padding: 9px 12px 9px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #44606a;
  text-align: left;
  cursor: pointer;
}

.account-local-nav button::before {
  position: absolute;
  left: 8px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 99px;
  background: transparent;
  content: "";
}

.account-local-nav button strong {
  color: #173d45;
  font-size: 14px;
  line-height: 1.15;
}

.account-local-nav button span {
  color: #6d8188;
  font-size: 12px;
  line-height: 1.25;
}

.account-local-nav button:hover {
  border-color: #d4e8e7;
  background: #f7fcfb;
}

.account-local-nav button.active {
  border-color: #ccebe8;
  background: #eaf9f7;
  box-shadow: inset 0 0 0 1px rgba(8, 169, 164, 0.08);
}

.account-local-nav button.active::before {
  background: #08a9a4;
}

.account-local-nav button.active strong {
  color: #04746f;
}

.account-local-sidebar-foot {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding: 14px 10px 0;
  border-top: 1px solid #e3eeee;
}

.account-local-sidebar-foot button {
  height: 34px;
  border: 1px solid #d8e7e8;
  border-radius: 8px;
  background: #fff;
  color: #173d45;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.account-local-sidebar-foot button:hover {
  border-color: #97d8d4;
  color: #04746f;
}

.account-subscription-page {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 28px 32px 54px;
}

.account-subscription-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  margin-bottom: 18px;
}

.account-subscription-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.account-subscription-title h1 {
  margin: 0;
  color: #062f36;
  font-size: 22px;
  line-height: 1.18;
}

.account-subscription-title p {
  margin: 0;
  color: #687e86;
  font-size: 13px;
}

.account-title-tabs {
  display: none;
}

.account-center-main {
  display: grid;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
}

.account-current-band {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid #e3eceb;
  border-radius: 14px;
  background: #f5f7f3;
  box-shadow: 0 18px 42px rgba(14, 55, 58, 0.08);
}

.account-current-plan-card {
  display: grid;
  gap: 12px;
  min-height: 156px;
  padding: 26px 28px;
  color: #fff;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.36), transparent 24%),
    linear-gradient(135deg, #09383d, #11a9a0);
}

.account-current-plan-card.tier-free {
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.3), transparent 24%),
    linear-gradient(135deg, #35515a, #18a39b);
}

.account-current-plan-card.tier-advanced,
.account-current-plan-card.tier-professional,
.account-current-plan-card.tier-flagship {
  background:
    radial-gradient(circle at 78% 16%, rgba(255, 255, 255, 0.35), transparent 23%),
    linear-gradient(135deg, #06494c, #08b5aa);
}

.account-plan-status {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #efffff;
  font-size: 12px;
  font-weight: 900;
}

.account-current-plan-card strong {
  color: #fff;
  font-size: 24px;
  line-height: 1.1;
}

.account-current-plan-card small {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
}

.account-points-summary {
  display: grid;
  grid-template-columns: minmax(160px, 0.72fr) minmax(0, 1.45fr) auto;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
}

.account-points-total span,
.account-point-stat span {
  display: block;
  color: #4f666e;
  font-size: 13px;
  font-weight: 800;
}

.account-points-total b {
  display: block;
  margin-top: 10px;
  color: #071f25;
  font-size: 28px;
  line-height: 1;
}

.account-points-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid #dfe8e7;
  border-right: 1px solid #dfe8e7;
}

.account-point-stat {
  display: grid;
  gap: 9px;
  padding: 0 28px;
}

.account-point-stat + .account-point-stat {
  border-left: 1px solid #dfe8e7;
}

.account-point-stat b {
  color: #071f25;
  font-size: 24px;
  line-height: 1;
}

.account-points-actions {
  display: flex;
  gap: 10px;
}

.account-points-actions button.dark {
  border-color: #063a3d;
  background: #063a3d;
  color: #fff;
}

.account-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.account-usage-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.account-section-head.compact {
  margin-bottom: 0;
}

.account-usage-list {
  display: grid;
  gap: 0;
  border-top: 1px solid #dce9ea;
}

.account-usage-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(100px, auto) minmax(150px, auto);
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 6px 0;
  border-bottom: 1px solid #e1eceb;
  background: transparent;
  font-size: 12px;
}

.account-usage-name,
.account-usage-row span,
.account-usage-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-usage-row span {
  color: #36535a;
}

.account-usage-row > span:nth-child(2) {
  color: #063a3d;
}

.account-usage-row small {
  color: #71848a;
}

.account-stat-card {
  border-color: #e1eceb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(14, 55, 58, 0.05);
}

.account-stat-card b {
  font-size: 18px;
}

.account-plan-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}

.account-family-tabs {
  display: flex;
  gap: 18px;
}

.account-family-tabs button {
  height: 32px;
  padding: 0 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #68777f;
  font-size: 15px;
}

.account-family-tabs button.active {
  color: #062f36;
  border-bottom: 2px solid #0aa69f;
}

.account-billing-segment {
  display: inline-flex;
  gap: 0;
  margin-left: auto;
  padding: 4px;
  border-radius: 999px;
  background: #edf3f2;
}

.account-billing-segment button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 136px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #738086;
  font-weight: 900;
}

.account-billing-segment button.active {
  background: #fff;
  color: #06494c;
  box-shadow: 0 8px 18px rgba(14, 55, 58, 0.08);
}

.account-billing-segment button strong {
  color: #e76f00;
  font-size: 12px;
  line-height: 1;
}

.account-billing-segment button em {
  position: absolute;
  top: -15px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ff7a1a;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
  box-shadow: 0 8px 18px rgba(255, 122, 26, 0.28);
}

.account-plan-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.account-price-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(52px, auto) auto auto auto 1fr;
  gap: 15px;
  min-height: 620px;
  padding: 22px 20px 20px;
  border: 1px solid #e5eceb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(14, 55, 58, 0.06);
}

.account-price-card.tier-free {
  min-width: 0;
  padding-left: 18px;
  padding-right: 18px;
}

.account-price-card.current {
  border-color: #6bcac3;
  box-shadow: 0 18px 44px rgba(7, 148, 139, 0.14);
}

.account-price-card.is-revealed-from-announcement {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.account-price-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.account-price-card-head strong {
  display: block;
  color: #061e24;
  font-size: 18px;
  line-height: 1.15;
}

.account-price-card-head span,
.account-price-card-head em {
  display: inline-flex;
  width: fit-content;
  margin-top: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e9f8f6;
  color: #08746f;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.account-price-card-head em {
  margin-top: 0;
  background: #fff1dc;
  color: #b15d00;
}

.account-price {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: 42px;
}

.account-price b {
  color: #071f25;
  font-size: 30px;
  line-height: 1;
}

.account-price small {
  padding-bottom: 4px;
  color: #839097;
  font-size: 13px;
}

.account-price-note {
  width: fit-content;
  margin-top: -8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff4e8;
  color: #af5600;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.account-price-card p {
  margin: 0;
  color: #68777f;
  font-size: 12px;
  line-height: 1.5;
}

.account-card-points {
  padding: 12px 0;
  border-top: 1px dashed #dde8e7;
  border-bottom: 1px dashed #dde8e7;
  color: #052f36;
  font-size: 13px;
  font-weight: 500;
}

.account-plan-highlights {
  display: grid;
  gap: 7px;
  padding: 3px 0 2px;
}

.account-plan-highlight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 24px;
  padding-bottom: 7px;
  border-bottom: 1px solid #edf4f3;
}

.account-plan-highlight-row span {
  min-width: 0;
  color: #49666f;
  font-size: 12px;
  line-height: 1.35;
}

.account-plan-highlight-row .account-plan-highlight-value {
  color: #062f36;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.account-price-card > button {
  height: 36px;
  border: 1px solid #d7e5e5;
  border-radius: 8px;
  background: #fff;
  color: #10343d;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.account-price-card > button.current {
  border-color: #0aa69f;
  background: #0aa69f;
  color: #fff;
}

.account-current-plan-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid #0aa69f;
  border-radius: 8px;
  background: #e8f8f6;
  color: #075c60;
  font-size: 13px;
  font-weight: 800;
}

.account-profile-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid #dce9e8;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfb 100%);
}

.account-profile-avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 16px;
  background: #0aa69f;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.account-profile-summary {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.account-profile-summary strong {
  color: #062f36;
  font-size: 20px;
  line-height: 1.15;
}

.account-profile-summary span {
  color: #31525c;
  font-size: 13px;
  font-weight: 800;
}

.account-profile-summary p {
  max-width: 760px;
  margin: 2px 0 0;
  color: #657c84;
  font-size: 13px;
  line-height: 1.55;
}

.account-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.account-profile-item {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid #e0eceb;
  border-radius: 10px;
  background: #fff;
}

.account-profile-item span {
  color: #6c8088;
  font-size: 12px;
  font-weight: 800;
}

.account-profile-item b {
  overflow: hidden;
  color: #0a323a;
  font-size: 15px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-item small {
  color: #71858c;
  font-size: 12px;
  line-height: 1.45;
}

.account-inline-note.compact {
  padding: 8px 10px;
}

.account-profile-avatar.image {
  object-fit: cover;
  border: 1px solid #cbe4e2;
  background: #fff;
}

.account-management-grid,
.account-team-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.account-edit-card,
.account-team-list {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #e0eceb;
  border-radius: 12px;
  background: #fff;
}

.account-edit-card-head {
  display: grid;
  gap: 4px;
}

.account-edit-card-head strong {
  color: #062f36;
  font-size: 15px;
}

.account-edit-card-head span {
  color: #657c84;
  font-size: 12px;
  line-height: 1.45;
}

.account-inline-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 8px;
  align-items: end;
}

.account-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-check-row,
.account-permission-pills label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 30px;
  color: #31525c;
  font-size: 12px;
  font-weight: 700;
}

.account-check-row input,
.account-permission-pills input {
  width: 14px;
  height: 14px;
  accent-color: #0aa69f;
}

.account-team-table {
  display: grid;
  overflow: hidden;
  border: 1px solid #e2ecee;
  border-radius: 8px;
}

.account-team-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 96px minmax(300px, 1.6fr) 72px 190px;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 9px 10px;
  border-top: 1px solid #edf3f4;
  background: #fff;
}

.account-team-row:first-child {
  border-top: 0;
}

.account-team-row.head {
  min-height: 34px;
  background: #f3f8f9;
  color: #49666f;
  font-size: 12px;
  font-weight: 800;
}

.account-team-user {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.account-team-user b,
.account-team-user span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-team-user b {
  color: #062f36;
  font-size: 13px;
}

.account-team-user span {
  color: #71858c;
  font-size: 12px;
}

.account-permission-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.account-permission-pills label {
  min-height: 24px;
  padding: 2px 6px;
  border: 1px solid #dde9e8;
  border-radius: 999px;
  background: #f8fcfb;
}

.account-permission-pills label.checked {
  border-color: #9edbd7;
  background: #e8f8f6;
  color: #075c60;
}

.account-price-card ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-price-card li {
  position: relative;
  padding-left: 17px;
  color: #364f57;
  font-size: 12px;
  line-height: 1.45;
}

.account-price-card li::before {
  position: absolute;
  left: 0;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0aa69f;
  content: "";
}

.account-edition-placeholder {
  display: grid;
  gap: 8px;
  min-height: 180px;
  place-items: center;
  border: 1px dashed #b8dcd9;
  border-radius: 14px;
  background: #f8fcfb;
  text-align: center;
}

.account-edition-placeholder strong {
  color: #062f36;
  font-size: 20px;
}

.account-edition-placeholder span {
  color: #65777f;
  font-size: 13px;
}

.account-section {
  border-color: #e1eceb;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(14, 55, 58, 0.05);
}

.account-wallet-section {
  background: #fff;
}

.account-wallet-type-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  gap: 3px;
  width: fit-content;
  padding: 3px;
  border: 1px solid #dbe8e7;
  border-radius: 7px;
  background: #f3f8f7;
}

.account-wallet-type-tabs button {
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #50666d;
  font-weight: 700;
  cursor: pointer;
}

.account-wallet-type-tabs button.active {
  border-color: #b9dcda;
  background: #fff;
  color: #007d78;
  box-shadow: 0 2px 7px rgba(14, 83, 80, 0.08);
}

.account-billing-standard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.account-billing-standard > div {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid #e1eceb;
  border-radius: 10px;
  background: #f8fcfb;
}

.account-billing-standard span {
  color: #65777f;
  font-size: 12px;
}

.account-billing-standard b {
  color: #062f36;
  font-size: 13px;
}

@media (max-width: 1360px) {
  .account-standalone-layout {
    grid-template-columns: 226px minmax(0, 1fr);
  }

  .account-subscription-page {
    padding-inline: 24px;
  }

  .account-plan-card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .account-management-grid,
  .account-team-layout {
    grid-template-columns: 1fr;
  }

  .account-team-row {
    grid-template-columns: minmax(150px, 1fr) 90px minmax(220px, 1.2fr) 70px 170px;
  }

  .account-points-summary,
  .account-current-band {
    grid-template-columns: 1fr;
  }

  .account-points-columns {
    border-left: 0;
    border-right: 0;
  }
}

@media (max-width: 880px) {
  .account-standalone-layout {
    grid-template-columns: 1fr;
  }

  .account-local-sidebar {
    position: relative;
    top: 0;
    height: auto;
    padding: 14px;
    border-right: 0;
    border-bottom: 1px solid #dbe9e8;
  }

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

  .account-local-sidebar-foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-subscription-page {
    width: 100%;
    padding: 20px 14px 40px;
  }

  .account-standalone-header,
  .account-subscription-head,
  .account-plan-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .account-billing-segment,
  .account-family-tabs,
  .account-standalone-actions {
    overflow-x: auto;
    justify-content: flex-start;
  }

  .account-billing-segment {
    margin-left: 0;
  }

  .account-plan-card-row,
  .account-mini-stats,
  .account-profile-grid,
  .account-management-grid,
  .account-team-layout,
  .account-permission-grid,
  .account-billing-standard,
  .account-points-columns {
    grid-template-columns: 1fr;
  }

  .account-profile-panel {
    grid-template-columns: 1fr;
  }

  .account-point-stat {
    padding: 12px 0;
    border-left: 0;
    border-top: 1px solid #dfe8e7;
  }
}

.top-task-center-entry {
  display: inline-flex;
  min-height: 34px;
  max-width: 260px;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.top-task-center-entry:hover {
  background: rgba(255, 255, 255, 0.18);
}

.top-task-center-entry.active {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.2);
}

.top-task-center-entry.attention {
  border-color: rgba(255, 228, 166, 0.9);
  background: #fff4dd;
  color: #754300;
}

.top-task-center-entry > span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
  text-align: left;
}

.top-task-center-entry b,
.top-task-center-entry small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-task-center-entry b {
  font-size: 12px;
  line-height: 1.15;
}

.top-task-center-entry small {
  max-width: 210px;
  opacity: 0.82;
  font-size: 11px;
  line-height: 1.15;
}

.task-entry-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

.top-task-center-entry.active .task-entry-dot {
  background: #d7fff5;
  animation: task-entry-pulse 1.2s ease-in-out infinite;
}

.top-task-center-entry.attention .task-entry-dot {
  background: #d94141;
  box-shadow: 0 0 0 4px rgba(217, 65, 65, 0.12);
}

.top-agent-entry {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 8px;
  color: #064f58;
  background: #ffffff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(14, 72, 82, 0.12);
}

.top-agent-entry:hover {
  background: #effffd;
  border-color: #d7fffb;
}

.top-agent-entry.open {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(7, 117, 122, 0.92);
}

.top-agent-entry svg {
  color: var(--primary-dark);
}

.top-agent-entry.open svg {
  color: #ffffff;
}

.top-agent-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  color: currentColor;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

@keyframes task-entry-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.22); opacity: 1; }
}

.global-left {
  display: grid;
  gap: 4px;
  color: #fff;
  min-width: 220px;
  overflow: hidden;
}

.global-left strong,
.global-left span {
  white-space: nowrap;
}

.global-left span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

.global-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

.app-shell {
  display: flex;
  min-height: 100vh;
  padding-top: var(--layout-header-height);
  padding-left: var(--sidebar-width);
  padding-right: 0;
  transition: padding-left 180ms ease, padding-right 180ms ease;
}

.agent-assistant-open .app-shell {
  padding-right: var(--agent-assistant-width);
}

.agent-workbench-active .app-shell {
  padding-left: 0;
  padding-right: 0;
}

.agent-workbench-active .main {
  padding: 0;
}

.agent-workbench-active .top-agent-entry {
  display: none;
}

.sidebar {
  position: fixed;
  top: var(--layout-header-height);
  left: 0;
  bottom: 0;
  z-index: 90;
  width: var(--sidebar-width);
  flex: none;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 8px 88px;
  background: #fff;
  border-right: 1px solid var(--line);
  transition: width 180ms ease, flex-basis 180ms ease;
}

.sidebar-edge-toggle {
  position: sticky;
  top: 0;
  z-index: 24;
  width: 30px;
  height: 30px;
  margin: 0 0 7px auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid #b9dde1;
  border-radius: 9px;
  background: #f7fcfb;
  color: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(20, 83, 93, 0.1);
}

.sidebar-edge-toggle:hover {
  border-color: var(--primary);
  background: #effcfb;
  color: var(--primary-dark);
}

.agent-assistant-layer {
  position: fixed;
  top: var(--layout-header-height);
  right: 0;
  bottom: 0;
  width: var(--agent-assistant-width);
  z-index: 96;
  pointer-events: none;
}

.agent-assistant-launcher {
  position: fixed;
  right: 14px;
  top: 46vh;
  bottom: auto;
  z-index: 226;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px 0 0 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #10a99f, #087b84);
  box-shadow: 0 12px 28px rgba(8, 73, 84, 0.26);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.agent-assistant-launcher:hover {
  transform: translateX(-2px);
  box-shadow: 0 16px 34px rgba(8, 73, 84, 0.32);
}

.agent-assistant-launcher.is-dragging {
  cursor: grabbing;
  transform: translateX(-2px) scale(1.01);
}

.agent-assistant-launcher span {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.agent-assistant-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(16, 35, 42, 0.28);
  pointer-events: auto;
}

.agent-assistant-drawer {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #c9dce3;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: #f8fbfc;
  box-shadow: -12px 0 28px rgba(13, 39, 50, 0.12);
  pointer-events: auto;
}

.agent-assistant-drawer > .agent-assistant-header {
  grid-row: 1;
}

.agent-assistant-drawer > .agent-workspace-switcher {
  grid-row: 2;
}

.agent-assistant-drawer > .agent-goal-strip {
  grid-row: 3;
}

.agent-assistant-drawer > .agent-message-list {
  grid-row: 4;
  min-height: 0;
}

.agent-assistant-drawer > .agent-compose {
  grid-row: 5;
  min-height: 0;
}

.agent-login-gate {
  display: grid;
  min-height: calc(100vh - var(--layout-header-height));
  padding: 32px;
  place-items: center;
  background: var(--theme-canvas);
}

.agent-login-gate.compact {
  min-height: 0;
  padding: 24px;
  background: transparent;
}

.agent-login-gate-card {
  width: min(460px, 100%);
  padding: 30px;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  box-shadow: var(--shadow);
  text-align: center;
}

.agent-login-gate-card > span {
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
}

.agent-login-gate-card h1,
.agent-login-gate-card h2 {
  margin: 10px 0 8px;
  color: var(--theme-text-strong);
  font-size: 24px;
}

.agent-login-gate-card p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 14px;
  line-height: 1.7;
}

.agent-login-gate-card button {
  min-width: 132px;
  margin-top: 22px;
  padding: 10px 18px;
  border: 1px solid var(--primary);
  border-radius: 7px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
}

.agent-login-gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.agent-login-gate-actions button {
  margin-top: 0;
}

.agent-login-gate-actions button.secondary {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface);
  color: var(--theme-text);
}

.agent-login-gate-actions button.secondary:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--theme-active);
}

.agent-assistant-auth-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.agent-assistant-auth-panel > .agent-login-gate {
  grid-row: 2;
}

.agent-workbench-page {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--layout-header-height));
  min-height: 0;
  max-height: calc(100vh - var(--layout-header-height));
  display: grid;
  grid-template-columns: 52px minmax(230px, 292px) minmax(0, 1fr) 52px;
  overflow: hidden;
  background: #f5fafb;
}

.agent-workbench-page.left-collapsed {
  grid-template-columns: 52px 0 minmax(0, 1fr) 52px;
}

.agent-workbench-page.right-open {
  grid-template-columns: 52px minmax(230px, 292px) minmax(0, 1fr) var(--agent-tool-panel-width, 380px) 52px;
}

.agent-workbench-page.left-collapsed.right-open {
  grid-template-columns: 52px 0 minmax(0, 1fr) var(--agent-tool-panel-width, 380px) 52px;
}

.agent-workbench-rail {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-right: 1px solid #d8e6eb;
  background: #eef7f8;
}

.agent-workbench-rail button,
.agent-side-tools button,
.agent-top-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #55707a;
  background: transparent;
}

.agent-workbench-rail button:hover,
.agent-workbench-rail button.active,
.agent-side-tools button:hover,
.agent-side-tools button.active,
.agent-top-icon:hover {
  border-color: #c7e2e5;
  color: var(--primary-dark);
  background: #ffffff;
}

.agent-workspace-sidebar {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  border-right: 1px solid #d8e6eb;
  background: #fafdfe;
}

.left-collapsed .agent-workspace-sidebar {
  visibility: hidden;
}

.agent-workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px 8px;
}

.agent-workspace-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agent-workspace-head strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.agent-workspace-head span {
  color: var(--muted);
  font-size: 12px;
}

.agent-workspace-head button {
  flex: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 9px;
  border: 1px solid #c5e3e6;
  border-radius: 8px;
  color: var(--primary-dark);
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.agent-workspace-head button:hover {
  background: #e9f8f7;
}

.agent-workspace-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
  padding: 0 9px 12px;
}

.agent-workspace-card {
  position: relative;
  display: grid;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.agent-workspace-card:hover {
  border-color: #d3e7eb;
  background: #f2fafb;
}

.agent-workspace-card.active {
  border-color: #b8e0df;
  background: #e7f7f6;
  box-shadow: inset 3px 0 0 var(--primary);
}

.agent-workspace-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
}

.agent-workspace-toggle {
  width: 24px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #6b838b;
  background: transparent;
}

.agent-workspace-toggle:hover {
  color: var(--primary-dark);
  background: #ffffff;
}

.agent-workspace-item {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 10px 0 10px 2px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #314b54;
  background: transparent;
  text-align: left;
}

.agent-workspace-item strong {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-workspace-item strong span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-workspace-item strong svg {
  flex: none;
  color: #3297ff;
}

.agent-workspace-item span {
  overflow: hidden;
  color: #72868e;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-workspace-card.active .agent-workspace-item {
  color: var(--primary-dark);
}

.agent-workspace-row-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
}

.agent-activity-indicator {
  width: 16px;
  height: 26px;
  display: grid;
  flex: none;
  place-items: center;
}

.agent-activity-indicator.empty {
  visibility: hidden;
}

.agent-activity-ring,
.agent-activity-dot {
  display: block;
  border-radius: 999px;
}

.agent-activity-ring {
  width: 10px;
  height: 10px;
  border: 2px solid #b6c0c6;
  border-top-color: #3297ff;
  animation: agent-activity-spin 900ms linear infinite;
}

.agent-activity-dot {
  width: 7px;
  height: 7px;
  background: #3297ff;
  box-shadow: 0 0 0 2px rgba(50, 151, 255, 0.13);
}

.agent-activity-dot.failed {
  background: #d85a4a;
  box-shadow: 0 0 0 2px rgba(216, 90, 74, 0.13);
}

.agent-activity-dot.waiting_user {
  background: #d99324;
  box-shadow: 0 0 0 2px rgba(217, 147, 36, 0.15);
}

@keyframes agent-activity-spin {
  to {
    transform: rotate(360deg);
  }
}

.agent-workspace-row-actions > button,
.agent-thread-rename,
.agent-thread-archive {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #5e7780;
  background: transparent;
}

.agent-workspace-row-actions > button:hover,
.agent-thread-rename:hover,
.agent-thread-archive:hover {
  border-color: #c8e1e6;
  color: var(--primary-dark);
  background: #ffffff;
}

.agent-workspace-menu {
  position: absolute;
  z-index: 8;
  min-width: 184px;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid #d4e5ea;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(21, 54, 63, 0.16);
}

.agent-workspace-menu {
  top: 30px;
  right: 4px;
}

.agent-workspace-menu button {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  color: #35525c;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.agent-workspace-menu button:hover {
  color: var(--primary-dark);
  background: #eef9f8;
}

.agent-workspace-menu button.danger {
  color: #9b3030;
}

.agent-workspace-menu button.danger:hover {
  background: #fff3f3;
}

.agent-thread-list {
  display: grid;
  gap: 3px;
  padding: 0 6px 7px 30px;
}

.agent-thread-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px 26px 26px;
  align-items: center;
  gap: 3px;
  border-radius: 7px;
}

.agent-thread-item.active {
  background: rgba(255, 255, 255, 0.72);
}

.agent-thread-button {
  min-width: 0;
  min-height: 28px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  color: #4d6872;
  background: transparent;
  text-align: left;
}

.agent-thread-button span {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-thread-button:hover,
.agent-thread-item.active .agent-thread-button {
  color: var(--primary-dark);
}

.agent-thread-rename {
  opacity: 0.62;
  transition: opacity 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.agent-thread-archive {
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

.agent-thread-item:hover .agent-thread-rename,
.agent-thread-item:hover .agent-thread-archive,
.agent-thread-item:focus-within .agent-thread-rename,
.agent-thread-item:focus-within .agent-thread-archive {
  opacity: 1;
  pointer-events: auto;
}

.agent-workbench-main {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  overflow: hidden;
}

.agent-workbench-topbar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid #d8e6eb;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

.agent-workbench-title {
  min-width: 0;
  display: grid;
  gap: 1px;
  margin-right: auto;
}

.agent-workbench-title strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-workbench-title span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-window-actions {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.agent-window-actions button {
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid #cfe2e8;
  border-radius: 8px;
  color: #2f5660;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.agent-window-actions button:hover {
  border-color: #96d1cf;
  color: var(--primary-dark);
  background: #ecfaf9;
}

.agent-window-actions .icon-only {
  width: 31px;
  padding: 0;
  display: grid;
  place-items: center;
}

.agent-archive-page {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #f7fbfc;
}

.agent-archive-scroll {
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding: 18px max(20px, calc((100% - 980px) / 2)) 26px;
}

.agent-archive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 3px;
}

.agent-archive-header > div,
.agent-archive-item > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.agent-archive-header p,
.agent-archive-header strong,
.agent-archive-header span {
  min-width: 0;
  margin: 0;
}

.agent-archive-header p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.agent-archive-header strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.agent-archive-header span {
  color: #607984;
  font-size: 12px;
}

.agent-empty-archive,
.agent-archive-section {
  border: 1px solid #d5e7ec;
  border-radius: 8px;
  background: #ffffff;
}

.agent-empty-archive {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #6b838b;
  text-align: center;
}

.agent-empty-archive strong {
  color: #33515a;
  font-size: 14px;
}

.agent-empty-archive span {
  font-size: 12px;
}

.agent-archive-section {
  display: grid;
  overflow: hidden;
}

.agent-archive-section-title {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid #e2edf1;
}

.agent-archive-section-title strong {
  color: #2d4b55;
  font-size: 13px;
}

.agent-archive-section-title span {
  color: #6f858d;
  font-size: 12px;
}

.agent-archive-list {
  display: grid;
}

.agent-archive-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #edf4f6;
}

.agent-archive-item:last-child {
  border-bottom: 0;
}

.agent-archive-item strong,
.agent-archive-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-archive-item strong {
  color: #304d57;
  font-size: 13px;
}

.agent-archive-item span {
  color: #6e858d;
  font-size: 12px;
}

.agent-archive-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.agent-archive-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #cfe2e8;
  border-radius: 7px;
  color: #2f5660;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.agent-archive-actions button:hover {
  border-color: #96d1cf;
  color: var(--primary-dark);
  background: #ecfaf9;
}

.agent-archive-actions button.danger {
  color: #9b3030;
}

.agent-archive-actions button.danger:hover {
  border-color: #efc1c1;
  background: #fff3f3;
}

.agent-settings-page {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #f7fbfc;
}

.agent-settings-scroll {
  height: 100%;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding: 18px max(20px, calc((100% - 980px) / 2)) 26px;
}

.agent-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 3px;
}

.agent-settings-header > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.agent-settings-header p,
.agent-settings-header strong,
.agent-settings-header span {
  min-width: 0;
  margin: 0;
}

.agent-settings-header p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.agent-settings-header strong {
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-settings-header span {
  overflow: hidden;
  color: #607984;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-settings-header button,
.agent-settings-actions button,
.agent-danger-action {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid #cfe2e8;
  border-radius: 8px;
  color: #2f5660;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.agent-settings-header button:hover,
.agent-settings-actions button:hover {
  border-color: #96d1cf;
  color: var(--primary-dark);
  background: #ecfaf9;
}

.agent-settings-section {
  min-width: 0;
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid #d7e6eb;
  border-radius: 8px;
  background: #ffffff;
}

.agent-settings-section-title {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.agent-settings-section-title > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.agent-settings-section-title strong {
  color: #213d46;
  font-size: 14px;
  line-height: 1.3;
}

.agent-settings-section-title span {
  color: #647d86;
  font-size: 12px;
  line-height: 1.45;
}

.agent-settings-section-title > span {
  flex: none;
  color: var(--primary-dark);
  font-weight: 800;
}

.agent-settings-section-title > svg {
  flex: none;
  color: var(--primary-dark);
}

.agent-settings-title-actions {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.agent-inline-doc-link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.agent-inline-doc-link:hover {
  color: var(--primary);
}

.agent-access-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.agent-access-option {
  min-width: 0;
  min-height: 128px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 4px 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid #d8e8ed;
  border-radius: 8px;
  color: #314b54;
  background: #f9fcfd;
  text-align: left;
}

.agent-access-option:hover,
.agent-access-option.active {
  border-color: #97d1cf;
  background: #eef9f8;
}

.agent-access-radio {
  grid-row: 1 / span 3;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 2px solid #a9c4ca;
  border-radius: 999px;
  background: #ffffff;
}

.agent-access-option.active .agent-access-radio {
  border: 5px solid var(--primary);
}

.agent-access-option strong,
.agent-access-option small,
.agent-access-option em {
  min-width: 0;
  display: block;
  font-style: normal;
  line-height: 1.45;
}

.agent-access-option strong {
  color: #203d46;
  font-size: 14px;
}

.agent-access-option small {
  color: #476672;
  font-size: 12px;
}

.agent-access-option em {
  color: #71868e;
  font-size: 12px;
}

.agent-work-rules-editor {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  padding: 12px;
  border: 1px solid #d7e6eb;
  border-radius: 8px;
  color: #203d46;
  background: #fbfefe;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.65;
}

.agent-work-rules-editor:focus {
  border-color: #86c9c7;
  outline: 2px solid rgba(35, 154, 149, 0.14);
}

.agent-settings-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.agent-settings-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.agent-settings-two-column {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.agent-settings-dir-list,
.agent-settings-rule-list,
.agent-policy-list {
  display: grid;
  gap: 7px;
}

.agent-settings-dir-list span {
  overflow: hidden;
  padding: 8px 9px;
  border: 1px solid #e1edf1;
  border-radius: 8px;
  color: #385964;
  background: #f7fbfc;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-settings-rule-list div,
.agent-policy-list div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid #e2edf1;
  border-radius: 8px;
  background: #f8fbfc;
}

.agent-settings-rule-list strong,
.agent-policy-list strong {
  color: #263f48;
  font-size: 12px;
  line-height: 1.35;
}

.agent-settings-rule-list span,
.agent-policy-list span {
  color: #647d86;
  font-size: 12px;
  line-height: 1.45;
}

.agent-policy-list div {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.agent-policy-list strong {
  color: var(--primary-dark);
}

.agent-danger-action {
  width: max-content;
  border-color: #f0c8c8;
  color: #9b3030;
  background: #fffafa;
}

.agent-danger-action:hover {
  border-color: #e59c9c;
  color: #842424;
  background: #fff3f3;
}

.agent-assistant-page-panel {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.agent-assistant-page-panel .agent-message-list {
  align-content: start;
  padding: 32px max(28px, calc((100% - 860px) / 2)) 18px;
  background: linear-gradient(180deg, #f8fcfd 0%, #f3fafb 100%);
}

.agent-assistant-page-panel .agent-message {
  max-width: min(760px, 92%);
}

.agent-assistant-page-panel .agent-message-body {
  border-radius: 12px;
}

.agent-assistant-page-panel .agent-compose {
  width: min(860px, calc(100% - 56px));
  margin: 0 auto 20px;
  padding: 12px;
  border: 1px solid #d5e5ea;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(26, 57, 66, 0.12);
}

.agent-assistant-page-panel .agent-compose-tools {
  grid-row: 3;
  grid-column: 1;
}

.agent-assistant-page-panel .agent-attach-button {
  width: 30px;
  height: 30px;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
}

.agent-assistant-page-panel .agent-attach-button.agent-skill-button {
  width: auto;
  min-width: 58px;
  padding: 0 9px;
}

.agent-assistant-page-panel .agent-attach-button.agent-thinking-toggle {
  width: auto;
  min-width: 86px;
  padding: 0 9px;
}

.agent-assistant-page-panel .agent-compose textarea {
  min-height: 64px;
  border: 0;
  background: transparent;
}

.agent-assistant-page-panel .agent-compose textarea:focus {
  outline: none;
}

.agent-side-tools {
  grid-column: 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 52px 8px 12px;
  border-left: 1px solid #d8e6eb;
  background: #fafdfe;
}

.right-open .agent-side-tools {
  grid-column: 5;
}

.agent-tool-panel {
  grid-column: 4;
  grid-row: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
  overflow: hidden;
  border-left: 1px solid #d8e6eb;
  background: #ffffff;
}

.agent-tool-panel-resizer {
  position: absolute;
  top: 0;
  left: -5px;
  bottom: 0;
  z-index: 3;
  width: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
}

.agent-tool-panel-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  width: 1px;
  height: 100%;
  background: #c6dbe1;
}

.agent-tool-panel-resizer:hover::after {
  width: 2px;
  background: var(--primary);
}

.agent-tool-panel header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-bottom: 1px solid #dce9ee;
}

.agent-tool-panel header span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--primary-dark);
  background: #e8f7f6;
}

.agent-tool-panel header strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-tool-panel header button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d5e4ea;
  border-radius: 8px;
  color: #526a74;
  background: #ffffff;
}

.agent-tool-panel-body {
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.agent-tool-panel-body p {
  margin: 0;
  color: #607984;
  font-size: 12px;
  line-height: 1.6;
}

.agent-browser-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.agent-browser-viewport {
  min-height: 260px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px dashed #b7dfe0;
  border-radius: 8px;
  color: #55737c;
  background:
    linear-gradient(90deg, rgba(15, 166, 158, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 166, 158, 0.06) 1px, transparent 1px),
    #f8fcfd;
  background-size: 18px 18px;
  text-align: center;
}

.agent-browser-viewport > strong {
  color: #183943;
  font-size: 13px;
}

.agent-browser-viewport > span {
  max-width: 420px;
  color: #64818a;
  font-size: 12px;
  line-height: 1.6;
}

.agent-browser-meta {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid #d9e8ed;
  border-radius: 8px;
  background: #ffffff;
}

.agent-browser-meta div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.agent-browser-meta dt {
  color: #78909a;
  font-size: 11px;
  font-weight: 800;
}

.agent-browser-meta dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #27454f;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-bound-dir-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.agent-bound-dir-list span {
  overflow: hidden;
  padding: 8px 9px;
  border: 1px solid #e1edf1;
  border-radius: 8px;
  color: #385964;
  background: #f7fbfc;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-workbench-task-fab {
  position: absolute;
  right: 66px;
  bottom: 16px;
  z-index: 4;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #b7dfdf;
  border-radius: 999px;
  color: var(--primary-dark);
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(17, 52, 62, 0.14);
  font-size: 12px;
  font-weight: 900;
}

.right-open .agent-workbench-task-fab {
  right: calc(var(--agent-tool-panel-width, 380px) + 14px);
}

@media (max-width: 1180px) {
  .agent-workbench-page,
  .agent-workbench-page.right-open,
  .agent-workbench-page.left-collapsed,
  .agent-workbench-page.left-collapsed.right-open {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
  }

  .agent-workspace-sidebar,
  .agent-tool-panel {
    display: none;
  }

  .agent-side-tools,
  .right-open .agent-side-tools {
    grid-column: 3;
  }

  .agent-workbench-main {
    grid-column: 2;
  }

  .agent-settings-scroll {
    padding-right: 16px;
    padding-left: 16px;
  }

  .agent-window-actions button:not(.icon-only) {
    display: none;
  }
}

@media (max-width: 760px) {
  .agent-workbench-title span {
    display: none;
  }

  .agent-settings-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .agent-access-mode-grid,
  .agent-settings-two-column {
    grid-template-columns: 1fr;
  }

  .agent-work-rules-editor {
    min-height: 220px;
  }

  .agent-settings-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .agent-settings-dir-list span {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .agent-assistant-page-panel .agent-compose {
    width: calc(100% - 24px);
  }

  .agent-skill-popover {
    right: 8px;
    width: calc(100% - 16px);
    max-height: min(500px, 74vh);
  }

  .agent-skill-list {
    grid-template-columns: 1fr;
  }

  .agent-workbench-task-fab {
    right: 58px;
  }
}

.agent-assistant-resizer {
  position: absolute;
  top: 0;
  left: -5px;
  bottom: 0;
  z-index: 2;
  width: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
}

.agent-assistant-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
  width: 1px;
  height: 100%;
  background: #c4d9df;
}

.agent-assistant-resizer:hover::after,
.is-resizing-agent-assistant .agent-assistant-resizer::after {
  left: 3px;
  width: 3px;
  background: var(--primary);
}

.agent-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid #d9e7ed;
  background: #ffffff;
}

.agent-assistant-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.agent-assistant-mark {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  background: var(--primary);
}

.agent-assistant-title h2 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.agent-assistant-title p {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-assistant-header-actions {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
}

.agent-icon-button {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #d5e4ea;
  border-radius: 8px;
  color: #425962;
  background: #ffffff;
}

.agent-icon-button:hover {
  color: var(--primary-dark);
  background: #edf9f8;
}

.agent-assistant-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid #deebf0;
  background: #fafdfe;
}

.agent-assistant-context button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid #cfe3e7;
  border-radius: 7px;
  color: #12646b;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.agent-assistant-context span {
  flex: 0 0 auto;
  max-width: 116px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #d6e9ec;
  border-radius: 999px;
  color: #2f6870;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.agent-workspace-switcher {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid #deebf0;
  background: #f7fbfc;
}

.agent-workspace-shortcuts {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.agent-workspace-shortcuts::-webkit-scrollbar {
  display: none;
}

.agent-workspace-shortcuts button {
  flex: 0 0 auto;
  max-width: 132px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #cfe2e8;
  border-radius: 999px;
  color: #294d56;
  background: #ffffff;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-workspace-shortcuts button:hover,
.agent-workspace-shortcuts button.active {
  border-color: #50beb8;
  color: var(--primary-dark);
  background: #effafa;
}

.agent-workspace-select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid #cfe2e8;
  border-radius: 8px;
  color: #27545e;
  background: #ffffff;
}

.agent-workspace-select select {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: none;
  appearance: none;
  color: inherit;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.agent-quick-prompts {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 12px;
  border-bottom: 1px solid #e0ebef;
  background: #f5fafb;
}

.agent-quick-prompts button {
  flex: none;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #cfe2e8;
  border-radius: 999px;
  color: #294d56;
  background: #ffffff;
  font-size: 12px;
}

.agent-quick-prompts button:hover {
  border-color: #93cfca;
  color: var(--primary-dark);
}

.agent-goal-strip {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 8px 12px 0;
  padding: 6px 8px 6px 10px;
  border: 1px solid #d7e6eb;
  border-radius: 8px;
  color: #294953;
  background: #f8fcfd;
}

.agent-goal-strip.running {
  border-color: #bfe5e3;
  background: #eefbf9;
}

.agent-goal-strip.waiting {
  border-color: #ead39a;
  background: #fff8e8;
}

.agent-goal-strip.waiting em {
  color: #7a4b00;
  background: #ffe7ad;
}

.agent-goal-strip > div:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.agent-goal-strip strong,
.agent-goal-strip em {
  flex: none;
  font-size: 12px;
  font-weight: 900;
  font-style: normal;
}

.agent-goal-strip span {
  min-width: 0;
  overflow: hidden;
  color: #49636b;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-goal-strip em {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--primary-dark);
  background: #dff7f4;
}

.agent-goal-strip-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.agent-goal-strip-actions button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #c9dde3;
  border-radius: 7px;
  color: #365762;
  background: #ffffff;
  font-size: 12px;
  font-weight: 850;
}

.agent-goal-strip-actions button:hover {
  border-color: #91d1cc;
  color: var(--primary-dark);
}

.agent-message-list {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding: 12px;
}

.agent-message {
  display: grid;
  gap: 5px;
  max-width: 92%;
}

.agent-message.user {
  justify-self: end;
}

.agent-message.assistant {
  justify-self: start;
}

.agent-message-end {
  width: 1px;
  height: 1px;
}

.agent-scroll-bottom-button {
  position: absolute;
  left: 50%;
  bottom: 132px;
  z-index: 8;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6e0e5;
  border-radius: 50%;
  background: #ffffff;
  color: #1f2f36;
  box-shadow: 0 8px 22px rgba(20, 38, 48, 0.16);
  transform: translateX(-50%);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.agent-scroll-bottom-button:hover {
  border-color: #8dcfc8;
  color: var(--primary-dark);
  box-shadow: 0 10px 26px rgba(20, 38, 48, 0.2);
  transform: translateX(-50%) translateY(-1px);
}

.agent-scroll-bottom-button:focus-visible {
  outline: 2px solid rgba(39, 166, 154, 0.28);
  outline-offset: 3px;
}

.agent-message.thinking {
  max-width: fit-content;
}

.agent-message.thinking .agent-message-role {
  display: none;
}

.agent-message-role {
  color: var(--muted);
  font-size: 11px;
}

.agent-message.user .agent-message-role {
  text-align: right;
}

.agent-message-body {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid #d7e6eb;
  border-radius: 9px;
  color: var(--text);
  background: #ffffff;
  line-height: 1.5;
  box-shadow: 0 6px 14px rgba(23, 55, 66, 0.05);
}

.agent-message.user .agent-message-body {
  border-color: #8dd8d2;
  color: #073f45;
  background: #e7f8f7;
}

.agent-message.thinking .agent-message-body {
  padding: 4px 2px;
  border-color: transparent;
  color: #718188;
  background: transparent;
  box-shadow: none;
}

.agent-thinking-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
}

.agent-thinking-dots {
  display: inline-flex;
  gap: 3px;
  width: 18px;
}

.agent-thinking-dots span {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
  animation: agent-thinking-pulse 1.1s ease-in-out infinite;
}

.agent-thinking-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.agent-thinking-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes agent-thinking-pulse {
  0%,
  80%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  40% {
    opacity: 0.85;
    transform: translateY(-2px);
  }
}

.agent-message-body p {
  font-size: 13px;
}

.agent-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.agent-attachment-thumb {
  position: relative;
  width: 88px;
  height: 64px;
  display: grid;
  align-content: end;
  overflow: hidden;
  padding: 0;
  border: 1px solid #cfe2e8;
  border-radius: 8px;
  background: #eef6f8;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 42, 52, 0.08);
  cursor: pointer;
  user-select: none;
}

.agent-attachment-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agent-attachment-image-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #5d7882;
  background: #eef6f8;
}

.agent-attachment-image-state.failed {
  color: #a84a4a;
  background: #fff1f1;
}

.agent-attachment-thumb::after {
  position: absolute;
  inset: auto 0 0 0;
  height: 28px;
  background: linear-gradient(180deg, transparent, rgba(10, 28, 36, 0.72));
  content: "";
}

.agent-attachment-thumb > span:not(.agent-attachment-remove) {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 7px 5px;
  overflow: hidden;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-attachment-thumb:hover,
.agent-attachment-thumb:focus-visible {
  border-color: #47c5bd;
  box-shadow: 0 0 0 3px rgba(18, 169, 154, 0.14), 0 8px 18px rgba(15, 42, 52, 0.14);
}

.agent-attachment-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(15, 31, 38, 0.72);
  cursor: pointer;
}

.agent-attachment-remove:hover {
  background: rgba(185, 39, 39, 0.88);
}

.agent-attachment-chip {
  min-height: 26px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid #cfe2e8;
  border-radius: 999px;
  color: #28525a;
  background: #ffffff;
  font-size: 12px;
}

.agent-attachment-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-attachment-chip button {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  margin-right: -3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #6b8188;
  background: transparent;
}

.agent-attachment-chip button:hover {
  color: #b32727;
  background: #fff0f0;
}

.agent-attachment-preview-layer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(10, 18, 24, 0.72);
  cursor: default;
}

.agent-attachment-preview {
  max-width: min(92vw, 1180px);
  max-height: min(88vh, 860px);
  display: grid;
  gap: 10px;
  margin: 0;
  pointer-events: none;
}

.agent-attachment-preview img {
  max-width: 100%;
  max-height: calc(88vh - 42px);
  border-radius: 10px;
  object-fit: contain;
  background: #111b22;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.agent-attachment-preview .agent-attachment-image-state {
  position: relative;
  width: min(72vw, 720px);
  height: min(62vh, 520px);
  border-radius: 10px;
  background: #111b22;
  color: rgba(255, 255, 255, 0.72);
}

.agent-attachment-preview .agent-attachment-image-state.failed {
  color: #ffb3b3;
  background: #2f1b1d;
}

.agent-attachment-preview figcaption {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  text-align: center;
}

.agent-attachment-preview-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2001;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(20, 31, 38, 0.72);
}

.agent-attachment-preview-close:hover {
  background: rgba(20, 31, 38, 0.92);
}

.agent-action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.agent-action-chip {
  min-height: 28px;
  max-width: 100%;
  padding: 0 9px;
  border: 1px solid #cfe1e8;
  border-radius: 999px;
  color: #27545e;
  background: #ffffff;
  font-size: 12px;
  text-align: left;
}

.agent-action-chip:not(:disabled):hover {
  border-color: #8fd4cf;
  color: var(--primary-dark);
}

.agent-action-chip.confirm_local_write {
  border-color: #8fd4cf;
  color: var(--primary-dark);
  background: #e9f8f6;
  font-weight: 800;
}

.agent-action-chip:disabled {
  opacity: 0.78;
  cursor: default;
}

.agent-action-chip.forbidden_delete,
.agent-action-chip.forbidden {
  border-color: #ffc6c6;
  color: #b12929;
  background: #fff6f6;
}

.agent-compose {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #d8e7ed;
  background: #ffffff;
}

.agent-assistant-drawer > .agent-compose {
  max-height: min(230px, 42vh);
  overflow: visible;
}

.agent-assistant-drawer > .agent-compose textarea {
  max-height: 128px;
}

.agent-compose-tools {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.agent-compose > .agent-attachment-list {
  grid-column: 1 / -1;
}

.agent-compose textarea {
  grid-column: 1;
  min-height: 76px;
  resize: none;
  padding: 9px 10px;
  border: 1px solid #ccdce3;
  border-radius: 8px;
  color: var(--text);
  background: #fbfdfe;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.agent-compose textarea:focus {
  border-color: #78cbc6;
  outline: 2px solid rgba(8, 169, 164, 0.14);
}

.agent-attach-button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid #cfe2e8;
  border-radius: 7px;
  color: #27545e;
  background: #f8fcfd;
  font-size: 12px;
  font-weight: 800;
}

.agent-attach-button:hover {
  border-color: #8fd4cf;
  color: var(--primary-dark);
  background: #effafa;
}

.agent-attach-button.muted {
  color: #6a7d84;
}

.agent-attach-button.agent-skill-button {
  border-color: #bfe5e3;
  color: var(--primary-dark);
  background: #ecfaf8;
}

.agent-attach-button.agent-skill-button.active {
  border-color: var(--primary);
  color: #ffffff;
  background: var(--primary);
}

.agent-attach-button.agent-thinking-toggle.active {
  border-color: var(--primary);
  color: #ffffff;
  background: var(--primary);
}

.agent-attach-button.agent-thinking-toggle.active span {
  color: inherit;
}

.agent-permission-menu {
  position: relative;
  display: inline-flex;
}

.agent-permission-trigger {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid #efc174;
  border-radius: 8px;
  color: #8a4b12;
  background: #fff8ed;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.agent-permission-trigger span {
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-permission-trigger:hover,
.agent-permission-trigger.open {
  border-color: #e8a848;
  background: #fff3db;
}

.agent-permission-chevron {
  flex: 0 0 auto;
  transition: transform 0.16s ease;
}

.agent-permission-trigger.open .agent-permission-chevron {
  transform: rotate(180deg);
}

.agent-permission-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: min(310px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  color: #f3f6f7;
  background: #222528;
  box-shadow: 0 18px 42px rgba(8, 18, 24, 0.3);
}

.agent-permission-popover-head {
  padding: 5px 8px 8px;
  color: #aeb8bd;
  font-size: 12px;
  font-weight: 750;
}

.agent-permission-option {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.agent-permission-option:hover,
.agent-permission-option.active {
  background: rgba(255, 255, 255, 0.08);
}

.agent-permission-option-mark {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
}

.agent-permission-option.active .agent-permission-option-mark {
  border-color: #f1b65d;
  background: radial-gradient(circle, #f1b65d 0 45%, transparent 48%);
}

.agent-permission-option-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agent-permission-option-text strong {
  font-size: 13px;
  line-height: 1.25;
}

.agent-permission-option-text small {
  color: #a9b3b8;
  font-size: 12px;
  line-height: 1.35;
}

.agent-permission-option-check {
  color: #f1b65d;
  font-size: 14px;
  font-weight: 900;
}

.agent-skill-popover {
  position: absolute;
  right: 12px;
  bottom: calc(100% - 4px);
  z-index: 12;
  width: min(620px, calc(100% - 24px));
  max-height: min(520px, 72vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #cfe3e8;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 22px 46px rgba(20, 52, 60, 0.18);
}

.agent-skill-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  border-bottom: 1px solid #e0edf1;
}

.agent-skill-popover-header div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.agent-skill-popover-header strong {
  color: #1f3c45;
  font-size: 14px;
  line-height: 1.25;
}

.agent-skill-popover-header span {
  color: #607984;
  font-size: 12px;
  line-height: 1.35;
}

.agent-skill-popover-header button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d4e4e9;
  border-radius: 8px;
  color: #526a74;
  background: #ffffff;
}

.agent-skill-popover-body {
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.agent-skill-empty {
  margin: 0;
  padding: 14px;
  border: 1px solid #e0edf1;
  border-radius: 8px;
  color: #607984;
  background: #f7fbfc;
  font-size: 12px;
  line-height: 1.55;
}

.agent-skill-group {
  display: grid;
  gap: 8px;
}

.agent-skill-group + .agent-skill-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e6f0f3;
}

.agent-skill-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-skill-group-title strong {
  color: #263f48;
  font-size: 13px;
  line-height: 1.35;
}

.agent-skill-group-title span {
  color: #71909a;
  font-size: 12px;
}

.agent-skill-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.agent-skill-row {
  position: relative;
  min-width: 0;
}

.agent-skill-row .agent-skill-item {
  width: 100%;
  height: 100%;
}

.agent-skill-row.user-skill .agent-skill-item {
  padding-right: 42px;
}

.agent-skill-row-action {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9e8ec;
  border-radius: 8px;
  color: #6f8790;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.agent-skill-row-action:hover,
.agent-skill-row-action:focus-visible {
  border-color: #f0b8b8;
  color: #b83232;
  background: #fff5f5;
  transform: translateY(-1px);
}

.agent-skill-row-action:focus-visible {
  outline: 2px solid rgba(184, 50, 50, 0.16);
  outline-offset: 2px;
}

.agent-skill-item {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #dcebef;
  border-radius: 8px;
  background: #fbfdfe;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.agent-skill-item:hover,
.agent-skill-item:focus-visible {
  border-color: #8fd4cf;
  background: #f0fbf9;
  box-shadow: 0 8px 18px rgba(18, 83, 92, 0.08);
  transform: translateY(-1px);
}

.agent-skill-item.command {
  border-color: #c6e9e5;
  background: #f5fffd;
}

.agent-skill-item:focus-visible {
  outline: 2px solid rgba(8, 169, 164, 0.18);
  outline-offset: 2px;
}

.agent-skill-item-title {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.agent-skill-item-title strong {
  min-width: 0;
  color: #1f3c45;
  font-size: 13px;
  line-height: 1.35;
}

.agent-skill-status {
  flex: none;
  padding: 2px 6px;
  border: 1px solid #cfe2e8;
  border-radius: 999px;
  color: #42636d;
  background: #ffffff;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

.agent-skill-status.ready {
  border-color: #9fded8;
  color: #0d6c68;
  background: #e9f8f6;
}

.agent-skill-status.testing {
  border-color: #d7d4f4;
  color: #4e4a9a;
  background: #f4f3ff;
}

.agent-skill-status.pending_enable {
  border-color: #ead7a5;
  color: #7b5b13;
  background: #fff8e7;
}

.agent-skill-status.planned {
  border-color: #d8dee8;
  color: #667085;
  background: #f5f7fb;
}

.agent-skill-item p {
  margin: 0;
  color: #526f78;
  font-size: 12px;
  line-height: 1.55;
}

.agent-skill-item small {
  width: max-content;
  color: #718790;
  font-size: 11px;
  line-height: 1.25;
}

.agent-compose > button[type="submit"] {
  align-self: end;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  border-radius: 8px;
  color: #ffffff;
  background: var(--primary);
  font-weight: 900;
}

.agent-compose button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  z-index: 5;
  width: 8px;
  height: 100%;
  cursor: col-resize;
}

.sidebar-resizer::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 3px;
  width: 2px;
  height: calc(100% - 28px);
  border-radius: 999px;
  background: transparent;
  transition: background 160ms ease;
}

.sidebar-resizer:hover::after {
  background: #b7cbd3;
}

.menu {
  display: grid;
  gap: 1px;
}

.menu-group {
  margin-bottom: 1px;
}

.menu-section {
  width: 100%;
  min-height: 31px;
  margin: 3px 0 2px;
  padding: 6px 8px 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: #253b42;
  font-size: 12.5px;
  font-weight: 800;
  text-align: left;
  line-height: 1.28;
  box-shadow: inset 0 0 0 1px #d7ecee;
}

.menu-section-button,
.menu-section-standalone,
.menu-item,
.submenu-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
}

.menu-section-button::before,
.menu-section-standalone::before {
  content: "";
  width: 5px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--primary);
}

.menu-title-text,
.menu-section span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.menu-title-label {
  min-width: 0;
}

.menu-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-left: 5px;
  vertical-align: 1px;
}

.menu-badge {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e9f6f5;
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px #cdebe9;
}

.menu-badge-hot {
  background: #fff4df;
  color: #b05d00;
  box-shadow: inset 0 0 0 1px #ffdca8;
}

.menu-badge-new {
  background: #eff6ff;
  color: #2366b8;
  box-shadow: inset 0 0 0 1px #c8defc;
}

.menu-badge-muted {
  background: #eef4f6;
  color: #687f89;
  box-shadow: inset 0 0 0 1px #d8e6ea;
}

.menu-section-button.has-active {
  color: var(--primary-dark);
}

.menu-section-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #8ba0a9;
  line-height: 1;
}

.menu-section-standalone {
  color: var(--text);
}

.menu-section-standalone.active {
  background: #e6f8f7;
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 1px #cdebe9;
}

.menu-group > div:not(.submenu) {
  margin-left: 17px;
  padding-left: 9px;
  border-left: 2px solid #d8e8ec;
}

.menu-item,
.submenu-item {
  min-height: 27px;
  padding: 4px 8px 4px 10px;
  border-radius: 8px;
  background: transparent;
  color: #627c86;
  font-size: 12.1px;
  font-weight: 520;
  line-height: 1.28;
  text-align: left;
  align-items: center;
}

.menu-item::before,
.submenu-item::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #9fb3bb;
}

.menu-item.active {
  background: #e6f8f7;
  color: var(--primary-dark);
  font-weight: 720;
  box-shadow: inset 0 0 0 1px #cdebe9;
}

.menu-item.active::before,
.submenu-item.selected::before {
  background: var(--primary);
}

.submenu {
  margin: 1px 0 4px 8px;
  padding-left: 10px;
  border-left: 2px solid #d8e8ec;
}

.submenu-item {
  color: #627c86;
}

.submenu-item.selected {
  color: var(--primary-dark);
  background: #e6f8f7;
  font-weight: 720;
  box-shadow: inset 0 0 0 1px #cdebe9;
}

.menu-item-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

.menu-status {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 999px;
  background: #edf4f6;
  color: #667d87;
  font-size: 11px;
  font-weight: 800;
}

.main {
  flex: 1;
  min-width: 0;
  padding: 14px 22px 40px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 12px;
}

.breadcrumb {
  margin-bottom: 5px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 900;
}

h1 {
  font-size: 23px;
  line-height: 1.25;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 14px;
}

.topbar p,
.panel-title p,
.field small,
.muted {
  color: var(--muted);
  line-height: 1.48;
}

.topbar p {
  max-width: 940px;
  margin-top: 6px;
}

.tabs,
.template-strip,
.action-hub,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tabs {
  display: flex;
  gap: 20px;
  margin: 12px 0;
  padding: 0 14px;
  overflow-x: auto;
}

.tab {
  height: 42px;
  background: transparent;
  border-bottom: 2px solid transparent;
  color: #516974;
  white-space: nowrap;
}

.tab.active {
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
  font-weight: 900;
}

.table-tools-page .platform-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 8px;
  margin: 14px 0 16px;
  padding: 6px;
  border-color: #addbdc;
  border-radius: 10px;
  background: #e8f7f5;
  box-shadow: 0 8px 20px rgba(28, 89, 96, 0.08);
}

.table-tools-page .platform-tab {
  min-width: 178px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  color: #254c57;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.table-tools-page .platform-tab:hover {
  border-color: #72c6c2;
  background: #f7fffe;
  color: #086f69;
}

.table-tools-page .platform-tab.active {
  border-color: #087f79;
  background: #0a948c;
  color: #fff;
  box-shadow: 0 8px 18px rgba(8, 129, 123, 0.22);
}

.table-tools-page .platform-tab:focus-visible {
  outline: 3px solid rgba(10, 148, 140, 0.24);
  outline-offset: 2px;
}

.template-strip {
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.template-row {
  justify-content: space-between;
  flex-wrap: wrap;
}

.template-actions {
  flex-wrap: wrap;
}

.action-hub {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

.action-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.action-copy strong {
  font-size: 15px;
}

.action-buttons {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.task-log-box code {
  display: block;
  overflow: hidden;
  color: #36505b;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-log-box {
  display: grid;
  max-height: 460px;
  overflow: auto;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 2px;
  padding: 11px;
  border: 1px solid #d8e7ed;
  border-radius: 7px;
  background: #fbfdfe;
}

.task-log-box code {
  overflow: visible;
  white-space: pre-wrap;
  content-visibility: auto;
  contain-intrinsic-size: 18px;
}

.task-center-log-title {
  margin-bottom: 7px;
}

.task-center-log-title > div:first-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}

.task-center-log-title small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.task-center-log-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.task-center-log-actions .ghost-button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

.task-log-loading-older {
  position: sticky;
  top: 0;
  z-index: 1;
  justify-self: center;
  padding: 3px 9px;
  border: 1px solid #cfe5e8;
  border-radius: 999px;
  background: #f2fbfb;
  color: #3f6670;
  font-size: 11px;
  line-height: 1.4;
}

.task-start-flash {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: rgba(18, 38, 45, 0.06);
}

.task-start-flash-inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 16px 18px;
  border: 1px solid #9fd5d1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 8px rgba(19, 52, 62, 0.16);
}

.task-start-flash-inner > div {
  display: grid;
  gap: 3px;
}

.task-start-flash-inner strong {
  color: #17343e;
  font-size: 16px;
}

.task-start-flash-inner span {
  color: var(--muted);
  line-height: 1.45;
}

.task-start-check {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: #e6f7f4;
  color: var(--primary-dark);
}

.task-start-check.is-loading {
  background: #edf9f8;
}

.task-summary-grid,
.history-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.task-summary-grid div,
.history-summary-grid div {
  display: grid;
  gap: 4px;
  min-height: 54px;
  padding: 10px;
  border: 1px solid #d9e8ee;
  border-radius: 7px;
  background: #fbfdfe;
}

.task-summary-grid span,
.history-summary-grid span {
  color: var(--muted);
  font-size: 12px;
}

.task-summary-grid strong,
.history-summary-grid strong {
  min-width: 0;
  overflow: hidden;
  color: #1f3b46;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-failure-box {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #f2b4a6;
  border-radius: 7px;
  background: #fff7f3;
  color: #8b2f22;
}

.task-failure-box p {
  margin: 0;
  line-height: 1.55;
}

.task-events {
  display: grid;
  gap: 7px;
}

.task-event {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid #dfeaf0;
  border-radius: 7px;
  background: #fbfdfe;
}

.task-event > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #eaf5f6;
  color: var(--primary-strong);
  font-size: 12px;
  font-weight: 900;
}

.task-event p {
  margin: 0;
  color: #314b56;
  line-height: 1.55;
}

.task-event.failed {
  border-color: #f0c4bb;
  background: #fff9f6;
}

.task-event.failed > span {
  background: #ffe3dc;
  color: var(--danger);
}

.task-event.success > span {
  background: #daf6eb;
  color: #087653;
}

.task-center-page {
  display: grid;
  gap: 12px;
}

.task-center-page-modal {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.task-center-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid #cde3e7;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fdfd 0%, #ffffff 100%);
  box-shadow: var(--shadow);
}

.task-center-header > div:first-child {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}

.task-center-header h1 {
  margin: 0;
  color: #17343e;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}

.task-center-header p {
  margin: 0;
  color: var(--muted);
  line-height: 1.3;
}

.task-center-header .breadcrumb {
  flex: 0 0 auto;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.task-center-header p:not(.breadcrumb) {
  min-width: 0;
  overflow: hidden;
  color: #5b7480;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-center-header-help-button {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0 8px;
  font-size: 11px;
}

.task-center-header-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
  min-width: max-content;
}

.task-center-header-stats span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid #d4e7eb;
  border-radius: 7px;
  background: #fff;
  color: #46636f;
  font-size: 12px;
}

.task-center-header-stats b {
  color: #102f3a;
  font-size: 14px;
}

.task-center-clear-history-button {
  min-height: 28px;
  padding-inline: 10px;
  white-space: nowrap;
}

.task-center-clear-history-feedback {
  padding: 7px 10px;
  border: 1px solid #cfe5e8;
  border-radius: 7px;
  background: #f4fbfb;
  color: #315762;
  font-size: 12px;
  line-height: 1.45;
}

.task-center-close-button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cfe4e8;
  border-radius: 7px;
  color: #36545f;
  background: #fff;
  font-size: 18px;
  line-height: 1;
}

.task-center-close-button:hover {
  border-color: #9ccfd1;
  color: var(--primary-dark);
  background: #f2fbfa;
}

.task-center-layout {
  display: grid;
  grid-template-columns: 174px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.task-center-page-modal .task-center-layout {
  min-height: 0;
  align-items: stretch;
}

.task-center-filters,
.task-center-main,
.task-center-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.task-center-filters {
  position: sticky;
  top: calc(var(--layout-header-height) + 14px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: start;
  padding: 8px;
}

.task-center-filters button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  min-height: 30px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #395661;
  font-size: 12px;
  text-align: left;
}

.task-center-filters button.active {
  border-color: #b8e3e4;
  background: #e9f8f7;
  color: #063b3d;
  font-weight: 800;
}

.task-center-filters b {
  min-width: 18px;
  color: #7a9099;
  font-size: 11px;
  text-align: right;
}

.task-center-main {
  min-width: 0;
  padding: 10px;
}

.task-center-load-state {
  display: flex;
  min-height: 260px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--theme-text);
  text-align: left;
}

.task-center-load-state > div {
  display: grid;
  gap: 4px;
}

.task-center-load-state h2,
.task-center-load-state p {
  margin: 0;
}

.task-center-load-state h2 {
  font-size: 16px;
}

.task-center-load-state p {
  color: var(--theme-muted);
  font-size: 12px;
}

.task-center-load-state.failed {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
}

.task-center-loading-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: task-center-loading-spin 0.8s linear infinite;
}

@keyframes task-center-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.task-center-page-modal .task-center-main {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.task-center-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: end;
  min-width: 0;
  padding: 0 8px;
  max-height: 82px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.task-center-tab {
  flex: 1 1 calc(25% - 4px);
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 6px;
  max-width: calc(25% - 3px);
  min-width: 0;
  min-height: 34px;
  align-items: center;
  margin-right: 0;
  padding: 0 9px;
  border: 1px solid #d4e5ea;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f8fbfc;
  color: #45626d;
  text-align: left;
}

.task-center-tab.active {
  position: relative;
  z-index: 2;
  background: #ffffff;
  color: #073b3d;
  font-weight: 900;
  box-shadow: 0 -8px 18px rgba(28, 80, 92, 0.06);
}

.task-center-tab span {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  background: #edf6f7;
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 900;
}

.task-center-tab.failed span {
  background: #ffe5df;
  color: var(--danger);
}

.task-center-tab.success span {
  background: #dcf5e9;
  color: #087653;
}

.task-center-tab b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-center-empty-tabs {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px dashed #cfe1e7;
  border-radius: 7px;
  background: #fbfdfe;
  color: var(--muted);
}

.task-center-overview-panel {
  display: grid;
  gap: 6px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #d7e8ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.task-center-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #4c6772;
  font-size: 12px;
}

.task-center-overview-head strong {
  color: #17343e;
  font-size: 13px;
}

.task-center-overview-head span,
.task-center-overview-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.task-center-overview-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  max-height: 116px;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.task-center-list-panel {
  display: grid;
  gap: 5px;
  min-height: 0;
  padding: 7px 9px;
  border: 1px solid #d7e8ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.task-center-list-panel.history {
  gap: 6px;
}

.task-center-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #4c6772;
  font-size: 12px;
}

.task-center-list-head strong {
  color: #17343e;
  font-size: 13px;
}

.task-center-list-head span {
  color: var(--muted);
  white-space: nowrap;
}

.task-center-history-head {
  display: grid;
  grid-template-columns: minmax(180px, 1.45fr) minmax(120px, 0.9fr) 68px 112px minmax(160px, 1.2fr);
  gap: 8px;
  padding: 0 8px 0 34px;
  color: #6f8790;
  font-size: 11px;
}

.task-center-list-more {
  margin: 2px 0 0;
  color: #6d838c;
  font-size: 12px;
  line-height: 1.4;
}

.task-center-history-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  color: var(--theme-muted);
  font-size: 12px;
}

.task-center-history-pagination .secondary-button {
  min-height: 28px;
  padding: 3px 10px;
}

.task-center-history-detail-action,
.task-center-history-pager,
.task-center-history-page-size {
  display: flex;
  align-items: center;
}

.task-center-history-detail-action {
  min-width: 0;
  flex: 1 1 280px;
  gap: 8px;
}

.task-center-history-detail-action > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-center-history-pager {
  flex: 0 0 auto;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}

.task-center-history-page-size {
  gap: 5px;
}

.task-center-history-page-size select {
  width: 76px;
  min-height: 28px;
  padding: 2px 24px 2px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-control);
  color: var(--theme-text);
  font: inherit;
}

.task-center-task-list {
  display: grid;
  max-height: 150px;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  overflow: auto;
  padding-right: 3px;
  scrollbar-width: thin;
}

.task-center-list-panel.history .task-center-task-list {
  max-height: 300px;
}

.task-center-main.history-list-only .task-center-list-panel.history .task-center-task-list {
  max-height: min(720px, calc(100vh - 210px));
}

.task-center-main.history-detail-expanded .task-center-list-panel.history .task-center-task-list {
  /* 6 条历史任务：6 × 34px 行高 + 5 × 2px 间距。 */
  max-height: 214px;
}

.task-center-task-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 28px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #405c66;
  text-align: left;
}

.task-center-task-row.history-row {
  grid-template-columns: 18px minmax(180px, 1.45fr) minmax(120px, 0.9fr) 68px 112px minmax(160px, 1.2fr);
  min-height: 34px;
}

.task-center-task-row:hover {
  border-color: #d7e8ed;
  background: #fff;
}

.task-center-task-row.active {
  border-color: #8fd4d0;
  background: #eaf9f7;
  color: #073b3d;
  box-shadow: inset 3px 0 0 var(--primary);
}

.task-center-task-row span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: #edf6f7;
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 900;
}

.task-center-task-row.failed span {
  background: #ffe5df;
  color: var(--danger);
}

.task-center-task-row.success span {
  background: #dcf5e9;
  color: #087653;
}

.task-center-task-row.partial span {
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.task-center-row-title {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.task-center-task-row b {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-center-task-row small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-center-row-state {
  color: #3d5964;
  font-weight: 700;
}

.task-center-row-brief {
  color: #536c76;
}

.task-center-detail {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin-top: -1px;
  padding: 14px;
}

.task-center-page-modal .task-center-detail {
  min-height: 0;
  overflow: auto;
  padding-bottom: 72px;
}

.task-center-detail.empty {
  min-height: 320px;
  align-content: center;
  justify-items: center;
  color: var(--muted);
  text-align: center;
}


.task-center-detail-head {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.task-center-detail-head h2 {
  margin: 6px 0 3px;
  color: #17343e;
  font-size: 20px;
}

.task-center-detail-head p {
  margin: 0;
  color: var(--muted);
}

.task-center-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: #e7f7f5;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.task-center-status.failed {
  background: #ffe9e4;
  color: var(--danger);
}

.task-center-status.success {
  background: #ddf4e8;
  color: #087653;
}

.task-center-status.partial {
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.task-center-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.task-center-actions .is-loading {
  cursor: wait;
}

.task-center-action-feedback {
  flex: 1 0 100%;
  margin: 0;
  color: var(--theme-info-text);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.task-center-action-feedback.failed {
  color: var(--theme-danger-text);
}

.task-center-action-with-note {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.task-center-action-with-note small {
  color: var(--theme-muted);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}

.task-center-progress-row {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid #d8e9ed;
  border-radius: 7px;
  background: #fbfdfe;
}

.task-center-progress-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-center-progress-title span {
  color: #5c747e;
  font-size: 12px;
}

.task-center-progress-value {
  font-variant-numeric: tabular-nums;
  animation: task-center-value-update 180ms ease-out;
}

.task-center-progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--theme-surface-elevated);
}

.task-center-progress-track span {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--theme-success-text), var(--theme-info-text));
}

.task-center-progress-track.determinate span {
  width: 100%;
  transform: scaleX(var(--task-progress-scale, 0));
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
}

.task-center-progress-track.determinate.is-animated span::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 24%;
  content: "";
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--theme-surface) 72%, transparent),
    transparent
  );
  transform: translateX(-160%);
  animation: task-center-progress-glint 2.2s ease-in-out infinite;
}

.task-center-progress-track.indeterminate.is-animated span {
  width: 34%;
  animation: task-center-indeterminate-progress 1.1s ease-in-out infinite;
}

.task-center-progress-track.indeterminate.is-steady span {
  width: 100%;
  animation: task-center-steady-progress 2.8s ease-in-out infinite;
  opacity: 0.42;
}

@keyframes task-center-indeterminate-progress {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(310%);
  }
}

@keyframes task-center-steady-progress {
  0%,
  100% {
    opacity: 0.32;
  }

  50% {
    opacity: 0.52;
  }
}

@keyframes task-center-progress-glint {
  0%,
  24% {
    transform: translateX(-160%);
    opacity: 0;
  }

  38% {
    opacity: 0.72;
  }

  70%,
  100% {
    transform: translateX(470%);
    opacity: 0;
  }
}

@keyframes task-center-running-pulse {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes task-center-step-update {
  from {
    opacity: 0.45;
    transform: translateY(2px);
  }

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

@keyframes task-center-value-update {
  from {
    opacity: 0.48;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .task-center-loading-spinner,
  .task-center-progress-value,
  .task-center-current-step.is-running p,
  .task-center-current-step.is-running > div strong::after,
  .task-center-progress-track.determinate.is-animated span::after,
  .task-center-progress-track.indeterminate.is-steady span {
    animation: none;
  }

  .task-center-loading-spinner {
    border-color: var(--primary);
    opacity: 0.72;
  }

  .task-center-progress-track.determinate span {
    transition: none;
  }

  .task-center-progress-track.indeterminate span {
    width: 100%;
    animation: none;
    opacity: 0.65;
  }
}

.task-center-current-step {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid #cae3e8;
  border-radius: 7px;
  background: #f3fbfb;
}

.task-center-current-step.failed {
  border-color: #f1b9ac;
  background: #fff7f4;
}

.task-center-current-step > div,
.task-center-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.task-center-current-step p {
  margin: 0;
  color: #284652;
  line-height: 1.55;
}

.task-center-current-step.is-running > div strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.task-center-current-step.is-running > div strong::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--theme-success-text);
  content: "";
  animation: task-center-running-pulse 1.5s ease-in-out infinite;
}

.task-center-current-step.is-running p {
  animation: task-center-step-update 180ms ease-out;
}

.task-center-body-grid {
  --task-center-log-height: clamp(840px, 96vh, 1040px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 12px;
  align-items: start;
}

.task-center-log,
.task-center-side {
  min-width: 0;
}

.task-center-log {
  display: flex;
  height: var(--task-center-log-height);
  min-height: 0;
  flex-direction: column;
}

.task-center-log .task-log-box {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.task-center-section-title h3,
.task-center-info-card h3,
.task-center-summary-card h3,
.task-center-billing-card h3,
.task-center-result-card h3 {
  margin: 0;
  color: #17343e;
  font-size: 15px;
}

.task-center-side {
  display: grid;
  align-self: start;
  align-content: start;
  gap: 10px;
}

.task-center-info-card,
.task-center-summary-card,
.task-center-billing-card,
.task-center-auth-queue-card,
.task-center-result-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e8ed;
  border-radius: 7px;
  background: #fbfdfe;
}

.task-center-info-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.task-center-info-card div {
  display: grid;
  gap: 2px;
}

.task-center-info-card dt {
  color: var(--muted);
  font-size: 12px;
}

.task-center-info-card dd {
  min-width: 0;
  margin: 0;
  color: #23414d;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.task-center-info-card dd.task-center-danger-text {
  color: #b62f2f;
}

.task-center-info-card .task-center-info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-center-info-card .task-center-info-actions .mini-button {
  min-height: 28px;
  padding: 5px 9px;
  font-size: 12px;
}

.task-center-summary-card > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.task-center-summary-card span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #d9e9ed;
  border-radius: 7px;
  background: #fff;
}

.task-center-summary-card b {
  color: #10323c;
  font-size: 17px;
  line-height: 1;
}

.task-center-summary-card small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-center-billing-card dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.task-center-billing-card dl div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.task-center-billing-card dt {
  color: var(--muted);
  font-size: 12px;
}

.task-center-billing-card dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #17343e;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-center-auth-queue-list {
  display: grid;
  gap: 5px;
}

.task-center-auth-queue-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  min-height: 38px;
  align-items: center;
  padding: 6px 7px;
  border: 1px solid #d9e9ed;
  border-radius: 7px;
  background: #ffffff;
}

.task-center-auth-queue-item > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #e8f8f6;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 900;
}

.task-center-auth-queue-item div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.task-center-auth-queue-item b,
.task-center-auth-queue-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-center-auth-queue-item b {
  color: #17343e;
  font-size: 13px;
}

.task-center-auth-queue-item small {
  color: var(--muted);
  font-size: 11px;
}

.task-center-result-card.failed {
  border-color: #f1b9ac;
  background: #fff7f4;
}

.task-center-result-card p {
  margin: 0;
  color: #395662;
  line-height: 1.55;
}

.task-center-result-card.failed p {
  color: #8b2f22;
}

.task-center-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  padding: 26px;
  background: rgba(11, 28, 34, 0.34);
  backdrop-filter: blur(3px);
}

.task-center-modal-shell {
  width: min(1480px, calc(100vw - 48px));
  height: min(900px, calc(100vh - 52px));
  min-height: 560px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(200, 228, 232, 0.95);
  border-radius: 12px;
  background: #f4f8fa;
  box-shadow: 0 22px 72px rgba(10, 35, 43, 0.28);
}

.final-action-hub,
.final-action-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid #b9dfe3;
  border-radius: 8px;
  background: #f7fcfc;
  box-shadow: 0 10px 24px rgba(21, 48, 59, 0.08);
}

.final-action-copy {
  display: grid;
  gap: 5px;
}

.final-action-copy strong {
  font-size: 16px;
}

.final-action-copy span {
  color: var(--muted);
  line-height: 1.45;
}

.final-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.final-action-buttons .primary-button {
  min-height: 40px;
  padding: 0 24px;
}

.local-listing-resume-panel {
  display: grid;
  gap: 9px;
  margin: 12px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface-raised);
}

.local-listing-progress-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.local-listing-progress-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.local-listing-progress-copy strong,
.local-listing-resume-copy strong {
  color: var(--theme-text);
  font-size: 14px;
}

.local-listing-progress-copy span {
  color: var(--theme-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.local-listing-progress-overview > .secondary-button {
  flex: 0 0 auto;
}

.local-listing-unfinished-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 360px) auto;
  align-items: center;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--theme-warning-border);
}

.local-listing-resume-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.local-listing-resume-copy span,
.local-listing-resume-note {
  color: var(--theme-warning-text);
  font-size: 12px;
  line-height: 1.45;
}

.local-listing-resume-select {
  min-width: 0;
  width: 100%;
}

.local-listing-resume-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .video-single-flow-page .single-material-row {
    grid-template-columns: minmax(205px, 220px) minmax(0, 1fr);
  }

  .video-single-flow-page .single-save-stack {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .local-listing-unfinished-row {
    grid-template-columns: 1fr auto;
  }

  .local-listing-resume-select {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .local-listing-progress-overview {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .local-listing-unfinished-row {
    grid-template-columns: 1fr;
  }

  .local-listing-resume-actions {
    justify-content: flex-start;
  }
}

.local-listing-action-dock,
.video-clip-action-dock {
  position: fixed;
  right: 20px;
  bottom: 14px;
  left: calc(var(--sidebar-width) + 20px);
  z-index: 210;
  margin: 0;
}

.agent-assistant-open .local-listing-action-dock,
.agent-assistant-open .video-clip-action-dock {
  right: calc(var(--agent-assistant-width) + 20px);
  grid-template-columns: minmax(240px, 1fr) minmax(360px, auto);
}

.agent-assistant-open .local-listing-action-dock .final-action-copy span,
.agent-assistant-open .video-clip-action-dock .final-action-copy span {
  white-space: normal;
  overflow-wrap: anywhere;
}

.fixed-action-spacer,
.video-clip-fixed-action-spacer {
  height: 104px;
}

.layout-collapsed .local-listing-action-dock,
.collapsed-preview .local-listing-action-dock,
.layout-collapsed .video-clip-action-dock,
.collapsed-preview .video-clip-action-dock {
  left: calc(var(--sidebar-collapsed-width) + 20px);
}

.final-action-hub.tool-action-sticky,
.final-action-bar.tool-action-sticky {
  position: sticky;
  bottom: 0;
  z-index: 45;
  margin-bottom: 0;
  background: rgba(247, 253, 253, 0.96);
  box-shadow: 0 -10px 24px rgba(21, 94, 103, 0.08);
  backdrop-filter: blur(8px);
}

@media (max-width: 1080px) {
  .agent-assistant-open .local-listing-action-dock,
  .agent-assistant-open .video-clip-action-dock,
  .local-listing-action-dock,
  .video-clip-action-dock {
    right: 14px;
    bottom: 12px;
    left: calc(var(--sidebar-collapsed-width) + 14px);
  }
}

@media (max-width: 720px) {
  .local-listing-action-dock,
  .video-clip-action-dock {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .local-listing-action-dock .final-action-buttons,
  .video-clip-action-dock .final-action-buttons {
    justify-content: flex-start;
  }

  .local-listing-action-dock .final-action-buttons button,
  .video-clip-action-dock .final-action-buttons button {
    flex: 1 1 148px;
  }

  .fixed-action-spacer,
  .video-clip-fixed-action-spacer {
    height: 164px;
  }
}

.text-link {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5a7782;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-link:hover {
  color: var(--primary-dark);
}

.danger-link {
  color: #b04b4b;
}

.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.panel {
  min-width: 0;
  padding: 14px;
  box-shadow: var(--shadow);
}

.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f5;
}

.panel-title.compact {
  align-items: center;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid.compact {
  gap: 10px 12px;
}

.form-grid.distribution-compact-grid {
  grid-template-columns: minmax(180px, 0.9fr) minmax(260px, 1.2fr) minmax(130px, 0.55fr) minmax(150px, 0.7fr) minmax(180px, 0.8fr);
}

.form-grid.distribution-shop-grid {
  grid-template-columns: minmax(0, 1fr);
}

.target-shop-editor {
  display: grid;
  gap: 7px;
}

.target-shop-row {
  display: grid;
  grid-template-columns: auto 104px minmax(240px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 7px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
}

.target-shop-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  color: var(--theme-text);
  white-space: nowrap;
}

.target-shop-check input {
  margin: 0;
}

.target-shop-row .plain-select,
.target-shop-row .plain-input {
  width: 100%;
  min-width: 0;
}

.target-shop-empty {
  padding: 8px 10px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 6px;
  color: var(--theme-muted);
  background: var(--theme-surface-raised);
}

.target-shop-add-row {
  display: grid;
  grid-template-columns: 104px minmax(260px, 1fr) auto;
  align-items: center;
  gap: 8px;
  max-width: 760px;
}

.target-shop-add-row .plain-select,
.target-shop-add-row .plain-input {
  width: 100%;
  min-width: 0;
}

.field-resource-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 6px;
}

.field-resource-links .text-link {
  font-size: 12px;
}

.stall-pick-page .stall-settings-template-row {
  display: grid;
  grid-template-columns: minmax(280px, 430px) auto minmax(260px, 1fr);
  gap: 6px 10px;
  align-items: end;
  margin-bottom: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--theme-border);
}

.stall-pick-page .stall-settings-template-select {
  gap: 5px;
}

.stall-pick-page .stall-settings-template-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.stall-pick-page .stall-settings-template-actions button {
  min-height: 34px;
  white-space: nowrap;
}

.stall-pick-page .stall-settings-template-row > small {
  align-self: center;
  color: var(--theme-muted);
  line-height: 1.45;
}

.stall-pick-page .stall-settings-template-row > .form-error {
  grid-column: 1 / -1;
  color: var(--theme-danger-text);
}

.stall-pick-page .path-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.stall-pick-page .path-picker .plain-input {
  width: 100%;
  min-width: 0;
}

.stall-pick-page .path-picker button {
  min-height: 34px;
  white-space: nowrap;
}

.stall-pick-page .field.has-error .plain-input {
  border-color: var(--theme-danger-border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger-border) 24%, transparent);
}

.stall-pick-page .stall-field-error,
.stall-pick-page .stall-action-error {
  color: var(--theme-danger-text);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
}

.stall-pick-page .stall-output-path-preview {
  display: block;
  min-width: 0;
  margin-top: 5px;
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stall-pick-page .stall-checkbox-note {
  display: block;
  margin-top: 7px;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
}

.stall-pick-page .stall-action-error {
  margin-top: 2px;
}

.stall-pick-page .stall-collect-grid,
.stall-pick-page .stall-collect-timing-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 12px;
}

.stall-pick-page .stall-collect-mode {
  grid-column: span 4;
}

.stall-pick-page .stall-collect-output {
  grid-column: span 3;
}

.stall-pick-page .stall-collect-save-dir {
  grid-column: span 5;
}

.stall-pick-page .stall-collect-path {
  grid-column: span 8;
}

.stall-pick-page .stall-collect-url {
  grid-column: span 4;
}

.stall-pick-page .stall-collect-short {
  grid-column: span 3;
}

.stall-pick-page .stall-collect-tiny,
.stall-pick-page .stall-collect-timing-short {
  grid-column: span 2;
}

.stall-pick-page .stall-collect-required {
  grid-column: span 9;
}

.stall-pick-page .stall-collect-switch {
  grid-column: span 4;
}

.stall-pick-page .stall-collect-output .plain-input {
  width: 100%;
}

.stall-pick-page .stall-collect-grid :is(.plain-input, .plain-select),
.stall-pick-page .stall-collect-timing-grid :is(.plain-input, .plain-select) {
  min-width: 0;
}

@media (max-width: 1180px) {
  .stall-pick-page .stall-settings-template-row {
    grid-template-columns: minmax(260px, 1fr) auto;
  }

  .stall-pick-page .stall-settings-template-row > small {
    grid-column: 1 / -1;
  }

  .stall-pick-page .stall-collect-grid,
  .stall-pick-page .stall-collect-timing-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .stall-pick-page .stall-collect-mode,
  .stall-pick-page .stall-collect-output,
  .stall-pick-page .stall-collect-save-dir,
  .stall-pick-page .stall-collect-path,
  .stall-pick-page .stall-collect-url {
    grid-column: span 3;
  }

  .stall-pick-page .stall-collect-short,
  .stall-pick-page .stall-collect-switch {
    grid-column: span 2;
  }

  .stall-pick-page .stall-collect-tiny,
  .stall-pick-page .stall-collect-timing-short {
    grid-column: span 1;
  }

  .stall-pick-page .stall-collect-required {
    grid-column: span 4;
  }
}

@media (max-width: 820px) {
  .stall-pick-page .stall-settings-template-row,
  .stall-pick-page .stall-collect-grid,
  .stall-pick-page .stall-collect-timing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stall-pick-page .stall-collect-path,
  .stall-pick-page .stall-collect-save-dir,
  .stall-pick-page .stall-collect-url,
  .stall-pick-page .stall-collect-required {
    grid-column: 1 / -1;
  }

  .stall-pick-page .stall-collect-mode,
  .stall-pick-page .stall-collect-output,
  .stall-pick-page .stall-collect-short,
  .stall-pick-page .stall-collect-tiny,
  .stall-pick-page .stall-collect-timing-short,
  .stall-pick-page .stall-collect-switch {
    grid-column: span 1;
  }
}

@media (max-width: 620px) {
  .stall-pick-page .stall-settings-template-row,
  .stall-pick-page .stall-collect-grid,
  .stall-pick-page .stall-collect-timing-grid,
  .stall-pick-page .path-picker {
    grid-template-columns: 1fr;
  }

  .stall-pick-page .stall-settings-template-actions {
    align-items: stretch;
  }

  .stall-pick-page .stall-settings-template-actions button {
    flex: 1 1 0;
  }

  .stall-pick-page .stall-collect-mode,
  .stall-pick-page .stall-collect-output,
  .stall-pick-page .stall-collect-save-dir,
  .stall-pick-page .stall-collect-path,
  .stall-pick-page .stall-collect-url,
  .stall-pick-page .stall-collect-required,
  .stall-pick-page .stall-collect-short,
  .stall-pick-page .stall-collect-tiny,
  .stall-pick-page .stall-collect-timing-short,
  .stall-pick-page .stall-collect-switch {
    grid-column: span 1;
  }
}

@media (max-width: 900px) {
  .target-shop-row {
    grid-template-columns: auto 96px minmax(0, 1fr) auto;
  }

  .target-shop-add-row {
    grid-template-columns: 96px minmax(0, 1fr) auto;
  }
}

.panel.dense {
  padding: 12px 14px;
}

.panel.dense .panel-title {
  margin-bottom: 10px;
  padding-bottom: 9px;
}

.panel-actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.local-task-panel .panel-title {
  align-items: center;
}

.main:has(.local-listing-page) {
  background: #f3f8f8;
}

.local-listing-page {
  counter-reset: local-listing-section;
}

.local-listing-page > .panel {
  overflow: hidden;
  border-color: #c9e3e5;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 72, 82, 0.07);
}

.local-listing-page > .panel > .panel-title {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: -12px -14px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #b9dfe0;
  background: #ddf4f2;
}

.local-listing-page > .panel > .panel-title::before {
  counter-increment: local-listing-section;
  content: counter(local-listing-section);
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-right: 0;
  place-items: center;
  border-radius: 6px;
  background: #0a948c;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.local-listing-page > .panel > .panel-title > div {
  flex: 1 1 auto;
  min-width: 0;
}

.local-listing-page > .panel > .panel-title .panel-actions,
.local-listing-page > .panel > .panel-title > button {
  margin-left: auto;
}

.local-listing-page > .panel > .panel-title h2 {
  color: #0d3c43;
  font-size: 17px;
  line-height: 1.25;
}

.local-listing-page > .panel > .panel-title p {
  margin-top: 2px;
  color: #43656c;
}

.local-listing-page .plain-input,
.local-listing-page .plain-select,
.local-listing-page .readonly-value,
.local-listing-page .tag-input,
.local-listing-page .path-input,
.local-listing-page .segmented,
.local-listing-page .compact-text-input {
  background: #fff;
}

.local-listing-page .segmented button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 7px rgba(8, 169, 164, 0.24);
}

.main:has(.settings-center-page),
.main:has(.settings-file-paths-page),
.main:has(.settings-task-notice-page) {
  background: #f3f8f8;
}

.settings-center-page {
  counter-reset: setting-section;
}

.settings-center-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.settings-center-section {
  overflow: hidden;
  border-color: #c9e3e5;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 72, 82, 0.07);
}

.settings-center-section > .panel-title {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: -12px -14px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #b9dfe0;
  background: #ddf4f2;
}

.settings-center-section > .panel-title::before {
  counter-increment: setting-section;
  content: counter(setting-section);
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: #0a948c;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.settings-center-section > .panel-title > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-center-section > .panel-title h2 {
  color: #0d3c43;
  font-size: 17px;
  line-height: 1.25;
}

.settings-center-section > .panel-title p {
  margin-top: 2px;
  color: #43656c;
}

.settings-center-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.settings-center-shop-list,
.settings-center-runtime-grid,
.settings-center-mixed-grid,
.settings-center-ai-grid,
.settings-center-cloud-grid,
.settings-center-ui-grid {
  display: grid;
  gap: 10px;
}

.settings-center-shop-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-center-shop-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #d6e8ea;
  border-radius: 8px;
  background: #f8fcfc;
}

.settings-center-shop-row div,
.settings-center-cloud-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-center-shop-row span,
.settings-center-cloud-grid span,
.settings-center-status-strip span,
.settings-center-width-control span,
.settings-center-toggle-row span,
.settings-center-short-row span {
  color: #5d747b;
  font-size: 12px;
}

.settings-center-shop-row strong,
.settings-center-cloud-grid strong,
.settings-center-width-control strong {
  overflow: hidden;
  color: #1f3d44;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-center-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid #d6e4e6;
  border-radius: 999px;
  background: #fff;
  color: #667a80;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.settings-center-pill.ok {
  border-color: #9fd8d1;
  background: #e9faf7;
  color: #08766f;
}

.settings-center-pill.warning {
  border-color: #f4d18b;
  background: #fff8e6;
  color: #9a6500;
}

.settings-center-runtime-grid {
  grid-template-columns: minmax(220px, 0.32fr) minmax(360px, 0.68fr);
  align-items: end;
}

.settings-center-runtime-grid .plain-select,
.settings-center-ai-grid .plain-select {
  width: min(100%, 360px);
}

.settings-center-path-field,
.settings-center-note-field {
  grid-column: 1 / -1;
}

.settings-center-path-field .path-input {
  width: 100%;
  min-height: 36px;
  padding-right: 4px;
  background: #fff;
}

.settings-center-path-field .path-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #243d48;
  font: inherit;
  font-weight: 600;
}

.settings-center-note-field textarea {
  width: min(100%, 760px);
  min-height: 72px;
  padding: 8px 10px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: #243d48;
  font: inherit;
  line-height: 1.45;
}

.settings-center-mixed-grid,
.settings-center-ai-grid,
.settings-center-ui-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  align-items: center;
}

.settings-center-toggle-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d6e8ea;
  border-radius: 8px;
  background: #fbfdfd;
}

.settings-center-toggle-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-center-toggle-row strong {
  color: #234049;
  font-size: 14px;
}

.settings-center-short-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.settings-center-short-row label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #405a63;
  font-size: 13px;
  font-weight: 700;
}

.settings-center-short-row input {
  width: 86px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: #234049;
  font: inherit;
  font-weight: 800;
}

.settings-center-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  border: 1px solid #cfe1e3;
  border-radius: 8px;
  background: #f4f8f8;
}

.settings-center-segmented button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #405a63;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.settings-center-segmented button.active {
  border-color: #0a948c;
  background: #0a948c;
  color: #fff;
  box-shadow: 0 2px 7px rgba(8, 169, 164, 0.24);
}

.settings-center-status-strip {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #d6e8ea;
  border-radius: 8px;
  background: #f8fcfc;
}

.settings-center-cloud-grid {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.settings-center-cloud-grid > div {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #d6e8ea;
  border-radius: 8px;
  background: #f8fcfc;
}

.settings-center-width-control {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.settings-center-width-control input {
  width: 100%;
  accent-color: #0a948c;
}

@media (max-width: 1120px) {
  .settings-center-shop-list,
  .settings-center-cloud-grid,
  .settings-center-mixed-grid,
  .settings-center-ai-grid,
  .settings-center-ui-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .settings-center-section > .panel-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-center-actions {
    justify-content: flex-start;
  }

  .settings-center-runtime-grid,
  .settings-center-shop-row,
  .settings-center-width-control {
    grid-template-columns: 1fr;
  }
}

.settings-file-paths-page {
  counter-reset: tool-section;
}

.settings-file-paths-page .page-grid > .panel {
  overflow: hidden;
  border-color: #c9e3e5;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 72, 82, 0.07);
}

.settings-file-paths-page .page-grid > .panel > .panel-title {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: -12px -14px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #b9dfe0;
  background: #ddf4f2;
}

.settings-file-paths-page .page-grid > .panel > .panel-title::before {
  counter-increment: tool-section;
  content: counter(tool-section);
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: #0a948c;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.settings-file-paths-page .page-grid > .panel > .panel-title > div {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-file-paths-page .page-grid > .panel > .panel-title h2 {
  color: #0d3c43;
  font-size: 17px;
  line-height: 1.25;
}

.settings-file-paths-page .page-grid > .panel > .panel-title p {
  margin-top: 2px;
  color: #43656c;
}

.runtime-settings-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.35fr) minmax(360px, 0.65fr);
  gap: 12px 14px;
}

.runtime-path-field,
.runtime-note-field {
  grid-column: 1 / -1;
}

.runtime-settings-grid .path-input {
  width: 100%;
  min-height: 36px;
  padding-right: 4px;
}

.runtime-settings-grid .path-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #243d48;
  font: inherit;
  font-weight: 600;
}

.runtime-settings-grid .plain-select {
  width: min(100%, 340px);
}

.runtime-note-field textarea {
  width: min(100%, 760px);
  min-height: 78px;
  padding: 8px 10px;
  resize: vertical;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: #243d48;
  font: inherit;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .runtime-settings-grid {
    grid-template-columns: 1fr;
  }
}

.settings-task-notice-page {
  counter-reset: tool-section;
}

.settings-task-notice-page .page-grid > .panel {
  overflow: hidden;
  border-color: #c9e3e5;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 72, 82, 0.07);
}

.settings-task-notice-page .page-grid > .panel > .panel-title {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: -12px -14px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid #b9dfe0;
  background: #ddf4f2;
}

.settings-task-notice-page .page-grid > .panel > .panel-title::before {
  counter-increment: tool-section;
  content: counter(tool-section);
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: #0a948c;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.settings-task-notice-page .page-grid > .panel > .panel-title > div {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-task-notice-page .page-grid > .panel > .panel-title h2 {
  color: #0d3c43;
  font-size: 17px;
  line-height: 1.25;
}

.settings-task-notice-page .page-grid > .panel > .panel-title p {
  margin-top: 2px;
  color: #43656c;
}

.settings-task-notice-grid {
  gap: 12px;
}

.task-notice-setting-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.36fr) minmax(260px, 0.64fr);
  gap: 12px 18px;
  align-items: start;
}

.task-notice-setting-row > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.task-notice-setting-row strong {
  color: #17343e;
  font-size: 14px;
}

.task-notice-setting-row small {
  color: #607983;
  font-size: 12px;
  line-height: 1.5;
}

.task-notice-segmented {
  align-self: start;
}

.task-notice-boundary-panel {
  max-width: 980px;
}

.task-notice-rules {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #31535e;
  font-size: 13px;
  line-height: 1.55;
}

.settings-general-grid {
  gap: 12px;
}

.settings-general-page .panel-title > div {
  min-width: 0;
}

.general-setting-form {
  display: grid;
  gap: 12px;
}

.general-setting-row {
  display: grid;
  grid-template-columns: minmax(200px, 0.34fr) minmax(260px, 0.66fr);
  gap: 12px 18px;
  align-items: start;
}

.general-setting-row > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
  cursor: default;
}

.general-setting-row strong {
  color: #17343e;
  font-size: 14px;
}

.general-setting-row small {
  color: #607983;
  font-size: 12px;
  line-height: 1.5;
}

.general-segmented {
  align-self: start;
  width: fit-content;
  max-width: 100%;
}

.general-width-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.general-width-presets {
  width: fit-content;
  max-width: 100%;
}

.general-width-presets button {
  min-width: 64px;
}

.general-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.general-status-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d8e8ec;
  border-radius: 7px;
  background: #fbfefe;
  cursor: default;
}

.general-status-grid span {
  color: #607983;
  font-size: 12px;
}

.general-status-grid strong {
  color: #17343e;
  font-size: 14px;
  line-height: 1.35;
}

.general-boundary-panel {
  max-width: 980px;
}

.settings-ai-preferences-grid {
  gap: 12px;
}

.settings-ai-preferences-page .panel-title > div {
  min-width: 0;
}

.ai-preference-form {
  display: grid;
  gap: 12px;
}

.ai-preference-row {
  display: grid;
  grid-template-columns: minmax(200px, 0.34fr) minmax(260px, 0.66fr);
  gap: 12px 18px;
  align-items: start;
}

.ai-preference-row > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
  cursor: default;
}

.ai-preference-row strong {
  color: #17343e;
  font-size: 14px;
}

.ai-preference-row small,
.ai-preference-status-item small {
  color: #607983;
  font-size: 12px;
  line-height: 1.5;
}

.ai-preference-segmented {
  align-self: start;
}

.ai-preference-segmented button {
  max-width: 260px;
}

.ai-preference-status-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.ai-preference-status-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d8e8ec;
  border-radius: 7px;
  background: #fbfefe;
  cursor: default;
}

.ai-preference-status-item span {
  display: inline-grid;
  min-width: 48px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.ai-preference-status-item span.ok {
  background: #dff8f3;
  color: #07887e;
}

.ai-preference-status-item span.warn {
  background: #fff3d6;
  color: #936100;
}

.ai-preference-status-item strong {
  color: #17343e;
  font-size: 14px;
}

.ai-preference-status-item small {
  grid-column: 1 / -1;
}

.ai-preference-boundary-panel {
  max-width: 980px;
}

.settings-agent-grid {
  gap: 12px;
}

.settings-agent-page .panel-title > div {
  min-width: 0;
}

.agent-user-setting-row {
  display: grid;
  grid-template-columns: minmax(210px, 0.34fr) minmax(260px, 0.66fr);
  gap: 12px 18px;
  align-items: start;
}

.agent-user-setting-row > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
  cursor: default;
}

.agent-user-setting-row strong {
  color: #17343e;
  font-size: 14px;
}

.agent-user-setting-row small,
.agent-user-status-item small {
  color: #607983;
  font-size: 12px;
  line-height: 1.5;
}

.agent-user-segmented {
  width: fit-content;
  max-width: 100%;
  align-self: start;
}

.agent-user-segmented button {
  min-width: 104px;
}

.agent-user-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.agent-user-status-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d8e8ec;
  border-radius: 7px;
  background: #fbfefe;
  cursor: default;
}

.agent-user-status-item span {
  display: inline-grid;
  min-width: 48px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.agent-user-status-item span.ok {
  background: #dff8f3;
  color: #07887e;
}

.agent-user-status-item span.warn {
  background: #fff3d6;
  color: #936100;
}

.agent-user-status-item strong {
  color: #17343e;
  font-size: 14px;
}

.agent-user-status-item small {
  grid-column: 1 / -1;
}

.agent-user-boundary-panel {
  max-width: 980px;
}

.settings-captcha-grid {
  gap: 12px;
}

.settings-captcha-page .panel-title > div {
  min-width: 0;
}

.captcha-preference-form {
  display: grid;
  gap: 12px;
}

.captcha-setting-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.32fr) minmax(260px, 0.68fr);
  gap: 12px 18px;
  align-items: start;
}

.captcha-setting-row-single {
  grid-template-columns: minmax(220px, 0.44fr) auto;
}

.captcha-setting-row > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
  cursor: default;
}

.captcha-setting-row strong,
.captcha-number-field strong {
  color: #17343e;
  font-size: 14px;
}

.captcha-setting-row small,
.captcha-status-item small {
  color: #607983;
  font-size: 12px;
  line-height: 1.5;
}

.captcha-setting-row.is-disabled {
  opacity: 0.58;
}

.captcha-provider-segmented {
  align-self: start;
}

.captcha-provider-segmented button {
  min-width: 96px;
}

.captcha-number-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(132px, 1fr));
  gap: 12px;
  align-items: start;
}

.captcha-number-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.captcha-field-label {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 6px;
}

.number-with-unit {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 6px;
}

.number-with-unit .plain-input.compact-number {
  width: 82px;
  min-width: 72px;
}

.number-with-unit span {
  color: #607983;
  font-size: 12px;
  white-space: nowrap;
}

.captcha-status-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.captcha-status-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d8e8ec;
  border-radius: 7px;
  background: #fbfefe;
  cursor: default;
}

.captcha-status-item span {
  display: inline-grid;
  min-width: 44px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.captcha-status-item span.ok {
  background: #dff8f3;
  color: #07887e;
}

.captcha-status-item span.warn {
  background: #fff3d6;
  color: #936100;
}

.captcha-status-item strong {
  color: #17343e;
  font-size: 14px;
}

.captcha-status-item small {
  grid-column: 1 / -1;
}

.captcha-boundary-panel {
  max-width: 980px;
}

.settings-cloud-grid {
  gap: 12px;
}

.settings-cloud-page .panel-title > div {
  min-width: 0;
}

.cloud-status-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 10px;
}

.cloud-status-item {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border: 1px solid #d8e8ec;
  border-radius: 7px;
  background: #fbfefe;
  cursor: default;
}

.cloud-status-item > span {
  width: fit-content;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  color: #07887e;
  background: #dff8f3;
  font-size: 12px;
  font-weight: 900;
  line-height: 22px;
}

.cloud-status-item > span.warn {
  color: #936100;
  background: #fff3d6;
}

.cloud-status-item strong {
  color: #102f38;
  font-size: 20px;
  line-height: 1.15;
}

.cloud-status-item small {
  color: #607983;
  font-size: 12px;
  line-height: 1.5;
}

.cloud-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cloud-action-grid > button {
  flex: 0 0 auto;
}

.cloud-handoff-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(180px, 260px);
  gap: 12px;
  align-items: start;
}

.cloud-handoff-grid .field {
  margin: 0;
}

.cloud-instance-field .plain-input.compact-text {
  width: 100%;
}

.cloud-action-grid-compact {
  margin-top: 10px;
}

.cloud-boundary-panel {
  max-width: 980px;
}

@media (max-width: 860px) {
  .task-notice-setting-row {
    grid-template-columns: 1fr;
  }

  .ai-preference-row,
  .ai-preference-status-list,
  .captcha-setting-row,
  .captcha-setting-row-single {
    grid-template-columns: 1fr;
  }

  .captcha-number-grid,
  .captcha-status-list,
  .cloud-status-list,
  .cloud-handoff-grid {
    grid-template-columns: repeat(2, minmax(132px, 1fr));
  }
}

@media (max-width: 560px) {
  .captcha-number-grid,
  .captcha-status-list,
  .cloud-status-list,
  .cloud-handoff-grid {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-09 第一批工具页配色层：浅页面底色 + 白正文 + 标题色带 + 数字定位 */
.main:has(.taobao-edit-page),
.main:has(.video-clip-page),
.main:has(.batch-image-page),
.main:has(.title-guide-page .title-batch-page),
.main:has(.table-tools-page) {
  background: #f3f8f8;
}

.taobao-edit-page,
.video-clip-page,
.batch-image-page,
.title-guide-page .title-batch-page,
.table-tools-page {
  --tool-page-bg: #f3f8f8;
  --tool-panel-border: #c9e3e5;
  --tool-title-band: #ddf4f2;
  --tool-title-border: #b9dfe0;
  --tool-title-ink: #0d3c43;
  --tool-title-note: #43656c;
  --tool-number-bg: #0a948c;
  --tool-panel-shadow: 0 10px 24px rgba(30, 72, 82, 0.07);
}

.taobao-edit-page {
  display: grid;
  gap: 12px;
  counter-reset: tool-section;
}

.video-clip-page .page-grid,
.title-guide-page .title-batch-page,
.table-tools-page,
.batch-image-page .batch-image-workbench-v2 {
  counter-reset: tool-section;
}

.taobao-edit-page .te-panel,
.video-clip-page .page-grid > .panel,
.title-guide-page .title-batch-page > .panel,
.table-tools-page .panel,
.batch-image-page .batch-image-task-panel,
.batch-image-page .batch-image-command-panel,
.batch-image-page .batch-image-help-panel {
  overflow: hidden;
  border-color: var(--tool-panel-border);
  background: #fff;
  box-shadow: var(--tool-panel-shadow);
}

.taobao-edit-page .te-panel-head,
.video-clip-page .page-grid > .panel > .panel-title,
.title-guide-page .title-batch-page > .panel > .panel-title,
.table-tools-page .panel > .panel-title,
.batch-image-page .batch-image-task-panel > .section-title-row,
.batch-image-page .batch-image-command-panel > .section-title-row,
.batch-image-page .batch-image-help-panel > .section-title-row {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--tool-title-border);
  background: var(--tool-title-band);
}

.taobao-edit-page .te-panel-head {
  display: flex;
  padding: 9px 12px;
}

.taobao-edit-page .te-panel-body {
  padding: 12px 14px;
  background: #fff;
}

.video-clip-page .page-grid > .panel > .panel-title {
  margin: -10px -12px 10px;
  padding: 9px 12px;
}

.title-guide-page .title-batch-page > .panel > .panel-title,
.table-tools-page .panel > .panel-title {
  margin: -14px -14px 12px;
  padding: 9px 12px;
}

.batch-image-page .batch-image-task-panel > .section-title-row,
.batch-image-page .batch-image-command-panel > .section-title-row,
.batch-image-page .batch-image-help-panel > .section-title-row {
  margin: -14px -14px 12px;
  padding: 9px 12px;
}

.taobao-edit-page .te-panel-head::before,
.video-clip-page .page-grid > .panel > .panel-title::before,
.title-guide-page .title-batch-page > .panel > .panel-title::before,
.batch-image-page .batch-image-task-panel > .section-title-row::before,
.batch-image-page .batch-image-command-panel > .section-title-row::before {
  counter-increment: tool-section;
  content: counter(tool-section);
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: var(--tool-number-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.taobao-edit-page .te-panel-title,
.video-clip-page .page-grid > .panel > .panel-title > div,
.title-guide-page .title-batch-page > .panel > .panel-title > div,
.table-tools-page .panel > .panel-title > div,
.batch-image-page .section-title-row > div {
  flex: 1 1 auto;
  min-width: 0;
}

.taobao-edit-page .te-actions {
  margin-left: auto;
}

.taobao-edit-page .te-panel-title,
.video-clip-page .page-grid > .panel > .panel-title h2,
.title-guide-page .title-batch-page > .panel > .panel-title h2,
.table-tools-page .panel > .panel-title h2,
.batch-image-page .section-title-row h2 {
  color: var(--tool-title-ink);
}

.taobao-edit-page .te-panel-title {
  display: grid;
  gap: 2px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
}

.taobao-edit-page .te-panel-title small,
.video-clip-page .page-grid > .panel > .panel-title p,
.title-guide-page .title-batch-page > .panel > .panel-title p,
.table-tools-page .panel > .panel-title p,
.batch-image-page .section-title-row p {
  color: var(--tool-title-note);
}

.taobao-edit-page .te-seg {
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
}

.taobao-edit-page .te-seg button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.taobao-edit-page .te-seg button.is-on {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 7px rgba(8, 169, 164, 0.24);
}

/* 批量上传与替换：多工具入口页只增强分隔感，不强行编号。 */
.main:has(.upload-edit-page) {
  background: #f3f8f8;
}

.upload-edit-page .upload-edit-shell .upload-panel {
  border-color: #c9e3e5;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 72, 82, 0.07);
}

.upload-edit-page .upload-edit-shell .upload-panel > .upload-panel-head {
  border-bottom-color: #b9dfe0;
  background: #ddf4f2;
}

.upload-edit-page .upload-edit-shell .upload-panel-title {
  color: #0d3c43;
}

.upload-edit-page .upload-edit-shell .upload-panel-note {
  color: #43656c;
}

/* 2026-07-10 工具页配色补齐：正文保持白色，只用页面底色和标题带拉开层级。 */
.main:has(.material-page),
.main:has(.video-frame-page),
.main:has(.title-guide-page .title-single-page),
.main:has(.title-guide-page .title-trend-page) {
  background: #f3f8f8;
}

.material-page,
.video-frame-page,
.title-guide-page .title-single-page,
.title-guide-page .title-trend-page {
  --tool-panel-border: #c9e3e5;
  --tool-title-band: #ddf4f2;
  --tool-title-border: #b9dfe0;
  --tool-title-ink: #0d3c43;
  --tool-title-note: #43656c;
  --tool-number-bg: #0a948c;
  --tool-panel-shadow: 0 10px 24px rgba(30, 72, 82, 0.07);
}

.title-guide-page .title-trend-tabs {
  min-width: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--tool-title-border);
  background: #dff3f1;
}

.title-guide-page .title-trend-tabs::-webkit-scrollbar {
  display: none;
}

.title-guide-page .title-trend-tablist {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-height: 42px;
  padding: 4px 10px 0;
}

.title-guide-page .title-trend-tab {
  position: relative;
  flex: 0 0 auto;
  min-width: 190px;
  height: 40px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: #31565e;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  line-height: 40px;
  text-align: center;
  white-space: nowrap;
  box-shadow: none;
}

.title-guide-page .title-trend-tab.active {
  border-color: var(--tool-title-border);
  background: #ffffff;
  color: #073f44;
}

.title-guide-page .title-trend-tab.active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #ffffff;
}

.title-guide-page .title-trend-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.46);
  color: #123e46;
}

.title-guide-page .title-trend-tab:focus-visible {
  outline: 2px solid #0a948c;
  outline-offset: -3px;
}

.title-guide-page .title-trend-page > .panel > .title-trend-panel-title {
  display: block;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--tool-title-border);
  background: #ffffff;
}

.title-guide-page .title-trend-tab-note {
  margin: 0;
  padding: 10px 12px 9px;
  background: #ffffff;
}

.material-page .panel,
.video-frame-page .page-grid > .panel,
.title-guide-page .title-single-page > .panel,
.title-guide-page .title-trend-page > .panel {
  overflow: hidden;
  border-color: var(--tool-panel-border);
  background: #fff;
  box-shadow: var(--tool-panel-shadow);
}

.material-page .material-stack .panel,
.material-page .material-detail-form .panel,
.material-page .material-template-settings.panel {
  overflow: visible;
}

.material-page .panel > .panel-title,
.title-guide-page .title-single-page > .panel > .panel-title,
.title-guide-page .title-trend-page > .panel > .panel-title {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: -14px -14px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--tool-title-border);
  background: var(--tool-title-band);
}

.video-frame-page .page-grid {
  counter-reset: tool-section;
}

.video-frame-page .page-grid > .panel > .panel-title {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: -8px -12px 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--tool-title-border);
  background: var(--tool-title-band);
}

.video-frame-page .page-grid > .panel > .panel-title::before {
  counter-increment: tool-section;
  content: counter(tool-section);
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: var(--tool-number-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.material-page .panel > .panel-title h2,
.video-frame-page .page-grid > .panel > .panel-title h2,
.title-guide-page .title-single-page > .panel > .panel-title h2,
.title-guide-page .title-trend-page > .panel > .panel-title h2 {
  color: var(--tool-title-ink);
}

.material-page .panel > .panel-title p,
.video-frame-page .page-grid > .panel > .panel-title p,
.title-guide-page .title-single-page > .panel > .panel-title p,
.title-guide-page .title-trend-page > .panel > .panel-title p {
  color: var(--tool-title-note);
}

.title-guide-page .title-single-page .title-compact-block {
  border-color: #d5e8ea;
  background: #fff;
}

.title-guide-page .title-single-page .title-block-head {
  border-bottom-color: #d7e8ea;
}

.title-guide-page .title-single-page .title-block-head strong {
  color: var(--tool-title-ink);
}

/* 抖店本地素材上架：多段预检工具页，使用同款分层和数字定位。 */
.main:has(.douyin-local-page) {
  background: #f3f8f8;
}

.douyin-local-page {
  counter-reset: tool-section;
  --tool-panel-border: #c9e3e5;
  --tool-title-band: #ddf4f2;
  --tool-title-border: #b9dfe0;
  --tool-title-ink: #0d3c43;
  --tool-title-note: #43656c;
  --tool-number-bg: #0a948c;
  --tool-panel-shadow: 0 10px 24px rgba(30, 72, 82, 0.07);
}

.douyin-local-page .douyin-local-panel {
  overflow: hidden;
  border-color: var(--tool-panel-border);
  background: #fff;
  box-shadow: var(--tool-panel-shadow);
}

.douyin-local-page .douyin-local-panel > .panel-title-row,
.douyin-local-page .douyin-local-panel > .panel-title {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: -16px -18px 14px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--tool-title-border);
  background: var(--tool-title-band);
}

.douyin-local-page .douyin-local-panel > .panel-title-row::before,
.douyin-local-page .douyin-local-panel > .panel-title::before {
  counter-increment: tool-section;
  content: counter(tool-section);
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: var(--tool-number-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.douyin-local-page .douyin-local-panel > .panel-title-row > div,
.douyin-local-page .douyin-local-panel > .panel-title > div {
  flex: 1 1 auto;
  min-width: 0;
}

.douyin-local-page .douyin-local-panel > .panel-title-row .status-pill,
.douyin-local-page .douyin-local-panel > .panel-title .status-pill {
  margin-left: auto;
}

.douyin-local-page .douyin-local-panel > .panel-title-row h2,
.douyin-local-page .douyin-local-panel > .panel-title h2 {
  color: var(--tool-title-ink);
}

.douyin-local-page .douyin-local-panel > .panel-title-row p,
.douyin-local-page .douyin-local-panel > .panel-title p {
  color: var(--tool-title-note);
}

/* Stall pick page: same tool-page layering, scoped by a page-only class. */
.main:has(.stall-pick-page) {
  background: #f3f8f8;
}

.stall-pick-page {
  counter-reset: tool-section;
  --tool-panel-border: #c9e3e5;
  --tool-title-band: #ddf4f2;
  --tool-title-border: #b9dfe0;
  --tool-title-ink: #0d3c43;
  --tool-title-note: #43656c;
  --tool-number-bg: #0a948c;
  --tool-panel-shadow: 0 10px 24px rgba(30, 72, 82, 0.07);
}

.stall-pick-page .page-grid > .panel {
  overflow: hidden;
  border-color: var(--tool-panel-border);
  background: #fff;
  box-shadow: var(--tool-panel-shadow);
}

.stall-pick-page .page-grid > .panel > .panel-title {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: -12px -14px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--tool-title-border);
  background: var(--tool-title-band);
}

.stall-pick-page .page-grid > .panel > .panel-title::before {
  counter-increment: tool-section;
  content: counter(tool-section);
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: var(--tool-number-bg);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
}

.stall-pick-page .page-grid > .panel > .panel-title > div,
.stall-pick-page .page-grid > .panel > .panel-title > h2 {
  flex: 1 1 auto;
  min-width: 0;
}

.stall-pick-page .page-grid > .panel > .panel-title .status-ok {
  margin-left: auto;
}

.stall-pick-page .page-grid > .panel > .panel-title h2 {
  color: var(--tool-title-ink);
}

.stall-pick-page .page-grid > .panel > .panel-title p {
  color: var(--tool-title-note);
}

.local-task-grid {
  display: grid;
  grid-template-columns: minmax(330px, 400px) minmax(230px, 270px) minmax(150px, 170px) minmax(185px, 210px) minmax(150px, 180px) minmax(220px, 240px);
  gap: 10px 12px;
  align-items: start;
  justify-content: start;
}

.agent-assistant-open .local-task-grid {
  grid-template-columns: minmax(330px, 400px) minmax(230px, 270px) minmax(150px, 180px);
}

.local-root-field {
  max-width: 400px;
}

.local-submit-mode-field {
  max-width: 240px;
}

.local-quota-policy-field,
.dyl-quota-policy-field,
.te-quota-policy-field,
.dye-quota-policy-field {
  width: 100%;
  max-width: 220px;
}

.local-quota-policy-field select,
.dyl-quota-policy-field select,
.te-quota-policy-field select,
.dye-quota-policy-field select {
  width: 100%;
  max-width: 220px;
}

.local-task-grid .template-field {
  max-width: 270px;
}

.local-shop-field {
  max-width: 170px;
}

.local-browser-field {
  max-width: 210px;
}

.local-batch-field {
  max-width: 180px;
}

.local-task-grid .field {
  gap: 5px;
}

.local-task-grid .plain-select,
.local-task-grid .readonly-value,
.local-task-grid .inline-actions,
.local-task-grid .tag-input,
.local-task-grid .segmented {
  width: 100%;
}

.local-task-grid .segmented {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.local-task-grid .segmented button {
  flex: 0 0 auto;
}

.local-submit-mode-field .segmented {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
}

.local-submit-mode-field .segmented button {
  min-width: 68px;
  padding-inline: 9px;
}

.local-task-grid .inline-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.local-task-grid .inline-actions .readonly-value {
  flex: 1 1 auto;
}

.field-title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 8px;
  min-width: 0;
}

.field-title-actions > span {
  min-width: 0;
  color: #314852;
  font-weight: 900;
  white-space: nowrap;
}

.field-title-actions .template-buttons-inline {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.local-task-grid .template-buttons-inline {
  gap: 5px;
}

.local-task-grid .template-buttons-inline button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.delivery-time-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.delivery-time-controls .plain-select {
  flex: 1 1 150px;
  min-width: 150px;
}

.delivery-time-controls .plain-input.compact-number {
  width: 68px;
  min-width: 0;
  text-align: center;
}

.local-task-grid small,
.local-attribute-panel small,
.panel.dense .field small {
  color: #68808a;
  font-size: 12px;
  line-height: 1.45;
}

.setting-help-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 18px;
}

.setting-help-link {
  width: fit-content;
  color: #007f77;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

button.setting-help-link {
  border: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.setting-help-link:hover,
.setting-help-link:focus-visible {
  color: #005f59;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.local-help-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.local-help-panel-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  text-decoration: none;
}

.inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  flex: 0 0 auto;
  color: #1f3f46;
  font-size: 13px;
  line-height: 1.4;
}

.inline-checkbox input {
  width: 14px;
  height: 14px;
  accent-color: #0aa99b;
}

.compact-checkbox {
  margin-top: 6px;
}

.compact-text-input {
  width: 120px;
  min-height: 32px;
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px solid #cfe1e5;
  border-radius: 6px;
  color: #14333a;
  background: #fff;
}

.local-attribute-panel {
  border-color: #cce7e9;
  background: #fbfefe;
}

.attribute-topline {
  display: block;
}

.attribute-left-stack {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.attribute-read-rule,
.attribute-default-rule,
.attribute-summary {
  min-width: 0;
  padding: 10px;
  border: 1px solid #d8e9ee;
  border-radius: 8px;
  background: #fff;
}

.attribute-read-rule {
  display: grid;
  gap: 7px;
}

.attribute-read-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.attribute-read-heading strong,
.attribute-summary-head strong,
.attribute-flow-card > b,
.attribute-preset-title {
  color: #1f3e48;
  font-size: 14px;
}

.attribute-read-heading span {
  color: #48626d;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attribute-read-rule b {
  color: var(--primary-dark);
}

.attribute-template-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.attribute-template-row label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.attribute-template-row label span,
.attribute-preset-title {
  color: #314852;
  font-size: 13px;
  font-weight: 900;
}

.attribute-flow-row {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) auto minmax(520px, 1.35fr);
  gap: 8px;
  align-items: center;
}

.attribute-flow-card {
  min-width: 0;
  min-height: 86px;
  padding: 9px 10px;
  border: 1px solid #d8e9ee;
  border-radius: 8px;
  background: #fbfeff;
}

.attribute-flow-card.source {
  border-color: #bfe3df;
  background: #f3fcfb;
}

.attribute-flow-card > b {
  display: block;
  margin-bottom: 7px;
}

.attribute-flow-card small {
  display: block;
  color: #5f7780;
  font-size: 12px;
  line-height: 1.45;
}

.attribute-flow-arrow {
  color: #6b8790;
  font-size: 22px;
  font-weight: 900;
}

.plain-input.compact-text {
  width: 132px;
  min-height: 32px;
  font-weight: 800;
  text-align: center;
}

.plain-select.compact-select {
  width: 176px;
  min-height: 32px;
}

.attribute-default-rule {
  display: grid;
  align-content: start;
  gap: 7px;
}

.attribute-category-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.attribute-category-row > span {
  color: #415b66;
  font-weight: 900;
}

.attribute-category-row strong {
  max-width: 330px;
  min-width: 0;
  overflow: hidden;
  color: #0d685f;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribute-preset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 7px 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #d8e9ee;
  border-radius: 8px;
  background: #f8fcfd;
}

.attribute-preset-note {
  color: #5f7780;
  font-size: 12px;
  white-space: nowrap;
}

.attribute-workflow-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1.4;
}

.attribute-workflow-status.ok {
  color: #047857;
}

.attribute-workflow-status.warn {
  color: #a16207;
}

.attribute-preset-row .segmented {
  min-height: 32px;
}

.attribute-preset-row .segmented button {
  min-height: 24px;
  padding: 0 9px;
}

.attribute-empty-hint {
  display: block;
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px dashed #c8dde4;
  border-radius: 7px;
  color: #6b7f88;
  font-size: 12px;
}

.attribute-summary {
  margin-top: 10px;
}

.attribute-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.attribute-summary-head > div:not(.attribute-summary-actions) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.attribute-summary-head span {
  color: #68808a;
  font-size: 12px;
}

.attribute-summary-actions {
  display: flex;
  align-items: center;
  flex: 0 0 204px;
  min-width: 204px;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.attribute-summary-actions .attribute-detail-action {
  margin-right: auto;
}

.attribute-summary-actions .attribute-collapse-action {
  margin-left: auto;
}

@media (max-width: 760px) {
  .attribute-summary-head {
    align-items: stretch;
    flex-direction: column;
  }

  .attribute-summary-actions {
    flex: 0 1 auto;
    min-width: 0;
    width: 100%;
  }
}

.attribute-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.attribute-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #dcebef;
  border-radius: 7px;
  background: #fff;
}

.attribute-chip b {
  color: #28434d;
  font-size: 12px;
}

.attribute-chip em {
  min-width: 0;
  overflow: hidden;
  color: #17343e;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribute-chip i {
  padding: 2px 5px;
  border-radius: 999px;
  background: #eaf7f7;
  color: var(--primary-dark);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.template-save-mask {
  position: fixed;
  z-index: 1500;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 37, 43, 0.32);
  backdrop-filter: blur(2px);
}

.template-save-dialog {
  display: grid;
  width: min(480px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--theme-border-strong);
  border-radius: 10px;
  background: var(--theme-surface);
  box-shadow: 0 20px 54px rgba(18, 48, 56, 0.24);
  color: var(--theme-text);
}

.template-save-head,
.template-save-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--theme-border);
}

.template-save-head > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.template-save-head strong {
  color: var(--theme-text-strong);
  font-size: 17px;
  line-height: 1.25;
}

.template-save-head span,
.template-save-body p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.55;
}

.template-save-body {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.template-save-field {
  display: grid;
  gap: 7px;
  color: var(--theme-text-strong);
  font-size: 13px;
  font-weight: 800;
}

.template-save-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 8px;
  padding: 0 11px;
  outline: none;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 700;
}

.template-save-field input::placeholder {
  color: var(--theme-muted);
  opacity: 1;
}

.template-save-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(7, 176, 176, 0.12);
}

.template-save-error {
  border: 1px solid var(--theme-danger-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 12px;
  font-weight: 800;
}

.template-save-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--theme-border);
  border-bottom: 0;
  background: var(--theme-surface-raised);
}

.category-modal-mask,
.attribute-drawer-mask {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(21, 42, 48, 0.28);
}

.category-modal {
  display: grid;
  width: min(1040px, calc(100vw - 56px));
  max-height: calc(100vh - 56px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #c8dce3;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(20, 48, 57, 0.22);
}

.category-modal-head,
.category-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #e1edf1;
}

.category-modal-foot {
  justify-content: flex-end;
  border-top: 1px solid #e1edf1;
  border-bottom: 0;
}

.category-modal-head strong {
  color: #17343e;
  font-size: 17px;
}

.category-close {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #36545e;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.category-close:hover {
  background: #edf7f8;
}

.category-modal-body {
  min-height: 0;
  overflow: auto;
  padding: 14px 16px;
}

.category-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dce8ec;
  border-radius: 7px;
  background: #f7fafb;
  color: #45606b;
}

.category-selected b {
  color: #185c67;
}

.category-selected em {
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff3df;
  color: #a15a00;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.category-selected em.has-template {
  background: #e8f8f5;
  color: #008d84;
}

.category-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.category-search {
  flex: 1 1 auto;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #cddce1;
  border-radius: 7px;
  color: #213d47;
}

.category-count {
  color: #748b94;
  font-size: 12px;
  white-space: nowrap;
}

.category-error,
.category-loading {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
}

.category-error {
  border: 1px solid #f2b4a9;
  background: #fff4f2;
  color: #b53822;
}

.category-loading {
  border: 1px solid #cce8ea;
  background: #f0fbfb;
  color: #16716c;
}

.category-history {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0;
  color: #526b75;
  font-size: 12px;
}

.category-history button,
.category-search-results button {
  border: 0;
  background: transparent;
  color: #175f69;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.category-columns {
  display: grid;
  min-height: 318px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid #dce8ec;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.category-column {
  min-width: 0;
  max-height: 360px;
  overflow: auto;
  border-right: 1px solid #e2ecef;
}

.category-column:last-child {
  border-right: 0;
}

.category-column button {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  background: #fff;
  color: #314d58;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}

.category-column button span {
  min-width: 0;
  overflow: hidden;
  padding: 0 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-column button.active,
.category-column button:hover {
  background: #eaf8f8;
  color: #008d84;
  font-weight: 900;
}

.category-column em {
  padding-right: 8px;
  color: #8aa0a8;
  font-style: normal;
}

.category-search-results {
  display: grid;
  max-height: 360px;
  gap: 2px;
  overflow: auto;
  margin-top: 10px;
  border: 1px solid #dce8ec;
  border-radius: 8px;
  padding: 8px;
}

.category-search-results button {
  min-height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  text-align: left;
}

.category-search-results button:hover {
  background: #effafa;
}

.category-browser-region {
  display: flex;
  height: clamp(220px, 42dvh, 360px);
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  margin-top: 10px;
}

.category-browser-region > .category-history {
  flex: 0 0 auto;
  margin: 0 0 10px;
}

.category-browser-region > .category-columns,
.category-browser-region > .category-search-results {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  margin-top: 0;
}

.category-browser-region > .category-search-results {
  align-content: start;
  overflow: auto;
  scrollbar-gutter: stable;
}

.category-browser-region .category-column {
  scrollbar-gutter: stable;
}

@media (max-width: 720px) {
  .local-category-mask {
    padding: 12px;
  }

  .local-category-modal {
    width: 100%;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .local-category-modal .category-modal-body {
    padding: 12px;
  }

  .local-category-modal .category-search-row {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .local-category-modal .category-search {
    width: 100%;
    flex-basis: 100%;
  }

  .local-category-modal .category-count {
    width: 100%;
  }

  .local-category-modal .category-browser-region {
    height: clamp(220px, 45dvh, 320px);
  }

  .local-category-modal .category-browser-region > .category-columns {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .local-category-modal .category-column {
    min-width: 180px;
    flex: 0 0 min(78vw, 240px);
  }
}

html[data-theme="dark"] .local-category-modal :is(.category-modal-head, .category-modal-foot) {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

html[data-theme="dark"] .local-category-modal :is(.category-selected, .category-columns, .category-search-results) {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}

html[data-theme="dark"] .local-category-modal :is(.category-search, .category-column button, .category-search-results button) {
  border-color: var(--theme-border-strong);
  background: var(--theme-control);
  color: var(--theme-text);
}

html[data-theme="dark"] .local-category-modal :is(.category-modal-head strong, .category-selected b) {
  color: var(--theme-text-strong);
}

html[data-theme="dark"] .local-category-modal :is(.category-count, .category-history, .category-search-results > span) {
  color: var(--theme-muted);
}

html[data-theme="dark"] .local-category-modal :is(.category-history button, .category-close) {
  color: var(--primary-dark);
}

html[data-theme="dark"] .local-category-modal :is(.category-column button:hover, .category-column button.active, .category-search-results button:hover, .category-close:hover) {
  background: var(--theme-active);
  color: var(--primary-dark);
}

html[data-theme="dark"] .local-category-modal .category-column {
  border-color: var(--theme-border);
}

html[data-theme="dark"] .local-category-modal .category-selected em {
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

html[data-theme="dark"] .local-category-modal .category-selected em.has-template {
  background: var(--theme-success);
  color: var(--theme-success-text);
}

html[data-theme="dark"] .local-category-modal .category-error {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
  color: var(--theme-danger-text);
}

html[data-theme="dark"] .local-category-modal .category-loading {
  border-color: var(--theme-info-border);
  background: var(--theme-info);
  color: var(--theme-info-text);
}

.category-auto-collect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #d7e8ed;
  border-radius: 8px;
  background: #fbfefe;
}

.category-auto-collect div {
  display: grid;
  gap: 3px;
}

.category-auto-collect strong {
  color: #193943;
}

.category-auto-collect span {
  color: #607985;
  font-size: 12px;
  line-height: 1.45;
}

.attribute-drawer-mask {
  justify-content: flex-end;
}

.attribute-drawer {
  display: grid;
  width: min(1080px, calc(100vw - 270px));
  height: 100vh;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--theme-border-strong);
  background: var(--theme-surface);
  box-shadow: -14px 0 38px rgba(20, 48, 57, 0.18);
}

.attribute-drawer-head,
.attribute-drawer-toolbar,
.attribute-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface-raised);
}

.attribute-drawer-head h2 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 20px;
}

.attribute-drawer-head span,
.attribute-drawer-foot span {
  color: var(--theme-muted);
  font-size: 12px;
}

.attribute-drawer-toolbar label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
}

.attribute-drawer-toolbar label > span {
  color: var(--theme-text);
  font-weight: 900;
}

.drawer-preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drawer-preset-buttons button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 7px;
  background: var(--theme-control);
  color: var(--primary-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.attribute-drawer-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0;
  background: var(--theme-surface);
}

.attribute-drawer-tabs button {
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid var(--theme-border-strong);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  cursor: pointer;
  font-weight: 900;
}

.attribute-drawer-tabs button.active {
  border-color: var(--primary);
  background: var(--theme-control);
  color: var(--primary-dark);
}

.attribute-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  gap: 7px 8px;
  overflow: auto;
  padding: 10px 16px 18px;
}

.attribute-field-card {
  min-width: 0;
  min-height: 0;
  padding: 7px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface-raised);
}

.attribute-field-name {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.attribute-field-name strong {
  min-width: 0;
  overflow: hidden;
  color: var(--theme-text-strong);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribute-protected-badge {
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--theme-warning-border);
  border-radius: 5px;
  background: var(--theme-warning);
  color: var(--theme-warning-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}

.attribute-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.attribute-field-row input,
.attribute-field-row select {
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-control);
  color: var(--theme-text);
}

.attribute-field-row input:disabled,
.attribute-field-row select:disabled {
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
}

.attribute-multi-select {
  position: relative;
  min-width: 0;
  color: var(--theme-text);
}

.attribute-multi-select > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-control);
  cursor: pointer;
  list-style: none;
}

.attribute-multi-select > summary::-webkit-details-marker {
  display: none;
}

.attribute-multi-select > summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribute-multi-select > summary em {
  flex: 0 0 auto;
  color: var(--theme-muted);
  font-size: 10px;
  font-style: normal;
}

.attribute-multi-select.is-disabled > summary {
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  cursor: not-allowed;
}

.attribute-multi-options {
  position: absolute;
  z-index: 45;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  max-height: 220px;
  overflow: auto;
  padding: 5px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 7px;
  background: var(--theme-surface);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.attribute-multi-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
}

.attribute-multi-options label:hover {
  background: var(--theme-hover);
}

.attribute-multi-options label.is-disabled {
  color: var(--theme-muted);
  cursor: not-allowed;
}

.attribute-multi-options input {
  flex: 0 0 auto;
  width: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
}

.attribute-material-composition-options {
  position: absolute;
  z-index: 46;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  grid-template-columns: minmax(150px, .85fr) minmax(220px, 1.15fr);
  width: min(540px, calc(100vw - 48px));
  height: 300px;
  max-height: 300px;
  overflow: hidden;
  border: 1px solid var(--theme-border-strong);
  border-radius: 7px;
  background: var(--theme-surface);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.attribute-material-candidate-list {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 5px;
  border-right: 1px solid var(--theme-border);
}

.attribute-material-search {
  position: sticky;
  z-index: 1;
  top: -5px;
  padding: 5px 0 6px;
  background: var(--theme-surface);
}

.attribute-field-row .attribute-material-search input {
  width: 100%;
  min-height: 30px;
}

.attribute-material-search-empty {
  padding: 8px 6px;
  color: var(--theme-muted);
  font-size: 12px;
}

.attribute-material-candidate-list label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
}

.attribute-material-candidate-list label:hover {
  background: var(--theme-hover);
}

.attribute-material-candidate-list label.is-disabled {
  color: var(--theme-muted);
  cursor: not-allowed;
}

.attribute-material-candidate-list input {
  flex: 0 0 auto;
  width: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
}

.attribute-material-selected {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
}

.attribute-material-selected > strong {
  color: var(--theme-text-strong);
  font-size: 12px;
}

.attribute-material-selected-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.attribute-material-selected-row > span:first-child {
  overflow: hidden;
  color: var(--theme-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attribute-material-percent-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.attribute-field-row .attribute-material-percent-control input {
  width: 84px;
  min-height: 28px;
  text-align: right;
}

.attribute-material-percent-control em {
  color: var(--theme-muted);
  font-style: normal;
}

.attribute-material-empty,
.attribute-material-total {
  color: var(--theme-muted);
  font-size: 11px;
}

.attribute-material-total.is-valid {
  color: var(--theme-success-text);
}

.attribute-material-total.is-invalid,
.attribute-material-error {
  color: var(--theme-danger-text);
}

.attribute-material-error {
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .attribute-material-composition-options {
    grid-template-columns: minmax(0, 1fr);
    width: min(360px, calc(100vw - 32px));
    max-height: 420px;
    overflow: auto;
  }

  .attribute-material-candidate-list {
    max-height: 190px;
    border-right: 0;
    border-bottom: 1px solid var(--theme-border);
  }
}

.attribute-field-row .segmented {
  min-height: 30px;
}

.attribute-field-row .segmented button {
  min-height: 24px;
  padding: 0 7px;
  font-size: 11px;
}

.attribute-field-row .segmented button:disabled {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  cursor: not-allowed;
  opacity: 0.72;
}

.attribute-protected-note {
  display: block;
  margin-top: 5px;
  color: var(--theme-warning-text);
  font-size: 11px;
  line-height: 1.45;
}

.attribute-alert-note {
  display: block;
  margin-top: 5px;
  color: var(--theme-danger-text);
  font-size: 11px;
  line-height: 1.45;
}

.drawer-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 8px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  text-align: center;
}

.attribute-drawer-foot {
  border-top: 1px solid var(--theme-border);
  border-bottom: 0;
}

.field.template-field {
  gap: 7px;
}

.template-buttons-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.template-buttons-inline button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

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

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

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

.field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.field > span {
  color: #314852;
  font-weight: 900;
}

.help-dot {
  display: inline-grid;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  place-items: center;
  border: 1px solid #aec5ce;
  border-radius: 50%;
  color: #627982;
  cursor: help;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.checkbox-inline {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  color: #1f3d47;
  font-size: 13px;
  font-weight: 800;
}

.checkbox-inline input {
  width: 16px;
  height: 16px;
  accent-color: #0aa99f;
}

.checkbox-inline-help {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
}

.checkbox-inline-help > .interactive-help-tip-anchor {
  flex: 0 0 auto;
  margin-left: 0;
}

.field-title-with-help {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
}

.help-tip {
  position: relative;
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid #b8cbd3;
  border-radius: 50%;
  background: #fff;
  color: #607780;
  cursor: help;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.interactive-help-tip-anchor {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.required-field-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 16px;
  margin-left: 5px;
  padding: 0 4px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 4px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
  vertical-align: 1px;
}

/* 旧版 `.field span em` 专门把 em 画成圆形问号；必填标记必须明确覆盖它，避免“必填”和问号挤成一个圆点。 */
.field span em.required-field-mark {
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 16px;
  place-items: initial;
  border: 1px solid var(--theme-danger-border);
  border-radius: 4px;
  color: var(--theme-danger-text);
  cursor: default;
}

.required-field-mark + .interactive-help-tip-anchor {
  margin-left: 8px;
}

.te-label > .required-field-mark,
.douyin-v2-field-label > .required-field-mark,
.field-title-with-help > .required-field-mark {
  margin-left: 0;
}

.te-label > .required-field-mark + .interactive-help-tip-anchor,
.douyin-v2-field-label > .required-field-mark + .interactive-help-tip-anchor {
  margin-left: 3px;
}

.field-title-with-help > .required-field-mark + .interactive-help-tip-anchor {
  margin-left: 2px;
}

.required-field-mark + .interactive-help-tip-anchor .dye-help-dot,
.required-field-mark + .interactive-help-tip-anchor .te-help-dot {
  margin-left: 0;
}

.required-field-container.has-required-error :is(input, select, textarea, .plain-select, .path-input, .douyin-v2-readonly-path) {
  border-color: var(--theme-danger-border) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger-border) 24%, transparent);
}

.required-field-container.has-required-error :is(.yd-segmented, .dye-segmented, .douyin-v2-check-row, .dye-inline-pair, .check-row) {
  border-radius: 5px;
  outline: 2px solid color-mix(in srgb, var(--theme-danger-border) 42%, transparent);
  outline-offset: 2px;
}

.required-field-error {
  display: block;
  margin-top: 5px;
  color: var(--theme-danger-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

html[data-theme] .required-field-error {
  color: var(--theme-danger-text);
}

.dye-validation-summary {
  padding: 9px 11px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 6px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 13px;
  font-weight: 700;
}

.interactive-help-tip {
  display: inline-grid;
  width: 17px;
  height: 17px;
  padding: 0;
  place-items: center;
  border: 1px solid #b8cbd3;
  border-radius: 50%;
  background: var(--theme-control, #fff);
  color: var(--theme-muted, #607780);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  font-family: inherit;
  line-height: 1;
}

.interactive-help-tip:hover,
.interactive-help-tip.is-open,
.interactive-help-tip:focus-visible {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--theme-hover, #edf9f8);
  outline: none;
}

.interactive-help-tip:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.interactive-help-tip-panel {
  position: fixed;
  z-index: 12000;
  display: block;
  width: min(340px, calc(100vw - 24px));
  max-height: min(320px, calc(100vh - 24px));
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--theme-border-strong, #bed4dc);
  border-radius: 7px;
  background: var(--theme-surface-raised, #fff);
  box-shadow: 0 12px 32px rgba(36, 57, 65, 0.16);
  color: var(--theme-text, #405963);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
}

.interactive-help-tip-panel :is(a, button) {
  cursor: pointer;
}

.interactive-help-tip-action {
  display: block;
  width: fit-content;
  margin-top: 8px;
  padding: 4px 8px;
  border: 1px solid var(--theme-success-border);
  border-radius: 4px;
  background: var(--theme-success);
  color: var(--theme-success-text);
  font: inherit;
}

.interactive-help-tip-action:hover,
.interactive-help-tip-action:focus-visible {
  border-color: var(--theme-success-text);
  outline: none;
}

.field.wide {
  grid-column: span 2;
}

.field.full {
  grid-column: 1 / -1;
}

.timing-custom-field {
  grid-column: span 2;
}

.timing-custom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(112px, 1fr));
  gap: 8px;
  padding: 9px;
  border: 1px solid #d9e9ee;
  border-radius: 7px;
  background: #f7fbfc;
}

.timing-custom-grid label {
  display: grid;
  gap: 5px;
  color: #3e5661;
  font-size: 12px;
  font-weight: 800;
}

.timing-custom-grid .plain-input.number {
  width: 100%;
}

.select-value,
.readonly-value,
.path-input,
.tag-input,
.number-input,
.text-input,
.plain-select,
.plain-input {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: #243d48;
  overflow: hidden;
}

.plain-input {
  width: min(100%, 360px);
  outline: 0;
}

.plain-select {
  width: min(100%, 420px);
  outline: 0;
}

.plain-input.number {
  width: 140px;
}

.plain-input.compact-number {
  width: 82px;
  min-height: 32px;
  font-weight: 800;
}

.inline-inputs.no-wrap {
  flex-wrap: nowrap;
}

.multi-select-dropdown {
  position: relative;
  width: min(100%, 520px);
}

.multi-select-dropdown summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: #243d48;
  cursor: pointer;
  list-style: none;
}

.multi-select-dropdown summary::-webkit-details-marker {
  display: none;
}

.multi-select-dropdown summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select-dropdown summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.multi-select-panel {
  position: absolute;
  z-index: 20;
  left: 0;
  top: calc(100% + 5px);
  min-width: 100%;
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid #cfe2e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 28px rgba(21, 48, 59, 0.14);
}

.multi-select-option {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 2px 4px;
  color: #243d48;
}

.table-tools-page .field > input:not([type="checkbox"]):not([type="radio"]),
.table-tools-page .field > select {
  min-height: 34px;
  width: min(100%, 360px);
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  outline: 0;
  background: #fff;
  color: #243d48;
  font: inherit;
  font-weight: 600;
}

.table-tools-page .field > select {
  width: min(100%, 420px);
}

.table-tools-page .field > input[type="number"] {
  width: 140px;
}

.table-tools-page .field > input:not([type="checkbox"]):not([type="radio"]):focus,
.table-tools-page .field > select:focus {
  border-color: #76c9c4;
  box-shadow: 0 0 0 3px rgba(10, 169, 159, 0.12);
}

.table-tools-page .field > input::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.price-source-field {
  grid-column: span 2;
  gap: 8px;
}

.price-source-options {
  display: grid;
  width: fit-content;
  max-width: 100%;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid #e8f0f3;
}

.price-source-row {
  display: grid;
  grid-template-columns: 18px auto 82px 18px;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  color: #203943;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

.price-source-radio-label {
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}

.price-source-row em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.price-source-row input[type="radio"] {
  margin: 0;
}

.price-source-row input:disabled {
  background: #edf3f5;
  color: #9aa9b0;
  cursor: not-allowed;
}

.local-sales-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.local-sales-base-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  width: 100%;
  border: 1px solid #e0ebef;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.local-sales-base-card-title {
  display: flex;
  align-items: flex-start;
  padding: 12px 10px;
  border-right: 1px solid #e4edf1;
  color: #1d3944;
  font-size: 13px;
  font-weight: 900;
  background: #fbfefe;
}

.local-sales-base-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 12px 28px;
  align-items: center;
  margin: 0;
  padding: 8px 12px;
  background: #f4f7f9;
}

.local-sales-base-grid .field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.local-sales-base-grid .field > span,
.local-sales-base-grid .field-title-with-help {
  flex: 0 0 auto;
  white-space: nowrap;
}

.local-sku-file-field {
  min-width: 0;
}

.local-sku-file-field .plain-input {
  width: 168px;
  max-width: 100%;
}

.local-stock-field {
  min-width: 0;
}

.local-stock-field .plain-input {
  width: 72px;
}

.local-price-source-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  min-width: 0;
  grid-column: auto;
}

.local-price-source-field .price-source-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 0;
  border-top: 0;
}

.local-price-source-field .price-source-row {
  grid-template-columns: 16px max-content 72px 18px;
  gap: 7px;
  font-size: 13px;
}

.local-price-source-field .plain-input.compact-number {
  width: 72px;
  text-align: center;
}

.local-sales-attribute-shell {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  border: 1px solid #e0ebef;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.local-sales-attribute-label {
  display: flex;
  align-items: flex-start;
  padding: 14px 10px;
  border-right: 1px solid #e4edf1;
  color: #1d3944;
  font-size: 13px;
  font-weight: 900;
  background: #fbfefe;
}

.local-sales-attribute-body {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px 12px 13px;
  background: #f4f7f9;
}

.local-sales-support-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) minmax(260px, 1fr) minmax(300px, 1.05fr);
  gap: 10px 12px;
  align-items: start;
  max-width: none;
  border-top: 1px solid #e7edf2;
  padding-top: 10px;
}

.local-sales-support-grid.local-sales-support-grid-four {
  grid-template-columns: minmax(185px, 0.9fr) minmax(250px, 1.2fr) minmax(195px, 1fr) minmax(205px, 1fr);
}

.local-sales-support-grid-four .segmented button {
  padding-inline: 7px;
  font-size: 12px;
}

.local-detail-workflow-control {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.local-detail-workflow-control .plain-select {
  flex: 1 1 220px;
  min-width: 0;
}

.agent-assistant-open .local-listing-page .form-grid.cols-3,
.agent-assistant-open .local-listing-page .local-sales-support-grid.local-sales-support-grid-four {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.local-sales-support-grid .field {
  gap: 6px;
}

.sales-attribute-list-field {
  grid-column: 1 / -1;
  gap: 8px;
  min-width: 0;
}

.sales-attribute-list-field + .sales-attribute-list-field {
  border-top: 1px solid #e7edf2;
  padding-top: 9px;
}

.sales-attribute-field-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #102f3a;
  font-weight: 800;
  line-height: 1.25;
}

.sales-attribute-field-head em {
  color: #6f848c;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

.sales-attribute-field-head b {
  border-radius: 4px;
  padding: 2px 6px;
  background: #fff2df;
  color: #f06b18;
  font-size: 12px;
  line-height: 1.2;
}

.sales-attribute-notice {
  width: min(100%, 1040px);
  border-radius: 7px;
  padding: 7px 10px;
  background: #eef4ff;
  color: #4c6472;
  font-size: 13px;
  line-height: 1.45;
}

.sales-attribute-taobao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px 20px;
  align-items: start;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.sales-attribute-row {
  display: grid;
  grid-template-columns: minmax(118px, 1fr) minmax(104px, 132px) 24px;
  gap: 7px;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.sales-attribute-list-field.with-image-slot .sales-attribute-row {
  grid-template-columns: 28px minmax(118px, 1fr) minmax(104px, 132px) 24px;
}

.sales-attribute-list-field.without-note .sales-attribute-row {
  grid-template-columns: minmax(118px, 1fr) 24px;
}

.sales-attribute-list-field.with-image-slot.without-note .sales-attribute-row {
  grid-template-columns: 28px minmax(118px, 1fr) 24px;
}

.sales-attribute-image-slot {
  position: relative;
  width: 26px;
  height: 26px;
  border: 1px dashed #d6e1e6;
  border-radius: 6px;
  background: #fbfdfe;
}

.sales-attribute-image-slot::before,
.sales-attribute-image-slot::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1px;
  background: #aebdc5;
}

.sales-attribute-image-slot::before {
  top: 10px;
}

.sales-attribute-image-slot::after {
  top: 16px;
  transform: rotate(-28deg);
}

.sales-attribute-image-slot.muted {
  opacity: 0.45;
}

.sales-attribute-name-input {
  width: 100%;
  min-width: 0;
  height: 32px;
  min-height: 32px;
}

.sales-attribute-note-placeholder {
  display: inline-flex;
  align-items: center;
  height: 32px;
  min-width: 0;
  border: 1px solid #d8e3e8;
  border-radius: 6px;
  padding: 0 9px;
  color: #98a7ad;
  background: #fafcfd;
  font-size: 13px;
}

.sales-attribute-delete,
.sales-attribute-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #7b8e97;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.compact-add-button {
  min-width: 44px;
  height: 36px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.sales-attribute-delete:hover {
  border-color: #f5c2c7;
  background: #fff2f2;
  color: #c8393e;
}

.sales-attribute-plus {
  border-color: #cddcf8;
  background: #f5f8ff;
  color: #2763d7;
}

.sales-attribute-plus:hover {
  border-color: #8fb1ff;
  background: #edf4ff;
}

.sales-attribute-row.add-row .sales-attribute-name-input {
  background: #fbfdff;
}

.sales-spec-shared-panel {
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  container-name: sales-spec;
}

.sales-spec-shared-panel .sales-spec-base-grid {
  gap: 8px 22px;
}

.sales-spec-shared-panel .sales-spec-edit-mode {
  flex: 0 1 auto;
}

.sales-spec-shared-panel .local-sku-file-field .plain-input {
  width: 144px;
}

.sales-spec-shared-panel .sales-attribute-taobao-grid {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 8px 16px;
}

.sales-spec-shared-panel .sales-attribute-row {
  max-width: 100%;
}

.sales-spec-shared-panel .sales-spec-support-grid {
  grid-template-columns: repeat(4, minmax(190px, 1fr));
}

.sales-spec-shared-panel .sales-spec-support-grid.is-edit {
  grid-template-columns: repeat(5, minmax(176px, 1fr));
}

.sales-spec-shared-panel .sales-spec-support-grid .field {
  min-width: 0;
}

.sales-spec-shared-panel .sales-spec-segmented {
  min-height: 32px;
}

.sales-spec-shared-panel .sales-spec-segmented button {
  min-height: 24px;
  padding: 0 8px;
  font-size: 12px;
}

.sales-spec-shared-panel .sales-spec-check {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  color: #294750;
  font-size: 13px;
  cursor: pointer;
}

.sales-spec-shared-panel .sales-spec-check input {
  margin: 0;
}

.sales-spec-shared-panel .sales-spec-image-rule small,
.sales-spec-shared-panel .sales-spec-code-rule small {
  color: #60767f;
  font-size: 12px;
  line-height: 1.45;
}

.sales-spec-help-content {
  display: grid;
  gap: 8px;
  color: var(--theme-text-primary);
  font-size: 13px;
  line-height: 1.55;
}

.sales-spec-help-content strong,
.sales-spec-help-content p {
  margin: 0;
}

.sales-spec-help-content ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
}

.sales-spec-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sales-spec-help-actions a,
.sales-spec-help-actions button {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  padding: 0 9px;
  background: var(--theme-control-bg);
  color: var(--theme-accent-text);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.sales-spec-help-actions a:hover,
.sales-spec-help-actions button:hover {
  border-color: var(--theme-accent-border);
  background: var(--theme-accent-soft);
}

@media (max-width: 1320px) {
  .sales-spec-shared-panel .sales-spec-support-grid,
  .sales-spec-shared-panel .sales-spec-support-grid.is-edit {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
  }
}

@media (max-width: 1060px) {
  .sales-spec-shared-panel .sales-attribute-taobao-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .sales-spec-shared-panel .sales-spec-support-grid,
  .sales-spec-shared-panel .sales-spec-support-grid.is-edit {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 1120px) {
  .local-sales-base-grid {
    gap: 10px 18px;
  }

  .local-sales-layout {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .local-sales-attribute-shell {
    grid-template-columns: 86px minmax(0, 1fr);
    width: 100%;
  }

  .local-sales-support-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .local-sales-support-grid.local-sales-support-grid-four {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .local-sales-base-grid,
  .local-sales-base-card,
  .local-sales-attribute-shell,
  .local-sales-support-grid,
  .sales-attribute-taobao-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .local-sales-base-card-title,
  .local-sales-attribute-label {
    border-right: 0;
    border-bottom: 1px solid #e4edf1;
    padding: 10px 12px;
  }

  .sales-attribute-row,
  .sales-attribute-list-field.with-image-slot .sales-attribute-row {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .sales-attribute-image-slot,
  .sales-attribute-delete,
  .sales-attribute-plus {
    justify-self: start;
  }

  .local-sales-support-grid.local-sales-support-grid-four {
    grid-template-columns: 1fr;
  }

  .sales-spec-shared-panel .sales-attribute-taobao-grid,
  .sales-spec-shared-panel .sales-spec-support-grid,
  .sales-spec-shared-panel .sales-spec-support-grid.is-edit {
    grid-template-columns: 1fr;
  }

  .local-detail-workflow-control {
    align-items: stretch;
    flex-direction: column;
  }

  .local-detail-workflow-control .plain-select {
    flex-basis: auto;
    width: 100%;
  }
}

@container sales-spec (max-width: 900px) {
  .sales-spec-shared-panel .sales-attribute-taobao-grid,
  .sales-spec-shared-panel .sales-spec-support-grid,
  .sales-spec-shared-panel .sales-spec-support-grid.is-edit {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@container sales-spec (max-width: 620px) {
  .sales-spec-shared-panel .local-sales-base-card,
  .sales-spec-shared-panel .local-sales-attribute-shell {
    grid-template-columns: 1fr;
  }

  .sales-spec-shared-panel .local-sales-base-card-title,
  .sales-spec-shared-panel .local-sales-attribute-label {
    border-right: 0;
    border-bottom: 1px solid var(--theme-border);
    padding: 8px 10px;
  }

  .sales-spec-shared-panel .local-sales-base-grid .field {
    width: 100%;
    flex-wrap: wrap;
  }

  .sales-spec-shared-panel .local-sales-attribute-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-spec-shared-panel .local-price-source-field {
    align-items: flex-start;
    flex-direction: column;
  }

  .sales-spec-shared-panel .local-price-source-field .price-source-options {
    width: 100%;
  }

  .sales-spec-shared-panel .local-price-source-field .price-source-row {
    width: 100%;
    grid-template-columns: 16px minmax(0, 1fr) 64px 18px;
  }

  .sales-spec-shared-panel .price-source-radio-label {
    white-space: normal;
  }

  .sales-spec-shared-panel .sales-attribute-taobao-grid,
  .sales-spec-shared-panel .sales-spec-support-grid,
  .sales-spec-shared-panel .sales-spec-support-grid.is-edit {
    grid-template-columns: minmax(0, 1fr);
  }
}

.select-value.compact {
  width: min(100%, 260px);
}

.select-value span:first-child,
.path-input strong,
.readonly-value span,
.text-input span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.path-input {
  padding-right: 4px;
}

.local-root-path-input strong {
  flex: 1 1 150px;
}

.path-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

.path-input input::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.path-input button {
  flex: 0 0 auto;
  height: 26px;
  min-width: 68px;
  padding: 0 10px;
  border: 1px solid rgba(11, 169, 167, 0.38);
  border-radius: 6px;
  background: linear-gradient(180deg, #fbffff 0%, #e9f8f7 100%);
  color: var(--primary-dark);
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.path-input button:hover {
  border-color: rgba(11, 169, 167, 0.7);
  background: linear-gradient(180deg, #ffffff 0%, #dff5f4 100%);
  box-shadow: 0 2px 6px rgba(11, 169, 167, 0.12);
}

.path-input button:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.path-input button:focus-visible {
  outline: 2px solid rgba(11, 169, 167, 0.22);
  outline-offset: 2px;
}

.path-input button:disabled {
  cursor: not-allowed;
  border-color: rgba(148, 163, 184, 0.36);
  background: #f1f5f9;
  color: #94a3b8;
  box-shadow: none;
}

.table-tools-page .path-input input:disabled,
.table-tools-page input:disabled,
.table-tools-page select:disabled {
  cursor: not-allowed;
  background: #f1f5f9;
  color: #94a3b8;
}

.tag-input button,
.inline-actions button {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 9px;
  border-radius: 5px;
  background: #edf7f7;
  color: var(--primary-dark);
}

.video-clip-page {
  font-size: 13px;
}

.video-clip-page .page-grid {
  gap: 8px;
}

.video-clip-page .panel.dense {
  padding: 10px 12px;
}

.video-clip-page .panel-title {
  margin-bottom: 7px;
  padding-bottom: 6px;
}

.video-clip-page .panel-title h2 {
  font-size: 17px;
}

.video-clip-page .panel-title p {
  font-size: 12px;
  line-height: 1.38;
}

.video-clip-page .form-grid.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: start;
}

.video-clip-page .form-grid.compact > .field {
  flex: 0 1 200px;
  min-width: 0;
  gap: 4px;
}

.video-clip-page .form-grid.compact > .field:has(> .path-input) {
  flex: 1 1 290px;
}

.video-clip-page .form-grid.compact > .field.font-path-field {
  flex: 1 1 390px;
  max-width: 430px;
}

.video-clip-page .form-grid.compact > .field:has(> .template-row) {
  flex: 0 1 560px;
}

.video-clip-page .form-grid.compact > .field:has(> .segmented) {
  flex: 0 1 224px;
}

.video-clip-page .form-grid.compact > .field.major-choice-field {
  padding: 7px 8px;
  border: 1px solid #8bded9;
  border-radius: 7px;
  background: #eefdfb;
  box-shadow: inset 3px 0 0 var(--primary);
}

.video-clip-page .field.major-choice-field .field-title-with-help {
  color: #007b79;
}

.video-clip-page .field.major-choice-field .segmented {
  border-color: #77d7d2;
  background: #e3f8f6;
}

.video-clip-page .form-grid.compact > .field:has(> .segmented.number) {
  flex: 0 0 146px;
}

.video-clip-page .form-grid.compact > .field:has(> .mini-field),
.video-clip-page .form-grid.compact > .field:has(> .switch-row),
.video-clip-page .form-grid.compact > .field:has(> input[type="number"]) {
  flex: 0 0 112px;
}

.video-clip-page .form-grid.compact > .field:has(> .compact-row) {
  flex: 0 1 198px;
}

.video-clip-page .form-grid.compact > .field:has(> .check-row) {
  flex: 1 1 480px;
}

.video-clip-page .form-grid.compact > .field.full,
.video-clip-page .form-grid.compact > .field:has(> .task-table),
.video-clip-page .form-grid.compact > .empty-note.full {
  flex-basis: 100%;
}

.video-clip-page .form-grid.compact > .field.full:has(> .check-row) {
  flex: 1 1 520px;
  max-width: calc(50% - 4px);
}

.video-clip-page .form-grid.compact > .field.full:has(> .check-row) .check-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, max-content));
  align-items: center;
  gap: 3px 10px;
}

.video-clip-page .form-grid.compact > .field.full:has(> .check-row) .check-row label {
  min-height: 20px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .video-clip-page .form-grid.compact > .field.full:has(> .check-row) {
    flex-basis: 100%;
    max-width: none;
  }
}

.video-clip-page .field-title-with-help {
  font-size: 12px;
  line-height: 1.25;
}

.video-clip-page .help-dot {
  width: 15px;
  height: 15px;
  font-size: 10px;
}

.video-source-scan-status {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(320px, 48vw);
  gap: 5px;
  margin-left: 3px;
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-source-scan-status i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--theme-muted);
}

.video-source-scan-status.scanning i {
  width: 10px;
  height: 10px;
  border: 2px solid var(--theme-border-strong);
  border-top-color: var(--primary);
  background: transparent;
  animation: video-clip-spin 720ms linear infinite;
}

.video-source-scan-status.ready {
  color: var(--theme-success-text);
}

.video-source-scan-status.ready i {
  background: var(--theme-success-text);
  box-shadow: 0 0 0 2px var(--theme-success);
}

.video-source-scan-status.warning {
  color: var(--theme-warning-text);
}

.video-source-scan-status.warning i {
  background: var(--theme-warning-text);
}

.video-source-scan-status.error {
  color: var(--theme-danger-text);
}

.video-source-scan-status.error i {
  background: var(--theme-danger-text);
}

.video-clip-launch-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(14, 31, 37, 0.38);
  backdrop-filter: blur(2px);
}

.video-clip-launch-dialog {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  width: min(470px, 100%);
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 8px;
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: 0 20px 54px rgba(8, 26, 32, 0.24);
}

.video-clip-launch-dialog.success {
  border-color: var(--theme-success-border);
}

.video-clip-launch-dialog.error {
  border-color: var(--theme-danger-border);
}

.video-clip-launch-indicator {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-success);
  color: var(--theme-success-text);
  font-size: 20px;
  font-weight: 800;
}

.video-clip-launch-indicator.busy {
  width: 34px;
  height: 34px;
  margin: 2px;
  border: 3px solid var(--theme-border);
  border-top-color: var(--primary);
  background: transparent;
  animation: video-clip-spin 760ms linear infinite;
}

.video-clip-launch-dialog.error .video-clip-launch-indicator {
  background: var(--theme-danger);
  color: var(--theme-danger-text);
}

.video-clip-launch-copy {
  min-width: 0;
}

.video-clip-launch-copy h2 {
  margin: 1px 0 5px;
  color: var(--theme-text-strong);
  font-size: 18px;
}

.video-clip-launch-copy p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.55;
}

.video-clip-launch-actions {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

@keyframes video-clip-spin {
  to { transform: rotate(360deg); }
}

.video-clip-resource-actions,
.video-clip-help-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.video-clip-resource-actions {
  margin-top: 6px;
}

.video-clip-resource-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  text-decoration: none;
  white-space: nowrap;
}

.video-clip-validation-summary {
  width: fit-content;
  max-width: 100%;
}

.video-clip-page .field > input:not([type="checkbox"]):not([type="radio"]),
.video-clip-page .field > select,
.video-clip-page .mini-field,
.video-clip-page .compact-row input {
  min-height: 28px;
  width: min(100%, 220px);
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  outline: 0;
  background: #fff;
  color: #243d48;
  font: inherit;
  font-weight: 600;
}

.video-clip-page .field > select {
  width: min(100%, 230px);
}

.video-clip-page .field > input[type="number"] {
  width: 64px;
}

.video-clip-page .field > input:not([type="checkbox"]):not([type="radio"]):focus,
.video-clip-page .field > select:focus,
.video-clip-page .compact-row input:focus {
  border-color: #76c9c4;
  box-shadow: 0 0 0 3px rgba(10, 169, 159, 0.12);
}

.video-clip-page .field.font-path-field > input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
}

.video-clip-page .template-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  max-width: 100%;
}

.video-clip-page .template-row .plain-select {
  flex: 0 1 155px;
  min-width: 140px;
}

.video-clip-page .subsection {
  display: grid;
  gap: 6px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #edf2f5;
}

.video-clip-page .subsection h3 {
  margin: 0;
  color: #1f3c46;
  font-size: 13px;
}

.video-clip-page .summary-note,
.video-clip-page .empty-note {
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid #d7e8ee;
  border-radius: 7px;
  background: #f7fbfc;
  color: #49636d;
  line-height: 1.45;
}

.video-clip-page .preset-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 7px;
}

.video-clip-page .preset-card {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid #d8e6ec;
  border-radius: 7px;
  background: #fbfdfe;
  color: #425d67;
  text-align: left;
}

.video-clip-page .preset-card strong {
  color: #213d47;
  font-size: 13px;
}

.video-clip-page .preset-card span {
  font-size: 11px;
  line-height: 1.35;
}

.video-clip-page .preset-card.selected {
  border-color: #65c7c0;
  background: #eefafa;
  box-shadow: 0 8px 18px rgba(8, 169, 164, 0.12);
}

.video-clip-page .mini-field {
  display: inline-flex;
  width: fit-content;
  min-width: 76px;
  padding-right: 6px;
  gap: 4px;
}

.video-clip-page .mini-field input {
  width: 48px;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
}

.video-clip-page .mini-field span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.video-clip-page .compact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.video-clip-page .compact-row input {
  width: 54px;
}

.video-clip-page .readonly-value {
  width: fit-content;
  max-width: 100%;
}

.video-clip-page .path-input {
  min-height: 28px;
}

.video-clip-page .tag-input button,
.video-clip-page .inline-actions button {
  height: 22px;
  padding: 0 6px;
  font-size: 12px;
}

.video-clip-page .path-input button {
  height: 26px;
  min-width: 66px;
  padding: 0 9px;
  font-size: 12px;
}

.video-clip-page .segmented {
  width: fit-content;
  max-width: 100%;
}

.video-clip-page .segmented button {
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
}

.video-clip-page .check-row {
  gap: 4px 10px;
}

.video-clip-page .check-row label {
  min-height: 22px;
  font-size: 12px;
}

.video-clip-page .switch-row {
  min-height: 28px;
  gap: 5px;
}

.video-clip-page .switch-row strong {
  font-size: 12px;
}

.video-clip-page .switch-row em {
  font-size: 11px;
}

.tag-input {
  justify-content: flex-start;
  flex-wrap: wrap;
  height: auto;
  min-height: 34px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.tag-input input {
  min-width: 160px;
  flex: 1 1 180px;
  border: 0;
  outline: 0;
  color: #243d48;
  background: transparent;
}

.tag-input b,
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 5px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  font-weight: 900;
}

.pill.blue {
  color: #1d5f9e;
  background: var(--blue-soft);
}

.pill.warn {
  color: var(--warning);
  background: var(--warning-soft);
}

.chevron {
  color: var(--soft-text);
  font-weight: 900;
}

.text-button {
  background: transparent;
  color: var(--primary-dark);
  font-weight: 900;
}

.app-header .text-button {
  color: #fff;
}

.ghost-button,
.plain-button,
.secondary-button,
.mini-button,
.income-button,
.icon-button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: #29434d;
}

.plain-button {
  border-color: transparent;
  color: var(--muted);
}

.secondary-button {
  border-color: #b7dfe8;
  background: #eef8fb;
  color: #147489;
  font-weight: 900;
}

.primary-button {
  min-height: 36px;
  padding: 0 20px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(8, 169, 164, 0.22);
}

.income-button {
  border-color: #ffd08a;
  background: #fff4df;
  color: #8b4b00;
  font-weight: 900;
}

.icon-button {
  width: 32px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.mini-button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.danger-light-button,
.danger-light {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #f2b6b6;
  border-radius: 6px;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 900;
}

.segmented {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  padding: 3px;
  border: 1px solid #d7e4e9;
  border-radius: 7px;
  background: #edf3f5;
  flex-wrap: wrap;
}

.segmented button {
  min-height: 26px;
  padding: 0 12px;
  border-radius: 5px;
  background: transparent;
  color: #47616c;
  white-space: nowrap;
}

.segmented button.selected,
.segmented button.active {
  background: var(--primary);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 2px 7px rgba(8, 169, 164, 0.24);
}

.segmented.number button {
  min-width: 34px;
}

.segmented.disabled,
.disabled-block {
  opacity: 0.48;
}

.switch {
  width: 36px;
  height: 20px;
  border-radius: 99px;
  background: #c6d3d9;
  position: relative;
  flex: 0 0 auto;
}

.switch::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}

.switch.on {
  background: var(--primary);
}

.switch.disabled,
.switch:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.switch.on::after {
  transform: translateX(16px);
}

.switch-row {
  flex-wrap: wrap;
}

.switch-row.disabled strong,
.switch-row.disabled em {
  color: #60747e;
}

.switch-row strong {
  font-weight: 900;
}

.switch-row em {
  color: var(--soft-text);
  font-size: 12px;
  font-style: normal;
}

.radio-group {
  flex-wrap: wrap;
  gap: 12px;
}

.radio-group.vertical {
  display: grid;
  align-items: start;
  gap: 8px;
}

.radio-group label,
.check-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2d454f;
}

.radio-group label,
.check-row label,
.inline-check,
.inline-checkbox,
.checkbox-inline,
.compact-checkbox,
.price-source-radio-label {
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  flex: 0 0 auto;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  flex: 0 0 auto;
  color: var(--muted);
  line-height: 1.45;
}

.inline-inputs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.growth-shop-slot-row {
  margin-top: 6px;
}

.growth-slot-input {
  width: 92px;
  min-height: 32px;
  font-weight: 600;
}

.check-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 14px;
}

.action-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.action-footer > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.action-footer strong {
  color: var(--text);
  font-size: 14px;
}

.action-footer span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--primary);
}

.helper-box {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px dashed #cfe0e6;
  border-radius: 7px;
  background: #f8fbfc;
}

.logic-box {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d9eaee;
  border-radius: 7px;
  background: #fbfdfe;
}

.logic-box strong {
  color: #263f49;
}

.logic-box p {
  color: var(--muted);
  line-height: 1.45;
}

.inline-note {
  color: var(--muted);
  line-height: 1.45;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}

.summary-grid div {
  display: grid;
  align-content: center;
  min-height: 58px;
  gap: 4px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
}

.summary-grid div:last-child {
  border-right: 0;
}

.summary-grid b {
  font-size: 15px;
}

.summary-grid span {
  color: var(--soft-text);
  font-size: 12px;
}

.task-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.task-table th,
.task-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e8eff2;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.task-table th {
  background: #f1f6f8;
  color: #3a515c;
  font-weight: 900;
}

.task-table tr:last-child td {
  border-bottom: 0;
}

.task-table .wrap {
  white-space: normal;
  min-width: 180px;
}

.status-ok,
.status-warn,
.status-idle,
.status-run {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 7px;
  border-radius: 99px;
  font-weight: 900;
}

.status-ok {
  color: #0b7a52;
  background: #e7f8f0;
}

.status-warn {
  color: var(--warning);
  background: var(--warning-soft);
}

.status-run {
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.status-idle {
  color: #647985;
  background: #eef3f5;
}

.notice {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #d8edf1;
  border-radius: 7px;
  background: #f7fbfc;
  color: #486875;
}

.result-list {
  display: grid;
  gap: 8px;
}

.result-card {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid #dfeaf0;
  border-radius: 7px;
  background: #fbfdfe;
}

.result-card-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.result-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: #243f4a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-chip {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #edf6f7;
  color: #1d6671;
  font-size: 12px;
  font-weight: 900;
}

.status-chip.success {
  background: #e5f8ef;
  color: #087653;
}

.status-chip.danger {
  background: #fff0eb;
  color: #b83f2c;
}

.result-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.result-meta-grid div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border-radius: 6px;
  background: #f3f8fa;
}

.result-meta-grid span {
  color: var(--muted);
  font-size: 12px;
}

.result-meta-grid b {
  min-width: 0;
  overflow: hidden;
  color: #27434e;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-error {
  margin: 0;
  padding: 8px;
  border-radius: 6px;
  background: #fff7f3;
  color: #a33a2a;
  line-height: 1.5;
}

.result-row,
.empty-cell {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid #dfeaf0;
  border-radius: 7px;
  background: #fbfdfe;
}

.result-row span {
  min-width: 0;
  overflow: hidden;
  color: #28444f;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-row small,
.empty-cell {
  color: var(--muted);
}

.dependency-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dependency-grid div {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid #d8e6ec;
  border-radius: 7px;
  background: #fbfdfe;
}

.dependency-grid b {
  color: #243e49;
}

.dependency-grid span {
  color: var(--muted);
  line-height: 1.35;
}

.dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: var(--soft-text);
}

.dot.ok {
  background: #16b36e;
}

.dot.paused {
  background: #e59d21;
  box-shadow: 0 0 0 4px #fff3d9;
}

.dot.failed {
  background: #d94848;
  box-shadow: 0 0 0 4px #ffe3e3;
}

.dot.running {
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.module-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid #cde3e9;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
  box-shadow: var(--shadow);
}

.module-hero strong {
  font-size: 15px;
}

.module-hero p {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.status-card {
  min-height: 62px;
  padding: 10px;
  border: 1px solid #d9e7ed;
  border-radius: 7px;
  background: #fbfdfe;
}

.status-card b {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.status-card span {
  color: var(--muted);
  line-height: 1.35;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(220px, 1.1fr) minmax(260px, 1.4fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #e8eff2;
}

.field-row.header {
  color: #3a515c;
  background: #f1f6f8;
  font-weight: 900;
}

.field-row:last-child {
  border-bottom: 0;
}

.config-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.masked-code {
  font-family: Consolas, "Courier New", monospace;
  color: #25454f;
  background: #f0f5f7;
  border-radius: 5px;
  padding: 3px 6px;
}

.route-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.route-card {
  min-height: 116px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 11px;
  border: 1px solid #d9e8ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.route-card.selected {
  border-color: #77c9c6;
  background: #f0fbfa;
  box-shadow: 0 8px 18px rgba(8, 128, 124, 0.1);
}

.route-card strong {
  color: #263f49;
}

.route-card p {
  color: var(--muted);
  line-height: 1.42;
}

.title-guide-page {
  display: grid;
  gap: 12px;
}

.title-guide-page .topbar {
  margin-bottom: 0;
  padding: 10px 14px;
}

.title-guide-page .topbar h1 {
  font-size: 22px;
}

.title-guide-page .topbar p {
  margin-top: 3px;
  line-height: 1.35;
}

.title-dense-page {
  gap: 8px;
}

.title-guide-page .panel-title {
  margin-bottom: 8px;
  padding-bottom: 7px;
}

.title-guide-page .panel-title h2 {
  font-size: 16px;
}

.title-guide-page .panel-title p {
  margin-top: 2px;
  line-height: 1.35;
}

.title-guide-page .field {
  gap: 4px;
}

.title-guide-page .field-label-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.title-guide-page .field-label-text {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.title-guide-page .field > span,
.title-guide-page .field-title-with-help {
  font-size: 12px;
}

.title-guide-page .plain-input,
.title-guide-page .plain-select,
.title-guide-page .path-input {
  min-height: 30px;
  padding: 0 8px;
}

.title-guide-page .path-input {
  gap: 6px;
}

.title-guide-page .path-input button,
.title-guide-page .ghost-button,
.title-guide-page .secondary-button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 12px;
}

.title-guide-page .title-mini-clear {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 7px;
  font-size: 11px;
}

.title-guide-page .primary-button {
  min-height: 32px;
  padding: 0 14px;
}

.title-guide-page .segmented {
  min-height: 30px;
  padding: 2px;
}

.title-guide-page .segmented {
  flex-wrap: nowrap;
}

.title-guide-page .segmented button {
  min-height: 24px;
  padding: 0 9px;
  font-size: 12px;
}

.title-compact-panel {
  padding: 10px 12px;
}

.title-guide-page .top-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.strong-field-label,
.title-node-label {
  font-weight: 700;
}

.title-workflow-select {
  min-width: 0;
  width: 100%;
  font-weight: 700;
}

.title-category-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #c6d8de;
  border-radius: 6px;
  background: #fff;
  color: #263f49;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.title-category-picker:hover,
.title-category-picker:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10, 169, 159, 0.12);
  outline: 0;
}

.title-category-picker span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-category-picker strong {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 12px;
}

.title-field-map-grid {
  grid-template-columns: repeat(8, minmax(74px, 104px));
  justify-content: start;
  margin-top: 8px;
}

.title-field-map-grid .plain-input {
  width: 100%;
}

.title-bulk-core-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}

.title-bulk-core-grid .path-input {
  width: 100%;
}

.title-bulk-core-grid .plain-input.number {
  width: 100%;
}

.title-bulk-core-grid > .field:nth-child(1) {
  grid-column: span 4;
}

.title-bulk-core-grid > .field:nth-child(2),
.title-bulk-core-grid > .field:nth-child(4) {
  grid-column: span 3;
}

.title-bulk-core-grid > .field:nth-child(3) {
  grid-column: span 5;
}

.title-bulk-core-grid > .field:nth-child(5) {
  grid-column: span 2;
}

.title-bulk-core-grid > .field:nth-child(6),
.title-bulk-core-grid > .field:nth-child(7),
.title-bulk-core-grid > .field:nth-child(8),
.title-bulk-core-grid > .field:nth-child(9) {
  grid-column: span 1;
}

.title-bulk-core-grid > :is(.checkbox-inline, .checkbox-inline-help):nth-child(10),
.title-bulk-core-grid > :is(.checkbox-inline, .checkbox-inline-help):nth-child(11) {
  grid-column: span 2;
}

.title-bulk-core-grid > .field:nth-child(6) .plain-input,
.title-bulk-core-grid > .field:nth-child(7) .plain-input,
.title-bulk-core-grid > .field:nth-child(8) .plain-input,
.title-bulk-core-grid > .field:nth-child(9) .plain-input {
  max-width: 92px;
}

.taobao-growth-page .growth-form-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 8px 12px;
  margin-top: 8px;
}

.taobao-growth-page .growth-page-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.taobao-growth-page .growth-page-header-actions .secondary-button {
  min-height: 32px;
  padding: 0 12px;
  white-space: nowrap;
}

.taobao-growth-page .field-label-row {
  justify-content: flex-start;
}

.taobao-growth-page .field-label-text {
  gap: 6px;
}

.taobao-growth-page .panel-title h2 {
  display: inline-flex;
  overflow: visible;
  align-items: center;
  gap: 5px;
}

.taobao-growth-page .panel-title h2 .ai-points-mark {
  z-index: 2;
  margin-left: 0;
  color: var(--theme-warning-text);
}

.taobao-growth-page .panel-title h2 .ai-points-mark::after {
  top: 50%;
  bottom: auto;
  left: calc(100% + 7px);
  transform: translate(0, -50%);
}

.taobao-growth-page .panel-title h2 .ai-points-mark:hover::after,
.taobao-growth-page .panel-title h2 .ai-points-mark:focus-visible::after {
  transform: translate(0, -50%);
}

.taobao-growth-page .field.has-required-error .switch-row {
  border-radius: 5px;
  outline: 2px solid color-mix(in srgb, var(--theme-danger-border) 42%, transparent);
  outline-offset: 2px;
}

.taobao-growth-page .growth-validation-summary {
  margin: 8px 0 10px;
}

.taobao-growth-page .action-buttons .secondary-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}

.taobao-growth-page .growth-form-grid > .field {
  min-width: 0;
  grid-column: span 2;
}

.taobao-growth-page .growth-form-grid > .field-path {
  grid-column: span 4;
}

.taobao-growth-page .growth-form-grid > .field-shop {
  grid-column: span 4;
}

.taobao-growth-page .growth-form-grid > .field-wide-option {
  grid-column: span 3;
}

.taobao-growth-page .growth-form-grid > .field-half {
  grid-column: span 6;
}

.taobao-growth-page .growth-form-grid > .field-medium {
  grid-column: span 2;
}

.taobao-growth-page .growth-form-grid > .field-short,
.taobao-growth-page .growth-form-grid > .field-tiny {
  grid-column: span 1;
}

.taobao-growth-page .growth-form-grid > .field-switch {
  grid-column: span 2;
}

.taobao-growth-page .growth-form-grid > .field-full {
  grid-column: 1 / -1;
}

.taobao-growth-page .growth-core-grid > .field-path {
  order: 1;
  grid-column: span 4;
}

.taobao-growth-page .growth-core-grid > .field-shop {
  order: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 240px auto minmax(260px, 1fr);
  align-items: center;
  gap: 6px 10px;
  padding-top: 2px;
}

.taobao-growth-page .growth-core-grid > .field-wide-option {
  order: 1;
  grid-column: span 4;
}

.taobao-growth-page .growth-core-grid > .field-short {
  order: 1;
  grid-column: span 2;
}

.taobao-growth-page .growth-core-grid > .field-medium,
.taobao-growth-page .growth-core-grid > .field-switch,
.taobao-growth-page .growth-core-grid > .field-tiny {
  order: 1;
}

.taobao-growth-page .growth-core-grid > .field-full {
  order: 3;
}

.taobao-growth-page .search-push-task-grid {
  align-items: start;
  gap: 8px 12px;
}

.taobao-growth-page .search-push-task-grid > .field-path {
  order: 1;
  grid-column: span 4;
}

.taobao-growth-page .search-push-task-grid > .field-shop {
  order: 2;
  grid-column: 1 / -1;
}

.taobao-growth-page .growth-timing-grid > .field-short,
.taobao-growth-page .growth-timing-grid > .field-tiny {
  grid-column: span 1;
}

.taobao-growth-page .growth-setting-grid > .field-medium {
  grid-column: span 2;
}

.taobao-growth-page .growth-setting-grid > .field-wide-option {
  grid-column: span 4;
}

.taobao-growth-page .growth-setting-grid > .field-half {
  grid-column: span 6;
}

.taobao-growth-page .growth-form-grid .path-input,
.taobao-growth-page .growth-form-grid .plain-input,
.taobao-growth-page .growth-form-grid select,
.taobao-growth-page .growth-form-grid input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  border: 1px solid #bed5dc;
  border-radius: 6px;
  background: #fff;
  color: #17343f;
  box-sizing: border-box;
}

.taobao-growth-page .growth-form-grid .growth-textarea {
  width: 100%;
  min-height: 92px;
  padding: 8px 10px;
  border: 1px solid #bed5dc;
  border-radius: 6px;
  background: #fff;
  color: #17343f;
  box-sizing: border-box;
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.taobao-growth-page .growth-form-grid .growth-textarea:disabled {
  background: #eef5f7;
  color: #78909a;
}

.taobao-growth-page .growth-form-grid .path-input {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0;
}

.taobao-growth-page .growth-form-grid .path-input input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 8px;
}

.taobao-growth-page .growth-form-grid .path-input button {
  flex: 0 0 auto;
  height: 26px;
  margin-right: 2px;
  border-color: #c7dde4;
  background: #f5fbfc;
}

.taobao-growth-page .growth-form-grid input.compact-number {
  width: 78px;
  min-width: 64px;
  max-width: 92px;
}

.taobao-growth-page .growth-form-grid .inline-input-unit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
}

.taobao-growth-page .growth-form-grid .field-unit {
  color: #57707a;
  font-size: 12px;
  line-height: 1;
}

.taobao-growth-page .guanghe-template-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 6px;
}

.taobao-growth-page .guanghe-template-row select {
  min-height: 30px;
}

.taobao-growth-page .guanghe-template-row .compact-action {
  min-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
}

.taobao-growth-page .guanghe-template-status {
  display: block;
  margin-top: 4px;
  color: #617780;
  font-size: 12px;
  line-height: 1.35;
}

.taobao-growth-page .guanghe-publish-range-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 32px;
}

.taobao-growth-page .guanghe-publish-range-row .segmented {
  width: fit-content;
}

.taobao-growth-page .guanghe-inline-number,
.taobao-growth-page .guanghe-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  flex: 0 0 auto;
  color: #24434b;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.taobao-growth-page .guanghe-inline-number input.compact-number {
  width: 78px;
  min-width: 64px;
  max-width: 92px;
}

.taobao-growth-page .guanghe-inline-check input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #0fa7a0;
}

.taobao-growth-page .growth-form-grid .segmented {
  max-width: 100%;
  width: fit-content;
  flex-wrap: wrap;
}

.taobao-growth-page .growth-form-grid .segmented button {
  padding: 0 8px;
}

.taobao-growth-page .growth-form-grid .switch-row {
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
}

.taobao-growth-page .growth-form-grid input.growth-slot-input {
  width: 78px;
  min-width: 72px;
  max-width: 92px;
}

.taobao-growth-page .growth-core-grid > .field-path .path-input {
  max-width: 460px;
}

.taobao-growth-page .growth-core-grid > .field-shop > span {
  white-space: nowrap;
}

.taobao-growth-page .growth-core-grid > .field-shop > select {
  width: 240px;
  max-width: 240px;
}

.taobao-growth-page .growth-core-grid > .field-shop .growth-shop-slot-row {
  margin-top: 0;
  flex-wrap: nowrap;
}

.taobao-growth-page .growth-core-grid > .field-shop > small {
  margin: 0;
  color: #5d7480;
  line-height: 1.42;
}

.taobao-growth-page .growth-routing-note {
  margin: -2px 0 8px;
  color: #415c67;
  font-size: 12px;
  line-height: 1.45;
}

.douyin-growth-page .douyin-checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-height: 30px;
  padding: 2px 0;
}

.douyin-growth-page .douyin-checkbox-grid .checkbox-inline {
  min-height: 24px;
  margin: 0;
  color: #17343f;
  font-size: 13px;
}

.douyin-growth-page .title-textarea {
  width: 100%;
  min-height: 74px;
  border: 1px solid #bed5dc;
  border-radius: 6px;
  color: #17343f;
  background: #fff;
  resize: vertical;
}

@media (max-width: 1380px) {
  .taobao-growth-page .growth-form-grid > .field-path,
  .taobao-growth-page .growth-core-grid > .field-path {
    grid-column: span 4;
  }

  .taobao-growth-page .growth-form-grid > .field-shop {
    grid-column: span 4;
  }

  .taobao-growth-page .growth-core-grid > .field-shop,
  .taobao-growth-page .search-push-task-grid > .field-shop {
    grid-column: 1 / -1;
    grid-template-columns: auto 220px auto;
  }

  .taobao-growth-page .growth-core-grid > .field-shop > select {
    width: 220px;
    max-width: 220px;
  }

  .taobao-growth-page .growth-core-grid > .field-shop > small {
    grid-column: 2 / -1;
  }

  .taobao-growth-page .growth-form-grid > .field-wide-option {
    grid-column: span 4;
  }

  .taobao-growth-page .growth-form-grid > .field-half {
    grid-column: span 6;
  }

  .taobao-growth-page .growth-form-grid > .field-short,
  .taobao-growth-page .growth-form-grid > .field-tiny {
    grid-column: span 2;
  }
}

@media (max-width: 980px) {
  .taobao-growth-page .growth-form-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .taobao-growth-page .growth-form-grid > .field,
  .taobao-growth-page .growth-form-grid > .field-medium,
  .taobao-growth-page .growth-form-grid > .field-switch,
  .taobao-growth-page .growth-form-grid > .field-short,
  .taobao-growth-page .growth-form-grid > .field-tiny {
    grid-column: span 2;
  }

  .taobao-growth-page .growth-form-grid > .field-path,
  .taobao-growth-page .growth-form-grid > .field-shop,
  .taobao-growth-page .growth-form-grid > .field-wide-option,
  .taobao-growth-page .growth-form-grid > .field-half {
    grid-column: 1 / -1;
  }

  .taobao-growth-page .guanghe-template-row {
    grid-template-columns: 1fr;
  }
}

.title-byte-check-grid,
.title-overlay-fix-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 7px 10px;
}

.title-byte-check-grid > .field:nth-child(1),
.title-byte-check-grid > .field:nth-child(2),
.title-overlay-fix-grid > .field:nth-child(1),
.title-overlay-fix-grid > .field:nth-child(2),
.title-overlay-fix-grid > .field:nth-child(3) {
  grid-column: span 4;
}

.title-byte-check-grid > .field:nth-child(3),
.title-byte-check-grid > .field:nth-child(6),
.title-byte-check-grid > :is(.checkbox-inline, .checkbox-inline-help):nth-child(11),
.title-byte-check-grid > :is(.checkbox-inline, .checkbox-inline-help):nth-child(12),
.title-overlay-fix-grid > .field:nth-child(4),
.title-overlay-fix-grid > .field:nth-child(5),
.title-overlay-fix-grid > .field:nth-child(6),
.title-overlay-fix-grid > :is(.checkbox-inline, .checkbox-inline-help):nth-child(11) {
  grid-column: span 2;
}

.title-batch-validation-summary {
  margin-top: 8px;
}

.title-byte-check-grid > .field:nth-child(4),
.title-byte-check-grid > .field:nth-child(5),
.title-byte-check-grid > .field:nth-child(7),
.title-byte-check-grid > .field:nth-child(8),
.title-byte-check-grid > .field:nth-child(9),
.title-byte-check-grid > .field:nth-child(10),
.title-overlay-fix-grid > .field:nth-child(7),
.title-overlay-fix-grid > .field:nth-child(8),
.title-overlay-fix-grid > .field:nth-child(9),
.title-overlay-fix-grid > .field:nth-child(10) {
  grid-column: span 1;
}

.title-byte-check-grid > .field:nth-child(4) .plain-input,
.title-byte-check-grid > .field:nth-child(5) .plain-input,
.title-byte-check-grid > .field:nth-child(7) .plain-input,
.title-byte-check-grid > .field:nth-child(8) .plain-input,
.title-byte-check-grid > .field:nth-child(9) .plain-input,
.title-byte-check-grid > .field:nth-child(10) .plain-input,
.title-overlay-fix-grid > .field:nth-child(7) .plain-input,
.title-overlay-fix-grid > .field:nth-child(8) .plain-input,
.title-overlay-fix-grid > .field:nth-child(9) .plain-input,
.title-overlay-fix-grid > .field:nth-child(10) .plain-input {
  max-width: 92px;
}

.title-textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  padding: 7px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: #213b46;
  font: inherit;
  line-height: 1.5;
  outline: 0;
}

.title-textarea-short {
  min-height: 54px;
}

.title-textarea:focus,
.title-guide-page .plain-input:focus,
.title-guide-page .plain-select:focus {
  border-color: #76c9c4;
  box-shadow: 0 0 0 3px rgba(10, 169, 159, 0.12);
}

.title-tool-split {
  display: grid;
  gap: 10px;
}

.subtool-panel {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #e4eef2;
}

.subtool-panel:first-child {
  padding-top: 0;
  border-top: 0;
}

.subtool-panel .panel-title {
  margin-bottom: 0;
}

.title-single-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(480px, 1.22fr);
  gap: 12px;
}

.title-single-compact-panel {
  padding: 10px 12px;
}

.title-single-compact-grid {
  display: grid;
  grid-template-columns: minmax(560px, 1.1fr) minmax(420px, 0.9fr);
  gap: 10px;
  align-items: start;
}

.title-compact-block {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid #deebf0;
  border-radius: 8px;
  background: #fbfdfe;
}

.title-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #edf3f5;
}

.title-block-head strong {
  color: #243d48;
  font-size: 14px;
}

.title-block-head span {
  color: var(--muted);
  font-size: 12px;
}

.title-block-head-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.title-single-input-grid {
  display: grid;
  grid-template-columns: minmax(138px, 176px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.title-image-source-field {
  display: grid;
  min-width: 0;
  gap: 5px;
  align-content: start;
}

.title-image-source-field.has-required-error .title-image-preview {
  border-color: var(--theme-danger-border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-danger-border) 24%, transparent);
}

.title-single-validation-summary {
  margin-top: 2px;
}

.title-single-param-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 7px 8px;
}

.title-single-param-grid > .field:nth-child(1) {
  grid-column: span 5;
}

.title-single-param-grid > .field:nth-child(2) {
  grid-column: span 7;
}

.title-single-param-grid > .field:nth-child(3) {
  grid-column: 1 / -1;
}

.title-single-param-grid > .field:nth-child(4),
.title-single-param-grid > .field:nth-child(5),
.title-single-param-grid > .field:nth-child(6) {
  grid-column: span 4;
}

.title-single-param-grid > .field:nth-child(7) {
  grid-column: span 4;
}

.title-single-param-grid > .field:nth-child(8) {
  grid-column: span 5;
}

.title-single-param-grid > .field:nth-child(9) {
  grid-column: span 3;
}

.title-single-param-grid > .field:nth-child(9) .plain-input {
  max-width: 92px;
}

.title-input-panel,
.title-result-panel {
  min-width: 0;
}

.title-image-preview {
  position: relative;
  display: grid;
  width: 100%;
  height: 142px;
  min-height: 0;
  margin-bottom: 0;
  place-items: center;
  overflow: hidden;
  border: 1px dashed #b9cbd3;
  border-radius: 8px;
  background: #f8fbfc;
}

.title-image-upload {
  appearance: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.title-image-upload:hover,
.title-image-upload:focus-visible {
  border-color: var(--primary);
  background: #f1fbfa;
  box-shadow: 0 0 0 3px rgba(10, 169, 159, 0.11);
  outline: 0;
}

.title-image-preview.failed {
  border-color: #efb4ad;
  background: #fff8f6;
}

.title-image-preview img {
  width: 100%;
  height: 100%;
  max-height: 142px;
  object-fit: contain;
  background: #fff;
}

.title-upload-plus {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 7px 14px rgba(10, 169, 159, 0.22);
}

.title-image-empty {
  display: grid;
  gap: 3px;
  max-width: 92%;
  padding: 8px;
  color: #506b76;
  text-align: center;
}

.title-image-empty strong {
  color: #263f49;
  font-size: 14px;
}

.title-image-empty span,
.title-image-empty em,
.title-inline-notice,
.title-task-status span,
.title-result-editor-foot span,
.title-result-empty,
.title-dev-state span {
  color: var(--muted);
  line-height: 1.5;
}

.title-image-empty.failed strong {
  color: var(--danger);
}

.title-image-empty em {
  display: block;
  overflow: hidden;
  max-width: 100%;
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-inline-notice {
  margin-top: 7px;
  padding: 7px 8px;
  border: 1px solid #d8e9ee;
  border-radius: 7px;
  background: #f8fcfd;
}

.title-inline-notice.warning {
  border-color: #f3d49b;
  background: #fff9eb;
  color: #8a5508;
}

.title-inline-notice.danger {
  border-color: #f1b8b4;
  background: #fff6f5;
  color: #9a312c;
}

.title-task-status {
  display: grid;
  gap: 3px;
  margin-top: 7px;
  padding: 7px 8px;
  border: 1px solid #d8e9ee;
  border-radius: 7px;
  background: #fbfdfe;
}

.title-task-status strong {
  color: #1d4652;
}

.title-task-status.running {
  border-color: #a6ddd8;
  background: #f0fbfa;
}

.title-task-status.failed {
  border-color: #efb4ad;
  background: #fff7f5;
}

.title-result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.title-result-editor {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #d9e7ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.title-result-editor.exceeded {
  border-color: #efc28a;
  background: #fffaf2;
}

.title-result-editor-head,
.title-result-editor-foot,
.title-result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.title-result-editor-head strong {
  color: #263f49;
  font-size: 13px;
}

.title-result-editor-head span {
  color: var(--primary-dark);
  font-weight: 900;
}

.title-textarea.result {
  min-height: 60px;
  background: #fff;
}

.title-textarea.result.compact {
  min-height: 52px;
}

.title-result-actions {
  justify-content: flex-end;
  margin-top: 8px;
  gap: 6px;
}

.title-copy-status {
  color: var(--primary-dark);
  font-weight: 900;
}

.title-result-empty {
  margin-top: 8px;
  padding: 7px;
  border: 1px dashed #cbdde4;
  border-radius: 7px;
  background: #fbfdfe;
  text-align: center;
}

.title-blacklist-row {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 8px;
}

.title-blacklist-actions {
  display: grid;
  gap: 5px;
  justify-items: start;
}

.title-blacklist-actions span {
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 900;
}

.title-trend-shop-guidance {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--theme-danger-text);
  font-size: 12px;
  line-height: 1.45;
}

.title-trend-shop-guidance .ghost-button {
  flex: 0 0 auto;
}

.title-trend-validation-summary {
  margin-top: 8px;
}

.title-guide-page .action-footer {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
}

.title-guide-page .action-footer strong {
  font-size: 13px;
}

.title-guide-page .action-footer span {
  line-height: 1.35;
}

.title-guide-page .title-centered-action .action-buttons {
  justify-content: center;
}

.title-dev-state {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid #d8e9ee;
  border-radius: 8px;
  background: #fbfdfe;
}

.title-dev-state strong {
  color: #895d00;
  font-size: 16px;
}

.step-list {
  display: grid;
  gap: 8px;
}

.step-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #dfeaf0;
  border-radius: 7px;
  background: #fbfdfe;
}

.step-index {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 900;
}

.step-item p {
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.35;
}

.section-note {
  padding: 9px 10px;
  border: 1px solid #d8edf1;
  border-radius: 7px;
  background: #f8fcfd;
  color: #496875;
  line-height: 1.45;
}

.admin-nav-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.admin-nav-strip button {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  background: transparent;
  color: #3c5661;
}

.admin-nav-strip button.active {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 900;
}

.category-template-admin-page {
  display: grid;
  gap: 12px;
}

.category-template-admin-head,
.category-template-table-panel {
  margin: 0;
}

.category-template-kind-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-top: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.category-template-kind-tabs button {
  min-height: 32px;
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}

.category-template-kind-tabs button.active {
  color: var(--primary-dark);
  font-weight: 700;
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: 0 1px 3px rgba(33, 57, 66, 0.08);
}

.category-template-platform-tabs {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  border-bottom: 1px solid var(--line);
}

.category-template-platform-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.category-template-platform-tabs button.active {
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
  font-weight: 700;
}

.category-template-platform-tabs button span {
  min-width: 22px;
  padding: 1px 6px;
  font-size: 12px;
  text-align: center;
  background: var(--surface-soft);
  border-radius: 10px;
}

.category-template-policy-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0 2px;
}

.category-template-policy-row p,
.category-template-readonly-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.category-template-readonly-note {
  padding-top: 12px;
}

.category-template-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.category-template-table-head span {
  color: var(--muted);
  font-size: 13px;
}

.category-template-table-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.category-template-state-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.category-template-state-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.category-template-state-tabs button.active {
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-color: var(--primary);
  font-weight: 700;
}

.category-template-state-tabs span {
  min-width: 18px;
  color: inherit;
  text-align: center;
}

.category-template-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  padding: 8px;
  margin-bottom: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.category-template-filter-row > label,
.category-template-tree-picker {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
}

.category-template-filter-row input,
.category-template-tree-trigger {
  box-sizing: border-box;
  width: 116px;
  min-height: 32px;
  padding: 0 8px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-size: 12px;
}

.category-template-filter-row .category-template-keyword input {
  width: min(280px, 34vw);
}

.category-template-tree-picker {
  position: relative;
  min-width: 210px;
}

.category-template-tree-trigger {
  width: 220px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.category-template-clear-filter {
  position: absolute;
  right: 4px;
  bottom: 5px;
  padding: 1px 4px;
  color: var(--primary-dark);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.category-template-tree-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: 0;
  width: min(360px, 58vw);
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(33, 57, 66, 0.16);
}

.category-template-tree-menu > input {
  width: 100%;
}

.category-template-tree-back {
  min-height: 26px;
  margin-top: 6px;
  padding: 0 6px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.category-template-tree-results {
  display: grid;
  gap: 2px;
  max-height: 230px;
  padding-top: 6px;
  overflow-y: auto;
}

.category-template-tree-results > span {
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
}

.category-template-tree-item {
  display: flex;
  gap: 5px;
  align-items: center;
}

.category-template-tree-item > button:first-child {
  min-width: 0;
  flex: 1;
  min-height: 29px;
  padding: 0 7px;
  overflow: hidden;
  color: var(--text);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.category-template-tree-item > button:first-child:hover {
  background: var(--surface-soft);
}

.category-template-tree-expand {
  min-height: 27px;
  padding: 0 6px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.category-template-tree-more {
  width: 100%;
  min-height: 28px;
  margin-top: 6px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.category-template-batch-delete {
  min-height: 32px;
  padding: 0 10px;
  white-space: nowrap;
}

.category-template-table-wrap {
  overflow-x: auto;
}

.category-template-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.category-template-table th,
.category-template-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}

.category-template-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-soft);
}

.category-template-table td {
  font-size: 13px;
}

.category-template-table th,
.category-template-table td {
  overflow-wrap: anywhere;
}

.category-template-table th:first-child,
.category-template-table td:first-child {
  width: 38%;
}

.category-template-table.with-selection th:first-child,
.category-template-table.with-selection td:first-child {
  width: 38px;
}

.category-template-table.with-selection th:nth-child(2),
.category-template-table.with-selection td:nth-child(2) {
  width: 35%;
}

.category-template-table th:nth-last-child(1),
.category-template-table td:nth-last-child(1) {
  width: 170px;
}

.category-template-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.category-template-status {
  display: inline-flex;
  padding: 3px 8px;
  color: var(--muted);
  background: var(--surface-soft);
  border-radius: 10px;
  white-space: nowrap;
}

.category-template-status.active {
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.category-template-status.candidate {
  color: #9a6300;
  background: #fff4d7;
}

.category-template-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.category-template-actions button {
  min-height: 30px;
  padding: 0 10px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  cursor: pointer;
}

.category-template-actions button.primary {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.category-template-actions button.danger {
  color: #a6332b;
  border-color: #efc3bd;
}

.category-template-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.category-template-pagination button {
  min-height: 30px;
  padding: 0 9px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  cursor: pointer;
}

.category-template-pagination button:disabled,
.category-template-state-tabs button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.category-template-empty {
  padding: 28px !important;
  color: var(--muted);
  text-align: center !important;
}

.sku-parameter-admin-drawer {
  grid-template-rows: auto minmax(0, 1fr);
  width: min(760px, calc(100vw - 24px));
}

.sku-parameter-admin-drawer .admin-maintenance-drawer-head span {
  color: var(--theme-muted);
  font-size: 12px;
}

.sku-parameter-admin-drawer-body {
  padding: 14px 16px 24px;
}

.sku-parameter-admin-drawer table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.sku-parameter-admin-drawer th,
.sku-parameter-admin-drawer td {
  padding: 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.sku-parameter-admin-drawer th {
  color: var(--muted);
  font-size: 12px;
  background: var(--surface-soft);
}

.sku-parameter-admin-drawer td {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.sku-parameter-admin-drawer th:first-child,
.sku-parameter-admin-drawer td:first-child {
  width: 28%;
}

.sku-parameter-admin-drawer th:nth-child(2),
.sku-parameter-admin-drawer td:nth-child(2) {
  width: 18%;
}

.sku-parameter-admin-drawer td em {
  color: var(--danger, #c6473c);
  font-style: normal;
}

.sku-parameter-admin-drawer td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 900px) {
  .category-template-policy-row,
  .category-template-table-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .sku-parameter-admin-drawer {
    width: 100vw;
  }
}

.admin-users-panel {
  margin-bottom: 12px;
}

.admin-system-status-panel {
  margin-bottom: 12px;
}

.admin-account-rules-panel {
  margin-bottom: 12px;
}

.admin-account-rules-content {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(300px, 1fr);
  gap: 12px;
  align-items: end;
  margin-top: 10px;
}

.admin-account-cooldown-field {
  display: grid;
  gap: 6px;
  color: #36535e;
  font-size: 13px;
  font-weight: 800;
}

.admin-account-cooldown-field > div {
  display: grid;
  grid-template-columns: 96px 28px 72px;
  gap: 6px;
  align-items: center;
}

.admin-account-cooldown-field > small,
.admin-account-cooldown-field > div > small {
  color: #718890;
  font-size: 12px;
  font-weight: 600;
}

.admin-free-benefit-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 8px;
}

.admin-free-benefit-summary > span {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.admin-free-benefit-summary b {
  color: var(--theme-success-text);
  font-size: 18px;
}

.admin-free-benefit-summary small {
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-free-benefit-details {
  margin-top: 10px;
  border-top: 1px solid var(--theme-border);
  padding-top: 8px;
}

.admin-free-benefit-details summary {
  color: #216b70;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.admin-free-benefit-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  max-height: 240px;
  overflow: auto;
}

.admin-free-benefit-list > div {
  display: grid;
  grid-template-columns: 70px minmax(160px, 1fr) minmax(150px, 1fr) 140px;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  color: #526d77;
  font-size: 12px;
}

@media (max-width: 900px) {
  .admin-account-rules-content {
    grid-template-columns: 1fr;
  }

  .admin-free-benefit-list > div {
    grid-template-columns: 70px 1fr;
  }
}

.admin-system-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.admin-system-status-item {
  display: grid;
  gap: 3px;
  min-height: 78px;
  padding: 10px 11px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}

.admin-system-status-item span {
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-system-status-item b {
  color: var(--theme-text-strong);
  font-size: 14px;
}

.admin-system-status-item small {
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-system-status-item.ready {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
}

.admin-system-status-item.warn {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
}

.admin-system-status-item.danger {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
}

.admin-system-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.admin-system-counts span {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-system-blockers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 7px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 12px;
}

.admin-system-blockers strong {
  margin-right: 2px;
  color: var(--theme-danger-text);
}

.admin-system-blockers span {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--theme-surface-raised);
  border: 1px solid var(--theme-danger-border);
  color: var(--theme-danger-text);
  font-weight: 700;
}

.admin-system-blockers.warning {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.admin-system-blockers.warning strong,
.admin-system-blockers.warning span {
  color: var(--theme-warning-text);
}

.admin-system-blockers.warning span {
  border-color: var(--theme-warning-border);
}

.admin-system-status-empty {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 13px;
}

.admin-user-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 112px 96px auto;
  gap: 8px;
  align-items: center;
}

.compact-select {
  min-height: 32px;
  padding-right: 28px;
}

.admin-user-table {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  overflow-x: auto;
}

.admin-user-row {
  display: grid;
  grid-template-columns: 62px minmax(170px, 1.15fr) minmax(180px, 1fr) minmax(116px, 0.8fr) 58px 64px 70px 82px minmax(300px, 1.25fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface);
  color: var(--theme-text);
  font-size: 12px;
  min-width: 1260px;
}

.admin-user-row.head {
  min-height: 28px;
  border-color: transparent;
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-weight: 900;
}

.admin-user-row b,
.admin-user-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-identity,
.admin-user-plan {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-user-wallets {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1.25;
}

.admin-user-wallets b,
.admin-user-wallets span {
  font-size: 11px;
}

.admin-user-identity span,
.admin-user-identity small,
.admin-user-plan small {
  min-width: 0;
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-plan .plain-input {
  min-height: 28px;
  font-size: 12px;
}

.user-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 42px;
  height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--theme-success);
  color: var(--theme-success-text);
  font-weight: 800;
}

.user-status.frozen {
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.user-status.closed {
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
}

.admin-user-row-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.admin-user-row-actions button {
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 12px;
}

.admin-user-row-actions button:hover:not(:disabled) {
  border-color: #86cbd8;
  color: var(--primary-dark);
}

.admin-user-row-actions button.danger-lite {
  border-color: var(--theme-danger-border);
  color: var(--theme-danger-text);
}

.admin-user-row-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-user-empty {
  padding: 12px;
  border: 1px dashed var(--theme-border);
  border-radius: 7px;
  color: var(--theme-muted);
  background: var(--theme-surface-raised);
  font-size: 13px;
}

.admin-bindings-panel {
  margin-bottom: 12px;
}

.admin-binding-title {
  align-items: flex-start;
}

.admin-binding-table {
  min-width: 0;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface);
}

.admin-binding-data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: var(--theme-text);
  font-size: 12px;
}

.admin-binding-data-table th,
.admin-binding-data-table td {
  padding: 6px 7px;
  border-bottom: 1px solid var(--theme-border);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.admin-binding-data-table th {
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-weight: 900;
}

.admin-binding-data-table tbody tr:hover td {
  background: var(--theme-hover);
}

.admin-binding-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.binding-col-shop {
  width: 22%;
}

.binding-col-user {
  width: 17%;
}

.binding-col-phone {
  width: 12%;
}

.binding-col-plan {
  width: 10%;
}

.binding-col-status {
  width: 11%;
}

.binding-col-time {
  width: 15%;
}

.binding-col-action {
  width: 13%;
}

.admin-binding-data-table td > strong,
.admin-binding-data-table td > small {
  display: block;
  min-width: 0;
}

.admin-binding-data-table td > strong {
  color: var(--theme-text-strong);
  font-size: 12px;
}

.admin-binding-phone-cell strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}

.admin-binding-account-link {
  display: block;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-binding-account-link:hover,
.admin-binding-account-link:focus-visible {
  color: var(--primary-dark);
  text-decoration-color: currentColor;
}

.admin-binding-account-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.admin-binding-data-table td > small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-binding-primary-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.admin-binding-primary-line strong {
  min-width: 0;
  overflow: hidden;
  color: var(--theme-text-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-platform-badge {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--theme-active);
  color: var(--theme-success-text);
  font-size: 11px;
  font-weight: 900;
}

.binding-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 42px;
  height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-weight: 800;
}

.binding-status.active {
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.binding-status.pending {
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.binding-status.archived {
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
}

.admin-binding-status-stack {
  display: grid;
  justify-items: start;
  gap: 3px;
}

.verification-status {
  color: var(--theme-warning-text);
  font-size: 11px;
  font-weight: 800;
}

.verification-status.verified {
  color: var(--theme-success-text);
}

.admin-binding-time-cell {
  display: grid;
  gap: 2px;
}

.admin-binding-time-cell span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px;
  color: var(--theme-muted);
  font-size: 11px;
  white-space: nowrap;
}

.admin-binding-time-cell b {
  color: var(--theme-text);
}

.admin-binding-row-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-binding-row-actions button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 12px;
}

.admin-binding-row-actions button:hover:not(:disabled) {
  border-color: #86cbd8;
  color: var(--primary-dark);
}

.admin-binding-row-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-binding-title-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.admin-binding-account-dialog-backdrop {
  position: fixed;
  z-index: 1550;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--theme-text-strong) 42%, transparent);
}

.admin-binding-account-dialog {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  width: min(940px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid var(--theme-border-strong);
  border-radius: 8px;
  background: var(--theme-surface);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--theme-text-strong) 24%, transparent);
  color: var(--theme-text);
}

.admin-binding-account-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--theme-border);
}

.admin-binding-account-dialog-head > div:first-child {
  min-width: 0;
}

.admin-binding-account-dialog-head span {
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-binding-account-dialog-head h3 {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--theme-text-strong);
  font-size: 18px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-binding-account-dialog-head p {
  margin: 4px 0 0;
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-binding-account-dialog-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.admin-binding-account-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--theme-border);
}

.admin-binding-account-metrics > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 14px;
  border-right: 1px solid var(--theme-border);
}

.admin-binding-account-metrics > span:last-child {
  border-right: 0;
}

.admin-binding-account-metrics b {
  overflow: hidden;
  color: var(--theme-text-strong);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-binding-account-metrics small {
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-binding-account-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface-raised);
}

.admin-binding-account-tabs button {
  min-height: 31px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--theme-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.admin-binding-account-tabs button.active {
  border-bottom-color: var(--primary);
  color: var(--primary-dark);
}

.admin-binding-account-shop-filter {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px 0;
  background: var(--theme-surface-raised);
}

.admin-binding-account-shop-filter label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-binding-account-shop-filter input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.admin-binding-account-table-wrap {
  min-height: 0;
  overflow: auto;
  padding: 0 12px 12px;
}

.admin-binding-account-table-wrap .admin-compact-table thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--theme-surface);
}

.admin-binding-account-loading {
  margin: 0;
  padding: 28px 16px;
  color: var(--theme-muted);
  text-align: center;
}

.admin-binding-empty {
  padding: 20px !important;
  color: var(--theme-muted);
  font-size: 13px;
  text-align: center !important;
}

.admin-binding-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) 120px repeat(3, minmax(112px, 0.7fr)) auto;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.admin-binding-filter-bar > label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-binding-filter-bar input[type='text'],
.admin-binding-filter-bar input:not([type]),
.admin-binding-filter-bar select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 12px;
}

.admin-match-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 30px;
  margin: 0;
  padding: 4px 7px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
}

.admin-match-mode legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.admin-match-mode label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-match-mode input {
  margin: 0;
}

.admin-binding-filter-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}

.admin-binding-filter-actions button {
  min-height: 30px;
  padding-inline: 10px;
  white-space: nowrap;
}

.admin-binding-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding-top: 6px;
  color: #617982;
  font-size: 12px;
}

.admin-binding-pagination label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-binding-pagination select {
  min-height: 26px;
  padding: 2px 5px;
  border: 1px solid #cbdde5;
  border-radius: 5px;
  background: #fff;
}

.admin-binding-pagination button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #cbdde5;
  border-radius: 5px;
  background: #fff;
  color: #36535e;
}

.admin-binding-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.admin-binding-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: flex;
  justify-content: flex-end;
  background: rgba(27, 48, 55, 0.24);
}

.admin-binding-drawer {
  width: min(430px, calc(100vw - 24px));
  height: 100%;
  padding: 14px;
  overflow-y: auto;
  border-left: 1px solid #c9dde3;
  background: #fff;
  box-shadow: -10px 0 24px rgba(32, 64, 73, 0.14);
}

.admin-binding-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2ecef;
}

.admin-binding-drawer-head span {
  color: #17807b;
  font-size: 12px;
  font-weight: 900;
}

.admin-binding-drawer-head h3 {
  margin: 2px 0 0;
  color: #203c45;
  font-size: 17px;
}

.admin-binding-drawer-head button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #d1e0e5;
  border-radius: 5px;
  background: #fff;
  color: #526c75;
  font-size: 20px;
  line-height: 1;
}

.admin-binding-detail-list {
  display: grid;
  margin: 10px 0 0;
}

.admin-binding-detail-list > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 2px;
  border-bottom: 1px solid #edf3f4;
}

.admin-binding-detail-list dt {
  color: #657b84;
  font-size: 12px;
}

.admin-binding-detail-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #294650;
  font-size: 12px;
  font-weight: 800;
}

.admin-binding-error-note {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #f0d6cd;
  border-radius: 6px;
  background: #fff8f5;
  color: #8b4b36;
  font-size: 12px;
}

.admin-binding-transfer-form {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #c9e2e3;
  border-radius: 7px;
  background: #f7fbfb;
}

.admin-binding-transfer-form h4 {
  margin: 0;
  color: #244650;
  font-size: 14px;
}

.admin-binding-transfer-form p {
  margin: 3px 0 0;
  color: #617a82;
  font-size: 11px;
  line-height: 1.5;
}

.admin-binding-transfer-form label {
  display: grid;
  gap: 4px;
}

.admin-binding-transfer-form label > span {
  color: #4b656e;
  font-size: 11px;
  font-weight: 800;
}

.admin-binding-transfer-form input,
.admin-binding-transfer-form textarea {
  width: 100%;
  border: 1px solid #c9dde3;
  border-radius: 5px;
  background: #fff;
  color: #294650;
  font: inherit;
}

.admin-binding-transfer-form input {
  height: 34px;
  padding: 0 9px;
}

.admin-binding-transfer-form textarea {
  padding: 8px 9px;
  resize: vertical;
}

.admin-recharge-panel {
  margin-bottom: 12px;
}

.admin-recharge-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.summary-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
}

.admin-recharge-table {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  overflow-x: auto;
}

.admin-recharge-row {
  display: grid;
  grid-template-columns: 150px 130px 180px 118px 86px 92px 150px 130px minmax(112px, auto);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  min-width: 1260px;
  padding: 6px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface);
  color: var(--theme-text);
  font-size: 12px;
}

.admin-recharge-row.head {
  min-height: 28px;
  border-color: transparent;
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-weight: 900;
}

.admin-recharge-row b,
.admin-recharge-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-recharge-row-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.admin-recharge-row-actions button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 12px;
}

.admin-recharge-row-actions button:hover:not(:disabled) {
  border-color: #86cbd8;
  color: var(--primary-dark);
}

.admin-recharge-row-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.admin-recharge-row-actions span {
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-recharge-empty {
  padding: 12px;
  border: 1px dashed var(--theme-border);
  border-radius: 7px;
  color: var(--theme-muted);
  background: var(--theme-surface-raised);
  font-size: 13px;
}

.admin-audit-panel {
  margin-bottom: 12px;
}

.admin-audit-table {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  overflow-x: auto;
}

.admin-audit-row {
  display: grid;
  grid-template-columns: 118px 124px minmax(110px, 0.8fr) minmax(120px, 0.9fr) minmax(280px, 1.6fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  min-width: 880px;
  padding: 6px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface);
  color: var(--theme-text);
  font-size: 12px;
}

.admin-audit-row.head {
  min-height: 28px;
  border-color: transparent;
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-weight: 900;
}

.admin-audit-row b,
.admin-audit-row span,
.admin-audit-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-audit-row small {
  color: var(--theme-muted);
}

.admin-audit-empty {
  padding: 12px;
  border: 1px dashed var(--theme-border);
  border-radius: 7px;
  color: var(--theme-muted);
  background: var(--theme-surface-raised);
  font-size: 13px;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.admin-plan-orders-panel {
  margin-bottom: 12px;
}

.admin-plan-orders-table {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  overflow-x: auto;
}

.admin-finance-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 8px;
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-finance-breakdown span {
  padding: 4px 7px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-surface-raised);
}

.admin-plan-order-row {
  display: grid;
  grid-template-columns: 180px 105px 250px 190px 180px 120px 92px minmax(160px, auto);
  gap: 8px;
  align-items: center;
  min-width: 1320px;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface);
  color: var(--theme-text);
  font-size: 12px;
}

.admin-plan-order-row.head {
  min-height: 28px;
  border-color: transparent;
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-weight: 900;
}

.admin-plan-order-row > span,
.admin-plan-order-row > div,
.admin-plan-order-row b,
.admin-plan-order-row small {
  min-width: 0;
}

.admin-plan-order-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-plan-order-row small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-recharge-row span > small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-order-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.admin-order-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.admin-order-toolbar label {
  display: grid;
  gap: 3px;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-order-toolbar input,
.admin-order-toolbar select {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
}

.admin-order-toolbar input {
  width: 300px;
}

.admin-order-toolbar select {
  width: 132px;
}

.admin-order-result-count {
  margin-left: auto;
  padding-bottom: 6px;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-online-state {
  color: #71828a;
  font-weight: 800;
}

.admin-online-state.online {
  color: #0c7e73;
}

.link-button.tight {
  min-height: 24px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 900;
  text-align: left;
}

.link-button.tight:hover:not(:disabled) {
  text-decoration: underline;
}

.admin-team-panel {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.admin-team-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-team-summary span {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef5f6;
  color: #4d6871;
  font-size: 12px;
  font-weight: 800;
}

.admin-team-table {
  display: grid;
  gap: 4px;
  overflow-x: auto;
}

.admin-team-row {
  display: grid;
  grid-template-columns: 62px minmax(180px, 1fr) minmax(240px, 1.2fr) 90px minmax(160px, 0.8fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  min-width: 760px;
  padding: 6px 8px;
  border: 1px solid #e7eff1;
  border-radius: 6px;
  background: #fff;
  color: #334f5b;
  font-size: 12px;
}

.admin-team-row.head {
  min-height: 28px;
  border-color: transparent;
  background: #f2f7f8;
  color: #58717b;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .admin-system-status-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 720px) {
  .admin-system-status-grid {
    grid-template-columns: 1fr;
  }
}

.admin-side {
  display: grid;
  align-content: start;
  gap: 12px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.plan-card {
  display: grid;
  gap: 8px;
  min-height: 138px;
  padding: 12px;
  border: 1px solid #d7e6eb;
  border-radius: 8px;
  background: #fbfdfe;
}

.plan-card.selected {
  border-color: #77c9c6;
  background: #f0fbfa;
  box-shadow: 0 8px 18px rgba(8, 128, 124, 0.1);
}

.plan-card strong {
  font-size: 15px;
}

.plan-card p {
  color: var(--muted);
  line-height: 1.42;
}

.plan-registry-editor {
  display: grid;
  gap: 12px;
}

.plan-editor-band {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #f7fbfc;
}

.plan-editor-band h3,
.plan-entitlement-panel h3 {
  margin: 0 0 3px;
  font-size: 15px;
}

.plan-editor-band p,
.plan-entitlement-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.plan-editor-band .plan-inline-field {
  display: inline-grid;
  grid-template-columns: auto 76px auto;
  gap: 6px;
  align-items: center;
  color: #36525d;
}

.plan-editor-band em,
.plan-select-card em,
.entitlement-table td em {
  font-style: normal;
  color: var(--muted);
}

.plan-card-grid.compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.plan-select-card {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid #d7e6eb;
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.plan-select-card.active {
  border-color: #50bbb7;
  background: #edfafa;
  box-shadow: 0 8px 18px rgba(8, 128, 124, 0.1);
}

.plan-select-card strong {
  color: #173640;
}

.plan-select-card span {
  color: var(--primary-dark);
  font-weight: 800;
}

.plan-detail-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(5, minmax(88px, 0.7fr));
  gap: 8px;
  align-items: start;
}

.plan-agent-billing-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.agent-billing-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.agent-billing-rule {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dce9ee;
  border-radius: 7px;
  background: #fff;
}

.agent-billing-rule strong,
.agent-billing-rule span,
.agent-billing-rule small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-billing-rule b {
  color: #093d43;
  font-size: 17px;
}

.checkbox-field .inline-check {
  min-height: 36px;
}

.inline-check {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #2d4a55;
}

.inline-check b {
  font-size: 13px;
}

.tiny-number {
  max-width: 76px;
}

.short-number {
  max-width: 110px;
}

.compact-select {
  min-width: 96px;
  max-width: 130px;
}

.plan-entitlement-panel {
  display: grid;
  gap: 8px;
}

.entitlement-table-wrap {
  overflow: auto;
  border: 1px solid #d9e7ed;
  border-radius: 8px;
  background: #fff;
}

.entitlement-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 13px;
}

.entitlement-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 36px;
  padding: 0 8px;
  background: #eef6f8;
  color: #31505b;
  text-align: left;
  white-space: nowrap;
}

.entitlement-table td {
  padding: 7px 8px;
  border-top: 1px solid #e6eef2;
  vertical-align: middle;
}

.entitlement-table td:first-child {
  min-width: 260px;
}

.entitlement-table td strong,
.entitlement-table td span {
  display: block;
}

.entitlement-table td strong {
  color: #173640;
  font-size: 13px;
}

.entitlement-table td span {
  margin-top: 2px;
  color: #78909a;
  font-family: Consolas, Monaco, monospace;
  font-size: 11px;
}

.entitlement-table td em {
  display: inline-flex;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fff4d9;
  color: #8a5a00;
  font-size: 11px;
}

.entitlement-group-row td {
  height: 30px;
  padding: 0 8px;
  background: #f8fbfc;
  color: #137c78;
  font-weight: 900;
}

.layout-registry-editor {
  display: grid;
  gap: 12px;
}

.layout-registry-hero {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.15fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid #d6e7eb;
  border-radius: 8px;
  background: #f6fbfc;
}

.layout-registry-hero h3,
.layout-registry-card h3,
.layout-registry-table-title h3 {
  margin: 0 0 4px;
  color: #12323c;
  font-size: 15px;
}

.layout-registry-hero p,
.layout-registry-table-title span {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.layout-registry-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.layout-registry-kpis > div {
  min-height: 66px;
  padding: 9px 10px;
  border: 1px solid #d7e6eb;
  border-radius: 7px;
  background: #fff;
}

.layout-registry-kpis b {
  display: block;
  color: #0f313c;
  font-size: 22px;
  line-height: 1.1;
}

.layout-registry-kpis span {
  display: block;
  margin-top: 4px;
  color: #66818b;
  font-size: 12px;
}

.layout-registry-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(320px, 1.25fr) minmax(260px, 1fr);
  gap: 10px;
}

.layout-registry-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
  border: 1px solid #d9e8ed;
  border-radius: 8px;
  background: #fff;
}

.layout-registry-metric-row {
  display: grid;
  grid-template-columns: minmax(92px, auto) 48px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 32px;
  color: #35545d;
}

.layout-registry-metric-row b {
  color: var(--primary-dark);
  font-size: 17px;
}

.layout-registry-metric-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.layout-check-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #36545d;
  line-height: 1.45;
}

.layout-control-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.layout-control-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid #d7e7eb;
  border-radius: 999px;
  background: #f7fbfc;
  color: #27464f;
}

.layout-control-tags b {
  font-size: 12px;
  font-weight: 700;
}

.layout-control-tags em {
  color: var(--primary-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.layout-registry-table-wrap {
  overflow: auto;
  border: 1px solid #d7e7eb;
  border-radius: 8px;
  background: #fff;
}

.layout-registry-table-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #e2edf1;
  background: #f8fbfc;
}

.layout-registry-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 13px;
}

.layout-registry-table th {
  height: 34px;
  padding: 0 9px;
  background: #edf6f8;
  color: #31505b;
  text-align: left;
  white-space: nowrap;
}

.layout-registry-table td {
  padding: 8px 9px;
  border-top: 1px solid #e7eff2;
  color: #284852;
  vertical-align: middle;
}

.layout-registry-table td:first-child {
  min-width: 280px;
}

.layout-registry-table td strong,
.layout-registry-table td span {
  display: block;
}

.layout-registry-table td strong {
  color: #143640;
  font-size: 13px;
}

.layout-registry-table td span {
  margin-top: 2px;
  color: #78909a;
  font-family: Consolas, Monaco, monospace;
  font-size: 11px;
}

.layout-cell-warn {
  color: #b45309 !important;
  font-weight: 900;
}

.layout-registry-warning {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #f4b4a7;
  border-radius: 8px;
  background: #fff6f3;
  color: #8a2f1d;
}

.json-editor-details {
  display: grid;
  gap: 8px;
}

.json-editor-details summary {
  cursor: pointer;
  color: #32606d;
  font-weight: 800;
}

.global-announcement-stack {
  display: grid;
  gap: 6px;
  padding: 8px 14px 0;
  background: #eef5f6;
}

.global-announcement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #cbdde5;
  border-radius: 7px;
  background: #ffffff;
  color: #28444f;
}

.global-announcement.critical {
  border-color: #efb66d;
  background: #fff6e6;
  color: #7b4300;
  box-shadow: 0 8px 18px rgba(164, 91, 0, 0.12);
}

.global-announcement div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.global-announcement b {
  font-size: 14px;
}

.global-announcement span {
  font-size: 12px;
  line-height: 1.45;
}

.global-announcement button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: #f2f7f8;
  color: #3a5964;
}

.admin-maintenance-strip {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 8px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface);
  color: var(--theme-text);
}

.admin-maintenance-strip-copy,
.admin-maintenance-strip-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.admin-maintenance-strip-copy strong {
  color: var(--theme-text-strong);
  font-size: 14px;
}

.admin-maintenance-strip-copy > span:not(.admin-maintenance-status) {
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-maintenance-status {
  padding-left: 12px;
  border-left: 1px solid var(--theme-border);
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-maintenance-status.checked {
  color: var(--theme-success-text);
  font-weight: 800;
}

.admin-maintenance-strip-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.admin-maintenance-strip-actions .ghost-button,
.admin-maintenance-drawer .ghost-button {
  min-height: 30px;
  padding: 0 10px;
}

.admin-inline-action {
  min-height: 28px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--theme-success-text);
  font-size: 12px;
  font-weight: 800;
}

.admin-inline-action:hover {
  text-decoration: underline;
}

.admin-maintenance-drawer-backdrop {
  position: fixed;
  z-index: 2100;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: rgba(10, 25, 30, 0.34);
  animation: admin-maintenance-fade-in 180ms ease-out;
}

.admin-maintenance-drawer {
  display: grid;
  width: min(560px, calc(100vw - 24px));
  height: 100dvh;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--theme-border-strong);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: -12px 0 32px rgba(14, 36, 44, 0.14);
  animation: admin-maintenance-slide-in 200ms ease-out;
}

.admin-maintenance-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--theme-border);
}

.admin-maintenance-drawer-head > div:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-maintenance-drawer-head h2,
.admin-maintenance-drawer-section h3 {
  margin: 0;
  color: var(--theme-text-strong);
  letter-spacing: 0;
}

.admin-maintenance-drawer-head h2 {
  font-size: 18px;
}

.admin-maintenance-drawer-head p,
.admin-maintenance-section-head p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-maintenance-drawer-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.admin-maintenance-drawer-close {
  width: 30px;
  height: 30px;
  min-height: 30px;
  font-size: 20px;
  line-height: 1;
}

.admin-maintenance-tabs {
  display: flex;
  gap: 2px;
  padding: 7px 12px 0;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.admin-maintenance-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--theme-muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-maintenance-tabs button:hover {
  color: var(--theme-text-strong);
}

.admin-maintenance-tabs button.active {
  border-bottom-color: var(--primary);
  color: var(--theme-success-text);
}

.admin-maintenance-drawer-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px 16px;
}

.admin-maintenance-drawer-section,
.admin-diff-list,
.admin-maintenance-record-list {
  display: grid;
  gap: 8px;
}

.admin-maintenance-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-maintenance-section-head > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-maintenance-drawer-section h3 {
  font-size: 15px;
}

.admin-diff-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.admin-diff-summary span {
  display: flex;
  min-height: 48px;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-diff-summary b {
  color: var(--theme-text-strong);
  font-size: 20px;
}

.admin-diff-row,
.admin-maintenance-backup-row,
.admin-maintenance-audit-row {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
}

.admin-diff-row {
  grid-template-columns: 52px minmax(0, 1fr);
}

.admin-diff-row b {
  color: var(--theme-success-text);
  font-size: 12px;
}

.admin-diff-row span,
.admin-maintenance-backup-row b {
  min-width: 0;
  overflow: hidden;
  color: var(--theme-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-maintenance-backup-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-maintenance-backup-row > div,
.admin-maintenance-audit-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-maintenance-backup-row span,
.admin-maintenance-audit-row span,
.admin-maintenance-audit-row time {
  color: var(--theme-muted);
  font-size: 11px;
}

.admin-maintenance-backup-row button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 800;
}

.admin-maintenance-audit-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-maintenance-audit-row b {
  color: var(--theme-text-strong);
  font-size: 12px;
}

.admin-maintenance-audit-row time {
  white-space: nowrap;
}

.admin-maintenance-audit-filter {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 800;
}

.admin-maintenance-audit-filter input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.admin-maintenance-empty {
  margin: 8px 0 0;
  padding: 18px 12px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 12px;
  text-align: center;
}

.admin-maintenance-help {
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface-raised);
}

.admin-maintenance-help summary {
  padding: 10px 16px;
  color: var(--theme-text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.admin-maintenance-help ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 26px 12px 34px;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
}

@keyframes admin-maintenance-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes admin-maintenance-slide-in {
  from { transform: translateX(24px); }
  to { transform: translateX(0); }
}

@media (max-width: 680px) {
  .admin-maintenance-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-maintenance-strip-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-maintenance-status {
    width: 100%;
    padding-top: 5px;
    padding-left: 0;
    border-top: 1px solid var(--theme-border);
    border-left: 0;
  }

  .admin-maintenance-drawer {
    width: 100vw;
  }

  .admin-maintenance-drawer-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-maintenance-drawer-actions {
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-maintenance-drawer-backdrop,
  .admin-maintenance-drawer {
    animation: none;
  }
}

.admin-muted {
  margin: 0;
  color: #6a8189;
  font-size: 12px;
  line-height: 1.45;
}

.admin-subtitle {
  color: #274852;
  font-size: 13px;
  font-weight: 900;
}

.admin-diff-box,
.admin-backup-list,
.admin-audit-mini,
.admin-visual-editor,
.admin-doc-manager {
  display: grid;
  gap: 8px;
}

.admin-diff-box {
  padding: 10px;
  border: 1px solid #d8e7ed;
  border-radius: 7px;
  background: #f7fbfc;
}

.admin-diff-box strong {
  color: #274852;
  font-size: 13px;
}

.admin-diff-box span,
.admin-audit-mini-row,
.admin-backup-row,
.admin-preview-row {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #e0edf1;
  border-radius: 6px;
  background: #fbfdfe;
  color: #4c6670;
  font-size: 12px;
}

.admin-backup-row,
.admin-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.admin-message-template-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid #e0edf1;
  border-radius: 7px;
  background: #fbfdfe;
}

.admin-message-template-row label {
  display: grid;
  gap: 4px;
  color: #36535e;
  font-size: 12px;
  font-weight: 800;
}

.admin-message-template-row label.wide {
  grid-column: 1 / -1;
}

.admin-message-template-row label.inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-message-template-row input,
.admin-message-template-row textarea {
  width: 100%;
  min-height: 32px;
  border: 1px solid #cbdde5;
  border-radius: 6px;
  padding: 6px 8px;
}

.admin-message-template-row textarea {
  min-height: 72px;
  resize: vertical;
}

.admin-backup-row span,
.admin-preview-row b,
.admin-preview-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-backup-row button,
.admin-preview-row button {
  min-height: 26px;
  padding: 0 8px;
  border-radius: 5px;
  background: #eef5f6;
  color: #36535e;
}

.admin-audit-mini-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
}

.admin-audit-mini-row small {
  grid-column: 1 / -1;
  color: #7a9097;
}

.admin-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.admin-editor-grid label {
  display: grid;
  gap: 5px;
  color: #36535e;
  font-size: 12px;
  font-weight: 800;
}

.admin-editor-grid label.wide {
  grid-column: 1 / -1;
}

.admin-editor-grid input,
.admin-editor-grid select,
.admin-editor-grid textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid #cbdde5;
  border-radius: 6px;
  background: #fff;
  color: #223b44;
  padding: 7px 9px;
}

.admin-editor-grid textarea {
  min-height: 92px;
  resize: vertical;
}

.admin-editor-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-editor-actions span {
  color: #6a8189;
  font-size: 12px;
}

.danger-button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  background: #fff1f1;
  color: #b42318;
  border: 1px solid #f2b8b5;
  font-weight: 900;
}

.admin-list-preview,
.admin-dictionary-block {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #f8fbfc;
}

.admin-list-preview h3,
.admin-dictionary-block h3 {
  margin: 0;
  color: #274852;
  font-size: 14px;
}

.admin-dictionary-block p {
  margin: 2px 0 0;
  color: #6a8189;
  font-size: 12px;
}

.agent-config-editor {
  gap: 12px;
}

.admin-compact-editor {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.fields-registry-editor {
  gap: 10px;
}

.fields-registry-toolbar > label {
  display: grid;
  flex: 0 1 420px;
  gap: 4px;
  min-width: 280px;
  color: #36535e;
  font-size: 12px;
  font-weight: 800;
}

.fields-registry-toolbar select,
.fields-registry-copy-grid input,
.fields-registry-copy-grid textarea,
.fields-registry-field-row input,
.fields-registry-field-row textarea {
  width: 100%;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid #cbdde5;
  border-radius: 6px;
  background: #fff;
  color: #223b44;
  font: inherit;
}

.fields-registry-toolbar select:focus,
.fields-registry-copy-grid input:focus,
.fields-registry-copy-grid textarea:focus,
.fields-registry-field-row input:focus,
.fields-registry-field-row textarea:focus {
  border-color: #48aaa6;
  outline: 2px solid rgba(8, 169, 164, .16);
  outline-offset: 1px;
}

.fields-registry-module-copy {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.fields-registry-module-head,
.fields-registry-module-head > div,
.fields-registry-section summary,
.fields-registry-field-meta {
  display: flex;
  align-items: center;
}

.fields-registry-module-head {
  justify-content: space-between;
  gap: 10px;
}

.fields-registry-module-head > div {
  gap: 8px;
  min-width: 0;
}

.fields-registry-module-head strong {
  color: #203c45;
  font-size: 14px;
}

.fields-registry-module-head code,
.fields-registry-field-meta code {
  color: #6a8189;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.fields-registry-module-head > span,
.fields-registry-section summary small {
  color: #66808a;
  font-size: 12px;
  font-weight: 800;
}

.fields-registry-copy-grid {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(420px, 1.28fr);
  gap: 8px;
}

.fields-registry-copy-grid label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #36535e;
  font-size: 12px;
  font-weight: 800;
}

.fields-registry-copy-grid textarea,
.fields-registry-field-row textarea {
  line-height: 1.45;
  resize: vertical;
}

.fields-registry-sections {
  display: grid;
  gap: 8px;
}

.fields-registry-section {
  overflow: clip;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #fff;
}

.fields-registry-section summary {
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 7px 10px;
  background: #f3f9fa;
  color: #203c45;
  cursor: pointer;
  font-weight: 900;
}

.fields-registry-section[open] summary {
  border-bottom: 1px solid #d8e7ed;
  background: #edf8f7;
  color: #076c68;
}

.fields-registry-section-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.fields-registry-copy-grid.section-copy {
  padding-bottom: 8px;
  border-bottom: 1px dashed #dce8ec;
}

.fields-registry-field-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #e0ebee;
  border-radius: 7px;
}

.fields-registry-field-item {
  display: grid;
  gap: 5px;
  padding: 7px 8px;
  border-top: 1px solid #e6eff2;
}

.fields-registry-field-item:first-of-type {
  border-top: 0;
}

.fields-registry-field-item:hover {
  background: #f9fcfd;
}

.fields-registry-field-meta {
  justify-content: space-between;
  gap: 8px;
}

.fields-registry-field-meta span {
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef5f6;
  color: #58717b;
  font-size: 11px;
  font-weight: 800;
}

.fields-registry-field-row {
  display: grid;
  grid-template-columns: minmax(180px, .62fr) minmax(320px, 1.18fr) minmax(280px, 1fr);
  gap: 7px;
  min-width: 0;
}

.fields-registry-field-row.head {
  padding: 6px 8px;
  background: #eef7f8;
  color: #45626c;
  font-size: 12px;
  font-weight: 900;
}

.fields-registry-field-row label {
  min-width: 0;
}

.fields-registry-field-row .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fields-registry-field-row textarea {
  min-height: 52px;
}

@media (max-width: 1120px) {
  .fields-registry-copy-grid,
  .fields-registry-field-row {
    grid-template-columns: 1fr 1fr;
  }

  .fields-registry-field-row > :last-child,
  .fields-registry-field-row.head > :last-child {
    grid-column: 1 / -1;
  }

}

@media (max-width: 760px) {
  .fields-registry-toolbar,
  .fields-registry-module-head {
    align-items: stretch;
    flex-direction: column;
  }

  .fields-registry-toolbar > label {
    flex-basis: auto;
    min-width: 0;
  }

  .fields-registry-copy-grid,
  .fields-registry-field-row {
    grid-template-columns: 1fr;
  }

  .fields-registry-field-row > :last-child,
  .fields-registry-field-row.head > :last-child {
    grid-column: auto;
  }

}

/* 设置中心：六组轻量设置，不把短控件拉满整行。 */
.settings-center-compact {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.settings-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.settings-return-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 账号、设置和生成历史使用独立整页层；底层工具页保持挂载，返回时原位置和未保存输入仍在。 */
.standalone-page-layer {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: auto;
  overscroll-behavior: contain;
  background: #f3f8f8;
}

.standalone-page-layer.suspended {
  visibility: hidden;
  pointer-events: none;
}

.standalone-page-layer.active {
  visibility: visible;
  pointer-events: auto;
}

.standalone-settings-center {
  padding: 22px 24px 42px;
}

html[data-theme="dark"] .standalone-page-layer {
  background: var(--dark-bg, #101719);
}

@media (max-width: 760px) {
  .standalone-settings-center {
    padding: 14px 12px 30px;
  }

  .settings-page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-return-button {
    align-self: flex-start;
  }
}

.settings-compact-board {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.settings-compact-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.settings-compact-section:last-child {
  border-bottom: 0;
}

.settings-compact-section > header {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  margin-bottom: 12px;
}

.settings-section-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line));
  border-radius: 7px;
  background: var(--primary-soft);
  color: var(--primary-dark);
}

.settings-compact-section h2 {
  margin: 1px 0 3px;
  color: var(--text);
  font-size: 15px;
}

.settings-compact-section header p,
.settings-field > span,
.settings-shop-summary small,
.local-component-row small,
.captcha-provider-row small {
  color: var(--muted);
}

.settings-compact-section header p {
  line-height: 1.45;
}

.settings-section-action,
.settings-section-action-row,
.settings-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.settings-section-action button,
.settings-editor-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.settings-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  align-items: start;
  gap: 10px 16px;
}

.settings-appearance-grid {
  grid-template-columns: minmax(250px, 1.25fr) minmax(140px, .7fr) minmax(250px, 1.2fr) minmax(120px, .55fr);
  grid-template-areas:
    "theme collapse group width";
}

.settings-appearance-grid > .settings-field.settings-appearance-theme {
  grid-area: theme;
}

.settings-appearance-grid > .settings-field.settings-appearance-width {
  grid-area: width;
}

.settings-appearance-grid > .settings-field.settings-appearance-collapse {
  grid-area: collapse;
}

.settings-appearance-grid > .settings-field.settings-appearance-group-mode {
  grid-area: group;
}

.settings-appearance-collapse .settings-switch-row {
  width: fit-content;
  min-height: 36px;
  padding: 7px 9px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  box-shadow: none;
}

.settings-appearance-collapse .settings-switch-row strong {
  line-height: 20px;
}

.settings-appearance-width .settings-number input {
  height: 36px;
}

.settings-runtime-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "close task-center"
    "awake awake"
    "notifications notifications";
  gap: 12px 16px;
}

.settings-runtime-grid > .settings-field.settings-runtime-close {
  grid-area: close;
}

.settings-runtime-grid > .settings-field.settings-runtime-task-center {
  grid-area: task-center;
}

.settings-runtime-grid > .settings-field.settings-runtime-awake {
  grid-area: awake;
}

.settings-runtime-grid > .settings-field.settings-runtime-notifications {
  grid-area: notifications;
}

.settings-notification-row {
  min-height: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.settings-notification-row .settings-switch-row {
  min-width: 300px;
  min-height: 40px;
}

.settings-notification-events {
  min-height: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.settings-notification-events > strong {
  font-size: 12px;
  font-weight: 700;
}

.settings-notification-events input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  padding: 0;
}

.settings-notification-events .settings-checks label {
  white-space: nowrap;
}

.settings-field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.settings-field > span {
  font-size: 12px;
  font-weight: 700;
}

.settings-field.wide-option,
.settings-field.path {
  grid-column: span 2;
}

.settings-field.short {
  max-width: 240px;
}

.settings-field input,
.settings-field select,
.captcha-routing-grid select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  outline: 0;
  background: var(--surface);
  color: var(--text);
}

.settings-field input:focus,
.settings-field select:focus,
.captcha-routing-grid select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}

.settings-segmented {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.settings-segmented button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}

.settings-segmented button.active {
  background: var(--surface);
  color: var(--primary-dark);
  box-shadow: 0 1px 4px rgba(20, 53, 60, 0.13);
  font-weight: 800;
}

.settings-number {
  display: flex;
  align-items: center;
  gap: 7px;
}

.settings-number input {
  width: 92px;
}

.settings-number b {
  color: var(--muted);
  font-size: 12px;
}

.settings-switch-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.settings-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex: 0 0 36px;
  border-radius: 999px;
  background: var(--line-strong);
}

.settings-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 150ms ease;
}

.settings-switch.on {
  background: var(--primary);
}

.settings-switch.on span {
  transform: translateX(16px);
}

.settings-switch-row > div {
  display: grid;
  gap: 2px;
}

.settings-switch-row strong {
  color: var(--text);
  font-size: 13px;
}

.settings-switch-row small {
  color: var(--muted);
  line-height: 1.35;
}

.settings-switch-row.disabled {
  opacity: .58;
}

.settings-shop-grid,
.local-component-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.settings-shop-summary,
.local-component-row,
.captcha-provider-row {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.settings-shop-summary {
  grid-template-columns: 52px minmax(100px, .7fr) minmax(180px, 1.3fr);
}

.settings-shop-summary > span {
  color: var(--primary-dark);
  font-weight: 800;
}

.settings-shop-summary strong,
.settings-shop-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-environment-device-summary {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) repeat(2, minmax(110px, 150px));
  gap: 8px;
  margin-bottom: 8px;
}

.settings-environment-device-summary > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.settings-environment-device-summary span,
.settings-environment-path > span,
.settings-environment-meta > span {
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 700;
}

.settings-environment-device-summary strong {
  overflow: hidden;
  color: var(--theme-text-strong);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-environment-note {
  margin-bottom: 10px;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.55;
}

.settings-environment-owner-list,
.settings-environment-list {
  display: grid;
  gap: 8px;
}

.settings-environment-owner {
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface);
}

.settings-environment-owner.retired {
  border-style: dashed;
  background: var(--theme-surface-elevated);
}

.settings-environment-owner.retired > header {
  background: var(--theme-surface-elevated);
}

.settings-environment-owner.retired .settings-environment-owner-title > span {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.settings-environment-owner > header {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface-raised);
}

.settings-environment-owner-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.settings-environment-owner-title > span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid var(--theme-success-border);
  border-radius: 999px;
  background: var(--theme-success);
  color: var(--theme-success-text);
  font-size: 11px;
  font-weight: 800;
}

.settings-environment-owner-title > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.settings-environment-owner-title strong {
  overflow: hidden;
  color: var(--theme-text-strong);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-environment-owner-title small {
  color: var(--theme-muted);
  line-height: 1.35;
}

.settings-environment-cleanup {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  color: var(--theme-muted);
}

.settings-environment-list {
  padding: 8px;
}

.settings-environment-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(160px, .7fr) minmax(280px, 1.7fr) minmax(130px, .65fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 8px 9px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.settings-environment-identity,
.settings-environment-path,
.settings-environment-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.settings-environment-identity > strong,
.settings-environment-meta > strong {
  overflow: hidden;
  color: var(--theme-text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-environment-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
  color: var(--theme-muted);
  font-size: 11px;
}

.settings-environment-badge {
  padding: 2px 6px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 999px;
  background: var(--theme-surface);
  color: var(--theme-muted);
  font-weight: 800;
}

.settings-environment-badge.ready {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.settings-environment-badge.warning {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.settings-environment-badge.busy {
  border-color: var(--theme-info-border);
  background: var(--theme-info);
  color: var(--theme-info-text);
}

.settings-environment-badge.danger {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
  color: var(--theme-danger-text);
}

.settings-environment-path code {
  overflow: hidden;
  color: var(--theme-text);
  font-family: inherit;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-environment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.settings-environment-actions button {
  white-space: nowrap;
}

.settings-environment-retired-note {
  color: var(--theme-muted);
  font-size: 12px;
  white-space: nowrap;
}

.settings-environment-warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid var(--theme-warning-border);
  border-radius: 7px;
  background: var(--theme-warning);
  color: var(--theme-warning-text);
  font-size: 12px;
  line-height: 1.5;
}

.settings-environment-warning strong {
  flex: 0 0 auto;
  color: var(--theme-warning-text);
}

.settings-environment-warning span {
  color: var(--theme-warning-text);
}

.settings-template-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 9px;
}

.settings-template-toolbar .settings-segmented {
  flex: 1 1 760px;
  width: auto;
  min-width: 0;
  flex-wrap: wrap;
}

.settings-template-toolbar > small {
  color: var(--muted);
  white-space: nowrap;
}

.settings-template-list {
  display: grid;
  gap: 6px;
}

.settings-template-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(160px, .9fr) minmax(170px, .8fr) auto;
  align-items: center;
  gap: 10px 14px;
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.settings-template-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.settings-template-name strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-template-name span,
.settings-template-areas span {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
}

.settings-template-row > span,
.settings-template-row > small {
  color: var(--muted);
}

.settings-template-actions,
.settings-template-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.settings-template-actions button,
.settings-template-modal-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.settings-template-locked {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.settings-template-delete-button {
  color: var(--danger);
  font-weight: 700;
}

.settings-template-modal-mask {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: color-mix(in srgb, var(--text) 48%, transparent);
}

.settings-template-modal {
  width: min(520px, 100%);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 54px rgba(8, 35, 40, .24);
}

.settings-template-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.settings-template-modal > header > div {
  display: grid;
  gap: 3px;
}

.settings-template-modal > header strong {
  color: var(--text);
  font-size: 15px;
}

.settings-template-modal > header small {
  color: var(--muted);
}

.settings-template-modal-body {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.settings-template-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.settings-template-meta > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.settings-template-meta dt {
  color: var(--muted);
  font-size: 11px;
}

.settings-template-meta dd {
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-template-areas {
  display: grid;
  gap: 8px;
}

.settings-template-areas > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-template-warning {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.settings-template-warning strong {
  color: var(--text);
}

.settings-template-warning p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .settings-template-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-template-toolbar .settings-segmented {
    flex-wrap: wrap;
  }

  .settings-template-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .settings-template-row > span,
  .settings-template-row > small {
    grid-column: 1;
  }

  .settings-template-actions {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

@media (max-width: 620px) {
  .settings-template-meta {
    grid-template-columns: 1fr;
  }
}

.settings-checks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.settings-checks label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  cursor: pointer;
}

.settings-inline-note,
.settings-empty-line {
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  line-height: 1.45;
}

.settings-inline-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.captcha-provider-list {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}

.captcha-provider-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.captcha-provider-row > div {
  display: grid;
  gap: 2px;
}

.captcha-provider-row > span,
.local-component-row > b {
  font-size: 12px;
}

.captcha-provider-row > span.ok,
.local-component-row > span.ok {
  color: var(--primary-dark);
}

.captcha-provider-row > span.warning,
.local-component-row > span.warning {
  color: var(--warning);
}

.captcha-provider-editor {
  display: grid;
  grid-template-columns: 220px minmax(300px, 1fr) 190px 220px;
  align-items: end;
  gap: 10px;
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-soft);
}

.captcha-provider-editor .settings-editor-actions {
  grid-column: 1 / -1;
}

.captcha-routing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px 12px;
}

.captcha-routing-grid label {
  display: grid;
  gap: 5px;
}

.captcha-routing-grid label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.local-component-row {
  grid-template-columns: 8px minmax(0, 1fr) auto;
  min-height: 64px;
}

.local-component-row > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.local-component-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.local-component-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-runtime-summary-grid {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 12px 18px;
}

.settings-software-version-line {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 8px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--theme-border);
}

.settings-software-version-line > span {
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-software-version-line > strong {
  color: var(--theme-text-strong);
  font-size: 13px;
  white-space: nowrap;
}

.settings-software-version-line + .settings-inline-note {
  margin-bottom: 10px;
}

.settings-runtime-summary-grid > .local-component-grid {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.settings-disclosure {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.settings-disclosure > summary {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 2px 0;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.settings-disclosure > summary::-webkit-details-marker {
  display: none;
}

.settings-disclosure > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
}

.settings-disclosure > summary > small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-disclosure-chevron {
  color: var(--muted);
  transition: transform 150ms ease;
}

.settings-disclosure[open] .settings-disclosure-chevron {
  transform: rotate(180deg);
}

.settings-disclosure-body {
  padding: 12px 0 2px;
}

.settings-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.settings-path-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.settings-path-control button {
  white-space: nowrap;
}

.settings-human-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.settings-human-row .settings-inline-note {
  flex: 1 1 360px;
}

.settings-captcha-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.settings-captcha-toolbar > div:first-child {
  display: grid;
  gap: 2px;
}

.settings-captcha-toolbar small {
  color: var(--muted);
}

.settings-ai-grid {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(300px, 1.25fr) minmax(240px, .85fr);
  align-items: center;
  gap: 12px 18px;
}

.settings-status-line {
  min-height: 44px;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.settings-status-line > span,
.settings-cloud-status > span::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.settings-status-line > span.ok {
  background: var(--primary);
}

.settings-status-line > div {
  display: grid;
  gap: 2px;
}

.settings-status-line small {
  color: var(--muted);
}

.settings-cloud-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
  align-items: stretch;
  gap: 8px 12px;
}

.settings-cloud-status {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.settings-cloud-status > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-cloud-status > strong {
  color: var(--text);
  font-size: 14px;
}

.settings-cloud-status > small {
  color: var(--muted);
  line-height: 1.35;
}

.settings-cloud-actions {
  display: grid;
  align-content: center;
  gap: 7px;
}

.settings-cloud-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.agent-workbench-preference-row {
  display: inline-flex;
  width: fit-content;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.agent-workbench-preference-row button {
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
}

.agent-workbench-preference-row button.active {
  background: var(--surface);
  color: var(--primary-dark);
  box-shadow: 0 1px 4px rgba(20, 53, 60, 0.13);
  font-weight: 800;
}

@media (max-width: 1100px) {
  .settings-appearance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "theme width"
      "collapse group";
  }

  .settings-runtime-summary-grid,
  .settings-ai-grid {
    grid-template-columns: 1fr;
  }

  .settings-cloud-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-cloud-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
  }

  .settings-environment-row {
    grid-template-columns: minmax(150px, .7fr) minmax(240px, 1.3fr) minmax(130px, .6fr);
  }

  .settings-environment-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .settings-field-grid,
  .settings-path-grid,
  .captcha-provider-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .captcha-routing-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 680px) {
  .settings-compact-section {
    padding: 14px 12px;
  }

  .settings-compact-section > header {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .settings-section-action {
    grid-column: 2;
    justify-content: flex-start;
  }

  .settings-field-grid,
  .settings-shop-grid,
  .local-component-grid,
  .captcha-provider-editor,
  .captcha-routing-grid {
    grid-template-columns: 1fr;
  }

  .settings-appearance-grid {
    grid-template-areas:
      "theme"
      "width"
      "collapse"
      "group";
  }

  .settings-runtime-grid {
    grid-template-areas:
      "close"
      "task-center"
      "floating"
      "awake"
      "notifications";
  }

  .settings-notification-row .settings-switch-row {
    min-width: 0;
  }

  .settings-field.wide-option,
  .settings-field.path {
    grid-column: auto;
  }

  .settings-shop-summary {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .settings-shop-summary small {
    grid-column: 2;
  }

  .settings-environment-device-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-environment-device-summary > div:first-child {
    grid-column: 1 / -1;
  }

  .settings-environment-owner > header,
  .settings-environment-warning {
    align-items: stretch;
    flex-direction: column;
  }

  .settings-environment-cleanup {
    align-self: flex-start;
  }

  .settings-environment-row {
    grid-template-columns: 1fr;
  }

  .settings-environment-actions {
    grid-column: auto;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .settings-segmented {
    overflow-x: auto;
  }

  .settings-runtime-summary-grid > .local-component-grid,
  .settings-cloud-grid,
  .settings-path-grid {
    grid-template-columns: 1fr;
  }

  .settings-cloud-actions {
    grid-column: auto;
    justify-content: stretch;
  }

  .settings-captcha-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-disclosure > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .settings-disclosure > summary > small {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: normal;
  }

  .captcha-provider-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .captcha-provider-row > div:first-child {
    grid-column: 1 / -1;
  }
}

/* 深色模式覆盖共享壳层、表单、弹窗和通用业务面板；浅色规则保持原样。 */
html[data-theme="dark"] body,
html[data-theme="dark"] #root,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .main {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .template-strip,
html[data-theme="dark"] .action-hub,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .agent-workbench-page,
html[data-theme="dark"] .agent-workspace-sidebar,
html[data-theme="dark"] .agent-workbench-main,
html[data-theme="dark"] .agent-tool-panel,
html[data-theme="dark"] .agent-assistant-drawer,
html[data-theme="dark"] .task-center-page,
html[data-theme="dark"] .settings-compact-board {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .plain-select,
html[data-theme="dark"] .compact-input,
html[data-theme="dark"] .path-input input {
  background-color: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--text);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--soft-text);
}

html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .text-button,
html[data-theme="dark"] .sidebar-edge-toggle {
  background-color: var(--surface-soft);
  border-color: var(--line-strong);
  color: var(--text);
}

html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] [class*="row"],
html[data-theme="dark"] [class*="item"] {
  border-color: var(--line);
}

html[data-theme="dark"] .mantine-Modal-content,
html[data-theme="dark"] .mantine-Drawer-content,
html[data-theme="dark"] .mantine-Popover-dropdown,
html[data-theme="dark"] .mantine-Menu-dropdown,
html[data-theme="dark"] .app-notification {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

.admin-editor-actions-tight {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #f8fbfc;
}

.admin-editor-actions-tight > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-editor-actions-tight b {
  color: #203c45;
  font-size: 14px;
}

.admin-editor-actions-tight span {
  color: #66808a;
  font-size: 12px;
  line-height: 1.35;
}

.admin-inline-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.admin-inline-settings label {
  display: grid;
  gap: 4px;
  color: #36535e;
  font-size: 12px;
  font-weight: 800;
}

.admin-inline-settings label.wide {
  flex: 1 1 520px;
  min-width: 360px;
}

.admin-inline-checkbox {
  min-height: 30px;
  align-self: end;
  padding: 0 4px 5px;
}

.admin-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 10px;
  padding: 8px 10px;
  border: 1px solid #d8e7ed;
  border-radius: 7px;
  background: #fbfdfe;
}

.admin-filter-bar label {
  display: grid;
  gap: 3px;
  color: #45616a;
  font-size: 12px;
  font-weight: 800;
}

.admin-filter-bar input,
.admin-filter-bar select {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #cbdde5;
  border-radius: 5px;
  background: #fff;
  color: #223b44;
}

.admin-filter-bar input {
  width: 280px;
}

.admin-filter-bar select {
  width: 132px;
}

.admin-filter-bar > span {
  margin-left: auto;
  padding-bottom: 6px;
  color: #607983;
  font-size: 12px;
  font-weight: 800;
}

.admin-config-state {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.admin-config-state.ready {
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.admin-config-state.pending {
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.wallet-label-settings label {
  flex: 0 1 auto;
}

.admin-policy-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--theme-success-border);
  border-radius: 6px;
  background: var(--theme-success);
  color: var(--theme-text);
  font-size: 12px;
}

.admin-policy-note b {
  color: var(--theme-success-text);
  white-space: nowrap;
}

.maintenance-policy-note {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
}

.maintenance-policy-note b {
  color: var(--theme-warning-text);
}

.compact-announcement-grid {
  grid-template-columns: minmax(260px, 1fr) 150px 220px 220px;
  gap: 8px;
}

.compact-announcement-grid label.wide {
  grid-column: 1 / -1;
}

.compact-announcement-grid textarea {
  min-height: 52px;
}

.announcement-admin-editor {
  gap: 8px;
}

.announcement-admin-editor .admin-table-block {
  gap: 6px;
  padding: 8px;
}

.announcement-admin-editor .admin-table-scroll {
  max-height: 190px;
  overflow: auto;
}

.announcement-admin-editor .admin-data-table th,
.announcement-admin-editor .admin-data-table td {
  padding-top: 5px;
  padding-bottom: 5px;
}

.announcement-table .compact-input.xxl,
.message-template-table .compact-input.xxl {
  width: 360px;
}

.task-filter-row {
  grid-template-columns: minmax(160px, 0.7fr) minmax(280px, 1.4fr) auto minmax(90px, auto);
}

.runtime-admin-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 10px 12px;
}

.runtime-admin-grid label {
  display: grid;
  gap: 4px;
  color: #36535e;
  font-size: 12px;
  font-weight: 800;
}

.runtime-admin-grid > .wide {
  grid-column: 1 / -1;
}

.runtime-admin-grid input,
.runtime-admin-grid select,
.runtime-admin-grid textarea {
  min-height: 32px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #cbdde5;
  border-radius: 5px;
  background: #fff;
  color: #223b44;
}

.runtime-admin-grid textarea {
  min-height: 70px;
  resize: vertical;
}

.runtime-admin-grid small {
  color: #71858d;
  font-weight: 500;
}

/* 服务器与任务节点：短数值保持短控件，字段说明直接展示给管理员。 */
.server-nodes-editor {
  container-name: server-nodes;
  container-type: inline-size;
  gap: 8px;
}

.server-nodes-editor .admin-table-block {
  gap: 10px;
  padding: 11px 12px;
}

.server-node-intro,
.server-node-auto-note {
  align-items: flex-start;
  line-height: 1.55;
}

.server-node-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px 18px;
  min-width: 0;
}

.server-node-strategy-layout {
  display: grid;
  gap: 11px;
  min-width: 0;
}

.server-node-strategy-group {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.server-node-strategy-group + .server-node-strategy-group {
  padding-top: 9px;
  border-top: 1px solid var(--theme-border);
}

.server-node-subsection {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  line-height: 1.4;
}

.server-node-subsection b {
  flex: 0 0 auto;
  color: var(--theme-text-strong);
  font-size: 12px;
}

.server-node-subsection span {
  color: var(--theme-muted);
  font-size: 11px;
}

.server-node-strategy-fields {
  display: grid;
  justify-content: start;
  gap: 10px 16px;
  min-width: 0;
}

.server-node-strategy-fields--four {
  grid-template-columns: repeat(4, minmax(205px, 245px));
}

.server-node-strategy-fields--three {
  grid-template-columns: repeat(3, minmax(220px, 260px));
}

.server-node-strategy-fields--two {
  grid-template-columns: repeat(2, minmax(280px, 360px));
}

.server-node-field {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  color: var(--theme-text);
  font-size: 12px;
}

.server-node-field--quarter {
  grid-column: span 3;
}

.server-node-field--third {
  grid-column: span 4;
}

.server-node-field--half {
  grid-column: span 6;
}

.server-node-field--wide {
  grid-column: 1 / -1;
}

.server-node-field-title {
  color: var(--theme-text-strong);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.server-node-field input,
.server-node-field select,
.server-node-field textarea {
  box-sizing: border-box;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  font: inherit;
}

.server-node-field input:focus,
.server-node-field select:focus,
.server-node-field textarea:focus {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 18%, transparent);
  outline-offset: 0;
}

.server-node-field > input,
.server-node-field > select {
  justify-self: start;
}

.server-node-control--toggle {
  width: 128px;
}

.server-node-control--mode {
  width: 148px;
}

.server-node-control--region {
  width: 168px;
}

.server-node-control--number {
  width: 88px;
}

.server-node-unit-control {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
}

.server-node-unit-control input {
  width: 88px;
}

.server-node-unit-control b {
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.server-node-field textarea {
  width: 100%;
  min-height: 82px;
  resize: vertical;
  line-height: 1.5;
}

.server-node-field--half > input {
  width: min(100%, 520px);
}

.server-node-field small {
  max-width: 46ch;
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.server-node-field--multiline small {
  max-width: none;
}

.server-node-auto-note {
  margin: 0;
}

@container server-nodes (max-width: 980px) {
  .server-node-strategy-fields--four {
    grid-template-columns: repeat(2, minmax(220px, 330px));
  }

  .server-node-strategy-fields--three {
    grid-template-columns: repeat(3, minmax(180px, 230px));
  }

  .server-node-strategy-fields--two {
    grid-template-columns: repeat(2, minmax(240px, 330px));
  }

  .server-node-field--quarter {
    grid-column: span 6;
  }

  .server-node-field--third {
    grid-column: span 4;
  }
}

@container server-nodes (max-width: 680px) {
  .server-node-strategy-fields--four,
  .server-node-strategy-fields--three,
  .server-node-strategy-fields--two {
    grid-template-columns: minmax(0, 1fr);
  }

  .server-node-subsection {
    display: grid;
    gap: 2px;
  }

  .server-node-field--quarter,
  .server-node-field--third,
  .server-node-field--half {
    grid-column: 1 / -1;
  }

  .server-node-intro,
  .server-node-auto-note {
    display: grid;
    gap: 3px;
  }

  .server-node-intro b,
  .server-node-auto-note b {
    white-space: normal;
  }
}

.admin-path-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.admin-path-control button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #c9dde3;
  border-radius: 5px;
  background: #f6fafb;
  color: #31515c;
  font-size: 12px;
  font-weight: 800;
}

.admin-doc-status-filter {
  min-height: 32px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #cbdde5;
  border-radius: 5px;
  background: #fff;
  color: #29434d;
}

.admin-unsaved-indicator,
.admin-saved-indicator {
  font-size: 12px;
  font-weight: 800;
}

.admin-unsaved-indicator {
  color: #a45d07;
}

.admin-saved-indicator {
  color: #0c766d;
}

@media (max-width: 1180px) {
  .compact-announcement-grid,
  .runtime-admin-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .compact-announcement-grid,
  .runtime-admin-grid {
    grid-template-columns: 1fr;
  }

  .compact-announcement-grid label.wide,
  .runtime-admin-grid > .wide {
    grid-column: 1;
  }

  .admin-order-toolbar input,
  .admin-filter-bar input {
    width: min(100%, 300px);
  }
}

.admin-table-block {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.admin-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.admin-section-head h3 {
  margin: 0;
  color: #203c45;
  font-size: 14px;
}

.admin-section-head p {
  margin: 0;
  color: #66808a;
  font-size: 12px;
}

.admin-table-scroll {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid #ddebef;
  border-radius: 7px;
  background: #fff;
}

.admin-data-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  color: #263f48;
  font-size: 12px;
}

.admin-data-table th,
.admin-data-table td {
  padding: 6px 7px;
  border-bottom: 1px solid #e6eff2;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef7f8;
  color: #45626c;
  font-weight: 900;
}

.admin-data-table tr:hover td {
  background: #f8fcfd;
}

.admin-data-table code {
  color: #49646e;
  font-size: 11px;
}

.admin-cell-code {
  margin-top: 3px;
  color: #7b8d94;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.admin-parent-row td {
  background: #f4fbfa;
  font-weight: 800;
}

.compact-input {
  min-height: 30px;
  width: 150px;
  padding: 5px 7px;
  border: 1px solid #cbdde5;
  border-radius: 5px;
  background: #fff;
  color: #223b44;
  font-size: 12px;
}

.compact-input.xs {
  width: 68px;
}

.compact-input.sm {
  width: 110px;
}

.compact-input.md {
  width: 165px;
}

.compact-input.lg {
  width: 220px;
}

.compact-input.xl {
  width: 300px;
}

.compact-input.xxl {
  width: 420px;
}

.compact-input.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.compact-input.child {
  padding-left: 18px;
}

.admin-row-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.admin-row-actions button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-surface);
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 800;
}

.admin-row-actions button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.agent-model-admin .agent-toolbar-actions {
  justify-content: flex-end;
}

.agent-model-admin .agent-pricing-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 14px;
  align-items: end;
  padding: 8px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
}

.agent-model-admin .agent-pricing-control-row > label {
  display: grid;
  gap: 3px;
  color: var(--theme-muted);
  font-size: 11px;
}

.agent-model-admin .segmented-control {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
}

.agent-model-admin .segmented-control button {
  min-height: 27px;
  padding: 2px 9px;
  border: 0;
  border-left: 1px solid var(--theme-border-strong);
  background: var(--theme-control);
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 700;
}

.agent-model-admin .segmented-control button:first-child {
  border-left: 0;
}

.agent-model-admin .segmented-control button.active {
  background: var(--primary);
  color: var(--theme-on-accent);
}

.agent-pricing-reference {
  display: grid;
  gap: 2px;
  min-width: 260px;
  padding-bottom: 1px;
}

.agent-pricing-reference b {
  color: var(--theme-text);
  font-size: 11px;
}

.agent-pricing-reference small,
.agent-pricing-explanation {
  color: var(--theme-muted);
  font-size: 10px;
  line-height: 1.35;
}

.agent-pricing-explanation {
  margin: 6px 0 8px;
}

.agent-model-admin .agent-channel-triple-fields input[readonly] {
  cursor: default;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  font-weight: 700;
}

.agent-model-admin .agent-channel-table-wrap {
  overflow-x: hidden;
}

.agent-model-admin .agent-channel-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.agent-model-admin .agent-channel-table th:nth-child(1) { width: 7%; }
.agent-model-admin .agent-channel-table th:nth-child(2) { width: 10%; }
.agent-model-admin .agent-channel-table th:nth-child(3) { width: 19%; }
.agent-model-admin .agent-channel-table th:nth-child(4) { width: 17%; }
.agent-model-admin .agent-channel-table th:nth-child(5) { width: 20%; }
.agent-model-admin .agent-channel-table th:nth-child(6) { width: 20%; }
.agent-model-admin .agent-channel-table th:nth-child(7) { width: 7%; }

.agent-model-admin .agent-channel-table td {
  vertical-align: top;
  white-space: normal;
}

.agent-channel-cell,
.agent-channel-status-cell,
.agent-channel-triple-fields {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.agent-channel-status-cell label {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--theme-text);
  font-size: 11px;
  white-space: nowrap;
}

.agent-channel-cell > label,
.agent-channel-triple-fields label,
.agent-channel-mini-fields label {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--theme-muted);
  font-size: 10px;
}

.agent-channel-cell :is(input, select),
.agent-channel-triple-fields input,
.agent-channel-mini-fields input {
  box-sizing: border-box;
  min-height: 27px;
  width: 100%;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 11px;
}

.agent-channel-cell .agent-channel-name {
  font-weight: 800;
}

.agent-channel-cell code {
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-channel-mini-fields,
.agent-channel-triple-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.agent-model-admin .agent-channel-mini-fields {
  grid-template-columns: 44px minmax(46px, 1fr) 44px;
  gap: 4px;
}

.agent-model-admin .agent-channel-mini-fields input {
  padding-inline: 5px;
}

.agent-model-admin .agent-token-unit-price-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agent-model-admin .agent-token-unit-price-fields input {
  padding-inline: 4px;
  font-size: 10px;
}

.agent-secret-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
}

.agent-channel-cell .agent-secret-input-row button {
  min-height: 27px;
  padding: 3px 7px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-surface-raised);
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.agent-channel-cell .agent-secret-input-row button:disabled {
  cursor: wait;
  opacity: .55;
}

.agent-channel-api-cell small {
  color: var(--theme-muted);
  font-size: 9px;
  line-height: 1.35;
}

.agent-model-admin .agent-channel-table .admin-row-actions button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

@media (max-width: 1280px) {
  .agent-pricing-reference {
    min-width: 0;
    width: 100%;
  }
}

.agent-model-admin {
  container-type: inline-size;
}

.agent-model-page-intro {
  align-items: center;
}

.agent-model-page-intro > div {
  max-width: 76ch;
}

.agent-model-tabs {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.agent-model-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.agent-model-tabs button:hover {
  background: var(--theme-hover);
  color: var(--theme-text-strong);
}

.agent-model-tabs button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 28%, transparent);
  outline-offset: 1px;
}

.agent-model-tabs button.is-active {
  background: var(--theme-active);
  color: var(--theme-success-text);
}

.agent-model-tabs button span {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--theme-surface);
  color: inherit;
  font-size: 10px;
}

.agent-compatibility-settings:not([open]) > :not(summary),
.agent-extension-settings:not([open]) > :not(summary) {
  display: none;
}

.agent-model-tab-panel,
.agent-provider-stack,
.agent-provider-model-list,
.agent-token-price-list,
.agent-route-list,
.agent-extension-settings-body {
  display: grid;
  min-width: 0;
}

.agent-model-tab-panel {
  gap: 10px;
}

.agent-provider-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.agent-provider-toolbar > div {
  display: grid;
  gap: 2px;
}

.agent-provider-toolbar strong {
  color: var(--theme-text-strong);
  font-size: 13px;
}

.agent-provider-toolbar span {
  color: var(--theme-muted);
  font-size: 11px;
}

.agent-provider-stack {
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface);
}

.agent-provider-section {
  min-width: 0;
}

.agent-provider-section + .agent-provider-section {
  border-top: 1px solid var(--theme-border);
}

.agent-provider-header {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(140px, .65fr) minmax(96px, 112px) minmax(260px, 1.35fr) auto;
  gap: 8px 12px;
  align-items: end;
  padding: 9px 10px;
  background: var(--theme-surface-raised);
}

.agent-provider-header label,
.agent-provider-composer label,
.agent-model-composer label,
.agent-model-summary-row label,
.agent-model-detail-grid label,
.agent-model-pricing-line label,
.agent-primary-settings label,
.agent-route-row label,
.agent-token-price-row label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 700;
}

.agent-provider-header :is(input, select),
.agent-provider-composer :is(input, select),
.agent-model-composer :is(input, select),
.agent-model-summary-row :is(input, select),
.agent-model-detail-grid :is(input, select),
.agent-model-pricing-line input,
.agent-primary-settings input,
.agent-route-row :is(input, select),
.agent-token-price-row input,
.model-channel-picker select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 29px;
  padding: 4px 7px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  font: inherit;
  font-size: 11px;
}

.agent-provider-header :is(input, select):focus,
.agent-provider-composer :is(input, select):focus,
.agent-model-composer :is(input, select):focus,
.agent-model-summary-row :is(input, select):focus,
.agent-model-detail-grid :is(input, select):focus,
.agent-model-pricing-line input:focus,
.agent-primary-settings input:focus,
.agent-route-row :is(input, select):focus,
.agent-token-price-row input:focus,
.model-channel-picker select:focus {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 18%, transparent);
  outline-offset: 1px;
}

.agent-provider-title-field input,
.agent-model-display-name input,
.agent-model-official-name input {
  font-weight: 800;
}

.agent-provider-identity {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 29px;
}

.agent-provider-identity code,
.agent-provider-identity span,
.agent-model-summary-facts code,
.agent-model-summary-facts small,
.agent-route-id code,
.agent-token-price-row code {
  overflow-wrap: anywhere;
  color: var(--theme-muted);
  font-size: 10px;
}

.agent-provider-discount {
  align-self: end;
  max-width: 112px;
}

.agent-provider-discount-input {
  width: 86px;
}

.agent-provider-discount-input input {
  flex: 1 1 58px;
  width: 58px;
}

.agent-provider-discount small {
  color: var(--theme-muted);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.25;
}

.agent-provider-secret .agent-secret-input-row {
  grid-template-columns: minmax(160px, 1fr) auto;
}

.agent-provider-secret .agent-secret-input-row button {
  min-height: 29px;
  padding: 4px 8px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-surface);
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.agent-provider-composer,
.agent-model-composer {
  display: grid;
  gap: 8px 10px;
  align-items: end;
  padding: 9px 10px;
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface-elevated);
}

.agent-provider-composer {
  border: 1px solid var(--theme-border);
  border-radius: 7px;
}

.agent-composer-fields {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(260px, 1fr) minmax(180px, 230px) minmax(170px, 230px);
  gap: 8px 10px;
}

.agent-model-composer {
  grid-template-columns: minmax(150px, 190px) minmax(180px, 230px) minmax(170px, 220px) minmax(220px, 1fr) auto;
}

.agent-id-preview {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  color: var(--theme-muted);
  font-size: 10px;
}

.agent-id-preview code {
  overflow-wrap: anywhere;
  color: var(--theme-text);
  font-size: 10px;
}

.agent-id-preview small {
  line-height: 1.35;
}

.agent-provider-model-list {
  gap: 0;
}

.agent-model-item {
  min-width: 0;
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.agent-model-summary-row {
  display: grid;
  grid-template-columns: 58px minmax(150px, 200px) minmax(170px, 220px) minmax(220px, 1fr) auto;
  gap: 7px 10px;
  align-items: end;
  min-width: 0;
  padding: 8px 10px;
}

.agent-model-item.is-expanded .agent-model-summary-row {
  background: var(--theme-surface-raised);
}

.agent-model-enabled {
  align-self: center;
}

.agent-model-enabled > span {
  color: var(--theme-text);
  font-size: 10px;
}

.agent-model-enabled input,
.agent-route-enabled input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.agent-model-summary-facts {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.agent-model-summary-facts > span {
  overflow: hidden;
  color: var(--theme-text);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-model-details {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border-top: 1px dashed var(--theme-border-strong);
  background: var(--theme-surface-elevated);
}

.agent-model-detail-grid {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(260px, 1fr) minmax(220px, 1fr) repeat(3, minmax(82px, 110px));
  gap: 8px 10px;
  align-items: end;
}

.agent-model-detail-grid .is-api-base,
.agent-model-detail-grid .is-capabilities,
.agent-model-detail-grid .is-note {
  min-width: 0;
}

.agent-model-detail-grid .is-note {
  grid-column: 1 / -1;
  max-width: 760px;
}

.agent-model-detail-grid .is-short input,
.agent-model-detail-grid .is-short select {
  width: 100%;
}

.agent-model-pricing-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 9px;
  align-items: end;
  min-width: 0;
}

.agent-model-pricing-line > strong {
  align-self: center;
  color: var(--theme-text-strong);
  font-size: 11px;
}

.agent-model-pricing-line label {
  flex: 0 0 128px;
  width: 128px;
}

.agent-pricing-source {
  flex: 1 1 220px;
  min-width: 0;
  padding-bottom: 5px;
  color: var(--theme-muted);
  font-size: 10px;
  line-height: 1.35;
}

.agent-pricing-effective {
  flex: 1 1 310px;
  min-width: 220px;
  padding-bottom: 5px;
  color: var(--theme-success-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.agent-model-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px 12px;
  color: var(--theme-muted);
  font-size: 10px;
}

.agent-inline-danger {
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 5px;
  background: var(--theme-surface);
  color: var(--theme-danger-text);
  font-size: 10px;
  font-weight: 800;
}

.agent-inline-danger:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.agent-compatibility-settings,
.agent-extension-settings {
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface);
}

.agent-compatibility-settings > summary,
.agent-extension-settings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  background: var(--theme-surface-raised);
  color: var(--theme-text-strong);
  cursor: pointer;
  list-style: none;
}

.agent-compatibility-settings > summary::-webkit-details-marker,
.agent-extension-settings > summary::-webkit-details-marker {
  display: none;
}

.agent-compatibility-settings > summary span,
.agent-extension-settings > summary span {
  display: grid;
  gap: 2px;
}

.agent-compatibility-settings > summary small,
.agent-extension-settings > summary small {
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 500;
}

.agent-compatibility-explanation {
  padding: 8px 10px;
  border-top: 1px solid var(--theme-border);
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.45;
}

.agent-settings-section {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface);
}

.agent-primary-settings {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(340px, 1fr) minmax(260px, 1fr);
  gap: 8px 12px;
  align-items: end;
}

.agent-primary-settings .is-secret-path input {
  color: var(--theme-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
}

.model-channel-picker {
  display: grid;
  grid-template-columns: minmax(120px, .72fr) minmax(170px, 1.28fr);
  gap: 5px;
  min-width: 0;
}

.model-channel-picker .compact-input {
  width: 100%;
  min-width: 0;
}

.agent-fallback-list {
  display: grid;
  gap: 6px;
}

.agent-fallback-row {
  display: grid;
  grid-template-columns: 72px minmax(300px, 520px) auto;
  gap: 8px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}

.agent-fallback-row strong {
  color: var(--theme-text);
  font-size: 11px;
}

.agent-fallback-row > button {
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 800;
}

.agent-route-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
}

.agent-route-row {
  display: grid;
  grid-template-columns: 48px minmax(110px, 145px) minmax(130px, 175px) minmax(300px, 1.2fr) 70px 76px minmax(180px, 1fr) auto;
  gap: 7px 9px;
  align-items: end;
  min-width: 0;
  padding: 7px 8px;
  background: var(--theme-surface);
}

.agent-route-row + .agent-route-row {
  border-top: 1px solid var(--theme-border);
}

.agent-route-enabled {
  align-self: center;
}

.agent-route-id code {
  display: flex;
  align-items: center;
  min-height: 29px;
}

.agent-route-short input {
  width: 70px;
}

.agent-route-row > .agent-inline-danger {
  align-self: end;
}

.agent-route-prompt-toggle {
  align-self: end;
  justify-self: start;
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-surface-raised);
  color: var(--theme-text-strong);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.agent-route-prompt-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.agent-route-prompt-toggle:focus-visible {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 18%, transparent);
  outline-offset: 1px;
}

.agent-route-prompt-panel {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 8px 0 1px 57px;
  border-top: 1px solid var(--theme-border);
}

.agent-route-prompt-editor {
  display: grid;
  gap: 7px;
  width: min(100%, 760px);
  min-width: 0;
}

.agent-route-prompt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 5px 12px;
  color: var(--theme-text-strong);
  font-size: 11px;
}

.agent-route-prompt-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.agent-route-prompt-head small,
.agent-route-prompt-head > span {
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.45;
}

.agent-route-prompt-head code {
  color: var(--theme-text-strong);
  font-size: 10px;
}

.agent-route-prompt-editor textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 142px;
  padding: 7px 8px;
  resize: vertical;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  font: inherit;
  font-size: 11px;
  line-height: 1.55;
}

.agent-route-prompt-editor textarea:focus {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 18%, transparent);
  outline-offset: 1px;
}

.agent-route-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.agent-route-prompt-actions .ghost-button {
  min-height: 28px;
  padding: 3px 8px;
  font-size: 10px;
}

.agent-token-price-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
}

.agent-token-price-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) repeat(3, minmax(135px, 175px));
  gap: 7px 10px;
  align-items: end;
  padding: 7px 8px;
}

.agent-token-price-row + .agent-token-price-row {
  border-top: 1px solid var(--theme-border);
}

.agent-token-price-row > div {
  display: grid;
  gap: 2px;
  align-content: center;
  min-width: 0;
}

.agent-token-price-row strong {
  overflow: hidden;
  color: var(--theme-text-strong);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-extension-settings-body {
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--theme-border);
}

@container (max-width: 1080px) {
  .agent-provider-header {
    grid-template-columns: minmax(150px, 210px) minmax(140px, 1fr) minmax(96px, 112px) auto;
  }

  .agent-provider-secret {
    grid-column: 1 / -1;
  }

  .agent-provider-header > button {
    grid-column: 4;
    grid-row: 1;
    justify-self: start;
  }

  .agent-model-composer {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .agent-model-composer .agent-id-preview {
    grid-column: 1 / -1;
  }

  .agent-model-summary-row {
    grid-template-columns: 58px minmax(150px, 1fr) minmax(170px, 1.2fr) auto;
  }

  .agent-model-summary-facts {
    grid-column: 2 / 4;
  }

  .agent-model-summary-row > button {
    grid-column: 4;
    grid-row: 1 / 3;
    align-self: center;
  }

  .agent-model-detail-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .agent-model-detail-grid .is-api-base,
  .agent-model-detail-grid .is-capabilities {
    grid-column: span 2;
  }

  .agent-primary-settings {
    grid-template-columns: minmax(140px, 190px) minmax(340px, 1fr);
  }

  .agent-primary-settings .is-secret-path {
    grid-column: 1 / -1;
    max-width: 620px;
  }

  .agent-route-row {
    grid-template-columns: 48px minmax(120px, .7fr) minmax(150px, .9fr) minmax(300px, 1.6fr) 70px 76px;
  }

  .agent-route-description {
    grid-column: 2 / 6;
  }

  .agent-route-row > .agent-inline-danger {
    grid-column: 6;
  }

  .agent-route-prompt-toggle {
    grid-column: 6;
  }
}

@container (max-width: 860px) {
  .agent-provider-header {
    grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
  }

  .agent-provider-secret {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .agent-provider-header > button {
    grid-column: 2;
    grid-row: 2;
  }

  .agent-composer-fields,
  .agent-model-composer,
  .agent-primary-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-composer-fields .is-api-base,
  .agent-model-composer .agent-id-preview,
  .agent-primary-settings .is-secret-path {
    grid-column: 1;
  }

  .agent-model-summary-row {
    grid-template-columns: 54px minmax(0, 1fr) auto;
  }

  .agent-model-official-name,
  .agent-model-summary-facts {
    grid-column: 2;
  }

  .agent-model-summary-row > button {
    grid-column: 3;
    grid-row: 1 / 4;
  }

  .agent-model-detail-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .agent-model-detail-grid .is-note {
    grid-column: 1 / -1;
  }

  .agent-fallback-row {
    grid-template-columns: 64px minmax(0, 1fr);
    width: 100%;
  }

  .agent-fallback-row > button {
    grid-column: 2;
    justify-self: start;
  }

  .agent-route-row {
    grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr);
  }

  .agent-route-model,
  .agent-route-description {
    grid-column: 1 / -1;
  }

  .agent-route-short {
    grid-column: auto;
  }

  .agent-route-row > .agent-inline-danger {
    grid-column: 3;
  }

  .agent-route-prompt-toggle {
    grid-column: 3;
  }

  .agent-token-price-row {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }

  .agent-token-price-row > div {
    grid-column: 1 / -1;
  }
}

@container (max-width: 520px) {
  .agent-model-tabs,
  .agent-model-tabs button {
    width: 100%;
  }

  .agent-model-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .agent-provider-header,
  .agent-model-summary-row,
  .agent-model-detail-grid,
  .agent-route-row,
  .agent-token-price-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-provider-secret,
  .agent-model-official-name,
  .agent-model-summary-facts,
  .agent-model-summary-row > button,
  .agent-model-detail-grid .is-api-base,
  .agent-model-detail-grid .is-capabilities,
  .agent-model-detail-grid .is-note,
  .agent-route-model,
  .agent-route-description,
  .agent-route-row > .agent-inline-danger,
  .agent-route-prompt-toggle,
  .agent-route-prompt-panel,
  .agent-token-price-row > div {
    grid-column: 1;
    grid-row: auto;
  }

  .agent-provider-header > button,
  .agent-model-summary-row > button,
  .agent-route-row > .agent-inline-danger,
  .agent-route-prompt-toggle {
    justify-self: start;
  }

  .agent-route-prompt-panel {
    padding-left: 0;
  }

  .agent-provider-header > button {
    grid-column: 1;
    grid-row: auto;
  }

  .agent-pricing-effective {
    flex-basis: 100%;
    min-width: 0;
  }

  .model-channel-picker {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 2026-07-28：模型与厂商目录式紧凑布局。仅覆盖本页，不改变其它配置页。 */
.agent-model-admin .agent-model-tabs {
  display: flex;
  width: 100%;
  gap: 4px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--theme-border);
  border-radius: 0;
  background: transparent;
}

.agent-model-admin .agent-model-tabs button {
  position: relative;
  width: auto;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 0;
}

.agent-model-admin .agent-model-tabs button.is-active {
  background: transparent;
  color: var(--primary-dark);
}

.agent-model-admin .agent-model-tabs button.is-active::after {
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  background: var(--primary);
  content: "";
}

.agent-model-admin .agent-model-tabs button span {
  background: color-mix(in srgb, var(--primary) 12%, var(--theme-surface));
}

.agent-model-admin .agent-provider-summary-row {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 10px 8px 12px;
  background: var(--theme-surface);
}

.agent-model-admin .agent-provider-section.is-expanded > .agent-provider-summary-row {
  background: var(--theme-surface-raised);
}

.agent-model-admin .agent-provider-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
}

.agent-model-admin .agent-provider-toggle {
  display: inline-grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--theme-muted);
  cursor: pointer;
}

.agent-model-admin .agent-provider-toggle:hover {
  background: var(--theme-hover);
  color: var(--primary-dark);
}

.agent-model-admin .agent-provider-toggle span {
  display: block;
  font-size: 20px;
  line-height: 1;
  transition: transform 160ms ease-out;
}

.agent-model-admin .agent-provider-section.is-expanded .agent-provider-toggle span {
  transform: rotate(90deg);
}

.agent-model-admin .agent-provider-status-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--theme-muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-muted) 14%, transparent);
}

.agent-model-admin .agent-provider-status-dot.is-ready {
  background: var(--theme-success-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-success-text) 14%, transparent);
}

.agent-model-admin .agent-provider-name {
  min-width: 0;
}

.agent-model-admin .agent-provider-name strong,
.agent-model-admin .agent-provider-name small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-model-admin .agent-provider-name strong {
  color: var(--theme-text-strong);
  font-size: 13px;
}

.agent-model-admin .agent-provider-name small {
  margin-top: 1px;
  color: var(--theme-muted);
  font-size: 10px;
}

.agent-model-admin .agent-provider-status {
  display: grid;
  gap: 1px;
  white-space: nowrap;
}

.agent-model-admin .agent-provider-status strong {
  color: var(--theme-success-text);
  font-size: 10px;
}

.agent-model-admin .agent-provider-status small {
  color: var(--theme-muted);
  font-size: 9px;
}

.agent-model-admin .agent-provider-discount {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  max-width: none;
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.agent-model-admin .agent-provider-discount-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.agent-model-admin .agent-provider-discount-tools > button {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 10px;
}

.agent-model-admin .agent-provider-discount-input {
  display: flex;
  width: 78px;
  min-width: 78px;
  height: 30px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
}

.agent-model-admin .agent-provider-discount-input input {
  flex: 0 0 54px;
  width: 54px;
  min-width: 0;
  min-height: 28px;
  padding: 4px 2px 4px 7px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--theme-text-strong);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.agent-model-admin .agent-provider-discount-input em {
  color: var(--theme-muted);
  font-size: 10px;
  font-style: normal;
}

.agent-model-admin .agent-provider-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.agent-model-admin .agent-provider-actions button,
.agent-model-admin .agent-model-expand-button {
  min-height: 29px;
  padding: 4px 9px;
  font-size: 10px;
}

.agent-model-admin .agent-provider-connection-panel {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(320px, 1fr);
  align-items: end;
  gap: 10px;
  padding: 10px 14px 11px 54px;
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface-elevated);
}

.agent-model-admin .agent-provider-connection-panel label,
.agent-model-admin .agent-model-details label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 700;
}

.agent-model-admin .agent-provider-connection-panel :is(input, select),
.agent-model-admin .agent-model-details :is(input, select) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 29px;
  padding: 4px 7px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  font: inherit;
  font-size: 11px;
}

.agent-model-admin .agent-provider-connection-panel :is(input, select):focus,
.agent-model-admin .agent-model-details :is(input, select):focus {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 18%, transparent);
  outline-offset: 1px;
}

.agent-model-admin .agent-provider-secret .agent-secret-input-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 7px;
}

.agent-model-admin .agent-provider-built-in-note {
  display: grid;
  gap: 2px;
  align-self: stretch;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--theme-success-text) 28%, var(--theme-border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--theme-success-text) 8%, var(--theme-surface));
  color: var(--theme-text);
  font-size: 10px;
}

.agent-model-admin .agent-provider-built-in-note strong {
  color: var(--theme-success-text);
  font-size: 11px;
}

.agent-model-admin .agent-provider-model-list {
  border-top: 1px solid var(--theme-border);
}

.agent-model-admin .agent-model-list-head,
.agent-model-admin .agent-model-summary-row {
  display: grid;
  grid-template-columns: 58px minmax(170px, 1.05fr) minmax(205px, 1.2fr) minmax(260px, 1.8fr) 84px;
  align-items: center;
  gap: 10px;
}

.agent-model-admin .agent-model-list-head {
  min-height: 34px;
  padding: 5px 12px 5px 54px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 700;
}

.agent-model-admin .agent-model-item {
  border-top: 0;
}

.agent-model-admin .agent-model-item + .agent-model-item {
  border-top: 1px solid var(--theme-border);
}

.agent-model-admin .agent-model-summary-row {
  min-height: 52px;
  padding: 7px 12px 7px 54px;
  background: var(--theme-surface);
}

.agent-model-admin .agent-model-item.is-expanded .agent-model-summary-row {
  background: var(--theme-surface-raised);
}

.agent-model-admin .agent-model-enabled {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 5px;
  color: var(--theme-text);
  font-size: 10px;
}

.agent-model-admin .agent-model-enabled input {
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
  accent-color: var(--primary);
}

.agent-model-admin .agent-model-display-name,
.agent-model-admin .agent-model-official-name,
.agent-model-admin .agent-model-summary-facts {
  min-width: 0;
}

.agent-model-admin .agent-model-display-name strong,
.agent-model-admin .agent-model-display-name small,
.agent-model-admin .agent-model-official-name code,
.agent-model-admin .agent-model-official-name small,
.agent-model-admin .agent-model-summary-facts strong,
.agent-model-admin .agent-model-summary-facts small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-model-admin .agent-model-display-name strong {
  color: var(--theme-text-strong);
  font-size: 12px;
}

.agent-model-admin .agent-model-display-name small,
.agent-model-admin .agent-model-official-name small {
  margin-top: 1px;
  color: var(--theme-muted);
  font-size: 9px;
}

.agent-model-admin .agent-model-official-name code {
  color: var(--theme-text);
  font-size: 10px;
}

.agent-model-admin .agent-model-summary-facts strong {
  color: var(--theme-text);
  font-size: 10px;
}

.agent-model-admin .agent-model-summary-facts small {
  margin-top: 2px;
  color: var(--theme-muted);
  font-size: 9px;
}

.agent-model-admin .agent-model-expand-button {
  justify-self: end;
  min-width: 72px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-surface);
  color: var(--primary-dark);
  font-weight: 800;
}

.agent-model-admin .agent-model-details {
  display: block;
  min-width: 0;
  padding: 0 14px 13px 54px;
  border-top: 0;
  background: var(--theme-surface-elevated);
}

.agent-model-admin .agent-model-detail-section {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--theme-border);
}

.agent-model-admin .agent-model-detail-section-title strong,
.agent-model-admin .agent-model-detail-section-title span {
  display: block;
}

.agent-model-admin .agent-model-detail-section-title strong {
  color: var(--theme-text-strong);
  font-size: 11px;
}

.agent-model-admin .agent-model-detail-section-title span {
  margin-top: 2px;
  color: var(--theme-muted);
  font-size: 9px;
  line-height: 1.35;
}

.agent-model-admin .agent-model-connection-fields {
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(190px, 1fr) minmax(170px, .9fr);
  gap: 9px;
  min-width: 0;
}

.agent-model-admin .agent-model-connection-fields .is-api-base:not(.is-chat-url) {
  grid-column: 1 / 3;
}

.agent-model-admin .agent-model-connection-fields .is-capabilities,
.agent-model-admin .agent-model-connection-fields .is-note {
  grid-column: 1 / -1;
  max-width: 760px;
}

.agent-model-admin .agent-model-parameter-fields,
.agent-model-admin .agent-model-price-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.agent-model-admin .agent-model-parameter-fields .is-short,
.agent-model-admin .agent-model-price-fields .is-short {
  flex: 0 0 92px;
  width: 92px;
}

.agent-model-admin .agent-model-parameter-fields .is-medium,
.agent-model-admin .agent-model-price-fields .is-medium {
  flex-basis: 132px;
  width: 132px;
}

.agent-model-admin .agent-model-price-fields .is-pricing-unit {
  flex-basis: 160px;
  width: 160px;
}

.agent-model-admin .agent-model-price-fields .is-price {
  flex-basis: 124px;
  width: 124px;
}

.agent-model-admin .agent-pricing-caption {
  flex: 0 0 100%;
  color: var(--theme-muted);
  font-size: 9px;
  font-weight: 700;
}

.agent-model-admin .agent-pricing-caption.is-actual {
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px dashed var(--theme-border-strong);
  color: var(--theme-text-strong);
}

.agent-model-admin .agent-pricing-effective {
  flex: 1 1 290px;
  min-width: 250px;
  align-self: stretch;
  padding: 7px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--theme-success-text) 10%, var(--theme-surface));
  color: var(--theme-success-text);
  font-size: 10px;
  line-height: 1.4;
}

.agent-model-admin .agent-pricing-effective strong,
.agent-model-admin .agent-pricing-effective small {
  display: block;
}

.agent-model-admin .agent-model-voice-section > .agent-model-detail-section-title {
  display: grid;
  align-content: start;
  gap: 2px;
}

.agent-model-admin .agent-voice-add-button {
  width: fit-content;
  min-height: 28px;
  margin-top: 7px;
  padding: 4px 8px;
  font-size: 10px;
}

.agent-model-admin .agent-voice-editor {
  min-width: 0;
  overflow-x: auto;
}

.agent-model-admin .agent-voice-list-head,
.agent-model-admin .agent-voice-row {
  display: grid;
  grid-template-columns: 52px minmax(178px, 1.15fr) minmax(155px, 1fr) minmax(155px, .9fr) minmax(190px, 1.1fr) minmax(170px, 1fr) 58px 104px;
  gap: 7px;
  align-items: center;
  min-width: 1020px;
}

.agent-model-admin .agent-voice-list-head {
  min-height: 28px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 9px;
  font-weight: 800;
}

.agent-model-admin .agent-voice-row {
  padding: 7px 6px;
  border-bottom: 1px solid var(--theme-border);
}

.agent-model-admin .agent-voice-row:last-of-type {
  border-bottom: 0;
}

.agent-model-admin .agent-voice-enabled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.agent-model-admin .agent-voice-enabled input {
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
  accent-color: var(--primary);
}

.agent-model-admin .agent-voice-name-field code {
  display: block;
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 9px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-model-admin .agent-voice-name-field em {
  width: max-content;
  border-radius: 999px;
  padding: 1px 6px;
  background: color-mix(in srgb, var(--primary) 12%, var(--theme-surface));
  color: var(--primary);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.agent-model-admin .agent-voice-description-input {
  color: var(--theme-muted);
  font-size: 10px;
}

.agent-model-admin .agent-voice-paired-fields,
.agent-model-admin .agent-voice-speed-fields {
  display: grid;
  gap: 5px;
}

.agent-model-admin .agent-voice-paired-fields {
  grid-template-columns: minmax(64px, .65fr) minmax(76px, 1fr);
}

.agent-model-admin .agent-voice-speed-fields {
  grid-template-columns: repeat(3, minmax(54px, 1fr));
}

.agent-model-admin .agent-voice-sort-field input {
  text-align: center;
}

.agent-model-admin .agent-voice-row-actions {
  display: grid;
  gap: 4px;
}

.agent-model-admin .agent-voice-row-actions > button {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 10px;
}

.agent-model-admin .agent-voice-empty {
  padding: 10px;
  border: 1px dashed var(--theme-border-strong);
  border-radius: 6px;
  color: var(--theme-muted);
  font-size: 10px;
}

.agent-model-admin .agent-voice-default-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 7%, var(--theme-surface));
  color: var(--theme-text);
  font-size: 10px;
}

.agent-model-admin .agent-voice-default-row button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 10px;
}

.agent-model-admin .agent-pricing-effective strong {
  margin-bottom: 2px;
  font-size: 11px;
}

.agent-model-admin .agent-pricing-effective small {
  margin-top: 2px;
  color: var(--theme-muted);
  font-weight: 500;
}

.agent-model-admin .agent-model-detail-actions {
  padding-top: 10px;
  border-top: 1px solid var(--theme-border);
}

@container (max-width: 900px) {
  .agent-model-admin .agent-provider-summary-row {
    grid-template-columns: minmax(210px, 1fr) auto;
    gap: 8px 12px;
  }

  .agent-model-admin .agent-provider-status {
    justify-self: end;
  }

  .agent-model-admin .agent-provider-discount-tools {
    grid-column: 1;
    padding-left: 49px;
  }

  .agent-model-admin .agent-provider-actions {
    grid-column: 2;
    justify-self: end;
  }

  .agent-model-admin .agent-provider-connection-panel {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 61px;
  }

  .agent-model-admin .agent-model-list-head {
    display: none;
  }

  .agent-model-admin .agent-model-summary-row {
    grid-template-columns: 48px minmax(0, 1fr) 78px;
    gap: 5px 8px;
    padding-left: 61px;
  }

  .agent-model-admin .agent-model-enabled {
    grid-column: 1;
    grid-row: 1;
  }

  .agent-model-admin .agent-model-display-name,
  .agent-model-admin .agent-model-official-name,
  .agent-model-admin .agent-model-summary-facts {
    grid-column: 2;
  }

  .agent-model-admin .agent-model-display-name {
    grid-row: 1;
  }

  .agent-model-admin .agent-model-official-name {
    grid-row: 2;
  }

  .agent-model-admin .agent-model-summary-facts {
    grid-row: 3;
  }

  .agent-model-admin .agent-model-expand-button {
    grid-column: 3;
    grid-row: 1 / 4;
  }

  .agent-model-admin .agent-model-details {
    padding-left: 61px;
  }

  .agent-model-admin .agent-model-detail-section {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .agent-model-admin .agent-model-connection-fields {
    grid-template-columns: minmax(145px, .65fr) minmax(0, 1fr);
  }

  .agent-model-admin .agent-model-connection-fields .is-api-base,
  .agent-model-admin .agent-model-connection-fields .is-capabilities,
  .agent-model-admin .agent-model-connection-fields .is-note {
    grid-column: 1 / -1;
  }

  .agent-model-admin .agent-voice-list-head {
    display: none;
  }

  .agent-model-admin .agent-voice-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
  }
}

@container (max-width: 620px) {
  .agent-model-admin .agent-provider-summary-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-model-admin .agent-provider-status,
  .agent-model-admin .agent-provider-discount-tools,
  .agent-model-admin .agent-provider-actions {
    grid-column: 1;
    justify-self: start;
    padding-left: 49px;
  }

  .agent-model-admin .agent-provider-connection-panel,
  .agent-model-admin .agent-model-summary-row,
  .agent-model-admin .agent-model-details {
    padding-left: 14px;
  }

  .agent-model-admin .agent-model-detail-section,
  .agent-model-admin .agent-model-connection-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .agent-model-admin .agent-model-connection-fields .is-api-base,
  .agent-model-admin .agent-model-connection-fields .is-capabilities,
  .agent-model-admin .agent-model-connection-fields .is-note {
    grid-column: 1;
  }

  .agent-model-admin .agent-model-parameter-fields .is-short,
  .agent-model-admin .agent-model-price-fields .is-short {
    flex-basis: 88px;
    width: 88px;
  }

  .agent-model-admin .agent-model-parameter-fields .is-medium,
  .agent-model-admin .agent-model-price-fields .is-medium {
    flex-basis: 128px;
    width: 128px;
  }

  .agent-model-admin .agent-model-price-fields .is-pricing-unit {
    flex-basis: 160px;
    width: 160px;
  }

  .agent-model-admin .agent-pricing-effective {
    flex-basis: 100%;
    min-width: 0;
  }

  .agent-model-admin .agent-provider-discount-tools,
  .agent-model-admin .agent-voice-default-row {
    flex-wrap: wrap;
  }

  .agent-model-admin .agent-voice-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-model-admin .agent-provider-toggle span {
    transition-duration: .01ms;
  }
}

.plan-matrix-editor {
  gap: 12px;
}

.admin-section-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.plan-editor-sync-note {
  flex: 0 0 auto;
  color: #0b776f;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.plan-edit-mode-toolbar {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid #d9e8ec;
  border-radius: 7px;
  background: #f8fbfc;
}

.plan-edit-mode-tabs {
  display: inline-flex;
  width: fit-content;
  padding: 2px;
  border: 1px solid #cbdde5;
  border-radius: 6px;
  background: #fff;
}

.plan-edit-mode-tabs button {
  min-height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #4c6770;
  font-size: 12px;
  font-weight: 800;
}

.plan-edit-mode-tabs button.active {
  background: #dff2f2;
  color: #087770;
}

.plan-edit-filters {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(150px, 220px) minmax(190px, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.plan-edit-filters label,
.plan-capability-meta-grid label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #45626c;
  font-size: 12px;
  font-weight: 800;
}

.plan-edit-filters input,
.plan-edit-filters select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid #cbdde5;
  border-radius: 5px;
  background: #fff;
  color: #263f48;
  font-size: 12px;
}

.plan-filter-result {
  align-self: end;
  padding: 0 2px 7px;
  color: #607982;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.plan-capability-meta-grid {
  display: grid;
  grid-template-columns: minmax(170px, 1.2fr) minmax(210px, 1.3fr) minmax(170px, 1fr) 100px 90px;
  gap: 7px;
  padding: 8px;
  border: 1px solid #dce9ed;
  border-radius: 7px;
  background: #fbfdfe;
}

.plan-capability-meta-grid .compact-input {
  width: 100%;
  min-width: 0;
  min-height: 28px;
}

.plan-capability-meta-grid span small {
  color: #84969c;
  font-size: 10px;
  font-weight: 700;
}

.plan-entitlement-scroll {
  max-height: min(62vh, 680px);
  overflow-x: hidden;
  overflow-y: auto;
}

.admin-data-table.plan-entitlement-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.self-workflow-admin-page {
  width: 100%;
  gap: 10px;
}

.self-workflow-title-row {
  align-items: center;
}

.self-workflow-transport-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(420px, 2fr) auto;
  gap: 14px;
  align-items: center;
}

.self-workflow-transport-panel h3,
.self-workflow-transport-panel p {
  margin: 0;
}

.self-workflow-transport-panel p {
  margin-top: 4px;
  color: var(--theme-muted);
  font-size: 12px;
}

.self-workflow-transport-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.self-workflow-transport-options label {
  display: flex;
  flex: 1 1 190px;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-control);
  color: var(--theme-text);
  cursor: pointer;
}

.self-workflow-transport-options label:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, var(--theme-control));
}

.self-workflow-transport-options label.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.self-workflow-transport-options input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.self-workflow-transport-options span {
  display: grid;
  gap: 2px;
}

.self-workflow-transport-options small {
  color: var(--theme-muted);
  font-size: 11px;
}

@media (max-width: 920px) {
  .self-workflow-transport-panel {
    grid-template-columns: 1fr;
  }
}

.self-workflow-title-row h2,
.self-workflow-title-row h3,
.self-workflow-step h4 {
  margin: 0;
  color: var(--theme-text-strong);
}

.self-workflow-title-row p,
.self-workflow-step p {
  margin: 4px 0 0;
  color: var(--theme-muted);
}

.self-workflow-title-row p {
  max-width: 78ch;
  line-height: 1.45;
}

.self-workflow-top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.self-workflow-control-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: end;
}

.self-workflow-selector.is-workflow {
  flex: 0 1 480px;
  width: min(100%, 480px);
  min-width: 280px;
}

.self-workflow-selector.is-binding {
  flex: 0 0 180px;
  width: 180px;
  min-width: 160px;
}

.self-workflow-selector,
.self-workflow-model-row label,
.self-workflow-parameter-field,
.self-workflow-prompt-list label,
.self-workflow-server-prompt-editor label {
  display: grid;
  gap: 6px;
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 700;
}

.self-workflow-selector select,
.self-workflow-model-row select,
.self-workflow-parameter-field input,
.self-workflow-parameter-field select,
.self-workflow-prompt-list textarea,
.self-workflow-server-prompt-editor textarea {
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  background: var(--theme-control);
  color: var(--theme-text);
  font: inherit;
}

.self-workflow-selector select,
.self-workflow-model-row select,
.self-workflow-parameter-field input,
.self-workflow-parameter-field select {
  width: 100%;
  min-width: 0;
}

.self-workflow-selector select,
.self-workflow-model-row select,
.self-workflow-parameter-field input,
.self-workflow-parameter-field select {
  min-height: 34px;
  padding: 5px 8px;
}

.self-workflow-binding-status {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 13px;
  font-weight: 700;
}

.self-workflow-selector select:focus,
.self-workflow-model-row select:focus,
.self-workflow-parameter-field input:focus,
.self-workflow-parameter-field select:focus,
.self-workflow-prompt-list textarea:focus,
.self-workflow-server-prompt-editor textarea:focus {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
  outline-offset: 1px;
}

.self-workflow-enabled-toggle,
.self-workflow-boolean {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  min-height: 34px;
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 700;
}

.self-workflow-enabled-toggle {
  flex: 0 1 auto;
  align-self: flex-end;
  max-width: 100%;
  white-space: normal;
}

.self-workflow-enabled-toggle input,
.self-workflow-boolean input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.self-workflow-boolean.is-readonly {
  color: var(--theme-muted);
}

.self-workflow-save-state {
  flex: 0 0 auto;
  align-self: flex-end;
  width: max-content;
  max-width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 800;
}

.self-workflow-save-state.is-dirty {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.self-workflow-save-state.is-saved {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.self-workflow-identity-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 12px 0 0;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
}

.self-workflow-identity-strip > div {
  flex: 0 1 180px;
  min-width: 0;
  padding: 8px 10px;
}

.self-workflow-identity-strip > div + div {
  border-left: 1px solid var(--theme-border);
}

.self-workflow-identity-strip > .is-workflow-id {
  flex: 1 1 320px;
  max-width: 480px;
}

.self-workflow-identity-strip dt {
  color: var(--theme-muted);
  font-size: 11px;
}

.self-workflow-identity-strip dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--theme-text-strong);
  font-size: 12px;
  font-weight: 800;
}

.self-workflow-identity-strip + .admin-muted {
  margin: 8px 0 0;
  line-height: 1.45;
}

.self-workflow-check-result {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  font-size: 12px;
}

.self-workflow-check-result.is-ok {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.self-workflow-check-result.is-error {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
  color: var(--theme-danger-text);
}

.self-workflow-view-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.self-workflow-view-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.self-workflow-view-tabs button:hover {
  background: var(--theme-hover);
  color: var(--theme-text-strong);
}

.self-workflow-view-tabs button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 28%, transparent);
  outline-offset: 1px;
}

.self-workflow-view-tabs button.is-active {
  background: var(--theme-active);
  color: var(--theme-success-text);
}

.self-workflow-view-tabs button span {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--theme-surface);
  color: inherit;
  font-size: 10px;
  line-height: 1.4;
}

.self-workflow-steps {
  display: grid;
  gap: 0;
  margin-top: 6px;
}

.self-workflow-step {
  min-width: 0;
  padding: 14px 0 4px;
  border: 0;
  border-top: 1px solid var(--theme-border);
  border-radius: 0;
  background: transparent;
}

.self-workflow-step:first-child {
  padding-top: 10px;
  border-top: 0;
}

.self-workflow-step > header {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  padding-bottom: 6px;
}

.self-workflow-step > header code,
.self-workflow-model-facts code {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--theme-muted);
  font-size: 11px;
}

.self-workflow-step-index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--theme-active);
  color: var(--theme-success-text);
  font-size: 12px;
  font-weight: 900;
}

.self-workflow-model-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin-top: 8px;
}

.self-workflow-model-selectors {
  flex: 0 1 560px;
  width: min(100%, 560px);
  min-width: 280px;
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(240px, 1fr);
  gap: 8px;
  align-items: end;
}

.self-workflow-model-selectors > label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 700;
}

.self-workflow-model-facts {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 5px 10px;
  min-height: 34px;
  padding: 6px 0;
  color: var(--theme-muted);
  font-size: 12px;
}

.self-workflow-parameter-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 10px;
  margin-top: 10px;
}

.self-workflow-parameter-field.is-short {
  flex: 0 0 156px;
  width: 156px;
  max-width: 100%;
}

.self-workflow-parameter-field.is-standard {
  flex: 0 1 240px;
  width: min(100%, 240px);
}

.self-workflow-parameter-field.is-switch {
  flex: 0 1 auto;
  min-width: 150px;
  align-content: start;
}

.self-workflow-parameter-field input[readonly] {
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
}

.self-workflow-prompt-list {
  display: grid;
  gap: 10px;
  width: min(100%, 880px);
  max-width: 100%;
  margin-top: 12px;
}

.self-workflow-prompt-list textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  padding: 9px 10px;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.self-workflow-prompt-list small {
  color: var(--theme-muted);
  font-weight: 400;
}

.self-workflow-server-prompt-list {
  display: grid;
  gap: 8px;
  width: min(100%, 980px);
  max-width: 100%;
  margin-top: 12px;
}

.self-workflow-server-prompt {
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.self-workflow-server-prompt-summary {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(360px, auto) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 10px 12px;
}

.self-workflow-server-prompt h5 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 13px;
}

.self-workflow-server-prompt-summary p {
  margin: 4px 0 0;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
}

.self-workflow-server-prompt-summary dl {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  min-width: 0;
  margin: 0;
}

.self-workflow-server-prompt-summary dl > div {
  display: inline-flex;
  gap: 4px;
  min-width: 0;
  color: var(--theme-muted);
  font-size: 11px;
}

.self-workflow-server-prompt-summary dt,
.self-workflow-server-prompt-summary dd {
  margin: 0;
}

.self-workflow-server-prompt-summary dd {
  overflow-wrap: anywhere;
  color: var(--theme-text);
  font-weight: 800;
}

.self-workflow-server-prompt-toggle {
  justify-self: end;
  white-space: nowrap;
}

.self-workflow-server-prompt-editor {
  display: grid;
  gap: 9px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.self-workflow-server-prompt-editor textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  padding: 9px 10px;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.self-workflow-server-prompt-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
}

.self-workflow-server-prompt-warning,
.self-workflow-server-prompt-result {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.45;
}

.self-workflow-server-prompt-warning,
.self-workflow-server-prompt-result.is-error {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.self-workflow-server-prompt-result.is-ok {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.self-workflow-contract-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.self-workflow-contract-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

.self-workflow-contract-grid .admin-data-table {
  width: 100%;
  font-size: 11px;
}

.self-workflow-contract-grid .admin-data-table td:last-child {
  min-width: 220px;
  white-space: normal;
}

.self-workflow-cost-table {
  margin-top: 10px;
}

.self-workflow-cost-table .admin-data-table {
  min-width: 980px;
  font-size: 11px;
}

.self-workflow-cost-summary {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
}

.self-workflow-cost-summary > div {
  flex: 0 1 145px;
  min-width: 116px;
  min-height: 52px;
  padding: 8px 10px;
}

@media (max-width: 1180px) {
  .self-workflow-contract-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .self-workflow-model-selectors,
  .self-workflow-model-facts {
    flex-basis: 100%;
  }

  .self-workflow-model-selectors {
    min-width: 0;
  }

  .self-workflow-server-prompt-summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .self-workflow-server-prompt-summary dl {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .self-workflow-title-row {
    align-items: stretch;
  }

  .self-workflow-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .self-workflow-top-actions {
    justify-content: flex-start;
  }

  .self-workflow-title-row p {
    max-width: none;
  }

  .self-workflow-selector.is-workflow {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
  }

  .self-workflow-identity-strip > .is-workflow-id {
    flex-basis: 100%;
    max-width: none;
  }
}

@media (max-width: 620px) {
  .self-workflow-step > header {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .self-workflow-step > header code {
    grid-column: 2;
  }

  .self-workflow-selector.is-binding {
    flex-basis: min(100%, 180px);
  }

  .self-workflow-enabled-toggle {
    min-width: 0;
  }

  .self-workflow-step > header code {
    text-align: left;
  }

  .self-workflow-identity-strip > div {
    flex: 1 1 100%;
  }

  .self-workflow-identity-strip > div + div {
    border-top: 1px solid var(--theme-border);
    border-left: 0;
  }

  .self-workflow-parameter-field.is-short {
    flex-basis: 144px;
    width: 144px;
  }

  .self-workflow-model-selectors {
    grid-template-columns: minmax(0, 1fr);
  }

  .self-workflow-contract-panel .admin-section-head,
  .self-workflow-cost-panel .panel-title {
    align-items: stretch;
    flex-direction: column;
  }

  .self-workflow-contract-toggle,
  .self-workflow-cost-panel .panel-title > button {
    align-self: flex-start;
  }

  .self-workflow-server-prompt-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .self-workflow-server-prompt-summary dl {
    grid-column: auto;
  }

  .self-workflow-server-prompt-toggle {
    justify-self: start;
  }
}

.plan-entitlement-table th,
.plan-entitlement-table td {
  padding: 5px 6px;
  white-space: normal;
}

.plan-entitlement-table th {
  z-index: 3;
}

.plan-col-name {
  width: 18%;
}

.plan-col-enabled {
  width: 4%;
}

.plan-col-quota {
  width: 14%;
}

.plan-col-charge {
  width: 12%;
}

.plan-col-frontend-toggle {
  width: 6%;
}

.plan-col-frontend-name {
  width: 22%;
}

.plan-col-frontend-value {
  width: 10%;
}

.plan-col-frontend-unit {
  width: 7%;
}

.plan-col-sort {
  width: 5%;
}

.plan-entitlement-table .compact-input {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 3px 5px;
}

.plan-entitlement-name-cell strong,
.plan-entitlement-name-cell small,
.plan-entitlement-name-cell span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-entitlement-name-cell strong {
  color: #27434d;
  font-size: 12px;
}

.plan-entitlement-name-cell small {
  margin-top: 1px;
  color: #74888f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
}

.plan-entitlement-name-cell span {
  margin-top: 2px;
  color: #3d746f;
  font-size: 10px;
}

.plan-entitlement-enabled-cell {
  text-align: center !important;
}

.plan-entitlement-enabled-cell input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.plan-quota-editor {
  display: grid;
  grid-template-columns: minmax(52px, 1fr) auto;
  gap: 4px;
  align-items: center;
}

.plan-quota-editor label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.plan-quota-editor label input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.plan-charge-editor {
  display: grid;
  grid-template-columns: minmax(52px, 0.65fr) minmax(82px, 1fr);
  gap: 4px;
}

.plan-billing-reference {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.plan-billing-reference strong,
.plan-billing-reference small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-billing-reference strong {
  color: #244b52;
  font-size: 11px;
}

.plan-billing-reference small {
  color: #6a8088;
  font-size: 10px;
}

.plan-entitlement-group-row td {
  position: sticky;
  top: 30px;
  z-index: 2;
  padding: 4px 7px;
  background: #f1f7f8 !important;
  color: #345963;
}

.plan-entitlement-group-row b {
  font-size: 11px;
}

.plan-entitlement-group-row span {
  margin-left: 6px;
  color: #7a8e95;
  font-size: 10px;
  font-weight: 700;
}

.plan-entitlement-empty {
  padding: 22px !important;
  color: #6d8289;
  text-align: center !important;
}

@media (max-width: 1180px) {
  .admin-binding-filter-bar {
    grid-template-columns: minmax(220px, 1fr) 120px repeat(2, minmax(120px, 0.6fr));
  }

  .admin-binding-filter-actions {
    justify-content: flex-end;
  }

  .plan-capability-meta-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .plan-editor-sync-note {
    white-space: normal;
    text-align: right;
  }
}

@media (max-width: 900px) {
  .admin-binding-filter-bar,
  .plan-edit-filters,
  .plan-capability-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-binding-filter-actions,
  .plan-filter-result {
    justify-self: end;
  }

  .admin-binding-data-table,
  .plan-entitlement-table {
    font-size: 11px;
  }

  .plan-charge-editor {
    grid-template-columns: 1fr;
  }
}

.plan-price-table .compact-input.xs {
  width: 76px;
}

.plan-price-table .compact-input.sm {
  width: 104px;
}

.plan-price-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.plan-price-table {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
}

.plan-price-table th,
.plan-price-table td {
  padding: 6px;
  white-space: normal;
  vertical-align: top;
}

.plan-price-table th:nth-child(1) { width: 4%; }
.plan-price-table th:nth-child(2) { width: 12%; }
.plan-price-table th:nth-child(3) { width: 16%; }
.plan-price-table th:nth-child(4) { width: 17%; }
.plan-price-table th:nth-child(5) { width: 28%; }
.plan-price-table th:nth-child(6) { width: 23%; }

.plan-price-identity,
.plan-price-copy-editor {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.plan-price-identity code {
  color: var(--theme-muted);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.plan-price-badge-field,
.plan-price-copy-editor > label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.plan-price-badge-field span,
.plan-price-copy-editor > label span {
  color: var(--theme-muted);
  font-size: 9px;
  line-height: 1.2;
}

.plan-price-copy-editor details {
  min-width: 0;
  padding-top: 2px;
  border-top: 1px solid var(--theme-border);
}

.plan-price-copy-editor summary {
  color: var(--primary-dark);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}

.plan-price-copy-editor textarea {
  width: 100%;
  min-height: 62px;
  margin-top: 5px;
  resize: vertical;
}

.plan-price-copy-editor small {
  display: block;
  margin-top: 3px;
  color: var(--theme-muted);
  font-size: 9px;
  line-height: 1.35;
}

.plan-price-field-grid {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.plan-price-field-grid.price-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.plan-price-field-grid.balance-fields {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 0.8fr);
}

.plan-price-field-grid.capacity-fields {
  grid-template-columns:
    repeat(4, minmax(46px, 0.72fr))
    minmax(84px, 1.5fr);
}

.plan-price-field-grid label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.plan-price-field-grid label > span {
  color: var(--theme-muted);
  font-size: 9px;
  line-height: 1.2;
}

.plan-price-table .compact-input,
.plan-price-table .compact-input.xs,
.plan-price-table .compact-input.sm {
  width: 100%;
  min-width: 0;
}

.plan-price-identity > .compact-input,
.plan-price-badge-field .compact-input {
  max-width: 168px;
}

.plan-price-field-grid.price-fields .compact-input {
  max-width: 84px;
}

.plan-purchase-policy-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 86px));
  gap: 5px;
  margin-top: 6px;
}

.plan-purchase-policy-fields label {
  display: grid;
  gap: 2px;
}

.plan-purchase-policy-fields span {
  color: var(--theme-muted);
  font-size: 9px;
  line-height: 1.2;
}

.plan-purchase-policy-fields .compact-input {
  width: 64px;
  min-width: 0;
}

.plan-billing-cycle-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid var(--theme-border);
}

.plan-billing-cycle-options label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--theme-muted);
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}

.plan-billing-cycle-options input {
  width: 12px;
  height: 12px;
  margin: 0;
}

.plan-price-field-grid.balance-fields label:nth-child(1) .compact-input,
.plan-price-field-grid.balance-fields label:nth-child(3) .compact-input {
  max-width: 76px;
}

.plan-price-field-grid.balance-fields label:nth-child(2) .compact-input {
  max-width: 96px;
}

.plan-price-field-grid.capacity-fields label > span {
  min-height: 22px;
}

.plan-price-field-grid.capacity-fields .compact-input {
  max-width: 64px;
}

.plan-price-field-grid.capacity-fields .capacity-concurrency .compact-input {
  max-width: 88px;
}

.agent-editor-toolbar {
  justify-content: space-between;
  padding: 10px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #f8fbfc;
}

.agent-editor-toolbar > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 280px;
}

.agent-editor-toolbar b {
  color: #203c45;
  font-size: 14px;
}

.agent-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.agent-status-note {
  padding: 8px 10px;
  border: 1px solid #bee9e5;
  border-radius: 7px;
  background: #f0fffd;
  color: #1f5d5b;
  font-size: 12px;
}

.agent-config-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.agent-provider-list {
  display: grid;
  gap: 7px;
  max-height: 680px;
  overflow: auto;
}

.agent-provider-list > button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid #d8e7ed;
  border-radius: 7px;
  background: #fbfdfe;
  color: #284752;
  text-align: left;
}

.agent-provider-list > button:hover {
  border-color: #9cd9d5;
  background: #f4fbfb;
}

.agent-provider-list > button.selected {
  border-color: #46b8b1;
  background: #eafaf8;
  box-shadow: inset 3px 0 0 #0aa79d;
}

.agent-provider-list span,
.agent-provider-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-provider-list span {
  font-size: 13px;
  font-weight: 900;
}

.agent-provider-list small {
  color: #6a8189;
  font-size: 12px;
}

.agent-provider-list em {
  justify-self: start;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef5f6;
  color: #46636d;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.agent-config-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.agent-form-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.agent-form-section h3 {
  margin: 0;
  color: #203c45;
  font-size: 14px;
}

.agent-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agent-section-title > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.agent-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.agent-form-grid.compact {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.agent-form-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #36535e;
  font-size: 12px;
  font-weight: 800;
}

.agent-form-grid label.wide {
  grid-column: 1 / -1;
}

.agent-form-grid input,
.agent-form-grid select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #cbdde5;
  border-radius: 6px;
  background: #fff;
  color: #223b44;
  padding: 7px 9px;
}

.agent-form-grid small {
  color: #6a8189;
  font-size: 11px;
  font-weight: 600;
}

.agent-route-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.agent-route-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, 0.2);
  border-radius: 8px;
  background: #f8fffd;
}

.agent-route-card-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(20, 184, 166, 0.14);
}

.agent-route-card-head strong {
  color: #0f3d3a;
  font-size: 13px;
}

.agent-route-card label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #36535e;
  font-size: 12px;
  font-weight: 800;
}

.agent-route-card label.wide {
  grid-column: 1 / -1;
}

.agent-route-card .inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.agent-route-card input,
.agent-route-card select {
  width: 100%;
  min-height: 34px;
  border: 1px solid #cbdde5;
  border-radius: 6px;
  background: #fff;
  color: #223b44;
  padding: 7px 9px;
}

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #36535e;
  font-size: 12px;
  font-weight: 900;
}

.agent-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #f3d0ce;
  border-radius: 8px;
  background: #fff8f7;
  color: #89514d;
  font-size: 12px;
}

.ghost-button.danger {
  border-color: #efb5b0;
  background: #fff;
  color: #b42318;
}

@media (max-width: 980px) {
  .agent-config-layout {
    grid-template-columns: 1fr;
  }

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

  .agent-route-card {
    grid-template-columns: 1fr;
  }
}

.admin-dictionary-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
}

.admin-dictionary-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.admin-dictionary-item input[type="text"],
.admin-dictionary-item input:not([type]) {
  min-height: 30px;
  border: 1px solid #cbdde5;
  border-radius: 5px;
  padding: 4px 7px;
}

.admin-dictionary-item small {
  color: #7a9097;
  font-size: 11px;
}

.admin-doc-manager {
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: stretch;
}

.admin-doc-list {
  display: grid;
  align-content: start;
  gap: 6px;
  height: clamp(680px, 72vh, 820px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.admin-doc-search {
  width: 100%;
  min-height: 34px;
  border: 1px solid #cbdde5;
  border-radius: 7px;
  padding: 7px 9px;
}

.admin-doc-list > button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid #d8e7ed;
  border-radius: 7px;
  background: #fbfdfe;
  color: #36535e;
  text-align: left;
}

.admin-doc-list > button.active {
  border-color: #6fc6c2;
  background: #effbfa;
}

.admin-doc-list b,
.admin-doc-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-doc-list span {
  color: #718890;
  font-size: 12px;
}

.admin-doc-editor {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.admin-doc-category-editor {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #f8fbfc;
}

.admin-doc-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-doc-category-head button {
  min-height: 28px;
  padding: 0 9px;
}

.admin-doc-category-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 6px 8px;
}

.admin-doc-category-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 54px auto auto;
  gap: 6px;
  align-items: center;
}

.admin-doc-category-row input[type="text"],
.admin-doc-category-row input:not([type]),
.admin-doc-category-row input[type="number"] {
  min-height: 28px;
  border: 1px solid #cbdde5;
  border-radius: 5px;
  padding: 4px 7px;
}

.admin-doc-category-row label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #36535e;
  font-size: 12px;
  font-weight: 800;
}

.admin-doc-textarea {
  min-height: 360px !important;
  font-family: Consolas, Monaco, "Courier New", monospace;
  line-height: 1.55;
}

.admin-doc-meta-grid {
  grid-template-columns: minmax(140px, 220px) minmax(160px, 1fr) 130px 105px;
  gap: 7px 8px;
}

.admin-doc-meta-grid input,
.admin-doc-meta-grid select {
  min-height: 30px;
  padding: 5px 7px;
}

.admin-doc-field-half {
  grid-column: span 2;
}

.admin-doc-content-field {
  grid-column: 1 / -1;
}

@media (max-width: 1180px) {
  .admin-doc-category-list,
  .admin-doc-meta-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .admin-doc-field-half {
    grid-column: span 1;
  }
}

@media (max-width: 820px) {
  .admin-doc-manager,
  .admin-doc-category-list,
  .admin-doc-meta-grid {
    grid-template-columns: 1fr;
  }

  .admin-doc-list {
    height: 420px;
  }

  .admin-doc-field-half,
  .admin-doc-content-field {
    grid-column: 1;
  }
}

.admin-editor-empty {
  padding: 12px;
  border: 1px solid #ffd1d1;
  border-radius: 8px;
  background: #fff6f6;
  color: #b42318;
}

.metric-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.editable-cell {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid #cbdde5;
  border-radius: 5px;
  background: #fff;
  color: #28444f;
}

.admin-table-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-table-actions button {
  min-height: 26px;
  padding: 0 8px;
}

.mapping-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 12px;
}

.module-list {
  display: grid;
  gap: 6px;
  align-content: start;
}

.module-list button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #d6e5eb;
  border-radius: 6px;
  background: #fff;
  color: #38535e;
  text-align: left;
}

.module-list button.active {
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-color: #a9dcda;
  font-weight: 900;
}

.page-map {
  display: grid;
  gap: 10px;
}

.map-section {
  padding: 10px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.map-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.map-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.map-field {
  min-height: 78px;
  padding: 9px;
  border: 1px solid #d9e6ec;
  border-radius: 7px;
  background: #fff;
}

.map-field strong {
  display: block;
  margin-bottom: 4px;
}

.map-field span {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.map-field button {
  margin-top: 7px;
}

.edit-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e7ed;
  border-radius: 8px;
  background: #fbfdfe;
}

.layout-collapsed .header-brand,
.collapsed-preview .header-brand {
  flex-basis: var(--header-brand-width);
}

.layout-collapsed .brand-name,
.layout-collapsed .brand-sub,
.collapsed-preview .brand-name,
.collapsed-preview .brand-sub {
  display: block;
}

.layout-collapsed .app-shell,
.collapsed-preview .app-shell {
  padding-left: var(--sidebar-collapsed-width);
}

.layout-collapsed .sidebar,
.collapsed-preview .sidebar {
  width: var(--sidebar-collapsed-width);
  flex-basis: var(--sidebar-collapsed-width);
  overflow: visible;
  padding: 8px 8px 18px;
}

.layout-collapsed .sidebar-edge-toggle,
.collapsed-preview .sidebar-edge-toggle {
  width: 38px;
  height: 32px;
  margin: 0 auto 8px;
}

.layout-collapsed .menu,
.collapsed-preview .menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: visible;
}

.collapsed-menu-entry-wrap {
  position: relative;
  width: 44px;
  display: flex;
  justify-content: center;
}

.collapsed-menu-entry {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #526d77;
  background: transparent;
}

.collapsed-menu-entry:hover,
.collapsed-menu-entry:focus-visible,
.collapsed-menu-entry.active {
  border-color: #c6e8e8;
  color: var(--primary-dark);
  background: #e9f9f7;
  box-shadow: inset 3px 0 0 var(--primary);
}

.menu-entry-icon {
  width: 17px;
  height: 17px;
}

.collapsed-menu-caret {
  position: absolute;
  right: 3px;
  bottom: 3px;
  color: #8aa1ac;
}

.collapsed-flyout {
  position: absolute;
  top: -2px;
  left: 48px;
  z-index: 120;
  width: min(300px, calc(100vw - 96px));
  padding: 10px;
  border: 1px solid #cfe5e9;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(11, 54, 64, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.collapsed-menu-entry-wrap:hover .collapsed-flyout,
.collapsed-menu-entry-wrap:focus-within .collapsed-flyout {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.collapsed-flyout-title {
  padding: 4px 6px 8px;
  color: #12343e;
  font-size: 13px;
  font-weight: 900;
  border-bottom: 1px solid #e3eff2;
}

.collapsed-flyout-list {
  display: grid;
  gap: 2px;
  padding-top: 6px;
}

.collapsed-flyout-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 30px;
  padding: 5px 7px;
  border-radius: 7px;
  color: #526d77;
  font-size: 12.2px;
  font-weight: 560;
  text-align: left;
}

.collapsed-flyout-item.nested {
  padding-left: 20px;
}

.collapsed-flyout-item:hover,
.collapsed-flyout-item.active {
  color: var(--primary-dark);
  background: #e9f9f7;
}

.collapsed-flyout-dot {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #9fb3bb;
}

.collapsed-flyout-item.active .collapsed-flyout-dot {
  background: var(--primary);
}

/* 视频抽帧选主图：紧凑工具页，只收排版不改功能逻辑 */
.video-frame-page {
  display: grid;
  gap: 4px;
}

.video-frame-page .topbar {
  margin-bottom: 0;
}

.video-frame-page .breadcrumb {
  margin-bottom: 3px;
}

.video-frame-page h1 {
  font-size: 21px;
}

.video-frame-page .topbar p {
  max-width: none;
  margin-top: 3px;
  overflow: hidden;
  color: #5d737d;
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.video-frame-page .tabs {
  min-height: 36px;
  padding: 0 8px;
}

.video-frame-page .tab {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.video-frame-page .page-grid {
  grid-template-columns: 1fr;
  gap: 5px;
}

.video-frame-page .page-grid > .panel,
.video-frame-page .final-action-hub {
  grid-column: 1 / -1;
}

.video-frame-page .panel.dense {
  padding: 7px 10px;
  box-shadow: 0 6px 18px rgba(21, 48, 59, 0.05);
}

.video-frame-page .panel-title {
  gap: 7px;
  margin-bottom: 5px;
  padding-bottom: 4px;
}

.video-frame-page .page-grid .panel-title > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
}

.video-frame-page .panel-title h2 {
  flex: 0 0 auto;
  font-size: 15px;
}

.video-frame-page .panel-title p {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 2px;
  overflow: hidden;
  color: #667d87;
  display: -webkit-box;
  font-size: 12px;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.video-frame-page .form-grid,
.video-frame-page .form-grid.compact {
  gap: 4px 8px;
}

.video-frame-page .video-frame-task-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}

.video-frame-page .video-frame-task-grid .video-frame-task-source {
  grid-column: span 4;
}

.video-frame-page .video-frame-task-grid .video-frame-task-structure {
  grid-column: span 3;
}

.video-frame-page .video-frame-task-grid .video-frame-task-output {
  grid-column: span 5;
}

.video-frame-page .video-frame-task-grid .video-frame-task-template {
  grid-column: span 5;
}

.video-frame-page .video-frame-task-grid .video-frame-task-naming,
.video-frame-page .video-frame-task-grid .video-frame-task-formats {
  grid-column: span 2;
}

.video-frame-page .video-frame-task-grid .video-frame-task-size {
  grid-column: span 3;
}

.video-frame-source-structure-select {
  width: min(100%, 260px);
}

.video-frame-page .video-frame-task-grid .template-row {
  justify-content: flex-start !important;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  width: max-content;
  max-width: 100%;
}

.video-frame-page .video-frame-task-grid .template-row .plain-select {
  width: 172px;
  min-width: 0;
  max-width: 172px;
}

.video-frame-page .video-frame-task-grid .template-row .secondary-button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: max-content;
  min-height: 24px;
  padding: 0 6px;
  border-color: #b9dfe0;
  background: #f3fbfb;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  box-shadow: none;
}

.video-frame-page .video-frame-task-grid .video-frame-task-naming .segmented {
  width: 150px;
  max-width: 100%;
}

.video-frame-page .video-frame-task-grid .video-frame-task-size .segmented {
  width: 245px;
  max-width: 100%;
}

.video-frame-page .video-frame-task-grid .check-row {
  gap: 4px;
}

.video-frame-page .video-frame-quality-grid {
  margin-top: 0;
  padding-top: 0;
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  align-items: start;
}

.video-frame-page .video-frame-quality-grid .field {
  display: grid;
  grid-template-rows: 17px 28px;
  align-content: start;
}

.video-frame-page .video-frame-quality-grid .field:nth-child(4) {
  grid-column: span 2;
}

.video-frame-page .video-frame-fine-tune-grid {
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  align-items: start;
}

.video-frame-page .video-frame-fine-tune-grid .field {
  display: grid;
  grid-template-rows: 17px 28px;
  align-content: start;
  min-width: 0;
}

.video-frame-page .video-frame-fine-tune-grid .video-frame-span-2 {
  grid-column: span 2;
}

.video-frame-page .video-frame-fine-tune-grid .video-frame-span-3 {
  grid-column: span 3;
}

@media (max-width: 1480px) {
  .video-frame-page .video-frame-fine-tune-grid {
    grid-template-columns: repeat(3, minmax(112px, 1fr));
  }

  .video-frame-page .video-frame-fine-tune-grid .video-frame-md-span-1 {
    grid-column: span 1;
  }

  .video-frame-page .video-frame-fine-tune-grid .video-frame-md-span-2 {
    grid-column: span 2;
  }

  .video-frame-page .video-frame-fine-tune-grid .video-frame-md-row-start {
    grid-column-start: 1;
  }
}

@media (max-width: 1080px) {
  .video-frame-page .video-frame-fine-tune-grid {
    grid-template-columns: 1fr;
  }

  .video-frame-page .video-frame-fine-tune-grid .video-frame-span-2,
  .video-frame-page .video-frame-fine-tune-grid .video-frame-span-3 {
    grid-column: 1;
  }
}

.video-frame-page .field {
  gap: 3px;
}

.video-frame-page .field > span,
.video-frame-page .field-title-with-help {
  font-size: 12px;
  line-height: 1.25;
}

.video-frame-page .help-tip {
  width: 15px;
  height: 15px;
  font-size: 10px;
}

.video-frame-page .select-value,
.video-frame-page .readonly-value,
.video-frame-page .path-input,
.video-frame-page .tag-input,
.video-frame-page .number-input,
.video-frame-page .text-input,
.video-frame-page .plain-select,
.video-frame-page .plain-input {
  min-height: 28px;
  padding: 0 7px;
  font-size: 12px;
}

.video-frame-page .plain-input {
  width: 100%;
}

.video-frame-page .plain-input.compact-number {
  width: 56px;
  min-height: 28px;
  padding: 0 6px;
}

.video-frame-page .plain-input.short-text-input {
  width: min(150px, 100%);
  justify-self: start;
}

.video-frame-page .plain-input.model-path-input {
  width: min(230px, 100%);
  justify-self: start;
}

.video-frame-page .path-input {
  gap: 6px;
}

.video-frame-page .path-input button {
  height: 24px;
  padding: 0 7px;
  font-size: 12px;
}

.video-frame-page .segmented {
  min-height: 28px;
  width: 100%;
}

.video-frame-page .segmented button {
  min-height: 24px;
  padding: 0 8px;
  font-size: 12px;
}

.video-frame-page .check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.video-frame-page .check-row label {
  min-height: 26px;
  padding: 3px 7px;
  border: 1px solid #d9e8ee;
  border-radius: 6px;
  background: #fff;
  color: #314852;
  font-size: 12px;
  font-weight: 800;
}

.video-frame-page .inline-inputs {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.video-frame-page .labeled-inline-inputs {
  gap: 5px;
  min-width: 0;
}

.video-frame-page .labeled-inline-inputs label {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #405963;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.video-frame-page .labeled-inline-inputs .plain-input.compact-number {
  width: 52px;
  padding: 0 5px;
}

.video-frame-page .range-inputs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  color: #405963;
  font-size: 12px;
  line-height: 1.25;
}

.video-frame-page .range-inputs .plain-input.compact-number {
  width: 46px;
  padding: 0 5px;
  text-align: center;
}

.video-frame-page .muted-control {
  color: #93a6ad;
}

.video-frame-page .disabled-field {
  opacity: 0.58;
}

.video-frame-page .disabled-field input,
.video-frame-page input:disabled {
  background: #eef4f6;
  color: #84979f;
  cursor: not-allowed;
}

.video-frame-page .range-inputs.compact {
  flex-wrap: nowrap;
}

.video-frame-page .range-inputs span {
  white-space: nowrap;
}

.video-frame-page .switch-row {
  justify-content: flex-start;
  min-height: 28px;
  width: fit-content;
  padding: 0;
  gap: 5px;
}

.video-frame-page .switch-row strong {
  font-size: 12px;
}

.video-frame-page .switch {
  width: 34px;
  height: 18px;
}

.video-frame-page .switch::after {
  width: 14px;
  height: 14px;
}

.video-frame-page .switch.on::after {
  transform: translateX(16px);
}

.video-frame-page .final-action-hub {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 0;
  padding: 7px 10px;
}

.video-frame-page .final-action-copy {
  gap: 2px;
}

.video-frame-page .final-action-copy strong {
  font-size: 14px;
}

.video-frame-page .final-action-copy span {
  font-size: 12px;
}

.video-frame-page .video-frame-scan-feedback {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--theme-info-border);
  border-radius: 6px;
  background: var(--theme-info);
  color: var(--theme-info-text);
  font-size: 12px;
  line-height: 1.45;
}

.video-frame-page .video-frame-scan-feedback.is-success {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.video-frame-page .video-frame-scan-feedback.is-warning {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.video-frame-page .video-frame-scan-feedback.is-error {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
  color: var(--theme-danger-text);
}

.video-frame-page .final-action-buttons {
  align-items: center;
  gap: 7px;
}

.video-frame-page .final-action-buttons .primary-button,
.video-frame-page .final-action-buttons .secondary-button {
  min-height: 30px;
  padding: 0 12px;
  font-size: 13px;
}

.video-frame-page .video-frame-preview-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.video-frame-page .video-frame-preview-limit {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  background: var(--theme-control);
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.video-frame-page .video-frame-preview-limit .plain-input.compact-number {
  width: 48px;
  min-height: 24px;
  padding: 0 4px;
  text-align: center;
}

@media (max-width: 760px) {
  .video-frame-page .video-frame-preview-action {
    flex-wrap: wrap;
  }
}

@media (max-width: 1480px) {
  .cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .local-task-grid {
    grid-template-columns: minmax(330px, 400px) minmax(220px, 270px) minmax(150px, 180px);
    justify-content: start;
  }

  .local-path-field {
    grid-column: span 2;
  }

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

  .summary-grid,
  .dependency-grid,
  .task-summary-grid,
  .history-summary-grid,
  .result-meta-grid,
  .status-strip,
  .route-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .task-start-flash-inner {
    animation: task-flash-in 0.16s ease-out;
  }

  .task-start-spinner {
    animation: task-start-spin 0.8s linear infinite;
  }
}

@keyframes task-flash-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes task-start-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1280px) {
  .header-brand {
    flex-basis: var(--header-brand-width);
  }

  .brand-name,
  .brand-sub {
    display: block;
  }

  /* Sidebar collapse is controlled by the React layout state. */

  .main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .topbar,
  .action-hub,
  .final-action-hub {
    grid-template-columns: 1fr;
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions,
  .global-actions,
  .action-buttons,
  .final-action-buttons {
    justify-content: flex-start;
  }

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

  .local-task-grid,
  .attribute-topline {
    grid-template-columns: repeat(2, minmax(240px, 360px));
    justify-content: start;
  }
}

@media (max-width: 1080px) {
  :root {
    --layout-header-height: 150px;
  }

  .app-header {
    height: auto;
    flex-wrap: wrap;
  }

  .global-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    padding-left: 12px;
    padding-bottom: 8px;
  }

  .top-task-center-entry {
    max-width: 320px;
  }

  .app-shell {
    padding-top: var(--layout-header-height);
  }

  .sidebar {
    top: var(--layout-header-height);
    height: calc(100vh - var(--layout-header-height));
  }

  .cols-2,
  .cols-3,
  .cols-4 {
    grid-template-columns: 1fr;
  }

  .local-task-grid,
  .attribute-topline,
  .attribute-flow-row,
  .attribute-chip-grid {
    grid-template-columns: 1fr;
  }

  .attribute-flow-arrow {
    text-align: left;
    transform: rotate(90deg);
    width: 24px;
  }

  .local-path-field {
    grid-column: span 1;
  }

  .attribute-preset-row {
    justify-content: flex-start;
  }

  .field.wide {
    grid-column: span 1;
  }

  .timing-custom-field {
    grid-column: span 1;
  }

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

  .summary-grid,
  .dependency-grid,
  .task-summary-grid,
  .history-summary-grid,
  .result-meta-grid,
  .status-strip,
  .route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .module-hero {
    grid-template-columns: 1fr;
  }

  .title-single-layout,
  .title-result-grid,
  .title-single-compact-grid,
  .title-single-input-grid {
    grid-template-columns: 1fr;
  }

  .title-image-preview {
    height: 170px;
    min-height: 0;
  }

  .title-bulk-core-grid,
  .title-field-map-grid,
  .title-byte-check-grid,
  .title-overlay-fix-grid,
  .title-single-param-grid,
  .title-blacklist-row {
    grid-template-columns: 1fr;
  }

  .title-bulk-core-grid > *,
  .title-byte-check-grid > *,
  .title-overlay-fix-grid > *,
  .title-single-param-grid > * {
    grid-column: 1 / -1 !important;
  }

  .title-guide-page .title-trend-tablist {
    padding-inline: 8px;
  }

  .title-guide-page .title-trend-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .title-guide-page .title-trend-tab {
    min-width: 166px;
    padding-inline: 14px;
  }

  .admin-layout,
  .mapping-grid {
    grid-template-columns: 1fr;
  }

  .task-center-header,
  .task-center-layout,
  .task-center-detail-head,
  .task-center-body-grid {
    grid-template-columns: 1fr;
  }

  .task-center-filters {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 760px) {
  :root {
    --layout-header-height: 0px;
  }

  .app-header {
    position: static;
    min-height: auto;
    padding: 8px 10px;
  }

  .header-brand {
    flex-basis: auto;
    height: auto;
    padding: 0;
  }

  .global-left {
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
  }

  .global-left strong,
  .global-left span {
    white-space: normal;
  }

  .global-actions {
    padding-left: 0;
    padding-bottom: 0;
  }

  .top-task-center-entry {
    max-width: 100%;
  }

  .app-shell {
    padding-top: 0;
    padding-left: 0;
  }

  .agent-assistant-open .app-shell {
    padding-right: 0;
  }

  .agent-assistant-layer {
    width: min(420px, 100vw);
  }

  .agent-assistant-resizer {
    display: none;
  }

  .sidebar {
    display: none;
  }

  .main {
    padding: 12px 12px 40px;
  }

  .summary-grid,
  .dependency-grid,
  .task-summary-grid,
  .history-summary-grid,
  .result-meta-grid,
  .status-strip,
  .route-grid {
    grid-template-columns: 1fr;
  }

  .task-center-modal-backdrop {
    padding: 8px;
  }

  .task-center-modal-shell {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    min-height: 0;
    padding: 8px;
    border-radius: 10px;
  }

  .task-center-tab {
    flex-basis: min(260px, 82vw);
  }

  .task-center-filters {
    grid-template-columns: 1fr;
  }

  .action-buttons,
  .final-action-buttons,
  .template-actions,
  .global-actions {
    width: 100%;
  }

  .action-buttons button,
  .final-action-buttons button {
    flex: 1 1 150px;
  }

  .plan-grid,
  .map-fields {
    grid-template-columns: 1fr;
  }

  .title-image-preview {
    height: 170px;
  }
}

/* AI批量生图：末尾覆盖，确保新版页面不被旧基础样式回退 */
.batch-image-page .batch-image-hero-v2 {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  gap: 14px;
  padding: 18px 20px;
}

.batch-image-page .batch-image-flow-strip-v2 {
  grid-template-columns: minmax(360px, 1.5fr) repeat(3, minmax(150px, .72fr));
}

.batch-image-page .batch-image-workbench-v2 {
  display: grid;
  gap: 12px;
}

.batch-image-page .batch-image-demo-stage-v2 {
  width: min(100%, 760px);
  margin-inline: auto;
  grid-template-columns: minmax(170px, 210px) minmax(190px, 230px) minmax(170px, 210px);
  gap: 12px;
  padding: 14px;
}

.batch-image-page .batch-image-demo-stage-v2 .batch-image-demo-card {
  width: min(100%, 210px);
}

.batch-image-page .batch-image-demo-bridge-v2 {
  align-self: stretch;
  align-content: center;
}

.batch-image-page .batch-image-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 11px 14px;
}

.batch-image-page .batch-image-material-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-start;
}

.batch-image-page .batch-image-form-grid .span-2 {
  grid-column: span 2;
}

.batch-image-page .plan-field {
  flex: 0 1 590px;
  max-width: 680px;
  align-content: start;
}

.batch-image-page .material-root-field {
  flex: 1 1 430px;
  max-width: 560px;
}

.batch-image-page .short-option-field {
  flex: 0 1 216px;
}

.batch-image-page .compact-option-field {
  flex: 0 1 250px;
}

.batch-image-page .compact-switch-field {
  flex: 0 0 190px;
}

.batch-image-page .result-path-field {
  flex: 1 1 360px;
  max-width: 520px;
}

.batch-image-page .workflow-segmented {
  width: fit-content;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
}

.batch-image-page .workflow-segmented button {
  position: relative;
  min-height: 30px;
  padding-inline: 9px;
}

.batch-image-page .workflow-segmented button em {
  display: inline;
  margin-left: 4px;
  color: #8a9aa2;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
}

.batch-image-page .batch-image-field-note {
  display: block;
  margin-top: 5px;
  color: #667d86;
  font-size: 12px;
  line-height: 1.45;
}

.batch-image-page .batch-image-field-note.warning {
  color: #a45f11;
}

.batch-image-page .batch-image-cloud-grid {
  display: grid;
  grid-template-columns: minmax(560px, 1fr) minmax(310px, .55fr);
  gap: 10px;
  align-items: start;
}

.batch-image-page .batch-image-cloud-main,
.batch-image-page .batch-image-budget-card {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 10px;
  padding: 10px;
  border: 1px solid #dbe9ed;
  border-radius: 8px;
  background: #fbfdfd;
}

.batch-image-page .cloud-name-field {
  flex: 1 1 230px;
}

.batch-image-page .instance-id-field {
  flex: 0 1 210px;
}

.batch-image-page .gpu-tier-field {
  flex: 1 1 500px;
}

.batch-image-page .batch-image-budget-card {
  align-content: start;
}

.batch-image-page .batch-image-budget-card .batch-image-field {
  flex: 0 1 126px;
}

.batch-image-page .batch-image-budget-card .batch-image-field:last-child {
  flex: 1 1 210px;
}

.batch-image-page .batch-image-gpu-list.compact {
  display: inline-flex;
  flex-wrap: wrap;
  width: fit-content;
  gap: 4px;
}

.batch-image-page .batch-image-gpu-list.compact button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
  border-color: #d7e6ea;
  background: #fff;
}

.batch-image-page .batch-image-gpu-list.compact button.active {
  border-color: var(--primary);
  background: #e8f8f6;
  box-shadow: inset 0 0 0 1px rgba(8, 169, 164, .35), 0 8px 18px rgba(8, 169, 164, .10);
}

.batch-image-page .batch-image-gpu-list.compact strong {
  font-size: 12px;
  font-weight: 600;
}

.batch-image-page .batch-image-gpu-list.compact span {
  display: none;
}

.batch-image-page .batch-image-gpu-list.compact em {
  font-size: 11px;
  font-style: normal;
  color: #08766f;
}

.batch-image-page .batch-image-precheck-row {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.18fr);
  gap: 12px;
  margin-bottom: 12px;
}

.batch-image-page .batch-image-precheck-card {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 12px;
  border: 1px solid #b7e2df;
  border-radius: 8px;
  background: #f2fbfa;
}

.batch-image-page .batch-image-precheck-card b {
  color: #074a48;
  font-size: 14px;
}

.batch-image-page .batch-image-precheck-card span {
  color: #5d747d;
  font-size: 12px;
  line-height: 1.55;
}

.batch-image-page .batch-image-precheck-card button {
  width: fit-content;
  min-height: 34px;
}

.batch-image-page .batch-image-handoff-grid {
  grid-template-columns: minmax(260px, 1.3fr) minmax(180px, .7fr) minmax(170px, .55fr);
}

.batch-image-page .batch-image-advanced-handoff {
  margin-top: 2px;
  border: 1px dashed #cfe2e8;
  border-radius: 8px;
  background: #fbfdfe;
}

.batch-image-page .batch-image-advanced-handoff summary {
  padding: 9px 11px;
  color: #31545d;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.batch-image-page .batch-image-advanced-handoff > p {
  margin: -2px 11px 0;
  color: #6b7f87;
  font-size: 12px;
  line-height: 1.5;
}

.batch-image-page .batch-image-advanced-handoff .batch-image-handoff-grid {
  margin: 8px 11px 11px;
}

.batch-image-page .batch-image-action-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.batch-image-page .batch-image-action-group {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px;
  border: 1px solid #d7e8ed;
  border-radius: 8px;
  background: #fbfdfd;
}

.batch-image-page .batch-image-action-group.wide {
  grid-column: 1 / -1;
}

.batch-image-page .batch-image-action-group > span {
  color: #0b4f4c;
  font-size: 13px;
  font-weight: 800;
}

.batch-image-page .batch-image-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.batch-image-page .batch-image-action-group button {
  min-height: 34px;
}

.batch-image-page .batch-image-action-group small {
  color: #607780;
  font-size: 12px;
  line-height: 1.5;
}

.batch-image-page .batch-image-tabs {
  margin: 12px 0;
  box-shadow: 0 6px 16px rgba(21, 48, 59, 0.05);
}

.batch-image-help-grid {
  display: grid;
  gap: 12px;
}

.batch-image-help-panel {
  padding: 14px;
}

.batch-image-help-steps,
.batch-image-help-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.batch-image-help-steps li,
.batch-image-help-list div {
  display: grid;
  grid-template-columns: minmax(128px, 180px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid #dcebef;
  border-radius: 8px;
  background: #fbfdfd;
}

.batch-image-help-steps b,
.batch-image-help-list b {
  color: #0b5f5b;
  font-size: 13px;
}

.batch-image-help-steps span,
.batch-image-help-list span {
  color: #60777f;
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 1260px) {
  .batch-image-page .batch-image-flow-strip-v2,
  .batch-image-page .batch-image-cloud-grid,
  .batch-image-page .batch-image-precheck-row,
  .batch-image-page .batch-image-demo-stage-v2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .batch-image-page .batch-image-hero-v2,
  .batch-image-page .batch-image-form-grid,
  .batch-image-page .batch-image-cloud-main,
  .batch-image-page .batch-image-budget-card,
  .batch-image-page .batch-image-handoff-grid,
  .batch-image-page .batch-image-action-groups {
    grid-template-columns: 1fr;
  }

  .batch-image-page .batch-image-demo-stage-v2 {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .batch-image-page .batch-image-form-grid .span-2,
  .batch-image-page .batch-image-cloud-main .batch-image-field:nth-child(3),
  .batch-image-page .batch-image-budget-card .batch-image-field:last-child {
    grid-column: auto;
  }

  .batch-image-help-steps li,
  .batch-image-help-list div {
    grid-template-columns: 1fr;
  }
}

/* AI云主机批量生图：流程重排正式版 */
.batch-image-page .batch-image-flow-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(460px, .95fr);
  gap: 14px;
  margin-bottom: 14px;
}

.batch-image-page .batch-image-flow-copy,
.batch-image-page .batch-image-preview-panel {
  padding: 18px 20px;
}

.batch-image-page .batch-image-flow-copy h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 8px;
  font-size: 28px;
  letter-spacing: 0;
}

.batch-image-page .batch-image-title-badge {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a45, #ffb020);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(255, 122, 69, .22);
  white-space: nowrap;
}

.batch-image-page .batch-image-flow-copy p {
  max-width: 880px;
  margin: 0 0 14px;
  color: #36535d;
  font-size: 14px;
  line-height: 1.72;
}

.batch-image-page .batch-image-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.batch-image-page .batch-image-preview-head h2 {
  margin: 0;
  font-size: 17px;
}

.batch-image-page .batch-image-preview-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.batch-image-page .batch-image-preview-head > span {
  flex: none;
  padding: 6px 10px;
  border-radius: 999px;
  color: #08766f;
  background: #e8f8f6;
  font-size: 12px;
  font-weight: 850;
}

.batch-image-page .batch-image-preview-flow {
  display: grid;
  grid-template-columns: 170px 100px 170px;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 264px;
}

.batch-image-page .batch-image-preview-flow img {
  width: 170px;
  height: 245px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid #d8e7e8;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 54, 58, .12);
}

.batch-image-page .batch-image-preview-flow > div {
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #08766f;
  font-weight: 850;
}

.batch-image-page .batch-image-preview-flow b {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #0fb5a8, #4bd7c6);
  box-shadow: 0 0 0 10px rgba(16,167,155,.10);
  font-size: 25px;
}

.batch-image-page .batch-image-preview-flow small {
  color: #08766f;
  font-weight: 800;
}

.batch-image-page .batch-image-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.batch-image-page .batch-image-stepper > div {
  min-height: 55px;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 9px;
  padding: 9px 10px;
  border: 1px solid #dbe8e9;
  border-radius: 8px;
  background: #fff;
}

.batch-image-page .batch-image-stepper b {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dfeaed;
  color: #60757d;
  font-size: 12px;
}

.batch-image-page .batch-image-stepper strong {
  font-size: 13px;
}

.batch-image-page .batch-image-stepper span {
  color: var(--muted);
  font-size: 11px;
}

.batch-image-page .batch-image-stepper .done,
.batch-image-page .batch-image-stepper .active {
  border-color: #8ddbd4;
  background: #effbf9;
}

.batch-image-page .batch-image-stepper .done b,
.batch-image-page .batch-image-stepper .active b {
  color: #fff;
  background: var(--primary);
}

.batch-image-page .batch-image-stepper .locked {
  opacity: .62;
  background: #f8fbfb;
}

.batch-image-page .batch-image-flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}

.batch-image-page .batch-image-flow-main {
  display: grid;
  gap: 14px;
}

.batch-image-page .batch-image-flow-card {
  padding: 14px 16px;
}

.batch-image-page .batch-image-flow-card .section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e4eff0;
}

.batch-image-page .batch-image-flow-card .section-title-row > div {
  min-width: 0;
}

.batch-image-page .batch-image-flow-card .section-title-row > button {
  flex: none;
}

.batch-image-page .batch-image-flow-card .section-title-row h2 {
  margin: 0;
  font-size: 18px;
}

.batch-image-page .batch-image-flow-card .section-title-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.batch-image-page .batch-image-folder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px 118px;
  gap: 10px;
  align-items: end;
}

.batch-image-page .batch-image-folder-grid .material-root-field {
  max-width: none;
  width: 100%;
}

.batch-image-page .batch-image-folder-grid > button {
  width: auto;
  min-width: 118px;
}

.batch-image-page .batch-image-folder-samples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.batch-image-page .batch-image-folder-samples span {
  padding: 9px 10px;
  border: 1px dashed #bdd8dc;
  border-radius: 7px;
  color: #41606a;
  background: #f8fcfc;
  font-size: 12px;
  line-height: 1.5;
}

.batch-image-page .batch-image-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.batch-image-page .batch-image-metrics div {
  padding: 11px 12px;
  border: 1px solid #dbe8e9;
  border-radius: 8px;
  background: #fff;
}

.batch-image-page .batch-image-metrics .good {
  border-color: #bdebd3;
  background: #e9f9f1;
}

.batch-image-page .batch-image-metrics .warn {
  border-color: #f5d89c;
  background: #fff5df;
}

.batch-image-page .batch-image-metrics b {
  display: block;
  margin-bottom: 4px;
  font-size: 24px;
  line-height: 1;
}

.batch-image-page .batch-image-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.batch-image-page .batch-image-plan-grid {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(430px, 500px) minmax(260px, 1fr);
  gap: 12px;
  align-items: start;
}

.batch-image-page .batch-image-plan-grid select {
  width: 280px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #cfe0e3;
  border-radius: 8px;
  color: #16363d;
  background: #fff;
  font-weight: 850;
}

.batch-image-page .batch-image-gpu-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 6px;
  max-width: 520px;
}

.batch-image-page .batch-image-gpu-cards button {
  position: relative;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
  align-items: center;
  padding: 10px 12px;
  border: 2px solid #d9e6e9;
  border-radius: 9px;
  color: var(--text);
  background: #fff;
  text-align: left;
}

.batch-image-page .batch-image-gpu-cards button.active {
  border-color: #2f7df6;
  background: #eef5ff;
}

.batch-image-page .batch-image-gpu-cards em {
  grid-row: 1 / span 2;
  padding: 4px 7px;
  border-radius: 6px;
  color: #347c19;
  background: #dcf7bd;
  font-style: normal;
  font-weight: 850;
  font-size: 12px;
}

.batch-image-page .batch-image-gpu-cards em.low {
  color: #496172;
  background: #e6edf5;
}

.batch-image-page .batch-image-gpu-cards strong {
  font-size: 17px;
}

.batch-image-page .batch-image-gpu-cards span {
  color: var(--muted);
  font-size: 12px;
}

.batch-image-page .batch-image-gpu-cards i {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #2f7df6;
  font-style: normal;
  font-weight: 900;
}

.batch-image-page .batch-image-gpu-detail {
  border: 1px solid #dbe8e9;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  align-self: stretch;
}

.batch-image-page .batch-image-gpu-detail dl {
  margin: 0;
}

.batch-image-page .batch-image-gpu-detail div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  min-height: 46px;
  align-items: center;
  border-bottom: 1px solid #e6eff0;
}

.batch-image-page .batch-image-gpu-detail div:last-child {
  border-bottom: 0;
}

.batch-image-page .batch-image-gpu-detail dt {
  padding-left: 14px;
  color: #5d7380;
  font-weight: 700;
}

.batch-image-page .batch-image-gpu-detail dd {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  margin: 0;
  padding: 9px 12px;
}

.batch-image-page .batch-image-gpu-detail dd b {
  font-size: 17px;
}

.batch-image-page .batch-image-gpu-detail dd span {
  color: #5f7680;
  font-size: 12px;
}

.batch-image-page .batch-image-protect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.batch-image-page .batch-image-protect-grid > div {
  padding: 10px;
  border: 1px solid #dbe8e9;
  border-radius: 9px;
  background: #fff;
}

.batch-image-page .batch-image-protect-grid b {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 13px;
}

.batch-image-page .batch-image-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.batch-image-page .batch-image-chip-row > button {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #48616b;
  background: #f1f6f7;
  font-size: 12px;
  font-weight: 750;
}

.batch-image-page .batch-image-chip-row > button.active {
  color: #fff;
  background: var(--primary);
}

.batch-image-page .batch-image-chip-row .batch-image-field {
  width: 106px;
  margin: 0;
}

.batch-image-page .batch-image-chip-row .batch-image-label {
  display: none;
}

.batch-image-page .batch-image-cloud-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.batch-image-page .batch-image-cloud-status-grid div {
  padding: 10px;
  border: 1px solid #dbe8e9;
  border-radius: 8px;
  background: #fff;
}

.batch-image-page .batch-image-cloud-status-grid b {
  position: relative;
  display: block;
  padding-left: 16px;
  margin-bottom: 5px;
  font-size: 13px;
}

.batch-image-page .batch-image-cloud-status-grid b::before {
  position: absolute;
  left: 0;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #19b56b;
  content: "";
}

.batch-image-page .batch-image-cloud-status-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.batch-image-page .batch-image-cloud-actions,
.batch-image-page .batch-image-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e4eff0;
}

.batch-image-page .batch-image-summary-panel {
  position: sticky;
  top: 74px;
  padding: 16px;
}

.batch-image-page .batch-image-summary-title {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 850;
}

.batch-image-page .batch-image-summary-list,
.batch-image-page .batch-image-summary-status {
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid #dbe8e9;
  border-radius: 9px;
  background: #fff;
}

.batch-image-page .batch-image-summary-list div,
.batch-image-page .batch-image-summary-status div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #edf3f4;
}

.batch-image-page .batch-image-summary-list div:last-child,
.batch-image-page .batch-image-summary-status div:last-child {
  border-bottom: 0;
}

.batch-image-page .batch-image-summary-list dt,
.batch-image-page .batch-image-summary-status span {
  color: var(--muted);
}

.batch-image-page .batch-image-summary-list dd {
  margin: 0;
  font-size: 16px;
  font-weight: 850;
  text-align: right;
}

.batch-image-page .batch-image-summary-status {
  background: #e9f9f1;
  border-color: #b8ebd1;
}

.batch-image-page .batch-image-summary-status b {
  font-size: 16px;
}

.batch-image-page .batch-image-start-box {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 14px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #0fafa2, #0b8f86);
}

.batch-image-page .batch-image-start-box strong {
  font-size: 17px;
}

.batch-image-page .batch-image-start-box span {
  color: rgba(255,255,255,.86);
  font-size: 12px;
  line-height: 1.45;
}

.batch-image-page .batch-image-start-box button {
  height: 42px;
  border: 0;
  border-radius: 9px;
  color: var(--primary-dark);
  background: #fff;
  font-size: 15px;
  font-weight: 900;
}

.batch-image-page button:disabled,
.batch-image-page .primary-button:disabled,
.batch-image-page .secondary-button:disabled,
.batch-image-page .danger-light-button:disabled,
.batch-image-page .blue-button:disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: grayscale(.2);
}

.batch-image-page .blue-button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #2f7df6;
  border-radius: 7px;
  color: #fff;
  background: #2f7df6;
  font-weight: 850;
}

.batch-image-page .full-width {
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

@media (max-width: 1280px) {
  .batch-image-page .batch-image-flow-hero,
  .batch-image-page .batch-image-flow-layout,
  .batch-image-page .batch-image-plan-grid {
    grid-template-columns: 1fr;
  }

  .batch-image-page .batch-image-summary-panel {
    position: static;
  }
}

@media (max-width: 920px) {
  .batch-image-page .batch-image-stepper,
  .batch-image-page .batch-image-folder-grid,
  .batch-image-page .batch-image-folder-samples,
  .batch-image-page .batch-image-metrics,
  .batch-image-page .batch-image-protect-grid,
  .batch-image-page .batch-image-cloud-status-grid {
    grid-template-columns: 1fr;
  }

  .batch-image-page .batch-image-preview-flow {
    grid-template-columns: 1fr;
  }

  .batch-image-page .batch-image-preview-flow img {
    margin-inline: auto;
  }
}

/* AI云主机批量生图：短预检内联反馈 + 工具页紧凑密度 */
.batch-image-page .batch-image-flow-hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .78fr);
  gap: 10px;
  margin-bottom: 10px;
}

.batch-image-page .batch-image-flow-copy,
.batch-image-page .batch-image-preview-panel,
.batch-image-page .batch-image-flow-card,
.batch-image-page .batch-image-summary-panel {
  padding: 11px 13px;
}

.batch-image-page .batch-image-flow-copy h1 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.batch-image-page .batch-image-title-badge {
  height: 22px;
  padding: 0 8px;
}

.batch-image-page .batch-image-flow-copy p {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.48;
}

.batch-image-page .batch-image-value-pills {
  gap: 6px;
}

.batch-image-page .batch-image-value-pills span {
  padding: 3px 8px;
  font-size: 12px;
}

.batch-image-page .batch-image-preview-head {
  margin-bottom: 6px;
}

.batch-image-page .batch-image-preview-flow {
  grid-template-columns: 132px 82px 132px;
  gap: 10px;
  min-height: 188px;
}

.batch-image-page .batch-image-preview-flow img {
  width: 132px;
  height: 184px;
  border-radius: 8px;
}

.batch-image-page .batch-image-preview-flow b {
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 7px rgba(16,167,155,.10);
  font-size: 21px;
}

.batch-image-page .batch-image-stepper {
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.batch-image-page .batch-image-stepper > div {
  min-height: 42px;
  grid-template-columns: 22px 1fr;
  gap: 1px 7px;
  padding: 7px 8px;
  border-radius: 7px;
}

.batch-image-page .batch-image-stepper b {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.batch-image-page .batch-image-flow-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 10px;
}

.batch-image-page .batch-image-flow-main {
  gap: 10px;
}

.batch-image-page .batch-image-flow-card .section-title-row {
  gap: 10px;
  padding-bottom: 7px;
  margin-bottom: 8px;
}

.batch-image-page .batch-image-flow-card .section-title-row h2 {
  font-size: 16px;
}

.batch-image-page .batch-image-flow-card .section-title-row p {
  margin-top: 2px;
  line-height: 1.34;
}

.batch-image-page .batch-image-folder-grid {
  grid-template-columns: minmax(340px, 620px) 96px;
  gap: 8px;
}

.batch-image-page .batch-image-folder-grid > button {
  min-width: 96px;
}

.batch-image-page .batch-image-folder-samples {
  grid-template-columns: repeat(3, minmax(0, 220px));
  gap: 6px;
  margin-top: 6px;
}

.batch-image-page .batch-image-folder-samples span {
  padding: 6px 8px;
  line-height: 1.35;
}

.batch-image-page .batch-image-inline-status {
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid #cfe7ea;
  border-radius: 7px;
  color: #35616a;
  background: #f7fcfc;
  font-size: 12px;
}

.batch-image-page .batch-image-inline-status.running {
  border-color: #88d8d1;
  color: #076f68;
  background: #ecfbf9;
}

.batch-image-page .batch-image-inline-status.success {
  border-color: #aee8c7;
  color: #136b3e;
  background: #effbf4;
}

.batch-image-page .batch-image-inline-status.failed {
  border-color: #f0b5aa;
  color: #9f2e1d;
  background: #fff4f1;
}

.batch-image-page .batch-image-metrics {
  gap: 6px;
  margin-top: 7px;
}

.batch-image-page .batch-image-metrics div {
  padding: 7px 8px;
  border-radius: 7px;
}

.batch-image-page .batch-image-metrics b {
  margin-bottom: 2px;
  font-size: 19px;
}

.batch-image-page .batch-image-plan-grid {
  grid-template-columns: minmax(210px, 250px) minmax(430px, 500px) minmax(260px, 1fr);
  gap: 10px;
  align-items: start;
}

.batch-image-page .batch-image-plan-grid select {
  width: 100%;
  height: 34px;
}

.batch-image-page .batch-image-plan-select,
.batch-image-page .batch-image-gpu-field {
  min-width: 0;
}

.batch-image-page .batch-image-field-note {
  margin-top: 5px;
  line-height: 1.35;
}

.batch-image-page .batch-image-gpu-cards {
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 7px;
  max-width: 520px;
}

.batch-image-page .batch-image-gpu-cards button {
  min-height: 50px;
  padding: 7px 9px;
}

.batch-image-page .batch-image-gpu-cards strong {
  font-size: 15px;
}

.batch-image-page .batch-image-gpu-detail div {
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 38px;
}

.batch-image-page .batch-image-gpu-detail dt {
  padding-left: 10px;
}

.batch-image-page .batch-image-gpu-detail dd {
  gap: 6px 12px;
  padding: 6px 9px;
}

.batch-image-page .batch-image-gpu-detail dd b {
  font-size: 15px;
}

@media (max-width: 1500px) {
  .batch-image-page .batch-image-plan-grid {
    grid-template-columns: minmax(210px, 250px) minmax(430px, 1fr);
  }

  .batch-image-page .batch-image-gpu-detail {
    grid-column: 1 / -1;
  }

  .batch-image-page .batch-image-gpu-detail dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .batch-image-page .batch-image-gpu-detail div:nth-child(odd) {
    border-right: 1px solid #e6eff0;
  }

  .batch-image-page .batch-image-gpu-detail div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 980px) {
  .batch-image-page .batch-image-plan-grid {
    grid-template-columns: 1fr;
  }

  .batch-image-page .batch-image-gpu-cards {
    max-width: none;
  }

  .batch-image-page .batch-image-gpu-detail dl {
    grid-template-columns: 1fr;
  }

  .batch-image-page .batch-image-gpu-detail div:nth-child(odd) {
    border-right: 0;
  }

  .batch-image-page .batch-image-gpu-detail div:nth-last-child(-n + 2) {
    border-bottom: 1px solid #e6eff0;
  }

  .batch-image-page .batch-image-gpu-detail div:last-child {
    border-bottom: 0;
  }
}

.batch-image-page .batch-image-protect-grid,
.batch-image-page .batch-image-cloud-status-grid {
  gap: 7px;
}

.batch-image-page .batch-image-protect-grid > div,
.batch-image-page .batch-image-cloud-status-grid div {
  padding: 8px;
  border-radius: 7px;
}

.batch-image-page .batch-image-protect-grid b {
  margin-bottom: 6px;
}

.batch-image-page .batch-image-chip-row {
  gap: 5px;
}

.batch-image-page .batch-image-chip-row > button {
  min-height: 27px;
  padding: 0 8px;
}

.batch-image-page .batch-image-cloud-actions,
.batch-image-page .batch-image-summary-actions {
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
}

.batch-image-page .batch-image-summary-title {
  margin-bottom: 8px;
  font-size: 16px;
}

.batch-image-page .batch-image-summary-list,
.batch-image-page .batch-image-summary-status {
  margin-bottom: 8px;
  padding: 8px 10px;
}

.batch-image-page .batch-image-summary-list div,
.batch-image-page .batch-image-summary-status div {
  padding: 5px 0;
}

.batch-image-page .batch-image-summary-list dd,
.batch-image-page .batch-image-summary-status b {
  font-size: 14px;
}

.batch-image-page .batch-image-start-box {
  gap: 6px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 9px;
}

.batch-image-page .batch-image-start-box button {
  height: 36px;
}

.batch-image-page .full-width {
  margin-bottom: 7px;
}

.batch-image-page .batch-image-folder-guide {
  display: none;
  grid-template-columns: 118px minmax(0, 1fr) minmax(260px, .72fr);
  gap: 8px;
  align-items: stretch;
  margin-top: 7px;
  padding: 8px 10px;
  border: 1px dashed #c8e1e4;
  border-radius: 8px;
  background: #f8fcfc;
}

.batch-image-page .batch-image-folder-guide b {
  display: flex;
  align-items: center;
  color: #123942;
  font-size: 13px;
}

.batch-image-page .batch-image-folder-guide code {
  display: block;
  margin: 0;
  color: #28545e;
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: normal;
}

.batch-image-page .batch-image-folder-guide span {
  color: #5c727b;
  font-size: 12px;
  line-height: 1.5;
}

.batch-image-page .batch-image-download-row {
  display: grid;
  grid-template-columns: minmax(330px, 1fr) minmax(142px, 170px) minmax(320px, 480px);
  gap: 8px 10px;
  align-items: end;
  margin-top: 8px;
}

.batch-image-page .batch-image-choice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.batch-image-page .batch-image-choice-row > button {
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid #c6dce2;
  border-radius: 6px;
  background: #fff;
  color: #42616b;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.batch-image-page .batch-image-choice-row > button.active {
  border-color: #0ca6a0;
  background: #e9f9f7;
  color: #08756f;
}

.batch-image-page .batch-image-inline-number {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5a747d;
  font-size: 12px;
}

.batch-image-page .batch-image-inline-number input {
  width: 62px;
  height: 31px;
  padding: 4px 7px;
  border: 1px solid #c6dce2;
  border-radius: 6px;
  background: #fff;
  color: #173b44;
  font: inherit;
}

.batch-image-page .batch-image-download-row .result-download-field {
  max-width: 480px;
}

.batch-image-page .batch-image-download-row .download-switch-field {
  margin-bottom: 0;
}

.batch-image-page .batch-image-gpu-detail dd b {
  color: #102f38;
}

.batch-image-page .batch-image-protection-details {
  padding: 0;
  overflow: hidden;
}

.batch-image-page .batch-image-advanced-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 13px;
}

.batch-image-page .batch-image-advanced-header span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.batch-image-page .batch-image-advanced-header b {
  color: #102f38;
  font-size: 16px;
}

.batch-image-page .batch-image-advanced-header em {
  color: #6d838c;
  font-size: 12px;
  font-style: normal;
}

.batch-image-page .batch-image-advanced-toggle {
  min-width: 56px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
}

.batch-image-page .batch-image-protection-details .batch-image-protect-grid {
  padding: 0 13px 12px;
}

.batch-image-page .batch-image-advanced-block {
  margin: 0 13px 12px;
  padding-top: 10px;
  border-top: 1px solid #e4eff0;
}

.batch-image-page .batch-image-advanced-block > b {
  display: block;
  color: #123942;
  font-size: 13px;
  margin-bottom: 2px;
}

.batch-image-page .batch-image-advanced-block > p {
  margin: 0 0 8px;
  color: #6a7f87;
  font-size: 12px;
  line-height: 1.42;
}

.batch-image-page .batch-image-advanced-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.batch-image-page .batch-image-protect-grid > div p {
  margin: 0 0 6px;
  color: #6a7f87;
  font-size: 12px;
  line-height: 1.42;
}

.batch-image-page .batch-image-system-protection {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-color: var(--theme-success-border);
  background: var(--theme-success);
}

.batch-image-page .batch-image-system-protection > div:first-child {
  display: grid;
  gap: 3px;
}

.batch-image-page .batch-image-system-protection > div:first-child b {
  color: var(--theme-text-strong);
  font-size: 16px;
}

.batch-image-page .batch-image-system-protection > div:first-child p {
  margin: 0;
  color: var(--theme-text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.batch-image-page .batch-image-system-protection-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.batch-image-page .batch-image-system-protection-flow span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 9px 4px 5px;
  border: 1px solid var(--theme-success-border);
  border-radius: 999px;
  background: var(--theme-surface);
  color: var(--theme-text-primary);
  font-size: 12px;
}

.batch-image-page .batch-image-system-protection-flow span b {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--theme-success-text);
  color: var(--theme-on-accent);
  font-size: 11px;
}

.batch-image-page .batch-image-system-protection-flow i {
  color: var(--theme-success-text);
  font-style: normal;
  font-weight: 800;
}

.batch-image-page .batch-image-cloud-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.batch-image-page .batch-image-cloud-path > div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 7px;
  min-height: 70px;
  padding: 9px;
  border: 1px solid #dbe8e9;
  border-radius: 8px;
  background: #fff;
}

.batch-image-page .batch-image-cloud-path b {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #77909a;
  background: #edf4f6;
  font-size: 12px;
}

.batch-image-page .batch-image-cloud-path strong {
  color: #173941;
  font-size: 13px;
}

.batch-image-page .batch-image-cloud-path span {
  color: #607982;
  font-size: 12px;
  line-height: 1.36;
}

.batch-image-page .batch-image-cloud-path .active {
  border-color: #8bded7;
  background: #effcfb;
}

.batch-image-page .batch-image-cloud-path .active b,
.batch-image-page .batch-image-cloud-path .done b {
  color: #fff;
  background: #0fafa2;
}

.batch-image-page .batch-image-cloud-path .done {
  border-color: #ace8c8;
  background: #f0fbf5;
}

.batch-image-page .batch-image-cloud-path .locked {
  background: #fafcfd;
}

@media (max-width: 1180px) {
  .batch-image-page .batch-image-folder-guide,
  .batch-image-page .batch-image-cloud-path {
    grid-template-columns: 1fr;
  }

  .batch-image-page .batch-image-download-row {
    grid-template-columns: minmax(280px, 1fr) minmax(142px, 170px);
  }

  .batch-image-page .batch-image-download-row .result-download-field {
    grid-column: 1 / -1;
    max-width: none;
  }
}

@media (max-width: 760px) {
  .batch-image-page .batch-image-download-row {
    grid-template-columns: 1fr;
  }
}

.doc-center-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100vh - 92px);
}

.doc-center-header {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 18px 24px 22px;
  text-align: center;
}

.doc-center-header.compact {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  align-items: end;
  justify-items: stretch;
  gap: 18px;
  padding: 14px 18px;
  text-align: left;
}

.doc-header-copy {
  width: 100%;
  max-width: 860px;
}

.doc-header-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}

.doc-return-workbench {
  border: 1px solid #b9d3dd;
  border-radius: 7px;
  padding: 6px 10px;
  background: #fff;
  color: #007f77;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.doc-return-workbench:hover,
.doc-return-workbench:focus-visible {
  border-color: #12a99a;
  background: #eefaf8;
}

.doc-center-header.compact .doc-header-copy {
  max-width: none;
}

.doc-header-copy h1 {
  margin-bottom: 6px;
}

.doc-header-copy p {
  margin: 0;
  color: #3e5964;
}

.doc-search-box {
  display: grid;
  gap: 8px;
  width: min(920px, 100%);
  color: #264653;
  font-weight: 700;
  text-align: left;
}

.doc-search-box.compact {
  width: 100%;
  gap: 6px;
  font-size: 13px;
}

.doc-search-box textarea,
.doc-search-box input {
  width: 100%;
  border: 1px solid #b9d3dd;
  border-radius: 12px;
  color: #122832;
  background: #fff;
  outline: none;
}

.doc-search-box textarea {
  min-height: 88px;
  padding: 14px 16px;
  resize: vertical;
  line-height: 1.65;
  box-shadow: 0 14px 28px rgba(11, 54, 66, 0.06);
}

.doc-search-box input {
  height: 40px;
  padding: 0 13px;
  line-height: 40px;
}

.doc-search-box textarea:focus,
.doc-search-box input:focus {
  border-color: #12a99a;
  box-shadow: 0 0 0 3px rgba(18, 169, 154, 0.12);
}

.doc-home,
.doc-search-results {
  display: grid;
  gap: 12px;
}

.doc-home-section,
.doc-search-results {
  border: 1px solid #d5e3e8;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(11, 54, 66, 0.05);
}

.doc-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.doc-section-heading h2 {
  margin: 0;
  color: #0f2933;
  font-size: 18px;
}

.doc-section-heading span {
  color: #6a7d86;
  font-size: 13px;
}

.doc-quick-grid,
.doc-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.doc-quick-grid button,
.doc-topic-grid button,
.doc-recommend-list button,
.doc-result-grid button {
  border: 1px solid #dbe9ee;
  border-radius: 10px;
  background: #fff;
  color: #244550;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.doc-quick-grid button {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 12px;
}

.doc-quick-grid button:first-child {
  border-color: #9edcd5;
  background: #ebfaf8;
}

.doc-quick-grid button:hover,
.doc-topic-grid button:hover,
.doc-recommend-list button:hover,
.doc-result-grid button:hover {
  border-color: #14aa9a;
  background: #f0fbf9;
  box-shadow: 0 12px 24px rgba(11, 54, 66, 0.08);
  transform: translateY(-1px);
}

.doc-quick-grid strong,
.doc-topic-grid strong,
.doc-recommend-list strong,
.doc-result-grid strong {
  color: #102b35;
  font-size: 15px;
}

.doc-quick-grid span,
.doc-topic-grid span,
.doc-recommend-list span,
.doc-result-grid span {
  color: #637a84;
  font-size: 13px;
  line-height: 1.45;
}

.doc-quick-grid span,
.doc-topic-grid span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doc-topic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.doc-topic-grid button {
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 12px;
}

.doc-topic-grid button > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.doc-topic-grid em {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef6f8;
  color: #66808a;
  font-style: normal;
  font-size: 12px;
}

.doc-topic-grid small {
  display: -webkit-box;
  color: #7a8c93;
  font-size: 12px;
  line-height: 1.35;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doc-recommend-list,
.doc-result-grid {
  display: grid;
  gap: 10px;
}

.doc-recommend-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.doc-recommend-list button,
.doc-result-grid button {
  display: grid;
  gap: 7px;
  min-height: 88px;
  padding: 13px 14px;
}

.doc-recommend-list button {
  gap: 4px;
  min-height: 56px;
  padding: 10px 12px;
}

.doc-recommend-list span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-result-grid .muted {
  grid-column: 1 / -1;
}

.doc-center-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 0;
}

.doc-center-nav,
.doc-reader {
  border: 1px solid #d5e3e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(11, 54, 66, 0.06);
}

.doc-center-nav {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  align-self: start;
  min-height: 0;
  overflow: visible;
}

.doc-back-home {
  border: 0;
  border-bottom: 1px solid #e4edf1;
  padding: 9px 12px;
  background: #f7fbfc;
  color: #008b80;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.doc-back-home:hover {
  background: #e8f7f5;
}

.doc-tree-list {
  display: block;
  max-height: calc(100vh - 156px);
  max-height: calc(100dvh - 156px);
  padding: 6px 8px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.doc-tree-group {
  display: grid;
  gap: 4px;
  margin-bottom: 8px;
}

.doc-tree-group h3 {
  position: sticky;
  top: -6px;
  z-index: 1;
  margin: 0;
  border-bottom: 1px solid #e6eef2;
  padding: 5px 2px 5px;
  background: #fff;
  color: #0f2933;
  font-size: 13px;
}

.doc-tree-group > div {
  display: grid;
  gap: 2px;
  border-left: 2px solid #d7e7eb;
  padding-left: 7px;
}

.doc-tree-group button {
  border: 0;
  border-radius: 6px;
  padding: 5px 7px;
  background: transparent;
  color: #234350;
  font-size: 12.5px;
  line-height: 1.32;
  text-align: left;
  cursor: pointer;
}

.doc-tree-group button:hover,
.doc-tree-group button.active {
  background: #e8f7f5;
  color: #008b80;
}

.doc-reader {
  min-width: 0;
  min-height: 680px;
  padding: 22px 28px 34px;
  overflow: auto;
}

.doc-reader-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  color: #6c7f88;
  font-size: 12px;
}

.doc-reader-meta span {
  border: 1px solid #d7e7eb;
  border-radius: 999px;
  padding: 4px 9px;
  background: #f7fbfc;
}

.doc-markdown {
  max-width: 940px;
  color: #1e3440;
  font-size: 14px;
  line-height: 1.85;
}

.doc-markdown h1,
.doc-markdown h2,
.doc-markdown h3,
.doc-markdown h4 {
  color: #0f2933;
  line-height: 1.35;
  scroll-margin-top: 96px;
}

.doc-must-read-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.doc-must-read-grid button {
  border-color: var(--theme-success-border);
  background: var(--theme-active);
}

.doc-markdown a {
  color: #007f77;
  font-weight: 700;
  text-underline-offset: 3px;
}

.doc-markdown a:hover,
.doc-markdown a:focus-visible {
  color: #005f59;
}

.doc-anchor-highlight {
  border-radius: 5px;
  background: #dff7f3;
  box-shadow: 0 0 0 4px #dff7f3;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.doc-markdown h1 {
  margin: 0 0 18px;
  font-size: 28px;
}

.doc-markdown h2 {
  margin: 26px 0 10px;
  padding-top: 4px;
  font-size: 20px;
}

.doc-markdown h3 {
  margin: 20px 0 8px;
  font-size: 16px;
}

.doc-markdown h4 {
  margin: 16px 0 6px;
  font-size: 14px;
}

.doc-markdown p {
  margin: 8px 0;
}

.doc-list-line {
  padding-left: 2px;
}

.doc-markdown blockquote {
  margin: 14px 0;
  border-left: 4px solid #12a99a;
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  background: #eefaf8;
  color: #24535e;
}

.doc-code-block {
  margin: 12px 0;
  border: 1px solid #d6e5ea;
  border-radius: 8px;
  padding: 12px;
  background: #f6fafb;
  color: #14333f;
  white-space: pre-wrap;
  overflow: auto;
}

.doc-empty-state {
  display: grid;
  place-content: center;
  min-height: 420px;
  color: #6d8088;
  text-align: center;
}

@media (max-width: 980px) {
  .doc-center-header,
  .doc-center-layout {
    display: grid;
    grid-template-columns: 1fr;
  }

  .doc-center-header {
    text-align: left;
    justify-items: stretch;
  }

  .doc-center-header.compact {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .doc-search-box {
    width: 100%;
  }

  .doc-quick-grid,
  .doc-topic-grid,
  .doc-recommend-list,
  .doc-result-grid {
    grid-template-columns: 1fr;
  }

  .doc-center-nav,
  .doc-reader {
    min-height: auto;
  }

  .doc-center-nav {
    position: static;
    max-height: none;
  }

  .doc-tree-list {
    max-height: none;
    overflow: visible;
  }
}

/* 云店AI工作台首页 */
.workbench-home {
  display: grid;
  gap: 14px;
}

.workbench-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 2px 0;
}

.workbench-hero h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
}

.workbench-hero p {
  max-width: 980px;
  margin: 6px 0 0;
  color: var(--muted);
}

.workbench-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 4px;
}

.workbench-hero-actions button,
.workbench-section-title > button,
.workbench-entry-action,
.workbench-mini-panel button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid #b9d2dc;
  border-radius: 7px;
  color: var(--primary-dark);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.workbench-hero-actions button:hover,
.workbench-section-title > button:hover,
.workbench-mini-panel button:hover {
  border-color: #8bc9c3;
  background: #f6fffd;
}

.workbench-task-board,
.workbench-agent-panel,
.workbench-quick-panel,
.workbench-mini-panel {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(18, 48, 60, 0.045);
}

.workbench-task-board {
  padding: 16px 16px 14px;
}

.workbench-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.workbench-section-title h2,
.workbench-mini-panel h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.workbench-section-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.workbench-task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.workbench-task-card {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid #d5e6ed;
  border-radius: 8px;
  background: #fbfeff;
}

.workbench-task-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.workbench-task-card strong {
  color: var(--text);
  font-size: 15px;
}

.workbench-task-card small {
  color: var(--muted);
  line-height: 1.4;
}

.workbench-task-card.tone-run {
  border-color: #aee2d8;
  background: #f4fffb;
}

.workbench-task-card.tone-run span {
  color: #087b69;
}

.workbench-task-card.tone-warn {
  border-color: #f6d58a;
  background: #fffaf0;
}

.workbench-task-card.tone-warn span {
  color: #9b5a00;
}

.workbench-task-card.tone-danger {
  border-color: #f4b5b5;
  background: #fff6f6;
}

.workbench-task-card.tone-danger span {
  color: var(--danger);
}

.workbench-agent-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-color: #a9e3de;
  background: #f7fffd;
}

.workbench-agent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.workbench-agent-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-dark);
  font-size: 18px;
}

.workbench-agent-title span {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  color: var(--primary-dark);
  background: #dffbf4;
}

.workbench-agent-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.workbench-agent-tags em,
.workbench-entry-copy em {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--primary-dark);
  background: #e9f7f5;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.workbench-agent-tags em:nth-child(2) {
  color: #2456c9;
  background: #eef2ff;
}

.workbench-agent-tags em:nth-child(4) {
  color: #8a5700;
  background: #fff3d9;
}

.workbench-agent-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.workbench-agent-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.workbench-agent-input textarea {
  min-height: 46px;
  max-height: 78px;
  resize: vertical;
  padding: 9px 12px;
  border: 1px solid #b9d9df;
  border-radius: 8px;
  color: var(--text);
  background: #fff;
  font: inherit;
  line-height: 1.42;
}

.workbench-agent-input textarea:focus {
  outline: 2px solid rgba(8, 169, 164, 0.18);
  border-color: #75c7bf;
}

.workbench-agent-input button {
  min-width: 110px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  color: #fff;
  background: var(--primary);
  font-weight: 900;
}

.workbench-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 0.9fr);
  gap: 16px;
  align-items: start;
}

.workbench-quick-panel {
  padding: 16px;
}

.workbench-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workbench-entry-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid #d5e6ed;
  border-radius: 8px;
  text-align: left;
  background: #fbfeff;
}

.workbench-entry-card:hover {
  border-color: #9bd8d1;
  background: #f7fffd;
}

.workbench-entry-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
}

.workbench-entry-icon.tone-teal { color: #087b69; background: #e6f7f5; }
.workbench-entry-icon.tone-blue { color: #2456c9; background: #eff6ff; }
.workbench-entry-icon.tone-amber { color: #9b5a00; background: #fff8e8; }
.workbench-entry-icon.tone-violet { color: #6d48c4; background: #f2f0ff; }
.workbench-entry-icon.tone-green { color: #0c7a48; background: #edfdf5; }
.workbench-entry-icon.tone-rose { color: #c73a52; background: #fff1f2; }
.workbench-entry-icon.tone-cyan { color: #0a7286; background: #f0f9ff; }
.workbench-entry-icon.tone-gray { color: #52636c; background: #f2f5f7; }

.workbench-entry-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.workbench-entry-copy strong {
  color: var(--text);
  font-size: 15px;
}

.workbench-entry-copy small {
  color: var(--muted);
  line-height: 1.42;
}

.workbench-entry-action {
  align-self: end;
  min-height: 28px;
  padding: 0 10px;
  white-space: nowrap;
}

.workbench-entry-index {
  position: absolute;
  top: 11px;
  right: 12px;
  color: #a2b3ba;
  font-size: 12px;
  font-weight: 900;
}

.workbench-side-panel {
  display: grid;
  gap: 14px;
}

.workbench-mini-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.workbench-health-row,
.workbench-result-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 27px;
  border-bottom: 1px solid #edf3f5;
  font-size: 13px;
}

.workbench-result-row {
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
}

.workbench-health-row:last-child,
.workbench-result-row:last-of-type {
  border-bottom: 0;
}

.workbench-health-row strong,
.workbench-result-row span {
  color: var(--muted);
  font-weight: 700;
}

.workbench-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #9fb2ba;
}

.workbench-dot.ok { background: #0da66b; }
.workbench-dot.warn { background: #f0a31a; }
.workbench-dot.run { background: var(--primary); }

.workbench-mini-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .workbench-main-grid {
    grid-template-columns: 1fr;
  }

  .workbench-side-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .workbench-hero,
  .workbench-section-title,
  .workbench-agent-head {
    flex-direction: column;
    align-items: stretch;
  }

  .workbench-task-grid,
  .workbench-entry-grid,
  .workbench-side-panel {
    grid-template-columns: 1fr;
  }

  .workbench-agent-input {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-09 工作台首页专业版覆盖 */
.workbench-home {
  gap: 16px;
}

.workbench-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 500px);
  gap: 24px;
  min-height: 188px;
  padding: 24px 26px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, .22), transparent 28%),
    linear-gradient(135deg, #087f7a 0%, #0aa8a1 58%, #49c9b8 100%);
  box-shadow: 0 14px 26px rgba(18, 48, 60, .12);
  overflow: hidden;
}

.workbench-hero::after {
  position: absolute;
  right: -70px;
  bottom: -88px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  content: "";
}

.workbench-hero > div,
.workbench-hero-board {
  position: relative;
  z-index: 1;
}

.workbench-hero .breadcrumb {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 800;
}

.workbench-hero h1 {
  margin: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1.18;
}

.workbench-hero p {
  max-width: 720px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
}

.workbench-hero-actions {
  justify-content: flex-start;
  padding-top: 22px;
}

.workbench-hero-actions button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 999px;
  color: #075d5a;
  background: rgba(255, 255, 255, .92);
  box-shadow: none;
}

.workbench-hero-actions button:hover {
  border-color: #fff;
  background: #fff;
}

.workbench-hero-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-self: center;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 13px;
  background: rgba(255, 255, 255, .16);
}

.workbench-hero-board div {
  display: grid;
  min-height: 72px;
  align-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .94);
}

.workbench-hero-board span {
  color: #31535d;
  font-size: 13px;
  font-weight: 800;
}

.workbench-hero-board strong {
  color: #0b8f89;
  font-size: 28px;
  line-height: 1;
}

.workbench-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .8fr);
  gap: 16px;
}

.workbench-task-board,
.workbench-agent-panel,
.workbench-quick-panel,
.workbench-mini-panel,
.workbench-story {
  border: 1px solid #cfe0e6;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 16px rgba(18, 48, 60, .055);
}

.workbench-task-board {
  display: grid;
  align-content: start;
  padding: 12px 14px;
}

.workbench-task-board .workbench-section-title {
  margin-bottom: 8px;
}

.workbench-task-board .workbench-section-title h2 {
  font-size: 17px;
}

.workbench-task-board .workbench-section-title p {
  margin-top: 2px;
  font-size: 12px;
}

.workbench-task-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.workbench-task-card {
  min-height: 52px;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 9px;
}

.workbench-task-card strong,
.workbench-task-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-agent-panel {
  gap: 8px;
  padding: 12px 16px;
  border-color: #a9e3de;
  background:
    radial-gradient(circle at 100% 0%, rgba(8, 169, 164, .12), transparent 26%),
    #f7fffd;
}

.workbench-agent-title {
  color: #075d5a;
}

.workbench-agent-title span {
  width: 30px;
  height: 30px;
  color: #075d5a;
  background: #dffbf4;
}

.workbench-agent-head {
  gap: 8px;
}

.workbench-agent-tags {
  gap: 6px;
}

.workbench-agent-tags em {
  min-height: 20px;
  padding: 0 8px;
  font-size: 11.5px;
}

.workbench-agent-panel p {
  line-height: 1.35;
}

.workbench-agent-input {
  gap: 8px;
}

.workbench-agent-input textarea {
  min-height: 42px;
  max-height: 58px;
  padding: 8px 10px;
  border-color: #b8d9df;
}

.workbench-agent-input button {
  min-width: 108px;
  border: 1px solid #08a9a4;
  color: #fff;
  background: #08a9a4;
}

.workbench-story {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.workbench-story-head {
  padding: 20px 24px;
  border: 1px solid #bde4df;
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 18%, rgba(8, 169, 164, .14), transparent 28%),
    #f2fffc;
}

.workbench-story.tone-violet .workbench-story-head {
  border-color: #d8d1ff;
  background:
    radial-gradient(circle at 92% 18%, rgba(109, 72, 196, .13), transparent 30%),
    #f8f7ff;
}

.workbench-story-head h2 {
  margin: 0;
  color: #075d5a;
  font-size: 22px;
  line-height: 1.2;
}

.workbench-story.tone-violet .workbench-story-head h2 {
  color: #4d368f;
}

.workbench-story-head strong {
  display: inline-block;
  margin-top: 8px;
  color: #087b69;
  font-size: 14px;
}

.workbench-story.tone-violet .workbench-story-head strong {
  color: #6d48c4;
}

.workbench-story-head p {
  max-width: 920px;
  margin: 10px 0 0;
  color: #536973;
  line-height: 1.55;
}

.workbench-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.workbench-story-card {
  width: 100%;
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  min-height: 122px;
  padding: 18px;
  border: 1px solid #b7e5df;
  border-radius: 12px;
  color: inherit;
  background: #f7fffd;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.workbench-story-card:hover {
  border-color: #65c9be;
  box-shadow: 0 10px 22px rgba(18, 48, 60, .08);
  transform: translateY(-1px);
}

.workbench-story-card:focus-visible {
  outline: 3px solid rgba(8, 169, 164, .24);
  outline-offset: 2px;
}

.workbench-story-card.tone-amber {
  border-color: #f3dc9d;
  background: #fffaf0;
}

.workbench-story-card.tone-blue {
  border-color: #c9dcff;
  background: #f5f9ff;
}

.workbench-story-card.tone-violet {
  border-color: #d8d1ff;
  background: #f8f7ff;
}

.workbench-story-card.tone-cyan {
  border-color: #c2e4f4;
  background: #f0f9ff;
}

.workbench-story-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  color: #087b69;
  background: #dffbf4;
}

.workbench-story-card.tone-amber .workbench-story-icon {
  color: #9b5a00;
  background: #fff1ce;
}

.workbench-story-card.tone-blue .workbench-story-icon {
  color: #2456c9;
  background: #e7f0ff;
}

.workbench-story-card.tone-violet .workbench-story-icon {
  color: #6d48c4;
  background: #eee9ff;
}

.workbench-story-card.tone-cyan .workbench-story-icon {
  color: #0a7286;
  background: #def4ff;
}

.workbench-story-card h3 {
  margin: 0;
  color: #10242b;
  font-size: 15px;
  line-height: 1.35;
}

.workbench-story-card em {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  margin: 8px 0 8px;
  padding: 0 10px;
  border-radius: 999px;
  color: #087b69;
  background: #e6f7f5;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.workbench-story-card p {
  margin: 5px 0 0;
  color: #536973;
  font-size: 13px;
  line-height: 1.45;
}

.workbench-story-action {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: #087b69;
  font-size: 12px;
  font-weight: 900;
}

.workbench-support-grid {
  display: grid;
}

.workbench-main-grid {
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, .8fr);
}

.workbench-quick-panel,
.workbench-mini-panel {
  padding: 16px;
}

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

.workbench-entry-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 68px;
  padding: 13px 14px;
  border-radius: 9px;
}

.workbench-entry-index {
  display: none;
}

.workbench-entry-action {
  min-height: 28px;
}

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

@media (max-width: 1280px) {
  .workbench-hero,
  .workbench-top-grid,
  .workbench-main-grid {
    grid-template-columns: 1fr;
  }

  .workbench-task-grid,
  .workbench-side-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1060px) {
  .workbench-story-grid,
  .workbench-entry-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .workbench-hero-board,
  .workbench-task-grid,
  .workbench-side-panel,
  .workbench-support-grid .workbench-side-panel {
    grid-template-columns: 1fr;
  }
}

/* 抖店本地素材上架：按淘宝本地上架样板收口的正式功能页样式 */
.douyin-local-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.douyin-local-page .local-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 20px;
}

.douyin-local-page .hero-actions,
.douyin-local-page .inline-actions,
.douyin-local-page .action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.douyin-local-page .environment-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  border-radius: 10px;
  background: rgba(20, 184, 166, 0.08);
  color: #33515a;
  font-size: 13px;
}

.douyin-local-page .environment-banner strong {
  color: #087c75;
  white-space: nowrap;
}

.douyin-local-page .environment-banner.warning {
  border-color: rgba(245, 158, 11, 0.38);
  background: rgba(245, 158, 11, 0.1);
}

.douyin-local-page .environment-banner.warning strong {
  color: #a16207;
}

.douyin-local-page .douyin-local-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  border: 1px solid rgba(119, 146, 155, 0.22);
  border-radius: 10px;
  background: #ffffff;
}

.douyin-local-page .douyin-local-status-strip.warning {
  border-color: rgba(245, 158, 11, 0.34);
  background: #fffaf0;
}

.douyin-local-page .douyin-local-status-strip.success {
  border-color: rgba(20, 184, 166, 0.28);
  background: rgba(20, 184, 166, 0.08);
}

.douyin-local-page .douyin-local-status-strip.neutral {
  background: #f8fbfc;
}

.douyin-local-page .status-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.douyin-local-page .status-main strong {
  color: #10343c;
  font-size: 14px;
}

.douyin-local-page .status-main p {
  margin: 3px 0 0;
  color: #60747c;
  font-size: 12px;
  line-height: 1.45;
}

.douyin-local-page .status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: #14b8a6;
}

.douyin-local-page .douyin-local-status-strip.warning .status-dot {
  background: #f59e0b;
}

.douyin-local-page .douyin-local-status-strip.neutral .status-dot {
  background: #94a3b8;
}

.douyin-local-page .status-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  color: #4f6670;
  font-size: 12px;
  white-space: nowrap;
}

.douyin-local-page .status-side span {
  padding: 4px 8px;
  border: 1px solid rgba(119, 146, 155, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
}

.douyin-local-page .douyin-local-delivery-summary {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 10px;
  background: #fffdf7;
}

.douyin-local-page .delivery-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #6b4f12;
  font-size: 12px;
}

.douyin-local-page .delivery-summary-head strong {
  color: #10343c;
  font-size: 14px;
  white-space: nowrap;
}

.douyin-local-page .delivery-summary-list {
  display: grid;
  gap: 4px;
}

.douyin-local-page .delivery-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.douyin-local-page .delivery-summary-meta span {
  padding: 3px 8px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.08);
  color: #6f5b22;
  font-size: 12px;
  line-height: 1.45;
}

.douyin-local-page .delivery-summary-list p {
  margin: 0;
  color: #6f5b22;
  font-size: 12px;
}

.douyin-local-page .delivery-missing-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.douyin-local-page .delivery-missing-products article {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.douyin-local-page .delivery-missing-products strong {
  color: #173b42;
  font-size: 12px;
}

.douyin-local-page .delivery-missing-products span,
.douyin-local-page .delivery-missing-products small {
  color: #6b7d84;
  font-size: 12px;
  line-height: 1.35;
}

.douyin-local-page .delivery-next-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.douyin-local-page .delivery-next-steps span {
  padding: 4px 8px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.08);
  color: #225d63;
  font-size: 12px;
}

.douyin-local-page .inline-error {
  padding: 12px 14px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 10px;
  background: #fff5f5;
  color: #c62828;
  font-size: 13px;
}

.douyin-local-page .status-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.douyin-local-page .status-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 84px;
  padding: 14px 16px;
  border: 1px solid rgba(119, 146, 155, 0.22);
  border-radius: 10px;
  background: #ffffff;
}

.douyin-local-page .status-card span,
.douyin-local-page .status-card small {
  color: #60747c;
  font-size: 12px;
}

.douyin-local-page .status-card strong {
  color: #0d2f36;
  font-size: 28px;
  line-height: 1.05;
}

.douyin-local-page .section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.douyin-local-page .section-title-row h2 {
  margin: 0 0 4px;
  color: #102f38;
  font-size: 18px;
}

.douyin-local-page .section-title-row p {
  margin: 0;
  color: #60747c;
  font-size: 13px;
}

.douyin-local-page .compact-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px 18px;
}

.douyin-local-page .douyin-basic-stack {
  display: grid;
  gap: 12px;
}

.douyin-local-page .douyin-basic-row {
  display: grid;
  gap: 12px 16px;
  align-items: start;
}

.douyin-local-page .douyin-basic-row.primary {
  grid-template-columns: minmax(520px, 1.45fr) minmax(340px, 0.95fr);
}

.douyin-local-page .douyin-basic-row.secondary {
  grid-template-columns:
    minmax(180px, 0.68fr)
    minmax(260px, 0.96fr)
    minmax(210px, 0.82fr)
    minmax(180px, max-content)
    minmax(92px, max-content);
  justify-content: stretch;
}

.douyin-local-page .douyin-basic-grid {
  display: grid;
  grid-template-columns:
    minmax(360px, 1.35fr)
    minmax(250px, 0.9fr)
    minmax(160px, 0.55fr)
    minmax(230px, 0.85fr);
  gap: 10px 14px;
  align-items: start;
  justify-content: stretch;
}

.douyin-local-page .douyin-basic-row > .field,
.douyin-local-page .douyin-basic-grid > .field {
  min-width: 0;
}

.douyin-local-page .douyin-field-root {
  grid-column: auto;
  max-width: none;
}

.douyin-local-page .douyin-field-template {
  grid-column: auto;
  max-width: none;
}

.douyin-local-page .douyin-field-shop {
  grid-column: auto;
  max-width: none;
}

.douyin-local-page .douyin-field-profile {
  grid-column: auto;
  max-width: none;
}

.douyin-local-page .douyin-field-submit {
  grid-column: auto;
  max-width: none;
}

.douyin-local-page .douyin-field-count {
  justify-self: start;
  max-width: 120px;
}

.douyin-local-page .douyin-field-batch {
  grid-column: auto;
  max-width: none;
}

.douyin-local-page .douyin-field-publish-url {
  grid-column: auto;
}

.douyin-local-page .douyin-field-root .compact-checkbox {
  display: inline-grid;
  grid-template-columns: 14px auto;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  min-height: 20px;
  margin-top: 2px;
  line-height: 18px;
  align-self: flex-start;
}

.douyin-local-page .douyin-field-root .compact-checkbox input {
  margin: 0;
}

.douyin-local-page .douyin-field-root .local-root-path-input,
.douyin-local-page .douyin-field-profile .douyin-profile-input {
  min-height: 36px;
  width: 100%;
}

.douyin-local-page .douyin-field-template .plain-select,
.douyin-local-page .douyin-field-shop .plain-select,
.douyin-local-page .douyin-field-batch .plain-input,
.douyin-local-page .douyin-field-submit .segmented {
  width: 100%;
}

.douyin-local-page .douyin-field-submit .segmented {
  width: fit-content;
  max-width: 100%;
  justify-content: flex-start;
}

.douyin-local-page .douyin-field-submit .segmented button {
  min-width: 74px;
}

.douyin-local-page .douyin-field-profile .douyin-profile-input {
  flex-wrap: nowrap;
  gap: 6px;
  padding-block: 3px;
}

.douyin-local-page .douyin-profile-input strong {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.douyin-local-page .douyin-profile-input button {
  flex: 0 0 auto;
}

.douyin-local-page .douyin-field-count .compact-number {
  width: 92px;
  max-width: 100%;
}

.douyin-local-page .douyin-field-publish-url input {
  min-width: 0;
  width: 100%;
}

.douyin-local-page .douyin-category-flow {
  border: 1px solid #d4ebed;
  border-radius: 8px;
  background: #fbfeff;
  padding: 10px 12px;
}

.douyin-local-page .douyin-category-flow.compact {
  padding: 10px;
}

.douyin-local-page .douyin-category-flow-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-bottom: 9px;
}

.douyin-local-page .douyin-category-flow-title strong {
  color: #102f3a;
  font-size: 13px;
}

.douyin-local-page .douyin-category-flow-title span {
  color: #68808a;
  font-size: 12px;
}

.douyin-local-page .douyin-category-flow-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(480px, 1.22fr);
  gap: 10px 12px;
  align-items: stretch;
}

.douyin-local-page .douyin-category-step-card {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 7px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #cfe6e9;
  border-radius: 8px;
  background: #fff;
}

.douyin-local-page .douyin-category-step-card > span {
  color: #007f7a;
  font-size: 13px;
  font-weight: 800;
}

.douyin-local-page .douyin-category-step-card .readonly-value strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.douyin-local-page .douyin-category-step-body {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 390px;
}

.douyin-local-page .douyin-category-step-body .plain-input {
  min-width: 0;
  max-width: 260px;
}

.douyin-local-page .douyin-category-step-body.with-actions {
  max-width: none;
  flex-wrap: wrap;
}

.douyin-local-page .douyin-category-step-body.with-actions .readonly-value {
  flex: 1 1 260px;
  min-width: 220px;
}

.douyin-local-page .douyin-category-flow-arrow {
  display: none;
}

.douyin-local-page .douyin-category-control-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(300px, 1.12fr) minmax(220px, 0.7fr);
  gap: 10px 12px;
  align-items: start;
  margin-top: 0;
  max-width: none;
}

.douyin-local-page .douyin-category-setup-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(520px, 1.45fr);
  gap: 10px 14px;
  align-items: start;
}

.douyin-local-page .douyin-category-file-field .compact-text {
  max-width: 220px;
}

.douyin-local-page .douyin-category-result-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.douyin-local-page .douyin-category-result-line .readonly-value {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 420px;
}

.douyin-local-page .douyin-category-result-line .readonly-value strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.douyin-local-page .douyin-category-compact-field,
.douyin-local-page .douyin-category-action-field {
  min-width: 0;
}

.douyin-local-page .douyin-category-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.douyin-local-page .douyin-category-inline-note {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  margin-top: 9px;
  padding: 7px 10px;
  border: 1px dashed #c9e3e5;
  border-radius: 8px;
  background: #f7fcfc;
  color: #5d7179;
  font-size: 12px;
  line-height: 1.35;
}

.douyin-local-page .douyin-category-inline-note strong {
  flex: 0 0 auto;
  color: #0d3c43;
  font-weight: 900;
}

.douyin-local-page .douyin-category-inline-note span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.douyin-local-page .compact-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.douyin-local-page .compact-pill-row em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #cfe5e8;
  border-radius: 999px;
  background: #ffffff;
  color: #365a64;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
}

.douyin-local-page .compact-action-button {
  min-height: 32px;
  padding: 0 12px;
  white-space: nowrap;
}

.douyin-local-page .douyin-category-summary {
  margin-top: 10px;
  border-color: #d6e9ec;
  background: #f8fcfc;
}

.douyin-local-page .douyin-precheck-panel {
  padding-bottom: 12px;
}

.douyin-local-page .compact-panel-title {
  margin-bottom: 9px;
}

.douyin-local-page .compact-panel-title h2 {
  font-size: 16px;
}

.douyin-local-page .compact-panel-title p {
  font-size: 12px;
  line-height: 1.45;
}

.douyin-local-page .douyin-precheck-summary-grid.summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #dbe8eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.douyin-local-page .douyin-precheck-panel .summary-grid + .settings-list {
  margin-top: 8px;
}

.douyin-local-page .douyin-check-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.douyin-local-page .douyin-check-list .setting-row {
  padding: 8px 10px;
}

.douyin-local-page .douyin-category-capability {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 10px;
  padding: 7px 8px;
  border: 1px dashed #d4e7ea;
  border-radius: 8px;
  background: #fbfeff;
}

.douyin-local-page .douyin-category-capability > span {
  color: #314852;
  font-size: 12px;
  font-weight: 800;
}

.douyin-local-page .douyin-category-capability > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.douyin-local-page .douyin-category-capability em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid #cde5e8;
  border-radius: 999px;
  background: #fff;
  color: #315762;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.douyin-local-page .douyin-category-capability small {
  flex: 1 1 260px;
  color: #70858d;
  font-size: 12px;
  line-height: 1.45;
}

.douyin-local-page .douyin-empty-hint {
  padding: 10px 12px;
  border: 1px dashed #c9e3e5;
  border-radius: 8px;
  color: #68808a;
  background: #f8fcfc;
  font-size: 12px;
}

.douyin-local-page .douyin-field-medium {
  min-width: 220px;
}

.douyin-local-page .douyin-field-tiny {
  max-width: 130px;
}

.douyin-local-page .douyin-publish-url-field {
  min-width: 320px;
}

.douyin-local-page .douyin-media-grid {
  display: grid;
  gap: 10px;
}

.douyin-local-page .douyin-media-row {
  display: grid;
  gap: 10px 12px;
  align-items: start;
}

.douyin-local-page .douyin-media-row.main-row {
  grid-template-columns: minmax(300px, 420px) minmax(360px, 1fr);
}

.douyin-local-page .douyin-media-row.support-row {
  grid-template-columns: minmax(0, 1fr);
}

.douyin-local-page .douyin-media-setting {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.douyin-local-page .douyin-media-setting > span {
  color: #102f3a;
  font-size: 13px;
  font-weight: 800;
}

.douyin-local-page .douyin-media-setting .segmented {
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.douyin-local-page .douyin-media-setting .segmented button {
  flex: 0 0 auto;
}

.douyin-local-page .douyin-media-setting.main-image {
  max-width: 430px;
}

.douyin-local-page .douyin-media-setting.folder-rule .readonly-value {
  min-height: 34px;
}

.douyin-local-page .douyin-media-source-rules {
  align-content: start;
}

.douyin-local-page .douyin-media-source-rules .compact-pill-row {
  gap: 7px;
}

.douyin-local-page .douyin-media-setting.coverage {
  grid-template-columns: 118px minmax(220px, 360px) minmax(260px, 1fr);
  align-items: center;
  gap: 8px 12px;
  max-width: none;
  padding: 8px 10px;
  border: 1px dashed #c9e3e5;
  border-radius: 8px;
  background: #f8fcfc;
}

.douyin-local-page .douyin-media-setting.coverage > span {
  white-space: nowrap;
}

.douyin-local-page .douyin-media-coverage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.douyin-local-page .douyin-media-coverage-row .readonly-value {
  flex: 1 1 auto;
  min-width: 126px;
}

.douyin-local-page .douyin-media-coverage-row .mini-button {
  flex: 0 0 auto;
}

.douyin-local-page .douyin-sku-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.douyin-local-page .douyin-sku-default-card,
.douyin-local-page .douyin-spec-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #e0ebef;
  border-radius: 8px;
  background: #fff;
}

.douyin-local-page .douyin-sku-default-card .local-sales-base-card-title,
.douyin-local-page .douyin-spec-title {
  display: flex;
  align-items: flex-start;
  padding: 12px 10px;
  border-right: 1px solid #e4edf1;
  background: #fbfefe;
  color: #1d3944;
  font-size: 13px;
  font-weight: 900;
}

.douyin-local-page .douyin-sku-base-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) minmax(250px, 0.95fr) minmax(160px, max-content);
  width: 100%;
  gap: 9px 16px;
  align-items: center;
  padding: 8px 12px;
  background: #f4f7f9;
}

.douyin-local-page .douyin-sku-base-grid .field {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.douyin-local-page .douyin-sku-base-grid .field > span,
.douyin-local-page .douyin-sku-base-grid .field-title-with-help {
  flex: 0 0 auto;
  white-space: nowrap;
}

.douyin-local-page .douyin-sku-base-grid .field small {
  flex: 1 1 100%;
  min-width: 0;
  margin-left: 0;
}

.douyin-local-page .douyin-sku-base-grid .douyin-field-medium {
  min-width: 0;
}

.douyin-local-page .douyin-sku-base-grid .douyin-field-sku-file {
  min-width: 0;
}

.douyin-local-page .douyin-sku-base-grid .douyin-price-source-field {
  grid-column: 1 / -1;
  min-width: 0;
  align-items: flex-start;
  flex-wrap: wrap;
}

.douyin-local-page .douyin-price-source-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}

.douyin-local-page .douyin-price-source-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  color: #233f48;
  font-size: 13px;
  line-height: 1.25;
  white-space: nowrap;
  cursor: default;
}

.douyin-local-page .douyin-price-source-radio-label,
.douyin-local-page .price-source-radio-label {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  font-weight: 500;
  cursor: pointer;
}

.douyin-local-page .douyin-price-source-row em {
  color: #60747c;
  font-size: 12px;
  font-style: normal;
}

.douyin-local-page .douyin-price-source-row input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.douyin-local-page .douyin-price-source-row .compact-number {
  width: 74px;
  min-height: 30px;
  text-align: center;
}

.douyin-local-page .douyin-price-source-row input:disabled {
  color: #8da0a8;
  background: #edf4f7;
  cursor: not-allowed;
}

.douyin-local-page .douyin-sku-base-grid .douyin-field-sku-file .readonly-value {
  min-height: 30px;
  padding: 5px 9px;
}

.douyin-local-page .douyin-sku-base-grid .douyin-field-tiny {
  justify-self: start;
  min-width: 150px;
  max-width: 170px;
}

.douyin-local-page .douyin-sku-base-grid .compact-number {
  width: 76px;
  text-align: center;
}

.douyin-local-page .douyin-spec-body {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 12px 13px;
  background: #f4f7f9;
}

.douyin-local-page .douyin-spec-note {
  margin: 0;
  color: #5d7179;
  font-size: 12px;
  line-height: 1.45;
}

.douyin-local-page .douyin-spec-body .sales-attribute-list-field {
  grid-column: 1 / -1;
  gap: 8px;
}

.douyin-local-page .douyin-spec-body .sales-attribute-taobao-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
  justify-content: start;
  gap: 8px 12px;
}

.douyin-local-page .douyin-spec-body .sales-attribute-row {
  grid-template-columns: minmax(96px, 158px) minmax(92px, 118px) 22px;
  max-width: 360px;
}

.douyin-local-page .douyin-spec-body .sales-attribute-list-field.with-image-slot .sales-attribute-taobao-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 380px));
}

.douyin-local-page .douyin-spec-body .sales-attribute-list-field.with-image-slot .sales-attribute-row {
  grid-template-columns: 28px minmax(96px, 158px) minmax(92px, 118px) 22px;
  max-width: 380px;
}

.douyin-local-page .douyin-spec-body .sales-attribute-list-field.without-note .sales-attribute-taobao-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 240px));
}

.douyin-local-page .douyin-spec-body .sales-attribute-list-field.without-note .sales-attribute-row {
  grid-template-columns: minmax(140px, 1fr) 22px;
  max-width: 240px;
}

.douyin-local-page .douyin-spec-body .sales-attribute-list-field.with-image-slot.without-note .sales-attribute-taobao-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 270px));
}

.douyin-local-page .douyin-spec-body .sales-attribute-list-field.with-image-slot.without-note .sales-attribute-row {
  grid-template-columns: 28px minmax(140px, 1fr) 22px;
  max-width: 270px;
}

.douyin-local-page .douyin-spec-row {
  display: grid;
  grid-template-columns: 90px minmax(140px, 1fr) minmax(150px, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(119, 146, 155, 0.16);
  border-radius: 8px;
  background: #ffffff;
}

.douyin-local-page .douyin-spec-row strong {
  color: #173941;
  font-size: 13px;
}

.douyin-local-page .douyin-spec-row span {
  color: #087c75;
  font-size: 13px;
  font-weight: 800;
}

.douyin-local-page .douyin-spec-row em {
  color: #60747c;
  font-size: 12px;
  font-style: normal;
}

.douyin-local-page .douyin-spec-support-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(300px, 1.1fr) minmax(220px, 0.9fr);
  gap: 10px 12px;
  align-items: start;
  border-top: 1px solid #e7edf2;
  padding-top: 10px;
}

.douyin-local-page .douyin-detail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 0.95fr) minmax(520px, 1.55fr);
  gap: 10px 12px;
  align-items: start;
}

.douyin-local-page .douyin-detail-mode-field {
  gap: 7px;
}

.douyin-local-page .douyin-detail-span-2 {
  grid-column: span 2;
}

.douyin-local-page .douyin-size-table-values {
  grid-column: 1 / -1;
}

.douyin-local-page .douyin-size-table-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.douyin-local-page .douyin-size-range-field {
  display: inline-grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  flex: 0 1 220px;
  min-width: 210px;
  max-width: 240px;
  color: #24414a;
  font-size: 13px;
}

.douyin-local-page .douyin-size-range-field > span:first-child {
  font-weight: 700;
}

.douyin-local-page .douyin-size-range-inputs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.douyin-local-page .douyin-size-range-inputs .compact-number {
  width: 54px;
}

.douyin-local-page .douyin-size-range-inputs em,
.douyin-local-page .douyin-size-range-inputs span {
  color: #60747c;
  font-size: 12px;
  font-style: normal;
}

.douyin-local-page .douyin-title-safety-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(500px, 1.45fr) minmax(320px, 0.9fr);
  gap: 12px;
  align-items: start;
  justify-content: stretch;
}

.douyin-local-page .douyin-settings-subgroup {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dce9ec;
  border-radius: 8px;
  background: #fbfeff;
}

.douyin-local-page .douyin-settings-subgroup-title {
  display: flex;
  align-items: center;
  min-height: 22px;
  color: #0d3c43;
  font-size: 13px;
  font-weight: 900;
}

.douyin-local-page .douyin-subgroup-grid {
  display: grid;
  gap: 10px 12px;
  align-items: start;
}

.douyin-local-page .douyin-subgroup-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.douyin-local-page .douyin-title-safety-grid .douyin-publish-template-field {
  min-width: 220px;
}

.douyin-local-page .douyin-title-safety-grid .douyin-publish-short-field {
  width: 150px;
  max-width: 170px;
}

.douyin-local-page .douyin-cadence-field .segmented {
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
}

.douyin-local-page .douyin-cadence-custom-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 9px 10px;
  border: 1px solid rgba(119, 146, 155, 0.18);
  border-radius: 8px;
  background: #fbfeff;
}

.douyin-local-page .douyin-timing-field {
  width: 150px;
  max-width: 170px;
}

.douyin-local-page .douyin-title-source-field .readonly-value {
  min-height: 36px;
}

.douyin-local-page .douyin-video-field .segmented {
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.douyin-local-page .douyin-video-field .segmented button {
  flex: 0 0 auto;
}

.douyin-local-page .douyin-timing-field .compact-number {
  width: 82px;
}

.douyin-local-page .douyin-publish-rule-grid {
  display: grid;
  grid-template-columns:
    minmax(260px, 1fr)
    minmax(260px, 1fr)
    minmax(150px, max-content)
    minmax(220px, 0.8fr);
  gap: 10px 12px;
  align-items: start;
}

.douyin-local-page .douyin-publish-rule-grid .douyin-publish-template-field input {
  width: 100%;
}

.douyin-local-page .douyin-publish-rule-grid .douyin-publish-short-field {
  width: 150px;
  max-width: 170px;
}

.douyin-local-page .douyin-publish-status-summary .readonly-value span {
  color: #087c75;
}

.douyin-local-page .douyin-rule-form {
  align-items: start;
  gap: 12px 16px;
}

.douyin-local-page .field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.douyin-local-page .field > span {
  color: #173941;
  font-size: 13px;
  font-weight: 700;
}

.douyin-local-page .field small,
.douyin-local-page .check-row {
  color: #647780;
  font-size: 12px;
  line-height: 1.45;
}

.douyin-local-page .field.span-2,
.douyin-local-page .check-row.span-2 {
  grid-column: span 2;
}

.douyin-local-page .field.small-field {
  max-width: 220px;
}

.douyin-local-page .field.tiny-field {
  max-width: 170px;
}

.douyin-local-page .field.douyin-wide-control {
  grid-column: span 2;
}

.douyin-local-page .field input,
.douyin-local-page .field select {
  min-height: 36px;
  border: 1px solid rgba(119, 146, 155, 0.32);
  border-radius: 8px;
  background: #fff;
  color: #15343c;
  font-size: 13px;
  padding: 0 11px;
}

.douyin-local-page .field .compact-number {
  width: 92px;
  max-width: 110px;
}

.douyin-local-page .douyin-size-range-inputs .compact-number {
  width: 54px;
  max-width: 54px;
  padding: 0 7px;
}

.douyin-local-page .unit-input {
  justify-content: flex-start;
}

.douyin-local-page .path-input {
  min-height: 38px;
}

.douyin-local-page .readonly-value {
  min-height: 36px;
  border-color: rgba(119, 146, 155, 0.28);
  background: #fbfeff;
}

.douyin-local-page .readonly-value span {
  color: #14343c;
  font-size: 13px;
  font-weight: 800;
}

.douyin-local-page .readonly-value.warning {
  border-color: rgba(245, 158, 11, 0.36);
  background: #fffaf0;
}

.douyin-local-page .readonly-value.warning span {
  color: #9a5b05;
}

.douyin-local-page .segmented {
  width: fit-content;
}

.douyin-local-page .segmented.single button {
  cursor: default;
}

.douyin-local-page .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.douyin-local-page .radio-line-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-height: 36px;
}

.douyin-local-page .radio-line-group label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  color: #24434b;
  font-size: 13px;
  white-space: nowrap;
}

.douyin-local-page .inline-checkbox,
.douyin-local-page .check-row label,
.douyin-local-page .radio-line-group label,
.douyin-local-page .price-source-row,
.douyin-local-page .douyin-price-source-row,
.douyin-local-page .sales-attribute-delete,
.douyin-local-page .sales-attribute-plus,
.douyin-local-page .segmented button {
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  flex: 0 0 auto;
}

.douyin-local-page .inline-checkbox,
.douyin-local-page .check-row label,
.douyin-local-page .radio-line-group label,
.douyin-local-page .price-source-row,
.douyin-local-page .douyin-price-source-row {
  padding: 0;
}

.douyin-local-page .segmented,
.douyin-local-page .price-source-options,
.douyin-local-page .douyin-price-source-options {
  align-self: flex-start;
}

.douyin-local-page .field small,
.douyin-local-page .readonly-value,
.douyin-local-page .douyin-category-step-card,
.douyin-local-page .douyin-readiness-card {
  cursor: default;
}

.douyin-local-page .field,
.douyin-local-page .setting-row,
.douyin-local-page .path-input,
.douyin-local-page .readonly-value,
.douyin-local-page .final-action-copy {
  cursor: default;
}

.douyin-local-page button,
.douyin-local-page .segmented button,
.douyin-local-page .path-input button,
.douyin-local-page .template-buttons-inline button,
.douyin-local-page .douyin-action-button-group button,
.douyin-local-page .sales-attribute-delete,
.douyin-local-page .sales-attribute-plus {
  width: auto;
  flex: 0 0 auto;
}

.douyin-local-page label.inline-checkbox,
.douyin-local-page label.inline-check,
.douyin-local-page .check-row label,
.douyin-local-page .radio-line-group label {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  align-self: flex-start;
  flex: 0 0 auto;
  cursor: pointer;
}

.douyin-local-page .inline-checkbox > label,
.douyin-local-page .inline-check > label {
  cursor: pointer;
}

.douyin-local-page label.inline-checkbox input,
.douyin-local-page label.inline-check input,
.douyin-local-page .inline-checkbox input,
.douyin-local-page .inline-check input,
.douyin-local-page .check-row label input,
.douyin-local-page .radio-line-group label input {
  flex: 0 0 auto;
  min-height: auto;
  margin: 0;
  padding: 0;
}

.douyin-local-page .radio-line-group input {
  min-height: auto;
  width: auto;
  padding: 0;
}

.douyin-local-page .action-bar {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(119, 146, 155, 0.16);
}

.douyin-local-page .settings-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.douyin-local-page .douyin-readiness-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.douyin-local-page .douyin-readiness-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.douyin-local-page .douyin-readiness-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 5px;
  min-height: 104px;
  padding: 11px 12px;
  border: 1px solid rgba(119, 146, 155, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfeff 0%, #f5fafb 100%);
}

.douyin-local-page .douyin-readiness-card.ok {
  border-color: rgba(20, 184, 166, 0.28);
  background: linear-gradient(180deg, #fbfffe 0%, #f1fbfa 100%);
}

.douyin-local-page .douyin-readiness-card.idle {
  border-color: rgba(119, 146, 155, 0.18);
  background: #fbfeff;
}

.douyin-local-page .douyin-readiness-card.blocked {
  border-color: rgba(239, 68, 68, 0.28);
  background: #fff8f8;
}

.douyin-local-page .douyin-readiness-card strong {
  color: #12343d;
  font-size: 14px;
}

.douyin-local-page .douyin-readiness-card b {
  color: #087c75;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.douyin-local-page .douyin-readiness-card.blocked b {
  color: #c62828;
}

.douyin-local-page .douyin-readiness-card p {
  margin: 0;
  color: #60747c;
  font-size: 12px;
  line-height: 1.55;
}

.douyin-local-page .douyin-readiness-card span {
  align-self: end;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.09);
  color: #168078;
  font-size: 12px;
}

.douyin-local-page .douyin-section-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(20, 184, 166, 0.16);
  border-radius: 8px;
  background: rgba(20, 184, 166, 0.06);
  color: #355963;
  font-size: 12px;
}

.douyin-local-page .douyin-section-note strong {
  color: #0d3c43;
  white-space: nowrap;
}

.douyin-local-page .douyin-mini-table {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(119, 146, 155, 0.14);
}

.douyin-local-page .douyin-mini-table div {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 10px;
  align-items: center;
  color: #60747c;
  font-size: 12px;
}

.douyin-local-page .douyin-mini-table span {
  overflow: hidden;
  color: #173941;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.douyin-local-page .douyin-mini-table strong {
  color: #087c75;
  font-weight: 800;
}

.douyin-local-page .douyin-publish-form {
  margin-bottom: 12px;
}

.douyin-local-page .douyin-publish-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1.4fr) minmax(240px, 0.6fr);
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}

.douyin-local-page .douyin-publish-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #e0ebef;
  border-radius: 8px;
  background: #fff;
}

.douyin-local-page .douyin-publish-card-title {
  display: flex;
  align-items: flex-start;
  padding: 12px 10px;
  border-right: 1px solid #e4edf1;
  background: #fbfefe;
  color: #1d3944;
  font-size: 13px;
  font-weight: 900;
}

.douyin-local-page .douyin-publish-card-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-width: 0;
  padding: 11px 12px;
  background: #f4f7f9;
}

.douyin-local-page .douyin-publish-card-body .field {
  min-width: 0;
}

.douyin-local-page .douyin-publish-template-field {
  flex: 1 1 230px;
}

.douyin-local-page .douyin-publish-template-field input {
  width: 100%;
}

.douyin-local-page .douyin-publish-short-field {
  flex: 0 0 auto;
  min-width: 168px;
}

.douyin-local-page .douyin-publish-status-field {
  flex: 0 0 auto;
  min-width: 214px;
}

.douyin-local-page .douyin-publish-card-body .douyin-publish-url-field {
  flex: 1 1 360px;
  min-width: 300px;
}

.douyin-local-page .douyin-publish-card-body .douyin-publish-url-field input,
.douyin-local-page .douyin-title-safety-grid .douyin-publish-url-field input {
  width: 100%;
}

.douyin-local-page .douyin-publish-tiny-field {
  flex: 1 1 110px;
  min-width: 110px;
}

.douyin-local-page .douyin-publish-tiny-field .compact-number {
  width: 82px;
}

.douyin-local-page .douyin-final-action-buttons {
  align-items: center;
  gap: 12px;
}

.douyin-local-page .douyin-local-action-dock {
  position: fixed;
  right: 20px;
  bottom: 14px;
  left: calc(var(--sidebar-width) + 20px);
  z-index: 210;
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 12px;
  gap: 10px;
  grid-template-columns: minmax(260px, 1fr) auto;
}

.douyin-local-page .douyin-local-action-dock .final-action-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.douyin-local-page .douyin-local-action-dock .final-action-copy strong {
  font-size: 14px;
}

.douyin-local-page .douyin-local-action-dock .final-action-copy > span {
  flex: 1 1 420px;
  min-width: 240px;
  line-height: 1.3;
}

.douyin-local-page .douyin-local-action-dock .inline-check,
.douyin-local-page .douyin-local-action-dock .final-action-copy small {
  flex: 0 0 auto;
}

.agent-assistant-open .douyin-local-page .douyin-local-action-dock {
  right: calc(var(--agent-assistant-width) + 20px);
  grid-template-columns: minmax(260px, 1fr) auto;
}

.layout-collapsed .douyin-local-page .douyin-local-action-dock,
.collapsed-preview .douyin-local-page .douyin-local-action-dock {
  left: calc(var(--sidebar-collapsed-width) + 20px);
}

.douyin-local-page .fixed-action-spacer {
  display: block;
  height: 82px;
}

.douyin-local-page .douyin-action-button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.douyin-local-page .douyin-action-button-group.utility {
  justify-content: flex-end;
}

.douyin-local-page .douyin-action-button-group.launch {
  flex: 0 0 auto;
}

.douyin-local-page .douyin-action-button-group.launch .primary-button {
  min-width: 168px;
}

.douyin-local-page .douyin-check-list {
  margin-top: 12px;
}

.douyin-local-page .setting-row {
  padding: 12px 14px;
  border: 1px solid rgba(119, 146, 155, 0.18);
  border-radius: 10px;
  background: #fbfeff;
}

.douyin-local-page .setting-row strong {
  color: #12343d;
  font-size: 14px;
}

.douyin-local-page .setting-row p {
  margin: 4px 0 0;
  color: #60747c;
  font-size: 12px;
  line-height: 1.55;
}

.douyin-local-page .douyin-check-list .setting-row {
  padding: 8px 10px;
  border-radius: 8px;
}

.douyin-local-page .douyin-local-result-panel {
  margin-top: 12px;
  cursor: default;
}

.douyin-local-page .douyin-local-result-panel h2 {
  margin: 0;
  color: #0d3c43;
  font-size: 16px;
  line-height: 1.35;
}

.douyin-local-page .douyin-local-result-panel > p {
  margin: 6px 0 10px;
  max-width: 76ch;
  color: #465f67;
  font-size: 13px;
  line-height: 1.55;
}

.douyin-local-page .task-result-summary .result-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: #60747c;
  font-size: 12px;
}

@media (max-width: 1320px) {
  .douyin-local-page .douyin-basic-row.primary {
    grid-template-columns: minmax(360px, 1.25fr) minmax(280px, 0.9fr);
  }

  .douyin-local-page .douyin-basic-row.secondary {
    grid-template-columns: minmax(250px, 1fr) minmax(210px, 0.82fr) minmax(185px, 0.7fr) minmax(96px, 0.34fr);
  }

  .douyin-local-page .douyin-basic-grid {
    grid-template-columns: minmax(320px, 1.35fr) minmax(220px, 0.95fr) minmax(150px, 0.7fr);
  }

  .douyin-local-page .douyin-field-root,
  .douyin-local-page .douyin-field-template,
  .douyin-local-page .douyin-field-shop,
  .douyin-local-page .douyin-field-profile,
  .douyin-local-page .douyin-field-submit,
  .douyin-local-page .douyin-field-batch {
    grid-column: auto;
    max-width: none;
  }

  .douyin-local-page .douyin-media-row.main-row,
  .douyin-local-page .douyin-media-row.support-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .douyin-local-page .douyin-category-flow-grid {
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  }

  .douyin-local-page .douyin-category-control-row {
    grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1fr) minmax(300px, 1fr);
  }

  .douyin-local-page .douyin-category-setup-grid {
    grid-template-columns: minmax(210px, 0.65fr) minmax(360px, 1.35fr);
  }

  .douyin-local-page .douyin-sku-base-grid {
    grid-template-columns: minmax(220px, 0.9fr) minmax(320px, 1.1fr);
    gap: 10px 16px;
  }

  .douyin-local-page .douyin-sku-base-grid .douyin-price-source-field {
    grid-column: 1 / -1;
  }

  .douyin-local-page .douyin-detail-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .douyin-local-page .douyin-detail-span-2 {
    grid-column: span 1;
  }

  .douyin-local-page .douyin-size-table-values {
    grid-column: 1 / -1;
  }

  .douyin-local-page .douyin-size-range-field {
    width: 180px;
  }

  .douyin-local-page .douyin-title-safety-grid {
    grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.05fr);
  }

  .douyin-local-page .douyin-cadence-group {
    grid-column: 1 / -1;
  }

  .douyin-local-page .douyin-title-safety-grid .douyin-publish-url-field {
    grid-column: 1 / -1;
  }

  .douyin-local-page .douyin-publish-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .douyin-local-page .douyin-publish-rule-grid .douyin-publish-short-field {
    width: auto;
    max-width: none;
  }

  .douyin-local-page .douyin-publish-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .douyin-local-page .compact-form-grid,
  .douyin-local-page .douyin-readiness-grid,
  .douyin-local-page .douyin-readiness-grid.compact,
  .douyin-local-page .status-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .douyin-local-page .local-hero,
  .douyin-local-page .section-title-row {
    flex-direction: column;
  }

  .douyin-local-page .compact-form-grid,
  .douyin-local-page .douyin-basic-row.primary,
  .douyin-local-page .douyin-basic-row.secondary,
  .douyin-local-page .douyin-basic-grid,
  .douyin-local-page .douyin-readiness-grid,
  .douyin-local-page .douyin-readiness-grid.compact,
  .douyin-local-page .douyin-media-row.main-row,
  .douyin-local-page .douyin-media-row.support-row,
  .douyin-local-page .douyin-sku-base-grid,
  .douyin-local-page .douyin-spec-support-grid,
  .douyin-local-page .douyin-title-safety-grid,
  .douyin-local-page .douyin-subgroup-grid.cols-2,
  .douyin-local-page .douyin-publish-rule-grid,
  .douyin-local-page .status-cards,
  .douyin-local-page .settings-list {
    grid-template-columns: 1fr;
  }

  .douyin-local-page .douyin-category-flow-grid {
    grid-template-columns: 1fr;
  }

  .douyin-local-page .douyin-category-control-row {
    grid-template-columns: 1fr;
  }

  .douyin-local-page .douyin-category-setup-grid {
    grid-template-columns: 1fr;
  }

  .douyin-local-page .douyin-field-root,
  .douyin-local-page .douyin-field-template,
  .douyin-local-page .douyin-field-shop,
  .douyin-local-page .douyin-field-profile,
  .douyin-local-page .douyin-field-submit,
  .douyin-local-page .douyin-field-batch,
  .douyin-local-page .douyin-title-safety-grid .douyin-publish-url-field,
  .douyin-local-page .douyin-media-setting.coverage {
    grid-column: span 1;
    max-width: none;
  }

  .douyin-local-page .douyin-media-setting.coverage {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .douyin-local-page .douyin-sku-default-card,
  .douyin-local-page .douyin-spec-card,
  .douyin-local-page .douyin-publish-card {
    grid-template-columns: 1fr;
  }

  .douyin-local-page .douyin-sku-default-card .local-sales-base-card-title,
  .douyin-local-page .douyin-spec-title,
  .douyin-local-page .douyin-publish-card-title {
    border-right: 0;
    border-bottom: 1px solid #e4edf1;
    padding: 10px 12px;
  }

  .douyin-local-page .douyin-sku-base-grid .field {
    flex-direction: column;
    align-items: flex-start;
  }

  .douyin-local-page .douyin-publish-url-field {
    min-width: 0;
  }

  .douyin-local-page .douyin-spec-row {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 9px 10px;
  }

  .douyin-local-page .douyin-mini-table div {
    grid-template-columns: 1fr;
  }

  .douyin-local-page .field.span-2,
  .douyin-local-page .check-row.span-2 {
    grid-column: span 1;
  }

  .douyin-local-page .douyin-local-status-strip {
    align-items: stretch;
    flex-direction: column;
  }

  .douyin-local-page .status-side {
    justify-content: flex-start;
    white-space: normal;
  }

  .douyin-local-page .douyin-action-button-group,
  .douyin-local-page .douyin-action-button-group.utility {
    justify-content: flex-start;
  }
}

.account-recharge-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.account-recharge-packages button {
  min-height: 72px;
  padding: 12px 14px;
  text-align: left;
  color: #273f49;
  background: #ffffff;
  border: 1px solid #dbe7ec;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.account-recharge-packages button strong,
.account-recharge-packages button span {
  display: block;
}

.account-recharge-packages button strong {
  margin-bottom: 5px;
  font-size: 14px;
}

.account-recharge-packages button span {
  font-size: 12px;
  color: #647982;
}

.account-recharge-packages button.active {
  background: #eef8fb;
  border-color: #2c9bb6;
  box-shadow: 0 0 0 2px rgba(44, 155, 182, 0.12);
}

.account-extension-section {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #d5e7e7;
  border-radius: 8px;
  background: #fbfefe;
}

.account-extension-section h3 {
  margin: 0;
  color: #103b43;
  font-size: 14px;
}

.account-extension-packages {
  display: grid;
  grid-template-columns: repeat(4, minmax(138px, 1fr));
  gap: 8px;
}

.account-extension-packages button {
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid #d5e3e5;
  border-radius: 7px;
  background: #fff;
  color: #103b43;
  cursor: pointer;
  text-align: left;
}

.account-extension-packages button:hover,
.account-extension-packages button.active {
  border-color: #18a9a2;
  background: #effbfa;
  box-shadow: 0 0 0 2px rgba(24, 169, 162, 0.1);
}

.account-extension-packages strong,
.account-extension-packages span {
  display: block;
}

.account-extension-packages strong {
  margin-bottom: 5px;
  font-size: 13px;
}

.account-extension-packages span,
.account-extension-grant span,
.account-extension-grant small,
.account-extension-order-row {
  color: #617d84;
  font-size: 12px;
}

.account-extension-action-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 152px;
  gap: 10px;
  align-items: stretch;
}

.account-extension-action-row .primary-button {
  min-height: 48px;
}

.account-extension-grants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.account-extension-grant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 9px 10px;
  border: 1px solid #e0ecec;
  border-radius: 6px;
  background: #fff;
}

@media (max-width: 980px) {
  .account-extension-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .account-extension-packages,
  .account-extension-action-row {
    grid-template-columns: 1fr;
  }

  .account-extension-order-row {
    grid-template-columns: 78px minmax(140px, 1fr) 64px 118px;
  }
}

.account-extension-grant small {
  grid-column: 1 / -1;
}

.account-extension-orders {
  display: grid;
  gap: 4px;
  overflow-x: auto;
}

.account-extension-order-row {
  display: grid;
  grid-template-columns: 86px minmax(180px, 1fr) 72px 142px minmax(132px, auto);
  gap: 8px;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #e4eeee;
  border-radius: 6px;
  background: #fff;
}

.account-order-inline-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.account-order-inline-actions .secondary-button {
  min-width: auto;
  min-height: 30px;
  padding: 5px 9px;
  white-space: nowrap;
}

/* 账号中心：紧凑工作台布局。字段宽度按实际内容控制，避免短字段占满整行。 */
.account-quick-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-quick-links button {
  min-height: 64px;
}

.account-subscription-page {
  padding: 22px 26px 42px;
}

.account-subscription-head {
  min-height: 42px;
  margin-bottom: 12px;
}

.account-center-main {
  gap: 12px;
}

.account-current-band {
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  border-radius: 8px;
}

.account-current-plan-card {
  min-height: 118px;
  gap: 8px;
  padding: 18px 20px;
}

.account-current-plan-card strong {
  font-size: 21px;
}

.account-points-summary {
  gap: 18px;
  padding: 18px 22px;
}

.account-points-total b,
.account-point-stat b {
  margin-top: 7px;
  font-size: 21px;
}

.account-point-stat {
  gap: 6px;
  padding: 0 18px;
}

.account-mini-stats {
  gap: 8px;
}

.account-stat-card {
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: none;
}

.account-stat-card b {
  font-size: 16px;
}

.account-plan-toolbar {
  margin-top: 2px;
}

.account-plan-card-row {
  grid-template-columns: repeat(6, minmax(178px, 1fr));
  gap: 10px;
}

.account-price-card {
  grid-template-rows: auto auto auto minmax(40px, auto) auto auto auto 1fr;
  gap: 9px;
  min-height: 500px;
  padding: 16px 14px;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(14, 55, 58, 0.05);
}

.account-price-card-head strong {
  font-size: 16px;
}

.account-price-card-head span,
.account-price-card-head em {
  margin-top: 6px;
}

.account-price b {
  font-size: 26px;
}

.account-card-points {
  padding: 8px 0;
}

.account-plan-highlights {
  gap: 4px;
  padding: 0;
}

.account-plan-highlight-row {
  min-height: 20px;
  padding-bottom: 4px;
}

.account-price-card ul {
  gap: 5px;
}

.account-price-card li {
  padding-left: 14px;
  line-height: 1.35;
}

.account-price-card li::before {
  top: 4px;
  width: 6px;
  height: 6px;
}

.account-profile-panel {
  max-width: 1040px;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 8px;
}

.account-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  font-size: 20px;
}

.account-profile-summary strong {
  font-size: 18px;
}

.account-profile-summary p {
  max-width: 720px;
  line-height: 1.45;
}

.account-profile-grid {
  grid-template-columns: repeat(3, minmax(220px, 300px));
  justify-content: start;
  gap: 8px;
}

.account-profile-item {
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
}

.account-profile-item b {
  font-size: 14px;
}

.account-management-grid {
  grid-template-columns: repeat(2, minmax(360px, 480px));
  justify-content: start;
  gap: 10px;
}

.account-management-grid .account-edit-card {
  width: 100%;
  max-width: 480px;
}

.account-edit-card,
.account-team-list {
  gap: 9px;
  padding: 12px;
  border-radius: 8px;
}

.account-edit-card .account-form-row input,
.account-edit-card .account-form-row select {
  width: 100%;
  max-width: 360px;
}

.account-edit-card > .primary-button,
.account-edit-card > .secondary-button {
  width: fit-content;
  min-width: 120px;
}

.account-inline-fields {
  grid-template-columns: minmax(180px, 248px) 112px;
}

.account-account-prefix {
  align-items: center;
  background: #f3f8f7;
  border: 1px solid #cfe2df;
  border-radius: 6px;
  color: #285d58;
  display: flex;
  font-size: 13px;
  min-height: 36px;
  padding: 0 10px;
  white-space: nowrap;
}

.account-wallet-grid {
  grid-template-columns: minmax(520px, 1fr) 190px 150px;
  align-items: center;
}

.account-recharge-packages {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px;
}

.account-recharge-packages button {
  min-height: 62px;
  padding: 10px 12px;
}

.account-billing-standard {
  gap: 8px;
}

.account-billing-standard > div {
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
}

.account-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.account-usage-panel {
  gap: 7px;
}

.account-usage-row {
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 6px 10px;
  min-height: 32px;
  padding: 6px 0;
}

.account-usage-row small {
  grid-column: 1 / -1;
}

.account-platform-grid {
  grid-template-columns: repeat(3, minmax(180px, 250px));
  justify-content: start;
  gap: 8px;
}

.account-platform-tile {
  padding: 9px 11px;
}

.account-binding-guide {
  max-width: 1080px;
}

.account-bind-form-verified {
  grid-template-columns: 120px minmax(260px, 340px) minmax(230px, 300px) 140px;
  max-width: 1020px;
  padding: 10px 0;
}

.account-bind-form-verified > .account-form-row:nth-of-type(1) {
  grid-column: 1;
}

.account-bind-form-verified > .account-form-row:nth-of-type(2) {
  grid-column: 2;
}

.account-bind-form-verified > .account-form-row:nth-of-type(3) {
  grid-column: 3;
}

.account-bind-check {
  grid-column: 1 / span 2;
  grid-row: 2;
}

.account-bind-password {
  grid-column: 3;
  grid-row: 2;
}

.account-bind-form-verified > .primary-button {
  grid-column: 4;
  grid-row: 2;
}

.account-team-layout {
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.account-team-table {
  overflow-x: auto;
}

.account-team-row {
  min-width: 900px;
}

@media (max-width: 1500px) {
  .account-plan-card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .account-wallet-grid {
    grid-template-columns: minmax(0, 1fr) 180px 150px;
  }
}

@media (max-width: 1180px) {
  .account-profile-grid,
  .account-management-grid,
  .account-team-layout,
  .account-wallet-grid,
  .account-usage-grid {
    grid-template-columns: 1fr;
  }

  .account-bind-form-verified,
  .account-bind-form-verified > .account-form-row:nth-of-type(1),
  .account-bind-form-verified > .account-form-row:nth-of-type(2),
  .account-bind-form-verified > .account-form-row:nth-of-type(3),
  .account-bind-check,
  .account-bind-password,
  .account-bind-form-verified > .primary-button {
    grid-row: auto;
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .account-quick-links,
  .account-recharge-packages,
  .account-plan-card-row {
    grid-template-columns: 1fr;
  }

  .account-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .account-section-head > div {
    width: 100%;
    min-width: 0;
  }

  .account-section-head .account-soft-badge {
    align-self: flex-start;
    max-width: 100%;
  }
}

.second-batch-editor {
  gap: 14px;
}

.admin-second-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto minmax(80px, auto);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #edf2f5;
}

.admin-second-row:first-of-type {
  border-top: 0;
}

.admin-second-row input,
.admin-second-row select {
  min-width: 0;
  padding: 8px 10px;
  color: #263c45;
  background: #ffffff;
  border: 1px solid #d9e5ea;
  border-radius: 6px;
}

.admin-second-row label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}

.admin-second-row small {
  color: #6d828b;
  white-space: nowrap;
}

.admin-second-row.package {
  grid-template-columns: minmax(180px, 1fr) minmax(90px, 0.4fr) minmax(110px, 0.45fr) auto;
}

.admin-second-row.matrix {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 0.75fr) auto minmax(150px, 0.65fr);
}

.admin-second-row.cloud-billing {
  grid-template-columns: minmax(180px, 1fr) minmax(88px, 0.45fr) 92px 92px auto auto minmax(150px, 0.65fr);
}

/* Global notification placement: keep account/status actions visible. */
:where(.app-notifications-root[data-position='top-center']) {
  top: calc(var(--layout-header-height) + 18px);
  width: min(680px, calc(100vw - 360px));
}

:where(.app-notifications-root[data-position='bottom-right']) {
  right: 18px;
  bottom: 18px;
  width: min(390px, calc(100vw - 32px)) !important;
}

.app-notification {
  --notification-radius: 10px;
  --mantine-font-size-sm: 15px;
  --mantine-line-height-sm: 1.45;
  --mantine-font-weight-medium: 700;
  min-height: 64px;
  padding: 13px 16px 13px 18px;
  color: var(--text);
  background: #ffffff;
  background: color-mix(in srgb, var(--notification-color, var(--primary)) 10%, #ffffff);
  border: 1px solid var(--primary);
  border-color: color-mix(in srgb, var(--notification-color, var(--primary)) 52%, #ffffff);
  box-shadow: 0 6px 14px rgba(18, 48, 60, 0.14);
}

.app-notification::before {
  display: none;
}

.app-notification [data-with-title] {
  color: #304853;
  font-weight: 500;
}

.task-notification-card {
  min-height: 68px;
  padding: 12px 14px 12px 16px;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.task-notification-card:hover {
  border-color: var(--notification-color, var(--primary));
  box-shadow: 0 8px 18px rgba(18, 48, 60, 0.18);
  transform: translateY(-1px);
}

.task-notification-card:focus-visible {
  outline: 2px solid var(--notification-color, var(--primary));
  outline-offset: 2px;
}

.task-notification-card [data-with-title] {
  font-weight: 600;
}

html[data-theme="dark"] .task-notification-card:hover {
  border-color: var(--notification-color, var(--primary));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

@media (max-width: 980px) {
  :where(.app-notifications-root[data-position='top-center']) {
    width: min(620px, calc(100vw - 28px));
  }
}
/* 抖店本地素材上架：与淘宝母版一致的紧凑工具页结构。 */
.douyin-local-v2 {
  --dy-accent: #0aa79d;
  --dy-accent-soft: #dff5f3;
  --dy-border: #cfe2e5;
  --dy-text: #172b36;
  --dy-muted: #647986;
  gap: 12px;
  padding-bottom: 96px;
}

.douyin-v2-page-head {
  align-items: flex-start;
  padding: 0 4px 2px;
}

.douyin-v2-page-head h1 {
  margin: 3px 0 4px;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: 0;
}

.douyin-v2-page-head p {
  margin: 0;
  color: var(--dy-muted);
  font-size: 13px;
}

.douyin-v2-panel {
  overflow: hidden;
  padding: 0;
  border-color: var(--dy-border);
  border-radius: 6px;
}

.douyin-v2-section-title {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 56px;
  padding: 10px 12px;
  background: var(--dy-accent-soft);
  border-bottom: 1px solid #b8dfdc;
}

.douyin-v2-section-index {
  display: inline-grid;
  place-items: center;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  margin-top: 1px;
  border-radius: 5px;
  color: #fff;
  background: var(--dy-accent);
  font-size: 13px;
  font-weight: 700;
}

.douyin-v2-section-title > div:not(.douyin-v2-section-actions) {
  min-width: 0;
  flex: 1;
}

.douyin-v2-section-title h2 {
  margin: 0;
  color: var(--dy-text);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0;
}

.douyin-v2-section-title p {
  margin: 2px 0 0;
  color: #52707b;
  font-size: 12px;
  line-height: 1.45;
}

.douyin-v2-section-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.douyin-v2-basic-grid,
.douyin-v2-three-grid,
.douyin-v2-spec-grid,
.douyin-v2-detail-grid,
.douyin-v2-sku-defaults {
  display: grid;
  gap: 11px 14px;
  padding: 12px;
}

.douyin-v2-basic-grid {
  grid-template-columns:
    minmax(300px, 360px)
    minmax(235px, 260px)
    minmax(190px, 220px)
    minmax(200px, 230px)
    minmax(145px, 170px)
    minmax(120px, 145px);
  gap: 10px 12px;
  align-items: start;
  justify-content: start;
}

.douyin-v2-basic-root,
.douyin-v2-basic-template,
.dyl-quota-policy-field,
.douyin-v2-basic-shop,
.douyin-v2-basic-browser,
.douyin-v2-basic-batch,
.douyin-v2-basic-submit,
.douyin-v2-basic-count {
  grid-column: auto;
  max-width: 100%;
}

.douyin-v2-template-inline-control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.douyin-v2-template-inline-control select {
  flex: 1 1 150px;
}

.douyin-v2-template-inline-control button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.douyin-v2-field-label-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.douyin-v2-template-title-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.douyin-v2-template-title-actions button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
}

.douyin-v2-template-value {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.douyin-v2-template-value select {
  width: 100%;
}

.douyin-v2-template-feedback {
  color: #087f78;
  font-size: 11px;
  line-height: 1.35;
}

.douyin-v2-template-feedback.error {
  color: #c2413a;
}

.douyin-v2-field-label-actions .compact-action-button {
  min-height: 26px;
  padding: 0 7px;
  font-size: 12px;
  white-space: nowrap;
}

.douyin-v2-three-grid {
  grid-template-columns: minmax(430px, 1.5fr) repeat(2, minmax(210px, .75fr));
}

.douyin-v2-category-settings,
.douyin-v2-main-image-settings,
.douyin-v2-main-image-grid {
  display: grid;
  align-items: start;
  gap: 11px 16px;
  padding: 12px;
}

.douyin-v2-category-settings {
  grid-template-columns: 220px minmax(320px, 460px) minmax(440px, 1fr);
  gap: 10px 12px;
}

.douyin-v2-main-image-settings {
  grid-template-columns: minmax(520px, 1.2fr) minmax(420px, .8fr);
  align-items: center;
}

.douyin-v2-main-image-grid {
  grid-template-columns: repeat(2, minmax(360px, 1fr));
}

.douyin-v2-white-bg-field {
  padding-top: 10px;
  border-top: 1px solid var(--theme-border);
}

.douyin-v2-white-bg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.douyin-v2-white-bg-keywords,
.douyin-v2-white-bg-note {
  color: var(--theme-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.douyin-v2-white-bg-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--theme-border);
}

.douyin-v2-inline-check.douyin-v2-white-bg-generate,
.douyin-v2-inline-check.douyin-v2-white-bg-folder-name {
  min-height: 34px;
  margin-top: 0;
  color: var(--theme-text);
  font-size: 12px;
}

.douyin-v2-white-bg-control {
  display: grid;
  flex: 0 1 auto;
  gap: 4px;
  min-width: 0;
  color: var(--theme-muted);
  font-size: 11px;
}

.douyin-v2-white-bg-control.tiny {
  width: 86px;
}

.douyin-v2-white-bg-control.medium {
  width: 158px;
}

.douyin-v2-white-bg-control.wide {
  width: min(270px, 100%);
}

.douyin-v2-white-bg-control.flex {
  flex: 1 1 260px;
}

.douyin-v2-field .douyin-v2-white-bg-control > input,
.douyin-v2-field .douyin-v2-white-bg-control > select {
  width: 100%;
}

.douyin-v2-white-bg-note {
  flex: 1 1 300px;
  align-self: center;
  min-width: 240px;
}

.douyin-v2-category-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 59px;
  padding: 8px 10px;
  border: 1px solid #e5c879;
  border-radius: 5px;
  background: #fffaf0;
}

.douyin-v2-category-state.idle {
  border-color: #d7e1e4;
  background: #f7f9fa;
}

.douyin-v2-category-state > div:first-child {
  min-width: 0;
}

.douyin-v2-category-state.ready {
  border-color: #a9d8d1;
  background: #f0faf8;
}

.douyin-v2-category-state.partial {
  border-color: #9ecfd0;
  background: #f1fbfb;
}

.douyin-v2-category-state b,
.douyin-v2-category-state span {
  display: block;
}

.douyin-v2-category-state b {
  color: #203e48;
  font-size: 13px;
}

.douyin-v2-category-state span {
  margin-top: 2px;
  color: #617782;
  font-size: 11px;
  line-height: 1.35;
}

.douyin-v2-category-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.douyin-v2-category-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.douyin-v2-category-actions .secondary-button:disabled {
  border-color: #d4dde0;
  background: #f1f4f5;
  color: #96a3a8;
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
}

@media (max-width: 1320px) {
  .douyin-v2-category-settings {
    grid-template-columns: 220px minmax(320px, 1fr);
  }

  .douyin-v2-category-state {
    grid-column: 1 / -1;
  }
}

.douyin-v2-attribute-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 6px 10px;
  padding: 8px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-surface-raised);
}

.douyin-v2-attribute-summary span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--theme-border);
  border-radius: 4px;
  color: var(--theme-text);
  background: var(--theme-control);
  font-size: 11px;
}

.douyin-v2-attribute-summary span b {
  flex: 0 0 auto;
  color: var(--theme-text-strong);
  font-weight: 650;
}

.douyin-v2-attribute-summary em {
  align-self: center;
  color: var(--theme-muted);
  font-size: 11px;
  font-style: normal;
}

.douyin-v2-sku-defaults {
  grid-template-columns: minmax(180px, .7fr) minmax(330px, 1.25fr) minmax(420px, 1.45fr) minmax(150px, .55fr);
  padding-bottom: 9px;
}

.douyin-v2-spec-grid {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  padding-top: 10px;
  border-top: 1px solid #e3ecee;
}

.douyin-v2-detail-grid {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
}

.douyin-v2-field {
  min-width: 0;
}

.douyin-v2-field.span-2 {
  grid-column: span 2;
}

.douyin-v2-field-label {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  min-height: 20px;
  margin-bottom: 5px;
  color: var(--dy-text);
  font-size: 13px;
  font-weight: 650;
}

.douyin-v2-field > small {
  display: block;
  margin-top: 5px;
  color: var(--dy-muted);
  font-size: 11px;
  line-height: 1.45;
}

.douyin-v2-field-help {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 5px;
  color: var(--dy-muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.douyin-v2-field-help > span {
  min-width: 0;
}

.douyin-v2-field-help .setting-help-link {
  flex: 0 0 auto;
  font-size: inherit;
}

.douyin-v2-field-help-panel {
  display: grid;
  gap: 8px;
}

.douyin-v2-field-help-panel p {
  margin: 0;
}

.douyin-v2-field-help-panel .setting-help-link {
  width: fit-content;
  font-size: 12px;
}

.douyin-v2-field input:not([type='checkbox']):not([type='radio']),
.douyin-v2-field select,
.local-submit-mode-field .local-submit-mode-select {
  width: 100%;
  height: 34px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid #bfd1d6;
  border-radius: 5px;
  color: #1a303b;
  background: #fff;
  font-size: 13px;
  outline: none;
}

.local-submit-mode-field .local-submit-mode-select {
  width: min(160px, 100%);
}

.douyin-v2-field input:focus,
.douyin-v2-field select:focus,
.local-submit-mode-field .local-submit-mode-select:focus {
  border-color: var(--dy-accent);
  box-shadow: 0 0 0 2px rgba(10, 167, 157, .12);
}

.douyin-v2-field input:disabled,
.douyin-v2-field select:disabled {
  color: #8799a2;
  background: #f1f5f6;
  cursor: not-allowed;
}

.douyin-v2-inline-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid #d5e4e6;
  border-radius: 5px;
  color: #506a74;
  background: #f7fbfb;
  font-size: 12px;
  line-height: 1.5;
}

.douyin-v2-inline-note b {
  flex: 0 0 auto;
  color: #1c424b;
  font-weight: 650;
}

.douyin-v2-inline-note.compact {
  align-self: end;
}

.douyin-v2-category-settings > .douyin-v2-inline-note.compact {
  grid-column: 1 / 3;
}

.yd-help-tip {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  padding: 0;
  border: 1px solid #9fb4bc;
  border-radius: 50%;
  color: #607681;
  background: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: help;
}

.douyin-v2-help-trigger {
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  padding: 0;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
}

.douyin-v2-field-label > .interactive-help-tip-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.yd-segmented {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border: 1px solid #bed0d5;
  border-radius: 6px;
  background: #f7fafb;
  overflow: hidden;
}

.yd-segmented button {
  min-height: 32px;
  padding: 5px 11px;
  border: 0;
  border-right: 1px solid #d4e0e3;
  color: #526873;
  background: transparent;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.yd-segmented button:last-child {
  border-right: 0;
}

.yd-segmented button:hover:not(:disabled) {
  color: #087f78;
  background: #eaf7f5;
}

.yd-segmented button.active {
  color: #fff;
  background: var(--dy-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.yd-segmented button.active:hover:not(:disabled) {
  color: #fff;
  background: var(--dy-accent);
}

.yd-segmented button:disabled {
  color: #96a7ae;
  cursor: not-allowed;
}

.yd-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  cursor: pointer;
}

.yd-toggle-wrap input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.yd-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #cbd7db;
  transition: background .18s ease;
}

.yd-toggle i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(30, 55, 65, .25);
  transition: transform .18s ease;
}

.yd-toggle-wrap input:checked + .yd-toggle {
  background: var(--dy-accent);
}

.yd-toggle-wrap input:checked + .yd-toggle i {
  transform: translateX(16px);
}

.yd-toggle-wrap b {
  font-size: 12px;
  font-weight: 600;
}

.category-template-policy-row .yd-toggle-wrap {
  gap: 8px;
  min-height: 28px;
}

.category-template-policy-row .yd-toggle {
  flex: 0 0 40px;
  width: 40px;
  height: 22px;
  border: 1px solid var(--theme-muted);
  border-radius: 999px;
  background: var(--theme-surface-elevated);
  box-shadow: inset 0 0 0 1px rgba(23, 36, 43, 0.04);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.category-template-policy-row .yd-toggle i {
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--theme-border-strong);
  background: var(--theme-surface);
}

.category-template-policy-row .yd-toggle-wrap input:checked + .yd-toggle {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.category-template-policy-row .yd-toggle-wrap input:checked + .yd-toggle i {
  transform: translateX(18px);
}

.category-template-policy-row .yd-toggle-wrap input:focus-visible + .yd-toggle {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

.category-template-policy-row .yd-toggle-wrap input:checked ~ b {
  color: var(--primary-dark);
}

.category-template-policy-row .yd-toggle-wrap input:disabled + .yd-toggle,
.category-template-policy-row .yd-toggle-wrap input:disabled ~ b {
  cursor: not-allowed;
  opacity: .62;
}

@media (prefers-reduced-motion: reduce) {
  .category-template-policy-row .yd-toggle,
  .category-template-policy-row .yd-toggle i {
    transition: none;
  }
}

.douyin-v2-path-control,
.douyin-v2-shop-control,
.douyin-v2-template-row,
.douyin-v2-price-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.douyin-v2-path-control > input,
.douyin-v2-shop-control > select,
.douyin-v2-template-row > select {
  flex: 1;
}

.douyin-v2-path-control button,
.douyin-v2-shop-control button,
.douyin-v2-template-row button,
.douyin-v2-action-dock button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.douyin-v2-path-control .icon-only,
.douyin-v2-shop-control .icon-only {
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.douyin-v2-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-top: 6px;
  color: #516973;
  font-size: 11px;
  cursor: pointer;
}

.douyin-v2-inline-check input {
  margin: 0;
}

.douyin-v2-inline-check.keep-browser-check {
  margin-top: 10px;
}

.douyin-v2-check-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 14px;
  min-height: 32px;
}

.douyin-v2-check-row label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  color: #314b56;
  font-size: 12px;
  cursor: pointer;
}

.douyin-v2-check-row input {
  margin: 0;
}

.douyin-v2-check-row.compact {
  gap: 7px 11px;
}

.douyin-v2-readonly-path,
.douyin-v2-readonly-value {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #d5e1e4;
  border-radius: 5px;
  color: #405963;
  background: #f6f9fa;
  font-size: 12px;
  line-height: 18px;
}

.douyin-v2-readonly-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.douyin-v2-unit-input {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.douyin-v2-unit-input input {
  width: 92px !important;
}

.douyin-v2-unit-input span {
  color: var(--theme-muted);
  font-size: 12px;
}

.douyin-v2-category-flow {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 30px minmax(420px, 1.35fr);
  align-items: stretch;
  gap: 12px;
  padding: 12px;
}

.douyin-v2-category-flow > div {
  padding: 10px 12px;
  border: 1px solid #cfe1e4;
  border-radius: 6px;
  background: #fbfdfd;
}

.douyin-v2-category-flow b {
  display: block;
  margin-bottom: 8px;
  color: #173943;
  font-size: 13px;
}

.douyin-v2-category-flow p {
  margin: 0;
  color: #5d737d;
  font-size: 12px;
  line-height: 1.65;
}

.douyin-v2-flow-arrow {
  align-self: center;
  color: #7c949d;
  font-size: 22px;
  text-align: center;
}

.douyin-v2-price-row {
  flex-wrap: wrap;
}

.douyin-v2-price-row label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  color: #314b56;
  font-size: 12px;
  cursor: pointer;
}

.douyin-v2-price-row input[type='number'] {
  width: 82px !important;
  margin-left: 3px;
}

.douyin-v2-price-row > span {
  color: #607681;
  font-size: 12px;
}

.douyin-v2-spec-list {
  display: grid;
  gap: 7px;
}

.douyin-v2-spec-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.douyin-v2-spec-item,
.douyin-v2-spec-add {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.douyin-v2-spec-item input,
.douyin-v2-spec-add input {
  width: 116px !important;
  height: 32px !important;
  border-radius: 5px 0 0 5px !important;
}

.douyin-v2-spec-item button,
.douyin-v2-spec-add button {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid #bfd1d6;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  color: #5f747d;
  background: #f8fbfb;
  cursor: pointer;
}

.douyin-v2-spec-item button:hover,
.douyin-v2-spec-add button:hover {
  color: #087f78;
  background: #eaf7f5;
}

.douyin-v2-spec-add input {
  width: 150px !important;
}

.douyin-v2-template-row .danger-soft {
  color: #b6463d;
  border-color: #e6c2be;
  background: #fff8f7;
}

.douyin-v2-detail-workflow-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.douyin-v2-detail-workflow-control select {
  flex: 0 1 360px;
  max-width: 360px;
}

.douyin-v2-detail-workflow-control .text-action {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  color: #087f78;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}

.douyin-v2-rule-grid {
  display: grid;
  grid-template-columns: minmax(560px, 1.15fr) minmax(520px, 1fr);
  gap: 12px 16px;
  padding: 12px;
}

.douyin-v2-subgroup {
  min-width: 0;
  padding: 0;
}

.douyin-v2-cadence-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 90px minmax(300px, .9fr) 125px 135px minmax(270px, 1fr);
  align-items: start;
  gap: 10px 14px;
  padding-top: 12px;
  border-top: 1px solid #e0e9eb;
}

.douyin-v2-title-video-group,
.douyin-v2-fulfillment-group {
  display: grid;
  align-content: start;
  gap: 10px 12px;
}

.douyin-v2-title-video-group {
  grid-template-columns: minmax(145px, .5fr) minmax(260px, 1fr);
}

.douyin-v2-fulfillment-group {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(100px, .55fr) minmax(245px, 1.15fr);
}

.douyin-v2-title-video-group > h3,
.douyin-v2-fulfillment-group > h3 {
  grid-column: 1 / -1;
}

.douyin-v2-title-video-group > .douyin-v2-field,
.douyin-v2-fulfillment-group > .douyin-v2-field,
.douyin-v2-cadence-group > .douyin-v2-field {
  margin-top: 0 !important;
}

.douyin-v2-title-video-group > .douyin-v2-video-mode,
.douyin-v2-title-video-group > .douyin-v2-video-crop {
  align-self: end;
}

.douyin-v2-video-crop-settings {
  grid-column: 1 / -1;
  grid-template-columns: minmax(210px, .75fr) 150px;
  justify-content: start;
}

.douyin-v2-fulfillment-group > .douyin-v2-two-grid,
.douyin-v2-cadence-group > .douyin-v2-two-grid {
  display: contents;
}

.douyin-v2-fulfillment-group input {
  max-width: 280px;
}

.douyin-v2-title-mode select {
  max-width: 360px;
}

.douyin-v2-subgroup h3 {
  margin: 0 0 9px;
  color: #173943;
  font-size: 13px;
  letter-spacing: 0;
}

.douyin-v2-cadence-group h3 {
  margin-top: 7px;
}

.douyin-v2-cadence-group .douyin-v2-field,
.douyin-v2-cadence-group .keep-browser-check {
  margin-top: 0;
}

.douyin-v2-subgroup .douyin-v2-field + .douyin-v2-field {
  margin-top: 10px;
}

.douyin-v2-two-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 10px;
}

.douyin-v2-two-grid + .douyin-v2-two-grid {
  margin-top: 10px;
}

.douyin-v2-template-row {
  max-width: 880px;
}

.douyin-v2-preflight-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 9px 12px;
  border: 1px solid #bcded9;
  border-radius: 6px;
  background: #edf9f7;
}

.douyin-v2-preflight-strip.warning {
  border-color: #edcc8a;
  background: #fff9ec;
}

.douyin-v2-preflight-strip > div {
  min-width: 0;
}

.douyin-v2-preflight-strip b,
.douyin-v2-preflight-strip span {
  display: block;
}

.douyin-v2-preflight-strip b {
  color: #173943;
  font-size: 13px;
}

.douyin-v2-preflight-strip span {
  margin-top: 2px;
  color: #5a707a;
  font-size: 12px;
}

.douyin-v2-error {
  padding: 10px 12px;
  border: 1px solid #efb3a9;
  border-radius: 6px;
  color: #a33a2b;
  background: #fff5f2;
  font-size: 12px;
}

.douyin-v2-action-dock {
  z-index: 23;
}

.douyin-v2-action-dock .primary-button,
.douyin-v2-action-dock .secondary-button {
  min-height: 38px;
}

.douyin-size-template-dialog {
  width: min(720px, calc(100vw - 36px));
}

.douyin-size-template-body {
  display: grid;
  gap: 14px;
}

.douyin-size-template-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.douyin-size-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.douyin-size-template-grid > label > span {
  display: block;
  margin-bottom: 5px;
  color: #243d47;
  font-size: 12px;
  font-weight: 600;
}

.douyin-size-template-grid > label > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.douyin-size-template-grid input {
  width: 105px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #bfd1d6;
  border-radius: 5px;
}

.douyin-size-template-grid em,
.douyin-size-template-grid i {
  color: #607681;
  font-size: 12px;
  font-style: normal;
}

@media (max-width: 1450px) {
  .douyin-v2-basic-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }

  .douyin-v2-sku-defaults,
  .douyin-v2-spec-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }

  .douyin-v2-rule-grid {
    grid-template-columns: minmax(380px, 1.2fr) minmax(380px, 1fr);
  }

  .douyin-v2-cadence-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 105px minmax(360px, 1fr) minmax(230px, .75fr);
    align-items: start;
    gap: 10px 14px;
    margin-top: 12px;
    padding: 12px 0 0;
    border-top: 1px solid #e0e9eb;
  }

  .douyin-v2-fulfillment-group {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 1120px) {
  .douyin-v2-basic-grid,
  .douyin-v2-three-grid,
  .douyin-v2-sku-defaults,
  .douyin-v2-spec-grid,
  .douyin-v2-detail-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }

  .douyin-v2-basic-submit {
    grid-column: span 2;
  }

  .douyin-v2-category-settings,
  .douyin-v2-main-image-settings,
  .douyin-v2-main-image-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .douyin-v2-basic-root {
    grid-column: span 2;
  }

  .douyin-v2-basic-template,
  .dyl-quota-policy-field,
  .douyin-v2-basic-shop,
  .douyin-v2-basic-browser,
  .douyin-v2-basic-batch,
  .douyin-v2-basic-submit,
  .douyin-v2-basic-count {
    grid-column: span 1;
  }

  .douyin-v2-category-settings .douyin-v2-inline-note {
    grid-column: 1 / -1;
  }

  .douyin-v2-category-flow {
    grid-template-columns: 1fr;
  }

  .douyin-v2-flow-arrow {
    transform: rotate(90deg);
  }

  .douyin-v2-rule-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .douyin-v2-subgroup,
  .douyin-v2-title-video-group,
  .douyin-v2-fulfillment-group,
  .douyin-v2-cadence-group {
    display: block;
    grid-column: auto;
    margin: 0;
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid #e0e9eb;
    border-top: 0;
  }

  .douyin-v2-cadence-group {
    padding-bottom: 0;
    border-bottom: 0;
  }


  .douyin-v2-fulfillment-group > .douyin-v2-two-grid,
  .douyin-v2-cadence-group > .douyin-v2-two-grid {
    display: grid;
  }
}

@media (max-width: 760px) {
  .douyin-v2-basic-grid,
  .douyin-v2-three-grid,
  .douyin-v2-sku-defaults,
  .douyin-v2-spec-grid,
  .douyin-v2-detail-grid,
  .douyin-v2-two-grid,
  .douyin-size-template-meta,
  .douyin-size-template-grid {
    grid-template-columns: 1fr;
  }

  .douyin-v2-category-settings,
  .douyin-v2-main-image-settings,
  .douyin-v2-main-image-grid {
    grid-template-columns: 1fr;
  }

  .douyin-v2-basic-root,
  .douyin-v2-basic-template,
  .dyl-quota-policy-field,
  .douyin-v2-basic-shop,
  .douyin-v2-basic-browser,
  .douyin-v2-basic-batch,
  .douyin-v2-basic-submit,
  .douyin-v2-basic-count {
    grid-column: auto;
  }

  .douyin-v2-field.span-2,
  .douyin-v2-basic-grid .span-2 {
    grid-column: auto;
  }

  .douyin-v2-path-control,
  .douyin-v2-shop-control,
  .douyin-v2-template-row {
    flex-wrap: wrap;
  }

  .douyin-v2-path-control > input,
  .douyin-v2-shop-control > select,
  .douyin-v2-template-row > select {
    flex-basis: 100%;
  }

  .yd-segmented {
    flex-wrap: wrap;
  }

  .douyin-v2-template-inline-control,
  .douyin-v2-detail-workflow-control {
    flex-wrap: wrap;
  }

  .douyin-v2-template-inline-control select,
  .douyin-v2-detail-workflow-control select {
    flex-basis: 100%;
    max-width: none;
  }

}

/* 2026-07-14: super-admin pages keep dense controls and scroll inside data regions. */
:is(
  .admin-layout-announcements,
  .admin-layout-cloud_billing,
  .admin-layout-task_center,
  .admin-layout-docs_registry
) > .page-grid {
  gap: 8px;
}

:is(
  .admin-layout-announcements,
  .admin-layout-cloud_billing,
  .admin-layout-task_center,
  .admin-layout-docs_registry
) > .page-grid > .panel {
  padding: 10px 12px;
}

:is(
  .admin-layout-announcements,
  .admin-layout-cloud_billing,
  .admin-layout-task_center,
  .admin-layout-docs_registry
) > .page-grid > .panel > .panel-title {
  margin-bottom: 8px;
  padding-bottom: 7px;
}

/* 2026-07-14: data retention is a compact operational screen, not a raw-config editor. */
.data-retention-admin-page {
  display: grid;
  gap: 8px;
}

.data-retention-admin-page .panel {
  padding: 10px 12px;
}

.data-retention-admin-head .panel-title {
  margin-bottom: 7px;
  padding-bottom: 7px;
}

.data-retention-admin-head small {
  display: block;
  margin-top: 7px;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
}

.data-retention-settings-panel > small {
  display: block;
  margin-top: 8px;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.45;
}

.data-retention-settings-error {
  margin: 0 0 8px;
  padding: 7px 9px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 5px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 12px;
}

.data-retention-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
}

.data-retention-settings-grid > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 6px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  font-size: 12px;
}

.data-retention-settings-grid > label > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.data-retention-settings-grid input[type='number'] {
  width: 74px;
  min-height: 28px;
  padding: 4px 6px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 4px;
  background: var(--theme-control);
  color: var(--theme-text);
  font: inherit;
}

.data-retention-settings-grid b {
  color: var(--theme-muted);
  font-size: 11px;
}

.data-retention-switch-control {
  position: relative;
}

.data-retention-switch-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.data-retention-switch-control > span {
  position: relative;
  width: 34px;
  height: 18px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 999px;
  background: var(--theme-control);
  transition: background 140ms ease, border-color 140ms ease;
}

.data-retention-switch-control > span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--theme-muted);
  transition: transform 140ms ease, background 140ms ease;
}

.data-retention-switch-control input:checked + span {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
}

.data-retention-switch-control input:checked + span::after {
  background: var(--theme-success-text);
  transform: translateX(16px);
}

.data-retention-switch-control input:focus-visible + span {
  outline: 2px solid var(--theme-info-text);
  outline-offset: 2px;
}

.data-retention-settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.data-retention-settings-footer p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.45;
}

.data-retention-settings-footer button {
  flex: 0 0 auto;
}

.data-retention-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.data-retention-kpis span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  color: var(--theme-muted);
  background: var(--theme-surface-raised);
  font-size: 12px;
}

.data-retention-kpis b {
  color: var(--theme-text-strong);
  font-size: 16px;
}

.data-retention-kpis .ready {
  border-color: var(--theme-success-border);
  background: var(--theme-success);
}

.data-retention-kpis .ready b {
  color: var(--theme-success-text);
}

.data-retention-kpis .failed {
  border-color: var(--theme-danger-border);
  background: var(--theme-danger);
}

.data-retention-kpis .failed b {
  color: var(--theme-danger-text);
}

.data-retention-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.data-retention-section-title h3 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 13px;
}

.data-retention-section-title p,
.data-retention-section-title > span {
  margin: 3px 0 0;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.4;
}

.data-retention-rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 6px;
}

.data-retention-rules-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 12px;
}

.data-retention-rules-grid b {
  flex: 0 0 auto;
  color: var(--theme-success-text);
  font-size: 13px;
}

.data-retention-select-all {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: var(--theme-text);
  font-size: 12px;
  white-space: nowrap;
}

.data-retention-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
}

.data-retention-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--theme-text);
  font-size: 12px;
}

.data-retention-table th,
.data-retention-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--theme-border);
  text-align: left;
  vertical-align: middle;
}

.data-retention-table th {
  color: var(--theme-muted);
  background: var(--theme-surface-elevated);
  font-weight: 700;
  white-space: nowrap;
}

.data-retention-table tr:last-child td {
  border-bottom: 0;
}

.data-retention-table td:first-child {
  width: 44px;
  text-align: center;
}

.data-retention-table td:nth-child(2) {
  width: 150px;
}

.data-retention-table td:nth-child(4),
.data-retention-table td:nth-child(5) {
  width: 150px;
  white-space: nowrap;
}

.data-retention-table td small {
  display: block;
  margin-top: 2px;
  color: var(--theme-muted);
  font-size: 11px;
}

.data-retention-execute-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 6px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 12px;
}

.data-retention-execute-row input {
  width: 280px;
  max-width: 100%;
  min-height: 30px;
  padding: 5px 7px;
  border: 1px solid var(--theme-danger-border);
  border-radius: 4px;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 12px;
}

.data-retention-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 760px) {
  .data-retention-settings-footer {
    align-items: stretch;
    flex-direction: column;
  }
}

.data-retention-blocked-row,
.data-retention-audit-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--theme-border);
  color: var(--theme-muted);
  font-size: 12px;
}

.data-retention-blocked-row:last-child,
.data-retention-audit-row:last-child {
  border-bottom: 0;
}

.data-retention-blocked-row b,
.data-retention-audit-row b {
  flex: 0 0 auto;
  color: var(--theme-text);
}

.data-retention-blocked-row span,
.data-retention-audit-row span {
  min-width: 0;
  text-align: right;
}

@media (max-width: 780px) {
  .data-retention-bottom-grid {
    grid-template-columns: 1fr;
  }

  .data-retention-section-title {
    flex-wrap: wrap;
  }

  .data-retention-table {
    min-width: 650px;
  }
}

/* Dark theme coverage for shared application chrome and the Agent workbench. */
html[data-theme="dark"] body,
html[data-theme="dark"] #root {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .app-header,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .module-page,
html[data-theme="dark"] .settings-compact-section,
html[data-theme="dark"] .agent-workbench,
html[data-theme="dark"] .agent-workspace-sidebar,
html[data-theme="dark"] .agent-workbench-main,
html[data-theme="dark"] .agent-workbench-header,
html[data-theme="dark"] .agent-chat-panel,
html[data-theme="dark"] .agent-side-panel,
html[data-theme="dark"] .agent-message,
html[data-theme="dark"] .agent-message.assistant,
html[data-theme="dark"] .task-center-modal-shell,
html[data-theme="dark"] .account-popover,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .dialog-card {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .app-header,
html[data-theme="dark"] .sidebar {
  background: #151a1c;
}

html[data-theme="dark"] .app-header,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .header-brand,
html[data-theme="dark"] .global-left,
html[data-theme="dark"] .sidebar-section,
html[data-theme="dark"] .sidebar-item,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .page-heading,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] label,
html[data-theme="dark"] dt,
html[data-theme="dark"] th {
  color: var(--text);
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] span,
html[data-theme="dark"] .muted-text,
html[data-theme="dark"] .field-note,
html[data-theme="dark"] .admin-muted,
html[data-theme="dark"] .settings-inline-note,
html[data-theme="dark"] .agent-message-meta {
  color: var(--muted);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .plain-input,
html[data-theme="dark"] .compact-input {
  border-color: var(--line-strong);
  background: #111719;
  color: var(--text);
  caret-color: var(--primary);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #718083;
}

html[data-theme="dark"] button:not(.primary-button):not(.danger-button):not(.settings-switch),
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .text-button {
  border-color: var(--line-strong);
  background: #20282a;
  color: var(--text);
}

html[data-theme="dark"] button:not(:disabled):hover,
html[data-theme="dark"] .secondary-button:not(:disabled):hover,
html[data-theme="dark"] .ghost-button:not(:disabled):hover,
html[data-theme="dark"] .icon-button:not(:disabled):hover {
  border-color: var(--primary);
  background: #263a39;
  color: var(--primary-dark);
}

html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .settings-segmented button.active,
html[data-theme="dark"] .agent-workbench-header .active,
html[data-theme="dark"] .agent-view-tabs button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: #071817;
}

html[data-theme="dark"] .agent-attach-button.agent-thinking-toggle.active,
html[data-theme="dark"] .agent-attach-button.agent-thinking-toggle.active span {
  border-color: var(--primary);
  background: var(--primary);
  color: #071817;
}

html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] .admin-data-table,
html[data-theme="dark"] .settings-shop-summary,
html[data-theme="dark"] .settings-field,
html[data-theme="dark"] .local-component-row,
html[data-theme="dark"] .captcha-provider-row,
html[data-theme="dark"] .captcha-provider-editor,
html[data-theme="dark"] .task-center-retention-note,
html[data-theme="dark"] .task-center-purpose,
html[data-theme="dark"] .task-center-status-row,
html[data-theme="dark"] .task-center-filter-row {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--text);
}

html[data-theme="dark"] th,
html[data-theme="dark"] .table-head,
html[data-theme="dark"] .admin-data-table th {
  background: #222b2d;
}

html[data-theme="dark"] .settings-compact-section > header,
html[data-theme="dark"] .settings-section-icon,
html[data-theme="dark"] .settings-segmented,
html[data-theme="dark"] .settings-switch-row,
html[data-theme="dark"] .agent-workspace-card,
html[data-theme="dark"] .agent-thread-row,
html[data-theme="dark"] .agent-tool-panel,
html[data-theme="dark"] .agent-composer,
html[data-theme="dark"] .agent-chat-empty,
html[data-theme="dark"] .agent-message pre,
html[data-theme="dark"] .agent-message code {
  border-color: var(--line);
  background: #1d2426;
  color: var(--text);
}

html[data-theme="dark"] .settings-segmented button,
html[data-theme="dark"] .agent-view-tabs button,
html[data-theme="dark"] .agent-workspace-card button,
html[data-theme="dark"] .agent-thread-row button {
  color: var(--muted);
}

html[data-theme="dark"] .top-task-center-entry,
html[data-theme="dark"] .top-agent-entry,
html[data-theme="dark"] .account-pill {
  border-color: var(--line-strong);
  background: #20282a;
  color: var(--text);
}

html[data-theme="dark"] .top-task-center-entry.active,
html[data-theme="dark"] .top-task-center-entry.attention,
html[data-theme="dark"] .top-agent-entry.open {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dark);
}

html[data-theme="dark"] .task-center-modal-backdrop,
html[data-theme="dark"] .account-modal-backdrop,
html[data-theme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, .72);
}

html[data-theme="dark"] .app-notification,
html[data-theme="dark"] .mantine-Notification-root {
  border-color: var(--line-strong);
  background: #20282a;
  color: var(--text);
}

html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .settings-center-pill,
html[data-theme="dark"] .agent-activity-indicator {
  border-color: var(--line-strong);
  background: #20282a;
  color: var(--text);
}

html[data-theme="dark"] .status-pill.success,
html[data-theme="dark"] .settings-center-pill.ok {
  border-color: #357c76;
  background: #17302e;
  color: #8be5dd;
}

html[data-theme="dark"] .status-pill.warning,
html[data-theme="dark"] .settings-center-pill.warning {
  border-color: #896d37;
  background: #332a1a;
  color: #f4ca7f;
}

html[data-theme="dark"] .danger-button,
html[data-theme="dark"] .danger-lite,
html[data-theme="dark"] .danger-outline-btn {
  border-color: #8d4c4c;
  background: #3a2224;
  color: #ff9a9a;
}

html[data-theme="dark"] a {
  color: #82d9ee;
}

html[data-theme="dark"] hr {
  border-color: var(--line);
}

html[data-theme="dark"] .agent-workbench-main,
html[data-theme="dark"] .main {
  background: var(--bg);
}

.announcement-admin-editor .compact-announcement-grid {
  grid-template-columns: minmax(180px, 1fr) 140px 190px 190px;
  gap: 6px 8px;
}

.announcement-admin-editor .compact-announcement-grid .wide {
  grid-column: 1 / -1;
}

.announcement-admin-editor .announcement-table .compact-input.xxl,
.announcement-admin-editor .message-template-table .compact-input.xxl {
  width: 280px;
}

.announcement-admin-editor .announcement-table .compact-input.lg,
.announcement-admin-editor .message-template-table .compact-input.lg {
  width: 190px;
}

.task-center-admin-editor,
.cloud-billing-admin-editor {
  gap: 8px;
}

.cloud-billing-admin-editor .admin-table-block {
  gap: 6px;
}

.cloud-billing-admin-editor .admin-inline-settings {
  padding: 7px 9px;
}

.cloud-billing-admin-editor .admin-data-table th,
.cloud-billing-admin-editor .admin-data-table td {
  padding: 4px 5px;
  font-size: 11px;
}

.cloud-billing-admin-editor .compact-input {
  min-height: 27px;
  padding: 3px 5px;
  font-size: 11px;
}

.cloud-billing-admin-editor .billing-profit-negative {
  color: #b42318;
  font-weight: 900;
}

.cloud-billing-admin-editor .billing-profit-positive {
  color: #14745d;
  font-weight: 900;
}

.billing-rule-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 380px) 170px auto auto;
  align-items: end;
  justify-content: start;
  gap: 7px;
}

.billing-rule-toolbar label {
  display: grid;
  gap: 3px;
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 800;
}

.billing-rule-toolbar input,
.billing-rule-toolbar select {
  min-height: 28px;
}

.billing-rule-count {
  align-self: center;
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 800;
}

.billing-policy-help {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 16px;
  padding: 7px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
}

.billing-policy-help span {
  min-width: 0;
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.5;
}

.billing-policy-help b {
  color: var(--theme-text-strong);
}

.billing-batch-pricing {
  display: flex;
  align-items: end;
  justify-self: end;
  gap: 7px;
  white-space: nowrap;
}

.billing-batch-pricing label {
  min-width: 92px;
}

.billing-batch-pricing .admin-input-with-unit {
  width: 82px;
}

.billing-batch-pricing .compact-input {
  width: 58px;
}

.billing-rule-scroll,
.agent-cost-reference-scroll,
.plan-summary-scroll {
  overflow-x: hidden;
}

.billing-rule-table,
.agent-cost-reference-table,
.plan-summary-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.billing-rule-table th,
.billing-rule-table td,
.agent-cost-reference-table th,
.agent-cost-reference-table td,
.plan-summary-table th,
.plan-summary-table td {
  white-space: normal;
  overflow-wrap: anywhere;
}

.billing-rule-table .billing-col-enabled { width: 3%; }
.billing-rule-table .billing-col-name { width: 15%; }
.billing-rule-table .billing-col-mode { width: 12%; }
.billing-rule-table .billing-col-wallet { width: 8%; }
.billing-rule-table .billing-col-meter { width: 11%; }
.billing-rule-table .billing-col-cost { width: 20%; }
.billing-rule-table .billing-col-price { width: 9%; }
.billing-rule-table .billing-col-sale { width: 16%; }
.billing-rule-table .billing-col-refund { width: 3%; }
.billing-rule-table .billing-col-actions { width: 3%; }

/* 只调整费用表：短控件顶端对齐，把宽度留给真实通道费率和售价说明。 */
.billing-rule-scroll { overflow-x: auto; }
.billing-rule-table { min-width: 1440px; }
.billing-rule-table th,
.billing-rule-table td {
  vertical-align: top;
  padding: 8px 6px;
}
.billing-rule-table td.admin-row-actions { display: table-cell; }
html[data-theme] .cloud-billing-admin-editor .billing-rule-table input.compact-input[type="number"] { max-width: 100px; }
html[data-theme] .cloud-billing-admin-editor .billing-rule-table select.compact-input { max-width: 190px; }
.billing-rule-table label > span { white-space: nowrap; flex-shrink: 0; }
.billing-rule-table .billing-derived-value,
.billing-rule-table .table-secondary-text,
.billing-rule-table .billing-profit-positive small,
.billing-rule-table .billing-profit-negative small {
  font-size: 11px;
  line-height: 1.45;
}
.billing-rule-toolbar .billing-model-cost-status { grid-column: 1 / 3; }
.billing-rule-toolbar .billing-batch-pricing { grid-column: 3 / -1; justify-self: start; }
@media (max-width: 900px) {
  .billing-rule-toolbar { grid-template-columns: minmax(180px, 1fr) minmax(140px, 170px); }
  .billing-rule-toolbar .billing-model-cost-status,
  .billing-rule-toolbar .billing-batch-pricing { grid-column: 1 / -1; }
}

.billing-rule-name-cell {
  display: table-cell;
}

.billing-rule-name-cell .compact-input { display: block; margin-bottom: 3px; }

.billing-rule-table .compact-input,
.agent-cost-reference-table .compact-input,
.plan-summary-table .compact-input {
  width: 100%;
  min-width: 0;
}

.billing-derived-value,
.table-secondary-text,
.billing-profit-positive small,
.billing-profit-negative small {
  display: block;
  color: var(--theme-muted);
  font-size: 10px;
  line-height: 1.3;
}

.admin-input-with-unit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-input-with-unit em {
  color: var(--theme-muted);
  font-size: 11px;
  font-style: normal;
}

.agent-cost-reference-table th:nth-child(1) { width: 17%; }
.agent-cost-reference-table th:nth-child(2) { width: 17%; }
.agent-cost-reference-table th:nth-child(3),
.agent-cost-reference-table th:nth-child(4),
.agent-cost-reference-table th:nth-child(5) { width: 13%; }
.agent-cost-reference-table th:nth-child(6) { width: 18%; }
.agent-cost-reference-table th:nth-child(7) { width: 9%; }

.plan-frontend-editor {
  gap: 7px;
}

.plan-frontend-plan-switcher {
  display: grid;
  grid-template-columns: minmax(165px, 190px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
}

.plan-frontend-plan-switcher-head {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.plan-frontend-plan-switcher-head strong {
  color: var(--theme-text-strong);
  font-size: 12px;
}

.plan-frontend-plan-switcher-head span {
  color: var(--theme-muted);
  font-size: 11px;
}

.plan-frontend-plan-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(82px, 1fr));
  gap: 4px;
  min-width: 0;
}

.plan-frontend-plan-tabs button {
  min-width: 0;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.plan-frontend-plan-tabs button:hover {
  border-color: var(--primary);
  background: var(--theme-hover);
}

.plan-frontend-plan-tabs button.active {
  border-color: var(--primary);
  background: var(--theme-active);
  color: var(--primary-dark);
}

.plan-summary-table th:nth-child(1) { width: 4%; }
.plan-summary-table th:nth-child(2) { width: 16%; }
.plan-summary-table th:nth-child(3) { width: 31%; }
.plan-summary-table th:nth-child(4) { width: 12%; }
.plan-summary-table th:nth-child(5) { width: 17%; }
.plan-summary-table th:nth-child(6) { width: 7%; }
.plan-summary-table th:nth-child(7) { width: 6%; }
.plan-summary-table th:nth-child(8) { width: 7%; }

.plan-summary-source-editor,
.plan-summary-display-editor,
.plan-summary-current-value {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.plan-summary-source-editor > small,
.plan-summary-current-value small {
  color: var(--theme-muted);
  font-size: 10px;
  line-height: 1.3;
}

.plan-summary-capability-picker {
  min-width: 0;
}

.plan-summary-capability-picker > summary {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-surface);
  color: var(--theme-text);
  cursor: pointer;
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-summary-capability-picker[open] > summary {
  border-color: var(--primary);
  background: var(--theme-active);
}

.plan-summary-capability-panel {
  display: grid;
  gap: 7px;
  margin-top: 5px;
  padding: 8px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-surface-raised);
}

.plan-summary-capability-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 3px;
}

.plan-summary-capability-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3px 8px;
}

.plan-summary-capability-group > strong {
  grid-column: 1 / -1;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--theme-border);
  color: var(--theme-text-strong);
  font-size: 10px;
}

.plan-summary-capability-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 1px 5px;
  align-items: center;
  min-width: 0;
  padding: 3px 2px;
}

.plan-summary-capability-option input {
  grid-row: 1 / 3;
  margin: 0;
}

.plan-summary-capability-option label {
  min-width: 0;
  overflow: hidden;
  color: var(--theme-text);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.plan-summary-capability-option code {
  min-width: 0;
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-summary-current-value {
  padding: 5px 7px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-surface-raised);
}

.plan-summary-current-value strong {
  color: var(--theme-text-strong);
  font-size: 12px;
}

.plan-summary-current-value.conflict,
.plan-summary-current-value.missing,
.plan-summary-row-warning td {
  background-color: var(--theme-warning);
}

.plan-summary-current-value.conflict,
.plan-summary-current-value.missing {
  border-color: var(--theme-warning-border);
}

.plan-summary-current-value.conflict strong,
.plan-summary-current-value.missing strong {
  color: var(--theme-warning-text);
}

.plan-summary-follow-control {
  display: inline-grid;
  grid-template-columns: 15px auto;
  gap: 4px;
  align-items: center;
  justify-content: start;
  color: var(--theme-muted);
  font-size: 10px;
  line-height: 1.2;
}

.plan-summary-follow-control input {
  margin: 0;
}

.plan-summary-follow-control label {
  cursor: pointer;
}

.plan-summary-display-editor input[readonly] {
  border-style: dashed;
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
}

.plan-summary-source-empty {
  color: var(--theme-muted);
  font-size: 10px;
}

.plan-capability-bulk-display {
  display: grid;
  gap: 4px;
  align-content: end;
}

.plan-capability-bulk-display > span {
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 800;
}

.plan-capability-bulk-display > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.plan-entitlement-table td:nth-child(5),
.plan-entitlement-table th:nth-child(5) {
  text-align: center;
}

.cloud-video-billing-settings label {
  flex: 0 1 auto;
}

.billing-step-summary {
  padding: 6px 9px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  font-size: 12px;
  line-height: 1.45;
}

.task-center-purpose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  padding: 8px 10px;
  border: 1px solid #d8e7ed;
  border-radius: 7px;
  background: #f8fbfc;
}

.task-center-purpose > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.task-center-purpose > div + div {
  padding-left: 14px;
  border-left: 1px solid #d8e7ed;
}

.task-center-purpose b,
.task-center-section-head h3 {
  color: #203c45;
  font-size: 13px;
}

.task-center-purpose span,
.task-center-section-head p {
  margin: 0;
  color: #526e78;
  font-size: 12px;
  line-height: 1.45;
}

.task-center-billing-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--theme-success-border);
  border-radius: 7px;
  background: var(--theme-success);
}

.task-center-check-control {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: #23444d;
  font-size: 12px;
  font-weight: 800;
}

.task-center-check-control input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.task-center-check-control label {
  cursor: pointer;
}

.task-center-billing-switch small {
  color: var(--theme-muted);
  font-size: 12px;
}

.task-center-compact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 14px;
  min-width: 0;
}

.task-center-config-section {
  min-width: 0;
}

.task-center-config-section + .task-center-config-section {
  padding-left: 14px;
  border-left: 1px solid #d8e7ed;
}

.task-center-section-head {
  padding-bottom: 6px;
  border-bottom: 1px solid #d8e7ed;
}

.task-center-section-head h3 {
  margin: 0 0 2px;
}

.task-center-status-list,
.task-center-filter-list {
  display: grid;
}

.task-center-status-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}

.task-center-status-row,
.task-center-filter-row {
  display: grid;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
  border-bottom: 1px solid #edf2f5;
}

.task-center-status-row {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 3px 7px;
}

.task-center-filter-row {
  grid-template-columns: 132px auto minmax(0, 1fr);
}

.task-center-status-row code {
  width: max-content;
  align-self: center;
  color: #36535e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
}

.task-center-status-row small,
.task-center-filter-row > small {
  color: #647d86;
  font-size: 11px;
  line-height: 1.35;
}

.task-center-status-row small {
  grid-column: 1 / -1;
}

.task-center-filter-row > label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #526e78;
  font-size: 11px;
  font-weight: 800;
}

.task-center-status-row input,
.task-center-filter-row input {
  width: 100%;
  min-height: 29px;
  padding: 4px 7px;
}

@media (max-width: 760px) {
  .task-center-purpose,
  .task-center-status-list {
    grid-template-columns: 1fr;
  }

  .task-center-purpose > div + div {
    padding-top: 7px;
    padding-left: 0;
    border-top: 1px solid #d8e7ed;
    border-left: 0;
  }

  .task-center-filter-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .task-center-filter-row > small {
    grid-column: 1 / -1;
  }
}

.task-center-retention-note {
  padding: 7px 10px;
  border: 1px solid #d8e7ed;
  border-radius: 7px;
  background: #fbfdfe;
}

.task-center-retention-note summary {
  color: #36535e;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.task-center-retention-note > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 7px;
  color: #526e78;
  font-size: 12px;
}

.task-center-retention-note b {
  color: #203c45;
}

.task-center-retention-note p {
  margin: 5px 0 0;
  color: #647d86;
  font-size: 12px;
  line-height: 1.45;
}

.cloud-billing-policy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 16px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #d8e7ed;
  border-radius: 7px;
  background: #f8fbfc;
}

.cloud-billing-admin-editor .admin-list-preview {
  align-content: start;
  max-height: 520px;
  gap: 0;
  padding: 8px;
  overflow: auto;
}

.cloud-billing-admin-editor .admin-second-row.cloud-billing {
  grid-template-columns: minmax(150px, 1fr) minmax(76px, 0.5fr) 72px 72px 76px 48px minmax(120px, 0.7fr);
  gap: 6px;
  min-width: 650px;
  padding: 5px 0;
}

.cloud-billing-admin-editor .cloud-billing-header {
  position: sticky;
  top: 0;
  z-index: 2;
  border-top: 0;
  background: #eef7f8;
  color: #45626c;
  font-size: 11px;
  font-weight: 900;
}

.cloud-billing-admin-editor .admin-second-row input,
.cloud-billing-admin-editor .admin-second-row select {
  min-height: 28px;
  padding: 4px 6px;
}

.cloud-billing-admin-editor .admin-second-row label,
.cloud-billing-admin-editor .admin-second-row small {
  min-width: 0;
  font-size: 11px;
}

@media (max-width: 1180px) {
  .task-center-compact-grid {
    grid-template-columns: 1fr;
  }

  .task-center-config-section + .task-center-config-section {
    padding-top: 10px;
    padding-left: 0;
    border-top: 1px solid #d8e7ed;
    border-left: 0;
  }

  .announcement-admin-editor .compact-announcement-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 760px) {
  .task-center-purpose {
    grid-template-columns: 1fr;
  }

  .task-center-purpose > div + div {
    padding-top: 8px;
    padding-left: 0;
    border-top: 1px solid #d8e7ed;
    border-left: 0;
  }

  .task-center-filter-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .task-center-filter-row > small {
    grid-column: 1 / -1;
  }

  .announcement-admin-editor .compact-announcement-grid {
    grid-template-columns: 1fr;
  }

  .announcement-admin-editor .compact-announcement-grid .wide {
    grid-column: 1;
  }
}

/* 2026-07-14：深色主题最终覆盖层。
 * 仅在 data-theme="dark" 下生效，放在文件末尾以覆盖后续业务页的浅色硬编码。
 * 色彩只保留品牌青色、蓝色和语义状态色，避免深色界面出现刺眼的纯白大块。
 */
html[data-theme="dark"] {
  color-scheme: dark;
  --dark-header: #123b3b;
  --dark-sidebar: #161d1f;
  --dark-surface-raised: #20292b;
  --dark-surface-elevated: #273234;
  --dark-surface-inset: #13191b;
  --dark-line-subtle: #283437;
  --dark-text-strong: #f4fbfa;
  --dark-focus: rgba(32, 184, 177, .34);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #root,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .main,
html[data-theme="dark"] .agent-workbench-page {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .app-header {
  background: var(--dark-header);
  border-bottom-color: #28615d;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .header-brand,
html[data-theme="dark"] .app-header .brand-name,
html[data-theme="dark"] .app-header .brand-sub,
html[data-theme="dark"] .app-header h1,
html[data-theme="dark"] .app-header h2,
html[data-theme="dark"] .app-header h3 {
  color: var(--dark-text-strong);
}

html[data-theme="dark"] .app-header .brand-sub {
  color: rgba(244, 251, 250, .74);
}

html[data-theme="dark"] .app-header .text-button {
  border-color: transparent;
  background: transparent;
  color: var(--dark-text-strong);
}

html[data-theme="dark"] .sidebar {
  background: var(--dark-sidebar);
  border-right-color: var(--line);
  color: var(--text);
}

html[data-theme="dark"] .sidebar button:not(.primary-button),
html[data-theme="dark"] .sidebar .menu-section,
html[data-theme="dark"] .sidebar .menu-section-button,
html[data-theme="dark"] .sidebar .submenu-item {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

html[data-theme="dark"] .sidebar button:not(.primary-button):hover,
html[data-theme="dark"] .sidebar button:not(.primary-button):focus-visible,
html[data-theme="dark"] .sidebar .submenu-item.selected,
html[data-theme="dark"] .sidebar .submenu-item.active,
html[data-theme="dark"] .sidebar .menu-section.has-active {
  border-color: var(--line);
  background: var(--dark-surface-raised);
  color: var(--dark-text-strong);
}

html[data-theme="dark"] .sidebar-edge-toggle {
  border-color: var(--line-strong);
  background: var(--dark-surface-raised);
  color: var(--primary-dark);
  box-shadow: none;
}

html[data-theme="dark"] .sidebar-edge-toggle:hover {
  border-color: var(--primary);
  background: var(--dark-surface-elevated);
  color: var(--dark-text-strong);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] .template-strip,
html[data-theme="dark"] .action-hub,
html[data-theme="dark"] .module-page,
html[data-theme="dark"] .settings-compact-board,
html[data-theme="dark"] .settings-center-board,
html[data-theme="dark"] .settings-center-section,
html[data-theme="dark"] .settings-compact-section,
html[data-theme="dark"] .admin-diff-box,
html[data-theme="dark"] .admin-backup-list,
html[data-theme="dark"] .admin-audit-mini,
html[data-theme="dark"] .admin-visual-editor,
html[data-theme="dark"] .admin-doc-manager {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .panel-title-row,
html[data-theme="dark"] .page-heading,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .section-title-row {
  color: var(--text);
  border-color: var(--line);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] th,
html[data-theme="dark"] label,
html[data-theme="dark"] dt {
  color: var(--dark-text-strong);
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .muted-text,
html[data-theme="dark"] .field-note,
html[data-theme="dark"] .admin-muted,
html[data-theme="dark"] .settings-inline-note,
html[data-theme="dark"] .settings-compact-section header p,
html[data-theme="dark"] .panel-title p {
  color: var(--muted);
}

html[data-theme="dark"] a {
  color: #82d9ee;
}

html[data-theme="dark"] button,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  font-family: inherit;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .plain-input,
html[data-theme="dark"] .plain-select,
html[data-theme="dark"] .compact-input,
html[data-theme="dark"] .path-input input,
html[data-theme="dark"] .unit-input,
html[data-theme="dark"] .tag-input {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  border-color: var(--line-strong);
  background: var(--dark-surface-inset);
  color: var(--dark-text-strong);
  caret-color: var(--primary);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #91a2a5;
  opacity: 1;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .plain-input:focus,
html[data-theme="dark"] .plain-select:focus,
html[data-theme="dark"] .compact-input:focus {
  border-color: var(--primary);
  outline: 0;
  box-shadow: 0 0 0 2px var(--dark-focus);
}

html[data-theme="dark"] .local-submit-mode-field .local-submit-mode-select {
  border-color: var(--line-strong);
  background: var(--dark-surface-inset);
  color: var(--dark-text-strong);
}

html[data-theme="dark"] .local-submit-mode-field .local-submit-mode-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--dark-focus);
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  accent-color: var(--primary);
}

html[data-theme="dark"] button:disabled,
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] select:disabled {
  opacity: .48;
  cursor: not-allowed;
}

html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .plain-button,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .mini-button,
html[data-theme="dark"] .income-button,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .text-button,
html[data-theme="dark"] .agent-top-icon,
html[data-theme="dark"] .agent-side-tools button,
html[data-theme="dark"] .agent-workspace-head button,
html[data-theme="dark"] .agent-tool-panel header button,
html[data-theme="dark"] .workbench-hero-actions button,
html[data-theme="dark"] .workbench-section-title > button,
html[data-theme="dark"] .workbench-entry-action,
html[data-theme="dark"] .workbench-mini-panel button {
  border-color: var(--line-strong);
  background: var(--dark-surface-raised);
  color: var(--text);
  box-shadow: none;
}

html[data-theme="dark"] .ghost-button:hover,
html[data-theme="dark"] .plain-button:hover,
html[data-theme="dark"] .secondary-button:hover,
html[data-theme="dark"] .mini-button:hover,
html[data-theme="dark"] .income-button:hover,
html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .agent-top-icon:hover,
html[data-theme="dark"] .agent-side-tools button:hover,
html[data-theme="dark"] .agent-workspace-head button:hover,
html[data-theme="dark"] .agent-tool-panel header button:hover,
html[data-theme="dark"] .workbench-section-title > button:hover,
html[data-theme="dark"] .workbench-entry-action:hover,
html[data-theme="dark"] .workbench-mini-panel button:hover {
  border-color: var(--primary);
  background: var(--dark-surface-elevated);
  color: var(--primary-dark);
}

html[data-theme="dark"] .primary-button,
html[data-theme="dark"] .agent-workbench-task-fab,
html[data-theme="dark"] .workbench-agent-input button {
  border-color: var(--primary);
  background: var(--primary);
  color: #071817;
}

html[data-theme="dark"] .primary-button:hover,
html[data-theme="dark"] .agent-workbench-task-fab:hover,
html[data-theme="dark"] .workbench-agent-input button:hover {
  background: #48d0c8;
  color: #061514;
}

html[data-theme="dark"] .segmented,
html[data-theme="dark"] .settings-segmented,
html[data-theme="dark"] .tabs {
  border-color: var(--line);
  background: var(--dark-surface-inset);
}

html[data-theme="dark"] .segmented button,
html[data-theme="dark"] .settings-segmented button,
html[data-theme="dark"] .tab {
  color: var(--muted);
  background: transparent;
}

html[data-theme="dark"] .segmented button.active,
html[data-theme="dark"] .settings-segmented button.active,
html[data-theme="dark"] .tab.active {
  border-color: var(--primary);
  background: var(--dark-surface-raised);
  color: var(--primary-dark);
  box-shadow: none;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .admin-table-block,
html[data-theme="dark"] .admin-table-scroll,
html[data-theme="dark"] .category-template-table-wrap,
html[data-theme="dark"] .data-retention-table-wrap,
html[data-theme="dark"] .entitlement-table-wrap,
html[data-theme="dark"] .layout-registry-table-wrap {
  background: var(--surface);
  color: var(--text);
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td,
html[data-theme="dark"] .admin-data-table th,
html[data-theme="dark"] .admin-data-table td,
html[data-theme="dark"] .task-table th,
html[data-theme="dark"] .task-table td,
html[data-theme="dark"] .category-template-table th,
html[data-theme="dark"] .category-template-table td,
html[data-theme="dark"] .data-retention-table th,
html[data-theme="dark"] .data-retention-table td {
  border-color: var(--line);
}

html[data-theme="dark"] th,
html[data-theme="dark"] .table-head,
html[data-theme="dark"] .admin-data-table th {
  background: var(--dark-surface-elevated);
  color: var(--dark-text-strong);
}

html[data-theme="dark"] td,
html[data-theme="dark"] .admin-data-table td,
html[data-theme="dark"] .task-table td,
html[data-theme="dark"] .category-template-table td,
html[data-theme="dark"] .data-retention-table td {
  background: var(--surface);
  color: var(--text);
}

html[data-theme="dark"] tbody tr:hover td,
html[data-theme="dark"] .admin-data-table tbody tr:hover td,
html[data-theme="dark"] .task-table tbody tr:hover td {
  background: var(--dark-surface-raised);
}

html[data-theme="dark"] code,
html[data-theme="dark"] pre,
html[data-theme="dark"] .copy-line code,
html[data-theme="dark"] .report-path-grid code {
  border-color: var(--line);
  background: var(--dark-surface-inset);
  color: #b5e7e2;
  overflow-wrap: anywhere;
}

html[data-theme="dark"] .modal,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .dialog-card,
html[data-theme="dark"] .task-center-modal-shell,
html[data-theme="dark"] .account-popover,
html[data-theme="dark"] .category-modal,
html[data-theme="dark"] .attribute-drawer,
html[data-theme="dark"] .category-drawer,
html[data-theme="dark"] .single-media-modal-card,
html[data-theme="dark"] .ai-video-preview-modal-card,
html[data-theme="dark"] .agent-skill-popover,
html[data-theme="dark"] .agent-permission-popover,
html[data-theme="dark"] .admin-binding-drawer,
html[data-theme="dark"] .mantine-Modal-content,
html[data-theme="dark"] .mantine-Drawer-content,
html[data-theme="dark"] .mantine-Popover-dropdown,
html[data-theme="dark"] .mantine-Menu-dropdown {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .38);
}

html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .modal-mask,
html[data-theme="dark"] .category-modal-mask,
html[data-theme="dark"] .attribute-drawer-mask,
html[data-theme="dark"] .task-center-modal-backdrop,
html[data-theme="dark"] .account-modal-backdrop {
  background: rgba(0, 0, 0, .74);
}

html[data-theme="dark"] .app-notification,
html[data-theme="dark"] .mantine-Notification-root,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .toast-container {
  border-color: var(--line-strong);
  background: var(--dark-surface-raised);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .app-notification [data-with-title],
html[data-theme="dark"] .app-notification p,
html[data-theme="dark"] .toast p {
  color: var(--text);
}

/* AgentWorkbench：侧栏、工作区、消息区和右侧工具面板统一使用深色层级。 */
html[data-theme="dark"] .agent-workbench-rail,
html[data-theme="dark"] .agent-side-tools,
html[data-theme="dark"] .agent-workspace-sidebar,
html[data-theme="dark"] .agent-tool-panel,
html[data-theme="dark"] .agent-assistant-drawer,
html[data-theme="dark"] .agent-workbench-main,
html[data-theme="dark"] .agent-workbench-topbar,
html[data-theme="dark"] .agent-assistant-page-panel,
html[data-theme="dark"] .agent-chat-panel,
html[data-theme="dark"] .agent-side-panel {
  border-color: var(--line);
  background: var(--dark-sidebar);
  color: var(--text);
}

html[data-theme="dark"] .agent-workbench-topbar {
  background: rgba(22, 29, 31, .96);
}

html[data-theme="dark"] .agent-workspace-card,
html[data-theme="dark"] .agent-thread-row,
html[data-theme="dark"] .agent-workspace-menu,
html[data-theme="dark"] .agent-browser-viewport,
html[data-theme="dark"] .agent-settings-dir-list span,
html[data-theme="dark"] .agent-settings-rule-list div,
html[data-theme="dark"] .agent-policy-list div,
html[data-theme="dark"] .agent-composer,
html[data-theme="dark"] .agent-chat-empty,
html[data-theme="dark"] .agent-message pre,
html[data-theme="dark"] .agent-message code {
  border-color: var(--line);
  background: var(--dark-surface-raised);
  color: var(--text);
}

html[data-theme="dark"] .agent-workspace-card:hover,
html[data-theme="dark"] .agent-workspace-toggle:hover,
html[data-theme="dark"] .agent-workspace-row-actions > button:hover,
html[data-theme="dark"] .agent-thread-rename:hover,
html[data-theme="dark"] .agent-thread-archive:hover,
html[data-theme="dark"] .agent-workspace-menu button:hover {
  border-color: var(--line-strong);
  background: var(--dark-surface-elevated);
  color: var(--primary-dark);
}

html[data-theme="dark"] .agent-workspace-card.active,
html[data-theme="dark"] .agent-thread-item.active {
  border-color: #357c76;
  background: #17302e;
}

html[data-theme="dark"] .agent-workspace-item,
html[data-theme="dark"] .agent-thread-button,
html[data-theme="dark"] .agent-workspace-menu button,
html[data-theme="dark"] .agent-workspace-row-actions > button,
html[data-theme="dark"] .agent-thread-rename,
html[data-theme="dark"] .agent-thread-archive {
  color: var(--muted);
}

html[data-theme="dark"] .agent-workspace-item strong,
html[data-theme="dark"] .agent-workbench-title strong,
html[data-theme="dark"] .agent-tool-panel header strong,
html[data-theme="dark"] .agent-message-body {
  color: var(--dark-text-strong);
}

html[data-theme="dark"] .agent-workspace-item span,
html[data-theme="dark"] .agent-workbench-title span,
html[data-theme="dark"] .agent-tool-panel-body p,
html[data-theme="dark"] .agent-message-meta,
html[data-theme="dark"] .agent-settings-rule-list span,
html[data-theme="dark"] .agent-policy-list span {
  color: var(--muted);
}

html[data-theme="dark"] .agent-assistant-page-panel .agent-message-list {
  background: linear-gradient(180deg, #111719 0%, #151e20 100%);
}

html[data-theme="dark"] .agent-assistant-page-panel .agent-compose,
html[data-theme="dark"] .agent-assistant-drawer > .agent-compose {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] .agent-assistant-page-panel .agent-compose textarea,
html[data-theme="dark"] .agent-assistant-drawer .agent-compose textarea {
  background: transparent;
  color: var(--text);
}

html[data-theme="dark"] .agent-tool-panel header,
html[data-theme="dark"] .agent-workbench-topbar,
html[data-theme="dark"] .agent-workspace-head {
  border-color: var(--line);
}

html[data-theme="dark"] .agent-tool-panel header span,
html[data-theme="dark"] .agent-assistant-mark {
  background: #17302e;
  color: var(--primary-dark);
}

html[data-theme="dark"] .agent-tool-panel-resizer::after {
  background: #526467;
}

html[data-theme="dark"] .agent-message.user .agent-message-body {
  background: #17302e;
  border-color: #357c76;
}

html[data-theme="dark"] .agent-message:not(.user):not(.thinking) .agent-message-body {
  background: var(--dark-surface-raised);
  border-color: var(--line-strong);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .agent-message.thinking .agent-message-body {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  box-shadow: none;
}

/* 首页工作台的亮色卡片在 dark 下改为同一组信息层级，保留彩色状态提示。 */
html[data-theme="dark"] .workbench-task-board,
html[data-theme="dark"] .workbench-agent-panel,
html[data-theme="dark"] .workbench-quick-panel,
html[data-theme="dark"] .workbench-mini-panel,
html[data-theme="dark"] .workbench-story {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

html[data-theme="dark"] .workbench-hero {
  background:
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, .12), transparent 28%),
    linear-gradient(135deg, #0b4a49 0%, #087f7a 58%, #218f86 100%);
}

html[data-theme="dark"] .workbench-task-card,
html[data-theme="dark"] .workbench-entry-card,
html[data-theme="dark"] .workbench-story-card,
html[data-theme="dark"] .workbench-hero-board div {
  border-color: var(--line);
  background: var(--dark-surface-raised);
  color: var(--text);
}

html[data-theme="dark"] .workbench-task-card.tone-run,
html[data-theme="dark"] .workbench-story-card.tone-cyan {
  border-color: #357c76;
  background: #17302e;
}

html[data-theme="dark"] .workbench-task-card.tone-warn,
html[data-theme="dark"] .workbench-story-card.tone-amber {
  border-color: #896d37;
  background: #332a1a;
}

html[data-theme="dark"] .workbench-task-card.tone-danger,
html[data-theme="dark"] .workbench-story-card.tone-rose {
  border-color: #8d4c4c;
  background: #3a2224;
}

html[data-theme="dark"] .workbench-story-card.tone-blue {
  border-color: #416a9b;
  background: #1b2a3a;
}

html[data-theme="dark"] .workbench-story-card.tone-violet {
  border-color: #63538e;
  background: #29243a;
}

html[data-theme="dark"] .workbench-task-card span,
html[data-theme="dark"] .workbench-task-card small,
html[data-theme="dark"] .workbench-section-title p,
html[data-theme="dark"] .workbench-agent-panel p,
html[data-theme="dark"] .workbench-entry-copy small,
html[data-theme="dark"] .workbench-mini-panel p,
html[data-theme="dark"] .workbench-story-head p,
html[data-theme="dark"] .workbench-story-card p {
  color: var(--muted);
}

html[data-theme="dark"] .workbench-agent-panel,
html[data-theme="dark"] .workbench-story-head {
  border-color: #357c76;
  background: #17302e;
}

html[data-theme="dark"] .workbench-story.tone-violet .workbench-story-head {
  border-color: #63538e;
  background: #29243a;
}

html[data-theme="dark"] .workbench-hero-board {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(5, 25, 26, .32);
}

html[data-theme="dark"] .workbench-hero-board span,
html[data-theme="dark"] .workbench-hero-board strong,
html[data-theme="dark"] .workbench-story-card h3,
html[data-theme="dark"] .workbench-section-title h2,
html[data-theme="dark"] .workbench-mini-panel h2 {
  color: var(--dark-text-strong);
}

/* 设置中心及其子页面：路径、短数字、分段选项和状态条都保持可读且可收缩。 */
html[data-theme="dark"] .settings-center-page,
html[data-theme="dark"] .settings-file-paths-page,
html[data-theme="dark"] .settings-task-notice-page,
html[data-theme="dark"] .settings-general-page,
html[data-theme="dark"] .settings-ai-preferences-page,
html[data-theme="dark"] .settings-agent-page,
html[data-theme="dark"] .settings-captcha-page,
html[data-theme="dark"] .settings-cloud-page,
html[data-theme="dark"] .settings-center-shop-row,
html[data-theme="dark"] .settings-center-cloud-grid > div,
html[data-theme="dark"] .settings-shop-summary,
html[data-theme="dark"] .local-component-row,
html[data-theme="dark"] .captcha-provider-row,
html[data-theme="dark"] .captcha-provider-editor,
html[data-theme="dark"] .settings-inline-note,
html[data-theme="dark"] .settings-empty-line {
  border-color: var(--line);
  background: var(--dark-surface-raised);
  color: var(--text);
}

html[data-theme="dark"] .settings-section-icon {
  border-color: #357c76;
  background: #17302e;
  color: var(--primary-dark);
}

html[data-theme="dark"] .settings-field > span,
html[data-theme="dark"] .settings-shop-summary small,
html[data-theme="dark"] .settings-number b,
html[data-theme="dark"] .settings-switch-row small,
html[data-theme="dark"] .captcha-provider-row small {
  color: var(--muted);
}

html[data-theme="dark"] .settings-switch span {
  background: #edf7f6;
}

html[data-theme="dark"] .settings-switch {
  background: #526467;
}

html[data-theme="dark"] .settings-switch.on {
  background: var(--primary);
}

html[data-theme="dark"] .settings-center-pill.ok,
html[data-theme="dark"] .status-pill.success {
  border-color: #357c76;
  background: #17302e;
  color: #8be5dd;
}

html[data-theme="dark"] .settings-center-pill.warning,
html[data-theme="dark"] .status-pill.warning {
  border-color: #896d37;
  background: #332a1a;
  color: #f4ca7f;
}

html[data-theme="dark"] .danger-button,
html[data-theme="dark"] .danger-lite,
html[data-theme="dark"] .danger-outline-btn,
html[data-theme="dark"] .danger-light-button,
html[data-theme="dark"] .danger-light {
  border-color: #8d4c4c;
  background: #3a2224;
  color: #ff9a9a;
}

html[data-theme="dark"] .danger-button:hover,
html[data-theme="dark"] .danger-lite:hover,
html[data-theme="dark"] .danger-outline-btn:hover,
html[data-theme="dark"] .danger-light-button:hover,
html[data-theme="dark"] .danger-light:hover {
  border-color: #c46b6b;
  background: #4a292c;
  color: #ffc0c0;
}

html[data-theme="dark"] .settings-field,
html[data-theme="dark"] .settings-shop-summary,
html[data-theme="dark"] .local-component-row,
html[data-theme="dark"] .captcha-provider-row,
html[data-theme="dark"] .settings-center-shop-row,
html[data-theme="dark"] .settings-center-cloud-grid > div,
html[data-theme="dark"] .settings-field-grid,
html[data-theme="dark"] .settings-shop-grid,
html[data-theme="dark"] .captcha-routing-grid,
html[data-theme="dark"] .admin-editor-grid,
html[data-theme="dark"] .admin-message-template-row {
  min-width: 0;
}

html[data-theme="dark"] .settings-field input,
html[data-theme="dark"] .settings-field select,
html[data-theme="dark"] .settings-number input,
html[data-theme="dark"] .settings-center-width-control input,
html[data-theme="dark"] .captcha-routing-grid select,
html[data-theme="dark"] .admin-editor-grid input,
html[data-theme="dark"] .admin-editor-grid select,
html[data-theme="dark"] .admin-editor-grid textarea {
  max-width: 100%;
}

/* 长路径和表格在窄列中优先换行，短数字控件不被主题覆盖成整行宽度。 */
html[data-theme="dark"] .path-input,
html[data-theme="dark"] .path-input input,
html[data-theme="dark"] .settings-field.path,
html[data-theme="dark"] .admin-path-control,
html[data-theme="dark"] .admin-path-control input {
  min-width: 0;
  max-width: 100%;
}

html[data-theme="dark"] .path-input input,
html[data-theme="dark"] .settings-shop-summary strong,
html[data-theme="dark"] .settings-shop-summary small,
html[data-theme="dark"] .admin-path-control input,
html[data-theme="dark"] .agent-workspace-item strong,
html[data-theme="dark"] .agent-workspace-item span,
html[data-theme="dark"] .workbench-entry-copy,
html[data-theme="dark"] .workbench-story-card,
html[data-theme="dark"] .workbench-task-card {
  overflow-wrap: anywhere;
}

html[data-theme="dark"] .settings-field.short input,
html[data-theme="dark"] .settings-number input,
html[data-theme="dark"] input.compact-number,
html[data-theme="dark"] input.number,
html[data-theme="dark"] .compact-number {
  width: auto;
  max-width: 10rem;
}

html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .main,
html[data-theme="dark"] .page-grid,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .agent-workbench-page,
html[data-theme="dark"] .agent-workbench-main,
html[data-theme="dark"] .agent-workspace-sidebar,
html[data-theme="dark"] .agent-tool-panel,
html[data-theme="dark"] .workbench-main-grid,
html[data-theme="dark"] .workbench-top-grid {
  min-width: 0;
}

@media (max-width: 760px) {
  html[data-theme="dark"] .app-header {
    gap: 8px;
  }

  html[data-theme="dark"] .header-brand {
    min-width: 0;
    flex-basis: min(var(--header-brand-width), 54vw);
    padding-right: 8px;
  }

  html[data-theme="dark"] .brand-name,
  html[data-theme="dark"] .brand-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-theme="dark"] .main {
    padding-right: 12px;
    padding-left: 12px;
  }

  html[data-theme="dark"] .workbench-hero,
  html[data-theme="dark"] .workbench-hero-board,
  html[data-theme="dark"] .workbench-agent-input {
    grid-template-columns: 1fr;
  }
}

/* 深浅色共用同一组 --theme-* 颜色名；两套实际颜色统一维护在文件顶部。 */

/* 左侧导航：浅色版用内阴影画边框，深色时必须同时清掉 box-shadow。 */
html[data-theme="dark"] .sidebar :is(
  .menu-section,
  .menu-section-button,
  .menu-section-standalone,
  .menu-item,
  .submenu-item
) {
  border-color: transparent;
  background: transparent;
  color: var(--theme-muted);
  box-shadow: none;
}

html[data-theme="dark"] .sidebar :is(
  .menu-section,
  .menu-section-button,
  .menu-section-standalone,
  .menu-item,
  .submenu-item
):hover,
html[data-theme="dark"] .sidebar :is(
  .menu-section-button.has-active,
  .menu-section-standalone.active,
  .menu-item.active,
  .submenu-item.active,
  .submenu-item.selected
) {
  background: var(--theme-hover);
  color: var(--theme-text-strong);
  box-shadow: inset 0 0 0 1px var(--theme-border);
}

html[data-theme="dark"] .sidebar :is(
  .menu-section-button.has-active,
  .menu-section-standalone.active,
  .menu-item.active,
  .submenu-item.active,
  .submenu-item.selected
) {
  background: var(--theme-active);
  box-shadow: inset 0 0 0 1px #37615e;
}

html[data-theme="dark"] .sidebar .menu-group > div:not(.submenu),
html[data-theme="dark"] .sidebar .submenu {
  border-left-color: var(--theme-border);
}

html[data-theme="dark"] .sidebar .menu-section-arrow,
html[data-theme="dark"] .sidebar .menu-item::before,
html[data-theme="dark"] .sidebar .submenu-item::before {
  color: #839497;
  background-color: #718386;
}

html[data-theme="dark"] .sidebar :is(.menu-item.active, .submenu-item.active, .submenu-item.selected)::before {
  background-color: var(--primary);
}

html[data-theme="dark"] .sidebar .menu-badge {
  background: #233234;
  color: #b8cbc9;
  box-shadow: inset 0 0 0 1px var(--theme-border);
}

html[data-theme="dark"] .sidebar .menu-badge-hot {
  background: var(--theme-warning);
  color: #f0c273;
  box-shadow: inset 0 0 0 1px #5d4b2d;
}

html[data-theme="dark"] .sidebar .menu-badge-new {
  background: #1b2b3e;
  color: #8fc0f8;
  box-shadow: inset 0 0 0 1px #36506d;
}

/* 云店Agent抽屉：顶部、工作空间和目标状态必须与消息区使用同一深色层级。 */
html[data-theme="dark"] .agent-assistant-drawer :is(
  .agent-assistant-header,
  .agent-assistant-context,
  .agent-workspace-switcher,
  .agent-quick-prompts
) {
  border-color: var(--theme-border);
  background: var(--theme-sidebar);
  color: var(--theme-text);
}

html[data-theme="dark"] .agent-assistant-drawer :is(
  .agent-icon-button,
  .agent-assistant-context button,
  .agent-assistant-context span,
  .agent-workspace-shortcuts button,
  .agent-workspace-select,
  .agent-quick-prompts button,
  .agent-goal-strip-actions button
) {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="dark"] .agent-assistant-drawer :is(
  .agent-icon-button,
  .agent-assistant-context button,
  .agent-workspace-shortcuts button,
  .agent-quick-prompts button,
  .agent-goal-strip-actions button
):hover,
html[data-theme="dark"] .agent-assistant-drawer .agent-workspace-shortcuts button.active {
  border-color: var(--primary);
  background: var(--theme-surface-elevated);
  color: var(--primary-dark);
}

html[data-theme="dark"] .agent-assistant-drawer .agent-workspace-select select {
  color: var(--theme-text-strong);
}

html[data-theme="dark"] .agent-assistant-drawer .agent-goal-strip {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}

html[data-theme="dark"] .agent-assistant-drawer .agent-goal-strip.running {
  border-color: #37615e;
  background: var(--theme-active);
}

html[data-theme="dark"] .agent-assistant-drawer .agent-goal-strip.waiting {
  border-color: #5d4b2d;
  background: var(--theme-warning);
}

html[data-theme="dark"] .agent-assistant-drawer .agent-goal-strip :is(span, strong) {
  color: var(--theme-text);
}

html[data-theme="dark"] .agent-assistant-drawer .agent-goal-strip em {
  background: #20423f;
  color: #8be3dc;
}

html[data-theme="dark"] .agent-assistant-resizer::after {
  background: var(--theme-border-strong);
}

/* 文档中心：导航、检索结果、分类和阅读器都属于工具界面，不保留纸张白底。 */
html[data-theme="dark"] .doc-center-page :is(
  .doc-home-section,
  .doc-search-results,
  .doc-center-nav,
  .doc-reader
) {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="dark"] .doc-center-page :is(
  .doc-quick-grid button,
  .doc-topic-grid button,
  .doc-recommend-list button,
  .doc-result-grid button,
  .doc-reader-meta span,
  .doc-code-block
) {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="dark"] .doc-center-page .doc-quick-grid button:first-child {
  border-color: #37615e;
  background: var(--theme-active);
}

html[data-theme="dark"] .doc-center-page :is(
  .doc-quick-grid button,
  .doc-topic-grid button,
  .doc-recommend-list button,
  .doc-result-grid button,
  .doc-tree-group button
):hover,
html[data-theme="dark"] .doc-center-page .doc-tree-group button.active {
  border-color: var(--primary);
  background: var(--theme-hover);
  color: var(--primary-dark);
  box-shadow: none;
  transform: none;
}

html[data-theme="dark"] .doc-center-page :is(
  .doc-section-heading h2,
  .doc-quick-grid strong,
  .doc-topic-grid strong,
  .doc-recommend-list strong,
  .doc-result-grid strong,
  .doc-tree-group h3,
  .doc-markdown,
  .doc-markdown h1,
  .doc-markdown h2,
  .doc-markdown h3,
  .doc-markdown h4
) {
  color: var(--theme-text-strong);
}

html[data-theme="dark"] .doc-center-page :is(
  .doc-header-copy p,
  .doc-section-heading span,
  .doc-quick-grid span,
  .doc-topic-grid span,
  .doc-topic-grid small,
  .doc-recommend-list span,
  .doc-result-grid span,
  .doc-reader-meta,
  .doc-empty-state
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] .doc-center-page .doc-topic-grid em {
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
}

html[data-theme="dark"] .doc-center-page .doc-back-home,
html[data-theme="dark"] .doc-center-page .doc-tree-group h3 {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--primary-dark);
}

html[data-theme="dark"] .setting-help-link,
html[data-theme="dark"] .doc-center-page .doc-markdown a {
  color: var(--primary-dark);
}

html[data-theme="dark"] .doc-center-page .doc-return-workbench {
  border-color: var(--theme-border);
  background: var(--theme-surface-elevated);
  color: var(--primary-dark);
}

html[data-theme="dark"] .doc-center-page .doc-return-workbench:hover,
html[data-theme="dark"] .doc-center-page .doc-return-workbench:focus-visible {
  border-color: var(--primary);
  background: var(--theme-hover);
}

html[data-theme="dark"] .doc-center-page .doc-anchor-highlight {
  background: var(--theme-active);
  box-shadow: 0 0 0 4px var(--theme-active);
}

html[data-theme="dark"] .doc-center-page .doc-tree-group > div {
  border-left-color: var(--theme-border);
}

html[data-theme="dark"] .doc-center-page .doc-tree-group button {
  color: var(--theme-text);
}

html[data-theme="dark"] .doc-center-page .doc-markdown blockquote {
  border-left-color: var(--primary);
  background: var(--theme-active);
  color: #c5ddda;
}

/* 任务中心：标题栏、空状态、任务列表和详情卡统一使用深色表面。 */
html[data-theme="dark"] .task-center-page :is(
  .task-center-header,
  .task-center-load-state,
  .task-center-empty-tabs,
  .task-center-overview-panel,
  .task-center-list-panel,
  .task-center-progress-row,
  .task-center-current-step,
  .task-center-info-card,
  .task-center-summary-card,
  .task-center-billing-card,
  .task-center-auth-queue-card,
  .task-center-result-card,
  .task-log-box,
  .task-center-clear-history-feedback
) {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="dark"] .task-center-page .task-center-header {
  background: var(--theme-surface);
}

html[data-theme="dark"] .task-center-page :is(
  .task-center-header-stats span,
  .task-center-close-button,
  .task-center-tab,
  .task-center-summary-card span,
  .task-center-auth-queue-item
) {
  border-color: var(--theme-border);
  background: var(--theme-surface-elevated);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="dark"] .task-center-page :is(
  .task-center-header h1,
  .task-center-header-stats b,
  .task-center-overview-head strong,
  .task-center-list-head strong,
  .task-center-detail h2,
  .task-center-section-title h3,
  .task-center-info-card h3,
  .task-center-summary-card h3,
  .task-center-billing-card h3,
  .task-center-result-card h3,
  .task-center-info-card dd,
  .task-center-summary-card b,
  .task-center-billing-card dd,
  .task-center-auth-queue-item b
) {
  color: var(--theme-text-strong);
}

html[data-theme="dark"] .task-center-page :is(
  .task-center-header p:not(.breadcrumb),
  .task-center-overview-head,
  .task-center-list-head,
  .task-center-history-head,
  .task-center-list-more,
  .task-center-row-state,
  .task-center-row-brief,
  .task-center-progress-title span,
  .task-center-info-card dt,
  .task-center-summary-card small,
  .task-center-billing-card dt,
  .task-center-auth-queue-item small,
  .task-center-log-title small
) {
  color: var(--theme-muted);
}

html[data-theme="dark"] .task-center-page .task-log-box code {
  color: var(--theme-text);
}

html[data-theme="dark"] .task-center-page .task-log-loading-older {
  border-color: var(--theme-border);
  background: var(--theme-control);
  color: var(--theme-muted);
}

html[data-theme="dark"] .task-center-page .task-center-filters button {
  color: var(--theme-muted);
}

html[data-theme="dark"] .task-center-page :is(
  .task-center-filters button.active,
  .task-center-tab.active,
  .task-center-task-row.active
) {
  border-color: #37615e;
  background: var(--theme-active);
  color: var(--theme-text-strong);
  box-shadow: none;
}

html[data-theme="dark"] .task-center-page .task-center-task-row:hover {
  border-color: var(--theme-border);
  background: var(--theme-hover);
}

html[data-theme="dark"] .task-center-page .task-center-progress-track {
  background: var(--theme-control);
}

html[data-theme="dark"] .task-center-page :is(
  .task-center-current-step.failed,
  .task-center-result-card.failed
) {
  border-color: #754548;
  background: var(--theme-danger);
}

html[data-theme="dark"] .task-center-modal-shell {
  border-color: var(--theme-border-strong);
  background: var(--theme-canvas);
}

/* 配置管理后台：表格已支持深色，补齐表格外层、筛选区、摘要区和编辑器容器。 */
html[data-theme="dark"] .admin-layout :is(
  .admin-inline-settings,
  .admin-filter-bar,
  .admin-table-block,
  .admin-table-scroll,
  .admin-message-template-row,
  .admin-diff-box,
  .admin-list-preview,
  .admin-dictionary-block,
  .fields-registry-module-copy,
  .fields-registry-section,
  .admin-order-toolbar,
  .admin-doc-list,
  .admin-doc-editor,
  .admin-doc-category-editor,
  .admin-doc-category-row,
  .json-editor-details
) {
  border-color: var(--theme-border);
  background: var(--theme-surface-raised);
  color: var(--theme-text);
  box-shadow: none;
}

html[data-theme="dark"] .admin-layout :is(
  .summary-grid,
  .admin-editor-grid,
  .admin-inline-settings,
  .admin-filter-bar
) > :is(div, label) {
  border-color: var(--theme-border);
}

html[data-theme="dark"] .admin-layout :is(
  .admin-subtitle,
  .admin-section-head h3,
  .admin-editor-actions-tight b,
  .fields-registry-section summary
) {
  color: var(--theme-text-strong);
}

html[data-theme="dark"] .admin-layout :is(
  .admin-section-head p,
  .admin-editor-actions-tight span,
  .admin-inline-settings label,
  .admin-filter-bar label
) {
  color: var(--theme-muted);
}

/*
 * 深色主题兜底层：旧功能页的浅色规则具有更高选择器优先级，且部分模块样式会在
 * 全局样式之后载入。这里仅在深色主题下覆盖界面容器，不改变已经成型的浅色页面。
 */
html[data-theme="dark"] .module-page {
  --tool-page-bg: var(--theme-canvas);
  --tool-panel-border: var(--theme-border);
  --tool-title-band: var(--theme-surface-elevated);
  --tool-title-border: var(--theme-border-strong);
  --tool-title-ink: var(--theme-text-strong);
  --tool-title-note: var(--theme-muted);
  --tool-panel-shadow: none;
}

html[data-theme="dark"] body .main {
  background: var(--theme-canvas) !important;
}

html[data-theme="dark"] body .module-page :is(
  .panel,
  .panel.dense,
  .title-compact-panel,
  .title-compact-block,
  .te-panel,
  .te-panel-body,
  .douyin-local-panel,
  .attribute-read-rule,
  .attribute-default-rule,
  .attribute-summary,
  .attribute-flow-card,
  .attribute-preset-row,
  .extract-output-list,
  .reference-upload-box,
  .material-mode-tabs,
  .detail-folder-card,
  .single-media-board,
  .single-save-stack,
  .single-flow-step,
  .batch-image-summary-list,
  .batch-image-summary-status
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text);
  box-shadow: none !important;
}

html[data-theme="dark"] body .module-page :is(
  .panel-title,
  .panel-title-row,
  .section-title-row,
  .te-panel-head,
  .douyin-v2-section-title
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-elevated) !important;
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] body .module-page :is(
  .panel-title,
  .panel-title-row,
  .section-title-row,
  .te-panel-head,
  .douyin-v2-section-title
) :is(h2, h3, strong, .te-panel-title) {
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] body .module-page :is(
  .panel-title,
  .panel-title-row,
  .section-title-row,
  .te-panel-head,
  .douyin-v2-section-title
) :is(p, small, span) {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] body .module-page :is(
  .final-action-hub,
  .final-action-bar,
  .material-action-bar,
  .ai-video-action-row
) {
  border-color: var(--theme-border-strong) !important;
  background: color-mix(in srgb, var(--theme-surface-raised) 94%, transparent) !important;
  color: var(--theme-text);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] body .module-page :is(
  .material-scope-tabs,
  .title-trend-tabs,
  .title-trend-tab-note,
  .extract-tip,
  .motion-output-card,
  .attribute-preset-row,
  .detail-compare-caption,
  .preview-frame,
  .single-media-empty,
  .summary-note,
  .single-upload-drop,
  .batch-image-summary-status,
  .douyin-v2-inline-note,
  .douyin-v2-readonly-path,
  .title-inline-notice,
  .title-result-editor,
  .title-result-empty
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .module-page :is(
  .douyin-v2-category-state.missing,
  .warn,
  .warning
) {
  border-color: #5d4b2d !important;
  background: var(--theme-warning) !important;
  color: #f0cf91 !important;
}

html[data-theme="dark"] body .module-page :is(
  .path-input,
  .readonly-value,
  .multi-select-panel,
  details > summary,
  .segmented,
  .material-mode-tabs,
  .title-trend-tab.active
) {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .module-page :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  textarea,
  select
) {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .module-page :is(input, textarea)::placeholder {
  color: #77898c !important;
}

html[data-theme="dark"] body .title-guide-page .title-trend-tab {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] body .title-guide-page .title-trend-tab.active,
html[data-theme="dark"] body .title-guide-page .title-trend-tab:not(.active):hover {
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] body .title-guide-page .title-trend-tab.active::after {
  background: var(--theme-control) !important;
}

html[data-theme="dark"] body .title-guide-page :is(
  .checkbox-inline,
  .title-blacklist-actions span
) {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] body .title-guide-page .title-trend-shop-guidance {
  color: var(--theme-danger-text) !important;
}

/* 详情对比区的 figure 是界面框架；真实图片仍按图片自身颜色显示。 */
html[data-theme="dark"] body .module-page :is(
  figure.before,
  figure.after,
  .detail-compare-card figure
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  box-shadow: none !important;
}

/* 本地生图批处理步骤状态。 */
html[data-theme="dark"] body .batch-image-page :is(
  .batch-image-stepper > div,
  .batch-image-summary-grid > div,
  .batch-image-summary-list > div,
  .done,
  .locked,
  .good,
  .warn
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] body .batch-image-page .done,
html[data-theme="dark"] body .batch-image-page .good {
  border-color: #37615e !important;
  background: var(--theme-active) !important;
}

html[data-theme="dark"] body .batch-image-page .warn {
  border-color: #5d4b2d !important;
  background: var(--theme-warning) !important;
}

/* 图片生成视频共用工作台。 */
html[data-theme="dark"] body .ai-video-page :is(
  .ai-video-left-panel,
  .ai-video-preview-panel,
  .ai-video-player-frame,
  .ai-video-upload-empty,
  .ai-video-action-row
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .ai-video-page :is(
  .ai-video-player-frame,
  .ai-video-upload-empty
) {
  background: var(--theme-surface-raised) !important;
}

html[data-theme="dark"] body .ai-video-page .ai-video-action-row {
  border-color: var(--theme-border-strong) !important;
  background: color-mix(in srgb, var(--theme-surface-raised) 95%, transparent) !important;
}

/* 配置后台底部操作说明条原规则优先级较高，单独收口。 */
html[data-theme="dark"] body .admin-layout .admin-editor-actions.admin-editor-actions-tight {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

/* 智能提取结果摘要。 */
html[data-theme="dark"] body .extract-summary-grid > div {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .material-page .material-hero-badge {
  border-color: #37615e !important;
  background: linear-gradient(135deg, var(--theme-active), var(--theme-surface-raised)) !important;
  color: var(--theme-muted) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .material-page .material-hero-badge strong {
  color: #8be3dc !important;
}

html[data-theme="dark"] body .material-page :is(
  .crop-motion-stage,
  .template-before-after,
  .reference-upload-drop
) {
  border-color: var(--theme-border) !important;
  background: linear-gradient(135deg, var(--theme-surface-raised), var(--theme-surface)) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .material-page .reference-upload-drop span {
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] body .material-page .reference-upload-drop small {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] body .material-page .detail-queue-core {
  border-color: var(--theme-border) !important;
  background:
    radial-gradient(circle, var(--theme-surface-raised) 0 47%, transparent 48%),
    conic-gradient(from 120deg, rgba(32, 184, 177, 0.34), rgba(240, 194, 111, 0.30), rgba(32, 184, 177, 0.34)) !important;
  color: var(--theme-text-strong) !important;
  box-shadow: inset 0 0 0 1px var(--theme-border) !important;
}

html[data-theme="dark"] body .material-page .detail-queue-core span {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] body .ai-video-page .ai-video-check-summary {
  border-color: #37615e !important;
  background: linear-gradient(135deg, var(--theme-active), var(--theme-surface-raised)) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .ai-video-page .ai-video-check-summary :is(p, span) {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] body .ai-video-page .ai-video-check-summary strong {
  color: #8be3dc !important;
}

html[data-theme="dark"] body .stall-pick-page .module-hero {
  border-color: var(--theme-border) !important;
  background: linear-gradient(180deg, var(--theme-surface-raised), var(--theme-surface)) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .detail-gen-sample-art.tone-warm {
  border-color: var(--theme-border) !important;
  background: linear-gradient(135deg, #2b2b27, var(--theme-surface-raised)) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

/* 淘宝本地素材上架：销售属性编辑器及旧版局部容器没有 module-page 根类。 */
html[data-theme="dark"] body .local-listing-page :is(
  .local-sales-attribute-shell,
  .local-sales-attribute-body,
  .local-sales-base-card,
  .local-sales-base-grid,
  .attribute-summary,
  .attribute-read-rule,
  .attribute-flow-card,
  .attribute-preset-row,
  .timing-custom-grid
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .local-listing-page :is(
  .panel-title,
  .local-sales-attribute-label,
  .local-sales-base-card-title
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-elevated) !important;
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] body .local-listing-page .panel-title h2 {
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] body .local-listing-page .panel-title p {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] body .local-listing-page :is(
  .path-input,
  .readonly-value,
  .attribute-chip,
  .sales-attribute-note-placeholder
) {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .local-listing-page .sales-attribute-notice {
  border-color: #36506d !important;
  background: #1b2b3e !important;
  color: #a9cdf3 !important;
}

html[data-theme="dark"] body .local-listing-page .attribute-flow-card.source {
  border-color: #37615e !important;
  background: var(--theme-active) !important;
}

html[data-theme="dark"] body .local-listing-page .local-listing-action-dock {
  border-color: var(--theme-border-strong) !important;
  background: color-mix(in srgb, var(--theme-surface-raised) 95%, transparent) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18) !important;
}

/* 淘宝商品自动编辑：页面样式由组件内 style 标签注入，使用主题级重要声明兜底。 */
/* 共享销售属性组件会出现在四个平台页面中，不能依赖某个页面的根类。 */
html[data-theme="dark"] body .sales-spec-shared-panel :is(
  .local-sales-base-card,
  .local-sales-attribute-shell
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .sales-spec-shared-panel :is(
  .local-sales-base-grid,
  .local-sales-attribute-body
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] body .sales-spec-shared-panel :is(
  .local-sales-base-card-title,
  .local-sales-attribute-label
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-elevated) !important;
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] body .sales-spec-shared-panel :is(
  .sales-attribute-field-head,
  .field-title-with-help,
  .price-source-row,
  .sales-spec-check
) {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] body .sales-spec-shared-panel :is(
  .sales-attribute-list-field + .sales-attribute-list-field,
  .local-sales-support-grid
) {
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] body .sales-spec-shared-panel :is(
  .sales-attribute-image-slot,
  .sales-attribute-note-placeholder
) {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] body .sales-spec-shared-panel :is(
  .sales-attribute-delete,
  .sales-attribute-plus
) {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] body .sales-spec-shared-panel :is(
  .sales-spec-image-rule small,
  .sales-spec-code-rule small
) {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] body .sales-spec-shared-panel .sales-attribute-field-head b {
  background: var(--theme-warning) !important;
  color: var(--theme-warning-text) !important;
}

html[data-theme="dark"] body .taobao-edit-page .te-panel-body {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

/* 抖店本地素材上架 v2。 */
html[data-theme="dark"] body .douyin-local-page :is(
  .douyin-v2-section-title,
  .douyin-v2-inline-note,
  .douyin-v2-readonly-path,
  .douyin-v2-readonly-value,
  .yd-segmented
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .douyin-local-page .douyin-v2-section-title {
  background: var(--theme-surface-elevated) !important;
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] body .douyin-local-page .douyin-v2-field-help {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] body .douyin-local-page .yd-segmented {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
}

html[data-theme="dark"] body .douyin-local-page .douyin-v2-category-state.missing {
  border-color: #5d4b2d !important;
  background: var(--theme-warning) !important;
  color: #f0cf91 !important;
}

html[data-theme="dark"] body .douyin-local-page .douyin-v2-category-state:is(.idle, .ready, .partial) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .douyin-local-page .douyin-v2-category-state:is(.idle, .ready, .partial) b {
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] body .douyin-local-page .douyin-v2-category-state:is(.idle, .ready, .partial) span {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] body .douyin-local-page .douyin-v2-field :is(input, select):disabled {
  border-color: var(--theme-border) !important;
  background: var(--theme-control) !important;
  color: var(--theme-muted) !important;
  opacity: .64;
}

html[data-theme="dark"] body .douyin-local-page .local-listing-action-dock {
  border-color: var(--theme-border-strong) !important;
  background: color-mix(in srgb, var(--theme-surface-raised) 95%, transparent) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18) !important;
}

/* AI 批量智能混剪：单款预览摘要和批量任务表。 */
html[data-theme="dark"] body .single-preview-panel .preview-summary > div,
html[data-theme="dark"] body .video-clip-page :is(.task-table, .major-choice-field) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

/* AI 云主机批量生图：预算、GPU 方案与统计区。 */
html[data-theme="dark"] body .batch-image-page :is(
  .batch-image-gpu-detail,
  .batch-image-summary-list,
  .batch-image-summary-status,
  .batch-image-metrics > div,
  .batch-image-field select
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .batch-image-page .batch-image-field select {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
}

html[data-theme="dark"] body .batch-image-page .batch-image-summary-status {
  border-color: #37615e !important;
  background: var(--theme-active) !important;
}

/* 图片生成视频：输出目录与保存状态。 */
html[data-theme="dark"] body .ai-video-page .ai-video-output-field {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

/* 配置管理后台：维护提示、审计/备份列表和套餐编辑工具条。 */
html[data-theme="dark"] body .admin-layout :is(
  .admin-maintenance-cheatsheet,
  .plan-edit-mode-toolbar,
  .admin-audit-mini-row,
  .admin-backup-row,
  .plan-edit-mode-tabs
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .admin-layout .plan-entitlement-group-row > td {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-elevated) !important;
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] body .admin-layout .plan-edit-mode-tabs {
  background: var(--theme-control) !important;
}

/* 批量上传与替换：组件内注入的浅色标题带。 */
html[data-theme="dark"] body .upload-edit-page .upload-panel-head {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-elevated) !important;
  color: var(--theme-text-strong) !important;
}

/* 深色主题小型浅色块收口：输出标签、空缩略图、单位输入框与状态标签。 */
html[data-theme="dark"] body .material-page .extract-output-list span,
html[data-theme="dark"] body .material-page .template-showcase-copy > span,
html[data-theme="dark"] body .material-page .detail-showcase-tags span {
  border: 1px solid #37615e !important;
  background: var(--theme-active) !important;
  color: #9bded9 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .material-page .mini-upload-button {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  color: var(--theme-text-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .material-page .reference-thumb-wall :is(span, figure) {
  border-color: var(--theme-border) !important;
  background: linear-gradient(135deg, var(--theme-surface-raised), var(--theme-surface-elevated)) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .video-clip-page .mini-field {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .batch-image-page :is(
  .batch-image-value-pills span,
  .batch-image-preview-head > span
) {
  border: 1px solid #37615e !important;
  background: var(--theme-active) !important;
  color: #9bded9 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .batch-image-page .batch-image-gpu-cards em {
  border: 1px solid #46633d !important;
  background: #253c2f !important;
  color: #b7dca8 !important;
}

html[data-theme="dark"] body .batch-image-page .batch-image-gpu-cards em.low {
  border-color: #3d5263 !important;
  background: #24323d !important;
  color: #b4c8d8 !important;
}

/* 视频抽帧选主图：视频格式多选块原规则写死白底，需按勾选状态区分。 */
html[data-theme="dark"] body .video-frame-page .check-row label {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .video-frame-page .check-row label:has(input:checked) {
  border-color: #37615e !important;
  background: var(--theme-active) !important;
  color: #9bded9 !important;
}

/* 展开侧栏：降低重复边框和状态标签的视觉噪声；收起侧栏使用独立组件，不受此处影响。 */
.sidebar.sidebar-expanded .menu {
  gap: 2px;
}

.sidebar.sidebar-expanded .menu-group {
  margin-bottom: 4px;
}

.sidebar.sidebar-expanded .menu-section {
  min-height: 32px;
  margin: 0;
  padding: 5px 7px 5px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #30464e;
  font-weight: 650;
  box-shadow: none;
}

.sidebar.sidebar-expanded .menu-section-button,
.sidebar.sidebar-expanded .menu-section-standalone,
.sidebar.sidebar-expanded .menu-item,
.sidebar.sidebar-expanded .submenu-item {
  align-items: center;
}

.sidebar.sidebar-expanded .menu-section-button::before,
.sidebar.sidebar-expanded .menu-section-standalone::before,
.sidebar.sidebar-expanded .menu-item::before,
.sidebar.sidebar-expanded .submenu-item::before {
  display: none;
}

.sidebar.sidebar-expanded .menu-section:hover,
.sidebar.sidebar-expanded .menu-item:hover,
.sidebar.sidebar-expanded .submenu-item:hover {
  background: rgba(29, 96, 101, 0.055);
  color: #183d43;
  box-shadow: none;
}

.sidebar.sidebar-expanded .menu-section-button.has-active {
  background: transparent;
  color: #214e52;
  font-weight: 720;
  box-shadow: none;
}

.sidebar.sidebar-expanded .menu-section-standalone.active,
.sidebar.sidebar-expanded .menu-item.active,
.sidebar.sidebar-expanded .submenu-item.selected {
  background: #e7f4f2;
  color: var(--primary-dark);
  font-weight: 680;
  box-shadow: none;
}

.sidebar.sidebar-expanded .menu-section-arrow {
  width: 16px;
  height: 16px;
  color: #84969d;
  background: transparent;
}

.sidebar.sidebar-expanded .menu-section-arrow svg {
  display: block;
}

.sidebar.sidebar-expanded .menu-group > div:not(.submenu) {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.sidebar.sidebar-expanded .menu-item,
.sidebar.sidebar-expanded .submenu-item {
  min-height: 29px;
  padding: 4px 7px 4px 21px;
  border: 0;
  border-radius: 6px;
  color: #637880;
  font-size: 12.1px;
  font-weight: 520;
  box-shadow: none;
}

.sidebar.sidebar-expanded .submenu {
  margin: 0;
  padding-left: 0;
  border-left: 0;
}

.sidebar.sidebar-expanded .submenu-item {
  padding-left: 27px;
}

.sidebar.sidebar-expanded .menu-badges {
  align-items: baseline;
  gap: 4px;
  margin-left: 5px;
}

.sidebar.sidebar-expanded .menu-badge,
.sidebar.sidebar-expanded .menu-badge-hot,
.sidebar.sidebar-expanded .menu-badge-new,
.sidebar.sidebar-expanded .menu-badge-muted,
.sidebar.sidebar-expanded .menu-status {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #819198;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: none;
}

html[data-theme="dark"] .sidebar.sidebar-expanded .menu-section {
  border-color: transparent !important;
  background: transparent !important;
  color: #c5d1d2;
}

html[data-theme="dark"] .sidebar.sidebar-expanded .menu-section:hover,
html[data-theme="dark"] .sidebar.sidebar-expanded .menu-item:hover,
html[data-theme="dark"] .sidebar.sidebar-expanded .submenu-item:hover {
  border-color: transparent !important;
  background: var(--theme-hover) !important;
  color: var(--theme-text-strong);
  box-shadow: none;
}

html[data-theme="dark"] .sidebar.sidebar-expanded .menu-section-button.has-active {
  border-color: transparent !important;
  background: transparent !important;
  color: #d8e5e5;
  box-shadow: none;
}

html[data-theme="dark"] .sidebar.sidebar-expanded :is(
  .menu-section-standalone.active,
  .menu-item.active,
  .submenu-item.selected
) {
  border-color: transparent !important;
  background: var(--theme-active) !important;
  color: var(--theme-text-strong);
  box-shadow: none;
}

html[data-theme="dark"] .sidebar.sidebar-expanded .menu-item,
html[data-theme="dark"] .sidebar.sidebar-expanded .submenu-item {
  border-color: transparent !important;
  background: transparent !important;
  color: #a6b4b6;
}

html[data-theme="dark"] .sidebar.sidebar-expanded .menu-section-arrow {
  color: #7f9295;
  background: transparent;
}

html[data-theme="dark"] .sidebar.sidebar-expanded :is(
  .menu-badge,
  .menu-badge-hot,
  .menu-badge-new,
  .menu-badge-muted,
  .menu-status
) {
  background: transparent;
  color: #839497;
  box-shadow: none;
}

/* 渠道推广：账号中心与配置后台共用的紧凑业务控件。 */
.channel-loading {
  min-height: 180px;
  padding: 52px 24px;
  color: var(--text-muted, #64777e);
  text-align: center;
}

.channel-head-actions,
.channel-row-actions,
.channel-form-actions,
.channel-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.channel-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid #d6e2e4;
  border-radius: 4px;
  background: #f7fafb;
  color: #4a6269;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

.channel-status-active,
.channel-status-approved,
.channel-status-available,
.channel-status-paid {
  border-color: #b8ded7;
  background: #eef9f6;
  color: #11695e;
}

.channel-status-pending,
.channel-status-frozen,
.channel-status-paused {
  border-color: #ecd9a6;
  background: #fff9e9;
  color: #805d09;
}

.channel-status-rejected,
.channel-status-terminated {
  border-color: #efc6c1;
  background: #fff4f2;
  color: #a13e34;
}

.channel-role-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.channel-role-options button {
  display: grid;
  gap: 5px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid #d8e3e5;
  border-radius: 6px;
  background: #fff;
  color: #263e45;
  text-align: left;
  cursor: pointer;
}

.channel-role-options button:hover,
.channel-role-options button.active {
  border-color: #3b9f97;
  background: #edf8f6;
}

.channel-role-options button:disabled {
  cursor: default;
  opacity: 0.64;
}

.channel-terminated-notice,
.channel-paused-notice,
.channel-inline-empty,
.channel-analytics-loading {
  margin: 10px 0;
  padding: 8px 11px;
  border-left: 3px solid #c65349;
  background: #fff4f2;
  color: #8f3b34;
  font-size: 12px;
  line-height: 1.55;
}

.channel-paused-notice {
  border-color: #d1a329;
  background: #fff9e9;
  color: #785a13;
}

.channel-permission-notice {
  margin-top: 8px;
  padding: 7px 10px;
  border-left: 3px solid #c49a2c;
  background: #fff9e8;
  color: #745914;
  font-size: 12px;
  line-height: 1.5;
}

.channel-inline-empty,
.channel-analytics-loading {
  border-color: #8aaeb1;
  background: #f3f7f8;
  color: #60757a;
}

.channel-role-options strong {
  font-size: 15px;
}

.channel-role-options strong small {
  margin-left: 7px;
  color: #4d7a76;
  font-size: 11px;
  font-weight: 700;
}

.channel-role-options span,
.channel-notice-row span,
.channel-block-head p {
  color: #6a7b81;
  font-size: 12px;
}

.channel-public-note {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-left: 3px solid #46a79f;
  background: #f3f9f8;
  color: #566d73;
  font-size: 12px;
  line-height: 1.6;
}

.channel-notice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid #dce5e7;
  border-radius: 6px;
  background: #f8fafb;
}

.channel-notice-row > div {
  display: grid;
  gap: 3px;
}

.channel-application-form,
.channel-settings-grid,
.channel-withdrawal-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 12px;
}

.channel-application-form label,
.channel-settings-grid label,
.channel-withdrawal-form label,
.channel-override-grid label {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  color: #455b62;
  font-size: 12px;
}

.channel-application-form .wide,
.channel-settings-grid .wide {
  grid-column: 1 / -1;
}

.channel-global-settings-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 12px;
}

.channel-global-settings-grid > label {
  flex: 0 0 126px;
}

.channel-global-settings-grid > label.wide {
  flex: 0 1 360px;
  min-width: 280px;
}

.channel-application-form input,
.channel-application-form textarea,
.channel-settings-grid input,
.channel-settings-grid select,
.channel-withdrawal-form input,
.channel-withdrawal-form select,
.channel-override-grid input,
.channel-partner-editor select {
  min-width: 0;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #cfdcdf;
  border-radius: 4px;
  background: #fff;
  color: #20383f;
  font: inherit;
}

.channel-application-form textarea {
  min-height: 70px;
  resize: vertical;
}

.channel-referral-strip {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto minmax(118px, auto) auto;
  align-items: end;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #d7e4e5;
  border-radius: 6px;
  background: #f6faf9;
}

.channel-referral-strip > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.channel-referral-strip span {
  color: #6a7d82;
  font-size: 11px;
}

.channel-referral-strip b {
  overflow: hidden;
  color: #143e42;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.channel-summary-grid.compact {
  margin-bottom: 0;
}

.channel-summary-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border-left: 3px solid #25a69b;
  background: #f4f8f8;
}

.channel-summary-cell span,
.channel-summary-cell small {
  color: #6a7b81;
  font-size: 11px;
}

.channel-summary-cell b {
  overflow: hidden;
  color: #16383e;
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-two-column {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr);
  gap: 10px;
}

.channel-panel-block {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #dbe5e7;
  border-radius: 6px;
  background: #fff;
}

.channel-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.channel-block-head h3 {
  margin: 0;
  color: #19383e;
  font-size: 14px;
}

.channel-block-head p {
  margin: 3px 0 0;
}

.channel-rate-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px 16px;
}

.channel-rate-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 31px;
  border-bottom: 1px solid #edf1f2;
  color: #52666c;
  font-size: 12px;
}

.channel-rate-list b {
  color: #0e756b;
  font-size: 13px;
}

.channel-withdrawal-form {
  margin-top: 0;
}

.channel-withdrawal-form .channel-form-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.channel-contract-notice {
  margin-top: 8px;
  padding: 8px 11px;
  border-left: 3px solid #d5a629;
  background: #fff9e8;
  color: #795a11;
  font-size: 12px;
}

.channel-contract-notice.urgent,
.channel-contract-notice.expired {
  border-color: #c8544a;
  background: #fff3f1;
  color: #963b33;
}

.channel-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.channel-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 12px;
}

.channel-table th,
.channel-table td {
  padding: 8px 9px;
  border-bottom: 1px solid #e4eaec;
  color: #3d545a;
  text-align: left;
  vertical-align: middle;
}

.channel-table th {
  background: #f5f8f9;
  color: #5b6e74;
  font-weight: 650;
  white-space: nowrap;
}

.channel-customer-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 8px;
}

.channel-customer-toolbar input,
.channel-customer-toolbar select,
.channel-customer-note input {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #cfdcdf;
  border-radius: 4px;
  background: #fff;
  color: #29454b;
  font: inherit;
  font-size: 12px;
}

.channel-customer-toolbar input {
  width: min(310px, 48vw);
}

.channel-customer-toolbar select {
  width: 126px;
}

.channel-customer-table {
  min-width: 1180px;
}

.channel-customer-table td {
  padding-top: 6px;
  padding-bottom: 6px;
}

.channel-customer-table td > b,
.channel-customer-table td > span,
.channel-customer-table td > small {
  display: block;
}

.channel-customer-table td > small {
  margin-top: 2px;
  color: #73858a;
  font-size: 11px;
}

.channel-customer-note {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 210px;
}

.channel-customer-note input {
  width: 160px;
}

.channel-customer-note button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid #bcd5d2;
  border-radius: 4px;
  background: #f4faf9;
  color: #14685f;
  cursor: pointer;
}

.channel-customer-note button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.channel-table td.positive {
  color: #08786a;
}

.channel-table td.negative {
  color: #b54339;
}

.channel-empty-cell {
  padding: 22px !important;
  color: #87969a !important;
  text-align: center !important;
}

.channel-description-cell {
  max-width: 280px;
  white-space: normal;
}

.channel-row-actions button {
  padding: 3px 7px;
  border: 1px solid #bcd5d2;
  border-radius: 4px;
  background: #f4faf9;
  color: #14685f;
  cursor: pointer;
}

.channel-row-actions button.danger {
  border-color: #e0c7c3;
  background: #fff7f5;
  color: #9c4038;
}

.channel-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.channel-partner-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0;
}

.channel-partner-toolbar input,
.channel-partner-toolbar select,
.channel-custom-period input {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #cfdcdf;
  border-radius: 4px;
  background: #fff;
  color: #29454b;
  font: inherit;
  font-size: 12px;
}

.channel-partner-toolbar input {
  width: min(240px, 38vw);
}

.channel-partner-toolbar select {
  width: 112px;
}

.channel-partner-toolbar > span {
  margin-left: auto;
  color: #708187;
  font-size: 12px;
  white-space: nowrap;
}

.channel-partner-table {
  min-width: 1180px;
}

.channel-partner-table th,
.channel-partner-table td {
  padding-top: 6px;
  padding-bottom: 6px;
}

.channel-partner-name {
  display: grid;
  gap: 2px;
  min-width: 150px;
}

.channel-partner-name small {
  color: #74858a;
  font-size: 11px;
}

.channel-account-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 118px;
}

.channel-account-name b {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-account-name button {
  display: inline-grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--theme-border, #d5e1e3);
  border-radius: 4px;
  background: var(--theme-surface, #fff);
  color: var(--theme-muted, #64777c);
  cursor: pointer;
}

.channel-admin-console {
  display: grid;
  gap: 10px;
}

.channel-admin-console > .panel {
  margin: 0;
}

.channel-switch {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 7px !important;
  color: #34545a;
  white-space: nowrap;
}

.channel-switch input {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.channel-switch.field-switch {
  align-self: end;
  min-height: 34px;
}

.channel-rate-editor {
  margin-top: 12px;
  border: 1px solid #dae4e6;
  border-radius: 5px;
  overflow: hidden;
}

.channel-rate-editor .head,
.channel-rate-editor .row {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 150px 150px;
  align-items: center;
  min-height: 38px;
  padding: 4px 10px;
  border-bottom: 1px solid #e6ecee;
}

.channel-rate-editor .head {
  background: #f3f7f8;
  color: #5b6e74;
  font-size: 12px;
  font-weight: 650;
}

.channel-rate-editor .row:last-child {
  border-bottom: 0;
}

.channel-rate-editor .row strong {
  color: #3a5359;
  font-size: 12px;
}

.channel-rate-editor .row strong small {
  display: block;
  max-width: 520px;
  margin-top: 2px;
  color: #78898d;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
}

.channel-rate-editor .row label,
.channel-override-grid label > span:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #65787e;
}

.channel-rate-editor input,
.channel-override-grid input {
  width: 84px;
  min-height: 30px;
}

.channel-rate-editor input:disabled {
  background: #f0f3f4;
  color: #94a0a3;
}

.channel-settings-form > .channel-form-actions {
  justify-content: flex-end;
  margin-top: 10px;
}

.channel-ledger-details {
  padding: 0 !important;
}

.channel-ledger-details summary {
  padding: 12px 15px;
  color: #294b51;
  cursor: pointer;
  font-weight: 650;
}

.channel-ledger-details .channel-table-wrap {
  padding: 0 12px 12px;
}

.channel-editor-backdrop {
  position: fixed;
  z-index: 1800;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: rgba(18, 34, 39, 0.34);
}

.channel-partner-editor {
  width: min(620px, 92vw);
  height: 100%;
  padding: 18px;
  overflow-y: auto;
  background: #fff;
  box-shadow: -12px 0 32px rgba(13, 35, 41, 0.16);
}

.channel-analytics-drawer {
  width: min(820px, 94vw);
  height: 100%;
  padding: 16px;
  overflow-y: auto;
  background: #fff;
  box-shadow: -12px 0 32px rgba(13, 35, 41, 0.16);
}

.channel-period-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 12px 0 8px;
  border-bottom: 1px solid #dce5e7;
}

.channel-period-tabs button {
  min-width: 64px;
  padding: 7px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #61757a;
  font-size: 12px;
  cursor: pointer;
}

.channel-period-tabs button.active {
  border-color: #159c91;
  color: #0c746b;
  font-weight: 700;
}

.channel-custom-period {
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 8px 0;
}

.channel-custom-period label {
  display: grid;
  gap: 3px;
  color: #5c7075;
  font-size: 11px;
}

.channel-custom-period input {
  width: 138px;
}

.channel-custom-period .primary-button {
  min-height: 32px;
  padding: 5px 13px;
}

.channel-analytics-range {
  margin: 8px 0 6px;
  color: #74858a;
  font-size: 11px;
}

.channel-analytics-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.channel-analytics-summary .channel-summary-cell {
  padding: 8px 9px;
}

.channel-analytics-summary .channel-summary-cell b {
  font-size: 15px;
}

.channel-analytics-section {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #e1e8ea;
}

.channel-trend-list {
  display: grid;
  gap: 4px;
}

.channel-trend-row {
  display: grid;
  grid-template-columns: 64px minmax(90px, 1fr) 92px 42px;
  align-items: center;
  gap: 8px;
  min-height: 25px;
  color: #53686e;
  font-size: 11px;
}

.channel-trend-row > div {
  height: 7px;
  overflow: hidden;
  border-radius: 2px;
  background: #edf2f3;
}

.channel-trend-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #25a69b;
}

.channel-trend-row b {
  color: #25484e;
  font-weight: 650;
  text-align: right;
}

.channel-trend-row small {
  color: #7a8b90;
  text-align: right;
}

.channel-analytics-table {
  min-width: 560px;
}

.channel-analytics-orders {
  min-width: 700px;
}

.channel-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e3e9eb;
}

.channel-editor-head h2,
.channel-editor-head p {
  margin: 0;
}

.channel-editor-head h2 {
  font-size: 18px;
}

.channel-editor-head p {
  margin-top: 3px;
  color: #74858a;
  font-size: 12px;
}

.channel-override-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e5ebed;
}

.channel-editor-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5ebed;
}

.channel-editor-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.channel-account-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--theme-border, #dce5e7);
  border-radius: 5px;
  background: var(--theme-border, #dce5e7);
}

.channel-account-summary > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  background: var(--theme-elevated, #f7f9fa);
}

.channel-account-summary span {
  color: var(--theme-muted, #74858a);
  font-size: 10px;
}

.channel-account-summary b {
  overflow-wrap: anywhere;
  color: var(--theme-text, #294b51);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.channel-editor-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.channel-editor-section-head h3,
.channel-editor-section-head p {
  margin: 0;
}

.channel-editor-section-head h3 {
  flex: 0 0 auto;
  color: #23444a;
  font-size: 14px;
}

.channel-editor-section-head p {
  color: #74858a;
  font-size: 11px;
  text-align: right;
}

.channel-partner-basic-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 12px;
  margin-top: 0;
}

.channel-partner-basic-grid > label {
  flex: 0 0 172px;
}

.channel-partner-basic-grid > label.wide {
  flex: 1 1 280px;
  min-width: 230px;
}

.channel-partner-basic-grid > label.channel-partner-type-field,
.channel-partner-basic-grid > label.channel-partner-status-field {
  flex-basis: 148px;
}

.channel-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  border-top: 1px solid #edf1f2;
}

.channel-permission-item {
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-height: 54px;
  padding: 8px 2px;
  border-bottom: 1px solid #edf1f2;
  cursor: pointer;
}

.channel-permission-item input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

.channel-permission-item span,
.channel-permission-item b,
.channel-permission-item small {
  display: block;
}

.channel-permission-item b {
  color: #29484e;
  font-size: 12px;
}

.channel-permission-item small {
  margin-top: 2px;
  color: #75878b;
  font-size: 10px;
  line-height: 1.4;
}

.channel-override-grid label {
  grid-template-columns: minmax(130px, 1fr) auto;
  align-items: center;
}

.channel-override-grid label > span:first-child small {
  display: block;
  margin-top: 2px;
  color: #78898d;
  font-size: 10px;
  line-height: 1.35;
}

.channel-editor-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

@media (max-width: 980px) {
  .channel-two-column,
  .channel-role-options {
    grid-template-columns: 1fr;
  }

  .channel-referral-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

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

  .channel-analytics-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .channel-application-form,
  .channel-settings-grid,
  .channel-withdrawal-form,
  .channel-override-grid {
    grid-template-columns: 1fr;
  }

  .channel-application-form .wide,
  .channel-settings-grid .wide {
    grid-column: auto;
  }

  .channel-global-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .channel-global-settings-grid > label,
  .channel-global-settings-grid > label.wide {
    min-width: 0;
  }

  .channel-global-settings-grid > label.wide {
    grid-column: 1 / -1;
  }

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

  .channel-rate-editor .head,
  .channel-rate-editor .row {
    grid-template-columns: minmax(130px, 1fr) 90px 90px;
  }

  .channel-partner-toolbar {
    flex-wrap: wrap;
  }

  .channel-partner-toolbar input {
    width: 100%;
  }

  .channel-partner-toolbar > span {
    margin-left: 0;
  }

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

  .channel-custom-period {
    flex-wrap: wrap;
  }

  .channel-customer-toolbar {
    flex-wrap: wrap;
  }

  .channel-customer-toolbar input {
    width: 100%;
  }

  .channel-editor-section-head {
    display: grid;
    gap: 3px;
  }

  .channel-editor-section-head p {
    text-align: left;
  }

  .channel-permission-grid {
    grid-template-columns: 1fr;
  }

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

html[data-theme="dark"] :is(
  .channel-role-options button,
  .channel-panel-block,
  .channel-partner-editor,
  .channel-analytics-drawer,
  .channel-application-form input,
  .channel-application-form textarea,
  .channel-settings-grid input,
  .channel-settings-grid select,
  .channel-withdrawal-form input,
  .channel-withdrawal-form select,
  .channel-override-grid input,
  .channel-partner-editor select,
  .channel-partner-toolbar input,
  .channel-partner-toolbar select,
  .channel-custom-period input,
  .channel-customer-toolbar input,
  .channel-customer-toolbar select,
  .channel-customer-note input
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] :is(.channel-summary-cell, .channel-referral-strip, .channel-notice-row, .channel-rate-editor .head, .channel-table th, .channel-customer-note button) {
  border-color: var(--theme-border) !important;
  background: var(--theme-elevated) !important;
}

html[data-theme="dark"] :is(.channel-terminated-notice, .channel-paused-notice, .channel-permission-notice, .channel-inline-empty, .channel-trend-row > div) {
  border-color: var(--theme-border) !important;
  background: var(--theme-elevated) !important;
}

html[data-theme="dark"] :is(.channel-summary-cell b, .channel-referral-strip b, .channel-block-head h3, .channel-table td, .channel-rate-editor .row strong, .channel-editor-section-head h3, .channel-permission-item b) {
  color: var(--theme-text-strong) !important;
}

/* 工具顶部主题快捷入口：与 Agent 顶部按钮共用同一主题状态。 */
.top-theme-toggle {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.top-theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.22);
}

.top-theme-toggle:focus-visible {
  outline: 2px solid #d7fffb;
  outline-offset: 2px;
}

html[data-theme="dark"] .top-theme-toggle {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-elevated);
  color: var(--theme-text-strong);
  box-shadow: none;
}

html[data-theme="dark"] .top-theme-toggle:hover {
  border-color: #4f6c6b;
  background: var(--theme-hover);
}

/* 账号小弹窗：登录态、未登录态和充值摘要统一进入深色表面层级。 */
html[data-theme="dark"] .account-popover {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48) !important;
}

html[data-theme="dark"] .account-popover :is(
  .account-panel,
  .account-login-tabs,
  .account-quick-links button,
  .account-recharge-box,
  .account-current-order,
  .account-order-list,
  .account-order-list-head,
  .account-order-item
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-popover :is(
  .account-dialog-close,
  .account-login-tabs button.active,
  .account-form-row input,
  .account-form-row select
) {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  color: var(--theme-text-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-popover :is(
  .account-dialog-head strong,
  .account-panel-head strong,
  .account-summary-grid b,
  .account-quick-links b,
  .account-order-item b,
  .account-form-row span
) {
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .account-popover :is(
  .account-dialog-head span,
  .account-panel-head span,
  .account-summary-grid span,
  .account-quick-links span,
  .account-order-list-head span,
  .account-order-item span,
  .account-login-tabs button,
  .account-register-link
) {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] .account-popover :is(
  .account-summary-grid,
  .account-order-list-head,
  .account-order-item
) {
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .account-popover :is(
  .account-dialog-close,
  .account-quick-links button,
  .account-login-tabs button
):hover {
  border-color: #37615e !important;
  background: var(--theme-hover) !important;
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .account-popover .account-bootstrap-hint {
  border-color: #5d4b2d !important;
  background: var(--theme-warning) !important;
  color: #f0c273 !important;
}

html[data-theme="dark"] .account-popover .account-error {
  border-color: #754548 !important;
  background: var(--theme-danger) !important;
  color: #f0b6b8 !important;
}

/* 账号中心：7 个页签共用同一套画布、表面、控件和状态层级。 */
html[data-theme="dark"] .account-center-active :is(.app-shell, .main),
html[data-theme="dark"] .account-center-standalone-page {
  background: var(--theme-canvas) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-standalone-header,
  .account-local-sidebar
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-sidebar) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-subscription-page,
  .account-center-main
) {
  background: transparent !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-center-empty,
  .account-section,
  .account-wallet-section,
  .account-current-band,
  .account-stat-card,
  .account-price-card,
  .account-profile-panel,
  .account-profile-item,
  .account-edit-card,
  .account-team-list,
  .account-platform-tile,
  .account-binding-guide,
  .account-shop-credential-editor,
  .account-extension-section,
  .account-edition-placeholder
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-points-summary,
  .account-billing-standard > div,
  .account-recharge-preview,
  .account-current-order,
  .account-recharge-packages button,
  .account-extension-packages button,
  .account-extension-grant,
  .account-extension-order-row,
  .account-team-row,
  .account-order-row,
  .account-shop-row,
  .account-device-row,
  .account-bind-form,
  .account-account-prefix,
  .account-inline-note,
  .account-binding-rules,
  .account-permission-pills label,
  .account-wallet-type-tabs,
  .account-billing-segment
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-standalone-actions button,
  .account-ghost-button,
  .account-points-actions button,
  .account-price-card > button,
  .account-dialog-close,
  .account-form-row input,
  .account-form-row select,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  border-color: var(--theme-border-strong) !important;
  background: var(--theme-control) !important;
  color: var(--theme-text-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-local-nav button,
  .account-family-tabs button,
  .account-wallet-type-tabs button,
  .account-billing-segment button
) {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-local-nav button:hover,
  .account-standalone-actions button:hover,
  .account-ghost-button:hover,
  .account-points-actions button:hover,
  .account-recharge-packages button:hover,
  .account-extension-packages button:hover
) {
  border-color: #37615e !important;
  background: var(--theme-hover) !important;
  color: var(--theme-text-strong) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-local-nav button.active,
  .account-wallet-type-tabs button.active,
  .account-billing-segment button.active,
  .account-recharge-packages button.active,
  .account-extension-packages button.active,
  .account-platform-tile.selected,
  .account-permission-pills label.checked,
  .account-current-plan-indicator
) {
  border-color: #37615e !important;
  background: var(--theme-active) !important;
  color: #8be3dc !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-center-empty strong,
  .account-standalone-brand b,
  .account-local-sidebar-title strong,
  .account-local-nav button strong,
  .account-subscription-title h1,
  .account-section-head h2,
  .account-points-total b,
  .account-point-stat b,
  .account-stat-card b,
  .account-price-card-head strong,
  .account-price b,
  .account-card-points,
  .account-plan-highlight-value,
  .account-profile-summary strong,
  .account-profile-item b,
  .account-edit-card-head strong,
  .account-team-user b,
  .account-platform-tile b,
  .account-shop-row b,
  .account-device-row b,
  .account-extension-section h3,
  .account-billing-standard b
) {
  color: var(--theme-text-strong) !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-center-empty p,
  .account-standalone-brand small,
  .account-local-sidebar-title span,
  .account-local-nav button span,
  .account-subscription-title p,
  .account-section-head p,
  .account-points-total span,
  .account-point-stat span,
  .account-stat-card span,
  .account-stat-card small,
  .account-usage-row small,
  .account-price-card-head span,
  .account-price small,
  .account-price-card p,
  .account-plan-highlight-row span,
  .account-profile-summary p,
  .account-profile-item span,
  .account-profile-item small,
  .account-edit-card-head span,
  .account-team-user span,
  .account-platform-tile span,
  .account-shop-row span,
  .account-device-row span,
  .account-extension-packages span,
  .account-extension-grant span,
  .account-extension-grant small,
  .account-extension-order-row,
  .account-billing-standard span
) {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-points-columns,
  .account-point-stat,
  .account-plan-highlight-row,
  .account-team-table,
  .account-team-row,
  .account-order-table,
  .account-order-row,
  .account-shop-table,
  .account-shop-row,
  .account-device-table,
  .account-device-row,
  .account-binding-rules,
  .account-local-sidebar-foot
) {
  border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-team-row.head,
  .account-order-row.head,
  .account-shop-row.head,
  .account-device-row.head
) {
  background: var(--theme-surface-elevated) !important;
  color: var(--theme-muted) !important;
}

/* 套餐品牌卡保留识别色，其余白底全部进入深色系统。 */
html[data-theme="dark"] .account-center-standalone-page .account-current-plan-card {
  border-color: #37615e !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-center-standalone-page .account-current-plan-card :is(strong, small, span, b) {
  color: #fff !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-plan-status,
  .account-price-card-head span,
  .account-soft-badge
) {
  border-color: #37615e !important;
  background: var(--theme-active) !important;
  color: #8be3dc !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-bootstrap-hint,
  .account-price-note,
  .account-price-card-head em,
  .account-platform-tile.pending
) {
  border-color: #5d4b2d !important;
  background: var(--theme-warning) !important;
  color: #f0c273 !important;
}

/* 平台店铺：新增绑定只创建待验证记录，登录凭证在店铺行单独维护。 */
.account-center-standalone-page .account-bind-form-verified {
  grid-template-columns: 180px 140px;
  max-width: 520px;
  align-items: end;
}

.account-center-standalone-page .account-bind-form-verified > .account-bind-mode {
  grid-column: 1 / -1;
  grid-row: auto;
}

.account-center-standalone-page .account-bind-form-verified > .account-form-row:nth-of-type(1) {
  grid-column: 1;
  grid-row: auto;
}

.account-center-standalone-page .account-bind-form-verified > .primary-button {
  grid-column: 2;
  grid-row: auto;
  min-height: 36px;
}

.account-center-standalone-page .mini-text-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 720px) {
  .account-center-standalone-page .account-bind-form-verified,
  .account-center-standalone-page .account-bind-form-verified > .account-form-row:nth-of-type(1),
  .account-center-standalone-page .account-bind-form-verified > .primary-button {
    grid-column: auto;
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .account-center-standalone-page .account-error {
  border-color: #754548 !important;
  background: var(--theme-danger) !important;
  color: #f0b6b8 !important;
}

/* 第 7 个“推广合作”页复用渠道组件，限制在账号中心内补齐深色层级。 */
html[data-theme="dark"] .account-center-standalone-page :is(
  .channel-summary-cell,
  .channel-referral-strip,
  .channel-notice-row,
  .channel-public-note,
  .channel-rate-editor,
  .channel-rate-editor .head,
  .channel-table th,
  .channel-inline-empty,
  .channel-contract-notice,
  .channel-trend-row > div
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-raised) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .channel-table td,
  .channel-rate-editor .row,
  .channel-panel-block
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .account-center-standalone-page .account-usage-row {
  border-color: var(--theme-border) !important;
  background: transparent !important;
}

html[data-theme="dark"] .account-center-standalone-page .account-usage-row span {
  color: var(--theme-muted) !important;
}

html[data-theme="dark"] .account-center-standalone-page .account-usage-row > span:nth-child(2) {
  color: var(--theme-text-strong) !important;
}

/* 账号中心积分页：充值、扩容与扣费明细保持紧凑，避免短内容被拉成整行卡片。 */
.account-center-standalone-page .account-wallet-section {
  display: grid;
  gap: 16px;
}

.account-center-standalone-page .account-wallet-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.account-center-standalone-page .account-recharge-packages {
  display: flex;
  flex: 1 1 620px;
  flex-wrap: wrap;
  gap: 8px;
}

.account-center-standalone-page .account-recharge-packages button {
  flex: 0 1 190px;
  width: auto;
  min-width: 154px;
  min-height: 58px;
  max-width: 220px;
  padding: 9px 12px;
  border-color: var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  color: var(--theme-text);
}

.account-center-standalone-page .account-recharge-packages button span {
  color: var(--theme-muted);
}

.account-center-standalone-page .account-custom-recharge-input {
  display: grid;
  flex: 0 0 176px;
  gap: 5px;
}

.account-center-standalone-page .account-custom-recharge-input span {
  color: var(--theme-muted);
  font-size: 12px;
}

.account-center-standalone-page .account-custom-recharge-input input {
  width: 176px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  background: var(--theme-control);
  color: var(--theme-text);
}

.account-center-standalone-page .account-wallet-grid > .account-recharge-preview {
  flex: 0 1 210px;
  min-width: 180px;
  min-height: 58px;
  padding: 9px 12px;
}

.account-center-standalone-page .account-wallet-submit {
  flex: 0 0 148px;
  min-height: 38px;
}

.account-center-standalone-page .account-agent-pricing {
  display: grid;
  gap: 10px;
  padding: 16px 0 0;
  border-top: 1px solid var(--theme-border);
}

.account-center-standalone-page .account-agent-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 8px;
}

.account-center-standalone-page .account-agent-pricing-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
}

.account-center-standalone-page .account-agent-pricing-grid article > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.account-center-standalone-page .account-agent-pricing-grid article > div span {
  color: var(--theme-success-text);
  font-size: 11px;
  font-weight: 700;
}

.account-center-standalone-page .account-agent-pricing-grid dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.account-center-standalone-page .account-agent-pricing-grid dl div {
  display: grid;
  gap: 2px;
}

.account-center-standalone-page .account-agent-pricing-grid dt {
  color: var(--theme-muted);
  font-size: 11px;
}

.account-center-standalone-page .account-agent-pricing-grid dd {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 13px;
  font-weight: 700;
}

.account-center-standalone-page .account-token-usage-cell {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 2px 12px;
  white-space: normal;
}

.account-center-standalone-page .account-token-usage-cell span {
  color: var(--theme-muted);
  font-size: 11px;
}

.account-center-standalone-page .account-token-usage-cell b {
  color: var(--theme-text-strong);
  font-size: 11px;
}

.account-center-standalone-page :is(.account-extension-section, .account-usage-detail-section, .account-order-section) {
  display: grid;
  gap: 12px;
  margin-top: 2px;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--theme-border);
  border-radius: 0;
  background: transparent;
}

.account-center-standalone-page .account-section-head.compact {
  min-height: 0;
  margin: 0;
}

.account-center-standalone-page .account-section-head.compact h3 {
  margin: 0 0 4px;
  color: var(--theme-text-strong);
  font-size: 17px;
  letter-spacing: 0;
}

.account-center-standalone-page .account-section-head.compact p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 13px;
  line-height: 1.55;
}

.account-center-standalone-page .account-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface);
}

.account-center-standalone-page .account-detail-tabs {
  display: flex;
  gap: 22px;
  min-height: 38px;
  overflow-x: auto;
  border-bottom: 1px solid var(--theme-border);
}

.account-center-standalone-page .account-detail-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--theme-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.account-center-standalone-page .account-detail-tabs button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: transparent;
  content: '';
}

.account-center-standalone-page .account-detail-tabs button.active {
  color: var(--theme-success-text);
}

.account-center-standalone-page .account-detail-tabs button.active::after {
  background: #0ea9a2;
}

.account-center-standalone-page .account-detail-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--theme-text);
  font-size: 13px;
}

.account-center-standalone-page .account-detail-table th,
.account-center-standalone-page .account-detail-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--theme-border);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
  white-space: normal;
}

.account-center-standalone-page .account-detail-table th {
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 600;
}

.account-center-standalone-page .account-detail-table tbody tr:last-child td {
  border-bottom: 0;
}

.account-center-standalone-page .account-detail-table tbody tr:hover td {
  background: var(--theme-hover);
}

.account-center-standalone-page .account-extension-summary-table td:first-child {
  min-width: 210px;
}

.account-center-standalone-page .account-extension-summary-table td:first-child small {
  display: block;
  margin-top: 3px;
  color: var(--theme-muted);
  font-size: 12px;
}

.account-center-standalone-page .account-table-empty {
  height: 72px;
  color: var(--theme-muted);
  text-align: center !important;
}

.account-center-standalone-page .account-inline-note.compact {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
}

.account-center-standalone-page .account-inline-alert-with-action {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.account-center-standalone-page .account-inline-alert-with-action .secondary-button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 12px;
}

.account-center-standalone-page .account-order-toolbar {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}

.account-center-standalone-page .account-order-type-tabs {
  flex: 1 1 auto;
  min-width: 0;
}

.account-center-standalone-page .account-order-status-filter {
  display: grid;
  flex: 0 0 150px;
  gap: 4px;
  color: var(--theme-muted);
  font-size: 12px;
}

.account-center-standalone-page .account-order-status-filter select {
  width: 150px;
  min-height: 34px;
  padding: 5px 30px 5px 9px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  background: var(--theme-control);
  color: var(--theme-text);
}

.account-center-standalone-page .account-unified-order-table {
  min-width: 980px;
  table-layout: fixed;
}

.account-center-standalone-page .account-unified-order-table th:nth-child(1) { width: 29%; }
.account-center-standalone-page .account-unified-order-table th:nth-child(2) { width: 12%; }
.account-center-standalone-page .account-unified-order-table th:nth-child(3) { width: 12%; }
.account-center-standalone-page .account-unified-order-table th:nth-child(4) { width: 12%; }
.account-center-standalone-page .account-unified-order-table th:nth-child(5) { width: 14%; }
.account-center-standalone-page .account-unified-order-table th:nth-child(6) { width: 21%; }

.account-center-standalone-page .account-unified-order-content,
.account-center-standalone-page .account-order-time {
  white-space: normal;
}

.account-center-standalone-page .account-unified-order-content b,
.account-center-standalone-page .account-unified-order-content small,
.account-center-standalone-page .account-order-time span,
.account-center-standalone-page .account-order-time small {
  display: block;
}

.account-center-standalone-page .account-unified-order-content b {
  color: var(--theme-text-strong);
  font-size: 13px;
}

.account-center-standalone-page .account-unified-order-content small,
.account-center-standalone-page .account-order-time small {
  margin-top: 3px;
  color: var(--theme-muted);
  font-size: 12px;
}

.account-center-standalone-page .account-unified-order-content .account-order-number {
  color: var(--theme-text-tertiary);
  font-size: 11px;
}

.admin-custom-recharge-rule {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(190px, 280px) 150px;
  gap: 10px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px solid var(--theme-border);
}

.admin-custom-recharge-rule:last-child {
  border-bottom: 0;
}

@media (max-width: 980px) {
  .account-center-standalone-page .account-recharge-packages {
    flex-basis: 100%;
  }

  .admin-custom-recharge-rule {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .account-center-standalone-page .account-recharge-packages button,
  .account-center-standalone-page .account-custom-recharge-input,
  .account-center-standalone-page .account-custom-recharge-input input,
  .account-center-standalone-page .account-wallet-grid > .account-recharge-preview,
  .account-center-standalone-page .account-wallet-submit {
    flex-basis: 100%;
    width: 100%;
    max-width: none;
  }

  .account-center-standalone-page .account-detail-tabs {
    gap: 16px;
  }

  .account-center-standalone-page .account-order-toolbar,
  .account-center-standalone-page .account-inline-alert-with-action {
    align-items: stretch;
    flex-direction: column;
  }

  .account-center-standalone-page .account-order-status-filter,
  .account-center-standalone-page .account-order-status-filter select {
    width: 100%;
  }
}

html[data-theme="dark"] .account-center-standalone-page :is(.account-extension-section, .account-usage-detail-section, .account-order-section) {
  border: 0 !important;
  border-top: 1px solid var(--theme-border) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 积分页最终布局：三类账户单行切换，加量包在当前行直接购买。 */
.account-center-standalone-page .account-wallet-type-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.account-center-standalone-page .account-wallet-type-tabs button {
  flex: 0 0 auto;
  min-width: 132px;
  white-space: nowrap;
}

.account-center-standalone-page .account-inline-alert {
  padding: 9px 11px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  background: var(--theme-surface-elevated);
  color: var(--theme-text);
  font-size: 13px;
  line-height: 1.5;
}

.account-center-standalone-page .account-inline-alert.error {
  border-color: var(--theme-danger-border, #e8b9b6);
  background: var(--theme-danger-soft, #fff4f3);
  color: var(--theme-danger-text, #a63e37);
}

.account-center-standalone-page .account-extension-summary-table {
  min-width: 980px;
  table-layout: fixed;
}

.account-center-standalone-page .account-extension-summary-table th:nth-child(1) {
  width: 30%;
}

.account-center-standalone-page .account-extension-summary-table th:nth-child(2) {
  width: 10%;
}

.account-center-standalone-page .account-extension-summary-table th:nth-child(3) {
  width: 19%;
}

.account-center-standalone-page .account-extension-summary-table th:nth-child(4),
.account-center-standalone-page .account-extension-summary-table th:nth-child(5) {
  width: 13%;
}

.account-center-standalone-page .account-extension-summary-table th:nth-child(6) {
  width: 15%;
}

.account-center-standalone-page .account-extension-summary-table td:first-child {
  min-width: 0;
  white-space: normal;
}

.account-center-standalone-page .account-extension-summary-table td:first-child b {
  display: block;
  color: var(--theme-text-strong);
  font-size: 13px;
}

.account-center-standalone-page .account-extension-summary-table td:first-child small {
  max-width: 360px;
  line-height: 1.45;
  white-space: normal;
}

.account-center-standalone-page .account-extension-buy-button {
  min-width: 112px;
  min-height: 34px;
  padding: 6px 12px;
  white-space: nowrap;
}

.account-center-standalone-page .account-extension-summary-table tr.is-focused-from-task > td {
  background: color-mix(in srgb, var(--primary) 9%, var(--theme-surface));
  transition: background 180ms ease;
}

.account-center-standalone-page .account-plan-card-row.is-focused-from-task {
  border-radius: 8px;
  outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent);
  outline-offset: 6px;
  transition: outline-color 180ms ease;
}

html[data-theme="dark"] .account-center-standalone-page .account-inline-alert.error {
  border-color: #70433f;
  background: #2b201f;
  color: #f0aaa3;
}

@media (max-width: 720px) {
  .account-center-standalone-page .account-wallet-type-tabs {
    display: flex;
    width: 100%;
  }

  .account-center-standalone-page .account-wallet-type-tabs button {
    flex: 1 0 132px;
  }
}

/* 用户管理：高密度列表 + 单用户详情抽屉 */
.admin-user-panel-heading {
  align-items: flex-start;
}

.icon-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.spin-icon {
  animation: admin-user-spin 850ms linear infinite;
}

@keyframes admin-user-spin {
  to { transform: rotate(360deg); }
}

.admin-user-summary-strip {
  grid-template-columns: repeat(6, minmax(112px, 1fr));
  margin-top: 10px;
}

.admin-user-filterbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(4, minmax(118px, 150px)) auto;
  gap: 7px;
  align-items: center;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.admin-user-search-field {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  background: var(--theme-control);
  color: var(--theme-muted);
}

.admin-user-search-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent);
}

.admin-user-search-field input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--theme-text);
  font: inherit;
}

.admin-user-data-table-wrap,
.admin-compact-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface);
}

.admin-user-data-table-wrap {
  margin-top: 9px;
  max-height: 630px;
}

.admin-user-data-table,
.admin-compact-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--theme-text);
  font-size: 12px;
}

.admin-user-data-table {
  min-width: 1120px;
}

.admin-user-data-table th,
.admin-user-data-table td,
.admin-compact-table th,
.admin-compact-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--theme-border);
  text-align: left;
  vertical-align: middle;
}

.admin-user-data-table th,
.admin-compact-table th {
  color: var(--theme-muted);
  background: var(--theme-surface-elevated);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-user-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.admin-user-data-table tbody tr:hover,
.admin-compact-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 4%, var(--theme-surface));
}

.admin-user-data-table tr:last-child td,
.admin-compact-table tr:last-child td {
  border-bottom: 0;
}

.admin-user-data-table th:nth-child(1) { width: 68px; }
.admin-user-data-table th:nth-child(2) { width: 205px; }
.admin-user-data-table th:nth-child(3) { width: 108px; }
.admin-user-data-table th:nth-child(4) { width: 96px; }
.admin-user-data-table th:nth-child(5) { width: 116px; }
.admin-user-data-table th:nth-child(6) { width: 145px; }
.admin-user-data-table th:nth-child(7) { width: 142px; }
.admin-user-data-table th:nth-child(8) { width: 135px; }
.admin-user-data-table th:nth-child(9) { width: 108px; }

.admin-user-identity.compact {
  gap: 1px;
}

.admin-user-identity.compact b {
  color: var(--theme-text-strong);
  font-size: 12px;
}

.admin-user-expiry,
.admin-user-count-pair,
.admin-user-activity {
  display: grid;
  gap: 3px;
}

.admin-user-expiry small,
.admin-user-activity small {
  color: var(--theme-muted);
  font-size: 11px;
}

.admin-user-expiry small.is-warning {
  color: var(--theme-warning-text);
  font-weight: 800;
}

.admin-user-frequent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-user-frequent-list > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 112px;
  height: 23px;
  padding: 0 6px;
  border: 1px solid var(--theme-border);
  border-radius: 5px;
  background: var(--theme-surface-raised);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-frequent-list > span small {
  flex: 0 0 auto;
  color: var(--theme-muted);
}

.admin-user-frequent-list em,
.admin-empty-inline {
  color: var(--theme-muted);
  font-size: 11px;
  font-style: normal;
}

.admin-user-wallets.compact {
  gap: 2px;
}

.admin-user-count-pair span {
  white-space: nowrap;
}

.admin-table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 7px 2px 0;
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-table-pagination > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.admin-table-pagination button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  cursor: pointer;
}

.admin-table-pagination button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.admin-table-pagination.compact {
  min-height: 32px;
  padding-top: 6px;
}

.admin-user-drawer-backdrop,
.admin-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  justify-content: flex-end;
  background: rgba(14, 29, 34, .38);
  backdrop-filter: blur(2px);
}

.admin-user-drawer {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1120px, calc(100vw - 56px));
  height: 100%;
  border-left: 1px solid var(--theme-border-strong);
  background: var(--theme-canvas);
  box-shadow: -18px 0 50px rgba(10, 35, 43, .18);
}

.admin-user-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px 12px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.admin-user-drawer-header > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 9px;
  align-items: center;
}

.admin-user-drawer-header h2 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 18px;
}

.admin-user-drawer-header p {
  grid-column: 2;
  margin: 0;
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-user-drawer-close {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  background: var(--theme-control);
  color: var(--theme-text-strong);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-text) 9%, transparent);
  cursor: pointer;
}

.admin-user-drawer-close:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--theme-surface-elevated);
}

.admin-user-detail-tabs {
  display: flex;
  gap: 3px;
  padding: 7px 14px 0;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface);
  overflow-x: auto;
}

.admin-user-detail-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--theme-muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.admin-user-detail-tabs button.active {
  border-bottom-color: var(--primary);
  color: var(--primary-dark);
}

.admin-user-drawer-body {
  min-height: 0;
  padding: 14px 18px 24px;
  background: var(--theme-canvas);
  overflow: auto;
}

.admin-user-detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  color: var(--theme-muted);
}

.admin-user-detail-stack {
  display: grid;
  gap: 0;
}

.admin-detail-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--theme-border);
}

.admin-detail-section:first-child {
  padding-top: 0;
}

.admin-detail-section:last-child {
  border-bottom: 0;
}

.admin-detail-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.admin-detail-section-head h3 {
  margin: 0;
  color: var(--theme-text-strong);
  font-size: 14px;
}

.admin-detail-section-head p {
  margin: 3px 0 0;
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-detail-actions,
.admin-inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-detail-actions button,
.admin-inline-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-text);
  cursor: pointer;
}

.admin-detail-actions button.primary-button,
.admin-inline-actions button.primary-button {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.admin-detail-actions button.danger-lite,
.admin-inline-actions button.danger-lite {
  color: var(--theme-danger-text);
  border-color: var(--theme-danger-border);
}

.admin-detail-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  overflow: hidden;
}

.admin-detail-facts > div {
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--theme-border);
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.admin-detail-facts > div:nth-child(4n) { border-right: 0; }
.admin-detail-facts > div:nth-last-child(-n + 4) { border-bottom: 0; }
.admin-detail-facts dt { color: var(--theme-muted); font-size: 11px; }
.admin-detail-facts dd { margin: 3px 0 0; overflow: hidden; color: var(--theme-text-strong); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.admin-mono-text {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px !important;
}

.admin-detail-metric-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface);
  overflow: hidden;
}

.admin-detail-metric-row > span {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-right: 1px solid var(--theme-border);
}

.admin-detail-metric-row > span:last-child { border-right: 0; }
.admin-detail-metric-row b { color: var(--theme-text-strong); font-size: 16px; }
.admin-detail-metric-row small { color: var(--theme-muted); font-size: 11px; }

.admin-usage-ranking {
  display: grid;
  gap: 4px;
  margin-top: 7px;
}

.admin-usage-ranking > div {
  display: grid;
  grid-template-columns: 22px minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 4px 8px;
  background: var(--theme-surface-raised);
  border-radius: 5px;
  color: var(--theme-text);
  font-size: 12px;
}

.admin-usage-ranking > div > span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-size: 10px;
  font-weight: 800;
}

.admin-usage-ranking small { color: var(--theme-muted); }

.admin-compact-table {
  min-width: 760px;
}

.admin-compact-table th,
.admin-compact-table td {
  padding: 6px 7px;
}

.admin-order-table,
.admin-ledger-table {
  min-width: 980px;
}

.admin-current-plan-strip,
.admin-wallet-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-current-plan-strip > div,
.admin-wallet-summary-line > div:not(.admin-detail-actions) {
  display: grid;
  gap: 2px;
}

.admin-current-plan-strip small,
.admin-current-plan-strip span,
.admin-wallet-summary-line small {
  color: var(--theme-muted);
  font-size: 11px;
}

.admin-current-plan-strip b,
.admin-wallet-summary-line b {
  color: var(--theme-text-strong);
  font-size: 16px;
}

.admin-wallet-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--theme-border);
}

.admin-wallet-tabs button {
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-wallet-tabs button.active {
  border-bottom-color: var(--primary);
  color: var(--primary-dark);
}

.admin-wallet-summary-line {
  justify-content: flex-start;
}

.admin-wallet-summary-line > div:not(.admin-detail-actions) {
  min-width: 132px;
  padding-right: 16px;
  border-right: 1px solid var(--theme-border);
}

.admin-wallet-summary-line .admin-detail-actions {
  margin-left: auto;
}

.admin-ledger-direction {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.admin-ledger-direction.income {
  background: var(--theme-success);
  color: var(--theme-success-text);
}

.admin-ledger-direction.expense {
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.admin-section-count {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 800;
}

.admin-account-status-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 11px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface);
}

.admin-account-status-panel p {
  margin: 0;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.55;
}

.admin-account-status-panel button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 5px;
}

.admin-account-status-panel button.danger-lite {
  border: 1px solid var(--theme-danger-border);
  background: var(--theme-control);
  color: var(--theme-danger-text);
}

.admin-dialog-backdrop {
  z-index: 1500;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.admin-operation-dialog {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid var(--theme-border-strong);
  border-radius: 8px;
  background: var(--theme-surface);
  box-shadow: 0 24px 70px rgba(10, 35, 43, .28);
}

.admin-operation-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--theme-border);
}

.admin-operation-dialog h3 { margin: 0; color: var(--theme-text-strong); font-size: 16px; }
.admin-operation-dialog header p { margin: 3px 0 0; color: var(--theme-muted); font-size: 12px; }
.admin-operation-dialog form { display: grid; gap: 11px; padding: 14px 15px 15px; }
.admin-operation-dialog label { display: grid; gap: 5px; color: var(--theme-text); font-size: 12px; font-weight: 800; }
.admin-operation-dialog label small { color: var(--theme-muted); font-size: 11px; font-weight: 500; }
.admin-operation-dialog textarea { resize: vertical; }
.admin-operation-dialog footer { display: flex; justify-content: flex-end; gap: 7px; padding-top: 3px; }

.admin-dialog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.admin-short-input {
  max-width: 180px;
}

.admin-dialog-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-balance-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-balance-preview span { display: grid; gap: 2px; }
.admin-balance-preview b { color: var(--theme-text-strong); font-size: 14px; }
.admin-balance-preview b.is-danger { color: var(--theme-danger-text); }

.admin-owner-quota-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  background: var(--theme-surface-raised);
  color: var(--theme-muted);
  font-size: 12px;
}

.admin-owner-quota-notice svg { flex: 0 0 auto; color: var(--primary-dark); }
.admin-owner-quota-notice b { margin: 0 4px; color: var(--theme-text-strong); }

.admin-automation-quota-table {
  min-width: 860px;
  table-layout: fixed;
}

.admin-automation-quota-table th:nth-child(1) { width: 25%; }
.admin-automation-quota-table th:nth-child(2) { width: 15%; }
.admin-automation-quota-table th:nth-child(3) { width: 20%; }
.admin-automation-quota-table th:nth-child(4) { width: 13%; }
.admin-automation-quota-table th:nth-child(5) { width: 16%; }
.admin-automation-quota-table th:nth-child(6) { width: 86px; }

.admin-account-quota-table {
  min-width: 760px;
  table-layout: fixed;
}

.admin-account-quota-table th:nth-child(1) { width: 18%; }
.admin-account-quota-table th:nth-child(2),
.admin-account-quota-table th:nth-child(3),
.admin-account-quota-table th:nth-child(4) { width: 12%; }
.admin-account-quota-table th:nth-child(5),
.admin-account-quota-table th:nth-child(6),
.admin-account-quota-table th:nth-child(7) { width: 10%; }
.admin-account-quota-table th:nth-child(8) { width: 96px; }

.admin-automation-group-list {
  display: grid;
  gap: 6px;
}

.admin-automation-group {
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface);
  overflow: hidden;
}

.admin-automation-group-head {
  display: grid;
  grid-template-columns: 30px minmax(180px, 1fr) minmax(145px, auto) auto;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 8px;
}

.admin-automation-expand {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--theme-border-strong);
  border-radius: 5px;
  background: var(--theme-control);
  color: var(--theme-muted);
  cursor: pointer;
}

.admin-automation-expand:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
}

.admin-automation-group-title,
.admin-automation-group-state,
.admin-automation-capability-row > div,
.admin-automation-dialog-target {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-automation-group-title b,
.admin-automation-capability-row b,
.admin-automation-dialog-target b {
  overflow: hidden;
  color: var(--theme-text-strong);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-automation-group-title small,
.admin-automation-group-state small,
.admin-automation-capability-row small,
.admin-automation-dialog-target small,
.admin-automation-dialog-target span {
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-automation-group-state {
  min-width: 150px;
  text-align: right;
}

.admin-automation-group-state b {
  color: var(--primary-dark);
  font-size: 12px;
}

.admin-automation-capability-list {
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface-raised);
}

.admin-automation-capability-head,
.admin-automation-capability-row {
  display: grid;
  grid-template-columns: minmax(210px, 2fr) minmax(92px, .9fr) minmax(98px, .9fr) minmax(98px, .9fr) 88px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--theme-border);
  color: var(--theme-text);
  font-size: 12px;
}

.admin-automation-capability-head {
  min-height: 30px;
  color: var(--theme-muted);
  background: var(--theme-surface-elevated);
  font-size: 11px;
  font-weight: 800;
}

.admin-automation-capability-row:last-child { border-bottom: 0; }
.admin-automation-capability-row > span { white-space: nowrap; }
.admin-automation-capability-row button { justify-self: end; }

.admin-automation-dialog-target {
  padding: 8px 9px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
}

.admin-automation-feature,
.admin-automation-balance,
.admin-automation-ledger-note {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-automation-feature b,
.admin-automation-balance b,
.admin-automation-ledger-note b {
  overflow: hidden;
  color: var(--theme-text-strong);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-automation-feature small,
.admin-automation-balance small,
.admin-automation-ledger-note small,
.admin-muted-value {
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-automation-ledger-table {
  min-width: 900px;
  table-layout: fixed;
}

.admin-automation-ledger-table th:nth-child(1) { width: 136px; }
.admin-automation-ledger-table th:nth-child(2) { width: 155px; }
.admin-automation-ledger-table th:nth-child(3) { width: 82px; }
.admin-automation-ledger-table th:nth-child(4),
.admin-automation-ledger-table th:nth-child(5) { width: 112px; }

.admin-segment-field {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-segment-field legend {
  padding: 0;
  color: var(--theme-text);
  font-size: 12px;
  font-weight: 800;
}

.admin-segment-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  width: min(340px, 100%);
  padding: 3px;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-surface-raised);
}

.admin-segment-control button {
  min-height: 31px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-segment-control button.active {
  background: var(--theme-control);
  color: var(--primary-dark);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--theme-text) 10%, transparent);
}

.admin-segment-control button:disabled { cursor: not-allowed; opacity: .42; }

.admin-number-with-unit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
}

.admin-number-with-unit b {
  color: var(--theme-muted);
  font-size: 12px;
}

html[data-theme="dark"] .admin-user-drawer-backdrop,
html[data-theme="dark"] .admin-dialog-backdrop {
  background: rgba(3, 10, 13, .68);
}

@media (max-width: 1180px) {
  .admin-user-summary-strip { grid-template-columns: repeat(3, minmax(112px, 1fr)); }
  .admin-user-filterbar { grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(118px, 150px)) auto; }
  .admin-user-filterbar select:nth-of-type(3),
  .admin-user-filterbar select:nth-of-type(4) { display: none; }
  .admin-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-detail-facts > div:nth-child(4n) { border-right: 1px solid var(--theme-border); }
  .admin-detail-facts > div:nth-child(2n) { border-right: 0; }
  .admin-detail-facts > div:nth-last-child(-n + 4) { border-bottom: 1px solid var(--theme-border); }
  .admin-detail-facts > div:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 760px) {
  .admin-user-summary-strip { grid-template-columns: repeat(2, minmax(108px, 1fr)); }
  .admin-user-filterbar { grid-template-columns: 1fr 1fr; }
  .admin-user-search-field { grid-column: 1 / -1; }
  .admin-user-filterbar .primary-button { width: 100%; }
  .admin-user-drawer { width: 100vw; }
  .admin-user-drawer-header { padding: 12px; }
  .admin-user-drawer-body { padding: 12px; }
  .admin-detail-facts,
  .admin-detail-metric-row,
  .admin-dialog-grid { grid-template-columns: 1fr; }
  .admin-detail-facts > div { border-right: 0 !important; border-bottom: 1px solid var(--theme-border) !important; }
  .admin-detail-facts > div:last-child { border-bottom: 0 !important; }
  .admin-detail-metric-row > span { border-right: 0; border-bottom: 1px solid var(--theme-border); }
  .admin-detail-metric-row > span:last-child { border-bottom: 0; }
  .admin-automation-group-head { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .admin-automation-group-state { display: none; }
  .admin-automation-capability-head { display: none; }
  .admin-automation-capability-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; }
  .admin-automation-capability-row > span:nth-of-type(1)::before { content: '套餐 '; color: var(--theme-muted); }
  .admin-automation-capability-row > span:nth-of-type(2)::before { content: '手工 '; color: var(--theme-muted); }
  .admin-automation-capability-row > span:nth-of-type(3)::before { content: '可用 '; color: var(--theme-muted); }
  .admin-current-plan-strip,
  .admin-wallet-summary-line,
  .admin-detail-section-head,
  .admin-account-status-panel { align-items: stretch; flex-direction: column; }
  .admin-wallet-summary-line > div:not(.admin-detail-actions) { border-right: 0; border-bottom: 1px solid var(--theme-border); padding: 6px 0; }
  .admin-wallet-summary-line .admin-detail-actions { margin-left: 0; }
  .admin-usage-ranking > div { grid-template-columns: 22px 1fr; }
  .admin-usage-ranking small { grid-column: 2; }
}
.category-preflight-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--theme-overlay, #07111f) 62%, transparent);
}

.category-preflight-dialog {
  width: min(680px, 100%);
  max-height: min(82vh, 760px);
  overflow: auto;
  border: 1px solid var(--theme-border-strong);
  border-radius: 12px;
  background: var(--theme-surface);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--theme-overlay, #07111f) 38%, transparent);
  color: var(--theme-text);
}

.category-preflight-dialog > header,
.category-preflight-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.category-preflight-dialog > header {
  border-bottom: 1px solid var(--theme-border);
}

.category-preflight-dialog > footer {
  justify-content: flex-end;
  border-top: 1px solid var(--theme-border);
}

.category-preflight-dialog h2 {
  margin: 2px 0 0;
  color: var(--theme-text-strong);
  font-size: 18px;
}

.category-preflight-kicker {
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
}

.category-preflight-close {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-control);
  color: var(--theme-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.category-preflight-close:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-hover);
  color: var(--theme-text-strong);
}

.category-preflight-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 18px 8px;
}

.category-preflight-counts > div {
  display: grid;
  gap: 2px;
  min-height: 70px;
  align-content: center;
  padding: 10px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface-raised);
}

.category-preflight-counts strong {
  color: var(--theme-text-strong);
  font-size: 20px;
}

.category-preflight-counts span {
  color: var(--theme-muted);
  font-size: 11px;
  line-height: 1.35;
}

.category-preflight-counts .ready {
  border-color: color-mix(in srgb, var(--theme-success, #16a36a) 45%, var(--theme-border));
}

.category-preflight-counts .warning {
  border-color: color-mix(in srgb, var(--theme-warning, #d97706) 52%, var(--theme-border));
}

.category-preflight-message {
  margin: 8px 18px 12px;
  padding: 12px 14px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface-raised);
}

.category-preflight-message.ready {
  border-color: color-mix(in srgb, var(--theme-success, #16a36a) 45%, var(--theme-border));
  background: color-mix(in srgb, var(--theme-success, #16a36a) 8%, var(--theme-surface));
}

.category-preflight-message.warning,
.category-preflight-message.blocked {
  border-color: color-mix(in srgb, var(--theme-warning, #d97706) 55%, var(--theme-border));
  background: color-mix(in srgb, var(--theme-warning, #d97706) 9%, var(--theme-surface));
}

.category-preflight-message strong {
  color: var(--theme-text-strong);
  font-size: 13px;
}

.category-preflight-message p {
  margin: 5px 0 0;
  color: var(--theme-text);
  font-size: 12px;
  line-height: 1.55;
}

.category-preflight-details {
  margin: 0 18px 8px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface-raised);
}

.category-preflight-details summary {
  padding: 10px 12px;
  color: var(--theme-text-strong);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.category-preflight-details ul {
  display: grid;
  gap: 7px;
  max-height: 180px;
  margin: 0;
  padding: 0 12px 12px 30px;
  overflow: auto;
}

.category-preflight-details li {
  color: var(--theme-text);
  font-size: 12px;
}

.category-preflight-details li span {
  display: block;
  margin-top: 1px;
  color: var(--theme-muted);
  font-size: 11px;
}

.category-preflight-footnote {
  margin: 10px 18px 16px;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 680px) {
  .category-preflight-backdrop {
    padding: 12px;
  }

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

/* 配置管理后台：财务与数据分析 */
.finance-admin-page {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
  color: var(--theme-text);
}

.finance-page-heading,
.finance-section-heading,
.finance-table-toolbar,
.finance-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.finance-page-heading {
  padding: 10px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface);
}

.finance-page-heading h2,
.finance-section-heading h3,
.finance-detail-drawer h3,
.finance-detail-drawer h4 {
  margin: 0;
  color: var(--theme-text-strong);
  letter-spacing: 0;
}

.finance-page-heading h2 {
  font-size: 18px;
}

.finance-page-heading p,
.finance-section-heading p,
.finance-detail-note {
  margin: 3px 0 0;
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.5;
}

.finance-heading-actions,
.finance-filter-actions,
.finance-segmented,
.finance-chart-legend {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.finance-view-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 38px;
  padding: 4px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface);
}

.finance-view-tabs button,
.finance-segmented button {
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--theme-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.finance-view-tabs button {
  min-height: 29px;
  padding: 5px 14px;
}

.finance-view-tabs button:hover,
.finance-segmented button:hover {
  background: var(--theme-hover);
  color: var(--theme-text-strong);
}

.finance-view-tabs button.active,
.finance-segmented button.active {
  border-color: var(--theme-success-border);
  background: var(--theme-active);
  color: var(--theme-success-text);
}

.finance-view-tabs b {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--theme-danger);
  color: var(--theme-danger-text);
  font-size: 10px;
}

.finance-filter-strip {
  display: grid;
  grid-template-columns: 124px 124px minmax(190px, 1.4fr) minmax(128px, 0.85fr) minmax(150px, 1fr) minmax(132px, 0.8fr) auto;
  gap: 7px;
  align-items: end;
  padding: 8px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface);
}

.finance-filter-strip label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--theme-muted);
  font-size: 11px;
}

.finance-filter-strip input,
.finance-filter-strip select,
.finance-table-toolbar select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 3px 8px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  outline: none;
  background: var(--theme-control);
  color: var(--theme-text);
  font: inherit;
  font-size: 12px;
}

.finance-filter-strip input:focus,
.finance-filter-strip select:focus,
.finance-table-toolbar select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent);
}

.finance-filter-actions {
  justify-content: flex-end;
  min-width: max-content;
}

.finance-filter-actions button {
  min-height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.finance-kpi {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface);
  color: var(--theme-text);
  text-align: left;
  cursor: pointer;
}

.finance-kpi:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-hover);
}

.finance-kpi > span {
  color: var(--theme-muted);
  font-size: 11px;
}

.finance-kpi strong {
  overflow: hidden;
  color: var(--theme-text-strong);
  font-size: 19px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-kpi small {
  min-height: 16px;
  color: var(--theme-muted);
  font-size: 10px;
}

.finance-kpi em {
  overflow: hidden;
  color: var(--theme-muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-kpi.has-issue {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
}

.finance-kpi.has-issue strong {
  color: var(--theme-warning-text);
}

.finance-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
  gap: 10px;
}

.finance-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface);
}

.finance-section-heading {
  min-height: 48px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--theme-border);
}

.finance-section-heading h3 {
  font-size: 14px;
}

.finance-section-heading-controls {
  flex-wrap: wrap;
}

.finance-segmented {
  padding: 3px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.finance-segmented button {
  min-height: 27px;
  padding: 4px 10px;
}

.finance-trend-wrap {
  min-height: 250px;
  padding: 8px 10px 2px;
}

.finance-chart-legend {
  justify-content: flex-end;
  min-height: 23px;
  color: var(--theme-muted);
  font-size: 10px;
}

.finance-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.finance-chart-legend i {
  width: 9px;
  height: 3px;
  border-radius: 1px;
}

.finance-trend-chart {
  display: block;
  width: 100%;
  height: 220px;
}

.finance-chart-grid {
  stroke: var(--theme-border);
  stroke-width: 1;
}

.finance-chart-zero {
  stroke: var(--theme-border-strong);
  stroke-width: 1.2;
}

.finance-chart-axis-text {
  fill: var(--theme-muted);
  font-size: 10px;
}

.finance-bars {
  display: grid;
  gap: 9px;
  padding: 15px 12px;
}

.finance-bar-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(90px, 1.25fr) 76px;
  gap: 7px;
  align-items: center;
}

.finance-bar-label {
  overflow: hidden;
  color: var(--theme-text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-bar-track {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--theme-surface-elevated);
}

.finance-bar-track i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
}

.finance-bar-track i.negative {
  background: var(--theme-danger-text);
}

.finance-bar-row strong {
  color: var(--theme-success-text);
  font-size: 11px;
  text-align: right;
}

.finance-bar-row strong.negative,
.negative-text {
  color: var(--theme-danger-text) !important;
}

.positive-text {
  color: var(--theme-success-text) !important;
}

.finance-table-toolbar {
  min-height: 38px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--theme-border);
  color: var(--theme-muted);
  font-size: 11px;
}

.finance-table-toolbar label {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.finance-table-toolbar select {
  width: 68px;
  height: 27px;
}

.finance-table-wrap {
  position: relative;
  max-height: 610px;
  overflow-x: hidden;
  overflow-y: auto;
}

.finance-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: var(--theme-text);
  font-size: 11px;
}

.finance-table th {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 7px 8px;
  border-bottom: 1px solid var(--theme-border-strong);
  background: var(--theme-surface-elevated);
  color: var(--theme-text-strong);
  font-weight: 700;
  text-align: left;
}

.finance-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--theme-border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.finance-table tbody tr:hover {
  background: var(--theme-hover);
}

.finance-table td strong,
.finance-table td small {
  display: block;
  letter-spacing: 0;
}

.finance-table td strong {
  color: var(--theme-text-strong);
  font-size: 11px;
  line-height: 1.45;
}

.finance-table td small {
  margin-top: 2px;
  color: var(--theme-muted);
  font-size: 10px;
  line-height: 1.4;
}

.finance-task-table th:nth-child(1),
.finance-task-table th:nth-child(5) {
  width: 16%;
}

.finance-task-table th:nth-child(2) {
  width: 19%;
}

.finance-task-table th:nth-child(3) {
  width: 17%;
}

.finance-task-table th:nth-child(4) {
  width: 20%;
}

.finance-task-table th:nth-child(6) {
  width: 12%;
}

.finance-order-table th:nth-child(1),
.finance-order-table th:nth-child(4) {
  width: 15%;
}

.finance-order-table th:nth-child(2) {
  width: 20%;
}

.finance-order-table th:nth-child(3) {
  width: 18%;
}

.finance-order-table th:nth-child(5) {
  width: 22%;
}

.finance-order-table th:nth-child(6) {
  width: 10%;
}

.finance-wallet-table th:nth-child(1),
.finance-wallet-table th:nth-child(2),
.finance-wallet-table th:nth-child(5) {
  width: 17%;
}

.finance-wallet-table th:nth-child(3),
.finance-wallet-table th:nth-child(4) {
  width: 19%;
}

.finance-wallet-table th:nth-child(6) {
  width: 11%;
}

.finance-business-table th:first-child {
  width: 22%;
}

.finance-business-table th:nth-child(2),
.finance-business-table th:nth-child(3) {
  width: 15%;
}

.finance-business-table th:nth-child(4),
.finance-business-table th:nth-child(5) {
  width: 18%;
}

.finance-business-table th:last-child {
  width: 12%;
}

.finance-issues-table th:nth-child(1) {
  width: 15%;
}

.finance-issues-table th:nth-child(2),
.finance-issues-table th:nth-child(4),
.finance-issues-table th:nth-child(5) {
  width: 12%;
}

.finance-issues-table th:nth-child(3) {
  width: 17%;
}

.finance-issues-table th:nth-child(6) {
  width: 32%;
}

.finance-status {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  padding: 2px 5px;
  border: 1px solid var(--theme-success-border);
  border-radius: 4px;
  background: var(--theme-success);
  color: var(--theme-success-text);
  font-size: 10px;
  line-height: 1.25;
}

.finance-status-loss,
.finance-status-missing_cost,
.finance-status-missing_pricing_snapshot,
.finance-status-needs_review {
  border-color: var(--theme-warning-border);
  background: var(--theme-warning);
  color: var(--theme-warning-text);
}

.finance-detail-button {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.finance-issue-message {
  margin: 0;
  color: var(--theme-text);
  font-size: 10px;
  line-height: 1.45;
}

.finance-issue-summary {
  padding: 4px 7px;
  border: 1px solid var(--theme-warning-border);
  border-radius: 5px;
  background: var(--theme-warning);
  color: var(--theme-warning-text);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.finance-pagination {
  min-height: 38px;
  justify-content: flex-end;
  padding: 5px 9px;
  border-top: 1px solid var(--theme-border);
  color: var(--theme-muted);
  font-size: 11px;
}

.finance-empty {
  display: flex;
  min-height: 110px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--theme-muted);
  font-size: 12px;
  text-align: center;
}

.finance-loading {
  position: absolute;
  z-index: 8;
  top: 55px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  box-shadow: var(--shadow);
  background: var(--theme-surface);
  color: var(--theme-muted);
  font-size: 11px;
}

.finance-loading span {
  width: 13px;
  height: 13px;
  border: 2px solid var(--theme-border-strong);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: finance-spin 0.75s linear infinite;
}

@keyframes finance-spin {
  to {
    transform: rotate(360deg);
  }
}

.finance-drawer-backdrop {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  background: rgba(8, 25, 32, 0.36);
}

.finance-detail-drawer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(720px, 94vw);
  height: 100%;
  border-left: 1px solid var(--theme-border-strong);
  box-shadow: -12px 0 30px rgba(8, 25, 32, 0.18);
  background: var(--theme-surface);
}

.finance-detail-drawer > header,
.finance-detail-drawer > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--theme-border);
}

.finance-detail-drawer > footer {
  justify-content: flex-end;
  border-top: 1px solid var(--theme-border);
  border-bottom: 0;
}

.finance-drawer-eyebrow {
  color: var(--theme-muted);
  font-size: 10px;
}

.finance-detail-drawer h3 {
  margin-top: 2px;
  font-size: 16px;
}

.finance-drawer-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  padding: 12px 14px 20px;
  overflow-y: auto;
}

.finance-drawer-body section {
  padding: 10px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.finance-detail-drawer h4 {
  margin-bottom: 8px;
  font-size: 13px;
}

.finance-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 6px;
  background: var(--theme-border);
}

.finance-detail-grid > div {
  min-width: 0;
  padding: 7px 8px;
  background: var(--theme-surface);
}

.finance-detail-grid dt {
  color: var(--theme-muted);
  font-size: 10px;
}

.finance-detail-grid dd {
  margin: 2px 0 0;
  color: var(--theme-text-strong);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.finance-detail-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--theme-warning-border);
  border-radius: 6px;
  background: var(--theme-warning);
  color: var(--theme-warning-text);
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 1280px) {
  .finance-filter-strip {
    grid-template-columns: 124px 124px minmax(190px, 1fr) repeat(3, minmax(130px, 0.75fr));
  }

  .finance-filter-actions {
    grid-column: -2 / -1;
  }

  .finance-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .finance-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-filter-keyword,
  .finance-filter-actions {
    grid-column: 1 / -1;
  }

  .finance-overview-grid {
    grid-template-columns: 1fr;
  }

  .finance-table-wrap {
    max-height: 520px;
  }
}

@media (max-width: 680px) {
  .finance-page-heading,
  .finance-section-heading,
  .finance-table-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .finance-heading-actions,
  .finance-filter-actions {
    width: 100%;
  }

  .finance-heading-actions button,
  .finance-filter-actions button {
    flex: 1;
  }

  .finance-view-tabs {
    overflow-x: auto;
  }

  .finance-view-tabs button {
    flex: 0 0 auto;
  }

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

  .finance-filter-strip {
    grid-template-columns: 1fr;
  }

  .finance-filter-keyword,
  .finance-filter-actions {
    grid-column: auto;
  }

  .finance-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-26: Keep the established wide layout, and only reflow pages when
   the real workspace width becomes too small. Viewport width is not a safe
   proxy because the sidebar and Agent panel both reduce the usable area. */
.main {
  container-name: yundian-workspace;
  container-type: inline-size;
}

@container yundian-workspace (max-width: 1460px) {
  .main .local-task-grid {
    grid-template-columns:
      minmax(300px, 400px)
      minmax(220px, 270px)
      minmax(150px, 170px)
      minmax(185px, 210px);
  }

  .main .local-task-grid > * {
    min-width: 0;
  }
}

@container yundian-workspace (max-width: 1250px) {
  .main .material-task-grid.material-extract-task-grid {
    grid-template-columns: minmax(180px, 0.65fr) minmax(320px, 1.35fr);
    grid-template-areas:
      "level level"
      "source output-root"
      "output-level repeat"
      "template template";
  }

  .main .material-extract-template-field {
    justify-self: stretch;
  }

  .main .material-extract-layout,
  .main .material-two-column,
  .main .material-template-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .main .material-detail-workbench {
    grid-template-columns: minmax(340px, 0.72fr) minmax(0, 1.28fr);
  }

  .main .detail-compare-batch-stage {
    grid-template-columns: minmax(150px, 0.86fr) minmax(100px, 0.56fr) minmax(240px, 1.26fr);
    gap: 12px;
  }

  .main .extract-output-path {
    grid-template-columns: minmax(0, 1fr);
  }

  .main .extract-output-path .required-field-error {
    grid-column: 1;
  }

  .main .compact-task-path,
  .main .material-scope-tabs {
    width: 100%;
  }

  .main :is(
    .material-extract-layout,
    .material-detail-workbench,
    .material-template-layout,
    .material-extract-task-grid,
    .dye-entry-filter-grid,
    .dye-entry-public-grid
  ) > * {
    min-width: 0;
  }
}

@container yundian-workspace (max-width: 1150px) {
  .main .local-task-grid {
    grid-template-columns: repeat(2, minmax(240px, 360px));
    justify-content: start;
  }
}

@container yundian-workspace (max-width: 1100px) {
  .main .dye-module-grid,
  .main .dye-module-grid-dense {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main .dye-module-grid .dye-wide-option,
  .main .dye-module-grid .dye-path-field {
    grid-column: span 2;
  }

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

@container yundian-workspace (max-width: 1040px) {
  .main .title-single-layout,
  .main .title-result-grid,
  .main .title-single-compact-grid,
  .main .title-single-input-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .main .title-single-compact-grid > *,
  .main .title-single-input-grid > * {
    min-width: 0;
  }
}

@container yundian-workspace (max-width: 1000px) {
  .main .attribute-flow-row,
  .main .attribute-chip-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .main .attribute-flow-arrow {
    width: 24px;
    text-align: left;
    transform: rotate(90deg);
  }
}

/* 配置后台同样按正文实际宽度收缩：副屏或高显示缩放下，
   左侧菜单会先占用空间，不能继续只按整个浏览器窗口判断。 */
@container yundian-workspace (max-width: 960px) {
  .main .finance-page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .main .finance-heading-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  .main .finance-view-tabs {
    flex-wrap: wrap;
  }

  .main .finance-filter-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main .finance-filter-keyword,
  .main .finance-filter-actions {
    grid-column: 1 / -1;
  }
}

@container yundian-workspace (max-width: 900px) {
  .main .material-detail-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .main .dye-grid-6,
  .main .dye-grid-4,
  .main .dye-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main .dye-span-3,
  .main .dye-template-field {
    grid-column: span 2;
  }

  .main .dye-section-head,
  .main .dye-action-dock {
    align-items: flex-start;
    flex-direction: column;
  }

  .main .dye-section-actions {
    width: 100%;
    margin-left: 0;
  }

  .main .dye-entry-source-head,
  .main .dye-entry-source-control,
  .main .dye-login-environment-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .main .dye-entry-source-control {
    width: 100%;
  }

}

@container yundian-workspace (max-width: 760px) {
  .main .local-task-grid,
  .main .material-task-grid.material-extract-task-grid,
  .main .dye-grid-6,
  .main .dye-grid-4,
  .main .dye-media-grid,
  .main .dye-module-grid,
  .main .dye-module-grid-dense {
    grid-template-columns: minmax(0, 1fr);
  }

  .main .material-task-grid.material-extract-task-grid {
    grid-template-areas:
      "level"
      "source"
      "output-root"
      "output-level"
      "repeat"
      "template";
  }

  .main .material-extract-level-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .main .dye-span-2,
  .main .dye-span-3,
  .main .dye-template-field,
  .main .dye-shop-field,
  .main .dye-module-grid .dye-wide-option,
  .main .dye-module-grid .dye-path-field {
    grid-column: span 1;
  }
}

/* 账号中心“平台店铺”页：国内流程保持原样，跨境名额使用同页分段。 */
.account-market-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(88px, 1fr));
  gap: 3px;
  width: fit-content;
  padding: 3px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.account-market-tabs button {
  min-height: 34px;
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--theme-muted);
  font-weight: 750;
  cursor: pointer;
}

.account-market-tabs button:hover {
  background: var(--theme-hover);
  color: var(--theme-text-strong);
}

.account-market-tabs button.active {
  border-color: var(--theme-accent-border);
  background: var(--theme-surface);
  color: var(--theme-accent-text);
}

.account-cross-border-panel,
.account-cross-border-block,
.account-cross-border-platform-list,
.account-cross-border-erp-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.account-cross-border-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 8px;
}

.account-cross-border-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-raised);
}

.account-cross-border-summary span,
.account-cross-border-note span,
.account-cross-border-replace span,
.account-cross-border-platform-name span,
.account-cross-border-platform-time,
.account-cross-border-erp-row span,
.account-cross-border-readonly {
  color: var(--theme-muted);
  font-size: 12px;
  line-height: 1.45;
}

.account-cross-border-summary b,
.account-cross-border-replace strong,
.account-cross-border-platform-name b,
.account-cross-border-erp-row b {
  color: var(--theme-text-strong);
}

.account-cross-border-summary b {
  font-size: 18px;
}

.account-cross-border-note,
.account-cross-border-replace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-info);
}

.account-cross-border-replace {
  background: var(--theme-warning);
}

.account-cross-border-replace > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.account-cross-border-block {
  padding-top: 4px;
}

.account-cross-border-platform-list,
.account-cross-border-erp-list {
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
  background: var(--theme-surface);
}

.account-cross-border-platform-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.15fr) 84px minmax(190px, 1fr) minmax(220px, auto);
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 52px;
  padding: 9px 11px;
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.account-cross-border-platform-row:first-child,
.account-cross-border-erp-row:first-child {
  border-top: 0;
}

.account-cross-border-platform-row.bound {
  background: var(--theme-accent-soft);
}

.account-cross-border-platform-row.plan-over-limit {
  background: var(--theme-warning);
  box-shadow: inset 3px 0 0 var(--theme-warning-border);
}

.account-cross-border-platform-name {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.account-cross-border-platform-name b,
.account-cross-border-platform-name span,
.account-cross-border-platform-time {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-cross-border-panel .account-shop-status.active {
  background: var(--theme-success);
  color: var(--theme-success-text) !important;
}

.account-cross-border-panel .account-shop-status.unavailable {
  background: var(--theme-warning);
  color: var(--theme-warning-text) !important;
}

.account-cross-border-readonly {
  padding: 3px 0;
}

.account-cross-border-erp-form {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(220px, 360px) auto;
  gap: 10px;
  align-items: end;
  max-width: 820px;
}

.account-cross-border-erp-form .account-form-row input,
.account-cross-border-erp-form .account-form-row select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 6px;
  background: var(--theme-control);
  color: var(--theme-text-strong);
}

.account-cross-border-erp-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 0.7fr) 86px minmax(145px, auto) auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 8px 11px;
  border-top: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.account-cross-border-erp-login-button {
  min-width: 126px;
  white-space: nowrap;
}

.account-cross-border-erp-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.account-cross-border-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--theme-border);
  border-radius: 8px;
}

.account-cross-border-store-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  background: var(--theme-surface);
  color: var(--theme-text);
  font-size: 12px;
}

.account-cross-border-store-table th,
.account-cross-border-store-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--theme-border);
  text-align: left;
  vertical-align: middle;
}

.account-cross-border-store-table th {
  background: var(--theme-surface-elevated);
  color: var(--theme-muted);
  font-weight: 800;
  white-space: nowrap;
}

.account-cross-border-store-table td {
  color: var(--theme-text);
}

.account-cross-border-store-table tbody tr:last-child td {
  border-bottom: 0;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-market-tabs,
  .account-cross-border-summary > div,
  .account-cross-border-platform-list,
  .account-cross-border-platform-row,
  .account-cross-border-erp-list,
  .account-cross-border-erp-row,
  .account-cross-border-table-scroll,
  .account-cross-border-store-table
) {
  border-color: var(--theme-border) !important;
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-center-standalone-page :is(
  .account-cross-border-note,
  .account-cross-border-replace
) {
  border-color: var(--theme-border-strong) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .account-center-standalone-page .account-cross-border-platform-row.bound {
  background: var(--theme-active) !important;
}

html[data-theme="dark"] .account-center-standalone-page .account-cross-border-platform-row.plan-over-limit {
  background: var(--theme-warning) !important;
}

@media (max-width: 1180px) {
  .account-cross-border-platform-row,
  .account-cross-border-erp-row,
  .account-cross-border-erp-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-cross-border-platform-row .account-row-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .account-market-tabs {
    width: 100%;
  }

  .account-cross-border-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-cross-border-note,
  .account-cross-border-replace {
    align-items: stretch;
    flex-direction: column;
  }
}
.sku-parameter-panel{display:grid;gap:10px}.sku-parameter-title{align-items:center}.sku-parameter-switch{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 10px;border:1px solid var(--theme-border-strong);border-radius:999px;background:var(--theme-control);color:var(--theme-muted);font:inherit;cursor:pointer}.sku-parameter-switch>span{position:relative;width:32px;height:18px;border-radius:999px;background:var(--theme-border-strong);transition:.16s}.sku-parameter-switch>span:after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--theme-on-accent);transition:.16s}.sku-parameter-switch.is-on{border-color:var(--primary);color:var(--primary-dark);background:var(--theme-active)}.sku-parameter-switch.is-on>span{background:var(--primary)}.sku-parameter-switch.is-on>span:after{transform:translateX(14px)}.sku-parameter-switch b{font-size:12px}.sku-parameter-warning{padding:8px 10px;border:1px solid var(--theme-warning,#d88916);border-radius:6px;background:var(--theme-warning-soft,var(--theme-active));color:var(--theme-text);font-size:12px;line-height:1.5}.sku-parameter-body{display:grid;gap:9px}.sku-parameter-block{min-width:0;padding:10px 11px;border:1px solid var(--theme-border);border-radius:7px;background:var(--theme-surface-raised)}.sku-parameter-block-head,.sku-parameter-category-block{display:flex;align-items:center;justify-content:space-between;gap:12px}.sku-parameter-block-head>div:first-child,.sku-parameter-category-block>div{min-width:0}.sku-parameter-block strong{display:block;color:var(--theme-text-strong);font-size:13px}.sku-parameter-block-head span,.sku-parameter-category-block span{display:block;margin-top:3px;color:var(--theme-muted);font-size:11px;line-height:1.4}.sku-parameter-block>small{display:block;margin-top:7px;color:var(--theme-muted);font-size:11px;line-height:1.45}.sku-parameter-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.sku-parameter-empty{margin-top:9px;padding:10px;border:1px dashed var(--theme-border-strong);border-radius:6px;color:var(--theme-muted);font-size:12px}.sku-parameter-empty.error{border-color:var(--theme-danger,#d33);color:var(--theme-danger,#b42318)}.sku-parameter-field-list{display:grid;gap:7px;margin-top:9px}.sku-parameter-field-row{display:grid;grid-template-columns:minmax(250px,1.2fr) auto minmax(200px,1fr);align-items:center;gap:9px;padding:8px;border:1px solid var(--theme-border);border-radius:6px;background:var(--theme-surface)}.sku-parameter-field-copy{min-width:0}.sku-parameter-field-copy>div{display:flex;align-items:center;gap:6px}.sku-parameter-field-copy b{font-size:12px}.sku-parameter-field-copy em,.sku-parameter-field-copy i{font-size:10px;font-style:normal}.sku-parameter-field-copy em{color:var(--theme-danger,#c52b1c);font-weight:700}.sku-parameter-field-copy em.optional{color:var(--theme-muted);font-weight:500}.sku-parameter-field-copy i{padding:2px 5px;border-radius:99px;background:var(--theme-surface-elevated);color:var(--theme-muted)}.sku-parameter-field-copy>button{display:block;max-width:100%;overflow:hidden;margin-top:4px;padding:0;border:0;background:transparent;color:var(--primary-dark);font:inherit;font-size:11px;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.sku-parameter-mode{display:inline-flex;border:1px solid var(--theme-border-strong);border-radius:5px;overflow:hidden}.sku-parameter-mode button{display:inline-flex;align-items:center;gap:3px;min-height:29px;padding:0 8px;border:0;border-right:1px solid var(--theme-border);background:var(--theme-control);color:var(--theme-text);font:inherit;font-size:11px;cursor:pointer}.sku-parameter-mode button:last-child{border-right:0}.sku-parameter-mode button.active{background:var(--primary);color:var(--theme-on-accent);font-weight:700}.sku-parameter-field-row>.plain-input,.sku-parameter-field-row>.plain-select{min-width:0;width:100%}@media(max-width:1050px){.sku-parameter-field-row{grid-template-columns:minmax(220px,1fr) auto}.sku-parameter-field-row>.plain-input,.sku-parameter-field-row>.plain-select{grid-column:1/-1}}@media(max-width:720px){.sku-parameter-title,.sku-parameter-block-head,.sku-parameter-category-block{align-items:flex-start;flex-direction:column}.sku-parameter-field-row{grid-template-columns:1fr}.sku-parameter-actions{flex-wrap:wrap}.sku-parameter-field-row>.plain-input,.sku-parameter-field-row>.plain-select{grid-column:auto}}