:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --text: #172033;
  --muted: #647089;
  --line: #dfe5ef;
  --primary: #1769e0;
  --primary-dark: #0f4fa8;
  --good: #138a50;
  --warn: #b7791f;
  --bad: #c53030;
  --soft: #edf4ff;
  --shadow: 0 10px 30px rgba(25, 35, 60, 0.08);
  --control-height: 42px;
}

/* 2026-08-04 work publishing title and task-card hierarchy. */
.special-task-admin-cards {
  display: grid;
  gap: 12px;
  padding: 14px 18px 18px;
}

.special-task-admin-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid #dfe7f2;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(41, 65, 100, .05);
}

.special-task-admin-card-head,
.special-task-admin-card-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.special-task-admin-card-head small,
.special-task-admin-card-content small {
  display: block;
  margin-bottom: 4px;
  color: #7a879a;
  font-size: 11px;
  font-weight: 700;
}

.special-task-admin-card-head h3 {
  margin: 0;
  color: #1f3048;
  font-size: 17px;
  line-height: 1.4;
}

.special-task-admin-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 10px 12px;
  border-radius: 9px;
  color: #4c607c;
  background: #f5f8fc;
  font-size: 12px;
}

.special-task-admin-card-meta span { display: inline-flex; gap: 7px; }
.special-task-admin-card-meta b { color: #75849a; }
.special-task-admin-card-content { padding: 0 2px; }
.special-task-admin-card-content p { margin: 0; color: #293b54; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.special-task-admin-card-actions { justify-content: flex-end; }
.employee-special-task h3,
.special-task-completed-content h3 { margin: 0 0 6px; color: #243750; font-size: 15px; line-height: 1.4; }

@media (max-width: 700px) {
  .special-task-admin-cards { padding: 10px; }
  .special-task-admin-card-meta { display: grid; grid-template-columns: 1fr; }
}

/* 2026-07-30: architecture-led admin navigation */
.nav {
  gap: 8px;
}

.nav-group {
  overflow: hidden;
  gap: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.nav-group.open {
  gap: 4px;
  padding-bottom: 5px;
  border-color: #e8edf5;
  background: #fbfcfe;
}

.nav-group.has-active {
  border-color: #dce8fb;
  background: #f8fbff;
}

.nav .nav-group-title {
  min-height: 40px;
  padding: 6px 9px;
  color: #68758a;
  border-radius: 9px;
  font-size: 12px;
  letter-spacing: 0;
}

.nav .nav-group-title:hover {
  color: #315f9c;
  background: #f2f6fc;
}

.nav-group-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.nav-group-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-group-copy small {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  place-items: center;
  border-radius: 10px;
  color: #8a96a8;
  background: #edf1f7;
  font-size: 10px;
  font-weight: 700;
}

.nav-group-icon {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border-radius: 8px;
  color: #6584ae;
  background: #edf4fd;
}

.nav-group-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.nav-group.has-active .nav-group-icon {
  color: #fff;
  background: linear-gradient(135deg, #5a91e9, #3274d5);
  box-shadow: 0 5px 12px rgba(50, 116, 213, .2);
}

.nav-group.has-active .nav-group-title {
  color: #2e5f9f;
}

.nav-group-items {
  padding: 0 5px;
}

.nav-group-items > button {
  position: relative;
  padding-left: 12px;
}

.nav-group-items > button.active::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 2px;
  width: 3px;
  border-radius: 3px;
  background: currentColor;
  content: "";
}

body[data-ui-theme="black-gold"] .nav-group.open,
body[data-ui-theme="black-gold"] .nav-group.has-active {
  border-color: rgba(203, 169, 92, .2);
  background: rgba(255, 255, 255, .025);
}

body[data-ui-theme="black-gold"] .nav-group-copy small {
  color: #c9b071;
  background: rgba(203, 169, 92, .12);
}

body[data-ui-theme="black-gold"] .nav-group-icon {
  color: #cfb66e;
  background: rgba(203, 169, 92, .12);
}

body[data-ui-theme="black-gold"] .nav-group.has-active .nav-group-icon {
  color: #16130b;
  background: linear-gradient(135deg, #e3ca7b, #ae8634);
}

body[data-ui-theme="black-gold"] .nav-group.has-active .nav-group-title {
  color: #e4cc84;
}

@media (max-width: 820px) {
  .nav-group.open {
    padding-bottom: 6px;
  }

  .nav .nav-group-title {
    display: flex;
    min-height: 42px;
  }

  .nav-group-items > button {
    min-height: 40px;
  }
}

/* Compact, content-fit filter controls across the ERP. */
@media (min-width: 821px) {
  .filter-panel,
  .records-page-card .filter-panel {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .filter-panel > label {
    flex: 0 0 auto;
    min-width: 0;
    gap: 5px;
    font-size: 12px;
  }

  .filter-panel input,
  .filter-panel select,
  .filter-panel button {
    height: 36px;
    min-height: 36px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .filter-panel .filter-employee {
    width: 148px;
  }

  .filter-panel .filter-work-item {
    width: 188px;
  }

  .filter-panel .filter-status {
    width: 132px;
  }

  .filter-panel .submission-date-range {
    width: 326px;
    min-width: 326px;
  }

  .filter-panel .filter-actions {
    flex: 0 0 auto;
  }

  .inventory-advanced-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .inventory-advanced-filter > label {
    flex: 0 0 136px;
    width: 136px;
    min-width: 0;
  }

  .inventory-advanced-filter > .inventory-date-range {
    flex-basis: 326px;
    width: 326px;
    min-width: 326px;
  }

  .inventory-advanced-filter > label.inventory-keyword {
    flex-basis: 252px;
    width: 252px;
  }

  .inventory-advanced-filter > label[data-filter-level="model"] {
    flex-basis: 176px;
    width: 176px;
  }

  .inventory-advanced-filter > label.inventory-price-range {
    flex-basis: 258px;
    width: 258px;
  }

  .inventory-advanced-filter .inventory-filter-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
  }

  .inventory-advanced-filter .inventory-filter-actions button {
    min-width: 64px;
  }

  .one-click-filter {
    gap: 10px;
    padding: 11px 12px;
  }

  .one-click-filter-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 10px;
  }

  .one-click-filter-grid > label {
    flex: 0 0 136px;
    width: 136px;
    min-width: 0;
    gap: 5px;
    font-size: 12px;
  }

  .one-click-filter-grid input,
  .one-click-filter-grid select {
    height: 36px;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .one-click-filter-grid > .one-click-date {
    flex-basis: 326px;
    width: 326px;
    min-width: 326px;
  }

  .one-click-filter-grid > .one-click-keyword {
    flex-basis: 252px;
    width: 252px;
  }

  .one-click-filter-grid > label[data-filter-level="model"] {
    flex-basis: 176px;
    width: 176px;
  }

  .one-click-filter-grid > .one-click-price {
    flex-basis: 258px;
    width: 258px;
  }

  .one-click-filter .date-range-field,
  .one-click-filter .clearable-datetime {
    height: 36px;
    min-height: 36px;
  }

  .one-click-filter .date-range-field input {
    height: 28px;
    min-height: 28px;
  }

  .one-click-filter-actions {
    gap: 10px;
    padding-top: 9px;
  }

  .business-filter {
    justify-content: flex-start;
    padding: 10px 12px;
  }

  .business-date-range {
    flex: 0 0 326px;
    width: 326px;
    min-width: 326px;
  }

  .business-filter .date-range-field,
  .business-filter .clearable-datetime,
  .business-filter > button {
    height: 36px;
    min-height: 36px;
  }

  .business-filter .date-range-field input {
    height: 28px;
    min-height: 28px;
  }

  .sales-history-filter {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px 10px;
    margin: 12px 0;
  }

  .sales-history-filter .sales-date-range {
    flex: 0 0 326px;
    width: 326px;
  }

  .sales-history-filter .grow {
    flex: 0 0 280px;
    width: 280px;
    min-width: 0;
  }

  .sales-history-filter input,
  .sales-history-filter button,
  .sales-history-filter .date-range-field,
  .sales-history-filter .clearable-datetime {
    height: 36px;
    min-height: 36px;
  }

  .sales-history-filter .date-range-field input {
    height: 28px;
    min-height: 28px;
  }
}

.one-click-mobile-list,
.one-click-mobile-filter-toggle,
.one-click-mobile-plan-count {
  display:none;
}

.one-click-mobile-advanced-fields {
  display:contents;
}

@media (max-width: 820px) {
  .listing-summary {
    display:none;
  }

  .one-click-sale-panel {
    gap:10px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }

  .one-click-sale-panel > .section-title {
    align-items:center;
    margin:0;
    padding:0 2px;
  }

  .one-click-sale-panel > .section-title h2 {
    font-size:18px;
  }

  .one-click-sale-panel > .section-title p {
    display:none;
  }

  .one-click-mobile-plan-count {
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    min-height:28px;
    padding:4px 9px;
    border-radius:8px;
    color:#246fc8;
    background:#eaf3ff;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
  }

  .one-click-filter {
    gap:8px;
    padding:0;
    border:0;
    background:transparent;
  }

  .one-click-filter-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:end;
    gap:8px;
  }

  .one-click-filter-grid > label,
  .one-click-mobile-advanced-fields > label {
    width:auto;
    min-width:0;
    gap:4px;
    margin:0;
    color:#708096;
    font-size:10px;
  }

  .one-click-filter-grid > .one-click-keyword {
    grid-column:1 / -1;
    width:auto;
  }

  .one-click-keyword input {
    height:46px;
    min-height:46px;
    padding:10px 13px;
    border-radius:11px;
    background:#fff;
    font-size:14px;
  }

  .one-click-filter-grid > .one-click-upload-status {
    grid-column:1;
    width:auto;
  }

  .one-click-upload-status select,
  .one-click-mobile-filter-toggle {
    width:100%;
    height:38px;
    min-height:38px;
    border:1px solid #d6e0ee;
    border-radius:9px;
    background:#fff;
    box-shadow:none;
    font-size:12px;
  }

  .one-click-mobile-filter-toggle {
    display:flex;
    grid-column:2;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    padding:7px 11px;
    color:#334d6b;
  }

  .one-click-mobile-filter-toggle small {
    margin-left:auto;
    color:#2673cf;
    font-size:10px;
  }

  .one-click-mobile-filter-toggle i {
    color:#8a9ab0;
    font-style:normal;
    transition:transform .18s ease;
  }

  .one-click-mobile-filter-toggle[aria-expanded="true"] i {
    transform:rotate(180deg);
  }

  .one-click-mobile-advanced-fields {
    display:none;
    grid-column:1 / -1;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
    padding:9px;
    border:1px solid #dce5f1;
    border-radius:10px;
    background:#f7f9fc;
  }

  .one-click-mobile-advanced-fields.is-open {
    display:grid;
  }

  .one-click-mobile-advanced-fields > .one-click-date,
  .one-click-mobile-advanced-fields > .one-click-price {
    grid-column:1 / -1;
    width:auto;
    min-width:0;
  }

  .one-click-mobile-advanced-fields input,
  .one-click-mobile-advanced-fields select,
  .one-click-mobile-advanced-fields .date-range-field,
  .one-click-mobile-advanced-fields .clearable-datetime {
    width:100%;
    min-width:0;
    height:36px;
    min-height:36px;
    font-size:12px;
  }

  .one-click-mobile-advanced-fields .date-range-field input {
    height:28px;
    min-height:28px;
  }

  .one-click-filter-actions {
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    padding-top:8px;
  }

  .one-click-filter-actions > div {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:7px;
    width:100%;
  }

  .one-click-filter-actions .listing-batch-actions span {
    grid-column:1 / -1;
    grid-row:1;
    font-size:11px;
  }

  .one-click-filter-actions button {
    width:100%;
    min-width:0;
    min-height:34px;
    padding:6px 8px;
    border-radius:8px;
    font-size:11px;
  }

  .one-click-table-wrap {
    display:none;
  }

  .one-click-mobile-list {
    display:grid;
    gap:10px;
  }

  .one-click-mobile-card {
    overflow:hidden;
    border:1px solid #dce5f1;
    border-radius:13px;
    background:#fff;
    box-shadow:0 7px 20px rgba(29,54,88,.06);
  }

  .one-click-mobile-card > header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:34px;
    padding:6px 10px;
    background:#edf7ff;
  }

  .one-click-mobile-select {
    display:flex;
    align-items:center;
    gap:5px;
    color:#3c6f9c;
    font-size:11px;
    font-weight:700;
  }

  .one-click-mobile-select input {
    width:16px;
    height:16px;
    accent-color:#2676df;
  }

  .one-click-mobile-states {
    display:flex;
    align-items:center;
    gap:5px;
  }

  .one-click-mobile-states .listing-image-state,
  .one-click-mobile-states .listing-sync {
    padding:3px 7px;
    font-size:10px;
  }

  .one-click-mobile-card-main {
    display:grid;
    grid-template-columns:64px minmax(0,1fr) auto;
    align-items:start;
    gap:9px;
    padding:10px 11px 8px;
  }

  .one-click-mobile-card .listing-thumb,
  .one-click-mobile-card .listing-thumb.is-clickable {
    width:64px;
    height:64px;
    min-width:64px;
    min-height:64px;
    border-radius:8px;
  }

  .one-click-mobile-card-copy {
    display:grid;
    min-width:0;
    gap:4px;
  }

  .one-click-mobile-card-copy h3 {
    min-width:0;
    margin:0;
    color:#172b48;
    font-size:15px;
    line-height:1.25;
    overflow-wrap:anywhere;
  }

  .one-click-mobile-card-copy p {
    margin:0;
    overflow:hidden;
    color:#52657d;
    font-size:11px;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .one-click-mobile-card .one-click-imei-link {
    display:block;
    max-width:100%;
    margin:0;
    padding:2px 0;
    overflow:hidden;
    font-size:10px;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .one-click-mobile-price {
    display:grid;
    min-width:64px;
    justify-items:end;
    gap:1px;
    white-space:nowrap;
  }

  .one-click-mobile-price small,
  .one-click-mobile-price em {
    color:#8190a4;
    font-size:9px;
    font-style:normal;
  }

  .one-click-mobile-price b {
    color:#1670cb;
    font-size:15px;
  }

  .one-click-mobile-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:7px;
    padding:0 11px 10px;
  }

  .one-click-mobile-actions > button,
  .one-click-mobile-actions .listing-sync-control button {
    width:100%;
    min-width:0;
    min-height:34px;
    padding:6px 7px;
    border-radius:8px;
    font-size:11px;
    white-space:nowrap;
  }

  .one-click-mobile-actions .listing-row-preset {
    width:100%;
  }

  .one-click-mobile-actions .listing-row-preset select {
    width:100%;
    height:24px;
    min-height:24px;
    padding-top:1px;
    padding-bottom:1px;
    font-size:11px;
  }

  .one-click-mobile-actions .listing-sync-control {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:center;
  }

  .one-click-sale-panel > .table-pager {
    margin-top:0;
  }
}

/* 手机端视频路径无法由本机协议打开；发布操作与确认窗保持紧凑。 */
@media (max-width: 820px) {
  button[data-open-path] {
    display: none !important;
  }

  .video-library-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  .video-library-heading > div:first-child {
    min-width: 0;
  }

  .video-library-heading-actions {
    display: grid;
    flex-direction: unset;
    align-items: start;
    justify-items: end;
    gap: 6px;
  }

  #openPublishedVideoLibrary {
    width: auto;
    min-width: max-content;
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
  }

  .video-library-heading-actions .count-pill {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    white-space: nowrap;
  }

  .drawer:has(.video-publish-confirm) {
    align-items: center;
    padding: 14px;
  }

  .modal:has(.video-publish-confirm) {
    width: min(400px, calc(100vw - 28px));
    height: auto;
    max-height: calc(100dvh - 96px);
    align-self: center;
    overflow: hidden;
  }

  .video-publish-confirm {
    display: grid;
    width: 100%;
    min-height: 0;
    grid-template-rows: auto auto auto;
  }

  .video-publish-confirm .drawer-head {
    align-items: flex-start;
    padding: 14px 16px 12px;
  }

  .video-publish-confirm .drawer-head p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
  }

  .video-publish-confirm-body {
    margin: 0 16px;
    padding: 13px 14px;
  }

  .video-publish-confirm-actions {
    padding: 14px 16px 16px;
  }

  .video-publish-confirm-actions button {
    min-height: 38px;
    padding: 8px 13px;
  }
}

/* 销售出库配件选择：完整信息、独立勾选与数量录入。 */
.drawer:has(.sale-accessory-picker) {
  padding-left: 256px;
}

.modal:has(.sale-accessory-picker) {
  width: min(940px, calc(100vw - 272px));
  max-width: none;
  overflow: hidden;
}

.sale-accessory-picker {
  grid-template-rows: auto minmax(0, 1fr);
  max-height: 90vh;
}

.sale-accessory-picker .drawer-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

#saleAccessoryForm {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

.sale-accessory-picker-list {
  display: grid;
  gap: 8px;
  max-height: min(560px, 64vh);
  padding: 14px 16px;
  overflow-y: auto;
  background: #f7f9fc;
}

.sale-accessory-option {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(150px, 1.4fr) 92px 100px 100px minmax(120px, 1fr) 118px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #dce4f0;
  border-radius: 10px;
  background: #fff;
}

.sale-accessory-option:has([data-accessory-check]:checked) {
  border-color: #82b3f5;
  background: #f5f9ff;
  box-shadow: 0 0 0 2px rgba(23, 105, 224, .08);
}

.sale-accessory-option.is-unavailable {
  opacity: .62;
}

.sale-accessory-option > span,
.sale-accessory-name {
  min-width: 0;
}

.sale-accessory-option > span {
  display: grid;
  gap: 2px;
  color: #334155;
  font-size: 13px;
}

.sale-accessory-option > span::before {
  content: attr(data-label);
  color: #8a96a8;
  font-size: 11px;
}

.sale-accessory-option > span small {
  margin: 0;
  color: #8a96a8;
  font-size: 10px;
}

.sale-accessory-name {
  display: grid;
  gap: 3px;
}

.sale-accessory-name strong {
  overflow: hidden;
  color: #172033;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-accessory-name small,
.sale-accessory-maker {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sale-accessory-name small {
  color: #58657a;
  font-size: 12px;
}

.sale-accessory-check {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  cursor: pointer;
}

.sale-accessory-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--primary);
}

.sale-accessory-quantity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #647089;
  font-size: 12px;
}

.sale-accessory-quantity input {
  width: 72px;
  min-width: 0;
  height: 34px;
  padding: 6px 8px;
  text-align: center;
}

.sale-accessory-option > em {
  position: absolute;
  top: 5px;
  right: 7px;
  color: #a04b4b;
  font-size: 10px;
  font-style: normal;
}

.sale-accessory-picker-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.sale-accessory-picker-actions > span {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 760px) {
  .drawer:has(.sale-accessory-picker) {
    padding-left: 16px;
  }

  .modal:has(.sale-accessory-picker) {
    width: calc(100vw - 32px);
  }

  .sale-accessory-option {
    grid-template-columns: 30px minmax(120px, 1fr) 74px 96px;
  }

  .sale-accessory-option > span[data-label="成本价"],
  .sale-accessory-option > span[data-label="零售价"],
  .sale-accessory-maker {
    display: none;
  }

  .sale-accessory-picker-actions {
    flex-wrap: wrap;
  }

  .sale-accessory-picker-actions > span {
    width: 100%;
  }
}

.video-library-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}

.video-library-table th:nth-child(5) { width: 19%; }
.video-library-table th:nth-child(6) { width: 13%; }

.modal:has(.video-publish-confirm) {
  width: min(500px, calc(100vw - 32px));
  overflow: hidden;
}

.video-publish-confirm-body {
  display: grid;
  gap: 6px;
  margin: 0 18px;
  padding: 16px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #f8fafc;
}

.video-publish-confirm-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-publish-confirm-body span {
  color: #64748b;
  font-size: 13px;
}

.video-publish-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 18px 18px;
}

.modal:has(.published-video-panel) {
  width: min(1180px, calc(100% - 32px));
  max-width: none;
  overflow: hidden;
}

.published-video-panel {
  min-width: 0;
  overflow: hidden;
  color: #172033;
  background: #fff;
}

.published-video-panel .published-video-head {
  justify-content: flex-end;
  padding: 8px 12px;
  color: #172033;
}

.published-video-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #dbe4f0;
  color: #172033;
  background: #f8fafc;
}

.published-video-caption strong {
  font-size: 17px;
}

.published-video-caption span {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
}

.published-video-list-wrap {
  max-height: min(680px, calc(100dvh - 150px));
  margin: 0 18px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
}

.published-video-list-wrap > .empty-state {
  display: grid;
  min-height: 104px;
  place-items: center;
  color: #64748b;
  font-size: 14px;
}

.published-video-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  table-layout: fixed;
}

.published-video-table th,
.published-video-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e4eaf2;
  text-align: left;
  vertical-align: middle;
}

.published-video-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #60708a;
  background: #edf4ff;
  font-size: 12px;
  white-space: nowrap;
}

.published-video-table th:nth-child(1) { width: 29%; }
.published-video-table th:nth-child(2) { width: 15%; }
.published-video-table th:nth-child(3) { width: 14%; }
.published-video-table th:nth-child(4) { width: 18%; }
.published-video-table th:nth-child(5) { width: 12%; }
.published-video-table th:nth-child(6) { width: 12%; }

.published-video-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 820px) {
  .video-library-heading {
    gap: 10px;
  }

  .video-library-heading-actions {
    flex-direction: row;
    align-items: center;
  }

  .modal:has(.published-video-panel) {
    width: calc(100% - 20px);
  }

  .published-video-list-wrap {
    margin: 0 10px 10px;
  }
}

@media (max-width: 820px) {
  .one-click-filter {
    padding: 10px;
  }

  .one-click-filter-grid {
    gap: 8px;
  }

  .one-click-filter-grid input,
  .one-click-filter-grid select {
    height: 38px;
  }

  .one-click-filter-actions {
    gap: 8px;
    padding-top: 9px;
  }
}

/* Palette themes: forest, clay, graphite and wine. */
body[data-ui-theme="forest-moss"] {
  --palette-side: #0e171c;
  --palette-side-soft: #1c2924;
  --palette-main: #e8eee9;
  --palette-card: #f8faf8;
  --palette-card-soft: #dfe9e1;
  --palette-border: #c3d1c5;
  --palette-accent: #526951;
  --palette-accent-strong: #2c3e2b;
  --palette-accent-soft: #b3c9b6;
  --palette-text: #213028;
  --palette-muted: #687a6d;
}

body[data-ui-theme="warm-clay"] {
  --palette-side: #3a2e2d;
  --palette-side-soft: #584239;
  --palette-main: #f3e8dc;
  --palette-card: #fffaf5;
  --palette-card-soft: #ead6c2;
  --palette-border: #dcc2a8;
  --palette-accent: #bd8d63;
  --palette-accent-strong: #8a5a3c;
  --palette-accent-soft: #e7cfb8;
  --palette-text: #3a2e2d;
  --palette-muted: #806d61;
}

body[data-ui-theme="graphite-red"] {
  --palette-side: #141616;
  --palette-side-soft: #30302d;
  --palette-main: #e9e7e5;
  --palette-card: #fbfaf9;
  --palette-card-soft: #dedad7;
  --palette-border: #c8c2bd;
  --palette-accent: #7f1d1a;
  --palette-accent-strong: #591411;
  --palette-accent-soft: #d8b1ae;
  --palette-text: #292725;
  --palette-muted: #746d67;
}

body[data-ui-theme="wine-berry"] {
  --palette-side: #230e0f;
  --palette-side-soft: #541625;
  --palette-main: #f2e6e9;
  --palette-card: #fff9fb;
  --palette-card-soft: #ead3da;
  --palette-border: #d8b5c0;
  --palette-accent: #910d38;
  --palette-accent-strong: #641026;
  --palette-accent-soft: #d8a5b5;
  --palette-text: #3d1823;
  --palette-muted: #87616d;
}

body[data-ui-theme="forest-moss"],
body[data-ui-theme="warm-clay"],
body[data-ui-theme="graphite-red"],
body[data-ui-theme="wine-berry"] {
  color: var(--palette-text);
  background: var(--palette-main);
}

body[data-ui-theme="forest-moss"] .main,
body[data-ui-theme="warm-clay"] .main,
body[data-ui-theme="graphite-red"] .main,
body[data-ui-theme="wine-berry"] .main {
  background: var(--palette-main);
}

body[data-ui-theme="forest-moss"] .side,
body[data-ui-theme="warm-clay"] .side,
body[data-ui-theme="graphite-red"] .side,
body[data-ui-theme="wine-berry"] .side {
  color: #f7f7f4;
  background: var(--palette-side);
  border-right-color: var(--palette-side-soft);
  box-shadow: none;
}

body[data-ui-theme="forest-moss"] .side-user,
body[data-ui-theme="warm-clay"] .side-user,
body[data-ui-theme="graphite-red"] .side-user,
body[data-ui-theme="wine-berry"] .side-user {
  border-bottom-color: rgba(255, 255, 255, .12);
}

body[data-ui-theme="forest-moss"] .side-user h2,
body[data-ui-theme="warm-clay"] .side-user h2,
body[data-ui-theme="graphite-red"] .side-user h2,
body[data-ui-theme="wine-berry"] .side-user h2 {
  color: #fff;
}

body[data-ui-theme="forest-moss"] .side-user p,
body[data-ui-theme="warm-clay"] .side-user p,
body[data-ui-theme="graphite-red"] .side-user p,
body[data-ui-theme="wine-berry"] .side-user p,
body[data-ui-theme="forest-moss"] .nav-group-title,
body[data-ui-theme="warm-clay"] .nav-group-title,
body[data-ui-theme="graphite-red"] .nav-group-title,
body[data-ui-theme="wine-berry"] .nav-group-title {
  color: rgba(255, 255, 255, .55);
}

body[data-ui-theme="forest-moss"] .nav button[data-view],
body[data-ui-theme="warm-clay"] .nav button[data-view],
body[data-ui-theme="graphite-red"] .nav button[data-view],
body[data-ui-theme="wine-berry"] .nav button[data-view] {
  color: rgba(255, 255, 255, .74);
}

body[data-ui-theme="forest-moss"] .nav button[data-view]:hover,
body[data-ui-theme="warm-clay"] .nav button[data-view]:hover,
body[data-ui-theme="graphite-red"] .nav button[data-view]:hover,
body[data-ui-theme="wine-berry"] .nav button[data-view]:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

body[data-ui-theme="forest-moss"] .nav button[data-view].active,
body[data-ui-theme="warm-clay"] .nav button[data-view].active,
body[data-ui-theme="graphite-red"] .nav button[data-view].active,
body[data-ui-theme="wine-berry"] .nav button[data-view].active {
  color: #fff;
  background: var(--palette-accent);
  box-shadow: none;
}

body[data-ui-theme="forest-moss"] .nav button[data-view].active .nav-icon,
body[data-ui-theme="warm-clay"] .nav button[data-view].active .nav-icon,
body[data-ui-theme="graphite-red"] .nav button[data-view].active .nav-icon,
body[data-ui-theme="wine-berry"] .nav button[data-view].active .nav-icon {
  color: var(--palette-accent-strong);
  background: var(--palette-accent-soft);
}

body[data-ui-theme="forest-moss"] h1,
body[data-ui-theme="forest-moss"] h2,
body[data-ui-theme="forest-moss"] h3,
body[data-ui-theme="warm-clay"] h1,
body[data-ui-theme="warm-clay"] h2,
body[data-ui-theme="warm-clay"] h3,
body[data-ui-theme="graphite-red"] h1,
body[data-ui-theme="graphite-red"] h2,
body[data-ui-theme="graphite-red"] h3,
body[data-ui-theme="wine-berry"] h1,
body[data-ui-theme="wine-berry"] h2,
body[data-ui-theme="wine-berry"] h3 {
  color: var(--palette-text);
}

body[data-ui-theme="forest-moss"] .card,
body[data-ui-theme="warm-clay"] .card,
body[data-ui-theme="graphite-red"] .card,
body[data-ui-theme="wine-berry"] .card {
  background: var(--palette-card);
  border-color: var(--palette-border);
  box-shadow: none;
}

body[data-ui-theme="forest-moss"] table th,
body[data-ui-theme="warm-clay"] table th,
body[data-ui-theme="graphite-red"] table th,
body[data-ui-theme="wine-berry"] table th,
body[data-ui-theme="forest-moss"] .organization-summary,
body[data-ui-theme="warm-clay"] .organization-summary,
body[data-ui-theme="graphite-red"] .organization-summary,
body[data-ui-theme="wine-berry"] .organization-summary {
  color: var(--palette-text);
  background: var(--palette-card-soft);
}

body[data-ui-theme="forest-moss"] table td,
body[data-ui-theme="warm-clay"] table td,
body[data-ui-theme="graphite-red"] table td,
body[data-ui-theme="wine-berry"] table td {
  border-color: var(--palette-border);
}

body[data-ui-theme="forest-moss"] input,
body[data-ui-theme="forest-moss"] select,
body[data-ui-theme="forest-moss"] textarea,
body[data-ui-theme="warm-clay"] input,
body[data-ui-theme="warm-clay"] select,
body[data-ui-theme="warm-clay"] textarea,
body[data-ui-theme="graphite-red"] input,
body[data-ui-theme="graphite-red"] select,
body[data-ui-theme="graphite-red"] textarea,
body[data-ui-theme="wine-berry"] input,
body[data-ui-theme="wine-berry"] select,
body[data-ui-theme="wine-berry"] textarea {
  color: var(--palette-text);
  background: #fff;
  border-color: var(--palette-border);
}

body[data-ui-theme="forest-moss"] input:focus,
body[data-ui-theme="forest-moss"] select:focus,
body[data-ui-theme="forest-moss"] textarea:focus,
body[data-ui-theme="warm-clay"] input:focus,
body[data-ui-theme="warm-clay"] select:focus,
body[data-ui-theme="warm-clay"] textarea:focus,
body[data-ui-theme="graphite-red"] input:focus,
body[data-ui-theme="graphite-red"] select:focus,
body[data-ui-theme="graphite-red"] textarea:focus,
body[data-ui-theme="wine-berry"] input:focus,
body[data-ui-theme="wine-berry"] select:focus,
body[data-ui-theme="wine-berry"] textarea:focus {
  border-color: var(--palette-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--palette-accent) 15%, transparent);
}

body[data-ui-theme="forest-moss"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger),
body[data-ui-theme="forest-moss"] button:not([class]):not([data-view]):not(.nav-group-title),
body[data-ui-theme="forest-moss"] .organization-add-button,
body[data-ui-theme="warm-clay"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger),
body[data-ui-theme="warm-clay"] button:not([class]):not([data-view]):not(.nav-group-title),
body[data-ui-theme="warm-clay"] .organization-add-button,
body[data-ui-theme="graphite-red"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger),
body[data-ui-theme="graphite-red"] button:not([class]):not([data-view]):not(.nav-group-title),
body[data-ui-theme="graphite-red"] .organization-add-button,
body[data-ui-theme="wine-berry"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger),
body[data-ui-theme="wine-berry"] button:not([class]):not([data-view]):not(.nav-group-title),
body[data-ui-theme="wine-berry"] .organization-add-button {
  color: #fff;
  background: var(--palette-accent);
  border-color: var(--palette-accent);
  box-shadow: none;
}

body[data-ui-theme="forest-moss"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger):hover,
body[data-ui-theme="forest-moss"] button:not([class]):not([data-view]):not(.nav-group-title):hover,
body[data-ui-theme="forest-moss"] .organization-add-button:hover,
body[data-ui-theme="warm-clay"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger):hover,
body[data-ui-theme="warm-clay"] button:not([class]):not([data-view]):not(.nav-group-title):hover,
body[data-ui-theme="warm-clay"] .organization-add-button:hover,
body[data-ui-theme="graphite-red"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger):hover,
body[data-ui-theme="graphite-red"] button:not([class]):not([data-view]):not(.nav-group-title):hover,
body[data-ui-theme="graphite-red"] .organization-add-button:hover,
body[data-ui-theme="wine-berry"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger):hover,
body[data-ui-theme="wine-berry"] button:not([class]):not([data-view]):not(.nav-group-title):hover,
body[data-ui-theme="wine-berry"] .organization-add-button:hover {
  color: #fff;
  background: var(--palette-accent-strong);
  border-color: var(--palette-accent-strong);
}

body[data-ui-theme="forest-moss"] .metric,
body[data-ui-theme="forest-moss"] .position-architecture-card,
body[data-ui-theme="forest-moss"] .work-content-card,
body[data-ui-theme="warm-clay"] .metric,
body[data-ui-theme="warm-clay"] .position-architecture-card,
body[data-ui-theme="warm-clay"] .work-content-card,
body[data-ui-theme="graphite-red"] .metric,
body[data-ui-theme="graphite-red"] .position-architecture-card,
body[data-ui-theme="graphite-red"] .work-content-card,
body[data-ui-theme="wine-berry"] .metric,
body[data-ui-theme="wine-berry"] .position-architecture-card,
body[data-ui-theme="wine-berry"] .work-content-card {
  background: var(--palette-card);
  border-color: var(--palette-border);
  box-shadow: none;
}

body[data-ui-theme="forest-moss"] .theme-choice.selected,
body[data-ui-theme="warm-clay"] .theme-choice.selected,
body[data-ui-theme="graphite-red"] .theme-choice.selected,
body[data-ui-theme="wine-berry"] .theme-choice.selected {
  color: var(--palette-accent-strong);
  background: var(--palette-card-soft);
  border-color: var(--palette-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--palette-accent) 12%, transparent);
}

body[data-ui-theme="forest-moss"] .theme-choice.selected .theme-choice-check,
body[data-ui-theme="warm-clay"] .theme-choice.selected .theme-choice-check,
body[data-ui-theme="graphite-red"] .theme-choice.selected .theme-choice-check,
body[data-ui-theme="wine-berry"] .theme-choice.selected .theme-choice-check {
  color: #fff;
  background: var(--palette-accent);
}

body[data-ui-theme="forest-moss"] .drawer,
body[data-ui-theme="warm-clay"] .drawer,
body[data-ui-theme="graphite-red"] .drawer,
body[data-ui-theme="wine-berry"] .drawer {
  background: color-mix(in srgb, var(--palette-side) 50%, transparent);
}

body[data-ui-theme="forest-moss"] .drawer-panel,
body[data-ui-theme="warm-clay"] .drawer-panel,
body[data-ui-theme="graphite-red"] .drawer-panel,
body[data-ui-theme="wine-berry"] .drawer-panel {
  background: var(--palette-card);
  border-color: var(--palette-border);
}

body[data-ui-theme="forest-moss"] .mobile-bottom-nav,
body[data-ui-theme="warm-clay"] .mobile-bottom-nav,
body[data-ui-theme="graphite-red"] .mobile-bottom-nav,
body[data-ui-theme="wine-berry"] .mobile-bottom-nav {
  background: color-mix(in srgb, var(--palette-card) 94%, transparent);
  border-top-color: var(--palette-border);
}

body[data-ui-theme="forest-moss"] .mobile-bottom-nav button.active,
body[data-ui-theme="warm-clay"] .mobile-bottom-nav button.active,
body[data-ui-theme="graphite-red"] .mobile-bottom-nav button.active,
body[data-ui-theme="wine-berry"] .mobile-bottom-nav button.active {
  color: var(--palette-accent);
}

body[data-ui-theme="forest-moss"] .mobile-bottom-nav button.active .mobile-bottom-icon,
body[data-ui-theme="warm-clay"] .mobile-bottom-nav button.active .mobile-bottom-icon,
body[data-ui-theme="graphite-red"] .mobile-bottom-nav button.active .mobile-bottom-icon,
body[data-ui-theme="wine-berry"] .mobile-bottom-nav button.active .mobile-bottom-icon {
  color: #fff;
  background: var(--palette-accent);
}

body[data-ui-theme="forest-moss"] .mobile-home-welcome,
body[data-ui-theme="warm-clay"] .mobile-home-welcome,
body[data-ui-theme="graphite-red"] .mobile-home-welcome,
body[data-ui-theme="wine-berry"] .mobile-home-welcome {
  color: #fff;
  background: var(--palette-accent-strong);
  box-shadow: none;
}

body[data-ui-theme="forest-moss"] .mobile-home-shortcut-icon,
body[data-ui-theme="warm-clay"] .mobile-home-shortcut-icon,
body[data-ui-theme="graphite-red"] .mobile-home-shortcut-icon,
body[data-ui-theme="wine-berry"] .mobile-home-shortcut-icon {
  color: #fff;
  background: var(--palette-accent);
}

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  touch-action: pan-x pan-y;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

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

button {
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  color: #fff;
  background: var(--primary);
  cursor: pointer;
}

button:hover {
  background: var(--primary-dark);
}

button.secondary {
  color: var(--text);
  background: #eef2f7;
}

button.secondary:hover {
  background: #e2e8f0;
}

button.danger {
  background: var(--bad);
}

button.ghost {
  color: var(--primary);
  background: transparent;
  padding: 8px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--text);
  background: #fff;
  outline: none;
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  select
) {
  height: var(--control-height);
  min-height: var(--control-height);
  box-sizing: border-box;
  line-height: 1.2;
}

.readonly-input {
  color: var(--muted);
  background: #f4f7fb;
  cursor: not-allowed;
}

.good-text {
  color: var(--good);
  font-weight: 700;
}

.bad-text {
  color: var(--bad);
  font-weight: 700;
}

input[type="date"],
input[type="date"],
input[type="month"],
input[type="datetime-local"] {
  cursor: pointer;
  user-select: none;
}

textarea {
  min-height: 88px;
  resize: vertical;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.page {
  min-height: 100vh;
}

.login {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 20px;
}

.login-card {
  width: min(420px, 100%);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.login-card .remember-login { display: flex; flex-direction: row; align-items: center; gap: 8px; width: fit-content; cursor: pointer; }
.login-card .remember-login input { width: 17px; height: 17px; margin: 0; accent-color: #1769e0; }
.login-card .remember-login span { color: #334155; font-size: 14px; }

.password-field {
  position: relative;
  display: block;
}

.password-field input {
  width: 100%;
  padding-right: 42px;
}

.caps-lock-indicator {
  position: absolute;
  right: 12px;
  top: 50%;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 6px;
  color: #ffffff;
  background: #94a3b8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  opacity: 0;
  transform: translateY(-50%) scale(0.92);
  transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease;
  pointer-events: none;
}

.caps-lock-indicator.is-visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  background: #f59e0b;
}

.brand {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.brand h1 {
  margin: 0;
  font-size: 28px;
}

.brand p {
  margin: 0;
  color: var(--muted);
}

.form {
  display: grid;
  gap: 14px;
}

.hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.announcement-list {
  display: grid;
  gap: 14px;
}

.announcement-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.announcement-card[data-open-announcement] {
  cursor: pointer;
}

.announcement-card[data-open-announcement]:hover {
  border-color: #b8c9e6;
}

.announcement-detail-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
}

.announcement-detail-content {
  font-size: 17px;
  line-height: 1.8;
}

.announcement-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.announcement-head h3 {
  margin: 0;
  font-size: 19px;
}

.announcement-head p {
  margin: 0;
}

.announcement-author,
.announcement-user-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.announcement-author {
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.announcement-author time::before {
  content: "·";
  margin-right: 7px;
}

.announcement-author em {
  color: #b45309;
  font-style: normal;
}

.avatar.tiny {
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  flex: 0 0 26px;
  font-size: 11px;
}

.avatar.micro {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex: 0 0 20px;
  font-size: 9px;
}

.announcement-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.pin-badge,
.announcement-new-badge {
  display: inline-grid;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  padding: 0 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}

.pin-badge {
  background: var(--primary);
}

.announcement-new-badge {
  min-width: 24px;
  padding: 0 7px;
  background: #ef4444;
  box-shadow: 0 2px 7px rgb(239 68 68 / 24%);
}

.mention-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mention-strip span,
.mention-option span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 5px 9px;
  color: #1352a1;
  background: #edf4ff;
  font-size: 13px;
  font-weight: 700;
}

.announcement-content {
  min-height: 46px;
  padding: 14px;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--text);
  line-height: 1.7;
  white-space: normal;
}

.rich-content p,
.rich-content div {
  margin: 0 0 8px;
}

.rich-content ul,
.rich-content ol {
  margin: 8px 0 8px 22px;
  padding: 0;
}

.announcement-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.announcement-images a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
}

.announcement-images img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
}

.comments {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.comments h4 {
  margin: 0;
  font-size: 15px;
}

.comment-item {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f7f9fc;
  line-height: 1.6;
}

.comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.comment-meta strong {
  color: var(--text);
}

.comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.comment-form textarea {
  min-height: 46px;
}

.editor-block {
  display: grid;
  gap: 8px;
}

.editor-label {
  color: var(--muted);
  font-size: 13px;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.editor-toolbar button,
.editor-toolbar select {
  width: auto;
}

.editor-toolbar button {
  min-height: 38px;
}

.editor-toolbar select {
  min-width: 108px;
}

.editor-format strong {
  margin-right: 4px;
}

.rich-editor {
  min-height: 180px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  line-height: 1.7;
  outline: none;
}

.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

.mention-picker {
  display: grid;
  gap: 8px;
}

.mention-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mention-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
}

.mention-option input {
  width: auto;
}

.shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  min-width: 0;
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  color: #f7fbff;
  background: #162033;
  overflow-y: auto;
}

.side h2 {
  margin: 0 0 6px;
  font-size: 21px;
}

.side small {
  color: #aebbd0;
}

.side-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.side-user h2 {
  margin: 0;
}

.side-user .avatar {
  border: 2px solid rgba(255, 255, 255, 0.28);
}

.nav {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

@media (min-width: 821px) {
  .side { position: fixed; inset: 0 auto 0 0; width: 252px; height: auto; min-height: 100dvh; z-index: 30; }
  .main { grid-column: 2; }
}

.nav-group { display: grid; gap: 4px; }
.nav .nav-group-title { padding: 7px 10px; color: #8fa0ba; font-size: 12px; font-weight: 700; letter-spacing: 1px; justify-content: space-between; }
.nav .nav-group-title:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav-chevron { font-size: 17px; transition: transform .18s ease; }
.nav-group:not(.open) .nav-chevron { transform: rotate(-90deg); }
.nav-group-items { display: grid; gap: 4px; }
.nav-group:not(.open) .nav-group-items { display: none; }
.nav-group-items > button { padding-top: 8px; padding-bottom: 8px; }

.nav.nav-sort-mode [data-nav-item] {
  cursor: grab;
  outline: 1px dashed rgba(147, 197, 253, .35);
  outline-offset: -3px;
}

.nav.nav-sort-mode [data-nav-item]::after {
  content: "";
  width: 6px;
  height: 18px;
  margin-left: auto;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(219, 234, 254, .85) 1.5px, transparent 2px) 0 0 / 6px 6px;
  opacity: .75;
}

.nav [data-nav-item].nav-sort-ready {
  background: rgba(37, 99, 235, .28);
}

.nav [data-nav-item].nav-dragging {
  cursor: grabbing;
  opacity: .48;
  transform: scale(.98);
}

.nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  width: 100%;
  color: #dce7f8;
  background: transparent;
  text-align: left;
}

.nav-label {
  flex: 1;
}

.nav-badge {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #e03131;
  font-size: 12px;
  font-weight: 800;
}

.nav-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font-size: 13px;
  font-weight: 800;
}

.nav button.active,
.nav button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.main {
  min-width: 0;
  padding: 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.topbar h1 {
  margin: 0;
  font-size: 25px;
}

.topbar p {
  margin: 4px 0 0;
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 16px;
  min-width: 0;
  align-items: stretch;
}

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

.submission-evidence-grid {
  align-items: start;
}

.submission-evidence-grid > label {
  align-content: start;
}

.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.grid.cols-3 > .metric,
.grid.cols-4 > .metric {
  min-height: 104px;
}
.erp-section { margin-top: 16px; }
.erp-section .section-title p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.form-grid { display: grid; gap: 14px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filter-bar { display: flex; align-items: end; gap: 12px; margin: 16px 0; }
.filter-bar label { min-width: 150px; }
.filter-bar .grow { flex: 1; }
td small { display: block; margin-top: 5px; color: var(--muted); }
.empty-cell { padding: 36px; color: var(--muted); text-align: center; }
button.compact { padding: 7px 10px; }
button:disabled { opacity: .55; cursor: not-allowed; }
.drawer-panel { display: grid; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 18px; }
.modal-icon-close,
button.modal-icon-close {
  display:grid;
  flex:0 0 32px;
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  padding:0;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#64748b;
  font:400 25px/1 Arial,sans-serif;
  box-shadow:none;
}
.modal-icon-close:hover,
button.modal-icon-close:hover { background:#eef2f7; color:#0f172a; transform:none; box-shadow:none; }
.drawer-panel > .form { padding: 18px; }

.purchase-entry-card { padding: 0; overflow: hidden; }
.purchase-entry-card > .section-title { padding: 21px 24px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fff, #fbfcff); }
.purchase-entry-card > .form { gap: 0; }
.erp-form-block { display: grid; gap: 17px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.erp-form-block:nth-child(even) { background: #fbfcfe; }
.erp-form-heading { display: flex; align-items: center; gap: 11px; }
.erp-form-heading > div { display: grid; gap: 3px; }
.erp-form-heading strong { color: var(--text); font-size: 16px; }
.erp-form-heading small { color: var(--muted); font-size: 12px; }
.erp-step { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(145deg, #397ee8, #2862c0); box-shadow: 0 5px 12px rgba(25, 91, 195, .24); font-size: 13px; font-weight: 800; }
.purchase-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; background: #f8fafc; }
.purchase-form-footer .hint { margin: 0; }
.purchase-form-footer > div { display: flex; gap: 10px; }
.catalog-notice { display: flex; align-items: center; gap: 12px; margin: 2px 0 16px; padding: 11px 14px; border: 1px solid #bfdbfe; border-radius: 10px; background: #eff6ff; color: #1d4ed8; font-size: 14px; }
.catalog-notice span { color: #64748b; }
.partners-card { padding: 16px 18px 18px; }
.partners-title { margin-bottom: 10px; }
.partner-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.partner-summary span { display: inline-flex; min-height: 30px; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 13px; }
.partner-summary strong { color: #0f172a; font-size: 16px; line-height: 1; }
.partner-type { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 8px; border-radius: 999px; color: #1d4ed8; background: #eff6ff; font-size: 12px; font-weight: 700; }
.partners-table-wrap table th, .partners-table-wrap table td { height: 44px; padding-top: 8px; padding-bottom: 8px; }
.compact-data-table th { color: #64748b; font-size: 13px; }
.compact-data-table td { color: #24324a; font-size: 13px; }
.soft-status { display: inline-flex; min-height: 24px; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.soft-status.ok { color: #047857; background: #dcfce7; }
.soft-status.off { color: #64748b; background: #eef2f7; }
.partner-edit-btn { min-height: 30px; padding: 5px 10px; }
.partner-editor { max-width: 660px; }
.accessories-card { margin-top: 16px; }
.accessories-table-wrap .compact-data-table thead tr { height: 36px; }
.accessories-table-wrap .compact-data-table tbody tr { height: 42px; }
.accessories-table-wrap .compact-data-table th,
.accessories-table-wrap .compact-data-table td { box-sizing: border-box; vertical-align: middle; }
.accessories-table-wrap .compact-data-table th { height: 36px; padding-top: 6px; padding-bottom: 6px; line-height: 20px; }
.accessories-table-wrap .compact-data-table tbody td { height: 42px; padding-top: 5px; padding-bottom: 5px; line-height: 20px; }
.accessory-qty { display: inline-flex; min-width: 30px; align-items: center; color: #0f172a; font-size: 15px; font-weight: 800; line-height: 20px; }
.accessory-edit-btn { min-height: 30px; padding: 0 10px; }
.accessory-row-actions { display: inline-flex; height: 30px; align-items: center; gap: 7px; vertical-align: middle; white-space: nowrap; }
.accessory-row-actions button { display: inline-flex; height: 30px; min-height: 30px; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; line-height: 1; }
.accessory-editor { max-width: 640px; }
  .section-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  .accessory-actions .secondary { min-height: 36px; }
  .accessory-category-editor { max-width: 560px; }
  .accessory-category-list { display: grid; gap: 9px; }
  .accessory-category-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.accessory-category-toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.modal:has(.accessory-delete-confirm) {
  width: min(460px, calc(100vw - 32px));
  max-height: min(520px, calc(100dvh - 32px));
  overflow: hidden;
}
.drawer:has(.accessory-delete-confirm) { align-items: center; }

.accessory-delete-confirm .drawer-head { padding: 15px 17px 13px; }
.accessory-delete-confirm .drawer-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.accessory-delete-confirm .modal-body { display: grid; gap: 13px; padding: 15px 17px 17px; overflow-y: auto; }
.accessory-delete-target { padding: 13px; border: 1px solid #dbe6f3; border-radius: 9px; background: #f7faff; }
.accessory-delete-target > strong { display: block; overflow: hidden; color: #14213d; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.accessory-delete-target > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 11px; }
.accessory-delete-target span { display: grid; gap: 3px; min-width: 0; color: #71819a; font-size: 11px; }
.accessory-delete-target b { overflow: hidden; color: #24344f; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.accessory-delete-warning { margin: 0; padding: 10px 11px; border-radius: 8px; color: #a33b45; background: #fff3f4; font-size: 12px; line-height: 1.55; }
.accessory-delete-actions { display: grid; grid-template-columns: 1fr 1.45fr; gap: 9px; margin: 0; }
.accessory-delete-actions button { min-height: 38px; padding: 8px 10px; }

@media (max-width: 520px) {
  .modal:has(.accessory-delete-confirm) { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .accessory-delete-confirm .drawer-head { padding: 13px 14px 11px; }
  .accessory-delete-confirm .modal-body { gap: 11px; padding: 13px 14px 14px; }
  .accessory-delete-target > div { grid-template-columns: 1fr 1fr; }
  .accessory-delete-target span:last-child { grid-column: 1 / -1; }
  .accessory-delete-confirm .accessory-delete-actions { display: grid; grid-template-columns: .8fr 1.4fr; width: auto; }
  .accessory-delete-confirm .accessory-delete-actions button { width: auto; }
}
  button.danger-soft { color: #dc2626; background: #fff1f2; border: 1px solid #fecdd3; }
  button.danger-soft:hover { color: #b91c1c; background: #ffe4e6; }
  .purchase-workspace { display: grid; gap: 14px; }
.purchase-order-card, .manual-entry-panel, .purchase-machine-card, .purchase-workbench-card { border: 1px solid #dbe4f0; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(15,23,42,.04); }
.purchase-order-card { padding: 20px; }
.purchase-card-title { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.purchase-card-title > span, .manual-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #eaf3ff; color: #1877e8; font-weight: 800; }
.purchase-card-title strong { font-size: 17px; }
.purchase-card-title em { margin-left: auto; color: #94a3b8; font-size: 13px; font-style: normal; font-weight: 400; }
.purchase-order-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 24px; }
.purchase-order-grid label { display: grid; gap: 8px; }
.purchase-order-grid b { color: #475569; font-size: 14px; }
.segment-control { display: grid; grid-template-columns: 1fr 1fr; }
.segment-control input { position: absolute; opacity: 0; pointer-events: none; }
.segment-control label { display: grid; place-items: center; min-height: 42px; border: 1px solid #d8e1ed; cursor: pointer; }
.segment-control label:first-of-type { border-radius: 8px 0 0 8px; }
.segment-control label:last-of-type { border-radius: 0 8px 8px 0; }
.segment-control input:checked + label { color: #1677ff; border-color: #69a9ff; background: #eff6ff; }
.manual-entry-panel { display: grid; grid-template-columns: 1fr auto 150px 170px; align-items: center; gap: 14px; padding: 18px 20px; }
.manual-entry-panel > div:first-child { display: flex; align-items: center; gap: 10px; }
.manual-entry-panel small, .manual-stat span { display: block; margin-top: 4px; color: #94a3b8; }
.manual-stat { padding: 13px; text-align: center; border-radius: 9px; background: #f7f9fc; }
.manual-stat strong { font-size: 21px; }
.purchase-workbench-card { overflow: hidden; }
.purchase-workbench-head { display: grid; grid-template-columns: 1fr auto 118px 136px; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #edf2f7; }
.purchase-workbench-head > div:first-child { display: flex; align-items: center; gap: 10px; }
.purchase-workbench-head small { display: block; margin-top: 3px; color: #94a3b8; font-size: 12px; }
.purchase-workbench-head > button { min-height: 38px; padding: 8px 14px; }
.purchase-workbench-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid #edf2f7; background: #fbfcfe; }
.purchase-machine-card { overflow: hidden; }
.purchase-machine-card .purchase-card-title { padding: 18px 20px 0; }
.purchase-draft-table { width: 100%; table-layout: auto; font-size: 13px; }
.purchase-draft-table th, .purchase-draft-table td { padding: 9px 8px; white-space: nowrap; }
.purchase-draft-table th { font-size: 12px; }
.purchase-draft-table .imei-cell { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.purchase-draft-table .description-cell { max-width: 135px; overflow: hidden; text-overflow: ellipsis; }
.purchase-draft-table button.compact { min-height: 30px; padding: 4px 9px; }
.purchase-draft-table .draft-actions { display: flex; gap: 6px; }
.purchase-batch-footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 15px 20px; border: 1px solid #dbe4f0; border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 -5px 18px rgba(15,23,42,.06); }
.machine-picker { width: min(900px,92vw); padding: 24px; background: #fff; border-radius: 14px; }
.machine-detail { width: min(860px,92vw); max-height: 88vh; overflow: auto; padding: 24px; background: #fff; border-radius: 14px; }
.category-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 4px 0 14px; border-bottom: 1px solid #e2e8f0; }
.category-tabs input, .sku-options input { position: absolute; opacity: 0; pointer-events: none; }
.category-tabs span { display: block; white-space: nowrap; padding: 10px 13px; border-bottom: 2px solid transparent; cursor: pointer; color: #475569; }
.category-tabs input:checked + span { color: #1677ff; border-color: #1677ff; }
.machine-picker-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 22px; padding: 24px 0 70px; }
.machine-picker-grid label { display: grid; gap: 8px; }
.drawer-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.sku-row { display: grid; grid-template-columns: 90px 1fr; align-items: start; gap: 12px; margin: 16px 0; }
.sku-row > b { padding-top: 9px; color: #64748b; }
.sku-options { display: flex; flex-wrap: wrap; gap: 8px; }
.sku-options span { display: block; padding: 8px 14px; border: 1px solid transparent; border-radius: 7px; background: #f1f5f9; cursor: pointer; }
.sku-options input:checked + span { color: #1677ff; border-color: #69a9ff; background: #eff6ff; }
.machine-detail-v2 .sku-row { margin: 5px 0; }
.machine-detail-v2 .sku-row > b { padding-top: 7px; }
.machine-detail-v2 .sku-options { gap: 5px; }
.machine-detail-v2 .sku-options span { padding: 6px 11px; }
.machine-detail-v2 .sku-row > input[readonly] { color: #334155; background: #f8fafc; }
.battery-controls { display: flex; flex-wrap: wrap; gap: 9px; }
.battery-controls > input { width: min(280px, 100%); }
.quick-options { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-options button { padding: 8px 14px; border: 1px solid transparent; color: #475569; background: #f1f5f9; }
.quick-options button.active { color: #1677ff; border-color: #69a9ff; background: #eff6ff; }
.detail-single-fields { display: grid; gap: 8px; margin-top: 8px; }
.detail-single-fields label { display: grid; gap: 5px; }
.machine-detail-v2 .field-model { width: min(460px, 100%); }
.machine-detail-v2 .field-medium { width: min(390px, 100%); }
.machine-detail-v2 .machine-detail-back { white-space: nowrap; }
.detail-single-fields input { width: min(260px, 100%); }
.field-imei { width: min(300px, 100%) !important; }
.money-input { display: grid; grid-template-columns: 30px 150px 30px; align-items: center; width: 210px; max-width: 100%; border: 1px solid #d8e1ed; border-radius: 8px; overflow: hidden; background: #fff; }
.money-input > span, .money-input > em { display: grid; place-items: center; height: 100%; color: #64748b; background: #f8fafc; font-style: normal; }
.money-input input { width: 150px; max-width: 100%; border: 0; border-radius: 0; }
.money-input input:focus { box-shadow: none; }
.field-description { width: min(620px, 100%); min-height: 62px; resize: vertical; }
.percent-input { display: grid; grid-template-columns: 140px 34px; align-items: center; width: 174px; border: 1px solid #d8e1ed; border-radius: 8px; overflow: hidden; background: #fff; }
.percent-input input { width: 140px; border: 0; border-radius: 0; }
.percent-input em { display: grid; place-items: center; height: 100%; color: #64748b; background: #f8fafc; font-style: normal; }
.percent-input input:focus { box-shadow: none; }
.battery-health-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.battery-full-shortcut{height:40px;min-width:68px;padding:0 16px;border:1px solid #bfdbfe;border-radius:10px;background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#1769e0;font-weight:800;box-shadow:0 4px 12px rgba(37,99,235,.1);transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.battery-full-shortcut:hover{transform:translateY(-1px);background:linear-gradient(135deg,#e0edff,#cfe2ff);box-shadow:0 7px 16px rgba(37,99,235,.16)}
.battery-full-shortcut:active,.battery-full-shortcut.is-applied{transform:translateY(0);background:#1f6fe5;border-color:#1f6fe5;color:#fff;box-shadow:0 3px 9px rgba(31,111,229,.22)}
@media (max-width: 800px) { .purchase-order-grid, .machine-picker-grid { grid-template-columns: 1fr; } .manual-entry-panel { grid-template-columns: 1fr 1fr; } .manual-entry-panel > div:first-child { grid-column: 1 / -1; } }
.clearable-datetime { position: relative; display: block; }
.clearable-datetime input { padding-right: 44px; }
.clearable-datetime button { position: absolute; right: 8px; top: 50%; width: 28px; height: 28px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 50%; color: #64748b; background: transparent; font-size: 20px; }
.clearable-datetime button:hover { color: #ef4444; background: #fee2e2; }
.purchase-datetime { cursor: pointer; }
.purchase-datetime::-webkit-calendar-picker-indicator { display: none; }
.date-range-label { min-width: 260px; }
.date-range-label > span { display: block; margin-bottom: 6px; }
.date-range-field { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; height: 42px; padding: 0 8px; border: 1px solid #d6e0ee; border-radius: 8px; background: #fff; }
.date-range-field input { height: 34px; min-height:34px; min-width: 0; padding: 0 6px; border: 0; background: transparent; font-weight: 700; cursor: pointer; }
.date-range-field input:focus { outline: none; box-shadow: none; }
.date-range-field em { color: #94a3b8; font-style: normal; }
.date-range-field button { width: 22px; height: 22px; min-height: 22px; padding: 0; border: 0; border-radius: 50%; background: #eef2f7; color: #94a3b8; }
.date-range-field button:hover { color: #dc2626; background: #fee2e2; }
.date-range-popover {
  position: fixed;
  z-index: 10000;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #d6e0ee;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
}
.date-range-popover.is-calendar-only { grid-template-columns: minmax(0, 1fr); }
.date-range-shortcuts {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px;
  border-right: 1px solid #e2e8f0;
  background: #f8fafc;
}
.date-range-shortcuts button {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  font-weight: 700;
  text-align: left;
}
.date-range-shortcuts button:hover {
  background: #eaf2ff;
  color: #1769e0;
}
.date-range-calendar {
  min-width: 0;
  padding: 12px;
}
.range-calendar-toolbar {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.range-calendar-toolbar span {
  color: #0f172a;
  font-weight: 800;
  text-align: center;
}
.range-calendar-toolbar button {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid #dbe4f0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 20px;
}
.range-calendar-toolbar button:hover {
  border-color: #93c5fd;
  color: #1769e0;
  background: #eff6ff;
}
.range-calendar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.date-range-popover.is-single-month .range-calendar-grid { grid-template-columns: minmax(0, 1fr); }
.range-calendar-month {
  min-width: 0;
}
.range-calendar-title {
  margin-bottom: 8px;
  color: #334155;
  font-weight: 800;
  text-align: center;
}
.range-calendar-weekdays,
.range-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.range-calendar-weekdays span {
  display: grid;
  height: 24px;
  place-items: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}
.range-calendar-day {
  display: grid;
  height: 30px;
  min-height: 30px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #0f172a;
  font-weight: 700;
}
.range-calendar-day:hover {
  background: #eaf2ff;
  color: #1769e0;
}
.range-calendar-day.is-muted {
  color: #b8c2d0;
}
.range-calendar-day.is-in-range {
  background: #eff6ff;
  color: #1769e0;
}
.range-calendar-day.is-selected {
  background: #1769e0;
  color: #ffffff;
}
.range-calendar-day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1px #93c5fd;
}
@media (max-width: 700px) {
  .date-range-popover.is-calendar-only {
    border-radius: 14px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .18);
  }
  .date-range-popover.is-calendar-only .date-range-calendar { padding: 10px 11px 11px; }
  .date-range-popover.is-calendar-only .range-calendar-toolbar {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 6px;
    margin-bottom: 6px;
  }
  .date-range-popover.is-calendar-only .range-calendar-toolbar button {
    width: 32px;
    height: 32px;
    min-height: 32px;
    border-radius: 8px;
    font-size: 18px;
  }
  .date-range-popover.is-calendar-only .range-calendar-toolbar span { font-size: 14px; }
  .date-range-popover.is-calendar-only .range-calendar-title {
    margin-bottom: 4px;
    font-size: 14px;
  }
  .date-range-popover.is-calendar-only .range-calendar-weekdays,
  .date-range-popover.is-calendar-only .range-calendar-days { gap: 2px; }
  .date-range-popover.is-calendar-only .range-calendar-weekdays span {
    height: 22px;
    font-size: 11px;
  }
  .date-range-popover.is-calendar-only .range-calendar-day {
    height: 32px;
    min-height: 32px;
    border-radius: 8px;
    font-size: 13px;
  }
}
.sales-history-filter .sales-date-range { flex: 0 0 330px; }
.inventory-date-range { min-width: 330px; }
.sales-history-table { min-width: 1780px; }
.listing-summary { margin-bottom: 14px; }
.listing-summary .metric { animation:none; transform:none; }
.one-click-sale-panel { display: grid; gap: 14px; }
.one-click-filter { display: grid; gap: 14px; padding: 16px 18px; border: 1px solid #dbe4f0; border-radius: 12px; background: #f8fafc; }
.one-click-filter-grid { display: grid; grid-template-columns: minmax(250px, 1.5fr) minmax(210px, 1.25fr) repeat(4, minmax(130px, .72fr)); gap: 12px; align-items: end; }
.one-click-filter-grid > label { display: grid; min-width: 0; gap: 7px; margin: 0; color: #64748b; font-size: 13px; font-weight: 700; }
.one-click-filter-grid input,.one-click-filter-grid select { width: 100%; min-width: 0; height: 42px; }
.one-click-date { min-width: 0; }
.one-click-keyword { grid-column: span 2; }
.one-click-price { grid-column: span 2; }
.one-click-filter .price-range { display: grid; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr); min-width: 0; align-items: center; }
.one-click-filter .price-range span { color: #94a3b8; text-align: center; }
.one-click-filter-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 13px; border-top: 1px solid #e2e8f0; }
.one-click-filter-actions > div { display:flex; align-items:center; gap:10px; }
.listing-batch-actions span { color:#64748b; font-size:13px; }
.one-click-filter-actions button { min-width: 104px; min-height: 40px; }
.one-click-filter .inventory-dependent-field.is-hidden { display: none; }
.one-click-table-wrap { margin-top: 0; border: 1px solid #dbe4f0; border-radius: 12px; }
.one-click-listing-table { min-width: 1320px; }
.one-click-listing-table th,.one-click-listing-table td { padding: 9px 10px; vertical-align: middle; }
.one-click-listing-table th { white-space: nowrap; }
.one-click-listing-table .listing-main-image-cell { width: 92px; }
.one-click-listing-table .imei-cell { min-width: 145px; }
.one-click-listing-table .inventory-machine-info-cell { min-width: 220px; }
.one-click-listing-table .listing-media-cell { min-width: 96px; }
.one-click-listing-table .listing-platform-cell { min-width: 170px; }
.one-click-listing-table .listing-operation-cell { min-width: 110px; }
.listing-check-cell { width:42px; min-width:42px; text-align:center; }
.listing-check-cell input { width:17px; height:17px; accent-color:#2563eb; cursor:pointer; }
.listing-thumb { position: relative; display: grid; width: 72px; height: 72px; place-items: center; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc; color: #64748b; }
.listing-thumb.is-clickable { min-width:72px; min-height:72px; padding:0; cursor:zoom-in; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.listing-thumb.is-clickable:hover,.listing-thumb.is-clickable:focus { transform:translateY(-1px); border-color:#7ba8ed; box-shadow:0 5px 14px rgba(37,99,235,.15); outline:none; }
.listing-thumb img { width: 100%; height: 100%; object-fit: cover; }
.listing-thumb span { position: absolute; right: 4px; bottom: 4px; padding: 2px 6px; border-radius: 999px; background: rgba(15,23,42,.72); color: #fff; font-size: 11px; }
.listing-thumb.is-empty span { position: static; background: transparent; color: #94a3b8; }
.listing-imei { display: block; margin-top: 5px; color: #94a3b8; font-size: 11px; white-space: nowrap; }
.listing-table-price { display: block; color: #059669; font-size: 16px; white-space: nowrap; }
.one-click-listing-table td > small { display: block; margin-top: 3px; color: #94a3b8; white-space: nowrap; }
.listing-preset-select { width: 170px; min-width: 150px; height: 27px; min-height: 27px; padding: 2px 30px 2px 9px; font-weight: 700; color: #1e3a5f; background-color: #fff; }
.listing-batch-preset { display: flex; align-items: center; gap: 7px; margin: 0; color: #475569; font-size: 13px; font-weight: 800; white-space: nowrap; }
.listing-batch-preset select { width: 180px; min-width: 150px; height: 40px; }
.listing-row-preset { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; color: #64748b; font-size: 12px; font-weight: 800; }
.listing-row-preset select { min-width: 0; height: 27px; min-height: 27px; padding-top: 2px; padding-bottom: 2px; font-weight: 700; }
.one-click-imei-link { width:auto; min-width:0; min-height:26px; margin:-4px -7px; padding:4px 7px; border:0; border-radius:6px; background:transparent; color:#2563eb; font-weight:650; text-decoration:none; box-shadow:none; }
.one-click-imei-link:hover,.one-click-imei-link:focus { background:#eaf2ff; color:#174ea6; text-decoration:underline; outline:none; }
.listing-image-state { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 12px; white-space: nowrap; }
.listing-image-state.is-done { background: #ecfdf5; color: #047857; }
.listing-media-button { min-width:84px; min-height:32px; padding:6px 10px; white-space:nowrap; }
.listing-media-button.has-media { border-color:#bbf7d0; background:#ecfdf5; color:#047857; }
.listing-sync-control { display:grid; grid-template-columns:minmax(0,108px); align-items:center; }
.listing-sync-button { --sync-progress:0%; position:relative; isolation:isolate; width:108px; min-width:108px; min-height:34px; overflow:hidden; padding:7px 9px; white-space:nowrap; }
.listing-sync-button::before { content:""; position:absolute; z-index:0; inset:0 auto 0 0; width:var(--sync-progress); background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(34,197,94,.45)); transition:width .28s ease; pointer-events:none; }
.listing-sync-button span { position:relative; z-index:1; }
.listing-sync-button.is-running::before { background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(52,211,153,.62)); }
.listing-sync-button.is-synced::before,.listing-sync-button.is-cancelling::before { background:rgba(248,113,113,.22); }
.listing-sync { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: #f1f5f9; color: #94a3b8; font-size: 12px; white-space: nowrap; }
.listing-sync.is-done { color: #059669; }
.listing-image-drawer { width: min(720px, 100%); }
.listing-gallery-tip { color:#2563eb; font-size:12px; }
.listing-gallery-input { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.listing-gallery-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; min-height: 118px; padding-top: 6px; }
.listing-gallery-slot { position: relative; display: grid; width: 100%; min-width: 0; aspect-ratio: 1; place-items: center; overflow: hidden; margin: 0; border: 1px solid #dbe4f0; border-radius: 12px; background: #f8fafc; }
.listing-gallery-slot.has-image { cursor:grab; touch-action:none; transition:opacity .15s ease,transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.listing-gallery-slot.has-image:active { cursor:grabbing; }
.listing-gallery-slot.is-dragging { opacity:.48; transform:scale(.97); }
.listing-gallery-slot.is-drop-target { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.2); }
.listing-gallery-slot.is-empty { align-content: center; gap: 5px; border: 1.5px dashed #9db6d6; color: #64748b; cursor: pointer; }
.listing-gallery-slot.is-empty:hover { border-color: #1769e0; background: #f2f7ff; color: #1769e0; }
.listing-gallery-slot.is-empty small { font-size: 12px; }
.listing-upload-grid { display:grid; grid-template-columns:repeat(2,9px); gap:3px; }
.listing-upload-grid i { display:block; width:9px; height:9px; border-radius:2px; background:currentColor; opacity:.68; }
.listing-gallery-slot img { width: 100%; height: 100%; object-fit: cover; }
.listing-video-add { border-color:#b8a5ed; color:#6d4bc3; background:#faf8ff; }
.listing-video-add:hover { border-color:#7651cf; background:#f5f0ff; color:#5a37b4; }
.listing-video-slot { align-content:center; gap:5px; padding:12px; border-color:#d9cef5; background:linear-gradient(145deg,#fbf9ff,#f3efff); color:#50378f; text-align:center; }
.listing-video-slot strong { font-size:13px; }
.listing-video-slot small { display:block; width:100%; overflow:hidden; color:#766a94; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.listing-video-play { display:grid; width:34px; height:34px; place-items:center; padding-left:2px; border-radius:50%; background:#7651cf; color:#fff; font-size:15px; box-shadow:0 5px 12px rgba(93,57,174,.22); }
.listing-gallery-slot figcaption { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(15,23,42,.76); color: #fff; font-size: 11px; }
.listing-gallery-remove { position: absolute; z-index:4; top: 5px; right: 5px; display: grid; width: 24px; height: 24px; min-height: 0; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(15,23,42,.75); color: #fff; font-size: 17px; line-height: 1; }
.listing-slot-progress { display: block; width: 72%; height: 7px; overflow: hidden; border-radius: 999px; background: #dbe7f5; }
.listing-slot-progress i { display: block; height: 100%; border-radius: inherit; background: #1769e0; transition: width .2s ease; }
.listing-media-progress-overlay { position:absolute; z-index:3; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:12px; background:rgba(15,23,42,.76); color:#fff; text-align:center; pointer-events:none; }
.listing-media-progress-overlay strong { font-size:12px; line-height:1.25; }
.listing-media-progress-overlay small { color:#e2e8f0; font-size:11px; }
.listing-media-progress-overlay .listing-slot-progress { width:78%; background:rgba(226,232,240,.34); }
.listing-media-progress-overlay .listing-slot-progress i { background:#60a5fa; }
.listing-media-progress-overlay.is-failed { background:rgba(127,29,29,.82); }
.listing-media-progress-overlay.is-failed .listing-slot-progress i { background:#fca5a5; }
.listing-media-retry { min-width:58px; min-height:26px; padding:4px 9px; border:1px solid rgba(255,255,255,.7); background:rgba(255,255,255,.16); color:#fff; font-size:11px; pointer-events:auto; }
.listing-media-retry:disabled { opacity:.58; cursor:not-allowed; }
.listing-media-kind-icon { color:#64748b; font-size:12px; }
.listing-gallery-actions { display:flex; align-items:center; padding-top:18px; border-top:1px solid #e5edf6; }
.listing-gallery-inline-message { flex:1; min-width:0; color:#b45309; font-size:12px; line-height:1.35; }
.listing-gallery-actions button { min-width:92px; }
.modal:has(.listing-image-viewer) { width:min(620px,calc(100vw - 32px),calc(100dvh - 170px)); max-width:none; max-height:calc(100dvh - 32px); overflow:hidden; }
.listing-image-viewer { display:grid; width:100%; max-height:calc(100dvh - 32px); grid-template-rows:auto minmax(0,auto) auto; overflow:hidden; }
.listing-image-viewer .drawer-head { padding:13px 16px 11px; }
.listing-image-viewer .drawer-head p { margin:4px 0 0; }
.listing-viewer-stage { display:grid; width:min(calc(100% - 24px),calc(100dvh - 230px),520px); height:auto; aspect-ratio:1 / 1; min-height:0; margin:10px auto 0; place-items:center; overflow:hidden; border:1px solid #dbe4f0; border-radius:12px; background:#f3f6fa; }
.listing-viewer-stage img { display:block; width:100%; height:100%; object-fit:contain; }
.listing-viewer-thumbnails { display:flex; gap:8px; margin-top:8px; padding:2px 12px 10px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:thin; }
.listing-viewer-thumb { flex:0 0 58px; width:58px; height:58px; min-height:58px; padding:2px; overflow:hidden; border:2px solid transparent; border-radius:9px; background:#eef3f9; scroll-snap-align:center; opacity:.72; transition:border-color .15s ease,opacity .15s ease,transform .15s ease; }
.listing-viewer-thumb:hover { opacity:1; transform:translateY(-1px); }
.listing-viewer-thumb.active { border-color:#2563eb; background:#fff; opacity:1; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.listing-viewer-thumb img { width:100%; height:100%; border-radius:7px; object-fit:cover; }
@media (max-width:760px) {
  .modal:has(.listing-image-viewer) { width:100%; max-height:calc(100dvh - 20px); }
  .listing-image-viewer { max-height:calc(100dvh - 20px); }
  .listing-viewer-stage { width:min(calc(100% - 24px),calc(100dvh - 205px),460px); height:auto; aspect-ratio:1 / 1; }
  .listing-viewer-thumb { flex-basis:52px; width:52px; height:52px; min-height:52px; }
}
.preset-table-wrap { margin-top: 16px; border: 1px solid #dbe4f0; border-radius: 10px; }
.preset-table { min-width: 1120px; }
.preset-table th,.preset-table td { padding: 12px 14px; vertical-align: middle; }
.preset-table th:nth-child(1) { width: 210px; }
.preset-table th:nth-child(2) { width: 150px; }
.preset-table th:nth-child(3) { width: 190px; }
.preset-table th:nth-child(5) { width: 110px; }
.preset-table th:nth-child(6) { width: 100px; }
.preset-formula-builder { display: grid; gap: 9px; }
.xianyu-preset-credentials { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 12px; padding: 13px; border: 1px solid #f2c97d; border-radius: 11px; background: #fffaf0; }
.xianyu-preset-credentials.is-hidden { display: none; }
.xianyu-preset-credentials label { margin: 0; }
.xianyu-preset-credentials small { grid-column: 1 / -1; color: #8a5a12; line-height: 1.5; }
.preset-account { color: #334155; font-weight: 700; }
.preset-account.is-incomplete { color: #b42318; }
.preset-formula-label { color: #64748b; font-size: 13px; font-weight: 700; }
.preset-formula-console { overflow: hidden; border: 1px solid #cfdaea; border-radius: 11px; background: linear-gradient(180deg,#fbfdff,#f5f8fc); box-shadow: inset 0 1px 0 #fff; }
.preset-formula-result,.preset-formula-tools { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 7px 9px; overflow-x: auto; scrollbar-width: thin; }
.preset-formula-result { background: rgba(239,245,255,.58); }
.preset-formula-result > strong { flex: 0 0 auto; padding-left: 3px; color: #17345f; white-space: nowrap; }
.preset-formula-tools { border-top: 1px solid #dbe4ef; background: rgba(255,255,255,.72); }
.preset-formula-pieces { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.preset-formula-piece { display: inline-grid; min-width: 34px; min-height: 30px; padding: 4px 9px; place-items: center; border: 1px solid #b9cff2; border-radius: 8px; color: #174a91; background: linear-gradient(180deg,#f4f8ff,#e7f0ff); font-weight: 800; box-shadow: 0 1px 2px rgba(30,64,175,.08); white-space: nowrap; }
.preset-formula-tools > button { flex: 0 0 auto; width: auto; min-width: 38px; min-height: 32px; margin: 0; padding: 5px 10px; border-radius: 8px; }
.preset-formula-tools .formula-operator { min-width: 36px; padding-inline: 8px; font-size: 17px; }
.preset-formula-tools .formula-delete { min-width: 36px; color: #b42318; border-color: #fecaca; background: #fff7f7; font-size: 17px; }
.preset-number-adder { display: flex; flex: 0 0 auto; gap: 5px; }
.preset-number-adder input { width: 118px; min-height: 32px; padding: 5px 9px; }
.preset-number-adder button { width: auto; min-width: 52px; min-height: 32px; margin: 0; padding: 5px 10px; border-radius: 8px; }
.preset-price-ranges { display: grid; gap: 10px; padding: 13px; border: 1px solid #cbdcf4; border-radius: 11px; background: #f7faff; }
.preset-price-ranges.is-hidden { display: none; }
.preset-price-ranges-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.preset-price-ranges-head > div { display: grid; gap: 4px; }
.preset-price-ranges-head strong { color: #17345f; }
.preset-price-ranges-head small { color: #64748b; font-size: 12px; line-height: 1.5; }
.preset-price-ranges-head button { flex: 0 0 auto; width: auto; min-height: 32px; margin: 0; padding: 5px 11px; }
.preset-price-range-list { display: grid; gap: 9px; }
.preset-price-range-row { display: grid; gap: 8px; padding: 11px; border: 1px solid #d9e4f3; border-radius: 10px; background: #fff; }
.preset-price-range-condition,.preset-price-range-formula { display: flex; align-items: center; gap: 7px; }
.preset-price-range-condition span,.preset-price-range-formula strong { flex: 0 0 auto; color: #334155; font-size: 13px; }
.preset-price-range-condition input { width: 116px; min-height: 34px; padding: 5px 8px; }
.preset-price-range-formula select { width: 58px; min-height: 34px; padding: 5px 7px; }
.preset-price-range-formula input { width: 108px; min-height: 34px; padding: 5px 8px; }
.preset-price-range-formula button { width: auto; min-height: 34px; margin: 0 0 0 auto; padding: 5px 10px; }
.preset-price-summary { display: grid; gap: 4px; min-width: 260px; color: #334155; font-size: 12px; line-height: 1.45; }
.preset-price-summary span:first-child:not(:last-child) { color: #174a91; font-weight: 700; }
.preset-copy-builder { display: grid; gap: 8px; }
.preset-copy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.preset-copy-head > span { color: #64748b; font-size: 13px; font-weight: 700; }
.preset-copy-head > small { color: #94a3b8; font-size: 12px; }
.preset-copy-variables { display: flex; flex-wrap: wrap; gap: 7px; }
.preset-copy-variables button { width: auto; min-height: 31px; margin: 0; padding: 5px 11px; border-color: #c8d8ef; border-radius: 999px; color: #24518d; background: #f2f7ff; font-size: 12px; font-weight: 700; }
.preset-copy-variables button:hover { border-color: #8fb2e8; background: #e7f0ff; }
.preset-copy-builder textarea { min-height: 154px; font-family: inherit; line-height: 1.65; }
.form .checkbox-row { display: inline-flex; width: fit-content; align-items: center; justify-content: flex-start; gap: 8px; margin: 0; color: #475569; font-weight: 700; cursor: pointer; }
.form .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; }
.preset-table button.ios-preset-switch { position: relative; width: 46px; min-width: 46px; height: 27px; min-height: 27px; margin: 0 auto; padding: 0; border: 0; border-radius: 999px; color: transparent; background: #cbd5e1; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); transition: background .2s ease, box-shadow .2s ease; }
.ios-preset-switch span { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(15,23,42,.28); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.preset-table button.ios-preset-switch.is-on { background: #34c759; box-shadow: inset 0 0 0 1px rgba(16,120,44,.08); }
.ios-preset-switch.is-on span { transform: translateX(19px); }
.ios-preset-switch:hover { filter: brightness(.98); }
.ios-preset-switch:focus-visible { outline: 3px solid rgba(59,130,246,.28); outline-offset: 2px; }
.ios-preset-switch:disabled { cursor: wait; opacity: .65; }
.preset-status { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.preset-status.is-active { background: #dcfce7; color: #15803d; }
.preset-status.is-disabled { background: #eef2f7; color: #64748b; }
.preset-copy-cell { min-width: 420px; }
.preset-copy-cell pre { margin: 0; color: #334155; font-family: inherit; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .preset-price-ranges-head,.preset-price-range-condition,.preset-price-range-formula { align-items: stretch; flex-wrap: wrap; }
  .preset-price-ranges-head button { width: 100%; }
  .preset-price-range-condition input { flex: 1 1 110px; width: auto; }
  .preset-price-range-formula strong { width: 100%; }
  .preset-price-range-formula button { margin-left: auto; }
}
.listing-plan-preview-list { display: grid; gap: 12px; }
.listing-plan-preview-list article { overflow: hidden; border: 1px solid #dbe4f0; border-radius: 12px; background: #fff; }
.listing-plan-preview-list article > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; background: #f7f9fc; }
.listing-plan-preview-list article > header div { display: grid; gap: 3px; }
.listing-plan-preview-list article > header strong { font-size: 16px; }
.listing-plan-preview-list article > header span { color: #64748b; font-size: 12px; }
.listing-plan-preview-list article > header b { color: #079455; font-size: 19px; }
.listing-plan-preview-list dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; border-top: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; }
.listing-plan-preview-list dl div { display: grid; gap: 4px; padding: 10px 14px; border-right: 1px solid #edf1f6; }
.listing-plan-preview-list dl div:last-child { border-right: 0; }
.listing-plan-preview-list dt,.listing-plan-preview-list section small { color: #64748b; font-size: 12px; }
.listing-plan-preview-list dd { margin: 0; font-weight: 700; }
.listing-plan-preview-list section { padding: 12px 14px 14px; }
.listing-plan-preview-list pre { margin: 6px 0 0; color: #334155; font-family: inherit; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .one-click-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .one-click-keyword,.one-click-price { grid-column: span 1; }
  .listing-gallery-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .one-click-filter-grid { grid-template-columns: 1fr; }
  .one-click-filter-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .listing-gallery-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
.records-card { padding: 16px 18px; }
.records-table table th, .records-table table td { padding-top: 8px; padding-bottom: 8px; vertical-align: top; }
.record-work { display: grid; gap: 2px; }
.record-proof-compact .video-file-preview { gap: 4px; margin-top: 0; }
.review-note-cell.is-alert { min-width: 180px; }
.review-note-pill { display: inline-flex; gap: 7px; align-items: flex-start; max-width: 260px; padding: 7px 9px; border: 1px solid #fed7aa; border-left: 3px solid #f97316; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 13px; line-height: 1.45; }
.review-note-pill::before { content: "!"; display: grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; border-radius: 50%; color: #fff; background: #f97316; font-size: 12px; font-weight: 800; }
.modal:has(.machine-picker-v2) { width: min(1040px, calc(100vw - 48px)); max-width: none; overflow: hidden; }
.modal:has(.machine-detail) { width: min(1000px, calc(100vw - 48px)); max-width: none; overflow: hidden; }
.modal:has(.machine-detail) .machine-detail { box-sizing: border-box; width: 100%; max-width: none; min-width: 0; max-height: 86vh; overflow-x: hidden; overflow-y: auto; }
.machine-picker-v2 { display: flex; flex-direction: column; width: 100%; min-width: 0; height: min(720px, 86vh); padding: 0; overflow: hidden; }
.machine-picker-v2 .drawer-head { flex: 0 0 auto; margin: 0; padding: 14px 22px 11px; border-bottom: 1px solid #e2e8f0; }
.machine-picker-v2 .drawer-head p { margin: 4px 0 0; line-height: 1.35; }
.machine-picker-v2 form { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.category-buttons { flex: 0 0 auto; max-width: 100%; padding: 4px 18px 0; overflow-x: auto; scrollbar-width: none; }
.category-buttons::-webkit-scrollbar { display: none; }
.category-buttons button { flex: 0 0 auto; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: #475569; background: transparent; }
.category-buttons button.active { color: #1677ff; border-bottom-color: #1677ff; background: #eff6ff; }
.picker-columns { display: grid; grid-template-columns: 280px minmax(0, 1fr); flex: 1; min-width: 0; min-height: 0; gap: 0; padding: 10px 22px 14px; overflow: hidden; }
.picker-columns > section { display: flex; min-height: 0; flex-direction: column; border: 1px solid #e2e8f0; background: #fff; }
.picker-columns > section + section { border-left: 0; }
.picker-columns h3 { margin: 0; padding: 15px 18px; font-size: 14px; color: #64748b; }
.picker-scroll { min-height: 0; overflow-y: auto; padding: 6px 10px 14px; }
.picker-scroll button { display: block; width: 100%; padding: 7px 13px; border: 0; border-radius: 7px; color: #334155; background: transparent; line-height: 1.35; text-align: left; }
.picker-scroll button:hover { background: #f1f5f9; }
.picker-scroll button.active { color: #fff; background: #409eff; }
.picker-model-head { display: grid; grid-template-columns: auto minmax(220px, 1fr); align-items: center; gap: 12px; padding-right: 14px; border-bottom: 1px solid #e2e8f0; }
.picker-model-head input { height: 38px; }
.model-scroll { display: block; padding: 8px 12px 14px; overflow-x: hidden; }
.model-scroll button { margin: 1px 0; }
.global-model-search { display: flex; width: min(520px, calc(100% - 44px)); margin: 8px 22px 2px; }
.global-model-search input { width: 100%; height: 34px; min-height: 34px; }
.model-scroll button small { display: inline-block; min-width: 48px; margin-right: 8px; color: #718096; font-size: 11px; }
.picker-empty { padding: 30px; color: #94a3b8; text-align: center; grid-column: 1 / -1; }
.picker-fixed-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 10px; padding: 15px 28px 20px; border-top: 1px solid #e2e8f0; background: #fff; box-shadow: 0 -8px 18px rgba(15,23,42,.04); }
@media (max-width: 700px) { .modal:has(.machine-picker-v2) { width: calc(100vw - 20px); } .machine-picker-v2 { height: calc(100vh - 20px); } .picker-columns { grid-template-columns: 130px minmax(0, 1fr); padding: 12px; } .picker-model-head { grid-template-columns: 1fr; padding: 10px; } }

@media (max-width: 700px) { .modal:has(.machine-detail) { width: calc(100vw - 20px); } }

.business-toolbar { display: grid; gap: 12px; }
.business-toolbar .section-title { align-items: start; margin: 0; }
.business-control-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid #dce6f2; border-radius: 8px; background: #f8fbff; }
.business-filter { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: transparent; }
.business-shortcuts { display: inline-grid; grid-template-columns: repeat(5, auto); overflow: hidden; border: 1px solid #d7e2ef; border-radius: 8px; background: #fff; }
.business-shortcuts button { min-height: 40px; padding: 0 16px; border: 0; border-right: 1px solid #e2e8f0; border-radius: 0; color: #475569; background: #fff; font-weight: 700; }
.business-shortcuts button:last-child { border-right: 0; }
.business-shortcuts button:hover { color: #1769d8; background: #eff6ff; transform: none; }
.business-shortcuts button.active { color: #fff; background: #1f6fe5; box-shadow: inset 0 0 0 1px #1f6fe5; }
.business-shortcuts button.active:hover { color: #fff; background: #155fc9; }
.business-date-range { display: flex; flex: 0 1 420px; align-items: center; gap: 9px; min-width: 340px; }
.business-date-range > span { flex: 0 0 auto; margin: 0; color: #53647b; font-size: 13px; font-weight: 700; white-space: nowrap; }
.business-date-range .date-range-field { flex: 1 1 auto; min-width: 0; height: 42px; min-height: 42px; }
.business-date-range .date-range-field input { height: 34px; min-height: 34px; }
.business-filter > button[type="submit"] { flex: 0 0 auto; height: 42px; min-height: 42px; padding: 0 18px; }
.business-age-setting { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid #dce6f2; }
.business-age-setting label { display: flex; align-items: center; gap: 6px; color: #64748b; font-size: 13px; font-weight: 700; }
.business-age-setting input { width: 64px; height: 42px; padding: 0 8px; text-align: center; }
.business-age-setting span { color: #94a3b8; }
.business-age-setting button { height: 42px; min-height: 42px; padding-top: 0; padding-bottom: 0; }
.business-board { display: grid; gap: 12px; }
.business-board .section-title { margin: 0; }
.business-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.business-metric { display: grid; gap: 5px; min-height: 82px; padding: 13px 14px; border: 1px solid #dfe8f3; border-radius: 8px; background: linear-gradient(180deg, #fbfdff, #f8fbff); }
.business-metric span { color: #52637a; font-size: 13px; font-weight: 800; }
.business-metric strong { color: #1769d8; font-size: 23px; line-height: 1.05; }
.business-metric small { color: #64748b; font-size: 12px; }
.business-metric.profit-metric strong { color: #059669; }
.business-metric.warn-metric { border-color: #fed7aa; background: #fff7ed; }
.business-metric.warn-metric strong { color: #ea580c; }
.business-metric-button { all: unset; display: inline-flex; align-items: center; width: fit-content; margin: -2px -4px; padding: 2px 4px; border-radius: 6px; color: inherit; font: inherit; line-height: inherit; cursor: pointer; user-select: none; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.business-metric-button:hover { background: rgba(234,88,12,.08); box-shadow: inset 0 0 0 1px rgba(234,88,12,.12); }
.business-metric-button:active { transform: translateY(1px); background: rgba(234,88,12,.12); }
.business-metric-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(251,146,60,.22), inset 0 0 0 1px rgba(234,88,12,.18); }
.inventory-active-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid #fed7aa; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 13px; font-weight: 700; }
.profit-label { display: inline-flex; align-items: center; gap: 7px; }
.profit-eye { display: inline-grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 1px solid #dbe4ef; border-radius: 50%; color: #64748b; background: #f8fafc; font-size: 15px; line-height: 1; }
.profit-eye svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profit-eye:hover { color: var(--primary); border-color: #9dbcf0; background: #edf4ff; }
.profit-value.masked { color: #94a3b8; letter-spacing: 2px; }

@media (max-width: 700px) {
  .business-control-panel { display: block; padding: 0; border: 0; background: transparent; }
  .business-shortcuts { width: 100%; grid-template-columns: repeat(5, 1fr); }
  .business-shortcuts button { padding: 0 8px; }
  .business-date-range { min-width: 100%; }
  .business-age-setting { width: 100%; justify-content: space-between; }
}

.card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.card.pad {
  padding: 18px;
}

.card + .card {
  margin-top: 14px;
}

.grid > .card + .card {
  margin-top: 0;
}

.metric {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 104px;
  height: 100%;
  box-sizing: border-box;
  align-content: center;
  overflow: hidden;
  animation: cardRise 280ms ease both;
}

.dashboard-metrics .metric:nth-child(2) {
  animation-delay: 45ms;
}

.dashboard-metrics .metric:nth-child(3) {
  animation-delay: 90ms;
}

.metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(25, 35, 60, 0.12);
}

.metric-feature {
  border-color: rgba(23, 105, 224, 0.28);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(23, 105, 224, 0.55), rgba(19, 138, 80, 0.34)) border-box;
}

.metric-feature::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--good));
}

.metric-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.metric-breakdown em,
.metric small {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: #f1f5f9;
  font-size: 12px;
  font-style: normal;
}

.metric-link {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--panel);
  color: inherit;
  text-align: left;
  box-shadow: var(--shadow);
}

.metric-link:hover {
  border-color: var(--primary);
  background: var(--panel);
  box-shadow: 0 10px 26px rgba(23, 105, 224, 0.14);
}

.metric-link:focus-visible {
  outline: 2px solid rgba(23, 105, 224, 0.35);
  outline-offset: 2px;
}

.metric span {
  color: var(--muted);
  font-size: 13px;
}

.metric strong {
  font-size: 27px;
  line-height: 1.15;
}

.month-time-metric { min-height: 104px; align-content: stretch; gap: 10px; }
.month-time-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.month-time-head strong { color:var(--primary); font-size:28px; }
.month-time-head strong small { display:inline; padding:0; margin-left:3px; border-radius:0; background:transparent; color:var(--muted); font-size:13px; font-weight:600; }
.month-time-bar { position:relative; height:9px; overflow:hidden; border-radius:999px; background:#e8eef7; box-shadow:inset 0 1px 2px rgba(15,38,75,.08); }
.month-time-bar i { display:block; height:100%; min-width:0; border-radius:inherit; background:linear-gradient(90deg,#2474e5,#4d9cff); box-shadow:0 2px 8px rgba(36,116,229,.3); transition:width .45s ease; }
.month-time-meta { display:flex; justify-content:space-between; gap:8px; }
.month-time-meta span { font-size:12px; white-space:nowrap; }

.employee-dashboard-overview {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(380px, 1.15fr);
  align-items: stretch;
  gap: 12px;
}

.employee-dashboard-overview > .card + .card {
  margin-top: 0;
}

.employee-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.employee-dashboard-summary > div {
  display: grid;
  align-content: center;
  gap: 7px;
  min-width: 0;
  padding: 14px 16px;
}

.employee-dashboard-summary > div + div {
  border-left: 1px solid #e7edf5;
}

.employee-dashboard-summary span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-dashboard-summary strong {
  overflow: hidden;
  font-size: 23px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-month-time {
  min-height: 0;
  gap: 7px;
  padding: 12px 15px;
}

.employee-month-time .month-time-head {
  align-items: center;
}

.employee-month-time .month-time-head > span {
  color: var(--muted);
  font-size: 12px;
}

.employee-month-time .month-time-head strong {
  font-size: 23px;
}

.employee-month-time .month-time-bar {
  height: 7px;
}

.employee-month-time .month-time-meta span {
  font-size: 11px;
}

.employee-dashboard-overview + .dashboard-action {
  margin-top: 10px;
}

.message-panel { max-width: 960px; }
.message-contact { max-width: 360px; margin-bottom: 16px; }
.message-thread {
  min-height: 320px;
  max-height: 58vh;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f7f9fc;
}
.message-row { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; }
.message-row.mine { justify-content: flex-end; }
.message-row .message-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-self: flex-start;
  margin-top: 18px;
  font-size: 12px;
}
.message-entry { display: flex; max-width: min(78%, 660px); flex-direction: column; align-items: flex-start; }
.message-row.mine .message-entry { align-items: flex-end; }
.message-time { align-self: center; margin: 0 8px 5px; color: #94a0b1; font-size: 11px; font-style: normal; line-height: 1.2; white-space: nowrap; }
.message-bubble {
  max-width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.message-row.mine .message-bubble { color: #fff; background: var(--primary); border-color: var(--primary); }
.message-bubble .message-status { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.message-row.mine .message-bubble .message-status { color: rgba(255, 255, 255, .72); }
.message-actions { display: flex; gap: 8px; padding: 4px 5px 0; opacity: .7; }
.message-actions button { padding: 0; border: 0; color: #64748b; background: transparent; font-size: 11px; }
.message-actions button:hover { color: var(--primary); }
.message-recalled { color: #94a3b8; font-style: italic; }
.message-quote { display: grid; gap: 1px; margin-bottom: 8px; padding: 7px 9px; border-left: 3px solid rgba(96,165,250,.8); border-radius: 4px; background: rgba(15,23,42,.08); font-size: 12px; }
.message-row.mine .message-quote { background: rgba(255,255,255,.14); }
.message-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-reference { display: grid; width: min(360px, 100%); gap: 3px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid #dbe6f5; color: #24324a; background: #fff; text-align: left; }
.message-reference small { margin: 0; color: #2563eb !important; }
.message-reference strong { font-size: 14px; }
.message-reference span, .message-reference em { overflow: hidden; color: #64748b; font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.message-images { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: 6px; margin-bottom: 7px; }
.message-images img { display: block; width: 100%; height: 110px; border-radius: 8px; object-fit: cover; }
.message-compose-reference { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding: 8px 11px; border-left: 3px solid #3b82f6; border-radius: 7px; background: #edf4ff; }
.message-compose-reference span, .message-compose-reference b { display: block; }
.message-compose-reference span { overflow: hidden; color: #64748b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.message-compose-reference b { color: #1e3a5f; }
.message-compose-reference button { padding: 2px 8px; color: #64748b; background: transparent; }
.message-image-preview { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.message-image-preview figure { position: relative; flex: 0 0 72px; margin: 0; }
.message-image-preview img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }
.message-image-preview button { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; padding: 0; border-radius: 50%; background: #ef4444; }
.message-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-top: 12px; }
.message-form textarea { min-height: 84px; }
.message-form-actions { display: flex; align-items: center; gap: 7px; }
.message-tool-button { display: inline-flex; min-height: 38px; align-items: center; padding: 8px 11px; border: 1px solid #d7e1ee; border-radius: 8px; color: #34506f; background: #f8fafc; cursor: pointer; font-size: 13px; }
.message-tool-glyph { display:grid; line-height:1; place-items:center; }
.message-send-icon { display:grid; place-items:center; }
.message-emoji-wrap { position: relative; }
.message-emoji-picker { position: absolute; right: 0; bottom: calc(100% + 9px); z-index: 12; width: min(360px, calc(100vw - 48px)); max-height: 350px; padding: 13px; border: 1px solid #d9e3f2; border-radius: 13px; background: #fff; box-shadow: 0 16px 45px rgba(15, 39, 74, .2); overflow-y: auto; }
.message-emoji-picker.hidden { display: none; }
.message-emoji-picker > small { display: block; margin: 2px 4px 8px; color: #718096; font-size: 12px; }
.message-emoji-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.message-emoji-grid.recent { margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1px solid #edf2f7; }
.message-emoji-grid button { display: grid; width: 31px; height: 31px; padding: 0; place-items: center; border: 0; border-radius: 7px; color: inherit; background: transparent; box-shadow: none; font-size: 21px; line-height: 1; }
.message-emoji-grid button:hover { background: #eaf2ff; transform: scale(1.12); }
.message-reference-picker { box-sizing: border-box; width: min(760px, 92vw); max-width: 100%; overflow-x: hidden; }
.reference-picker-tabs { display: flex; gap: 8px; margin: 14px 0; }
.reference-picker-tabs button { color: #334155; background: #eef2f7; }
.reference-picker-tabs button.active { color: #fff; background: var(--primary); }
.reference-picker-list { display: grid; min-width: 0; max-height: 460px; gap: 7px; overflow-x: hidden; overflow-y: auto; }
.reference-picker-list.hidden { display: none; }
.reference-picker-list > button { display: grid; box-sizing: border-box; width: 100%; min-width: 0; gap: 5px; padding: 12px 14px; border: 1px solid var(--border); color: #1e293b; background: #fff; text-align: left; }
.reference-picker-list > button.reference-option { color:#1e293b !important; background:#fff !important; border-color:#dce5f1 !important; box-shadow:none !important; transform:none !important; }
.reference-picker-list > button:hover { border-color: #93b8f8; background: #f6f9ff; }
.reference-picker-list span { color: #64748b; font-size: 12px; }
.reference-picker-list small { overflow: hidden; color: #475569; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.reference-option-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
.reference-option-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-option-head em { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; color: #8a5b00; background: #fff2c7; font-size: 11px; font-style: normal; }
.reference-picker-list .reference-review-note { color: #b45309; }
.reference-picker-list > button.reference-option {
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  grid-auto-rows:max-content;
  align-content:start;
}
.reference-picker-list .reference-option-proof {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.message-workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr); width: min(1120px, 100%); min-height: 610px; overflow: hidden; }
.message-contacts { padding: 18px 12px; border-right: 1px solid var(--border); background: #f8fafc; }
.message-contacts-title { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 14px; }
.message-contacts-title h2 { margin: 0; font-size: 18px; }
.message-contacts-title span { color: var(--muted); font-size: 12px; }
.message-contact-list { display: grid; gap: 5px; }
.message-contact-item { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 9px 10px; border: 1px solid transparent; border-radius: 11px; color: #24324a; background: transparent; text-align: left; }
.message-contact-item:hover { border-color: #d8e4f5; background: #fff; }
.message-contact-item.active { border-color: #b9d2ff; color: #1155bd; background: #eaf2ff; box-shadow: 0 5px 14px rgba(37,99,235,.08); }
.message-contact-item .avatar { width: 38px; height: 38px; flex: 0 0 auto; font-size: 14px; }
.message-contact-item strong, .message-contact-item small { display: block; }
.message-contact-item strong { overflow: hidden; color: inherit; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.message-contact-item small { margin-top: 2px; color: #8492a8; font-size: 11px; }
.message-contact-item i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.12); }
.message-contact-unread { display: grid; min-width: 19px; height: 19px; padding: 0 5px; place-items: center; border-radius: 999px; color: #fff; background: #ef4444; box-shadow: 0 3px 8px rgba(239,68,68,.3); font-size: 11px; line-height: 1; }
.message-conversation { display: flex; min-width: 0; flex-direction: column; padding: 18px; }
.message-conversation-head { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 2px 14px; border-bottom: 1px solid var(--border); }
.message-conversation-head > div { display: flex; align-items: center; gap: 11px; }
.message-conversation-head span { display: grid; gap: 3px; }
.message-conversation-head h2 { margin: 0; font-size: 17px; }
.message-conversation-head small { color: var(--muted); font-size: 11px; }
.message-conversation .message-thread { flex: 1; margin-top: 14px; max-height: 430px; }
.message-no-contact { display: grid; flex: 1; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
.message-no-contact span { font-size: 40px; }
.message-no-contact h2 { margin: 12px 0 4px; color: #334155; font-size: 18px; }
.message-no-contact p { margin: 0; }
.message-notification-layer { position: fixed; right: 24px; bottom: 96px; z-index: 70; display: grid; gap: 10px; width: min(360px, calc(100vw - 48px)); pointer-events: none; }
.message-notification-card { display: grid; gap: 4px; width: 100%; padding: 13px 15px; border: 1px solid #c8dbf5; border-radius: 14px; color: #1e3556; background: rgba(255,255,255,.98); box-shadow: 0 14px 36px rgba(22,55,98,.2); text-align: left; pointer-events: auto; animation: message-notification-rise .24s ease-out both; cursor: pointer; }
.message-notification-card:hover, .message-notification-card:focus-visible { border-color: #6ea3e8; outline: 3px solid rgba(59,130,246,.18); }
.message-notification-card strong { overflow: hidden; color: #174a92; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.message-notification-card span { display: -webkit-box; overflow: hidden; color: #52657e; font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@keyframes message-notification-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.path-mapped {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.read-receipts {
  margin: 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fafc;
}

.read-receipts summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
}

.read-receipt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
}

.receipt-user {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}

.receipt-user small { color: var(--muted); white-space: nowrap; }

@media (max-width: 700px) {
  .read-receipt-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .message-entry { max-width: calc(100% - 42px); }
  .message-bubble { max-width: 100%; }
  .message-time { margin-bottom: 6px; color: #9aa5b5; font-size: 10px; }
  .message-bubble { padding: 10px 13px; line-height: 1.5; }
  .message-bubble .message-status { margin-top: 3px; font-size: 10px; text-align: right; }
  .message-actions { gap: 10px; padding-top: 2px; opacity: .62; }
  .message-actions button { font-size: 10px; }
  .message-row .message-avatar { width: 28px; height: 28px; flex-basis: 28px; margin-top:18px; }
  .message-form { grid-template-columns: 1fr; }
  .message-workspace { grid-template-columns: 68px minmax(0, 1fr); min-height: 560px; }
  .message-contacts { padding: 10px 5px; }
  .message-contacts-title { justify-content: center; padding: 0 0 10px; }
  .message-contacts-title h2 { font-size: 13px; }
  .message-contacts-title span { display: none; }
  .message-contact-item { display: flex; min-height: 58px; flex-direction: column; gap: 3px; padding: 6px 2px; text-align: center; }
  .message-contact-item .avatar { width:34px; height:34px; }
  .message-contact-item span small, .message-contact-item i { display: none; }
  .message-contact-unread { position: absolute; top: 4px; right: 4px; }
  .message-contact-item strong { max-width: 54px; font-size: 10px; }
  .message-conversation { padding: 10px; }
  .message-conversation-head { padding-bottom:10px; }
  .message-form-actions { display:grid; grid-template-columns:repeat(5, 42px); width:100%; justify-content:space-between; gap:6px; }
  .message-form-actions > button,
  .message-form-actions > label,
  .message-form-actions .message-emoji-wrap > button {
    display:grid;
    width:42px;
    height:42px;
    min-height:42px;
    padding:0;
    border:1px solid #d7e1ee;
    border-radius:12px;
    box-shadow:none;
    place-items:center;
  }
  .message-form-actions .message-emoji-wrap { width:42px; height:42px; }
  .message-form-actions .message-tool-button {
    color:#526982 !important;
    background:rgba(255,255,255,.72) !important;
    border-color:#cfdced !important;
    box-shadow:none !important;
  }
  .message-form-actions .message-tool-button:hover,
  .message-form-actions .message-tool-button:focus,
  .message-form-actions .message-tool-button:active {
    color:var(--primary) !important;
    background:#f5f8fd !important;
    border-color:#a9c5ee !important;
    transform:none;
  }
  .message-emoji-picker {
    right:auto;
    left:0;
    width:min(276px, calc(100vw - 116px));
    max-height:260px;
    padding:10px;
    overflow-x:hidden;
  }
  .message-emoji-grid { grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
  .message-emoji-grid button {
    width:30px;
    height:30px;
    min-height:30px;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .message-tool-glyph,
  .message-send-icon span { font-size:21px; font-weight:700; line-height:1; }
  .message-tool-glyph.scissors { font-size:20px; }
  .message-send-icon { color:#fff; background:var(--primary); }
  .message-form-actions .message-tool-button,
  .message-form-actions .message-tool-button:hover,
  .message-form-actions .message-tool-button:focus,
  .message-form-actions .message-tool-button:active {
    color:#526982 !important;
    background:rgba(255,255,255,.76) !important;
    border-color:#cfdced !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
    -webkit-tap-highlight-color:transparent;
  }
  .drawer-panel.message-reference-picker {
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    padding:16px;
    overflow:hidden;
  }
  .message-reference-picker .drawer-head {
    min-height:54px;
    align-items:flex-start;
    gap:12px;
  }
  .message-reference-picker .drawer-head > div { min-width:0; }
  .message-reference-picker .drawer-head h2 { margin:0 0 5px; font-size:19px; line-height:1.25; }
  .message-reference-picker .drawer-head p { margin:0; font-size:13px; line-height:1.5; }
  .message-reference-picker .drawer-head [data-close] {
    display:grid;
    width:34px;
    height:34px;
    min-height:34px;
    flex:0 0 34px;
    padding:0;
    place-items:center;
    border:0;
    border-radius:9px;
    color:#64748b;
    background:#f1f5f9;
    font-size:20px;
    line-height:1;
  }
  .message-reference-picker .reference-picker-tabs {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:14px 0 12px;
  }
  .message-reference-picker .reference-picker-tabs button {
    width:100%;
    height:38px;
    min-height:38px;
    padding:0 10px;
    border-radius:9px;
    color:#365272;
    background:#edf3fb;
    box-shadow:none;
  }
  .message-reference-picker .reference-picker-tabs button.active {
    color:#fff;
    background:#2873df;
  }
  .message-reference-picker .reference-picker-list {
    max-height:calc(100dvh - 190px);
    grid-auto-rows:max-content;
    align-content:start;
    gap:9px;
    padding:1px 4px 8px 0;
  }
  .message-reference-picker .reference-picker-list > button.reference-option {
    height:auto !important;
    min-height:78px !important;
    overflow:visible !important;
    align-content:start;
    grid-auto-rows:max-content;
    gap:4px;
    padding:11px 12px !important;
    border:1px solid #dce5f1 !important;
    border-radius:12px;
    line-height:1.35;
  }
  .message-reference-picker .reference-option-head { min-height:22px; gap:8px; }
  .message-reference-picker .reference-option-head strong {
    min-width:0;
    color:#1f4f88;
    font-size:14px;
    line-height:20px;
  }
  .message-reference-picker .reference-option-head em { line-height:18px; }
  .message-reference-picker .reference-picker-list span,
  .message-reference-picker .reference-picker-list small {
    display:block;
    min-height:17px;
    overflow:hidden;
    color:#64748b;
    font-size:11px;
    line-height:17px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .message-reference-picker .reference-picker-list .reference-review-note {
    color:#a15c08;
  }
}

@keyframes cardRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.section-title h2 {
  margin: 0;
  font-size: 18px;
}

.table-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px 0;
  color: #64748b;
  font-size: 13px;
}

.table-pagination.is-static {
  justify-content: flex-end;
}

.table-pagination-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-pagination-actions strong {
  min-width: 58px;
  text-align: center;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.table-pagination-actions button {
  min-height: 32px;
  padding: 0 12px;
}

.table-pagination-actions button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.resizable-table th.resizable-th {
  position: relative;
  user-select: none;
}

.column-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.column-resize-handle::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 1px;
  border-radius: 999px;
  background: transparent;
  transition: background .15s ease, box-shadow .15s ease;
}

.column-resize-handle:hover::after,
.is-resizing-column .column-resize-handle::after {
  background: #2f7df4;
  box-shadow: 0 0 0 2px rgba(47,125,244,.12);
}

.is-resizing-column,
.is-resizing-column * {
  cursor: col-resize !important;
  user-select: none !important;
}

.resizable-table.has-custom-column-widths {
  table-layout: fixed;
}

.resizable-table.has-custom-column-widths th,
.resizable-table.has-custom-column-widths td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-detail-table { min-width: 1500px; table-layout:auto; font-size:13px; }
.inventory-detail-table thead tr { height:36px; }
.inventory-detail-table tbody tr { height:42px; }
.inventory-detail-table th,
.inventory-detail-table td { height:42px; padding:5px 7px; white-space:nowrap; vertical-align:middle; box-sizing:border-box; border-bottom-color:#e7edf6; }
.inventory-detail-table th { height:36px; padding:7px; color:#53627a; font-size:12px; font-weight:800; background:#f7f9fc; }
.inventory-detail-table .stock-age-cell { width:72px; min-width:72px; color:#475569; font-weight:800; white-space:nowrap; }
.inventory-detail-table .money-column { min-width:94px; width:94px; }
.inventory-detail-table .money-column .inventory-field-link {
  max-width:none;
  min-width:72px;
  overflow:visible;
  text-overflow:clip;
}
.inventory-detail-table .warehouse-description {
  min-width: 130px;
  max-width: 190px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.inventory-field-link {
  display:inline-block;
  min-width:24px;
  min-height:20px;
  max-width:100%;
  margin:-3px -5px;
  padding:3px 5px;
  overflow:hidden;
  border-radius:5px;
  color:#1670df;
  font-weight:500;
  text-decoration:none !important;
  text-overflow:ellipsis;
  vertical-align:middle;
  white-space:nowrap;
  transition:color .15s ease, background-color .15s ease;
}
.inventory-field-link.is-empty { color:transparent; }
.inventory-field-link.is-empty:hover,
.inventory-field-link.is-empty:focus { min-width:54px; background:#edf5ff; }
.inventory-field-link.is-empty:hover::after,
.inventory-field-link.is-empty:focus::after { content:"编辑"; color:#8a97aa; font-size:12px; }
.inventory-field-link:hover,
.inventory-field-link:focus,
.inventory-field-link:active {
  color:#0b55b5;
  background:#edf5ff;
  text-decoration:none !important;
  outline:none;
}
.inventory-detail-table .status { display:inline-flex; align-items:center; justify-content:center; min-height:26px; box-sizing:border-box; }
.inventory-detail-table [data-edit-stock] { display:inline-flex; align-items:center; justify-content:center; min-height:34px; box-sizing:border-box; }
.modal:has(.inventory-quick-editor) { width:min(500px,calc(100vw - 32px)); overflow:hidden; }
.inventory-quick-editor .drawer-head { padding:18px 20px; }
.inventory-quick-editor .form { padding:20px; }
.inventory-quick-editor label>span:first-child:not(.quick-money-input) { display:block; margin-bottom:8px; color:#52627a; font-weight:700; }
.inventory-quick-editor textarea { min-height:150px; resize:vertical; }
.quick-money-input { display:grid; grid-template-columns:38px minmax(0,1fr) 42px; align-items:center; overflow:hidden; border:1px solid var(--line); border-radius:8px; }
.quick-money-input input { border:0; border-radius:0; box-shadow:none; }
.quick-money-input i,.quick-money-input em { color:#66758c; font-style:normal; text-align:center; }
.inventory-quick-editor .quick-money-input { display:grid; width:100%; height:46px; grid-template-columns:38px minmax(0,1fr) 42px; align-items:center; box-sizing:border-box; margin:0; }
.inventory-quick-editor .quick-money-input input { width:100%; height:44px; min-width:0; padding:0 4px; box-sizing:border-box; }
.inventory-quick-editor .quick-money-input i,.inventory-quick-editor .quick-money-input em { display:grid; height:44px; place-items:center; margin:0; }
.quick-editor-count { display:block; margin-top:-26px; padding-right:10px; color:#8a97aa; text-align:right; pointer-events:none; }
.quick-editor-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.quick-editor-actions button { min-width:76px; }
.modal:has(.cost-detail-editor) { width:min(920px,calc(100vw - 32px)); }
.cost-editor-formula { display:grid; grid-template-columns:minmax(0,1fr) 30px 190px; align-items:start; gap:12px; }
.cost-editor-total { display:flex; height:46px; margin-top:25px; align-items:center; justify-content:center; gap:9px; box-sizing:border-box; border:1px solid #dbe5f2; border-radius:8px; background:#f4f7fb; color:#66758c; }
.cost-editor-total strong { color:#17233a; font-size:21px; white-space:nowrap; }
.cost-editor-grid { display:grid; grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr); align-items:start; gap:8px; }
.cost-editor-grid label { display:block; min-width:0; }
.cost-editor-grid label>span:first-child { display:block; height:18px; margin:0 0 7px; line-height:18px; }
.cost-plus,.cost-equals { display:grid; height:46px; margin-top:25px; place-items:center; color:#73839a; font-size:24px; font-weight:500; }
.cost-detail-editor .quick-money-input { display:grid; width:100%; height:46px; grid-template-columns:32px minmax(0,1fr) 34px; align-items:center; box-sizing:border-box; }
.cost-detail-editor .quick-money-input input { width:100%; height:44px; min-width:0; padding:0 4px; box-sizing:border-box; }
.cost-detail-editor .quick-money-input i,.cost-detail-editor .quick-money-input em { display:grid; height:44px; place-items:center; margin:0; }
.cost-note-new { display:block; margin-top:20px; }
.cost-note-new textarea { min-height:76px; resize:vertical; }
.cost-note-history { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.cost-note-history h3 { margin:0 0 10px; font-size:15px; }
.cost-note-history article { padding:10px 12px; border:1px solid #e2e9f3; border-radius:8px; background:#f8fafd; }
.cost-note-history article+article { margin-top:8px; }
.cost-note-history article div { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cost-note-history time { color:#8a97aa; font-size:12px; }
.cost-note-history p { margin:6px 0 0; color:#33445d; white-space:pre-wrap; word-break:break-word; }
.cost-note-empty { padding:16px; border-radius:8px; background:#f6f8fb; color:#8a97aa; text-align:center; }
.inventory-summary-cards { margin-bottom:16px; }
.inventory-summary-cards .metric { min-height:96px; }
.inventory-summary-cards .inventory-total-cost { color:#dc2626; }
.inventory-summary-cards .inventory-total-price { color:#16a34a; }
.inventory-summary-cards .inventory-average-cost { color:#f59e0b; }
.inventory-management-card { padding:16px 18px 14px; box-shadow:0 10px 26px rgba(17,34,64,.06); }
.inventory-compact-title { margin-bottom:10px; }
.inventory-compact-title h2 { font-size:18px; }
.inventory-filter-bar { align-items:end; }
.inventory-filter-bar label:not(.grow) { min-width:160px; }
.inventory-advanced-filter { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8px 10px; align-items:end; margin:8px 0 12px; padding:10px 12px; border:1px solid #dfe7f2; border-radius:10px; background:#fbfcff; }
.inventory-advanced-filter label { gap:5px; font-size:12px; }
.inventory-advanced-filter input,
.inventory-advanced-filter select { height:36px; min-height:36px; padding:7px 10px; font-size:13px; }
.inventory-advanced-filter .date-range-field,
.inventory-advanced-filter .clearable-datetime { height:36px; min-height:36px; }
.inventory-advanced-filter .clearable-datetime input { height:36px; min-height:36px; }
.inventory-advanced-filter .date-range-field input { height:28px; min-height:28px; }
.inventory-advanced-filter > label { grid-column:span 2; min-width:0; }
.inventory-advanced-filter > label.inventory-keyword { grid-column:span 4; }
.inventory-advanced-filter > label.inventory-price-range { grid-column:span 4; }
.inventory-advanced-filter .inventory-dependent-field.is-hidden { display:none; }
.clearable-select { position:relative; display:block; width:100%; }
.clearable-select select { width:100%; padding-right:32px; }
.clearable-select.has-value select { padding-right:62px; }
.select-clear-button { position:absolute; top:50%; right:30px; z-index:2; display:none; align-items:center; justify-content:center; box-sizing:border-box; width:24px; min-width:24px; height:24px; min-height:24px; margin:0; padding:0; transform:translateY(-50%); border:0; border-radius:6px; background:transparent; color:#7c8da5; font-size:18px; font-weight:500; line-height:1; box-shadow:none; cursor:pointer; }
.clearable-select.has-value:hover .select-clear-button,.clearable-select.has-value:focus-within .select-clear-button { display:flex; }
.select-clear-button:hover { background:rgba(37,99,235,.08); color:#334d6b; }
.select-clear-button:focus-visible { background:rgba(37,99,235,.1); color:#1d4ed8; outline:2px solid rgba(37,99,235,.42); outline-offset:1px; }
.inventory-print-toolbar { display:flex; align-items:center; justify-content:flex-start; gap:16px; margin:0 0 14px; padding:10px 12px; min-height:44px; border:1px solid #dbe5f1; border-radius:10px; background:#f8fafc; color:#52647d; }
.inventory-print-toolbar > div { display:flex; align-items:center; gap:8px; }
.partner-row-actions { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.inventory-select-cell { width:42px; text-align:center; }
.inventory-select-cell input { width:16px; height:16px; accent-color:#1f6fe5; }
.label-print-modal-overlay { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(15,23,42,.46); backdrop-filter:blur(4px); }
.label-print-modal { width:min(920px,calc(100vw - 32px)); max-height:86vh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; border:1px solid #dbe5f1; border-radius:14px; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.24); }
.label-print-modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 20px 14px; border-bottom:1px solid #e5edf7; }
.label-print-modal-head h2 { margin:0; font-size:20px; line-height:1.2; }
.label-print-modal-head p { margin:6px 0 0; color:#64748b; font-size:13px; }
.label-print-close { width:auto; min-width:52px; height:32px; min-height:32px; padding:0 10px; border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc; color:#475569; box-shadow:none; }
.label-print-close:hover { background:#eef2f7; color:#1f2937; }
.label-print-preview-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; padding:18px 20px; overflow:auto; background:#f8fafc; }
.label-print-preview-frame { display:flex; align-items:center; justify-content:center; min-height:168px; padding:18px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; }
.label-print-preview-frame .label { position:relative; flex:0 0 auto; width:var(--print-label-width); height:var(--print-label-height); border:1px solid #111827; overflow:hidden; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.08); }
.label-print-preview-frame .label-resize-handle { display:none; }
.label-print-actions { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid #e5edf7; background:#fff; }
.label-print-iframe { position:fixed; right:0; bottom:0; width:0; height:0; border:0; opacity:0; pointer-events:none; }
.label-template-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; align-items:start; }
.label-template-form { margin-top:14px; }
.label-template-form .form-grid { grid-template-columns:1fr; }
.label-field-options { display:flex; flex-wrap:wrap; gap:10px 18px; margin:14px 0; padding:14px; border:1px solid #dbe5f1; border-radius:10px; }
.label-field-options legend { padding:0 6px; font-weight:700; }
.label-field-options label { display:flex; align-items:center; gap:7px; }
.label-field-options input { width:16px; height:16px; }
.label-preview-card { min-height:620px; display:flex; flex-direction:column; }
.label-settings-card { position:sticky; top:18px; }
.label-preview-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.label-preview-heading p { margin:5px 0 0; color:#64748b; font-size:13px; }
.label-preview-heading > span { padding:5px 9px; border-radius:999px; background:#eaf2ff; color:#1f6fe5; font-size:12px; }
.sales-label-preview { position:relative; aspect-ratio:var(--label-ratio); width:min(88%,720px); margin:auto; border:1px solid #172033; border-radius:5px; background-color:#fff; background-image:linear-gradient(rgba(37,99,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.055) 1px,transparent 1px); background-size:5% 10%; color:#101828; box-shadow:0 12px 32px rgba(15,23,42,.12); overflow:hidden; touch-action:none; user-select:none; }
.label-component { position:absolute; z-index:1; margin:0; line-height:1.15; white-space:normal; box-sizing:border-box; overflow:visible; }
.label-component-content { display:block; width:100%; min-height:100%; overflow:visible; white-space:normal; overflow-wrap:anywhere; word-break:break-word; text-overflow:clip; }
.label-component-title { font-size:13px; }
.label-component-model { font-size:20px; }
.label-component-category,.label-component-specs,.label-component-identifier,.label-component-description { color:#52647d; font-size:14px; }
.label-component-price { font-size:28px; font-weight:800; font-style:normal; }
.label-component.is-draggable { cursor:grab; border-radius:5px; outline:1px dashed transparent; transition:background .15s,outline-color .15s,box-shadow .15s; }
.label-component.is-draggable:hover { z-index:2; outline-color:#60a5fa; background:rgba(239,246,255,.92); box-shadow:0 0 0 4px rgba(239,246,255,.92); }
.label-component.is-moving { z-index:3; cursor:grabbing; outline-color:#2563eb; background:#eff6ff; box-shadow:0 0 0 5px #eff6ff,0 8px 20px rgba(37,99,235,.2); }
.label-component.is-selected { z-index:4; outline:1px solid #2563eb; background:rgba(239,246,255,.72); }
.label-component.is-resizing { z-index:5; outline:1px solid #2563eb; }
.label-resize-handle { display:none; position:absolute; width:10px; height:10px; border:2px solid #2563eb; border-radius:3px; background:#fff; box-sizing:border-box; z-index:8; }
.label-component.is-selected .label-resize-handle { display:block; }
.label-resize-handle.nw { left:-6px; top:-6px; cursor:nwse-resize; }
.label-resize-handle.ne { right:-6px; top:-6px; cursor:nesw-resize; }
.label-resize-handle.sw { left:-6px; bottom:-6px; cursor:nesw-resize; }
.label-resize-handle.se { right:-6px; bottom:-6px; cursor:nwse-resize; }
.label-typography-editor { margin:14px 0; padding:12px; border:1px solid #dbe5f1; border-radius:10px; background:#f8fbff; }
.label-style-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.label-style-title span { color:#2563eb; font-size:13px; }
.label-style-controls { display:grid; grid-template-columns:minmax(128px,1fr) 76px; gap:8px; align-items:end; }
.label-style-controls label { display:grid; gap:5px; color:#52647d; font-size:12px; }
.label-style-controls select,.label-style-controls input { height:40px; min-height:40px; }
.label-format-buttons { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.label-format-buttons button { width:100%; height:38px; min-height:38px; padding:0; border:1px solid #cbd5e1; background:#fff; color:#334155; }
.label-format-buttons button.active { border-color:#2563eb; background:#eaf2ff; color:#1d4ed8; box-shadow:inset 0 0 0 1px #2563eb; }
.inventory-price-range > span { display:grid; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); align-items:center; gap:6px; }
.inventory-price-range em { color:var(--muted); font-style:normal; text-align:center; }
.inventory-filter-actions { grid-column:span 3; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.inventory-filter-actions button { height:36px; min-height:36px; padding:7px 12px; }
button.export-button { height:36px; min-height:36px; padding:7px 14px; border:1px solid #fed7aa; background:#fff7ed; color:#c2410c; box-shadow:none; }
button.export-button:hover { border-color:#fdba74; background:#ffedd5; color:#9a3412; }
.mobile-stock-result-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.inventory-sort-button { width:24px; height:24px; min-height:24px; margin-left:4px; padding:0; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#64748b; font-size:14px; line-height:22px; vertical-align:middle; }
.inventory-sort-button:hover,.inventory-sort-button.active { border-color:#2563eb; background:#eff6ff; color:#2563eb; }
@media(max-width:760px){.cost-editor-formula{grid-template-columns:1fr}.cost-editor-grid{grid-template-columns:1fr}.cost-plus,.cost-equals{height:24px;margin-top:0}.cost-editor-total{margin-top:0}}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 12px;
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-weight: 600;
  background: #f8fafc;
}

.status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
}

.status.pending {
  color: #805600;
  background: #fff3c4;
}

.status.approved {
  color: #075f38;
  background: #cef7df;
}

.status.rejected {
  color: #9b1c1c;
  background: #ffe0e0;
}

.status.needs_more {
  color: #8a4b00;
  background: #ffe8c7;
}

.status.action_required {
  color: #7a4600;
  background: #ffe2a8;
  box-shadow: inset 0 0 0 1px rgba(205, 126, 0, 0.16);
}

.review-note-cell {
  min-width: 150px;
  max-width: 260px;
  color: #40516d;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
}

.pending-text {
  color: #9a6700;
  font-weight: 700;
}

.progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf5;
}

.progress span {
  display: block;
  height: 100%;
  background: var(--primary);
}

.progress.over span {
  background: var(--good);
}

.progress.complete span {
  background: var(--good);
}

.ring-progress {
  --value: 0%;
  --ring-color: var(--primary);
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) var(--value), #e8edf5 0);
}

.ring-progress::before {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.ring-progress.complete {
  --ring-color: var(--good);
}

.ring-progress strong {
  position: relative;
  color: var(--text);
  font-size: 14px;
  line-height: 1;
}

.progress-content-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.progress-copy {
  display: grid;
  gap: 7px;
}

.work-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
  padding: 4px 7px 8px 0;
}

.today-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
  padding: 4px 7px 8px 0;
}

.dashboard-period-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.combined-daily-progress {
  margin-top: 14px;
  padding: 14px 16px 16px;
  border: 1px solid #dce4ee;
  border-radius: 18px;
  background: #f7f9fc;
  box-shadow: none;
}

.combined-daily-title,
.combined-daily-card-head,
.combined-daily-card-head > div {
  display: flex;
  align-items: center;
}

.combined-daily-title {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.combined-daily-title h2 {
  margin: 0;
  font-size: 17px;
}

.combined-daily-title > div {
  display: flex;
  gap: 6px;
}

.combined-daily-title span {
  padding: 4px 8px;
  border-radius: 999px;
  color: #35649f;
  background: #eaf2ff;
  font-size: 11px;
  font-weight: 700;
}

.combined-daily-title span + span {
  color: #36765a;
  background: #eaf8f0;
}

.combined-daily-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.combined-daily-card {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #dfe6ef;
  border-radius: 13px;
  background: #fff;
}

.combined-daily-card-head {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.combined-daily-card-head > strong {
  min-width: 0;
  overflow: hidden;
  color: #1f2f46;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combined-daily-card-head > div {
  flex: 0 0 auto;
  gap: 7px;
  color: #8a671f;
  font-size: 11px;
  white-space: nowrap;
}

.combined-daily-card-head > div b {
  color: #12804b;
  font-weight: 700;
}

.combined-daily-line {
  display: grid;
  grid-template-columns: 28px minmax(52px, 1fr) minmax(128px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 25px;
}

.combined-daily-line > b {
  color: #3871b7;
  font-size: 11px;
}

.combined-daily-line.is-yesterday > b,
.combined-daily-line.is-previous-month > b {
  color: #36815d;
}

.combined-daily-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef5;
}

.combined-daily-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2d73e5, #5797f0);
}

.combined-daily-line.is-yesterday .combined-daily-bar i,
.combined-daily-line.is-previous-month .combined-daily-bar i {
  background: linear-gradient(90deg, #28a56a, #58bf87);
}

.combined-monthly-progress {
  margin-top: 14px;
}

.combined-daily-line > span {
  overflow: hidden;
  color: #6f7d91;
  font-size: 11px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combined-daily-line > span strong {
  color: #293c56;
}

.progress-period-card {
  min-width: 0;
  margin-top: 0;
  padding: 15px 16px;
  border: 1px solid #dce4ee;
  border-radius: 18px;
  background: #f7f9fc;
  box-shadow: none;
}

.progress-period-card .section-title {
  margin-bottom: 11px;
}

.progress-period-card .section-title h2 {
  font-size: 17px;
}

.period-progress-list {
  display: grid;
  gap: 9px;
}

.period-progress-list .work-progress-row {
  padding: 0;
  isolation: auto;
}

.period-progress-list .work-progress-row::before {
  display: none;
}

.period-progress-list .work-progress-row .progress-content-row {
  min-height: 76px;
  padding: 11px 13px;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 11px;
  border: 1px solid #dfe6ef;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease;
}

.period-progress-list .work-progress-row:hover .progress-content-row {
  border-color: #cbd7e6;
  background: #fbfcfe;
  box-shadow: none;
  transform: none;
}

.period-progress-list .ring-progress {
  width: 50px;
  height: 50px;
}

.period-progress-list .progress-copy {
  gap: 5px;
}

.work-progress-row {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0 7px 7px 0;
  isolation: isolate;
}

.work-progress-row::before {
  position: absolute;
  inset: 7px 0 0 7px;
  z-index: 0;
  border: 1px solid #d9e4f3;
  border-radius: 16px;
  background: #edf3fb;
  content: "";
}

.work-progress-row:nth-child(4n + 2)::before { background: #eef8f6; border-color: #d8ece7; }
.work-progress-row:nth-child(4n + 3)::before { background: #f3f0fb; border-color: #e4ddf3; }
.work-progress-row:nth-child(4n + 4)::before { background: #fbf5eb; border-color: #f0e4ce; }

.work-progress-row .progress-content-row {
  position: relative;
  z-index: 1;
  min-height: 104px;
  padding: 18px;
  border: 1px solid #dce5f1;
  border-radius: 16px;
  background: linear-gradient(145deg, #fff 0%, #fbfcff 100%);
  box-shadow: 0 8px 22px rgba(35, 58, 94, .07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.work-progress-row:hover .progress-content-row {
  border-color: #bfd3f2;
  box-shadow: 0 12px 28px rgba(35, 75, 132, .12);
  transform: translateY(-2px);
}

@media (max-width: 1080px) {
  .work-progress,
  .today-progress {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .dashboard-period-grid {
    grid-template-columns: 1fr;
  }

  .combined-daily-list {
    grid-template-columns: 1fr;
  }
}

.special-task-publisher-grid {
  display: grid;
  grid-template-columns: minmax(380px, .92fr) minmax(460px, 1.08fr);
  gap: 18px;
  align-items: start;
}

.special-task-publisher-grid > .card { height:auto; margin-top:0; box-sizing:border-box; }
.special-task-records { display:flex; flex-direction:column; }
.special-task-admin-list { flex:0 0 auto; }

.special-task-compose,
.special-task-records {
  overflow: hidden;
  border: 1px solid #dce5f2;
  border-radius: 18px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 36px rgba(38, 64, 104, .08);
}

.special-task-compose { padding: 22px; }
.special-task-records { padding: 0; }

.special-task-compose-head,
.special-task-records-head,
.special-task-heading {
  display: flex;
  align-items: center;
  gap: 13px;
}

.special-task-compose-head { margin-bottom: 22px; }
.special-task-compose-head h2,
.special-task-records-head h2,
.special-task-heading h2 { margin: 0; font-size: 19px; }
.special-task-compose-head p,
.special-task-records-head p,
.special-task-heading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }

.special-task-logo,
.special-task-heading-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #6b7cff, #8f67dc);
  box-shadow: 0 8px 20px rgba(107, 124, 255, .25);
  font-size: 21px;
}

.special-task-employee-field {
  width: min(280px, 100%);
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 8px 10px 9px;
  border: 1px solid #dfe7f3;
  border-radius: 10px;
}

.special-task-employee-field legend {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.special-task-employee-field legend button {
  min-height: 24px;
  padding: 2px 6px;
  font-size: 10px;
}

.special-task-employee-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
  margin-top: 3px;
}

.special-task-employee-options > label { display: block; min-width: 0; cursor: pointer; }
.special-task-employee-options > label > input { position: absolute; opacity: 0; pointer-events: none; }
.special-task-employee-options > label > span {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 5px 27px 5px 7px;
  border: 1px solid #e1e8f2;
  border-radius: 8px;
  color: var(--text);
  background: #fbfcfe;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.special-task-publish-panel .special-task-employee-options .avatar.small {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  font-size: 9px;
}
.special-task-employee-options b {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  text-overflow: clip;
  overflow-wrap: anywhere;
  white-space: normal;
}
.special-task-employee-options small { display:none; }
.special-task-employee-options i {
  position: absolute;
  right: 7px;
  top: 50%;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  background: #e8edf5;
  font-size: 9px;
  font-style: normal;
  transform: translateY(-50%);
}
.special-task-employee-options input:checked + span {
  border-color: #76a4eb;
  background: #eef5ff;
  box-shadow: 0 2px 8px rgba(45, 111, 211, .1);
}
.special-task-employee-options input:checked + span i { color: #fff; background: #3977e5; }
.special-task-compose-options {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.special-task-deadline {
  width: 190px;
  max-width: 190px;
  flex: 0 0 190px;
}

.special-task-records-head {
  justify-content: space-between;
  padding: 22px;
  border-bottom: 1px solid #e6ecf4;
  background: linear-gradient(135deg, #f7f9ff, #f2f6fc);
}
.special-task-records-head > span,
.special-task-heading > span,
.special-task-heading-actions {
  margin-left: auto;
}

.special-task-heading-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.special-task-heading-actions > span {
  padding: 5px 10px;
  border-radius: 999px;
  color: #41649c;
  background: #e8f0ff;
  font-size: 12px;
  font-weight: 700;
}

.special-task-heading-actions > button {
  min-height: 34px;
  padding: 0 13px;
  border-color: #c9d8ee;
  color: #315f9f;
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 12px rgba(54,84,134,.08);
}

.special-task-heading-actions > button b {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: #2f7be8;
  font-size: 11px;
}
.special-task-admin-list { display: block; min-width: 0; padding: 0; }
.special-task-admin-list > .empty { margin: 12px 18px 18px; }
.special-task-table-wrap { width: 100%; overflow-x: auto; }
.special-task-table {
  width: 100%;
  min-width: 700px;
  table-layout: fixed;
  border-collapse: collapse;
}
.special-task-table th,
.special-task-table td {
  overflow: hidden;
  padding: 10px 12px;
  border-bottom: 1px solid #e7edf5;
  color: #40516a;
  font-size: 12px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.special-task-table th {
  color: #718096;
  background: #f7f9fc;
  font-size: 11px;
  font-weight: 700;
}
.special-task-table tbody tr:last-child td { border-bottom: 0; }
.special-task-table tbody tr:hover td { background: #f8fbff; }
.special-task-table th:nth-child(2) { width: 110px; }
.special-task-table th:nth-child(3) { width: 100px; }
.special-task-table th:nth-child(4) { width: 138px; }
.special-task-table th:nth-child(5) { width: 104px; }
.special-task-table th:nth-child(6) { width: 60px; }
.special-task-list-content strong {
  display: block;
  overflow: hidden;
  color: #263a56;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.special-task-list-employees { color: #35629e; }
.special-task-list-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.special-task-list-status.is-pending { color: #9a5b13; background: #fff3d6; }
.special-task-list-status.is-progress { color: #1d5fa7; background: #e8f2ff; }
.special-task-list-status.is-complete { color: #157347; background: #dcf7e8; }
.special-task-table [data-delete-special-task] {
  min-height: 30px;
  height: 30px;
  padding: 4px 9px;
  font-size: 11px;
}
.danger-text { color: #c33b45 !important; background: #fff0f1 !important; }

.employee-special-tasks {
  position: relative;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #dfe4fa;
  border-radius: 18px;
  background:
    radial-gradient(circle at 95% 0%, rgba(142,103,220,.13), transparent 34%),
    linear-gradient(145deg, #fbfbff, #f5f7ff);
  box-shadow: 0 14px 34px rgba(70, 78, 145, .09);
}
.special-task-heading { margin-bottom: 16px; }
.employee-special-tasks.is-empty {
  padding: 14px 15px;
}
.employee-special-tasks.is-empty .special-task-heading {
  position: relative;
  padding-right: 94px;
  margin-bottom: 0;
  flex-wrap: nowrap;
}
.employee-special-tasks.is-empty .special-task-heading-actions {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  margin: 0;
}
.special-task-empty-note {
  margin: 7px 0 0 57px;
  color: #748198;
  font-size: 12px;
  font-weight: 600;
}
.employee-special-task-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.employee-special-task {
  position: relative;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto auto;
  gap: 13px;
  align-items: center;
  min-height: 88px;
  padding: 15px 16px 15px 12px;
  border: 1px solid #e1e6f2;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 7px 18px rgba(57, 67, 115, .06);
}
.employee-special-task > i { width: 5px; height: 46px; border-radius: 999px; background: linear-gradient(#6679f0, #9a67dc); }
.employee-special-task strong { display: block; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.employee-special-task small { display: block; margin-top: 6px; color: #929caf; font-size: 11px; }
.employee-special-task time { display: grid; gap: 4px; min-width: 92px; text-align: right; }
.employee-special-task time span { color: #8b95a7; font-size: 11px; }
.employee-special-task time b { color: #5b57a5; font-size: 13px; }
.special-task-complete-button { min-width:88px; height:36px; min-height:36px; padding:0 13px; border-radius:10px; }
.special-task-complete-button.is-complete { color:#15803d; background:#dcfce7; box-shadow:none; opacity:1; }

.special-task-completion-panel { width:min(540px,100%); }
.special-task-completed-panel { width:min(680px,100%); }
.special-task-completed-list { display:grid; gap:12px; padding:18px; max-height:min(68vh,680px); overflow:auto; }
.special-task-completed-item {
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:12px;
  padding:15px;
  border:1px solid #dfe8e3;
  border-radius:14px;
  background:#fbfefc;
}
.special-task-completed-status {
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:50%;
  color:#15803d;
  background:#dcfce7;
  font-size:18px;
  font-weight:800;
}
.special-task-completed-content { min-width:0; }
.special-task-completed-content > strong { display:block; color:#1f2f46; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.special-task-completed-meta { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:7px; color:#78869b; font-size:12px; }
.special-task-completed-proofs { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.special-task-completed-proofs a { display:block; width:62px; height:62px; overflow:hidden; border:1px solid #dbe5f2; border-radius:10px; background:#f4f7fb; }
.special-task-completed-proofs img { width:100%; height:100%; object-fit:cover; }
.special-task-empty { grid-column:1 / -1; }
.special-task-proof-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; min-height:150px; }
.special-task-proof-grid figure { position:relative; aspect-ratio:1; margin:0; overflow:hidden; border:1px solid #dbe5f2; border-radius:14px; background:#f4f7fb; }
.special-task-proof-grid figure img { width:100%; height:100%; object-fit:cover; }
.special-task-proof-grid figure button { position:absolute; top:6px; right:6px; display:grid; width:24px; min-width:24px; height:24px; min-height:24px; padding:0; place-items:center; border-radius:50%; background:rgba(15,23,42,.72); color:#fff; box-shadow:none; }
.special-task-proof-upload {
  grid-column: 1 / -1;
  display: grid;
  min-height: 150px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  border: 1px dashed #b9c9df;
  border-radius: 14px;
  color: #718096;
  background: #f8fbff;
  box-shadow: none;
  text-align: center;
}
.special-task-proof-upload:hover {
  border-color: var(--primary, #216be6);
  color: var(--primary, #216be6);
  background: color-mix(in srgb, var(--primary, #216be6) 5%, white);
  box-shadow: none;
}
.special-task-proof-upload span { font-size:32px; font-weight:300; }
.special-task-proof-upload.is-compact {
  grid-column: auto;
  aspect-ratio: 1;
  min-height: 0;
}
.special-task-proof-upload.is-compact span { font-size: 26px; }
.special-task-proof-upload.is-compact b { font-size: 12px; }
.special-task-completion-actions { display:flex; justify-content:flex-end; gap:10px; }
.special-task-completion-actions { margin-top:20px; padding-top:16px; border-top:1px solid #e6ecf4; }
.special-task-completion-actions button { min-width:88px; }
.employee-special-task.is-today { border-color: #f2cf8d; background: #fffaf0; }
.employee-special-task.is-today > i { background: #e6a22f; }
.employee-special-task.is-today time b { color: #b56a12; }
.employee-special-task.is-overdue { border-color: #f0c6ca; background: #fff8f8; }
.employee-special-task.is-overdue > i { background: #d75461; }
.employee-special-task.is-overdue time b { color: #c33b45; }

@media (max-width: 1080px) {
  .special-task-publisher-grid { grid-template-columns: 1fr; }
  .employee-special-task-list { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .special-task-heading { align-items:flex-start; flex-wrap:wrap; }
  .special-task-heading-actions { width:100%; margin-left:57px; justify-content:space-between; }
  .special-task-heading-actions > button { flex:0 0 auto; }
  .special-task-compose-options { align-items: stretch; flex-direction: column; }
  .special-task-deadline { width: 100%; max-width: none; flex-basis: auto; }
  .special-task-employee-field { width: 100%; margin-left: 0; }
  .employee-special-task { grid-template-columns: 5px minmax(0, 1fr); }
  .employee-special-task time { grid-column: 2; text-align: left; }
  .special-task-complete-button { grid-column:2; width:100%; }
  .special-task-proof-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.employee-summary-list {
  display: grid;
  gap: 14px;
}

.employee-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.employee-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.employee-card-head h3 {
  margin: 0;
  font-size: 18px;
}

.employee-total {
  display: grid;
  gap: 4px;
  text-align: right;
}

.employee-total strong {
  color: var(--good);
  font-size: 24px;
}

.mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-stat {
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--muted);
  background: #f1f5f9;
  font-size: 13px;
}

.mini-stat.warn {
  color: #8a4b00;
  background: #ffe8c7;
}

.project-list {
  display: grid;
  gap: 10px;
}

.project-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(260px, 2fr) auto;
  gap: 12px;
  align-items: center;
}

.project-row strong {
  font-weight: 700;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

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

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

.amount {
  color: var(--good);
  font-weight: 800;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.filter-actions {
  display: flex;
  gap: 8px;
}

.filter-summary {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.dashboard-action {
  margin-top: 16px;
}

.dashboard-action button {
  width: 100%;
  padding: 13px 16px;
  font-size: 16px;
}

.small-btn {
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 12px;
}

.review-workbench,
.review-list,
.admin-today-list,
.admin-today-projects,
.settlement-list,
.settlement-rows {
  display: grid;
  gap: 12px;
}

.review-group {
  display: grid;
  gap: 10px;
}

.review-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 4px;
}

.review-card,
.admin-today-card,
.settlement-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.review-card:hover,
.admin-today-card:hover,
.settlement-card:hover,
.employee-card:hover {
  border-color: rgba(23, 105, 224, 0.24);
  box-shadow: 0 12px 28px rgba(25, 35, 60, 0.09);
}

.today-admin-metrics {
  margin: 8px 0 14px;
}

.admin-dashboard-overview {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr));
  overflow:hidden;
  border:1px solid #dce5f0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 22px rgba(31,55,87,.05);
}

.admin-dashboard-overview-item {
  display:grid;
  min-width:0;
  gap:5px;
  padding:16px 18px;
  border:0;
  border-right:1px solid #e8edf4;
  border-radius:0;
  color:#172b48;
  background:transparent;
  box-shadow:none;
  text-align:left;
}

.admin-dashboard-overview-item:last-child { border-right:0; }
.admin-dashboard-overview-item.is-featured { box-shadow:inset 4px 0 #1973db; }
.admin-dashboard-overview-item.is-action { cursor:pointer; }
.admin-dashboard-overview-item.is-action:hover { background:#f6f9fd; }
.admin-dashboard-overview-item > span { color:#6d7c91; font-size:13px; }
.admin-dashboard-overview-item > strong { overflow:hidden; font-size:25px; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.admin-dashboard-overview-item > small { overflow:hidden; color:#8290a2; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }

.admin-combined-daily {
  margin-top:14px;
  padding:16px;
  border:1px solid #dce5f0;
  border-radius:14px;
}

.admin-combined-daily-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.admin-combined-daily-title h2 { margin:0; font-size:18px; }
.admin-combined-daily-title p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.admin-combined-date { display:flex; gap:7px; }
.admin-combined-date span {
  padding:5px 8px;
  border-radius:8px;
  color:#2e6ebf;
  background:#edf5ff;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.admin-combined-date span + span { color:#347857; background:#edf8f2; }

.admin-combined-employee-list {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
}

.admin-combined-employee {
  min-width:0;
  overflow:hidden;
  border:1px solid #dfe7f0;
  border-radius:12px;
  background:#f8fafc;
}

.admin-combined-employee > header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border-bottom:1px solid #e5ebf3;
  background:#fff;
}

.admin-combined-employee .profile-head { min-width:0; }
.admin-combined-employee .profile-head > div { min-width:0; }
.admin-combined-employee h3 { overflow:hidden; margin:0; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.admin-combined-employee .profile-head p { margin:3px 0 0; color:#7b899c; font-size:11px; }
.admin-combined-amounts { display:flex; flex:0 0 auto; gap:6px; }
.admin-combined-amounts span {
  padding:4px 7px;
  border-radius:7px;
  color:#3971b4;
  background:#edf5ff;
  font-size:10px;
  white-space:nowrap;
}
.admin-combined-amounts span + span { color:#347858; background:#edf8f2; }
.admin-combined-amounts b { font-size:11px; }
.admin-combined-projects { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:9px; }
.admin-combined-project {
  min-width:0;
  padding:9px 10px;
  border:1px solid #e1e7ef;
  border-radius:10px;
  background:#fff;
}
.admin-combined-project-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:5px;
}
.admin-combined-project-head strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.admin-combined-project-head span { flex:0 0 auto; color:#8a6a2f; font-size:10px; white-space:nowrap; }

.admin-daily-columns {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
}

.admin-day-panel {
  display:flex;
  min-width:0;
  min-height:100%;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fbfcfe;
  flex-direction:column;
}

.admin-day-panel > h3 {
  display:flex;
  min-height:30px;
  margin:0 0 10px;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:17px;
}
.admin-day-panel > h3 small {
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}
.admin-day-panel.is-today > h3 { color:var(--primary); }
.admin-day-panel.is-yesterday > h3 { color:#64748b; }
  .admin-day-panel > .admin-today-list { flex:1 1 auto; align-content:start; }

@media (max-width: 980px) {
  .admin-daily-columns { grid-template-columns:1fr; }
}

.mini-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

button.mini-card {
  color: inherit;
  text-align: left;
  box-shadow: none;
}

button.mini-card:hover {
  background: #fff;
}

.mini-card span {
  color: var(--muted);
  font-size: 13px;
}

.mini-card strong {
  font-size: 22px;
}

.admin-today-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.review-toggle {
  justify-self: center;
}

.path-list {
  display: grid;
  gap: 8px;
}

.path-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e7edf6;
  border-radius: 8px;
  background: #f8fafc;
}

.path-row span {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-video-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.review-video-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.review-video-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid #e7edf6;
  border-radius: 8px;
  background: #fff;
}

.review-video-row input {
  width: auto;
}

.review-video-row span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-video-row.is-locked {
  cursor: not-allowed;
}

.review-video-row.is-approved {
  border-color: #b7e4c9;
  background: #effbf3;
}

.review-video-row.is-approved span {
  color: #147a4d;
  font-weight: 700;
}

.review-video-row.is-rejected {
  border-color: #f0c9c9;
  background: #fff5f5;
}

.review-video-row.is-rejected span {
  color: #b42323;
}

.approved-path-locks,
.review-history {
  display: grid;
  gap: 8px;
}

.review-history {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.review-history-round {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.review-history-round small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.settlement-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settlement-stats span {
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--muted);
  background: #f1f5f9;
  font-size: 13px;
}

.settlement-progress-row {
  display: grid;
  grid-template-columns: 150px minmax(180px, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #edf1f7;
}

.settlement-progress-row:first-child {
  border-top: 0;
}

.settlement-progress-main {
  display: grid;
  gap: 7px;
}

.settlement-progress-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eef6;
}

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

.settlement-progress-bar.complete span {
  background: var(--good);
}

.settlement-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* 管理端月度绩效：同一员工、同一工作内容合并展示本月与上月。 */
.settlement-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(31, 55, 87, .05);
}

.settlement-overview > div {
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 14px 17px;
  border-right: 1px solid #e8edf4;
}

.settlement-overview > div:last-child {
  border-right: 0;
}

.settlement-overview span {
  color: #6d7c91;
  font-size: 12px;
}

.settlement-overview strong {
  overflow: hidden;
  color: #172b48;
  font-size: 23px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settlement-overview > div:first-child strong {
  color: #168453;
}

.settlement-monthly-panel {
  margin-top: 12px;
  overflow: hidden;
  border-radius: 14px;
}

.settlement-monthly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e5ebf3;
  background: #fff;
}

.settlement-monthly-head h2 {
  margin: 0;
  color: #172b48;
  font-size: 18px;
}

.settlement-monthly-head p {
  margin: 4px 0 0;
  color: #7b899c;
  font-size: 12px;
}

.settlement-monthly-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.settlement-monthly-actions > span,
.settlement-employee-amounts > span {
  padding: 5px 8px;
  border-radius: 8px;
  color: #3270ba;
  background: #edf5ff;
  font-size: 11px;
  white-space: nowrap;
}

.settlement-monthly-actions > span:nth-child(2),
.settlement-employee-amounts > span:nth-child(2) {
  color: #347858;
  background: #edf8f2;
}

.settlement-monthly-actions b,
.settlement-employee-amounts b {
  font-size: 12px;
}

.settlement-monthly-actions button {
  min-height: 34px;
  padding: 7px 12px;
}

.settlement-monthly-list {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: #f6f8fb;
}

.settlement-monthly-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfe7f0;
  border-radius: 12px;
  background: #fff;
}

.settlement-monthly-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 8px;
}

.settlement-monthly-card .profile-head {
  min-width: 0;
}

.settlement-monthly-card .profile-head > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.settlement-monthly-card .profile-head strong {
  overflow: hidden;
  color: #20334e;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settlement-monthly-card .profile-head span {
  overflow: hidden;
  color: #8491a3;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settlement-employee-amounts {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.settlement-period-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 9px;
}

.settlement-period-stats span {
  padding: 4px 7px;
  border-radius: 7px;
  color: #65758b;
  background: #f1f4f8;
  font-size: 10px;
  white-space: nowrap;
}

.settlement-period-stats span + span {
  color: #49745d;
  background: #eef7f2;
}

.settlement-monthly-projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 9px;
  border-top: 1px solid #e9eef5;
  background: #f8fafc;
}

.settlement-monthly-projects .combined-daily-card {
  padding: 9px 10px;
  border-radius: 10px;
}

.settlement-monthly-projects .combined-daily-card-head {
  margin-bottom: 5px;
}

.settlement-monthly-projects .combined-daily-card-head > strong {
  font-size: 13px;
}

@media (max-width: 820px) {
  .settlement-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 11px;
  }

  .settlement-overview > div {
    padding: 10px 12px;
    border-bottom: 1px solid #e8edf4;
  }

  .settlement-overview > div:nth-child(2) {
    border-right: 0;
  }

  .settlement-overview > div:nth-child(n + 3) {
    border-bottom: 0;
  }

  .settlement-overview span {
    font-size: 10px;
  }

  .settlement-overview strong {
    font-size: 20px;
  }

  .settlement-monthly-panel {
    margin-top: 9px;
    border-radius: 11px;
  }

  .settlement-monthly-head {
    align-items: flex-start;
    padding: 11px 12px 10px;
  }

  .settlement-monthly-head h2 {
    font-size: 16px;
  }

  .settlement-monthly-head p {
    font-size: 10px;
  }

  .settlement-monthly-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }

  .settlement-monthly-actions > span {
    padding: 4px 6px;
    font-size: 9px;
  }

  .settlement-monthly-actions b {
    font-size: 10px;
  }

  .settlement-monthly-list {
    gap: 8px;
    padding: 8px;
  }

  .settlement-monthly-card > header {
    align-items: flex-start;
    padding: 9px 9px 7px;
  }

  .settlement-monthly-card .avatar.small {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
  }

  .settlement-employee-amounts {
    display: grid;
    gap: 4px;
  }

  .settlement-employee-amounts > span {
    padding: 3px 6px;
    font-size: 9px;
  }

  .settlement-employee-amounts b {
    font-size: 10px;
  }

  .settlement-period-stats {
    gap: 4px;
    padding: 0 9px 7px;
  }

  .settlement-period-stats span {
    padding: 3px 6px;
    font-size: 9px;
  }

  .settlement-monthly-projects {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    padding: 7px;
  }

  .settlement-monthly-projects .combined-daily-card {
    padding: 8px 9px;
  }

  .settlement-monthly-projects .combined-daily-line {
    grid-template-columns: 26px minmax(40px, 1fr) minmax(112px, auto);
    gap: 6px;
  }

  .settlement-monthly-projects .combined-daily-line > span {
    font-size: 10px;
  }
}

.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.thumbs img {
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.proof-image-button {
  display: block;
  width: 72px;
  height: 72px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  cursor: zoom-in;
}

.proof-image-button:hover {
  transform: none;
  box-shadow: 0 0 0 2px #93c5fd;
}

.proof-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  padding: 16px;
  place-items: center;
  overflow: hidden;
  background: rgba(10, 16, 28, .68);
}

.proof-image-modal {
  display: grid;
  width: min(720px, calc(100vw - 32px));
  height: min(760px, calc(100dvh - 32px));
  grid-template-rows: 54px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 90px rgba(0, 0, 0, .34);
}

.proof-image-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--line);
}

.proof-image-head strong {
  font-size: 16px;
}

.proof-image-close {
  display: grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #64748b;
  background: transparent;
  font: 400 26px/1 Arial, sans-serif;
  box-shadow: none;
}

.proof-image-close:hover {
  color: #0f172a;
  background: #eef2f7;
  transform: none;
  box-shadow: none;
}

.proof-image-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  place-items: center;
  overflow: hidden;
  background: #f3f6fa;
}

.proof-image-stage img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 760px) {
  .proof-image-overlay {
    padding: 10px;
  }

  .proof-image-modal {
    width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
    grid-template-rows: 50px minmax(0, 1fr);
    border-radius: 12px;
  }

  .proof-image-stage {
    padding: 10px;
  }
}

.submit-proof-picker {
  display: block;
}

.submit-proof-picker > button,
.submit-proof-status {
  display: none;
}

.image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 0;
}

.image-preview figure {
  width: 92px;
  margin: 0;
}

.image-preview img {
  width: 92px;
  height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.image-preview figcaption {
  overflow: hidden;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar {
  display: grid;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
  font-size: 28px;
  font-weight: 800;
}

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

.avatar.button {
  border: 0;
  padding: 0;
  cursor: pointer;
}

.avatar.button:hover {
  box-shadow: 0 0 0 4px rgba(23, 105, 224, 0.12);
}

.avatar.small {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  font-size: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.estimate-box {
  display: grid;
  gap: 8px;
  border: 1px solid #b9d4ff;
  border-radius: 8px;
  padding: 14px;
  background: var(--soft);
}

.estimate-box strong {
  color: var(--primary);
  font-size: 22px;
}

.success-progress {
  width: min(520px, 100%);
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8fafc;
  text-align: left;
}

.confirm-box {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #ffd0d0;
  border-radius: 8px;
  background: #fff7f7;
}

.drawer {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 16, 28, 0.45);
  z-index: 20;
}

.drawer.open {
  display: flex;
}

body.pv2-template-modal-open {
  overflow: hidden;
}

.drawer.open.minimized {
  display: block;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

.drawer.minimized .modal {
  display: none;
}

#drawer.pv2-template-drawer[data-drawer-state="minimized"] {
  display: block;
  padding: 0;
  background: transparent;
  pointer-events: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#drawer.pv2-template-drawer[data-drawer-state="minimized"] > .modal {
  display: none !important;
  visibility: hidden !important;
}

#drawer.pv2-template-drawer[data-drawer-state="minimized"] > .drawer-restore {
  display: inline-flex;
  visibility: visible;
  pointer-events: auto;
}

.drawer-restore {
  position: fixed;
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  max-width: min(360px, calc(100vw - 44px));
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid #93baff;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #2674e8, #1459bd);
  box-shadow: 0 12px 32px rgba(20, 89, 189, .3);
  pointer-events: auto;
  z-index: 30;
}

.drawer-restore:hover { transform: translateY(-2px); box-shadow: 0 15px 36px rgba(20, 89, 189, .38); }
.drawer-restore span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 15px; }
.drawer-restore b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

.modal {
  width: min(620px, 100%);
  max-height: 90vh;
  overflow: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.24);
}

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

.modal-head h2 {
  margin: 0;
  font-size: 18px;
}

.modal-body {
  padding: 18px;
}

.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}

.checkline input {
  width: auto;
}

.input-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.detected-urls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-button {
  border: 1px solid var(--line);
  background: #f3f7ff;
  color: var(--text);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
}

.chip-button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 8px;
  color: #fff;
  background: #172033;
  box-shadow: var(--shadow);
  z-index: 30;
}

.empty {
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.success-panel {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 52px 20px;
  text-align: center;
}

.success-icon {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--good);
  box-shadow: 0 12px 28px rgba(19, 138, 80, 0.24);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}

.success-panel h2 {
  margin: 4px 0 0;
  font-size: 24px;
}

.success-panel p {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

@media (max-width: 820px) {
  .admin-dashboard-overview {
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-radius:10px;
  }

  .admin-dashboard-overview-item {
    justify-items:center;
    gap:3px;
    padding:10px 5px;
    text-align:center;
  }

  .admin-dashboard-overview-item.is-featured { box-shadow:none; }
  .admin-dashboard-overview-item > span { font-size:10px; }
  .admin-dashboard-overview-item > strong { font-size:18px; }
  .admin-dashboard-overview-item > small {
    max-width:100%;
    font-size:9px;
  }

  .admin-combined-daily {
    margin-top:8px;
    padding:9px;
    border-radius:10px;
  }

  .admin-combined-daily-title {
    align-items:flex-start;
    margin-bottom:9px;
  }

  .admin-combined-daily-title h2 { font-size:16px; }
  .admin-combined-daily-title p { display:none; }
  .admin-combined-date { display:grid; gap:3px; }
  .admin-combined-date span { padding:3px 6px; font-size:9px; }
  .admin-combined-employee-list { grid-template-columns:1fr; gap:8px; }
  .admin-combined-employee { border-radius:9px; }
  .admin-combined-employee > header { padding:7px 9px; }
  .admin-combined-employee .avatar.small { width:32px; height:32px; flex-basis:32px; }
  .admin-combined-employee h3 { font-size:14px; }
  .admin-combined-amounts { display:grid; gap:2px; }
  .admin-combined-amounts span { padding:3px 5px; font-size:9px; }
  .admin-combined-projects { grid-template-columns:1fr; gap:5px; padding:6px; }
  .admin-combined-project { padding:7px 8px; border-radius:8px; }
  .admin-combined-project-head { min-height:18px; margin-bottom:1px; }
  .admin-combined-project-head strong { font-size:12px; }
  .admin-combined-project-head span { font-size:9px; }
  .admin-combined-project .combined-daily-line {
    grid-template-columns:25px minmax(44px,1fr) minmax(112px,auto);
    gap:6px;
    min-height:20px;
  }
  .admin-combined-project .combined-daily-line > span { font-size:9px; }
  .admin-combined-project .combined-daily-bar { height:6px; }

  .employee-dashboard-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .employee-dashboard-summary > div {
    padding: 12px 14px;
  }

  .employee-dashboard-summary strong {
    font-size: 21px;
  }

  .employee-month-time {
    padding: 11px 13px;
  }

  .announcement-page.is-employee {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .announcement-page.is-employee > .section-title {
    display: none;
  }

  .announcement-page.is-employee .announcement-list {
    gap: 10px;
  }

  button {
    min-height: 42px;
  }

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

  .side {
    position: static;
    height: auto;
    width: 100%;
    padding: 14px;
  }

  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
  }

  .nav button {
    min-width: 0;
    padding: 9px;
  }

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

  .main {
    width: 100%;
    padding: 12px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar label {
    max-width: none !important;
    width: 100%;
  }

  .section-title {
    align-items: stretch;
    flex-direction: column;
  }

  .section-title .actions,
  .actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .filter-panel {
    grid-template-columns: 1fr;
  }

  .filter-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .actions button {
    width: 100%;
  }

  .filter-actions button {
    width: 100%;
  }

  .card.pad {
    padding: 14px;
  }

  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .form-grid.cols-2,
  .form-grid.cols-3 { grid-template-columns: 1fr; }
  .filter-bar { align-items: stretch; flex-direction: column; }
  .filter-bar label, .filter-bar button { width: 100%; }
  .inventory-advanced-filter { grid-template-columns:1fr 1fr; padding:10px; }
  .inventory-advanced-filter > label,.inventory-advanced-filter > label.inventory-keyword,.inventory-advanced-filter > label.inventory-price-range { grid-column:span 1; }
  .inventory-advanced-filter > label.inventory-keyword,.inventory-advanced-filter > label.inventory-price-range,.inventory-filter-actions { grid-column:1 / -1; }
  .inventory-print-toolbar { align-items:stretch; flex-direction:column; }
  .inventory-print-toolbar > div { display:grid; grid-template-columns:1fr; }
  .label-template-layout { grid-template-columns:1fr; }
  .label-preview-card { position:static; }
  .purchase-form-footer { align-items: stretch; flex-direction: column; }
  .purchase-form-footer > div { display: grid; grid-template-columns: 1fr 1fr; }

  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  table {
    min-width: 560px;
  }

  .employee-card-head,
  .announcement-head,
  .project-row,
  .review-card .row-between,
  .settlement-card .row-between {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .review-card .row-between,
  .settlement-card .row-between {
    display: grid;
  }

  .progress-content-row {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
  }

  .row-between {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-head {
    align-items: flex-start;
  }

  .project-meta,
  .settlement-progress-meta {
    flex-direction: column;
    gap: 4px;
  }

  .admin-today-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .settlement-progress-row {
    grid-template-columns: 1fr;
  }

  .ring-progress {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .employee-card-head {
    display: grid;
  }

  .employee-total {
    text-align: left;
  }

  .path-row {
    grid-template-columns: 1fr;
  }

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

  .drawer {
    align-items: stretch;
    padding: 10px;
  }

  .drawer-restore { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }

  .modal {
    width: 100%;
    max-height: calc(100vh - 20px);
    border-radius: 10px;
  }

  .modal-head,
  .modal-body {
    padding: 14px;
  }
}

/* Personal center theme picker */
.profile-theme-section {
  margin-bottom: 18px;
}

.profile-theme-section .section-title {
  margin-bottom: 16px;
}

.profile-theme-section .section-title p {
  margin: 5px 0 0;
}

.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.theme-choice {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 24px;
  gap: 14px;
  align-items: center;
  min-height: 104px;
  padding: 13px;
  color: #334155;
  text-align: left;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 14px;
  box-shadow: none;
}

.theme-choice:hover {
  color: #334155;
  background: #fbfdff;
  border-color: #a9c2ee;
  transform: translateY(-1px);
}

.theme-choice.selected {
  color: #244d91;
  background: #f7faff;
  border-color: #4f84e7;
  box-shadow: 0 0 0 3px rgba(79, 132, 231, .11);
}

.theme-choice-copy {
  display: grid;
  gap: 6px;
}

.theme-choice-copy strong {
  font-size: 15px;
}

.theme-choice-copy small {
  color: #8a96a8;
  font-size: 12px;
  font-weight: 400;
}

.theme-choice-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: transparent;
  background: #eef2f7;
  border-radius: 50%;
  font-size: 13px;
}

.theme-choice.selected .theme-choice-check {
  color: #fff;
  background: #3977e4;
}

.theme-preview {
  position: relative;
  display: block;
  width: 112px;
  height: 76px;
  overflow: hidden;
  border: 1px solid #dfe5ee;
  border-radius: 10px;
  background: #f5f7fb;
}

.theme-preview i,
.theme-preview b,
.theme-preview em,
.theme-preview strong {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.theme-preview i {
  inset: 0 auto 0 0;
  width: 24px;
  background: #fff;
  border-right: 1px solid #e5eaf1;
}

.theme-preview b {
  top: 9px;
  left: 31px;
  width: 72px;
  height: 15px;
  border-radius: 5px;
  background: #4f83e7;
}

.theme-preview em {
  top: 31px;
  left: 31px;
  width: 34px;
  height: 32px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(43, 65, 98, .08);
}

.theme-preview strong {
  top: 31px;
  right: 8px;
  width: 31px;
  height: 32px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(43, 65, 98, .08);
}

.theme-preview-cloud {
  background: linear-gradient(145deg, #eaf2ff, #f5f8ff);
}

.theme-preview-cloud i {
  background: rgba(247, 250, 255, .88);
}

.theme-preview-cloud b {
  background: linear-gradient(100deg, #5b8eef, #78a3f4);
}

.theme-preview-cloud em,
.theme-preview-cloud strong {
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .92);
}

.theme-preview-gold {
  background: linear-gradient(145deg, #fffdf7, #f6f1e4);
  border-color: #e7d9ad;
}

.theme-preview-gold i {
  background: #171717;
  border-right-color: #2b2b2b;
}

.theme-preview-gold b {
  background: linear-gradient(100deg, #171717 0 72%, #d6aa3a 72%);
}

.theme-preview-gold em {
  background: #fff;
  border-top: 3px solid #d6aa3a;
}

.theme-preview-gold strong {
  background: #171717;
  border-top: 3px solid #e2bd59;
}

.theme-preview-forest {
  background: #dce7de;
  border-color: #9eb3a1;
}

.theme-preview-forest i { background: #0e171c; border-color: #25342b; }
.theme-preview-forest b { background: #526951; }
.theme-preview-forest em { background: #b3c9b6; }
.theme-preview-forest strong { background: #7d977f; }

.theme-preview-clay {
  background: #f3e5d6;
  border-color: #d5b493;
}

.theme-preview-clay i { background: #3a2e2d; border-color: #5e483e; }
.theme-preview-clay b { background: #bd8d63; }
.theme-preview-clay em { background: #e7cfb8; }
.theme-preview-clay strong { background: #43718e; }

.theme-preview-graphite {
  background: #dedbd8;
  border-color: #9f9994;
}

.theme-preview-graphite i { background: #141616; border-color: #3d3c38; }
.theme-preview-graphite b { background: #7f1d1a; }
.theme-preview-graphite em { background: #a49f9d; }
.theme-preview-graphite strong { background: #746d67; }

.theme-preview-wine {
  background: #f0dfe4;
  border-color: #c790a1;
}

.theme-preview-wine i { background: #230e0f; border-color: #541625; }
.theme-preview-wine b { background: #910d38; }
.theme-preview-wine em { background: #bc788d; }
.theme-preview-wine strong { background: #9d4060; }

/* Cloud blue UI theme */
body[data-ui-theme="cloud-blue"] {
  color: #263d63;
  background:
    radial-gradient(circle at 92% 4%, rgba(140, 177, 246, .30), transparent 28%),
    radial-gradient(circle at 20% 92%, rgba(193, 218, 255, .36), transparent 30%),
    #edf3fc;
}

body[data-ui-theme="cloud-blue"] .main {
  background:
    radial-gradient(circle at 96% 0%, rgba(131, 171, 244, .22), transparent 23%),
    linear-gradient(145deg, rgba(242, 247, 255, .95), rgba(234, 242, 253, .92));
}

body[data-ui-theme="cloud-blue"] .side {
  background: rgba(248, 251, 255, .88);
  border-right-color: rgba(182, 202, 233, .58);
  box-shadow: 8px 0 28px rgba(48, 82, 137, .06);
  backdrop-filter: blur(16px);
}

body[data-ui-theme="cloud-blue"] .side-user {
  border-bottom-color: rgba(189, 207, 234, .55);
}

body[data-ui-theme="cloud-blue"] .nav button[data-view].active {
  color: #2e63bd;
  background: linear-gradient(100deg, #e1ecff, #eaf2ff);
}

body[data-ui-theme="cloud-blue"] .nav button[data-view]:hover {
  color: #315fae;
  background: rgba(226, 237, 255, .72);
}

body[data-ui-theme="cloud-blue"] .topbar {
  padding: 17px 20px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(49, 82, 132, .055);
  backdrop-filter: blur(14px);
}

body[data-ui-theme="cloud-blue"] .card {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(199, 214, 237, .72);
  box-shadow: 0 12px 34px rgba(45, 79, 129, .065);
  backdrop-filter: blur(12px);
}

body[data-ui-theme="cloud-blue"] table th {
  color: #61769a;
  background: rgba(231, 239, 252, .82);
}

body[data-ui-theme="cloud-blue"] table td {
  border-color: rgba(210, 221, 238, .76);
}

body[data-ui-theme="cloud-blue"] input,
body[data-ui-theme="cloud-blue"] select,
body[data-ui-theme="cloud-blue"] textarea {
  background: rgba(255, 255, 255, .78);
  border-color: #cddbf0;
}

body[data-ui-theme="cloud-blue"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger),
body[data-ui-theme="cloud-blue"] button:not([class]):not([data-view]):not(.nav-group-title) {
  color: #315fa8;
  background: #e1ebfb;
  border-color: #bfd2ef;
  box-shadow: 0 5px 13px rgba(75, 118, 198, .08);
}

body[data-ui-theme="cloud-blue"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger):hover,
body[data-ui-theme="cloud-blue"] button:not([class]):not([data-view]):not(.nav-group-title):hover {
  color: #254f91;
  background: #d5e3f8;
  border-color: #a9c3e9;
}

body[data-ui-theme="cloud-blue"] .organization-add-button {
  color: #315fa8;
  background: #e1ebfb;
  border-color: #bfd2ef;
  box-shadow: 0 5px 13px rgba(75, 118, 198, .08);
}

body[data-ui-theme="cloud-blue"] .organization-add-button:hover {
  color: #254f91;
  background: #d5e3f8;
  border-color: #a9c3e9;
}

body[data-ui-theme="cloud-blue"] .organization-add-button.work-add-button {
  color: #167357;
  background: #e2f5ee;
  border-color: #bfe5d7;
}

body[data-ui-theme="cloud-blue"] .organization-add-button.work-add-button:hover {
  color: #0f6048;
  background: #d5eee5;
  border-color: #a6d9c7;
}

body[data-ui-theme="cloud-blue"] button.employee-state-control.is-active {
  color: #167347;
  background: #e6f7ee;
  border-color: #bfe8d1;
  box-shadow: none;
}

body[data-ui-theme="cloud-blue"] button.employee-state-control.is-active:hover {
  color: #0f623a;
  background: #d8f2e4;
  border-color: #9ddab8;
}

body[data-ui-theme="cloud-blue"] button.employee-state-control.is-disabled {
  color: #c53d4b;
  background: #fff0f2;
  border-color: #f2c5cb;
  box-shadow: none;
}

body[data-ui-theme="cloud-blue"] button.employee-state-control.is-disabled:hover {
  color: #ae2f3e;
  background: #ffe5e9;
  border-color: #ebaab3;
}

body[data-ui-theme="cloud-blue"] button[role="switch"],
body[data-ui-theme="cloud-blue"] .preset-active-switch {
  box-shadow: none;
}

body[data-ui-theme="cloud-blue"] .metric {
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(244,248,255,.78));
}

body[data-ui-theme="cloud-blue"] .organization-panel-head,
body[data-ui-theme="cloud-blue"] .purchase-entry-card > .section-title {
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(239,246,255,.82));
}

body[data-ui-theme="cloud-blue"] .organization-summary {
  background: rgba(231, 240, 255, .62);
}

body[data-ui-theme="cloud-blue"] .position-architecture-card,
body[data-ui-theme="cloud-blue"] .work-content-card {
  background: rgba(255,255,255,.72);
}

body[data-ui-theme="cloud-blue"] .drawer {
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

body[data-ui-theme="cloud-blue"] .drawer.open.minimized {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Obsidian gold UI theme */
body[data-ui-theme="black-gold"] {
  color: #25231f;
  background: #f5f4f0;
}

body[data-ui-theme="black-gold"] .main {
  background:
    radial-gradient(circle at 96% 2%, rgba(218, 176, 67, .10), transparent 21%),
    linear-gradient(145deg, #fafaf8, #f3f2ee);
}

body[data-ui-theme="black-gold"] .side {
  background: #fff;
  border-right-color: #e8e2d4;
  box-shadow: 8px 0 26px rgba(35, 30, 20, .045);
}

body[data-ui-theme="black-gold"] .side-user {
  border-bottom-color: #eee8dc;
}

body[data-ui-theme="black-gold"] .side-user h2,
body[data-ui-theme="black-gold"] h1,
body[data-ui-theme="black-gold"] h2,
body[data-ui-theme="black-gold"] h3 {
  color: #171717;
}

body[data-ui-theme="black-gold"] .nav-group-title {
  color: #9a8755;
}

body[data-ui-theme="black-gold"] .nav button[data-view] {
  color: #67635b;
}

body[data-ui-theme="black-gold"] .nav button[data-view]:hover {
  color: #171717;
  background: #f8f4e8;
}

body[data-ui-theme="black-gold"] .nav button[data-view].active {
  color: #fff;
  background: linear-gradient(100deg, #171717, #2a2926);
  box-shadow: 0 7px 16px rgba(24, 22, 17, .13);
}

body[data-ui-theme="black-gold"] .nav button[data-view].active .nav-icon {
  color: #171717;
  background: linear-gradient(145deg, #f0d782, #c99521);
}

body[data-ui-theme="black-gold"] .topbar {
  padding: 17px 20px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #ece7dc;
  border-radius: 15px;
  box-shadow: 0 10px 28px rgba(35, 30, 20, .045);
}

body[data-ui-theme="black-gold"] .card {
  background: #fff;
  border-color: #e9e4d9;
  box-shadow: 0 10px 28px rgba(37, 31, 20, .055);
}

body[data-ui-theme="black-gold"] table th {
  color: #78663a;
  background: #faf6e9;
}

body[data-ui-theme="black-gold"] table td {
  border-color: #eee9de;
}

body[data-ui-theme="black-gold"] input,
body[data-ui-theme="black-gold"] select,
body[data-ui-theme="black-gold"] textarea {
  color: #24211c;
  background: #fff;
  border-color: #ddd6c6;
}

body[data-ui-theme="black-gold"] input:focus,
body[data-ui-theme="black-gold"] select:focus,
body[data-ui-theme="black-gold"] textarea:focus {
  border-color: #c79a2b;
  box-shadow: 0 0 0 3px rgba(199, 154, 43, .13);
}

body[data-ui-theme="black-gold"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger),
body[data-ui-theme="black-gold"] button:not([class]):not([data-view]):not(.nav-group-title),
body[data-ui-theme="black-gold"] .organization-add-button {
  color: #fff;
  background: linear-gradient(100deg, #171717, #302e28);
  border-color: #171717;
  box-shadow: 0 6px 14px rgba(25, 23, 18, .12);
}

body[data-ui-theme="black-gold"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger):hover,
body[data-ui-theme="black-gold"] button:not([class]):not([data-view]):not(.nav-group-title):hover,
body[data-ui-theme="black-gold"] .organization-add-button:hover {
  color: #171717;
  background: linear-gradient(100deg, #efd577, #cf9d29);
  border-color: #c49321;
}

body[data-ui-theme="black-gold"] .organization-add-button.work-add-button {
  color: #171717;
  background: linear-gradient(100deg, #f1d97e, #d4a531);
  border-color: #c79826;
}

body[data-ui-theme="black-gold"] .metric {
  background: linear-gradient(145deg, #fff, #fbf8ef);
  border-color: #e9e0c9;
}

body[data-ui-theme="black-gold"] .metric strong {
  color: #a87610;
}

body[data-ui-theme="black-gold"] .organization-panel-head,
body[data-ui-theme="black-gold"] .purchase-entry-card > .section-title {
  background: linear-gradient(135deg, #fff, #faf5e5);
}

body[data-ui-theme="black-gold"] .organization-summary {
  background: #faf6e9;
}

body[data-ui-theme="black-gold"] .position-architecture-card,
body[data-ui-theme="black-gold"] .work-content-card {
  background: #fffefa;
}

body[data-ui-theme="black-gold"] .theme-choice.selected {
  color: #6f5413;
  background: #fffcf3;
  border-color: #c99a28;
  box-shadow: 0 0 0 3px rgba(201, 154, 40, .12);
}

body[data-ui-theme="black-gold"] .theme-choice.selected .theme-choice-check {
  color: #171717;
  background: linear-gradient(145deg, #f1d777, #ca9723);
}

body[data-ui-theme="black-gold"] .mobile-bottom-nav {
  background: rgba(255, 255, 255, .96);
  border-top-color: #e7dfce;
}

body[data-ui-theme="black-gold"] .mobile-bottom-nav button.active {
  color: #171717;
}

body[data-ui-theme="black-gold"] .mobile-bottom-nav button.active .mobile-bottom-icon {
  color: #171717;
  background: linear-gradient(145deg, #f0d679, #d2a02b);
}

body[data-ui-theme="black-gold"] .mobile-home-welcome {
  background:
    radial-gradient(circle at 87% 18%, rgba(239, 211, 119, .42), transparent 25%),
    linear-gradient(120deg, #171717, #353127);
  box-shadow: 0 14px 28px rgba(28, 25, 19, .14);
}

body[data-ui-theme="black-gold"] .mobile-home-shortcut-icon {
  color: #171717;
  background: linear-gradient(145deg, #f1d87d, #cc9823);
}

body[data-ui-theme="black-gold"] .drawer {
  background: rgba(18, 17, 14, .38);
}

body[data-ui-theme="black-gold"] .drawer-panel {
  background: #fffefb;
  border-color: #e8dfca;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .theme-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .profile-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .profile-view > .card:not(.profile-theme-section) {
    order: 1;
  }

  .profile-view > .profile-theme-section {
    order: 2;
    margin-bottom: 0;
    padding: 14px;
  }

  .profile-theme-section .section-title {
    margin-bottom: 10px;
  }

  .profile-theme-section .section-title h2 {
    font-size: 16px;
  }

  .profile-theme-section .section-title p {
    margin-top: 2px;
    font-size: 12px;
  }

  .theme-picker {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .theme-choice {
    grid-template-columns: 58px minmax(0, 1fr) 20px;
    gap: 10px;
    min-height: 62px;
    padding: 8px 11px;
    border-radius: 12px;
  }

  .theme-choice:hover {
    transform: none;
  }

  .theme-choice.selected {
    box-shadow: 0 0 0 2px rgba(79,132,231,.10);
  }

  .theme-choice-copy {
    gap: 2px;
  }

  .theme-choice-copy strong {
    font-size: 14px;
  }

  .theme-choice-copy small {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .theme-choice-check {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .theme-preview {
    width: 58px;
    height: 40px;
    border-radius: 7px;
  }

  .theme-preview i {
    width: 13px;
  }

  .theme-preview b {
    top: 5px;
    left: 18px;
    width: 34px;
    height: 8px;
    border-radius: 3px;
  }

  .theme-preview em {
    top: 18px;
    left: 18px;
    width: 16px;
    height: 16px;
    border-radius: 3px;
  }

  .theme-preview strong {
    top: 18px;
    right: 6px;
    width: 14px;
    height: 16px;
    border-radius: 3px;
  }
}

/* Branded login experience */
html:has(.login),
body:has(.login) {
  width: 100%;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(ellipse at 50% 112%, rgba(136, 105, 232, .24) 0%, rgba(136, 105, 232, .10) 32%, transparent 62%),
    radial-gradient(circle at 8% 8%, rgba(112, 165, 255, .28), transparent 31%),
    radial-gradient(circle at 92% 14%, rgba(181, 151, 255, .18), transparent 34%),
    linear-gradient(155deg, #eaf2ff 0%, #f2f5ff 46%, #eee9ff 100%);
}

body:has(.login) #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.login {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  height: 100svh;
  height: 100dvh;
  padding: clamp(10px, 2.5dvh, 24px) clamp(12px, 3vw, 42px) max(38px, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 112%, rgba(136, 105, 232, .24) 0%, rgba(136, 105, 232, .10) 32%, transparent 62%),
    radial-gradient(circle at 8% 8%, rgba(112, 165, 255, .28), transparent 31%),
    radial-gradient(circle at 92% 14%, rgba(181, 151, 255, .18), transparent 34%),
    linear-gradient(155deg, #eaf2ff 0%, #f2f5ff 46%, #eee9ff 100%);
  background-color: #eef2ff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login::before,
.login::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(113, 145, 216, .13);
  border-radius: 50%;
  pointer-events: none;
}

.login::before {
  width: 380px;
  height: 380px;
  left: -145px;
  bottom: -175px;
}

.login::after {
  width: 300px;
  height: 300px;
  top: -120px;
  right: -72px;
}

.login-experience {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(430px, 1.16fr) minmax(380px, .84fr);
  width: min(1060px, 100%);
  height: min(610px, 100%);
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 28px;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 34px 90px rgba(51, 69, 117, .16);
  backdrop-filter: blur(18px);
}

.login-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 42px 46px 32px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 80% 13%, rgba(255,255,255,.22), transparent 25%),
    linear-gradient(145deg, #3977e5 0%, #596fe3 45%, #836de3 100%);
}

.login-visual::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -190px;
  bottom: -240px;
  border: 70px solid rgba(255,255,255,.055);
  border-radius: 50%;
}

.login-visual-brand,
.login-panel-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.login-visual-brand > span,
.login-panel-brand > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-weight: 800;
}

.login-visual-brand > span {
  color: #4975de;
  background: #fff;
  box-shadow: 0 7px 18px rgba(24, 49, 118, .18);
  overflow: hidden;
}

.login-visual-brand > span img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.login-visual-brand strong {
  font-size: 15px;
  letter-spacing: .2px;
}

.login-visual-copy {
  position: relative;
  z-index: 2;
  margin-top: 54px;
}

.login-visual-copy small {
  color: rgba(255,255,255,.76);
  font-size: 13px;
  letter-spacing: 1.2px;
}

.login-visual-copy h1 {
  margin: 15px 0 16px;
  font-size: clamp(36px, 3.5vw, 51px);
  line-height: 1.16;
  letter-spacing: -2px;
}

.login-visual-copy p {
  max-width: 430px;
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: 14px;
  line-height: 1.8;
}

.login-art {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 250px;
  margin-top: 10px;
}

.login-art-ribbon {
  position: absolute;
  width: 430px;
  max-width: 90%;
  right: -14px;
  bottom: -8px;
  filter: drop-shadow(0 24px 22px rgba(27, 35, 116, .24));
  transform: rotate(-5deg);
  animation: loginRibbonFloat 6s ease-in-out infinite;
}

.login-art-orbit {
  position: absolute;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
}

.orbit-one {
  width: 210px;
  height: 210px;
  right: 25px;
  bottom: 6px;
}

.orbit-two {
  width: 122px;
  height: 122px;
  right: 68px;
  bottom: 50px;
  border-style: dashed;
}

.login-art-spark {
  position: absolute;
  color: rgba(255,255,255,.78);
  animation: loginSpark 3.2s ease-in-out infinite;
}

.spark-one { right: 42px; top: 18px; font-size: 22px; }
.spark-two { left: 25px; bottom: 38px; font-size: 14px; animation-delay: -1.2s; }

.login-floating-card {
  position: absolute;
  z-index: 3;
  color: #263d6c;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 16px;
  box-shadow: 0 18px 35px rgba(32, 42, 105, .19);
  backdrop-filter: blur(12px);
}

.login-floating-card.primary {
  left: 6px;
  bottom: 22px;
  display: grid;
  grid-template-columns: 34px 1fr;
  width: 154px;
  padding: 13px;
}

.floating-card-icon {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: linear-gradient(145deg, #4d8cf2, #776de7);
  border-radius: 9px;
}

.login-floating-card small {
  color: #8996ad;
  font-size: 9px;
}

.login-floating-card strong {
  font-size: 13px;
}

.login-floating-card i {
  grid-column: 1 / -1;
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  background: #e6ebf4;
  border-radius: 999px;
}

.login-floating-card i b {
  display: block;
  width: 78%;
  height: 100%;
  background: linear-gradient(90deg, #4f8af0, #8974e9);
  border-radius: inherit;
}

.login-floating-card.secondary {
  right: 10px;
  top: 46px;
  display: grid;
  gap: 3px;
  width: 132px;
  padding: 12px 14px;
  transform: rotate(4deg);
}

.login-floating-card.secondary span,
.login-floating-card.secondary em {
  color: #8794aa;
  font-size: 9px;
  font-style: normal;
}

.login-floating-card.secondary strong {
  color: #547ddd;
  font-size: 22px;
}

.login-visual-footer {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.65);
  font-size: 11px;
  letter-spacing: .7px;
}

.login-visual-footer span {
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 7px;
  vertical-align: middle;
  background: rgba(255,255,255,.55);
}

.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 58px;
  background: rgba(255,255,255,.80);
}

.login-panel-brand {
  margin-bottom: 58px;
}

.login-panel-brand > span {
  color: #fff;
  background: linear-gradient(145deg, #397fe9, #706ee5);
  box-shadow: 0 8px 20px rgba(56, 105, 207, .22);
}

.login-panel-brand > div {
  display: grid;
  gap: 2px;
}

.login-panel-brand strong {
  color: #172b4d;
  font-size: 16px;
}

.login-panel-brand small {
  color: #9aa5b5;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.login-panel-heading h2 {
  margin: 0;
  color: #17233c;
  font-size: 30px;
  letter-spacing: -.8px;
}

.login-panel-heading p {
  margin: 9px 0 28px;
  color: #8b97a9;
  font-size: 13px;
}

.login-form {
  gap: 17px;
}

.login-form > label {
  color: #526077;
  font-size: 12px;
  font-weight: 600;
}

.login-input-shell {
  position: relative;
  display: block;
  margin-top: 7px;
}

.login-input-shell > svg {
  position: absolute;
  z-index: 2;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #9aa7b9;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
}

.login-input-shell input {
  height: 46px;
  padding-left: 42px;
  color: #243956;
  background: #f8faff;
  border-color: #dbe3f0;
  border-radius: 11px;
}

.login-input-shell input:focus {
  background: #fff;
  border-color: #6f9aeb;
  box-shadow: 0 0 0 4px rgba(89, 135, 227, .11);
}

.login-form .remember-login {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  width:max-content;
  gap:8px;
  margin-top: -2px;
  cursor:pointer;
}

.login-form .remember-login input { flex:0 0 16px; width:16px; height:16px; margin:0; padding:0; accent-color:#397ee9; }
.login-form .remember-login span {
  display:inline-block;
  color: #67758a;
  font-size: 12px;
  font-weight: 500;
  line-height:16px;
}

.login-form > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 47px;
  margin-top: 2px;
  border-radius: 11px;
  background: linear-gradient(100deg, #397ee9, #667de9);
  box-shadow: 0 10px 24px rgba(56, 105, 211, .22);
}

.login-form > button span {
  font-size: 18px;
  transition: transform .2s ease;
}

.login-form > button:hover span {
  transform: translateX(3px);
}

.login-panel-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 42px;
  color: #a2acba;
  font-size: 9px;
  white-space: nowrap;
}

.login-panel-footer span {
  flex: 1;
  height: 1px;
  background: #e5eaf1;
}

.login-filing {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(11px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  color: #718096;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
}

.login-filing a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}

.login-filing a:hover,
.login-filing a:focus-visible {
  color: #276fe5;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes loginRibbonFloat {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-9px); }
}

@keyframes loginSpark {
  0%, 100% { opacity: .38; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.2); }
}

@media (max-width: 900px) {
  .login-experience {
    grid-template-columns: minmax(300px, .9fr) minmax(360px, 1.1fr);
  }
  .login-visual { padding: 34px 30px 28px; }
  .login-visual-copy h1 { font-size: 38px; }
  .login-panel { padding: 45px 38px; }
}

@media (max-width: 720px) {
  .login { padding:max(8px, env(safe-area-inset-top)) 10px max(34px, env(safe-area-inset-bottom)); }
  .login-experience {
    display: block;
    width: min(440px, 100%);
    height:auto;
    max-height:100%;
    min-height: 0;
    border-radius: 22px;
  }
  .login-visual {
    min-height: clamp(112px, 18dvh, 152px);
    padding: clamp(17px, 2.8dvh, 24px) 24px;
  }
  .login-visual-copy { margin-top: clamp(12px, 2.5dvh, 23px); }
  .login-visual-copy small,
  .login-visual-copy p,
  .login-art,
  .login-visual-footer { display: none; }
  .login-visual-copy h1 {
    margin: 0;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -1px;
  }
  .login-panel {
    padding: clamp(20px, 3.5dvh, 30px) 24px clamp(18px, 3dvh, 26px);
  }
  .login-panel-brand { display: none; }
  .login-panel-heading h2 { font-size: clamp(22px, 3.2dvh, 25px); }
  .login-panel-heading p { margin:7px 0 clamp(15px, 2.7dvh, 23px); }
  .login-form { gap:clamp(11px, 2dvh, 17px); }
  .login-input-shell { margin-top:5px; }
  .login-input-shell input { height:clamp(42px, 6dvh, 46px); min-height:42px; font-size:16px; }
  .login-form > button { min-height:44px; }
  .login-panel-footer { padding-top:clamp(14px, 3dvh, 28px); }
  .login-filing { bottom:max(8px, env(safe-area-inset-bottom)); font-size:11px; line-height:16px; }
}

@media (max-height: 680px) {
  .login-visual-copy { margin-top:24px; }
  .login-visual-copy h1 { margin:10px 0 12px; font-size:clamp(30px, 5.5vh, 42px); }
  .login-visual-copy p { line-height:1.55; }
  .login-art { min-height:170px; }
  .login-panel { padding-top:30px; padding-bottom:26px; }
  .login-panel-brand { margin-bottom:28px; }
  .login-panel-heading p { margin-bottom:18px; }
  .login-form { gap:12px; }
  .login-panel-footer { padding-top:18px; }
}

@media (max-width: 720px) and (max-height: 620px) {
  .login-visual { min-height:92px; padding:14px 20px; }
  .login-visual-brand > span { width:30px; height:30px; }
  .login-visual-brand strong { font-size:13px; }
  .login-visual-copy { margin-top:8px; }
  .login-visual-copy h1 { font-size:20px; line-height:1.15; }
  .login-panel { padding:15px 20px 13px; }
  .login-panel-heading h2 { font-size:20px; }
  .login-panel-heading p { margin:4px 0 10px; font-size:11px; }
  .login-form { gap:8px; }
  .login-form > label { font-size:11px; }
  .login-input-shell { margin-top:3px; }
  .login-input-shell input { height:38px; min-height:38px; font-size:16px; }
  .login-form > button { min-height:39px; }
  .login-panel-footer { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .login-art-ribbon,
  .login-art-spark { animation: none; }
}

@media (max-width: 420px) {
  .side-user h2 {
    font-size: 18px;
  }

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

  .metric strong {
    font-size: 23px;
  }

  .progress-content-row,
  .admin-today-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .ring-progress {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  table {
    min-width: 520px;
  }
}

/* 手机员工账号：压缩字段高度，操作按钮固定单行。 */
@media (max-width: 820px) {
  .employee-account-table.mobile-card-table tbody {
    gap: 8px;
  }

  .employee-account-table.mobile-card-table tr {
    padding: 5px 10px;
    border-radius: 11px;
    box-shadow: 0 3px 11px rgba(22, 43, 72, .04);
  }

  .employee-account-table.mobile-card-table td {
    height: auto;
    min-height: 0;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.25;
  }

  .employee-account-table.mobile-card-table td::before {
    font-size: 11px;
  }

  .employee-account-table .profile-head {
    min-height: 34px;
    gap: 9px;
  }

  .employee-account-table .avatar.small {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 13px;
  }

  .employee-account-table .role-chip {
    min-height: 22px;
    padding: 2px 8px;
    font-size: 11px;
  }

  .employee-account-table .employee-row-actions {
    display: grid;
    width: 100%;
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    flex-wrap: nowrap;
  }

  .employee-account-table .employee-row-actions > button,
  .employee-account-table .employee-row-actions > .employee-state-control,
  .employee-account-table .employee-row-actions > [data-edit-user],
  .employee-account-table .employee-row-actions > [data-delete-user] {
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    padding: 0 5px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .employee-account-table + .table-pagination {
    margin-top: 8px;
  }
}

/* 手机公告卡片：标题、操作、已读和回复统一紧凑排列。 */
@media (max-width: 820px) {
  .announcement-page {
    padding: 10px;
  }

  .announcement-page > .section-title {
    gap: 5px;
    margin-bottom: 10px;
  }

  .announcement-page > .section-title h2 {
    font-size: 19px;
  }

  .announcement-page > .section-title p {
    font-size: 12px;
    line-height: 1.4;
  }

  .announcement-page #newAnnouncement {
    min-height: 36px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .announcement-page .announcement-list {
    gap: 8px;
  }

  .announcement-page .announcement-card {
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
  }

  .announcement-page .announcement-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title actions"
      "author author";
    align-items: start;
    gap: 5px 8px;
  }

  .announcement-page .announcement-head > div:first-child {
    display: contents;
  }

  .announcement-page .announcement-title-row {
    grid-area: title;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    margin: 0;
  }

  .announcement-page .announcement-head h3 {
    font-size: 17px;
    line-height: 1.3;
  }

  .announcement-page .announcement-detail-title {
    font-size: 21px;
    line-height: 1.4;
  }

  .announcement-page .announcement-detail-content {
    font-size: 16px;
    line-height: 1.7;
  }

  .announcement-page .pin-badge,
  .announcement-page .announcement-new-badge {
    height: 21px;
    padding: 0 6px;
    font-size: 10px;
  }

  .announcement-page .announcement-head .actions {
    grid-area: actions;
    display: grid;
    width: auto;
    grid-template-columns: repeat(2, 54px);
    gap: 5px;
  }

  .announcement-page .announcement-head .actions button {
    width: 54px;
    min-height: 30px;
    padding: 4px 6px;
    border-radius: 7px;
    font-size: 12px;
    white-space: nowrap;
  }

  .announcement-page .announcement-author {
    grid-area: author;
    flex-wrap: nowrap;
    gap: 5px;
    min-width: 0;
    font-size: 11px;
    line-height: 1.2;
  }

  .announcement-page .announcement-author .avatar.tiny {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex-basis: 22px;
  }

  .announcement-page .announcement-author time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .announcement-page .announcement-author time::before {
    margin-right: 5px;
  }

  .announcement-page .mention-strip {
    gap: 5px;
  }

  .announcement-page .mention-strip span {
    padding: 3px 7px;
    font-size: 11px;
  }

  .announcement-page .announcement-content {
    min-height: 0;
    padding: 8px 10px;
    border-left-width: 3px;
    font-size: 13px;
    line-height: 1.5;
  }

  .announcement-page .rich-content p,
  .announcement-page .rich-content div {
    margin-bottom: 3px;
  }

  .announcement-page .announcement-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .announcement-page .announcement-images img {
    height: 96px;
  }

  .announcement-page .read-receipts {
    margin: 0;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 12px;
  }

  .announcement-page .read-receipt-grid {
    gap: 8px;
    margin-top: 8px;
  }

  .announcement-page .receipt-user {
    gap: 7px;
    padding: 5px 0;
    font-size: 11px;
  }

  .announcement-page .comments {
    gap: 6px;
    padding-top: 7px;
  }

  .announcement-page .comments h4 {
    font-size: 13px;
  }

  .announcement-page .comments .empty.compact {
    display: none;
  }

  .announcement-page .comment-item {
    gap: 3px;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.4;
  }

  .announcement-page .comment-meta {
    gap: 6px;
    font-size: 10px;
  }

  .announcement-page .comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    align-items: stretch;
    gap: 6px;
  }

  .announcement-page .comment-form textarea {
    height: 36px;
    min-height: 36px;
    max-height: 72px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.25;
  }

  .announcement-page .comment-form button {
    min-height: 36px;
    padding: 6px;
    border-radius: 8px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* 2026 ERP visual refresh */
body {
  font-family: Inter, "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shell { grid-template-columns: 252px minmax(0, 1fr); }
.side {
  padding: 22px 14px 28px;
  background:
    radial-gradient(circle at 20% 0%, rgba(60, 116, 255, .18), transparent 27%),
    linear-gradient(180deg, #131e32 0%, #101a2c 100%);
  border-right: 1px solid rgba(255, 255, 255, .06);
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .3) transparent;
}

.side-user { gap: 12px; padding: 2px 5px 18px; }
.side-user h2 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.side small { color: #aab8cf; font-size: 13px; }
.side-user .avatar { width: 42px; height: 42px; box-shadow: 0 0 0 4px rgba(71, 126, 255, .12); }

.nav { gap: 8px; margin-top: 5px; }
.nav-group { gap: 3px; }
.nav .nav-group-title {
  min-height: 38px;
  padding: 9px 11px 7px;
  color: #8091ad;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  border-radius: 9px;
  transition: color .2s ease, background .2s ease;
}
.nav .nav-group-title:hover { color: #cbd6e8; background: rgba(255, 255, 255, .035); }
.nav-chevron { display: grid; width: 20px; height: 20px; place-items: center; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.nav-chevron svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-group:not(.open) .nav-chevron { transform: rotate(-90deg); }
.nav-group-items {
  display: grid;
  gap: 4px;
  max-height: 1000px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: max-height .32s cubic-bezier(.2,.8,.2,1), opacity .22s ease, transform .28s ease;
}
.nav-group:not(.open) .nav-group-items {
  display: grid;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-7px);
}
.nav button[data-view] {
  position: relative;
  min-height: 45px;
  padding: 9px 11px;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #c6d2e6;
  font-size: 15px;
  font-weight: 500;
  transition: color .2s ease, background .22s ease, border-color .22s ease, transform .2s ease, box-shadow .22s ease;
}
.nav button[data-view]:hover {
  color: #fff;
  background: rgba(91, 132, 214, .12);
  transform: translateX(3px);
}
.nav button[data-view].active {
  color: #fff;
  background: linear-gradient(100deg, rgba(50, 105, 213, .42), rgba(74, 110, 176, .19));
  border-color: rgba(125, 164, 239, .16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 7px 18px rgba(0,0,0,.13);
  font-weight: 700;
}
.nav button[data-view].active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 11px;
  width: 3px;
  height: 23px;
  border-radius: 0 4px 4px 0;
  background: #68a0ff;
  box-shadow: 0 0 12px rgba(93, 155, 255, .72);
}
.nav-icon {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-radius: 8px;
  color: #9fb5da;
  background: rgba(138, 164, 207, .1);
  transition: color .2s ease, background .2s ease, transform .22s ease;
}
.nav-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav button:hover .nav-icon { color: #d9e7ff; background: rgba(108, 153, 236, .16); transform: scale(1.06); }
.nav button.active .nav-icon { color: #fff; background: linear-gradient(145deg, #397ee8, #2862c0); box-shadow: 0 5px 12px rgba(25, 91, 195, .35); }
.nav-badge { min-width: 21px; height: 21px; padding: 0 6px; background: linear-gradient(145deg, #ff5757, #e93636); box-shadow: 0 4px 9px rgba(239, 68, 68, .28); }

.topbar h1 { font-size: 27px; letter-spacing: -.5px; }
.topbar p { font-size: 14px; }
.main { padding: 27px 30px; }
#view { animation: viewEnter .34s cubic-bezier(.2,.8,.2,1); }
.view-loading-card {
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px;
  color: #10213b;
}
.view-loading-card p {
  margin: 6px 0 0;
  color: #5f7190;
  font-size: 14px;
}
.view-loading-spinner {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 3px solid #e8eef8;
  border-top-color: #1f6fe5;
  animation: viewLoadingSpin .72s linear infinite;
  flex: 0 0 auto;
}
.card { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.card:hover { border-color: #d3ddeb; box-shadow: 0 13px 34px rgba(25, 42, 74, .1); }
button { transition: transform .18s ease, background .2s ease, box-shadow .2s ease; }
button:not(.nav-group-title):active { transform: translateY(1px) scale(.985); }

@keyframes viewEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes viewLoadingSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .side { padding: 11px 12px 13px; }
  .main { grid-column: 1; }
  .side-user { padding-bottom: 8px; }
  .nav { display: flex; overflow-x: auto; gap: 7px; padding-bottom: 3px; }
  .nav-group { display: contents; }
  .nav .nav-group-title { display: none; }
  .nav-group-items, .nav-group:not(.open) .nav-group-items { display: flex; max-height: none; opacity: 1; overflow: visible; transform: none; }
  .nav button[data-view] { min-height: 42px; width: auto; flex: 0 0 auto; font-size: 14px; }
  .main { padding: 17px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #view, .nav-group-items, .nav button, .nav-icon, .nav-chevron { animation: none; transition: none; }
}
.position-section { margin-bottom: 18px; }
.inventory-number-link,
button.inventory-number-link {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  max-width:100%;
  min-height:24px;
  padding:2px 6px;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:#1768d5;
  font-weight:800;
  white-space:nowrap;
  box-shadow:none;
}
.inventory-number-link:hover,
button.inventory-number-link:hover,
.inventory-number-link:focus-visible,
button.inventory-number-link:focus-visible {
  color:#0c4da8;
  background:#edf5ff;
  border-color:#d7e7ff;
  box-shadow:none;
  text-decoration:none;
  outline:none;
}
.money-column { min-width:92px; white-space:nowrap; }
.sales-history-table .money-column { min-width:104px; }
.drawer:has(.inventory-history-panel) { align-items:flex-start; overflow-y:auto; padding:clamp(12px,4vh,36px) 14px; }
.modal:has(.inventory-history-panel) {
  width:min(720px,calc(100vw - 28px));
  max-width:none;
  max-height:none;
  margin:auto;
  overflow:visible;
  border-radius:10px;
}
.inventory-history-panel { box-sizing:border-box; width:100%; min-width:0; }
.inventory-history-panel .drawer-head { gap:10px; padding:13px 16px 12px; }
.inventory-history-panel .drawer-head h2 { font-size:16px; line-height:1.3; }
.inventory-history-panel .drawer-head p { margin:4px 0 0; color:#65748c; font-size:12px; line-height:1.35; }
.inventory-history-panel .drawer-head [data-close] { flex:0 0 28px; min-width:28px; min-height:28px; padding:4px; }
.history-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:0 0 12px; padding:0 16px; }
.history-summary span { display:flex; min-width:0; flex-direction:column; gap:2px; padding:8px 10px; background:#f5f8fc; border:1px solid #e2e9f3; border-radius:8px; color:#71809a; font-size:11px; line-height:1.25; }
.history-summary b { overflow:hidden; color:#14233c; font-size:13px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.inventory-timeline { position:relative; margin:0 16px 14px; padding-left:14px; }
.inventory-timeline::before { content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:#dce6f4; }
.inventory-timeline article { position:relative; display:grid; grid-template-columns:11px 1fr; gap:8px; margin-bottom:9px; }
.inventory-timeline article:last-child { margin-bottom:0; }
.inventory-timeline article>i { position:relative; z-index:1; width:8px; height:8px; margin-top:7px; border:2px solid #fff; border-radius:50%; background:#2f76df; box-shadow:0 0 0 1px #9fc1f4; }
.inventory-timeline article>div { min-width:0; padding:9px 11px; border:1px solid #dfe7f2; border-radius:9px; background:#fff; }
.inventory-timeline header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.inventory-timeline header strong { font-size:13px; line-height:1.3; }
.inventory-timeline time,.inventory-timeline p { color:#7b899e; font-size:11px; line-height:1.35; }
.inventory-timeline p { margin:3px 0; }
.inventory-timeline ul { display:grid; gap:2px; margin:4px 0 0; padding:0; list-style:none; }
.inventory-timeline li { display:grid; grid-template-columns:76px minmax(0,1fr); gap:7px; font-size:12px; line-height:1.35; }
.inventory-timeline li b { color:#66758c; }
@media(max-width:700px){
  .drawer:has(.inventory-history-panel){padding:8px}
  .modal:has(.inventory-history-panel){width:100%;max-height:calc(100dvh - 16px);overflow:auto}
  .inventory-history-panel .drawer-head{padding:11px 12px 10px}
  .inventory-history-panel .drawer-head h2{font-size:15px}
  .history-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:10px;padding:0 12px}
  .history-summary span:nth-child(3){grid-column:1/-1}
  .history-summary span{padding:7px 9px}
  .inventory-timeline{margin:0 12px 12px;padding-left:12px}
  .inventory-timeline header{align-items:flex-start;flex-direction:column;gap:2px}
  .inventory-timeline article{grid-template-columns:9px 1fr;gap:6px}
  .inventory-timeline article>div{padding:8px 9px}
  .inventory-timeline li{grid-template-columns:68px minmax(0,1fr);gap:5px}
}

/* Mobile application shell: compact home navigation, off-canvas menu and card tables. */
.mobile-toolbar,
.mobile-nav-shade,
.mobile-bottom-nav { display:none; }

@media (max-width: 820px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body {
    min-height:100svh;
    min-height:100dvh;
    padding-right:env(safe-area-inset-right);
    padding-left:env(safe-area-inset-left);
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { box-sizing:border-box; max-width:100%; font-size:16px; }
  .card,
  .drawer-panel,
  .modal { max-width:100%; }
  body.mobile-home-page { height:100dvh; padding-bottom:0; overflow:hidden; }
  body.mobile-home-page .shell.mobile-home-active { height:100dvh; min-height:0; overflow:hidden; }
  body.mobile-home-page .mobile-home-active .main {
    height:calc(100dvh - 66px - env(safe-area-inset-bottom));
    box-sizing:border-box;
    padding-bottom:10px;
    overflow:hidden;
  }
  body.mobile-home-page .mobile-home-active #view { height:100%; overflow:hidden; }
  body.mobile-home-page.mobile-admin-home .mobile-home-active #view {
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:none;
  }
  body.mobile-home-page.mobile-admin-home .mobile-home-active #view::-webkit-scrollbar { display:none; }
  body.mobile-messages-page { height:100svh; height:100dvh; padding-bottom:0; overflow:hidden; overscroll-behavior:none; }
  body.mobile-messages-page .shell {
    height:calc(100svh - 64px - env(safe-area-inset-bottom));
    height:calc(100dvh - 64px - env(safe-area-inset-bottom));
    min-height:0;
    overflow:hidden;
  }
  body.mobile-messages-page .main {
    display:flex;
    height:100%;
    min-height:0;
    box-sizing:border-box;
    flex-direction:column;
    padding:8px 8px 6px;
    overflow:hidden;
  }
  body.mobile-messages-page .topbar { display:none; }
  body.mobile-messages-page #view { flex:1 1 auto; min-height:0; overflow:hidden; }
  body.mobile-messages-page .message-workspace { width:100%; height:100%; min-height:0; border-radius:16px; }
  body.mobile-messages-page .message-conversation { min-height:0; }
  body.mobile-messages-page .message-thread { min-height:0; max-height:none; overflow-y:auto; }
  body.mobile-messages-page .message-form { margin-top:8px; }
  body.mobile-messages-page .message-form textarea { min-height:72px; max-height:96px; }
  body.mobile-submit-page {
    height:100svh;
    height:100dvh;
    padding-bottom:0;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body.mobile-submit-page .shell {
    height:calc(100svh - 64px - env(safe-area-inset-bottom));
    height:calc(100dvh - 64px - env(safe-area-inset-bottom));
    min-height:0;
    overflow:hidden;
  }
  body.mobile-submit-page .main {
    display:flex;
    height:100%;
    min-height:0;
    box-sizing:border-box;
    flex-direction:column;
    padding:9px 10px 6px;
    overflow:hidden;
  }
  body.mobile-submit-page .topbar {
    flex:0 0 auto;
    margin:0 0 7px;
    padding:0 4px;
  }
  body.mobile-submit-page .topbar h1 { font-size:20px; line-height:1.25; }
  body.mobile-submit-page .topbar p { margin-top:2px; font-size:12px; line-height:1.35; }
  body.mobile-submit-page #view {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    scrollbar-width:none;
  }
  body.mobile-submit-page #view::-webkit-scrollbar { display:none; }
  body.mobile-submit-page .records-card {
    margin:0;
    padding:10px;
    border-radius:16px;
  }
  body.mobile-submit-page #submitForm { gap:7px; }
  body.mobile-submit-page #submitForm > .grid.cols-2:first-child {
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:8px;
  }
  body.mobile-submit-page #submitForm .grid { gap:7px; }
  body.mobile-submit-page #submitForm label { gap:4px; font-size:12px; }
  body.mobile-submit-page #submitForm input:not([type="file"]),
  body.mobile-submit-page #submitForm select {
    height:38px;
    min-height:38px;
    padding:7px 10px;
  }
  body.mobile-submit-page #submitNoteLabel textarea {
    min-height:56px;
    max-height:56px;
    padding:8px 10px;
    line-height:1.35;
    resize:none;
  }
  body.mobile-submit-page .submit-proof-picker {
    display:flex;
    min-width:0;
    align-items:center;
    gap:9px;
  }
  body.mobile-submit-page #photoLabel input[type="file"] {
    display:none;
  }
  body.mobile-submit-page .submit-proof-picker > button {
    display:inline-flex;
    width:auto;
    min-width:108px;
    height:38px;
    min-height:38px;
    margin:0;
    padding:7px 16px;
    align-items:center;
    justify-content:center;
    border-radius:9px;
  }
  body.mobile-submit-page .submit-proof-status {
    display:block;
    min-width:0;
    overflow:hidden;
    color:var(--muted);
    font-size:12px;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.mobile-submit-page .submit-proof-status.is-empty {
    display:none;
  }
  body.mobile-submit-page .estimate-box {
    grid-template-columns:auto auto minmax(0,1fr);
    align-items:center;
    gap:8px;
    min-height:52px;
    padding:8px 11px;
    border-radius:11px;
  }
  body.mobile-submit-page .estimate-box strong { font-size:20px; white-space:nowrap; }
  body.mobile-submit-page .estimate-box .hint {
    overflow:hidden;
    font-size:11px;
    line-height:1.35;
    text-overflow:ellipsis;
  }
  body.mobile-submit-page #ruleHint { display:none; }
  body.mobile-submit-page #submitForm > button[type="submit"] {
    min-height:40px;
    padding:8px 12px;
  }
  body.mobile-submit-page .image-preview { flex-wrap:nowrap; gap:6px; overflow-x:auto; }
  body.mobile-submit-page .image-preview figure { width:48px; flex:0 0 48px; }
  body.mobile-submit-page .image-preview img { width:48px; height:48px; }
  body.mobile-submit-page .image-preview figcaption { display:none; }
  .table-pagination { align-items:flex-start; flex-direction:column; }
  .table-pagination-actions { width:100%; justify-content:space-between; }
  body.mobile-nav-open { overflow:hidden; }
  .shell { display:block; min-width:0; }
  body { padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
  .main { width:100%; min-width:0; padding:14px 12px 24px; }
  .mobile-home-active .topbar { display:none; }
  .mobile-bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:80; display:grid; grid-template-columns:repeat(var(--mobile-nav-count,5),minmax(0,1fr)); height:calc(64px + env(safe-area-inset-bottom)); padding:4px 6px env(safe-area-inset-bottom); border-top:1px solid rgba(194,207,225,.9); background:rgba(255,255,255,.96); box-shadow:0 -8px 24px rgba(28,53,88,.08); backdrop-filter:blur(18px); }
  .mobile-bottom-nav button { position:relative; display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:4px 2px; border:0; border-radius:0; color:#8c96a6; background:transparent; box-shadow:none; }
  .mobile-bottom-nav button:hover { color:#677286; background:transparent; transform:none; }
  .mobile-bottom-nav .mobile-tab-icon { display:grid; width:26px; height:26px; place-items:center; }
  .mobile-bottom-nav button svg { width:23px; height:23px; overflow:visible; }
  .mobile-bottom-nav button svg.outline { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-bottom-nav button svg.solid { fill:currentColor; stroke:none; }
  .mobile-bottom-nav button b { font-size:11px; font-weight:600; }
  .mobile-bottom-nav button.active { color:#246dde; background:transparent; }
  .mobile-bottom-nav button.active .mobile-tab-icon { transform:translateY(-1px); }
  .mobile-bottom-nav .nav-badge { position:absolute; top:1px; right:calc(50% - 23px); min-width:16px; height:16px; padding:0 4px; font-size:9px; }
  .mobile-nav-shade { position:fixed; inset:0; z-index:48; background:rgba(7,18,34,.48); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  body.mobile-nav-open .mobile-nav-shade { display:block; opacity:1; pointer-events:auto; }
  .side { position:fixed; inset:0 auto 0 0; z-index:49; display:flex; width:min(84vw,320px); height:100dvh; padding:16px 14px; overflow-y:auto; transform:translateX(-105%); transition:transform .22s ease; box-shadow:18px 0 40px rgba(4,15,32,.24); }
  body.mobile-nav-open .side { transform:translateX(0); }
  .side-user { position:sticky; top:0; z-index:2; padding:5px 2px 14px; background:linear-gradient(180deg,#13233d 82%,rgba(19,35,61,0)); }
  .nav { display:grid; grid-template-columns:1fr; width:100%; overflow:visible; gap:8px; margin-top:6px; padding:0; }
  .nav-group { display:grid; gap:5px; }
  .nav .nav-group-title { display:flex; min-height:38px; }
  .nav-group-items, .nav-group:not(.open) .nav-group-items { display:grid; max-height:none; opacity:1; overflow:visible; transform:none; }
  .nav-group:not(.open) .nav-group-items { display:none; }
  .nav button[data-view] { width:100%; min-height:44px; flex:initial; font-size:15px; }
  .nav-label { overflow:visible; white-space:normal; }
  .topbar { margin-bottom:14px; }
  .topbar h1 { font-size:23px; }
  .topbar p { font-size:13px; }
  .card, .purchase-order-card, .manual-entry-panel, .purchase-machine-card { min-width:0; max-width:100%; }
  .purchase-order-grid, .manual-entry-panel, .machine-picker-grid, .purchase-order-grid { grid-template-columns:1fr; }
  .manual-entry-panel { align-items:stretch; }
  .manual-entry-panel > button { width:100%; }
  .machine-picker, .machine-detail { width:calc(100vw - 20px); max-width:calc(100vw - 20px); padding:14px; }
  .category-tabs { scrollbar-width:none; }
  .category-tabs::-webkit-scrollbar { display:none; }
  input, select, textarea { min-width:0; max-width:100%; }

  .mobile-home-welcome { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:3px; margin-bottom:8px; padding:12px 15px; border-radius:14px; color:#fff; background:linear-gradient(135deg,#397ce7,#686ee5); box-shadow:0 10px 22px rgba(57,108,220,.16); }
  .mobile-home-welcome::after { content:""; position:absolute; width:150px; height:150px; right:-52px; top:-72px; border:28px solid rgba(255,255,255,.09); border-radius:50%; }
  .mobile-home-welcome span { position:relative; z-index:1; color:rgba(255,255,255,.82); font-size:12px; }
  .mobile-home-welcome strong { position:relative; z-index:1; font-size:20px; line-height:1.25; }
  .mobile-inventory-search { display:flex; align-items:center; gap:7px; margin:0 0 8px; padding:3px 5px 3px 11px; border:1px solid #dbe5f2; border-radius:12px; background:#fff; box-shadow:0 6px 16px rgba(31,55,87,.06); }
  .mobile-inventory-search .mobile-search-icon { display:grid; color:#8a98ab; place-items:center; }
  .mobile-inventory-search .mobile-search-icon svg { width:19px; height:19px; }
  .mobile-inventory-search input { flex:1; min-width:0; height:36px; padding:0; border:0; outline:0; background:transparent; font-size:13px; }
  .mobile-inventory-search button { display:grid; width:36px; height:36px; flex:0 0 36px; padding:0; border:0; border-radius:9px; color:#fff; background:#276fe2; box-shadow:none; place-items:center; }
  .mobile-inventory-search button svg { width:18px; height:18px; }
  .mobile-inventory-results { display:grid; gap:10px; margin:-6px 0 18px; }
  .mobile-search-hint,.mobile-search-empty { padding:13px 14px; border-radius:12px; color:#6d7b90; background:#f2f6fb; text-align:center; font-size:13px; }
  .mobile-inventory-result-card { position:relative; display:flex; width:100%; flex-direction:column; align-items:flex-start; gap:5px; padding:15px 16px; border:1px solid #dce6f3; border-radius:16px; color:#172b49; background:#fff; box-shadow:0 8px 20px rgba(31,55,87,.06); text-align:left; }
  .mobile-inventory-result-card strong { padding-right:54px; font-size:15px; }
  .mobile-inventory-result-card small { color:#6d7b90; font-size:12px; }
  .mobile-result-status { position:absolute; right:14px; top:14px; padding:3px 8px; border-radius:999px; font-size:11px; }
  .mobile-result-status.in-stock { color:#087d58; background:#e5f8f0; }
  .mobile-result-status.sold { color:#b44a4a; background:#fff0f0; }
  .mobile-result-arrow { align-self:flex-end; margin-top:2px; color:#2c70d8; font-size:12px; }
  .mobile-home-group { margin:0; padding:4px 8px 6px; border:1px solid #e0e8f2; border-radius:14px; background:#fff; box-shadow:0 7px 18px rgba(31,55,87,.05); }
  .mobile-home-group h2 { margin:0; font-size:13px; }
  .mobile-home-grouped-shortcuts { display:grid; gap:0; padding:4px 8px 6px; }
  .mobile-home-shortcut-section { min-width:0; padding:7px 0 8px; border-bottom:1px solid #edf1f6; }
  .mobile-home-shortcut-section:last-child { border-bottom:0; }
  .mobile-home-shortcut-heading { display:flex; align-items:center; gap:6px; margin:0 2px 5px; }
  .mobile-home-shortcut-heading h2 { flex:1; margin:0; color:#253a56; font-size:13px; line-height:20px; }
  .mobile-home-shortcut-heading small { display:grid; min-width:18px; height:18px; padding:0 5px; place-items:center; border-radius:9px; color:#6c7d94; background:#f0f4f9; font-size:10px; font-weight:700; }
  .mobile-home-shortcut-heading-icon { display:grid; width:20px; height:20px; flex:0 0 20px; place-items:center; border-radius:6px; color:#477bc4; background:#edf4fd; }
  .mobile-home-shortcut-heading-icon svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
  .mobile-home-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px 4px; }
  .mobile-home-grid button { position:relative; display:flex; min-width:0; min-height:46px; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; padding:0; border:0; border-radius:0; color:#243955; background:transparent; box-shadow:none; font-size:10.5px; line-height:1.15; }
  .mobile-home-grid button .nav-icon { display:grid; width:32px; height:32px; flex:0 0 32px; color:#fff; border-radius:10px; background:linear-gradient(145deg,#4085ee,#5d6fe3); box-shadow:0 5px 11px rgba(55,108,221,.15); place-items:center; }
  .mobile-home-grid button:nth-child(4n+2) .nav-icon { background:linear-gradient(145deg,#12b89a,#22a8bd); }
  .mobile-home-grid button:nth-child(4n+3) .nav-icon { background:linear-gradient(145deg,#f29b4b,#ee6f63); }
  .mobile-home-grid button:nth-child(4n+4) .nav-icon { background:linear-gradient(145deg,#8b72e7,#b262d5); }
  .mobile-home-grid button .nav-icon svg { width:16px; height:16px; }
  .mobile-home-grid .nav-badge { position:absolute; top:-5px; left:calc(50% + 4px); }
  .mobile-home-grouped-shortcuts.is-admin button[data-view="notifications"],
  .mobile-home-grouped-shortcuts.is-admin button[data-view="logs"],
  .mobile-home-grouped-shortcuts.is-admin button[data-view="inventoryDashboard"],
  .mobile-home-grouped-shortcuts.is-admin button[data-view="messages"] { display:none; }
  .mobile-stock-readonly { padding:14px; }
  .mobile-stock-search { margin:12px 0; }
  .mobile-stock-search input { width:100%; }
  .mobile-stock-list { display:grid; gap:10px; }
  .mobile-stock-page { display:grid; gap:13px; }
  .mobile-stock-view-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; padding:3px; border:1px solid #2e79df; border-radius:16px; background:#fff; }
  .mobile-stock-view-switch button { min-height:40px; padding:8px 12px; border:0; border-radius:12px; color:#2a67ba; background:transparent; box-shadow:none; font-size:15px; font-weight:700; }
  .mobile-stock-view-switch button.active { color:#fff; background:#2674df; box-shadow:0 5px 12px rgba(38,116,223,.2); }
  .mobile-stock-searchbar { display:flex; align-items:center; gap:9px; padding:5px 6px 5px 14px; border:1px solid #cfdbea; border-radius:17px; background:#fff; box-shadow:0 7px 20px rgba(32,61,103,.07); }
  .mobile-stock-searchbar > span { color:#708099; font-size:24px; line-height:1; transform:rotate(-18deg); }
  .mobile-stock-searchbar input { flex:1; height:42px; min-width:0; padding:0; border:0; outline:0; background:transparent; box-shadow:none; font-size:14px; }
  .mobile-stock-searchbar button { width:38px; height:38px; flex:0 0 38px; padding:0; border:0; border-radius:12px; color:#65758b; background:#eef3f9; box-shadow:none; font-size:20px; }
  .mobile-stock-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .mobile-stock-filters label { display:grid; gap:4px; min-width:0; color:#79879a; font-size:11px; }
  .mobile-stock-filters select { width:100%; height:36px; padding:0 23px 0 9px; border:1px solid #dce5f0; border-radius:10px; background:#fff; font-size:12px; }
  .mobile-stock-filter-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .mobile-stock-filter-toolbar[hidden] { display:none; }
  .mobile-stock-filter-toolbar button { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:5px; min-height:38px; padding:8px 11px; border:1px solid #d9e3ef; border-radius:11px; color:#53657c; background:#fff; box-shadow:none; font-size:13px; text-align:left; }
  .mobile-stock-filter-toolbar button.active { color:#216fd1; border-color:#9fc3f3; background:#f0f7ff; }
  .mobile-stock-filter-toolbar small { overflow:hidden; color:#2775d7; font-size:10px; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-stock-filter-toolbar b { color:#8794a6; font-size:10px; }
  .mobile-stock-model-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .mobile-stock-model-filters[hidden] { display:none; }
  .mobile-stock-model-filters label { display:grid; gap:4px; min-width:0; color:#78869a; font-size:10px; }
  .mobile-stock-model-filters select { width:100%; height:38px; padding:0 27px 0 10px; border:1px solid #d8e2ee; border-radius:10px; background:#fff; font-size:13px; }
  .mobile-stock-filter-overlay { position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; padding:12px; background:rgba(15,27,44,.44); }
  .mobile-stock-filter-overlay[hidden] { display:none; }
  .mobile-stock-filter-sheet { width:min(100%,480px); max-height:min(76dvh,680px); overflow:auto; border-radius:19px; background:#fff; box-shadow:0 22px 50px rgba(15,31,54,.22); }
  .mobile-stock-filter-sheet > header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px 13px; border-bottom:1px solid #e8edf4; background:#fff; }
  .mobile-stock-filter-sheet > header h3 { margin:0; color:#223650; font-size:17px; }
  .mobile-stock-filter-sheet > header p { margin:3px 0 0; color:#8793a5; font-size:11px; }
  .mobile-stock-filter-sheet > header > button { width:32px; height:32px; flex:0 0 32px; padding:0; border:0; border-radius:10px; color:#63748b; background:#eef3f8; box-shadow:none; font-size:20px; }
  .mobile-stock-sort-options { display:grid; padding:7px 12px 14px; }
  .mobile-stock-sort-options label { display:flex; align-items:center; gap:11px; min-height:45px; padding:0 6px; border-bottom:1px solid #edf1f5; color:#30435d; font-size:14px; }
  .mobile-stock-sort-options label:last-child { border-bottom:0; }
  .mobile-stock-sort-options input { width:18px; height:18px; margin:0; accent-color:#2674df; }
  .mobile-stock-more-sheet form { display:grid; gap:14px; padding:14px 16px 16px; }
  .mobile-stock-more-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .mobile-stock-more-grid label { display:grid; gap:5px; min-width:0; color:#68788e; font-size:11px; }
  .mobile-stock-more-grid label:first-child,
  .mobile-stock-more-grid label:nth-child(2),
  .mobile-stock-more-grid label:last-child { grid-column:auto; }
  .mobile-stock-more-grid select { width:100%; height:40px; padding:0 28px 0 10px; border:1px solid #dce5ef; border-radius:10px; background:#f9fbfd; font-size:13px; }
  .mobile-stock-more-sheet footer { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:2px; }
  .mobile-stock-more-sheet footer button { min-height:42px; }
  .mobile-stock-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid #e0e7f1; border-radius:15px; background:#fff; box-shadow:0 8px 20px rgba(31,55,87,.05); }
  .mobile-stock-metrics > div { display:flex; min-width:0; flex-direction:column; align-items:center; gap:3px; padding:13px 5px; border-right:1px solid #edf1f6; text-align:center; }
  .mobile-stock-metrics > div:last-child { border-right:0; }
  .mobile-stock-metrics strong { max-width:100%; overflow:hidden; color:#2171c7; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-stock-metrics span { color:#68778d; font-size:11px; }
  .mobile-stock-result-note { padding:0 3px; color:#6f7f94; font-size:12px; }
  .mobile-stock-cards { display:grid; gap:13px; }
  .mobile-stock-cards.is-model-view { gap:10px; }
  .mobile-stock-model-card { display:grid; width:100%; gap:10px; padding:15px; border:1px solid #dfe7f1; border-radius:17px; color:inherit; background:#fff; box-shadow:0 9px 24px rgba(29,54,88,.07); text-align:left; }
  .mobile-stock-model-card > header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; }
  .mobile-stock-model-card h3 { overflow:hidden; margin:0; color:#172b48; font-size:17px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-stock-model-card > header strong { color:#2374c8; font-size:16px; white-space:nowrap; }
  .mobile-stock-model-category { width:max-content; padding:3px 8px; border-radius:999px; color:#3974ad; background:#edf7ff; font-size:11px; }
  .mobile-stock-model-prices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .mobile-stock-model-prices.is-three,
  .mobile-stock-model-detail-summary.is-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mobile-stock-model-prices > span { display:grid; gap:3px; min-width:0; padding:10px 11px; border-radius:10px; background:#f6f8fb; }
  .mobile-stock-model-prices small { color:#758398; font-size:11px; }
  .mobile-stock-model-prices b { overflow:hidden; color:#172b48; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-stock-model-card > em { color:#2873cd; font-size:11px; font-style:normal; text-align:right; }
  .mobile-stock-model-detail { display:grid; min-height:0; }
  .mobile-stock-model-detail-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:12px 14px; border-bottom:1px solid #e5ebf3; background:#f7faff; }
  .mobile-stock-model-detail-summary span { display:grid; gap:3px; padding:9px 10px; border-radius:10px; background:#fff; }
  .mobile-stock-model-detail-summary small { color:#7a8798; font-size:11px; }
  .mobile-stock-model-detail-summary b { color:#172b48; font-size:15px; }
  .mobile-stock-model-detail-list { display:grid; gap:10px; max-height:68dvh; padding:12px; overflow-y:auto; background:#f4f7fb; }
  .mobile-stock-device-card { overflow:hidden; border:1px solid #dfe7f1; border-radius:17px; background:#fff; box-shadow:0 9px 24px rgba(29,54,88,.07); }
  .mobile-stock-device-card > header { display:grid; grid-template-columns:auto 1fr 1fr; align-items:center; gap:8px; padding:9px 12px; color:#55708f; background:#edf7ff; font-size:11px; }
  .mobile-stock-device-card.is-employee > header { display:flex; justify-content:flex-start; gap:7px; padding:7px 12px; }
  .mobile-stock-device-card.is-employee > header .mobile-stock-category { color:#3974ad; font-weight:700; text-align:left; }
  .mobile-stock-device-card > header span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-stock-device-card > header span:last-child { text-align:right; }
  .mobile-stock-status { color:#1677bd; font-weight:700; }
  .mobile-stock-card-body { display:grid; gap:7px; padding:12px 14px 13px; }
  .mobile-stock-card-body h3 { margin:0; color:#172b48; font-size:19px; line-height:1.25; }
  .mobile-stock-tags { display:flex; flex-wrap:wrap; gap:6px; }
  .mobile-stock-tags span { padding:4px 7px; border-radius:6px; color:#3974ad; background:#eef6ff; font-size:11px; }
  .mobile-stock-tags span.age { color:#d16464; background:#fff1f1; }
  .mobile-stock-specs { margin:0; color:#42546b; font-size:14px; line-height:1.55; }
  .mobile-stock-imei { display:flex; align-items:center; min-width:0; color:#33465f; font-size:13px; }
  .mobile-stock-imei b { flex:0 0 auto; }
  .mobile-stock-imei span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-stock-imei button {
    width:auto;
    height:20px;
    min-height:20px;
    flex:0 0 auto;
    margin-left:5px;
    padding:0 5px;
    border:1px solid #c9d9ec;
    border-radius:4px;
    color:#2469aa;
    background:transparent;
    box-shadow:none;
    font-size:10px;
    line-height:18px;
    font-weight:600;
  }
  .mobile-stock-device-card.is-employee .mobile-stock-card-body { gap:6px; padding:10px 13px 11px; }
  .mobile-stock-device-card.is-employee .mobile-stock-card-body h3 { font-size:18px; }
  .mobile-stock-title-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px; min-width:0; }
  .mobile-stock-title-row h3 { min-width:0; overflow-wrap:anywhere; }
  .mobile-stock-title-copy { display:grid; min-width:0; gap:3px; }
  .mobile-stock-device-card.is-admin .mobile-stock-card-body { gap:7px; padding:10px 13px 11px; }
  .mobile-stock-device-card.is-admin .mobile-stock-title-copy { gap:5px; }
  .mobile-stock-admin-prices { display:grid; min-width:72px; align-content:start; gap:5px; padding-top:1px; white-space:nowrap; }
  .mobile-stock-admin-prices span { display:grid; justify-items:end; gap:0; }
  .mobile-stock-admin-prices small { color:#7b899c; font-size:9px; line-height:1.1; }
  .mobile-stock-admin-prices b { color:#1b70c9; font-size:14px; line-height:1.15; }
  .mobile-stock-admin-prices .cost b { color:#df5656; }
  .mobile-stock-device-card.is-admin .mobile-stock-tags { gap:5px; }
  .mobile-stock-device-card.is-admin .mobile-stock-tags span { padding:3px 6px; }
  .mobile-stock-device-card.is-admin .mobile-stock-specs { line-height:1.35; }
  .mobile-stock-retail-corner { display:grid; min-width:76px; justify-items:end; gap:1px; padding-top:1px; white-space:nowrap; }
  .mobile-stock-retail-corner small { color:#7b899c; font-size:10px; line-height:1.2; }
  .mobile-stock-retail-corner b { color:#1b70c9; font-size:18px; line-height:1.2; }
  .mobile-stock-device-card.is-employee .mobile-stock-tags:empty { display:none; }
  .mobile-stock-device-card.is-employee .mobile-stock-specs { line-height:1.35; }
  .mobile-stock-device-card.is-employee .mobile-stock-prices { padding:7px 0; }
  .mobile-stock-device-card.is-employee .mobile-stock-description { padding-top:1px; line-height:1.45; }
  .business-toolbar,
  .business-board { padding:14px; border-radius:18px; box-shadow:none; }
  .business-toolbar .section-title h2,
  .business-board .section-title h2 { display:flex; align-items:center; gap:8px; font-size:19px; }
  .business-toolbar .section-title h2::before,
  .business-board .section-title h2::before {
    content:"";
    display:inline-block;
    width:28px;
    height:28px;
    flex:0 0 28px;
    border-radius:50%;
    background:#2e78e6;
    box-shadow:inset 0 0 0 8px #eaf3ff;
  }
  .business-board.is-inventory .section-title h2::before { background:#ff5d61; box-shadow:inset 0 0 0 8px #fff0f0; }
  .business-board.is-sales .section-title h2::before { background:#22a86f; box-shadow:inset 0 0 0 8px #e9faf2; }
  .business-toolbar .section-title p,
  .business-board .section-title p { display:none; }
  .business-toolbar { gap:8px; padding:10px 12px; border-radius:14px; }
  .business-toolbar .section-title h2 { font-size:18px; }
  .business-toolbar .section-title h2::before { width:24px; height:24px; flex-basis:24px; box-shadow:inset 0 0 0 7px #eaf3ff; }
  .business-control-panel { display:block; padding:0; border:0; background:transparent; }
  .business-filter { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1.2fr) 42px; align-items:center; gap:5px; padding:0; border:0; background:transparent; }
  .business-shortcuts { width:100%; min-width:0; grid-template-columns:repeat(5,minmax(0,1fr)); border-radius:8px; }
  .business-shortcuts button { min-width:0; min-height:34px; padding:0 1px; font-size:10px; white-space:nowrap; }
  .business-shortcuts button.active { border-radius:7px; }
  .business-date-range { width:100%; min-width:0; }
  .business-date-range > span { display:none; }
  .business-filter .business-date-range .date-range-field { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) 18px; gap:2px; width:100%; height:34px; min-height:34px; padding:0 3px; border-radius:8px; }
  .business-filter .business-date-range .date-range-field input { width:100%; height:28px; min-height:28px; padding:0 1px; font-size:9px; text-align:center; }
  .business-filter .business-date-range .date-range-field em { font-size:9px; }
  .business-filter .business-date-range .date-range-field button { width:18px; height:18px; min-height:18px; font-size:12px; }
  .business-filter > button[type="submit"] { min-width:0; width:42px; height:34px; min-height:34px; padding:0; border-radius:8px; font-size:12px; }
  .business-age-setting { display:none; }
  .business-metric-grid,
  .business-metric-grid.sales { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
  .business-metric {
    min-height:72px;
    align-content:start;
    gap:5px;
    padding:10px 7px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .business-metric strong { color:#303b4b; font-size:20px; }
  .business-metric span { color:#7d8898; font-size:11px; font-weight:600; }
  .business-metric small { font-size:10px; }
  .mobile-stock-prices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:10px 0; border-top:1px solid #edf1f5; border-bottom:1px solid #edf1f5; }
  .mobile-stock-prices.employee { grid-template-columns:1fr; }
  .mobile-stock-prices span { display:grid; gap:3px; }
  .mobile-stock-prices small { color:#8290a3; font-size:11px; }
  .mobile-stock-prices b { color:#283c57; font-size:14px; }
  .mobile-stock-prices .cost b { color:#df5656; }
  .mobile-stock-description { margin:0; color:#637186; font-size:12px; line-height:1.55; }
  .mobile-stock-description b { color:#3d4d63; }
  .mobile-stock-card-body footer { display:flex; justify-content:flex-end; gap:8px; padding-top:2px; }
  .mobile-stock-card-body footer button { min-height:34px; padding:6px 13px; border-radius:10px; font-size:12px; }
  .mobile-stock-edit { color:#fff; background:#2876df; border-color:#2876df; box-shadow:none; }

  .table-wrap { overflow:visible; }
  table.mobile-card-table { display:block; width:100%; min-width:0; border:0; background:transparent; }
  table.mobile-card-table thead { display:none; }
  table.mobile-card-table tbody { display:grid; gap:12px; width:100%; }
  table.mobile-card-table tr { display:block; width:100%; padding:8px 12px; border:1px solid #dce5f1; border-radius:12px; background:#fff; box-shadow:0 5px 16px rgba(22,43,72,.05); }
  table.mobile-card-table td { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:start; gap:10px; width:100%; min-width:0; padding:8px 0; border:0; border-bottom:1px dashed #e5ebf3; white-space:normal; overflow-wrap:anywhere; }
  table.mobile-card-table td:last-child { border-bottom:0; }
  table.mobile-card-table td::before { content:attr(data-label); color:#718096; font-size:12px; font-weight:700; }
  table.mobile-card-table td.mobile-full-cell { display:block; text-align:center; }
  table.mobile-card-table td.mobile-full-cell::before { content:none; }
  table.mobile-card-table td [class*="actions"], table.mobile-card-table td .row { flex-wrap:wrap; }
  table.mobile-card-table td button { width:auto; min-height:36px; }
}

@media (max-width: 390px) {
  table.mobile-card-table td { grid-template-columns:82px minmax(0,1fr); }
  .main { padding-right:10px; padding-left:10px; }
  body.mobile-messages-page .main { padding-right:6px; padding-left:6px; }
  .message-workspace { grid-template-columns:62px minmax(0,1fr); }
  .message-contact-item strong { max-width:48px; }
  .message-conversation { padding:8px; }
  .message-form-actions { grid-template-columns:repeat(5,40px); gap:4px; }
  .message-form-actions > button,
  .message-form-actions > label,
  .message-form-actions .message-emoji-wrap,
  .message-form-actions .message-emoji-wrap > button { width:40px; height:40px; min-height:40px; }
}

@media (min-width: 391px) and (max-width: 430px) {
  .main { padding-right:12px; padding-left:12px; }
  body.mobile-messages-page .main { padding-right:8px; padding-left:8px; }
}

@media (max-width: 820px) and (max-height: 760px) {
  body.mobile-messages-page .message-conversation-head { min-height:44px; padding-bottom:7px; }
  body.mobile-messages-page .message-conversation { padding-top:8px; padding-bottom:7px; }
  body.mobile-messages-page .message-form textarea { min-height:58px; max-height:72px; }
  body.mobile-messages-page .message-form-actions > button,
  body.mobile-messages-page .message-form-actions > label,
  body.mobile-messages-page .message-form-actions .message-emoji-wrap,
  body.mobile-messages-page .message-form-actions .message-emoji-wrap > button { width:38px; height:38px; min-height:38px; }
}
.role-chip,.permission-chip { display:inline-flex; align-items:center; margin:2px 5px 2px 0; padding:4px 9px; border-radius:999px; font-size:13px; white-space:nowrap; background:#eef4ff; color:#2459a9; }
.permission-chip.read { background:#ecf7ff; color:#1670a8; }
.permission-chip.write { background:#eefbf5; color:#12855b; }
.permission-fieldset { border:1px solid #dbe4f0; border-radius:12px; padding:15px; margin:0; }
.permission-fieldset legend { padding:0 8px; font-weight:700; color:#172b4d; }
.check-grid,.permission-matrix { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.check-card { display:flex !important; flex-direction:row !important; align-items:flex-start; gap:10px; padding:12px; border:1px solid #dce5f2; border-radius:10px; background:#f8faff; cursor:pointer; }
.check-card input { width:17px; height:17px; margin-top:2px; flex:0 0 auto; }
.check-card span { display:flex; flex-direction:column; gap:3px; }
.check-card small { color:#71809a; font-weight:400; }
@media (max-width:760px) { .check-grid,.permission-matrix { grid-template-columns:1fr; } }
.sale-order-card,.sale-add-card,.sale-draft-card,.sale-confirm-bar,.sale-workbench-card{margin-bottom:14px}
.sale-order-fields{margin-top:14px}
.sale-payment-field{display:grid;gap:6px;color:var(--muted);font-size:13px}
.sale-payment-segment{height:42px}
.sale-payment-segment label{min-height:42px;background:#fff;color:#334155;font-weight:700}
.sale-payment-segment input:checked+label{color:#1769e0;background:#eef5ff;border-color:#6aa4f8}
.sale-add-card{display:flex;align-items:center;justify-content:space-between;gap:20px}
.sale-add-card h2,.sale-order-card h2,.sale-workbench-card h2{margin:0 0 5px}.sale-add-card p,.sale-order-card p,.sale-workbench-card p{margin:0;color:var(--muted)}
.sale-imei-search{flex:1;min-width:0}
.sale-imei-search-row{display:flex;align-items:center;gap:10px;margin-top:14px;max-width:760px}
.sale-imei-search-row input{flex:1;min-width:0}
.sale-imei-search-status{min-height:20px;margin-top:6px;color:var(--muted);font-size:13px}
.sale-imei-search-status.is-searching{color:#2563eb}
.sale-imei-search-status.is-warning{color:#d97706}
.sale-imei-search-status.is-error{color:#dc2626}
.sale-add-actions{display:flex;align-items:center;gap:12px}
.sale-draft-stat{min-width:132px;padding:13px 18px;border-radius:12px;background:#f5f8fc;text-align:center}
.sale-draft-stat strong,.sale-draft-stat span{display:block}.sale-draft-stat strong{font-size:20px;color:#10213d}.sale-draft-stat span{margin-top:3px;color:var(--muted);font-size:13px}
.sale-price-input{width:112px;min-width:0;height:34px;padding:6px 9px}
.sale-confirm-bar{display:flex;justify-content:flex-end;gap:10px}
.sale-workbench-card{padding:16px 18px 14px}
.sale-workbench-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.sale-workbench-stats{display:flex;gap:8px;flex:0 0 auto}
.sale-workbench-stats span{display:grid;min-width:96px;min-height:54px;place-content:center;padding:8px 12px;border-radius:10px;background:#f5f8fc;text-align:center}
.sale-workbench-stats strong{color:#10213d;font-size:19px;line-height:1.1}
.sale-workbench-stats em{margin-top:3px;color:#64748b;font-size:12px;font-style:normal}
.sale-imei-search-row-compact{display:grid;grid-template-columns:minmax(260px,520px) minmax(160px,1fr);max-width:none;margin:0 0 10px}
.sale-imei-search-row-compact input{height:38px}
.sale-imei-search-row-compact .sale-imei-search-status{min-height:38px;margin:0;display:flex;align-items:center}
.sale-draft-table-wrap{border-radius:10px}
.sale-draft-table-wrap table th,.sale-draft-table-wrap table td{height:44px;padding-top:7px;padding-bottom:7px}
.sale-workbench-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #edf2f7}
.sale-picker{width:min(820px,92vw)}
.sale-picker>label{display:block;margin:14px 0}
.sale-picker-list{max-height:52vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px}
.sale-picker-list>label{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.sale-picker-list>label:last-child{border-bottom:0}.sale-picker-list>label:hover{background:#f4f8ff}
.sale-picker-list input{width:18px;height:18px}.sale-picker-list span{display:flex;flex-direction:column;gap:3px}.sale-picker-list small{color:var(--muted)}
@media(max-width:820px){.sale-add-card{align-items:stretch;flex-direction:column}.sale-imei-search-row{align-items:stretch;flex-direction:column}.sale-add-actions{display:grid;grid-template-columns:1fr 1fr}.sale-draft-stat{min-width:0}.sale-confirm-bar{position:sticky;bottom:8px;z-index:4}.sale-confirm-bar button{flex:1}.sale-order-fields{grid-template-columns:1fr!important}.sale-workbench-head{align-items:stretch;flex-direction:column}.sale-workbench-stats{display:grid;grid-template-columns:1fr 1fr}.sale-imei-search-row-compact{grid-template-columns:1fr}.sale-workbench-footer{position:sticky;bottom:8px;z-index:4;background:#fff}.sale-workbench-footer button{flex:1}}
.video-file-preview {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  color: #53657d;
  font-size: 13px;
}

.video-file-preview > div {
  padding: 8px 10px;
  border: 1px solid #dce5f1;
  border-radius: 8px;
  background: #f7f9fc;
  overflow-wrap: anywhere;
}

.video-upload-progress {
  margin-top: 10px;
  color: #315278;
  font-size: 13px;
}

.video-upload-track {
  height: 7px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6edf7;
}

.video-upload-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1f6fe5;
  transition: width .18s ease;
}

a.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.operation-report-card {
  margin-bottom: 14px;
}

.operation-report-toolbar .section-title {
  margin-bottom: 12px;
}

.operation-report-filter {
  flex-wrap: nowrap;
}

.operation-report-filter .business-shortcuts {
  flex: 0 0 auto;
  grid-template-columns: repeat(7, auto);
}

.operation-report-filter .operation-date-range {
  flex: 1 1 360px;
  min-width: 360px;
}

.operation-report-filter label:has(select[name="platform"]) {
  flex: 0 0 120px;
}

.operation-report-fields {
  display: grid;
  gap: 12px;
}

.operation-report-fields [hidden] {
  display: none !important;
}

.operation-report-submit {
  gap: 14px;
}

.operation-metric-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
}

.operation-metric {
  display: grid;
  align-content: center;
  min-height: 82px;
  padding: 13px 14px;
  border: 1px solid #dce6f3;
  border-radius: 10px;
  background: #f8fbff;
}

.operation-metric strong {
  color: #1769e0;
  font-size: 24px;
  line-height: 1.15;
}

.operation-metric span {
  margin-top: 5px;
  color: #12233d;
  font-weight: 800;
  font-size: 13px;
}

.operation-metric small {
  margin-top: 3px;
  color: #71809a;
  font-size: 12px;
}

.operation-settings summary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d7e4f4;
  border-radius: 9px;
  color: #1769e0;
  background: #f3f8ff;
  font-weight: 800;
  cursor: pointer;
}

.operation-settings form {
  margin-top: 14px;
}

.report-platform {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef5ff;
  color: #1769e0;
  font-weight: 800;
  font-size: 12px;
}

.operation-report-table td {
  vertical-align: middle;
}

.business-shortcuts button.active,
.business-shortcuts button[aria-pressed="true"] {
  color: #fff;
  border-color: #1f6fe5;
  background: #1f6fe5;
  box-shadow: 0 8px 18px rgba(31,111,229,.18);
}

@media (max-width: 1100px) {
  .operation-report-filter {
    flex-wrap: wrap;
  }
  .operation-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .operation-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.employee-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  white-space: nowrap;
}

.employee-account-table th,
.employee-account-table td {
  height:64px;
  box-sizing:border-box;
  vertical-align:middle;
}

.employee-account-table .profile-head {
  min-height:42px;
  align-items:center;
}

.employee-account-table .role-chip { display:inline-flex; align-items:center; min-height:24px; box-sizing:border-box; }

.employee-row-actions > button,
.employee-row-actions > .employee-state-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 12px;
  border-radius: 8px;
  line-height: 1;
  white-space: nowrap;
}

.employee-row-actions > [data-edit-user] {
  min-width: 58px;
}

.employee-row-actions > [data-delete-user] {
  min-width: 82px;
}

.employee-state-control {
  min-width: 72px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
}

button.employee-state-control.is-active {
  color: #15803d;
  background: #ecfdf3;
  border-color: #bbf7d0;
}

button.employee-state-control.is-active:hover {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

button.employee-state-control.is-disabled {
  color: #dc2626;
  background: #fff1f2;
  border-color: #fecdd3;
}

button.employee-state-control.is-disabled:hover {
  color: #b91c1c;
  background: #ffe4e6;
  border-color: #fda4af;
}
.organization-workspace {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(620px, 1.45fr);
  gap: 18px;
  align-items: stretch;
}

.organization-workspace > .card {
  height: 100%;
  box-sizing: border-box;
  margin-top: 0;
}

.organization-panel {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid #dfe7f2;
  box-shadow: 0 12px 34px rgba(31, 55, 91, .07);
}

.organization-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 86px;
  padding: 18px 20px;
  border-bottom: 1px solid #e7edf6;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.organization-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.organization-heading h2,
.position-card-title h3,
.work-content-title h3 {
  margin: 0;
}

.organization-heading h2 {
  color: #132541;
  font-size: 18px;
}

.organization-heading p {
  margin: 4px 0 0;
  color: #718096;
  font-size: 12px;
}

.organization-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(33, 105, 224, .18);
}

.organization-logo svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.position-logo {
  color: #fff;
  background: linear-gradient(145deg, #2e7cf6, #5b65e9);
}

.work-logo {
  color: #fff;
  background: linear-gradient(145deg, #12b981, #0ea5a7);
}

.organization-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 5px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 10px;
  box-shadow: 0 7px 16px rgba(33, 105, 224, .16);
}

.organization-add-button span {
  font-size: 18px;
  line-height: 1;
}

.work-add-button {
  background: #0eaa7b;
  border-color: #0eaa7b;
  box-shadow: 0 7px 16px rgba(14, 170, 123, .16);
}

.work-add-button:hover {
  background: #0b956c;
  border-color: #0b956c;
}

.organization-summary {
  display: flex;
  gap: 18px;
  padding: 11px 20px;
  color: #718096;
  background: #f7faff;
  border-bottom: 1px solid #e7edf6;
  font-size: 12px;
}

.organization-summary strong {
  margin-right: 3px;
  color: #2368d7;
  font-size: 15px;
}

.work-summary {
  background: #f4fcf9;
}

.work-summary strong {
  color: #0b956c;
}

.position-card-list,
.work-content-list {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 285px);
  min-height: 420px;
  padding: 14px;
  overflow: auto;
  scrollbar-width: thin;
}

.position-architecture-card,
.work-content-card {
  animation: organizationCardIn .32s both;
  animation-delay: calc(var(--card-index) * 45ms);
}

.work-content-card[draggable="true"] {
  cursor: grab;
  user-select: none;
}

.work-content-card[draggable="true"]:active {
  cursor: grabbing;
}

.work-content-card.is-dragging {
  opacity: .42;
  border-color: #6fa4f5;
  box-shadow: none;
}

.work-content-list.is-sorting .work-content-card:not(.is-dragging) {
  transition: transform .14s ease, border-color .14s ease;
}

.position-architecture-card {
  padding: 15px;
  border: 1px solid #e2eaf5;
  border-radius: 14px;
  background: #fff;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.position-architecture-card:hover,
.work-content-card:hover {
  transform: translateY(-2px);
  border-color: #b9cff4;
  box-shadow: 0 10px 24px rgba(31, 76, 139, .1);
}

.position-card-top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
}

.position-card-icon,
.work-content-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #2767d4;
  background: #edf4ff;
  font-weight: 800;
}

.position-card-title,
.work-content-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.position-card-title h3,
.work-content-title h3 {
  overflow: hidden;
  color: #172b4d;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.position-card-copy p,
.work-content-main p {
  margin: 5px 0 0;
  color: #718096;
  font-size: 12px;
  line-height: 1.55;
}

.organization-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.organization-status.is-active {
  color: #087451;
  background: #dcf8ec;
}

.organization-status.is-inactive {
  color: #c62f45;
  background: #fff0f2;
}

.organization-edit-button {
  min-height: 32px;
  padding: 6px 11px;
  color: #3567b7;
  background: #edf4ff;
  border-color: transparent;
  border-radius: 9px;
  box-shadow: none;
}

.organization-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.organization-delete-button {
  min-height: 32px;
  padding: 6px 11px;
  color: #d03546;
  background: #fff1f3;
  border-color: transparent;
  border-radius: 9px;
  box-shadow: none;
}

.organization-delete-button:hover {
  color: #fff;
  background: #d83b4e;
  border-color: #d83b4e;
}

.organization-edit-button:hover {
  color: #fff;
  background: #236fe1;
}

.position-card-section {
  margin-top: 13px;
  padding: 12px 0;
  border-top: 1px dashed #dce5f1;
  border-bottom: 1px dashed #dce5f1;
}

.position-meta-label {
  color: #8492a6;
  font-size: 11px;
  font-weight: 700;
}

.organization-chip-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.work-scope-chip {
  padding: 5px 8px;
  border-radius: 8px;
  color: #2f65bc;
  background: #eef5ff;
  font-size: 11px;
  font-weight: 650;
}

.organization-empty-text {
  color: #9aa7b8;
  font-size: 12px;
}

.position-card-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
}

.position-card-footer .organization-chip-list {
  margin: 0;
}

.member-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #4f83e4, #7567df);
  box-shadow: 0 2px 7px rgba(42, 79, 143, .2);
  font-size: 11px;
  font-weight: 800;
}

.full-access-hint {
  margin-left: auto;
  color: #0b8b64;
  font-size: 11px;
  font-weight: 700;
}

.work-content-card {
  display: grid;
  grid-template-columns: 42px minmax(150px, 1fr) minmax(92px, auto) minmax(82px, auto) auto;
  gap: 14px;
  align-items: center;
  min-height: 82px;
  padding: 13px 14px;
  border: 1px solid #e2eaf2;
  border-radius: 14px;
  background: #fff;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.work-content-icon {
  color: #07906a;
  background: #e5f9f2;
  font-size: 18px;
}

.work-content-metric {
  min-width: 0;
  padding-left: 13px;
  border-left: 1px solid #e7edf4;
}

.work-content-metric small {
  display: block;
  margin-bottom: 4px;
  color: #96a2b2;
  font-size: 10px;
}

.work-content-metric strong {
  color: #243c5d;
  font-size: 13px;
}

.work-content-metric em {
  color: #8794a6;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
}

.organization-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  color: #8290a4;
  text-align: center;
}

.organization-empty-state > span {
  margin-bottom: 10px;
  font-size: 34px;
}

.organization-empty-state strong {
  color: #334b6d;
}

.organization-empty-state p {
  margin: 6px 0 0;
  font-size: 12px;
}

@keyframes organizationCardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px) {
  .organization-workspace { grid-template-columns: 1fr; }
  .position-card-list, .work-content-list { max-height: none; min-height: 0; }
}

@media (max-width: 720px) {
  .organization-panel-head { align-items: flex-start; padding: 15px; }
  .organization-heading p { display: none; }
  .organization-add-button { padding: 8px 10px; }
  .work-content-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }
  .work-content-metric { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .position-architecture-card,
  .work-content-card { animation: none; transition: none; }
}
.deletion-confirmation-head {
  min-height: 66px;
}

.deletion-confirmation-body {
  padding-top: 25px;
}

.deletion-confirmation-message {
  margin: 0;
  color: #c2414f;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
}

.deletion-confirmation-actions {
  margin-top: 30px;
}

/* Compact light B-side navigation */
@media (min-width: 821px) {
  .shell {
    grid-template-columns: 218px minmax(0, 1fr);
  }
  .side {
    width: 218px;
    min-width: 0;
  }
}

.side {
  padding: 18px 12px 24px;
  color: #374151;
  background: #ffffff;
  border-right: 1px solid #e8edf4;
  box-shadow: 7px 0 24px rgba(38, 57, 88, .035);
  scrollbar-color: #d3dae6 transparent;
}

.side-user {
  gap: 10px;
  min-height: 56px;
  margin: 0 4px 17px;
  padding: 0 2px 15px;
  border-bottom: 1px solid #edf1f6;
}

.side-user .avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  flex: 0 0 34px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #edf3ff;
}

.side-user .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.side-user h2 {
  color: #20283a;
  font-family: Inter, "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.15px;
}

.side small {
  color: #a0a9b7;
  font-size: 11px;
  font-weight: 400;
}

.nav {
  gap: 12px;
  margin-top: 0;
}

.nav-group {
  gap: 4px;
}

.nav .nav-group-title {
  min-height: 28px;
  padding: 5px 9px;
  color: #a4acb9;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
  border-radius: 7px;
}

.nav .nav-group-title:hover {
  color: #6d7788;
  background: #f7f9fc;
}

.nav-chevron {
  width: 16px;
  height: 16px;
}

.nav-chevron svg {
  width: 13px;
  height: 13px;
  stroke-width: 1.6;
}

.nav-group-items {
  gap: 2px;
}

.nav button[data-view],
.nav-group-items > button {
  min-height: 36px;
  padding: 6px 9px;
  gap: 9px;
  color: #626c7c;
  border: 0;
  border-radius: 8px;
  font-family: Inter, "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0;
  box-shadow: none;
}

.nav button[data-view]:hover {
  color: #315fae;
  background: #f3f6fb;
  transform: none;
}

.nav button[data-view].active {
  color: #315fae;
  background: #eaf1ff;
  border-color: transparent;
  box-shadow: none;
  font-weight: 650;
}

.nav button[data-view].active::before {
  display: none;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  color: #8d96a6;
  background: transparent;
  border-radius: 5px;
}

.nav-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.55;
}

.nav button:hover .nav-icon {
  color: #5279bd;
  background: transparent;
  transform: none;
}

.nav button.active .nav-icon {
  color: #386ed0;
  background: transparent;
  box-shadow: none;
}

.nav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  color: #d94b55;
  background: #fff0f1;
  box-shadow: none;
  font-size: 10px;
}

.nav-sort-mode button[data-nav-item] {
  outline-color: #8fb0ed;
}

@media (max-width: 820px) {
  .side {
    width: min(78vw, 250px);
    padding: 17px 12px 22px;
    background: #fff;
    box-shadow: 18px 0 40px rgba(23, 36, 58, .16);
  }
}

/* Keep theme-specific mobile treatments after the shared responsive rules. */
body[data-ui-theme="black-gold"] .nav button[data-view].active .nav-icon {
  color: #171717;
  background: linear-gradient(145deg, #f0d782, #c99521);
  box-shadow: 0 5px 12px rgba(184, 135, 25, .18);
}

@media (max-width: 760px) {
  body[data-ui-theme="black-gold"] .mobile-bottom-nav {
    background: rgba(255, 255, 255, .97);
    border-top-color: #e7dfce;
  }

  body[data-ui-theme="black-gold"] .mobile-bottom-nav button.active {
    color: #b48316;
    background: transparent;
  }

  body[data-ui-theme="black-gold"] .mobile-home-welcome {
    background:
      radial-gradient(circle at 87% 18%, rgba(239, 211, 119, .42), transparent 25%),
      linear-gradient(120deg, #171717, #353127);
    box-shadow: 0 14px 28px rgba(28, 25, 19, .14);
  }

  body[data-ui-theme="black-gold"] .mobile-inventory-search {
    border-color: #e1d8c4;
  }

  body[data-ui-theme="black-gold"] .mobile-inventory-search button,
  body[data-ui-theme="black-gold"] .mobile-home-grid button .nav-icon {
    color: #171717;
    background: linear-gradient(145deg, #f1d87d, #cc9823);
    box-shadow: 0 8px 16px rgba(170, 123, 19, .16);
  }

  body[data-ui-theme="black-gold"] .mobile-home-grid button:nth-child(n) .nav-icon {
    background: linear-gradient(145deg, #f1d87d, #cc9823);
  }
}

/* Mobile bottom navigation: outline when idle, solid when selected. */
@media (max-width: 820px) {
  .mobile-bottom-nav {
    height: calc(66px + env(safe-area-inset-bottom));
    padding: 5px 8px env(safe-area-inset-bottom);
  }

  .mobile-bottom-nav button,
  .mobile-bottom-nav button:hover,
  .mobile-bottom-nav button.active {
    gap: 2px;
    padding: 4px 0;
    color: #8b94a3;
    background: transparent !important;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    transform: none;
  }

  .mobile-bottom-nav button.active {
    color: #1769dc;
  }

  .mobile-bottom-nav .mobile-tab-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    transform: none !important;
  }

  .mobile-bottom-nav button svg {
    width: 25px;
    height: 25px;
    transition: color .16s ease, transform .16s ease;
  }

  .mobile-bottom-nav button svg.outline {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-bottom-nav button svg.solid {
    fill: currentColor;
    stroke: none;
    transform: scale(1.04);
  }

  .mobile-bottom-nav button b {
    color: currentColor;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
  }

  body[data-ui-theme="black-gold"] .mobile-bottom-nav button.active {
    color: #b27e0d;
    background: transparent !important;
  }
}

/* Obsidian gold uses a restrained flat palette: no gold gradients or glow. */
body[data-ui-theme="black-gold"] .main {
  background: #f7f7f5;
}

body[data-ui-theme="black-gold"] .nav button[data-view].active {
  background: #171717;
  box-shadow: none;
}

body[data-ui-theme="black-gold"] .nav button[data-view].active .nav-icon,
body[data-ui-theme="black-gold"] .theme-choice.selected .theme-choice-check {
  color: #171717;
  background: #d8aa2e;
  box-shadow: none;
}

body[data-ui-theme="black-gold"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger),
body[data-ui-theme="black-gold"] button:not([class]):not([data-view]):not(.nav-group-title),
body[data-ui-theme="black-gold"] .organization-add-button {
  color: #fff;
  background: #171717;
  border-color: #171717;
  box-shadow: none;
}

body[data-ui-theme="black-gold"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger):hover,
body[data-ui-theme="black-gold"] button:not([class]):not([data-view]):not(.nav-group-title):hover,
body[data-ui-theme="black-gold"] .organization-add-button:hover {
  color: #171717;
  background: #d8aa2e;
  border-color: #d8aa2e;
}

body[data-ui-theme="black-gold"] .organization-add-button.work-add-button {
  color: #171717;
  background: #d8aa2e;
  border-color: #d8aa2e;
}

@media (max-width: 760px) {
  body[data-ui-theme="black-gold"] .mobile-home-welcome {
    background: #171717;
    box-shadow: none;
  }

  body[data-ui-theme="black-gold"] .mobile-inventory-search button {
    color: #fff;
    background: #171717;
    box-shadow: none;
  }

  body[data-ui-theme="black-gold"] .mobile-home-grid button .nav-icon,
  body[data-ui-theme="black-gold"] .mobile-home-grid button:nth-child(n) .nav-icon {
    color: #171717;
    background: #d8aa2e;
    box-shadow: none;
  }
}

/* Home IMEI search follows the compact mini-program search pattern. */
@media (max-width: 820px) {
  .mobile-inventory-search {
    min-height:54px;
    gap:9px;
    padding:3px 8px 3px 15px;
    border:1.5px solid #2d3036;
    border-radius:16px;
    background:#fff;
    box-shadow:none;
  }

  .mobile-inventory-search .mobile-search-icon {
    display:grid;
    flex:0 0 25px;
    color:#555b64;
    place-items:center;
  }

  .mobile-inventory-search .mobile-search-icon svg {
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
  }

  .mobile-inventory-search input {
    height:46px;
    color:#23262b;
    font-size:14px;
  }

  .mobile-inventory-search input::placeholder {
    color:#9a9da3;
  }

  body[data-ui-theme] .mobile-inventory-search #mobileBarcodeButton,
  .mobile-inventory-search #mobileBarcodeButton {
    display:grid;
    width:42px;
    height:42px;
    flex:0 0 42px;
    padding:0;
    color:#24272c;
    background:transparent !important;
    border:0;
    border-radius:0;
    box-shadow:none !important;
    place-items:center;
  }

  .mobile-inventory-search #mobileBarcodeButton:hover {
    color:#24272c;
    background:transparent !important;
    transform:none;
  }

  .mobile-inventory-search #mobileBarcodeButton svg {
    width:27px;
    height:27px;
  }

  /* Shared compact mobile controls for employee and administrator views. */
  .mobile-inventory-search,
  .mobile-stock-searchbar {
    min-height:32px;
    gap:5px;
    padding:1px 4px 1px 9px;
    border-width:1px;
    border-radius:9px;
    box-shadow:none;
  }

  .mobile-inventory-search {
    margin-bottom:14px;
  }

  .mobile-inventory-search .mobile-search-icon,
  .mobile-stock-searchbar .mobile-stock-search-icon {
    display:grid;
    width:22px;
    height:28px;
    flex:0 0 22px;
    color:#606b79;
    transform:none;
    place-items:center;
  }

  .mobile-inventory-search .mobile-search-icon svg,
  .mobile-stock-searchbar .mobile-stock-search-icon svg {
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .mobile-inventory-search input,
  .mobile-stock-searchbar input {
    height:28px;
    min-height:28px;
    font-size:16px;
  }

  body[data-ui-theme] .mobile-inventory-search #mobileBarcodeButton,
  .mobile-inventory-search #mobileBarcodeButton,
  .mobile-stock-searchbar #mobileStockClear {
    display:grid;
    width:28px;
    height:28px;
    min-height:28px;
    flex:0 0 28px;
    padding:0;
    border:0;
    border-radius:8px;
    box-shadow:none;
    place-items:center;
  }

  .mobile-inventory-search #mobileBarcodeButton svg,
  .mobile-stock-searchbar #mobileStockClear svg {
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
  }

  .mobile-stock-view-switch {
    min-height:44px;
    padding:2px;
    border-radius:10px;
  }

  .mobile-stock-view-switch button {
    min-height:38px;
    padding:5px 10px;
    border-radius:8px;
    font-size:14px;
  }

  .mobile-bottom-nav .mobile-tab-icon {
    width:24px;
    height:24px;
  }

  .mobile-bottom-nav button svg {
    display:block;
    width:22px;
    height:22px;
  }

  body.mobile-stock-filter-open {
    overflow:hidden;
  }

  .mobile-stock-filter-overlay {
    inset:0 0 calc(64px + env(safe-area-inset-bottom)) 0;
    z-index:90;
    padding:10px;
    background:rgba(18,31,49,.48);
    backdrop-filter:blur(2px);
  }

  .mobile-stock-filter-sheet {
    display:flex;
    width:min(100%,460px);
    max-height:calc(100dvh - 84px - env(safe-area-inset-bottom));
    flex-direction:column;
    overflow:hidden;
    border:1px solid #dce5f0;
    border-radius:14px;
    box-shadow:0 18px 42px rgba(15,31,54,.24);
  }

  .mobile-stock-filter-sheet::before {
    content:"";
    width:38px;
    height:4px;
    flex:0 0 4px;
    align-self:center;
    margin:7px 0 0;
    border-radius:2px;
    background:#d7e0eb;
  }

  .mobile-stock-filter-sheet > header {
    position:relative;
    top:auto;
    flex:0 0 auto;
    padding:9px 14px 11px;
  }

  .mobile-stock-filter-sheet > header > button {
    display:grid;
    width:30px;
    height:30px;
    min-height:30px;
    flex:0 0 30px;
    padding:0;
    border-radius:8px;
    place-items:center;
  }

  .mobile-stock-filter-sheet > header > button svg {
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
  }

  .mobile-stock-more-sheet form {
    min-height:0;
    gap:10px;
    padding:11px 14px 0;
    overflow-y:auto;
  }

  .mobile-stock-more-grid {
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:9px 8px;
  }

  .mobile-stock-more-grid label {
    grid-column:span 2;
    gap:4px;
  }

  .mobile-stock-more-grid label:first-child,
  .mobile-stock-more-grid label:nth-child(2) {
    grid-column:span 3;
  }

  .mobile-stock-more-grid label:last-child {
    grid-column:span 2;
  }

  .mobile-stock-more-grid select {
    height:38px;
    padding-right:23px;
    padding-left:9px;
    border-radius:9px;
    background:#f7f9fc;
    font-size:12px;
  }

  .mobile-stock-more-sheet footer {
    position:sticky;
    bottom:0;
    z-index:2;
    gap:8px;
    margin:0 -14px;
    padding:11px 14px 12px;
    border-top:1px solid #e8edf4;
    background:#fff;
    box-shadow:0 -8px 18px rgba(32,53,80,.05);
  }

  .mobile-stock-more-sheet footer button {
    min-height:40px;
    border-radius:9px;
  }

  .mobile-stock-sort-options {
    min-height:0;
    overflow-y:auto;
  }

  .mobile-stock-model-battery {
    width:max-content;
    max-width:100%;
    overflow:hidden;
    color:#46708f;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* Four palette themes use separate component languages, not color-only skins. */

/* Forest Moss: calm utility UI, pill actions and sage section bands. */
body[data-ui-theme="forest-moss"] .card,
body[data-ui-theme="forest-moss"] .drawer-panel,
body[data-ui-theme="forest-moss"] .theme-choice {
  border-radius: 12px;
}

body[data-ui-theme="forest-moss"] .organization-panel-head,
body[data-ui-theme="forest-moss"] .section-title,
body[data-ui-theme="forest-moss"] table th {
  background: #b3c9b6;
}

body[data-ui-theme="forest-moss"] .metric,
body[data-ui-theme="forest-moss"] .position-architecture-card,
body[data-ui-theme="forest-moss"] .work-content-card {
  background: #f8faf8;
  border: 1px solid #c3d1c5;
  border-left: 4px solid #7d977f;
  border-radius: 10px;
}

body[data-ui-theme="forest-moss"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger),
body[data-ui-theme="forest-moss"] .organization-add-button,
body[data-ui-theme="forest-moss"] .organization-edit-button {
  min-height: 38px;
  padding-inline: 17px;
  color: #fff;
  background: #526951;
  border: 1px solid #526951;
  border-radius: 999px;
}

body[data-ui-theme="forest-moss"] .secondary,
body[data-ui-theme="forest-moss"] .ghost {
  color: #2c3e2b;
  background: #dfe9e1;
  border-color: #b3c9b6;
  border-radius: 999px;
}

body[data-ui-theme="forest-moss"] input,
body[data-ui-theme="forest-moss"] select,
body[data-ui-theme="forest-moss"] textarea {
  background: #f8faf8;
  border: 1px solid #9eb3a1;
  border-radius: 9px;
}

body[data-ui-theme="forest-moss"] .nav-icon,
body[data-ui-theme="forest-moss"] .organization-logo,
body[data-ui-theme="forest-moss"] .work-content-icon,
body[data-ui-theme="forest-moss"] .position-card-icon {
  color: #e8eee9;
  background: #526951;
  border-radius: 50%;
}

body[data-ui-theme="forest-moss"] .organization-status.is-active,
body[data-ui-theme="forest-moss"] .work-scope-chip {
  color: #2c3e2b;
  background: #b3c9b6;
  border-radius: 999px;
}

/* Warm Clay: tactile cards, block buttons and alternating clay / blue accents. */
body[data-ui-theme="warm-clay"] .card,
body[data-ui-theme="warm-clay"] .drawer-panel {
  border: 1px solid #dcc2a8;
  border-radius: 20px;
}

body[data-ui-theme="warm-clay"] .organization-panel-head,
body[data-ui-theme="warm-clay"] .section-title {
  background: #e7cfb8;
  border-radius: 18px 18px 0 0;
}

body[data-ui-theme="warm-clay"] table th {
  color: #fff;
  background: #8a5a3c;
}

body[data-ui-theme="warm-clay"] .metric,
body[data-ui-theme="warm-clay"] .position-architecture-card,
body[data-ui-theme="warm-clay"] .work-content-card {
  background: #fffaf5;
  border: 1px solid #d5b493;
  border-radius: 16px;
}

body[data-ui-theme="warm-clay"] .metric:nth-child(even),
body[data-ui-theme="warm-clay"] .work-content-card:nth-child(even) {
  border-top: 5px solid #43718e;
}

body[data-ui-theme="warm-clay"] .metric:nth-child(odd),
body[data-ui-theme="warm-clay"] .work-content-card:nth-child(odd) {
  border-top: 5px solid #bd8d63;
}

body[data-ui-theme="warm-clay"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger),
body[data-ui-theme="warm-clay"] .organization-add-button,
body[data-ui-theme="warm-clay"] .organization-edit-button {
  min-height: 40px;
  color: #fff;
  background: #8a5a3c;
  border: 1px solid #8a5a3c;
  border-radius: 11px;
  box-shadow: 0 3px 0 #5e4030;
}

body[data-ui-theme="warm-clay"] .organization-add-button.work-add-button {
  color: #fff;
  background: #43718e;
  border-color: #43718e;
  box-shadow: 0 3px 0 #31566c;
}

body[data-ui-theme="warm-clay"] .secondary,
body[data-ui-theme="warm-clay"] .ghost {
  color: #5e4030;
  background: #f3e5d6;
  border: 1px solid #d5b493;
  border-radius: 11px;
}

body[data-ui-theme="warm-clay"] input,
body[data-ui-theme="warm-clay"] select,
body[data-ui-theme="warm-clay"] textarea {
  background: #fffaf5;
  border: 1px solid #d5b493;
  border-radius: 12px;
}

body[data-ui-theme="warm-clay"] .organization-logo,
body[data-ui-theme="warm-clay"] .position-card-icon {
  color: #fff;
  background: #bd8d63;
  border-radius: 12px;
}

body[data-ui-theme="warm-clay"] .work-content-icon {
  color: #fff;
  background: #43718e;
  border-radius: 12px;
}

body[data-ui-theme="warm-clay"] .organization-status.is-active,
body[data-ui-theme="warm-clay"] .work-scope-chip {
  color: #6f472f;
  background: #e7cfb8;
}

/* Graphite Red: compact squared controls, dark headers and precise red markers. */
body[data-ui-theme="graphite-red"] .card,
body[data-ui-theme="graphite-red"] .drawer-panel,
body[data-ui-theme="graphite-red"] .theme-choice {
  border: 1px solid #a49f9d;
  border-radius: 5px;
}

body[data-ui-theme="graphite-red"] .organization-panel-head,
body[data-ui-theme="graphite-red"] .section-title {
  color: #fff;
  background: #3d3c38;
}

body[data-ui-theme="graphite-red"] .organization-panel-head h2,
body[data-ui-theme="graphite-red"] .organization-panel-head p,
body[data-ui-theme="graphite-red"] .section-title h2,
body[data-ui-theme="graphite-red"] .section-title p {
  color: #fff;
}

body[data-ui-theme="graphite-red"] table th {
  color: #fff;
  background: #141616;
  border-bottom: 3px solid #7f1d1a;
}

body[data-ui-theme="graphite-red"] .metric,
body[data-ui-theme="graphite-red"] .position-architecture-card,
body[data-ui-theme="graphite-red"] .work-content-card {
  background: #fbfaf9;
  border: 1px solid #c8c2bd;
  border-radius: 4px;
  box-shadow: inset 4px 0 0 #746d67;
}

body[data-ui-theme="graphite-red"] .work-content-card:hover,
body[data-ui-theme="graphite-red"] .position-architecture-card:hover {
  border-color: #7f1d1a;
  box-shadow: inset 4px 0 0 #7f1d1a;
  transform: none;
}

body[data-ui-theme="graphite-red"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger),
body[data-ui-theme="graphite-red"] .organization-add-button {
  min-height: 38px;
  color: #fff;
  background: #141616;
  border: 1px solid #141616;
  border-radius: 4px;
}

body[data-ui-theme="graphite-red"] .organization-edit-button,
body[data-ui-theme="graphite-red"] .secondary,
body[data-ui-theme="graphite-red"] .ghost {
  color: #292725;
  background: #dedad7;
  border: 1px solid #a49f9d;
  border-radius: 4px;
}

body[data-ui-theme="graphite-red"] .organization-delete-button,
body[data-ui-theme="graphite-red"] .danger {
  color: #fff;
  background: #7f1d1a;
  border-color: #7f1d1a;
  border-radius: 4px;
}

body[data-ui-theme="graphite-red"] input,
body[data-ui-theme="graphite-red"] select,
body[data-ui-theme="graphite-red"] textarea {
  background: #fbfaf9;
  border: 0;
  border-bottom: 2px solid #746d67;
  border-radius: 0;
}

body[data-ui-theme="graphite-red"] input:focus,
body[data-ui-theme="graphite-red"] select:focus,
body[data-ui-theme="graphite-red"] textarea:focus {
  border-bottom-color: #7f1d1a;
  box-shadow: 0 2px 0 #7f1d1a;
}

body[data-ui-theme="graphite-red"] .organization-logo,
body[data-ui-theme="graphite-red"] .work-content-icon,
body[data-ui-theme="graphite-red"] .position-card-icon {
  color: #fff;
  background: #3d3c38;
  border-radius: 3px;
}

body[data-ui-theme="graphite-red"] .organization-status.is-active,
body[data-ui-theme="graphite-red"] .work-scope-chip {
  color: #fff;
  background: #746d67;
  border-radius: 3px;
}

/* Wine Berry: editorial rounded UI, burgundy title strips and rose controls. */
body[data-ui-theme="wine-berry"] .card,
body[data-ui-theme="wine-berry"] .drawer-panel {
  border: 1px solid #d8b5c0;
  border-radius: 22px;
}

body[data-ui-theme="wine-berry"] .organization-panel-head,
body[data-ui-theme="wine-berry"] .section-title {
  color: #fff;
  background: #541625;
  border-radius: 20px 20px 0 0;
}

body[data-ui-theme="wine-berry"] .organization-panel-head h2,
body[data-ui-theme="wine-berry"] .organization-panel-head p,
body[data-ui-theme="wine-berry"] .section-title h2,
body[data-ui-theme="wine-berry"] .section-title p {
  color: #fff;
}

body[data-ui-theme="wine-berry"] table th {
  color: #fff;
  background: #910d38;
}

body[data-ui-theme="wine-berry"] .metric,
body[data-ui-theme="wine-berry"] .position-architecture-card,
body[data-ui-theme="wine-berry"] .work-content-card {
  background: #fff9fb;
  border: 1px solid #d8b5c0;
  border-radius: 18px;
  box-shadow: none;
}

body[data-ui-theme="wine-berry"] .metric:nth-child(3n + 1),
body[data-ui-theme="wine-berry"] .work-content-card:nth-child(3n + 1) {
  background: #f5e8ec;
}

body[data-ui-theme="wine-berry"] .metric:nth-child(3n + 2),
body[data-ui-theme="wine-berry"] .work-content-card:nth-child(3n + 2) {
  background: #ead3da;
}

body[data-ui-theme="wine-berry"] button[type="submit"]:not(.secondary):not(.ghost):not(.danger),
body[data-ui-theme="wine-berry"] .organization-add-button {
  min-height: 40px;
  padding-inline: 18px;
  color: #fff;
  background: #910d38;
  border: 1px solid #910d38;
  border-radius: 999px;
}

body[data-ui-theme="wine-berry"] .organization-edit-button,
body[data-ui-theme="wine-berry"] .secondary,
body[data-ui-theme="wine-berry"] .ghost {
  color: #641026;
  background: #ead3da;
  border: 1px solid #d8a5b5;
  border-radius: 999px;
}

body[data-ui-theme="wine-berry"] .organization-delete-button,
body[data-ui-theme="wine-berry"] .danger {
  color: #fff;
  background: #541625;
  border-color: #541625;
  border-radius: 999px;
}

body[data-ui-theme="wine-berry"] input,
body[data-ui-theme="wine-berry"] select,
body[data-ui-theme="wine-berry"] textarea {
  background: #fff9fb;
  border: 1px solid #d8a5b5;
  border-radius: 16px;
}

body[data-ui-theme="wine-berry"] .organization-logo,
body[data-ui-theme="wine-berry"] .work-content-icon,
body[data-ui-theme="wine-berry"] .position-card-icon {
  color: #fff;
  background: #910d38;
  border-radius: 50% 50% 50% 12px;
}

body[data-ui-theme="wine-berry"] .organization-status.is-active,
body[data-ui-theme="wine-berry"] .work-scope-chip {
  color: #641026;
  background: #d8a5b5;
  border-radius: 999px;
}

@media (max-width: 760px) {
  body[data-ui-theme="forest-moss"] .mobile-bottom-nav button.active,
  body[data-ui-theme="warm-clay"] .mobile-bottom-nav button.active,
  body[data-ui-theme="graphite-red"] .mobile-bottom-nav button.active,
  body[data-ui-theme="wine-berry"] .mobile-bottom-nav button.active {
    color: var(--palette-accent);
    background: transparent !important;
  }

  body[data-ui-theme="forest-moss"] .mobile-home-shortcut-icon { border-radius: 50%; }
  body[data-ui-theme="warm-clay"] .mobile-home-shortcut-icon { border-radius: 11px; }
  body[data-ui-theme="graphite-red"] .mobile-home-shortcut-icon { border-radius: 3px; }
  body[data-ui-theme="wine-berry"] .mobile-home-shortcut-icon { border-radius: 50% 50% 50% 10px; }

  body[data-ui-theme="forest-moss"] .mobile-home-welcome { border-radius: 14px; }
  body[data-ui-theme="warm-clay"] .mobile-home-welcome { border-radius: 22px; }
  body[data-ui-theme="graphite-red"] .mobile-home-welcome { border-radius: 5px; border-bottom: 5px solid #7f1d1a; }
  body[data-ui-theme="wine-berry"] .mobile-home-welcome { border-radius: 24px 24px 24px 8px; }
}
/* Approved video library */
.video-library { padding: 18px; }
.video-library-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.video-library-heading h2 { margin: 0 0 4px; }
.video-library-heading p { margin: 0; color: var(--muted, #64748b); }
.video-library-heading-actions { display: flex; align-items: center; gap: 10px; }
.video-library-access-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: -4px 0 16px;
  padding: 10px 12px;
  border: 1px solid var(--line, #dbe4f0);
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary, #216be6) 4%, white);
}
.video-library-access-summary > strong { white-space: nowrap; font-size: 13px; }
.video-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.video-library-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 132px;
  padding: 14px;
  border: 1px solid var(--line, #dbe4f0);
  border-radius: 14px;
  background: var(--card, #fff);
}
.video-library-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--primary, #216be6); background: color-mix(in srgb, var(--primary, #216be6) 10%, white); }
.video-library-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.video-library-body { min-width: 0; display: grid; gap: 5px; }
.video-library-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-library-source { display: flex; align-items: center; gap: 6px; color: var(--text, #10213d); }
.video-library-source .avatar.tiny { width: 22px; height: 22px; min-width: 22px; font-size: 10px; }
.video-library-body small, .video-library-path { color: var(--muted, #64748b); font-size: 12px; }
.video-library-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-library-viewers { display: flex; flex-wrap: wrap; gap: 5px; min-height: 22px; }
.video-library-viewers span { padding: 3px 8px; border-radius: 999px; color: #087a52; background: #e8f8f1; font-size: 12px; }
.video-library-viewers em { color: #a16a16; font-style: normal; font-size: 12px; }
.video-library-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.video-library-actions button { white-space: nowrap; }
.modal:has(.video-library-access-panel) {
  width: min(520px, calc(100vw - 32px));
  max-height: min(640px, calc(100dvh - 32px));
  overflow: hidden;
}
.video-library-access-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(640px, calc(100dvh - 32px));
}
.video-library-access-panel .drawer-head {
  padding: 18px 20px 14px;
}
.video-library-access-panel .drawer-head p {
  margin: 5px 0 0;
  color: var(--muted, #64748b);
  font-size: 13px;
}
.video-library-access-panel .video-assignment-form {
  min-height: 0;
  display: grid;
  gap: 16px;
  padding: 16px 20px 20px;
  overflow: auto;
}
.video-assignment-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line, #dbe4f0);
  border-radius: 14px;
}
.video-assignment-form legend {
  padding: 0 6px;
  color: var(--text, #10213d);
  font-size: 13px;
  font-weight: 700;
}
.video-employee-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
.video-employee-option {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border: 1px solid var(--line, #dbe4f0);
  border-radius: 14px;
  background: var(--card, #fff);
  cursor: pointer;
}
.video-employee-option input { position: absolute; opacity: 0; pointer-events: none; }
.video-employee-option .avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.video-employee-option strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--text, #10213d);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-employee-check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; display: none; place-items: center; border-radius: 50%; color: white; background: var(--primary, #216be6); font-size: 11px; }
.video-employee-option.selected { border-color: var(--primary, #216be6); background: color-mix(in srgb, var(--primary, #216be6) 7%, white); }
.video-employee-option.selected .video-employee-check { display: grid; }
.video-library-access-panel .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}
.video-library-access-panel .modal-actions button {
  width: auto;
  min-width: 88px;
}

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

@media (max-width: 820px) {
  .video-library { padding: 12px; }
  .video-library-heading { align-items: flex-start; }
  .video-library-heading-actions { flex-direction: column; align-items: flex-end; }
  .video-library-heading p { font-size: 13px; }
  .video-library-access-summary { align-items: flex-start; flex-direction: column; }
  .video-library-card { grid-template-columns: 38px minmax(0, 1fr); padding: 12px; min-height: 0; }
  .video-library-icon { width: 38px; height: 38px; border-radius: 10px; }
  .video-library-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .video-library-actions button { flex: 1; }
}

@media (max-width: 520px) {
  .modal:has(.video-library-access-panel) {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
  .video-library-access-panel {
    max-height: calc(100dvh - 20px);
  }
  .video-library-access-panel .drawer-head {
    padding: 16px 14px 12px;
  }
  .video-library-access-panel .video-assignment-form {
    padding: 14px;
  }
  .video-employee-option {
    width: 84px;
    height: 84px;
    flex-basis: 84px;
  }
.video-library-access-panel .modal-actions button {
    flex: 1;
  }
}

/* 岗位角色与分层权限 */
.position-workspace-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid #e1e8f2;
  border-radius: 16px;
  background: #fff;
}

.position-workspace-toolbar h2 {
  margin: 0;
  color: #14233d;
  font-size: 20px;
}

.position-workspace-toolbar p {
  margin: 5px 0 0;
  color: #718096;
  font-size: 13px;
}

.position-workspace-switch,
.role-permission-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid #dbe4f0;
  border-radius: 11px;
  background: #f4f7fb;
}

.position-workspace-switch button,
.role-permission-tabs button {
  min-height: 34px;
  padding: 7px 15px;
  border: 0;
  border-radius: 8px;
  color: #64748b;
  background: transparent;
  box-shadow: none;
}

.position-workspace-switch button.active,
.role-permission-tabs button.active {
  color: #fff;
  background: #2f7be8;
}

.role-permission-workspace {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 14px;
  min-height: calc(100vh - 205px);
}

.role-list-panel,
.role-permission-detail {
  overflow: hidden;
  border: 1px solid #e1e8f2;
  border-radius: 16px;
  box-shadow: none;
}

.role-list-panel {
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

.role-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid #e3eaf3;
  background: #fff;
}

.role-list-head > div {
  display: grid;
  gap: 3px;
}

.role-list-head strong {
  color: #172b4d;
  font-size: 15px;
}

.role-list-head small {
  color: #8a97aa;
  font-size: 11px;
}

.role-list-head button {
  display: grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  place-items: center;
  padding: 0;
  border-radius: 9px;
  font-size: 20px;
  line-height: 1;
}

.role-list {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px;
  overflow-y: auto;
}

.role-list-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #243650;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.role-list-item:hover {
  border-color: #d5e2f5;
  background: #fff;
}

.role-list-item.active {
  border-color: #a9c8fa;
  color: #165ac7;
  background: #eaf3ff;
}

.role-list-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  color: #2369d8;
  background: #e5efff;
  font-weight: 800;
}

.role-list-item > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.role-list-item strong,
.role-list-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-list-item small {
  color: #8390a3;
  font-size: 11px;
}

.role-list-item i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5e1;
}

.role-list-item i.is-active {
  background: #18a875;
}

.role-permission-detail {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: #fff;
}

.role-permission-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  border-bottom: 1px solid #e6ecf4;
}

.role-permission-title {
  display: flex;
  align-items: center;
  gap: 11px;
}

.role-permission-title > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: #2f7be8;
  font-weight: 800;
}

.role-permission-title h3 {
  margin: 0;
  color: #14233d;
  font-size: 18px;
}

.role-permission-title p {
  margin: 4px 0 0;
  color: #7a8799;
  font-size: 12px;
}

.role-member-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0 53px;
}

.role-member-preview > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  color: #526279;
  background: #f1f5f9;
  font-size: 11px;
}

.role-member-preview .avatar.tiny {
  width: 20px;
  height: 20px;
  min-width: 20px;
  font-size: 9px;
}

.role-member-preview small {
  color: #9aa5b4;
}

.role-permission-tabs {
  align-self: center;
  margin: 12px auto 10px;
}

#positionPermissionForm {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.role-permission-table-wrap {
  min-height: 0;
  flex: 1;
  padding: 0 14px;
  overflow: auto;
}

.role-permission-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #dfe6ef;
  border-radius: 10px;
  overflow: hidden;
}

.role-permission-table th {
  height: 34px;
  padding: 5px 10px;
  border-right: 1px solid #e1e7ef;
  border-bottom: 1px solid #dfe6ef;
  color: #46556c;
  background: #f5f7fa;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
}

.role-permission-table th:nth-child(1) { width: 23%; }
.role-permission-table th:nth-child(2) { width: 25%; }
.role-permission-table th:last-child { border-right: 0; }

.role-permission-table td {
  min-height: 58px;
  padding: 12px;
  border-right: 1px solid #e6ebf2;
  border-bottom: 1px solid #e6ebf2;
  vertical-align: middle;
}

.role-permission-table tr:last-child td { border-bottom: 0; }
.role-permission-table td:last-child { border-right: 0; }

.role-permission-table input,
.role-work-scope-grid input {
  width: 17px;
  height: 17px;
  min-height: 17px;
  margin: 0;
  accent-color: #2f7be8;
}

.role-permission-page > label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.role-permission-module-label {
  display: flex;
  align-items: center;
  min-height: 34px;
}

.role-permission-module strong {
  color: #21334e;
  font-size: 13px;
}

.role-permission-module small {
  color: #8a96a8;
  font-size: 11px;
  line-height: 1.45;
}

.role-permission-page span {
  color: #33445d;
  font-size: 13px;
}

.role-permission-page-name {
  color: #33445d;
  font-size: 13px;
}

.role-permission-sections {
  display: grid;
  gap: 8px;
}

.role-permission-section {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}

.role-permission-section > strong {
  flex: 0 0 70px;
  padding-top: 8px;
  color: #344763;
  font-size: 12px;
}

.role-permission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-permission-actions label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #dce4ee;
  border-radius: 8px;
  color: #526279;
  background: #fff;
  font-size: 12px;
}

.role-permission-actions label:has(input:checked) {
  border-color: #9dc1fa;
  color: #1e63cc;
  background: #edf5ff;
}

.role-permission-fixed {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #607089;
  background: #f3f6fa;
  font-size: 12px;
}

.role-permission-sections:empty {
  min-height: 1px;
}

.role-permission-details {
  display: flex;
  flex: 1 1 260px;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  padding-top: 5px;
}

.role-permission-details span {
  padding: 3px 7px;
  border-radius: 999px;
  color: #738198;
  background: #f3f6fa;
  font-size: 11px;
  white-space: nowrap;
}

.role-permission-savebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 16px;
  border-top: 1px solid #e3eaf3;
  background: #fff;
}

.role-permission-savebar span {
  color: #7e8b9d;
  font-size: 12px;
}

.role-permission-savebar button {
  min-width: 110px;
}

.role-work-scope {
  min-height: 0;
  flex: 1;
  padding: 0 16px 14px;
  overflow-y: auto;
}

.role-scope-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  color: #526279;
  background: #f5f8fc;
  font-size: 12px;
}

.role-scope-note strong {
  color: #253650;
}

.role-work-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.role-work-scope-grid > label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #dfe6ef;
  border-radius: 10px;
  background: #fff;
}

.role-work-scope-grid > label:has(input:checked) {
  border-color: #9dc1fa;
  background: #f0f6ff;
}

.role-work-scope-grid span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.role-work-scope-grid strong {
  color: #283a55;
  font-size: 13px;
}

.role-work-scope-grid small {
  overflow: hidden;
  color: #8793a4;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-basic-form-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #dbe7f6;
  border-radius: 10px;
  color: #64748b;
  background: #f4f8fe;
  font-size: 12px;
}

.role-basic-form-note strong {
  color: #285da9;
}

.role-work-library .work-content-list {
  max-height: calc(100vh - 310px);
}

@media (max-width: 820px) {
  .position-workspace-toolbar {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

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

  .role-permission-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .role-list-panel {
    max-height: none;
  }

  .role-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .role-list::-webkit-scrollbar { display: none; }

  .role-list-item {
    flex: 0 0 190px;
  }

  .role-permission-detail {
    min-height: 590px;
  }

  .role-permission-head {
    align-items: stretch;
    flex-direction: column;
  }

  .role-permission-head .organization-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .role-member-preview {
    margin-left: 0;
  }

  .role-permission-tabs {
    display: grid;
    width: calc(100% - 28px);
    grid-template-columns: 1fr 1fr;
  }

  .role-permission-table {
    min-width: 680px;
  }

  .role-permission-savebar {
    align-items: stretch;
    flex-direction: column;
  }

  .role-permission-savebar button {
    width: 100%;
  }

  .role-work-scope-grid {
    grid-template-columns: 1fr;
  }
}

/* Keep the architecture navigation as the final cascade layer. */
.nav { gap: 8px; }
.nav-group {
  overflow: hidden;
  gap: 0;
  border: 1px solid transparent;
  border-radius: 11px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav-group.open {
  gap: 4px;
  padding-bottom: 5px;
  border-color: #e8edf5;
  background: #fbfcfe;
}
.nav-group.has-active {
  border-color: #dce8fb;
  background: #f8fbff;
}
.nav .nav-group-title {
  min-height: 40px;
  padding: 6px 9px;
  color: #68758a;
  border-radius: 9px;
  font-size: 12px;
  letter-spacing: 0;
}
.nav .nav-group-title:hover { color: #315f9c; background: #f2f6fc; }
.nav-group-copy { display: flex; min-width: 0; align-items: center; gap: 9px; }
.nav-group-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-group-copy small {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  place-items: center;
  border-radius: 10px;
  color: #8a96a8;
  background: #edf1f7;
  font-size: 10px;
  font-weight: 700;
}
.nav-group-icon {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border-radius: 8px;
  color: #6584ae;
  background: #edf4fd;
}
.nav-group-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.nav-group.has-active .nav-group-icon {
  color: #fff;
  background: linear-gradient(135deg, #5a91e9, #3274d5);
  box-shadow: 0 5px 12px rgba(50, 116, 213, .2);
}
.nav-group.has-active .nav-group-title { color: #2e5f9f; }
.nav-group-items { padding: 0 5px; }
.nav-group-items > button { position: relative; padding-left: 12px; }
.nav-group-items > button.active::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 2px;
  width: 3px;
  border-radius: 3px;
  background: currentColor;
  content: "";
}
body[data-ui-theme="black-gold"] .nav-group.open,
body[data-ui-theme="black-gold"] .nav-group.has-active {
  border-color: rgba(203, 169, 92, .2);
  background: rgba(255, 255, 255, .025);
}
body[data-ui-theme="black-gold"] .nav-group-copy small {
  color: #c9b071;
  background: rgba(203, 169, 92, .12);
}
body[data-ui-theme="black-gold"] .nav-group-icon {
  color: #cfb66e;
  background: rgba(203, 169, 92, .12);
}
body[data-ui-theme="black-gold"] .nav-group.has-active .nav-group-icon {
  color: #16130b;
  background: linear-gradient(135deg, #e3ca7b, #ae8634);
}
body[data-ui-theme="black-gold"] .nav-group.has-active .nav-group-title { color: #e4cc84; }

@media (max-width: 820px) {
  .nav-group.open { padding-bottom: 6px; }
  .nav .nav-group-title { display: flex; min-height: 42px; }
  .nav-group-items > button { min-height: 40px; }
}

.profile-section-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  padding: 6px;
  border: 1px solid #e1e8f2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 8px 24px rgba(55, 78, 111, .06);
}

.profile-section-tabs > button {
  display: flex;
  min-width: 0;
  min-height: 62px;
  align-items: center;
  gap: 11px;
  justify-content: flex-start;
  padding: 10px 12px;
  color: #6a778a;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
}

.profile-section-tabs > button:hover {
  color: #315f9c;
  background: #f5f8fd;
}

.profile-section-tabs > button.active {
  color: #1f5da8;
  border-color: #d5e4fa;
  background: linear-gradient(135deg, #edf5ff, #f8fbff);
  box-shadow: 0 5px 14px rgba(53, 109, 190, .1);
}

.profile-section-tabs > button > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.profile-section-tabs strong {
  font-size: 13px;
  font-weight: 700;
}

.profile-section-tabs small {
  overflow: hidden;
  color: #909bad;
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-section-tab-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 9px;
  color: #7890af;
  background: #eef3f9;
}

.profile-section-tab-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.profile-section-tabs > button.active .profile-section-tab-icon {
  color: #fff;
  background: linear-gradient(135deg, #5b94ec, #3173d3);
}

body[data-ui-theme="black-gold"] .profile-section-tabs {
  border-color: rgba(203, 169, 92, .2);
  background: rgba(255, 255, 255, .025);
}

body[data-ui-theme="black-gold"] .profile-section-tabs > button.active {
  color: #e2c978;
  border-color: rgba(203, 169, 92, .28);
  background: rgba(203, 169, 92, .1);
}

@media (max-width: 820px) {
  button.export-button,
  #settlementExport {
    display:none !important;
  }

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

  .profile-section-tabs {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 4px;
    overflow: hidden;
    padding: 4px;
    border-radius: 11px;
  }

  .profile-section-tabs::-webkit-scrollbar { display: none; }

  .profile-section-tabs > button {
    min-width: 0;
    min-height: 44px;
    gap: 5px;
    padding: 5px 6px;
    border-radius: 8px;
  }

  .profile-section-tab-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 7px;
  }

  .profile-section-tabs strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-section-tabs small { display: none; }
}

/* Compact "附属与其他" block in personal center. */
.profile-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-view > .profile-section-tabs { order: 0; margin-bottom: 0; }
.profile-view > .card:not(.profile-theme-section) { order: 1; }
.profile-view > .profile-theme-section { order: 2; }

.profile-theme-section {
  display: grid;
  grid-template-columns: 150px minmax(360px, 500px);
  gap: 14px;
  align-items: center;
  margin-bottom: 0;
  padding: 12px 14px;
}

.profile-theme-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.profile-theme-head h2 {
  margin: 0;
  font-size: 14px;
}

.profile-theme-head p {
  margin: 3px 0 0;
  font-size: 10px;
}

.profile-theme-head > span {
  display: none;
  font-size: 10px;
}

.profile-theme-section .theme-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-theme-section .theme-choice {
  grid-template-columns: 48px minmax(0, 1fr) 18px;
  gap: 9px;
  min-height: 54px;
  padding: 7px 9px;
  border-radius: 10px;
}

.profile-theme-section .theme-preview {
  width: 48px;
  height: 34px;
  border-radius: 6px;
}

.profile-theme-section .theme-preview i { width: 10px; }
.profile-theme-section .theme-preview b {
  top: 4px;
  left: 14px;
  width: 29px;
  height: 7px;
  border-radius: 3px;
}
.profile-theme-section .theme-preview em {
  top: 15px;
  left: 14px;
  width: 13px;
  height: 14px;
  border-radius: 3px;
}
.profile-theme-section .theme-preview strong {
  top: 15px;
  right: 4px;
  width: 13px;
  height: 14px;
  border-radius: 3px;
}

.profile-theme-section .theme-choice-copy { gap: 2px; }
.profile-theme-section .theme-choice-copy strong { font-size: 12px; }
.profile-theme-section .theme-choice-copy small {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-theme-section .theme-choice-check {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

@media (max-width: 820px) {
  .profile-view > .profile-theme-section {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  .profile-theme-head > span { display: inline; }
  .profile-theme-section .theme-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .profile-theme-section .theme-choice {
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    min-height: 46px;
    padding: 6px;
  }
  .profile-theme-section .theme-preview {
    width: 38px;
    height: 28px;
  }
  .profile-theme-section .theme-preview i { width: 8px; }
  .profile-theme-section .theme-preview b { left: 11px; width: 23px; height: 6px; }
  .profile-theme-section .theme-preview em { top: 13px; left: 11px; width: 10px; height: 11px; }
  .profile-theme-section .theme-preview strong { top: 13px; right: 3px; width: 10px; height: 11px; }
  .profile-theme-section .theme-choice-copy small { display: none; }
}

/* Video warehouse: inventory-style single-row list. */
.video-library-heading {
  margin-bottom: 14px;
}

.video-folder-groups {
  display: grid;
  gap: 10px;
}

.video-folder-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbe5f1;
  border-radius: 12px;
  background: #fff;
}

.video-folder-group > summary {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #243653;
  background: #f8fbff;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.video-folder-group > summary::-webkit-details-marker {
  display: none;
}

.video-folder-group > summary:hover {
  background: #f1f6fd;
}

.video-folder-toggle {
  color: #7890ad;
  font-size: 23px;
  line-height: 1;
  transition: transform .16s ease;
}

.video-folder-group[open] .video-folder-toggle {
  transform: rotate(90deg);
}

.video-folder-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 8px;
  color: #2c72dc;
  background: #eaf2ff;
}

.video-folder-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.video-folder-group > summary strong {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-folder-group > summary .count-pill {
  margin-left: auto;
}

.video-folder-content {
  border-top: 1px solid #dbe5f1;
}

.video-folder-content .video-library-table-wrap,
.video-folder-content .published-video-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  border: 0;
  border-radius: 0;
}

.video-library-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  border: 1px solid #e1e8f2;
  border-radius: 12px;
}

.video-library-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.video-library-table th,
.video-library-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #e9eef5;
  text-align: left;
  vertical-align: middle;
}

.video-library-table th {
  color: #6f7d90;
  background: #f7f9fc;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.video-library-table tr:last-child td {
  border-bottom: 0;
}

.video-library-table tbody tr:hover {
  background: #f8fbff;
}

.video-library-table th:nth-child(1) { width: 26%; }
.video-library-table th:nth-child(2) { width: 140px; }
.video-library-table th:nth-child(3) { width: 120px; }
.video-library-table th:nth-child(4) { width: 160px; }
.video-library-table th:nth-child(5) { width: auto; }
.video-library-table th:nth-child(6) { width: 150px; }

.video-library-file {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.video-library-file .video-library-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
}

.video-library-file .video-library-icon svg {
  width: 17px;
  height: 17px;
}

.video-library-file strong,
.video-library-table .video-library-path {
  display: block;
  width: 100%;
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-library-file strong {
  flex: 1 1 auto;
}

.video-library-table .video-library-source {
  white-space: nowrap;
}

.video-library-table td {
  min-width: 0;
  color: #40516a;
  font-size: 12px;
}

.video-library-table td:nth-child(1),
.video-library-table td:nth-child(3),
.video-library-table td:nth-child(4),
.video-library-table td:nth-child(5) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-library-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.video-library-table button.compact {
  min-height: 32px;
  padding: 6px 10px;
  white-space: nowrap;
}

.published-video-table-wrap {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.published-video-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.published-video-table th:nth-child(1) { width: 30%; }
.published-video-table th:nth-child(2) { width: 150px; }
.published-video-table th:nth-child(3) { width: 130px; }
.published-video-table th:nth-child(4) { width: 170px; }
.published-video-table th:nth-child(5) { width: 120px; }
.published-video-table th:nth-child(6) { width: 100px; }

.published-video-table td {
  min-width: 0;
}

.published-video-table td:first-child,
.published-video-table td:nth-child(3),
.published-video-table td:nth-child(5) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.published-video-table td:last-child {
  white-space: nowrap;
}

@media (max-width: 820px) {
  .video-folder-group > summary {
    min-height: 48px;
    padding: 8px 10px;
  }

  .video-library-table {
    min-width: 0;
    table-layout: auto;
  }

  .video-library-table thead {
    display: none;
  }

  .video-library-table,
  .video-library-table tbody,
  .video-library-table tr,
  .video-library-table td {
    display: block;
    width: 100%;
  }

  .video-library-table.mobile-card-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #e7edf5;
  }

  .video-library-table tr:last-child { border-bottom: 0; }

  .video-library-table.mobile-card-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border: 0;
    text-align: right;
  }

  .video-library-table td::before {
    flex: 0 0 64px;
    color: #8a96a8;
    font-size: 10px;
    text-align: left;
  }

  .video-library-table td:nth-child(1)::before { content: "视频"; }
  .video-library-table td:nth-child(2)::before { content: "来源"; }
  .video-library-table td:nth-child(4)::before { content: "通过时间"; }
  .video-library-table td:nth-child(5)::before { content: "路径"; }

  .video-library-table td:nth-child(1),
  .video-library-table td:nth-child(4),
  .video-library-table td:nth-child(5) {
    grid-column: 1 / -1;
  }

  .video-library-table td:nth-child(3) {
    display: none;
  }

  .video-library-table td:nth-child(2) {
    grid-column: 1;
    grid-row: 4;
    min-width: 0;
    justify-content: flex-start;
    gap: 8px;
  }

  .video-library-table td:nth-child(2)::before {
    flex-basis: auto;
  }

  .video-library-table td:nth-child(6) {
    grid-column: 2;
    grid-row: 4;
    width: auto;
    justify-content: flex-end;
    padding-left: 4px;
  }

  .video-library-table td:nth-child(6)::before {
    display: none;
    content: none;
  }

  .video-library-table .video-library-file {
    max-width: calc(100% - 76px);
  }

  .video-library-table td:last-child { text-align: right; }
}

/* Compact personal-center settings pages. */
.profile-subview {
  display: grid;
  gap: 10px;
}

.profile-subview .profile-section-tabs {
  gap: 6px;
  margin-bottom: 0;
  padding: 4px;
  border-radius: 11px;
}

.profile-subview .profile-section-tabs > button {
  min-height: 44px;
  gap: 8px;
  padding: 6px 9px;
}

.profile-subview .profile-section-tab-icon {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border-radius: 7px;
}

.profile-subview .profile-section-tab-icon svg {
  width: 15px;
  height: 15px;
}

.profile-subview .profile-section-tabs strong {
  font-size: 12px;
}

.profile-subview .profile-section-tabs small {
  font-size: 9px;
}

.compact-settings-card {
  padding: 14px 16px;
}

.compact-settings-card .section-title {
  margin-bottom: 10px;
}

.compact-settings-card .section-title h2 {
  font-size: 16px;
}

.compact-settings-card .section-title p {
  margin: 3px 0 0;
  font-size: 11px;
}

.compact-settings-card input:not([type="checkbox"]):not([type="hidden"]) {
  min-height: 34px;
  height: 34px;
  padding: 6px 10px;
}

.compact-path-form {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.compact-path-form > .grid {
  gap: 10px;
}

.compact-path-form label,
.compact-notification-form label {
  gap: 4px;
  font-size: 11px;
}

.compact-path-form .hint {
  align-self: center;
  margin: 0;
  font-size: 11px;
  white-space: nowrap;
}

.compact-path-form > button {
  min-height: 34px;
  padding: 6px 14px;
  white-space: nowrap;
}

.compact-notification-form {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 10px 14px;
  align-items: end;
}

.compact-notification-form .notification-enable {
  min-height: 34px;
  align-self: end;
  font-size: 12px;
}

.compact-notification-form .compact-secret-row,
.compact-notification-form .actions {
  grid-column: 1 / -1;
}

.compact-notification-form .compact-secret-row {
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
}

.compact-notification-form .compact-secret-row .checkline {
  min-height: 34px;
  align-self: end;
}

.compact-notification-form .actions {
  justify-content: flex-end;
  margin-top: 0;
}

.compact-notification-form .actions button {
  min-height: 34px;
  padding: 6px 14px;
}

@media (max-width: 820px) {
  .profile-subview { gap: 8px; }
  .profile-subview .profile-section-tabs > button {
    min-width: 0;
    min-height: 40px;
  }
  .compact-settings-card { padding: 12px; }
  .compact-path-form,
  .compact-notification-form {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .compact-path-form .hint,
  .compact-path-form > button,
  .compact-notification-form .compact-secret-row,
  .compact-notification-form .actions {
    grid-column: 1;
  }
  .compact-path-form .hint { white-space: normal; }
  .compact-notification-form .compact-secret-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .compact-notification-form .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Compact records table: only note copy may wrap. */
.records-page-card {
  padding: 14px 16px;
}

.records-page-title {
  align-items: center;
  margin-bottom: 9px;
}

.records-page-title h2 {
  margin: 0;
  font-size: 18px;
}

.records-page-title > div {
  min-width: 0;
}

.records-page-title p {
  margin: 3px 0 0;
  color: #7a879a;
  font-size: 11px;
  line-height: 1.45;
}

.records-page-title > span {
  margin-left: auto;
  font-size: 11px;
  white-space: nowrap;
}

.records-scope-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  padding: 7px 10px;
  border: 1px solid #dce7f5;
  border-radius: 9px;
  background: #f7faff;
  color: #52647b;
  font-size: 11px;
  line-height: 1.45;
}

.records-scope-note strong {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 6px;
  color: #fff;
  background: #397be2;
  font-size: 11px;
}

.records-scope-note.is-employee {
  border-color: #dcebe5;
  background: #f5fbf8;
}

.records-scope-note.is-employee strong {
  background: #2b9a70;
}

.records-page-card .filter-panel {
  grid-template-columns: minmax(130px, .8fr) minmax(160px, 1fr) minmax(130px, .8fr) minmax(250px, 1.25fr) auto;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 9px;
}

.records-page-card .filter-panel label {
  gap: 4px;
  min-width: 0;
  color: #5f7088;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.records-page-card .filter-panel input,
.records-page-card .filter-panel select,
.records-page-card .filter-panel button {
  min-height: 36px;
  height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.records-page-card .filter-panel .date-range-field {
  height: 36px;
  min-height: 36px;
}

.records-page-card .filter-panel .submission-date-range > span {
  margin-bottom: 0;
}

.records-page-card .filter-panel .date-range-field input {
  height: 30px;
  min-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.records-page-card .filter-panel .date-range-field button {
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
}

.records-page-card .filter-actions {
  gap: 6px;
}

.records-page-card .filter-actions button {
  padding-right: 12px;
  padding-left: 12px;
}

.records-page-card .records-table {
  overflow-x: auto;
  border: 1px solid #e2e8f1;
  border-radius: 10px;
}

.records-page-card .records-table table {
  width: 100%;
  min-width: 1180px;
  table-layout: fixed;
}

.records-page-card .records-table th,
.records-page-card .records-table td {
  overflow: hidden;
  padding: 7px 9px;
  vertical-align: top;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.records-page-card .records-table th {
  color: #68778c;
  font-size: 11px;
}

.records-page-card .records-table td {
  color: #314158;
  font-size: 12px;
}

.records-page-card .records-table th:nth-child(1) { width: 92px; }
.records-page-card .records-table th:nth-child(2) { width: 82px; }
.records-page-card .records-table th:nth-child(3) { width: 150px; }
.records-page-card .records-table th:nth-child(4) { width: 92px; }
.records-page-card .records-table th:nth-child(5) { width: auto; }
.records-page-card .records-table th:nth-child(6) { width: 96px; }
.records-page-card .records-table th:nth-child(7) { width: 270px; }
.records-page-card .records-table th:last-child { width: 72px; }
.records-page-card .records-table-self th:nth-child(1) { width: 92px; }
.records-page-card .records-table-self th:nth-child(2) { width: 160px; }
.records-page-card .records-table-self th:nth-child(3) { width: 92px; }
.records-page-card .records-table-self th:nth-child(4) { width: auto; }
.records-page-card .records-table-self th:nth-child(5) { width: 96px; }
.records-page-card .records-table-self th:nth-child(6) { width: 270px; }
.records-page-card .records-table-self th:last-child { width: 78px; }

.record-date-cell,
.record-employee-cell,
.record-quantity-cell,
.record-action-cell,
.record-single-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-work {
  min-width: 0;
  gap: 3px;
}

.record-work strong {
  font-size: 12px;
}

.record-note {
  display: block;
  margin-top: 4px;
  color: #6d7b8f;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.record-submit-note {
  padding-left: 7px;
  border-left: 2px solid #d9e2ef;
}

.record-status-cell .status {
  white-space: nowrap;
}

.record-review-note {
  margin-top: 0;
  max-width: 100%;
  color: #65758d;
}

.records-page-card .records-table td.record-review-note-cell {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.record-review-note-cell .muted {
  white-space: nowrap;
}

.record-proof-compact .path-list {
  gap: 4px;
}

.record-proof-compact .path-row {
  min-height: 30px;
  gap: 5px;
  padding: 4px 6px;
  border-radius: 6px;
}

.record-proof-compact .path-row span {
  font-size: 11px;
  white-space: nowrap;
}

.record-proof-compact .path-row small {
  font-size: 10px;
  white-space: nowrap;
}

.record-proof-compact .path-row button {
  min-height: 26px;
  padding: 4px 7px;
  font-size: 10px;
}

.record-proof-compact .thumbs {
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 0;
  overflow-x: auto;
}

.record-proof-compact .thumbs img {
  width: 42px;
  height: 42px;
  border-radius: 6px;
}

.record-proof-compact .proof-image-button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 6px;
}

.record-action-cell .muted,
.record-action-cell button {
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .records-page-card {
    padding: 9px;
  }

  .records-page-title {
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
  }

  .records-page-title h2 { font-size: 16px; line-height: 1.25; }
  .records-page-title p { max-width: 245px; margin-top: 2px; font-size: 9px; line-height: 1.35; }
  .records-page-title > span { padding-top: 2px; font-size: 10px; }
  .records-scope-note {
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 5px 6px;
    font-size: 10px;
    white-space: nowrap;
  }
  .records-scope-note strong { padding: 2px 5px; font-size: 10px; }
  .records-scope-note span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
  }

  .records-page-card .filter-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 6px;
    margin-bottom: 7px;
    padding: 7px;
  }

  .records-page-card .filter-panel:not(:has(.filter-employee)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .records-page-card .filter-panel label {
    gap: 2px;
    font-size: 10px;
    line-height: 12px;
  }

  .records-page-card .filter-panel input,
  .records-page-card .filter-panel select,
  .records-page-card .filter-panel button {
    height: 32px;
    min-height: 32px;
    padding: 4px 7px;
    font-size: 12px;
  }

  .records-page-card .filter-panel .submission-date-range,
  .records-page-card .filter-actions {
    grid-column: auto;
  }

  .records-page-card .filter-panel:has(.filter-employee) .submission-date-range {
    grid-column: span 2;
  }

  .records-page-card .filter-panel .date-range-field {
    grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 18px;
    gap: 2px;
    height: 32px;
    min-height: 32px;
    padding: 0 3px;
  }

  .records-page-card .filter-panel .date-range-field input {
    height: 26px;
    min-height: 26px;
    padding: 0 1px;
    font-size: 9px;
    text-align: center;
  }

  .records-page-card .filter-panel .date-range-field em {
    font-size: 9px;
  }

  .records-page-card .filter-panel .date-range-field button {
    width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    font-size: 11px;
  }

  .records-page-card .filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  .records-page-card .filter-actions button {
    min-width: 0;
    padding-right: 4px;
    padding-left: 4px;
  }

  .records-page-card .records-table {
    border: 0;
    overflow: visible;
  }

  .records-page-card .records-table table {
    min-width: 0;
    table-layout: auto;
  }

  .records-page-card .records-table tbody {
    gap: 8px;
  }

  .records-page-card .records-table tr {
    padding: 6px 9px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(22, 43, 72, .04);
  }

  .records-page-card .records-table td {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 0;
    font-size: 11px;
    white-space: nowrap;
  }

  .records-page-card .records-table td::before {
    font-size: 11px;
  }

  .records-page-card .record-note,
  .records-page-card .review-note-pill {
    white-space: normal;
  }

  .records-page-card .record-status-cell .status {
    padding: 3px 8px;
    font-size: 10px;
  }

  .records-page-card .record-proof-compact .path-list {
    gap: 3px;
  }

  .records-page-card .record-proof-compact .path-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    min-height: 26px;
    padding: 3px 5px;
  }

  .records-page-card .record-proof-compact .path-row span {
    min-width: 0;
    font-size: 10px;
    line-height: 18px;
  }

  .records-page-card .record-proof-compact .path-row small {
    align-self: center;
    font-size: 9px;
    line-height: 18px;
  }

  .records-page-card .record-proof-compact .path-row button {
    display: none;
  }
}

/* Final inventory filter layout: content-sized, continuous and overlap-safe. */
@media (min-width: 821px) {
  .inventory-advanced-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px 10px;
  }

  .inventory-advanced-filter > label {
    grid-column: auto;
    flex: 0 0 126px;
    width: 126px;
    min-width: 0;
  }

  .inventory-advanced-filter > .inventory-date-range {
    flex-basis: 312px;
    width: 312px;
    min-width: 312px;
  }

  .inventory-advanced-filter > .inventory-keyword {
    flex-basis: 220px;
    width: 220px;
  }

  .inventory-advanced-filter > label[data-filter-level="model"] {
    flex-basis: 168px;
    width: 168px;
  }

  .inventory-advanced-filter > .inventory-price-range {
    flex-basis: 230px;
    width: 230px;
  }

  .inventory-advanced-filter input,
  .inventory-advanced-filter select {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .inventory-advanced-filter .inventory-date-range .date-range-field {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) 22px;
    gap: 3px;
    width: 100%;
    padding: 0 5px;
  }

  .inventory-advanced-filter .inventory-date-range .date-range-field input {
    width: 100%;
    min-width: 0;
    padding: 0 3px;
    font-size: 12px;
  }

  .inventory-advanced-filter .inventory-date-range .date-range-field em {
    text-align: center;
  }

  .inventory-advanced-filter .inventory-filter-actions {
    display: flex;
    grid-column: auto;
    flex: 0 0 auto;
    gap: 8px;
    width: auto;
  }

  .inventory-advanced-filter .inventory-filter-actions button {
    min-width: 64px;
  }
}

/* Stable page switching and content-fit floating windows. */
#view {
  animation: none;
}

.modal:has(.special-task-completion-panel) {
  width: min(540px, calc(100vw - 32px));
  overflow: hidden;
}

.modal:has(.special-task-completed-panel) {
  width: min(680px, calc(100vw - 32px));
  overflow: hidden;
}

.special-task-completion-panel {
  box-sizing: border-box;
  width: 100%;
}

.special-task-completed-panel {
  box-sizing: border-box;
  width: 100%;
}

.special-task-completion-panel .drawer-head {
  padding: 16px 18px 13px;
}

.special-task-completion-panel .form {
  gap: 12px;
  padding: 16px 18px;
}

.special-task-proof-grid {
  min-height: 118px;
}

.special-task-proof-upload {
  min-height: 118px;
  padding: 12px;
}

.special-task-completion-actions {
  margin-top: 4px;
  padding-top: 12px;
}

.drawer:has(.machine-detail-v2) {
  background: rgba(15, 23, 42, .16);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.modal:has(.machine-detail-v2) {
  width: min(720px, calc(100vw - 40px));
  max-height: calc(100dvh - 32px);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .13);
}

.modal:has(.machine-detail-v2) .machine-detail-v2 {
  box-sizing: border-box;
  width: 100%;
  max-height: none;
  padding: 0;
  overflow: visible;
  border-radius: 16px;
}

.machine-detail-v2 .drawer-head {
  align-items: flex-start;
  margin: 0;
  padding: 17px 22px 14px;
  border-bottom: 1px solid #eef2f6;
}

.machine-detail-v2 .drawer-head h2 {
  color: #1d2939;
  font-size: 18px;
  font-weight: 650;
}

.machine-detail-v2 .drawer-head p {
  margin: 5px 0 0;
  color: #667085;
  font-size: 12px;
}

.machine-detail-v2 .machine-detail-back {
  min-height: 36px;
  padding: 7px 11px;
  border-color: #eaecf0;
  color: #475467;
  background: #fff;
  box-shadow: none;
  font-weight: 500;
}

.machine-detail-v2 > .form {
  gap: 0;
  padding: 15px 22px 18px;
}

.machine-detail-v2 .sku-row {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  margin: 3px 0;
}

.machine-detail-v2 .sku-row > b {
  padding-top: 7px;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
}

.machine-detail-v2 .sku-options {
  gap: 5px;
}

.machine-detail-v2 .sku-options span {
  padding: 6px 10px;
  border: 1px solid transparent;
  color: #667085;
  background: #f7f8fa;
  font-size: 12px;
  font-weight: 400;
}

.machine-detail-v2 .sku-options input:checked + span {
  border-color: #b9d3ff;
  color: #2167d5;
  background: #f5f9ff;
}

.machine-detail-v2 .sku-row > input[readonly] {
  border-color: #e4e7ec;
  color: #344054;
  background: #fafbfc;
  box-shadow: none;
}

.machine-detail-v2 .battery-full-shortcut {
  min-width: 64px;
  border-color: #d9e7fb;
  background: #f7faff;
  color: #3973c6;
  box-shadow: none;
  font-weight: 600;
}

.machine-detail-v2 .detail-single-fields {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid #eef2f6;
}

.machine-detail-v2 .detail-single-fields > label {
  grid-column: 1 / -1;
  gap: 5px;
  color: #667085;
  font-size: 15px;
  font-weight: 500;
}

.machine-detail-v2 .detail-single-fields input,
.machine-detail-v2 .detail-single-fields .money-input,
.machine-detail-v2 .detail-single-fields textarea {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none;
  border-color: #e4e7ec;
  box-shadow: none;
}

.machine-detail-v2 .detail-single-fields input,
.machine-detail-v2 .detail-single-fields textarea,
.machine-detail-v2 .detail-single-fields .money-input > span,
.machine-detail-v2 .detail-single-fields .money-input > em {
  font-size: 15px;
}

.machine-detail-v2 .detail-single-fields > label > .field-imei {
  width: 40% !important;
  max-width: 40%;
}

.machine-detail-v2 .detail-single-fields .money-input {
  grid-template-columns: 30px minmax(0, 1fr) 30px;
}

.machine-detail-v2 .detail-single-fields .money-input > span,
.machine-detail-v2 .detail-single-fields .money-input > em {
  color: #98a2b3;
  background: #fafbfc;
}

/* Keep the five primary machine-entry controls compact without affecting notes. */
.machine-detail-v2 {
  --machine-detail-compact-control-height: calc(var(--control-height) * .7);
}

.machine-detail-v2 .field-model,
.machine-detail-v2 .percent-input,
.machine-detail-v2 .battery-full-shortcut,
.machine-detail-v2 .detail-single-fields > label > input,
.machine-detail-v2 .detail-single-fields .money-input {
  height: var(--machine-detail-compact-control-height);
  min-height: var(--machine-detail-compact-control-height);
}

.machine-detail-v2 .field-model,
.machine-detail-v2 .percent-input input,
.machine-detail-v2 .detail-single-fields > label > input,
.machine-detail-v2 .detail-single-fields .money-input input {
  padding-top: 3px;
  padding-bottom: 3px;
}

.machine-detail-v2 .percent-input input,
.machine-detail-v2 .detail-single-fields .money-input input {
  height: 100%;
  min-height: 0;
}

.machine-detail-v2 .detail-single-fields .money-input {
  width: 30% !important;
  min-width: 180px;
  max-width: 210px;
}

.machine-detail-v2 .field-description {
  min-height: 54px;
  resize: vertical;
}

.machine-detail-v2 .drawer-actions {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid #eef2f6;
}

.machine-detail-v2 .drawer-actions button {
  min-height: 38px;
  padding: 8px 13px;
  box-shadow: none;
  font-weight: 600;
}

.machine-detail-v2 .drawer-actions:has([data-mode="continue"]) [data-mode="close"] {
  border-color: #dbe8fb;
  color: #3973c6;
  background: #f4f8fe;
}

/* Warehouse and stock inventory share one compact, dictionary-driven editor. */
.drawer:has(.inventory-edit-detail) {
  box-sizing: border-box;
  padding-left: 215px;
}

.modal:has(.inventory-edit-detail) {
  width: min(900px, calc(100vw - 40px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

.modal:has(.inventory-edit-detail) .inventory-edit-detail,
.inventory-edit-detail > .form {
  max-height: none;
  overflow: hidden;
}

.inventory-edit-detail .drawer-head {
  padding: 13px 20px 11px;
}

.inventory-edit-detail > .form {
  padding: 11px 20px 14px;
}

.inventory-edit-dictionary-grid,
.inventory-edit-basic-grid,
.inventory-edit-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}

.inventory-edit-select,
.inventory-edit-basic-grid > label,
.inventory-edit-notes-grid > label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
}

.inventory-edit-select.is-hidden { display: none; }

.inventory-edit-select select,
.inventory-edit-basic-grid input,
.inventory-edit-basic-grid select,
.inventory-edit-notes-grid textarea {
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 3px 9px;
  border-color: #e4e7ec;
  box-shadow: none;
  font-size: 14px;
}

/* Keep real ERP select values readable while preserving dedicated clear/caret space. */
select {
  text-overflow: clip;
}

select option {
  white-space: normal;
  overflow-wrap: anywhere;
}

.clearable-select {
  min-width: 0;
}

@media (min-width: 821px) {
  .filter-panel .filter-employee {
    width: clamp(210px, 18vw, 270px);
  }

  .filter-panel .filter-work-item {
    width: clamp(260px, 24vw, 340px);
  }

  .inventory-advanced-filter > label[data-filter-level="brand"],
  .one-click-filter-grid > label[data-filter-level="brand"] {
    flex-basis: 210px;
    width: 210px;
  }

  .inventory-advanced-filter > label[data-filter-level="model"],
  .one-click-filter-grid > label[data-filter-level="model"] {
    flex-basis: 280px;
    width: 280px;
  }

  .listing-preset-select,
  .listing-batch-preset select {
    width: 240px;
    min-width: 220px;
    max-width: min(320px, 100%);
  }

}

.picker-scroll button,
.model-scroll button {
  white-space: normal;
  overflow-wrap: anywhere;
}

.inventory-edit-basic-grid {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #eef2f6;
}

.inventory-edit-basic-grid .battery-health-controls {
  min-height: 30px;
}

.inventory-edit-basic-grid .percent-input,
.inventory-edit-basic-grid .battery-full-shortcut {
  height: 30px;
  min-height: 30px;
}

.inventory-edit-accessories {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  color: #667085;
  font-size: 13px;
}

.inventory-edit-accessories > b { font-weight: 600; }
.inventory-edit-accessories .sku-options { gap: 5px; }
.inventory-edit-accessories .sku-options span {
  padding: 5px 10px;
  font-size: 14px;
}

.inventory-edit-cost-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 18px minmax(130px, 1fr) 18px minmax(140px, .8fr) minmax(130px, 1fr);
  align-items: end;
  gap: 7px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #eef2f6;
}

.inventory-edit-cost-row > label {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
}

.inventory-edit-cost-row > b {
  align-self: end;
  height: 30px;
  line-height: 30px;
  color: #98a2b3;
  text-align: center;
}

.inventory-edit-cost-row .money-input {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  border-color: #e4e7ec;
  box-shadow: none;
}

.inventory-edit-cost-row .money-input input { min-width: 0; height: 28px; min-height: 28px; padding: 2px 6px; }
.inventory-edit-cost-row .money-input > span,
.inventory-edit-cost-row .money-input > em { font-size: 13px; }

.inventory-edit-total {
  display: flex;
  height: 30px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #dbe5f2;
  border-radius: 7px;
  background: #f4f7fb;
  color: #66758c;
  white-space: nowrap;
}

.inventory-edit-total strong { color: #17233a; font-size: 17px; }

.inventory-edit-notes-grid {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 7px;
}

.inventory-edit-notes-grid textarea {
  min-height: 38px;
  height: 38px;
  padding-top: 4px;
  padding-bottom: 4px;
  resize: none;
}

.inventory-edit-detail .drawer-actions {
  margin-top: 10px;
  padding-top: 10px;
}

.inventory-edit-detail .drawer-actions button {
  min-height: 34px;
  padding: 6px 12px;
}

@media (max-width: 820px) {
  .drawer:has(.inventory-edit-detail) { padding-left: 0; }
  .modal:has(.machine-detail-v2) { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .machine-detail-v2 .drawer-head { padding: 15px 16px 12px; }
  .machine-detail-v2 > .form { padding: 13px 16px 16px; }
  .machine-detail-v2 .sku-row { grid-template-columns: 1fr; gap: 5px; margin: 5px 0; }
  .machine-detail-v2 .sku-row > b { padding-top: 0; }
  .machine-detail-v2 .detail-single-fields > label > .field-imei { width: 100% !important; max-width: none; }
  .inventory-edit-dictionary-grid,
  .inventory-edit-basic-grid { grid-template-columns: 1fr 1fr; }
  .inventory-edit-notes-grid { grid-template-columns: 1fr; }
  .inventory-edit-cost-row { grid-template-columns: minmax(100px, 1fr) 16px minmax(100px, 1fr) 16px minmax(120px, .8fr); }
  .inventory-edit-retail { grid-column: 1 / -1; }
}

/* Work publishing: full-width task list with an on-demand publisher. */
.special-task-records-full {
  width: 100%;
  min-height: calc(100dvh - 110px);
}

.special-task-records-full .special-task-records-head {
  padding: 18px 20px;
}

.special-task-records-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.special-task-records-actions > span {
  padding: 5px 10px;
  border-radius: 999px;
  color: #41649c;
  background: #e8f0ff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.special-task-records-actions > button {
  min-width: 96px;
  min-height: 38px;
  padding: 8px 15px;
}

.special-task-records-full .special-task-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.special-task-records-full .special-task-table {
  min-width: 860px;
}

.special-task-records-full .special-task-table th:first-child {
  width: auto;
}

.special-task-records-full .special-task-table th:nth-child(2) {
  width: 160px;
}

.special-task-records-full .special-task-table th:nth-child(3) {
  width: 112px;
}

.special-task-records-full .special-task-table th:nth-child(4) {
  width: 170px;
}

.special-task-records-full .special-task-table th:nth-child(5) {
  width: 116px;
}

.special-task-records-full .special-task-table th:nth-child(6) {
  width: 82px;
}

.special-task-records-full .special-task-table th,
.special-task-records-full .special-task-table td {
  box-sizing: border-box;
  height: 40px;
  padding: 5px 14px;
  vertical-align: middle;
}

.special-task-records-full .special-task-table thead tr,
.special-task-records-full .special-task-table tbody tr {
  height: 40px;
}

.special-task-records-full .special-task-table [data-delete-special-task] {
  height: 26px;
  min-height: 26px;
  padding: 2px 9px;
}

.modal:has(.special-task-publish-panel) {
  width: min(720px, calc(100vw - 32px));
  overflow: hidden;
}

.special-task-publish-panel {
  box-sizing: border-box;
  width: 100%;
}

.special-task-publish-panel .drawer-head {
  margin: 0;
  padding: 17px 20px 14px;
  border-bottom: 1px solid #e6ecf4;
}

.special-task-publish-panel .form {
  gap: 13px;
  padding: 17px 20px 20px;
}

.special-task-publish-panel textarea {
  min-height: 116px;
  resize: none;
}

.special-task-publish-panel .special-task-employee-field {
  width: min(360px, 100%);
}

.special-task-publish-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 3px;
}

.special-task-publish-actions button {
  min-width: 84px;
}

@media (max-width: 700px) {
  .special-task-records-full {
    min-height: 0;
  }

  .special-task-records-head {
    align-items: flex-start;
  }

  .special-task-records-actions {
    align-items: flex-end;
    flex-direction: column-reverse;
  }

  .special-task-compose-options {
    align-items: stretch;
    flex-direction: column;
  }

  .special-task-publish-panel .special-task-deadline,
  .special-task-publish-panel .special-task-employee-field {
    width: 100%;
    max-width: none;
    flex-basis: auto;
  }
}

/* Position workspace: one surface, aligned columns and contextual work creation. */
.position-workspace-toolbar {
  min-height: 78px;
  box-sizing: border-box;
}

.role-permission-workspace {
  align-items: stretch;
}

.role-permission-workspace > .card {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.role-permission-workspace > .card + .card {
  margin-top: 0;
}

.role-permission-tabbar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 10px;
}

.role-permission-tabbar .role-permission-tabs {
  grid-column: 2;
  margin: 0;
}

.role-new-work-button {
  grid-column: 3;
  justify-self: end;
  min-height: 36px;
  padding: 7px 12px;
  background: #2f7be8;
  border-color: #2f7be8;
}

@media (max-width: 820px) {
  .role-permission-tabbar {
    grid-template-columns: 1fr auto;
    padding: 10px 14px;
  }

  .role-permission-tabbar .role-permission-tabs {
    grid-column: 1;
    width: 100%;
  }

  .role-new-work-button {
    grid-column: 2;
  }
}

.role-work-scope-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px 7px 12px;
  border: 1px solid #dfe6ef;
  border-radius: 10px;
  background: #fff;
}

.role-work-scope-item:has(input:checked) {
  border-color: #9dc1fa;
  background: #f0f6ff;
}

.role-work-scope-item > label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.role-work-edit-button {
  min-width: 54px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #cfe0f7;
  border-radius: 8px;
  color: #2868c7;
  background: #edf5ff;
  box-shadow: none;
  font-size: 12px;
}

.role-work-edit-button:hover {
  color: #fff;
  background: #2f7be8;
  border-color: #2f7be8;
}

/* 员工库存复用管理端列表结构；仅在实际列数超出可用宽度时横向滚动。 */
.employee-inventory-table {
  width: 100%;
  min-width: 1120px;
}

.employee-inventory-table th,
.employee-inventory-table td {
  padding-left: 6px;
  padding-right: 6px;
}

.employee-inventory-table .warehouse-description {
  min-width: 150px;
  max-width: 230px;
}

.mobile-stock-description.is-internal {
  padding: 8px 10px;
  border: 1px solid #f2d79c;
  border-radius: 8px;
  background: #fff9e9;
}

.message-reference.is-disabled {
  cursor: default;
  opacity: .78;
}

.message-readonly-note {
  padding: 12px 16px;
  border-top: 1px solid #e4ebf4;
  color: #6b7890;
  background: #f8fafc;
  font-size: 13px;
  text-align: center;
}

.role-work-scope-item.is-selected {
  border-color: #9dc1fa;
  background: #f0f6ff;
}

.role-work-scope-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.role-work-scope-copy strong {
  color: #283a55;
  font-size: 13px;
}

.role-work-scope-copy small {
  overflow: hidden;
  color: #8793a4;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-work-scope-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 32px 18px;
  border: 1px dashed #d6e0ed;
  border-radius: 10px;
  color: #8a96a8;
  background: #fafcff;
  text-align: center;
}

.role-work-scope-empty strong {
  color: #526279;
}

.modal:has(.position-work-scope-picker) {
  width: min(980px, 100%);
  max-height: min(820px, 90vh);
  overflow: hidden;
}

@media (min-width: 821px) and (max-width: 1500px) {
  .modal:has(.position-work-scope-picker) {
    width: min(980px, calc(100vw - 249px));
    transform: translateX(104px);
  }
}

.position-work-scope-picker {
  display: grid;
  min-height: 0;
}

.position-work-scope-picker .drawer-head p {
  margin: 4px 0 0;
  color: #7c899c;
  font-size: 12px;
}

.position-work-scope-picker-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.position-work-scope-picker form {
  display: grid;
  min-height: 0;
}

.position-work-scope-picker-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #e5ebf3;
  color: #7a8799;
  background: #f8fafc;
  font-size: 12px;
}

.position-work-scope-picker-summary strong {
  color: #2468ce;
}

.position-work-order-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 7px;
  color: #667991;
  background: #edf2f8;
  font-weight: 600;
  transition: color .18s ease, background .18s ease;
}

.position-work-order-hint.is-saving {
  color: #9a6a12;
  background: #fff5dc;
}

.position-work-order-hint.is-saved {
  color: #07835c;
  background: #e8f8f1;
}

.position-work-order-hint.is-error {
  color: #c53a42;
  background: #fff0f1;
}

.position-work-scope-picker-table-wrap {
  max-height: 58vh;
  padding: 12px 16px;
  overflow: auto;
}

.position-work-scope-picker-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e1e8f1;
  border-radius: 10px;
  overflow: hidden;
}

.position-work-scope-picker-table th,
.position-work-scope-picker-table td {
  padding: 10px 9px;
  border-bottom: 1px solid #e7edf4;
  color: #53647b;
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.position-work-scope-picker-table th {
  color: #697a91;
  background: #f3f7fc;
  font-weight: 600;
}

.position-work-scope-picker-table tr:last-child td {
  border-bottom: 0;
}

.position-work-scope-picker-table tbody tr.is-selected {
  background: #f1f7ff;
}

.position-work-scope-picker-table th:nth-child(1),
.position-work-scope-picker-table td:nth-child(1) {
  width: 38px;
  padding-right: 4px;
  padding-left: 4px;
  text-align: center;
}

.position-work-scope-picker-table th:nth-child(2),
.position-work-scope-picker-table td:nth-child(2) {
  width: 48px;
  text-align: center;
}

.position-work-scope-picker-table th:nth-child(3) {
  width: 18%;
}

.position-work-scope-picker-table th:nth-child(4) {
  width: 10%;
}

.position-work-scope-picker-table th:nth-child(5) {
  width: 11%;
}

.position-work-scope-picker-table th:nth-child(6) {
  width: 11%;
}

.position-work-scope-picker-table th:nth-child(8) {
  width: 126px;
}

.position-work-drag-cell {
  cursor: grab;
  user-select: none;
}

.position-work-drag-cell:active {
  cursor: grabbing;
}

.position-work-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #8798ae;
  background: #eef3f8;
  cursor: grab;
  touch-action: none;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}

.position-work-drag-handle:hover,
.position-work-drag-handle:focus-visible {
  border-color: #9dbce8;
  color: #246fd0;
  background: #e5f0ff;
  outline: none;
}

.position-work-drag-handle:active {
  cursor: grabbing;
  transform: scale(.96);
}

.position-work-drag-handle svg {
  width: 12px;
  height: 18px;
  fill: currentColor;
  pointer-events: none;
}

.position-work-scope-picker-table tbody tr.is-dragging {
  opacity: .5;
  background: #e7f1ff;
  box-shadow: inset 3px 0 #2f7be8;
}

.position-work-scope-picker-table tbody.is-sorting tr:not(.is-dragging) {
  transition: background .14s ease, box-shadow .14s ease;
}

.position-work-scope-picker form.is-saving-order .position-work-drag-handle {
  cursor: wait;
  opacity: .55;
}

.position-work-scope-picker-table input[type="checkbox"] {
  width: 17px;
  height: 17px;
  min-height: 17px;
  margin: 0;
  accent-color: #2f7be8;
}

.position-work-scope-picker-table td strong,
.position-work-rule {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.position-work-scope-picker-table td strong {
  color: #263952;
  font-size: 13px;
}

.position-work-row-actions {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.position-work-row-actions button {
  min-width: 48px;
  padding: 6px 10px;
}

.position-work-scope-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #e5ebf3;
  background: #fff;
}

.position-work-scope-picker-actions button {
  min-width: 82px;
}

@media (max-width: 820px) {
  .position-work-scope-picker-summary {
    flex-wrap: wrap;
  }

  .position-work-order-hint {
    order: 3;
    width: 100%;
  }

  .position-work-scope-picker-table-wrap {
    padding: 10px;
  }

  .position-work-scope-picker-table {
    min-width: 760px;
  }
}

/* 员工端特别任务改为全宽单行列表，保留原有状态配色与视觉语言。 */
.employee-special-task-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.employee-special-task {
  min-height: 70px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.employee-special-task > i {
  height: 38px;
}

.employee-special-task > div {
  min-width: 0;
}

.employee-special-task strong {
  overflow: hidden;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-special-task small {
  margin-top: 4px;
}

/* 一键同售筛选区：按内容宽度连续排列，避免筛选项被网格拉开后产生大段空白。 */
@media (min-width: 821px) {
  .one-click-filter {
    gap: 8px;
    padding: 10px 12px;
  }

  .one-click-filter-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px 10px;
  }

  .one-click-filter-grid > label {
    flex: 0 0 136px;
    width: 136px;
    min-width: 0;
    gap: 5px;
    font-size: 12px;
  }

  .one-click-filter-grid > .one-click-date {
    flex-basis: 326px;
    width: 326px;
    min-width: 326px;
  }

  .one-click-filter-grid > .one-click-keyword {
    flex-basis: 252px;
    width: 252px;
  }

  .one-click-filter-grid > label[data-filter-level="model"] {
    flex-basis: 176px;
    width: 176px;
  }

  .one-click-filter-grid > .one-click-price {
    flex-basis: 258px;
    width: 258px;
  }

  .one-click-filter-grid input,
  .one-click-filter-grid select {
    height: 36px;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .one-click-filter .date-range-field,
  .one-click-filter .clearable-datetime {
    height: 36px;
    min-height: 36px;
  }

  .one-click-filter .date-range-field input {
    height: 28px;
    min-height: 28px;
  }

  .one-click-keyword,
  .one-click-price {
    grid-column: auto;
  }

  .one-click-filter-actions {
    gap: 10px;
    padding-top: 8px;
  }

  .one-click-filter-actions button {
    min-width: 88px;
    min-height: 34px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

#view .one-click-filter .clearable-select select { padding-right:32px; }
#view .one-click-filter .clearable-select.has-value select { padding-right:62px; }

/* 手机端一键同售最终布局覆盖：保持与库存卡片页同样的首屏密度。 */
@media (max-width: 820px) {
  #view .grid.listing-summary {
    display:none;
  }

  #view .one-click-sale-panel.card.pad {
    gap:10px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }

  #view .one-click-sale-panel > .section-title {
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  #view .one-click-sale-panel .one-click-filter {
    gap:8px;
    padding:0;
    border:0;
    background:transparent;
  }

  #view .one-click-sale-panel .one-click-filter-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:end;
    gap:8px;
  }

  #view .one-click-sale-panel .one-click-filter-grid > .one-click-keyword {
    grid-column:1 / -1;
    width:auto;
  }

  #view .one-click-sale-panel .one-click-filter-grid > .one-click-upload-status {
    grid-column:1;
    width:auto;
  }

  #view .one-click-sale-panel .one-click-keyword,
  #view .one-click-sale-panel .one-click-upload-status {
    gap:0;
    font-size:0;
  }

  #view .one-click-sale-panel .one-click-keyword input,
  #view .one-click-sale-panel .one-click-upload-status select {
    font-size:13px;
  }

  #view .one-click-sale-panel .one-click-filter-actions {
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    padding-top:8px;
  }

  #view .one-click-sale-panel .one-click-filter-actions > div {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:7px;
    width:100%;
  }

  #view .one-click-sale-panel .one-click-filter-actions > .listing-batch-actions {
    display:none;
  }

  #view .one-click-sale-panel .one-click-filter-actions > .listing-batch-actions.is-active {
    display:grid;
  }

  #view .one-click-sale-panel .one-click-filter-actions button {
    width:100%;
    min-width:0;
    min-height:34px;
    padding:6px 8px;
    border-radius:8px;
    font-size:11px;
  }
}
.inventory-detail-table .inventory-battery-cell {
  min-width: 62px;
  white-space: nowrap;
  text-align: center;
}

/* 手机悬浮窗统一留出底部导航安全区，并隐藏滚动条但保留触摸滚动。 */
html:has(.proof-image-overlay),
html:has(.label-print-modal-overlay),
html:has(#drawer.open:not(.minimized)),
body:has(.proof-image-overlay),
body:has(.label-print-modal-overlay),
body:has(#drawer.open:not(.minimized)) {
  overflow: hidden;
}

.proof-image-stage {
  --proof-image-gap: 14px;
  position: relative;
  padding: 0;
}

.proof-image-stage img {
  position: absolute;
  inset: var(--proof-image-gap);
  width: calc(100% - (var(--proof-image-gap) * 2));
  height: calc(100% - (var(--proof-image-gap) * 2));
  cursor: zoom-out;
}

@media (max-width: 820px) {
  .drawer {
    inset: 0 0 calc(64px + env(safe-area-inset-bottom)) 0;
    align-items: center;
    padding: 12px 14px;
    overflow: hidden;
  }

  .drawer .modal {
    width: min(92vw, 520px);
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
    overflow: auto;
    border-radius: 12px;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .drawer .modal::-webkit-scrollbar,
  .drawer .modal *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .drawer:has(.inventory-history-panel) {
    align-items: center;
    padding: 12px 14px;
    overflow: hidden;
  }

  .modal:has(.inventory-history-panel) {
    width: min(92vw, 520px);
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
    margin: 0;
    overflow: auto;
  }

  .modal:has(.listing-image-viewer) {
    width: min(88vw, 380px);
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
  }

  .listing-image-viewer {
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
  }

  .listing-viewer-stage {
    width: min(calc(100% - 20px), calc(100dvh - 250px), 340px);
  }

  .drawer-restore {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
  }

  .proof-image-overlay {
    inset: 0 0 calc(64px + env(safe-area-inset-bottom)) 0;
    z-index: 79;
    padding: 12px 18px;
  }

  .proof-image-modal {
    width: min(88vw, 360px);
    height: min(72dvh, 620px, calc(100dvh - 112px - env(safe-area-inset-bottom)));
    grid-template-rows: 46px minmax(0, 1fr);
    border-radius: 12px;
  }

  .proof-image-head {
    padding: 7px 9px 7px 14px;
  }

  .proof-image-head strong {
    font-size: 15px;
  }

  .proof-image-close {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .proof-image-stage {
    --proof-image-gap: 8px;
    padding: 0;
  }

  .label-print-modal-overlay {
    inset: 0 0 calc(64px + env(safe-area-inset-bottom)) 0;
    padding: 12px 14px;
  }

  .label-print-modal {
    width: min(92vw, 520px);
    max-height: calc(100dvh - 96px - env(safe-area-inset-bottom));
  }

  .label-print-preview-list {
    scrollbar-width: none;
  }

  .label-print-preview-list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .toast {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}

/* 手机个人中心固定单屏：管理端与员工端共用，不允许页面上下滚动。 */
@media (max-width: 820px) {
  html:has(body.mobile-profile-page),
  body.mobile-profile-page {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.mobile-profile-page {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  body.mobile-profile-page .shell {
    height: calc(100dvh - 64px - env(safe-area-inset-bottom));
    min-height: 0;
    overflow: hidden;
  }

  body.mobile-profile-page .main {
    height: 100%;
    min-height: 0;
    padding: 8px 10px;
    overflow: hidden;
  }

  body.mobile-profile-page #view.profile-view {
    height: 100%;
    min-height: 0;
    gap: 6px;
    overflow: hidden;
  }

  body.mobile-profile-page .profile-section-tabs {
    flex: 0 0 auto;
    gap: 3px;
    padding: 3px;
    border-radius: 10px;
  }

  body.mobile-profile-page .profile-section-tabs > button {
    min-height: 38px;
    gap: 4px;
    padding: 3px 5px;
    border-radius: 7px;
  }

  body.mobile-profile-page .profile-section-tab-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 6px;
  }

  body.mobile-profile-page .profile-section-tab-icon svg {
    width: 14px;
    height: 14px;
  }

  body.mobile-profile-page .profile-section-tabs strong {
    font-size: 11px;
  }

  body.mobile-profile-page .profile-view > .card:not(.profile-theme-section) {
    flex: 0 0 auto;
    min-height: 0;
    padding: 9px 10px;
    overflow: hidden;
  }

  body.mobile-profile-page .profile-view > .card:not(.profile-theme-section) > .section-title {
    min-height: 24px;
    margin-bottom: 5px;
  }

  body.mobile-profile-page .profile-view > .card:not(.profile-theme-section) > .section-title h2 {
    font-size: 18px;
    line-height: 1.2;
  }

  body.mobile-profile-page .profile-view > .card:not(.profile-theme-section) > .section-title .muted {
    font-size: 11px;
    white-space: nowrap;
  }

  body.mobile-profile-page #profileForm {
    gap: 6px;
  }

  body.mobile-profile-page .profile-head {
    gap: 9px;
    min-height: 48px;
  }

  body.mobile-profile-page .profile-head .avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 18px;
  }

  body.mobile-profile-page .profile-head strong {
    font-size: 13px;
    line-height: 1.2;
  }

  body.mobile-profile-page .profile-head .muted {
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.2;
  }

  body.mobile-profile-page #profileForm > .grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
  }

  body.mobile-profile-page #profileForm label {
    gap: 2px;
    min-width: 0;
    color: #5f6f85;
    font-size: 11px;
    line-height: 1.15;
  }

  body.mobile-profile-page #profileForm input:not([type="file"]):not([type="hidden"]) {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 5px 8px;
    font-size: 16px;
  }

  body.mobile-profile-page #profileForm > .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
  }

  body.mobile-profile-page #profileForm > .actions button {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 5px 8px;
    font-size: 13px;
  }

  body.mobile-profile-page .profile-view > .profile-theme-section {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 6px;
    padding: 6px 8px;
    overflow: hidden;
  }

  body.mobile-profile-page .profile-theme-head {
    display: block;
  }

  body.mobile-profile-page .profile-theme-head h2 {
    font-size: 12px;
    line-height: 1.2;
  }

  body.mobile-profile-page .profile-theme-head p {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.2;
  }

  body.mobile-profile-page .profile-theme-head > span {
    display: none;
  }

  body.mobile-profile-page .profile-theme-section .theme-picker {
    gap: 5px;
  }

  body.mobile-profile-page .profile-theme-section .theme-choice {
    grid-template-columns: 30px minmax(0, 1fr) 14px;
    gap: 4px;
    min-height: 36px;
    padding: 4px;
    border-radius: 8px;
  }

  body.mobile-profile-page .profile-theme-section .theme-preview {
    width: 30px;
    height: 22px;
    border-radius: 5px;
  }

  body.mobile-profile-page .profile-theme-section .theme-preview i { width: 6px; }
  body.mobile-profile-page .profile-theme-section .theme-preview b { top: 3px; left: 9px; width: 18px; height: 4px; }
  body.mobile-profile-page .profile-theme-section .theme-preview em { top: 10px; left: 9px; width: 8px; height: 9px; }
  body.mobile-profile-page .profile-theme-section .theme-preview strong { top: 10px; right: 2px; width: 8px; height: 9px; }
  body.mobile-profile-page .profile-theme-section .theme-choice-copy strong { font-size: 10px; }
  body.mobile-profile-page .profile-theme-section .theme-choice-check {
    width: 14px;
    height: 14px;
    font-size: 9px;
  }
}

@media (max-width: 820px) and (max-height: 680px) {
  body.mobile-profile-page .main {
    padding: 5px 8px;
  }

  body.mobile-profile-page #view.profile-view {
    gap: 4px;
  }

  body.mobile-profile-page .profile-section-tabs > button {
    min-height: 34px;
  }

  body.mobile-profile-page .profile-view > .card:not(.profile-theme-section) {
    padding: 6px 8px;
  }

  body.mobile-profile-page .profile-view > .card:not(.profile-theme-section) > .section-title {
    min-height: 20px;
    margin-bottom: 3px;
  }

  body.mobile-profile-page .profile-view > .card:not(.profile-theme-section) > .section-title h2 {
    font-size: 16px;
  }

  body.mobile-profile-page #profileForm {
    gap: 4px;
  }

  body.mobile-profile-page .profile-head {
    min-height: 42px;
  }

  body.mobile-profile-page .profile-head .avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  body.mobile-profile-page .profile-head .muted {
    display: none;
  }

  body.mobile-profile-page #profileForm > .grid.cols-2 {
    gap: 4px 6px;
  }

  body.mobile-profile-page #profileForm input:not([type="file"]):not([type="hidden"]) {
    height: 34px;
    min-height: 34px;
  }

  body.mobile-profile-page #profileForm > .actions button {
    min-height: 32px;
  }

  body.mobile-profile-page .profile-view > .profile-theme-section {
    padding: 5px 7px;
  }
}

/* Unified sliding selection plate for merged two-option controls. */
.role-permission-tabs,
.reference-picker-tabs:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
.segment-control {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.role-permission-tabs::before,
.reference-picker-tabs:has(> button:nth-child(2)):not(:has(> button:nth-child(3)))::before,
.segment-control::before {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 8px;
  background: #2f7be8;
  box-shadow: 0 5px 12px rgba(38, 116, 223, .2);
  content: "";
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform var(--segmented-motion-duration, .28s) cubic-bezier(.22, 1, .36, 1), box-shadow var(--segmented-motion-duration, .28s) ease;
  will-change: transform;
}

.role-permission-tabs:has(> button:nth-child(2).active)::before,
.reference-picker-tabs:has(> button:nth-child(2).active):not(:has(> button:nth-child(3)))::before,
.segment-control:has(> input:nth-of-type(2):checked)::before {
  transform: translate3d(100%, 0, 0);
}

.role-permission-tabs > button,
.reference-picker-tabs:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button,
.segment-control > label {
  position: relative;
  z-index: 1;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transition: color .2s ease;
}

.role-permission-tabs > button.active,
.reference-picker-tabs:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button.active,
.segment-control > input:checked + label {
  border-color: transparent;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.reference-picker-tabs:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 3px;
  border: 1px solid #dbe4f0;
  border-radius: 11px;
  background: #f4f7fb;
}

.reference-picker-tabs:has(> button:nth-child(2)):not(:has(> button:nth-child(3))) > button {
  width: 100%;
  border: 0;
  border-radius: 8px;
}

.segment-control {
  gap: 0;
  padding: 3px;
  border: 1px solid #dbe4f0;
  border-radius: 9px;
  background: #f4f7fb;
}

.segment-control > label,
.segment-control > label:first-of-type,
.segment-control > label:last-of-type {
  border: 0;
  border-radius: 7px;
}

@media (max-width: 820px) {
  .mobile-stock-view-switch {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --segmented-motion-duration: .32s;
  }

  .mobile-stock-view-switch::before {
    position: absolute;
    z-index: 0;
    top: 2px;
    bottom: 2px;
    left: 2px;
    width: calc(50% - 2px);
    border-radius: 8px;
    background: #2674df;
    box-shadow: 0 5px 12px rgba(38, 116, 223, .2);
    content: "";
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: transform var(--segmented-motion-duration, .32s) cubic-bezier(.22, 1, .36, 1), box-shadow var(--segmented-motion-duration, .32s) ease;
    will-change: transform;
  }

  .mobile-stock-view-switch:has(> button:nth-child(2).active)::before {
    transform: translate3d(100%, 0, 0);
  }

  .mobile-stock-view-switch > button {
    position: relative;
    z-index: 1;
    color: #2a67ba;
    background: transparent;
    box-shadow: none;
    transition: color .22s ease;
  }

  .mobile-stock-view-switch > button.active {
    color: #fff;
    background: transparent;
    box-shadow: none;
  }
}

/* 手机经营看板固定单屏：完整内容始终位于底部导航上方。 */
@media (max-width: 820px) {
  html:has(body.mobile-business-page),
  body.mobile-business-page {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.mobile-business-page {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  body.mobile-business-page .shell {
    height: calc(100dvh - 64px - env(safe-area-inset-bottom));
    min-height: 0;
    overflow: hidden;
  }

  body.mobile-business-page .main {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  body.mobile-business-page #view {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 14px;
    overflow: hidden;
  }

  body.mobile-business-page #view > .business-toolbar,
  body.mobile-business-page #view > .business-board {
    margin-top: 0;
  }
}

@media (max-width: 820px) and (max-height: 680px) {
  body.mobile-business-page .main {
    padding: 7px 10px 6px;
  }

  body.mobile-business-page #view {
    gap: 7px;
  }

  body.mobile-business-page .business-toolbar {
    padding: 7px 8px;
    border-radius: 11px;
  }

  body.mobile-business-page .business-board {
    gap: 5px;
    padding: 7px 8px;
    border-radius: 13px;
  }

  body.mobile-business-page .business-board .section-title h2 {
    gap: 6px;
    font-size: 17px;
  }

  body.mobile-business-page .business-board .section-title h2::before {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
    box-shadow: inset 0 0 0 6px #eaf3ff;
  }

  body.mobile-business-page .business-board.is-sales .section-title h2::before {
    box-shadow: inset 0 0 0 6px #e9faf2;
  }

  body.mobile-business-page .business-board.is-inventory .section-title h2::before {
    box-shadow: inset 0 0 0 6px #fff0f0;
  }

  body.mobile-business-page .business-metric {
    min-height: 54px;
    gap: 2px;
    padding: 4px 6px;
  }

  body.mobile-business-page .business-metric span {
    font-size: 10px;
    line-height: 1.15;
  }

  body.mobile-business-page .business-metric strong {
    font-size: 18px;
    line-height: 1.05;
  }

  body.mobile-business-page .business-metric small {
    font-size: 9px;
    line-height: 1.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-permission-tabs,
  .reference-picker-tabs:has(> button:nth-child(2)):not(:has(> button:nth-child(3))),
  .segment-control,
  .mobile-stock-view-switch {
    --segmented-motion-duration: .01ms;
  }

  .role-permission-tabs > button,
  .reference-picker-tabs > button,
  .segment-control > label,
  .mobile-stock-view-switch > button {
    transition-duration: .01ms !important;
  }
}
.inventory-detail-table .inventory-record-time {
  min-width: 132px;
  white-space: nowrap;
}

.search-clear-field {
  position: relative;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.search-clear-field > input {
  width: 100%;
  padding-right: 36px !important;
}

.search-clear-button {
  position: absolute;
  top: 50%;
  right: 8px;
  z-index: 2;
  display: grid;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #8795a8;
  background: #edf2f8;
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
  place-items: center;
}

.search-clear-button:hover {
  color: #334155;
  background: #e1e8f1;
  transform: translateY(-50%);
}

.search-clear-button[hidden],
#mobileStockClear[hidden] {
  display: none !important;
}

.after-sales-summary {
  margin-bottom: 16px;
}

.after-sales-filter {
  display: flex;
  align-items: end;
  gap: 10px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft, #f7f9fc);
}

.after-sales-filter label {
  min-width: 170px;
}

.after-sales-filter .grow {
  flex: 1;
}

.after-sales-table .after-sales-detail-cell {
  min-width: 210px;
  max-width: 320px;
  white-space: normal;
  line-height: 1.55;
}

.inventory-machine-info-cell {
  min-width: 250px;
}

.inventory-condition-cell {
  min-width: 58px;
  white-space: nowrap;
}

.inventory-condition-badge {
  min-width: 38px;
  padding: 2px 5px;
  flex: 0 0 auto;
  border: 1px solid #e9b225;
  border-radius: 5px;
  background: #fff5c9;
  color: #8a6200;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.inventory-machine-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2.4px;
  line-height: 1.35;
}

.inventory-machine-info > strong {
  color: #1677ff;
  font-weight: 500;
}

.inventory-machine-info > small {
  margin-top: 0;
  color: #1677ff;
  font-size: 12px;
  font-weight: 500;
  white-space: normal;
}

.mobile-stock-machine-heading {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mobile-stock-machine-heading h3 {
  min-width: 0;
  margin: 0;
}

.after-sales-editor {
  max-width: 760px;
}

.quality-inspection-summary { margin-bottom: 16px; }
.quality-inspection-filter { display:flex; align-items:end; gap:10px; margin:14px 0; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--soft,#f7f9fc); }
.quality-inspection-filter label { min-width:170px; }
.quality-inspection-filter .grow { flex:1; }
.quality-inspection-table th, .quality-inspection-table td { vertical-align:top; }
.quality-inspection-cell-sub { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.quality-inspection-result-cell { min-width:180px; max-width:280px; white-space:normal; line-height:1.55; }
.quality-inspection-images { display:flex; gap:5px; min-width:94px; flex-wrap:wrap; }
.quality-inspection-thumb { display:block; width:42px; height:42px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#f1f5f9; }
.quality-inspection-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.quality-inspection-no-images { color:var(--muted); font-size:12px; white-space:nowrap; }
.quality-inspection-editor { max-width:900px; }
.quality-inspection-guide { width:100%; height:auto; min-height:0; max-height:min(680px,calc(100dvh - 28px)); max-width:780px; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
.quality-inspection-guide.is-height-locked { height:min(var(--quality-inspection-initial-height),680px,calc(100dvh - 28px)); }
.modal:has(.quality-inspection-guide) { height:auto; max-height:min(680px,calc(100dvh - 28px)); overflow:hidden; }
.quality-inspection-guide .drawer-head { padding:13px 18px 11px; }
.quality-inspection-guide .drawer-head p { margin:4px 0 0; line-height:1.35; }
.quality-inspection-guide > .form { min-height:0; gap:0; padding:12px 18px 15px; align-content:start; grid-auto-rows:max-content; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#aebed2 transparent; }
.quality-inspection-guide > .form::-webkit-scrollbar { display:block; width:8px; }
.quality-inspection-guide > .form::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:#aebed2; background-clip:padding-box; }
.quality-inspection-guide > .form::-webkit-scrollbar-track { background:transparent; }
.quality-inspection-basic { display:grid; gap:16px; padding:4px 0 18px; border-bottom:1px solid var(--line); }
.quality-inspection-basic label { display:grid; gap:7px; }
.quality-inspection-basic label > span { color:#26364d; font-size:14px; font-weight:700; }
.quality-inspection-basic i, .quality-inspection-question-title i { margin-right:3px; color:#e02424; font-style:normal; }
.quality-inspection-flow { display:grid; }
.quality-inspection-question { display:grid; gap:9px; padding:17px 0; border-bottom:1px solid #e7edf5; animation:quality-question-in .16s ease both; }
.quality-inspection-question-title { display:flex; align-items:center; gap:9px; color:#20314a; }
.quality-inspection-question-title > span { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; color:#1769e0; background:#eaf2ff; font-size:12px; font-weight:800; }
.quality-inspection-question-title strong { font-size:14px; }
.quality-inspection-choice-row { display:flex; gap:8px 18px; flex-wrap:wrap; padding-left:33px; }
.quality-inspection-choice { position:relative; display:inline-flex; align-items:center; gap:7px; min-height:34px; cursor:pointer; }
.quality-inspection-choice input { width:17px; height:17px; margin:0; accent-color:#1677ff; }
.quality-inspection-choice span { color:#26364d; font-size:14px; }
.quality-inspection-question > select, .quality-inspection-question > input { width:calc(100% - 33px); margin-left:33px; }
.quality-inspection-photo-types { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-left:33px; }
.quality-inspection-photo-type { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px 12px; align-items:center; padding:12px; border:1px solid #dbe5f2; border-radius:10px; background:#f8fafc; }
.quality-inspection-photo-type strong, .quality-inspection-photo-type small { display:block; }
.quality-inspection-photo-type small { margin-top:3px; color:var(--muted); }
.quality-inspection-photo-type .quality-inspection-preview { grid-column:1 / -1; min-height:70px; }
.quality-inspection-evidence { display:grid; gap:14px; padding-top:18px; }
.quality-inspection-evidence[hidden] { display:none; }
.quality-inspection-evidence > label { display:grid; gap:7px; }
.quality-inspection-guide .quality-inspection-basic,
.quality-inspection-guide .quality-inspection-flow { align-content:start; }
.quality-inspection-guide .quality-inspection-basic { gap:9px; padding:0 0 10px; }
.quality-inspection-guide .quality-inspection-basic label { gap:4px; }
.quality-inspection-guide .quality-inspection-basic input,
.quality-inspection-guide .quality-inspection-basic select,
.quality-inspection-guide .quality-inspection-question > select,
.quality-inspection-guide .quality-inspection-question > input { min-height:38px; padding-top:7px; padding-bottom:7px; }
.quality-inspection-guide .quality-inspection-question { gap:6px; padding:9px 0; }
.quality-inspection-guide .quality-inspection-question-title { gap:7px; }
.quality-inspection-guide .quality-inspection-question-title > span { width:22px; height:22px; }
.quality-inspection-guide .quality-inspection-choice-row { gap:4px 16px; padding-left:29px; }
.quality-inspection-guide .quality-inspection-choice { min-height:28px; gap:6px; }
.quality-inspection-guide .quality-inspection-question > select,
.quality-inspection-guide .quality-inspection-question > input { width:calc(100% - 29px); margin-left:29px; }
.quality-inspection-guide .quality-inspection-photo-types { gap:8px; padding-left:29px; }
.quality-inspection-guide .quality-inspection-photo-type { gap:7px 10px; padding:9px; }
.quality-inspection-guide .quality-inspection-evidence { gap:10px; padding-top:12px; }
@keyframes quality-question-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.quality-inspection-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.quality-inspection-upload { display:grid; gap:10px; margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#f8fafc; }
.quality-inspection-upload-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.quality-inspection-upload-head strong, .quality-inspection-upload-head small { display:block; }
.quality-inspection-upload-head small { margin-top:4px; color:var(--muted); }
.quality-inspection-file-button { position:relative; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.quality-inspection-file-button input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.quality-inspection-preview { display:flex; gap:10px; min-height:82px; flex-wrap:wrap; align-items:center; }
.quality-inspection-preview-item { position:relative; width:84px; height:70px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; }
.quality-inspection-preview-item img { width:100%; height:100%; display:block; object-fit:cover; }
.quality-inspection-remove-image { position:absolute; top:3px; right:3px; display:grid; width:21px; height:21px; padding:0; border:0; border-radius:50%; place-items:center; color:#fff; background:rgba(15,23,42,.78); font-size:15px; line-height:1; cursor:pointer; }

@media (max-width: 820px) {
  .after-sales-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .after-sales-filter label {
    min-width: 0;
  }
  .quality-inspection-filter { align-items:stretch; flex-direction:column; }
  .quality-inspection-filter label { min-width:0; }
  .quality-inspection-check-grid { grid-template-columns:1fr; }
  .quality-inspection-upload-head { align-items:flex-start; flex-direction:column; }
  .quality-inspection-choice-row { gap:6px 14px; padding-left:0; }
  .quality-inspection-question > select, .quality-inspection-question > input { width:100%; margin-left:0; }
  .quality-inspection-photo-types { grid-template-columns:1fr; padding-left:0; }
  .quality-inspection-guide .drawer-head { padding:11px 14px 9px; }
  .quality-inspection-guide > .form { padding:10px 14px 13px; }
  .quality-inspection-guide { height:auto; max-height:calc(100dvh - 96px - env(safe-area-inset-bottom)); }
  .quality-inspection-guide.is-height-locked { height:min(var(--quality-inspection-initial-height),calc(100dvh - 96px - env(safe-area-inset-bottom))); }
  .modal:has(.quality-inspection-guide) { height:auto; max-height:calc(100dvh - 96px - env(safe-area-inset-bottom)); }
  .quality-inspection-guide .quality-inspection-choice-row,
  .quality-inspection-guide .quality-inspection-photo-types { padding-left:0; }
  .quality-inspection-guide .quality-inspection-question > select,
  .quality-inspection-guide .quality-inspection-question > input { width:100%; margin-left:0; }
}
.mini-program-page { display: grid; gap: 16px; }
.mini-program-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.mini-program-page-head h2 { margin: 0 0 6px; font-size: 22px; }
.mini-program-page-head p { margin: 0; color: var(--muted); }
.mini-program-update-time { color: var(--muted); font-size: 13px; white-space: nowrap; }
.mini-program-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.mini-program-editor, .mini-program-section { display: grid; gap: 16px; }
.mini-program-section-head h3 { margin: 0 0 4px; font-size: 17px; }
.mini-program-section-head p { margin: 0; color: var(--muted); font-size: 13px; }
.mini-program-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mini-program-image-card { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.mini-program-image-preview { width: 140px; height: 88px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; color: #8ca0ba; background: #eaf0f8; cursor: pointer; transition: box-shadow .16s ease, transform .16s ease; }
.mini-program-image-preview:hover { box-shadow: 0 0 0 3px rgba(23,105,224,.14); transform: translateY(-1px); }
.mini-program-image-preview img, .mini-program-phone-image img { width: 100%; height: 100%; display: block; }
.mini-program-image-preview img { object-fit: cover; }
.mini-program-phone-image img { object-fit: cover; }
.mini-program-image-preview.square { width: 96px; height: 96px; background: #fff; border: 1px solid var(--line); }
.mini-program-image-preview.square img { object-fit: contain; }
.mini-program-image-preview span { display: grid; place-items: center; gap: 4px; font-size: 12px; }
.mini-program-image-preview svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mini-program-image-copy { display: grid; gap: 4px; min-width: 0; }
.mini-program-image-copy small { color: var(--muted); }
.mini-program-image-dimension-status { display: block; min-height: 18px; font-size: 12px; line-height: 1.45; }
.mini-program-image-dimension-status.is-valid { color: #197447; font-weight: 700; }
.mini-program-image-dimension-status.is-warning { color: #b23b2a; font-weight: 700; }
.mini-program-poster-block { display: grid; gap: 8px; }
.mini-program-poster-block h4 { margin: 0; color: #263752; font-size: 14px; }
.mini-program-poster-size-guide { display: grid; gap: 9px; padding: 12px 14px; border: 1px solid #b9d5ff; border-radius: 12px; background: linear-gradient(135deg, #f4f8ff, #eef5ff); color: #263752; }
.mini-program-poster-size-guide > strong { color: #164f9f; font-size: 14px; }
.mini-program-poster-size-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini-program-poster-size-items > span { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #d5e4fa; border-radius: 9px; background: rgba(255,255,255,.88); }
.mini-program-poster-size-items b { flex: none; font-size: 13px; }
.mini-program-poster-size-items i { min-width: 0; color: #1769e0; font-size: 15px; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-program-poster-size-items small { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: #e8f1ff; color: #4f6787; font-size: 11px; white-space: nowrap; }
.mini-program-poster-size-guide p { margin: 0; color: #5d6f87; font-size: 12px; line-height: 1.5; }
.mini-program-poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini-program-poster-grid .mini-program-image-card { grid-template-columns: 1fr; gap: 8px; padding: 10px; }
.mini-program-poster-grid .mini-program-image-preview { position: relative; width: 100%; height: auto; }
.mini-program-poster-grid .mini-program-image-preview.has-image { background: #111827; }
.mini-program-poster-grid .mini-program-image-preview img { object-fit: contain; }
.mini-program-poster-grid .mini-program-image-preview.has-image::after { content: "完整原图"; position: absolute; right: 7px; top: 7px; padding: 3px 7px; border-radius: 999px; background: rgba(15,23,42,.78); color: #fff; font-size: 10px; line-height: 1.2; pointer-events: none; }
.mini-program-poster-grid [data-home-image-card="storefrontImages"] .mini-program-image-preview { aspect-ratio: 702 / 254; }
.mini-program-poster-grid [data-home-image-card="activityImages"] .mini-program-image-preview { aspect-ratio: 702 / 202; }
.mini-program-poster-grid .mini-program-image-preview.has-image { aspect-ratio: auto; }
.mini-program-poster-grid .mini-program-image-preview.has-image img { height: auto; max-height: 260px; }
.mini-program-image-remove { justify-self: start; padding: 2px 0; border: 0; background: transparent; color: #8b5b16; font-size: 12px; cursor: pointer; }
.mini-program-image-remove:hover { color: #b63c24; text-decoration: underline; }
.mini-program-qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini-program-qr-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc; }
.mini-program-qr-editor .mini-program-image-card { grid-template-columns: 96px minmax(0, 1fr); padding: 0; border: 0; background: transparent; }
.mini-program-qr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mini-program-qr-fields label { display: grid; gap: 4px; color: #42526a; font-size: 12px; }
.mini-program-qr-fields input { width: 100%; min-width: 0; }
.mini-program-upload-button { margin: 0; cursor: pointer; white-space: nowrap; }
.mini-program-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mini-program-form-grid label { display: grid; gap: 6px; color: #42526a; font-size: 13px; }
.mini-program-form-grid label.wide { grid-column: 1 / -1; }
.mini-program-form-grid input { width: 100%; }
.mini-program-actions { display: flex; align-items: center; gap: 12px; }
.mini-program-actions span { color: var(--muted); font-size: 13px; }
.mini-program-location-field { display: grid; gap: 10px; padding-top: 2px; }
.mini-program-location-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.mini-program-location-head > div { display: grid; gap: 4px; }
.mini-program-location-head small, .mini-program-location-head > span { color: var(--muted); font-size: 12px; }
.mini-program-map { position: relative; height: 330px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #dfe8f1; cursor: crosshair; touch-action: none; user-select: none; }
.mini-program-map.dragging { cursor: grabbing; }
.mini-program-map-tiles, .mini-program-map-tiles img { position: absolute; width: 256px; height: 256px; }
.mini-program-map-tiles { inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mini-program-map-marker { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; border: 4px solid #fff; border-radius: 50% 50% 50% 0; background: #e53935; box-shadow: 0 3px 10px rgba(0,0,0,.32); transform: translate(-50%, -100%) rotate(-45deg); pointer-events: none; }
.mini-program-map-marker::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.mini-program-map-controls { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.mini-program-map-controls button { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #cad5e3; border-radius: 8px; background: rgba(255,255,255,.95); box-shadow: 0 2px 8px rgba(24,42,70,.12); color: #23334d; font-weight: 700; }
.mini-program-map > a { position: absolute; right: 6px; bottom: 5px; padding: 2px 4px; border-radius: 3px; background: rgba(255,255,255,.82); color: #49617d; font-size: 10px; text-decoration: none; }
.mini-program-preview-card { padding: 14px; position: sticky; top: 12px; }
.mini-program-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mini-program-preview-head small { color: var(--muted); }
.mini-program-phone { border: 7px solid #172033; border-radius: 24px; padding: 15px 12px 18px; background: #f7f8fb; min-height: 560px; display: grid; gap: 10px; align-content: start; box-shadow: inset 0 0 0 1px #050a12; }
.mini-program-phone-nav { display: grid; gap: 2px; padding: 4px 2px 2px; }
.mini-program-phone-nav strong { font-size: 15px; }
.mini-program-phone-nav small { color: #7c8ca5; font-size: 10px; }
.mini-program-phone > b { font-size: 12px; margin-top: 3px; }
.mini-program-phone-image { width: 100%; height: auto; aspect-ratio: 702 / 254; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: #dce6f3; color: #8294ad; font-size: 12px; }
.mini-program-phone-image.activity { aspect-ratio: 702 / 202; }
.mini-program-preview-social { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.mini-program-preview-social > span { min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid #e6ebf2; text-align: center; }
.mini-program-preview-social i { width: 40px; height: 40px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: #edf2f8; color: #8a9ab0; font-size: 8px; font-style: normal; }
.mini-program-preview-social i img { width: 100%; height: 100%; object-fit: contain; }
.mini-program-preview-social strong, .mini-program-preview-social small { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-program-preview-social strong { font-size: 9px; }
.mini-program-preview-social small { color: #8695aa; font-size: 7px; }
.mini-program-preview-info { display: grid; gap: 7px; padding: 10px; border-radius: 8px; background: #fff; border: 1px solid #e6ebf2; font-size: 10px; line-height: 1.5; }
@media (max-width: 1180px) { .mini-program-layout { grid-template-columns: 1fr; } .mini-program-preview-card { position: static; max-width: 360px; } }
@media (max-width: 720px) { .mini-program-page-head { align-items: flex-start; flex-direction: column; } .mini-program-image-grid, .mini-program-form-grid, .mini-program-qr-grid, .mini-program-poster-size-items { grid-template-columns: 1fr; } .mini-program-form-grid label.wide { grid-column: auto; } .mini-program-image-card { grid-template-columns: 110px minmax(0, 1fr); } .mini-program-image-preview { width: 110px; height: 76px; } .mini-program-image-preview.square { width: 88px; height: 88px; } .mini-program-poster-grid .mini-program-image-card { grid-template-columns: 110px minmax(0, 1fr); } .mini-program-poster-grid .mini-program-image-preview { width: 110px; height: auto; } .mini-program-qr-fields { grid-template-columns: 1fr; } .mini-program-upload-button { grid-column: 1 / -1; text-align: center; } .mini-program-preview-card { max-width: none; } .mini-program-location-head { align-items: flex-start; flex-direction: column; } .mini-program-map { height: 280px; } }
.listing-media-add { border-color:#b8a5ed; color:#6d4bc3; background:#faf8ff; }
.listing-media-add:hover { border-color:#7651cf; background:#f5f0ff; color:#5a37b4; }
.xianyu-queue-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 14px;
  padding: 10px 12px;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  background: #f8fafc;
}
.xianyu-queue-summary span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 9px;
  background: #fff;
}
.xianyu-queue-summary small { color: #687386; }
.xianyu-queue-summary strong { color: #1769d2; font-size: 18px; }
.xianyu-queue-summary em { margin-left: auto; color: #c2410c; font-size: 12px; font-style: normal; }
@media (max-width: 820px) {
  .xianyu-queue-summary { align-items: stretch; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; padding: 8px; }
  .xianyu-queue-summary span { flex: 1 1 0; justify-content: space-between; min-width: 132px; }
  .xianyu-queue-summary em { flex: 1 0 100%; margin-left: 0; }
}

/* Final desktop select geometry. Keep this after legacy one-click rules. */
@media (min-width: 821px) {
  .filter-panel .filter-employee {
    width: clamp(210px, 18vw, 270px);
  }

  .filter-panel .filter-work-item {
    width: clamp(260px, 24vw, 340px);
  }

  .inventory-advanced-filter > label[data-filter-level="brand"] {
    flex: 0 0 168px;
    width: 168px;
    min-width: 168px;
  }

  .inventory-advanced-filter > .inventory-status {
    flex: 0 0 112px;
    width: 112px;
  }

  .inventory-advanced-filter > .inventory-category {
    flex: 0 0 136px;
    width: 136px;
  }

  .inventory-advanced-filter > label[data-filter-level="storage"],
  .inventory-advanced-filter > label[data-filter-level="color"] {
    flex: 0 0 128px;
    width: 128px;
  }

  .inventory-advanced-filter > label[data-filter-level="model"] {
    flex: 0 0 360px;
    width: 360px;
    min-width: 360px;
    max-width: 100%;
  }

  .one-click-filter-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .one-click-filter-grid label[data-filter-level="brand"] {
    flex: 0 0 168px;
    width: 168px;
    min-width: 168px;
  }

  .one-click-filter-grid .one-click-upload-status,
  .one-click-filter-grid .one-click-sync-status {
    flex: 0 0 136px;
    width: 136px;
    min-width: 136px;
  }

  .one-click-filter-grid .one-click-category {
    flex: 0 0 168px;
    width: 168px;
    min-width: 168px;
  }

  .one-click-filter-grid label[data-filter-level="storage"],
  .one-click-filter-grid label[data-filter-level="color"] {
    flex: 0 0 152px;
    width: 152px;
    min-width: 152px;
  }

  .one-click-filter-grid label[data-filter-level="model"] {
    flex: 0 0 360px;
    width: 360px;
    min-width: 360px;
    max-width: 100%;
  }

  .listing-preset-select,
  .listing-batch-preset select {
    width: 240px;
    min-width: 240px;
    max-width: min(320px, 100%);
  }

  .drawer:has(.machine-picker-v2) {
    padding-left: 256px;
  }

  .modal:has(.machine-picker-v2) {
    width: min(1040px, calc(100vw - 272px));
    max-width: none;
  }
}

/* Notebook inventory uses independent structured specifications without reusing phone rows. */
.laptop-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 12px;
  min-width: 0;
  margin: 9px 0;
  padding: 12px;
  border: 1px solid #e7edf5;
  border-radius: 10px;
  background: #fbfcfe;
}

.laptop-spec-grid > label {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 600;
}

.laptop-spec-grid input,
.laptop-spec-grid select,
.laptop-spec-grid textarea,
.laptop-spec-grid .percent-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-color: #e4e7ec;
  box-shadow: none;
}

.laptop-spec-grid input,
.laptop-spec-grid select,
.laptop-spec-grid .percent-input {
  height: 34px;
  min-height: 34px;
}

.laptop-spec-grid input,
.laptop-spec-grid select,
.laptop-spec-grid textarea {
  padding: 5px 9px;
  font-size: 13px;
}

.laptop-spec-grid .percent-input {
  grid-template-columns: minmax(0, 1fr) 30px;
}

.laptop-spec-grid .percent-input input {
  height: 32px;
  min-height: 32px;
  border: 0;
}

.laptop-machine-detail,
.laptop-machine-detail > .form,
.laptop-machine-detail .laptop-spec-grid {
  max-width: 100%;
  overflow-x: hidden;
}

.inventory-machine-info > small {
  overflow-wrap: anywhere;
}

@media (min-width: 821px) {
  .drawer:has(.laptop-machine-detail) {
    box-sizing: border-box;
    padding-left: 218px;
  }

  .modal:has(.laptop-machine-detail) {
    width: min(900px, calc(100vw - 250px));
    max-width: 900px;
  }
}

@media (max-width: 1020px) {
  .laptop-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .drawer:has(.laptop-machine-detail) {
    padding-left: 0;
  }

  .laptop-spec-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }
}

/* 绩效任务模板：管理端配置与员工端效果预览。 */
.modal:has(.job-template-modal) {
  width: min(1040px, calc(100vw - 32px));
  height: min(900px, calc(100dvh - 32px));
  max-height: min(900px, calc(100dvh - 32px));
  overflow: hidden;
}

.job-template-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.job-template-drawer-head { min-height: 70px; padding: 15px 20px; }
.job-template-drawer-head h2 { margin: 0; color: #14233d; font-size: 18px; }
.job-template-drawer-head p { margin: 5px 0 0; color: #7a8799; font-size: 12px; }
.job-template-form { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.job-template-layout { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(310px, .82fr); min-height: 0; overflow: hidden; }
.job-template-config { min-width: 0; padding: 15px 18px 20px 20px; overflow-y: auto; background: #f8fbff; scrollbar-width: thin; }
.job-template-section { display: grid; gap: 13px; margin-bottom: 13px; padding: 15px; border: 1px solid #dfe8f3; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(27, 72, 131, .045); }
.job-template-section-title { display: flex; align-items: center; gap: 10px; }
.job-template-section-title > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #216be6; background: #eaf2ff; font-size: 11px; font-weight: 800; }
.job-template-section-title > div { display: grid; gap: 3px; }
.job-template-section-title strong { color: #243a5c; font-size: 14px; }
.job-template-section-title small { color: #8b98aa; font-size: 11px; }
.job-template-fields { display: grid; gap: 11px; }
.job-template-fields.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.job-template-fields.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.job-template-fields label, .job-template-section > label { position: relative; }
.job-template-field-suffix { margin-top: -6px; color: #8a98ab; font-size: 11px; }
.job-template-switch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e0e8f2; border-radius: 10px; background: #f7faff; }
.job-template-switch input { width: 17px; min-height: 17px; accent-color: #246fe2; }
.job-template-switch span { display: grid; gap: 3px; }
.job-template-switch strong { color: #365174; font-size: 12px; }
.job-template-switch small { color: #8492a5; font-size: 11px; }
.job-template-component-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #405574; font-size: 12px; }
.job-template-add-component { min-height: 32px; padding: 6px 10px; border: 1px solid #b9d1f5; border-radius: 8px; color: #216be6; background: #edf5ff; box-shadow: none; font-size: 12px; }
.job-template-component-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 9px; border: 1px solid #d6e4f7; border-radius: 10px; background: #f6faff; }
.job-template-component-picker[hidden], .job-template-reviewer-list[hidden], .job-template-audit-condition[hidden] { display: none; }
.job-template-component-picker button { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 8px; border: 1px solid #d9e4f2; border-radius: 8px; color: #385273; background: #fff; box-shadow: none; font-size: 11px; }
.job-template-component-picker button:hover { border-color: #9cbff3; color: #216be6; background: #edf5ff; }
.job-template-component-picker button span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 6px; color: #216be6; background: #eaf2ff; font-weight: 800; }
.job-template-submission-list { display: grid; gap: 9px; }
.job-template-submission-item { padding: 10px; border: 1px solid #dbe6f2; border-radius: 11px; background: #fbfdff; }
.job-template-submission-item-head { display: grid; grid-template-columns: 24px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.job-template-submission-index { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; color: #70829b; background: #edf2f8; font-size: 11px; font-weight: 700; }
.job-template-submission-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #216be6; background: #eaf2ff; font-weight: 800; }
.job-template-submission-item-head > div { display: grid; min-width: 0; gap: 2px; }
.job-template-submission-item-head strong { overflow: hidden; color: #2b4261; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.job-template-submission-item-head small { overflow: hidden; color: #8a98aa; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.job-template-submission-actions { display: inline-flex !important; gap: 4px !important; }
.job-template-submission-actions button { min-width: 28px; min-height: 28px; padding: 4px 6px; color: #6380a4; font-size: 11px; }
.job-template-submission-actions button:disabled { opacity: .35; cursor: not-allowed; }
:where(.job-template-modal) .danger-text { color: #c33e4e !important; }
.job-template-submission-item-body { display: grid; grid-template-columns: minmax(0, 1.4fr) 72px 90px 90px minmax(0, 1fr); align-items: end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e1e8f1; }
.job-template-required-toggle { display: inline-flex !important; align-items: center; gap: 6px; min-height: 36px; color: #586d89; font-size: 11px; }
.job-template-required-toggle input { width: 16px; min-height: 16px; accent-color: #246fe2; }
.job-template-empty-components { display: grid; justify-items: center; gap: 4px; padding: 20px 12px; border: 1px dashed #cddbeb; border-radius: 10px; color: #8593a6; background: #fafcff; text-align: center; }
.job-template-empty-components strong { color: #4d6381; font-size: 12px; }
.job-template-empty-components span { font-size: 11px; }
.job-template-audit-hint { align-self: center; padding: 10px 12px; border-radius: 9px; color: #6c7f99; background: #f4f7fb; font-size: 11px; line-height: 1.5; }
.job-template-reviewer-list { display: flex; flex-wrap: wrap; gap: 7px; }
.job-template-reviewer-option { display: inline-flex !important; align-items: center; gap: 6px; min-height: 30px; padding: 5px 9px; border: 1px solid #dce6f2; border-radius: 8px; color: #526984; background: #fff; font-size: 11px; }
.job-template-reviewer-option:has(input:checked) { border-color: #a6c5f4; color: #216be6; background: #edf5ff; }
.job-template-reviewer-option input { width: 15px; min-height: 15px; accent-color: #246fe2; }
.job-template-preview { min-width: 0; padding: 15px 18px 20px; overflow-y: auto; background: #eef4fb; scrollbar-width: thin; }
.job-template-preview-shell { display: grid; gap: 10px; min-height: 100%; align-content: start; }
.job-template-preview-head { display: flex; align-items: center; justify-content: space-between; color: #3a5272; font-size: 13px; font-weight: 750; }
.job-template-preview-head small { color: #8b99ac; font-size: 11px; font-weight: 500; }
.job-template-phone { width: min(100%, 330px); margin: 5px auto 0; padding: 10px; border: 1px solid #d4e0ed; border-radius: 25px; background: #dfe9f5; box-shadow: 0 18px 34px rgba(42, 76, 119, .14); }
.job-preview-phone-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 7px 10px; color: #627590; font-size: 11px; }
.job-preview-phone-bar i { padding: 3px 7px; border-radius: 999px; color: #286bc8; background: #edf5ff; font-style: normal; font-size: 10px; }
.job-preview-task-card { padding: 15px 14px; border: 1px solid #e2eaf4; border-radius: 17px; background: #fff; box-shadow: 0 8px 20px rgba(28, 62, 104, .08); }
.job-preview-task-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.job-preview-task-top > div { display: grid; gap: 4px; min-width: 0; }
.job-preview-task-top strong { overflow: hidden; color: #1d3455; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.job-preview-task-top small { color: #2a76da; font-size: 12px; font-weight: 700; }
.job-preview-task-top > span { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; color: #6b7f9c; background: #f1f5fa; font-size: 10px; }
.job-preview-description { margin: 10px 0; color: #7c8ba0; font-size: 11px; line-height: 1.55; }
.job-preview-progress { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: #f6f9fd; }
.job-preview-progress > div { display: flex; justify-content: space-between; color: #8290a2; font-size: 10px; }
.job-preview-progress b { color: #2a67bb; font-size: 12px; }
.job-preview-progress > i { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: #e1eaf5; }
.job-preview-progress > i em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2d80eb, #6b6ee7); }
.job-preview-submission-title { margin: 15px 0 8px; color: #344e70; font-size: 12px; font-weight: 750; }
.job-preview-fields { display: grid; gap: 9px; }
.job-preview-field { display: grid; gap: 5px; }
.job-preview-field > span { display: flex; align-items: center; gap: 5px; color: #566b88; font-size: 11px; }
.job-preview-field > span em { color: #e36b55; font-size: 10px; font-style: normal; }
.job-preview-field > span small { color: #94a2b4; font-size: 10px; }
.job-preview-field textarea, .job-preview-field input, .job-preview-picker { width: 100%; min-height: 34px; padding: 8px 9px; border: 1px solid #dce6f1; border-radius: 8px; color: #8b99aa; background: #fbfdff; box-sizing: border-box; font-size: 11px; }
.job-preview-field textarea { resize: none; }
.job-preview-upload, .job-preview-picker { text-align: left; cursor: default; }
.job-preview-upload { color: #2a6fcf; background: #edf5ff; }
.job-preview-field > small { color: #9aa7b8; font-size: 10px; }
.job-preview-submit { width: 100%; margin-top: 14px; min-height: 38px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #377fe9, #285fd0); opacity: .92; font-size: 12px; }
.job-preview-no-fields { padding: 14px 10px; border: 1px dashed #d5e0ec; border-radius: 8px; color: #95a2b3; background: #fbfdff; font-size: 11px; text-align: center; }
.job-template-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 18px 11px 20px; border-top: 1px solid #dfe7f1; background: #fff; }
.job-template-footer > span { color: #8190a4; font-size: 11px; }
.job-template-footer > div { display: flex; gap: 8px; }
.job-template-footer > div button { min-width: 86px; }

@media (max-width: 900px) {
  .modal:has(.job-template-modal) { width: min(720px, calc(100vw - 20px)); height: calc(100dvh - 20px); max-height: calc(100dvh - 20px); }
  .job-template-layout { grid-template-columns: 1fr; overflow-y: auto; }
  .job-template-config, .job-template-preview { overflow: visible; }
  .job-template-preview { padding-top: 0; }
  .job-template-phone { width: min(100%, 360px); }
  .job-template-submission-item-body { grid-template-columns: minmax(0, 1fr) 78px 90px; }
  .job-template-format-field { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .modal:has(.job-template-modal) { width: calc(100vw - 12px); height: calc(100dvh - 12px); }
  .job-template-drawer-head { padding: 13px 14px; }
  .job-template-config { padding: 10px; }
  .job-template-preview { padding: 0 10px 14px; }
  .job-template-fields.cols-2, .job-template-fields.cols-3 { grid-template-columns: 1fr; }
  .job-template-component-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-template-submission-item-head { grid-template-columns: 22px 26px minmax(0, 1fr); }
  .job-template-submission-actions { grid-column: 3; justify-self: end; }
  .job-template-submission-item-body { grid-template-columns: 1fr 1fr; }
  .job-template-required-toggle { grid-column: 1 / -1; }
  .job-template-footer { align-items: stretch; flex-direction: column; padding: 10px 14px; }
  .job-template-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
}

.employee-job-submit-card { max-width: 760px; }
.job-submit-task-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid #d9e6f6; border-radius: 11px; background: #f5f9ff; }
.job-submit-task-summary strong { color: #234a7f; font-size: 15px; }
.job-submit-task-summary span { color: #6d809a; font-size: 12px; text-align: right; }
.job-submit-fields { display: grid; gap: 12px; }
.job-submit-field { display: grid; gap: 6px; }
.job-submit-field > span:first-child { display: flex; align-items: center; gap: 6px; color: #465b78; font-size: 13px; font-weight: 650; }
.job-submit-field > span:first-child em { color: #e06552; font-size: 11px; font-style: normal; font-weight: 500; }
.job-submit-field > span:first-child small { color: #91a0b3; font-size: 11px; font-weight: 500; }
.job-submit-file-picker { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 7px 11px; border: 1px solid #cfe0f5; border-radius: 9px; color: #246bd4; background: #f1f7ff; cursor: pointer; }
.job-submit-file-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.job-submit-file-picker strong { font-size: 12px; }
.job-submit-file-picker small { margin-left: auto; color: #8a9bb1; font-size: 11px; }
.job-submit-field textarea[data-job-path-input] { margin-top: 2px; }
.job-submit-file-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.job-submit-file-preview span { max-width: 220px; overflow: hidden; padding: 4px 7px; border-radius: 6px; color: #5c708b; background: #f2f5f9; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.job-submit-empty { padding: 16px; border: 1px dashed #d4dfec; border-radius: 9px; color: #8b99aa; background: #fbfdff; font-size: 12px; text-align: center; }
.job-submit-upload-progress { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid #cfe0f5; border-radius: 9px; color: #5c7291; background: #f2f7ff; font-size: 11px; }
.job-submit-upload-progress[hidden] { display: none; }

/* Post-release targeted fix: position permission workspace only. */
.role-permission-tabbar .role-permission-tabs:has(> button:only-child) {
  display: inline-flex;
  width: auto;
  min-width: 118px;
  grid-template-columns: none;
}

.role-permission-tabs:has(> button:only-child)::before {
  display: none;
}

.role-permission-tabs:has(> button:only-child) > button.active {
  width: 100%;
  color: #fff;
  background: #2f7be8;
}

.role-permission-tabbar {
  min-width: 0;
}

.role-permission-workspace {
  height: calc(100dvh - 205px);
  min-height: 580px;
}

.role-permission-tabbar > *,
.role-permission-head > *,
.role-permission-title > div,
.role-permission-sections,
.role-permission-actions {
  min-width: 0;
}

.role-scope-note {
  flex-wrap: wrap;
  margin: 0 14px 12px;
}

.role-permission-table-wrap {
  padding-bottom: 14px;
  overscroll-behavior: contain;
}

.role-permission-table {
  min-width: 820px;
}

.role-permission-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.role-permission-actions label,
.role-permission-fixed,
.role-permission-details span {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 820px) {
  .role-permission-workspace {
    height: auto;
    min-height: 0;
  }

  .role-permission-tabbar .role-permission-tabs:has(> button:only-child) {
    width: auto;
  }

  .role-scope-note {
    align-items: flex-start;
  }
}

@media (max-width: 620px) {
  .role-permission-tabbar {
    grid-template-columns: 1fr;
  }

  .role-permission-tabbar .role-permission-tabs,
  .role-new-work-button {
    grid-column: 1;
    justify-self: stretch;
  }

  .role-permission-tabbar .role-permission-tabs:has(> button:only-child) {
    width: 100%;
  }
}