/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --text-base: 1rem;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-flex {
    display: inline-flex;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .table-row {
    display: table-row;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .block-5 {
    block-size: calc(var(--spacing) * 5);
  }

  .block-6 {
    block-size: calc(var(--spacing) * 6);
  }

  .block-7 {
    block-size: calc(var(--spacing) * 7);
  }
}

:root {
  --primary: #165dff;
  --primary-hover: #1e5bff;
  --bg: #f5f7fa;
  --surface: #fff;
  --line: #e5e6eb;
  --text: #1d2129;
  --muted: #86909c;
  --red: #f53f3f;
  --orange: #f77234;
  --green: #00a870;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  min-width: 1280px;
  margin: 0;
}

button, input {
  font: inherit;
}

button {
  border: 0;
}

.oaShell {
  --topbar-height: 56px;
  --sidebar-width: 220px;
  background: var(--bg);
  min-height: 100vh;
}

.oaShellCollapsed {
  --sidebar-width: 64px;
}

.topbar {
  z-index: 20;
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.brandArea {
  width: calc(var(--sidebar-width) - 8px);
  min-width: calc(var(--sidebar-width) - 8px);
  align-items: center;
  gap: 10px;
  transition: width .2s, min-width .2s;
  display: flex;
}

.collapseButton, .iconButton {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  transition: background .16s, color .16s, border-color .16s;
  display: inline-flex;
  position: relative;
}

.collapseButton:hover, .iconButton:hover {
  color: var(--primary);
  background: #eef4ff;
  border-color: #dbe7ff;
}

.logoMark {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.brandText {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}

.brandText strong {
  font-size: 16px;
  font-weight: 700;
}

.brandText span {
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
  font-size: 12px;
}

.oaShellCollapsed .brandText {
  display: none;
}

.workbenchSearch input {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.topActions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.badge {
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  position: absolute;
  top: 2px;
  right: 1px;
}

.orgSwitcher, .userEntry {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 9px;
  display: inline-flex;
}

.avatar {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 700;
  display: grid;
}

.sidebar {
  z-index: 10;
  top: var(--topbar-height);
  width: var(--sidebar-width);
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 12px 10px;
  transition: width .2s;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden auto;
}

.menuList {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.menuItem {
  color: #4e5969;
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  display: flex;
}

.menuItem:hover, .menuItemActive {
  color: var(--primary);
  background: #eaf2ff;
  font-weight: 700;
}

.menuItem span {
  white-space: nowrap;
  flex: 1;
}

.oaShellCollapsed .menuItem {
  justify-content: center;
  padding: 0;
}

.oaShellCollapsed .menuItem span {
  display: none;
}

.menuArrow {
  transition: transform .16s;
}

.menuArrowOpen {
  transform: rotate(90deg);
}

.subMenu {
  border-left: 1px solid var(--line);
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 6px 38px;
  padding-left: 10px;
  display: flex;
}

.subMenuItem {
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  padding: 0 10px;
  font-size: 13px;
  display: flex;
}

.subMenuItem:hover {
  color: var(--primary);
  background: #f2f7ff;
}

.mainStage {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 16px) 18px 24px;
  transition: margin-left .2s;
}

.pageHeader, .welcomePanel, .panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
}

.pageHeader {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 14px 18px;
  display: flex;
}

.breadcrumb {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 13px;
  display: flex;
}

.pageHeader h1 {
  letter-spacing: 0;
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.headerNotice {
  max-width: 420px;
  height: 34px;
  color: var(--primary);
  background: #f2f7ff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.headerNotice span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.welcomePanel {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
  padding: 18px 20px;
  display: flex;
}

.welcomePanel h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.welcomePanel p {
  color: #4e5969;
  margin: 8px 0 0;
  font-size: 14px;
}

.dateLine {
  color: var(--muted);
  margin-top: 10px;
  font-size: 13px;
}

.welcomeRight {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  display: flex;
}

.workbenchSearch {
  border: 1px solid var(--line);
  width: 360px;
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.summaryAlert {
  color: var(--orange);
  font-size: 13px;
}

.statsGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  display: grid;
}

.statGroup {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  grid-column: span 2;
  gap: 10px;
  padding: 10px;
  display: flex;
}

.statGroupHeader {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.statGroupTitle {
  color: #4e5969;
  font-size: 13px;
  font-weight: 700;
}

.statTabs {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.statTabs button {
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.statTabs button.active {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.statGroupCards {
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.statGroup .statCard {
  background: #fbfdff;
  border-color: #edf0f5;
  width: 100%;
  min-height: 116px;
}

.statSolo {
  display: flex;
}

.statSolo .statCard {
  width: 100%;
}

.statCard {
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 120px;
  padding: 15px;
  transition: transform .16s, border-color .16s, box-shadow .16s;
  display: flex;
}

.statCard:hover {
  border-color: #bed4ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px #1d212914;
}

.priorityCard {
  background: linear-gradient(#fff7f7 0%, #fff 100%);
  border-color: #ffd7d7;
}

.statIcon {
  border-radius: 8px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.statMeta {
  width: 100%;
}

.statMeta span {
  color: #4e5969;
  font-size: 14px;
}

.statMeta strong {
  margin-top: 2px;
  font-size: 28px;
  line-height: 1;
  display: block;
}

.statMeta p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 13px;
}

.miniStatus {
  margin-top: auto;
  font-size: 12px;
}

.workbenchGrid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.leftColumn, .rightColumn {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.panel {
  padding: 16px;
}

.sectionHeader {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.sectionHeader h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sectionHeader p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 13px;
}

.linkButton {
  height: 28px;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  display: inline-flex;
}

.filterBar {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.segmented {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.segmented button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 5px;
  height: 28px;
  padding: 0 11px;
  font-size: 13px;
}

.segmented button.selected {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.tableWrap {
  overflow-x: auto;
}

.dataTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1040px;
  font-size: 13px;
}

.dataTable thead {
  background: #f7f8fa;
}

.dataTable th, .dataTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding: 11px 10px;
}

.dataTable th:last-child, .dataTable td:last-child {
  z-index: 1;
  background: #fff;
  min-width: 214px;
  position: sticky;
  right: 0;
  box-shadow: -10px 0 14px #f5f7fadb;
}

.dataTable th:last-child {
  z-index: 2;
  background: #f7f8fa;
}

.dataTable .dangerRow td:last-child {
  background: snow;
}

.dataTable th {
  color: #4e5969;
  font-weight: 600;
}

.dataTable tbody tr:hover {
  background: #fbfdff;
}

.dangerRow {
  background: snow;
}

.titleCell {
  max-width: 260px;
  color: var(--text);
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.typeTag, .statusTag {
  white-space: nowrap;
  border-radius: 5px;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  font-size: 12px;
  font-style: normal;
  display: inline-flex;
}

.type公文 {
  color: var(--primary);
  background: #eef4ff;
}

.type会议 {
  color: #0e7bdc;
  background: #f0f7ff;
}

.type督办 {
  color: #d46b08;
  background: #fff7e8;
}

.type议题 {
  color: #6f35d7;
  background: #f3efff;
}

.toneBlue {
  color: var(--primary);
  background: #eaf2ff;
}

.toneOrange {
  color: var(--orange);
  background: #fff3e8;
}

.toneRed {
  color: var(--red);
  background: #ffece8;
}

.toneGreen {
  color: var(--green);
  background: #e8fff3;
}

.toneGray {
  color: #4e5969;
  background: #f2f3f5;
}

.rowActions, .trackActions, .draftActions {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.rowActions button, .trackActions button, .draftActions button {
  color: #4e5969;
  cursor: pointer;
  background: #f7f8fa;
  border-radius: 5px;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.rowActions button:hover, .trackActions button:hover, .draftActions button:hover {
  color: var(--primary);
  background: #eef4ff;
}

.rowActions .primaryAction, .draftActions .primaryAction {
  background: var(--primary);
  color: #fff;
}

.quickGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.quickItem {
  border: 1px solid var(--line);
  min-height: 88px;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  padding: 12px;
  display: flex;
}

.quickItem:hover {
  background: #f2f7ff;
  border-color: #bed4ff;
}

.quickItem strong {
  color: var(--text);
  font-size: 14px;
}

.quickItem span {
  color: var(--muted);
  font-size: 12px;
}

.tabs {
  border-bottom: 1px solid var(--line);
  background: #fff;
  align-items: center;
  gap: 24px;
  min-height: 42px;
  margin: 0 0 14px;
  display: flex;
}

.tabs button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 0;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  position: relative;
}

.tabs button:after {
  content: "";
  background: none;
  border-radius: 3px 3px 0 0;
  height: 3px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.tabs button em {
  color: #4e5969;
  background: #f2f3f5;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
}

.tabs button.tabActive {
  color: var(--primary);
}

.tabs button.tabActive:after {
  background: var(--primary);
}

.tabs button.tabActive em {
  color: var(--primary);
  background: #165dff1a;
}

.trackList, .messageList {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.trackItem {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.trackMain, .trackMeta {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.trackMain strong {
  font-size: 14px;
}

.trackMeta {
  color: var(--muted);
  margin-top: 8px;
  font-size: 12px;
}

.progressLine {
  background: #eef0f5;
  border-radius: 999px;
  height: 6px;
  margin: 12px 0;
  overflow: hidden;
}

.progressLine span {
  background: var(--primary);
  border-radius: 999px;
  height: 100%;
  display: block;
}

.messageItem {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: none;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  display: grid;
}

.messageItem:last-child {
  border-bottom: 0;
}

.readDot {
  background: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-top: 8px;
}

.readDot.unread {
  background: var(--primary);
}

.messageTop {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.messageTop em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.messageItem strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  display: block;
}

.draftPanel {
  margin-top: 16px;
}

.draftGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

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

.draftCard {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.draftCard > div:first-child {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.draftCard strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.draftCard p {
  color: var(--muted);
  margin: 10px 0 12px;
  font-size: 12px;
}

.weakDanger {
  color: var(--red) !important;
  background: #fff7f7 !important;
}

@media (max-width: 1366px) {
  body {
    min-width: 1180px;
  }

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

  .statGroup {
    grid-column: span 3;
  }

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

  .rightColumn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    display: grid;
  }

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

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}
/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --text-base: 1rem;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-flex {
    display: inline-flex;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .table-row {
    display: table-row;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .block-5 {
    block-size: calc(var(--spacing) * 5);
  }

  .block-6 {
    block-size: calc(var(--spacing) * 6);
  }

  .block-7 {
    block-size: calc(var(--spacing) * 7);
  }
}

:root {
  --primary: #165dff;
  --primary-hover: #1e5bff;
  --bg: #f5f7fa;
  --surface: #fff;
  --line: #e5e6eb;
  --text: #1d2129;
  --muted: #86909c;
  --red: #f53f3f;
  --orange: #f77234;
  --green: #00a870;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  min-width: 1280px;
  margin: 0;
}

button, input {
  font: inherit;
}

button {
  border: 0;
}

.oaShell {
  --topbar-height: 56px;
  --sidebar-width: 220px;
  background: var(--bg);
  min-height: 100vh;
}

.oaShellCollapsed {
  --sidebar-width: 64px;
}

.topbar {
  z-index: 20;
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.brandArea {
  width: calc(var(--sidebar-width) - 8px);
  min-width: calc(var(--sidebar-width) - 8px);
  align-items: center;
  gap: 10px;
  transition: width .2s, min-width .2s;
  display: flex;
}

.collapseButton, .iconButton {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  transition: background .16s, color .16s, border-color .16s;
  display: inline-flex;
  position: relative;
}

.collapseButton:hover, .iconButton:hover {
  color: var(--primary);
  background: #eef4ff;
  border-color: #dbe7ff;
}

.logoMark {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.brandText {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}

.brandText strong {
  font-size: 16px;
  font-weight: 700;
}

.brandText span {
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
  font-size: 12px;
}

.oaShellCollapsed .brandText {
  display: none;
}

.workbenchSearch input {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.topActions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.badge {
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  position: absolute;
  top: 2px;
  right: 1px;
}

.orgSwitcher, .userEntry {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 9px;
  display: inline-flex;
}

.avatar {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 700;
  display: grid;
}

.sidebar {
  z-index: 10;
  top: var(--topbar-height);
  width: var(--sidebar-width);
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 12px 10px;
  transition: width .2s;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden auto;
}

.menuList {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.menuItem {
  color: #4e5969;
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  display: flex;
}

.menuItem:hover, .menuItemActive {
  color: var(--primary);
  background: #eaf2ff;
  font-weight: 700;
}

.menuItem span {
  white-space: nowrap;
  flex: 1;
}

.oaShellCollapsed .menuItem {
  justify-content: center;
  padding: 0;
}

.oaShellCollapsed .menuItem span {
  display: none;
}

.menuArrow {
  transition: transform .16s;
}

.menuArrowOpen {
  transform: rotate(90deg);
}

.subMenu {
  border-left: 1px solid var(--line);
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 6px 38px;
  padding-left: 10px;
  display: flex;
}

.subMenuItem {
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  padding: 0 10px;
  font-size: 13px;
  display: flex;
}

.subMenuItem:hover {
  color: var(--primary);
  background: #f2f7ff;
}

.mainStage {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 16px) 18px 24px;
  transition: margin-left .2s;
}

.pageHeader, .welcomePanel, .panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
}

.pageHeader {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 14px 18px;
  display: flex;
}

.breadcrumb {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 13px;
  display: flex;
}

.pageHeader h1 {
  letter-spacing: 0;
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.headerNotice {
  max-width: 420px;
  height: 34px;
  color: var(--primary);
  background: #f2f7ff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.headerNotice span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.welcomePanel {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
  padding: 18px 20px;
  display: flex;
}

.welcomePanel h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.welcomePanel p {
  color: #4e5969;
  margin: 8px 0 0;
  font-size: 14px;
}

.dateLine {
  color: var(--muted);
  margin-top: 10px;
  font-size: 13px;
}

.welcomeRight {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  display: flex;
}

.workbenchSearch {
  border: 1px solid var(--line);
  width: 360px;
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.summaryAlert {
  color: var(--orange);
  font-size: 13px;
}

.statsGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  display: grid;
}

.statGroup {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  grid-column: span 2;
  gap: 10px;
  padding: 10px;
  display: flex;
}

.statGroupHeader {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.statGroupTitle {
  color: #4e5969;
  font-size: 13px;
  font-weight: 700;
}

.statTabs {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.statTabs button {
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.statTabs button.active {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.statGroupCards {
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.statGroup .statCard {
  background: #fbfdff;
  border-color: #edf0f5;
  width: 100%;
  min-height: 116px;
}

.statSolo {
  display: flex;
}

.statSolo .statCard {
  width: 100%;
}

.statCard {
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 120px;
  padding: 15px;
  transition: transform .16s, border-color .16s, box-shadow .16s;
  display: flex;
}

.statCard:hover {
  border-color: #bed4ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px #1d212914;
}

.priorityCard {
  background: linear-gradient(#fff7f7 0%, #fff 100%);
  border-color: #ffd7d7;
}

.statIcon {
  border-radius: 8px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.statMeta {
  width: 100%;
}

.statMeta span {
  color: #4e5969;
  font-size: 14px;
}

.statMeta strong {
  margin-top: 2px;
  font-size: 28px;
  line-height: 1;
  display: block;
}

.statMeta p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 13px;
}

.miniStatus {
  margin-top: auto;
  font-size: 12px;
}

.workbenchGrid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.leftColumn, .rightColumn {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.panel {
  padding: 16px;
}

.sectionHeader {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.sectionHeader h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sectionHeader p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 13px;
}

.linkButton {
  height: 28px;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  display: inline-flex;
}

.filterBar {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.segmented {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.segmented button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 5px;
  height: 28px;
  padding: 0 11px;
  font-size: 13px;
}

.segmented button.selected {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.tableWrap {
  overflow-x: auto;
}

.dataTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1040px;
  font-size: 13px;
}

.dataTable thead {
  background: #f7f8fa;
}

.dataTable th, .dataTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding: 11px 10px;
}

.dataTable th:last-child, .dataTable td:last-child {
  z-index: 1;
  background: #fff;
  min-width: 214px;
  position: sticky;
  right: 0;
  box-shadow: -10px 0 14px #f5f7fadb;
}

.dataTable th:last-child {
  z-index: 2;
  background: #f7f8fa;
}

.dataTable .dangerRow td:last-child {
  background: snow;
}

.dataTable th {
  color: #4e5969;
  font-weight: 600;
}

.dataTable tbody tr:hover {
  background: #fbfdff;
}

.dangerRow {
  background: snow;
}

.titleCell {
  max-width: 260px;
  color: var(--text);
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.typeTag, .statusTag {
  white-space: nowrap;
  border-radius: 5px;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  font-size: 12px;
  font-style: normal;
  display: inline-flex;
}

.type公文 {
  color: var(--primary);
  background: #eef4ff;
}

.type会议 {
  color: #0e7bdc;
  background: #f0f7ff;
}

.type督办 {
  color: #d46b08;
  background: #fff7e8;
}

.type议题 {
  color: #6f35d7;
  background: #f3efff;
}

.toneBlue {
  color: var(--primary);
  background: #eaf2ff;
}

.toneOrange {
  color: var(--orange);
  background: #fff3e8;
}

.toneRed {
  color: var(--red);
  background: #ffece8;
}

.toneGreen {
  color: var(--green);
  background: #e8fff3;
}

.toneGray {
  color: #4e5969;
  background: #f2f3f5;
}

.rowActions, .trackActions, .draftActions {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.rowActions button, .trackActions button, .draftActions button {
  color: #4e5969;
  cursor: pointer;
  background: #f7f8fa;
  border-radius: 5px;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.rowActions button:hover, .trackActions button:hover, .draftActions button:hover {
  color: var(--primary);
  background: #eef4ff;
}

.rowActions .primaryAction, .draftActions .primaryAction {
  background: var(--primary);
  color: #fff;
}

.quickGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.quickItem {
  border: 1px solid var(--line);
  min-height: 88px;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  padding: 12px;
  display: flex;
}

.quickItem:hover {
  background: #f2f7ff;
  border-color: #bed4ff;
}

.quickItem strong {
  color: var(--text);
  font-size: 14px;
}

.quickItem span {
  color: var(--muted);
  font-size: 12px;
}

.tabs {
  border-bottom: 1px solid var(--line);
  background: #fff;
  align-items: center;
  gap: 24px;
  min-height: 42px;
  margin: 0 0 14px;
  display: flex;
}

.tabs button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 0;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  position: relative;
}

.tabs button:after {
  content: "";
  background: none;
  border-radius: 3px 3px 0 0;
  height: 3px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.tabs button em {
  color: #4e5969;
  background: #f2f3f5;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
}

.tabs button.tabActive {
  color: var(--primary);
}

.tabs button.tabActive:after {
  background: var(--primary);
}

.tabs button.tabActive em {
  color: var(--primary);
  background: #165dff1a;
}

.trackList, .messageList {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.trackItem {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.trackMain, .trackMeta {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.trackMain strong {
  font-size: 14px;
}

.trackMeta {
  color: var(--muted);
  margin-top: 8px;
  font-size: 12px;
}

.progressLine {
  background: #eef0f5;
  border-radius: 999px;
  height: 6px;
  margin: 12px 0;
  overflow: hidden;
}

.progressLine span {
  background: var(--primary);
  border-radius: 999px;
  height: 100%;
  display: block;
}

.messageItem {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: none;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  display: grid;
}

.messageItem:last-child {
  border-bottom: 0;
}

.readDot {
  background: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-top: 8px;
}

.readDot.unread {
  background: var(--primary);
}

.messageTop {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.messageTop em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.messageItem strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  display: block;
}

.draftPanel {
  margin-top: 16px;
}

.draftGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

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

.draftCard {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.draftCard > div:first-child {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.draftCard strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.draftCard p {
  color: var(--muted);
  margin: 10px 0 12px;
  font-size: 12px;
}

.weakDanger {
  color: var(--red) !important;
  background: #fff7f7 !important;
}

@media (max-width: 1366px) {
  body {
    min-width: 1180px;
  }

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

  .statGroup {
    grid-column: span 3;
  }

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

  .rightColumn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    display: grid;
  }

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

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}
/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --text-base: 1rem;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-flex {
    display: inline-flex;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .table-row {
    display: table-row;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .block-5 {
    block-size: calc(var(--spacing) * 5);
  }

  .block-6 {
    block-size: calc(var(--spacing) * 6);
  }

  .block-7 {
    block-size: calc(var(--spacing) * 7);
  }
}

:root {
  --primary: #165dff;
  --primary-hover: #1e5bff;
  --bg: #f5f7fa;
  --surface: #fff;
  --line: #e5e6eb;
  --text: #1d2129;
  --muted: #86909c;
  --red: #f53f3f;
  --orange: #f77234;
  --green: #00a870;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  min-width: 1280px;
  margin: 0;
}

button, input {
  font: inherit;
}

button {
  border: 0;
}

.oaShell {
  --topbar-height: 56px;
  --sidebar-width: 220px;
  background: var(--bg);
  min-height: 100vh;
}

.oaShellCollapsed {
  --sidebar-width: 64px;
}

.topbar {
  z-index: 20;
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.brandArea {
  width: calc(var(--sidebar-width) - 8px);
  min-width: calc(var(--sidebar-width) - 8px);
  align-items: center;
  gap: 10px;
  transition: width .2s, min-width .2s;
  display: flex;
}

.collapseButton, .iconButton {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  transition: background .16s, color .16s, border-color .16s;
  display: inline-flex;
  position: relative;
}

.collapseButton:hover, .iconButton:hover {
  color: var(--primary);
  background: #eef4ff;
  border-color: #dbe7ff;
}

.logoMark {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.brandText {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}

.brandText strong {
  font-size: 16px;
  font-weight: 700;
}

.brandText span {
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
  font-size: 12px;
}

.oaShellCollapsed .brandText {
  display: none;
}

.workbenchSearch input {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.topActions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.badge {
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  position: absolute;
  top: 2px;
  right: 1px;
}

.orgSwitcher, .userEntry {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 9px;
  display: inline-flex;
}

.avatar {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 700;
  display: grid;
}

.sidebar {
  z-index: 10;
  top: var(--topbar-height);
  width: var(--sidebar-width);
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 12px 10px;
  transition: width .2s;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden auto;
}

.menuList {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.menuItem {
  color: #4e5969;
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  display: flex;
}

.menuItem:hover, .menuItemActive {
  color: var(--primary);
  background: #eaf2ff;
  font-weight: 700;
}

.menuItem span {
  white-space: nowrap;
  flex: 1;
}

.oaShellCollapsed .menuItem {
  justify-content: center;
  padding: 0;
}

.oaShellCollapsed .menuItem span {
  display: none;
}

.menuArrow {
  transition: transform .16s;
}

.menuArrowOpen {
  transform: rotate(90deg);
}

.subMenu {
  border-left: 1px solid var(--line);
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 6px 38px;
  padding-left: 10px;
  display: flex;
}

.subMenuItem {
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  padding: 0 10px;
  font-size: 13px;
  display: flex;
}

.subMenuItem:hover {
  color: var(--primary);
  background: #f2f7ff;
}

.mainStage {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 16px) 18px 24px;
  transition: margin-left .2s;
}

.pageHeader, .welcomePanel, .panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
}

.pageHeader {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 14px 18px;
  display: flex;
}

.breadcrumb {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 13px;
  display: flex;
}

.pageHeader h1 {
  letter-spacing: 0;
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.headerNotice {
  max-width: 420px;
  height: 34px;
  color: var(--primary);
  background: #f2f7ff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.headerNotice span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.welcomePanel {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
  padding: 18px 20px;
  display: flex;
}

.welcomePanel h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.welcomePanel p {
  color: #4e5969;
  margin: 8px 0 0;
  font-size: 14px;
}

.dateLine {
  color: var(--muted);
  margin-top: 10px;
  font-size: 13px;
}

.welcomeRight {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  display: flex;
}

.workbenchSearch {
  border: 1px solid var(--line);
  width: 360px;
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.summaryAlert {
  color: var(--orange);
  font-size: 13px;
}

.statsGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  display: grid;
}

.statGroup {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  grid-column: span 2;
  gap: 10px;
  padding: 10px;
  display: flex;
}

.statGroupHeader {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.statGroupTitle {
  color: #4e5969;
  font-size: 13px;
  font-weight: 700;
}

.statTabs {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.statTabs button {
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.statTabs button.active {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.statGroupCards {
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.statGroup .statCard {
  background: #fbfdff;
  border-color: #edf0f5;
  width: 100%;
  min-height: 116px;
}

.statSolo {
  display: flex;
}

.statSolo .statCard {
  width: 100%;
}

.statCard {
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 120px;
  padding: 15px;
  transition: transform .16s, border-color .16s, box-shadow .16s;
  display: flex;
}

.statCard:hover {
  border-color: #bed4ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px #1d212914;
}

.priorityCard {
  background: linear-gradient(#fff7f7 0%, #fff 100%);
  border-color: #ffd7d7;
}

.statIcon {
  border-radius: 8px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.statMeta {
  width: 100%;
}

.statMeta span {
  color: #4e5969;
  font-size: 14px;
}

.statMeta strong {
  margin-top: 2px;
  font-size: 28px;
  line-height: 1;
  display: block;
}

.statMeta p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 13px;
}

.miniStatus {
  margin-top: auto;
  font-size: 12px;
}

.workbenchGrid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.leftColumn, .rightColumn {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.panel {
  padding: 16px;
}

.sectionHeader {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.sectionHeader h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sectionHeader p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 13px;
}

.linkButton {
  height: 28px;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  display: inline-flex;
}

.filterBar {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.segmented {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.segmented button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 5px;
  height: 28px;
  padding: 0 11px;
  font-size: 13px;
}

.segmented button.selected {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.tableWrap {
  overflow-x: auto;
}

.dataTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1040px;
  font-size: 13px;
}

.dataTable thead {
  background: #f7f8fa;
}

.dataTable th, .dataTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding: 11px 10px;
}

.dataTable th:last-child, .dataTable td:last-child {
  z-index: 1;
  background: #fff;
  min-width: 214px;
  position: sticky;
  right: 0;
  box-shadow: -10px 0 14px #f5f7fadb;
}

.dataTable th:last-child {
  z-index: 2;
  background: #f7f8fa;
}

.dataTable .dangerRow td:last-child {
  background: snow;
}

.dataTable th {
  color: #4e5969;
  font-weight: 600;
}

.dataTable tbody tr:hover {
  background: #fbfdff;
}

.dangerRow {
  background: snow;
}

.titleCell {
  max-width: 260px;
  color: var(--text);
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.typeTag, .statusTag {
  white-space: nowrap;
  border-radius: 5px;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  font-size: 12px;
  font-style: normal;
  display: inline-flex;
}

.type公文 {
  color: var(--primary);
  background: #eef4ff;
}

.type会议 {
  color: #0e7bdc;
  background: #f0f7ff;
}

.type督办 {
  color: #d46b08;
  background: #fff7e8;
}

.type议题 {
  color: #6f35d7;
  background: #f3efff;
}

.toneBlue {
  color: var(--primary);
  background: #eaf2ff;
}

.toneOrange {
  color: var(--orange);
  background: #fff3e8;
}

.toneRed {
  color: var(--red);
  background: #ffece8;
}

.toneGreen {
  color: var(--green);
  background: #e8fff3;
}

.toneGray {
  color: #4e5969;
  background: #f2f3f5;
}

.rowActions, .trackActions, .draftActions {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.rowActions button, .trackActions button, .draftActions button {
  color: #4e5969;
  cursor: pointer;
  background: #f7f8fa;
  border-radius: 5px;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.rowActions button:hover, .trackActions button:hover, .draftActions button:hover {
  color: var(--primary);
  background: #eef4ff;
}

.rowActions .primaryAction, .draftActions .primaryAction {
  background: var(--primary);
  color: #fff;
}

.quickGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.quickItem {
  border: 1px solid var(--line);
  min-height: 88px;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  padding: 12px;
  display: flex;
}

.quickItem:hover {
  background: #f2f7ff;
  border-color: #bed4ff;
}

.quickItem strong {
  color: var(--text);
  font-size: 14px;
}

.quickItem span {
  color: var(--muted);
  font-size: 12px;
}

.tabs {
  border-bottom: 1px solid var(--line);
  background: #fff;
  align-items: center;
  gap: 24px;
  min-height: 42px;
  margin: 0 0 14px;
  display: flex;
}

.tabs button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 0;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  position: relative;
}

.tabs button:after {
  content: "";
  background: none;
  border-radius: 3px 3px 0 0;
  height: 3px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.tabs button em {
  color: #4e5969;
  background: #f2f3f5;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
}

.tabs button.tabActive {
  color: var(--primary);
}

.tabs button.tabActive:after {
  background: var(--primary);
}

.tabs button.tabActive em {
  color: var(--primary);
  background: #165dff1a;
}

.trackList, .messageList {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.trackItem {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.trackMain, .trackMeta {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.trackMain strong {
  font-size: 14px;
}

.trackMeta {
  color: var(--muted);
  margin-top: 8px;
  font-size: 12px;
}

.progressLine {
  background: #eef0f5;
  border-radius: 999px;
  height: 6px;
  margin: 12px 0;
  overflow: hidden;
}

.progressLine span {
  background: var(--primary);
  border-radius: 999px;
  height: 100%;
  display: block;
}

.messageItem {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: none;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  display: grid;
}

.messageItem:last-child {
  border-bottom: 0;
}

.readDot {
  background: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-top: 8px;
}

.readDot.unread {
  background: var(--primary);
}

.messageTop {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.messageTop em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.messageItem strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  display: block;
}

.draftPanel {
  margin-top: 16px;
}

.draftGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

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

.draftCard {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.draftCard > div:first-child {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.draftCard strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.draftCard p {
  color: var(--muted);
  margin: 10px 0 12px;
  font-size: 12px;
}

.weakDanger {
  color: var(--red) !important;
  background: #fff7f7 !important;
}

@media (max-width: 1366px) {
  body {
    min-width: 1180px;
  }

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

  .statGroup {
    grid-column: span 3;
  }

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

  .rightColumn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    display: grid;
  }

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

.titleBar {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  display: flex;
}

.titleBar h1 {
  color: var(--text);
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.titleBar p {
  color: var(--muted);
  margin: 8px 0 0;
  font-size: 13px;
}

.filterCard button, .batchBar button, .pagination button, .drawerFooter button {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  background: #fff;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.primaryButton {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

.statGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  display: grid;
}

.statGrid .statCard {
  text-align: left;
  min-height: 120px;
  padding: 15px;
}

.statGrid .statCard span {
  color: #4e5969;
  font-size: 13px;
}

.statGrid .statCard strong {
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.statGrid .statCard p {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
}

.dangerStat {
  background: snow;
  border-color: #f53f3f4d;
}

.contentGrid {
  margin-top: 16px;
  display: block;
}

.mainColumn {
  min-width: 0;
}

.filterCard {
  padding: 14px 0 12px;
}

.filterRow {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.searchInput {
  border: 1px solid var(--line);
  width: 320px;
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  transition: border-color .16s, background .16s, box-shadow .16s;
  display: flex;
  position: relative;
}

.searchInput:focus-within {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px #165dff1c;
}

.searchInput input {
  min-width: 0;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
  flex: 1;
  font-size: 14px;
}

.filterGroup {
  align-items: center;
  display: inline-flex;
}

.filterCard .segmented {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.filterCard .segmented button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  height: 28px;
  padding: 0 11px;
  font-size: 13px;
}

.filterCard .segmented button.selected {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.batchBar {
  color: #4e5969;
  background: #f7fbff;
  border: 1px solid #dbe8ff;
  border-radius: 7px;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-bottom: 10px;
  padding: 0 12px;
  font-size: 13px;
  display: flex;
}

.batchBar span {
  color: var(--primary);
  font-weight: 700;
}

.matterTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1160px;
  font-size: 13px;
}

.matterTable thead {
  background: #f7f8fa;
}

.matterTable th, .matterTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding: 11px 10px;
}

.matterTable th {
  color: #4e5969;
  font-weight: 700;
}

.matterTable tbody tr:hover {
  background: #fbfdff;
}

.matterTable th:last-child, .matterTable td:last-child {
  z-index: 1;
  background: #fff;
  min-width: 210px;
  position: sticky;
  right: 0;
  box-shadow: -10px 0 14px #f5f7fadb;
}

.matterTable th:last-child {
  z-index: 2;
  background: #f7f8fa;
}

.checkCol {
  width: 40px;
  min-width: 40px !important;
}

.titleCell {
  max-width: 280px;
}

.titleCell strong {
  max-width: 220px;
  color: var(--text);
  text-overflow: ellipsis;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
}

.opinionCell {
  text-overflow: ellipsis;
  max-width: 170px;
  overflow: hidden;
}

.typeDocument {
  color: var(--primary);
  background: #eef4ff;
}

.typeMeeting {
  color: #0e7bdc;
  background: #f0f7ff;
}

.typeSupervision {
  color: #d46b08;
  background: #fff7e8;
}

.progressCell {
  vertical-align: middle;
  background: #edf0f5;
  border-radius: 4px;
  width: 96px;
  height: 6px;
  margin-right: 8px;
  display: inline-block;
  overflow: hidden;
}

.progressCell span {
  border-radius: inherit;
  background: var(--primary);
  height: 100%;
  display: block;
}

.matterTable em {
  color: #4e5969;
  font-style: normal;
}

.rowActions .primaryRowButton {
  background: var(--primary);
  color: #fff;
}

.iconOnly {
  justify-content: center;
  width: 28px;
  padding: 0 !important;
}

.pagination {
  color: #4e5969;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  display: flex;
}

.pagination select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 5px;
  height: 30px;
}

.pagination button {
  height: 30px;
  padding: 0 10px;
}

.pagination .pageActive {
  border-color: var(--primary);
  color: var(--primary);
}

.drawerLayer {
  inset: var(--topbar-height) 0 0 0;
  z-index: 80;
  background: #1d21292e;
  justify-content: flex-end;
  display: flex;
  position: fixed;
}

.detailDrawer {
  border-left: 1px solid var(--line);
  background: #fff;
  flex-direction: column;
  width: 480px;
  display: flex;
  box-shadow: -10px 0 28px #1d21291f;
}

.drawerHeader {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  display: flex;
}

.drawerHeader h2 {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.45;
}

.drawerHeader button {
  color: #4e5969;
  background: #f7f8fa;
  border-radius: 6px;
  width: 32px;
  height: 32px;
}

.drawerBody {
  flex: 1;
  padding: 18px;
  overflow: auto;
}

.drawerBody dl {
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px 12px;
  margin: 0;
  display: grid;
}

.drawerBody dt {
  color: var(--muted);
}

.drawerBody dd {
  color: var(--text);
  margin: 0;
  line-height: 1.6;
}

.drawerFooter {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  display: flex;
}

.emptyState, .skeletonTable {
  border: 1px dashed var(--line);
  min-height: 220px;
  color: var(--muted);
  text-align: center;
  background: #fbfdff;
  border-radius: 8px;
  place-items: center;
  display: grid;
}

.skeletonTable {
  align-content: center;
  gap: 12px;
}

.skeletonTable span {
  background: linear-gradient(90deg, #f2f3f5 25%, #fafafa 37%, #f2f3f5 63%) 0 0 / 400% 100%;
  border-radius: 6px;
  width: 92%;
  height: 32px;
  animation: 1.2s ease-in-out infinite skeleton;
}

@keyframes skeleton {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}
/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --text-base: 1rem;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-flex {
    display: inline-flex;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .table-row {
    display: table-row;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .block-5 {
    block-size: calc(var(--spacing) * 5);
  }

  .block-6 {
    block-size: calc(var(--spacing) * 6);
  }

  .block-7 {
    block-size: calc(var(--spacing) * 7);
  }
}

:root {
  --primary: #165dff;
  --primary-hover: #1e5bff;
  --bg: #f5f7fa;
  --surface: #fff;
  --line: #e5e6eb;
  --text: #1d2129;
  --muted: #86909c;
  --red: #f53f3f;
  --orange: #f77234;
  --green: #00a870;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  min-width: 1280px;
  margin: 0;
}

button, input {
  font: inherit;
}

button {
  border: 0;
}

.oaShell {
  --topbar-height: 56px;
  --sidebar-width: 220px;
  background: var(--bg);
  min-height: 100vh;
}

.oaShellCollapsed {
  --sidebar-width: 64px;
}

.topbar {
  z-index: 20;
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.brandArea {
  width: calc(var(--sidebar-width) - 8px);
  min-width: calc(var(--sidebar-width) - 8px);
  align-items: center;
  gap: 10px;
  transition: width .2s, min-width .2s;
  display: flex;
}

.collapseButton, .iconButton {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  transition: background .16s, color .16s, border-color .16s;
  display: inline-flex;
  position: relative;
}

.collapseButton:hover, .iconButton:hover {
  color: var(--primary);
  background: #eef4ff;
  border-color: #dbe7ff;
}

.logoMark {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.brandText {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}

.brandText strong {
  font-size: 16px;
  font-weight: 700;
}

.brandText span {
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
  font-size: 12px;
}

.oaShellCollapsed .brandText {
  display: none;
}

.workbenchSearch input {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.topActions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.badge {
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  position: absolute;
  top: 2px;
  right: 1px;
}

.orgSwitcher, .userEntry {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 9px;
  display: inline-flex;
}

.avatar {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 700;
  display: grid;
}

.sidebar {
  z-index: 10;
  top: var(--topbar-height);
  width: var(--sidebar-width);
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 12px 10px;
  transition: width .2s;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden auto;
}

.menuList {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.menuItem {
  color: #4e5969;
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  display: flex;
}

.menuItem:hover, .menuItemActive {
  color: var(--primary);
  background: #eaf2ff;
  font-weight: 700;
}

.menuItem span {
  white-space: nowrap;
  flex: 1;
}

.oaShellCollapsed .menuItem {
  justify-content: center;
  padding: 0;
}

.oaShellCollapsed .menuItem span {
  display: none;
}

.menuArrow {
  transition: transform .16s;
}

.menuArrowOpen {
  transform: rotate(90deg);
}

.subMenu {
  border-left: 1px solid var(--line);
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 6px 38px;
  padding-left: 10px;
  display: flex;
}

.subMenuItem {
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  padding: 0 10px;
  font-size: 13px;
  display: flex;
}

.subMenuItem:hover {
  color: var(--primary);
  background: #f2f7ff;
}

.mainStage {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 16px) 18px 24px;
  transition: margin-left .2s;
}

.pageHeader, .welcomePanel, .panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
}

.pageHeader {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 14px 18px;
  display: flex;
}

.breadcrumb {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 13px;
  display: flex;
}

.pageHeader h1 {
  letter-spacing: 0;
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.headerNotice {
  max-width: 420px;
  height: 34px;
  color: var(--primary);
  background: #f2f7ff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.headerNotice span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.welcomePanel {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
  padding: 18px 20px;
  display: flex;
}

.welcomePanel h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.welcomePanel p {
  color: #4e5969;
  margin: 8px 0 0;
  font-size: 14px;
}

.dateLine {
  color: var(--muted);
  margin-top: 10px;
  font-size: 13px;
}

.welcomeRight {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  display: flex;
}

.workbenchSearch {
  border: 1px solid var(--line);
  width: 360px;
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.summaryAlert {
  color: var(--orange);
  font-size: 13px;
}

.statsGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  display: grid;
}

.statGroup {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  grid-column: span 2;
  gap: 10px;
  padding: 10px;
  display: flex;
}

.statGroupHeader {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.statGroupTitle {
  color: #4e5969;
  font-size: 13px;
  font-weight: 700;
}

.statTabs {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.statTabs button {
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.statTabs button.active {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.statGroupCards {
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.statGroup .statCard {
  background: #fbfdff;
  border-color: #edf0f5;
  width: 100%;
  min-height: 116px;
}

.statSolo {
  display: flex;
}

.statSolo .statCard {
  width: 100%;
}

.statCard {
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 120px;
  padding: 15px;
  transition: transform .16s, border-color .16s, box-shadow .16s;
  display: flex;
}

.statCard:hover {
  border-color: #bed4ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px #1d212914;
}

.priorityCard {
  background: linear-gradient(#fff7f7 0%, #fff 100%);
  border-color: #ffd7d7;
}

.statIcon {
  border-radius: 8px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.statMeta {
  width: 100%;
}

.statMeta span {
  color: #4e5969;
  font-size: 14px;
}

.statMeta strong {
  margin-top: 2px;
  font-size: 28px;
  line-height: 1;
  display: block;
}

.statMeta p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 13px;
}

.miniStatus {
  margin-top: auto;
  font-size: 12px;
}

.workbenchGrid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.leftColumn, .rightColumn {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.panel {
  padding: 16px;
}

.sectionHeader {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.sectionHeader h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sectionHeader p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 13px;
}

.linkButton {
  height: 28px;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  display: inline-flex;
}

.filterBar {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.segmented {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.segmented button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 5px;
  height: 28px;
  padding: 0 11px;
  font-size: 13px;
}

.segmented button.selected {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.tableWrap {
  overflow-x: auto;
}

.dataTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1040px;
  font-size: 13px;
}

.dataTable thead {
  background: #f7f8fa;
}

.dataTable th, .dataTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding: 11px 10px;
}

.dataTable th:last-child, .dataTable td:last-child {
  z-index: 1;
  background: #fff;
  min-width: 214px;
  position: sticky;
  right: 0;
  box-shadow: -10px 0 14px #f5f7fadb;
}

.dataTable th:last-child {
  z-index: 2;
  background: #f7f8fa;
}

.dataTable .dangerRow td:last-child {
  background: snow;
}

.dataTable th {
  color: #4e5969;
  font-weight: 600;
}

.dataTable tbody tr:hover {
  background: #fbfdff;
}

.dangerRow {
  background: snow;
}

.titleCell {
  max-width: 260px;
  color: var(--text);
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.typeTag, .statusTag {
  white-space: nowrap;
  border-radius: 5px;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  font-size: 12px;
  font-style: normal;
  display: inline-flex;
}

.type公文 {
  color: var(--primary);
  background: #eef4ff;
}

.type会议 {
  color: #0e7bdc;
  background: #f0f7ff;
}

.type督办 {
  color: #d46b08;
  background: #fff7e8;
}

.type议题 {
  color: #6f35d7;
  background: #f3efff;
}

.toneBlue {
  color: var(--primary);
  background: #eaf2ff;
}

.toneOrange {
  color: var(--orange);
  background: #fff3e8;
}

.toneRed {
  color: var(--red);
  background: #ffece8;
}

.toneGreen {
  color: var(--green);
  background: #e8fff3;
}

.toneGray {
  color: #4e5969;
  background: #f2f3f5;
}

.rowActions, .trackActions, .draftActions {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.rowActions button, .trackActions button, .draftActions button {
  color: #4e5969;
  cursor: pointer;
  background: #f7f8fa;
  border-radius: 5px;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.rowActions button:hover, .trackActions button:hover, .draftActions button:hover {
  color: var(--primary);
  background: #eef4ff;
}

.rowActions .primaryAction, .draftActions .primaryAction {
  background: var(--primary);
  color: #fff;
}

.quickGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.quickItem {
  border: 1px solid var(--line);
  min-height: 88px;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  padding: 12px;
  display: flex;
}

.quickItem:hover {
  background: #f2f7ff;
  border-color: #bed4ff;
}

.quickItem strong {
  color: var(--text);
  font-size: 14px;
}

.quickItem span {
  color: var(--muted);
  font-size: 12px;
}

.tabs {
  border-bottom: 1px solid var(--line);
  background: #fff;
  align-items: center;
  gap: 24px;
  min-height: 42px;
  margin: 0 0 14px;
  display: flex;
}

.tabs button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 0;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  position: relative;
}

.tabs button:after {
  content: "";
  background: none;
  border-radius: 3px 3px 0 0;
  height: 3px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.tabs button em {
  color: #4e5969;
  background: #f2f3f5;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
}

.tabs button.tabActive {
  color: var(--primary);
}

.tabs button.tabActive:after {
  background: var(--primary);
}

.tabs button.tabActive em {
  color: var(--primary);
  background: #165dff1a;
}

.trackList, .messageList {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.trackItem {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.trackMain, .trackMeta {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.trackMain strong {
  font-size: 14px;
}

.trackMeta {
  color: var(--muted);
  margin-top: 8px;
  font-size: 12px;
}

.progressLine {
  background: #eef0f5;
  border-radius: 999px;
  height: 6px;
  margin: 12px 0;
  overflow: hidden;
}

.progressLine span {
  background: var(--primary);
  border-radius: 999px;
  height: 100%;
  display: block;
}

.messageItem {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: none;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  display: grid;
}

.messageItem:last-child {
  border-bottom: 0;
}

.readDot {
  background: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-top: 8px;
}

.readDot.unread {
  background: var(--primary);
}

.messageTop {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.messageTop em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.messageItem strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  display: block;
}

.draftPanel {
  margin-top: 16px;
}

.draftGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

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

.draftCard {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.draftCard > div:first-child {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.draftCard strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.draftCard p {
  color: var(--muted);
  margin: 10px 0 12px;
  font-size: 12px;
}

.weakDanger {
  color: var(--red) !important;
  background: #fff7f7 !important;
}

@media (max-width: 1366px) {
  body {
    min-width: 1180px;
  }

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

  .statGroup {
    grid-column: span 3;
  }

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

  .rightColumn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    display: grid;
  }

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

.documentDraftShell {
  padding-bottom: 72px;
}

.templateOnlyShell {
  padding-bottom: 0;
}

.draftStage {
  padding-bottom: 96px;
}

.templateOnlyStage {
  padding-bottom: 24px;
}

.subMenuItemActive {
  color: var(--primary);
  background: #f2f7ff;
  font-weight: 700;
}

.draftHeader {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  display: flex;
}

.draftHeader h1 {
  color: var(--text);
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 700;
}

.draftHeader p, .panelTitle p {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 13px;
}

.headerActionGroup {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.headerActionGroup button, .templateActions button, .editorToolbar button, .miniTable button, .modalActions button, .drawerFooter button {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.headerActionGroup.small button {
  height: 30px;
  padding: 0 10px;
}

.headerActionGroup button:disabled, .templateActions button:disabled, .editorToolbar button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.primaryButton {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

.processStrip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  display: grid;
}

.processStep {
  border: 1px solid var(--line);
  color: #4e5969;
  background: #fff;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 12px;
  display: flex;
}

.processStep span {
  color: #4e5969;
  background: #f2f3f5;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 700;
  display: grid;
}

.processStep strong {
  font-size: 14px;
}

.processStep.active {
  color: var(--primary);
  background: #f7fbff;
  border-color: #bed4ff;
}

.processStep.done span {
  background: var(--primary);
  color: #fff;
}

.validationBanner {
  color: var(--orange);
  background: #fff7f3;
  border: 1px solid #ffd5c7;
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  display: flex;
}

.validationBanner strong {
  color: #b84e00;
  font-size: 14px;
  display: block;
}

.validationBanner span {
  color: #8a4b25;
  margin-top: 4px;
  font-size: 13px;
  display: block;
}

.templatePanel, .selectedTemplatePanel, .draftContentGrid {
  margin-top: 16px;
}

.templateOnlyPanel {
  min-height: calc(100vh - 168px);
}

.panelTitle {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.panelTitle.compact {
  margin-bottom: 12px;
}

.panelTitle h2 {
  color: var(--text);
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.compactSelect select, .templateSearch input, .draftField input, .draftField select, .draftField textarea, .handlerSelect select {
  border: 1px solid var(--line);
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: #fff;
  border-radius: 6px;
  outline: 0;
  font-size: 13px;
}

.compactSelect select {
  width: 220px;
  height: 34px;
  padding: 0 10px;
}

.templateTools {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.templateSearch {
  border: 1px solid var(--line);
  width: 360px;
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.templateSearch input {
  background: none;
  border: 0;
}

.categoryTabs {
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  display: flex;
  overflow-x: auto;
}

.categoryTabs button {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
}

.categoryTabs button.active {
  color: var(--primary);
  background: #eef4ff;
  border-color: #bed4ff;
  font-weight: 700;
}

.templateGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 482px;
  padding-right: 4px;
  display: grid;
  overflow: auto;
}

.templateOnlyGrid {
  max-height: none;
  overflow: visible;
}

.selectedTemplateBadge {
  color: #148a45;
  background: #f1fff5;
  border: 1px solid #b7ebc6;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 13px;
  display: inline-flex;
}

.selectedTemplateBadge strong {
  color: #0f7a3d;
  font-size: 15px;
}

.emptyTemplateState {
  border: 1px dashed var(--line);
  min-height: 180px;
  color: var(--muted);
  text-align: center;
  background: #fff;
  border-radius: 8px;
  place-items: center;
  gap: 8px;
  margin-top: 16px;
  display: grid;
}

.emptyTemplateState strong {
  color: var(--text);
  font-size: 15px;
}

.emptyTemplateState p {
  margin: 0;
  font-size: 13px;
}

.templateCard {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  min-height: 150px;
  padding: 12px;
  display: flex;
}

.templateCard.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px #165dff1a;
}

.templateCardTop {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.templateCard h3 {
  color: var(--text);
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.templateCardTop span, .templateCardTop em {
  min-height: 22px;
  color: var(--primary);
  background: #eef4ff;
  border-radius: 5px;
  align-items: center;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: 12px;
  font-style: normal;
  display: inline-flex;
}

.templateCardTop em {
  color: var(--orange);
  background: #fff3e8;
  margin-top: 0;
}

.templateCard p {
  color: #4e5969;
  min-height: 20px;
  margin: 7px 0 9px;
  font-size: 13px;
  line-height: 1.45;
}

.templateCard dl {
  color: #4e5969;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0 0 10px;
  font-size: 12px;
  display: grid;
}

.templateCard dt {
  color: var(--muted);
}

.templateCard dd {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  overflow: hidden;
}

.templateActions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  display: flex;
}

.templateActions button {
  height: 28px;
  padding: 0 9px;
}

.templateInfoGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.templateInfoGrid div, .flowSummary div, .bodyMeta div {
  background: #fbfdff;
  border: 1px solid #edf0f5;
  border-radius: 8px;
  min-height: 64px;
  padding: 12px;
}

.templateInfoGrid span, .flowSummary span, .bodyMeta span {
  color: var(--muted);
  font-size: 12px;
  display: block;
}

.templateInfoGrid strong, .flowSummary strong, .bodyMeta strong {
  color: var(--text);
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  display: block;
}

.lockedPanel {
  background: #fbfcff;
}

.lockedState {
  border: 1px dashed var(--line);
  min-height: 170px;
  color: var(--muted);
  text-align: center;
  border-radius: 8px;
  place-items: center;
  display: grid;
}

.lockedState strong {
  color: var(--text);
  margin-top: 8px;
}

.lockedState p {
  width: min(460px, 90%);
  margin: 8px auto 0;
  font-size: 13px;
  line-height: 1.6;
}

.draftContentGrid {
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 16px;
  display: grid;
}

.leftDraftColumn, .rightDraftColumn {
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.disabledDraft {
  opacity: .72;
}

.formGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.draftField {
  color: #4e5969;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  display: flex;
}

.draftField > span {
  color: #4e5969;
  font-weight: 600;
}

.draftField em {
  color: var(--red);
  padding-right: 4px;
  font-style: normal;
}

.draftField input, .draftField select {
  height: 36px;
  padding: 0 10px;
}

.draftField textarea {
  resize: vertical;
  min-height: 76px;
  padding: 9px 10px;
  line-height: 1.55;
}

.draftField b, .handlerSelect span {
  color: var(--red);
  font-size: 12px;
  font-weight: 500;
}

.draftField input:disabled, .draftField textarea:disabled, .draftField select:disabled {
  color: #86909c;
  background: #f7f8fa;
}

.inlineControl {
  align-items: center;
  gap: 8px;
  display: flex;
}

.inlineControl input {
  flex: 1;
}

.inlineControl label {
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  display: flex;
}

.inlineControl label input {
  width: auto;
  height: auto;
}

.bodyEditorGrid {
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 14px;
  display: grid;
}

.editorBox {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.editorToolbar {
  border-bottom: 1px solid var(--line);
  background: #f7f8fa;
  gap: 8px;
  padding: 10px;
  display: flex;
}

.editorToolbar button {
  height: 28px;
}

.editorBox textarea {
  resize: vertical;
  width: 100%;
  min-height: 278px;
  color: var(--text);
  border: 0;
  outline: 0;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.9;
}

.editorBox textarea:disabled {
  color: var(--muted);
  background: #f7f8fa;
}

.bodyMeta {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.bodyMeta div {
  min-height: 56px;
}

.uploadDrop {
  min-height: 118px;
  color: var(--primary);
  text-align: center;
  background: #f7fbff;
  border: 1px dashed #bed4ff;
  border-radius: 8px;
  place-items: center;
  gap: 7px;
  margin-bottom: 14px;
  display: grid;
}

.uploadDrop strong {
  color: var(--text);
  font-size: 14px;
}

.uploadDrop span {
  color: var(--muted);
  font-size: 13px;
}

.twoTableGrid {
  grid-template-columns: 1fr;
  gap: 16px;
  display: grid;
}

.twoTableGrid h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.miniTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 760px;
  font-size: 12px;
}

.twoTableGrid > div {
  overflow-x: auto;
}

.miniTable th, .miniTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  padding: 9px 8px;
}

.miniTable th {
  color: #4e5969;
  background: #f7f8fa;
  font-weight: 700;
}

.miniTable button {
  height: 24px;
  margin-right: 6px;
  padding: 0 6px;
  font-size: 12px;
}

.stickyPanel {
  top: calc(var(--topbar-height) + 16px);
  position: sticky;
}

.flowSummary {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
  display: grid;
}

.handlerSelect {
  color: #4e5969;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  display: flex;
}

.handlerSelect select {
  height: 36px;
  padding: 0 10px;
}

.flowTimeline {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.flowNode {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  display: grid;
}

.flowNode i {
  width: 28px;
  height: 28px;
  color: var(--primary);
  background: #eef4ff;
  border-radius: 50%;
  place-items: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  display: grid;
}

.flowNode div {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.flowNode strong, .flowNode span, .flowNode p, .flowNode em {
  display: block;
}

.flowNode strong {
  color: var(--text);
  font-size: 14px;
}

.flowNode span, .flowNode em {
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
  font-style: normal;
}

.flowNode p {
  color: #4e5969;
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.flowActions {
  margin-top: 12px;
}

.supervisionPanel {
  margin-top: 16px;
}

.softDisabled {
  opacity: .74;
}

.switchRow {
  color: #4e5969;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  display: flex;
}

.switchRow div {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 3px;
  padding: 3px;
  display: inline-flex;
}

.switchRow button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 5px;
  height: 28px;
  padding: 0 13px;
}

.switchRow button.active {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
}

.supervisionFields {
  grid-template-columns: 1fr;
  gap: 10px;
  display: grid;
}

.collapsedHint {
  border: 1px dashed var(--line);
  min-height: 96px;
  color: var(--muted);
  background: #fbfdff;
  border-radius: 8px;
  place-items: center;
  font-size: 13px;
  display: grid;
}

.fixedActionBar {
  bottom: 0;
  right: 0;
  left: var(--sidebar-width);
  z-index: 60;
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #fffffff5;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 12px 18px;
  transition: left .2s;
  display: flex;
  position: fixed;
}

.fixedActionBar > div:first-child {
  color: #4e5969;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  display: flex;
}

.fixedActionBar em {
  color: var(--orange);
  font-size: 12px;
  font-style: normal;
}

.oaShellCollapsed .fixedActionBar {
  left: var(--sidebar-width);
}

.modalLayer {
  z-index: 100;
  background: #1d21293d;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.confirmModal {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  width: 460px;
  padding: 18px;
  box-shadow: 0 20px 48px #1d212933;
}

.modalHeader {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.modalHeader h2 {
  color: var(--text);
  margin: 0;
  font-size: 18px;
}

.modalHeader button, .drawerHeader button {
  color: #4e5969;
  cursor: pointer;
  background: #f7f8fa;
  border-radius: 6px;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.confirmModal p {
  color: #4e5969;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.switchTarget {
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 7px;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
}

.switchTarget strong {
  color: var(--text);
}

.modalActions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.drawerLayer {
  inset: var(--topbar-height) 0 0 0;
  z-index: 90;
  background: #1d21292e;
  justify-content: flex-end;
  display: flex;
  position: fixed;
}

.previewDrawer {
  border-left: 1px solid var(--line);
  background: #fff;
  flex-direction: column;
  width: 560px;
  display: flex;
  box-shadow: -10px 0 28px #1d21291f;
}

.drawerHeader {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  display: flex;
}

.drawerHeader h2 {
  color: var(--text);
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.45;
}

.previewBody {
  flex: 1;
  padding: 16px;
  overflow: auto;
}

.previewBlock {
  border: 1px solid var(--line);
  background: #fbfdff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 14px;
}

.previewBlock h3 {
  color: var(--text);
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 14px;
  display: flex;
}

.previewBlock p {
  color: #4e5969;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.previewBlock dl {
  color: #4e5969;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px 10px;
  margin: 0;
  font-size: 13px;
  display: grid;
}

.previewBlock dt {
  color: var(--muted);
}

.previewBlock dd {
  margin: 0;
}

.drawerFooter {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  display: flex;
}

.toast {
  z-index: 120;
  color: #148a45;
  background: #f1fff5;
  border: 1px solid #b7ebc6;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 14px;
  display: flex;
  position: fixed;
  bottom: 82px;
  right: 24px;
  box-shadow: 0 10px 28px #1d21291f;
}

@media (max-width: 1440px) {
  .templateGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .rightDraftColumn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    display: grid;
  }

  .stickyPanel {
    position: static;
  }
}

@media (max-width: 1280px) {
  .processStrip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .bodyEditorGrid, .rightDraftColumn {
    grid-template-columns: 1fr;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}
/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --text-base: 1rem;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-flex {
    display: inline-flex;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .table-row {
    display: table-row;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .block-5 {
    block-size: calc(var(--spacing) * 5);
  }

  .block-6 {
    block-size: calc(var(--spacing) * 6);
  }

  .block-7 {
    block-size: calc(var(--spacing) * 7);
  }
}

:root {
  --primary: #165dff;
  --primary-hover: #1e5bff;
  --bg: #f5f7fa;
  --surface: #fff;
  --line: #e5e6eb;
  --text: #1d2129;
  --muted: #86909c;
  --red: #f53f3f;
  --orange: #f77234;
  --green: #00a870;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  min-width: 1280px;
  margin: 0;
}

button, input {
  font: inherit;
}

button {
  border: 0;
}

.oaShell {
  --topbar-height: 56px;
  --sidebar-width: 220px;
  background: var(--bg);
  min-height: 100vh;
}

.oaShellCollapsed {
  --sidebar-width: 64px;
}

.topbar {
  z-index: 20;
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.brandArea {
  width: calc(var(--sidebar-width) - 8px);
  min-width: calc(var(--sidebar-width) - 8px);
  align-items: center;
  gap: 10px;
  transition: width .2s, min-width .2s;
  display: flex;
}

.collapseButton, .iconButton {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  transition: background .16s, color .16s, border-color .16s;
  display: inline-flex;
  position: relative;
}

.collapseButton:hover, .iconButton:hover {
  color: var(--primary);
  background: #eef4ff;
  border-color: #dbe7ff;
}

.logoMark {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.brandText {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}

.brandText strong {
  font-size: 16px;
  font-weight: 700;
}

.brandText span {
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
  font-size: 12px;
}

.oaShellCollapsed .brandText {
  display: none;
}

.workbenchSearch input {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.topActions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.badge {
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  position: absolute;
  top: 2px;
  right: 1px;
}

.orgSwitcher, .userEntry {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 9px;
  display: inline-flex;
}

.avatar {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 700;
  display: grid;
}

.sidebar {
  z-index: 10;
  top: var(--topbar-height);
  width: var(--sidebar-width);
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 12px 10px;
  transition: width .2s;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden auto;
}

.menuList {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.menuItem {
  color: #4e5969;
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  display: flex;
}

.menuItem:hover, .menuItemActive {
  color: var(--primary);
  background: #eaf2ff;
  font-weight: 700;
}

.menuItem span {
  white-space: nowrap;
  flex: 1;
}

.oaShellCollapsed .menuItem {
  justify-content: center;
  padding: 0;
}

.oaShellCollapsed .menuItem span {
  display: none;
}

.menuArrow {
  transition: transform .16s;
}

.menuArrowOpen {
  transform: rotate(90deg);
}

.subMenu {
  border-left: 1px solid var(--line);
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 6px 38px;
  padding-left: 10px;
  display: flex;
}

.subMenuItem {
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  padding: 0 10px;
  font-size: 13px;
  display: flex;
}

.subMenuItem:hover {
  color: var(--primary);
  background: #f2f7ff;
}

.mainStage {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 16px) 18px 24px;
  transition: margin-left .2s;
}

.pageHeader, .welcomePanel, .panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
}

.pageHeader {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 14px 18px;
  display: flex;
}

.breadcrumb {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 13px;
  display: flex;
}

.pageHeader h1 {
  letter-spacing: 0;
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.headerNotice {
  max-width: 420px;
  height: 34px;
  color: var(--primary);
  background: #f2f7ff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.headerNotice span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.welcomePanel {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
  padding: 18px 20px;
  display: flex;
}

.welcomePanel h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.welcomePanel p {
  color: #4e5969;
  margin: 8px 0 0;
  font-size: 14px;
}

.dateLine {
  color: var(--muted);
  margin-top: 10px;
  font-size: 13px;
}

.welcomeRight {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  display: flex;
}

.workbenchSearch {
  border: 1px solid var(--line);
  width: 360px;
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.summaryAlert {
  color: var(--orange);
  font-size: 13px;
}

.statsGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  display: grid;
}

.statGroup {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  grid-column: span 2;
  gap: 10px;
  padding: 10px;
  display: flex;
}

.statGroupHeader {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.statGroupTitle {
  color: #4e5969;
  font-size: 13px;
  font-weight: 700;
}

.statTabs {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.statTabs button {
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.statTabs button.active {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.statGroupCards {
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.statGroup .statCard {
  background: #fbfdff;
  border-color: #edf0f5;
  width: 100%;
  min-height: 116px;
}

.statSolo {
  display: flex;
}

.statSolo .statCard {
  width: 100%;
}

.statCard {
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 120px;
  padding: 15px;
  transition: transform .16s, border-color .16s, box-shadow .16s;
  display: flex;
}

.statCard:hover {
  border-color: #bed4ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px #1d212914;
}

.priorityCard {
  background: linear-gradient(#fff7f7 0%, #fff 100%);
  border-color: #ffd7d7;
}

.statIcon {
  border-radius: 8px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.statMeta {
  width: 100%;
}

.statMeta span {
  color: #4e5969;
  font-size: 14px;
}

.statMeta strong {
  margin-top: 2px;
  font-size: 28px;
  line-height: 1;
  display: block;
}

.statMeta p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 13px;
}

.miniStatus {
  margin-top: auto;
  font-size: 12px;
}

.workbenchGrid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.leftColumn, .rightColumn {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.panel {
  padding: 16px;
}

.sectionHeader {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.sectionHeader h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sectionHeader p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 13px;
}

.linkButton {
  height: 28px;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  display: inline-flex;
}

.filterBar {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.segmented {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.segmented button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 5px;
  height: 28px;
  padding: 0 11px;
  font-size: 13px;
}

.segmented button.selected {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.tableWrap {
  overflow-x: auto;
}

.dataTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1040px;
  font-size: 13px;
}

.dataTable thead {
  background: #f7f8fa;
}

.dataTable th, .dataTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding: 11px 10px;
}

.dataTable th:last-child, .dataTable td:last-child {
  z-index: 1;
  background: #fff;
  min-width: 214px;
  position: sticky;
  right: 0;
  box-shadow: -10px 0 14px #f5f7fadb;
}

.dataTable th:last-child {
  z-index: 2;
  background: #f7f8fa;
}

.dataTable .dangerRow td:last-child {
  background: snow;
}

.dataTable th {
  color: #4e5969;
  font-weight: 600;
}

.dataTable tbody tr:hover {
  background: #fbfdff;
}

.dangerRow {
  background: snow;
}

.titleCell {
  max-width: 260px;
  color: var(--text);
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.typeTag, .statusTag {
  white-space: nowrap;
  border-radius: 5px;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  font-size: 12px;
  font-style: normal;
  display: inline-flex;
}

.type公文 {
  color: var(--primary);
  background: #eef4ff;
}

.type会议 {
  color: #0e7bdc;
  background: #f0f7ff;
}

.type督办 {
  color: #d46b08;
  background: #fff7e8;
}

.type议题 {
  color: #6f35d7;
  background: #f3efff;
}

.toneBlue {
  color: var(--primary);
  background: #eaf2ff;
}

.toneOrange {
  color: var(--orange);
  background: #fff3e8;
}

.toneRed {
  color: var(--red);
  background: #ffece8;
}

.toneGreen {
  color: var(--green);
  background: #e8fff3;
}

.toneGray {
  color: #4e5969;
  background: #f2f3f5;
}

.rowActions, .trackActions, .draftActions {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.rowActions button, .trackActions button, .draftActions button {
  color: #4e5969;
  cursor: pointer;
  background: #f7f8fa;
  border-radius: 5px;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.rowActions button:hover, .trackActions button:hover, .draftActions button:hover {
  color: var(--primary);
  background: #eef4ff;
}

.rowActions .primaryAction, .draftActions .primaryAction {
  background: var(--primary);
  color: #fff;
}

.quickGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.quickItem {
  border: 1px solid var(--line);
  min-height: 88px;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  padding: 12px;
  display: flex;
}

.quickItem:hover {
  background: #f2f7ff;
  border-color: #bed4ff;
}

.quickItem strong {
  color: var(--text);
  font-size: 14px;
}

.quickItem span {
  color: var(--muted);
  font-size: 12px;
}

.tabs {
  border-bottom: 1px solid var(--line);
  background: #fff;
  align-items: center;
  gap: 24px;
  min-height: 42px;
  margin: 0 0 14px;
  display: flex;
}

.tabs button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 0;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  position: relative;
}

.tabs button:after {
  content: "";
  background: none;
  border-radius: 3px 3px 0 0;
  height: 3px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.tabs button em {
  color: #4e5969;
  background: #f2f3f5;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
}

.tabs button.tabActive {
  color: var(--primary);
}

.tabs button.tabActive:after {
  background: var(--primary);
}

.tabs button.tabActive em {
  color: var(--primary);
  background: #165dff1a;
}

.trackList, .messageList {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.trackItem {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.trackMain, .trackMeta {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.trackMain strong {
  font-size: 14px;
}

.trackMeta {
  color: var(--muted);
  margin-top: 8px;
  font-size: 12px;
}

.progressLine {
  background: #eef0f5;
  border-radius: 999px;
  height: 6px;
  margin: 12px 0;
  overflow: hidden;
}

.progressLine span {
  background: var(--primary);
  border-radius: 999px;
  height: 100%;
  display: block;
}

.messageItem {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: none;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  display: grid;
}

.messageItem:last-child {
  border-bottom: 0;
}

.readDot {
  background: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-top: 8px;
}

.readDot.unread {
  background: var(--primary);
}

.messageTop {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.messageTop em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.messageItem strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  display: block;
}

.draftPanel {
  margin-top: 16px;
}

.draftGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

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

.draftCard {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.draftCard > div:first-child {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.draftCard strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.draftCard p {
  color: var(--muted);
  margin: 10px 0 12px;
  font-size: 12px;
}

.weakDanger {
  color: var(--red) !important;
  background: #fff7f7 !important;
}

@media (max-width: 1366px) {
  body {
    min-width: 1180px;
  }

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

  .statGroup {
    grid-column: span 3;
  }

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

  .rightColumn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    display: grid;
  }

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

.documentDraftShell {
  padding-bottom: 72px;
}

.templateOnlyShell {
  padding-bottom: 0;
}

.draftStage {
  padding-bottom: 96px;
}

.templateOnlyStage {
  padding-bottom: 24px;
}

.draftHeader {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  display: flex;
}

.draftHeader h1 {
  color: var(--text);
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 700;
}

.draftHeader p, .panelTitle p {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 13px;
}

.headerActionGroup {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.headerActionGroup button, .templateActions button, .editorToolbar button, .miniTable button, .modalActions button, .drawerFooter button {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.headerActionGroup.small button {
  height: 30px;
  padding: 0 10px;
}

.headerActionGroup button:disabled, .templateActions button:disabled, .editorToolbar button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.primaryButton {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

.processStrip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  display: grid;
}

.processStep {
  border: 1px solid var(--line);
  color: #4e5969;
  background: #fff;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 12px;
  display: flex;
}

.processStep span {
  color: #4e5969;
  background: #f2f3f5;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 700;
  display: grid;
}

.processStep strong {
  font-size: 14px;
}

.processStep.active {
  color: var(--primary);
  background: #f7fbff;
  border-color: #bed4ff;
}

.processStep.done span {
  background: var(--primary);
  color: #fff;
}

.validationBanner {
  color: var(--orange);
  background: #fff7f3;
  border: 1px solid #ffd5c7;
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  display: flex;
}

.validationBanner strong {
  color: #b84e00;
  font-size: 14px;
  display: block;
}

.validationBanner span {
  color: #8a4b25;
  margin-top: 4px;
  font-size: 13px;
  display: block;
}

.templatePanel, .selectedTemplatePanel, .draftContentGrid {
  margin-top: 16px;
}

.templateOnlyPanel {
  min-height: calc(100vh - 168px);
}

.panelTitle {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.panelTitle.compact {
  margin-bottom: 12px;
}

.panelTitle h2 {
  color: var(--text);
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.compactSelect select, .templateSearch input, .draftField input, .draftField select, .draftField textarea, .handlerSelect select {
  border: 1px solid var(--line);
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: #fff;
  border-radius: 6px;
  outline: 0;
  font-size: 13px;
}

.compactSelect select {
  width: 220px;
  height: 34px;
  padding: 0 10px;
}

.templateTools {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.templateSearch {
  border: 1px solid var(--line);
  width: 360px;
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.templateSearch input {
  background: none;
  border: 0;
}

.categoryTabs {
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  display: flex;
  overflow-x: auto;
}

.categoryTabs button {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
}

.categoryTabs button.active {
  color: var(--primary);
  background: #eef4ff;
  border-color: #bed4ff;
  font-weight: 700;
}

.templateGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 482px;
  padding-right: 4px;
  display: grid;
  overflow: auto;
}

.templateOnlyGrid {
  max-height: none;
  overflow: visible;
}

.selectedTemplateBadge {
  color: #148a45;
  background: #f1fff5;
  border: 1px solid #b7ebc6;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 13px;
  display: inline-flex;
}

.selectedTemplateBadge strong {
  color: #0f7a3d;
  font-size: 15px;
}

.emptyTemplateState {
  border: 1px dashed var(--line);
  min-height: 180px;
  color: var(--muted);
  text-align: center;
  background: #fff;
  border-radius: 8px;
  place-items: center;
  gap: 8px;
  margin-top: 16px;
  display: grid;
}

.emptyTemplateState strong {
  color: var(--text);
  font-size: 15px;
}

.emptyTemplateState p {
  margin: 0;
  font-size: 13px;
}

.templateCard {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  min-height: 150px;
  padding: 12px;
  display: flex;
}

.templateCard.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px #165dff1a;
}

.templateCardTop {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.templateCard h3 {
  color: var(--text);
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.templateCardTop span, .templateCardTop em {
  min-height: 22px;
  color: var(--primary);
  background: #eef4ff;
  border-radius: 5px;
  align-items: center;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: 12px;
  font-style: normal;
  display: inline-flex;
}

.templateCardTop em {
  color: var(--orange);
  background: #fff3e8;
  margin-top: 0;
}

.templateCard p {
  color: #4e5969;
  min-height: 20px;
  margin: 7px 0 9px;
  font-size: 13px;
  line-height: 1.45;
}

.templateCard dl {
  color: #4e5969;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0 0 10px;
  font-size: 12px;
  display: grid;
}

.templateCard dt {
  color: var(--muted);
}

.templateCard dd {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  overflow: hidden;
}

.templateActions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  display: flex;
}

.templateActions button {
  height: 28px;
  padding: 0 9px;
}

.templateInfoGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.templateInfoGrid div, .flowSummary div, .bodyMeta div {
  background: #fbfdff;
  border: 1px solid #edf0f5;
  border-radius: 8px;
  min-height: 64px;
  padding: 12px;
}

.templateInfoGrid span, .flowSummary span, .bodyMeta span {
  color: var(--muted);
  font-size: 12px;
  display: block;
}

.templateInfoGrid strong, .flowSummary strong, .bodyMeta strong {
  color: var(--text);
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  display: block;
}

.lockedPanel {
  background: #fbfcff;
}

.lockedState {
  border: 1px dashed var(--line);
  min-height: 170px;
  color: var(--muted);
  text-align: center;
  border-radius: 8px;
  place-items: center;
  display: grid;
}

.lockedState strong {
  color: var(--text);
  margin-top: 8px;
}

.lockedState p {
  width: min(460px, 90%);
  margin: 8px auto 0;
  font-size: 13px;
  line-height: 1.6;
}

.draftContentGrid {
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 16px;
  display: grid;
}

.leftDraftColumn, .rightDraftColumn {
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.disabledDraft {
  opacity: .72;
}

.formGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.draftField {
  color: #4e5969;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  display: flex;
}

.draftField > span {
  color: #4e5969;
  font-weight: 600;
}

.draftField em {
  color: var(--red);
  padding-right: 4px;
  font-style: normal;
}

.draftField input, .draftField select {
  height: 36px;
  padding: 0 10px;
}

.draftField textarea {
  resize: vertical;
  min-height: 76px;
  padding: 9px 10px;
  line-height: 1.55;
}

.draftField b, .handlerSelect span {
  color: var(--red);
  font-size: 12px;
  font-weight: 500;
}

.draftField input:disabled, .draftField textarea:disabled, .draftField select:disabled {
  color: #86909c;
  background: #f7f8fa;
}

.inlineControl {
  align-items: center;
  gap: 8px;
  display: flex;
}

.inlineControl input {
  flex: 1;
}

.inlineControl label {
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  display: flex;
}

.inlineControl label input {
  width: auto;
  height: auto;
}

.bodyEditorGrid {
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 14px;
  display: grid;
}

.editorBox {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.editorToolbar {
  border-bottom: 1px solid var(--line);
  background: #f7f8fa;
  gap: 8px;
  padding: 10px;
  display: flex;
}

.editorToolbar button {
  height: 28px;
}

.editorBox textarea {
  resize: vertical;
  width: 100%;
  min-height: 278px;
  color: var(--text);
  border: 0;
  outline: 0;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.9;
}

.editorBox textarea:disabled {
  color: var(--muted);
  background: #f7f8fa;
}

.bodyMeta {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.bodyMeta div {
  min-height: 56px;
}

.uploadDrop {
  min-height: 118px;
  color: var(--primary);
  text-align: center;
  background: #f7fbff;
  border: 1px dashed #bed4ff;
  border-radius: 8px;
  place-items: center;
  gap: 7px;
  margin-bottom: 14px;
  display: grid;
}

.uploadDrop strong {
  color: var(--text);
  font-size: 14px;
}

.uploadDrop span {
  color: var(--muted);
  font-size: 13px;
}

.twoTableGrid {
  grid-template-columns: 1fr;
  gap: 16px;
  display: grid;
}

.twoTableGrid h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.miniTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 760px;
  font-size: 12px;
}

.twoTableGrid > div {
  overflow-x: auto;
}

.miniTable th, .miniTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  padding: 9px 8px;
}

.miniTable th {
  color: #4e5969;
  background: #f7f8fa;
  font-weight: 700;
}

.miniTable button {
  height: 24px;
  margin-right: 6px;
  padding: 0 6px;
  font-size: 12px;
}

.stickyPanel {
  top: calc(var(--topbar-height) + 16px);
  position: sticky;
}

.flowSummary {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
  display: grid;
}

.handlerSelect {
  color: #4e5969;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  display: flex;
}

.handlerSelect select {
  height: 36px;
  padding: 0 10px;
}

.flowTimeline {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.flowNode {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  display: grid;
}

.flowNode i {
  width: 28px;
  height: 28px;
  color: var(--primary);
  background: #eef4ff;
  border-radius: 50%;
  place-items: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  display: grid;
}

.flowNode div {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.flowNode strong, .flowNode span, .flowNode p, .flowNode em {
  display: block;
}

.flowNode strong {
  color: var(--text);
  font-size: 14px;
}

.flowNode span, .flowNode em {
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
  font-style: normal;
}

.flowNode p {
  color: #4e5969;
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.flowActions {
  margin-top: 12px;
}

.supervisionPanel {
  margin-top: 16px;
}

.softDisabled {
  opacity: .74;
}

.switchRow {
  color: #4e5969;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  display: flex;
}

.switchRow div {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 3px;
  padding: 3px;
  display: inline-flex;
}

.switchRow button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 5px;
  height: 28px;
  padding: 0 13px;
}

.switchRow button.active {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
}

.supervisionFields {
  grid-template-columns: 1fr;
  gap: 10px;
  display: grid;
}

.collapsedHint {
  border: 1px dashed var(--line);
  min-height: 96px;
  color: var(--muted);
  background: #fbfdff;
  border-radius: 8px;
  place-items: center;
  font-size: 13px;
  display: grid;
}

.fixedActionBar {
  bottom: 0;
  right: 0;
  left: var(--sidebar-width);
  z-index: 60;
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #fffffff5;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 12px 18px;
  transition: left .2s;
  display: flex;
  position: fixed;
}

.fixedActionBar > div:first-child {
  color: #4e5969;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  display: flex;
}

.fixedActionBar em {
  color: var(--orange);
  font-size: 12px;
  font-style: normal;
}

.oaShellCollapsed .fixedActionBar {
  left: var(--sidebar-width);
}

.modalLayer {
  z-index: 100;
  background: #1d21293d;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.confirmModal {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  width: 460px;
  padding: 18px;
  box-shadow: 0 20px 48px #1d212933;
}

.modalHeader {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.modalHeader h2 {
  color: var(--text);
  margin: 0;
  font-size: 18px;
}

.modalHeader button, .drawerHeader button {
  color: #4e5969;
  cursor: pointer;
  background: #f7f8fa;
  border-radius: 6px;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.confirmModal p {
  color: #4e5969;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.switchTarget {
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 7px;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
}

.switchTarget strong {
  color: var(--text);
}

.modalActions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.drawerLayer {
  inset: var(--topbar-height) 0 0 0;
  z-index: 90;
  background: #1d21292e;
  justify-content: flex-end;
  display: flex;
  position: fixed;
}

.previewDrawer {
  border-left: 1px solid var(--line);
  background: #fff;
  flex-direction: column;
  width: 560px;
  display: flex;
  box-shadow: -10px 0 28px #1d21291f;
}

.drawerHeader {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  display: flex;
}

.drawerHeader h2 {
  color: var(--text);
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.45;
}

.previewBody {
  flex: 1;
  padding: 16px;
  overflow: auto;
}

.previewBlock {
  border: 1px solid var(--line);
  background: #fbfdff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 14px;
}

.previewBlock h3 {
  color: var(--text);
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 14px;
  display: flex;
}

.previewBlock p {
  color: #4e5969;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.previewBlock dl {
  color: #4e5969;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px 10px;
  margin: 0;
  font-size: 13px;
  display: grid;
}

.previewBlock dt {
  color: var(--muted);
}

.previewBlock dd {
  margin: 0;
}

.drawerFooter {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  display: flex;
}

.toast {
  z-index: 120;
  color: #148a45;
  background: #f1fff5;
  border: 1px solid #b7ebc6;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 14px;
  display: flex;
  position: fixed;
  bottom: 82px;
  right: 24px;
  box-shadow: 0 10px 28px #1d21291f;
}

@media (max-width: 1440px) {
  .templateGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .rightDraftColumn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    display: grid;
  }

  .stickyPanel {
    position: static;
  }
}

@media (max-width: 1280px) {
  .processStrip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .bodyEditorGrid, .rightDraftColumn {
    grid-template-columns: 1fr;
  }
}

.draftBoxShell {
  min-width: 1280px;
}

.draftBoxStage {
  padding-bottom: 28px;
}

.draftBoxHeader {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  display: flex;
}

.draftBoxHeader h1 {
  color: var(--text);
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 700;
}

.draftBoxHeader p, .listTitleRow p {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 13px;
}

.headerActionGroup {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.headerActionGroup button, .filterActions button, .batchBar button, .pagination button, .pagination select, .pagination input, .sortControls select, .modalActions button, .drawerFooter button, .miniInfoTable button, .missingList button, .checkList label {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.headerActionGroup button:disabled, .rowActions button:disabled, .drawerFooter button:disabled, .modalActions button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.subMenuItemActive {
  color: var(--primary);
  background: #f2f7ff;
  font-weight: 700;
}

.draftStats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  display: grid;
}

.draftStatCard {
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas: "icon label"
                       "icon value"
                       "desc desc";
  gap: 6px 10px;
  min-height: 112px;
  padding: 14px;
  transition: border-color .16s, box-shadow .16s, transform .16s;
  display: grid;
}

.draftStatCard:hover {
  border-color: #bed4ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px #1d212914;
}

.draftStatCard .statIcon {
  grid-area: icon;
  margin-top: 1px;
}

.draftStatCard span {
  color: #4e5969;
  grid-area: label;
  font-size: 13px;
}

.draftStatCard strong {
  grid-area: value;
  font-size: 26px;
  line-height: 1;
}

.draftStatCard p {
  color: var(--muted);
  grid-area: desc;
  margin: 5px 0 0;
  font-size: 12px;
}

.warningStat {
  background: #fffaf5;
  border-color: #ffd8bf;
}

.readyStat {
  background: #f6fffa;
  border-color: #b7ebc6;
}

.filterPanel, .listPanel {
  margin-top: 16px;
}

.filterPanel {
  padding: 16px;
}

.filterGrid {
  align-items: center;
  gap: 10px;
  display: flex;
}

.moreFilterGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 12px;
}

.filterGrid label {
  color: #4e5969;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  display: flex;
}

.filterGrid .searchInput {
  flex: 0 0 340px;
  width: 340px;
}

.filterGrid label:not(.searchInput) {
  flex: 0 0 220px;
  width: 220px;
}

.filterGrid label > span {
  font-weight: 600;
}

.filterGrid input, .filterGrid select, .sortControls select {
  border: 1px solid var(--line);
  width: 100%;
  min-width: 0;
  height: 36px;
  color: var(--text);
  background: #fff;
  border-radius: 6px;
  outline: 0;
  padding: 0 10px;
  font-size: 13px;
}

.searchInput > div {
  border: 1px solid var(--line);
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  display: flex;
}

.searchInput input {
  background: none;
  border: 0;
  height: auto;
  padding: 0;
}

.filterActions {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  display: flex;
}

.rotateIcon {
  transform: rotate(180deg);
}

.listTitleRow {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.listTitleRow h2 {
  color: var(--text);
  margin: 0;
  font-size: 16px;
}

.sortControls {
  width: 180px;
}

.batchBar {
  color: #4e5969;
  background: #f7fbff;
  border: 1px solid #bed4ff;
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
}

.batchBar span {
  color: var(--primary);
  font-weight: 700;
}

.batchBar em {
  color: var(--muted);
  font-style: normal;
}

.draftTableWrap {
  overflow: auto visible;
}

.draftTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1040px;
  font-size: 12px;
}

.draftTable th, .draftTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding: 10px 9px;
}

.draftTable thead {
  background: #f7f8fa;
}

.draftTable th {
  color: #4e5969;
  font-weight: 700;
}

.draftTable tbody tr:hover {
  background: #fbfdff;
}

.draftTable th:last-child, .draftTable td:last-child {
  z-index: 2;
  background: #fff;
  min-width: 286px;
  position: sticky;
  right: 0;
  box-shadow: -10px 0 14px #f5f7fae6;
}

.draftTable th:last-child {
  z-index: 3;
  background: #f7f8fa;
}

.checkCol {
  width: 40px;
  text-align: center !important;
}

.titleCell {
  max-width: 280px;
}

.titleCell strong {
  max-width: 214px;
  color: var(--text);
  text-overflow: ellipsis;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
}

.titleCell em {
  min-height: 20px;
  color: var(--orange);
  vertical-align: middle;
  background: #fff3e8;
  border-radius: 5px;
  align-items: center;
  margin-left: 7px;
  padding: 0 6px;
  font-size: 11px;
  font-style: normal;
  display: inline-flex;
}

.typeParty {
  color: #cf1322;
  background: #fff0f0;
}

.typeMeeting {
  color: #6f35d7;
  background: #f3efff;
}

.typeNotice {
  color: #d46b08;
  background: #fff7e8;
}

.typeLetter {
  color: var(--green);
  background: #e8fff3;
}

.typeOffice {
  color: var(--primary);
  background: #eef4ff;
}

.typeDocument {
  color: #0e7bdc;
  background: #f0f7ff;
}

.completionCell {
  align-items: center;
  gap: 8px;
  width: 120px;
  display: flex;
}

.completionCell .progressLine {
  flex: 1;
  min-width: 70px;
  margin: 0;
}

.completionCell strong {
  color: #4e5969;
  min-width: 34px;
  font-size: 12px;
}

.statusTag + small {
  max-width: 132px;
  color: var(--orange);
  text-overflow: ellipsis;
  margin-top: 4px;
  font-size: 11px;
  display: block;
  overflow: hidden;
}

.rowActions {
  gap: 7px;
  position: relative;
}

.rowActions button {
  border: 0;
}

.rowActions .iconOnly {
  width: 28px;
  padding: 0;
}

.primaryRowButton {
  background: var(--primary) !important;
  color: #fff !important;
}

.moreMenu {
  z-index: 20;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  gap: 2px;
  width: 156px;
  padding: 6px;
  display: flex;
  position: absolute;
  top: 30px;
  right: 0;
  box-shadow: 0 14px 34px #1d212924;
}

.moreMenu button {
  color: #4e5969;
  background: none;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
}

.moreMenu button:hover {
  color: var(--primary);
  background: #f2f7ff;
}

.skeletonTable {
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
  display: flex;
}

.skeletonTable span {
  background: linear-gradient(90deg, #f2f3f5 0%, #fff 50%, #f2f3f5 100%) 0 0 / 220% 100%;
  border-radius: 7px;
  height: 46px;
  animation: 1.2s ease-in-out infinite skeletonMove;
}

@keyframes skeletonMove {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -220% 0;
  }
}

.emptyState {
  border: 1px dashed var(--line);
  min-height: 260px;
  color: var(--muted);
  text-align: center;
  background: #fbfdff;
  border-radius: 8px;
  align-content: center;
  place-items: center;
  gap: 10px;
  display: grid;
}

.emptyState strong {
  color: var(--text);
  font-size: 16px;
}

.emptyState p {
  margin: 0;
  font-size: 13px;
}

.emptyState > div {
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.errorState {
  color: var(--red);
  background: snow;
  border-color: #ffd7d7;
}

.pagination {
  color: #4e5969;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  display: flex;
}

.pagination .pageActive {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.pagination label {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.pagination input {
  width: 48px;
  padding: 0 8px;
}

.draftPreviewDrawer {
  width: min(760px, 62vw);
}

.logDrawer {
  border-left: 1px solid var(--line);
  background: #fff;
  flex-direction: column;
  width: min(720px, 58vw);
  display: flex;
  box-shadow: -10px 0 28px #1d21291f;
}

.previewBlock {
  background: #fff;
}

.previewBlock h3 {
  color: var(--text);
}

.previewBlock dl {
  grid-template-columns: 112px minmax(0, 1fr);
}

.miniInfoTable, .logTable, .flowPreviewTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.miniInfoTable td, .logTable td, .logTable th, .flowPreviewTable td, .flowPreviewTable th {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  padding: 9px 8px;
}

.logTable th, .flowPreviewTable th {
  color: #4e5969;
  background: #f7f8fa;
}

.miniInfoTable button {
  min-height: 24px;
  margin-right: 5px;
  padding: 0 7px;
  font-size: 12px;
}

.missingList {
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.missingList li {
  color: #8a4b25;
  background: #fff7f3;
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  font-size: 13px;
  display: flex;
}

.missingList button {
  min-height: 26px;
  color: var(--primary);
}

.wideModal {
  width: min(760px, 92vw);
}

.modalInfo {
  color: #4e5969;
  background: #f7f8fa;
  border-radius: 7px;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 9px 12px;
  margin: 14px 0;
  padding: 12px;
  font-size: 13px;
  display: grid;
}

.modalInfo.twoCol {
  grid-template-columns: 92px 1fr 92px 1fr;
}

.modalInfo dt {
  color: var(--muted);
}

.modalInfo dd {
  color: var(--text);
  margin: 0;
  font-weight: 600;
}

.dangerButton {
  border-color: var(--red) !important;
  background: var(--red) !important;
  color: #fff !important;
}

.checkList {
  gap: 8px;
  margin: 14px 0;
  display: grid;
}

.checkList label {
  justify-content: flex-start;
}

.blockedTable {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 12px 0;
}

.flowPreviewTable {
  margin: 12px 0;
}

.toast {
  bottom: 24px;
}

@media (max-width: 1440px) {
  .draftStats, .filterGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .draftPreviewDrawer, .logDrawer {
    width: min(680px, 70vw);
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}
/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: .25rem;
    --text-base: 1rem;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-flex {
    display: inline-flex;
  }

  .list-item {
    display: list-item;
  }

  .table {
    display: table;
  }

  .table-row {
    display: table-row;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .block-5 {
    block-size: calc(var(--spacing) * 5);
  }

  .block-6 {
    block-size: calc(var(--spacing) * 6);
  }

  .block-7 {
    block-size: calc(var(--spacing) * 7);
  }
}

:root {
  --primary: #165dff;
  --primary-hover: #1e5bff;
  --bg: #f5f7fa;
  --surface: #fff;
  --line: #e5e6eb;
  --text: #1d2129;
  --muted: #86909c;
  --red: #f53f3f;
  --orange: #f77234;
  --green: #00a870;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Microsoft YaHei, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  min-width: 1280px;
  margin: 0;
}

button, input {
  font: inherit;
}

button {
  border: 0;
}

.oaShell {
  --topbar-height: 56px;
  --sidebar-width: 220px;
  background: var(--bg);
  min-height: 100vh;
}

.oaShellCollapsed {
  --sidebar-width: 64px;
}

.topbar {
  z-index: 20;
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.brandArea {
  width: calc(var(--sidebar-width) - 8px);
  min-width: calc(var(--sidebar-width) - 8px);
  align-items: center;
  gap: 10px;
  transition: width .2s, min-width .2s;
  display: flex;
}

.collapseButton, .iconButton {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  transition: background .16s, color .16s, border-color .16s;
  display: inline-flex;
  position: relative;
}

.collapseButton:hover, .iconButton:hover {
  color: var(--primary);
  background: #eef4ff;
  border-color: #dbe7ff;
}

.logoMark {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.brandText {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}

.brandText strong {
  font-size: 16px;
  font-weight: 700;
}

.brandText span {
  color: var(--muted);
  white-space: nowrap;
  margin-top: 2px;
  font-size: 12px;
}

.oaShellCollapsed .brandText {
  display: none;
}

.workbenchSearch input {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.topActions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.badge {
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  position: absolute;
  top: 2px;
  right: 1px;
}

.orgSwitcher, .userEntry {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 9px;
  display: inline-flex;
}

.avatar {
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 700;
  display: grid;
}

.sidebar {
  z-index: 10;
  top: var(--topbar-height);
  width: var(--sidebar-width);
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 12px 10px;
  transition: width .2s;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden auto;
}

.menuList {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.menuItem {
  color: #4e5969;
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
  display: flex;
}

.menuItem:hover, .menuItemActive {
  color: var(--primary);
  background: #eaf2ff;
  font-weight: 700;
}

.menuItem span {
  white-space: nowrap;
  flex: 1;
}

.oaShellCollapsed .menuItem {
  justify-content: center;
  padding: 0;
}

.oaShellCollapsed .menuItem span {
  display: none;
}

.menuArrow {
  transition: transform .16s;
}

.menuArrowOpen {
  transform: rotate(90deg);
}

.subMenu {
  border-left: 1px solid var(--line);
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 6px 38px;
  padding-left: 10px;
  display: flex;
}

.subMenuItem {
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  background: none;
  border-radius: 6px;
  align-items: center;
  padding: 0 10px;
  font-size: 13px;
  display: flex;
}

.subMenuItem:hover {
  color: var(--primary);
  background: #f2f7ff;
}

.mainStage {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding: calc(var(--topbar-height) + 16px) 18px 24px;
  transition: margin-left .2s;
}

.pageHeader, .welcomePanel, .panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
}

.pageHeader {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 14px 18px;
  display: flex;
}

.breadcrumb {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 13px;
  display: flex;
}

.pageHeader h1 {
  letter-spacing: 0;
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 700;
}

.headerNotice {
  max-width: 420px;
  height: 34px;
  color: var(--primary);
  background: #f2f7ff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.headerNotice span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.welcomePanel {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
  padding: 18px 20px;
  display: flex;
}

.welcomePanel h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.welcomePanel p {
  color: #4e5969;
  margin: 8px 0 0;
  font-size: 14px;
}

.dateLine {
  color: var(--muted);
  margin-top: 10px;
  font-size: 13px;
}

.welcomeRight {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  display: flex;
}

.workbenchSearch {
  border: 1px solid var(--line);
  width: 360px;
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.summaryAlert {
  color: var(--orange);
  font-size: 13px;
}

.statsGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  display: grid;
}

.statGroup {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  grid-column: span 2;
  gap: 10px;
  padding: 10px;
  display: flex;
}

.statGroupHeader {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.statGroupTitle {
  color: #4e5969;
  font-size: 13px;
  font-weight: 700;
}

.statTabs {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.statTabs button {
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

.statTabs button.active {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.statGroupCards {
  flex: 1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.statGroup .statCard {
  background: #fbfdff;
  border-color: #edf0f5;
  width: 100%;
  min-height: 116px;
}

.statSolo {
  display: flex;
}

.statSolo .statCard {
  width: 100%;
}

.statCard {
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 120px;
  padding: 15px;
  transition: transform .16s, border-color .16s, box-shadow .16s;
  display: flex;
}

.statCard:hover {
  border-color: #bed4ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px #1d212914;
}

.priorityCard {
  background: linear-gradient(#fff7f7 0%, #fff 100%);
  border-color: #ffd7d7;
}

.statIcon {
  border-radius: 8px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}

.statMeta {
  width: 100%;
}

.statMeta span {
  color: #4e5969;
  font-size: 14px;
}

.statMeta strong {
  margin-top: 2px;
  font-size: 28px;
  line-height: 1;
  display: block;
}

.statMeta p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 13px;
}

.miniStatus {
  margin-top: auto;
  font-size: 12px;
}

.workbenchGrid {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.leftColumn, .rightColumn {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.panel {
  padding: 16px;
}

.sectionHeader {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.sectionHeader h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.sectionHeader p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 13px;
}

.linkButton {
  height: 28px;
  color: var(--primary);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border-radius: 5px;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  display: inline-flex;
}

.filterBar {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  display: flex;
}

.segmented {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}

.segmented button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 5px;
  height: 28px;
  padding: 0 11px;
  font-size: 13px;
}

.segmented button.selected {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.tableWrap {
  overflow-x: auto;
}

.dataTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1040px;
  font-size: 13px;
}

.dataTable thead {
  background: #f7f8fa;
}

.dataTable th, .dataTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding: 11px 10px;
}

.dataTable th:last-child, .dataTable td:last-child {
  z-index: 1;
  background: #fff;
  min-width: 214px;
  position: sticky;
  right: 0;
  box-shadow: -10px 0 14px #f5f7fadb;
}

.dataTable th:last-child {
  z-index: 2;
  background: #f7f8fa;
}

.dataTable .dangerRow td:last-child {
  background: snow;
}

.dataTable th {
  color: #4e5969;
  font-weight: 600;
}

.dataTable tbody tr:hover {
  background: #fbfdff;
}

.dangerRow {
  background: snow;
}

.titleCell {
  max-width: 260px;
  color: var(--text);
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.typeTag, .statusTag {
  white-space: nowrap;
  border-radius: 5px;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  font-size: 12px;
  font-style: normal;
  display: inline-flex;
}

.type公文 {
  color: var(--primary);
  background: #eef4ff;
}

.type会议 {
  color: #0e7bdc;
  background: #f0f7ff;
}

.type督办 {
  color: #d46b08;
  background: #fff7e8;
}

.type议题 {
  color: #6f35d7;
  background: #f3efff;
}

.toneBlue {
  color: var(--primary);
  background: #eaf2ff;
}

.toneOrange {
  color: var(--orange);
  background: #fff3e8;
}

.toneRed {
  color: var(--red);
  background: #ffece8;
}

.toneGreen {
  color: var(--green);
  background: #e8fff3;
}

.toneGray {
  color: #4e5969;
  background: #f2f3f5;
}

.rowActions, .trackActions, .draftActions {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.rowActions button, .trackActions button, .draftActions button {
  color: #4e5969;
  cursor: pointer;
  background: #f7f8fa;
  border-radius: 5px;
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.rowActions button:hover, .trackActions button:hover, .draftActions button:hover {
  color: var(--primary);
  background: #eef4ff;
}

.rowActions .primaryAction, .draftActions .primaryAction {
  background: var(--primary);
  color: #fff;
}

.quickGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.quickItem {
  border: 1px solid var(--line);
  min-height: 88px;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  padding: 12px;
  display: flex;
}

.quickItem:hover {
  background: #f2f7ff;
  border-color: #bed4ff;
}

.quickItem strong {
  color: var(--text);
  font-size: 14px;
}

.quickItem span {
  color: var(--muted);
  font-size: 12px;
}

.tabs {
  border-bottom: 1px solid var(--line);
  background: #fff;
  align-items: center;
  gap: 24px;
  min-height: 42px;
  margin: 0 0 14px;
  display: flex;
}

.tabs button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 0;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  position: relative;
}

.tabs button:after {
  content: "";
  background: none;
  border-radius: 3px 3px 0 0;
  height: 3px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

.tabs button em {
  color: #4e5969;
  background: #f2f3f5;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
}

.tabs button.tabActive {
  color: var(--primary);
}

.tabs button.tabActive:after {
  background: var(--primary);
}

.tabs button.tabActive em {
  color: var(--primary);
  background: #165dff1a;
}

.trackList, .messageList {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.trackItem {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.trackMain, .trackMeta {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.trackMain strong {
  font-size: 14px;
}

.trackMeta {
  color: var(--muted);
  margin-top: 8px;
  font-size: 12px;
}

.progressLine {
  background: #eef0f5;
  border-radius: 999px;
  height: 6px;
  margin: 12px 0;
  overflow: hidden;
}

.progressLine span {
  background: var(--primary);
  border-radius: 999px;
  height: 100%;
  display: block;
}

.messageItem {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: none;
  grid-template-columns: 10px 1fr;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  display: grid;
}

.messageItem:last-child {
  border-bottom: 0;
}

.readDot {
  background: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  margin-top: 8px;
}

.readDot.unread {
  background: var(--primary);
}

.messageTop {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.messageTop em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.messageItem strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  display: block;
}

.draftPanel {
  margin-top: 16px;
}

.draftGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

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

.draftCard {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 12px;
}

.draftCard > div:first-child {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.draftCard strong {
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
}

.draftCard p {
  color: var(--muted);
  margin: 10px 0 12px;
  font-size: 12px;
}

.weakDanger {
  color: var(--red) !important;
  background: #fff7f7 !important;
}

@media (max-width: 1366px) {
  body {
    min-width: 1180px;
  }

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

  .statGroup {
    grid-column: span 3;
  }

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

  .rightColumn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    display: grid;
  }

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

.documentDraftShell {
  padding-bottom: 72px;
}

.templateOnlyShell {
  padding-bottom: 0;
}

.draftStage {
  padding-bottom: 96px;
}

.templateOnlyStage {
  padding-bottom: 24px;
}

.draftHeader {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  display: flex;
}

.draftHeader h1 {
  color: var(--text);
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 700;
}

.draftHeader p, .panelTitle p {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 13px;
}

.headerActionGroup {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.headerActionGroup button, .templateActions button, .editorToolbar button, .miniTable button, .modalActions button, .drawerFooter button {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.headerActionGroup.small button {
  height: 30px;
  padding: 0 10px;
}

.headerActionGroup button:disabled, .templateActions button:disabled, .editorToolbar button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.primaryButton {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

.processStrip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  display: grid;
}

.processStep {
  border: 1px solid var(--line);
  color: #4e5969;
  background: #fff;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 12px;
  display: flex;
}

.processStep span {
  color: #4e5969;
  background: #f2f3f5;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 700;
  display: grid;
}

.processStep strong {
  font-size: 14px;
}

.processStep.active {
  color: var(--primary);
  background: #f7fbff;
  border-color: #bed4ff;
}

.processStep.done span {
  background: var(--primary);
  color: #fff;
}

.validationBanner {
  color: var(--orange);
  background: #fff7f3;
  border: 1px solid #ffd5c7;
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  display: flex;
}

.validationBanner strong {
  color: #b84e00;
  font-size: 14px;
  display: block;
}

.validationBanner span {
  color: #8a4b25;
  margin-top: 4px;
  font-size: 13px;
  display: block;
}

.templatePanel, .selectedTemplatePanel, .draftContentGrid {
  margin-top: 16px;
}

.templateOnlyPanel {
  min-height: calc(100vh - 168px);
}

.panelTitle {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.panelTitle.compact {
  margin-bottom: 12px;
}

.panelTitle h2 {
  color: var(--text);
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.compactSelect select, .templateSearch input, .draftField input, .draftField select, .draftField textarea, .handlerSelect select {
  border: 1px solid var(--line);
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: #fff;
  border-radius: 6px;
  outline: 0;
  font-size: 13px;
}

.compactSelect select {
  width: 220px;
  height: 34px;
  padding: 0 10px;
}

.templateTools {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.templateSearch {
  border: 1px solid var(--line);
  width: 360px;
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.templateSearch input {
  background: none;
  border: 0;
}

.categoryTabs {
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  display: flex;
  overflow-x: auto;
}

.categoryTabs button {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
}

.categoryTabs button.active {
  color: var(--primary);
  background: #eef4ff;
  border-color: #bed4ff;
  font-weight: 700;
}

.templateGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 482px;
  padding-right: 4px;
  display: grid;
  overflow: auto;
}

.templateOnlyGrid {
  max-height: none;
  overflow: visible;
}

.selectedTemplateBadge {
  color: #148a45;
  background: #f1fff5;
  border: 1px solid #b7ebc6;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 13px;
  display: inline-flex;
}

.selectedTemplateBadge strong {
  color: #0f7a3d;
  font-size: 15px;
}

.emptyTemplateState {
  border: 1px dashed var(--line);
  min-height: 180px;
  color: var(--muted);
  text-align: center;
  background: #fff;
  border-radius: 8px;
  place-items: center;
  gap: 8px;
  margin-top: 16px;
  display: grid;
}

.emptyTemplateState strong {
  color: var(--text);
  font-size: 15px;
}

.emptyTemplateState p {
  margin: 0;
  font-size: 13px;
}

.templateCard {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  min-height: 150px;
  padding: 12px;
  display: flex;
}

.templateCard.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px #165dff1a;
}

.templateCardTop {
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.templateCard h3 {
  color: var(--text);
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.templateCardTop span, .templateCardTop em {
  min-height: 22px;
  color: var(--primary);
  background: #eef4ff;
  border-radius: 5px;
  align-items: center;
  margin-top: 8px;
  padding: 2px 8px;
  font-size: 12px;
  font-style: normal;
  display: inline-flex;
}

.templateCardTop em {
  color: var(--orange);
  background: #fff3e8;
  margin-top: 0;
}

.templateCard p {
  color: #4e5969;
  min-height: 20px;
  margin: 7px 0 9px;
  font-size: 13px;
  line-height: 1.45;
}

.templateCard dl {
  color: #4e5969;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0 0 10px;
  font-size: 12px;
  display: grid;
}

.templateCard dt {
  color: var(--muted);
}

.templateCard dd {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  overflow: hidden;
}

.templateActions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  display: flex;
}

.templateActions button {
  height: 28px;
  padding: 0 9px;
}

.templateInfoGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.templateInfoGrid div, .flowSummary div, .bodyMeta div {
  background: #fbfdff;
  border: 1px solid #edf0f5;
  border-radius: 8px;
  min-height: 64px;
  padding: 12px;
}

.templateInfoGrid span, .flowSummary span, .bodyMeta span {
  color: var(--muted);
  font-size: 12px;
  display: block;
}

.templateInfoGrid strong, .flowSummary strong, .bodyMeta strong {
  color: var(--text);
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  display: block;
}

.lockedPanel {
  background: #fbfcff;
}

.lockedState {
  border: 1px dashed var(--line);
  min-height: 170px;
  color: var(--muted);
  text-align: center;
  border-radius: 8px;
  place-items: center;
  display: grid;
}

.lockedState strong {
  color: var(--text);
  margin-top: 8px;
}

.lockedState p {
  width: min(460px, 90%);
  margin: 8px auto 0;
  font-size: 13px;
  line-height: 1.6;
}

.draftContentGrid {
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 16px;
  display: grid;
}

.leftDraftColumn, .rightDraftColumn {
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.disabledDraft {
  opacity: .72;
}

.formGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.draftField {
  color: #4e5969;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  display: flex;
}

.draftField > span {
  color: #4e5969;
  font-weight: 600;
}

.draftField em {
  color: var(--red);
  padding-right: 4px;
  font-style: normal;
}

.draftField input, .draftField select {
  height: 36px;
  padding: 0 10px;
}

.draftField textarea {
  resize: vertical;
  min-height: 76px;
  padding: 9px 10px;
  line-height: 1.55;
}

.draftField b, .handlerSelect span {
  color: var(--red);
  font-size: 12px;
  font-weight: 500;
}

.draftField input:disabled, .draftField textarea:disabled, .draftField select:disabled {
  color: #86909c;
  background: #f7f8fa;
}

.inlineControl {
  align-items: center;
  gap: 8px;
  display: flex;
}

.inlineControl input {
  flex: 1;
}

.inlineControl label {
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  display: flex;
}

.inlineControl label input {
  width: auto;
  height: auto;
}

.bodyEditorGrid {
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 14px;
  display: grid;
}

.editorBox {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.editorToolbar {
  border-bottom: 1px solid var(--line);
  background: #f7f8fa;
  gap: 8px;
  padding: 10px;
  display: flex;
}

.editorToolbar button {
  height: 28px;
}

.editorBox textarea {
  resize: vertical;
  width: 100%;
  min-height: 278px;
  color: var(--text);
  border: 0;
  outline: 0;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.9;
}

.editorBox textarea:disabled {
  color: var(--muted);
  background: #f7f8fa;
}

.bodyMeta {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.bodyMeta div {
  min-height: 56px;
}

.uploadDrop {
  min-height: 118px;
  color: var(--primary);
  text-align: center;
  background: #f7fbff;
  border: 1px dashed #bed4ff;
  border-radius: 8px;
  place-items: center;
  gap: 7px;
  margin-bottom: 14px;
  display: grid;
}

.uploadDrop strong {
  color: var(--text);
  font-size: 14px;
}

.uploadDrop span {
  color: var(--muted);
  font-size: 13px;
}

.twoTableGrid {
  grid-template-columns: 1fr;
  gap: 16px;
  display: grid;
}

.twoTableGrid h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.miniTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 760px;
  font-size: 12px;
}

.twoTableGrid > div {
  overflow-x: auto;
}

.miniTable th, .miniTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  padding: 9px 8px;
}

.miniTable th {
  color: #4e5969;
  background: #f7f8fa;
  font-weight: 700;
}

.miniTable button {
  height: 24px;
  margin-right: 6px;
  padding: 0 6px;
  font-size: 12px;
}

.stickyPanel {
  top: calc(var(--topbar-height) + 16px);
  position: sticky;
}

.flowSummary {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
  display: grid;
}

.handlerSelect {
  color: #4e5969;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 13px;
  display: flex;
}

.handlerSelect select {
  height: 36px;
  padding: 0 10px;
}

.flowTimeline {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.flowNode {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  display: grid;
}

.flowNode i {
  width: 28px;
  height: 28px;
  color: var(--primary);
  background: #eef4ff;
  border-radius: 50%;
  place-items: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  display: grid;
}

.flowNode div {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.flowNode strong, .flowNode span, .flowNode p, .flowNode em {
  display: block;
}

.flowNode strong {
  color: var(--text);
  font-size: 14px;
}

.flowNode span, .flowNode em {
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
  font-style: normal;
}

.flowNode p {
  color: #4e5969;
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.flowActions {
  margin-top: 12px;
}

.supervisionPanel {
  margin-top: 16px;
}

.softDisabled {
  opacity: .74;
}

.switchRow {
  color: #4e5969;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  display: flex;
}

.switchRow div {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 7px;
  gap: 3px;
  padding: 3px;
  display: inline-flex;
}

.switchRow button {
  color: #4e5969;
  cursor: pointer;
  background: none;
  border-radius: 5px;
  height: 28px;
  padding: 0 13px;
}

.switchRow button.active {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
}

.supervisionFields {
  grid-template-columns: 1fr;
  gap: 10px;
  display: grid;
}

.collapsedHint {
  border: 1px dashed var(--line);
  min-height: 96px;
  color: var(--muted);
  background: #fbfdff;
  border-radius: 8px;
  place-items: center;
  font-size: 13px;
  display: grid;
}

.fixedActionBar {
  bottom: 0;
  right: 0;
  left: var(--sidebar-width);
  z-index: 60;
  border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #fffffff5;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 12px 18px;
  transition: left .2s;
  display: flex;
  position: fixed;
}

.fixedActionBar > div:first-child {
  color: #4e5969;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  display: flex;
}

.fixedActionBar em {
  color: var(--orange);
  font-size: 12px;
  font-style: normal;
}

.oaShellCollapsed .fixedActionBar {
  left: var(--sidebar-width);
}

.modalLayer {
  z-index: 100;
  background: #1d21293d;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}

.confirmModal {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  width: 460px;
  padding: 18px;
  box-shadow: 0 20px 48px #1d212933;
}

.modalHeader {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.modalHeader h2 {
  color: var(--text);
  margin: 0;
  font-size: 18px;
}

.modalHeader button, .drawerHeader button {
  color: #4e5969;
  cursor: pointer;
  background: #f7f8fa;
  border-radius: 6px;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.confirmModal p {
  color: #4e5969;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.switchTarget {
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 7px;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
}

.switchTarget strong {
  color: var(--text);
}

.modalActions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.drawerLayer {
  inset: var(--topbar-height) 0 0 0;
  z-index: 90;
  background: #1d21292e;
  justify-content: flex-end;
  display: flex;
  position: fixed;
}

.previewDrawer {
  border-left: 1px solid var(--line);
  background: #fff;
  flex-direction: column;
  width: 560px;
  display: flex;
  box-shadow: -10px 0 28px #1d21291f;
}

.drawerHeader {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  display: flex;
}

.drawerHeader h2 {
  color: var(--text);
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.45;
}

.previewBody {
  flex: 1;
  padding: 16px;
  overflow: auto;
}

.previewBlock {
  border: 1px solid var(--line);
  background: #fbfdff;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 14px;
}

.previewBlock h3 {
  color: var(--text);
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 14px;
  display: flex;
}

.previewBlock p {
  color: #4e5969;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.previewBlock dl {
  color: #4e5969;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px 10px;
  margin: 0;
  font-size: 13px;
  display: grid;
}

.previewBlock dt {
  color: var(--muted);
}

.previewBlock dd {
  margin: 0;
}

.drawerFooter {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  display: flex;
}

.toast {
  z-index: 120;
  color: #148a45;
  background: #f1fff5;
  border: 1px solid #b7ebc6;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 14px;
  display: flex;
  position: fixed;
  bottom: 82px;
  right: 24px;
  box-shadow: 0 10px 28px #1d21291f;
}

@media (max-width: 1440px) {
  .templateGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .rightDraftColumn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    display: grid;
  }

  .stickyPanel {
    position: static;
  }
}

@media (max-width: 1280px) {
  .processStrip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .bodyEditorGrid, .rightDraftColumn {
    grid-template-columns: 1fr;
  }
}

.draftBoxShell {
  min-width: 1280px;
}

.draftBoxStage {
  padding-bottom: 28px;
}

.draftBoxHeader {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  display: flex;
}

.draftBoxHeader h1 {
  color: var(--text);
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 700;
}

.draftBoxHeader p, .listTitleRow p {
  color: var(--muted);
  margin: 7px 0 0;
  font-size: 13px;
}

.headerActionGroup {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.headerActionGroup button, .filterActions button, .batchBar button, .pagination button, .pagination select, .pagination input, .sortControls select, .modalActions button, .drawerFooter button, .miniInfoTable button, .missingList button, .checkList label {
  border: 1px solid var(--line);
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  display: inline-flex;
}

.headerActionGroup button:disabled, .rowActions button:disabled, .drawerFooter button:disabled, .modalActions button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.subMenuItemActive {
  color: var(--primary);
  background: #f2f7ff;
  font-weight: 700;
}

.draftStats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  display: grid;
}

.draftStatCard {
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  background: #fff;
  border-radius: 8px;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas: "icon label"
                       "icon value"
                       "desc desc";
  gap: 6px 10px;
  min-height: 112px;
  padding: 14px;
  transition: border-color .16s, box-shadow .16s, transform .16s;
  display: grid;
}

.draftStatCard:hover {
  border-color: #bed4ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px #1d212914;
}

.draftStatCard .statIcon {
  grid-area: icon;
  margin-top: 1px;
}

.draftStatCard span {
  color: #4e5969;
  grid-area: label;
  font-size: 13px;
}

.draftStatCard strong {
  grid-area: value;
  font-size: 26px;
  line-height: 1;
}

.draftStatCard p {
  color: var(--muted);
  grid-area: desc;
  margin: 5px 0 0;
  font-size: 12px;
}

.warningStat {
  background: #fffaf5;
  border-color: #ffd8bf;
}

.readyStat {
  background: #f6fffa;
  border-color: #b7ebc6;
}

.filterPanel, .listPanel {
  margin-top: 16px;
}

.filterPanel {
  padding: 16px;
}

.filterGrid {
  align-items: center;
  gap: 10px;
  display: flex;
}

.moreFilterGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 12px;
}

.filterGrid label {
  color: #4e5969;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  display: flex;
}

.filterGrid .searchInput {
  flex: 0 0 340px;
  width: 340px;
}

.filterGrid label:not(.searchInput) {
  flex: 0 0 220px;
  width: 220px;
}

.filterGrid label > span {
  font-weight: 600;
}

.filterGrid input, .filterGrid select, .sortControls select {
  border: 1px solid var(--line);
  width: 100%;
  min-width: 0;
  height: 36px;
  color: var(--text);
  background: #fff;
  border-radius: 6px;
  outline: 0;
  padding: 0 10px;
  font-size: 13px;
}

.searchInput > div {
  border: 1px solid var(--line);
  height: 36px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  display: flex;
}

.searchInput input {
  background: none;
  border: 0;
  height: auto;
  padding: 0;
}

.filterActions {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  display: flex;
}

.rotateIcon {
  transform: rotate(180deg);
}

.listTitleRow {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.listTitleRow h2 {
  color: var(--text);
  margin: 0;
  font-size: 16px;
}

.sortControls {
  width: 180px;
}

.batchBar {
  color: #4e5969;
  background: #f7fbff;
  border: 1px solid #bed4ff;
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
}

.batchBar span {
  color: var(--primary);
  font-weight: 700;
}

.batchBar em {
  color: var(--muted);
  font-style: normal;
}

.draftTableWrap {
  overflow: auto visible;
}

.draftTable {
  border-collapse: collapse;
  width: 100%;
  min-width: 1040px;
  font-size: 12px;
}

.draftTable th, .draftTable td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding: 10px 9px;
}

.draftTable thead {
  background: #f7f8fa;
}

.draftTable th {
  color: #4e5969;
  font-weight: 700;
}

.draftTable tbody tr:hover {
  background: #fbfdff;
}

.draftTable th:last-child, .draftTable td:last-child {
  z-index: 2;
  background: #fff;
  min-width: 286px;
  position: sticky;
  right: 0;
  box-shadow: -10px 0 14px #f5f7fae6;
}

.draftTable th:last-child {
  z-index: 3;
  background: #f7f8fa;
}

.checkCol {
  width: 40px;
  text-align: center !important;
}

.titleCell {
  max-width: 280px;
}

.titleCell strong {
  max-width: 214px;
  color: var(--text);
  text-overflow: ellipsis;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
}

.titleCell em {
  min-height: 20px;
  color: var(--orange);
  vertical-align: middle;
  background: #fff3e8;
  border-radius: 5px;
  align-items: center;
  margin-left: 7px;
  padding: 0 6px;
  font-size: 11px;
  font-style: normal;
  display: inline-flex;
}

.typeParty {
  color: #cf1322;
  background: #fff0f0;
}

.typeMeeting {
  color: #6f35d7;
  background: #f3efff;
}

.typeNotice {
  color: #d46b08;
  background: #fff7e8;
}

.typeLetter {
  color: var(--green);
  background: #e8fff3;
}

.typeOffice {
  color: var(--primary);
  background: #eef4ff;
}

.typeDocument {
  color: #0e7bdc;
  background: #f0f7ff;
}

.completionCell {
  align-items: center;
  gap: 8px;
  width: 120px;
  display: flex;
}

.completionCell .progressLine {
  flex: 1;
  min-width: 70px;
  margin: 0;
}

.completionCell strong {
  color: #4e5969;
  min-width: 34px;
  font-size: 12px;
}

.statusTag + small {
  max-width: 132px;
  color: var(--orange);
  text-overflow: ellipsis;
  margin-top: 4px;
  font-size: 11px;
  display: block;
  overflow: hidden;
}

.rowActions {
  gap: 7px;
  position: relative;
}

.rowActions button {
  border: 0;
}

.rowActions .iconOnly {
  width: 28px;
  padding: 0;
}

.primaryRowButton {
  background: var(--primary) !important;
  color: #fff !important;
}

.moreMenu {
  z-index: 20;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  gap: 2px;
  width: 156px;
  padding: 6px;
  display: flex;
  position: absolute;
  top: 30px;
  right: 0;
  box-shadow: 0 14px 34px #1d212924;
}

.moreMenu button {
  color: #4e5969;
  background: none;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
}

.moreMenu button:hover {
  color: var(--primary);
  background: #f2f7ff;
}

.skeletonTable {
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
  display: flex;
}

.skeletonTable span {
  background: linear-gradient(90deg, #f2f3f5 0%, #fff 50%, #f2f3f5 100%) 0 0 / 220% 100%;
  border-radius: 7px;
  height: 46px;
  animation: 1.2s ease-in-out infinite skeletonMove;
}

@keyframes skeletonMove {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -220% 0;
  }
}

.emptyState {
  border: 1px dashed var(--line);
  min-height: 260px;
  color: var(--muted);
  text-align: center;
  background: #fbfdff;
  border-radius: 8px;
  align-content: center;
  place-items: center;
  gap: 10px;
  display: grid;
}

.emptyState strong {
  color: var(--text);
  font-size: 16px;
}

.emptyState p {
  margin: 0;
  font-size: 13px;
}

.emptyState > div {
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.errorState {
  color: var(--red);
  background: snow;
  border-color: #ffd7d7;
}

.pagination {
  color: #4e5969;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  display: flex;
}

.pagination .pageActive {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

.pagination label {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.pagination input {
  width: 48px;
  padding: 0 8px;
}

.draftPreviewDrawer {
  width: min(760px, 62vw);
}

.logDrawer {
  border-left: 1px solid var(--line);
  background: #fff;
  flex-direction: column;
  width: min(720px, 58vw);
  display: flex;
  box-shadow: -10px 0 28px #1d21291f;
}

.previewBlock {
  background: #fff;
}

.previewBlock h3 {
  color: var(--text);
}

.previewBlock dl {
  grid-template-columns: 112px minmax(0, 1fr);
}

.miniInfoTable, .logTable, .flowPreviewTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.miniInfoTable td, .logTable td, .logTable th, .flowPreviewTable td, .flowPreviewTable th {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  padding: 9px 8px;
}

.logTable th, .flowPreviewTable th {
  color: #4e5969;
  background: #f7f8fa;
}

.miniInfoTable button {
  min-height: 24px;
  margin-right: 5px;
  padding: 0 7px;
  font-size: 12px;
}

.missingList {
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.missingList li {
  color: #8a4b25;
  background: #fff7f3;
  border-radius: 7px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  font-size: 13px;
  display: flex;
}

.missingList button {
  min-height: 26px;
  color: var(--primary);
}

.wideModal {
  width: min(760px, 92vw);
}

.modalInfo {
  color: #4e5969;
  background: #f7f8fa;
  border-radius: 7px;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 9px 12px;
  margin: 14px 0;
  padding: 12px;
  font-size: 13px;
  display: grid;
}

.modalInfo.twoCol {
  grid-template-columns: 92px 1fr 92px 1fr;
}

.modalInfo dt {
  color: var(--muted);
}

.modalInfo dd {
  color: var(--text);
  margin: 0;
  font-weight: 600;
}

.dangerButton {
  border-color: var(--red) !important;
  background: var(--red) !important;
  color: #fff !important;
}

.checkList {
  gap: 8px;
  margin: 14px 0;
  display: grid;
}

.checkList label {
  justify-content: flex-start;
}

.blockedTable {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 12px 0;
}

.flowPreviewTable {
  margin: 12px 0;
}

.toast {
  bottom: 24px;
}

@media (max-width: 1440px) {
  .draftStats, .filterGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .draftPreviewDrawer, .logDrawer {
    width: min(680px, 70vw);
  }
}

.submissionTable {
  min-width: 1180px;
}

.submissionTable th:last-child, .submissionTable td:last-child {
  min-width: 220px;
}

.submissionFilterGrid label:not(.searchInput) {
  flex-basis: 160px;
  width: 160px;
}

.submissionFilterGrid {
  flex-wrap: wrap;
}

.submissionFilterGrid .filterSegmentedField {
  flex: 320px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.submissionFilterGrid .filterSegmentedField > span {
  color: #4e5969;
  white-space: nowrap;
  flex: none;
  font-size: 13px;
  font-weight: 600;
}

.submissionFilterGrid .multiSegmented {
  border: 1px solid var(--line);
  background: #f7f8fa;
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  min-height: 38px;
  padding: 4px;
  display: inline-flex;
}

.submissionFilterGrid .multiSegmented button {
  color: #4e5969;
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 6px;
  height: 30px;
  padding: 0 14px;
  font-size: 13px;
}

.submissionFilterGrid .multiSegmented button.selected {
  color: var(--primary);
  background: #fff;
  font-weight: 700;
  box-shadow: 0 1px 3px #1d212914;
}

.submissionFilterGrid .filterActions {
  flex: none;
}

.submissionDrawer .previewBlock dl {
  grid-template-columns: 108px minmax(0, 1fr);
}

@media (max-width: 1440px) {
  .draftStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .submissionFilterGrid .filterSegmentedField {
    flex-basis: 100%;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}